nav{
	background:url(../img/border.png),url(../img/border.png),url(../../img/navi_bg.jpg);
	background-position:left top,left bottom,left top;
	background-size:auto 15px,auto 15px,auto;
	background-repeat:repeat-x,repeat-x,repeat-x;
}
nav ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:90%;
	max-width:998px;
	margin:0 auto;
	padding:106px 0;
}
nav ul li{
	position:relative;
	width:45%;
	height:104px;
	padding:20px 0 0 14.2%;
	text-align:center;
	border-radius:10px;
	filter:drop-shadow(3px 3px 4px rgba(0,0,0,0.5));
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
nav ul li:first-child{
	background:#FCD4D4;
	border-radius:10px;
	font-size:24px;
	color:#E00068;
}
nav ul li:first-child::before{
	position:absolute;
	content:"";
	width:18.1%;
	height:175px;
	top:-37px;
	left:13.4%;
	background:url(../../img/navi_strwaberry.png) no-repeat;
	background-size:100% auto;
	z-index:2;
}
nav ul li:first-child a{
	display:block;
	color:#E00068;
}
nav ul li span{
	display:block;
	font-size:14px;
}

nav ul li:last-child{
	background:#824A00;
	font-size:24px;
	color:#fff;
}
nav ul li:last-child::before{
	position:absolute;
	content:"";
	width:18.1%;
	height:175px;
	top:-37px;
	left:13.4%;
	background:url(../../img/navi_chocolate.png) no-repeat;
	background-size:100% auto;
	z-index:2;
}
nav ul li:last-child a{
	display:block;
	color:#fff;
}
/*-----------------------*/
section{
	padding:38px 0;
}
#strawberry{
	background:#FCEDF4;
}
#chocolate{
	background:#FFEBCD;
}
.recipe{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:86%;
	max-width:1167px;
	margin:0 auto;
}
.recipe::after{
  content:"";
  display: block;
  width:28.6%;
}
.recipe li{
	position:relative;
	width:28.6%;
	margin:0 0 57px;
	text-align:center;
	letter-spacing:-1px;
}
.recipe li .photo{
	position:relative;
	margin:0 0 10px;
}
.recipe li .photo::before{
	position:absolute;
	content:"";
	width:24.5%;
	height:60px;
	top:-15px;
	right:-5.38%;
	z-index:2;
}
.recipe li .photo::after{
	position:absolute;
	content:"";
	width:24.5%;
	height:60px;
	bottom:-7px;
	left:-5.38%;
	background-position:left bottom;
	z-index:2;
}
.recipe li .photo img{
	width:100%;
}
.recipe li h1{
	font-size:24px;
}
.recipe li p{
	display:flex;
	height:80px;
	width:100%;
	margin:11px auto 16px;
	align-items: center;
	justify-content:center;
}

.recipe li .btn{
	display:block;
	width:249px;
	height:33px;
	margin:0 auto;
	padding:4px 0 0;
	border-radius:16px;
	filter:drop-shadow(1px 3px 3px rgba(0,0,0,0.3));
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.discription{
	width:584px;
	height:317px;
	margin:0 auto;
	padding:50px 70px 0 197px;
	color:#fff;
	line-height:1.2;
	font-weight:200;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.discription h2{
	margin:0 0 12px;
	font-size:24px;
	font-weight:700;
	line-height:1;
}
.discription h2 span{
	display:block;
	margin:0 0 5px;
	font-size:15px;
}
.discription a{
	display:inline-block;
	margin:15px 0 0;
	font-size:14px;
	text-decoration:underline;
	color:#fff;
	font-weight:200;
}

/*strawberry---*/
#strawberry .recipe li .photo::before{
	background:url(../../strawberry/img/masking_r.png) no-repeat;
	background-size:100% auto;
}
#strawberry .recipe li .photo::after{
	background:url(../../strawberry/img/masking_l.png) no-repeat;
	background-size:100% auto;
}
#strawberry .recipe li h1{
	color:#E00068;
}
#strawberry .recipe li .btn{
	background:#FDB1B8 url(../img/btn.png);
	background-size:auto 18px;
}
#strawberry .discription{
	background:url(../../img/strawberry_discription.png) no-repeat;
	background-size:100%;
}

/*chocolate---*/
#chocolate .recipe li .photo::before{
	background:url(../../chocolate/img/masking_r.png) no-repeat;
	background-size:100% auto;
}
#chocolate .recipe li .photo::after{
	background:url(../../chocolate/img/masking_l.png) no-repeat;
	background-size:100% auto;
}
#chocolate .recipe li h1{
	color:#FF6633;
}
#chocolate .recipe li .btn{
	background:#C39A63 url(../img/btn.png);
	background-size:auto 18px;
	color:#fff;
}
#chocolate .discription{
	background:url(../../img/chocolate_discription.png) no-repeat;
	background-size:100%;
}


@media screen and (max-width: 930px) {
	nav div{
		padding:37px 0 136px;
		margin:0 auto;
		text-align:center;
	}
	nav ul{
		padding:0 0 34px;
	}
	nav ul li{
		width:47%;
		height:85px;
		padding:30px 0 0;
	}
	nav ul li:first-child{
		font-size:16px;
	}
	nav ul li:first-child::before{
		width:54px;
		height:115px;
		top:-93px;
		left:50%;
		margin:0 0 0 -27px;
		background-size:100%;
	}
	nav ul li span{
		font-size:11px;
	}
	nav ul li:last-child::before{
		width:54px;
		height:115px;
		top:-93px;
		left:50%;
		margin:0 0 0 -27px;
		background-size:100%;
	}
	nav ul li:last-child{
		padding:30px 0 0;
		font-size:16px;
	}
	
	
	.recipe li{
		width:100%;
	}
	.recipe li p{
		height:auto;
	}
	
	.discription{
		width:94%;
		height:80vw;
		padding:42px 8.8% 0 33.5%;
		font-size:14px;
	}
	.discription h2{
		font-size:20px;
	}
	.discription h2 span{
		font-size:14px;
	}
	
	#strawberry .discription{
		background:url(../../img/strawberry_discription_sp.png) no-repeat;
		background-size:100%;
	}
	#chocolate .discription{
		background:url(../../img/chocolate_discription_sp.png) no-repeat;
		background-size:100%;
	}
}