@charset "utf-8";

#award { position: relative; z-index: 2; background: #fff;}
#award .award-tit { position: relative; padding: 12px 0 20px; background: #fab612; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #fff; border-right: solid 4px #fff;
 position: absolute; left: 50%; bottom: 58px; transform: translateY(0%) rotate(45deg); transition: 0.4s linear;
}
#award .award-tit.open:after { transform: translateY(8px) rotate(-135deg);}
#award .award-tit h2 { padding: 16px 0;
 color: #fff; font-size: 32px; font-weight: 600; letter-spacing: 0.12rem; line-height: 1; text-align: center;
 text-shadow: 0 0 12px #ff7f37, 0 0 12px #ff7f37, 0 0 12px #ff7f37;
}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 50px; height: 40px; vertical-align: middle;
 background: url('../img/top/icn-award.png') no-repeat 50% 50% / 100% auto;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
#award .ctn { display: none;}
@media (max-width: 801px) {
	#award .award-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#award { border-width: 1px;}
	#award .award-tit { padding: 48px 0 8px;}
	#award .award-tit:after { bottom: 21px; width: 12px; height: 12px; border-width: 2px;}
	#award .award-tit h2 { padding: 8px 0; font-size: 20px; letter-spacing: 0rem;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 30px; height: 24px;}
	#award .award-tit h2 span { margin: 0 12px;}
}

.award { }
.award ul { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px;}
.award ul li {/* display: none; */ border-bottom: solid 1px #e1e1e1;}

.award ul li dl { position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 25px 0; text-align: center;}
.award ul li dl:before { content: ''; display: block; width: 80px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.award ul li dl.arward2025_1:before { height: 120px; background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025_hair:before { height: 140px; background: url('/img/awards/badge-2025-hair.png') no-repeat 50% 50% / 100% auto;}

.award ul li dl.arward2025_2:before { height: 120px; background: url('/img/awards/badge-no2-2025.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025_p:before { height: 100px; background: url('/img/awards/badge-2024-point.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_cl:before { height: 120px; background: url('/img/awards/badge-2024-cl.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_k:before { height: 100px; background: url('/img/awards/badge-2024-keana-3.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_body:before { height: 100px; background: url('/img/awards/badge-2024-body.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2024_useful:before { height: 100px; background: url('/img/awards/badge-2024-useful.png') no-repeat 50% 50% / 100% auto;}
/*
.award ul li dl.arward2025ldk_body:before { height: 100px; background: url('/img/awards/badge-2025ldk-body.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.arward2025ldk_hair:before { height: 100px; background: url('/img/awards/badge-2025ldk-hairoil.png') no-repeat 50% 50% / 100% auto;}
*/
.award ul li dl.nicola2024_1:before { height: 100px; background: url('/img/awards/nicola-2024-1.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.nicola2024_2:before { height: 100px; background: url('/img/awards/nicola-2024-2.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl.nicola2024_3:before { height: 100px; background: url('/img/awards/nicola-2024-3.png') no-repeat 50% 50% / 100% auto;}
.award ul li dl dt { margin-bottom: 6px; font-size: 25px; font-weight: 700; line-height: 1.25;
 background: linear-gradient(#977720 10%, #d9bb53 50%, #a57904 90%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.award ul li dl dt br.sp { display: none;}
.award ul li dl dd.txt { color: #6a3906; font-size: 17px; font-weight: 700; line-height: 1.4;}
.award ul li dl dd.txt sub { vertical-align: baseline; font-size: 10px;}
.award ul li dl dd.txt span { display: inline-block; padding-left: 8px;}
.award ul li dl dd.note { margin-top: 8px; color: #6b6b6b; font-size: 10px; line-height: 1.4;}
.award ul li dl dd.img { width: 100px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.award ul li dl dd.img img { width: 100%;}
@media (max-width: 801px) {
	.award ul li dl dt { font-size: 3.0vw;}
}
@media (max-width: 641px) {
	.award ul li dl { padding: 30px 0 20px;}
	.award ul li dl:before { width: 60px; top: 6px; transform: translateY(0%);}
	.award ul li dl.arward2025_1:before { height: 90px; background-size: 100% auto;}
	.award ul li dl.arward2025_hair:before { height: 68px;}
	.award ul li dl.arward2023_1:before { height: 100px;}
	.award ul li dl.arward2023_2:before { height: 80px;}
	.award ul li dl.arward2023_3:before { height: 80px;}
	.award ul li dl.arward2023_4:before { height: 80px;}
	.award ul li dl.arward2024_1:before { height: 80px;}
	.award ul li dl.arward2024_2:before { height: 80px;}
	.award ul li dl dd.txt span { display: block;}
	.award ul li dl dd.note { margin-top: 12px;}
	.award ul li dl dd.img { width: 80px; right: 10px; top: 20px; transform: translateY(0%);}
}
@media (max-width: 481px) {
	.award ul { padding: 0 15px;}
	.award ul li dl { padding: 20px 0 15px;}
	.award ul li dl.arward2025_1:before { height: 72px;}
	.award ul li dl.arward2025_hair:before { height: 72px;}

	.award ul li dl.arward2025_2:before { height: 72px;}
	.award ul li dl.arward2025_p:before { height: 65px;}
	.award ul li dl.arward2024_cl:before { height: 72px;}
	.award ul li dl.arward2024_k:before { height: 60px;}
	.award ul li dl.arward2024_body:before { height: 60px;}
	.award ul li dl.arward2024_useful:before { height: 60px;}
	.award ul li dl.arward2024ldk_body:before { height: 60px;}
	.award ul li dl.arward2024ldk_hair:before { height: 60px;}
	.award ul li dl.nicola2024_1:before { height: 60px;}
	.award ul li dl.nicola2024_2:before { height: 60px;}
	.award ul li dl.nicola2024_3:before { height: 60px;}

	.award ul li dl dt { font-size: 16px;}
	.award ul li dl dt br.sp { display: block;}
	.award ul li dl:before { width: 40px; left: 0px;}
	.award ul li dl.arward2023_1:before { height: 80px;}
	.award ul li dl.arward2023_2:before { height: 60px;}
	.award ul li dl.arward2023_3:before { height: 60px;}
	.award ul li dl.arward2023_4:before { height: 60px;}
	.award ul li dl.arward2024_1:before { height: 60px;}
	.award ul li dl.arward2024_2:before { height: 50px;}
	.award ul li dl dd.txt { font-size: 12px;}
	.award ul li dl dd.img { width: 50px; right: 0px; top: 20px;}
	.award ul li dl dd.note br { display: none; }
}



#point { position: relative; z-index: 12; padding-bottom: 60px;}
#point .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 140px 0;
 background-image: url('../img/common/bg/point-top.png'), url('../img/common/bg/point-btm.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 50% 0, 50% 100%;
}
#point .inner-sct:after { content: ''; display: block; width: 100%; height: 300px;
 background: url('../img/common/bg/point-btm2.png') no-repeat 50% 100% / 100% auto;
 position: absolute; left: 0; bottom: 0;
}
#point h2 { margin-bottom: 20px; text-align: center;}
#point h2 img { width: 72%; max-width: 380px;}
#point .ctn-pc { position: relative; background: linear-gradient(rgba(255,230,80,1) 90%, rgba(255,230,80,0));}
#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: 1280px; margin: 0 auto; padding: 50px 0; background: #ffe750; transition: 0.3s linear; opacity: 0;}
#point .ctn-pc .box.show .inner-box { opacity: 1;}
#point .ctn-pc .box .ctn-flex { display: flex; width: 92%; max-width: 1024px; margin: 0 auto; justify-content: space-between;}
#point .ctn-pc .box .tit { width: 48%;}
#point .ctn-pc .box .fig { width: 50%;}
#point .ctn-pc .box .tit img { width: 100%; height: auto;}
#point .ctn-pc .box .fig figure { width: 100%; border-radius: 30px; overflow: hidden;}
#point .ctn-pc .box .fig figure img { width: 100%; height: auto;}
#point .ctn-sp { display: none; background: #ffe750;}
#point .ctn-sp ul { width: 98%; max-width: 680px; margin: 0 auto;}
#point .ctn-sp ul li { margin: 0 auto 10px;}
#point .ctn-sp ul li:last-child { margin: 0 auto;}
#point .ctn-sp ul li dl dt { position: relative; cursor: pointer;}
#point .ctn-sp ul li dl dt:after { content: ''; display: block; width: 20px; height: 20px; border-bottom: solid 2px #8c4811; border-right: solid 2px #8c4811;
 position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#point .ctn-sp ul li dl dt.open:after { transform: translateY(-40%) rotate(225deg);}
#point .ctn-sp ul li dl dd { display: none; padding: 15px 28px 0; padding-left: 10%;}
#point .ctn-sp ul li dl dt img { width: 100%;}
#point .ctn-sp ul li dl dd img { width: 100%; border-radius: 30px;}
@media (max-width: 801px) {
	#point .inner-sct { padding: 140px 0;
	 background-image: url('../img/common/bg/point-top-sp.png'), url('../img/common/bg/point-btm-sp.png');
	 background-repeat: no-repeat, no-repeat;
	 background-position: 50% 0, 50% 100%;
	 background-size: 100% auto, 100% auto;
	}
	#point .inner-sct:after { content: none;}
	#point .ttl { margin-bottom: 30px;}
	#point p.read { font-size: 3.2vw;}
	#point p.note { margin-bottom: 30px;}
	#point .ctn-pc { display: none;}
	#point .ctn-sp { display: block;}
}
@media (max-width: 641px) {
	#point .inner-sct { padding: 21vw 0;}
}
@media (max-width: 481px) {
	#point { padding-bottom: 40px;}
	#point .ttl { margin-bottom: 20px;}
	#point p.read { margin-bottom: 15px; font-size: 14px;}
	#point p.read sub { font-size: 10px;}
	#point p.note { margin-bottom: 20px;}
	#point .ctn-sp ul li { margin: 0 auto 4px;}
	#point .ctn-sp ul li dl dt:after { width: 12px; height: 12px; right: 8.5%;}
	#point .ctn-sp ul li dl dd { padding: 10px 18px 0; padding-left: 10%;}
	#point .ctn-sp ul li dl dd img { border-radius: 20px;}
}


#lineup .slider { padding: 20px 0;}
#lineup .box { position: relative;}
#lineup .box .inner { position: relative;}
#lineup .box figure { position: relative; z-index: 1;}
#lineup .box figure img { width: 100%;}
#lineup .box ul { position: absolute; left: 0; bottom: 46px; width: 100%; z-index: 2; text-align: center;}
#lineup .box ul li { padding: 4px;}
#lineup .box ul li span,
#lineup .box ul li a { display: block; width: 72%; max-width: 185px; margin: 0 auto; padding: 6px 0; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;}
#lineup .box ul.btn-1 li a { background: #ffa233;}
#lineup .box ul.btn-2 li a { background: #ff96a3;}
#lineup .box ul.btn-3 li a { background: #66c7dc;}
#lineup .box ul.btn-4 li a { background: #a9cd00;}
#lineup .box ul.btn-5 li a { background: #efba78;}
#lineup .box ul li form { position: relative; display: block; width: 72%; max-width: 185px; margin: 0 auto;}
#lineup .box ul li form svg { display: block; width: 18px; fill: #fff;
 position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 2;
}
#lineup .box ul li form input[type="submit"]{ position: relative; display: block; width: 100%; margin: 0 auto; padding: 6px 0; border-radius: 8px; border: none; z-index: 1;
 color: #fff; font-size: 13px; font-weight: 700; text-indent: 25px;
}
#lineup .box ul.btn-1 li form input[type="submit"] { background: #ffa233;}
#lineup .box ul.btn-2 li form input[type="submit"] { background: #ff96a3;}
#lineup .box ul.btn-3 li form input[type="submit"] { background: #66c7dc;}
#lineup .box ul.btn-4 li form input[type="submit"] { background: #a9cd00;}
#lineup .box ul.btn-5 li form input[type="submit"] { background: #efba78;}

#lineup .box ul li span { background: #a0a0a0;}
#lineup .box ul li span svg,
#lineup .box ul li a svg { display: inline-block; width: 18px; margin-right: 6px; fill: #fff; vertical-align: middle;}
#lineup .box ul li span em,
#lineup .box ul li a em{ display: inline-block; vertical-align: middle;}
#lineup .box ul li.note { color: #673918; font-size: 9px;}
#lineup .box ul li a:hover { opacity: 0.8;}
@media (max-width: 1281px) {
	#lineup .box ul { bottom: 3.0vw;}
}
@media (max-width: 1001px) {
	#lineup .box ul li span,
	#lineup .box ul li a { padding: 4px 0; font-size: 1.4vw;}
	#lineup .box ul li.note { font-size: 10px;}
}
@media (max-width: 801px) {
	#lineup .box ul { bottom: 10vw;}
	#lineup .box ul li span,
	#lineup .box ul li a { padding: 4px 0; font-size: 12px;}
	#lineup .box ul li form svg { left: 18px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#lineup .slider { margin-bottom: 20px; padding: 20px 0 8px;}
	#lineup .box ul { bottom: 28px;}
	#lineup .box ul li form svg { width: 15px; left: 24px;}
	#lineup .box ul li span,
	#lineup .box ul li a { padding: 5px 0; font-size: 12px;}
	#lineup .box ul li span svg,
	#lineup .box ul li a svg { width: 16px;}
	#lineup .box ul li.note { min-height: 3em; padding: 0 30px; line-height: 1.4;}
}



#series { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; background: #fffabc;}
#series .inner-sct { padding: 0px 0 40px;}
#series .ttl { margin-bottom: 40px; padding: 50px 0 90px; background: url('../img/common/bg/ttl.png') no-repeat 50% 100%;}
#series .ttl h2 { text-align: center;}
#series .ttl h2 img { width: 70%; max-width: 450px;}
#series p { margin-bottom: 40px; font-size: 24px; font-weight: 700; text-align: center;}
#series ul { width: 92%; max-width: 1140px; margin: 0 auto; font-size: 0;}
#series ul li { display: inline-block; width: 33%; padding: 8px;}
#series ul li a { display: block; width: 100%; max-width: 440px; margin: 0 auto;}
#series ul li a img { width: 100%;}
#series ul li a img.sp { display: none;}
#series ul li a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#series .ttl { margin-bottom: 30px; padding: 4vw 0 15vw; background: url('../img/common/bg/ttl-sp.png') no-repeat 50% 100% / 100% auto;}
	#series p { margin-bottom: 20px;}
	#series ul li { width: 50%;}
}
@media (max-width: 481px) {
	#series .ttl { margin-bottom: 20px;}
	#series p { margin-bottom: 12px; font-size: 18px;}
	#series p span { display: block;}
	#series ul { width: 85%;}
	#series ul li { display: block; width: 100%; padding: 0px;}
	#series ul li a img.pc { display: none;}
	#series ul li a img.sp { display: block;}
}



#shop { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; background: url('../img/common/bg/shop.jpg') no-repeat 50% 50% / cover;}
#shop .inner-sct { padding: 70px 0;}
#shop h2 { margin-bottom: 30px; text-align: center;}
#shop h2 img { width: 70%; max-width: 400px;}
#shop p { text-align: center;}
#shop p.read { margin-bottom: 20px; font-size: 21px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;}
#shop p.txt { margin-bottom: 40px; font-size: 13px;}
#shop ul { width: 92%; max-width: 860px; margin: 0 auto; font-size: 0;}
#shop ul li { display: inline-block; width: 33.33334%; padding: 12px; vertical-align: middle;}
#shop ul li a { position: relative; display: block; width: 100%; padding: 2px; background: linear-gradient(140deg, #f3c900, #ff7f37); border-radius: 3px;
 color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
#shop ul li a:before,
#shop ul li a:after { content: ''; display: block;}
#shop ul li a:before { width: 20px; height: 20px; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
 background: url('../img/icn.png') no-repeat 50% 50% / 100% auto;
}
#shop ul li a:after { width: 10px; height: 10px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#shop ul li a span { position: relative; z-index: 2; display: block; width: 100%; padding: 20px 0; padding-left: 30px; border: solid 2px #fff; border-radius: 2px;}
#shop ul li a span.row { padding: 8px 0; padding-left: 30px;}
#shop ul li a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#shop ul li { width: 50%; padding: 10px;}
}
@media (max-width: 641px) {
	#shop ul li a { font-size: 16px;}
	#shop ul li a span { padding: 14.6px 0; padding-left: 35px; border-width: 1px;}
	#shop ul li a span.row { padding: 5px 0; padding-left: 35px;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 40px 0;}
	#shop h2 { margin-bottom: 20px;}
	#shop p.read { margin-bottom: 10px;}
	#shop p.read span { display: block;}
	#shop p.txt { margin-bottom: 15px; font-size: 12px;}
	#shop ul li { padding: 6px;}
	#shop ul li a { font-size: 13px;}
	#shop ul li a:before { width: 18px; height: 18px; left: 8px;}
	#shop ul li a:after { width: 6px; height: 6px; right: 10px;}
	#shop ul li a span { padding: 11.8px 0; padding-left: 30px; border-width: 1px;}
	#shop ul li a span.row { padding: 4px 0; padding-left: 32px;}
}