@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: #2c1e1e; 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-pink {color: #f176a7;}
#content .text-brown {color: #552222;}
#content .text-white {color: #fff;}
#content .en {font-family: 'Quicksand', sans-serif;}
#content .banner-cp a { display: inline-block;}
#content [class^="btn-"] {color: #fff;padding: 1.5em 2em;display: block;position: relative;font-weight: bold;border-radius: 5px;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-pink {background-color: #f176a7;}
#content .btn-brown {background-color: #7f4444;}
#content .cxc {font-family: 'Quicksand', sans-serif;border-bottom: 2px solid;font-size: 16px;display: inline-block;padding-bottom: 4px;letter-spacing: .1em;}

#content .block-ttl {text-align: center;font-weight: bold;line-height: 2em;}
#content .block-ttl:before {content: '';display: block;background: top center no-repeat;margin-bottom: 15px;}
#content .block-ttl span {display: block;}
#content .block-ttl em {display: flex;align-items: center;justify-content: center;}
#content .block-ttl em:before,#content .block-ttl em:after {content: '';display: block;background-repeat: no-repeat;background-position: center;}
#content .block-ttl em:before {background-image: url(../images/recipe-h2-left.png);}
#content .block-ttl em:after {background-image: url(../images/recipe-h2-right.png);}

/*---------------------------
lead-block
---------------------------*/
#content .lead-block .text {background-image: url(../images/lead-heart.png) ;background-repeat: no-repeat;}
#content .lead-block .text h2 {font-weight: bold;letter-spacing: .1em;line-height: 1.7em;}
#content .lead-block .banner-cp a {margin-top: 10px;}

/*---------------------------
recipe-btn
---------------------------*/
#content .recipe-btn ul {display: flex;justify-content: space-around;border: 1px dotted #2c1e1e;border-radius: 5px;line-height: 1.3em;letter-spacing: -.1em;}
#content .recipe-btn ul li a {display: block;position: relative;height: 100%;}
#content .recipe-btn ul li a:after {content: '';display: block;background: url(../images/arrow-bottom-pink.png) no-repeat center;width: 100%;height: 10px;position: absolute;}
#content .recipe-btn ul li:last-child a:after {background-image: url(../images/arrow-bottom-brown.png);}
#content .recipe-btn ul figure {border-radius: 5px;overflow: hidden;display: inline-block;}

/*---------------------------
recipe-block
---------------------------*/
#content .recipe-block {background: url(../images/recipe-bg.png) center top repeat;position: relative;}
#content .recipe-block:before {content: '';display: block;position: absolute;width: 100%;height: 100%;}
#content .recipe-block .block-ttl:before {background-image: url(../images/recipe-h2-icon.png);}
#content .recipe-block .box {background-color: #fff;border-radius: 5px; overflow: hidden;}
#content .recipe-block .text {position: relative;}
#content .recipe-block .text .cxc {border-bottom-color: #f176a7;}
#content .recipe-block .text h3 { color: #552222;margin: 20px 0 10px;}
#content .recipe-block .text .use {position: absolute;}
#content .recipe-block .point {background: url(../images/recipe-point-bg.png);color: #fff;}
#content .recipe-block .point p a {color: #a9d94d;border-bottom: 1px dotted #a9d94d;}

/*---------------------------
wrapping-block
---------------------------*/
#content .wrapping-block {background: url(../images/wrapping-bg.png) center top repeat;position: relative;}
#content .wrapping-block:before {content: '';display: block;position: absolute;width: 100%;height: 100%;}
#content .wrapping-block .block-ttl:before {background-image: url(../images/wrapping-h2-icon.png);}
#content .wrapping-block .block-ttl em:before {background-image: url(../images/wrapping-h2-left.png);}
#content .wrapping-block .block-ttl em:after {background-image: url(../images/wrapping-h2-right.png);}
#content .wrapping-block .box {background-color: #fff;border-radius: 5px;}
#content .wrapping-block .img {border-radius: 5px 5px 0 0;overflow: hidden;} 
#content .wrapping-block .text {position: relative;}
#content .wrapping-block .text .cxc {border-bottom-color: #f176a7;}
#content .wrapping-block .text h3 { color: #552222;margin: 20px 0;}
#content .wrapping-block .text .use {position: absolute;}
#content .wrapping-block .text p + p {margin-top: .8em;}


/*---------------------------
cheese-block
---------------------------*/
#content .cheese-block .box {position: relative;}
#content .cheese-block .box:before,
#content .cheese-block .box:after {content: '';display: block;position: absolute;left: 0;top: 70px;border-radius: 5px;}
#content .cheese-block .box:before {background: url(../images/cheese-bg.png);z-index: 0;width: 100%;height: 100%;}
#content .cheese-block .box:after {background: url(../images/cheese-bg2.png);z-index: 1;margin: 10px; width: calc(100% - 20px);height: calc(100% - 20px);}
#content .cheese-block .box > * {position: relative;z-index: 2;}
#content .cheese-block .box h2 {text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column; background: url(../images/cheese-h2-bg.png) center no-repeat;width: 288px;height: 151px;margin: 0 auto;}
#content .cheese-block .box h2 em {font-size: 18px;font-weight: bold;display: block;/*margin-top: 13px;*/}
#content .cheese-block .box ul {text-align: center;}
#content .cheese-block .box ul li {display: flex;flex-direction: column;align-items: center;}
#content .cheese-block .box ul li h3 {margin: 15px 0 25px;}
#content .cheese-block .box ul li p {text-align: left;margin: 20px 0;width: 100%;}
#content .cheese-block .box ul li p + a {background: url(../images/arrow-right-black.png) 95% center no-repeat #fff;background-size: 6px 10px; border-radius: 5px;border: 1px dotted #333;margin-top: auto;padding: 10px 0;font-size: 13px;width: 150px;}
#content .cheese-block .box .pkg {margin-top:40px;font-size: 12px;text-align: center;}

/*---------------------------
more-block
---------------------------*/
#content .more-block {background: url(../images/more-bg.png) center top repeat;}
#content .more-block .block-ttl:before {background-image: url(../images/more-h2-icon.png);}
#content .more-block ul li figure {border-radius: 5px;overflow: hidden;}
#content .more-block ul li p {margin: -20px 40px 0;font-size: 16px;}


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

	PC style

=============================================== */
.pc #content { font-size: 14px; min-width: 1200px;line-height: 1.6em;}
/*.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 {background: url(../images/bg-item.png) top center no-repeat;margin-top: -40px;padding: 40px 0 90px;}

.pc #content .block-ttl {font-size: 24px;margin-bottom: 50px;letter-spacing: .1em;}
.pc #content .block-ttl:before {height: 96px;}
.pc #content .block-ttl em {font-size: 36px;margin-top: 5px;}
.pc #content .block-ttl em:before,.pc #content .block-ttl em:after {width: 16px;height: 100px;}
.pc #content .block-ttl em:before {margin-right: 30px;}
.pc #content .block-ttl em:after {margin-left: 30px;}

/*---------------------------
	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: 46px; left: 0;width: 477px;}

/*---------------------------
	lead-block
---------------------------*/
.pc #content .lead-block { padding: 70px 0;}
.pc #content .lead-block .text {padding-left: 180px;background-position: left top;background-size: 150px 150px;}
.pc #content .lead-block .text h2 {font-size: 30px;margin: 25px 0 30px;}
.pc #content .lead-block .text p {font-size: 16px;line-height: 2em;}
.pc #content .lead-block .banner-cp {margin: 80px 0 20px;}

/*---------------------------
	recipe-btn
---------------------------*/
.pc #content .recipe-btn {position: relative;}
.pc #content .recipe-btn ul {padding: 40px 30px 50px;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: 60px 0 100px;position: relative;overflow: hidden;}
.pc #content .recipe-block > * {position: relative;}
.pc #content .recipe-block:before {background: url(../images/recipe-bg-tri.png) center top repeat-y;top: 80px;}
.pc #content .recipe-block .box + .box {margin-top: 80px;}
.pc #content .recipe-block .text {padding: 20px 100px 30px;}
.pc #content .recipe-block .text h3 {font-size: 22px;}
.pc #content .recipe-block .text .use {right: 50px;top: -50px;}
.pc #content .recipe-block .point {padding: 30px 50px 30px 100px;display: flex;justify-content: center;align-items: center;}
.pc #content .recipe-block .point > div {margin: 0 40px 0 20px;flex: 1;font-weight: bold;}
.pc #content .recipe-block .point .btn-pink {width: 220px;}
.pc #content .recipe-block .point:before {content: '';width: 58px;height: 75px;display: block;background: url(../images/recipe-point-icon.png) center no-repeat;background-size: contain;}


/*---------------------------
wrapping-block
---------------------------*/
.pc #content .wrapping-block {padding: 60px 0 100px;position: relative;}
.pc #content .wrapping-block > * {position: relative;}
.pc #content .wrapping-block:before {background: url(../images/wrapping-bg-tri.png) center no-repeat;top: 80px;}
.pc #content .wrapping-block .text {padding: 30px 100px 40px;}
.pc #content .wrapping-block .text .use {right: -50px;top: -170px;}
.pc #content .wrapping-block .text h3 {font-size: 22px;}


/*---------------------------
cheese-block
---------------------------*/
.pc #content .cheese-block {margin: 50px 0;}
.pc #content .cheese-block .banner-cp {margin-top: 50px;}
.pc #content .cheese-block .box {margin-bottom: 120px; padding: 0 10%;}
.pc #content .cheese-block .box ul {display: flex;padding: 40px 90px 0;justify-content: space-between;}
.pc #content .cheese-block .box ul li {width: 220px;}

/*---------------------------
more-block
---------------------------*/
.pc #content .more-block {padding: 60px 0 100px;}
.pc #content .more-block .block-ttl em {font-size: 30px;line-height: 1.4em;}
.pc #content .more-block li {transition: .3s;}
.pc #content .more-block li:hover {opacity: .7;}
/*.pc #content .more-block ul {display: flex;justify-content: space-between;margin-bottom: 50px;}*/
.pc #content .more-block ul {display: flex;justify-content: center;margin-bottom: 50px;}


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

	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%;}
.sp #content .block-ttl {font-size: 16px;margin-bottom: 5%;}
.sp #content .block-ttl:before {background-size: 20% auto;padding-bottom: 20%;}
.sp #content .block-ttl em {font-size: 18px;position: relative;}
.sp #content .block-ttl em:before,.sp #content .block-ttl em:after {width: 16px;height: 100%;background-size: contain;position: absolute;}
.sp #content .block-ttl em:before {left: 0;}
.sp #content .block-ttl em:after {right: 0;}
.sp #content .bg-item {background: url(../images/sp/bg-item.png) top center no-repeat;margin-top: -45%;padding: 45% 0 0;background-size: 100% auto;}


/*---------------------------
	content-mv
---------------------------*/
.sp #content .content-mv h1 {margin-top: -9%;}
.sp #content .content-mv h1 img {width: 80%;margin: auto;}

/*---------------------------
	lead-block
---------------------------*/
.sp #content .lead-block { padding: 5% 0 8%;}
.sp #content .lead-block .text {background-position: center top;background-size: 20% auto;padding-top: 25%;}
.sp #content .lead-block .text .cxc {display: none;} 
.sp #content .lead-block .text h2 {font-size: 18px;margin-bottom: 3%;}
.sp #content .lead-block .text p {line-height: 2em;text-align: center;}
.sp #content .lead-block .banner-cp p img {width: 120px;margin: 10% auto 0;}

/*---------------------------
	recipe-btn
---------------------------*/
.sp #content .recipe-btn {background: url(../images/sp/bg-item2.png) center bottom no-repeat; background-size: 100% auto;padding-bottom: 15%;}
.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;}
.sp #content .recipe-btn ul li a:after {right: 0;width: 10px;height: 100%;}

/*---------------------------
recipe-block
---------------------------*/
.sp #content .recipe-block {margin-top: 5%;padding: 10% 0 15%;}
.sp #content .recipe-block:before {background: url(../images/sp/recipe-bg-tri.png) center top no-repeat;background-size: 90% auto;top:0;}
.sp #content .recipe-block .box {position: relative;overflow: inherit;}
.sp #content .recipe-block .box:before {content: '';display: block;position: absolute;background: url(../images/sp/recipe-bg-tri2.png) no-repeat top center ;background-size: 100% auto; bottom: -7%;width: 100%;height: 10%;z-index: 0;}
.sp #content .recipe-block .box > * {position: relative;z-index: 1;}
.sp #content .recipe-block .box + .box {margin-top: 15%;}
.sp #content .recipe-block .img {border-radius: 5px 5px 0 0;overflow: hidden;}
.sp #content .recipe-block .text {padding: 5% 3.5%;}
.sp #content .recipe-block .text .cxc {font-size: 12px;}
.sp #content .recipe-block .text h3 {font-size: 17px;line-height: 1.4em;margin: 3% 0;}
.sp #content .recipe-block .text .use {width: 70px;right: 10px;top: 0;transform: translateY(-40%)}
.sp #content .recipe-block .point {padding: 5% 3.5%;border-radius: 0 0 5px 5px;overflow: hidden;}
.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: 13px;}
.sp #content .recipe-block .point div:before {content: ''; width: 40px;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 .point p br {display: none;}
.sp #content .recipe-block .point p a {display: inline;}

/*---------------------------
wrapping-block
---------------------------*/
.sp #content .wrapping-block {padding: 10% 0 15%;}
.sp #content .wrapping-block:before {background: url(../images/sp/wrappng-bg-tri.png) center top no-repeat;background-size: 90% auto;top:0;}
.sp #content .wrapping-block:after {content: '';display: block;position: absolute;bottom: 0;width: 100%;height: 5%;background: url(../images/sp/wrapping-bg-tri2.png) center no-repeat;background-size: 100% auto;}
.sp #content .wrapping-block .text {padding: 5% 3.5%;} 
.sp #content .wrapping-block .text .use {width: 140px;right: -2%;top: -13%;}
.sp #content .wrapping-block .text .cxc {font-size: 12px;}
.sp #content .wrapping-block .text h3 {font-size: 17px;line-height: 1.4em;margin: 3% 0;}

/*---------------------------
cheese-block
---------------------------*/
.sp #content .cheese-block .box {margin:10% 0 80px;}
.sp #content .cheese-block .box:before,
.sp #content .cheese-block .box:after {top: 50px;}
.sp #content .cheese-block .box h2 {width: 200px;height: 105px;background-size: contain;}
.sp #content .cheese-block .box h2 .cxc {font-size: 13px;}
.sp #content .cheese-block .box h2 em {font-size: 14px;}
.sp #content .cheese-block .box ul {padding: 3.5% 7%;}
.sp #content .cheese-block .box ul li + li {margin-top: 8%;}
.sp #content .cheese-block .box ul li h3 {margin: 3% 0;}
.sp #content .cheese-block .box ul li h3 + figure {margin: 2% 0;}
.sp #content .cheese-block .box ul li p {margin: 2% 0;}
.sp #content .cheese-block .banner-cp {margin-bottom: 8%;}

.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 ul {padding: 3.5%;}
.sp #content .more-block ul li {margin-bottom: 8%;}
.sp #content .more-block ul li p {margin: -5% 3.5% 0;font-size: 14px;}