@charset "utf-8";

/* common
------------------------------------------------------*/
div#contents{
	max-width:none;
	background-repeat:no-repeat;
	background-position:top right,top 400px left,top 800px right,top 1200px left,top 1600px right,center center;
	background-image:url(../../topics/img/mush.webp),url(../../topics/img/earth.webp),url(../../topics/img/pen.webp),url(../../topics/img/cutlery.webp),url(../../topics/img/acorns.webp),linear-gradient(90deg, #0073ff, #00d097);
}
div#contents div#topics{
	max-width:1024px;
	margin:0 auto 120px;
	padding:30px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	background-color:#fff;
}
	

/* ttl
------------------------------------------------------*/

div.topics:not(.mushroom) h1#cttl{
	background:none;
}
div.topics h1#cttl span{
	background-image:url(../img/ttl/topics_w.webp);
}
div.topics h1.ttl_topics{
	margin:0 auto 45px;
	padding:0 0 30px;
	font-size:32px;
	border-bottom:5px #e6e6e6 solid
}
h1#cttl span {
	background-position:center top 74px,center center;
	background-size: auto 68px,auto;
}



/* list
------------------------------------------------------*/


/* detail
------------------------------------------------------*/
div.topics div#article div.topics-image{
	margin:0 auto 30px;
	text-align:center;
}
div.topics div#article div.topics-image img{
	display:block;
	margin:0 auto;
}

/* mushroom
------------------------------------------------------*/
div.topics.mushroom div#contents{
	background-position:right top 300px,left top 700px ,right top 1100px,left top 1500px,right top 1900px;
	background-image:url(../../mushroom/img/mush.webp),url(../../mushroom/img/earth.webp),url(../../mushroom/img/pen.webp),url(../../mushroom/img/cutlery.webp),url(../../mushroom/img/acorns.webp);
}
div.topics.mushroom div#contents h1#cttl{
	margin-bottom:60px;
}
div.topics.mushroom div#contents div#topics{
	background-color:rgba(255,255,255,0.85);
}
div.topics.mushroom h1#cttl span{
	background-image:url(../img/ttl/mushroom.webp),url(../img/bk_gray.png);
}


/* kinoko_knowledge
------------------------------------------------------*/

div#kinoko div.topics h1.ttl_topics {/*未調整*/
	margin-bottom: 30px;
	background-image: url(../../topics/img/topics_ttl.gif),linear-gradient(135deg, #0073ff, #00d097);
}
div.text:has(div.kinoko_knowledge) - div.topics-image{
	display:none;
}
div#kinoko.kinoko_knowledge ul{
	margin:30px auto 0;
	letter-spacing:-0.4em;
}
div#kinoko.kinoko_knowledge ul li{
	width:calc(33.33% - 20px);
	display:inline-block;
	margin:0 30px 30px 0;
	vertical-align:top;
	letter-spacing:normal;
}
div#kinoko.kinoko_knowledge ul li:nth-child(3n){
	margin-right:0;
}
div#kinoko.kinoko_knowledge ul li img{
	width:calc(100% + 30px);
	max-width: none !important;
	display:block;
	margin:0 0 15px -30px;
}
div#contents div.text div.kinoko_knowledge h1{
	width: 100vw;
	clear: both;
	margin: 0 calc(-50vw + 512px - 30px);
	padding: 15px;
	color: #fff;
	font-size: 32px;
	text-align: center;  background-repeat: no-repeat;
	background-position: right 60px center,center center;
	background-image: url(../../topics/img/topics_ttl.webp),linear-gradient(135deg, #0073ff, #00d097);
	background-size: 200px auto,auto;
}

div#contents div.text div.kinoko_knowledge h2{
	margin:90px auto 30px;
	color:#464646;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.1em;
	border:none;
}
div#contents div.text div.kinoko_knowledge h2:after{
	width:100%;
	height:5px;
	content:"";
	position:relative;
	bottom:-15px;
	left:0;
	display:block;
	background-image:linear-gradient(90deg, #0073ff, #00d097);
}
div#contents div.text div.kinoko_knowledge strong{
	color:#ff4646;
	font-weight:bold;
}
div#contents div.text div.kinoko_knowledge ul li h3{
	margin:0 auto 15px;
	padding:0;
	color:#a47d38;
	letter-spacing:0.1em;
	border:none;
}

div.pickup{
	max-width:calc(820px - 90px - 10px);
	position:relative;
	margin:100px auto;
	padding:45px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	border:#f4a000 5px solid;
	background-color:#ffffe1;
}
div.pickup:before{
	width:350px;
	content:"";
	position:absolute;
	top:-85px;
	left:235px;
	display:block;
	padding-top:39.18%;
	padding-top:129px;
	background:url(../../topics/img/kinoko/pickup.png) no-repeat center center / 100% auto;
}
div#contents div.text div.pickup h3{
	margin:10px 0!important;
	padding:0!important;
	color:#464646!important;
	font-size:20px!important;
	font-weight:bold;
	border:none!important;
	background:transparent!important;
}



/* kinoko_knowledge ：shiitake
------------------------------------------------------*/
div#innder_donnakinoko p{
	width:calc(100% - 300px);
	min-height:260px;
	padding-right:300px;
	background:url(../../topics/img/shiitake/chara_main.webp) no-repeat right center / 250px auto;
}
div#contents div.text table#nutritional_value{
	margin-top:15px;
	border:none;
}
div#contents div.text table#nutritional_value th,
div#contents div.text table#nutritional_value td{
	padding:5px 2em 5px 0;
	border:none;
	border-top:5px #e6e6e6 solid;
	border-rignt:none;
	border-left:none;
	border-bottom:none;
}
div#contents div.text div#shiitake h3{
	margin:30px auto 0;
	padding:0 0 0 45px;;
	color:#a47d38;
	font-size:24px;
	border:none;
	background:url(../img/arr_shiitake.gif) no-repeat left center;
}
div#contents div.text div#shiitake div.pickup + h2 + h3 + p + h3 + p + h3 + p + h2{
	margin:30px auto;
	paddijng:0;
}
div#contents div.text div#shiitake div.pickup + h2 + h3 + p + h3 + p + h3 + p + h2:after{
	display:none;
}


/* Responsive Design
------------------------------------------------------*/

/* 1060px以下 */
@media screen and (max-width:1060px){
	div#contents div#topics{
		max-width:100%;
	}
	div#contents div.text div.kinoko_knowledge h1{
		margin: 0 calc(-50vw + 50% - 30px);
		font-size:28px;
	}
	div.pickup{
		max-width:calc(100% - 90px - 10px);
	}
}

/* 860px以下 */
@media screen and (max-width:860px){
	div#contents{
		background-position:right top,left top 400px,right top 800px,left top 1200px,right top 1600px,center center;
	}
	div.topics.mushroom div#contents{
		background-position:right top,left top 400px,right top 800px,left top 1200px,right top 1600px;
	}
	div#kinoko.kinoko_knowledge ul li{
		width:calc(50% - 15px);
		margin-right:30px;
	}
	div#kinoko.kinoko_knowledge ul li:nth-child(3n){
		margin-right:30px;
	}
	div#kinoko.kinoko_knowledge ul li:nth-child(2n){
		margin-right:0;
	}
	div.pickup{
		max-width:calc(100% - 60px - 10px);
		margin:80px auto;
		padding:35px;
	}
	div.pickup:before{
		width:280px;
		top:-70px;
		left:calc(50% - 140px);
		padding-top:103px;
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div#contents div#topics{
		padding:30px 20px;
	}
	div.topics h1.ttl_topics{
		margin:0 auto 30px;
		padding:0 0 20px;
		font-size:28px;
	}
	div#contents div.text div.kinoko_knowledge h1{
		margin: 0 calc(-50vw + 50%);
		padding:15px 5vw;
		font-size:26px;
		background-position:right 30px center,center center;
		background-size:150px auto,auto;
	}
	div#contents div.text div.kinoko_knowledge h2{
		margin:60px auto 20px;
		font-size:22px;
	}
	div#kinoko.kinoko_knowledge ul li{
		width:100%;
		margin-right:0;
	}
	div#kinoko.kinoko_knowledge ul li:nth-child(2n){
		margin-right:0;
	}
	div#kinoko.kinoko_knowledge ul li img{
		width:calc(100% + 20px);
		margin:0 0 15px -20px;
	}
	div.pickup{
		max-width:calc(100% - 40px - 10px);
		margin:60px auto;
		padding:25px;
	}
	div.pickup:before{
		width:240px;
		top:-60px;
		left:calc(50% - 120px);
		padding-top:88px;
	}
	div#contents div.text div.pickup h3{
		font-size:18px!important;
	}
	div#innder_donnakinoko p{
		width:100%;
		min-height:auto;
		padding-right:0;
		padding-bottom:260px;
		background-position:center bottom;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div#contents div#topics{
		padding:20px 15px;
		border-radius:20px;
	}
	div.topics h1.ttl_topics{
		margin:0 auto 20px;
		padding:0 0 15px;
		font-size:24px;
	}
	div#contents div.text div.kinoko_knowledge h1{
		padding:12px 5vw;
		font-size:24px;
		background-position:right 20px center,center center;
		background-size:120px auto,auto;
	}
	div#contents div.text div.kinoko_knowledge h2{
		margin:45px auto 15px;
		font-size:20px;
	}
	div#contents div.text div.kinoko_knowledge h2:after{
		bottom:-10px;
	}
	div.pickup{
		max-width:calc(100% - 30px - 10px);
		margin:50px auto;
		padding:20px;
	}
	div.pickup:before{
		width:200px;
		top:-50px;
		left:calc(50% - 100px);
		padding-top:74px;
	}
	div#contents div.text div.pickup h3{
		font-size:16px!important;
	}
	div#innder_donnakinoko p{
		padding-bottom:220px;
		background-size:200px auto;
	}
	div#contents div.text table#nutritional_value th,
	div#contents div.text table#nutritional_value td{
		display:block;
		width:100%;
		padding:5px 0;
	}
	div#contents div.text div#shiitake h3{
		padding:0 0 0 35px;
		font-size:20px;
		background-size:auto 22px;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div#contents{
		background-size:150px auto,100px auto,120px auto,130px auto,110px auto,auto;
	}
	div.topics.mushroom div#contents{
		background-size:150px auto,100px auto,120px auto,130px auto,110px auto;
	}
	div#contents div#topics{
		padding:15px 10px;
		border-radius:15px;
	}
	div.topics h1.ttl_topics{
		margin:0 auto 15px;
		padding:0 0 12px;
		font-size:20px;
	}
	div#contents div.text div.kinoko_knowledge h1{
		padding:10px 5vw;
		font-size:20px;
		line-height:1.4;
		background-position:right 15px center,center center;
		background-size:100px auto,auto;
	}
	div#contents div.text div.kinoko_knowledge h2{
		margin:30px auto 10px;
		font-size:18px;
	}
	div#contents div.text div.kinoko_knowledge h2:after{
		bottom:-8px;
	}
	div#kinoko.kinoko_knowledge ul li img{
		width:calc(100% + 15px);
		margin:0 0 10px -15px;
	}
	div.pickup{
		max-width:calc(100% - 20px - 10px);
		margin:40px auto;
		padding:15px;
		border-radius:20px;
	}
	div.pickup:before{
		width:160px;
		top:-40px;
		left:calc(50% - 80px);
		padding-top:59px;
	}
	div#contents div.text div.pickup h3{
		margin:5px 0!important;
		font-size:14px!important;
	}
	div#innder_donnakinoko p{
		padding-bottom:180px;
		background-size:160px auto;
	}
	div#contents div.text div#shiitake h3{
		padding:0 0 0 30px;
		font-size:18px;
		background-size:auto 20px;
	}
}