@charset "utf-8";
/*
	Last Update: 2025/10/01
	Auther: iw
*/
/*===================================================================
	common
===================================================================*/
body.pc { display:block !important; }
body.sp { display:block !important; }
.recipe_title_wrap { margin:0 0 30px; }
.recipe_title { display:flex; align-items:center; color:var(--color1); font-weight:bold; background:url(../image/h2_img.png) no-repeat left center / 80px auto; }
body.pc .recipe_title_back a:hover { text-decoration:underline; color:var(--color2); }
	@media (max-width: 575px){
		.recipe_title { font-size:1.5em; padding:0 0 0 60px; min-height:70px; background-size:50px auto; border-bottom:2px solid var(--color1); width:100%; }
		.recipe_title_back { text-align:right; margin-top:5px; }
	}
	@media (min-width: 576px){
		.recipe_title_wrap { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--color1); }
		.recipe_title { font-size:2em; padding:0 0 0 90px; min-height:70px; }
	}

.recipe_hl1 { color:var(--color2); font-size:1.3em; font-weight:bold; margin-bottom:10px; }
.recipe_hl2 { color:var(--color1); font-weight:normal; margin-bottom:15px; padding:0 0 15px; border-bottom:1px solid #ccc; text-align:center; }
	@media (max-width: 575px){
		.recipe_hl2 { font-size:1.1em; }
	}
	@media (min-width: 576px){
		.recipe_hl2 { font-size:1.3em; }
	}

.button._recipe_back { background:#dfe0e7; padding:13px 0; min-width:250px; border-radius:40px; transition:all 0.5s; }
body.pc .button._recipe_back:hover { border-radius:0; }
.button._recipe_item { background:#479090; padding:13px 0; width:100%; border-radius:3px; transition:all 0.5s; color:#fff; }
body.pc .button._recipe_item:hover { background:#007272; }


/*===================================================================
	recipe list
===================================================================*/
.recipe_list_wrap { list-style:none; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; margin-left:-15px; margin-right:-15px; }
.recipe_list_wrap .recipe_list_unit { padding:0 15px 60px; }
.recipe_list_wrap .recipe_list_unit a { display:flex; flex-direction:column; height:100%; position:relative; }
.recipe_list_wrap .recipe_list_unit .movie_mark { position:absolute; right:-5px; top:-5px; line-height:1.0; z-index:2; width:65px; }
	@media (max-width: 575px){
		.recipe_list_wrap .recipe_list_unit .movie_mark { max-width:50px; }
	}
.recipe_list_wrap .recipe_list_unit figure { text-align:center; }
.recipe_list_wrap .recipe_list_unit .photo { aspect-ratio:8 / 7; }
.recipe_list_wrap .recipe_list_unit .photo img { object-fit:cover; width:100%; height:100%; }
.recipe_list_wrap .recipe_list_unit figcaption { text-align:left; margin-top:12px; padding:0; font-weight:bold; color:#593F7F; font-size:1.25em; line-height:1.3; }
.recipe_list_wrap .recipe_list_unit .comment { margin:10px 0 20px !important; font-size:0.9em; line-height:1.7; }
.recipe_list_wrap .recipe_list_unit .items { list-style:none; width:100%; display:flex; flex-wrap:wrap; align-items:start; justify-content:flex-start; padding:0 0 5px; margin:auto 0 0 0; align-self:flex-end; }
.recipe_list_wrap .recipe_list_unit .items > li { font-size:11px; color:#fff; background:#999; border-radius:5px; margin:0 5px 5px 0; line-height:1.1; padding:3px 5px; }
.recipe_list_wrap .recipe_list_unit .items + .button_wrap { margin:0; }
.recipe_list_wrap .recipe_list_unit .button_wrap { margin:auto 0 0 0; width:100%; align-self:flex-end; }
.recipe_list_wrap .recipe_list_unit .button { width:100%; background:#737899; border-radius:8px; padding:12px 0; color:#fff; }
body.pc .recipe_list_wrap .recipe_list_unit .photo:hover { opacity:0.8; }
body.pc .recipe_list_wrap .recipe_list_unit .button:hover { background:#3B4371; }
	@media (max-width: 767px){
		.recipe_list_wrap { margin-left:-7px; margin-right:-7px; margin-top:15px; }
		.recipe_list_wrap .recipe_list_unit { width:50%; padding:0 7px 30px; }
		.recipe_list_wrap .recipe_list_unit figcaption { font-size:1.15em; }
		.recipe_list_wrap .recipe_list_unit .button { padding:9px 0; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.recipe_list_wrap { margin-left:-10px; margin-right:-10px; margin-top:15px; }
		.recipe_list_wrap .recipe_list_unit { width:50%; padding:0 10px 40px; }
		.recipe_list_wrap .recipe_list_unit figcaption { font-size:1.25em; }
	}
	@media (min-width: 768px) and (max-width: 991px){
		.recipe_list_wrap .recipe_list_unit { width:33.333333%; }
	}
	@media (min-width: 992px){
		.recipe_list_wrap .recipe_list_unit { width:25%; }
	}


/*===================================================================
	recipe detail
===================================================================*/
.recipe_detail_wrap { position:relative; }
	@media (min-width: 767px){
		.recipe_detail_images:not(:has(.youtube)) { position:sticky; top:80px; left:0; }
		.recipe_detail_images .youtube { position:sticky; top:80px; left:0; }
	}
.recipe_materials { margin-bottom:30px; }
.recipe_materials dl { display:flex; align-items:center; justify-content:space-between; border-bottom:1px dashed #949ac5; padding:5px 0; }
.recipe_materials dt { font-weight:normal; }
.recipe_materials dd {}
.recipe_making { margin-bottom:30px; }
.recipe_making ol { list-style:decimal; margin-left:1.5em; }
.recipe_making ol > li + li { margin-top:5px; }
.recipe_point { margin-bottom:30px; border:1px solid #B27F46; padding:15px 20px; }
.recipe_point p { font-size:0.95em; }
.recipe_item_wrap { background:#f7f7f7; padding:20px; margin-bottom:30px; }
.recipe_item_unit { display:flex; }
.recipe_item_unit + .recipe_item_unit { margin-top:20px; padding-top:20px; border-top:1px dashed #ddd; }
.recipe_item_unit .image { flex:0 0 auto; }
.recipe_item_unit .image img { object-fit:contain; width:100%; height:100%; }
.recipe_item_unit .text { padding-left:10px; }
.recipe_item_unit .title { color:var(--color1); font-size:1.3em; margin-bottom:10px; }
.recipe_item_unit .comment { margin-bottom:15px; }
	@media (max-width: 575px){
		.recipe_item_unit { align-items:start; }
		.recipe_item_unit .image { width:35%; max-width:170%; aspect-ratio:1 / 1.4; }
	}
	@media (min-width: 576px){
		.recipe_item_unit { align-items:center; }
		.recipe_item_unit .image { width:170px; height:210px; }
	}

.c-intro .h5-ttl{
	font-size: 135%;
	color: #000A46;
	text-align: center;
	border-bottom: 1px solid #CCC;
	padding-bottom: 0.5em;
	margin-bottom: 20px;
}
.c-intro .h6-ttl{
	font-weight: bold;
	color: #000A46;
	font-size: 135%;
	margin-bottom: 0.5em;
	
	}

.c-intro .c-prd{
	float: left;
	width: 40%;
}
.l-prd-dtl{
	float: left;
	width: 60%;
}
.c-intro .c-prd img{
	margin: 0 auto;
	display: block;
}
.c-intro .btn-buy a{
	text-align: center;
    background-color: #479090;
    border-radius: 7px;
    color: #fff;
    padding: 1em 0;
	display: block;
	margin-top: 20px;
}
.c-intro .btn-buy a:hover{
	background-color: #007272;
}
@media only screen and (max-width: 767px) {
	#recipe .c-intro .h5-ttl{
		font-size: 100%;
	}
}


/*===================================================================
	parts
===================================================================*/
.hl_1 { text-align:center; margin-bottom:40px; }
.hl_1 .main { font-size:2.75em; color:var(--color2); letter-spacing:2px; line-height:1.0; font-weight:bold; }
.hl_1 .main._mini { font-size:2.25em; }
.hl_1 .sub { margin-top:10px; letter-spacing:2px; }
	@media (max-width: 575px){
		.hl_1 { margin-bottom:30px; }
		.hl_1 .main { font-size:2em; }
		.hl_1 .main._mini { font-size:2em; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.hl_1 { margin-bottom:30px; }
		.hl_1 .main { font-size:2.5em; }
	}

.hl_2 { font-weight:bold; margin-bottom:20px; font-size:2em; }
.hl_3 { font-weight:bold; margin-bottom:30px; font-size:1.75em; }
.hl_4 { font-weight:bold; margin-bottom:20px; font-size:1.5em; border-bottom:1px solid var(--color2); padding:0 0 5px; color:var(--color2); }

.button._type1 { border:2px solid var(--color1); padding:8px 10px; min-width:200px; border-radius:50px; }
.button._type1 > span { color:var(--color1); font-weight:500; }
body.pc .button._type1:hover { border-radius:0; }

.tbl_1 { width:100%; }
.tbl_1 tr > * { border:3px solid #fff; }
.tbl_1 tbody tr > th { background:#faffeb; font-weight:bold; }
.tbl_1 tbody tr > td { background:#fbfbfb; }
.tbl_1 tfoot tr > * { font-weight:bold; }
	@media (max-width: 575px){
		.tbl_1:not(.tbl_sp) tr > * { padding:10px; }
		.tbl_1.tbl_sp tr > * { padding:10px 5px; }
	}
	@media (min-width: 576px){
		.tbl_1 tr > * { padding:15px; }
	}

.tbl_service { width:100%; }
.tbl_service tr > * { border:3px solid #fff; }
.tbl_service thead tr > th { background:var(--color1); font-weight:bold; text-align:center; color:#fff; }
.tbl_service tbody tr > th { background:#faffeb; font-weight:bold; }
.tbl_service tbody tr > td { background:#fbfbfb; }
.tbl_service tfoot tr > * { font-weight:bold; }
	@media (max-width: 575px){
		.tbl_service:not(.tbl_sp) tr > * { padding:10px; }
		.tbl_service.tbl_sp tr > * { padding:10px 5px; }
	}
	@media (min-width: 576px){
		.tbl_service tr > * { padding:15px; }
		.tbl_service tbody tr > th { width:150px; }
	}

.service_unit { margin-bottom:10px; border-radius:20px; background:var(--color1); padding:20px; color:#fff; }
.service_unit .service_unit_point { text-align:center; font-weight:bold; }
.service_unit .service_unit_title { display:flex; align-items:center; justify-content:center; min-height:80px; }
.service_unit .service_unit_title_in { text-align:center; }
.service_unit .service_unit_title_in > span { display:block; line-height:1.2; }
.service_unit .service_unit_title_in ._small {}
.service_unit .service_unit_title_in ._middle { font-size:1.5em; }
.service_unit .service_unit_title_in ._large { font-size:2.25em; }
.service_unit_text { margin-bottom:30px; }

/*===================================================================
	entry
===================================================================*/
.entry ul > li:before { content:"●"; color:; }
.entry ul > li > ul > li:before { content:"■"; color:; }
.entry ol > li:before { color:; }
.entry ol > li > ol > li:before { color:; }
.entry table thead th { background:; color:; }
.entry table thead td { background:; color:; }
.entry table tbody th { background:; color:; }
.entry table tbody td { background:; color:; }

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@charset "utf-8";

#recipe p{
	margin-block-start: 0;
    margin-block-end: 0;
	margin: 0;
}



/*レシピページ一覧*/
#recipe a {text-decoration: none;}

#recipe .wrapper{
	margin: 0 auto;
	width: 1120px;
}

#recipe h2 {
	clear: both;
	font-size: 180%;
	line-height: 130%;
	color: #000A46;
	background: url(../image/h2_img.png) no-repeat 10px 50%;
	border-bottom: solid 2px #25338F; 
	margin: 1em 0;
	padding: 0.5em 3.3em;
	position: relative; /* for IE6 */
	zoom: 1;
}

.hfban{
	display: flex;
}
.hfban .left{
	margin-right: 10px !important;
}

@media only screen and (max-width: 767px) {
	.hfban{
	display: block;
	}
	.hfban .left{
		margin-right: 0px !important;
		margin-bottom: 6px !important;
	}
}

#recipe .recipe_list ul{
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
    margin-bottom: 50px;
	justify-content: flex-start;
}

.recipe_list li{
	list-style: none;
	width: 254px;
	margin: 3px 0 60px;
    position: relative;
}
.recipe_list li:not(:nth-child(4n)){
	margin-right: 30px;
}

.recipe_list li a{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.recipe_list li figure{ text-align: center;}
.recipe_list li figcaption{
	text-align: left;
    margin-top: 5px;
    height: auto;
    font-weight: bold;
    color: #593F7F;
    font-size: 125%;
}
.recipe_list li figure.new::after{
    content: "";
    background-image: url(../img/recipe/new.png);
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
}


#recipe .recipe_list li p{
	margin: 10px 0 15px;
	font-size: 90%;
	color: #000;
}

.recipe_list div.recipe_btn{
	text-align: center;
	width: 100%;
	margin: auto auto 0;
	background-color: #737899;
	border-radius: 7px;
	color: #fff;
	align-self: flex-end;
	padding: 0.8em 0;
}
.recipe_list div:hover.recipe_btn{
	background-color: #3B4371;
}

#recipe .recipe_img{
	margin: 5em 0;
}
#recipe .recipe_list ul.p-label{
	display: flex;
	margin-top: 0;
	margin-bottom: 3px;
	align-items: baseline;
}
#recipe .recipe_list ul.p-label li{
	padding: 2px 8px 1px;
	margin-right: 3px;
	margin-bottom: 2px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 12px;
	font-weight: normal;
	border-radius: 5px;
	color: #FFFFFF;
	width: auto;
}
#recipe .recipe_list ul.p-label li:last-child{
	margin-right: 0;
}
#recipe .recipe_list .p-label li.yuzu{
	background-color: #FFBF00;
}
#recipe .recipe_list .p-label li.dashi{
	background-color: #BB1177;
}
#recipe .recipe_list .p-label li.jouzu{
	background-color: #FF8000;
}
#recipe .recipe_list .p-label li.maro{
	background-color: #7B5BA3;
}
#recipe .recipe_list .p-label li.tare{
	background-color: #D90000;
}
#recipe .recipe_list .p-label li.gokoku{
	background-color: #B78900;
}
#recipe .recipe_list .p-label li.setouchi{
	background-color: #2F049D;
}
#recipe .recipe_list .p-label li.kyofu{
	background-color: #AD90C1;
}
#recipe .recipe_list .p-label li.beni{
	background-color: #8E2E3F;
}
#recipe .recipe_list .p-label li.dashitsuyu{
	background-color: #56A13D;
}
#recipe .recipe_list .p-label li.benigohan{
	background-color: #0085B2;
}
#recipe .recipe_list .p-label li.gosu{
	background-color: #AD01A5;
}
#recipe .recipe_list .p-label li.namakouji{
	background-color: #BDAD82;
}
#recipe .recipe_list .p-label li.yuzupon{
	background-color: #F2EE5B;
	color: #000000;
}





@media only screen and (max-width: 767px) {
	#recipe .cont{
		width: 98%;
		margin: 0 auto;
	}
	.recipe_list li{
		margin: 3px 0 20px;
		width: 48%;
	}
	.recipe_list li:not(:nth-child(4n)){
		margin-right: 0;
	}
	.recipe_list li:nth-child(2n){
		margin-left: 4%;
	}
	#recipe .recipe_list ul.p-label li:nth-child(2n){
		margin-left: 2px;
		}
	.recipe_list div.recipe_btn{
		font-size: 90%;
	}
	#recipe .recipe_img{
		margin: 1em 0;
	}
    #recipe .recipe_list ul{
    margin-bottom: 0;
    }
    .recipe_list li figure .font-small{
        font-size: 105%;
		/*line-height: 1.2;*/
		line-height: 1.2;
    }
	.recipe_list li figure .font-small02{
        font-size: 105%;
		line-height: 1.2;
    }
}

/*レシピ詳細ページ*/
#recipe .pageBack{
	position: relative;
}
#recipe .pageBack a{
	position: absolute;
	right: 0;
	top: -70px;
	color: #000A46;
}
#recipe .pageBack a:hover{
	text-decoration: underline;
}
#recipe .l-wrap{
	display: flex;
}
#recipe .l-pic{
	width: 50%;
}
#recipe .l-pic video{
	width: 100%;
	margin-top: 20px;
}
.video-wrap {
    position: relative;
}
.video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:60px; /*コントローラー分下部に余白を*/
    cursor: pointer;
}
.video-wrap-ytb{
	margin-top: 20px;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}
.video-wrap-ytb iframe{
	width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

#recipe .l-dtl{
	width: 47%;
}
#recipe .l-dtl {
	margin-left: 3%;
}
#recipe .h3-ttl{
	font-size: 180%;
	color: #593F7F;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 10px;
	
}
#recipe .c-staff ,#recipe .c-howto ,#recipe .c-point{
	margin-top: 25px;
}
#recipe .btn-apply a{
	text-align: center;
    background-color: #525263;
    border-radius: 7px;
    color: #fff;
    padding: 1em 0;
	display: block;
	margin-top: 20px;
}
#recipe .btn-apply a:hover{
	background-color: #474757;
}
#recipe .c-ttl{
	background-color: #ceae8a;
    color: #fff;
    padding: 5px 5px 5px 1em;
	margin-top: 20px;
}
#recipe .c-ttl02{
	background-color: #9F0652;
    color: #fff;
    padding: 5px 5px 5px 1em;
	margin-top: 20px;
}
#recipe .list-0704{
	margin-top: 10px;
	border: 2px solid #cea6ba;
    border-radius: 10px;
    padding: 10px 20px;
	background-color: #f9f5f7;
}
#recipe .list-0704 span{
	color: #9F0652;
}
#recipe .list-0704 li{
	text-indent: -1em;
    margin-left: 1em;
	margin-bottom: 0.5em;
}
#recipe .gentei{
	color: #DF0408;
	border: #DF0408 1px solid;
	border-radius: 3px;
	padding: 1px 5px;
	margin-right: 3px;
}
@media only screen and (max-width: 767px) {
	#recipe .pageBack a{
		position: initial;
		text-align: right;
		display: block;
		margin-bottom: 0.5em;
}
	#recipe .l-wrap{
		display: block;
	}
	#recipe .l-pic{
		width: 100%;
	}
	#recipe .l-dtl{
		margin-left: 0;
		width: 100%;
	}
	#recipe .c-staff dl{
		margin-left: 0;
	}
	#recipe .c-howto ul {
		margin-left: 1.5em;
	}
}

#recipe a img {
	transition: 0.7s;
}
#recipe a:hover img{
	opacity: 0.7;
}

#recipe .ttl-01{
	font-weight: bold;
	color: #593F7F;
	margin-top: 0.5em;
	font-size: 120%;
}
#recipe .ttl-01 span{
	font-size: 70%;
}
#recipe .ttl-02{
	background-color: #9a83bb;
	color: #FFF;
	border-radius: 5px;
	padding: 2px 30px;
	display: inline-block;
	margin-top: 20px;
}


/*五穀だれ*/

.flex-01{
	display: flex;
	width: 84%;
	margin: 80px auto auto;
}
.flex-01 .imgArea01{
	width: 42%;
}
.flex-01 .texArea01{
	padding-left: 24px;
	width: 58%;	
}
.texArea01 img{
	margin-bottom: 40px;
}
.flex-01 .texArea01 .gkk01-tex{
	font-size: 18px;
	line-height: 2;
}
.btn-ggk{
	text-align: center;
	margin: 40px auto;
}
.btn-ggk a{
	background-color: #7C0000;
	color: #fff;
	text-align: center;
	font-size: 24px;
	padding: 10px 50px;
	transition: 0.3s;
	border-radius: 30px;
}
.btn-ggk a:hover{
	opacity: 0.7;
}
.cheat-sheet{
	border: 2px solid #ccc;
	padding: 20px 20px 40px;
	display: inline-block;
}
#recipe.ggkdare .rcpBox{
	margin-bottom: 60px;
}
#recipe.ggkdare .rcpCont{
	width: 640px;
	margin: auto;
	font-size: 20px;
	font-family: 'Noto Sans JP', sans-serif,"游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ";
	font-weight: normal;
	}
#recipe.ggkdare h5.gkk-h5{
	color: #C90027;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 5px;
	font-size: 20px;
}
#recipe.ggkdare .rcpCont dl{
	display: flex;
	flex-wrap: wrap;
}
#recipe.ggkdare .rcpCont dt{
	width: 24%;
}
#recipe.ggkdare .rcpCont dd{
	width: 75%;
}
#recipe.ggkdare .rcpCont dd::before{
	content: "― ";
}
#recipe.ggkdare .rcpCont ul li{
	text-indent: -1.2em;
	margin-left: 1.2em;
	padding-bottom: 0.5em;
}
#recipe.ggkdare .c-intro{
	width: 530px;
	margin: auto auto 40px;
}



@media only screen and (max-width: 767px) {
	.flex-01{
		display: block;
		width: 100%;
		margin: 40px auto auto;
	}
	.flex-01 .imgArea01{
		width: 80%;
		margin: auto !important;
	}
	.flex-01 .texArea01{
		width: 100%;
	}
	.cheat-sheet{
		border: none;
		padding: 10px 0;
	}
	#recipe.ggkdare .rcpCont{
		width: 100%;
		font-size: 18px;
		}
	#recipe.ggkdare .rcpCont dt{
	width: 30%;
		}
	#recipe.ggkdare .rcpCont dd{
		width: 69%;
		}
	#recipe.ggkdare .c-intro{
		width: 100%;
	}
}




#recipe .mt0{
	margin-top: 0;
}
#recipe .mt10{
	margin-top: 10px;
}
#recipe .mt20{
	margin-top: 20px;
}
#recipe .mt30{
	margin-top: 30px;
}
#recipe .mt40{
	margin-top: 40px;
}
#recipe .mt80{
	margin-top: 80px;
}

#recipe .mb10{
	margin-bottom: 10px;
}
#recipe .mb20{
	margin-bottom: 20px;
}
#recipe .mb40{
	margin-bottom: 40px;
}
#recipe .box-prd{
	margin-top: 30px;
	display: block;
	overflow: hidden;
}
#recipe .fontM{
	font-size: 16px;
}
#recipe .fontL{
	font-size: 21px;
}