@charset "utf-8";
#hd .menu { background: #f1f1f1;}
.menu-trig div span { background: #fff;}
.menu-cart a svg { fill: #fff;}


#kv { position: relative; background: url('../../img/color/shop/bg-kv.jpg') no-repeat 50% 0 / auto 100%;}
#kv .inner-kv { width: 100%; max-width: 1280px; height: 700px; margin: 0 auto;}
#kv .ctn { width: 60%; max-width: 760px; padding-top: 260px;}
#kv .ctn h1 { margin-bottom: 15px; text-align: center;}
#kv .ctn h1 img { width: 60%; max-width: 220px;}
#kv .ctn p { color: #582e87; font-size: 20px; font-weight: 700; text-align: center;}
#kv .ctn p span { display: block; font-size: 30px;}
#kv .bg { display: none; background: url('../../img/color/shop/bg-kv-sp.jpg') no-repeat 50% 0 / 100% auto;}
@media (max-width: 1001px) {
	#kv .inner-kv { height: 600px;}
	#kv .ctn { padding-top: 200px;}
	#kv .ctn p { font-size: 2.0vw;}
	#kv .ctn p span { font-size: 3.0vw;}
}
@media (max-width: 641px) {
	#kv .inner-kv { position: absolute; left: 0; top: 0; z-index: 2;}
	#kv .ctn { width: 100%; padding-top: 30px;}
	#kv .ctn h1 { margin-bottom: 8px;}
	#kv .ctn h1 img { width: 32%;}
	#kv .ctn p { font-size: 3.0vw;}
	#kv .ctn p span { font-size: 4.0vw;}
	#kv .bg { position: relative; display: block; width: 100%; padding-top: 116%; z-index: 1;}
}
@media (max-width: 641px) {
	#kv .ctn h1 { margin-bottom: 5px;}
	#kv .ctn p { font-size: 10px;}
	#kv .ctn p span { font-size: 16px;}
}


#shop-ctn { background: url('../../img/color/shop/bg.jpg') repeat-y 50% 0 / 1280px auto;}
#shop-ctn .inner { width: 92%; max-width: 880px; margin: 0 auto; padding: 70px 0 40px;}
#shop-ctn ul { font-size: 0; }
#shop-ctn ul li { display: inline-block; width: 33.33334%; padding: 15px; font-size: 16px;}
#shop-ctn ul li a { position: relative; display: block; padding: 5px; background: #745299; border-radius: 5px; color: #fff; text-decoration: none;}
#shop-ctn ul li a:hover { opacity: 0.8;}
#shop-ctn ul li a:before,
#shop-ctn ul li a:after { content: ''; display: block; position: absolute;}
#shop-ctn ul li a:before{ width: 27px; height: 40px; left: 16px; top: 50%; transform: translateY(-50%);
 background: url('../../img/color/shop/icn.png') no-repeat 50% 50% / 100% auto;
}
#shop-ctn ul li a:after { width: 4px; height: 4px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#shop-ctn ul li a span { display: block; padding: 15px 0; padding-left: 45px; border: solid 2px #a991c4; border-radius: 4px; font-weight: 700;}
#shop-ctn p { color: #858584; font-size: 10px; text-align: right;}
@media (max-width: 801px) {
	#shop-ctn ul li { padding: 10px; font-size: 14px;}
	#shop-ctn ul li a { padding: 3px;}
	#shop-ctn ul li a:before{ width: 20px; left: 12px;}
	#shop-ctn ul li a span { padding-left: 35px; border-width: 1px;}
}
@media (max-width: 641px) {
	#shop-ctn ul li { width: 50%;}
}
@media (max-width: 481px) {
	#shop-ctn { background-size: 600px auto;}
	#shop-ctn .inner { padding: 40px 0 30px;}
	#shop-ctn ul { margin: 0 auto 14px;}
	#shop-ctn ul li { padding: 6px; font-size: 12px;}
	#shop-ctn ul li a { padding: 2px; border-radius: 4px;}
	#shop-ctn ul li a:before{ width: 16px; left: 8px;}
	#shop-ctn ul li a:after { right: 12px;}
	#shop-ctn ul li a span { padding: 10px 0; padding-left: 25px; border-radius: 3px;}
}