/* SALOMON STATION ZAO — LP v2 (creative simplification). Same type and colour contract as the booking site
   (Barlow Semi Condensed 700, Helvetica, black/white, square CTAs, cubic-bezier(.4,0,.2,1)), but an editorial chrome:
   no pill, no numbered sections, no explanatory copy. The top is the S. Information lives behind MENU. */
@font-face{font-family:'Barlow Semi Condensed';font-weight:700;font-display:swap;src:url(/lp/assets/font/barlow-semi-condensed-700.woff2) format('woff2')}
:root{--ink:#000;--snow:#fff;--fog:#CDCCCC;--mute:#9ca3af;--sub:#555;--acc:#668499;--e:cubic-bezier(.4,0,.2,1);
 --d:'Barlow Semi Condensed','Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif;
 --b:'Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif;
 --g:clamp(16px,2.4vw,32px);--top:72px}
@view-transition{navigation:auto}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--top)}
body{margin:0;background:var(--snow);color:var(--ink);font:16px/24px var(--b);overflow-x:hidden}
html[lang=ja] body{line-height:1.7}
html.lock{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:fixed;left:10px;top:-60px;z-index:100;background:var(--ink);color:var(--snow);padding:12px 16px;font:700 16px/16px var(--d)}
.skip:focus{top:10px}

/* ---------- chrome: quiet type at the viewport edge; difference blend keeps it legible on white, black and photos ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);
 color:#fff;mix-blend-mode:difference;pointer-events:none}
.hd a,.hd button{pointer-events:auto;font:700 16px/16px var(--d);text-transform:uppercase;text-decoration:none;letter-spacing:.02em}
.hd .home{padding:14px 0}
.hd .r{display:flex;align-items:center;gap:22px;margin-left:auto}
.hd .lang{display:flex;gap:10px}
.hd .lang a{padding:14px 0;opacity:.42;transition:opacity .15s var(--e)}
.hd .lang a[aria-current],.hd .lang a:hover{opacity:1}
.hd .mb{padding:14px 0;min-width:56px;text-align:right}

/* ---------- MENU: full field, asymmetric giant names, cropped image on hover ---------- */
.mnu{position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--snow);padding:calc(var(--top) + 2vh) var(--g) 28px;display:flex;flex-direction:column;justify-content:center;
 clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--e),visibility 0s .5s;overflow:auto}
.mnu.open{clip-path:inset(0);visibility:visible;transition:clip-path .5s var(--e)}
.mnu ul{position:relative;z-index:2}
.mnu li{overflow:hidden}
.mnu .mi{display:inline-block;font:700 clamp(56px,min(11vw,14.5vh),168px)/.86 var(--d);text-transform:uppercase;text-decoration:none;
 transform:translateY(105%);transition:transform .6s var(--e),color .25s var(--e),translate .35s var(--e)}
.mnu.open .mi{transform:none}
.mnu li:nth-child(2) .mi{margin-left:11vw}
.mnu li:nth-child(3) .mi{margin-left:4vw}
.mnu li:nth-child(4) .mi{margin-left:17vw}
.mnu li:nth-child(5) .mi{margin-left:7vw}
.mnu.open li:nth-child(2) .mi{transition-delay:.04s,0s,0s}
.mnu.open li:nth-child(3) .mi{transition-delay:.08s,0s,0s}
.mnu.open li:nth-child(4) .mi{transition-delay:.12s,0s,0s}
.mnu.open li:nth-child(5) .mi{transition-delay:.16s,0s,0s}
.mnu ul:hover .mi{color:#3b3b3b}
.mnu ul .mi:hover,.mnu ul .mi:focus-visible{color:var(--snow);translate:2vw 0}
.mnu .mi[aria-current]{-webkit-text-stroke:1.5px var(--snow);color:transparent}
.mnu ul:hover .mi[aria-current]:not(:hover){-webkit-text-stroke-color:#3b3b3b}
.mimg{position:absolute;right:var(--g);top:50%;width:min(30vw,440px);aspect-ratio:4/5;transform:translateY(-50%);z-index:1;pointer-events:none;
 clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--e)}
.mimg.on{clip-path:inset(0)}
.mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--e)}
.mimg img.on{opacity:1}
.mnu .mf{position:relative;z-index:2;margin-top:4vh}

/* ---------- CTA (square) and coming-soon state ---------- */
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:15px 18px;background:var(--ink);color:var(--snow);
 font:700 22px/22px var(--d);text-transform:uppercase;text-decoration:none;transition:background-color .15s var(--e),color .15s var(--e)}
.cta:hover{background:#262626}
.cta.w{background:var(--snow);color:var(--ink)}.cta.w:hover{background:#e5e5e5}
.cta .ar{font-size:26px}
.cta.soon{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;cursor:default;background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.cta.soon:hover,.cta.w.soon:hover{background:transparent}
.cta.w.soon{background:transparent;color:var(--snow)}
.cta.soon .sn{font:13px/16px var(--b);text-transform:none}

/* ---------- HOME: S only ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;background:var(--snow);overflow:hidden;
 --sh:min(48vh,calc(76vw / 1.164),480px);transition:background-color .25s var(--e)}
body.inv .hero{background:var(--ink)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .sfb{position:absolute;left:50%;top:47%;height:var(--sh);width:auto;transform:translate(-50%,-50%)}
.hero.live .sfb{visibility:hidden}
.sbox{position:absolute;left:50%;top:47%;width:calc(var(--sh) * 1.25);height:calc(var(--sh) * 1.05);transform:translate(-50%,-50%);
 touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent}
.sbox:active{cursor:grabbing}
.sbox:focus-visible{outline:none}
.reveal{position:absolute;left:50%;top:calc(47% + var(--sh) / 2 + 18px);transform:translate(-50%,8px);opacity:0;visibility:hidden;
 transition:opacity .25s var(--e),transform .25s var(--e),visibility 0s .25s}
body.inv .reveal{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s var(--e),transform .25s var(--e)}
.reveal .cta{min-width:min(320px,80vw)}
.mark{position:absolute;left:50%;bottom:clamp(28px,5vh,52px);transform:translateX(-50%)}
.mark img{height:clamp(52px,8.4vh,78px);width:auto;transition:filter .25s var(--e)}
body.inv .mark img{filter:invert(1)}

/* ---------- sub pages ---------- */
.ph{padding:calc(var(--top) + clamp(40px,9vh,120px)) var(--g) clamp(32px,6vh,72px)}
.ph h1{font:700 clamp(96px,18vw,280px)/.78 var(--d);text-transform:uppercase;margin-left:-.05em}
.tax{font:700 13px/16px var(--d);text-transform:uppercase}

/* RENTAL: big official imagery + names */
.lineup{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);padding:0 var(--g)}
.lu{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.lu:nth-child(1){grid-column:1/8}
.lu:nth-child(2){grid-column:8/13;margin-top:22vh}
.lu:nth-child(3){grid-column:1/6}
.lu:nth-child(4){grid-column:6/13;margin-top:10vh}
.lu .ph2{position:relative;overflow:hidden;background:var(--fog);aspect-ratio:4/5}
.lu .ph2 img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.lu:hover .ph2 img{transform:scale(1.03)}
.lu .type{display:grid;place-items:center;background:var(--ink);color:var(--snow);font:700 clamp(72px,9vw,150px)/.8 var(--d);text-transform:uppercase;text-align:center}
.lu h2{font:700 clamp(52px,6.6vw,108px)/.84 var(--d);text-transform:uppercase}
.note{padding:clamp(40px,8vh,96px) var(--g) 0;font-size:12px;line-height:1.6;color:var(--sub)}

/* PRICE: rates explorer */
.rx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);padding:0 var(--g)}
.rx>*{min-width:0}
.rx .ctl{position:sticky;top:var(--top);align-self:start;display:flex;flex-direction:column;gap:14px}
.seg{display:grid;gap:2px}
.seg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.seg.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg button,.days button{min-height:48px;padding:0 8px;background:var(--snow);color:#6b6b6b;border:2px solid var(--ink);font:700 18px/18px var(--d);text-transform:uppercase;
 transition:background-color .15s var(--e),color .15s var(--e)}
.seg button small{display:block;font:700 12px/13px var(--d);margin-top:3px}
.seg button[aria-pressed=true],.days button[aria-pressed=true]{background:var(--ink);color:var(--snow)}
.seg button:hover,.days button:hover{color:var(--ink)}
.seg button[aria-pressed=true]:hover,.days button[aria-pressed=true]:hover{color:var(--snow)}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.lbl{font:700 13px/16px var(--d);text-transform:uppercase;margin-bottom:6px}
.days{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px}
.days button{padding:0;font-size:20px;min-width:0}
.big{border-top:2px solid var(--ink);padding-top:14px}
.big .v{font:700 clamp(84px,9.6vw,156px)/.82 var(--d);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big .w{font:700 15px/20px var(--d);text-transform:uppercase;margin-top:10px}
.rows{border-top:2px solid var(--ink)}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding:16px 0 14px;border-bottom:1px solid var(--ink)}
.rows b{display:block;font:700 clamp(26px,2.6vw,38px)/.95 var(--d);text-transform:uppercase}
.rows small{display:block;font-size:13px;line-height:18px;margin-top:6px;color:var(--sub)}
.rows .p{font:700 clamp(34px,3.4vw,52px)/.9 var(--d);font-variant-numeric:tabular-nums;white-space:nowrap}
.v.flip{animation:flip .25s var(--e)}
@keyframes flip{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* STORES: v1 cartography (adopted) + typography */
.st-wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(300px,4fr);gap:clamp(16px,2.4vw,40px);padding:0 var(--g)}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tabs button{min-height:48px;padding:0 10px;background:var(--snow);color:#6b6b6b;font:700 16px/16px var(--d);text-transform:uppercase;
 border:2px solid var(--ink);transition:background-color .15s var(--e),color .15s var(--e)}
.tabs button[aria-pressed=true]{background:var(--ink);color:var(--snow)}
.tabs button:hover{color:var(--ink)}.tabs button[aria-pressed=true]:hover{color:var(--snow)}
.mv{position:relative;height:min(78vh,760px);min-height:520px;overflow:hidden;background:var(--fog);touch-action:pan-y;margin-top:10px}
.cv{position:absolute;left:0;top:0;width:2976px;height:2164px;transform-origin:0 0;transition:transform .6s var(--e)}
.cv img{width:2976px;height:2164px;max-width:none}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;left:0;top:0;white-space:nowrap;transition:transform .6s var(--e),opacity .3s var(--e)}
.pin.hide{opacity:0}
.lm{display:flex;align-items:center;gap:6px;margin:-5px 0 0 -5px;font:700 13px/14px var(--d);text-transform:uppercase}
html[lang=ja] .lm{font:700 12px/14px var(--b)}
.lm i{width:10px;height:10px;background:var(--ink);border-radius:50%;flex:none}
.lm b{background:rgba(205,204,204,.9);padding:2px 4px;font-weight:700}
.lm.l{flex-direction:row-reverse}
.stp{display:flex;align-items:center;margin:-22px 0 0 -22px;pointer-events:auto;font:700 16px/16px var(--d);text-transform:uppercase}
.stp .sq{position:relative;width:44px;height:44px;display:grid;place-items:center;background:var(--ink);color:var(--snow);transition:background-color .25s var(--e),color .25s var(--e)}
.stp .nm{background:var(--ink);color:var(--snow);padding:14px 10px;margin-left:2px;transition:background-color .25s var(--e),color .25s var(--e)}
.stp.l{flex-direction:row-reverse}.stp.l .nm{margin:0 2px 0 0}
.stp.on .sq,.stp.on .nm{background:var(--acc);color:var(--ink)}
.stp.on .sq::after{content:"";position:absolute;inset:-10px;border:2px solid var(--acc);animation:ring 1.8s var(--e) infinite}
.stp.off{opacity:.5}
@keyframes ring{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.mv .n,.mv .sc{position:absolute;left:14px;background:var(--snow);font:700 13px/14px var(--d);padding:8px 10px;text-transform:uppercase}
.mv .n{top:14px}.mv .sc{bottom:14px}
.mv .sc b{display:block;height:7px;border:2px solid var(--ink);border-top:0;margin-top:6px;transition:width .6s var(--e)}
.legend{position:absolute;right:14px;bottom:14px;background:var(--snow);padding:10px 12px;font:700 12px/18px var(--d);text-transform:uppercase}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:26px;height:0;border-top:3px solid var(--ink)}
.legend .lf{border-top:2px dashed var(--ink)}.legend .lr{border-top:8px solid var(--snow);outline:1px solid #9a9a9a}.legend .lw{border-top:3px solid #80C0E0}.legend .lc{border-top:1px solid #8E8E8B}
.card{padding-top:4px}
.card .nm2{font:700 clamp(48px,5vw,80px)/.84 var(--d);text-transform:uppercase;margin-bottom:22px}
.card .ln{font:700 22px/1.3 var(--d);text-transform:uppercase}
.card .ad{font-size:15px;line-height:1.6;margin-top:14px;max-width:26em}
.card .maps{display:flex;gap:22px;margin-top:22px}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;width:100%;text-align:left;padding:16px 0;border-bottom:2px solid var(--ink);font:700 clamp(30px,3vw,46px)/.9 var(--d);text-transform:uppercase}
.sumrow:first-of-type{border-top:2px solid var(--ink)}
.sumrow .go{font-size:.6em;transition:transform .25s var(--e)}
.sumrow:hover .go{transform:translateX(6px)}
.credit{padding:10px var(--g) 0;font-size:12px;line-height:16px;color:var(--sub)}

/* ABOUT: facts as type */
.facts2{padding:0 var(--g);display:flex;flex-direction:column;gap:clamp(28px,6vh,72px)}
.facts2 p{font:700 clamp(46px,8.6vw,150px)/.86 var(--d);text-transform:uppercase}
.facts2 p:nth-child(2n){align-self:flex-end;text-align:right}

/* INFO: a few short answers */
.info{padding:0 var(--g);max-width:1100px}
.info div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:20px;padding:16px 0;border-top:2px solid var(--ink)}
.info div:last-child{border-bottom:2px solid var(--ink)}
.info dt{font:700 22px/1.2 var(--d);text-transform:uppercase}
html[lang=ja] .info dt{font:700 17px/1.5 var(--b)}
.info .more{margin-top:28px}

/* ---------- FINAL BOOK ---------- */
.fin{background:var(--ink);color:var(--snow);margin-top:clamp(96px,14vh,180px);padding:clamp(56px,9vh,112px) var(--g) 0}
.fin h2{font:700 clamp(72px,12.6vw,236px)/.8 var(--d);text-transform:uppercase;margin-left:-.04em}
.fin .acts{margin-top:clamp(28px,5vh,56px)}
.fin .acts .cta{min-width:min(320px,100%)}
.fin .fph{margin:clamp(48px,8vh,96px) calc(var(--g) * -1) 0}
.fin picture img{width:100%;height:auto;aspect-ratio:3200/888;object-fit:cover}

/* ---------- footer: one quiet line ---------- */
.ft{padding:clamp(48px,8vh,96px) var(--g) clamp(28px,5vh,48px);font-size:12px;line-height:1.6;color:var(--sub)}

.rv{opacity:0;transform:translateY(18px);transition:opacity .5s var(--e),transform .5s var(--e)}
.rv.in{opacity:1;transform:none}

@media (max-width:767px){
 :root{--top:60px}
 .hd .r{gap:16px}
 .hero{--sh:min(42vh,calc(78vw / 1.164))}
 .mnu .mi{font-size:clamp(52px,min(17vw,11vh),96px)}
 .mnu li:nth-child(2) .mi{margin-left:9vw}.mnu li:nth-child(3) .mi{margin-left:3vw}.mnu li:nth-child(4) .mi{margin-left:13vw}.mnu li:nth-child(5) .mi{margin-left:6vw}
 .lineup{grid-template-columns:1fr;gap:56px}
 .lu:nth-child(n){grid-column:auto;margin-top:0}
 .st-wrap{grid-template-columns:1fr}
 .tabs{position:sticky;top:var(--top);z-index:5;background:var(--snow);padding:4px 0}
 .tabs::before,.days::before{content:"";position:absolute;left:calc(var(--g) * -1);right:calc(var(--g) * -1);bottom:100%;height:var(--top);background:var(--snow)}
 .mv{height:min(118vw,600px);min-height:420px}
 .legend{display:none}
 .card{padding-top:20px}
 .rx{grid-template-columns:1fr}
 .rx .ctl{position:static}
 .days{position:sticky;top:var(--top);z-index:5;display:flex;overflow-x:auto;overflow-y:visible;scrollbar-width:none;background:var(--snow);padding:4px var(--g);margin:0 calc(var(--g) * -1)}
 .days::before{left:0;right:0}
 .days::-webkit-scrollbar{display:none}
 .days button{flex:0 0 52px}
 .facts2 p:nth-child(2n){align-self:flex-start;text-align:left}
 .info div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:767px),(hover:none){.mimg{display:none}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
 .rv{opacity:1;transform:none}
 .mnu .mi{transform:none}
 @view-transition{navigation:none}
}