:root{
	--body:clamp(240px, 100vw, 520px);
	--w:calc(var(--body) / 10);
	--c:#151953;
	--map:100vh - (var(--w) * 2.55 - .5vh);
}

html {font-size:clamp(12.5px, 5vw, 26px); background-color:#f1f1f1; scroll-behavior:smooth;}
body {width:var(--body); background-color:#fff; padding:0; margin:0 auto; overflow-wrap:break-word; box-sizing:border-box; position:relative;}
html.lock, body.lock {overflow:hidden;}

.header {background-color:var(--c); position:relative; width:100%; height:auto;}
.header .headerLogo img {width:100%; position:relative;}
.header .headerImage {width:74%; height:calc(var(--w) * 6.8); position:relative; margin:auto; background-color:#fff; border-radius:var(--w) var(--w) 0 0; overflow:hidden;}
.header .headerImage img {width:100%; position:relative; object-fit:cover;}

.headerTitle {text-align:center; font-weight:normal; font-size:1.1rem; margin:.6rem; letter-spacing:.25rem; position:relative;}
.btnMenu {display:flex; flex-flow:nowrap; justify-content:space-between; width:100%; height:auto; flex-wrap:nowrap; flex-direction:row;}
.btnMenu img {width:48%; height:auto; box-shadow:0px calc(var(--w) * .08) calc(var(--w) * .1) 0px #aaa;}

.headerQr {width:100%; position:relative; text-align:center; margin:calc(var(--w) * .5) 0;}
.headerQr img {width:40%;}

.listHeader {width:100%; position:relative; background-color:var(--c); text-align:center; padding:calc(var(--w) * .5) 0;}
.listHeader img {width:25%;}

.storeList {display:flex; padding:calc(var(--w) * .28) 0 calc(var(--w) * 2) 0; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}
.storeList .storeDiv {width:47%; margin:0 0 4% 2%; position:relative;}
.storeList .storeDiv .storeImage {width:100%; height:calc(var(--w) * 2.55); object-fit:cover; object-position:top;}
.storeList .storeDiv .storeName {font-size:.76rem; font-weight:800; background-image:url(/static/image/ast/5.png); background-repeat:no-repeat; background-size:auto 62%; background-position:-.5% center; padding:0 0 0 .9rem; height:1.2rem; line-height:1.2rem;}
.storeList .storeDiv .storeTime {font-size:.64rem; background-image:url(/static/image/ast/6.png); background-repeat:no-repeat; background-size:auto 90%; background-position:-2% center; padding:0 0 0 .9rem; height:1rem; line-height:1rem; font-family:"Andada Pro";}
.storeList .storeDiv .storeDesc {font-size:.62rem; background-image:url("/static/image/ast/7.png"); background-repeat:no-repeat; background-size:auto 66%; background-position:left center; padding:0 0 0 .9rem; height:1rem; line-height:1rem; font-family:"Andada Pro";}
.storeList .storeDiv .storeUrl {position:absolute; width:1.6rem; bottom:0; right:0;}

#mapDiv {position:fixed; top:0; transform:translateY(calc(-100% - 5px)); width:var(--body); height:auto; z-index:1; margin:auto; opacity:1; transition:all .5s ease; background-color:#fff; opacity:0;}
#mapDiv.init {transition:unset !important; opacity:0;}
#mapDiv.show {transform:translateY(0); opacity:1;}
#mapDiv.all #map {height:calc(100vh - 3rem);}
#mapDiv .mapHeader {height:2rem; font-size:.9rem; text-align:center; line-height:2rem; background-color:var(--c); color:#fff; position:relative;}
#mapDiv.all .mapHeader {height:3rem; line-height:3rem;}
#mapDiv .mapHeader::before, #mapDiv .mapHeader::after {content:""; position:absolute; top:50%; right:0rem; width:1rem; height:1px; background:#eee; transform-origin:center; border-radius:10px;}
#mapDiv .mapHeader::before {transform: translate(-50%, -50%) rotate(45deg);}
#mapDiv .mapHeader::after {transform: translate(-50%, -50%) rotate(-45deg);}
#map {width:100%; height:calc(100vh - (var(--w) * 2.55) - 3rem); height:calc(100dvh - (var(--w) * 2.55) - 3rem);}
#mapFooter {position:fixed; bottom:0; transform:translateY(calc(100% + 5px)); width:var(--body); z-index:1; margin:auto; opacity:1; transition:all .5s ease; background-color:#fff; border-top:1px solid #ddd; opacity:0;}
#mapFooter.show {transform:translateY(0); opacity:1;}
#mapFooter {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; height:calc(var(--w) * 2.55 + 1rem);}
#mapFooter .storeImage {width:45%; height:100%; object-fit:cover; object-position:top center;}
#mapFooter .storeDiv {flex:1; position:relative; height:100%; overflow:hidden; font-size:.8rem; line-height:1rem; padding-left:.5rem;}
#mapFooter .storeDiv .storeName {background-image:url(/static/image/ast/5.png); background-repeat:no-repeat; background-size:auto 80%; background-position:-1% center; padding:0 0 0 1rem; line-height:1.2rem;}
#mapFooter .storeDiv .storeTime {background-image:url(/static/image/ast/6.png); background-repeat:no-repeat; background-size:auto 110%; background-position:-2.5% center; padding:0 0 0 1rem; font-family:"Andada Pro";}
#mapFooter .storeDiv .storeTel {background-image:url(/static/image/ast/8.png); background-repeat:no-repeat; background-size:auto 90%; background-position:0% center; padding:0 0 0 1rem; font-family:"Andada Pro";}
#mapFooter .storeDiv .storeUrl {position:absolute; width:2rem; bottom:0; right:0;}
#mapFooter .storeDiv .storeAddr {position:absolute; bottom:.2rem; left:.5rem; width:calc(100% - 1rem); line-height:1rem; word-break:break-all;}
#mapFooter .route {z-index:1; position:fixed; bottom:.2rem; left:.2rem; background-color:#fff; box-shadow:0px 1px 3px rgba(0,0,0,.2); border-radius:50%; width:1.8rem; height:1.8rem; justify-content:center; align-items:center; display:flex;}

.footer {background-color:var(--c); height:15vh; width:100%; background-image:url(/static/image/ast/0.png); background-repeat:no-repeat; background-position:center; background-size:auto 90%;}
.svg {width:1.2rem; height:1.2rem;}