@charset "utf-8";
#hd .menu { background: #f1f1f1;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #f1f1f1;}
.menu-trig div span { background: #464646;}
.menu-cart a svg { fill: #464646;}

#kv { position: relative; background: url('../../img/color/product/bg-kv.jpg') no-repeat 50% 0 / auto 100%;}
#kv .inner-kv { width: 100%; max-width: 1280px; height: 700px; margin: 0 auto;}
#kv .ctn { width: 60%; max-width: 760px; padding-top: 260px;}
#kv .ctn h1 { margin-bottom: 15px; text-align: center;}
#kv .ctn h1 img { width: 60%; max-width: 420px;}
#kv .ctn h2 { color: #582e87; font-size: 30px; font-weight: 700; text-align: center;}
#kv .bg { display: none; background: url('../../img/color/product/bg-kv-sp.jpg') no-repeat 50% 0 / 100% auto;}
@media (max-width: 1001px) {
	#kv .inner-kv { height: 600px;}
	#kv .ctn { padding-top: 200px;}
	#kv .ctn p { font-size: 2.0vw;}
	#kv .ctn p span { font-size: 3.0vw;}
}
@media (max-width: 641px) {
	#kv .inner-kv { position: absolute; left: 0; top: 0; z-index: 2;}
	#kv .ctn { width: 100%; padding-top: 12vw;}
	#kv .ctn h1 { margin-bottom: 8px;}
	#kv .ctn h1 img { width: 65%;}
	#kv .ctn h2 { font-size: 5.0vw;}
	#kv .bg { position: relative; display: block; width: 100%; padding-top: 116%; z-index: 1;}
}
@media (max-width: 641px) {
	#kv .ctn h1 { margin-bottom: 5px;}
	#kv .ctn p { font-size: 10px;}
	#kv .ctn p span { font-size: 16px;}
}



#product-ctn {}
#product-ctn .bloc { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('../../img/color/product/bg.jpg') no-repeat 50% 0 / 1280px auto;}
#product-ctn .bloc:before { content: ''; display: block; width: 100%; height: 270px; position: absolute; left: 0; top: 0;}
#product-ctn .bloc#item-1:before { background: url('../../img/color/product/bg-1.png') no-repeat 50% 50% / auto 100%;}
#product-ctn .bloc#item-2:before { background: url('../../img/color/product/bg-2.png') no-repeat 50% 50% / auto 100%;}
#product-ctn .bloc#item-3:before { background: url('../../img/color/product/bg-3.png') no-repeat 50% 50% / auto 100%;}
#product-ctn .bloc#item-4:before { background: url('../../img/color/product/bg-3.png') no-repeat 50% 50% / auto 100%;}
#product-ctn .bloc#item-5:before { background: url('../../img/color/product/bg-5.png') no-repeat 50% 50% / auto 100%;}
#product-ctn .bloc#item-6:before { background: url('../../img/color/product/bg-6.png') no-repeat 50% 50% / auto 100%;}
#product-ctn .bloc .inner { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding-left: 80px;}
#product-ctn .bloc .icn { position: absolute; left: 0; top: 50px; width: 130px;}
#product-ctn .bloc .icn img { width: 100%;}
#product-ctn .bloc .ctn { position: relative; width: 100%; max-width: 860px; margin: 0 auto; padding: 70px 0; padding-left: 40%;}
#product-ctn .bloc#item-5 .ctn,
#product-ctn .bloc#item-6 .ctn { padding-bottom: 140px;}
#product-ctn .bloc .ctn:before { content: ''; display: block; width: 40%; height: 100%; position: absolute; left: 0; top: 0;}
#product-ctn .bloc#item-1 .ctn:before { background: url('../../img/color/product/img-shampoo.png') no-repeat 50% 50% / auto 80%;}
#product-ctn .bloc#item-2 .ctn:before { background: url('../../img/color/product/img-treatment.png') no-repeat 50% 50% / auto 80%;}
#product-ctn .bloc#item-3 .ctn:before { background: url('../../img/color/product/img-hairmilk.png') no-repeat 50% 50% / auto 80%;}
#product-ctn .bloc#item-4 .ctn:before { background: url('../../img/color/product/img-hairoil.png') no-repeat 50% 50% / auto 80%;}
#product-ctn .bloc#item-5 .ctn:before { background: url('../../img/color/product/img-shampoo_re.png') no-repeat 50% 80% / auto 85%;}
#product-ctn .bloc#item-6 .ctn:before { background: url('../../img/color/product/img-treatment_re.png') no-repeat 50% 100% / auto 85%;}
#product-ctn .bloc .ctn .name { margin-bottom: 30px;}
#product-ctn .bloc#item-5 .name,
#product-ctn .bloc#item-6 .name { margin-bottom: 80px; padding-top: 60px;}
#product-ctn .bloc .ctn .name h3 img { width: 100%; max-width: 410px;}
#product-ctn .bloc .ctn .name h3 img.sp { display: none;}
#product-ctn .bloc .ctn p.txt { margin-bottom: 40px; color: #353535; font-size: 20px;}
#product-ctn .bloc .ctn p.txt sub { font-size: 10px;}
#product-ctn .bloc .ctn .aroma { margin-bottom: 20px;}
#product-ctn .bloc .ctn .aroma img { width: 100%; max-width: 460px;}
#product-ctn .bloc .ctn p.price { margin-bottom: 20px; color: #582e87; font-size: 22px; letter-spacing: 0.04rem;}
#product-ctn .bloc .ctn .btn-cart { width: 100%; max-width: 480px;}
#product-ctn .bloc .ctn .btn-cart span,
#product-ctn .bloc .ctn .btn-cart a { display: block; position: relative; width: 100%; padding: 30px 0; border-radius: 50px; line-height: 1; text-align: center;}
#product-ctn .bloc .ctn .btn-cart form { display: block; position: relative; width: 100%; border-radius: 50px; line-height: 1; text-align: center; background: linear-gradient(130deg,#c58ff4,#b589e6);}
#product-ctn .bloc .ctn .btn-cart form:after { content: ''; display: block; width: 8px; height: 8px; 
 border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 40px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#product-ctn .bloc .ctn .btn-cart span { background: linear-gradient(60deg,#e4e1e5,#fff,#e4e1e5);}
#product-ctn .bloc .ctn .btn-cart a { background: #c58ff4;}
#product-ctn .bloc .ctn .btn-cart form {border-radius: 50px; overflow: hidden;}
#product-ctn .bloc .ctn .btn-cart span svg,
#product-ctn .bloc .ctn .btn-cart a svg { display: inline-block; width: 35px; margin-right: 20px; vertical-align: middle;}
#product-ctn .bloc .ctn .btn-cart span svg { fill: #353553;}
#product-ctn .bloc .ctn .btn-cart a svg { color: #fff;}
#product-ctn .bloc .ctn .btn-cart span em,
#product-ctn .bloc .ctn .btn-cart a em { display: inline-block; font-size: 28px; vertical-align: middle;}
#product-ctn .bloc .ctn .btn-cart span em { color: #353535;}
#product-ctn .bloc .ctn .btn-cart a em { color: #fff;}
#product-ctn .bloc .ctn .btn-cart form svg { display: block; width: 26px; fill: #fff;
 position: absolute; left: 50%; top: 50%; transform: translate(-100px,-50%); z-index: 2;
}
#product-ctn .bloc .ctn .btn-cart form input[type="submit"] { position: relative; display: block; width: 100%; padding: 20px 0;
 background: rgba(255,255,255,0); border: none;
 color: #fff; font-size: 18px; font-weight: 700;
}
#product-ctn .bloc .ctn .btn-cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}
#product-ctn .bloc .note { padding-bottom: 30px;}
#product-ctn .bloc .note ul { width: 90%; max-width: 560px; margin: 0 auto; text-align: center;}
#product-ctn .bloc .note ul li { color: #767676; font-size: 10px; }
@media (max-width: 1001px) {
	#product-ctn .bloc .inner { padding-left: 40px;}
	#product-ctn .bloc .icn { top: 40px; width: 100px;}
	#product-ctn .bloc#item-5 .ctn,
	#product-ctn .bloc#item-6 .ctn { padding-bottom: 100px;}
	#product-ctn .bloc .ctn p.txt { margin-bottom: 20px; font-size: 2.4vw;}
	#product-ctn .bloc .ctn p.price { font-size: 2.2vw;}
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#product-ctn .bloc { background: none;}
	#product-ctn .bloc#item-1 { background: #d8c0eb;}
	#product-ctn .bloc#item-2 { background: #dcbee3;}
	#product-ctn .bloc#item-3 { background: #c8bfed;}
	#product-ctn .bloc#item-4 { background: #c8bfed;}
	#product-ctn .bloc#item-5 { background: #d8c0eb;}
	#product-ctn .bloc#item-6 { background: #dcbee3;}
	#product-ctn .bloc:before { content: none;}
	#product-ctn .bloc .inner { width: 100%; padding-left: 0px;	background: url('../../img/color/product/bg.jpg') no-repeat 50% 0 / auto 55%;}
	#product-ctn .bloc#item-5 .inner { background-size: auto 65%;}
	#product-ctn .bloc#item-6 .inner { background-size: auto 65%;}
	#product-ctn .bloc .inner:before { content: ''; display: block; width: 100%; height: 0; position: absolute; left: 0;}
	#product-ctn .bloc#item-1 .inner:before { padding-top: 50%; top: 42%; background: url('../../img/color/product/bg-1-sp.png') no-repeat 50% 50% / 100% auto;}
	#product-ctn .bloc#item-2 .inner:before { padding-top: 50%; top: 42%; background: url('../../img/color/product/bg-2-sp.png') no-repeat 50% 50% / 100% auto;}
	#product-ctn .bloc#item-3 .inner:before { padding-top: 50%; top: 42%; background: url('../../img/color/product/bg-3-sp.png') no-repeat 50% 50% / 100% auto;}
	#product-ctn .bloc#item-4 .inner:before { padding-top: 50%; top: 42%; background: url('../../img/color/product/bg-3-sp.png') no-repeat 50% 50% / 100% auto;}
	#product-ctn .bloc#item-5 .inner:before { padding-top: 55%; top: 50%; background: url('../../img/color/product/bg-5-sp.png') no-repeat 50% 50% / 100% auto;}
	#product-ctn .bloc#item-6 .inner:before { padding-top: 55%; top: 50.5%; background: url('../../img/color/product/bg-6-sp.png') no-repeat 50% 50% / 100% auto;}
	#product-ctn .bloc .icn { left: 40px;}
	#product-ctn .bloc .ctn { padding: 40px 0px 0;}
	#product-ctn .bloc#item-5 .ctn,
	#product-ctn .bloc#item-6 .ctn { padding-bottom: 0px;}
	#product-ctn .bloc .ctn:before { width: 100%; height: 0; padding-top: 85%; position: relative; left: auto; top: auto;}
	#product-ctn .bloc#item-1 .ctn:before { background-size: auto 100%;}
	#product-ctn .bloc#item-2 .ctn:before { background-size: auto 100%;}
	#product-ctn .bloc#item-3 .ctn:before { background-size: auto 100%;}
	#product-ctn .bloc#item-4 .ctn:before { background-size: auto 100%;}
	#product-ctn .bloc#item-5 .ctn:before { background-position: 50% 50%; background-size: auto 85%;}
	#product-ctn .bloc#item-6 .ctn:before { background-position: 50% 50%; background-size: auto 85%;}

	#product-ctn .bloc .ctn .ctn-inner { padding-bottom: 60px;}
	#product-ctn .bloc#item-6 .ctn .ctn-inner { padding-bottom: 40px;}
	#product-ctn .bloc .ctn .name { margin: 0 auto 6vw;}
	#product-ctn .bloc#item-5 .name,
	#product-ctn .bloc#item-6 .name { margin-bottom: 10vw; padding-top: 0px;}
	#product-ctn .bloc .ctn .name h3 img.pc { display: none;}
	#product-ctn .bloc .ctn .name h3 img.sp { display: block; width: 65%; margin: 0 auto;}
	#product-ctn .bloc .ctn p.txt { font-size: 3.2vw; line-height: 1.4; text-align: center;}
	#product-ctn .bloc .ctn .aroma { text-align: center;}
	#product-ctn .bloc .ctn .aroma img { width: 72%;}
	#product-ctn .bloc .ctn p.price { color: #fff; font-size: 3.0vw; text-align: center;}
	#product-ctn .bloc#item-5 .ctn p.price,
	#product-ctn .bloc#item-6 .ctn p.price { margin-bottom: 30px;}
	#product-ctn .bloc .ctn .btn-cart { width: 80%; margin: 0 auto;}

	#product-ctn .bloc .note ul { text-align: left;}
	#product-ctn .bloc .note ul li { color: #fff;}
}
@media (max-width: 481px) {
	#product-ctn .bloc .icn { width: 80px; left: 30px; top: 30px;}
	#product-ctn .bloc#item-1 .inner:before { top: 42%;}
	#product-ctn .bloc#item-2 .inner:before { top: 42%;}
	#product-ctn .bloc#item-3 .inner:before { top: 42%;}
	#product-ctn .bloc#item-4 .inner:before { top: 42%;}
	#product-ctn .bloc#item-5 .inner:before { top: 48.5%;}
	#product-ctn .bloc#item-6 .inner:before { top: 52.5%;}
	#product-ctn .bloc#item-6 .ctn .ctn-inner { padding-bottom: 20px;}
	#product-ctn .bloc .ctn .name { margin: 0 auto 4vw;}
	#product-ctn .bloc .ctn p.txt { margin-bottom: 12px; font-size: 16px;}
	#product-ctn .bloc .ctn p.price { margin-bottom: 12px; font-size: 15px;}
	#product-ctn .bloc .ctn .aroma { margin-bottom: 10px;}
	#product-ctn .bloc .ctn .btn-cart span,
	#product-ctn .bloc .ctn .btn-cart a { padding: 14px 0;}
	#product-ctn .bloc .ctn .btn-cart span svg,
	#product-ctn .bloc .ctn .btn-cart a svg { width: 20px; margin-right: 10px;}
	#product-ctn .bloc .ctn .btn-cart span em,
	#product-ctn .bloc .ctn .btn-cart a em { font-size: 14px;}
	#product-ctn .bloc .ctn .btn-cart form:after { right: 30px;}
	#product-ctn .bloc .ctn .btn-cart form svg { transform: translate(-85px,-50%);}
	#product-ctn .bloc .ctn .btn-cart form input[type="submit"] { padding: 16px 0; font-size: 14px;}
	#product-ctn .bloc .note { padding-bottom: 20px;}
}