@charset "utf-8";
body { color: #882f08;}
#hd .menu { background: #fffabf;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #fffabf;}
.menu-trig div span { background: #42220f;}
.menu-cart a svg { fill: #42220f;}


#kv {}
#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('../../img/pixie/bg-kv-product.jpg') no-repeat 50% 50% / cover;}
#kv .ctn { width: 45%; margin: 0 0 0 auto; padding: 200px 0;}
#kv h1 { text-align: center;}
#kv h1 img { position: relative; width: 80%; max-width: 500px;}

#kv .bg-kv { position: relative; display: none; z-index: 1;}
#kv .bg-kv img { width: 100%; }

@media (max-width: 1281px) {
	#kv .ctn { padding: 16vw 0;}
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#kv .ctn { display: none;}
	#kv .bg-kv { display: block;}
}
@media (max-width: 481px) {
}



#products .bloc {}
#products .bloc#shampoo1 { background: url('../../img/pixie/product/bg/shampoo.jpg') no-repeat 50% 0;}
#products .bloc#hairpack { background: url('../../img/pixie/product/bg/hairpack.jpg') no-repeat 50% 0;}
#products .bloc#treatment1{ background: url('../../img/pixie/product/bg/treatment.jpg') no-repeat 50% 0;}
#products .bloc#hairoil { background: url('../../img/pixie/product/bg/hairoil.jpg') no-repeat 50% 0;}
#products .bloc#shampoo2 { background: url('../../img/pixie/product/bg/shampoo_re.jpg') no-repeat 50% 0;}
#products .bloc#treatment2 { background: url('../../img/pixie/product/bg/treatment_re.jpg') no-repeat 50% 0;}
#products .bloc .inner-bloc { width: 100%; max-width: 1280px; margin: 0 auto; padding: 130px 20px 60px; padding-left: 80px;}
#products .bloc .ctn { position: relative; display: flex; align-items: flex-start;}
#products .bloc .ctn .icn { position: absolute; left: 0%; top: 0;}
#products .bloc .ctn .icn img { width: 132px;}

#products .bloc .pht { width: 38%;}
#products .bloc .txt { width: 62%; padding-top: 70px;}

#products .bloc .pht figure { position: relative; padding-top: 520px;}
#products .bloc .pht figure img { width: 64%; max-width: 300px; position: absolute; left: 28%; top: 50%; transform: translate(0,-50%);}

#products .bloc .txt h2 { margin-bottom: 55px;}
#products .bloc .txt h2 img { width: 95%; max-width: 580px;}
#products .bloc .txt h2 img.sp { display: none;}
#products .bloc .txt .descript { height: 45px; margin-bottom: 50px; padding-left: 10px;}
#products .bloc .txt .descript p { color: #353535; font-size: 20px; font-weight: 700; line-height: 1.2;}
#products .bloc .txt .descript p sub { font-size: 12px; vertical-align: baseline;}
#products .bloc .txt .descript p br { display: none;}
#products .bloc .txt .aroma { width: 100%; max-width: 480px; margin: 0 0 20px; text-align: center;}
#products .bloc .txt .aroma img { width: 70%; max-width: 350px;}
#products .bloc .txt p.price { margin-bottom: 30px; color: #882f08; font-size: 24px; font-weight: 700; letter-spacing: 0.05rem;}
#products .bloc .txt .cart { width: 80%; max-width: 480px; text-align: center;}
#products .bloc .txt .cart span.soon { display: block; width: 100%; padding: 20px 0;
 background: linear-gradient(155deg,#e5d144 20%,#e8d767,#e5d144 80%); border-radius: 50px;
 color: #882f08; font-size: 18px; font-weight: 700; text-align: center;
}
#products .bloc .txt .cart a { position: relative; display: block; width: 100%; padding: 20px 0;
 background: linear-gradient(155deg,#e5d144 20%,#e8d767,#e5d144 80%); border-radius: 50px;
 color: #882f08; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
#products .bloc .txt .cart a:after { content: ''; display: block; width: 8px; height: 8px;
 border-top: solid 2px #882f08; border-right: solid 2px #882f08; position: absolute; right: 40px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#products .bloc .txt .cart a svg { display: inline-block; width: 27px; margin-right: 15px; fill: #882f08; vertical-align: middle;}
#products .bloc .txt .cart a span{ display: inline-block; vertical-align: middle;}
#products .bloc .txt .cart a:hover { background: #fff; }
#products .bloc .txt .cart form { position: relative; display: block; width: 100%;
 background: linear-gradient(155deg,#e5d144 20%,#e8d767,#e5d144 80%); border-radius: 50px;
}
#products .bloc .txt .cart form:after { content: ''; display: block; width: 8px; height: 8px;
 border-top: solid 2px #882f08; border-right: solid 2px #882f08; position: absolute; right: 40px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#products .bloc .txt .cart form svg { display: block; width: 27px; fill: #882f08;
 position: absolute; left: 50%; top: 50%; transform: translateY(-50%); margin-left: -7em;
}
#products .bloc .txt .cart form input[type="submit"] { display: block; width: 100%; padding: 20px 0;
	border: none; background: rgba(255,255,255,0);
 color: #882f08; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
#products .bloc .txt .cart form:hover input[type="submit"] { background: rgba(255,255,255,0.2);}

#products .bloc .note { width: 92%; max-width: 1000px; margin: 0 auto;}
#products .bloc .note ul { text-align: right;}
#products .bloc .note ul li { color: #996044; font-size: 10px;}
#products .bloc .note ul li span { display: inline-block; margin-right: 15px;}
@media (max-width: 1001px) {
	#products .bloc .inner-bloc { padding-left: 40px;}
	#products .ctn .icn img { width: 100px;}
	#products .bloc .txt p.price { font-size: 2.4vw;}
}
@media (max-width: 801px) {
	#products .bloc .txt .descript p { font-size: 2.2vw;}
	#products .bloc#shampoo1 { background: url('../../img/pixie/product/bg/shampoo@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#products .bloc#hairpack { background: url('../../img/pixie/product/bg/hairpack@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#products .bloc#treatment1{ background: url('../../img/pixie/product/bg/treatment@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#products .bloc#hairoil { background: url('../../img/pixie/product/bg/hairoil@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#products .bloc#shampoo2 { background: url('../../img/pixie/product/bg/shampoo@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#products .bloc#treatment2 { background: url('../../img/pixie/product/bg/treatment@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#products .bloc .inner-bloc { padding: 0px 0 10vw;}
	#products .bloc .ctn { display: block;}
	#products .bloc .ctn .icn { left: 6%; top: 18vw;}
	#products .bloc .ctn .icn img { width: 120px;}
	#products .bloc .pht { width: 100%;}
	#products .bloc .txt { width: 100%; padding-top: 0px;}
	#products .bloc .pht figure { position: relative; padding-top: 95%;}
	#products .bloc .pht figure img { width: 64%; max-width: 280px; position: absolute; left: 50%; top: auto; bottom: 5%; transform: translate(-50%,0%);}
	#products .bloc .txt h2 { margin-bottom: 4.0vw; text-align: center;}
	#products .bloc .txt h2 img.pc { display: none;}
	#products .bloc .txt h2 img.sp { display: block; width: 72%; margin: 0 auto;;}
	#products .bloc .txt .descript { height: auto; margin-bottom: 6.0vw; padding-left: 0px;}
	#products .bloc .txt .descript p { font-size: 3.2vw; line-height: 1.6; text-align: center;}
	#products .bloc .txt .descript p br { display: block;}
	#products .bloc .txt .aroma { margin: 0 auto 2.0vw;}
	#products .bloc .txt .aroma img { width: 55%;}
	#products .bloc .txt p.price { font-size: 3.6vw; text-align: center;}
	#products .bloc .txt .cart { margin: 0 auto;}
	#products .bloc .note { padding-top: 30px;}
	#products .bloc .note ul { text-align: left;}
}
@media (max-width: 641px) {
	#products .ctn .icn { left: 4%; top: 18vw;}

	#products .bloc .pht figure img { width: 42%; max-width: 280px; top: auto; bottom: 0%;}
	#products .bloc .pht figure.mid img { bottom: 5%;}
}
@media (max-width: 481px) {
	#products .bloc .ctn .icn img { width: 80px;}
	#products .bloc .txt h2 { margin-bottom: 3.0vw;}
	#products .bloc .txt h2.mb { margin-bottom: 4.0vw;}
	#products .bloc .txt .descript { margin-bottom: 3.0vw;}
	#products .bloc .txt .descript p { font-size: 3.6vw;}
	#products .bloc .txt .descript p sub { font-size: 10px;}
	#products .bloc .txt p.price { margin-bottom: 4vw; font-size: 3.6vw;}
	#products .bloc .txt .cart span.soon { padding: 15px 0; font-size: 14px;}
	#products .bloc .txt .cart a { padding: 15px 0; font-size: 14px;}
	#products .bloc .txt .cart form svg { margin-left: -6em;}
	#products .bloc .txt .cart form input[type="submit"] { padding: 12px 0; font-size: 14px;}
	#products .bloc .note ul li span { display: block; margin-right: 0px;}
}



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