@charset "utf-8";

/* common
------------------------------------------------------*/
div#contents div.inner {
	max-width: 1024px;
	margin: 0 auto 60px;
}
@media screen and (max-width:1264px){
	div#contents div.inner {
		max-width: 100%;
	}
}
	

/* ttl
------------------------------------------------------*/
div.mushroom h1#cttl span{
	background-image:url(../img/ttl/food_education_w.webp),url(../img/bk_gray.png);
}
@media screen and (max-width:640px){
	div.mushroom h1#cttl span{
		-webkit-background-size: 300px auto;
		background-size: 300px auto;
	}
}
div.mushroom h2.pttl {
	margin: 0 0 30px;
	padding:15px;
	color:#fff;
	font-size:32px;
	text-align:center;
	background-repeat:no-repeat;
	background-position:right 60px center;
	background-image: url(../../recipe/img/food_ttl.gif);
	background-size:200px auto,auto;
}
div.recipe h2.pttl::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:100%;
	background:linear-gradient(135deg, #0073ff, #00d097);
	z-index:-1;
}
div.mushroom h3.sttl{
	clear:both;
	margin-top:30px;
	font-size:24px;
	font-weight:bold;
}
div.mushroom h3.sttl:after{
	width:100%;
	height:5px;
	content:"";
	display:block;
	margin:15px 0 20px;
	background-image:linear-gradient(90deg, #0073ff, #00d097);
}
@media screen and (max-width:1264px){
	div.mushroom h2.pttl {
		margin: 0 0 30px;
	}
}


/* food_education
------------------------------------------------------*/
div.food_education div.inner{
	clear:both;
}
div.food_education div.inner img,
div.food_education div.inner p{
	margin-bottom:30px;
}
div.food_education div.inner img{
	float:right;
	display:block;
}
div.food_education div.inner p{
	width:calc(100% - 350px - 30px);
	float:left;
}
div.food_education div#contents div#column3 p.outline + h3.sttl + p{
	width:100%;
}
div.food_education div#contents div#column3 strong{
	font-size:20px;
	font-weight:bold;
}
div.food_education div#contents div#column3 strong:before{
	content:"●";
	color:#0073ff;
}
div#contents div#column5 p {
	float:none;
	margin:0 auto;
}
div.food_education div#contents div#column5 img,
div#contents div#column5 p {
	float:none;
	margin:0 auto;
}
div.food_education div#contents div#column5 img{
	display:block;
	margin-bottom:30px;
}
div.food_education div#contents div#column5 p {
	width:100%;
}
div.food_education div#contents div#column6 {
	margin-bottom: 0;
}
div.food_education div#contents div#column6 p {
	width:100%;
}


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

/* 860px以下 */
@media screen and (max-width:860px){
	div.mushroom h2.pttl {
		margin: 0 0 30px;
	}
	div.food_education div.inner img{
		width:280px;
	}
	div.food_education div.inner p{
		width:calc(100% - 280px - 30px);
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div.mushroom h2.pttl {
		margin: 0 0 30px;
	}
	div.food_education div.inner img{
		width:100%;
		float:none;
		margin-bottom:20px;
	}
	div.food_education div.inner p{
		width:100%;
		float:none;
		margin-bottom:20px;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div.mushroom h2.pttl {
		margin: 0 0 30px;
		font-size:24px;
	}
	div.mushroom h3.sttl{
		margin-top:20px;
		font-size:20px;
	}
	div.mushroom h3.sttl:after{
		margin:10px 0 15px;
	}
	div.food_education div#contents div#column3 strong{
		font-size:18px;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div.mushroom h2.pttl {
		font-size:22px;
		line-height:1.4;
	}
	div.mushroom h3.sttl{
		font-size:18px;
	}
	div.food_education div.inner img,
	div.food_education div.inner p{
		margin-bottom:15px;
	}
}