@charset "utf-8";
body { color: #621a14;}
#hd .menu { background: #fcceb9;}
.menu-trig div span { background: #621a14;}
.menu-cart a svg { fill: #621a14;}

@keyframes waves{
   0% { background-position: 0% 100%;}
 100% { background-position: -1280px 100%;}
}
@keyframes wavesSp{
   0% { background-position-x: 0%;}
 100% { background-position-x: -800px;}
}

.wrap { width: 100%; max-width: 1280px; margin: 0 auto;}
.kv-shop { position: relative; background: url('../../img/creamy/shop/bg-kv.jpg') no-repeat 50% 50% / cover;}
.kv-shop:before { content: ''; display: block; width: 100%; max-width: 1280px; height: 60px; position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
 background: url('../../img/creamy/wave-hd.png') repeat-x 50% 100% / 100% 100%; opacity: 0.8; animation: 10s waves linear infinite;
}
.kv-shop .inner-kv { width: 92%; margin: 0 auto; padding: 140px 0 70px; text-align: center;}
.kv-shop h2 { margin-bottom: 10px; color: #621a14; font-size: 46px; text-shadow: 0 0 10px #fff, 0 0 10px #fff;}
.kv-shop p { color: #621a14; font-weight: 700; text-shadow: 0 0 10px #fff, 0 0 10px #fff;}
.kv-shop p.txt { margin-bottom: 10px; font-size: 24px;}
.kv-shop p.note{ font-size: 14px;}
@media (max-width: 481px) {
	.kv-shop:before { height: 40px; top: 0px; background: url('../../img/creamy/wave-hd-sp.png') repeat-x 50% 100% / 800px 100%; animation: 10s wavesSp linear infinite;}
	.kv-shop .inner-kv { padding: 80px 0 60px;}
	.kv-shop h2 { font-size: 36px;}
	.kv-shop p.txt { font-size: 20px;}
	.kv-shop p.note{ font-size: 12px;}
}

.shoplist { background: url('../../img/creamy/shop/bg-shop.jpg') no-repeat 50% 0 / cover;}
.shoplist .inner { width: 92%; margin: 0 auto; padding: 60px 0;}
.shoplist ul { width: 100%; max-width: 880px; margin: 0 auto; font-size: 0;}
.shoplist ul li { display: inline-block; width: 33%; padding: 15px 0;}
.shoplist ul li a { position: relative; display: block; width: 94%; margin: 0 auto; padding: 6px; background: #fcceb9; border-radius: 5px; box-shadow: 0 0 15px #ccc; color: #621a14; text-decoration: none;}
.shoplist ul li a:after { content: ''; display: block; width: 5px; height: 5px; border-top: solid 2px #42220f; border-right: solid 2px #42220f;
 position: absolute; right: 20px; top: 50%; transform: translate(0,-50%) rotate(45deg);
}
.shoplist ul li a span { position: relative; z-index: 2; display: block; width: 100%; padding: 16px; padding-left: 50px;
 border: solid 1px #f97338; border-radius: 5px; background: url('../../img/creamy/shop/icn-logo.png') no-repeat 10px 50% / auto 55%; font-size: 16px; font-weight: 700;
}
.shoplist ul li a:hover { opacity: 0.85;}
@media (max-width: 801px) {
	.shoplist ul li { width: 50%; padding: 10px 0;}
}
@media (max-width: 481px) {
	.shoplist .inner { padding: 40px 0;}
	.shoplist ul li { padding: 6px 0;}
	.shoplist ul li a { padding: 3px;}
	.shoplist ul li a:after { width: 4px; height: 4px; right: 10px; border-width: 1px;}
	.shoplist ul li a span { padding: 8px; padding-left: 20px; background-position: 4px 50%; background-size: 12px auto; border-radius: 3px; font-size: 12px;}
}