/* SoPii PARK(試作)。手本は Apple Music: 白地に色は1つだけ、エリアは太字の文字のタブ(2026-10-20 SP が A を選んだ)。
   色は画面の写しにまかせ、札は白地に黒い字。角は4px(docs/DESIGN.md)。 */
:root{
  --ji:#fff; --men:#f5f5f2; --moji:#1d2025; --hai:#5b5f66; --kei:#e6e4de;
  --shiro:#fff; --iro:#d93a2b;
  --en:"Inter",system-ui,sans-serif;
  --kanban:"Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ji);color:var(--moji);font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.7}
img{display:block;max-width:100%}
a{color:inherit}

/* ゲート */
.gate{background:var(--ji);position:relative;overflow:hidden;border-bottom:1px solid var(--kei)}
.gate-in{max-width:720px;margin:0 auto;padding:36px 20px 28px}
.welcome{margin:0;font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--iro)}
h1{margin:8px 0 0;line-height:1}
h1 .en{display:block;font-family:var(--kanban);font-weight:700;font-size:56px;letter-spacing:-.01em;line-height:1.05}
h1 .ja{display:block;margin-top:12px;font-size:16px;font-weight:700;letter-spacing:.08em;color:var(--hai)}
.gate-lead{margin:22px 0 0;font-size:16px;line-height:1.8;max-width:30em}
.gate-nums{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 0;border-top:1px solid var(--moji);border-bottom:1px solid var(--kei)}
.gate-nums div{padding:12px 0 10px 12px;border-right:1px solid var(--kei)}
.gate-nums div:first-child{padding-left:0}
.gate-nums div:last-child{border-right:0}
.gate-nums dt{font-size:11px;color:var(--hai);font-weight:700}
.gate-nums dd{margin:2px 0 0;font-family:var(--kanban);font-weight:700;font-size:28px;line-height:1.1}
.ticket{display:flex;margin-top:28px;text-decoration:none;color:#fff;background:var(--iro);border-radius:4px;max-width:340px;transition:transform .15s ease}
.ticket:active{transform:scale(.98)}
.t-main{flex:1;padding:14px 16px;display:flex;flex-direction:column}
.t-k{font-size:20px;font-weight:700;line-height:1.2}
.t-v{font-family:var(--en);font-weight:900;font-size:12px;letter-spacing:.28em;margin-top:4px}
.t-stub{width:84px;border-left:2px dashed rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:15px;line-height:1.3}
.pick-h{margin:28px 0 0;font-weight:700;font-size:18px}
.gate-tiles{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* 見出しの共通 */
.sec-en{margin:0;font-family:var(--en);font-weight:900;font-size:12px;letter-spacing:.3em;color:var(--hai)}
h2{margin:2px 0 6px;font-size:28px;font-weight:900;line-height:1.3}
.sec-lead{margin:0;color:var(--hai);font-size:14px}
main{max-width:720px;margin:0 auto}

/* カタログ: エリアの大きな札(横に流す)+しぼり込みのボタン */
.cat{padding:40px 0 28px}
.cat>.sec-en,.cat>h2,.cat>.sec-lead{padding:0 20px}
.banners{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:18px 20px 0;scroll-padding:0 20px;border-bottom:1px solid var(--kei);margin:0 0 0}
.banners::-webkit-scrollbar{display:none}
.banner{all:unset;box-sizing:border-box;flex:none;cursor:pointer;font-weight:900;font-size:18px;line-height:1.2;padding:4px 0 10px;color:var(--hai);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.banner[aria-pressed="true"]{color:var(--moji);border-bottom-color:var(--iro)}
.banner:focus-visible{outline:2px solid var(--moji);outline-offset:2px}
.pills{display:flex;flex-wrap:wrap;gap:6px;padding:14px 20px 0}
.pill{all:unset;cursor:pointer;font-size:13px;font-weight:700;padding:5px 12px;border-radius:4px;background:var(--shiro);border:1px solid var(--kei);color:var(--hai)}
.pill[aria-pressed="true"]{border-color:var(--moji);color:var(--moji);font-weight:900}
.pill:focus-visible{outline:2px solid var(--moji);outline-offset:2px}
.cat-count{margin:10px 20px 0;font-family:var(--en);font-weight:900;font-size:13px;color:var(--hai)}

/* エリアのまとまり */
.land{padding:22px 0 0}
.land[hidden],.tiles li[hidden]{display:none}
.g-head{margin:0 16px;padding:0;font-family:var(--kanban);font-weight:700;font-size:20px;line-height:1.3}
.land-lead{margin:6px 16px 0;font-size:13px;color:var(--hai)}

/* 札: 実際の画面の見どころ+黒い字の名前。色は画面の写しにまかせる */
.tiles{list-style:none;margin:14px 0 0;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 10px}
.tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;position:relative;color:var(--moji);cursor:pointer;transition:transform .15s ease}
.tile:active{transform:scale(.97)}
.tile:focus-visible{outline:2px solid var(--moji);outline-offset:3px}
.t-img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;background:#fff;border-radius:4px;border:1px solid var(--kei)}
.t-name{padding:6px 1px 0;font-weight:700;font-size:13px;line-height:1.3}
.t-name.long{font-size:11px;letter-spacing:-.02em}
.t-tag{position:absolute;left:5px;top:5px;font-size:10px;font-weight:900;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.94);color:var(--moji);border:1px solid var(--kei)}
.tile.sm .t-name{font-size:12px;padding-top:5px}

/* 案内所 */
.info{padding:40px 20px 36px;border-top:1px solid var(--kei)}
.info p{margin:8px 0 0}
.info-t{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.info-t th,.info-t td{border-top:1px solid var(--kei);padding:10px 4px;text-align:left;vertical-align:top}
.info-t th{width:6em;white-space:nowrap;font-weight:900}
.ask{margin-top:28px;border-top:1px solid var(--moji);padding:20px 0 0}
.ask-en{margin:0!important;font-family:var(--en);font-weight:900;font-size:11px;letter-spacing:.3em;color:var(--iro)}
.ask-h{margin:4px 0 0!important;font-family:var(--kanban);font-weight:700;font-size:24px;line-height:1.35}
.ask-go{display:block;margin-top:16px;background:var(--iro);color:#fff;text-align:center;text-decoration:none;font-weight:900;font-size:17px;padding:14px;border-radius:4px}
.foot{background:var(--men);padding:24px 20px 36px;font-size:13px;border-top:1px solid var(--kei)}
.foot p{max-width:720px;margin:0 auto}
.foot-s{margin-top:6px!important;color:var(--hai);font-size:12px}

/* アトラクションの紙(下から出る)。画面の写しはここだけ */
.sheet{position:fixed;inset:0;background:rgba(28,42,46,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet[hidden]{display:none}
.sheet-in{background:var(--ji);border-radius:4px 4px 0 0;width:100%;max-width:560px;max-height:94vh;overflow:auto;padding:0 20px calc(24px + env(safe-area-inset-bottom));position:relative;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.d-band{height:18px}
.d-close{position:absolute;top:22px;right:14px;background:var(--ji);border:1px solid var(--kei);border-radius:4px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--moji);cursor:pointer;z-index:1}
.d-land{margin:0;padding-right:84px;font-family:var(--en);font-weight:900;font-size:11px;letter-spacing:.1em;color:var(--iro)}
h3{margin:4px 0 2px;font-family:var(--kanban);font-weight:700;font-size:28px;line-height:1.3}
.d-catch{margin:0;font-size:15px;font-weight:700;color:var(--hai)}
.d-what{margin:16px 0 0;font-size:15px}
.d-shot{margin:16px 0 0;width:160px;aspect-ratio:3/4;overflow:hidden;border-radius:4px;border:1px solid var(--kei);background:#fff}
.d-shot img{width:100%;height:auto}
.d-tech{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.d-tech li{font-size:12px;font-weight:700;border:1px solid var(--kei);border-radius:4px;padding:2px 8px;background:var(--shiro)}
.d-go{display:block;margin-top:20px;background:var(--iro);color:#fff;text-align:center;text-decoration:none;font-weight:900;font-size:17px;padding:15px;border-radius:4px}
.d-go[hidden]{display:none}
.d-only{margin:18px 0 0;font-size:13px;color:var(--hai);border-top:1px solid var(--kei);padding-top:12px}