@charset "utf-8";

#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #fff; z-index: 101;}
#loading div { width: 70%; max-width: 500px; position: absolute; left: 50%; top: 30%; transform: translate(-50%,0);}
#loading div svg { stroke-dasharray: 500; stroke-dashoffset: 500; stroke-width: 0.6px; fill: rgba(255,255,255,0);
 animation: strokeAnime 2.5s linear 0.5s forwards;
}
@keyframes strokeAnime {
  0% { stroke-dashoffset: 500; fill: rgba(255,255,255,0); stroke: rgb(105, 36, 8,1);}
	60% { fill: rgba(255,255,255,0);}
	80% { stroke-dashoffset: 0;}
  100%{ fill: rgba(105, 36, 8,1); stroke: #fff;}
}

@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 .note { position: absolute; left: 0; bottom: 0; padding: 40px; z-index: 2;}
#kv .note ul { max-width: 1000px; margin: 0 auto;}
#kv .note ul li { color: #fff;}
#kv .bg { position: relative; z-index: 1;}
#kv .bg picture { display: block;}
#kv .bg picture img { width: 100%;}
@media (max-width: 1281px) {
	#kv .logo .inner { padding-top: 12vw;}
}
@media (max-width: 1001px) {
	#kv .logo .inner div:before { width: 100px; height: 110px;}
}
@media (max-width: 801px) {
	#kv .note { padding: 24px;}
	#kv .note ul { text-align: right;}
}
@media (max-width: 481px) {
	#kv .note { padding: 16px;}
}





#award { position: relative; z-index: 5;}
#award .award-tit { position: relative; background: #ffb028; padding: 12px 0; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 12px; height: 12px;
 border-top: solid 3px #6a3906; border-right: solid 3px #6a3906;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(135deg); margin-left: 300px;
}
#award .award-tit.open:after { transform: translate(-50%,-35%) rotate(-45deg);}
#award .award-tit h2 { color: #6a3906; font-size: 30px; letter-spacing: 0.2rem; text-align: center;}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 38px; height: 30px;
 background: url('/img/awards/icn.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 .award-tit { padding: 6px 0;}
	#award .award-tit:after { right: 20px; width: 10px; height: 10px;}
	#award .award-tit h2 { font-size: 20px;}
	#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%; z-index: 2;}
.ttl:before { content: ''; position: relative; display: block; width: 100%; height: 328px; background: url('./img/ttl/bg.png') no-repeat 50% 0;}
.ttl h2 { position: absolute; left: 0; top: 6%; width: 100%; text-align: center;}
.ttl h2 img { width: 80%; max-width: 520px;}
@media (max-width: 801px) {
	.ttl:before { height: 0px; padding-top: 23%; background: url('./img/ttl/bg@sp.png') no-repeat 50% 100% / 100% auto;}
	.ttl h2 { top: 10%;}
}

.bubble { position: absolute;}
.bubble:before { content: ''; display: block; position: relative; width: 100%; height: 100%;}
.bubble-L1:before { background-image: url('./img/bubble-L1.png'); background-repeat: no-repeat; background-size: auto 100%; background-position: 100% 50%;
 animation: 6.0s linear wave1 infinite;
}
.bubble-L2:before { background-image: url('./img/bubble-L2.png'); background-repeat: no-repeat; background-size: auto 100%; background-position: 100% 50%;
 animation: 4.0s linear wave2 infinite;
}
.bubble-R1:before { background-image: url('./img/bubble-R1.png'); background-repeat: no-repeat; background-size: auto 100%;
 animation: 6.0s linear wave1 infinite;
}
.bubble-R2:before { background-image: url('./img/bubble-R2.png'); background-repeat: no-repeat; background-size: auto 100%; background-position: 0% 50%;
 animation: 4.0s linear wave2 infinite;
}



#campaign { position: relative;}
#campaign .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 230px 0 90px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#campaign .ctn { position: relative; z-index: 1; width: 92%; max-width: 780px; margin: 0 auto;}
#campaign .ctn picture { position: relative; display: block; width 100%; border: solid 2px #fff; border-radius: 20px; overflow: hidden;}
#campaign .ctn picture img{ width: 100%;}
#campaign .ctn .txt { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: 30px 80px;}
#campaign .ctn .txt p { font-size: clamp(12px,3.0vw,23px); font-weight: 700;}
#campaign .ctn .txt .btn { width: 45%; max-width: 300px; margin: 0 0 -30px auto;}
#campaign .ctn .txt .btn a { display: block; width: 100%; border-radius: 50px; border: solid 1px #ffe894; overflow: hidden; line-height: 1;}
#campaign .ctn .txt .btn a img { width: 100%;}
#campaign .ctn .txt .btn a:hover { opacity: 0.8;}
#campaign .bubble.bubble-L1 { width: 100px; height: 100px; left: 2%; bottom: 20%;}
#campaign .bubble.bubble-L2 { width: 150px; height: 240px; left: 0%; top: 30%;}
#campaign .bubble.bubble-R1 { width: 90px; height: 90px; right: 10%; top: 20%;}
#campaign .bubble.bubble-R2 { width: 150px; height: 280px; right: 0%; top: 40%;}
@media (max-width: 801px) {
	#campaign .inner-sct { padding: 30vw 0 60px;}
	#campaign .ctn .txt { padding: 4vw 40px;}
	#campaign .bubble.bubble-L1 { bottom: 6%;}
	#campaign .bubble.bubble-L2 { width: 120px; height: 200px; top: 55%;}
	#campaign .bubble.bubble-R1 { top: 12%;}
	#campaign .bubble.bubble-R2 { width: 80px; height: 200px; top: 25%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 28vw 0 40px;}
	#campaign .ctn .txt { padding: 4vw 25px;}
	#campaign .ctn .txt .btn { margin-bottom: -15px;}
	#campaign .bubble.bubble-L1 { width: 50px; height: 50px; left: 0;}
	#campaign .bubble.bubble-L2 { width: 90px; height: 180px;}
	#campaign .bubble.bubble-R1 { width: 60px; height: 60px;}
	#campaign .bubble.bubble-R2 { width: 80px; height: 200px;}
}



#about { position: relative;}
#about .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 0 60px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#about .ctn { position: relative; z-index: 1; width: 92%; max-width: 780px; margin: 0 auto;}
#about .stl {}
#about .stl h2 { text-align: center;}
#about .stl h2 img { width: 100%; max-width: 680px;}
#about .ctn .tips { position: relative; z-index: 2;}
#about .ctn .tips .in { position: relative; padding: 5px 0; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0));}
#about .ctn .tips h3 { color: #f28262; font-size: clamp(15px,2.4vw,24px); text-align: center;}
#about .ctn .ctn-1 { position: relative; padding-top: 50px; padding-right: 48%;}
#about .ctn .ctn-1 .tips {}
#about .ctn .ctn-1 .tips .badge { position: absolute; right: -50px; top: 50%; width: 124px; transform: translateY(-50%);}
#about .ctn .ctn-1 .tips .badge:before { content: ''; display: block; width: 100%; padding-top: 100%;
 background: url('./img/badge.png') no-repeat 50% 50% / 100% auto;
}
#about .ctn .ctn-1 .txt { padding: 40px 0 50px;}
#about .ctn .ctn-1 .txt p { color: #804f21; font-size: clamp(14px,2.1vw,23px); line-height: 2; text-align: center;}
#about .ctn .ctn-1 .txt p span { display: block;}
#about .ctn .ctn-1 .txt p sub { font-size: 12px; vertical-align: baseline;}
#about .ctn .ctn-1 .img-1 { position: absolute; right: -40px; bottom: 18px; width: 46%; z-index: 1;}
#about .ctn .ctn-1 .img-1::before { content: ''; position: relative; display: block; width: 100%; padding-top: 102%;
 background: url('./img/img-1.png') no-repeat 0% 50% / 100% auto;
 animation: 3.0s linear wave1 infinite;
}
#about .ctn .ctn-1 .img-1 figure img { width: 100%;}
#about .ctn .ctn-2 .tips { margin-bottom: 12px;}
#about .ctn .ctn-2 figure { text-align: center;}
#about .ctn .ctn-2 figure img { width: 100%;}
#about .note ul { max-width: 1000px; margin: 0 auto; padding: 0 40px;}

#about .bubble.bubble-L1 { width: 100px; height: 100px; left: 2%; bottom: 20%;}
#about .bubble.bubble-L2 { width: 150px; height: 240px; left: 0%; top: 20%;}
#about .bubble.bubble-R1 { width: 90px; height: 90px; right: 10%; top: 20%;}
#about .bubble.bubble-R2 { width: 150px; height: 280px; right: 0%; top: 40%;}
@media (max-width: 801px) {
	#about .inner-sct { padding: 60px 0;}
	#about .bubble.bubble-L1 { width: 60px; height: 80px; left: 0%; bottom: auto; top: 40%;}
	#about .bubble.bubble-L2 { width: 90px; height: 300px; left: 0%; top: 22%;}
	#about .bubble.bubble-R1 { width: 90px; height: 90px; right: 10%; top: -40px;}
	#about .bubble.bubble-R2 { width: 100px; height: 280px; right: 0%; top: 40%;}
}
@media (max-width: 641px) {
	#about .ctn .ctn-1 .tips .badge { width: 100px;}
}
@media (max-width: 481px) {
	#about .inner-sct { padding: 40px 0;}
	#about .ctn .ctn-1 { padding-top: 12px; padding-right: 40%;}
	#about .ctn .ctn-1 .tips .badge { width: 72px;}
	#about .ctn .ctn-1 .txt { padding: 12px 0 20px;}
	#about .ctn .ctn-1 .img-1 { width: 55%; bottom: 0;}
	#about .ctn .ctn-1 .img-1::before { right: 0%; background-size: auto 100%;}
	#about .ctn .ctn-2 .tips { margin-bottom: 8px;}
	#about .note ul { padding: 0 16px;}
	#about .bubble.bubble-L1 { width: 30px; height: 40px; top: 36%;}
	#about .bubble.bubble-L2 { width: 60px; height: 140px; left: 0%; top: 18%;}
	#about .bubble.bubble-R1 { width: 60px; height: 60px; right: 10%; top: -24px;}
	#about .bubble.bubble-R2 { width: 50px; height: 140px; right: 0%; top: 16%;}
}


#point { position: relative;}
#point .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 230px 0 40px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#point .bloc { padding: 20px 0;}

#point .ctn-pc { position: relative;}
#point .ctn-pc .box { position: absolute; left: 0; top: 0; width: 100%;}
#point .ctn-pc.fixed .box { position: fixed;}
#point .ctn-pc .box.show {}
#point .ctn-pc .box .inner-box { width: 88%; max-width: 1024px; margin: 0 auto; padding: 50px 0; 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 { position: relative; width: 48%; max-width: 480px;}
#point .ctn-pc .box .tit a { display: block; width: 90%; padding-top: 15%; position: absolute; left: 5%; z-index: 2;}
#point .ctn-pc .box .tit a.scrl-1 { top: 5%;}
#point .ctn-pc .box .tit a.scrl-2 { top: 30%;}
#point .ctn-pc .box .tit a.scrl-3 { top: 55%;}
#point .ctn-pc .box .tit a.scrl-4 { top: 80%;}
#point .ctn-pc .box .fig { width: 50%; 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 h3 { position: relative; margin-bottom: 20px; color: #f28262; font-size: clamp(20px,2.8vw,28px); text-align: center;}
#point .ctn-pc .box .fig h3:after { content: ''; display: block; width: 100%; height: 1px; background: #f28262;
 position: absolute; left: 0; top: 50%; z-index: 1;
}
#point .ctn-pc .box .fig h3 span { position: relative; display: inline-block; padding: 0 10px; background: #fff; z-index: 2;}
#point .ctn-pc .box .fig p { margin-bottom: 12px; color: #804f21; font-size: clamp(16px,2.1vw,23px); font-weight: 700; text-align: center;}
#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 { }
#point .ctn-pc .box .fig .kome ul li{ font-size: 16px; }

#point .ctn-sp { display: none; margin: 0 auto 20px;}
#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 { display: none; padding: 12px 0;}
#point .point-sp .point-ctn .fig { width: 94%; margin: 0 auto; padding: 30px; background: #fff;padding: 30px; border-radius: 30px; overflow: hidden; box-shadow: 4px 4px 10px #a88b65;}

#point .point-sp .point-ctn .fig h3 { position: relative; margin-bottom: 20px; color: #f28262; font-size: clamp(21px,3.2vw,28px); text-align: center;}
#point .point-sp .point-ctn .fig h3:after { content: ''; display: block; width: 100%; height: 1px; background: #f28262;
 position: absolute; left: 0; top: 50%; z-index: 1;
}
#point .point-sp .point-ctn .fig h3 span { position: relative; display: inline-block; padding: 0 10px; background: #fff; z-index: 2;}
#point .point-sp .point-ctn .fig p { margin-bottom: 12px; color: #804f21; font-size: clamp(15px,2.6vw,23px); font-weight: 700; text-align: center;}
#point .point-sp .point-ctn .fig p span { display: block;}
#point .point-sp .point-ctn .fig p sub { font-size: 12px; vertical-align: baseline;}
#point .point-sp .point-ctn .fig figure { margin-bottom: 20px; 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; }

@media (max-width: 801px) {
	#point .inner-sct { padding: 24vw 0 20px;}
	#point .ctn-pc { display: none;}
	#point .ctn-sp { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#point .point-sp .point-tit:after { width: 10px; height: 10px; border-width: 1px;}
	#point .point-sp .point-ctn .fig { padding: 16px; border-radius: 12px; box-shadow: 2px 2px 6px #a88b65;}
	#point .point-sp .point-ctn .fig h3 { margin-bottom: 8px;}
	#point .point-sp .point-ctn .fig p { margin-bottom: 8px;}
	#point .point-sp .point-ctn .fig p sub { font-size: 10px;}
	#point .point-sp .point-ctn .fig figure { margin-bottom: 12px;}
}



#product { position: relative;}
#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 40px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#product .bloc { position: relative; padding: 100px 0 40px;}
#product .bloc .box { position: relative; width: 88%; max-width: 1120px; margin: 0 auto; margin: 0 auto; border-radius: 20px;
 border: solid 2px #fff; box-shadow: 4px 4px 8px #d3c5b2;
}
#product .bloc#pd .box { background: #feeff0;}
#product .bloc#ci .box { background: #fff8e5;}
#product .bloc .box .badge { position: absolute; width: 40%; max-width: 320px; left: -40px; top: -80px;}
#product .bloc .box .badge picture { display: block;}
#product .bloc .box .badge picture img { width: 100%;}
#product .ctn-flex{ display: flex; align-items: center; justify-content: space-between; width: 92%; margin: 0 auto;}
#product .pht-ctn { width: 52%; padding-top: 60px;}
#product .txt-ctn { width: 46%; padding: 60px 0;}
#product .pht-ctn .item { position: relative; width: 100%; margin: 0 auto; padding: 0 20px;}
#product .pht-ctn .item img { width: 100%;}

#product .txt-ctn h3 { margin-bottom: 20px; color: #804f21; font-size: clamp(16px,2.8vw,24px); line-height: 1.4;}
#product .txt-ctn p.price { margin-bottom: 60px; color: #804f21; font-size: 16px; font-weight: 700;}
#product .txt-ctn p.price span { font-size: clamp(14px,2.0vw,20px);}
#product .txt-ctn .osusume { margin-bottom: 50px;}
#product .txt-ctn .osusume img { width: 100%;}

#product .txt-ctn .note {}
#product .txt-ctn .note ul li { color: #5b341c; }

#product .txt-ctn .cart { width: 72%; max-width: 300px; margin: 0 auto 40px;}
#product .txt-ctn .cart form { position: relative; display: block; width: 100%; border: solid 2px #fff; border-radius: 50px; overflow: hidden;}
#product .txt-ctn .cart form:after { content: ''; display: block; width: 28px; height: 28px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="%23fff"><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;
}

#product .txt-ctn .cart form input[type="submit"]{ position: relative; width: 100%; padding: 12px 0; border: none; z-index: 1;
 color: #fff; font-size: 16px; font-weight: 700; text-indent: 20px; text-align: center;
}

#product .txt-ctn .cart span { position: relative; display: block; width: 100%; padding: 12px 0;
 background: #ccc; border-radius: 50px; border: solid 2px #fff; box-shadow: 2px 2px 8px #d3c5b2; z-index: 1;
 color: #fff; font-size: clamp(14px,2.0vw,16px); font-weight: 700; text-align: center;
}


@media (max-width: 801px) {
	#product .inner-sct { padding: 24vw 0 60px;}
	#product .bloc .box .badge { left: -20px; top: -80px;}
	#product .ctn-flex{ display: block;}
	#product .pht-ctn { width: 100%; padding-top: 40px;}
	#product .txt-ctn { width: 100%; padding: 0px 0px 40px;}
	#product .pht-ctn .item { padding: 0; padding-left: 20%;}
	#product .txt-ctn h3 { text-align: center;}
	#product .txt-ctn p.price { margin-bottom: 40px; text-align: center;}
	#product .txt-ctn .cart { margin-bottom: 20px;}
	#product .txt-ctn .cart span { padding: 8px 0;}
}
@media (max-width: 481px) {
	#product .inner-sct { padding: 24vw 0 20px;}
	#product .bloc { padding: 60px 0 20px;}
	#product .bloc .box { border-radius: 12px; box-shadow: 2px 2px 6px #d3c5b2;}
	#product .bloc .box .badge { top: -60px;}
	#product .txt-ctn { padding: 0px 0px 20px;}
	#product .txt-ctn h3 { margin-bottom: 12px;}
	#product .txt-ctn p.price { margin-bottom: 20px; font-size: 12px;}
	#product .txt-ctn .osusume { margin-bottom: 20px;}
	#product .txt-ctn .cart span { padding: 4px 0; border-width: 1px;  box-shadow: 2px 2px 4px #d3c5b2; }
}


#howto { position: relative;}
#howto .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 90px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#howto .ctn { position: relative; z-index: 2;
 width: 88%; max-width: 900px; margin: 0 auto; padding: 30px; border-radius: 30px; background: #fff; box-shadow: 2px 2px 8px #d3c5b2;}
#howto .ctn .tit { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding: 20px 0;}
#howto .ctn .tit h3 { color: #f28262; font-size: clamp(16px,2.8vw,24px); text-align: center;}
#howto .ctn .tit h3:after { content: ''; display: block; width: 100%; height: 1px; background: #f28262;
 position: absolute; left: 0; top: 50%; z-index: 1;
}
#howto .ctn .tit h3 span { position: relative; display: inline-block; padding: 0 20px; background: #fff; z-index: 2;}
#howto .ctn ul { font-size: 0;}
#howto .ctn ul li { display: inline-block; width: 50%; padding: 18px; vertical-align: top;}
#howto .ctn ul li dl { width: 100%; max-width: 280px; margin: 0 auto;}
#howto .ctn ul li dl dt { margin-bottom: 12px;}
#howto .ctn ul li dl dt img { width: 100%;}
#howto .ctn ul li dl dd { font-size: 14px;}

#howto .bubble.bubble-L1 { width: 100px; height: 100px; left: 5%; bottom: 6%;}
#howto .bubble.bubble-L2 { width: 150px; height: 200px; left: 2%; bottom: 20%;}
#howto .bubble.bubble-R1 { width: 80px; height: 80px; right: 12%; top: 16%;}
#howto .bubble.bubble-R2 { width: 120px; height: 220px; right: 0%; top: 28%;}
@media (max-width: 801px) {
	#howto .inner-sct { padding: 30vw 0 40px;}
	#howto .ctn { padding: 20px; border-radius: 20px;}
	#howto .ctn ul li { padding: 12px;}

	#howto .bubble.bubble-L1 { width: 80px; height: 80px; left: 4%; bottom: 4%;}
	#howto .bubble.bubble-L2 { width: 100px; height: 150px; left: 0%; bottom: 20%;}
	#howto .bubble.bubble-R1 { right: 12%; top: 12%;}
	#howto .bubble.bubble-R2 { right: 0%; top: 30%;}
}
@media (max-width: 481px) {
	#howto .ctn { padding: 12px; border-radius: 12px; box-shadow: 2px 2px 6px #d3c5b2;}
	#howto .ctn .tit { padding: 12px 0;}
	#howto .ctn .tit h3 span { padding: 0 10px;}
	#howto .ctn ul li { padding: 8px 12px;}
	#howto .ctn ul li dl dd { font-size: 12px;}

	#howto .bubble.bubble-L1 { width: 50px; height: 50px; left: 4%; bottom: 4%;}
	#howto .bubble.bubble-L2 { width: 60px; height: 100px; left: 0%; bottom: 20%;}
	#howto .bubble.bubble-R1 { right: 12%; top: 12%;}
	#howto .bubble.bubble-R2 { right: 0%; top: 30%;}
}


#sheet { position: relative;}
#sheet .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 260px 0 90px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#sheet .ctn { position: relative; z-index: 5; width: 88%; max-width: 680px; margin: 0 auto;}
#sheet .ctn .tips .in { padding: 5px 0; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0));}
#sheet .ctn .tips h3 { color: #f28262; font-size: clamp(15px,2.4vw,24px); text-align: center;}
#sheet .ctn figure { text-align: center;}
#sheet .ctn figure img { width: 100%;}
#sheet .note { width: 92%; max-width: 680px; margin: 0 auto;}
#sheet .note ul { text-align: right;}

#sheet .bubble.bubble-L1 { width: 90px; height: 90px; left: 12%; bottom: 6%;}
#sheet .bubble.bubble-L2 { width: 150px; height: 200px; left: 2%; top: 50%;}
#sheet .bubble.bubble-R1 { width: 90px; height: 90px; right: 12%; top: 18%;}
#sheet .bubble.bubble-R2 { width: 120px; height: 220px; right: 0%; top: 30%;}
@media (max-width: 801px) {
	#sheet .inner-sct { padding: 30vw 0 40px;}
	#sheet .bubble.bubble-L1 { width: 80px; height: 80px; left: 2%; bottom: 6%;}
	#sheet .bubble.bubble-L2 { width: 80px; height: 140px; left: 0%; top: 55%;}
	#sheet .bubble.bubble-R1 { width: 80px; height: 80px; right: 15%; top: 12%;}
	#sheet .bubble.bubble-R2 { width: 90px; height: 220px; top: 25%;}
}
@media (max-width: 481px) {
	#sheet .bubble.bubble-L1 { width: 40px; height: 50px; left: 0%; bottom: 6%;}
	#sheet .bubble.bubble-L2 { width: 50px; height: 90px; left: 0%; top: 55%;}
	#sheet .bubble.bubble-R1 { width: 50px; height: 50px;}
	#sheet .bubble.bubble-R2 { width: 50px; height: 150px; top: 20%;}
}



#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: 2px; pointer-events: none;
 background: #fff; border: solid 3px #f28262; 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; background: #f28262; border-radius: 50px;}
@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 { border-width: 2px; padding: 1px;}
	#shop .btn a:after { width: 9px; height: 9px; border-width: 2px;}
	#shop .btn a span { padding: 6px;}
}


#lineup { position: relative;}
#lineup .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0 60px;
	background: linear-gradient(90deg,#ffe0e7,#fff1b1);
}
#lineup .ttl { left: 0; top: 0;}
#lineup .ctn { margin: 0 auto;}
@media (max-width: 801px) {
	#lineup .inner-sct { padding: 30vw 0 40px;}
}