main{
	background:var(--bg-lightgray);
}
#sec_recipe_detail{
	padding:60px 0;
	text-align:center;
}
#sec_recipe_detail h4{
	font-size:1.8rem;
	color:var(--orange);
	padding:6px;
	text-align:left;
}
#sec_recipe_detail .wrapper{
	max-width:884px;
}
.catch{
	margin:0 0 50px;
	grid-area:areaD;
}
.head{
	display:grid;
	gap:15px 30px;
	grid-template-areas:
			"areaD areaD"
			"areaA areaC"
			"areaB areaC";
	grid-template-columns: 1fr 374px;
}
.head img{
	width:374px;
	grid-area:areaC;
}
.head .ttl_zairyo{
	justify-self: stretch;
}
.ttl{
	display:flex;
	gap:15px;
	align-items:center;
	grid-area:areaA;
}
.ttl p{
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background:var(--orange);
}
.ttl p>span{
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100px;
	text-align: center;
	color:#fff;
	font-size:1.2rem;
}
.ttl p>span span{
	display:block;
	font-size:3rem;
	font-weight:600;
	line-height:3rem;
}
.ttl h3{
	color:var(--orange);
	font-size:3rem;
	text-align:left;
}
.zairyo_wrap{
	grid-area:areaB;
}
.zairyo_wrap p{
	background:#fff;
	border:1px solid #707070;
	padding:8px;
	text-align:left;
	min-height:130px;
	font-size:1.6rem;
}
.body{
	margin-top:20px;
}
.cooking_wrap ol{
	background:#fff;
	border:1px solid #707070;
	text-align:left;
}
.cooking_wrap ol li{
	padding:10px 0 10px 40px;
	border-bottom:1px dotted #707070;
}
.cooking_wrap ol li:last-child{
	border-bottom:none;
}
.cooking_wrap ol li:before{
	top: 15px;
	left: 10px;
}
.eating_wrap{
	margin-top:30px;
}
.eating_wrap p{
	background:#fff;
	border:1px solid #707070;
	padding:8px;
	text-align:left;
	font-size:1.6rem;
}
.youtube {
	margin:50px 0;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}
.relative_item_inner{
	background:#fff;
	border:1px solid #707070;
	padding:15px;
	text-align:left;
	font-size:1.6rem;
	display:flex;
	gap:30px;
}
.relative_item_inner h5{
	font-size:1.6rem;
	margin-bottom:10px;
}
.relative_item_inner p{
	font-size:1.4rem;
}
.relative_item_inner img{
	width:200px;
}
.relative_item_inner p.price{
	font-size:1.6rem;
	font-weight:600;
	margin-bottom:10px;
}
.relative_item_inner a{
	display:inline-block;
	margin-top:15px;
	background:var(--orange);
	color:#fff;
	font-weight:500;
	padding:15px 50px;
	border-radius:50px;
}
.pager_wrap{
	margin:60px 0 15px;
}
.pager_wrap_inner{
	display:flex;
	justify-content:space-between;
	margin-bottom:30px;
}
.pager_wrap_inner a{
	display:inline-block;
	display:flex;
	align-items:center;
	gap:10px;
	justify-content:center;
	border:1px solid #707070;
	padding:15px 30px;
	font-size:1.2rem;
	color:var(--textbase);
	border-radius:50px;
	background:#fff;
}
.back_to_list{
	border:1px solid #707070;
	padding:15px 30px;
	font-size:1.2rem;
	color:var(--textbase);
	border-radius:50px;
	background:#fff;
}
/*------------------------------------------
responsive
------------------------------------------*/
@media screen and (max-width: 1078px) {


}

@media screen and (max-width: 767px) {
	.head{
		display:grid;
		gap:30px;
		grid-template-areas:
				"areaA"
				"areaD"
				"areaC"
				"areaB";
		grid-template-columns: 1fr;
	}
	.head img{
		order:1;
		margin:0 auto;
	}
	.catch{
		margin-bottom:0;
	}


	.ttl p{
		width: 70px;
		height: 70px;
	}
	.ttl p>span{
		width: 70px;
		font-size:1.1rem;
	}
	.ttl p>span span{
		font-size:2rem;
		line-height:2.5rem;
	}
	.ttl h3{
		font-size:2.2rem;
	}


	.head .ttl_zairyo {
	    width: 100%;
	}
	.zairyo_wrap p{
		min-height:auto;
	}
	.pager_wrap_inner a{
		gap:6px;
		padding:10px 15px;
		font-size:1.1rem;
	}
	.back_to_list{
		padding:10px 15px;
	}
	.relative_item_inner{
		flex-direction:column;
		align-items: center;
		text-align:center;
	}
	.relative_item_inner>div{
		width:100%;
	}
	.relative_item_inner img{
		width:auto;
		max-height:150px;
		margin:auto;
	}
	.relative_item_inner p.item_detail{
		width:100%;
		text-align:left;
	}
}