:root {
  --navy-950: #07152e;
  --navy-900: #0d2041;
  --blue-600: #245ba7;
  --blue-100: #e8f0fb;
  --yellow: #f2e600;
  --white: #fff;
  --paper: #f5f7fa;
  --ink: #101d35;
  --ink-sub: #566378;
  --line: #dce2eb;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Squada One", "Arial Narrow", sans-serif;
  --header-h: 64px;
  --mobile-w: 430px;
  --gutter: 24px;
  --section-y: 88px;
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-small: 8px;
  --radius-cta: 12px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--navy-950); color: var(--navy-950); font-family: var(--font-jp); font-size: 16px; font-synthesis-weight: none; line-height: 1.8; word-break: normal; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.site-shell { position: relative; z-index: 2; width: min(100%, var(--mobile-w)); margin: 0 auto; padding-top: var(--header-h); overflow: hidden; background: var(--white); box-shadow: 0 0 60px rgba(0, 5, 18, .48); }
.site-header { position: fixed; z-index: 100; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; width: min(100%, var(--mobile-w)); height: var(--header-h); transform: translateX(-50%); background: rgba(7, 21, 46, .96); backdrop-filter: blur(14px); transition: box-shadow .3s ease, background .3s ease; }
.site-header.is-scrolled { background: rgba(7, 21, 46, .995); box-shadow: 0 10px 28px rgba(0, 0, 0, .26); }
.site-header__logo { display: inline-flex; align-items: center; height: 42px; }
.site-header__logo img { width: auto; height: 100%; }

.desktop-stage { position: fixed; z-index: 0; inset: 0; background: var(--navy-950) url("assets/20270122-bg.jpg") center / cover no-repeat; pointer-events: none; }
.desktop-stage__emblem { position: absolute; top: 36px; right: clamp(28px, 4vw, 64px); width: clamp(78px, 7vw, 112px); filter: drop-shadow(0 12px 26px rgba(0,0,0,.38)); }
.desktop-match { position: absolute; bottom: 21px; display: flex; flex-direction: column; width: calc((100vw - var(--mobile-w)) / 2); color: var(--white); text-shadow: 0 3px 18px rgba(0,0,0,.7); }
.desktop-match--left { left: 0; align-items: flex-start; padding: 0 clamp(22px, 3.5vw, 56px); }
.desktop-match--right { right: 0; align-items: flex-end; padding: 0 clamp(22px, 3.5vw, 56px); text-align: right; }
.desktop-match__date-card { display: block; width: min(260px, 100%); max-width: 100%; height: auto; margin-top: 12px; }
.desktop-match__opponent { width: 100%; margin-top: 10px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.42); font-size: clamp(12px, 1.1vw, 16px); font-weight: 800; line-height: 1.55; }
.desktop-match__opponent b { color: var(--yellow); font-family: var(--font-en); font-size: 1.18em; font-weight: 900; }

.hero { position: relative; overflow: hidden; background: var(--navy-950); color: var(--white); }
.hero__image { width: 100%; height: auto; }
.match-schedule { position: relative; padding: 42px var(--gutter) 72px; overflow: hidden; background: var(--navy-900); }
.match-schedule::before { content: ""; position: absolute; top: 90px; right: -110px; width: 300px; height: 620px; background: rgba(36,91,167,.2); transform: rotate(16deg); }
.match-schedule__league { position: relative; z-index: 1; display: grid; gap: 0; margin: 0; color: var(--yellow); font-family: var(--font-en); font-size: 26px; font-weight: 800; line-height: 1.2; }
.match-schedule__season { white-space: nowrap; }
.match-schedule__league span:last-child { color: rgba(255,255,255,.8); font-size: 30px; letter-spacing: .06em; }
.match-schedule h2 { position: relative; z-index: 1; margin: 8px 0 32px; font-family: var(--font-en); font-size: clamp(56px, 16vw, 70px); font-weight: 900; line-height: .82; letter-spacing: -.04em; }
.match-schedule__list { position: relative; z-index: 1; display: grid; gap: 38px; }
.match-schedule__item { color: var(--white); }
.match-schedule__item + .match-schedule__item { padding-top: 38px; border-top: 1px solid rgba(255,255,255,.2); }
.match-schedule__matchup { display: grid; grid-template-columns: minmax(98px, .43fr) minmax(0, 1fr); align-items: center; gap: 8px; }
.match-schedule__date-card { justify-self: end; width: min(198px, calc(100vw - 144px)); max-width: 100%; }
.match-schedule__date-card img { width: 100%; max-width: none; height: auto; }
.match-schedule__date-card--day2 { width: min(187px, calc(100vw - 154px)); }
.match-schedule__opponent-logo { width: 100%; max-height: 88px; object-fit: contain; }
.match-schedule__opponent { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); font-size: 18px; font-weight: 800; line-height: 1.5; text-align: center; }
.match-schedule__opponent span { color: var(--yellow); font-family: var(--font-en); font-size: 22px; font-weight: 900; }
.match-schedule__venue { margin: 2px 0 0; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 700; text-align: center; }
.lead { position: relative; display: grid; min-height: 920px; padding: 112px var(--gutter); overflow: hidden; background: var(--navy-950); color: var(--white); }
.lead::before { content: ""; position: absolute; inset: -5%; background: url("assets/about-bg.jpg") center / cover no-repeat; transform: scale(1.09); transition: transform 8s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.lead.is-visible::before { transform: scale(1.01); }
.lead__shade { position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 76% 38%, rgba(20,75,121,.1), transparent 40%), linear-gradient(180deg, rgba(2,10,25,.54), rgba(2,10,25,.14) 38%, rgba(2,10,25,.84)); }
.lead-copy { position: relative; z-index: 2; align-self: center; font-size: clamp(19px, 5.3vw, 21px); font-weight: 600; line-height: 1.98; letter-spacing: .015em; text-shadow: 0 3px 22px rgba(0,0,0,.82); }
.lead-copy__group { margin: 0 0 50px; }
.lead-copy__group:first-child { margin-bottom: 58px; font-size: clamp(23px, 6.2vw, 26px); font-weight: 700; line-height: 1.72; letter-spacing: .025em; }
.lead-copy__group--last { position: relative; margin: 78px 0 0; padding-top: 22px; font-size: clamp(21px, 5.7vw, 24px); font-weight: 700; letter-spacing: .025em; }
.lead-copy__group--last::before { content: ""; position: absolute; top: 0; left: 0; width: 38px; height: 4px; background: var(--yellow); transform: skewX(-22deg); }
.lead-copy p { margin: 0; }
.lead-copy p.lead-copy__bridge { margin-top: .9em; }
.lead-copy__phrase { display: block; }
.lead.is-motion-ready .lead-copy p { opacity: 0; filter: blur(12px); transform: translateY(30px); transition: opacity 1.55s ease, filter 1.65s ease, transform 1.8s var(--ease-out); }
.lead.is-motion-ready .lead-copy__group:nth-child(1) p:nth-child(1) { transition-delay: .08s; }
.lead.is-motion-ready .lead-copy__group:nth-child(1) p:nth-child(2) { transition-delay: .38s; }
.lead.is-motion-ready .lead-copy__group:nth-child(2) p:nth-child(1) { transition-delay: .9s; }
.lead.is-motion-ready .lead-copy__group:nth-child(2) p:nth-child(2) { transition-delay: 1.22s; }
.lead.is-motion-ready .lead-copy__group:nth-child(3) p:nth-child(1) { transition-delay: 1.78s; }
.lead.is-motion-ready .lead-copy__group:nth-child(3) p:nth-child(2) { transition-delay: 2.12s; }
.lead.is-motion-ready .lead-copy__group:nth-child(3) p:nth-child(3) { transition-delay: 2.46s; }
.lead.is-motion-ready .lead-copy__group:nth-child(4) p:nth-child(1) { transition-delay: 3.04s; }
.lead.is-motion-ready .lead-copy__group:nth-child(4) p:nth-child(2) { transition-delay: 3.38s; }
.lead.is-motion-ready.is-visible .lead-copy p { opacity: 1; filter: blur(0); transform: translateY(0); }

.hero-video { background: #000; }
.hero-video__play { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000 center / cover no-repeat; background-image: linear-gradient(rgba(7, 21, 46, .58), rgba(7, 21, 46, .66)), url("https://i.ytimg.com/vi/13Nt3nHSebE/maxresdefault.jpg"); color: var(--white); cursor: pointer; }
.hero-video__play svg { box-sizing: border-box; width: clamp(48px, 13vw, 58px); height: clamp(48px, 13vw, 58px); padding: 14px; border: 2px solid currentColor; border-radius: 50%; background-color: rgba(7, 21, 46, .34); transition: transform .3s var(--ease-out), color .3s ease, background-color .3s ease, border-color .3s ease; }
.hero-video__tri { fill: currentColor; stroke: none; }
.hero-video__play:hover svg { transform: scale(1.06); color: var(--navy-950); background-color: var(--yellow); border-color: var(--yellow); }
.hero-video > iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.photo-slider { position: relative; overflow: hidden; background: var(--navy-950); color: var(--white); }
.photo-slider__viewport { position: relative; overflow: hidden; }
.photo-slider__track { display: flex; will-change: transform; }
.photo-slider__track.is-looping { width: 2800%; animation: photo-marquee 56s linear infinite; }
.photo-slide { flex: 0 0 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.photo-slider__track.is-looping .photo-slide { flex-basis: 3.5714285714%; }
.photo-slide img { width: 100%; height: 100%; object-fit: cover; }
@keyframes photo-marquee { to { transform: translate3d(-50%, 0, 0); } }

.campaign { position: relative; padding: 88px var(--gutter) 92px; overflow: hidden; background: var(--white); text-align: center; }
.campaign::before { content: ""; position: absolute; top: -90px; right: -145px; width: 250px; height: 520px; background: var(--yellow); transform: rotate(20deg); opacity: .52; }
.campaign > * { position: relative; z-index: 1; }
.campaign__label { display: block; color: var(--blue-600); font-family: var(--font-en); font-size: 22px; font-weight: 800; letter-spacing: .07em; }
.campaign h2 { margin: 6px 0 32px; font-size: 27px; font-weight: 900; line-height: 1.45; }
.campaign__heading-kicker { display: block; margin-bottom: 4px; color: var(--blue-600); font-size: 14px; letter-spacing: .04em; }
.campaign__heading-main { display: inline; }
.campaign__copy { display: grid; justify-items: center; margin: 0; color: var(--navy-950); font-size: 26px; font-weight: 900; line-height: 1.42; }
.campaign__copy span { display: block; }
.campaign__copy .campaign__venue { margin-top: 2px; color: var(--blue-600); font-size: 22px; letter-spacing: .08em; }
.campaign__copy span:nth-child(2) { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 100%; white-space: nowrap; }
.campaign__copy strong { color: var(--blue-600); font-family: var(--font-en); font-size: clamp(62px, 19vw, 82px); font-weight: 900; line-height: .95; letter-spacing: -.035em; }
.campaign__button { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 60px; margin-top: 42px; padding: 14px 20px; border: 0; border-radius: 12px; background: var(--blue-600); color: var(--white); font-size: 16px; font-weight: 800; cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.campaign__button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7,21,46,.2); }
.campaign__button svg { width: 20px; height: 20px; }
.campaign__button--sub { margin-top: 32px; background: #3a3f47; }
.campaign__notes { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; color: var(--ink-sub); font-size: 12px; font-weight: 600; line-height: 1.7; list-style: none; text-align: left; }
.campaign__notes li { position: relative; padding-left: 1em; }
.campaign__notes li::before { position: absolute; left: 0; content: "・"; }

.event-preview { padding: 88px var(--gutter) 104px; background: var(--navy-900); color: var(--white); text-align: center; }
.event-preview__label { color: var(--yellow); font-family: var(--font-en); font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.event-preview h2 { margin: 3px 0 22px; font-size: 32px; font-weight: 900; }
.event-preview > p { margin: 0; font-size: 17px; font-weight: 600; line-height: 2; }
.coming-soon { display: grid; place-items: center; min-height: 208px; margin-top: 48px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.045); color: var(--white); font-family: var(--font-en); font-size: clamp(48px, 15vw, 66px); font-weight: 800; letter-spacing: .015em; }

.section { position: relative; padding: var(--section-y) var(--gutter); overflow: hidden; background: var(--white); }
.section--access { background: var(--paper); padding-bottom: 128px; }
.display-heading { display: grid; gap: 4px; margin-bottom: 36px; }
.display-heading > span { display: flex; align-items: center; gap: 9px; color: var(--blue-600); font-size: 14px; font-weight: 800; }
.display-heading > span::before { content: ""; width: 28px; height: 4px; background: var(--yellow); transform: skewX(-22deg); }
.display-heading h2 { margin: 0; color: var(--navy-950); font-family: var(--font-en); font-size: clamp(64px, 18vw, 80px); font-weight: 700; line-height: .78; letter-spacing: -.045em; }
.display-heading p { margin: 14px 0 0; color: var(--ink-sub); font-size: 15px; line-height: 1.8; }
.map-frame { height: 320px; margin: 0 calc(var(--gutter) * -1); overflow: hidden; background: var(--blue-100); }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: saturate(.72) contrast(1.04); }
.venue-card { position: relative; z-index: 2; margin-top: -28px; padding: 28px 24px; border-radius: var(--radius-card); background: var(--navy-900); color: var(--white); box-shadow: 0 18px 40px rgba(7,21,46,.18); }
.venue-card__label { color: var(--yellow); font-family: var(--font-en); font-size: 20px; font-weight: 700; }
.venue-card h3 { margin: 5px 0 10px; font-size: 24px; font-weight: 800; line-height: 1.5; }
.venue-card p { margin: 0; color: rgba(255,255,255,.8); font-family: var(--font-jp); font-size: 15px; }
.venue-card dl { display: grid; gap: 0; margin: 22px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.venue-card dl div { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.venue-card dt { color: var(--yellow); font-family: var(--font-en); font-size: 16px; font-weight: 700; }
.venue-card dd { margin: 0; color: rgba(255,255,255,.84); font-family: var(--font-jp); font-size: 15px; line-height: 1.75; }
.venue-card dd b { display: block; color: var(--white); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin-top: 20px; border-bottom: 1px solid currentColor; color: var(--blue-600); font-size: 14px; font-weight: 800; }
.text-link svg { width: 17px; height: 17px; }

.section-heading { display: grid; gap: 12px; margin-bottom: 30px; }
.section-heading__label { display: flex; align-items: center; gap: 9px; color: var(--blue-600); font-family: var(--font-en); font-size: 20px; font-weight: 700; }
.section-heading__label::before { content: ""; width: 28px; height: 4px; background: var(--yellow); transform: skewX(-22deg); }
.section-heading h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.55; }
.section-heading p { margin: 0; color: var(--ink-sub); font-size: 15px; }
.official-links { overflow: visible; padding-bottom: calc(122px + env(safe-area-inset-bottom)); background: var(--white); }
.official-links__emblem { position: absolute; z-index: 3; top: 0; left: 50%; width: clamp(112px, 32%, 136px); transform: translate(-50%, -50%); filter: drop-shadow(0 10px 18px rgba(7,21,46,.2)); }
.social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-links a { display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 9px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); transition: transform .3s var(--ease-out), border-color .3s var(--ease-standard); }
.social-links a:hover { transform: translateY(-2px); border-color: var(--blue-600); }
.social-links span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-small); background: var(--navy-900); color: var(--white); }
.social-links span .social-icon { width: 22px; height: 22px; color: var(--white); stroke-width: 1.8; }
.social-links span .social-icon--line { filter: brightness(0) invert(1); }
.social-links .social-icon__fill { fill: currentColor; stroke: none; }
.social-links b { font-size: 13px; font-weight: 800; }
.social-links a > svg { width: 16px; height: 16px; color: var(--blue-600); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 30px; padding: 13px 18px; border: 1px solid transparent; border-radius: var(--radius-cta); font-size: 14px; font-weight: 800; white-space: nowrap; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.button svg { width: 18px; height: 18px; }
.button--primary { background: var(--blue-600); color: var(--white); }
.fixed-ticket { position: fixed; z-index: 90; bottom: 0; left: 50%; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px; width: min(100%, var(--mobile-w)); min-height: 82px; padding: 9px 20px calc(9px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; opacity: 0; visibility: hidden; transform: translate(-50%, calc(100% + 18px)); background: rgba(242,230,0,.96); color: var(--navy-950); box-shadow: 0 -8px 28px rgba(0,0,0,.2); backdrop-filter: blur(10px); pointer-events: none; transition: opacity .42s ease, transform .68s var(--ease-out), visibility 0s linear .68s; will-change: opacity, transform; }
.fixed-ticket.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s; }
.fixed-ticket > svg { justify-self: end; width: 22px; height: 22px; }
.fixed-ticket__body { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.fixed-ticket__offer { display: flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 16px; font-weight: 900; line-height: 1.05; white-space: nowrap; }
.fixed-ticket__offer strong { font-family: var(--font-en); font-size: 25px; font-weight: 400; line-height: .8; letter-spacing: .01em; }
.fixed-ticket__body > b { font-size: 15px; font-weight: 900; line-height: 1.1; }

@media (max-width: 767px) {
  .desktop-stage { display: none; }
  .site-shell { box-shadow: none; }
}

@media (max-width: 359px) {
  :root { --gutter: 18px; }
  .lead { min-height: 860px; padding-block: 96px; }
  .lead-copy { letter-spacing: 0; }
  .lead-copy__group:first-child { font-size: 21px; letter-spacing: 0; }
  .campaign__copy { font-size: 22px; }
  .campaign h2 { font-size: 23px; }
  .campaign__copy span:nth-child(2) { gap: 2px; }
  .campaign__copy strong { font-size: 58px; }
  .social-links { grid-template-columns: 1fr; }
  .fixed-ticket { padding-inline: 16px; }
  .fixed-ticket__offer { gap: 2px; font-size: 15px; }
  .fixed-ticket__offer strong { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}