@charset "utf-8";
.note { width: 100%;}
.note div { width: 92%; margin: 0 auto; padding-bottom: 20px;}
.note ul { margin: 0 0 0 auto;}
.note ul li { color: #8c4811; font-size: 10px; }

@media (max-width: 481px) {
	.note div { padding-bottom: 10px;}
	.note ul li { line-height: 1.2;}
}

#kv.bg-deep-top { background: url('../img/deep/bg-top.jpg') no-repeat 50% 0;}
#kv.bg-melty-top{ background: url('../img/melty/bg-top.jpg') no-repeat 50% 0;}
#kv.bg-sabon-top{ background: url('../img/sabon/bg-top.jpg') no-repeat 50% 0;}
#kv.bg-pure-top{ background: url('../img/pure/bg-top.jpg') no-repeat 50% 0;}
#kv.bg-mellow-top{ background: url('../img/mellow/bg-top.jpg') no-repeat 50% 0;}
#kv .inner-kv { position: relative; padding: 60px 0 150px;}
#kv h1 { margin-bottom: 30px; text-align: center;}
#kv h1 img { width: 25%; max-width: 160px;}
#kv h2 { text-align: center;}
#kv h2 img { width: 88%; max-width: 580px;}
#kv .ctn { width: 88%; max-width: 580px; margin: 0 auto; padding-top: 140px;}
#kv.bg-pure-top .ctn { padding-top: 80px;}
#kv.bg-mellow-top .ctn { padding-top: 80px;}
#kv .ctn figure { text-align: center;}
#kv .ctn figure img { width: 94%;}
#kv .ctn figure.main { margin-bottom: 20px;}
#kv .ctn figure.main img { width: 88%;}
#kv .ctn figure.main img.sp { display: none;}
#kv .ctn figure.main figcaption { color: #8c4811; font-size: 25px; font-weight: 700; line-height: 1.4; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff;}
#kv .ctn p { margin-bottom: 60px; color: #8c4811; font-size: 20px; font-weight: 700; text-align: center;}
#kv .ctn p span { display: block;}
#kv .ctn p sub { font-size: 12px; vertical-align: baseline;}
#kv .note { position: absolute; left: 0; bottom: 0; }
#kv .note ul.w230 { max-width: 230px;}
#kv .note ul.w280 { max-width: 280px;}
@media (max-width: 801px) {
	#kv .ctn p { margin-bottom: 40px;}
}
@media (max-width: 641px) {
	#kv.bg-deep-top { background: url('../img/deep/bg-top@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#kv.bg-melty-top{ background: url('../img/melty/bg-top@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#kv.bg-sabon-top{ background: url('../img/sabon/bg-top@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#kv.bg-pure-top{ background: url('../img/pure/bg-top@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#kv.bg-mellow-top{ background: url('../img/mellow/bg-top@sp.jpg') no-repeat 50% 0 / 100% auto;}
	#kv .inner-kv { padding: 30px 0 80px;}
	#kv h1 { margin-bottom: 12px;}
	#kv .ctn { padding-top: 14vw;}
	#kv.bg-pure-top .ctn { padding-top: 4vw;}
	#kv.bg-mellow-top .ctn { padding-top: 4vw;}
	#kv .ctn figure.main img.pc { display: none;}
	#kv .ctn figure.main img.sp { display: block; margin: 0 auto;}
	#kv .ctn figure.main figcaption { padding-top: 8px;}
}
@media (max-width: 481px) {
	#kv .inner-kv { padding: 8px 0 90px;}
	#kv .ctn figure.main { margin-bottom: 12px;}
	#kv .ctn figure.main figcaption { font-size: 18px;}
	#kv .ctn p { margin-bottom: 20px; font-size: 14px;}
}


.image#deep-image { background: url('../img/deep/image.jpg') no-repeat 50% 100%;}
.image#melty-image { background: url('../img/melty/image.jpg') no-repeat 50% 100%;}
.image#sabon-image { background: url('../img/sabon/image.jpg') no-repeat 50% 100%;}
.image#pure-image { background: url('../img/pure/image.jpg') no-repeat 50% 100%;}
.image#mellow-image { background: url('../img/mellow/image.jpg') no-repeat 50% 100%;}
.image .ttl {}
.image#deep-image .ttl { padding: 70px 0 90px; background: url('../img/deep/bg-ttl-1.png') no-repeat 50% 100%;}
.image#melty-image .ttl{ padding: 70px 0 90px; background: url('../img/melty/bg-ttl-1.png') no-repeat 50% 100%;}
.image#sabon-image .ttl{ padding: 40px 0 60px; background: url('../img/sabon/bg-ttl-1.png') no-repeat 50% 100%;}
.image#pure-image .ttl{ padding: 50px 0px; background: url('../img/pure/bg-ttl-1.png') no-repeat 50% 100%;}
.image#mellow-image .ttl{ padding: 50px 0px; background: url('../img/mellow/bg-ttl-1.png') no-repeat 50% 100%;}
.image .ttl h2 { text-align: center;}
.image .ttl h2 img { width: 72%; max-width: 440px;}
.image .spacer { width: 100%; height: 620px;}
@media (max-width: 641px) {
	.image#deep-image { background: url('../img/deep/image@sp.jpg') no-repeat 50% 100% / 100% auto;}
	.image#melty-image{ background: url('../img/melty/image@sp.jpg') no-repeat 50% 100% / 100% auto;}
	.image#sabon-image{ background: url('../img/sabon/image@sp.jpg') no-repeat 50% 100% / 100% auto;}
	.image#pure-image{ background: url('../img/pure/image@sp.jpg') no-repeat 50% 100% / 100% auto;}
	.image#mellow-image{ background: url('../img/mellow/image@sp.jpg') no-repeat 50% 100% / 100% auto;}
	.image#deep-image .ttl { padding: 12vw 0; background: url('../img/deep/bg-ttl-1@sp.png') no-repeat 50% 100% / 100% auto;}
	.image#melty-image .ttl{ padding: 12vw 0; background: url('../img/melty/bg-ttl-1@sp.png') no-repeat 50% 100% / 100% auto;}
	.image#sabon-image .ttl{ padding: 6vw 0; background: url('../img/sabon/bg-ttl-1@sp.png') no-repeat 50% 100% / 100% auto;}
	.image#pure-image .ttl{ padding: 6vw 0; background: url('../img/pure/bg-ttl-1@sp.png') no-repeat 50% 100% / 100% auto;}
	.image#mellow-image .ttl{ padding: 6vw 0; background: url('../img/mellow/bg-ttl-1@sp.png') no-repeat 50% 100% / 100% auto;}
	.image .spacer { height: 0; padding-top: 88%;}
}
@media (max-width: 481px) {
}

.bg-deep { background: url('../img/deep/bg.jpg');}
.bg-melty{ background: url('../img/melty/bg.jpg');}
.bg-sabon{ background: url('../img/sabon/bg.jpg');}
.bg-pure { background: url('../img/pure/bg.jpg');}
.bg-mellow{ background: url('../img/mellow/bg.jpg');}


#guide .inner-sct { position: relative; padding: 60px 0;}

#guide p { margin-bottom: 30px; color: #8c4811; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem; text-align: center;}
#guide p sub { font-size: 12px; vertical-align: baseline;}
#guide p span.marker1 { display: inline-block; padding: 0 5px; background: linear-gradient(transparent 60%,#ffe565 60%);}
#guide p span.marker2 { display: inline-block; padding: 0 5px; background: linear-gradient(transparent 60%,#ffc9d4 60%);}
#guide p span.marker3 { display: inline-block; padding: 0 5px; background: linear-gradient(transparent 60%,#acdfee 60%);}
#guide figure { text-align: center;}
#guide figure img { width: 90%; max-width: 580px;}
#guide .note { position: absolute; left: 0; bottom: 0;}
#guide .note ul { max-width: 210px;}
@media (max-width: 801px) {
	#guide figure { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#guide .inner-sct { padding: 20px 0 30px;}
	#guide p { margin-bottom: 12px; font-size: 15px; letter-spacing: -0.05rem;}
}

#product {}
#product .ttl { padding: 80px 0 100px;}
#product .ttl.ttl-deep { background: url('../img/deep/bg-ttl.png') no-repeat 50% 100%;}
#product .ttl.ttl-melty{ background: url('../img/melty/bg-ttl.png') no-repeat 50% 100%;}
#product .ttl.ttl-sabon{ background: url('../img/sabon/bg-ttl.png') no-repeat 50% 100%;}
#product .ttl.ttl-pure { background: url('../img/pure/bg-ttl.png') no-repeat 50% 100%;}
#product .ttl.ttl-mellow{ background: url('../img/mellow/bg-ttl.png') no-repeat 50% 100%;}

#product .ttl h2 { text-align: center;}
#product .ttl h2 img { width: 50%; max-width: 280px;}
#product .inner-sct { width: 90%; margin: 0 auto; padding: 30px 0;}
#product .bloc { width: 100%; max-width: 640px; margin: 0 auto; padding: 40px 0;}
#product .bloc.wide { max-width: 840px;}
#product .bloc .ctn-flex { position: relative; display: flex; align-items: center; justify-content: space-between;}
#product .bloc .ctn-flex.p-left { flex-direction: row-reverse;}
#product .bloc .item{ width: 30%;}
#product .bloc .txt { width: 65%;}
#product .bloc.wide .item{ width: 50%;}
#product .bloc.wide .txt { width: 48%;}
#product .bloc.mid .item{ width: 42%;}
#product .bloc.mid .txt { width: 56%;}
#product .bloc .item figure img { width: 92%;}
#product .bloc.mid .item figure img { max-width: 200px;}
#product .bloc .txt p.name { margin-bottom: 10px; font-size: 25px; font-weight: 700; line-height: 1.5; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff;}
#product .bloc .txt p.amount { font-size: 24px; font-weight: 700; letter-spacing: 0.1rem; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff;}
#product .bloc .txt p.price { margin-bottom: 20px; font-size: 16px; font-weight: 700;}
#product .bloc .txt p.price span { display: block;}
#product .bloc .txt p.price em { font-size: 24px;}
#product .bloc .txt .btn-cart { width: 100%; max-width: 380px;}
#product .bloc .txt .btn-cart a { position: relative; display: block; padding: 12px 0; border-radius: 50px;
 color: #fff; font-size: 21px; font-weight: 700; text-align: center; text-decoration: none;
}
#product .bloc .txt .btn-cart a.btn-deep { background: linear-gradient(100deg,#f3c900,#ff7f37);}
#product .bloc .txt .btn-cart a.btn-melty{ background: linear-gradient(100deg,#ffb8c2,#ff8899);}
#product .bloc .txt .btn-cart a.btn-sabon{ background: linear-gradient(100deg,#95dcff,#56a5e6);}
#product .bloc .txt .btn-cart a.btn-pure { background: linear-gradient(100deg,#b1e01d,#5cc427);}
#product .bloc .txt .btn-cart a.btn-mellow{ background: linear-gradient(100deg,#b1e01d,#5cc427);}
#product .bloc .txt .btn-cart span { position: relative; display: block; padding: 12px 0; border-radius: 50px; background: #a0a0a0;
 color: #fff; font-size: 21px; font-weight: 700; text-align: center; text-decoration: none;
}
#product .bloc .txt .btn-cart span:before,
#product .bloc .txt .btn-cart a:after { content: ''; display: block; 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);
}
#product .bloc .txt .btn-cart span svg,
#product .bloc .txt .btn-cart a svg { display: inline-block; width: 32px; margin-right: 10px; fill: #fff; vertical-align: middle;}
#product .bloc .txt .btn-cart span em,
#product .bloc .txt .btn-cart a em { display: inline-block; vertical-align: middle;}
#product .bloc .txt .btn-cart a:hover{ opacity: 0.8;}

#product .bloc .txt .btn-cart form { position: relative; display: block;}
#product .bloc .txt .btn-cart form input[type="submit"]{ position: relative; display: block; width: 100%; padding: 12px 0; border-radius: 50px; border: none; z-index: 1;
 color: #fff; font-size: 21px; font-weight: 700; text-align: center; text-indent: 20px;
}
#product .bloc .txt .btn-cart form input[type="submit"].btn-deep { background: linear-gradient(100deg,#f3c900,#ff7f37);}
#product .bloc .txt .btn-cart form input[type="submit"].btn-melty{ background: linear-gradient(100deg,#ffb8c2,#ff8899);}
#product .bloc .txt .btn-cart form input[type="submit"].btn-sabon{ background: linear-gradient(100deg,#95dcff,#56a5e6);}
#product .bloc .txt .btn-cart form input[type="submit"].btn-pure { background: linear-gradient(100deg,#b1e01d,#5cc427);}
#product .bloc .txt .btn-cart form input[type="submit"].btn-mellow{ background: linear-gradient(100deg,#e9c791,#efba78);}
#product .bloc .txt .btn-cart form:after { content: ''; display: block; 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); z-index: 2;
}
#product .bloc .txt .btn-cart form svg { display: block; width: 32px; fill: #fff; position: absolute; left: 20%; top: 50%; transform: translateY(-50%); z-index: 2;}
#product .bloc .txt .btn-cart form input[type="submit"]:hover { opacity: 0.85;}
@media (max-width: 641px) {
	#product .ttl { padding: 9vw 0 12vw;}
	#product .ttl.ttl-deep { background: url('../img/deep/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#product .ttl.ttl-melty{ background: url('../img/melty/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#product .ttl.ttl-sabon{ background: url('../img/sabon/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#product .ttl.ttl-pure { background: url('../img/pure/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#product .ttl.ttl-mellow{ background: url('../img/mellow/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#product .inner-sct { padding: 12px 0;}
	#product .bloc { padding: 30px 0;}
}
@media (max-width: 481px) {
	#product .ttl { padding: 9vw 0 10vw;}
	#product .inner-sct { padding: 6px 0 20px;}
	#product .bloc .ctn-flex { display: block;}
	#product .bloc .item { position: absolute; top: 0; width: 120px;}
	#product .bloc .txt { width: 100%;}
	#product .bloc.wide .item{ width: 200px;}
	#product .bloc.wide .txt { width: 100%;}
	#product .bloc.mid .item{ width: 130px;}
	#product .bloc.mid .txt { width: 100%;}
	#product .bloc .txt .inner {}
	#product .bloc .p-left .txt .inner { min-height: 230px; padding-top: 10px; padding-left: 140px;}
	#product .bloc .p-right .txt .inner{ min-height: 280px; padding-top: 70px; padding-right: 140px;}
	#product .bloc .p-right .txt .inner.pure { min-height: 220px; padding: 12px 0 20px; padding-right: 150px;}
	#product .bloc .p-right .txt .inner.mellow { min-height: 220px; padding: 12px 0 20px; padding-right: 150px;}
	#product .bloc .p-left .txt .inner.mellow2 { min-height: 200px; padding-left: 150px;}
	#product .bloc .p-left .item { left: 0;}
	#product .bloc .p-right .item{ right: 0;}
	#product .bloc .txt p.name { margin-bottom: 6px; font-size: 18px;}
	#product .bloc .txt p.amount { font-size: 20px;}
	#product .bloc .txt p.price { font-size: 13px;}
	#product .bloc .txt p.price em { font-size: 18px;}
	#product .bloc .txt .btn-cart { width: 85%; margin: 0 auto;}
	#product .bloc .txt .btn-cart span,
	#product .bloc .txt .btn-cart a { font-size: 14px;}
	#product .bloc .txt .btn-cart span svg,
	#product .bloc .txt .btn-cart a svg { width: 24px;}
	
	#product .bloc .txt .btn-cart form input[type="submit"] { font-size: 14px;}
	#product .bloc .txt .btn-cart form svg { width: 24px;}
}


#lineup .ttl { padding: 80px 0 100px;}
#lineup .ttl.ttl-deep { background: url('../img/deep/bg-ttl.png') no-repeat 50% 100%;}
#lineup .ttl.ttl-melty{ background: url('../img/melty/bg-ttl.png') no-repeat 50% 100%;}
#lineup .ttl.ttl-sabon{ background: url('../img/sabon/bg-ttl.png') no-repeat 50% 100%;}
#lineup .ttl.ttl-pure { background: url('../img/pure/bg-ttl.png') no-repeat 50% 100%;}
#lineup .ttl.ttl-mellow { background: url('../img/mellow/bg-ttl.png') no-repeat 50% 100%;}

#lineup .ttl h2 { text-align: center;}
#lineup .ttl h2 img { width: 50%; max-width: 280px;}
#lineup .inner-sct { padding: 50px 0 100px;}
#lineup .ctn-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 90%; max-width: 1000px; margin: 0 auto 150px;}
#lineup .box { width: 25%;}
#lineup .box figure { margin-bottom: 20px; text-align: center;}
#lineup .box figure img { width: 80%;}
#lineup .box figure figcaption { margin-top: 15px; font-size: 21px; font-weight: 700; letter-spacing: -0.05rem; line-height: 1.5; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff;}
#lineup .box ul { width: 160px; margin: 0 auto; font-size: 0px;}
#lineup .box ul li { display: inline-block; width: 50%; vertical-align: top;}
#lineup .box ul li a { position: relative; display: block; width: 60px; height: 60px; margin: 0 auto;
 background: #8c4811; border: solid 4px #8c4811; border-radius: 50px;
}
#lineup .box ul li a svg { position: absolute; left: 50%; top: 50%;}
#lineup .box ul li:first-child a svg{ width: 100%; fill: #fff; transform: translate(-50%,-50%);}
#lineup .box ul li:last-child a svg { width: 60%; fill: #fff; transform: translate(-42%,-50%);}
#lineup .box ul li a:hover { opacity: 0.8;}

#lineup .box ul li span { position: relative; display: block; width: 60px; height: 60px; margin: 0 auto;
 background: #a0a0a0; border: solid 4px #a0a0a0; border-radius: 50px;
}
#lineup .box ul li span svg { position: absolute; left: 50%; top: 50%; width: 60%; fill: #fff; transform: translate(-42%,-50%);}

#lineup .box ul li form { position: relative; width: 60px; background: #8c4811; border: solid 4px #8c4811; border-radius: 50px; margin: 0 auto;}
#lineup .box ul li form input[type="submit"] { position: relative; display: block; width: 100%; height: 52px;
 background: transparent; border: none;
}
#lineup .box ul li form svg { position: absolute; left: 50%; top: 50%; width: 60%; fill: #fff; transform: translate(-42%,-50%);}

#lineup .btn-back { width: 80%; max-width: 300px; margin: 0 auto; padding: 3px; background: linear-gradient(100deg,#f3c900,#ff7f37); border-radius: 8px;}
#lineup .btn-back a { position: relative; display: block; padding: 10px; border: solid 1px #fff; border-radius: 6px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
#lineup .btn-back a:after { content: ''; display: block; width: 8px; height: 8px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#lineup .btn-back a svg { display: inline-block; width: 36px; margin-right: 10px; fill: #fff; vertical-align: middle;}
#lineup .btn-back a span{ display: inline-block; vertical-align: middle;}
#lineup .btn-back a:hover { background: rgba(255,255,255,0.2);}
@media (max-width: 1001px) {
	#lineup .box figure figcaption { font-size: 18px;}
}
@media (max-width: 801px) {
	#lineup .ctn-flex { margin: 0 auto 40px;}
	#lineup .box { width: 50%; padding: 30px 0;}
}
@media (max-width: 641px) {
	#lineup .ttl { padding: 9vw 0 12vw;}
	#lineup .ttl.ttl-deep { background: url('../img/deep/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#lineup .ttl.ttl-melty{ background: url('../img/melty/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#lineup .ttl.ttl-sabon{ background: url('../img/sabon/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#lineup .ttl.ttl-pure { background: url('../img/pure/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#lineup .ttl.ttl-mellow{ background: url('../img/mellow/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
	#lineup .inner-sct { padding: 20px 0 60px;}
	#lineup .box ul li a { border-width: 3px;}
	#lineup .box ul li span { border-width: 3px;}
}
@media (max-width: 481px) {
	#lineup .ttl { padding: 9vw 0 10vw;}
	#lineup .inner-sct { padding: 12px 0 60px;}
	#lineup .ctn-flex { margin: 0 auto 20px;}
	#lineup .box figure { margin-bottom: 12px;}
	#lineup .box figure figcaption { margin-top: 8px; font-size: 14px; letter-spacing: -0.1rem;}
	#lineup .box ul { width: 100px;}
	#lineup .box ul li a { width: 40px; height: 40px; border-width: 2px;}
	#lineup .box ul li form { width: 40px;}
	#lineup .box ul li form input[type="submit"] { height: 32px;}

	#lineup .box ul li span { width: 40px; height: 40px; border-width: 2px;}

	#lineup .btn-back a { font-size: 15px;}
	#lineup .btn-back a svg { width: 30px;}
}