@charset "utf-8";
/* CSS Document */

div.fixed .prodNav { padding: 0 110px 9px 110px;}
#container .fa,#container .fas { font-weight: 900;}
#container .fa,#container .far,#container .fas { font-family: "Font Awesome 5 Free";}
#container {font-family: "游ゴシック体", "Yu Gothic", YuGothic, Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;　}
#container a { text-decoration: none; }
@media all and (-ms-high-contrast: none) {
  #container * {
    font-family: Meiryo, sans-serif;
  }
}

#container {color: #111; }

.pc #container { width: 100%; min-width: 1200px; color: #333333; font-size: 14px; }
.clearfix::after { content: " "; display: block; clear: both; }
figure { margin: 0; display: inline-block;}


/* header */
div.fixed .prodNav:before, div.fixed .prodNav:after { position: absolute; top: 0; content: ''; height: 80px; width: 100%; background: #fff; }
div.fixed .prodNav:before { left: -100%; }
div.fixed .prodNav:after { right: -100%; }


/* ============================================= ==

	PC style

=============================================== */
.pc #container { font-size: 14px; line-height: 1.5em; line-height: 1.5rem; min-width: 1200px;}
.pc #container .only-sp { display: none !important; }
.pc #container .content-box { width: 1200px; margin: auto; }

.sns > ul li + li { margin-left: 12px; }
.sns > ul a { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #111; border-radius: 100%; transition: .3s; cursor: pointer; }
.sns > ul a:hover { background: #444; }
.sns > ul img { width: 70%; margin: 0 15%; }
.sns > ul { display: flex; justify-content: flex-end; max-width: 1200px; margin: auto; }

/*---------------------------
				     #mv
---------------------------*/
#mv { background: #f8eea6; position: relative; }
#mv:before { content: ""; position: absolute; left: 0; bottom: 22px; z-index: -2; width: 100%; height: 20px; background: transparent; box-shadow: 0px 12px 12px 12px rgba(0,0,0,.2); }
.pc #mv > .ttl_box { position: absolute; width: 35.7143%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url(../images/mv-bg.jpg) center / cover no-repeat; }
.webp .pc #mv > .ttl_box { position: absolute; width: 35.7143%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url(../images/mv-bg.jpg.webp) center / cover no-repeat; }
.pc #mv > .ttl_box .ttl_inner { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 400px; height: 400px; text-align: center; color: #111111; font-weight: bold; }
.pc #mv > .ttl_box .ttl_inner .ttl { font-size: 3rem; line-height: 1.35em; margin-bottom: 100px; letter-spacing: -0.05em; color: #143666; line-height: 1.1em; }
#mv > .ttl_box .ttl_inner .ttl .sub_ttl { position: relative; display: inline-block; background: #57c8c5; border-radius: 50px; font-size: 1.25rem; color: #ffffff; padding: 10px 30px; line-height: 1; letter-spacing: 0; font-family: "游ゴシック体", "Yu Gothic", YuGothic, Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#mv > .ttl_box .ttl_inner .ttl .sub_ttl strong { font-size: 1.75rem; }
#mv > .ttl_box .ttl_inner .ttl .sub_ttl:after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #57c8c5 transparent transparent transparent; border-width: 10px 10px 0 10px; }
#mv > .ttl_box .ttl_inner .ttl small { margin: 20px 0 15px; display: block; font-size: 1.75rem; letter-spacing: 0; line-height: 1.4rem; line-height: 1.16em;}
.pc #mv > figure { float: right; width: 64.2857%; }
#mv > figure img { width: 100%; }
#mv .sns { position: absolute; bottom: 20px; left: 0; width: 100%; }

/*---------------------------
				#anchor_link
---------------------------*/
#anchor_link { margin: auto; position: relative; }
#anchor_link .lead { background: url(../images/lead-l.png) no-repeat center left,url(../images/lead-r.png) no-repeat center right; }
.webp #anchor_link .lead { background: url(../images/lead-l.png) no-repeat center left,url(../images/lead-r.png.webp) no-repeat center right; }
#anchor_link .lead .desc { max-width: 640px; padding: 120px 0; margin: auto; font-size: 18px; line-height: 1.75em; text-align: center; }
.pc #anchor_link ul { max-width: 960px; margin: auto; padding: 20px 0 80px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#anchor_link li { display: table; width: 460px; height: 96px; position: relative; }
#anchor_link li a { font-size: 1rem; display: table-cell; vertical-align: middle; text-align: center; border-radius: 50px; background-color: #def3b2; line-height: 1.8em; color: #628615; font-weight: bold; transition: .2s; padding: 0 40px; }
#anchor_link li a:after { content: "\f0d7"; font-family: "Font Awesome 5 Free"; position: absolute; right: 20px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: #FFF; border-radius: 100%; color: #158a24; box-sizing: border-box; line-height: 1.3;}
#anchor_link li a span { font-size: 1.375rem; }
#anchor_link li a:hover { background-color: #ccf37a; }


/*---------------------------
				  #recipe
---------------------------*/

.recipe { position: relative; }
.recipe:before,.recipe:after { content: ""; position: absolute; top: 0; width: 50px; height: 100%; background: url(../images/omotenashi-recipe-bg.png); z-index: -1; }
.recipe:before { left: 0; }
.recipe:after { right: 0; }
.recipe .h2_ttl { text-align: center; position: relative; padding: 60px 0; }
.recipe .h2_ttl .content-box { position: relative; }
.recipe h2.ttl span { font-size: 2.875rem; line-height: 1; display: inline-block; margin-top: 20px; padding-bottom: 18px; padding-bottom: 10px;}
.recipe h2.ttl small { font-size: 1.75rem; display: block; line-height: 1; }
.recipe .h2_ttl:before { content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; height: 10px; display: block; transform: rotate(180deg); }
.recipe .h2_ttl:after { content: ""; position: absolute; left: 0; top: -10px; width: 100%; height: 10px; display: block; }
.pc #container .recipe .lead.content-box { text-align: center; margin: 60px auto; font-size: 16px;}

.recipe .recipe-block { width: 1000px; padding: 40px; background: #FFF; border-radius: 5px; box-shadow: 0px 0 12px 0 rgba(0,0,0,.2); box-sizing: border-box; margin: auto; text-align: center; position: relative; }
.recipe .recipe-block + .recipe-block { margin-top: 50px; }
.recipe .recipe-block .ttl { font-size: 1.875rem; line-height: 1.5em; }
.recipe .recipe-block .lead { font-size: 1.125rem; text-align: center; margin: 20px 0 0; padding-bottom: 30px; line-height: 1.5em; border-bottom: solid 3px #f4f6c6; position: relative; }
.recipe .recipe-block .lead:before { content: ""; position: absolute; bottom: -10px; right: 0; width: 68px; height: 47px; }
.recipe .recipe-block .lead span { background: linear-gradient(transparent 58%, #f1f158 0); padding: 0 0 2px; font-weight: bold; }
.recipe .recipe-block > figure { box-sizing: border-box; margin-bottom: 30px; }
.recipe .recipe-block > figure img { width: 100%; border-radius: 5px; }
.recipe .recipe-detail { display: flex; }
.recipe .recipe-detail .ing,.recipe .recipe-detail .process { width: 460px; box-sizing: border-box; text-align: left; }
.recipe-block .ing { padding-bottom: 10px; padding-right: 40px; border-right: solid 1px #f9dee9; margin: 20px 0; font-size: 0.875rem; }
.recipe-block .recipe-detail .ing .ing-block + .ing-block { margin-top: 15px; }
.recipe-block .recipe-detail .ing .ing-block > .strong { margin-bottom: 5px; }
.recipe-block .sub-ttl { font-size: 1.125rem; font-weight: bold; display: inline-block; margin-bottom: 15px; }
.recipe-block .sub-ttl small { font-size: 0.875rem; font-weight: normal;}
.recipe-block .ing { margin: 30px 0 0; padding-bottom: 20px; }
.recipe-block .ing .strong { display: inline-block; font-weight: bold; }
.recipe-block .ing sub { font-size: 10px; vertical-align: bottom; display: inline-block; }
.recipe-block .ing dl { background: url("../images/dot.png") repeat-x left 46%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 100%; margin-bottom: 2px; }
.recipe-block .ing dl dt { background-color: #FFF; line-height: 1.6875; max-width: 70%; text-align: left; padding-right: 5px; }
.recipe-block .ing dl dt sup { font-size: 10px; vertical-align: text-top; }
.recipe-block .ing dl dd { background-color: #FFF; line-height: 1.6875; max-width: 30%; text-align: right; padding-left: 5px; }
.recipe .recipe-detail .process { padding-left: 40px; }
.recipe-block .process-box { margin: 30px 0 0; padding: 30px; border: solid 2px #013b95; border-radius: 6px; }
.recipe-block .process-box .lead { font-size: 16px; line-height: 1.7em; margin-bottom: 30px; }
.recipe-block .process_list { margin: 30px 0 0; font-size: 0.875rem; }
.recipe-block .process_list .prepare { margin-bottom: 10px; display: table; width: 100%; }
.recipe-block .process_list .prepare .prepare-ttl { display: table-cell; vertical-align: top; width: 3.8em; font-weight: bold; }
.recipe-block .process_list .prepare .desc { display: table-cell; }
.recipe-block .process_list > dl { counter-increment: count; display: table; }
.recipe-block .process_list > dl + dl { margin-top: 10px; }
.recipe-block .process_list > dl dt { display: table-cell; vertical-align: top; padding-right: 10px; }
.recipe-block .process_list > dl dt:before { content: counter(count); font-family: 'Lora', serif; display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; text-align: center; background: #111; color: #FFF; border-radius: 100%; }
.recipe-block .process_list > dl dd { display: table-cell; vertical-align: middle; line-height: 1.5em; }
.recipe-block .process_list > dl dd .number { font-family: 'Lora', serif; display: inline-block; vertical-align: text-bottom; width: 1.35em; height: 1.35em; text-align: center; background: #111; color: #fff; margin: 0 2px; border-radius: 100%; line-height: 1.5; }
.recipe-block .process_list > dl + .caption { margin-top: 20px; }
.recipe-block .process_list > dl + .remarks { margin-top: 20px; }

#recipe-kantan:before,#recipe-kantan:after { background: url(../images/kantan-recipe-bg.png); }
#recipe-kantan .h2_ttl { color: #554410; background: #f4f8a4; }
#recipe-kantan .h2_ttl .content-box:before { content: ""; position: absolute; left: 0; top: -30px; width: 192px; height: 197px; background: url(../images/kantan-ttl-l.png) no-repeat; }
#recipe-kantan .h2_ttl .content-box:after { content: ""; position: absolute; right: 0; top: -40px; width: 186px; height: 217px; background: url(../images/kantan-ttl-r.png) no-repeat; }
#recipe-kantan .h2_ttl span { background: url(../images/kantan-ttl-line.png) left bottom repeat-x; }
#recipe-kantan .h2_ttl:before { background: url(../images/kantan-ttl-bg.png); }
#recipe-kantan .h2_ttl:after { background: url(../images/kantan-ttl-bg.png); }
#recipe-kantan .recipe-block h1.ttl,#recipe-kantan .recipe-block .lead { color: #554410; }

#recipe-kantan .recipe-block:nth-of-type(1) .lead:before { background: url(../images/kantan-recipe-icon01.png) center / 100%; }
#recipe-kantan .recipe-block:nth-of-type(2) .lead:before { background: url(../images/kantan-recipe-icon02.png) center / 100%; }
#recipe-kantan .recipe-block:nth-of-type(3) .lead:before { background: url(../images/kantan-recipe-icon03.png) center / 100%; width: 111px;}
#recipe-kantan .recipe-block:nth-of-type(4) .lead:before { background: url(../images/kantan-recipe-icon04.png) center / 100%; }
#recipe-kantan .recipe-block:nth-of-type(odd):before { content: ""; position: absolute; top: -30px; right: -50px; width: 126px; height: 115px; background: url(../images/kantan-recipe-l-top.png) no-repeat; }
#recipe-kantan .recipe-block:nth-of-type(odd):after { content: ""; position: absolute; bottom: 0; left: -20px; width: 44px; height: 72px; background: url(../images/kantan-recipe-r-btm.png); }
#recipe-kantan .recipe-block:nth-of-type(even):before { content: ""; position: absolute; top: -20px; left: -80px; width: 145px; height: 179px; background: url(../images/other-r.png) no-repeat; }
#recipe-kantan .recipe-block:nth-of-type(even):after { content: ""; position: absolute; bottom: 0; right: 0; width: 44px; height: 72px; background: url(../images/kantan-recipe-r-btm.png); }
#recipe-kantan .recipe-block .ing { border-right: solid 1px #f4f6c6;}

#recipe-omotenashi { margin-top: 160px; }
#recipe-omotenashi .h2_ttl { color: #a53666; background: #f7c9dc; z-index: 1;}
#recipe-omotenashi .h2_ttl span { background: url(../images/omotenashi-ttl-line.png) left bottom repeat-x; }
#recipe-omotenashi .h2_ttl:before { background: url(../images/omotenashi-ttl-bg.png); }
#recipe-omotenashi .h2_ttl:after { background: url(../images/omotenashi-ttl-bg.png); }
#recipe-omotenashi .h2_ttl .content-box:before { content: ""; position: absolute; left: 0; top: -30px; width: 217px; height: 252px; background: url(../images/omotenashi-ttl-l.png) no-repeat; }
#recipe-omotenashi .h2_ttl .content-box:after { content: ""; position: absolute; right: 0; top: -40px; width: 164px; height: 179px; background: url(../images/omotenashi-ttl-r.png) no-repeat; }
#recipe-omotenashi .recipe-block:nth-of-type(1) .lead:before { background: url(../images/omotenashi-recipe-icon01.png) center / 100%; }
#recipe-omotenashi .recipe-block:nth-of-type(2) .lead:before { background: url(../images/omotenashi-recipe-icon02.png) center / 100%; }
#recipe-omotenashi .recipe-block:nth-of-type(3) .lead:before { background: url(../images/omotenashi-recipe-icon03.png) center / 100%; }
#recipe-omotenashi .recipe-block:nth-of-type(4) .lead:before { background: url(../images/omotenashi-recipe-icon04.png) center / 100%; }
#recipe-omotenashi .recipe-block .lead { border-bottom: none; background: url(../images/omotenashi-recipe-line.png) left bottom repeat-x; }
#recipe-omotenashi .recipe-block:nth-of-type(odd):before { content: ""; position: absolute; top: -30px; right: -50px; width: 139px; height: 165px; background: url(../images/omotenashi-recipe-r-top.png) no-repeat; }
#recipe-omotenashi .recipe-block:nth-of-type(even):before { content: ""; position: absolute; top: -10px; left: -95px; width: 131px; height: 199px; background: url(../images/omotenashi-recipe-l-top.png) no-repeat; }
#recipe-omotenashi .recipe-block:nth-of-type(even):after { content: ""; position: absolute; bottom: 0px; right: 0px; width: 28px; height: 52px; background: url(../images/omotenashi-recipe-r-btm.png) no-repeat; }
#recipe-omotenashi .recipe-block h1.ttl,.recipe .recipe-block .lead { color: #a53666; }
#recipe-omotenashi .recipe .recipe-block .lead span { background: linear-gradient(transparent 58%, #f4f8a4 0); }

.recipe .sns > ul { padding: 80px 0; justify-content: center; }
.recipe .sns > ul a { width: 64px; height: 64px; }
.recipe .sns > ul li + li { margin-left: 20px; }


#other-link { background: #fafafa; padding: 80px 0 100px; }
#other-link h3.ttl { font-size: 2.5rem; text-align: center; }
#other-link h3.ttl span { background: linear-gradient(transparent 70%, #f4f8a4 0); padding: 0; font-weight: bold; }
#other-link .box-wrapper { max-width: 1000px; margin: 70px auto 0; position: relative; }
#other-link .box { background: linear-gradient(45deg, transparent 20px, #FFF 20px), linear-gradient(135deg, transparent 20px, #FFF 20px), linear-gradient(225deg, transparent 20px, #FFF 20px), linear-gradient(315deg, transparent 20px, #FFF 20px); background-position: bottom 1px left, top left, top right, bottom 1px right; background-size: 50% 50%; background-repeat: no-repeat; z-index: 1; position: relative; }
#other-link .box-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#other-link .box-shadow:before,#other-link .box-shadow:after { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 20px, rgba(105, 221, 20,.2) 20px), linear-gradient(135deg, transparent 20px, rgba(105, 221, 20,.2) 20px), linear-gradient(225deg, transparent 20px, rgba(105, 221, 20,.2) 20px), linear-gradient(315deg, transparent 20px, rgba(105, 221, 20,.2) 20px); background-position: bottom left, top left, top right, bottom right; background-size: 50% 50%; background-repeat: no-repeat; }
#other-link .box-shadow:before { left: 0; top: 0; transform: rotate(-4deg); }
#other-link .box-shadow:after { left: 0; top: 20px; transform: rotate(3deg); }
#other-link .box-wrapper .box-point-l { position: absolute; top: -130px; left: -100px; display: inline-block; z-index: 1; }
#other-link .box-wrapper .box-point-r { position: absolute; bottom: -30px; right: -100px; display: inline-block; z-index: 1; }
#other-link .box > ul { display: flex; padding: 40px 75px; /*justify-content: space-between;*/justify-content: space-around;}
#other-link .box > ul > li { width: /*365px;*/100%; text-align: center; }
#other-link .box > ul > li figure img { width: 100%; max-width: 730px; border-radius: 5px; }
#other-link .box > ul > li .box-ttl { font-size: 1.4rem; line-height: 1.4em; font-weight: bold; margin: 1.5rem 0 1.25rem; text-align: center; }
#other-link .box > ul > li .desc { font-size: 1rem; margin:0 auto 1.75rem; max-width: 730px; }
#other-link .box > ul > li .btn { display: table; width: 320px; margin: auto; height: 60px; position: relative; }
#other-link .box > ul > li .btn a { font-size: 1.125rem; display: table-cell; vertical-align: middle; text-align: center; border-radius: 5px; background-color: #53b20d; line-height: 1.8em; color: #fff; font-weight: bold; transition: .2s; padding: 0 10px; }
#other-link .box > ul > li .btn a:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; position: absolute; right: 20px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: #FFF; border-radius: 100%; color: #53b20d; box-sizing: border-box; padding-left: 2px; line-height: 1.2em; }
#other-link .box > ul > li .btn a:hover { background-color: #62c718; }
#other-link .bnr { max-width: 900px; margin: 100px auto 0; transition: .3s; }
#other-link .bnr:hover { opacity: .7; }


/* ===============================================

	SP style

=============================================== */
.sp { font-size: 12px; line-height: 1.5em; line-height: 1.5rem; }
.sp #container * { font-family: "游ゴシック体", "Yu Gothic", YuGothic, Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.sp #container a { text-decoration: none;}
.sp #container .only-pc { display: none !important; }
.sp #container img { max-width: 100%; margin: auto;}
.sp #container .content-box { padding: 0 4%; z-index: 1; position: relative;}


/*---------------------------
				     #mv
---------------------------*/
.sp #mv > .ttl_box { padding: 10px; background: url(../images/sp/mv-bg.jpg) center / cover no-repeat; }
.sp #mv > .ttl_box .ttl_inner { position: relative; text-align: center; color: #111111; font-weight: bold; }
.sp #mv > .ttl_box .ttl_inner .ttl { font-size: 1.75rem; line-height: 1.35em; letter-spacing: -0.05em; color: #143666; }
.sp #mv > .ttl_box .ttl_inner .ttl small { font-size: 1.25rem; font-weight: bold; margin: 10px 0 5px; }
.sp #mv > .ttl_box .ttl_inner .ttl .sub_ttl { font-size: 1.166rem; font-weight: bold; padding: 3px 15px 1px; }
.sp #mv > .ttl_box .ttl_inner .ttl .sub_ttl strong { font-size: 1.25rem; font-weight: bold; }
.sp #mv > .ttl_box .ttl_inner .ttl .sub_ttl:after { bottom: -4px; border-width: 6px 6px 0 6px; }
.sp #mv .sns { left: inherit; right: 15px; bottom: 10px; }
.sp .sns > ul a { width: 30px; height: 30px; }
.sp .sns > ul li + li { margin-left: 8px; }


/*---------------------------v
				#anchor_link
---------------------------*/
.sp #anchor_link { padding: 0 0 60px; }
.sp #anchor_link .lead { background: url(../images/sp/lead-l.png) no-repeat top 10px left / 40px,url(../images/sp/lead-r.png) no-repeat bottom 0 right / 50px;}
.webp .sp #anchor_link .lead { background: url(../images/sp/lead-l.png) no-repeat top 10px left / 40px,url(../images/sp/lead-r.png.webp) no-repeat bottom 0 right / 50px;}
.sp #anchor_link .lead .desc { padding: 50px 0 40px; font-size: 13px; font-weight: bold;}
.sp #anchor_link ul { margin: 10px auto 0; }
.sp #anchor_link li a { font-size: 13px; padding: 0 30px; line-height: 1.625rem; border-radius: 6px;}
.sp #anchor_link li a:after { right: 10px; }
.sp #anchor_link li a span { font-size: 16px; font-weight: bold; }
.sp #anchor_link li + li { margin-top: 15px; }
.sp #anchor_link li { width: 100%; height: 60px; }
.sp #anchor_link li a:after { padding-top: 1px; line-height: 1.5;}


/*---------------------------
				  #recipe
---------------------------*/
.sp .recipe-block .ttl { font-size: 1.333rem; }
.sp .recipe-block .recipe-detail { display: none; }
.sp .recipe-block .process_list > dl dt:before { width: 25px; height: 25px; font-size: 1.25rem; }
.sp .recipe-block .recipe-body > .recipe-detail { float: none; width: 100%; margin-bottom: 15px; }
.sp .recipe-block .process_list > dl + dl { margin-top: 10px; }
.sp .recipe-block + .recipe-block { margin: 60px 0 0; }
.sp .process_btn.only-sp { position: relative; background: #f2b90c; border-radius: 6px; display: flex; align-items: center; justify-content: center; height: 50px; font-weight: bold; padding: 0 30px; color: #FFF; font-size: 1.25rem; }
.sp .process_btn.plus.only-sp:before { content: "作り方を見る"; }
.sp .process_btn.minus.only-sp:before { content: "作り方を閉じる"; }
.sp .process_btn.only-sp:after { font-family: "Font Awesome 5 Free"; position: absolute; right: 10px; font-size: 10px; top: 50%; text-align: center; margin-top: -10px; width: 20px; height: 20px; background: #FFF; border-radius: 100%; color: #f2b90c; box-sizing: border-box; line-height: 2em; }
.sp .process_btn.plus.only-sp:after { content: "\f067"; }
.sp .process_btn.minus.only-sp:after { content: "\f068"; }
.sp .recipe-block .sub-ttl { font-size: 1.083rem; margin-bottom: 10px; }
.sp .recipe h1.ttl + .lead { margin: 15px 0 25px; }
.sp .recipe .h2_ttl { text-align: center; position: relative; padding: 35px 0; }
.sp .recipe h2.ttl small { font-size: 13px; font-weight: bold; }
.sp .recipe h2.ttl span { font-size: 23px; font-weight: bold; }
.sp .recipe .h2_ttl:before { bottom: -6px; }
.sp .recipe .h2_ttl:after { top: -6px; }
.sp .recipe .lead { margin: 30px 0; font-size: 1.083rem; }
.sp .recipe .lead .desc { font-weight: bold; text-align: center; }
.sp .recipe .recipe-block .lead span { font-size: 1.083rem; padding: 0; }

.sp .recipe .recipe-block { width: 100%; padding: 20px 20px 30px; }
.sp .recipe .recipe-block > figure { margin-bottom: 20px; }
.sp .recipe .recipe-block h1.ttl, .sp .recipe .recipe-block .lead { text-align: left; }
.sp .recipe .h2_ttl small { margin-bottom: 5px; }
.sp .recipe .h2_ttl span { background: url(../images/omotenashi-ttl-line.png) left bottom / 5px repeat-x; padding-bottom: 0; line-height: 1.5em; display: inline; }
.sp .recipe:before, .sp .recipe:after { width: 30px; z-index: 0;}
.sp .recipe .recipe-detail { display: none; }
.sp .recipe .recipe-detail .process { padding-left: 0; }
.sp .recipe .recipe-detail .ing,.sp .recipe .recipe-detail .process { width: 100%; }
.sp .recipe .recipe-detail .ing { margin: 20px 0 0; padding-right: 0; border-right: none; border-bottom: solid 1px #f9dee9; }

.sp #recipe-kantan .h2_ttl .content-box:before { content: ""; position: absolute; left: 0; top: -50px; width: 70px; height: 70px; background: url(../images/sp/omotenashi-ttl-l.png) no-repeat center / 100%; z-index: 1; }
.sp #recipe-kantan .h2_ttl .content-box:after { content: ""; position: absolute; right: 10px; top: inherit; bottom: -60px; width: 50px; height: 50px; background: url(../images/sp/omotenashi-ttl-r.png) no-repeat center / 100%; }
.sp #recipe-kantan .recipe-block:nth-of-type(odd):before { content: ""; position: absolute; top: -30px; right: -5px; width: 63px; height: 55px; background: url(../images/kantan-recipe-l-top.png) center / 100% no-repeat; }
.sp #recipe-kantan .recipe-block:nth-of-type(odd):after{ bottom: 0px; left: 0px; width: 28px; height: 52px; background: url(../images/omotenashi-recipe-r-btm.png) no-repeat;}
.sp #recipe-kantan .recipe-block:nth-of-type(even):before { content: ""; position: absolute; top: -20px; left: -5px; width: 72px; height: 89px; background: url(../images/other-r.png)  center / 100% no-repeat; }
.sp #recipe-kantan .recipe-block:nth-of-type(even):after{ bottom: 0px; right: 0px; width: 28px; height: 52px; background: url(../images/omotenashi-recipe-r-btm.png) no-repeat;}
.sp #recipe-kantan .process_btn.only-sp { background: #f2b90c; }
.sp #recipe-kantan .process_btn.only-sp:after { color: #f2b90c;  }
.sp #recipe-kantan .recipe-block .ing { border-bottom: solid 1px #f4f6c6; border-right: none;}

.sp #recipe-omotenashi { padding-top: 60px; margin:0; }
.sp #recipe-omotenashi .h2_ttl:before { background: url(../images/omotenashi-ttl-bg.png) center left / 60px repeat-x; }
.sp #recipe-omotenashi .h2_ttl:after { background: url(../images/omotenashi-ttl-bg.png) top left / 60px repeat-x; }
.sp #recipe-omotenashi .process_btn.only-sp { background: #a53666; }
.sp #recipe-omotenashi .process_btn.only-sp:after { color: #a53666; }
.sp #recipe-omotenashi .recipe-block:nth-of-type(odd):before { top: -10px; right: -10px; width: 68px; height: 82px; background: url(../images/omotenashi-recipe-r-top.png) center / 100% no-repeat; }
.sp #recipe-omotenashi .recipe-block:nth-of-type(even):before { top: -10px; left: -10px; width: 65px; height: 100px; background: url(../images/omotenashi-recipe-l-top.png) center / 100% no-repeat; }
.sp #recipe-omotenashi .recipe-block:nth-of-type(even):after { bottom: -20px; }
.sp #recipe-omotenashi .h2_ttl .content-box:before { content: ""; position: absolute; left: 0; top: -50px; width: 70px; height: 70px; background: url(../images/sp/omotenashi-ttl-l.png) no-repeat center / 100%; z-index: 1;}
.sp #recipe-omotenashi .h2_ttl .content-box:after { content: ""; position: absolute; right: 10px; top: inherit; bottom: -60px; width: 50px; height: 50px; background: url(../images/sp/omotenashi-ttl-r.png) no-repeat center / 100%;}

.sp .recipe .sns > ul { padding: 40px 0; }
.sp .recipe .sns > ul a { width: 40px; height: 40px; }


.sp #other-link { background: #fafafa; padding: 40px 0 60px; }
.sp #other-link .box-wrapper { margin: 30px auto 0; }
.sp #other-link .box-wrapper .box-point-l { position: absolute; top: -104px; left: -10px; display: inline-block; z-index: 1; width: 50px; }
.sp #other-link .box-wrapper .box-point-r { position: absolute; bottom: -50px; right: -10px; width: 60px; display: inline-block; z-index: 1; }
.sp #other-link h3.ttl { line-height: 1; }
.sp #other-link h3.ttl span { font-size: 1.666rem; }
.sp #other-link .box > ul { display: block; padding: 30px; }
.sp #other-link .box > ul > li { width: 100%; }
.sp #other-link .box > ul > li .box-ttl { font-size: 1.333rem; font-weight:bold; text-align: left; }
.sp #other-link .box > ul > li .desc { font-size: 0.875rem; text-align: left; }
.sp #other-link .box > ul > li .btn { width: 100%; height: 50px; }
.sp #other-link .box > ul > li .btn a { font-size: 1.25rem; }
.sp #other-link .box > ul > li .btn a:after { font-size: 1.15rem; line-height: 1.5em; right: 10px; }
.sp #other-link .box > ul > li .box-ttl { font-size: 1.333rem; margin: 1rem 0; }
.sp #other-link .box > ul > li .desc { font-size: 1rem; margin-bottom: 1.5rem; }
.sp #other-link .box > ul > li + li { margin-top: 30px; }
.sp #other-link .bnr { margin: 60px auto 0; }