@charset "utf-8";

body { color: #673b1c;}
#hd .menu { background: #fff;}
.menu-trig div span { background: #42220f;}
.menu-cart a svg { fill: #42220f;}

#kv {}
#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; height: 540px; margin: 0 auto; background: url('./img/product/kv.jpg') no-repeat 50% 50%;}
#kv .ctn { width: 100%; max-width: 1024px; margin: 0 auto; padding-top: 200px;}
#kv .ctn h1 { width: 50%; max-width: 500px; text-align: center;}
#kv .ctn h1 img { width: 85%; max-width: 430px;}
#kv .ctn h1 span { display: block; margin-top: 12px; color: #621a14; font-size: 30px;}
#kv .bg { display: none; position: relative; z-index: 1;}
#kv .bg img { width: 100%;}
@media (max-width: 1281px) {
}
@media (max-width: 801px) {
	#kv .inner-kv { height: auto;}
	#kv .ctn { position: absolute; left: 0; top: 0; width: 100%; padding-top: 12vw; z-index: 2;}
	#kv .ctn h1 {width: 100%; max-width: 100%;}
	#kv .ctn h1 img { width: 65%;}
	#kv .ctn h1 span { font-size: 3.0vw;}
	#kv .bg { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#kv .ctn h1 span { margin-top: 6px; font-size: 20px;}
}


.wrap {}
.wrap .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
.wrap .inner-sct:before { content: ''; display: block; width: 100%; height: 128px; background: url('/img/milky/bg-ttl.png') no-repeat 50% 100%;
 position: absolute; left: 0; top: 0; z-index: 10;
}
@media (max-width: 641px) {
	.wrap .inner-sct:before { height: 0px; padding-top: 16%; background: url('/img/milky/bg-ttl-sp.png') no-repeat 50% 100% / 100% auto;}
}

.bloc { position: relative;}
.bloc#shampoo { margin-bottom: -100px; background: url('./img/product/bg/shampoo.png') no-repeat 50% 100%; z-index: 7;}
.bloc#hairpack { margin-bottom: -100px; background: url('./img/product/bg/hairpack.png') no-repeat 50% 100%; z-index: 6;}
.bloc#treatment{ margin-bottom: -100px; background: url('./img/product/bg/treatment.png') no-repeat 50% 100%; z-index: 5;}
.bloc#hairmilk { margin-bottom: -100px; background: url('./img/product/bg/hairmilk.png') no-repeat 50% 100%; z-index: 4;}
.bloc#hairoil { margin-bottom: -100px; background: url('./img/product/bg/hairoil.png') no-repeat 50% 100%; z-index: 3;}
.bloc#shampoo-re { margin-bottom: -100px; background: url('./img/product/bg/shampoo_re.png') no-repeat 50% 100%; z-index: 2;}
.bloc#treatment-re { background: url('./img/product/bg/treatment_re.png') no-repeat 50% 100%; z-index: 1;}
.bloc .bg { display: none;}
.bloc .bg img { width: 100%;}
.bloc .inner-bloc { position: relative; width: 100%; max-width: 1000px; height: 800px; margin: 0 auto; padding-top: 120px;}
.bloc .inner-bloc.pt { height: 900px; padding-top: 190px;}
.bloc .badge { position: absolute; left: -60px; top: 140px; width: 180px; }
.bloc .badge img { width: 100%;}
.bloc .badge img.sp { display: none;}
.bloc .ctn-flex { display: flex; justify-content: space-between; width: 94%;}
.bloc .img { width: 42%;}
.bloc .txt { width: 55%;}
.bloc .txt.pt { padding-top: 130px;}
.bloc .img figure { text-align: right;}
.bloc .img figure img { width: 75%; max-width: 320px;}
.bloc .txt h3 { margin-bottom: 30px;}
.bloc .txt h3.mb { margin-bottom: 120px;}
.bloc .txt h3 img { width: 80%; max-width: 440px;}
.bloc .txt h3 img.sp { display: none;}
.bloc .txt p.lead { margin-bottom: 40px; color: #353535; font-size: 20px; font-weight: 700;}
.bloc .txt p.lead sub { font-size: 10px; vertical-align: bottom;}
.bloc .txt .aroma { margin-bottom: 10px;}
.bloc .txt .aroma img { width: 100%;}
.bloc .txt .aroma img.sp { display: none;}
.bloc .txt p.price { color: #e34f00; font-size: 22px; font-weight: 700;}
.bloc .txt .cart { }
.bloc .txt .cart a { position: relative; display: block; padding: 25px 0; background: #ed6922; border-radius: 50px; color: #fff; text-align: center;}
.bloc .txt .cart a:after { content: ''; display: block; width: 8px; height: 8px; border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; right: 24px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
.bloc .txt .cart a svg { display: inline-block; width: 25px; margin-right: 15px; fill: #fff; vertical-align: middle;}
.bloc .txt .cart a em { display: inline-block; font-size: 18px; font-weight: 700; font-style: normal; letter-spacing: 0.05rem; vertical-align: middle;}
.bloc .txt .cart a:hover { opacity: 0.8;}
.bloc .txt .cart span { position: relative; display: block; padding: 25px 0; background: linear-gradient(60deg,#e4e1e5,#fff,#e4e1e5); border-radius: 50px; color: #353535; text-align: center;}
.bloc .txt .cart span:after { content: ''; display: block; width: 8px; height: 8px; border-top: solid 3px #353535; border-right: solid 3px #353535;
 position: absolute; right: 24px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
.bloc .txt .cart span svg { display: inline-block; width: 25px; margin-right: 15px; fill: #353535; vertical-align: middle;}
.bloc .txt .cart span em { display: inline-block; font-size: 18px; font-weight: 700; font-style: normal; letter-spacing: 0.05rem; vertical-align: middle;}
@media (max-width: 1281px) {
}
@media (max-width: 1001px) {
	.bloc#shampoo,
	.bloc#hairpack,
	.bloc#treatment,
	.bloc#hairmilk,
	.bloc#hairoil,
	.bloc#shampoo-re,
	.bloc#treatment-re { background-size: auto 100%;}
	.bloc .inner-bloc { height: 86vw; padding-top: 18vw;}
	.bloc .badge { left: 0px; top: 140px; width: 160px;}
	.bloc .txt p.lead { margin-bottom: 3.5vw; font-size: 2.1vw;}
	.bloc .txt p.price { font-size: 2.3vw;}
}
@media (max-width: 801px) {
	.bloc#shampoo,
	.bloc#hairpack,
	.bloc#treatment,
	.bloc#hairmilk,
	.bloc#hairoil,
	.bloc#shampoo-re,
	.bloc#treatment-re { background: none;}
	.bloc .bg { position: relative; display: block; z-index: 1;}
	.bloc .inner-bloc { position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: auto; padding-top: 12vw;}
	.bloc .inner-bloc.pt { height: auto; padding-top: 20vw;}
	.bloc .badge { left: 4%; top: 140px; width: 24vw; max-width: 180px;}
	.bloc .badge img.pc { display: none;}
	.bloc .badge img.sp { display: block;}
	.bloc .ctn-flex { display: block; width: 94%; margin: 0 auto;}
	.bloc .img { width: 100%; margin-bottom: 2vw;}
	.bloc .txt { width: 100%;}
	.bloc .txt.pt { padding-top: 6vw;}

	.bloc .img figure { text-align: center;}
	.bloc .img figure img { width: 42%;}
	.bloc .txt h3 { margin-bottom: 4.0vw; text-align: center;}
	.bloc .txt h3.mb { margin-bottom: 6.0vw;}
	.bloc .txt h3 img.pc { display: none;}
	.bloc .txt h3 img.sp { display: block; margin: 0 auto;}
	.bloc .txt p.lead { margin-bottom: 40px; font-size: 3.6vw; text-align: center;}
	.bloc .txt .aroma { text-align: center;}
	.bloc .txt .aroma img { width: 80%;}
	.bloc .txt .aroma img.pc { display: none;}
	.bloc .txt .aroma img.sp { display: block; margin: 0 auto;}
	.bloc .txt p.price { margin-bottom: 6.0vw; font-size: 4.0vw; text-align: center;}
	.bloc .txt .cart a { width: 80%; margin: 0 auto;}
}
@media (max-width: 641px) {
	.bloc#shampoo { margin-bottom: -60px;}
	.bloc#hairpack { margin-bottom: -60px;}
	.bloc#treatment{ margin-bottom: -60px;}
	.bloc#hairmilk { margin-bottom: -60px;}
	.bloc#hairoil { margin-bottom: -60px;}
	.bloc#shampoo-re { margin-bottom: -60px;}
	.bloc .inner-bloc.pt { padding-top: 21vw;}
	.bloc .badge { left: -10px; top: 60px; width: 30vw;}
	.bloc .img { margin-bottom: 0vw;}
	.bloc .txt.pt { padding-top: 8vw;}
	.bloc .txt h3 { margin-bottom: 2.0vw;}
	.bloc .txt h3.mb { margin-bottom: 4.0vw;}
	.bloc .txt h3 img { width: 68%;}
	.bloc .txt p.lead { margin-bottom: 16px;}
	.bloc .txt p.price { margin-bottom: 4.0vw; font-size: 15px;}

	.bloc .txt .cart span,
	.bloc .txt .cart a { padding: 12px 0;}
	.bloc .txt .cart a:after { border-top: solid 2px #fff; border-right: solid 2px #fff; right: 18px;}
	.bloc .txt .cart span:after { border-top: solid 2px #353535; border-right: solid 2px #353535; right: 18px;}
	.bloc .txt .cart span svg,
	.bloc .txt .cart a svg { width: 20px; margin-right: 10px;}
	.bloc .txt .cart span em,
	.bloc .txt .cart a em { font-size: 15px;}
}
@media (max-width: 481px) {
	.bloc .inner-bloc { padding-top: 16vw;}
	.bloc .inner-bloc.pt { padding-top: 21vw;}
	.bloc .txt.pt { padding-top: 5vw;}
	.bloc .txt h3 { margin-bottom: 3.0vw;}
	.bloc .txt p.lead { margin-bottom: 12px; font-size: 15px;}
}


.wrap .note { padding: 10px;}
.wrap .note ul { width: 100%; max-width: 680px; margin: 0 40px 0 auto;}
.wrap .note ul li { color: #9c7753; font-size: 10px;}
@media (max-width: 801px) {
	.wrap .note ul { max-width: 100%; margin: 0 auto;}
}