@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: 1200px; margin: 0 auto; padding-top: 100px;}
#kv .ctn .logo { position: relative; width: 55%; max-width: 620px; margin-bottom: 20px;
 transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 0.6s; opacity: 0;
}
#kv .ctn .logo:after { content: ''; display: block; width: 100px; height: 140px;
 background: url('/img/awards/badge/no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 4%; top: -50px; filter: drop-shadow(1px 1px 2px #613d22);
}
#kv .ctn .logo h1 { text-align: center;}
#kv .ctn .logo h1 img { width: 32%; max-width: 250px;}
#kv .ctn .txt { width: 55%; max-width: 620px;}
#kv .ctn .txt p { text-align: center; transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 0.8s; opacity: 0;}
#kv .ctn .txt p img { width: 90%; max-width: 580px;}
#kv .news { position: absolute; left: 0; bottom: 150px; width: 100%; z-index: 2;}
#kv .news .inner { width: 94%; max-width: 1200px; margin: 0 auto;}
#kv .news .inner div { width: 55%; max-width: 620px; padding-left: 20px;
 transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 1.2s; opacity: 0;
}
#kv .news div a { position: relative; display: block; width: 90%; max-width: 480px; margin: 0 auto; padding: 3px;
 background: linear-gradient(-45deg,#dfce97,#916932 30%,#efe2ab 55%,#98723b 75%,#e3d39c);
 border-top-left-radius: 15px; border-bottom-right-radius: 15px; color: #613d22; text-decoration: none;
 transition: 1.6s cubic-bezier(.25, .46, .45, .94); transition-delay: 2.4s; transform: translateX(-60px);
}
#kv .news div a dl { display: table; width: 100%; padding: 8px; background: linear-gradient(45deg,#faeabe,#fefbe0 65%,#fbe9ba);
 border-top-left-radius: 15px; border-bottom-right-radius: 15px;
}
#kv .news div a dl dt,
#kv .news div a dl dd { display: table-cell; vertical-align: middle;}
#kv .news div a dl dt { width: 25%; max-width: 260px;}
#kv .news div a dl dt img { width: 100%;}
#kv .news div a dl dd { width: auto; padding-left: 20px; font-size: clamp(12px,1.6vw,16px);}
#kv .news div a dl dd span { display: block;}
#kv .news div a dl dd sub { font-size: 10px;}
#kv .news div a dl dd time { display: block; font-size: 14px;}
#kv .news div a:hover { opacity: 0.8;}

#kv .note { position: absolute; left: 0; bottom: 0; z-index: 2;}
#kv .note div { width: 94%; max-width: 1080px; margin: 0 auto; padding: 20px;
 transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 1.8s; opacity: 0;
}
#kv .note ul { width: 100%; max-width: 480px;}
#kv .note ul li { color: #5b341c; font-size: 10px;}
#kv .kv-bg { position: relative; z-index: 1; background: url('./img/kv.jpg') no-repeat 50% 50% / cover;}
#kv .kv-bg:after { content: ''; display: block; width: 100%; padding-top: 680px;
 background: url('./img/kv.jpg') no-repeat 50% 50% / cover;
 opacity: 0; transition: 2s linear; transition-delay: 7s;
}
#kv.show .ctn .logo { opacity: 1;}
#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: 6vw;}
	#kv .kv-bg:after { padding-top: 54%;}
}
@media (max-width: 1001px) {
	#kv .ctn .logo:after { width: 80px; height: 120px; top: -30px;}
	#kv .ctn .logo { margin-bottom: 12px;}
	#kv .news { bottom: 90px;}
	#kv .note div { padding: 12px;}
	#kv .note ul { max-width: 100%;}
}
@media (max-width: 801px) {
	#kv .ctn { height: 100%;}
	#kv .ctn .inner { height: 100%; padding-top: 12vw;}
	#kv .ctn .logo { width: 100%; max-width: 100%; margin: 0 auto;}
	#kv .ctn .logo:after { width: 80px; height: 120px; top: 40%; left: auto; right: 5%;}
	#kv .ctn .logo h1 img { width: 40%;}
	#kv .ctn .txt { position: absolute; left: 0; bottom: 42vw; width: 100%; max-width: 100%;}
	#kv .news { bottom: 120px;}
	#kv .news .inner div { margin: 0 auto; width: 100%; padding: 0;}
	#kv .kv-bg { background: url('./img/kv@sp.jpg') no-repeat 50% 50% / cover;}
	#kv .kv-bg:after { padding-top: 192%; background: url('./img/kv@sp.jpg') no-repeat 50% 50% / cover;}
}
@media (max-width: 481px) {
	#kv .ctn .logo:after { width: 64px; height: 90px;}
	#kv .ctn .txt { bottom: 58vw;}
	#kv .news { bottom: 32vw;}
	#kv .news div a { padding: 2px;}
	#kv .news div a dl dd { line-height: 1.4;}
	#kv .news div a dl dd time { font-size: 12px;}
	#kv .note ul li { line-height: 1.2;}
}





#award { position: relative; z-index: 5;}
#award .award-tit { position: relative; padding: 3px 0; background: #f5d291; 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(-50%,-35%) rotate(-45deg);}
#award .award-tit div { position: relative; padding: 12px 0 16px; background: url('./img/ttl/bg.jpg') no-repeat 50% 50% / cover;}
#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/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 .award-tit { padding: 2px 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: relative; width: 100%;}
.ttl div { position: relative; padding: 24px 0px; background: url('./img/ttl/bg.jpg') no-repeat 50% 50% / cover;}
.ttl h2 { text-align: center;}
.ttl h2 img { width: 80%; max-width: 520px;}
@media (max-width: 801px) {
	.ttl div { padding: 18px 0px;}
}
@media (max-width: 481px) {
	.ttl div { padding: 12px 0px;}
}


#concept { position: relative;}
#concept .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 0 200px;
	background: url('./img/bg/concept.jpg') no-repeat 50% 50% / cover;
}
#concept .ctn { position: relative; z-index: 1; width: 94%; max-width: 1080px; margin: 0 auto;}
#concept .ctn .txt { width: 100%; max-width: 580px;}
#concept .ctn p { margin-bottom: 30px; text-align: center;}
#concept .ctn p img { width: 100%;}
#concept .note div { width: 92%; margin: 0 auto;}
#concept .note ul li { color: #fff; }
#concept .bg { display: none;}
#concept .bg img { width: 100%;}
@media (max-width: 801px) {
	#concept .inner-sct { padding: 0px; background: none;}
	#concept .ctn { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
	#concept .ctn .txt { width: 86%; margin: 0 auto; padding-top: 10vw;}
	#concept .note { position: absolute; left: 0; bottom: 20px;}
	#concept .note div { width: 90%;}
	#concept .bg { display: block;}
}


#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-bottom: 80px;
	background: linear-gradient(70deg,#f5c49f,#f8e0ce,#f4bc92);
}
#point .read { padding: 40px 0 20px;}
#point .read p { margin-bottom: 12px; font-size: clamp(13px,3.2vw,24px); font-weight: 700; text-align: center;}
#point .read p sub { font-size: 14px; vertical-align: baseline;}
#point .read .note { width: 92%; max-width: 1080px; margin: 0 auto;}
#point .read .note ul { text-align: center;}


#point .ctn-pc { position: relative; padding-top: 20px;}
#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: 100%; max-width: 1180px; 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; padding-right: 20px;}
#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 .tit .note { padding-top: 20px;}
#point .ctn-pc .box .tit .note ul { width: 82%; margin: 0 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-sp { display: none;}
#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: 5%; 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 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 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(13px,2.3vw,21px); 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; }

#point .point-sp .spacer { height: 20px;}
#point .ctn-sp .note div { width: 92%; margin: 0 auto;}

@media (max-width: 1201px) {
	#point .ctn-pc .box .ctn-flex { padding-right: 0px;}
}
@media (max-width: 801px) {
	#point .inner-sct { padding-bottom: 60px;}
	#point .ctn-pc { display: none;}
	#point .ctn-sp { display: block; padding-top: 20px;}
	#point .read .note { width: 100%;}
	#point .read .note ul { text-align: left;}

}
@media (max-width: 641px) {
	#point .read { padding: 20px 0px;}
	#point .read p sub { font-size: 10px;}
}
@media (max-width: 481px) {
	#point .inner-sct { padding-bottom: 32px;}
	#point .read { padding: 12px 0 24px;}
	#point .read p sub { font-size: 10px;}
	#point .point-sp .point-tit:after { width: 10px; height: 10px; border-width: 1px;}
	#point .point-sp .point-ctn .fig { padding: 16px 12px; 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; text-align: left;}
	#point .point-sp .point-ctn .fig p sub { font-size: 10px;}
	#point .point-sp .point-ctn .fig figure { margin-bottom: 8px;}

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




#step { position: relative;}
#step .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 100px 0 120px;
	background: url('./img/bg/step.jpg') no-repeat 50% 50% / cover;
}
#step .ctn { position: relative; z-index: 1; width: 94%; max-width: 1040px; margin: 0 auto;}
#step .ctn .txt { width: 100%; max-width: 520px; margin: 0 0 0 auto;}
#step .ctn .txt picture { display: block; width: 100%; text-align: center;}
#step .ctn .txt picture img { width: 100%;}
@media (max-width: 801px) {
	#step .inner-sct { padding: 0; background: none;}
	#step .ctn { width: 100%;}
	#step .ctn .txt { max-width: 100%; margin: 0 auto;}
}


#product { position: relative;}
#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 0px;
	background: url('./img/bg/product.jpg') no-repeat 50% 50% / cover;
}
#product .read { display: none;}
#product .bloc { position: relative;}
#product .bloc#shampoo { margin-bottom: -330px; z-index: 6;}
#product .bloc#treatment { margin-bottom: -100px; z-index: 5;}
#product .bloc#hairmilk{ margin-bottom: -260px; z-index: 4;}
#product .bloc#hairoil { margin-bottom: -160px; z-index: 3;}
#product .bloc#re { margin-bottom: -120px; z-index: 2;}
#product .ctn { position: relative; width: 100%; max-width: 1180px; margin: 0 auto;}
#product .ctn .inner { position: relative; width: 50%; max-width: 580px;}
#product #treatment .ctn .inner,
#product #hairoil .ctn .inner { margin: 0 0 0 auto;}
#product .ctn .item { position: relative; width: 96%; margin: 0 auto 32px;}
#product .ctn .item figure img { width: 100%;}
#product .ctn .price { margin-bottom: 20px;}
#product .ctn .price p { font-size: clamp(10px,1.8vw,14px); font-weight: 700; text-align: center;}
#product .ctn .price p span { font-size: clamp(13px,2.2vw,20px);}

#product .cart a { position: relative; display: block; width: 50%; max-width: 300px; margin: 0 auto; pointer-events: none;
 border: solid 1px #fff; border-radius: 50px; overflow: hidden;
	color: #fff; font-size: clamp(14px,2.0vw,18px); line-height: 1.2; font-weight: 700; text-align: center; text-decoration: none;
}
#product .cart a.cart1 { background: linear-gradient(-45deg,#e87800,#f6b567,#e87800);}
#product .cart a.cart2 { background: linear-gradient(-45deg,#f2ba00,#f8d675,#f2ba00);}
#product .cart a:after { content: ''; display: none; 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: 24%; top: 50%; transform: translateY(-50%); z-index: 2;
}
#product .cart a span { display: block; padding: 12px 0; /* text-indent: 20px;*/}
#product .cart a:hover { opacity: 0.8;}

#product #re .ctn .flex { display: flex; width: 100%; max-width: 580px;}
#product #re .ctn .item { margin-bottom: 20px;}
#product #re .ctn .item figure { margin-bottom: 12px; text-align: center;}
#product #re .ctn .item figure img { width: 60%; max-width: 150px;}
#product #re .ctn .name { margin-bottom: 10px;}
#product #re .ctn .name p { font-size: clamp(13px,2.0vw,18px); font-weight: 700; line-height: 1.4; text-align: center;}
#product #re .ctn .amout { margin-bottom: 5px;}
#product #re .ctn .amout p { font-size: clamp(14px,2.0vw,18px); font-weight: 700; text-align: center;}
#product #re .ctn .price { margin-bottom: 20px;}
#product #re .ctn .price p { font-size: clamp(10px,1.8vw,14px); font-weight: 700; text-align: center;}
#product #re .ctn .price p span { font-size: clamp(12px,2.0vw,16px); font-weight: 700; text-align: center;}
#product #re .ctn .cart a { width: 72%; max-width: 180px; font-size: clamp(13px,2.0vw,16px); pointer-events: none;}
#product #re .ctn .cart a:after { width: 21px; height: 21px; left: 20%;}


#product .note div { width: 90%; max-width: 1080px; margin: 0 auto;}
#product .note ul { width: 42%; max-width: 480px; margin: 0 0 0 auto;}
#product .note ul li { color: #5b341c;}
@media (max-width: 1181px) {
	#product .bloc#shampoo { margin-bottom: -30vw;}
	#product .bloc#treatment { margin-bottom: -9vw;}
	#product .bloc#hairmilk{ margin-bottom: -21vw;}
	#product .bloc#hairoil { margin-bottom: -10vw;}
	#product .ctn .txt { top: 21vw;}
	#product .ctn .txt.right { top: 20vw; padding-left: 57%;}
}
@media (max-width: 901px) {
	#product .inner-sct { padding: 40px 0px; background: url('./img/bg/product@sp.jpg') no-repeat 50% 50% / cover; }
	#product .read { display: block; padding: 20px 0;}
	#product .read p { font-size: clamp(18px,4.0vw,36px); font-weight: 700; text-align: center;
	 text-shadow: 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
	}
	#product .read p span { display: block;}
	#product .bloc { padding: 32px 0;}
	#product .bloc#shampoo { margin-bottom: 0vw;}
	#product .bloc#treatment { margin-bottom: 0vw;}
	#product .bloc#hairmilk{ margin-bottom: 0vw;}
	#product .bloc#hairoil { margin-bottom: 0vw;}
	#product .bloc#re { margin-bottom: 0vw;}
	#product .ctn .inner { width: 100%; max-width: 580px; margin: 0 auto;}
	#product #treatment .ctn .inner,
	#product #hairoil .ctn .inner { margin: 0 auto;}

	#product .cart a span { padding: 8px 0;}
	
	#product #re .ctn .flex { margin: 0 auto;}
	#product .note ul { width: 100%; max-width: 100%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#product .inner-sct { padding: 20px 0px;}
	#product .bloc { padding: 24px 0px;}
	#product .ctn .item { width: 92%; margin-bottom: 20px;}

	#product .cart a:after{ width: 18px; height: 18px;}
	#product .cart a span { padding: 6px 0;}
	
	#product #re .ctn .price p span { display: block;}
	#product #re .ctn .cart a:after { width: 15px; height: 15px;}
}



#which { position: relative; border-top: solid 2px #f5d291;}
#which .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 72px 0 60px;
	background: url('./img/bg/which.jpg') no-repeat 50% 50% / cover;
}
#which .ctn { position: relative; width: 100%; max-width: 880px; margin: 0 auto 30px;}
#which .ctn h2 { margin-bottom: 32px; text-align: center;}
#which .ctn h2 picture { display: block; width: 72%; max-width: 580px; margin: 0 auto;}
#which .ctn h2 picture img { width: 100%;}
#which .ctn .read { margin: 0 auto -40px;}
#which .ctn .read p { font-size: clamp(14px,3.2vw,24px); font-weight: 700; text-align: center;}
#which .ctn picture { display: block; width: 100%;}
#which .ctn picture img { width: 100%;}
#which .note div { width: 92%; max-width: 1000px; margin: 0 auto;}
@media (max-width: 801px) {
	#which .inner-sct { padding: 60px 0px;}
	#which .ctn h2 { margin-bottom: 20px;}
	#which .ctn .read { margin-bottom: 32px;}
}
@media (max-width: 481px) {
	#which .inner-sct { padding: 40px 0px;}
	#which .ctn { margin-bottom: 12px;}
	#which .ctn h2 { margin-bottom: 18px;}
	#which .ctn .read { margin-bottom: 20px;}
}



#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: 60px 0px;
	background: url('./img/bg/campaign.jpg') no-repeat 50% 50% / cover;
}
#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: 0; bottom: 5%; z-index: 2; width: 100%;}
#campaign .ctn .btn a { display: block; width: 55%; max-width: 310px; margin: 0 auto; background: #fff; 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 .ctn .btn { bottom: 8%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 40px 0px;}
	#campaign .ctn .btn { bottom: 6%;}
}



#select {}
#select .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 60px 0px;
	background: url('./img/bg/select.jpg') no-repeat 50% 50% / cover;
}
#select .tit { margin-bottom: 40px;}
#select .tit h3 { text-align: center;}
#select .tit h3 picture { display: block; width: 80%; max-width: 540px; margin: 0 auto;}
#select .tit h3 img { width: 100%;}
#select .ctn { width: 94%; margin: 0 auto;}
#select ul.series li a { max-width: 210px; font-size: clamp(12px,1.8vw,18px);}

@media (max-width: 801px) {
	#select .ctn { width: 100%;}
}
@media (max-width: 481px) {
	#select .inner-sct { padding: 40px 0;}
	#select .tit { margin-bottom: 20px;}
}


#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;
 background: #fff; border: solid 3px #f6b567; 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: linear-gradient(-45deg,#e87800,#f6b567,#e87800); 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 { 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: 50px 0px; background: #fbf9de;}
#lineup .ttl {}
#lineup .ctn { margin: 0 auto;}
@media (max-width: 801px) {
	#lineup .inner-sct { padding: 40px 0px;}
}