@charset "utf-8";
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

/* CSS Document */

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

	common style

=============================================== */
html #content { opacity: 0; }
html.ready #content { opacity: 1; }

#content { width: 100%; color: #000; font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#content * {font: inherit;}
#content h1, #content h2, #content h3 {font-weight: bold;}
#content h1, #content h2, #content h3, #content figure { border: 0; margin: 0; padding: 0; }
#content img {max-width: 100%; width: auto;}
#content em {font-style: normal;}
#content a {text-decoration: none;}
#content .t-center {text-align: center;}
#content .text-blue {color: #3b457d;}
#content .banner-cp a { display: inline-block;}
#content [class^="btn-"] {color: #fff;padding: 1em;display: block;position: relative;font-weight: bold;text-align: center;}
#content [class^="btn-"]:after {content: '';display: block;width: 8px;height: 15px;background: url(../images/arrow-right-white.png) center no-repeat;background-size: contain;position: absolute;right: 15px;top: 0;bottom: 0;margin: auto;}
#content .btn-blue {background-color: #3b457d;}
@media all and (-ms-high-contrast: none) {
	#content [class^="btn-"] {padding-bottom: .6em;}
}

/*---------------------------
bg-item
---------------------------*/
.webp #content .bg-item {background: url(../images/bg-mokume.jpg.webp) top center / cover repeat-y;}
#content .bg-item {background: url(../images/bg-mokume.jpg) top center / cover repeat-y;}
#content .lead-block {background: url(../images/flag-left.png) left top no-repeat , url(../images/flag-right.png) right top no-repeat;position: relative;font-weight: bold;}
#content .lead-block:before,
#content .lead-block:after {content: '';display: block;background: center / contain no-repeat;}
#content .lead-block:before {background-image: url(../images/lead-img1.png);}
#content .lead-block:after {background-image: url(../images/lead-img2.png);}

/*---------------------------
recipe-btn
---------------------------*/
#content .recipe-btn ul {background: #fff;display: flex;justify-content: space-around;}
#content .recipe-btn ul li a {display: block;position: relative;height: 100%; }
#content .recipe-btn ul li a p {color:#3b457d;line-height: 1.4em;}
#content .recipe-btn ul li a:after {content: '';display: block;background: url(../images/arrow-bottom-blue.png) center / contain no-repeat;width: 10px;height: 6px;margin: 10px auto 0;}

/*---------------------------
recipe-block
---------------------------*/
#content .recipe-block {position: relative;}
#content .recipe-block .box {position: relative;}
#content .recipe-block .box + .box:before {content: '';display: block;width: 100%;height: 1px;background-color: #e8e8ea;}
#content .recipe-block .box:after {content: '';display: block;width: 378px;height: 432px;position: absolute;bottom: -25%;z-index: 0;background: center / contain no-repeat; pointer-events: none}
#content .recipe-block .box:nth-child(odd):after {right: 0;background-image: url(../images/recipe-bg-right.png);}
#content .recipe-block .box:nth-child(even):after {left: 0;background-image: url(../images/recipe-bg-left.png);}
#content .recipe-block .text:before {content: '';display: block;position: absolute;background: center / contain no-repeat;z-index: 0;}
#content .recipe-block #recipe1 .text:before {background-image: url(../images/recipe-illust01.png);}
#content .recipe-block #recipe2 .text:before {background-image: url(../images/recipe-illust02.png);}
#content .recipe-block #recipe3 .text:before {background-image: url(../images/recipe-illust03.png);}
#content .recipe-block #recipe4 .text:before {background-image: url(../images/recipe-illust04.png);}
#content .recipe-block #recipe5 .text:before {background-image: url(../images/recipe-illust05.png);}
#content .recipe-block #recipe6 .text:before {background-image: url(../images/recipe-illust06.png);}
#content .recipe-block .text h3 { color:#3b457d;letter-spacing: .06em;}
#content .recipe-block .img {display: inline-block;position: relative;}
#content .recipe-block .img:before {content: '';width: 100%;height: 100%;z-index: 0;display: block;position: absolute;background: url(../images/bg-stripe-yellow.png) repeat;}
#content .recipe-block .img img {z-index: 1; position: relative;}
#content .recipe-block .point > div {color:#3b457d;letter-spacing: .06em;}


/*---------------------------
cheese-block
---------------------------*/
#content .cheese-block {background: url(../images/bg-mokume.jpg) center top / cover repeat-y;position: relative;}
#content .cheese-block:before,
#content .cheese-block:after {content: '';display: block;position: absolute;}
#content .cheese-block:before {background-image: url(../images/cheese-bg-left.png);width: 360px;height: 360px;left: 0;top: 0;}
#content .cheese-block:after {background-image: url(../images/cheese-bg-right.png);width: 300px;height: 300px;right: 0;bottom: 0;}
#content .cheese-block .content-inner {position: relative;z-index: 1;}
#content .cheese-block .box {position: relative;}
#content .cheese-block .box h2 {text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column; position: relative;z-index: 1;}
#content .cheese-block .box h2 em {position: relative;}
#content .cheese-block .box h2 em:before {content: '';width: 100%;height: 10px;background: #fff441;display: block;position: absolute;left: -10px;bottom: 0;padding: 0 10px;}
#content .cheese-block .box h2 em span {position: relative;}
#content .cheese-block .box ul {text-align: center;background: #fff;position: relative;}
#content .cheese-block .box ul:before {content: '';display: block;width: 50%;height: 80%;background-color: #fff;position: absolute;left: 0;right: 0;top: -70px;margin: auto;border-radius: 100%;z-index: 0;}
#content .cheese-block .box ul li {display: flex;flex-direction: column;align-items: center;position: relative;}
#content .cheese-block .box ul li a {width: 100%;}
#content .cheese-block .box ul li h3 {color:#3b457d;line-height: 1.8em;}
#content .cheese-block .box ul li h3 span {border-bottom: 1px dotted #3b457d;}
#content .cheese-block .box ul li h3 span:after {content: '';display: inline-block;width: 5px;height: 10px;background: url(../images/arrow-right-blue.png) center / cover no-repeat;margin-left: .6em;margin-bottom: 2px;transition: .3s;}
#content .cheese-block .box ul li p {text-align: left;margin-top: 20px;width: 100%;}


/*---------------------------
more-block
---------------------------*/
#content .more-block {background: url(../images/bg-stripe-gray.png) center top repeat;}
#content .more-block .block-ttl {text-align: center;}
#content .more-block ul li p {font-size: 18px;font-weight: bold;background: #fff;text-align: center;padding: 1.5em 1em;line-height: 1.6;position: relative;}
#content .more-block ul li p:before {content: '';display: block;width: 7px;height: 10px;background: url(../images/arrow-right-blue.png) center / cover no-repeat;position: absolute;right: 20px;top: 0;bottom: 0;margin: auto;transition: .3s;}


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

	PC style

=============================================== */
.pc #content { font-size: 14px; min-width: 1200px;line-height: 1.6em;}
.pc #content .bg-shadow {
	-moz-box-shadow: 0px 10px 20px 5px rgba(144, 146, 156, 0.27);
	-webkit-box-shadow: 0px 10px 20px 5px rgba(144, 146, 156, 0.27);
	-ms-box-shadow: 0px 10px 20px 5px rgba(144, 146, 156, 0.27);
	box-shadow: 0px 10px 20px 5px rgba(144, 146, 156, 0.27);
}
/*.pc #content p { line-height: 1.6em; }*/
.pc #content a {transition: .3s;}
.pc #content a:hover {opacity: 0.7;}
.pc #content .only-sp { display: none !important; }
.pc #content .content-inner { width: 1000px; margin: auto;}
.pc #content .bg-item {margin-top: -80px;padding: 80px 0 70px;}
.pc #content .block-ttl {letter-spacing: .1em;}

/*---------------------------
	content-mv
---------------------------*/
.pc #content .content-mv { position: relative; width: 1200px; margin: auto;}
.pc #content .content-mv img { width: 100%; }
.pc #content .content-mv h1 { position: absolute; top: 10px; right: 10px;width: 520px;}

/*---------------------------
	lead-block
---------------------------*/
.pc #content .lead-block { padding-top: 70px;max-width: 1200px;margin: auto;}
.pc #content .lead-block:before {width: 212px;height: 146px;right: 0;top: 140px;position: absolute;}
.pc #content .lead-block:after {width: 200px;height: 96px;left: 0;top: 170px;position: absolute;}
.pc #content .lead-block .text h2 {margin: 0 auto 30px;max-width: 750px}
.pc #content .lead-block .text p {font-size: 16px;text-align: center;line-height: 2em;letter-spacing: .1em;}
.pc #content .lead-block .banner-cp {margin: 60px 0 50px;}

/*---------------------------
	recipe-btn
---------------------------*/
.pc #content .recipe-btn {position: relative;}
.pc #content .recipe-btn ul {padding: 40px 30px;font-size: 13px;font-weight: bold;text-align: center;}
.pc #content .recipe-btn ul figure {margin-bottom: 10px;bottom: -18px;}
.pc #content .recipe-btn ul li a:after {transition: .3s;bottom: -15px;}
.pc #content .recipe-btn ul li a:hover:after {transform: translateY(3px);}

/*---------------------------
recipe-block
---------------------------*/
.pc #content .recipe-block {padding: 80px 0 80px;position: relative;}
.pc #content .recipe-block .content-inner {width: 100%;}
.pc #content .recipe-block .box + .box:before {margin: 60px auto 70px;max-width: 1120px;}
.pc #content .recipe-block .box:last-child:after {content: none;}
.pc #content .recipe-block .box > * {width: 1000px;margin: auto;}
.pc #content .recipe-block .box .d-flex {display: flex;align-items: center;justify-content: flex-end}
.pc #content .recipe-block .box:nth-child(odd) .d-flex {flex-direction: row-reverse;}
.pc #content .recipe-block .box .text {position: relative;}
.pc #content .recipe-block .box .text h3 {font-size: 22px;line-height: 1.6;margin-bottom: 15px;}
.pc #content .recipe-block .box .text .catch {display: none;}
.pc #content .recipe-block .box .text p {line-height: 2em;margin-bottom: 30px;}
.pc #content .recipe-block .box .text .btn-blue {width: 200px;font-size: 16px;}
.pc #content .recipe-block .box:nth-child(odd) .text {margin-left: 50px;}
.pc #content .recipe-block .box:nth-child(even) .text {margin-right: 50px;}

.pc #content .recipe-block .box .img:after {content: attr(data-catch);font-size: 16px;font-weight: bold;z-index: 1;position: absolute;width: 1em;top: 25px;line-height: 1.2em; -ms-writing-mode: tb-rl;	writing-mode: vertical-rl;letter-spacing: .2em;}
.pc #content .recipe-block .box:nth-child(odd) .img:after {right: 25px;}
.pc #content .recipe-block .box:nth-child(even) .img:after {left: 25px;}
.pc #content .recipe-block .box:nth-child(odd) .img:before {left: -60px;bottom: -30px;}
.pc #content .recipe-block .box:nth-child(even) .img:before {right: -60px;bottom: -30px;}

.pc #content .recipe-block .point {padding-top: 50px;display: flex;justify-content: center;align-items: center;}
.pc #content .recipe-block .point > div {margin-left: 20px;flex: 1;font-weight: bold;font-size: 16px;line-height: 1.9em;}
.pc #content .recipe-block .point:before {content: '';width: 110px;height: 110px;display: block;background: url(../images/recipe-point-icon.png) center no-repeat;background-size: contain;}
.pc #content .recipe-block .box:nth-child(even) .point {width: 1120px;}
.pc #content .recipe-block .box:nth-child(even) .point:before {margin-left: 460px;}

.pc #content .recipe-block #recipe1 .text:before {width: 150px;height: 148px;right: -150px;top: -70px;}
.pc #content .recipe-block #recipe2 .text:before {width: 143px;height: 187px;left: -190px;top: -70px;}
.pc #content .recipe-block #recipe3 .text:before {width: 149px;height: 116px;right: -90px;top: -60px;}
.pc #content .recipe-block #recipe4 .text:before {width: 137px;height: 134px;left: -160px;top: -50px;}
.pc #content .recipe-block #recipe5 .text:before {width: 162px;height: 136px;right: -200px;top: -70px;}
.pc #content .recipe-block #recipe6 .text:before {width: 127px;height: 178px;left: -160px;top: -70px;}


/*---------------------------
cheese-block
---------------------------*/
.pc #content .cheese-block {padding: 70px 0;}
.pc #content .cheese-block .box {margin-bottom: 50px;}
.pc #content .cheese-block .box h2 {font-size: 20px;}
.pc #content .cheese-block .box h2 img {max-width: 180px;}
.pc #content .cheese-block .box ul {display: flex;padding: 40px 40px;justify-content: space-between;}
.pc #content .cheese-block .box ul li {flex: 1;padding: 0 40px;}
.pc #content .cheese-block .box ul li + li {border-left: 1px solid #ececef;}
.pc #content .cheese-block .box ul li figure {height: 180px;display: flex;justify-content: center;align-items: center;}
.pc #content .cheese-block .box ul li h3 {font-size: 17px;}
.pc #content .cheese-block .box ul li a:hover h3 span:after {transform: translateX(3px)}

.pc #content .cheese-block .box .pkg {margin-top:30px;padding-left: 50px;font-size: 12px;}

/*---------------------------
more-block
---------------------------*/
.pc #content .more-block {padding: 70px 0;}
.pc #content .more-block h2 {font-size: 30px;line-height: 1.4em;margin-bottom: 30px;}
.pc #content .more-block h2 small {font-size: 24px;}
.pc #content .more-block h2 img {max-width: 380px}
.pc #content .more-block ul {display: flex;justify-content: space-between;margin-bottom: 40px;}
.pc #content .more-block li {transition: .3s;flex: 1;}
.pc #content .more-block li + li {margin-left: 40px;}
.pc #content .more-block li:hover {opacity: .7;}
.pc #content .more-block li a:hover p:before {transform: translateX(3px)}


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

	SP style

=============================================== */
.sp #content h1, .sp #content h2, .sp #content h3, .sp #content h4, .sp #content a, .sp #content img {display: block; }
.sp #content{ margin: 2% auto 0;}
.sp #content p {font-size: 14px;line-height: 1.6;}
.sp #content img {width: 100%;}
.sp #content [class^="btn-"] {padding: 1em;}
.sp #content .only-pc { display: none !important; }
.sp #content .content-inner { margin: 0 3.5%;}

/*---------------------------
	content-mv
---------------------------*/
.sp #content .content-mv h1 {margin: -6% 0 3%}
.sp #content .content-mv h1 img {width: 90%;max-width: 660px; margin: auto;}

/*---------------------------
	lead-block
---------------------------*/
.sp #content .lead-block { padding: 8% 0 5%;background-size: 40% auto;}
.sp #content .lead-block:before {width: 50%;height: 80px;margin: 20px auto 30px;}
.sp #content .lead-block .text h2 {font-size: 18px;margin-bottom: 3%;}
.sp #content .lead-block .text p {line-height: 2em;text-align: center;margin-bottom: 10%;}

/*---------------------------
	recipe-btn
---------------------------*/
.sp #content .recipe-btn {padding-bottom: 8%;}
.sp #content .recipe-btn ul {flex-wrap: wrap;padding: 3.5% 3.5% 0;justify-content: space-between}
.sp #content .recipe-btn ul li {width: 48%;margin-bottom: 4%;}
.sp #content .recipe-btn ul li a {display: flex;}
.sp #content .recipe-btn ul li a figure {width: 32%;}
.sp #content .recipe-btn ul li a p {flex: 1;font-size: 12px;margin-left: 5%;line-height: 1.2em;display: flex;align-items: center;letter-spacing: -.05em}
.sp #content .recipe-btn ul li a:after {right: 0;width: 10px;height: 100%;margin-top: 0;}

@media screen and (max-width: 360px) {
	.sp #content .recipe-btn ul li a p {font-size: 11px;}
}

/*---------------------------
recipe-block
---------------------------*/
.sp #content .recipe-block {padding: 10% 0 ;}
.sp #content .recipe-block .box {padding: 0 5% 8%;}
.sp #content .recipe-block .box + .box {margin-top: 10%;}
.sp #content .recipe-block .box:after {background-image: url(../images/recipe-bg-left.png);left: -10%;top: -5%;bottom: auto;width: 50%;height: auto;padding-bottom: 50%;}
.sp #content .recipe-block .img:before {right: -3%;bottom: -3%;}
.sp #content .recipe-block .text {padding: 10% 0 8%}
.sp #content .recipe-block .text > * {position: relative;z-index: 1;}
.sp #content .recipe-block .text .catch {text-align: center;display: block;font-weight: bold;font-size: 15px;}
.sp #content .recipe-block .text h3 {font-size: 17px;line-height: 1.4em;margin: 4% 0;text-align: center;}
.sp #content .recipe-block .text a {position: absolute;width: 90%;padding-left: 0;padding-right: 0;bottom: 0;}
.sp #content .recipe-block .point {padding: 5% 0;}
.sp #content .recipe-block .point div {display: flex;margin-bottom: 5%;;align-items: center;}
.sp #content .recipe-block .point div > p {flex: 1;font-size: 12px;font-weight: bold;}
.sp #content .recipe-block .point div:before {content: ''; width: 60px;height: 60px;display: block;background: url(../images/recipe-point-icon.png) center no-repeat;background-size: contain;margin-right: 3.5%;}

.sp #content .recipe-block #recipe1 .text:before {width: 20%;height: auto;padding-bottom: 20%;right: 0;top: 0}
.sp #content .recipe-block #recipe2 .text:before {width: 20%;height: auto;padding-bottom: 20%;right: 0;top: 5%;}
.sp #content .recipe-block #recipe3 .text:before {width: 20%;height: auto;padding-bottom: 20%;right: 0;top: 5%;}
.sp #content .recipe-block #recipe4 .text:before {width: 20%;height: auto;padding-bottom: 20%;right: 0;top: 5%;}
.sp #content .recipe-block #recipe5 .text:before {width: 20%;height: auto;padding-bottom: 20%;right: -3%;top: 3%;}
.sp #content .recipe-block #recipe6 .text:before {width: 20%;height: auto;padding-bottom: 20%;right: -3%;top: 3%;}

/*---------------------------
cheese-block
---------------------------*/
.sp #content .cheese-block {padding: 10% 0;}
.sp #content .cheese-block .box h2 {font-size: 18px;}
.sp #content .cheese-block .box h2 img {max-width: 160px}
.sp #content .cheese-block .box ul {padding: 3.5% 7%;}
.sp #content .cheese-block .box ul:before {width: 90%;height: 200px;top: -50px;}
.sp #content .cheese-block .box ul li {margin-top: 5%;}
.sp #content .cheese-block .box ul li + li {padding-top: 5%;border-top: 1px solid #ececef;}
.sp #content .cheese-block .box ul li h3 {margin: -5% 0 3%;font-size: 16px;}
.sp #content .cheese-block .box ul li p {margin: 2% 0;}
.sp #content .cheese-block .box ul li figure {margin: auto;width: 150px;}
.sp #content .cheese-block .banner-cp {margin-top: 5%;}

.sp #content .cheese-block .box .pkg {margin-top:30px;font-size: 10px; text-align: center;}

/*---------------------------
more-block
---------------------------*/
.sp #content .more-block {padding: 10% 0 15%;}
.sp #content .more-block h2 {font-size: 18px;}
.sp #content .more-block h2 img {max-width: 240px;display: inline-block;}
.sp #content .more-block ul {margin-top: 5%;}
.sp #content .more-block ul li {margin-bottom: 5%;}
.sp #content .more-block ul li p {padding: 1em;font-size: 14px;}