@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;
}
.shop-ctn { padding: 100px 0; background: #fdf2f0 url('/img/melty/shop/bg.jpg'); background-size: cover;}
.shop-ctn { color: #853522; text-align: center;}
.shop-ctn h2 { font-size: 34px; font-weight: 600; letter-spacing: 0.18rem; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;}
.shop-ctn h2 br { display: none;}
.shop-ctn p { margin-bottom: 50px;}
.shop-ctn ul { width: 92%; max-width: 860px; margin: 0 auto; font-size: 0;}
.shop-ctn ul li { display: inline-block; width: 33%; padding: 12px; font-size: 15px;}
.shop-ctn ul li a { position: relative; display: block; width: 100%; padding: 4px; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 color: #853522; text-decoration: none;
}
.shop-ctn ul li a span { position: relative; display: block; padding: 12px 0; padding-left: 45px; border: solid 1px #853522; border-radius: 3px; font-weight: 700; text-align: left;}
.shop-ctn ul li a:before,
.shop-ctn ul li a:after { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%);}
.shop-ctn ul li a:before{ width: 24px; height: 30px; left: 12px; background: url('/img/melty/shop/icn.png') no-repeat 50% 50% /  100% auto;}
.shop-ctn ul li a:after { width: 0px; height: 0px; border: solid 5px transparent; border-left: 5px solid #853522; right: 10px;}

@media (max-width: 801px) {
	.shop-ctn h2 { font-size: 3.4vw;}
	.shop-ctn ul li { width: 50%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	.shop-hd h1 { padding: 20px 0; font-size: 28px;}
	.shop-ctn { padding: 40px 0;}
	.shop-ctn h2 { margin-bottom: 20px; font-size: 24px; letter-spacing: 0.05rem; line-height: 1.2;}
	.shop-ctn h2 br { display: block;}
	.shop-ctn p { margin-bottom: 30px; font-size: 10px;}
	.shop-ctn ul li { padding: 6px; font-size: 11px;}
	.shop-ctn ul li a span { padding: 8px 0; padding-left: 28px;}
	.shop-ctn ul li a:before{ width: 18px; left: 9px;}
	.shop-ctn ul li a:after { border: solid 3px transparent; border-left: 4px solid #853522;}
}