@charset "utf-8";

.ttl { position: absolute; width: 100%;}
.ttl:after { content: ''; display: block; width: 100%; padding-top: 220px; position: absolute; left: 0; top: 0; z-index: 1;}
.ttl div { position: relative; padding-top: 30px; z-index: 2;}
.ttl h2 { text-align: center;}
.ttl h2 img { width: 40%; max-width: 320px;}
@media (max-width: 801px) {
	.ttl:after { padding-top: 25%;}
}
@media (max-width: 481px) {
	.ttl div {padding-top: 12px;}
}


#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 50px;}
#kv .hd-logo { position: absolute; left: 0; top: 0; width: 100%;}
#kv .hd-logo:after { content: ''; display: block; width: 100%; padding-top: 220px; position: absolute; left: 0; top: 0;}
#kv .hd-logo .logo { position: relative; width: 24%; max-width: 200px; margin: 0 auto; padding-top: 8px; z-index: 2;}
#kv .hd-logo .logo img { width: 100%;}
#kv .ctn { position: relative; width: 100%; margin: 0 auto 60px;}
#kv .ctn h1 { margin-bottom: 80px; color: #7c3f2e; font-size: clamp(21px,4.0vw,36px); font-weight: 700; text-align: center;
 text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;}
#kv .ctn h1 span.ruby { position: relative;}
#kv .ctn h1 span.ruby span.rt { position: absolute; right: 0; bottom: -18px; font-size: 12px;}
#kv .ctn .inner { position: relative; width: 88%; max-width: 680px; margin: 0 auto; padding-bottom: 40px;}
#kv .ctn .badge { position: absolute; left: 0; top: 0; width: 25%; max-width: 120px;}
#kv .ctn .badge img { width: 100%;}
#kv .ctn .flavor { position: absolute; right: 0; bottom: 40px; width: 25%; max-width: 160px;}
#kv .ctn .flavor img { width: 100%;}
#kv .ctn figure { text-align: center;}
#kv .ctn figure img { width: 72%; max-width: 460px;}
#kv .ctn .txt {}
#kv .ctn .txt p { text-align: center;}
#kv .ctn .txt p.name { margin-bottom: 40px; font-size: clamp(16px,3.0vw,24px); font-weight: 700;
 text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
#kv .ctn .txt p.amount { font-size: 16px; font-weight: 600;}
#kv .ctn .txt p.price { margin-bottom: 40px; font-size: 14px; font-weight: 600; letter-spacing: 0.1rem;}
#kv .ctn .txt p.price span { font-size: 16px;}
#kv .ctn .txt .btn { width: 60%; max-width: 320px; margin: 0 auto;}
#kv .ctn .txt .btn a { position: relative; display: block; border: solid 1px #fff; border-radius: 50px;
 color: #7c3f2e; font-size: clamp(14px,2.4vw,21px); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; /* text-indent: 30px;*/
}
#kv .ctn .txt .btn a { background: linear-gradient(30deg,#faf097,#f7a10e); box-shadow: 3px 3px 5px #a88b65;}
#kv .ctn .txt .btn a.yet { background: #ddd; pointer-events: none;}
#kv .ctn .txt .btn a:before { content: ''; display: none; width: 21px; height: 21px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="%237c3f2e"><path d="M5.7,26.5a1.06,1.06,0,0,1,0-2.11H20l.66-2.46H5.54a1.07,1.07,0,0,1-1-.77L.77,7.78A1.05,1.05,0,0,1,1,6.86a1.07,1.07,0,0,1,.84-.42h23L26.22,1a1.06,1.06,0,0,1,1-.79h5a1.07,1.07,0,0,1,1.06,1.06,1.06,1.06,0,0,1-1.06,1.05H28.05L21.81,25.72a1.05,1.05,0,0,1-1,.78Zm12.48-6.68h3l1.21-4.58H18.18Zm-7.1,0h5V15.24h-5Zm-4.74,0H9V15.24H5.06Zm11.84-6.69H23l1.21-4.58h-6Zm-7.1,0h5V8.55h-5Zm-6.62,0H9V8.55H3.18Z"></path><path d="M7.94,33.84a3,3,0,1,1,3-3A3,3,0,0,1,7.94,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.91.91,0,0,0,7.94,29.92Z"></path><path d="M19,33.84a3,3,0,1,1,3-3A3,3,0,0,1,19,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.9.9,0,0,0,19,29.92Z"></path></g></svg>');
 position: absolute; left: 20%; top: 50%; transform: translateY(-50%); z-index: 2;
}
#kv .ctn .txt .btn a span { display: block; padding: 12px;}

#kv .note div { width: 90%; max-width: 1024px; margin: 0 auto;}
@media (max-width: 801px) {
	#kv .inner-kv { padding: 32vw 0 40px;}
	#kv .hd-logo:after { padding-top: 30%;}
	#kv .ctn { margin-bottom: 40px;}
	#kv .ctn h1 { margin-bottom: 8.0vw;}
	#kv .ctn .flavor { bottom: 20px;}
	#kv .ctn .txt p.name { margin-bottom: 20px;}
	#kv .ctn .txt p.amount { font-size: 14px;}
	#kv .ctn .txt p.price { margin-bottom: 20px; font-size: 13px;}
}
@media (max-width: 481px) {
	#kv .ctn h1 { margin-bottom: 6.0vw;}
	#kv .ctn .txt .btn a { box-shadow: 2px 2px 3px #a88b65;}
	#kv .ctn .txt .btn a:before { width: 15px; height: 15px;}
}



#point { position: relative;}
#point .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 60px;}
#point .ctn-pc { position: relative; padding-top: 20px; z-index: 10;}
#point .ctn-pc .box { position: absolute; left: 0; top: 0; width: 100%; z-index: 9;}
#point .ctn-pc.fixed .box { position: fixed;}
#point .ctn-pc .box.show { z-index: 10;}
#point .ctn-pc .box .inner-box { width: 100%; max-width: 1120px; margin: 0 auto; padding: 40px; transition: 0.3s linear; opacity: 0;}
#point .ctn-pc .box.show .inner-box { opacity: 1;}
#point .ctn-pc .box .ctn-flex { display: flex; width: 100%; justify-content: space-between; align-items: flex-start;}
#point .ctn-pc .box .tit { width: 46%; max-width: 480px;}
#point .ctn-pc .box .fig { width: 52%; background: #fff; padding: 30px; border-radius: 30px; overflow: hidden;}
#point .ctn-pc .box .tit img { width: 100%; height: auto;}
#point .ctn-pc .box .fig p { margin-bottom: 12px; color: #804f21; font-size: clamp(16px,1.8vw,20px); font-weight: 700;}
#point .ctn-pc .box .fig p span { display: block;}
#point .ctn-pc .box .fig p sub { font-size: 12px; vertical-align: baseline;}
#point .ctn-pc .box .fig figure { margin-bottom: 20px; width: 100%;}
#point .ctn-pc .box .fig figure img { width: 100%; height: auto;}
#point .ctn-pc .box .fig .note ul li { line-height: 1.4; }

#point .ctn-pc .note div { width: 92%; max-width: 1080px; margin: 0 auto;}

#point .ctn-sp { position: relative; display: none; z-index: 10;}
#point .point-sp { width: 92%; max-width: 680px; margin: 0 auto;}
#point .point-sp .box { padding: 30px 20px; background: #fff; border-radius: 20px;}
#point .point-sp .point-tit { position: relative;}
#point .point-sp .point-tit img { width: 100%;}
#point .point-sp .point-ctn { position: relative;}
#point .point-sp .point-ctn .fig { width: 94%; margin: 0 auto; padding-top: 30px;}
#point .point-sp .point-ctn .fig figure { width: 100%;}
#point .point-sp .point-ctn .fig figure img { width: 100%; height: auto;}

#point .point-sp .spacer { height: 20px;}
#point .ctn-sp .note { padding-top: 30px;}

#point .bubble { position: absolute; z-index: 1;}
#point .bubble:before { content: ''; display: block; width: 100%; padding-top: 100%;}
@media (max-width: 801px) {
	#point .inner-sct { padding: 30vw 0 60px;}
	#point .ctn-pc { display: none;}
	#point .ctn-sp { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#point .inner-sct { padding-bottom: 32px;}
	#point .point-sp .spacer { height: 20px;}
	#point .point-sp .box { padding: 20px 12px; border-radius: 12px;}
	#point .point-sp .point-ctn .fig { padding-top: 16px;}
	#point .ctn-sp .note { padding: 12px 0px 0;}
}



#howto .inner-sct { position: relative; padding: 60px 0;}
#howto .ctn { width: 92%; max-width: 800px; margin: 0 auto;}
#howto .ctn figure img { width: 100%;}
#howto .bubble { position: absolute; z-index: 1;}
#howto .bubble:before { content: ''; display: block; width: 100%; padding-top: 100%;}

@media (max-width: 641px) {
	#howto .bubble { display: none;}
}
@media (max-width: 481px) {
	#howto .inner-sct { padding: 20px 0 40px;}
}

#product { position: relative;}
#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 240px 0px 60px;}
#product .slider { margin-bottom: 60px;}
#product .box { position: relative; padding: 40px 10px 10px;}
#product .box .badge { position: absolute; left: 8%; top: 0; width: 30%; max-width: 80px; z-index: 2;}
#product .box .badge img { width: 100%;}
#product .box figure { position: relative; text-align: center; z-index: 1;}
#product .box figure img { width: 98%; margin: 0 auto; border-radius: 20px; box-shadow: 2px 2px 5px #a88b65;}
#product .box .btn { position: absolute; left: 0; bottom: 25px; width: 100%; z-index: 3;}
#product .box .btn ul { width: 74%; max-width: 200px; margin: 0 auto; text-align: center;}
#product .box .btn ul li { padding: 6px 0; font-size: 13px; line-height: 1.2;}
#product .box .btn ul li a { position: relative; display: block; width: 100%; padding: 8px 0; border-radius: 50px; box-shadow: 2px 2px 5px #a88b65;
 color: #7c3f2e; font-weight: 600; letter-spacing: 0.1rem; text-decoration: none;}
#product .box .btn.btn-c ul li a { background: linear-gradient(30deg, #faf097 ,#f7c244);}
#product .box .btn.btn-p ul li a { background: linear-gradient(30deg, #f4dfe5 ,#f9a7b9);}
#product .box .btn.btn-uv ul li a { background: linear-gradient(30deg, #f0e1a3 15%,#fcf7ed 50%, #e5d4aa 85%);}
#product .box .btn.btn-moist ul li a { background: linear-gradient(30deg, #fcea94 ,#f79700);}
#product .box .btn ul li a.yet { background: #ddd !important; pointer-events: none;}
/*#product .box .btn ul li a.cart { text-indent: 24px;}*/
#product .box .btn ul li a.cart:before { content: none; display: block; width: 15px; height: 15px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="%237c3f2e"><path d="M5.7,26.5a1.06,1.06,0,0,1,0-2.11H20l.66-2.46H5.54a1.07,1.07,0,0,1-1-.77L.77,7.78A1.05,1.05,0,0,1,1,6.86a1.07,1.07,0,0,1,.84-.42h23L26.22,1a1.06,1.06,0,0,1,1-.79h5a1.07,1.07,0,0,1,1.06,1.06,1.06,1.06,0,0,1-1.06,1.05H28.05L21.81,25.72a1.05,1.05,0,0,1-1,.78Zm12.48-6.68h3l1.21-4.58H18.18Zm-7.1,0h5V15.24h-5Zm-4.74,0H9V15.24H5.06Zm11.84-6.69H23l1.21-4.58h-6Zm-7.1,0h5V8.55h-5Zm-6.62,0H9V8.55H3.18Z"></path><path d="M7.94,33.84a3,3,0,1,1,3-3A3,3,0,0,1,7.94,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.91.91,0,0,0,7.94,29.92Z"></path><path d="M19,33.84a3,3,0,1,1,3-3A3,3,0,0,1,19,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.9.9,0,0,0,19,29.92Z"></path></g></svg>');
 position: absolute; left: 24%; top: 50%; transform: translateY(-50%); z-index: 2;
}

#product .slick-arrow {}
#product .slick-prev { left: 9%;}
#product .slick-next { right: 9%;}
#product .note div { width: 90%; max-width: 1040px; margin: 0 auto;}
@media (max-width: 1181px) {
}
@media (max-width: 1001px) {
	#product .inner-sct { padding: 220px 0px 60px;}
	#product .slider { margin-bottom: 40px;}
	#product .box { padding: 3vw 10px 10px;}
	#product .box .badge { left: 12%;}
	#product .box .btn { bottom: 16px;}
	#product .box .btn ul li { padding: 4px 0;}
	#product .box .btn ul li a { padding: 4px 0;}
}
@media (max-width: 801px) {
	#product .inner-sct { padding: 30vw 0px 60px;}
	#product .box { padding: 3vw 20px 10px;}
	#product .box .btn { bottom: 5%;}
	#product .box .btn ul { max-width: 320px;}
	#product .box .btn ul li { padding: 8px 0; font-size: clamp(12px,3.0vw,16px);}
	#product .box .btn ul li a { padding: 12px 0;}
	#product .box .btn ul li a.cart:before { width: 20px; height: 20px;}
}
@media (max-width: 481px) {
	#product .inner-sct { padding-bottom: 40px;}
	#product .slider { margin-bottom: 20px;}

	#product .box .btn ul li { padding: 4px 0;}
	#product .box .btn ul li a { padding: 6px 0;}
	#product .box .btn ul li a:after{ width: 18px; height: 18px;}

	#product .slick-prev { left: 8%;}
	#product .slick-next { right: 8%;}
}



#back { background: #fff;}
#back .inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 0;}

#back .btn { width: 62%; max-width: 420px; margin: 0 auto;}
#back .btn a { position: relative; display: block; padding: 2px; background: linear-gradient(90deg,#f3c900,#ff7f37); border-radius: 10px;
 color: #fff; font-size: clamp(14px,2.0vw,18px); font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
}
#back .btn a span { display: block; padding: 18px; padding-left: 30px; border: solid 2px #fff; border-radius: 8px;}
#back .btn a:hover { opacity: 0.8;}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#back .btn a span { padding: 10px; border-width: 1px;}
}