@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; margin: 0 auto; background: url('/img/milky/shop/kv.jpg') no-repeat 50% 50%;}
#kv .ctn { width: 100%; padding: 200px 0 160px;}
#kv .ctn h1 { width: 90%; max-width: 1024px; margin: 0 auto;}
#kv .ctn h1 img { width: 48%; max-width: 480px;}
#kv .ctn h1 img.sp { display: none;}
#kv .ctn p { display: none; color: #621a14;}
#kv .bg { display: none; position: relative; z-index: 1;}
#kv .bg img { width: 100%;}
@media (max-width: 1281px) {
}
@media (max-width: 801px) {
	#kv .ctn { position: absolute; left: 0; top: 0; width: 100%; padding: 8vw 0 0; z-index: 2;}
	#kv .ctn h1 { margin-bottom: 20px;}
	#kv .ctn h1 img.pc { display: none;}
	#kv .ctn h1 img.sp { display: block; width: 80%; max-width: 480px; margin: 0 auto;}
	#kv .ctn p { display: block; text-align: center;}
	#kv .ctn p.min { font-size: 4.2vw; font-weight: 700;}
	#kv .bg { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#kv .ctn h1 { margin-bottom: 12px;}
	#kv .ctn p.min { font-size: 18px;}
	#kv .ctn p { font-size: 12px;}
}


.wrap { background: url('/img/milky/bg-ptn-2.jpg') repeat-y 50% 0 / 1280px auto;}
.wrap .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 160px 0 40px;}
.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;
}

.wrap ul.shoplist { width: 92%; max-width: 880px; margin: 0 auto; font-size: 0;}
.wrap ul.shoplist li { display: inline-block; width: 33.33334%; padding: 15px; font-size: 16px;}
.wrap ul.shoplist li.up1020 { display: none;}
.wrap ul.shoplist li a { position: relative; display: block; width: 100%; padding: 5px; background: #fff; border-radius: 5px;
 color: #673b1c; font-weight: 700; text-decoration: none;
}
.wrap ul.shoplist li a:before,
.wrap ul.shoplist li a:after { content: ''; display: block; position: absolute; z-index: 2;}
.wrap ul.shoplist li a:before{ width: 26px; height: 100%; background: url('/img/milky/icn.svg') no-repeat 50% 50%; left: 16px; top: 0;}
.wrap ul.shoplist li a:after { width: 6px; height: 6px; border-top: solid 2px #673b1c; border-right: solid 2px #673b1c; right: 16px; top: 50%;
 transform: translate(-50%,-50%) rotate(45deg);
}
.wrap ul.shoplist li a span { position: relative; display: block; padding: 12px 0; padding-left: 45px; border: solid 2px #f5870f; border-radius: 4px;}
.wrap ul.shoplist li a:hover { opacity: 0.8;}

@media (max-width: 801px) {
	.wrap ul.shoplist li { padding: 8px; font-size: 14px;}
	.wrap ul.shoplist li a{ padding: 3px;}
}
@media (max-width: 641px) {
	.wrap .inner-sct { padding: 120px 0 40px;}
	.wrap .inner-sct:before { height: 0px; padding-top: 16%; background: url('/img/milky/bg-ttl-sp.png') no-repeat 50% 100% / 100% auto;}
	.wrap ul.shoplist li { width: 50%;}
}
@media (max-width: 481px) {
	.wrap { background-size: 800px auto}
	.wrap .inner-sct { padding: 90px 0 40px;}
	.wrap ul.shoplist li { padding: 5px; font-size: 12px;}
	.wrap ul.shoplist li a span{ padding: 8px 0; padding-left: 30px;}
	.wrap ul.shoplist li a:before{ width: 18px; left: 10px;}
	.wrap ul.shoplist li a:after { right: 10px;}
}

.wrap .note { padding: 10px;}
.wrap .note ul { width: 100%; max-width: 1024px; margin: 0 auto; text-align: right;}
.wrap .note ul li { color: #858584; font-size: 10px;}