@charset "utf-8";
/** *****************************************************************
ペザン農園のハーブ図鑑
最終更新日：2020.10.20
***************************************************************** **/
/* *--------------------------------------------------------------------
MV
--------------------------------------------------------------------* */
#MV{
	background-image: url(../../images/dictionary/mainpic.jpg);
	padding-top: 53.333%;
}


/* 
section1
--------------------------------------------------------------------* */
#section1{
    width: 960px;
	margin: 0 auto 0 auto;
}
#section3 h3,
#section1 h3{
    text-align: center;
    background-image: url(../../images/dictionary/line.png);
    background-position:  center bottom;
    color: #9c8a78;
	font-size:32px;
	font-size:3.2rem;
}



#section1 h3 + p.firstexpl{

	margin: 40px auto !important;
}


#typeBLOCK{}

.type1{
    background-image: url(../../images/dictionary/book1.svg);
    background-position:  left top;
    padding-left: 180px;min-height: 216px;
    margin-bottom: 20px;
}
.type2{
    background-image: url(../../images/dictionary/book2.svg);
    background-position:  left top;
    padding-left: 180px;min-height: 216px;
    margin-bottom: 20px;
}
.type3{
    background-image: url(../../images/dictionary/book3.svg);
    background-position:  left top;
    padding-left: 180px;min-height: 216px;
    margin-bottom: 20px;
}
.type4{
    background-image: url(../../images/dictionary/book4.svg);
    background-position:  left top;
    padding-left: 180px;min-height: 216px;
}

#typeBLOCK li{
    float: left;
    width: 36%;
    margin-right: 1%;
}
#typeBLOCK li:last-child{
    width: 26%;
    margin-right:0;
}
#typeBLOCK li a{
	font-size:16px;
	font-size:1.6rem;
    letter-spacing: 0.01em;
    padding: 1px;
}
#typeBLOCK li a:hover{
    color: #ffffff;
    background-color: #000000;
}


@media only screen and (max-width: 768px) {

#section1{
	width: 90%;
	margin: 0 auto 0 auto;
}
#section3 h3,
#section1 h3{
    padding-bottom: 30px;
}

.type1,
.type2,
.type3,
.type4{
    background-size: auto 180px;
    padding-left: 0;
    padding-top: 200px;
    min-height: auto;
    margin-bottom: 20px;
}

#typeBLOCK ul{
    width: 100%;
    margin: 0;
}

#typeBLOCK li{
    width: 59%;
    margin-right: 1%;
}
#typeBLOCK .type4 li,
#typeBLOCK .type3 li{
    width: 100%;
    margin-right: 0;
}

#typeBLOCK li:nth-child(2){
    width: 40%;
    margin-right: 0;
}
#typeBLOCK li:nth-child(3){
    display: none;
}
#typeBLOCK li a{
	font-size:14px;
	font-size:1.4rem;
    letter-spacing: 0.02em;
}

}


/* 
section2
--------------------------------------------------------------------* */
#section2{
    margin: 60px auto 0 auto;
}

#typeLIST{
    position: relative;
    width: 964px;
    margin: auto;
    background: url(../../images/dictionary/paper_bg.png) repeat-y ;
    background-size: 100%;
}

#typeLIST:before{
  content:"";
  display:block;
  background: url(../../images/dictionary/paper_bg_top.png) top center  no-repeat;
  background-size: 100%;
  height:5px;
}

#typeLIST:after{
  content:"";
  display:block;
  background: url(../../images/dictionary/paper_bg_bottom.png) bottom center no-repeat;
  background-size: 100%;
  height:5px;
}

#typeLIST .inner{
    background-image: url(../../images/dictionary/typeLIST_doublelineY.png), url(../../images/dictionary/typeLIST_doublelineY.png);
    background-position: left top,left bottom;
    background-repeat: repeat-x, repeat-x;
    margin: 30px 40px;
    padding: 30px 0;
}

#typeLIST ul{
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
}
#typeLIST ul li{
    width: 50%;
    background-image: url(../../images/dictionary/typeLIST_lineT.png);
    background-position: right top;
    background-repeat: repeat-y;
    margin: 20px 0;
}
#typeLIST ul li:nth-of-type(even) {
    background-image:none;
}

#typeLIST .typeBLOCK{
    position: relative;
    padding: 0 0 0 0;
    margin:  0 20px;
}
#typeLIST .typeBLOCK:after{
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    bottom: -40px; left: 0;
    background-image: url(../../images/dictionary/typeLIST_lineY.png);
    background-repeat:repeat-x;
    height: 20px;
}
#typeLIST ul li:nth-child(21) .typeBLOCK:after,
#typeLIST ul li:nth-child(22) .typeBLOCK:after {
    display: none;
}
#typeLIST ul li.book {
    background-image: url(../../images/dictionary/book.png);
    background-repeat:no-repeat;
    background-position: center center;
    background-size: auto 150px;

}


.typeBLOCK h4{
	font-size:32px;
	font-size:3.2rem;
    letter-spacing: 0.1em;
	font-family: 'dnp-shuei-mincho-pr6n', sans-serif;
	font-weight: 500;
	font-style: normal;
    line-height: 1.25;
    height: 100px;
}
.typeBLOCK dl{
    height: 310px;
}
.typeBLOCK dl dt{
    color: #799a66;
   	width: 35%;
	margin: 0;
	float: left;
	clear: left; 
}
.typeBLOCK dl dd{
	margin: 0 0 0 35%;
}
.typeBLOCK dl dt,
.typeBLOCK dl dd {
    margin-top: 10px;
	font-size:20px;
	font-size:2.0rem;
    line-height: 1.25;
    letter-spacing: 0.03em;
}
.typeBLOCK .pic{
    width: 100%;
    margin-top: 20px;
}
.typeBLOCK .pic .grasspic{
    width: 50%;
    display: inline-block;
}
.typeBLOCK .pic .grasspic img{
/* 画像をまるくする */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.typeBLOCK .pic .icon{
    width: 45%;
    display: inline-block;
    text-align: right;
}
.typeBLOCK .pic .icon img{
    margin: 0 10px;
}

.sankoubunken{
    position: absolute;
    bottom: 8px;
    right: 30px;
}


@media only screen and (max-width: 768px) {

#typeLIST{
    width: 90%;
}
#typeLIST .inner{
    margin: 20px;
    padding: 10px 0;
}

#typeLIST ul{
    flex-direction: column;
}
#typeLIST ul li{
    width: 100%;
    background-image:none;
    margin: 20px 0;
}
#typeLIST .typeBLOCK{
    margin:  0 0;
}
#typeLIST .typeBLOCK:after{
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    bottom: -40px; left: 0;
    background-image: url(../../images/dictionary/typeLIST_lineY.png);
    background-repeat:repeat-x;
    height: 20px;
}
#typeLIST ul li:nth-child(21) .typeBLOCK:after {
    display: none;
}
#typeLIST ul li:nth-child(22) {
    display: none;
}


.typeBLOCK h4{
	font-size:26px;
	font-size:2.6rem;
    height: auto;
    letter-spacing: 0.03em;
}
.typeBLOCK dl{
    height: auto;
}
.typeBLOCK dl dt{
    color: #799a66;
   	width: 35%;
	margin: 0;
	float: left;
	clear: left; 
}
.typeBLOCK dl dd{
	margin: 0 0 0 35%;
}
.typeBLOCK dl dt,
.typeBLOCK dl dd {
    margin-top: 10px;
	font-size:16px;
	font-size:1.6rem;
    line-height: 1.25;
    letter-spacing: 0.03em;
}
.typeBLOCK .pic{
    width: 100%;
    margin-top: 20px;
}
.typeBLOCK .pic .grasspic{
    width: 40%;
}
.typeBLOCK .pic .icon{
    width: 57%;
    text-align: right;
}
.typeBLOCK .pic .icon img{
    margin: 0 10px;
}

.sankoubunken{
    position: static;
    text-align: right;
}

}


/* 
section3
--------------------------------------------------------------------* */
#section3{
    width: 960px;
    text-align: center;
    margin: 60px auto 0 auto;
}

#section3 .block{
    margin: 0 auto;
    background-image:url(../../images/dictionary/typeLIST_lineY.png);
    background-position:left bottom;
    background-repeat:repeat-x;
    padding: 30px 0;
}

#section3 .block h4{
	font-size:32px;
	font-size:3.2rem;
    text-align: center;
    color: #799a66;
	font-family: 'dnp-shuei-mincho-pr6n', sans-serif;
	font-weight: 500;
	font-style: normal;
    line-height: 1;
    margin-bottom: 20px;
}
#section3 .btn{
    margin: 20px auto 0 auto
}


@media only screen and (max-width: 768px) {

#section3{
    width: 90%;;
    text-align: center;
    margin: 60px auto 0 auto;
}

}