@charset "UTF-8";
body { color: #853522;}
#hd .menu { background: #f6d3d4;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #f6d3d4;}
.menu-trig div span { background: #231815;}
.menu-cart a svg { fill: #231815;}


.wrap { width: 100%; max-width: 1280px; margin: 0 auto;}

.shop-hd { padding: 20px 0; background: #eb917a;}
.shop-hd .logo { width: 18%; max-width: 120px; margin: 0 auto 8px;}
.shop-hd .logo img { width: 100%;}
.shop-hd h1 { padding: 25px 0; background: url('/img/melty/logo-honey.png') no-repeat 50% 50% / auto 100%;
 color: #fff; font-size: 48px; font-weight: 600; letter-spacing: 0.1rem; line-height: 1; text-align: center;
}

@media (max-width: 481px) {
	.shop-hd h1 { padding: 20px 0; font-size: 28px;}
}



.kv { position: relative; height: 780px; background: url("/img/melty/product/bg-kv.jpg") no-repeat 50% 50% / cover;}
.kv .inner-kv { position: relative; width: 96%; height: 100%; margin: 0 auto;}
.kv .ctn { width: 54%; max-width: 600px; margin: 0 0 0 auto; padding-top: 80px;}
.kv .ctn h2 { margin-bottom: 20px;}
.kv .ctn h2 img { width: 100%; max-width: 480px;}
.kv .ctn h2 img.sp { display: none;}
.kv .ctn p { padding-left: 10px; color: #853522; font-size: 20px; font-weight: 700; letter-spacing: 0.19rem; line-height: 1.9;}
.kv .ctn p sub { font-size: 12px; vertical-align: baseline;}
.kv .note { position: absolute; bottom: 20px; z-index: 2;}
.kv .note ul { text-align: right;}
.kv .note ul li { color: #853522; }
.kv .bg { position: relative; display: none; width: 100%;}
.kv .bg img { width: 100%;}
@media (max-width: 1001px) {
	.kv .ctn p { font-size: 2.2vw; letter-spacing: 0.075rem}
}
@media (max-width: 801px) {
	.kv { height: auto; background: none;}
	.kv .inner-kv { width: 100%;}
	.kv .ctn { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; padding-top: 12vw; z-index: 3;}
	.kv .ctn h2 { text-align: center;}
	.kv .ctn h2 img.pc { display: none;}
	.kv .ctn h2 img.sp { display: block; width: 90%; margin: 0 auto;}
	.kv .ctn p { font-size: 3.0vw; text-align: center;}
	.kv .note ul { padding: 0 20px;}
	.kv .bg { display: block; padding-top: 127%; background: url("/img/melty/product/bg-kv-sp.jpg") no-repeat 50% 0% / 100% auto; z-index: 1;}
}
@media (max-width: 481px) {
	.kv .ctn { padding-top: 8vw;}
	.kv .ctn p { font-size: 16px; letter-spacing: 0rem;}
	.kv .note { bottom: 12px;}
	.kv .note ul { padding: 0 10px;}
}

#product-ctn .bloc { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#product-ctn .bloc#step1 { background: url("/img/melty/product/bg-step1.jpg") no-repeat 50% 0;}
#product-ctn .bloc#step1-5 { background: url("/img/melty/product/bg-step1_5.jpg") no-repeat 50% 0;}
#product-ctn .bloc#step2 { background: url("/img/melty/product/bg-step2.jpg") no-repeat 50% 0;}
#product-ctn .bloc#step3a{ background: url("/img/melty/product/bg-step3a.jpg") no-repeat 50% 0;}
#product-ctn .bloc#step3b{ background: url("/img/melty/product/bg-step3b.jpg") no-repeat 50% 0;}
#product-ctn .bloc#step4 { background: url("/img/melty/product/bg-step4.jpg") no-repeat 50% 0;}
#product-ctn .bloc .inner { width: 94%; max-width: 1080px; margin: 0 auto; padding: 40px 0;}
#product-ctn .bloc#step4 .inner { padding-bottom: 80px;}
#product-ctn .bloc .ctn { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between;}
#product-ctn .bloc .ctn img.icn { width: 20%; max-width: 180px; position: absolute; left: 0; top: 20px;}
#product-ctn .bloc .product-img { position: relative; width: 38%;}
#product-ctn .bloc .product-txt { width: 58%;}
#product-ctn .bloc#step3a .product-txt{ padding-top: 20px;}
#product-ctn .bloc#step3b .product-txt{ padding-top: 20px;}
#product-ctn .bloc#step4 .product-txt { padding-top: 40px;}

#product-ctn .bloc .product-img figure { padding-left: 200px; text-align: center;}
#product-ctn .bloc .product-img figure img { width: 100%; max-width: 240px;}
#product-ctn .bloc .product-img figure img.thin { max-width: 200px;}
#product-ctn .bloc .product-txt h3 { margin-bottom: 20px; font-size: 20px;}
#product-ctn .bloc .product-txt h3 img { width: 100%; max-width: 590px;}
#product-ctn .bloc#step2 .product-txt h3 img { max-width: 430px;}
#product-ctn .bloc#step4 .product-txt h3 img { max-width: 410px;}

#product-ctn .bloc .product-txt h3 img.sp { display: none;}
#product-ctn .bloc .product-txt p.description { margin-bottom: 20px; color: #843521; font-size: 20px; font-weight: 600;}
#product-ctn .bloc .product-txt p.description br { display: none;}
#product-ctn .bloc .product-txt p.description sub{ font-size: 14px; vertical-align: baseline;}
#product-ctn .bloc .product-txt dl { display: table; width: 100%; margin: 0 auto 40px;}
#product-ctn .bloc#step1 dl { color: #d43430;}
#product-ctn .bloc#step1-5 dl { color: #df5f63;}
#product-ctn .bloc#step2 dl { color: #df5f63;}
#product-ctn .bloc#step3a dl{ color: #a24e8d;}
#product-ctn .bloc#step3b dl{ color: #ba4659;}
#product-ctn .bloc#step4 dl { color: #ba4659;}

#product-ctn .bloc .product-txt dl dt,
#product-ctn .bloc .product-txt dl dd { display: table-cell; vertical-align: middle;}
#product-ctn .bloc .product-txt dl dt { width: 100px;}
#product-ctn .bloc .product-txt dl dt img { width: 100%;}
#product-ctn .bloc .product-txt dl dd { width: auto; padding-left: 12px; font-size: 21px;}
#product-ctn .bloc .product-txt dl dd br { display: none;}
#product-ctn .bloc .product-txt dl dd span { font-size: 30px; font-weight: 700;}
#product-ctn .bloc .product-txt dl dd small { display: block; font-size: 18px;}
#product-ctn .bloc .product-txt p.price { margin-bottom: 40px; color: #843521; font-size: 22px; font-weight: 600;}
#product-ctn .bloc .product-txt .cart { width: 80%; max-width: 410px; padding: 4px; background: #843521; border-radius: 4px;}
#product-ctn .bloc .product-txt .cart a { position: relative; display: block; padding: 8px 0; border: solid 1px #fff; border-radius: 5px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none;}
#product-ctn .bloc .product-txt .cart a:after { content: ''; display: block; width: 0px; height: 0px;
 position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-left: solid 5px #fff;
}
#product-ctn .bloc .product-txt .cart a svg { display: inline-block; vertical-align: middle; width: 24px; margin-right: 8px;}
#product-ctn .bloc .product-txt .cart a span { display: inline-block; vertical-align: middle; font-weight: 600;}

#product-ctn .bloc .product-txt .cart form { position: relative; display: block;}
#product-ctn .bloc .product-txt .cart form input[type="submit"]{ position: relative; display: block; width: 100%; padding: 8px 0;
 background: #843521; border: solid 1px #fff; border-radius: 5px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none;}
#product-ctn .bloc .product-txt .cart form:after { content: ''; display: block; width: 0px; height: 0px;
 position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-left: solid 5px #fff;
}

@media (max-width: 1001px) {
	#product-ctn .bloc .product-img figure { padding-left: 160px;}
	#product-ctn .bloc .ctn img.icn { max-width: 140px;}
	#product-ctn .bloc .product-txt p.description { font-size: 2.0vw;}
	#product-ctn .bloc .product-txt dl dd { font-size: 2.0vw;}
	#product-ctn .bloc .product-txt dl dd span { font-size: 3.0vw;}
	#product-ctn .bloc .product-txt dl dd small { font-size: 1.8vw;}
	#product-ctn .bloc .product-txt p.price { font-size: 2.2vw;}
}
@media (max-width: 801px) {
	#product-ctn .bloc#step1 { background: url("/img/melty/product/bg-step1-sp.jpg") no-repeat 50% 0 / 100% auto;}
	#product-ctn .bloc#step1-5 { background: url("/img/melty/product/bg-step1_5-sp.jpg") no-repeat 50% 0 / 100% auto;}
	#product-ctn .bloc#step2 { background: url("/img/melty/product/bg-step2-sp.jpg") no-repeat 50% 0 / 100% auto;}
	#product-ctn .bloc#step3a{ background: url("/img/melty/product/bg-step3a-sp.jpg") no-repeat 50% 0 / 100% auto;}
	#product-ctn .bloc#step3b{ background: url("/img/melty/product/bg-step3b-sp.jpg") no-repeat 50% 0 / 100% auto;}
	#product-ctn .bloc#step4 { background: url("/img/melty/product/bg-step4-sp.jpg") no-repeat 50% 0 / 100% auto;}
	#product-ctn .bloc .inner { padding: 8vw 0;}
	#product-ctn .bloc#step4 .inner { padding-bottom: 12vw;}
	#product-ctn .bloc .ctn { display: block;}
	#product-ctn .bloc .product-img { width: 100%; margin-bottom: 6vw;}
	#product-ctn .bloc .product-txt { width: 100%;}
	#product-ctn .bloc#step3a .product-txt{ padding-top: 0px;}
	#product-ctn .bloc#step3b .product-txt{ padding-top: 0px;}
	#product-ctn .bloc#step4 .product-txt { padding-top: 0px;}

	#product-ctn .bloc .product-img figure { padding-left: 0px;}
	#product-ctn .bloc .product-img figure img { width: 27%;}
	#product-ctn .bloc .product-txt h3 { text-align: center;}
	#product-ctn .bloc .product-txt h3 img.pc { display: none;}
	#product-ctn .bloc .product-txt h3 img.sp { display: block; margin: 0 auto;}
	#product-ctn .bloc .product-txt p.description { font-size: 3.0vw; text-align: center;}
	#product-ctn .bloc .product-txt dl { display: block; text-align: center;}
	#product-ctn .bloc .product-txt dl dt,
	#product-ctn .bloc .product-txt dl dd { display: inline-block;}
	#product-ctn .bloc .product-txt p.price { font-size: 3.2vw; text-align: center;}
	#product-ctn .bloc .product-txt .cart { margin: 0 auto;}
}
@media (max-width:641px) {
	#product-ctn .bloc .product-txt p.description { font-size: 4.0vw;}
	#product-ctn .bloc .product-txt p.description br { display: block;}
	#product-ctn .bloc .product-txt dl dd { font-size: 3.0vw;}
	#product-ctn .bloc .product-txt dl dd span { font-size: 4.2vw;}
	#product-ctn .bloc .product-txt dl dd small { font-size: 14px;}
	#product-ctn .bloc .product-txt p.price { font-size: 3.8vw;}
}
@media (max-width:481px) {
	#product-ctn .bloc .product-img { margin-bottom: 5vw;}
	#product-ctn .bloc .product-txt h3 img { width: 90%;}
	#product-ctn .bloc#step2 .product-txt h3 img {  width: 70%;}
	#product-ctn .bloc#step4 .product-txt h3 img {  width: 70%;}
	#product-ctn .bloc .product-txt p.description { font-size: 16px;}
	#product-ctn .bloc .product-txt dl { margin: 0 auto 20px;}
	#product-ctn .bloc .product-txt dl dt { width: 60px;}
	#product-ctn .bloc .product-txt dl dd { padding-left: 0px; font-size: 15px;}
	#product-ctn .bloc .product-txt dl dd span { font-size: 18px;}
	#product-ctn .bloc .product-txt dl dd small { font-size: 12px;}
	#product-ctn .bloc .product-txt p.price { margin-bottom: 20px; font-size: 15px;}
	#product-ctn .bloc .product-txt .cart a { padding: 6px 0; font-size: 15px;}
}

#aside-ctn {}
#aside-ctn .bloc { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('/img/melty/product/bg-refill.jpg') no-repeat 50% 0 / cover;}
#aside-ctn .bloc .inner { width: 94%; max-width: 1080px; margin: 0 auto; padding: 40px 0;}
#aside-ctn .bloc .ctn { position: relative; display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;}
#aside-ctn .bloc .ctn.mb { margin-bottom: 40px;}
#aside-ctn .bloc .item { width: 50%; padding: 40px 0;}
#aside-ctn .bloc .item figure { margin-bottom: 20px; text-align: center;}
#aside-ctn .bloc .item figure img { width: 28%; max-width: 168px;}
#aside-ctn .bloc .item h4 { margin-bottom: 20px; text-align: center;}
#aside-ctn .bloc .item h4 img { width: 90%; max-width: 420px;}
#aside-ctn .bloc .item p.price { margin-bottom: 30px; color: #853522; font-size: 18px; font-weight: 600; text-align: center; }

#aside-ctn .bloc .item .cart { width: 80%; max-width: 410px; margin: 0 auto; padding: 4px; background: #843521; border-radius: 4px;}
#aside-ctn .bloc .item .cart a { position: relative; display: block; padding: 8px 0; border: solid 1px #fff; border-radius: 5px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none;}
#aside-ctn .bloc .item .cart a:after { content: ''; display: block; width: 0px; height: 0px;
 position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-left: solid 5px #fff;
}
#aside-ctn .bloc .item .cart a svg { display: inline-block; vertical-align: middle; width: 24px; margin-right: 8px;}
#aside-ctn .bloc .item .cart a span { display: inline-block; vertical-align: middle; font-weight: 600;}

#aside-ctn .bloc .item .cart  form { position: relative; display: block;}
#aside-ctn .bloc .item .cart  form input[type="submit"]{ position: relative; display: block; width: 100%; padding: 8px 0;
 background: #843521; border: solid 1px #fff; border-radius: 5px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none;}
#aside-ctn .bloc .item .cart  form:after { content: ''; display: block; width: 0px; height: 0px;
 position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-left: solid 5px #fff;
}

@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#aside-ctn .bloc .inner { padding: 0px;}
	#aside-ctn .bloc { background: none;}
	#aside-ctn .bloc .inner { width: 100%;}
	#aside-ctn .bloc .ctn { display: block;}
	#aside-ctn .bloc .item { width: 100%;}
	#aside-ctn .bloc .item#re1 { background: url('/img/melty/product/bg-refill-1-sp.jpg') no-repeat 50% 0 / 100% auto;}
	#aside-ctn .bloc .item#re2 { background: url('/img/melty/product/bg-refill-2-sp.jpg') no-repeat 50% 0 / 100% auto;}
	#aside-ctn .bloc .item#re3 { background: url('/img/melty/product/bg-refill-3-sp.jpg') no-repeat 50% 0 / 100% auto;}

}
@media (max-width: 481px) {
	#aside-ctn .bloc .ctn.mb { margin-bottom: 0px;}
	#aside-ctn .bloc .item { padding: 30px 0;}
	#aside-ctn .bloc .item.none { padding: 0px;}
	#aside-ctn .bloc .item h4 { margin-bottom: 12px;}
	#aside-ctn .bloc .item h4 img { width: 80%;}
	#aside-ctn .bloc .item h4 img.wide { width: 98%}
	#aside-ctn .bloc .item p.price { font-size: 13px;}
	#aside-ctn .bloc .item .cart a { font-size: 15px;}
}


.btn-bloc { background: #f6f6f6;}
.btn-bloc .inner { width: 94%; margin: 0 auto; padding: 40px 0;}
.btn-bloc .btn { width: 80%; max-width: 410px; margin: 0 auto;}
.btn-bloc .btn a { position: relative; display: block; width: 100%; max-width: 410px; padding: 4px; background: #843521; border-radius: 4px;
 color: #fff; font-size: 18px; text-align: center; text-decoration: none;
}
.btn-bloc .btn a span { position: relative; display: block; padding: 8px 0; border: solid 1px #fff; border-radius: 5px;}
.btn-bloc .btn a:before { content: ''; display: block; width: 0px; height: 0px;
 position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-right: solid 5px #fff;
}