@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;}

.bogo-language-switcher .ja { display: none !important;}

.mfp-close:before,
.mfp-close:after { right: 5%; height: 42px; background: #fff;}
@media (max-width: 481px) {
	.mfp-close { width: 36px; height: 36px;}
	.mfp-close:before,
	.mfp-close:after { width: 3px; height: 36px;}
}

@keyframes fadeInOut{
	 0% { opacity: 0;}
	50% { opacity: 1;}
	80% { opacity: 1;}
 100% { opacity: 0;}
}
#loading { width: 100%; height: 100vh; background: linear-gradient(#f4b18c, #f1a78d, #EFA18D, #f1a78d, #f4b18c);
 position: fixed; left: 0; top: 0; z-index: 200; transition: 0.4s linear 3.8s;
}
#loading .ctn { position: relative; width: 100%; height: 100vh; text-align: center;}
#loading .ctn div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-55%); width: 100%; height: 100%; opacity: 0;}
#loading .ctn div.show1 { background: url('/img/melty/loading/01.jpg') no-repeat 0% 50% / cover;}
#loading .ctn div.show2 { background: url('/img/melty/loading/02.jpg') no-repeat 0% 50% / cover;}
#loading .skip { width: 95px; height: 38px; background: url('/img/melty/loading/skip.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); cursor: pointer;
}
#loading.fadeOut .ctn .show1 { animation: 2.0s fadeInOut linear;}
#loading.fadeOut .ctn .show2 { animation: 2.0s fadeInOut linear 1.8s;}
#loading.fadeOut { opacity: 0;}
@media (max-width: 801px) {
	#loading .ctn div.show1 { background: url('/img/melty/loading/01-sp.jpg') no-repeat 50% 50% / cover;}
	#loading .ctn div.show2 { background: url('/img/melty/loading/02-sp.jpg') no-repeat 50% 50% / cover;}
}
@media (max-width: 481px) {
	#loading .ctn img { top: 35%;}
	#loading .skip { width: 80px; height: 30px;}
}


@keyframes fall {
	 0% { opacity: 0; top: 0%; }
	 8% { opacity: 1;}
	95% { opacity: 1;}
 100% { opacity: 0; top: 100%; }
}
@keyframes rotate1 {
 from{ transform: translateX(0px) rotate(0deg);}
	to { transform: translateX(120px) rotate(-80deg) rotateX(180deg);}
}
@keyframes rotate2 {
 from{ transform: translateX(120px) rotate(-45deg);}
  to { transform: translateX(0px) rotate(0deg);}
}


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

.ttl { padding: 6px 0; background: #eb917a;}
.ttl h2 { padding: 18px 0; background: url('/img/melty/logo-honey.png') no-repeat 50% 50% / auto 100%;
 color: #fff; font-size: 24px; font-weight: 400; letter-spacing: 0.1rem; line-height: 1; text-align: center;
}
@media (max-width: 481px) {
	.ttl { padding: 4px 0;}
	.ttl h2 { padding: 12px 0; font-size: 21px;}
}

.btn { margin: 0 auto;}
.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 a span { position: relative; display: block; padding: 8px 0; border: solid 1px #fff; border-radius: 5px;}
.btn a:after { content: ''; display: block; width: 0px; height: 0px;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
 border: solid 4px transparent; border-left: solid 5px #fff;
}

.flower { position: absolute; left: 0; top: 0; width: 100%; }
.flower .left,
.flower .right { position: absolute; top: 0; width: 200px;}
.flower .left { left: 0;}
.flower .right{ right: 0;}
.flower .left div,
.flower .right div{ position: relative; width: 100%; height: 100%;}
.flower .left::before,
.flower .left::after,
.flower .left div::before,
.flower .left div::after,
.flower .right::before,
.flower .right::after,
.flower .right div::before,
.flower .right div::after { content: ''; display: block; position: absolute; top: 0; opacity: 0;}
.flower .left::before{ left: 40px; width: 30px; height: 30px; background: url('/img/melty/top/flower/01.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 45s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
.flower .left::after { left:20px; width: 30px; height: 24px; background: url('/img/melty/top/flower/02.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 35s linear 2.5s infinite, rotate1 2s ease-in-out infinite alternate;
}
.flower .left div::before{ left: 40px; width: 32px; height: 32px; background: url('/img/melty/top/flower/03.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 45s linear infinite, rotate2 2s ease-in-out infinite alternate;
}
.flower .left div::after { left: 30px; width: 30px; height: 24px; background: url('/img/melty/top/flower/04.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 40s linear 6.0s infinite, rotate1 3s ease-in-out infinite alternate;
}
.flower .right::before{ right: 140px; width: 30px; height: 24px; background: url('/img/melty/top/flower/04.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 45s linear 4.5s infinite, rotate1 2s ease-in-out infinite alternate;
}
.flower .right::after { right: 160px; width: 30px; height: 32px; background: url('/img/melty/top/flower/03.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 35s linear 1.5s infinite, rotate1 2s ease-in-out infinite alternate;
}
.flower .right div::before{ right: 180px; width: 30px; height: 24px; background: url('/img/melty/top/flower/02.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 45s linear infinite, rotate2 2s ease-in-out infinite alternate;
}
.flower .right div::after { right: 150px; width: 30px; height: 30px; background: url('/img/melty/top/flower/01.png') no-repeat 50% 50% / 100% 100%;
 animation: fall 40s linear 2.0s infinite, rotate1 3s ease-in-out infinite alternate;
}
@media (max-width: 801px) {
	.flower { display: none;}
}


#kv { position: relative; width: 100%; background: linear-gradient(#f4b18c, #f1a78d, #EFA18D, #f1a78d, #f4b18c);}
#kv .inner-kv { position: relative; width: 100%; height: 720px; background: url('/img/melty/top/bg/kv.png') no-repeat 550px 50% / auto 100%;}
#kv .txt { width: 45%;}
#kv .txt .inner { width: 85%; max-width: 450px; margin: 0 auto; padding-top: 90px;}
#kv .txt .inner:after { content: ''; display: block; width: 100px; height: 140px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 5%; top: 30px;
}
#kv .txt h1 { text-align: center;}
#kv .txt h1 img { width: 80%; max-width: 450px;}
#kv .txt h1 img.sp { display: none;}
#kv .txt h2 { margin-bottom: 40px; text-align: center;}
#kv .txt h2 img { width: 80%; max-width: 450px;}
#kv .txt h2 img.sp { display: none;}
#kv .txt .news-pc { position: relative;}
#kv .txt .news-pc ul li { position: relative; display: none; height: 130px;}
#kv .txt .news-pc ul li:first-child{ display: block;}
#kv .txt .news-pc ul li a { position: absolute; left: 50%; transform: translateX(-50%); display: block; width: 0%; height: 115px; padding: 6px; overflow: hidden;
 background: #ffeada; box-shadow: 0px 0px 20px #ffeada, 0px 0px 20px #ffeada, 0px 0px 20px #ffeada; border-radius: 7px;
 opacity: 0; color: #000; font-weight: 700; text-decoration: none; transition: 0.8s linear;
}
#kv .txt .news-pc ul li a dl { display: table; width: 100%; opacity: 0; transition: 0.4s linear 1.0s;}
#kv .txt .news-pc ul li a dl dt,
#kv .txt .news-pc ul li a dl dd { display: table-cell; vertical-align: middle;}
#kv .txt .news-pc ul li a dl dt { width: 100px;}
#kv .txt .news-pc ul li a dl dt img { width: 100%;}
#kv .txt .news-pc ul li a dl dd { width: auto; padding-left: 10px; font-size: 14px;}
#kv .txt .news-pc ul li a dl dd span.tit { display: block; color: #e5717f; }
#kv .txt .news-pc ul li a dl dd span.update { display: block; font-size: 12px; font-weight: 400;}
#kv .txt .news-pc ul li span.kome { position: absolute; right: 0; bottom: -8px; font-size: 10px; opacity: 0;}

#kv .news-sp { display: none;}
#kv .note { position: absolute; width: 100%; padding: 0 20px; bottom: 20px;}
#kv .note ul { max-width: 440px; margin: 0 0 0 auto; color: #853522;}
#kv .note ul li { text-shadow: 0 0 5px #fff, 0 0 5px #fff; text-align: right;}
#kv .note ul li span { display: block;}
#kv .bg-kv { display: none;}
#kv .bg-kv img { width: 100%;}
#kv.show .txt .news-pc ul li a { width: 100%; opacity: 1;}
#kv.show .txt .news-pc ul li a dl { opacity: 1;}
#kv.show .txt .news-pc ul li span.kome { opacity: 1;}
@media (max-width: 1001px) {
	#kv .inner-kv { background-position: 420px 50%}
	#kv .txt .news-pc ul li a { height: 92px;}
	#kv .txt .news-pc ul li a dl dt { width: 80px;}
	#kv .txt .news-pc ul li a dl dd { font-size: 12px;}
	#kv .txt .news-pc ul li a dl dd span.update { font-size: 10px;}
}
@media (max-width: 801px) {
	#kv .inner-kv { height: auto; padding-bottom: 12px; background: none;}
	#kv .txt { width: 100%;}
	#kv .txt .inner { width: 90%; padding-top: 12px;}
	#kv .txt h1 img { width: 50%;}
	#kv .txt h2 { margin-bottom: 0px;}
	#kv .txt h2 img { width: 100%; max-width: 450px;}
	#kv .txt h2 img.pc { display: none;}
	#kv .txt h2 img.sp { display: block;}
	#kv .txt .news-pc { display: none;}
	#kv .bg-kv { display: block;}

	#kv .txt .news-pc { display: none;}
	#kv .note { bottom: 120px;}
	#kv .news-sp { display: block;}
	#kv .news-sp ul li { display: none;}
	#kv .news-sp ul li:first-child{ display: block;}
	#kv .news-sp ul li a { position: relative; display: block; width: 100%; padding: 6px;
	 background: #ffeada; box-shadow: 0px 0px 12px #ffeada, 0px 0px 12px #ffeada, 0px 0px 21px #ffeada;
	 opacity: 1; color: #000; text-decoration: none;
	}
	#kv .news-sp ul li a dl { display: table; width: 100%; max-width: 460px; margin: 0 auto;}
	#kv .news-sp ul li a dl dt,
	#kv .news-sp ul li a dl dd { display: table-cell; vertical-align: middle;}
	#kv .news-sp ul li a dl dt { width: 80px;}
	#kv .news-sp ul li a dl dt img { width: 100%;}
	#kv .news-sp ul li a dl dd { width: auto; padding-left: 10px; font-size: 16px;}
	#kv .news-sp ul li a dl dd span.tit { display: block; color: #e5717f; }
	#kv .news-sp ul li a dl dd span.update { display: block; font-size: 12px; font-weight: 400;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#kv .txt .inner:after { width: 60px; height: 100px; top: 8px; left: 8%;}
	#kv .txt h1 { margin-bottom: 0px;}
	#kv .note { bottom: 100px; padding: 0 12px;}
	#kv .note ul { text-align: right;}
	#kv .news-sp ul li a dl dd { font-size: 12px;}
	#kv .news-sp ul li a dl dd span.update { font-size: 10px;}
}

#award { background: #fff; border-bottom: solid 2px #fff;}
#award .award-tit { position: relative; padding: 4px 0; background: #eb917a; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#award .award-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#award .award-tit h2 { padding: 16px 0; background: url('/img/melty/logo-honey.png') no-repeat 50% 50% / auto 72%;
 color: #fff; font-size: 24px; font-weight: 400; letter-spacing: 0.2rem; line-height: 1; text-align: center;
}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 40px; height: 30px; vertical-align: middle;
 background: url('/img/deep/top/icn-award.png') no-repeat 50% 50% / 100% auto;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
#award .ctn { display: none;}
@media (max-width: 801px) {
	#award .award-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#award { border-bottom: solid 1px #fff;}
	#award .award-tit { padding: 4px 0;}
	#award .award-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#award .award-tit h2 { padding: 8px 0; font-size: 20px; letter-spacing: 0rem;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 30px; height: 24px;}
	#award .award-tit h2 span { margin: 0 12px;}
}



#concept { }
#concept .inner-sct { background: url('/img/melty/top/bg/concept.jpg') no-repeat 50% 0 / cover;}
#concept .ctn { width: 94%; margin: 0 auto; padding: 40px 0 80px;}
#concept h3 { margin-bottom: 40px; text-align: center;}
#concept h3 img { width: 75%; max-width: 420px;}
#concept p { text-align: center;}
#concept p img { width: 72%; max-width: 340px;}
@media (max-width: 641px) {
	#concept .inner-sct { background: url('/img/melty/top/bg/concept-sp.jpg') no-repeat 50% 0 / cover;}
	#concept .ctn { padding: 30px 0 50px;}
	#concept h3 { margin-bottom: 20px;}
}

#care { position: relative; background: url('/img/melty/top/bg/care.jpg') no-repeat 50% 0 / cover;}
#care:after { content: ''; display: block; width: 100%; height: 210px; background: url('/img/melty/top/bg/flower.png') no-repeat 50% 50% / auto 100%;
 position: absolute; left: 0; bottom: -120px; z-index: 1;
}
#care .inner-sct { position: relative; padding: 120px 0 40px; z-index: 2;}
#care h3 { text-align: center;}
#care h3 img { width: 90%; max-width: 680px;}
#care h3 img.sp { display: none;}
#care .ctn { width: 90%; max-width: 680px; margin: 0 auto; padding: 40px 0 100px; background: url('/img/melty/top/bg/care-1.png') no-repeat 100% 100% / auto 360px;}
#care .ctn h4 { margin-bottom: 30px;}
#care .ctn h4 img { width: 70%; max-width: 340px;}
#care .ctn p { color: #853522; font-size: 20px; line-height: 1.9;}
#care .ctn p span { display: block; text-indent: -0.4em;}
#care .note { position: absolute; bottom: 30px; z-index: 2;}
#care .note ul { max-width: 520px; margin: 0 0 0 auto; padding: 0 20px; color: #853522; }
#care .note ul li { font-size: 14px;}
#care .flower .left,
#care .flower .right { height: 1500px;}
@media (max-width: 641px) {
	#care { background: url('/img/melty/top/bg/care-sp.jpg') no-repeat 50% 0 / 100% auto;}
	#care:after { height: 180px; bottom: -100px;}
	#care .inner-sct { padding: 80px 0 40px;}
	#care .ctn { width: 100%; padding: 40px 20px 80px; background-size: auto 85%;}
	#care .note ul li { font-size: 12px;}
}
@media (max-width: 481px) {
	#care:after { height: 100px; bottom: -40px;}
	#care .inner-sct { padding: 50px 0 40px;}
	#care h3 img.pc { display: none;}
	#care h3 img.sp { display: block; margin: 0 auto;}
	#care .ctn { padding: 20px 15px 60px; background-position: 160px 100%;}
	#care .ctn h4 { margin-bottom: 12px;}
	#care .ctn p { font-size: 14px;}
	#care .note ul li { font-size: 10px;}
}


#step { background: url('/img/melty/top/bg/step.jpg') no-repeat 50% 50% / cover;}
#step .inner-sct { width: 92%; margin: 0 auto; padding: 180px 0 100px;}
#step h2 { margin-bottom: 40px; text-align: center;}
#step h2 img { width: 100%; max-width: 600px;}
#step .ctn { width: 100%; max-width: 1080px; margin: 0 auto 20px;}
#step .ctn p { margin-bottom: 40px; color: #853522; font-size: 20px; line-height: 1.85; text-align: center;}
#step .ctn p br.sp { display: none;}
#step .ctn p span { color: #e15a2a;}
#step .ctn p sub { vertical-align: sub;}
#step .ctn ul { font-size: 0px; text-align: center;}
#step .ctn ul li { position: relative; display: inline-block; width: 25%; padding: 0 15px;}
#step .ctn ul li::after { content: ''; display: block; width: 20px; height: 20px; position: absolute; right: -10px; top: 52%;}
#step .ctn ul li:nth-child(1):after { background: url('/img/melty/top/arw-1.png') no-repeat 50% 50% / 100% 100%;}
#step .ctn ul li:nth-child(2):after { background: url('/img/melty/top/arw-2.png') no-repeat 50% 50% / 100% 100%;}
#step .ctn ul li:nth-child(3):after { background: url('/img/melty/top/arw-3.png') no-repeat 50% 50% / 100% 100%;}
#step .ctn ul li:last-child:after { content: none;}
#step .ctn ul li dl { position: relative; width: 100%;}
#step .ctn ul li dl dt { }
#step .ctn ul li dl dt img { width: 100%;}
#step .ctn ul li dl dt img.sp { display: none;}
#step .ctn ul li dl dd { position: absolute; left: 0; bottom: 15px; width: 100%; }
#step .ctn ul li dl dd.sp { display: none;}
#step .ctn ul li dl dd a { position: relative; display: block; width: 80px; margin: 0 0 0 auto; padding: 4px 0; padding-left: 15px; background: #853522; border-radius: 5px;
 color: #fff; font-size: 14px; line-height: 1.2; text-align: center; text-decoration: none;
}
#step .ctn ul li dl dd a:before { content: ''; display: block; width: 0px; height: 0px; border: solid 4px transparent; border-left: solid 5px #fff;
 position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
}
#step .note ul { max-width: 450px; margin: 0 0 0 auto; padding: 0 20px; color: #853522; }
#step .note ul li br { display: none;}
@media (max-width: 801px) {
	#step .ctn p { font-size: 2.4vw;}
	#step .ctn ul li dl dd { bottom: 0px;}
}
@media (max-width: 641px) {
	#step { background: url('/img/melty/top/bg/step-sp.jpg') no-repeat 50% 50% / cover;}
	#step .ctn { margin: 0 auto 10px;}
	#step .ctn p { font-size: 4.0vw; font-weight: 700; text-align: left;}
	#step .ctn p br.sp { display: block;}
	#step .ctn ul li { display: block; width: 100%; padding: 0px;}
	#step .ctn ul li::after { content: none;}
	#step .ctn ul li dl dt img.pc { display: none;}
	#step .ctn ul li dl dt img.sp { display: block;}
	#step .ctn ul li dl dd { bottom: 21%;}
	#step .ctn ul li dl dd.pc { display: none;}
	#step .ctn ul li dl dd.sp { display: block;}
	#step .ctn ul li:last-child dl dd { bottom: 0%;}
	#step .note ul { text-align: right;}
	#step .note ul li br { display: block;}
}
@media (max-width: 481px) {
	#step .inner-sct { padding: 60px 0;}
	#step h2 { margin-bottom: 20px;}
	#step .ctn p { margin-bottom: 20px; font-size: 15px;}
	#step .note ul { padding: 0 12px;}
}


#stepcare { position: relative; background: url('/img/melty/top/bg/stepcare.jpg') no-repeat 50% 50% / cover;}
#stepcare .inner-sct { position: relative; position: relative; width: 92%; margin: 0 auto; padding: 80px 0 120px; z-index: 2;}
#stepcare h2 { margin-bottom: 40px; text-align: center;}
#stepcare h2 img { width: 85%; max-width: 640px;}
#stepcare .ctn { position: relative; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 140px;}
#stepcare .ctn:before,
#stepcare .ctn:after { content: ''; display: block; position: absolute; }
#stepcare .ctn:before{ width: 60px; height: 150px; left: 0; bottom: 150px;
 background-image: url('/img/melty/top/flower/10.png'), url('/img/melty/top/flower/09.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 50% 0%, 50% 100%;
 background-size: 100% auto, 90% auto;
}
#stepcare .ctn:after { width: 50px; height: 100px; background: url('/img/melty/top/flower/11.png') no-repeat 50% 100% / 100% auto; right: 0; bottom: 0;}
#stepcare ul { position: relative; width: 100%; max-width: 620px; margin: 0 auto; z-index: 2;}
#stepcare ul li { position: relative; margin-bottom: 10px; padding-left: 180px;}
#stepcare ul li:last-child { margin-bottom: 0px;}
#stepcare ul li .img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 180px; z-index: 1;}
#stepcare ul li .img img { width: 100%;}
#stepcare ul li .img img.sp { display: none;}
#stepcare ul li dl { position: relative; width: 100%; height: 165px; padding: 20px 30px 0 45px; color: #853522; z-index: 2;}
#stepcare ul li:nth-child(1) dl { background: url('/img/melty/top/stepcare-1-bg.png') no-repeat 50% 50% / 100% 100%;}
#stepcare ul li:nth-child(2) dl { background: url('/img/melty/top/stepcare-2-bg.png') no-repeat 50% 50% / 100% 100%;}
#stepcare ul li:nth-child(3) dl { background: url('/img/melty/top/stepcare-3-bg.png') no-repeat 50% 50% / 100% 100%;}
#stepcare ul li:nth-child(4) dl { background: url('/img/melty/top/stepcare-4-bg.png') no-repeat 50% 50% / 100% 100%;}
#stepcare ul li dl dt { margin-bottom: 5px; padding-bottom: 5px; border-bottom: solid 1px #853522;}
#stepcare ul li dl dd { font-size: 15px; letter-spacing: -0.02rem; line-height: 1.4;}
#stepcare ul li dl dd span { font-size: 27px; font-weight: 700; letter-spacing: -0.08rem;}
#stepcare ul li dl dd small { display: block; font-size: 15px;}
#stepcare .flower .left,
#stepcare .flower .right { height: 1000px;}
@media (max-width: 1001px) {
	#stepcare .ctn { padding: 0 100px;}
	#stepcare ul { max-width: 580px;}
	#stepcare ul li { padding-left: 150px;}
	#stepcare ul li .img { width: 150px;}
}
@media (max-width: 801px) {
	#stepcare .ctn { padding: 0px;}
	#stepcare .ctn:before,
	#stepcare .ctn:after { content: none;}
}
@media (max-width: 641px) {
	#stepcare { background: url('/img/melty/top/bg/stepcare-sp.jpg') no-repeat 50% 50% / cover;}
	#stepcare ul li { padding-left: 120px;}
	#stepcare ul li .img img.pc { display: none;}
	#stepcare ul li .img img.sp { display: block;}
	#stepcare ul li dl { height: 140px;}
	#stepcare ul li dl dt img { width: 100px;}
	#stepcare ul li dl dd { font-size: 13px;}
	#stepcare ul li dl dd span { font-size: 3.2vw;}
	#stepcare ul li dl dd small { font-size: 12px;}
}
@media (max-width: 481px) {
	#stepcare .inner-sct { padding: 40px 0 60px;}
	#stepcare h2 { margin-bottom: 20px;}
	#stepcare ul li { padding-left: 85px;}
	#stepcare ul li .img { width: 100px;}
	#stepcare ul li dl { height: 120px; padding: 18px 20px 0 28px;}
	#stepcare ul li dl dt img { width: 80px;}
	#stepcare ul li dl dd { font-size: 11px; font-weight: 700;}
	#stepcare ul li dl dd span { font-size: 16px;}
	#stepcare ul li dl dd small { font-size: 10px;}
}




#series .bg{ background: url('/img/melty/top/bg/series.jpg') no-repeat 50% 50% / cover;}
#series .inner-sct { width: 96%; max-width: 1200px; margin: 0 auto; padding: 60px 0;}
#series h2 { margin-bottom: 30px; text-align: center;}
#series h2 img { width: 75%; max-width: 450px;}
#series h2 img.sp { display: none;}
#series p { margin-bottom: 50px; color: #4e3824; font-size: 21px; font-weight: 400; text-align: center;}
@media (max-width: 801px) {
	#series .inner-sct { width: 100%;}
}
@media (max-width: 641px) {
	#series p span { display: block;}
}
@media (max-width: 481px) {
	#series .inner-sct { padding: 40px 0;}
	#series h2 { margin-bottom: 20px;}
	#series h2 img.pc { display: none;}
	#series h2 img.sp { display: block; margin: 0 auto;}
	#series p { margin-bottom: 20px; font-size: 16px;}
}



#product { opacity: 1; transition: 0.4s linear;}
#product .inner-sct { position: relative; padding: 80px 0 60px; background: url('/img/melty/top/bg/product.jpg') no-repeat 50% 50% / cover;}
#product .ctn { width: 92%; max-width: 1080px; margin: 0 auto;}
#product .ctn .inner { width: 55%; height: 580px; margin: 0 0 0 auto;}
#product .ctn h3 { margin-bottom: 20px;}
#product .ctn h3 img { width: 100%; max-width: 480px;}
#product .ctn h3 img.sp { display: none;}
#product .ctn p { color: #853522; font-size: 20px; padding-left: 0.5em; letter-spacing: 0.18rem; line-height: 1.85;}
#product .ctn p sub { font-size: 14px; vertical-align: bottom;}
#product .btn { width: 80%; max-width: 410px;}

#product.show { opacity: 1;}
@media (max-width: 1001px) {
	#product .ctn p { font-size: 2.2vw; letter-spacing: 0.075rem}
}
@media (max-width: 801px) {
	#product { height: auto; background: none;}
	#product .inner-sct { width: 100%; background: url("/img/melty/top/bg/product-sp.jpg") no-repeat 50% 40% / 100% auto;}
	#product .ctn { width: 100%; max-width: 100%;}
	#product .ctn .inner { width: 92%; height: 100vw; margin: 0 auto;}
	#product .ctn h3 { text-align: center;}
	#product .ctn h3 img.pc { display: none;}
	#product .ctn h3 img.sp { display: block; width: 72%; margin: 0 auto;}
	#product .ctn p { font-size: 3.0vw; text-align: center;}
	#product .note ul { padding: 0 20px;}
}
@media (max-width: 481px) {
	#product .inner-sct { padding: 40px 0;}
	#product .ctn h3 { margin-bottom: 10px;}
	#product .ctn p { font-size: 15px; letter-spacing: 0rem;}
	#product .note { bottom: 12px;}
	#product .note ul { padding: 0 10px;}
}




#shop .ctn { background: url('/img/melty/top/bg/shop.jpg') no-repeat 50% 50% / cover; opacity: 0; transition: 0.4s linear;}
#shop .ctn .inner { padding: 86px 0 120px;}
#shop .ctn h3 { margin-bottom: 20px;
 color: #853522; font-size: 34px; font-weight: 600; letter-spacing: 2px; line-height: 1.2; text-align: center;
 text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
}
#shop .ctn p { margin-bottom: 40px; color: #853522; font-family: 'Noto-Sans-Cjk-JP', 'Sans-Serif'; font-size: 16px; letter-spacing: 0.1em; text-align: center;
}
#shop .btn { width: 80%; max-width: 410px;}
#shop.show .ctn { opacity: 1;}
@media all and (max-width: 641px) {
	#shop .ctn .inner { padding: 80px 0;}
	#shop .ctn h3 { font-size: 5.0vw;}
	#shop .ctn h3 span { display: block;}
	#shop .ctn p { font-size: 14px;}
}
@media all and (max-width: 481px) {
	#shop .ctn .inner { padding: 50px 0;}
	#shop .ctn h3 { margin-bottom: 12px; font-size: 21px;}
	#shop .ctn p { margin-bottom: 20px; font-size: 12px;}
}

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