@charset "utf-8";
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100;}
#loading .inner { position: relative; width: 100%; height: 100%; background: #fff;}
#loading video { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 100%; min-height: 100%; z-index: 1;}
@media (max-width: 641px) {
	#loading video { width: 100% !important; min-height: auto;}
}


@keyframes wave1 {
	 0% { transform: translateY(0px);}
  50% { transform: translateY(20px);}
 100% { transform: translateY(0px);}
}
@keyframes wave2 {
	 0% { transform: translateY(0px);}
  50% { transform: translateY(10px);}
 100% { transform: translateY(0px);}
}


#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#kv .ctn { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#kv .ctn .inner { position: relative; width: 94%; max-width: 1040px; margin: 0 auto; padding-top: 280px;}

#kv .ctn .txt { width: 55%; max-width: 540px;}
#kv .ctn .txt p { text-align: center; transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 0.8s; opacity: 1;}
#kv .ctn .txt p img { width: 90%; max-width: 450px;}
#kv .note { position: absolute; left: 0; bottom: 0; z-index: 2;}
#kv .note div { width: 94%; max-width: 1040px; margin: 0 auto; padding: 20px;
 transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 1.8s; opacity: 1;
}
#kv .note ul { width: 100%; max-width: 520px;}
#kv .note ul li { color: #fff; font-size: 10px;}
#kv .kv-bg { position: relative; z-index: 1; background: url('../img/index/kv.jpg') no-repeat 50% 50% / cover;}
#kv .kv-bg:after { content: ''; display: block; width: 100%; padding-top: 840px;}
#kv.show .ctn .txt p { opacity: 1;}
#kv.show .news .inner div { opacity: 1;}
#kv.show .news div a { transform: translateX(0px);}
#kv.show .note div { opacity: 1;}
#kv.show .kv-bg:after { opacity: 1;}

@media (max-width: 1281px) {
	#kv .ctn .inner { padding-top: 16vw;}
	#kv .kv-bg:after { padding-top: 65%;}
}
@media (max-width: 1001px) {
	#kv .note div { padding: 12px;}
}
@media (max-width: 801px) {
	#kv .ctn { height: 100%;}
	#kv .ctn .inner { height: 100%; padding-top: 0vw;}
	#kv .ctn .txt { position: absolute; left: 0; bottom: 18vw; width: 100%; max-width: 100%;}
	#kv .note ul li { color: #7c3f2e;}
	#kv .kv-bg { background: url('../img/index/kv@sp.jpg') no-repeat 50% 50% / cover;}
	#kv .kv-bg:after { padding-top: 174%;}
}
@media (max-width: 481px) {
	#kv .ctn .txt { bottom: 27vw;}
	#kv .ctn .txt p img { width: 72%;}
	#kv .note div { padding: 8px 0;}
	#kv .note ul li { line-height: 1.2;}
}





#award { position: relative; border-top: solid 2px #fff; border-bottom: solid 2px #fff; z-index: 5;}
#award .award-tit { position: relative; padding: 3px 0; background: linear-gradient(90deg,#f3d387,#fcf5e5,#efc230,#fcf5e5,#f3d387); cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px;
 border-top: solid 2px #6a3906; border-right: solid 2px #6a3906;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-72%) rotate(135deg); margin-left: 300px;
}
#award .award-tit.open:after { transform: translate(0%,-35%) rotate(-45deg);}
#award .award-tit div { position: relative; padding: 12px 0 16px;
 background-image: url('data:image/svg+xml;utf8,<svg id="Graphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 396"><g fill="%23ffdc6b"><path d="M361.87,146.26c-8.74-8.59-17.99-14.8-27.28-19.86-1.34-.72-2.68-1.18-4.03-1.84,7.33-8.17,13.83-17.01,18.91-24.43,4.24-6.2,12.94-23.18,15.39-30.87,1.55-3.6,2.38-9.15,1.33-13.6-1.08-4.57-3.5-8.13-7.81-8.7-4.79-.63-8.05,2.09-10.8,6.28-2.67,4.06-2.83,9.8-2.98,11.56-.79,9.33-2.39,22.4-5.46,31.02-3.07,8.61-9.45,19.01-16.65,25.05-14.55-5.82-28.9-7.69-41.35-6.03-15.68,2.09-28.16,9.89-33.39,15.87-4.81,5.5-5.06,9.57-3.51,13.37.84,2.05,3.21,3.08,5.65,2.57,3.69-.77,5.12-2.05,7.92-4.55,2.82-2.52,11.39-14.47,24.48-16.1,8.3-1.17,18.84.38,29.23,4.34-1.22.94-2.28,1.92-3.56,2.84-15.7,11.2-35.87,21.1-58.01,30.88-18.23,8-38.1,15.76-59.17,23.32-8.69-6.17-23.93-17.88-36.25-27.65-12.53-10.22-25.88-20.45-41.33-28.05-15.51-7.55-31.29-12.04-51.38-11.1-20.09.94-36.44,9.81-48.47,25.64-12.02,15.83-17.56,37.63-9.73,57.76,8.96,23.04,27.92,33.68,38.37,37.45,12.13,4.37,29.67,7.98,58.05,2.57,24.09-4.59,92.55-36.03,96.61-37.88,9.69,6.16,44.06,27.22,72.64,34.27,30.51,7.53,51.71,3.25,70.47-4.28,21.38-8.58,39.96-28.14,40.21-50.78.18-15.97-8.26-29.33-18.13-39.04ZM136.01,205.85c-14.1,4.58-27.72,9.13-41.46,11.27-6.71,1.08-32.75.42-38.89-1.71-11.99-4.06-22.24-11.67-27.18-21.64-5.01-9.66-4.16-23.75,2.28-35.24,6.38-11.54,18.4-19.37,32.85-21.21,14.23-2.01,29.73.88,43.58,7.01,14.01,6.35,26.93,15.49,39.53,25.19,9.56,7.89,19.55,15.54,29.75,22.9-13.15,4.37-26.66,8.86-40.46,13.44ZM344.91,205.63c-7.89,5.08-22.94,13.38-48.51,13.89-25.8.51-57.28-5.92-85.09-20.22,15.81-7.47,30.9-15.01,44.88-22.63,21.73-11.91,62.17-40.14,64.45-42.21,11.37,4.77,40.74,26.39,40.05,48.65-.3,9.9-7.79,17.36-15.78,22.51Z"/><path d="M182.7,151.85c-3.32-2.43-25.76-25.37-38.83-45.75-13.07-20.37-16.92-41.52-15.95-50.74.76-7.29,2.92-24.76,18.84-38.83C163.28,1.92,179.24,0,190,0s26.72,1.92,43.25,16.53c15.92,14.07,18.08,31.54,18.84,38.83.96,9.23-2.88,30.37-15.95,50.74-13.07,20.37-35.51,43.32-38.83,45.75-2.88,2.12-5.38,3.46-7.3,3.46s-4.42-1.35-7.3-3.46ZM190,145.51c2.66,0,18.26-21.14,27.49-37.1,9.95-17.21,13.21-31.58,14.42-39.4,1.15-7.5.04-21.95-10.43-31.71-10.53-9.81-23.65-12.7-31.48-12.7s-20.95,2.88-31.48,12.7c-10.46,9.75-11.58,24.21-10.43,31.71,1.2,7.83,4.46,22.19,14.42,39.4,9.23,15.95,24.82,37.1,27.49,37.1Z"/><path d="M142.33,320.85c.21-1.31.55-2.84.96-4.47h93.41c.41,1.63.75,3.16.96,4.47.48,3,.46,6.93-.37,11.22h-94.59c-.83-4.29-.85-8.22-.37-11.22ZM223.48,285c3.15,5.66,5.68,10.9,7.74,15.69h-82.43c2.05-4.79,4.59-10.03,7.74-15.69h66.95ZM190,240.57c2.42,0,14.03,14.23,23.81,28.73h-47.61c9.77-14.5,21.38-28.73,23.81-28.73ZM190,367.52c-8.72,0-23.26-3.08-34.98-13.57-2.16-1.93-3.91-4.04-5.46-6.19h80.89c-1.56,2.16-3.3,4.26-5.46,6.19-11.72,10.48-26.26,13.57-34.98,13.57ZM174.33,378.81c1.93,3.06,5.71,8.62,8.26,12.5,1.74,2.66,4.64,4.11,7.39,4.11s5.64-1.45,7.39-4.11c2.55-3.89,6.36-9.45,8.28-12.5,9.86-2.18,20.91-6.28,28.57-12.98,15.99-13.99,18.34-30.72,18.07-39.21-.24-7.68-5.38-28.06-18.45-48.44-13.07-20.37-33.28-43.74-36.6-46.17-2.88-2.11-5.31-3.46-7.23-3.46s-4.34,1.35-7.23,3.46c-3.32,2.43-23.53,25.79-36.6,46.17-13.07,20.38-18.21,40.76-18.45,48.44-.27,8.49,2.08,25.22,18.07,39.21,7.65,6.7,18.67,10.79,28.54,12.98Z"/></g></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 80%;

}
#award .award-tit h2 { color: #6a3906; font-size: 30px; letter-spacing: 0.2rem; line-height: 1; text-align: center;}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 38px; height: 30px;
 background: url('/img/index/icn-award.png') no-repeat 50% 50% / 100% auto; vertical-align: middle;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
@media (max-width: 801px) {
	#award .award-tit:after { left: auto; right: 30px; transform: translate(0%,-50%) rotate(135deg); margin-left: 0px;}
}
@media (max-width: 481px) {
	#award { border-width: 1px;}
	#award .award-tit { padding: 2px 0;}
	#award .award-tit:after { right: 20px; width: 10px; height: 10px;}
	#award .award-tit div { padding: 10px 0 12px;}
	#award .award-tit h2 { font-size: 18px;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 32px; height: 24px;}
}
#award .ctn { display: none;}
#award .ctn .inner { background: #fff;}




.ttl { position: absolute; width: 100%;}
.ttl:after { content: ''; display: block; width: 100%; padding-top: 220px; position: absolute; left: 0; top: 0; z-index: 1;
 background: url('../img/ttl/bg.png') no-repeat 50% 100%;
}
.ttl div { position: relative; padding-top: 30px; z-index: 2;}
.ttl h2 { text-align: center;}
.ttl h2 img { width: 40%; max-width: 240px;}
@media (max-width: 801px) {
	.ttl:after { padding-top: 28%; background: url('../img/ttl/bg@sp.png') no-repeat 50% 100% / 100% auto;}
}
@media (max-width: 481px) {
	.ttl div {padding-top: 15px;}
}


#concept { position: relative;}
#concept .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 200px 0 60px;
	background: linear-gradient(40deg,#f6c55b,#fbf1c0,#fcf5d2,#fbf1c0,#f6c55b);
}
#concept .ctn { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto;}
#concept .ctn h3 { margin-bottom: 20px; text-align: center;}
#concept .ctn h3 img { width: 50%; max-width: 250px;}
#concept .ctn .movie { position: relative; width: 80%; max-width: 540px; margin: 0 auto 40px; z-index: 10;}
#concept .ctn .movie:after { content: none; display: block; width: 100%; padding-top: 56.75%; background: #eee;}

#concept .ctn .movie video { width: 100%;}

#concept .ctn p { position: relative; margin-bottom: 40px; text-align: center; z-index: 9;}
#concept .ctn p picture { display: block; width: 80%; max-width: 420px; margin: 0 auto;}
#concept .ctn p picture img { width: 100%;}
#concept .note div { width: 92%; max-width: 620px; margin: 0 auto;}
#concept .note ul {}
#concept .bubble { position: absolute; z-index: 1; animation: 8.0s wave1 linear infinite;}
#concept .bubble:before { content: ''; display: block; width: 100%; padding-top: 100%;}
#concept .bubble.bubble-L1 { width: 60px; left: 15%; top: 50%; background: url('../img/index/bubble-1.png') no-repeat 100% 50% / auto 100%;}
#concept .bubble.bubble-R1 { width: 100px; right: 0%; top: 15%; background: url('../img/index/bubble-2.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.7s;}
#concept .bubble.bubble-R2 { width: 100px; right: 5%; top: 55%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto;}
@media (max-width: 801px) {
	#concept .inner-sct { padding: 30vw 0 60px;}
	#concept .bubble.bubble-L1 { width: 80px; left: 0%; top: 0%;}
	#concept .bubble.bubble-L1:before { padding-top: 150%;}
	#concept .bubble.bubble-R1 { width: 80px; top: 10%;}
	#concept .bubble.bubble-R2 { width: 80px; top: 80%;}
}
@media (max-width: 481px) {
	#concept .inner-sct { padding-bottom: 40px;}
	#concept .ctn h3 { margin-bottom: 8px;}
	#concept .bubble.bubble-L1 { width: 50px; left: 0%; top: 0%;}
	#concept .bubble.bubble-R1 { width: 50px; top: 10%;}
	#concept .bubble.bubble-R2 { width: 50px; top: 75%;}
}





#point { position: relative;}
#point .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 60px;
	background: linear-gradient(40deg,#f6c55b,#fbf1c0,#fcf5d2,#fbf1c0,#f6c55b);
}
#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;
	box-shadow: 4px 4px 10px #a88b65;
}
#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 .point-tit { position: relative; cursor: pointer;}
#point .point-sp .point-tit:after { content: ''; display: block; width: 20px; height: 20px; border-bottom: solid 2px #44035e; border-right: solid 2px #44035e;
 position: absolute; right: 8%; top: 50%; transform: translateY(-60%) rotate(45deg);
}
#point .point-sp .point-tit.open:after { transform: translateY(-40%) rotate(225deg);}
#point .point-sp .point-tit img { width: 100%;}
#point .point-sp .point-ctn { position: relative; display: none; padding: 12px 0 24px;}
#point .point-sp .point-ctn .fig { width: 94%; margin: 0 auto; padding: 30px; background: #fff; padding: 30px; border-radius: 30px; overflow: hidden; box-shadow: 2px 2px 6px #a88b65;}
#point .point-sp .point-ctn .fig figure { width: 100%;}
#point .point-sp .point-ctn .fig figure img { width: 100%; height: auto;}
#point .point-sp .point-ctn .fig .kome ul li { font-size: 12px; }

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

#point .bubble { position: absolute; z-index: 1; animation: 6.0s wave2 linear infinite;}
#point .bubble:before { content: ''; display: block; width: 100%; padding-top: 100%;}
#point .bubble.bubble-L1 { width: 60px; left: 5%; top: 50%; background: url('../img/index/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R1 { width: 60px; right: 2%; top: 28%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.2s;}
#point .bubble.bubble-R2 { width: 60px; right: 4%; top: 55%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-L1a { width: 60px; left: 5%; top: 50%; background: url('../img/index/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R1a { width: 100px;right: 2%; top: 25%; background: url('../img/index/bubble-2.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.4s;}
#point .bubble.bubble-R1b { width: 100px;right: 5%; top: 72%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-L2a { width: 60px; left: 5%; top: 20%; background: url('../img/index/bubble-2.png') no-repeat 100% 50% / 100% auto; animation-delay: 0.3s;}
#point .bubble.bubble-L2b { width: 40px; left: 2%; bottom: 18%; background: url('../img/index/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R2a { width: 60px; right: 2%; top: 28%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-L3 { width: 60px; left: 0%; top: 25%; background: url('../img/index/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R3a { width: 80px;right: 0%; top: 15%; background: url('../img/index/bubble-2.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.5s;}
#point .bubble.bubble-R3b { width: 80px;right: 8%; top: 68%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-L4 { width: 80px; left: 0%; top: 12%; background: url('../img/index/bubble-2.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R4 { width: 60px;right: 0%; top: 70%; background: url('../img/index/bubble-1.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.2s;}

@media (max-width: 1201px) {
}
@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 .point-tit:after { width: 10px; height: 10px; border-width: 1px;}
	#point .point-sp .point-ctn .fig { padding: 16px 4px; border-radius: 12px; box-shadow: 2px 2px 6px #a88b65;}
	#point .ctn-sp .note { padding: 12px 10px 0;}

	#point .point-sp .spacer { height: 6px;}

	#point .bubble.bubble-L1a { width: 30px; left: 0%; top: 30%;}
	#point .bubble.bubble-R1a { width: 40px;right: 0%; top: 20%;}
	#point .bubble.bubble-R1b { width: 30px;right: 2%; top: 65%;}
	#point .bubble.bubble-L2a { width: 40px; left: 5%; top: 22%;}
	#point .bubble.bubble-L2b { width: 30px; left: 2%; bottom: 24%;}
	#point .bubble.bubble-R2a { width: 40px; right: 0%; top: 24%;}
	#point .bubble.bubble-L3 { width: 40px;}
	#point .bubble.bubble-R3a { width: 50px;}
	#point .bubble.bubble-R3b { width: 30px;}
	#point .bubble.bubble-L4 { width: 40px; top: 10%;}
	#point .bubble.bubble-R4 { width: 30px;}
}




#howto { position: relative;}
#howto .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 80px;
	background: linear-gradient(-40deg,#f6c55b,#fbf1c0,#fcf5d2,#fbf1c0,#f6c55b);
}
#howto .ctn { position: relative; z-index: 1; width: 94%; max-width: 820px; margin: 0 auto;}
#howto .ctn .box { width: 100%;}
#howto .ctn .box.box-1 { margin-bottom: 40px; border: solid 2px #f9cf5a; box-shadow: 2px 2px 6px #f9db98;}
#howto .ctn .box.box-2 { margin-bottom: 40px; border: solid 2px #f9c3d9; box-shadow: 2px 2px 6px #f9c3d9;}
#howto .ctn .box.box-3 { margin-bottom: 30px; border: solid 2px #e0be76; box-shadow: 2px 2px 6px #e0be76;}
#howto .ctn .box figure { width: 100%; text-align: center;}
#howto .ctn .box figure img { width: 100%; max-width: 820px;}
#howto .note div { width: 90%; max-width: 820px; margin: 0 auto;}
@media (max-width: 801px) {
	#howto .inner-sct { padding: 30vw 0 60px;}
	#howto .ctn .box.box-1 { margin-bottom: 30px;}
	#howto .ctn .box.box-2 { margin-bottom: 30px;}
	#howto .ctn .box.box-3 { margin-bottom: 20px;}
}
@media (max-width: 641px) {
	#howto .ctn { width: 100%;}
	#howto .ctn .box { border-left: none !important; border-right: none !important; }
}
@media (max-width: 481px) {
	#howto .inner-sct { padding-bottom: 40px;}
	#howto .ctn .box.box-1 { margin-bottom: 16px; box-shadow: 1px 1px 4px #f9db98;}
	#howto .ctn .box.box-2 { margin-bottom: 16px; box-shadow: 1px 1px 4px #f9c3d9;}
	#howto .ctn .box.box-3 { box-shadow: 1px 1px 4px #e0be76;}
}


#product { position: relative;}
#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 240px 0px 80px;
	background: linear-gradient(-40deg,#f6c55b,#fbf1c0,#fcf5d2,#fbf1c0,#f6c55b);
}
#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 ul li a { background: linear-gradient(30deg,#faf097 ,#f7c244);}
#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: ''; display: none; 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 .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:hover { opacity: 0.8;}
#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%;}
}



#qa { position: relative; border-top: solid 2px #f5d291;}
#qa .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 240px 0 80px;
	background: linear-gradient(-40deg,#f6c55b,#fbf1c0,#fcf5d2,#fbf1c0,#f6c55b);
}
#qa .ctn { position: relative; width: 92%; max-width: 840px; margin: 0 auto;}
#qa .ctn ul li { padding: 15px 0;}
#qa .ctn ul li dl { width: 100%; padding: 12px 30px; border-radius: 10px; box-shadow: 2px 2px 8px #ebd4ab; background: #fff;}
#qa .ctn ul li dl dt,
#qa .ctn ul li dl dd { position: relative; }
#qa .ctn ul li dl dt { padding: 20px; padding-left: 72px; font-size: clamp(15px,2.4vw,22px); line-height: 1.4; cursor: pointer;}
#qa .ctn ul li dl dd { display: none; padding: 20px; padding-left: 72px; font-size: clamp(13px,2.0vw,18px);}
#qa .ctn ul li dl dt span.icn,
#qa .ctn ul li dl dd span.icn { position: absolute; left: 0; top: 21px;
 color: #fff; font-size: clamp(18px,3.6vw,32px); font-weight: 700; line-height: 1; text-shadow: 0 0 5px #f7aa00,0 0 5px #f7aa00;
}
#qa .ctn ul li dl dt:after { content: ''; display: block; width: 12px; height: 12px; border-bottom: solid 2px #874128; border-left: solid 2px #874128;
 position: absolute; right: 0; top: 50%; transform: translateY(-55%) rotate(-45deg);
}
#qa .ctn ul li dl dt.open:after { transform: translateY(-30%) rotate(135deg);}
#qa .ctn ul li dl dd:before { content: ''; display: block; width: calc(100% - 72px); height: 1px; background: #874128;
 position: absolute; right: 0; top: 1px;
}
#qa .ctn ul li dl dd sub { font-size: 10px; vertical-align: baseline;}
#qa .note div { width: 92%; max-width: 1000px; margin: 0 auto;}
@media (max-width: 801px) {
	#qa .inner-sct { padding: 30vw 0 60px;}
	#qa .ctn ul li { padding: 12px 0;}
}
@media (max-width: 641px) {
	#qa .ctn ul li dl { padding: 8px 20px;}
	#qa .ctn ul li dl dt { padding: 16px; padding-left: 50px;}
	#qa .ctn ul li dl dd { padding: 16px; padding-left: 50px;}
	#qa .ctn ul li dl dd:before { width: calc(100% - 50px);}
	#qa .ctn ul li dl dt span.icn,
	#qa .ctn ul li dl dd span.icn { top: 18px;}
}
@media (max-width: 481px) {
	#qa .inner-sct { padding-bottom: 40px;}
	#qa .ctn ul li { padding: 8px 0;}
	#qa .ctn ul li dl { padding: 6px 12px;}
	#qa .ctn ul li dl dt { padding: 12px 24px; padding-left: 36px;}
	#qa .ctn ul li dl dd { padding: 12px 18px; padding-left: 36px;}
	#qa .ctn ul li dl dt:after { right: 8px; width: 10px; height: 10px;}
	#qa .ctn ul li dl dd:before { width: calc(100% - 36px);}
	#qa .ctn ul li dl dt span.icn,
	#qa .ctn ul li dl dd span.icn { top: 13px; text-shadow: 0 0 4px #f7aa00,0 0 4px #f7aa00;}
}



#campaign { position: relative; border-top: solid 2px #f5d291;}
#campaign .ttl { padding: 2px 0; background: #f5d291;}
#campaign .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0px 80px;
	background: linear-gradient(-40deg,#f6c55b,#fbf1c0,#fcf5d2,#fbf1c0,#f6c55b);
}
#campaign .ctn { position: relative; z-index: 1; width: 92%; max-width: 800px; margin: 0 auto;}
#campaign .ctn picture { position: relative; display: block; width 100%;}
#campaign .ctn picture img { width: 100%;}
#campaign .ctn .btn { position: absolute; left: 50%; bottom: 11%; z-index: 2; width: 50%;}
#campaign .ctn .btn a { display: block; width: 90%; max-width: 320px; border-radius: 50px; border: solid 1px #fff; overflow: hidden; line-height: 1;}
#campaign .ctn .btn a img { width: 100%;}
#campaign .ctn .btn a:hover img { opacity: 0.8;}
@media (max-width: 801px) {
	#campaign .inner-sct { padding: 28vw 0 60px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#campaign .inner-sct { padding-bottom: 40px;}
}



#shop { position: relative;}
#shop .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 0 70px; background: url('../img/bg-shop.jpg') no-repeat 50% 50% / cover;}
#shop h3 { margin-bottom: 20px; font-size: clamp(20px,2.8vw,24px); font-weight: 700; text-align: center; text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;}
#shop p { margin-bottom: 40px; font-size: 10px; text-align: center;}
#shop .btn { width: 65%; max-width: 420px; margin: 0 auto;}
#shop .btn a { position: relative; display: block; padding: 3px;
 background: linear-gradient(-60deg,#f7c244 50%,#faf097); border-radius: 50px; box-shadow: 2px 2px 6px #9fa0a0;
 color: #fff; font-size: clamp(15px,2.4vw,20px); font-weight: 700; text-align: center; text-decoration: none;
}
#shop .btn a:after { content: ''; display: none; width: 12px; height: 12px; border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#shop .btn a span { position: relative; display: block; padding: 18px; border: solid 2px #fff; background: linear-gradient(-60deg,#f7c244 50%,#faf097); border-radius: 50px;}
#shop .btn a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#shop .inner-sct { padding: 40px 0;}
	#shop h3 { margin-bottom: 10px;}
	#shop h3 span { display: block;}
	#shop p { margin-bottom: 10px;}
	#shop .btn a { padding: 2px;}
	#shop .btn a:after { width: 9px; height: 9px; border-width: 2px;}
	#shop .btn a span { padding: 6px; border-width: 1px;}
}


#lineup { position: relative;}
#lineup .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0px 50px; background: #fbf9de;}
#lineup .ttl {}
#lineup .ctn { margin: 0 auto;}
@media (max-width: 801px) {
	#lineup .inner-sct { padding: 27vw 0px 40px;}
}