:root { color-scheme: dark; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #fff8ef; background: #1b120c; }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; min-width: 320px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #efba80; outline-offset: 6px; }
.club-film { position: relative; }
.club-film.is-scroll-ready { height: 460svh; }
.club-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.is-scroll-ready .club-stage { position: sticky; top: 0; }
.club-media, .club-media picture, .club-media img, .club-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.club-media img { object-fit: cover; }
.club-media canvas { opacity: 0; }
.has-frame .club-media canvas { opacity: 1; }
.club-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#120b0790, transparent 24%, transparent 80%, #120b0730); z-index: 1; }
.club-wordmark { position: absolute; top: 44%; left: 50%; z-index: 2; width: min(84vw, 900px); margin: 0; transform: translate(-50%, -50%); pointer-events: none; }
.club-wordmark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 10px #120a0670); }
.is-scroll-ready .club-wordmark { opacity: var(--wordmark-opacity, 1); }
/* Keep an animation bypass for keyboard users without a persistent header. */
.store-skip { position: fixed; top: 16px; left: 16px; z-index: 10; padding: 12px 18px; background: #1b120c; font-size: 12px; transform: translateY(-200%); }
.store-skip:focus { transform: none; }
.scroll-hint { display: none; }
.is-scroll-ready .scroll-hint { display: flex; position: absolute; bottom: 34px; left: clamp(24px, 4vw, 64px); z-index: 2; align-items: center; gap: 14px; margin: 0; font: 10px/1.5 "Courier New", monospace; letter-spacing: .19em; opacity: var(--hint-opacity, 1); }
.scroll-hint > span { width: 46px; height: 1px; background: currentColor; }
.store-bar { position: absolute; inset: auto 0 0; z-index: 4; padding: 70px 24px max(26px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, #21160e60 15%, #21160ee8 40%, #1b120cf7 73%, #1b120c 100%); }
.store-bar-content { width: min(760px, 100%); margin: 0 auto; }
.store-options { display: grid; grid-template-columns: 1fr 1fr; }
.store-option { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 0 20px 8px; position: relative; }
.store-option + .store-option::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 10%; width: 1px; background: #e3c7aa40; }
.store-option--mitaka { --store-accent: #dc432d; --store-logo-mask: url("../images/brand/common-mitaka-store-logo-20260925.png"); }
.store-option--nishi { --store-accent: #4b9843; --store-logo-mask: url("../images/new-store/nishishinjuku-hero-logo.png"); }
/* Both 500px logo images use the same circular emblem bounds and alignment. */
.store-mark { --circle-size: 92px; position: relative; width: 190px; height: 158px; }
.store-mark img { position: absolute; display: block; left: 50%; top: 58%; width: calc(var(--circle-size) * 1.77054); max-width: none; height: auto; transform: translate(-49.76%, -57.92%); }
.store-mark::after { content: ""; position: absolute; left: 50%; top: 58%; z-index: 1; width: calc(var(--circle-size) * 1.77054); aspect-ratio: 1; transform: translate(-49.76%, -57.92%); background: var(--store-accent); -webkit-mask: var(--store-logo-mask) center / contain no-repeat; mask: var(--store-logo-mask) center / contain no-repeat; opacity: var(--links-opacity, 1); pointer-events: none; }
.store-pepper-symbols { position: absolute; }
.store-pepper { position: absolute; right: -7px; bottom: 1px; z-index: 2; display: block; width: 56px; height: 76px; color: var(--store-accent); opacity: var(--links-opacity, 1); filter: drop-shadow(0 2px 5px #120b07a8); pointer-events: none; }
.store-name { position: relative; display: block; width: min(240px, 100%); height: 40px; margin-top: 4px; overflow: hidden; }
.store-name img { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: auto; transform: translateY(-50%); filter: drop-shadow(0 1px 4px #120b07b0); }
/* The Nishishinjuku artwork has shorter visible glyphs within the same canvas. */
.store-option--nishi .store-name { width: min(281px, 100%); }
.store-link-label { margin-top: 10px; font-size: 10px; letter-spacing: .12em; color: #d5b89a; }
.store-link-label > span { margin-left: 8px; }
.store-option:hover .store-name img { opacity: .84; }
.is-scroll-ready .store-bar { opacity: var(--bar-opacity, 0); transform: translateY(var(--bar-offset, 48px)); }
.is-scroll-ready .store-bar-content { opacity: var(--links-opacity, 0); }
@media (min-width: 701px) {
  /* Keep the pot visible; concentrate the shade behind the labels at the bottom. */
  .store-bar { padding: 32px 24px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, #21160e0a 20%, #21160e26 45%, #1b120c7a 75%, #1b120cbd 100%); }
  .store-mark { height: 144px; }
  .store-mark::after { display: none; }
  .store-mark img { filter: drop-shadow(0 2px 4px #120b0780); }
  .store-name { margin-top: 0; }
  .store-link-label { margin-top: 8px; color: #f2dfc7; text-shadow: 0 1px 4px #120b07e6; }
}
@media (max-width: 700px) {
  .club-wordmark { width: 96vw; }
  .store-bar { padding: 60px 12px max(24px, env(safe-area-inset-bottom)); }
  .store-option { padding: 0 6px 4px; }
  .store-mark { --circle-size: 72px; width: 142px; height: 118px; }
  .store-pepper { right: -5px; bottom: -2px; width: 43px; height: 59px; }
  .store-name { width: min(85.54%, 150px); height: 32px; margin-top: 3px; }
  .store-option--nishi .store-name { width: min(100%, 175.4px); }
  .store-link-label { font-size: 9px; margin-top: 8px; }
  .is-scroll-ready .scroll-hint { bottom: 28px; left: 20px; font-size: 9px; }
}
@media (max-height: 550px) and (min-width: 701px) {
  .club-wordmark { top: 30%; width: min(56vw, 470px); }
  .store-bar { padding-top: 24px; padding-bottom: 16px; }
  .store-mark { --circle-size: 64px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .club-film.is-scroll-ready { height: auto; }
  .is-scroll-ready .club-stage { position: relative; }
  .is-scroll-ready .store-bar, .is-scroll-ready .store-bar-content { opacity: 1; transform: none; }
  .is-scroll-ready .club-wordmark { opacity: 1; }
  .is-scroll-ready .scroll-hint { display: none; }
}