@charset "utf-8";
body { color: #621a14;}
#hd .menu { background: #fcceb9;}
.menu-trig div span { background: #621a14;}
.menu-cart a svg { fill: #621a14;}

@keyframes waves{
   0% { background-position: 0% 100%;}
 100% { background-position: -1280px 100%;}
}
@keyframes wavesSp{
   0% { background-position-x: 0%;}
 100% { background-position-x: -800px;}
}

.wrap { width: 100%; max-width: 1280px; margin: 0 auto;}

.kv-product { position: relative; background: url('../../img/creamy/product/bg-kv.jpg') no-repeat 50% 50% / cover;}
.kv-product:before { content: ''; display: block; width: 100%; max-width: 1280px; height: 60px; position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
 background: url('../../img/creamy/wave-hd.png') repeat-x 50% 100% / 100% 100%; opacity: 0.8; animation: 10s waves linear infinite;
}
.kv-product .inner-kv { width: 92%; max-width: 1200px; margin: 0 auto; padding: 150px 0 180px;}
.kv-product h2 { text-align: right;}
.kv-product h2 img { width: 45%; max-width: 480px;}
.kv-product h2 img.sp { display: none;}
@media (max-width: 641px) {
	.kv-product { background: none;}
	.kv-product:before { height: 40px; top: 0px; background: url('../../img/creamy/wave-hd-sp.png') repeat-x 50% 100% / 800px 100%; animation: 10s wavesSp linear infinite;}
	.kv-product .inner-kv { width: 100%; padding: 0px;}
	.kv-product h2 img { width: 100%; max-width: 100%;}
	.kv-product h2 img.pc { display: none;}
	.kv-product h2 img.sp { display: block;}
}

#product-1 { background: url('../../img/creamy/product/bg-ptn-1.jpg') no-repeat 50% 50% / cover;}
#product-2 { background: url('../../img/creamy/product/bg-ptn-2.jpg') no-repeat 50% 50% / cover;}
#product-3 { background: url('../../img/creamy/product/bg-ptn-3.jpg') no-repeat 50% 50% / cover;}
#product-4 { background: url('../../img/creamy/product/bg-ptn-4.jpg') no-repeat 50% 50% / cover;}
#product-5 { background: url('../../img/creamy/product/bg-ptn-5.jpg') no-repeat 50% 50% / cover;}
#product-6 { background: url('../../img/creamy/product/bg-ptn-6.jpg') no-repeat 50% 50% / cover;}


.item-bloc .inner-bloc { width: 92%; max-width: 1080px; margin: 0 auto;}
#product-1.item-bloc .inner-bloc { padding-top: 150px;}
#product-2.item-bloc .inner-bloc { padding-top: 150px;}
#product-3.item-bloc .inner-bloc { padding-top: 150px;}
#product-4.item-bloc .inner-bloc { padding-top: 150px;}
#product-5.item-bloc .inner-bloc { padding-top: 130px;}
#product-6.item-bloc .inner-bloc { padding-top: 130px;}
.item-bloc .ctn-flex { display: flex; width: 100%;}
.item-bloc .ctn-flex .pht { position: relative; width: 46%;}
.item-bloc .ctn-flex .txt { width: 54%; padding-bottom: 20px;}
#product-1.item-bloc .ctn-flex .txt { padding-top: 60px;}
#product-2.item-bloc .ctn-flex .txt { padding-top: 30px;}
#product-3.item-bloc .ctn-flex .txt { padding-top: 60px;}
#product-4.item-bloc .ctn-flex .pht { padding-top: 100px;}
#product-4.item-bloc .ctn-flex .txt { padding-top: 50px;}
#product-5.item-bloc .ctn-flex .txt,
#product-6.item-bloc .ctn-flex .txt { padding-top: 80px;}
.item-bloc .ctn-flex .pht figure { width: 100%; text-align: center;}
.item-bloc .ctn-flex .pht figure img{ width: 50%; max-width: 260px;}
.item-bloc .ctn-flex .pht figure img.sp { display: none;}
.item-bloc .ctn-flex .pht .icn-step { position: absolute; left: 0; width: 125px;}
#product-1.item-bloc .ctn-flex .pht .icn-step { top: 30px;}
#product-2.item-bloc .ctn-flex .pht .icn-step { top: 30px;}
#product-3.item-bloc .ctn-flex .pht .icn-step { top: 30px;}
#product-4.item-bloc .ctn-flex .pht .icn-step { top: 0px;}
.item-bloc .ctn-flex .pht .icn-step img { width: 100%;}
.item-bloc .ctn-flex .txt h3 { margin-bottom: 15px; text-indent: -8px;}
.item-bloc .ctn-flex .txt h3 img { width: 100%; max-width: 640px;}
.item-bloc .ctn-flex .txt h3 img.sp { display: none;}
.item-bloc .ctn-flex .txt p.read { margin-bottom: 15px; font-size: 20px; font-weight: 600; line-height: 1.4;
}
.item-bloc .ctn-flex .txt figure { width: 92%; max-width: 480px; margin-bottom: 15px; text-align: center;}
.item-bloc .ctn-flex .txt figure img { width: 50%; max-width: 230px;}
.item-bloc .ctn-flex .txt p.price { margin-bottom: 20px; font-size: 20px; font-weight: 600;}
.item-bloc .ctn-flex .txt .btn-cart { width: 86%; max-width: 480px;}
.item-bloc .ctn-flex .txt .btn-cart a{ position: relative; display: block; width: 100%; max-width: 480px; padding: 25px 0; background: #621a14; border-radius: 50px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none; transition: 0.2s linear;
}
.item-bloc .ctn-flex .txt .btn-cart a:after { content: ''; display: block; width: 10px; height: 10px;
 border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 30px; top: 50%; transform: translate(0,-50%) rotate(45deg);
}
.item-bloc .ctn-flex .txt .btn-cart a svg { display: inline-block; width: 25px; margin-right: 10px; fill: #fff; vertical-align: middle;}
.item-bloc .ctn-flex .txt .btn-cart a span{ display: inline-block; vertical-align: middle; font-weight: 700;}
.item-bloc .ctn-flex .txt .btn-cart a:hover { opacity: 0.8;}

.item-bloc .ctn-flex .txt .btn-cart form { position: relative; display: block; width: 100%; max-width: 480px; background: #621a14; border-radius: 50px; text-align: center;}
.item-bloc .ctn-flex .txt .btn-cart form::after { content: ''; display: block; width: 10px; height: 10px;
 border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 30px; top: 50%; transform: translate(0,-50%) rotate(45deg);
}
.item-bloc .ctn-flex .txt .btn-cart form input[type="submit"]{ position: relative; display: block; width: 100%; padding: 25px 0; border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 18px; text-indent: 30px; transition: 0.2s linear;
}
.item-bloc .ctn-flex .txt .btn-cart form svg { display: block; width: 25px; fill: #fff; vertical-align: middle;
 position: absolute; left: 30%; top: 50%; transform: translate(0,-50%);
}
.item-bloc .ctn-flex .txt .btn-cart form input[type="submit"]:hover { background: rgba(255,255,255,.2);}
.item-bloc .ctn-flex .txt .btn-cart span { position: relative; display: block; width: 100%; max-width: 480px; padding: 25px 0; background: #b08c89; border-radius: 50px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none; transition: 0.2s linear;
}
.item-bloc .ctn-flex .txt .btn-cart span svg{ display: inline-block; width: 25px; margin-right: 10px; fill: #fff; vertical-align: top;}
@media (max-width: 1001px) {
	#product-1.item-bloc .inner-bloc { padding-top: 120px;}
	#product-2.item-bloc .inner-bloc { padding-top: 120px;}
	#product-3.item-bloc .inner-bloc { padding-top: 120px;}
	#product-4.item-bloc .inner-bloc { padding-top: 100px;}
	#product-5.item-bloc .inner-bloc { padding-top: 100px;}
	#product-6.item-bloc .inner-bloc { padding-top: 100px;}
	.item-bloc .ctn-flex .pht { width: 42%;}
	.item-bloc .ctn-flex .txt { width: 58%;}
	#product-1.item-bloc .ctn-flex .txt { padding-top: 20px;}
	#product-2.item-bloc .ctn-flex .txt { padding-top: 20px;}
	#product-3.item-bloc .ctn-flex .txt { padding-top: 0px;}
	#product-4.item-bloc .ctn-flex .pht { padding-top: 50px;}
	#product-4.item-bloc .ctn-flex .txt { padding-top: 0px;}
	#product-5.item-bloc .ctn-flex .txt,
	#product-6.item-bloc .ctn-flex .txt { padding-top: 50px;}
	.item-bloc .ctn-flex .pht .icn-step { width: 100px;}
	.item-bloc .ctn-flex .txt p.read { font-size: 18px;}
	.item-bloc .ctn-flex .txt p.price { font-size: 18px;}
	.item-bloc .ctn-flex .txt .btn-cart a{ padding: 18px 0;}
	.item-bloc .ctn-flex .txt .btn-cart span{ padding: 18px 0;}
}
@media (max-width: 801px) {
	#product-1.item-bloc .inner-bloc,
	#product-2.item-bloc .inner-bloc,
	#product-3.item-bloc .inner-bloc,
	#product-4.item-bloc .inner-bloc,
	#product-5.item-bloc .inner-bloc,
	#product-6.item-bloc .inner-bloc { padding-top: 80px;}
	.item-bloc .ctn-flex { display: block;}
	.item-bloc .ctn-flex .pht { width: 100%;}
	.item-bloc .ctn-flex .pht figure img.pc { display: none;}
	.item-bloc .ctn-flex .pht figure img.sp { display: block; margin: 0 auto;}
	.item-bloc .ctn-flex .pht .icn-step { left: 15%;}
	#product-1.item-bloc .ctn-flex .pht .icn-step { top: 30px;}
	#product-2.item-bloc .ctn-flex .pht .icn-step { top: 30px;}
	#product-3.item-bloc .ctn-flex .pht .icn-step { top: 30px;}
	#product-4.item-bloc .ctn-flex .pht .icn-step { top: 0px;}
	.item-bloc .ctn-flex .txt { width: 100%; text-align: center; padding-bottom: 60px;}
	#product-1.item-bloc .ctn-flex .txt,
	#product-2.item-bloc .ctn-flex .txt,
	#product-3.item-bloc .ctn-flex .txt,
	#product-4.item-bloc .ctn-flex .pht,
	#product-4.item-bloc .ctn-flex .txt,
	#product-5.item-bloc .ctn-flex .txt,
	#product-6.item-bloc .ctn-flex .txt { padding-top: 15px;}
	.item-bloc .ctn-flex .txt h3 { text-indent: 0px;}
	.item-bloc .ctn-flex .txt h3 img.pc { display: none;}
	.item-bloc .ctn-flex .txt h3 img.sp { display: block; max-width: 540px; margin: 0 auto;}
	.item-bloc .ctn-flex .txt figure { margin: 0 auto 15px;}
	.item-bloc .ctn-flex .txt .btn-cart { margin: 0 auto;}
}
@media (max-width: 641px) {
#product-1 { background: url('../../img/creamy/product/bg-ptn-1-sp.jpg') no-repeat 50% 50% / cover;}
#product-2 { background: url('../../img/creamy/product/bg-ptn-2-sp.jpg') no-repeat 50% 50% / cover;}
#product-3 { background: url('../../img/creamy/product/bg-ptn-3-sp.jpg') no-repeat 50% 50% / cover;}
#product-4 { background: url('../../img/creamy/product/bg-ptn-4-sp.jpg') no-repeat 50% 50% / cover;}
#product-5 { background: url('../../img/creamy/product/bg-ptn-5-sp.jpg') no-repeat 50% 50% / cover;}
#product-6 { background: url('../../img/creamy/product/bg-ptn-6-sp.jpg') no-repeat 50% 50% / cover;}
}
@media (max-width: 481px) {
	.item-bloc .ctn-flex .pht .icn-step { left: 4%; width: 85px;}
	#product-1.item-bloc .ctn-flex .pht .icn-step { top: 0px;}
	#product-2.item-bloc .ctn-flex .pht .icn-step { top: 0px;}
	#product-3.item-bloc .ctn-flex .pht .icn-step { top: 0px;}
	#product-4.item-bloc .ctn-flex .pht { padding-top: 0px;}
	#product-5.item-bloc .ctn-flex .pht figure img,
	#product-6.item-bloc .ctn-flex .pht figure img{ width: 40%;}
	#product-1.item-bloc .ctn-flex .txt,
	#product-2.item-bloc .ctn-flex .txt,
	#product-3.item-bloc .ctn-flex .txt,
	#product-4.item-bloc .ctn-flex .txt,
	#product-5.item-bloc .ctn-flex .txt,
	#product-6.item-bloc .ctn-flex .txt { padding-top: 6px;}
	.item-bloc .ctn-flex .txt h3 img { width: 80%;}
	.item-bloc .ctn-flex .txt p.read { font-size: 20px;}
	.item-bloc .ctn-flex .txt p.read span{ display: block;}
	.item-bloc .ctn-flex .txt p.price { font-size: 15px;}
	.item-bloc .ctn-flex .txt .btn-cart a { padding: 12px 0;}
	.item-bloc .ctn-flex .txt .btn-cart form svg { left: 20%;}
	.item-bloc .ctn-flex .txt .btn-cart span{ padding: 12px 0;}
}