@charset "utf-8";

#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 10;}
#loading .inner { position: relative; width: 100%; height: 100%;}

#loading .load-txt-1,
#loading .load-txt-2,
#loading .load-txt-3,
#loading .load-txt-4 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;
 width: 100%; height: 100%; opacity: 0;
 mask-image: url('../img/mask-cricle.svg'),url('../img/mask-rect.svg');
 mask-repeat: no-repeat, no-repeat;
 mask-position: 50% 50%, 50% 50%;
 mask-composite: exclude;
 mask-size: 0px 0px, 100% auto;
 transition: 0.8s linear;
}
#loading .load-txt-1 { background: url('../img/load-txt-1.png') no-repeat 50% 50% / 280px auto; transition-delay: 0.5s;}
#loading .load-txt-2 { background: url('../img/load-txt-2.png') no-repeat 50% 50% / 280px auto; transition-delay: 1.0s;}
#loading .load-txt-3 { background: url('../img/load-txt-3.png') no-repeat 50% 50% / 280px auto; transition-delay: 1.5s;}
#loading .load-txt-4 { background: url('../img/load-txt-4.png') no-repeat 50% 50% / 280px auto; transition-delay: 2.0s;}

#loading .load-kira { position: absolute; left: 50%; top: 0%; transform: translate(-50%,0%); z-index: 3;
 width: 100%; height: 100vh; height: 100svh;
/* background: url('../img/load-kira.png') no-repeat 50% 50% / 600px auto;*/
 mask-image: url('../img/mask-cricle.svg'),url('../img/mask-rect.svg');
 mask-repeat: no-repeat, no-repeat;
 mask-position: 50% 50%, 50% 50%;
 mask-composite: exclude;
 mask-size: 0px 0px, 100% auto;
}
#loading .load-kira video { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; transform: translate(-50%,-50%);}
#loading .load-kira video.sp { display: none;}
#loading .load-bg { width: 100%; height: 100%; background: linear-gradient(90deg,#90D4FF,#5EBDFF); z-index: 1;
 mask-image: url('../img/mask-cricle.svg'),url('../img/mask-rect.svg');
 mask-repeat: no-repeat, no-repeat;
 mask-position: 50% 50%, 50% 50%;
 mask-composite: exclude;
 mask-size: 0px 0px, 100% auto;
}

#loading .txt { width: 100%; position: absolute; top: 50%; transform: translateY(-50%);}
#loading .txt svg { width: 100%;}
#loading .txt p { text-align: center;}
#loading .txt p img { width: 60%; max-width: 480px;}
#loading .txt #load1 {}
#loading .txt .mask-1 { filter: blur(20px);}
#loading .txt-2 { display: none;}
#loading.show .load-txt-1,
#loading.show .load-txt-2,
#loading.show .load-txt-3,
#loading.show .load-txt-4 { opacity: 1;}
#loading.fadeOut .load-txt-1,
#loading.fadeOut .load-txt-2,
#loading.fadeOut .load-txt-3,
#loading.fadeOut .load-txt-4,
#loading.fadeOut .load-kira,
#loading.fadeOut .load-bg { animation: mask1 1.0s ease 1.0s forwards;}
#loading.none { display: none;}
@keyframes mask1 {
 0% {  mask-size: 0px 0px, 100% auto;}
 60% { opacity: 1;}
 100% { mask-size: 2800px 2800px, 100% auto; opacity: 0;}
}
@keyframes mask1-sp {
 0% { mask-size: 0px 0px, 300% auto;}
 60% { opacity: 1;}
 100% { mask-size: 1800px 1800px, 300% auto; opacity: 0;}
}
@media (orientation: portrait) {
	#loading .load-txt-1
	#loading .load-txt-2,
	#loading .load-txt-3,
	#loading .load-txt-4 { mask-size: 0px 0px, 300% auto;}
	#loading .load-kira {
	/* background: url('../img/load-kira@sp.png') no-repeat 50% 50% / 100% auto;*/
	mask-size: 0px 0px, 300% auto;}
	#loading .load-kira video.pc { display: none;}
	#loading .load-kira video.sp { display: block; width: auto; min-height: 100%;}
	#loading .load-bg { mask-size: 0px 0px, 300% auto;}

	#loading.fadeOut .load-txt-1,
	#loading.fadeOut .load-txt-2,
	#loading.fadeOut .load-txt-3,
	#loading.fadeOut .load-txt-4,
	#loading.fadeOut .load-kira,
	#loading.fadeOut .load-bg { animation: mask1-sp 1.0s ease 1.0s forwards;}
}
@media (orientation: landscape) {
}
@media (max-width: 481px) {
	#loading .load-txt-1,
	#loading .load-txt-2,
	#loading .load-txt-3,
	#loading .load-txt-4 { transform: translate(-50%,-60%); background-size: 200px auto;}
	#loading .load-bg { mask-position: 50% 40%, 50% 40%;}
}


#wrapper { position: relative; width: 100%; max-width: 1366px; margin: 0 auto;
 background: linear-gradient(#BDDEF5 10%,#c5e2f5 30%,#D2E9F9 80%,#98D5FF 96%);
}
.wrap { position: relative; width: 100%; max-width: 1366px; margin: 0 auto; z-index: 10;
/* background: linear-gradient(#98D5FF 10%,#D2E9F9 20%,#D2E9F9 70%,#BDDEF5 90%);*/
background: url('../img/bg/cloud.png') repeat-y 50% 0 / 100% auto;
}
@media (max-width: 641px) {
.wrap { background: url('../img/bg/cloud@sp.png') repeat-y 50% 0 / 100% auto;}
}



#hd .menu ul.nav li.under { display: none;}

#kv { position: relative;}
#kv .inner-kv { position: relative; width: 100%; max-width: 1366px; margin: 0 auto; opacity: 0;}
#kv.show .inner-kv { opacity: 1;}
#kv .txt-1,
#kv .txt-2 { position: absolute; z-index: 3;}
#kv .txt-1 { width: 40%; top: 42%; left: 0;}
#kv .txt-2 { width: 38%; top: 38%; right: 0;}
#kv .txt-1 p { text-align: center;}
#kv .txt-1 p img { width: 80%; max-width: 420px;}
#kv .txt-2 p { text-align: center;}
#kv .txt-2 p img { width: 68%; max-width: 360px;}
#kv .package { position: absolute; left: 0; bottom: 6%; z-index: 2; width: 100%;}
#kv .package figure { padding-left: 20px; text-align: center;}
#kv .package figure img { width: 32%; max-width: 420px;}
#kv .news { position: absolute; left: 0; bottom: 18%; width: 100%; padding-left: 40px; z-index: 3;}
#kv .news div { width: 45%; max-width: 460px; background: url('../img/bg/news.png') no-repeat 50% 50% / 100% 100%;}
#kv .news div a { display: block; width: 100%; max-width: 440px;  padding: 40px 0 30px; color: #36ACED; text-decoration: none;}
#kv .news div a dl { display: table; width: 100%; padding-left: 72px;}
#kv .news div a dl dt,
#kv .news div a dl dd { position: relative; display: table-cell; vertical-align: middle;}
#kv .news div a dl dt { width: 100px;}
#kv .news div a dl dt:before { content: ''; display: block; width: 100%; padding-top: 100%;
 background: url('../img/bg/news-th.png') no-repeat 50% 50% / 100% 100%;
 position: absolute; left: 0; top: 0; z-index: 2;
}
#kv .news div a dl dt img { position: relative; width: 100%; border-radius: 6px; z-index: 1:}
#kv .news div a dl dd { padding-left: 18px; font-size: 14px; line-height: 1.4;}
#kv .news div a dl dd time { display: block; font-size: 12px;}
#kv .cloud { position: absolute; left: 0; bottom: -120px; width: 100%; z-index: 2;}
#kv .cloud img { width: 100%;}
#kv .cloud img.sp { display: none;}
#kv .bg { width: 100%;}
#kv .bg .pc { width: 100%;}
#kv .bg .pc video { width: 100%; vertical-align: bottom;}
#kv .bg .sp { position: relative; display: none;}
#kv .bg .sp video { width: 100%; vertical-align: bottom;}
@media (max-width: 1281px) {
	#kv .txt-1 { top: 22vw;}
}
@media (max-width: 1001px) {
	#kv .news div a dl dt { width: 80px;}
	#kv .news div a dl dd { padding-bottom: 10px; font-size: 12px;}
	#kv .news div a dl dd time { font-size: 10px;}
}
@media (max-width: 801px) {
	#kv .inner-kv { padding-bottom: 30vw;}
	#kv .package { bottom: auto; top: 28%;}
	#kv .package figure img { width: 68%; max-width: 68%;}
	#kv .txt-1 { display: none;}
	#kv .txt-2 { width: 100%; top: auto; bottom: 14%;}
	#kv .txt-2 p img { width: 76%; max-width: 76%;}

	#kv .news { bottom: 0%; padding-left: 0px;}
	#kv .news div { width: 90%; max-width: 460px; margin: 0 auto;}

	#kv .cloud { bottom: auto; top: 65%;}
	#kv .cloud img.pc { display: none;}
	#kv .cloud img.sp { display: block;}
	#kv .bg .pc { display: none;}
	#kv .bg .sp { display: block; width: 100%; padding-top: 172%; overflow: hidden;}
	#kv .bg .sp video { position: absolute; left: 0; top: 0; width: 100%;}
}
@media (max-width: 481px) {
	#kv .inner-kv { padding-bottom: 45vw;}
	#kv .news div a { padding: 30px 0 20px}
	#kv .news div a dl { padding-left: 50px;}
	#kv .news div a dl dt { width: 72px;}
	#kv .news div a dl dd { padding-left: 12px; font-size: 11px; line-height: 1.25;}
	#kv .txt-2 { bottom: 16%;}
	#kv .bg { overflow: hidden;}
	#kv .bg .sp { padding-top: 168%;}
	#kv .cloud { bottom: auto; top: 62%;}
}


#badge { position: fixed; width: 100%; left: 0; bottom: 80px; z-index: 10; transition: 0.4s linear; opacity: 0;}
#badge div { position: relative; width: 100%; max-width: 1366px; margin: 0 auto;}
#badge img { position: absolute; width: 12%; max-width: 170px; right: 5%; bottom: 0;}
#badge.show { opacity: 1;}
@media (max-width: 801px) {
	#badge img { width: 28%;}
}
@media (max-width: 481px) {
	#badge { bottom: 40px;}
	#badge img { right: 2%;}
}


.ttl { padding-top: 20px;}
.ttl h2 { text-align: center;}
.ttl h2 img { width: 92%; max-width: 880px; height: auto;}
.ttl h2 img.sp { display: none;}
@media (max-width: 641px) {
	.ttl h2 img.pc { display: none;}
	.ttl h2 img.sp { display: block; width: 100%;}
}


#topics .inner-sct { padding: 120px 0 80px;}
#topics h2 { margin-bottom: 30px; text-align: center;}
#topics h2 img { width: 100%; max-width: 220px;}
#topics .ctn { position: relative; width: 85%; max-width: 1100px; margin: 0 auto;}
#topics .ctn:before,
#topics .ctn:after { content: ''; display: block; width: 100%; height: 1px;
 background: #fff; box-shadow: 0 0 10px #36A6ED, 0 0 10px #36A6ED;
}
#topics .ctn ul { padding: 50px 0 40px; font-size: 0; text-align: center;}
#topics .ctn ul li { display: inline-block; width: 33%; }
#topics .ctn ul li a { display: block; width: 92%; max-width: 220px; margin: 0 auto; color: #36ACED; text-decoration: none;}
#topics .ctn ul li a dl dt {}
#topics .ctn ul li a dl dt img { width: 100%; border-radius: 10px;}
#topics .ctn ul li a dl dd{ font-size: 16px; font-weight: 700; text-align: left;}
#topics .ctn ul li a dl dd.date{ padding: 5px 0; color: #6799B4;}
#topics .ctn ul li a dl dd.tit {}
@media (max-width: 801px) {
	#topics .inner-sct { padding: 80px 0 60px;}
}
@media (max-width: 641px) {
	#topics .ctn ul li { width: 50%;}
	#topics .ctn ul li a dl dd{ font-size: 14px;}
}
@media (max-width: 481px) {
	#topics .inner-sct { padding: 40px 0px 20px;}
	#topics h2 { margin-bottom: 12px;}
	#topics .ctn:before,
	#topics .ctn:after { box-shadow: 0 0 6px #36A6ED, 0 0 6px #36A6ED;}
	#topics .ctn ul { padding: 30px 0 40px;}
	#topics .ctn ul li { width: 60%;}
	#topics .ctn ul li a dl dd{ font-size: 12px;}
}


#concept .inner-sct { padding: 40px 0 200px;}
#concept figure { margin-bottom: 30px; text-align: center;}
#concept figure img { width: 88%; max-width: 880px; height: auto;}
#concept figure img.sp { display: none;}
#concept .movie { width: 80%; max-width: 540px; margin: 0 auto;}
#concept .movie .inner { position: relative; width: 100%; padding-top: 100%;}
#concept .movie img { width: 100%; position: absolute; left: 0; top: 0;}
#concept .note { width: 88%; max-width: 880px; margin: 0 auto 120px;}
#concept .note ul { width: 100%; font-size: 0;}
#concept .note ul li { font-size: 12px;}
#concept .note ul li span { text-decoration: underline;}
@media (max-width: 801px) {
	#concept .inner-sct { padding: 80px 0 120px;}
	#concept figure img.pc { display: none;}
	#concept figure img.sp { display: block; margin: 0 auto;}
}
@media (max-width: 801px) {
	#concept .inner-sct { padding: 20px 0 40px;}
	#concept figure { margin-bottom: 12px; }
	#concept .note { margin: 0 auto 40px;}
	#concept .note ul li { font-size: 10px;}

}

#care .inner-sct { position: relative; padding: 140px 0;
 background: url('../img/bg/care.png') no-repeat 50% 50% / 100% 100%;
}
#care .tit { margin-bottom: 50px;}
#care .tit h2 { text-align: center;}
#care .tit h2 img { width: 100%; height: auto;}
#care .tit h2 img.sp { display: none;}
#care figure { margin-bottom: 30px; text-align: center;}
#care figure img { width: 92%; max-width: 880px;}
#care figure img.sp { display: none;}
#care .note { width: 92%; max-width: 880px; margin: 0 auto;}
#care .note ul { width: 100%; font-size: 0;}
#care .note ul li { font-size: 12px;}
#care .note ul li span { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
@media (max-width: 801px) {
	#care .tit h2 img.pc { display: none;}
	#care .tit h2 img.sp { display: block;}
}
@media (max-width: 641px) {
	#care .inner-sct { padding: 80px 0; background: url('../img/bg/care@sp.png') no-repeat 50% 50% / 100% 100%;}
	#care .tit { margin-bottom: 20px;}
	#care figure { margin-bottom: 12px;}
	#care figure img.pc { display: none;}
	#care figure img.sp { display: block; width: 100%;}
}
@media (max-width: 481px) {
	#care .inner-sct { padding: 40px 0 80px;}
	#care .note ul li { font-size: 10px;}
}


#point .inner-sct { padding-bottom: 100px; background: url('../img/bg/ttl.png') no-repeat 50% 0;}
#point .ttl { margin-bottom: 50px;}
#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: 1100px; margin: 0 auto; padding: 30px 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;}
#point .ctn-pc .box .tit { width: 47%;}
#point .ctn-pc .box .fig { width: 50%;}
#point .ctn-pc .box .tit ul { width: 100%; }
#point .ctn-pc .box .tit ul li { padding: 15px 0;}
#point .ctn-pc .box .tit ul li:first-child { padding-top: 0px;}
#point .ctn-pc .box .tit ul li img { width: 100%; height: auto; background: rgba(255,255,255,0.6); box-shadow: 0 0 10px #c3d9e5;}
#point .ctn-pc .box .fig .inner { padding: 30px 25px; background: rgba(255,255,255,0.6); box-shadow: 0 0 10px #c3d9e5;}
#point .ctn-pc .box .fig figure { margin-bottom: 12px; text-align: center;}
#point .ctn-pc .box .fig figure img { width: 100%; max-width: 480px; height: auto;}
#point .ctn-pc .box .fig .note ul li { font-size: 11px;}
#point .ctn-pc .box .fig .note ul li span { text-decoration: underline;}
#point .ctn-sp { display: none;}
#point .ctn-sp .ctn { width: 92%; max-width: 640px; margin: 0 auto;}
#point .ctn-sp .bloc { margin-bottom: 30px; background: rgba(255,255,255,0.6); box-shadow: 0 0 10px #c3d9e5;}
#point .ctn-sp .bloc:last-child { margin-bottom: 0px;}
#point .ctn-sp .point-tit { position: relative; width: 100%; padding-right: 20px;}
#point .ctn-sp .point-tit img { width: 100%; height: auto;}
#point .ctn-sp .point-tit:after { content:''; display: block; width: 0px; height: 0px;
 position: absolute; right: 30px; top: 50%; transform: translateY(-45%);
 border: solid 15px transparent; border-top: solid 24px #36ACED; border-bottom: 0px;
}
#point .ctn-sp .point-tit.open:after { transform: translateY(-60%); border-top: 0px; border-bottom: solid 24px #36ACED;
}
#point .ctn-sp .point-ctn { display: none;}
#point .ctn-sp .point-ctn .inner { padding: 0 30px 30px;}
#point .ctn-sp .point-ctn figure { margin-bottom: 12px; text-align: center;}
#point .ctn-sp .point-ctn figure img { width: 100%; max-width: 480px; height: auto;}
#point .ctn-sp .point-ctn .note ul li { font-size: 10px;}
#point .ctn-sp .point-ctn .note ul li span { text-decoration: underline;}

@media (max-width: 1001px) {
	#point .ctn-pc .box .tit ul li { padding: 10px 0;}
}
@media (max-width: 801px) {
	#point .ctn-pc { display: none;}
	#point .ctn-pc .box .fig .note ul li { font-size: 10px;}
	#point .ctn-sp { display: block;}

}
@media (max-width: 641px) {
	#point .inner-sct { padding-bottom: 100px; background: none;}
	#point .ctn-sp .bloc { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#point .inner-sct { padding-bottom: 40px;}
	#point .ttl { margin-bottom: 20px;}
	#point .ctn-sp .bloc { margin-bottom: 18px;}
	#point .ctn-sp .point-tit:after { right: 15px; border: solid 10px transparent; border-top: solid 16px #36ACED; border-bottom: 0px;
}
	#point .ctn-sp .point-tit.open:after { border-top: 0px; border-bottom: solid 16px #36ACED;
}
	#point .ctn-sp .point-ctn .inner { padding: 0 20px 20px;}
}



#howto .inner-sct { position: relative; padding: 80px 0 160px;}
#howto .inner-sct:before { content: ''; display: block; width: 20px; height: 130px;
 background: url('../img/line.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
}
#howto .tit { margin-bottom: 50px;}
#howto .tit h2 { text-align: center;}
#howto .tit h2 img { width: 60%; max-width: 480px;}
#howto .ctn { width: 94%; max-width: 1180px; margin: 0 auto 20px;}
#howto .ctn ul { font-size: 0; text-align: center;}
#howto .ctn ul li { display: inline-block; width: 50%; padding: 0 6px;}
#howto .ctn ul li img { width: 100%;}
#howto .note { width: 92%; max-width: 1180px; margin: 0 auto;}
#howto .note ul { width: 100%; max-width: 370px; margin: 0 0 0 auto; font-size: 0;}
#howto .note ul li { font-size: 12px;}
@media (max-width: 801px) {
	#howto .tit { margin-bottom: 20px;}
	#howto .ctn { max-width: 620px; margin: 0 auto;}
	#howto .ctn ul li { display: block; width: 100%; padding: 10px 0;}
	#howto .note { width: 88%;}
	#howto .note ul { width: 100%; max-width: 100%;}
}
@media (max-width: 481px) {
	#howto .inner-sct { padding: 40px 0 60px;}
	#howto .inner-sct:before { width: 12px; height: 85px; top: -62px;}
	#howto .tit { margin-bottom: 12px;}
	#howto .ctn ul li { padding: 6px 0;}
	#howto .note ul li { font-size: 10px;}
}


#product .inner-sct { padding-bottom: 60px; background: url('../img/bg/ttl.png') no-repeat 50% 0;}
#product.pt0 .inner-sct { padding-bottom: 0px; }
#product .ptl { margin-bottom: 70px; padding-top: 20px;}
#product .ptl h2 { text-align: center;}
#product .ptl h2 img { width: 80%; max-width: 480px;}
#product .ptl h2 img.sp { display: none;}
#product .product-type { padding-top: 60px;}
#product .product-type.wh { background: linear-gradient(#fff,rgba(255,255,255,0));}
#product .product-type .main { position: relative; width: 88%; max-width: 860px; margin: 0 auto; cursor: pointer;}
#product .product-type .main:before,
#product .product-type .main:after { content: ''; display: block; width: 2px; height: 30px; background: #fff;
 position: absolute; right: 10%; bottom: 32px; z-index: 2; transition: 0.2s linear;
}
#product .product-type .main:after { transform: rotate(90deg);}
#product .product-type .main.open:before { transform: rotate(90deg);}
#product .product-type .main figure { position: relative; text-align: center; z-index: 1;}
#product .product-type .main figure img { width: 100%; filter: drop-shadow(0px 0px 6px #b4c8d3);}
#product .product-type .main figure img.sp { display: none;}
#product .hide-ctn { display: none;}

#product .bloc { padding: 60px 0 120px; background: linear-gradient(#D2E9F9,#fff);}
#product .bloc.first{ background: linear-gradient(rgba(255,255,255,0),#fff);}
#product .bloc.grad { padding: 60px 0 100px;}
#product .ctn { position: relative; display: flex; justify-content: space-between; width: 100%; max-width: 940px; margin: 0 auto; padding: 60px 0;}
#product .ctn.ctn-L { flex-direction: row-reverse;}
#product .ctn#moist-shampoo { background: url('../img/product/tit-1-1.png') no-repeat 100% 0;}
#product .ctn#hairpack { background: url('../img/product/tit-2.png') no-repeat 0% 0;}
#product .ctn#moist-treatment { background: url('../img/product/tit-1-3.png') no-repeat 100% 0;}
#product .ctn#moist-hairmilk { background: url('../img/product/tit-1-4.png') no-repeat 0% 0;}
#product .ctn#hairspray { background: url('../img/product/tit-5.png') no-repeat 100% 0;}
#product .ctn#repair-shampoo { background: url('../img/product/tit-2-1.png') no-repeat 100% 0;}
#product .ctn#repair-treatment { background: url('../img/product/tit-2-3.png') no-repeat 100% 0;}
#product .ctn#repair-hairmilk { background: url('../img/product/tit-2-4.png') no-repeat 0% 0;}
#product .tit { display: none;}
#product .ctn .item { width: 25%;}
#product .ctn .txt { width: 70%; padding-top: 160px; padding-left: 40px;}
#product .ctn.ctn-L .txt { padding-left: 80px;}
#product .ctn .item figure { text-align: center;}
#product .ctn .item figure.pt { padding-top: 80px;}
#product .ctn .item figure img { width: 90%; max-width: 200px;}
#product .ctn .txt .inner { margin-bottom: 30px;}
#product .ctn h4 { margin-bottom: 20px; font-size: 32px; font-weight: 700; line-height: 1.45;}
#product .ctn h4.color-1 { color: #36ACED;}
#product .ctn h4.color-2 { color: #C7B12C;}
#product .ctn h4.color-3 { color: #7570CF;}
#product .ctn h4.color-4 { color: #A864CD;}

#product .ctn h4 br.sp { display: none;}
#product .ctn p.amount { font-size: 22px;}
#product .ctn p.amount span { display: inline-block; width: 112px; background: #fff; border-radius: 50px;
 line-height: 40px; text-align: center;
}
#product .ctn .aside { position: relative; width: 100%;}
#product .ctn .aside p.price { margin-bottom: 50px; font-size: 26px;}
#product .ctn .aside p.price span { display: block; font-size: 32px; font-weight: 700;}
#product .ctn .aside figure { width: 180px; position: absolute; left: 58%; top: 0;}
#product .ctn.ctn-L .aside figure { left: 64%;}
#product .ctn .aside figure img { width: 100%;}
#product .ctn .aside figure img.sp { display: none;}
#product .ctn .aside .cart { width: 100%; max-width: 340px;}
#product .ctn .aside .cart form { position: relative; border: solid 1px #fff; border-radius: 25px; overflow: hidden;}
#product .ctn .aside .cart form.cart-1 { background: url('../img/product/cart-1.jpg') no-repeat 50% 0 / cover; box-shadow: 0 0 10px #46ACE4;}
#product .ctn .aside .cart form.cart-2 { background: url('../img/product/cart-2.jpg') no-repeat 50% 0 / cover; box-shadow: 0 0 10px #B29825;}
#product .ctn .aside .cart form.cart-3 { background: url('../img/product/cart-3.jpg') no-repeat 50% 0 / cover; box-shadow: 0 0 10px #945FBF;}
#product .ctn .aside .cart form.cart-4 { background: url('../img/product/cart-4.jpg') no-repeat 50% 0 / cover; box-shadow: 0 0 10px #CE88D2;}
#product .ctn .aside .cart form svg { position: absolute; left: 50%; top: 50%; transform: translate(-110px,-50%); width: 36px; fill: #fff;}
#product .ctn .aside .cart form input[type="submit"] { width: 100%; padding: 16px 0; text-align: center;
 border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 24px; font-weight: 700; text-indent: 40px;
}
#product .ctn .aside .cart form.cart-1 input[type="submit"] { text-shadow: 0 0 5px #46ACE4;}
#product .ctn .aside .cart form.cart-2 input[type="submit"] { text-shadow: 0 0 5px #B29825;}
#product .ctn .aside .cart form.cart-3 input[type="submit"] { text-shadow: 0 0 5px #945FBF;}
#product .ctn .aside .cart form.cart-4 input[type="submit"] { text-shadow: 0 0 5px #CE88D2;}
#product .ctn .aside .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}

#product .ctn .aside .cart span { position: relative; display: block; background: radial-gradient(#ccc,#b9b9b9); border: solid 1px #fff; border-radius: 25px; box-shadow: 0 0 10px #b9b9b9; overflow: hidden;}
#product .ctn .aside .cart span svg { position: absolute; left: 50%; top: 50%; transform: translate(-110px,-50%); width: 36px; fill: #fff;}
#product .ctn .aside .cart span em { display: block; width: 100%; padding: 16px 0; text-align: center;
 border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 24px; font-weight: 700; text-indent: 40px; text-shadow: 0 0 8px #b9b9b9;
}

#product .ctn.sub-ctn { padding: 30px 0 60px;}
#product .ctn .sub-item { width: 49%;}
#product .ctn .sub-item figure { margin-bottom: 18px; text-align: center;}
#product .ctn .sub-item figure img { width: 60%; max-width: 240px;}
#product .ctn .sub-item h4 { font-size: 30px; text-align: center;}
#product .ctn .sub-item p.amount { margin-bottom: 20px; text-align: center;}
#product .ctn .sub-item p.price { margin-bottom: 30px; font-size: 22px; text-align: center;}
#product .ctn .sub-item p.price span { display: block; font-size: 30px; font-weight: 700;}
#product .ctn .sub-item .cart { width: 100%; max-width: 340px; margin: 0 auto;}
#product .ctn .sub-item .cart form { position: relative; width: 80%; margin: 0 auto; border: solid 1px #fff; border-radius: 25px; overflow: hidden;}
#product .ctn .sub-item .cart form.cart-1 { background: url('../img/product/cart-1-s.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 10px #46ACE4;}
#product .ctn .sub-item .cart form.cart-2 { background: url('../img/product/cart-2-s.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 10px #B29825;}
#product .ctn .sub-item form svg { position: absolute; left: 50%; top: 50%; transform: translate(-110px,-50%); width: 36px; fill: #fff;}
#product .ctn .sub-item form input[type="submit"] { width: 100%; padding: 16px 0; text-align: center;
 border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 24px; font-weight: 700; text-indent: 40px;
}
#product .ctn .sub-item .cart form.cart-1 input[type="submit"] { text-shadow: 0 0 5px #46ACE4;}
#product .ctn .sub-item .cart form.cart-2 input[type="submit"] { text-shadow: 0 0 5px #B29825;}
#product .ctn .sub-item .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}

#product .ctn .sub-item .cart span { position: relative; display: block; width: 92%; margin: 0 auto; background: radial-gradient(#ccc,#b9b9b9); border: solid 1px #fff; border-radius: 25px; box-shadow: 0 0 10px #b9b9b9; overflow: hidden;}
#product .ctn .sub-item .cart span svg { position: absolute; left: 50%; top: 50%; transform: translate(-110px,-50%); width: 36px; fill: #fff;}
#product .ctn .sub-item .cart span em { display: block; width: 100%; padding: 16px 0; text-align: center;
 border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 24px; font-weight: 700; text-indent: 40px; text-shadow: 0 0 8px #b9b9b9;
}
#product .note { padding: 40px 0;}
#product .note ul { text-align: center;}
#product .note ul li { font-size: 12px;}
@media (max-width: 1001px) {
	#product .ctn h4 { font-size: 3.6vw;}
	#product .ctn h4 br.sp { display: block;}
	#product .ctn .sub-item h4 { font-size: 3.4vw;}
}
@media (max-width: 801px) {
	#product .ptl { margin-bottom: 40px;}
	#product .product-type { padding-top: 40px;}
	#product .product-type .main:before,
	#product .product-type .main:after { bottom: 23px;}
	#product .ctn .aside figure { width: 100%; margin-bottom: 50px; position: relative; left: auto; top: auto;}
	#product .ctn.ctn-L .aside figure { left: auto;}
	#product .ctn .aside figure img.pc { display: none;}
	#product .ctn .aside figure img.sp { display: block;}
	#product .ctn .aside p.price { margin-bottom: 30px; font-size: 21px;}
	#product .ctn .aside p.price span { font-size: 28px;}

	#product .ctn .sub-item p.price { font-size: 20px;}
	#product .ctn .sub-item p.price span { font-size: 24px;}

}
@media (max-width: 641px) {

	#product .inner-sct { padding-bottom: 40px; background: none;}
	#product .ptl { margin-bottom: -40px;}
	#product .ptl h2 img.pc { display: none;}
	#product .ptl h2 img.sp { display: block; width: 100%; max-width: 100%;}

	#product .product-type { padding-top: 0px;}
	#product .product-type.type-2 { padding-top: 40px;}
	#product .product-type .main:before,
	#product .product-type .main:after { bottom: 20px; height: 26px; width: 1px;}
	#product .product-type .main figure img.pc { display: none;}
	#product .product-type .main figure img.sp { display: block;}

	#product .bloc { padding: 60px 0;}
	#product .bloc.grad { padding: 60px 0 120px;}
	#product .ctn { display: block; padding: 0px 0;}
	#product .ctn#moist-shampoo ,
	#product .ctn#hairpack ,
	#product .ctn#moist-treatment ,
	#product .ctn#moist-hairmilk ,
	#product .ctn#hairspray ,
	#product .ctn#repair-shampoo ,
	#product .ctn#repair-treatment ,
	#product .ctn#repair-hairmilk { background: none}

	#product .tit { position: relative; display: block; width: 100%; margin: 0 auto -20px;}
	#product .tit h3 img { width: 100%;}
	#product .ctn .item { position: absolute; top: 0; width: 38%;}
	#product .ctn.ctn-L .item { right: 2%;}
	#product .ctn.ctn-R .item { left: 2%;}
	#product .ctn .txt { width: 100%; padding-top: 0px; padding-left: 0px;}
	#product .ctn.ctn-L .txt { padding-left: 0px;}
	#product .ctn.ctn-L .txt .inner { padding-left: 8%; padding-right: 34%;}
	#product .ctn.ctn-R .txt .inner { padding-left: 38%;}
	#product .ctn .item figure.pt { padding-top: 0px;}
	#product .ctn .item figure img { width: 72%;}

	#product .ctn h4 { font-size: 4.2vw;}
	#product .ctn p.amount { font-size: 18px;}
	#product .ctn .aside { padding-bottom: 150px;}
	#product .ctn.ctn-L .aside { padding-left: 8%; padding-right: 34%;}
	#product .ctn.ctn-R .aside { padding-left: 38%; padding-right: 2%;}
	#product .ctn .aside p.price { font-size: 18px;}
	#product .ctn .aside p.price span { font-size: 24px;}
	#product .ctn .aside figure { margin-bottom: 0px;}
	#product .ctn .aside .cart { position: absolute; width: 100%; max-width: 100%; left: 0; bottom: 0px;}
	#product .ctn .aside .cart form { width: 80%; margin: 0 auto;}
	#product .ctn .aside .cart span { width: 80%; margin: 0 auto;}

	#product .ctn.sub-ctn { display: flex;}
	#product .ctn .sub-item p.price { font-size: 16px;}
	#product .ctn .sub-item p.price span { font-size: 21px;}
	#product .ctn .sub-item form svg  { width: 32px; transform: translate(-90px,-50%); }
	#product .ctn .sub-item form input[type="submit"] { font-size: 20px;}
	#product .ctn .sub-item .cart span svg { width: 32px; transform: translate(-90px,-50%); }
	#product .ctn .sub-item .cart span em { font-size: 20px;}
	#product .note ul { width: 88%; margin: 0 auto; text-align: left;}
}
@media (max-width: 481px) {
	#product .ptl { margin-bottom: -20px;}

	#product .product-type .main:before,
	#product .product-type .main:after { bottom: 18px; height: 18px; width: 1px;}

	#product .bloc { padding: 40px 0 60px;}
	#product .tit { margin: 0 auto -12px;}

	#product .ctn .txt .inner { margin-bottom: 12px;}
	#product .ctn h4 { margin-bottom: 12px; font-size: 20px;}
	#product .ctn p.amount { font-size: 13px;}
	#product .ctn p.amount span { width: 80px; line-height: 24px;}

	#product .ctn .aside { padding-bottom: 100px;}
	#product .ctn .aside p.price { margin-bottom: 12px; font-size: 13px;}
	#product .ctn .aside p.price span { font-size: 16px;}
	#product .ctn .aside .cart form { border-radius: 12px; border-width: 0.5px;}
	#product .ctn .aside .cart form.cart-1 { background: url('../img/product/cart-1@sp.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 4px #46ACE4;}
	#product .ctn .aside .cart form.cart-2 { background: url('../img/product/cart-1@sp.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 4px #B29825;}
	#product .ctn .aside .cart form.cart-3 { background: url('../img/product/cart-3@sp.jpg') no-repeat 50% 0 / cover; box-shadow: 0 0 4px #945FBF;}
	#product .ctn .aside .cart form.cart-4 { background: url('../img/product/cart-4@sp.jpg') no-repeat 50% 0 / cover; box-shadow: 0 0 4px #CE88D2;}

	#product .ctn .aside .cart form svg { width: 30px; transform: translate(-80px,-50%);}
	#product .ctn .aside .cart form input[type="submit"] { padding: 12px 0; font-size: 14px; font-weight: 400; text-indent: 30px;}

	#product .ctn .aside .cart span { border-radius: 12px; box-shadow: 0 0 6px #b9b9b9;}
	#product .ctn .aside .cart span svg { width: 30px; transform: translate(-80px,-50%);}
	#product .ctn .aside .cart span em { padding: 12px 0; font-size: 16px; font-weight: 400; text-indent: 30px;}


	#product .ctn.sub-ctn { padding: 20px 0 40px;}

	#product .ctn .sub-item h4 { font-size: 15px;}
	#product .ctn .sub-item p.amount { margin-bottom: 12px;}
	#product .ctn .sub-item p.price { font-size: 12px;}
	#product .ctn .sub-item p.price span { font-size: 15px;}

	#product .ctn .sub-item .cart form { width: 90%; border-radius: 14px; border-width: 0.5px;}
	#product .ctn .sub-item .cart form.cart-1 { background: url('../img/product/cart-1-s@sp.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 4px #46ACE4;}
	#product .ctn .sub-item .cart form.cart-2 { background: url('../img/product/cart-2-s@sp.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 4px #B29825;}

	#product .ctn .sub-item .cart form svg { width: 20px; transform: translate(-55px,-50%);}
	#product .ctn .sub-item .cart form input[type="submit"] { padding: 12px 0; font-size: 13px; font-weight: 400; text-indent: 25px;}
	#product .ctn .sub-item .cart img { display: block; width: 92%; margin: 0 auto;}

	#product .ctn .sub-item .cart span { border-radius: 14px; box-shadow: 0 0 4px #b9b9b9;}
	#product .ctn .sub-item .cart span svg { width: 20px; transform: translate(-55px,-50%);}
	#product .ctn .sub-item .cart span em { padding: 12px 0; font-size: 14px; font-weight: 400; text-indent: 30px;}

	#product .note { padding: 20px 0;}
	#product .note ul li { font-size: 10px;}
}



#shop { padding-top: 20px;}
#shop.wh { background: linear-gradient(#fff, rgba(255,255,255,0));}
#shop .inner-sct { padding-bottom: 80px; background: url('../img/bg/ttl.png') no-repeat 50% 0;}
#shop .ttl { margin-bottom: 120px;}
#shop .btn { width: 85%; max-width: 660px; margin: 0 auto;}
#shop .btn a { display: block; width: 100%; border-radius: 30px; overflow: hidden;
	 box-shadow: 0 0 8px #46ACE4;border: solid 1px #fff;
}
#shop .btn a img { width: 100%;}
#shop .btn a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#shop .inner-sct { padding-bottom: 100px; background: none;}
	#shop .ttl { margin-bottom: 20px;}
	#shop .btn { margin: 0 auto;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding-bottom: 60px;}
	#shop .btn a { border-radius: 20px; border-width: 0.5px;}
}

#campaign .inner-sct { padding: 200px 0 320px; }
#campaign .ctn { position: relative; width: 85%; max-width: 880px; margin: 0 auto;}
#campaign .ctn figure { text-align: center;}
#campaign .ctn figure img { width: 100%;}
#campaign .ctn figure img.sp { display: none;}
#campaign .ctn .btn-campaign { width: 100%; position: absolute; left: 0; bottom: 9%; width: 100%;}
#campaign .ctn .btn-campaign div{ width: 60%; margin: 0 0 0 auto;}
#campaign .ctn .btn-campaign a { display: block; width: 80%; max-width: 380px; margin: 0 auto;}
#campaign .ctn .btn-campaign a img { width: 100%;}
#campaign .ctn .btn-campaign a:hover img { opacity: 0.8;}
@media (max-width: 641px) {
	#campaign .inner-sct { padding: 100px 0 200px; }
	#campaign .ctn figure img.pc { display: none;}
	#campaign .ctn figure img.sp { display: block;}
	#campaign .ctn .btn-campaign { bottom: 8%;}
	#campaign .ctn .btn-campaign div{ width: 100%; margin: 0 auto;}
	#campaign .ctn .btn-campaign a { width: 58%;}
}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 40px 0 100px; }
}


#choose .inner-sct { padding-bottom: 100px; background: url('../img/bg/ttl.png') no-repeat 50% 0;}
#choose .ttl { margin-bottom: 100px;}
#choose .choose-pc { width: 92%; max-width: 1080px; margin: 0 auto;}
#choose .choose-pc ul { font-size: 0; text-align: center;}
#choose .choose-pc ul li { display: inline-block; width: 50%; padding: 0 20px;}
#choose .choose-pc ul li img { width: 100%; border-radius: 40px; box-shadow: 3px 3px 10px #b4c8d3;}
#choose .choose-sp { display: none; width: 100%; padding: 0 40px;}
#choose .choose-sp .slick-slide { padding: 10px;}
#choose .choose-sp img { width: 100%; border-radius: 20px; box-shadow: 2px 2px 6px #b4c8d3;}
#choose .slick-arrow { width: 50px; height: 50px; border: solid 3px #fff; border-radius: 50%; z-index: 100;
 background: rgba(255,255,255,0.2); box-shadow: 2px 2px 6px rgba(50,50,50,0.2);
}
#choose .slick-arrow:before { content: ''; display: block; width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
}
#choose .slick-prev { left: -16px;}
#choose .slick-next { right: -16px;}
#choose .slick-prev:before { background: url('../img/arw-L.svg') no-repeat 50% 50% / 100% auto;}
#choose .slick-next:before { background: url('../img/arw-R.svg') no-repeat 50% 50% / 100% auto;}
#choose .slick-arrow.slick-disabled { opacity: 0;}
@media (max-width: 801px) {
	#choose .inner-sct { padding-bottom: 60px;}
	#choose .ttl { margin-bottom: 60px;}
	#choose .choose-pc ul li { padding: 0 10px;}
	#choose .choose-pc ul li img { border-radius: 20px;}
}
@media (max-width: 641px) {
	#choose .inner-sct { background: none;}
	#choose .ttl { margin-bottom: 20px;}
	#choose .choose-pc { display: none;}
	#choose .choose-sp { display: block;}
}
@media (max-width: 481px) {
	#choose .inner-sct { padding-bottom: 40px;}
	#choose .choose-sp { padding: 0 20px;}
	#choose .choose-pc ul li img { border-radius: 12px;}
	#choose .slick-arrow { width: 40px; height: 40px; border-width: 2px;}
	#choose .slick-prev { left: -12px;}
	#choose .slick-next { right: -12px;}
}



#sns .inner-sct { padding: 180px 0 40px;}
#sns h3 { margin-bottom: 40px; line-height: 1; text-align: center;}
#sns h3 img { width: 34%; max-width: 240px;}
#sns ul { font-size: 0; text-align: center;}
#sns ul li { display: inline-block; width: 100px;}
#sns ul li a { display: block; width: 56px; margin: 0 auto;}
#sns ul li a svg { width: 100%; fill: #fff;}
@media (max-width: 801px) {
	#sns .inner-sct { padding: 120px 0 40px;}
	#sns ul li a { width: 50px;}
}
@media (max-width: 481px) {
	#sns .inner-sct { padding: 100px 0 20px;}
	#sns h3 { margin-bottom: 20px;}
	#sns ul li { width: 60px;}
	#sns ul li a { width: 32px;}
}