@charset "UTF-8";
/* ============================================================
   IKU PK TOURNAMENT 2027 — 地方大会ページ
   本番はWix。本CSSはローカル確認・先方共有用モックアップの実装。
   色は既存ページ(www.iku-inc.info)から抽出したHEXをOKLCHに変換して使用。
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg, video { display: block; max-inline-size: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* 既存サイトからの抽出色 */
    --navy:   oklch(0.40 0.055 240);   /* #2b5672 */
    --gold:   oklch(0.74 0.088 100);   /* #B8AC58 */
    --amber:  oklch(0.81 0.140 76);    /* #F6B33B */
    --red:    oklch(0.59 0.200 27);    /* #e03939 */

    --bg:      oklch(0.14 0.008 250);
    --bg-2:    oklch(0.19 0.012 250);
    --bg-card: oklch(0.23 0.016 245);
    --ink:     oklch(0.97 0.004 250);
    --ink-mut: oklch(0.74 0.010 250);
    --line:    oklch(0.34 0.014 245);

    --accent:      var(--amber);
    --accent-deep: color-mix(in oklch, var(--amber), black 22%);

    /* 確認ステータス */
    --tbd:   oklch(0.62 0.190 25);     /* 未確定＝赤 */
    --carry: oklch(0.72 0.130 205);    /* 現行踏襲＝青 */

    --space: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
    --gap-section: clamp(3.5rem, 2rem + 6vw, 7rem);
    --measure: 46rem;
    --radius: 0.5rem;

    --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
               "Noto Sans JP", Meiryo, system-ui, sans-serif;
    --font-en: "Helvetica Neue", Arial, var(--font-jp), sans-serif;
  }
}

/* ---------- base ---------- */
@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-jp);
    font-feature-settings: "palt" 1;
    line-height: 1.85;
    letter-spacing: 0.035em;
    text-underline-offset: 0.2em;
  }

  h1, h2, h3, h4 {
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-wrap: balance;
    word-break: keep-all;
    font-weight: 700;
  }

  p, li { text-wrap: pretty; overflow-wrap: anywhere; line-break: strict; }

  a:not([class]) { text-decoration-thickness: 1px; }

  :focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--amber); color: #000; }
}

/* ---------- layout ---------- */
@layer layout {
  .wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
  .wrap--narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }
  .stack > * + * { margin-block-start: var(--space); }
  .section { padding-block: var(--gap-section); }
  .grid-auto {
    display: grid;
    gap: clamp(1rem, 0.5rem + 2vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }
}

/* ---------- components ---------- */
@layer components {

  /* --- 確認ステータスのマーカー --- */
  .tbd, .carry {
    display: inline;
    padding: 0.1em 0.45em;
    border-radius: 0.25em;
    font-size: 0.94em;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: normal;
  }
  .tbd {
    background: color-mix(in oklch, var(--tbd), transparent 78%);
    color: oklch(0.88 0.10 25);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tbd), transparent 45%);
  }
  .carry {
    background: color-mix(in oklch, var(--carry), transparent 84%);
    color: oklch(0.88 0.07 205);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--carry), transparent 55%);
  }
  .tbd::before {
    content: "要確定 " attr(data-ref) " ／ ";
    /* em にすると .prize__amount 等の大きな文字の中で注記が巨大化して崩れる。
       注記は常に一定サイズにするため rem で固定する */
    font-size: 0.72rem;
    opacity: 0.85;
  }
  .carry::after {
    content: " （現行踏襲・要確認 " attr(data-ref) "）";
    font-size: 0.72rem;   /* 同上。em 禁止 */
    font-weight: 400;
    opacity: 0.8;
    vertical-align: middle;
  }

  /* --- モックアップ表示バー --- */
  .mockbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    background: repeating-linear-gradient(135deg,
      oklch(0.30 0.10 25) 0 12px, oklch(0.26 0.09 25) 12px 24px);
    color: var(--ink);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 1rem;
    text-align: center;
  }
  .mockbar b { color: var(--amber); }

  /* --- ヘッダー --- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklch, var(--bg), transparent 8%);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--line);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: 4rem;
    flex-wrap: wrap;
  }
  .site-header__logo img { inline-size: auto; block-size: 2.1rem; }
  .site-nav { margin-inline-start: auto; }
  /* リセットは ul[class] 指定のため、クラス無しのこの ul には効かない。個別に落とす */
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; list-style: none; padding: 0; }
  .site-nav a {
    font-family: var(--font-en);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-decoration: none;
    color: var(--ink-mut);
    transition: color .18s;
  }
  .site-nav a:hover { color: var(--amber); }

  /* --- ボタン --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.85em 1.9em;
    border: 0;
    border-radius: 999px;
    background: var(--amber);
    color: #17130a;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: transform .18s, background-color .18s;
  }
  .btn:hover { background: var(--accent-deep); transform: translateY(-2px); }
  .btn--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line);
  }
  .btn--ghost:hover { background: color-mix(in oklch, var(--ink), transparent 92%); }
  .btn--lg { padding: 1.05em 2.6em; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); }

  /* --- ヒーロー --- */
  .hero { position: relative; isolation: isolate; overflow: hidden; }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      oklch(0.12 0.01 250 / 0.82) 0%,
      oklch(0.12 0.01 250 / 0.68) 45%,
      oklch(0.14 0.008 250) 100%);
  }
  .hero__inner { padding-block: clamp(4rem, 2rem + 10vw, 8.5rem); }
  .hero__presents {
    font-family: var(--font-en);
    font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.85rem);
    letter-spacing: 0.22em;
    color: var(--gold);
    margin-block-end: 0.9rem;
  }
  .hero__project {
    font-family: var(--font-en);
    font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.25rem);
    letter-spacing: 0.16em;
    color: var(--ink-mut);
  }
  .hero__title {
    font-family: var(--font-en);
    font-size: clamp(2.5rem, 1.4rem + 6.6vw, 5.75rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    margin-block: 0.5rem 0.3rem;
  }
  .hero__region {
    display: inline-block;
    margin-block-start: 0.7rem;
    padding: 0.35em 1.1em;
    background: var(--amber);
    color: #17130a;
    font-size: clamp(1.15rem, 0.9rem + 1.4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 0.3em;
  }
  .hero__lead {
    margin-block-start: 1.6rem;
    font-size: clamp(1rem, 0.92rem + 0.5vw, 1.3rem);
    font-weight: 700;
    color: var(--amber);
  }
  .hero__actions { margin-block-start: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

  /* --- 見出し --- */
  .sec-head { margin-block-end: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
  .sec-head__en {
    display: block;
    font-family: var(--font-en);
    font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
    letter-spacing: 0.08em;
    color: var(--amber);
    line-height: 1.05;
  }
  .sec-head__jp {
    display: block;
    margin-block-start: 0.45rem;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    color: var(--ink-mut);
    font-weight: 400;
  }

  /* --- 大会情報カード --- */
  .meet {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  }
  .meet__name {
    font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
    color: var(--amber);
    padding-block-end: 0.8rem;
    border-block-end: 2px solid var(--amber);
    margin-block-end: 1.5rem;
  }
  .deflist { display: grid; gap: 0; }
  .deflist > div {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.5rem 1.25rem;
    padding-block: 0.9rem;
    border-block-end: 1px dashed var(--line);
  }
  .deflist > div:last-child { border-block-end: 0; }
  .deflist dt {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    padding-block-start: 0.15em;
  }
  .deflist dd { margin: 0; }
  @container (max-width: 34rem) {
    .deflist > div { grid-template-columns: 1fr; gap: 0.15rem; }
  }
  .meet { container-type: inline-size; }

  .entry-classes { display: grid; gap: 0.6rem; }
  .entry-classes li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    padding-block: 0.35rem;
  }
  .entry-classes .cls {
    font-weight: 700;
    min-inline-size: 9.5rem;
    color: var(--ink);
  }
  .entry-classes .free {
    font-size: 0.75rem;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    background: color-mix(in oklch, var(--gold), transparent 78%);
    color: var(--gold);
    font-weight: 700;
  }

  /* --- 特典バナー --- */
  .perk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.6rem;
    text-align: center;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--navy), transparent 30%),
      color-mix(in oklch, var(--bg-2), transparent 0%));
    border: 1px solid var(--gold);
    border-radius: var(--radius);
  }
  .perk__label { font-weight: 700; letter-spacing: 0.1em; }
  .perk__value {
    font-family: var(--font-en);
    font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 700;
    color: var(--amber);
    line-height: 1;
  }
  .perk__note { flex-basis: 100%; font-size: 0.82rem; color: var(--ink-mut); }

  /* --- 賞金 --- */
  .prize {
    text-align: center;
    padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    background:
      radial-gradient(120% 100% at 50% 0%,
        color-mix(in oklch, var(--amber), transparent 88%), transparent 70%),
      var(--bg-2);
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }
  .prize__amount {
    font-family: var(--font-en);
    font-size: clamp(3rem, 1.6rem + 7vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--amber);
  }
  .prize__amount small { font-size: 0.34em; letter-spacing: 0.06em; }
  .prize__sub { margin-block-start: 1.25rem; color: var(--ink-mut); }

  /* --- 規約ブロック --- */
  .rulebox {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
  }
  .rulebox + .rulebox { margin-block-start: 1.25rem; }
  .rulebox__title {
    font-size: 1.05rem;
    color: var(--amber);
    letter-spacing: 0.08em;
    margin-block-end: 0.9rem;
  }
  .bullets { display: grid; gap: 0.5rem; }
  .bullets li { position: relative; padding-inline-start: 1.15em; }
  .bullets li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.72em;
    inline-size: 0.42em;
    block-size: 0.42em;
    border-radius: 50%;
    background: var(--gold);
  }
  .note {
    margin-block-start: 1rem;
    padding: 0.9rem 1.1rem;
    background: color-mix(in oklch, var(--red), transparent 88%);
    border-inline-start: 3px solid var(--red);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.92rem;
  }

  /* --- FAQ (details) --- */
  .faq { display: grid; gap: 0.75rem; }
  .faq details {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .faq summary {
    cursor: pointer;
    padding: 1.05rem 1.25rem;
    font-weight: 700;
    list-style: none;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before {
    content: "Q";
    font-family: var(--font-en);
    color: var(--amber);
    font-size: 1.1rem;
    line-height: 1.5;
  }
  .faq details[open] summary { border-block-end: 1px solid var(--line); }
  .faq__a { padding: 1.05rem 1.25rem 1.25rem 3rem; color: var(--ink-mut); }

  /* --- CTA --- */
  .cta {
    text-align: center;
    padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--space);
    background: linear-gradient(160deg, var(--navy), var(--bg-2) 70%);
    border-radius: var(--radius);
  }
  .cta__title {
    font-family: var(--font-en);
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
    color: var(--amber);
    letter-spacing: 0.08em;
  }
  .cta__deadline {
    margin-block: 0.9rem 1.9rem;
    font-weight: 700;
    font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.15rem);
  }

  /* --- スポンサー --- */
  .sponsor-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  }
  .sponsor-slot {
    display: grid;
    place-items: center;
    min-block-size: 5.5rem;
    padding: 1rem;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-mut);
    font-size: 0.8rem;
    text-align: center;
  }

  /* --- フッター --- */
  .site-footer {
    border-block-start: 1px solid var(--line);
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    background: var(--bg-2);
    font-size: 0.9rem;
  }
  .site-footer a { color: var(--amber); }
  .copyright {
    margin-block-start: 2rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--line);
    font-size: 0.76rem;
    color: var(--ink-mut);
    letter-spacing: 0.06em;
  }

  /* --- 索引ページ --- */
  .index-card {
    display: block;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .2s, transform .2s;
  }
  .index-card:hover { border-color: var(--amber); transform: translateY(-3px); }
  .index-card h2 { color: var(--amber); font-size: 1.5rem; }
  .index-card p { color: var(--ink-mut); font-size: 0.92rem; margin-block-start: 0.5rem; }
}

/* ---------- utilities ---------- */
@layer utilities {
  .center { text-align: center; }
  .muted { color: var(--ink-mut); }
  .small { font-size: 0.86rem; }
  .bg-alt { background: var(--bg-2); }
  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

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

/* ============================================================
   画像まわり（既存2027ページの素材を流用）
   ============================================================ */
@layer components {

  /* --- 冠協賛ロゴ --- */
  .presents-logo {
    inline-size: clamp(9rem, 7rem + 8vw, 14rem);
    block-size: auto;
    margin-block-end: 1rem;
  }

  /* --- 帯（背景写真つきセクション） --- */
  .band { position: relative; isolation: isolate; overflow: hidden; }
  .band__media { position: absolute; inset: 0; z-index: -2; }
  .band__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      oklch(0.16 0.01 250 / 0.90), oklch(0.14 0.008 250 / 0.94));
  }

  /* --- ロゴウォール（協賛・共催） --- */
  .logo-wall {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  }
  .logo-wall li {
    display: grid;
    place-items: center;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border-radius: var(--radius);
    min-block-size: 6rem;
  }
  .logo-wall img {
    inline-size: auto;
    max-inline-size: 100%;
    max-block-size: 3.5rem;
    object-fit: contain;
  }

  /* --- ギャラリー --- */
  .gallery {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
  .gallery figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
  }
  .gallery img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
    filter: saturate(0.92);
  }
  .gallery figure:hover img { transform: scale(1.04); filter: saturate(1.05); }
  .gallery figcaption {
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
    color: var(--ink-mut);
    letter-spacing: 0.04em;
  }

  /* --- 会場マップ --- */
  .mapshot {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
  }
  .mapshot img { inline-size: 100%; block-size: auto; }
  .mapshot figcaption {
    padding: 0.7rem 1rem;
    background: var(--bg-2);
    font-size: 0.82rem;
    color: var(--ink-mut);
  }
}

@layer components {
  /* --- ゲストグリッド --- */
  .guest-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  }
  .guest {
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .guest img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 22%;
  }
  .guest figcaption {
    padding: 0.6rem 0.7rem;
    font-size: 0.72rem;
    text-align: center;
    min-block-size: 3.2rem;
    display: grid;
    place-items: center;
  }
}

@layer components {
  .pending {
    color: color-mix(in oklch, var(--ink-mut), transparent 25%);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
}

/* ------------------------------------------------------------
   狭幅対応：ナビが2段になるとstickyヘッダーが画面を圧迫するため、
   768px未満ではヘッダーを固定しない
   ------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .site-header { position: static; }
  .site-header__inner { justify-content: center; row-gap: 0.25rem; padding-block: 0.6rem; }
  .site-nav { margin-inline-start: 0; }
  .site-nav ul { justify-content: center; gap: 0.2rem 0.85rem; }
  .site-nav a { font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* ============================================================
   デザイン強化（すべて Wix 従来型エディタで再現可能な範囲）
     ・netbg      → Wix: ストリップ背景に pattern-net.png をタイル指定＋色オーバーレイ
     ・band       → Wix: ストリップ背景画像＋スクロール効果「パララックス」
     ・data-reveal→ Wix: 要素ごとの入場アニメーション「フェードイン＋フロート」
   カスタムCSSは使わない前提。Wixのクラス名は自動生成ハッシュで壊れるため。
   ============================================================ */
@layer components {

  /* --- ゴールネット背景（自作パターン） --------------------
     PKはゴールに向かう競技。ネット＝到達点であり、
     ヒーロー写真の被写体そのもの。この大会の記号として1つだけ使う。
     規約セクションに写真を敷くと可読性が落ちるので、
     「写真ではないが空白でもない」面としてここに置く。 */
  .netbg {
    background-color: var(--bg);
    background-image:
      linear-gradient(180deg,
        oklch(0.14 0.008 250 / 0.55) 0%,
        oklch(0.14 0.008 250 / 0.80) 55%,
        oklch(0.14 0.008 250 / 0.95) 100%),
      url("../images/pattern-net.png");
    background-repeat: no-repeat, repeat;
    background-size: cover, 80px 138px;
    background-position: center, center;
  }

  /* 熱いブロックと冷静なブロックの境目に細い金の線を1本だけ引く */
  .netbg { border-block-start: 1px solid color-mix(in oklch, var(--gold), transparent 78%); }

  /* --- 見出し：EN の下に短い金の罫 ------------------------- */
  .sec-head__en { position: relative; padding-block-end: 0.5rem; }
  .sec-head__en::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 3.5rem;
    block-size: 3px;
    background: var(--amber);
  }

  /* --- ヒーロー：写真の上にネットを薄く重ねて連続性を作る --- */
  .hero__inner { position: relative; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/pattern-net.png") repeat;
    background-size: 80px 138px;
    opacity: 0.16;
  }
  .hero__title {
    font-weight: 700;
    text-shadow: 0 2px 24px oklch(0.10 0.01 250 / 0.7);
  }

  /* --- パララックス ----------------------------------------
     scroll-driven animation 対応環境のみ。非対応は静止（＝素の見た目）。
     Wix側ではストリップ背景の「パララックス」設定で同等の効果になる。 */
  .band__media img { transform: scale(1.14); will-change: transform; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .band__media img {
        animation: band-pan linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
      @keyframes band-pan {
        from { transform: translateY(-7%) scale(1.14); }
        to   { transform: translateY(7%)  scale(1.14); }
      }
    }
  }

  /* --- 入場アニメーション ----------------------------------
     種類は1つだけ（フェード＋わずかな上昇）。
     4.5の原則どおり transform / opacity のみ。 */
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      transform .55s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  /* --- ギャラリー：ホバー時に金の縁 ------------------------- */
  .gallery figure { border: 1px solid transparent; transition: border-color .3s; }
  .gallery figure:hover { border-color: color-mix(in oklch, var(--amber), transparent 55%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .band__media img { animation: none !important; }
}

@layer components {
  /* --- 熱いブロック用の写真バンド ---------------------------
     一律に暗くすると写真が死ぬ。文字が乗る左側だけ濃くし、
     右へ抜けるほど写真を見せる。コントラストを守りつつ熱を出す。
     Wix では「背景画像＋色オーバーレイの不透明度」で近い表現になる。 */
  .band--hot::after {
    background:
      linear-gradient(100deg,
        oklch(0.13 0.01 250 / 0.94) 0%,
        oklch(0.13 0.01 250 / 0.88) 38%,
        oklch(0.13 0.01 250 / 0.55) 100%),
      linear-gradient(180deg,
        oklch(0.14 0.008 250 / 0.55) 0%,
        oklch(0.14 0.008 250 / 0.25) 40%,
        oklch(0.14 0.008 250 / 0.85) 100%);
  }
  /* 上下の境目を溶かす */
  .band--hot { box-shadow: inset 0 40px 60px -30px var(--bg), inset 0 -40px 60px -30px var(--bg); }
}

@layer components {
  /* --- ヘッダーのロゴとCTA -----------------------------------
     ロゴは背景透過PNGだが、金がダークUIに沈むので
     ①サイズを上げ ②わずかな発光を足して視認性を確保する。
     色そのものは変えない（ブランドカラーのため）。 */
  .site-header__logo img {
    block-size: 2.7rem;
    filter: drop-shadow(0 0 10px color-mix(in oklch, var(--amber), transparent 65%));
  }

  .btn--sm {
    padding: 0.6em 1.35em;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }
  .site-header__cta { flex-shrink: 0; }

  /* ナビとCTAの間を空ける。ナビが auto で押し出すのでCTAは右端に固定 */
  .site-nav { margin-inline-end: 0.25rem; }
}

@media (max-width: 47.99rem) {
  .site-header__inner { row-gap: 0.5rem; }
  .site-header__cta { inline-size: 100%; }
  .site-header__logo img { block-size: 2.4rem; }
}

@layer components {
  /* CMSのフィールドに接続する箇所であることを示すバッジ（モックアップ専用） */
  .cmsbind {
    display: inline-block;
    margin-inline-start: 0.6em;
    padding: 0.15em 0.6em;
    border-radius: 0.25em;
    background: color-mix(in oklch, oklch(0.62 0.14 160), transparent 80%);
    color: oklch(0.85 0.10 160);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
  }
}

/* ============================================================
   ヒーロー — 参考ビジュアル準拠
     金のグラデーション＋光沢アニメーション
   Wixでの再現方法は DESIGN.md 参照（共通部分は画像1枚で持つ）
   ============================================================ */
@layer components {
  .hero__inner { text-align: center; }
  .hero__actions { justify-content: center; }

  /* --- 金のグラデーション（共通クラス） --- */
  .gold-grad {
    background-image: linear-gradient(
      100deg,
      oklch(0.62 0.10 78) 0%,
      oklch(0.88 0.15 92) 22%,
      oklch(0.97 0.08 100) 34%,
      oklch(0.82 0.15 82) 46%,
      oklch(0.58 0.11 70) 62%,
      oklch(0.90 0.14 92) 82%,
      oklch(0.70 0.12 76) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .gold-grad { animation: gold-sweep 6s ease-in-out infinite; }
  }
  @keyframes gold-sweep {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  .hero__project {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(1rem, 0.7rem + 1.4vw, 1.9rem);
    letter-spacing: 0.14em;
  }

  .hero__title {
    font-family: var(--font-en);
    font-size: clamp(2.1rem, 0.9rem + 5.6vw, 5rem);
    line-height: 1.06;
    letter-spacing: 0.01em;
    margin-block: 0.15rem 0.7rem;
    filter: drop-shadow(0 3px 14px oklch(0.10 0.01 250 / 0.85));
  }

  /* --- 大会名（白）＋ キャッチ（赤） --- */
  .hero__meet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em 0.7em;
    margin-block-end: 1.1rem;
  }
  .hero__meet-name,
  .hero__meet-badge {
    font-size: clamp(1.5rem, 0.9rem + 2.8vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 10px oklch(0.10 0.01 250 / 0.9);
  }
  .hero__meet-name  { color: #fff; }
  .hero__meet-badge { color: oklch(0.62 0.24 27); }

  /* --- キャッチコピー（金・傾き） --- */
  .hero__catch {
    font-size: clamp(1.15rem, 0.7rem + 2vw, 2.3rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    rotate: -3.5deg;
    margin-block: 1.4rem 1.6rem;
    filter: drop-shadow(0 3px 12px oklch(0.10 0.01 250 / 0.8));
  }

  @media (max-width: 47.99rem) {
    .hero__catch { rotate: -2.5deg; }
  }
}

@layer components {
  /* --- 開催日・会場（参考ビジュアル準拠） --- */
  .hero__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.4rem;
    margin-block: 1.8rem 0.4rem;
  }
  .hero__date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-en);
    font-size: clamp(2rem, 1rem + 4vw, 3.6rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px oklch(0.10 0.01 250 / 0.9);
  }
  .hero__daybadge {
    display: grid;
    place-items: center;
    inline-size: 2.4em;
    block-size: 2.4em;
    border-radius: 50%;
    background: oklch(0.62 0.25 350);
    color: #fff;
    font-family: var(--font-jp);
    font-size: 0.26em;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: none;
  }
  .hero__daybadge--empty { background: color-mix(in oklch, oklch(0.62 0.25 350), transparent 55%); font-size: 0.2em; }

  .hero__where { text-align: start; }
  .hero__kickoff {
    display: inline-block;
    padding: 0.2em 0.9em;
    background: #fff;
    color: var(--accent-deep);
    font-weight: 700;
    font-size: clamp(0.95rem, 0.7rem + 1.1vw, 1.5rem);
    letter-spacing: 0.06em;
    border-radius: 0.15em;
  }
  .hero__venue {
    margin-block-start: 0.3rem;
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.05rem, 0.8rem + 1.3vw, 1.75rem);
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px oklch(0.10 0.01 250 / 0.9);
  }
  @media (max-width: 47.99rem) {
    .hero__where { text-align: center; }
  }
}

@layer components {
  /* ヒーローは text-align:center だが、img は display:block なので
     テキストの中央揃えが効かない。margin-inline:auto で明示的に中央へ */
  .presents-logo { margin-inline: auto; margin-block-end: 0.5rem; }
  .hero__presents { margin-block-end: 1.2rem; }
}

/* ============================================================
   ヒーローのスケールアップ（インパクト重視）
   タイトルはラッパー幅いっぱいまで伸びるよう vw 係数を上げ、
   上限も引き上げる。階層は「タイトル > 大会名 > キャッチ」を維持。
   ============================================================ */
@layer components {
  .hero__inner { padding-block: clamp(3rem, 1.5rem + 9vw, 8rem); }

  .hero__project {
    font-size: clamp(1.05rem, 0.55rem + 2.3vw, 2.5rem);
    letter-spacing: 0.16em;
  }

  .hero__title {
    font-size: clamp(2.3rem, 0.4rem + 7.4vw, 6.8rem);
    line-height: 0.98;
    margin-block: 0.1rem 0.85rem;
    filter: drop-shadow(0 4px 20px oklch(0.08 0.01 250 / 0.9));
  }

  .hero__meet { gap: 0.3em 0.6em; margin-block-end: 1.3rem; }
  .hero__meet-name,
  .hero__meet-badge {
    font-size: clamp(1.75rem, 0.6rem + 4.3vw, 4rem);
    letter-spacing: 0.03em;
  }
  .hero__meet-badge { text-shadow: 0 2px 12px oklch(0.10 0.01 250 / 0.95); }

  .hero__catch {
    font-size: clamp(1.3rem, 0.5rem + 3.1vw, 3.1rem);
    margin-block: 1.6rem 1.8rem;
  }

  .hero__lead {
    font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.65rem);
    margin-block-start: 1.8rem;
  }

  .hero__date { font-size: clamp(2.2rem, 0.9rem + 4.6vw, 4.4rem); }
  .hero__kickoff { font-size: clamp(1rem, 0.7rem + 1.35vw, 1.7rem); }
  .hero__venue  { font-size: clamp(1.1rem, 0.8rem + 1.6vw, 2rem); }

  .hero__actions { margin-block-start: 2.6rem; }
  .btn--lg { padding: 1.15em 3em; font-size: clamp(1.02rem, 0.9rem + 0.6vw, 1.3rem); }

  /* --- CMSバッジはデザイン確認の邪魔をしないよう控えめに --- */
  .cmsbind {
    font-size: 0.56rem;
    padding: 0.1em 0.45em;
    opacity: 0.5;
    vertical-align: super;
    background: color-mix(in oklch, oklch(0.62 0.14 160), transparent 88%);
  }
  .cmsbind:hover { opacity: 1; }
}

@layer components {
  .samplebar {
    position: sticky;
    inset-block-start: 0;
    z-index: 61;
    background: oklch(0.45 0.16 300);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    padding: 0.45rem 1rem;
    text-align: center;
  }
  .samplebar b { color: oklch(0.92 0.14 100); }
  .samplebar code { font-size: 0.94em; opacity: 0.85; }
  .samplebar + .mockbar { inset-block-start: 2rem; }
}

@layer components {
  /* I.K.U SPORTS PROJECT を倍サイズに。
     タイトルと拮抗するので字間を少し詰めて締める */
  .hero__project {
    font-size: clamp(2.1rem, 1.1rem + 4.6vw, 5rem);
    letter-spacing: 0.1em;
    line-height: 1.1;
    margin-block-end: 0.2rem;
  }
  /* 2段組みを意図したものにする。行間を詰めて塊として見せる */
  .hero__title { line-height: 0.92; }
}

@layer components {
  /* キャッチコピーを倍サイズに。
     文字が大きいぶん行間を詰め、傾きも浅くして読みやすさを保つ */
  .hero__catch {
    font-size: clamp(2.4rem, 0.9rem + 6.1vw, 6rem);
    line-height: 1.18;
    rotate: -2.5deg;
    margin-block: 2rem 2.4rem;
    letter-spacing: 0.01em;
  }
  @media (max-width: 47.99rem) {
    .hero__catch { rotate: -2deg; line-height: 1.25; }
  }
}

@layer components {
  /* 曜日バッジ：「火/祝」が1行だと円からはみ出すため、
     スラッシュで2段に分け、区切りは斜線で表現する */
  .hero__daybadge {
    position: relative;
    inline-size: 2.15em;
    block-size: 2.15em;
    font-size: 0.34em;
    line-height: 1;
    overflow: visible;
  }
  .hero__daybadge--split {
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-items: center;
    gap: 0.08em;
    padding-block: 0.28em;
  }
  .hero__daybadge--split i {
    font-style: normal;
    font-size: 0.72em;
    line-height: 1;
  }
  .hero__daybadge--split i:first-child { justify-self: start;  margin-inline-start: 0.34em; }
  .hero__daybadge--split i:last-child  { justify-self: end;    margin-inline-end: 0.34em; }
  .hero__daybadge--split::after {
    content: "";
    position: absolute;
    inset-block: 0.42em;
    inset-inline-start: 50%;
    inline-size: 1.5px;
    background: #fff;
    rotate: 28deg;
    transform-origin: center;
    opacity: 0.9;
  }
  .hero__daybadge--empty { background: color-mix(in oklch, oklch(0.62 0.25 350), transparent 60%); }
}

@layer components {
  /* 文字を大きくしたぶん、ヒーローだけコンテナを広く取る。
     本文セクションは 68rem のままにして、ヒーローだけ特別扱いする */
  .hero .wrap { width: min(100% - 2.5rem, 82rem); }

  /* 字間を詰めて1行に収める。倍サイズは維持 */
  .hero__project { letter-spacing: 0.03em; }
}

@layer components {
  /* KICKOFF の白い帯（蛍光ペン風）を外し、地の上に直接置く */
  .hero__kickoff {
    background: none;
    padding: 0;
    color: var(--amber);
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px oklch(0.10 0.01 250 / 0.9);
  }
}

@layer components {
  /* ヒーローの暗転グラデーション。
     以前は下端で完全不透明にしていたため、縦に伸びたときボタン付近で
     写真が消えていた。中盤〜下部は一定の濃さを保ち、
     最後の数%だけで次セクションへ繋ぐ。 */
  .hero::after {
    background: linear-gradient(180deg,
      oklch(0.12 0.01 250 / 0.80)  0%,
      oklch(0.12 0.01 250 / 0.60) 32%,
      oklch(0.12 0.01 250 / 0.58) 72%,
      oklch(0.12 0.01 250 / 0.72) 92%,
      oklch(0.14 0.008 250 / 0.95) 100%);
  }
  /* 下端の継ぎ目は内側シャドウで溶かす */
  .hero { box-shadow: inset 0 -60px 70px -40px var(--bg); }
}

@layer components {
  /* <picture> は既定で高さ auto。中の img に block-size:100% を指定しても
     親の高さが未確定なのでパーセンテージが解決されず、
     画像が幅基準の高さにしかならない。picture 自体も伸ばす。 */
  .hero__media > picture,
  .band__media > picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
}

/* ============================================================
   協賛：冠を別枠、協賛は1行3つまで。ロゴを大きく見せる
   ============================================================ */
@layer components {
  .logo-wall__label {
    margin-block: 1.6rem 0.7rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--gold);
    font-weight: 700;
  }
  .logo-wall--3 { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .logo-wall--3 li { min-block-size: 9.5rem; padding: 1.5rem 1.75rem; }
  .logo-wall--3 img { max-block-size: 5.5rem; }

  .logo-wall--title { grid-template-columns: 1fr; }
  .logo-wall--title li {
    min-block-size: 11rem;
    padding: 2rem;
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--gold), transparent 45%);
  }
  .logo-wall--title img { max-block-size: 6.5rem; }

  @media (max-width: 47.99rem) {
    .logo-wall--3 { grid-template-columns: repeat(2, 1fr); }
    .logo-wall--3 li { min-block-size: 7rem; padding: 1rem; }
    .logo-wall--3 img { max-block-size: 3.6rem; }
  }
}

/* ============================================================
   レジェンド／ゲストのカード（参考デザイン準拠）
     切り抜き人物＋大きな英字名。横スクロールで並べる
   ============================================================ */
@layer components {
  .legend-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 17rem);
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
  }
  .legend { scroll-snap-align: start; }

  .legend__card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 0.9rem;
    overflow: hidden;
    background:
      linear-gradient(150deg,
        color-mix(in oklch, var(--navy), black 25%) 0%,
        color-mix(in oklch, var(--navy), black 25%) 48%,
        color-mix(in oklch, var(--navy), black 45%) 48%,
        color-mix(in oklch, var(--navy), black 45%) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold), transparent 78%);
  }
  /* 斜めの金アクセント */
  .legend__card::before {
    content: "";
    position: absolute;
    inset-block: -20%;
    inset-inline-start: 58%;
    inline-size: 42%;
    background: linear-gradient(180deg,
      color-mix(in oklch, var(--amber), transparent 88%),
      color-mix(in oklch, var(--amber), transparent 97%));
    rotate: 18deg;
  }
  .legend__photo {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    margin-inline: auto;
    max-block-size: 96%;
    inline-size: auto;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 10px 24px oklch(0.08 0.01 250 / 0.6));
  }
  .legend__en {
    position: absolute;
    inset-inline: 0.7rem;
    inset-block-end: 0.55rem;
    font-family: var(--font-en);
    font-size: clamp(1.05rem, 0.75rem + 0.9vw, 1.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: var(--amber);
    text-transform: uppercase;
    text-shadow: 0 2px 10px oklch(0.08 0.01 250 / 0.8);
    word-break: keep-all;
  }
  .legend__jp {
    margin-block-start: 0.65rem;
    font-size: 0.92rem;
    color: var(--ink);
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   ヘッダー：ロゴ左／ナビ中央／右端に全高のCTAブロック
     参考デザイン準拠。CTAはヘッダーの端まで届かせる
   ============================================================ */
@layer components {
  .site-header__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-block-size: 4.6rem;
    inline-size: 100%;
    padding: 0;
    flex-wrap: nowrap;
  }

  .site-header__logo {
    display: flex;
    align-items: center;
    padding-inline: clamp(1rem, 0.5rem + 1.6vw, 2rem);
    flex-shrink: 0;
  }
  .site-header__logo img { block-size: 2.6rem; }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-inline-size: 0;
    margin-inline: 0;
    padding-inline-end: clamp(0.75rem, 0.3rem + 1.4vw, 2rem);
  }
  .site-nav ul { flex-wrap: nowrap; gap: clamp(0.7rem, 0.2rem + 1.3vw, 1.8rem); }
  .site-nav a { white-space: nowrap; }

  .site-header__ctas { display: flex; align-items: stretch; flex-shrink: 0; }
  .hcta {
    display: grid;
    place-items: center;
    padding-inline: clamp(0.9rem, 0.4rem + 1.5vw, 2.1rem);
    font-size: clamp(0.74rem, 0.66rem + 0.25vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s, color .18s;
  }
  .hcta--sub  { background: oklch(0.22 0.012 250); color: var(--ink); }
  .hcta--sub:hover  { background: oklch(0.28 0.014 250); }
  .hcta--main { background: var(--amber); color: #17130a; }
  .hcta--main:hover { background: var(--accent-deep); }
}

@media (max-width: 61.99rem) {
  .site-header__inner { flex-wrap: wrap; min-block-size: 0; }
  .site-header__logo { padding-block: 0.6rem; }
  .site-nav { order: 3; flex-basis: 100%; justify-content: center; padding: 0.1rem 0 0.55rem; }
  .site-nav ul { flex-wrap: wrap; justify-content: center; }
  .site-header__ctas { margin-inline-start: auto; }
  .hcta { padding-block: 0.9rem; }
}

@layer components {
  /* ナビ＋CTAのまとまり。装飾はせず、帯の中で並べるだけ */
  .site-header__panel {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-inline-size: 0;
  }
  /* スクロールしても全幅の帯のまま。地だけ濃くして可読性を上げる */
  .site-header.is-scrolled {
    background: color-mix(in oklch, var(--bg), transparent 2%);
  }
}

@media (max-width: 61.99rem) {
  .site-header__panel { flex-basis: 100%; flex-wrap: wrap; }
}

@layer components {
  /* 写真の上だと細い線だけでは輪郭が見えない。
     半透明の地とはっきりした縁を与えて、ボタンだと分かるようにする */
  .btn--ghost {
    background: color-mix(in oklch, oklch(0.16 0.01 250), transparent 25%);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 2px color-mix(in oklch, white, transparent 45%);
    color: #fff;
  }
  .btn--ghost:hover {
    background: color-mix(in oklch, oklch(0.16 0.01 250), transparent 5%);
    box-shadow: inset 0 0 0 2px var(--amber);
    color: var(--amber);
  }
}

@layer components {
  /* モックアップ用の帯は固定しない。
     固定するとスクロール時にヘッダー（z-index下）を覆い隠してしまう */
  .mockbar, .samplebar { position: static; }
  .samplebar + .mockbar { inset-block-start: auto; }
}

/* ============================================================
   確認マーカーの見せ方を変更
     旧：本文を色付きの箱で囲む → デザインの一部に見えて紛らわしい
     新：本文は本番どおりに描画し、破線の下線＋小さな添え字で注記する
   ============================================================ */
@layer components {
  .tbd, .carry {
    display: inline;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }

  /* 現行踏襲＝値は入っている。本文はそのまま、下線だけで印を付ける */
  .carry {
    color: inherit;
    border-block-end: 2px dotted color-mix(in oklch, var(--carry), transparent 30%);
  }
  .carry::after {
    content: "No." attr(data-ref);
    margin-inline-start: 0.35em;
    padding: 0.05em 0.35em;
    border-radius: 0.2em;
    background: color-mix(in oklch, var(--carry), transparent 82%);
    color: oklch(0.86 0.07 205);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: super;
    opacity: 0.9;
  }

  /* 要確定＝値が無い。ラベル自体が仮の文字なので、本文と区別できるよう淡くする */
  .tbd {
    color: color-mix(in oklch, var(--ink-mut), transparent 25%);
    font-style: italic;
    border-block-end: 2px dotted color-mix(in oklch, var(--tbd), transparent 25%);
  }
  .tbd::before {
    content: "";
  }
  .tbd::after {
    content: "要確定 No." attr(data-ref);
    margin-inline-start: 0.35em;
    padding: 0.05em 0.35em;
    border-radius: 0.2em;
    background: color-mix(in oklch, var(--tbd), transparent 80%);
    color: oklch(0.86 0.10 25);
    font-size: 0.6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.02em;
    vertical-align: super;
  }
  /* data-ref は "No.24" 形式で入っているので二重の "No." を避ける */
  .carry::after { content: attr(data-ref); }
  .tbd::after   { content: "要確定 " attr(data-ref); }
}

/* ============================================================
   レジェンドカードを白背景に
     金の名前は白地だとコントラストが取れない（約1.9:1）ので、
     名前は濃紺寄りの黒に変更。金は細いアクセント線に回す
   ============================================================ */
@layer components {
  .legend__card {
    background:
      linear-gradient(150deg,
        #ffffff 0%,
        #ffffff 47%,
        oklch(0.94 0.005 250) 47%,
        oklch(0.90 0.008 250) 100%);
    box-shadow:
      inset 0 0 0 1px oklch(0.85 0.01 250),
      0 12px 28px -16px oklch(0.05 0.01 250 / 0.8);
  }
  /* 斜めのアクセントは金を薄く残して既存のトーンと繋ぐ */
  .legend__card::before {
    background: linear-gradient(180deg,
      color-mix(in oklch, var(--amber), transparent 78%),
      color-mix(in oklch, var(--amber), transparent 94%));
  }
  .legend__photo {
    filter: drop-shadow(0 8px 18px oklch(0.45 0.01 250 / 0.35));
  }
  .legend__en {
    color: oklch(0.22 0.02 250);
    text-shadow: none;
  }
  /* 名前の上に細い金の線を置いて、カード下部を締める */
  .legend__en::before {
    content: "";
    display: block;
    inline-size: 2.2rem;
    block-size: 3px;
    background: var(--amber);
    margin-block-end: 0.4rem;
  }
}

@layer components {
  /* 写真の濃い部分に名前が重なると読めないので、
     カード下部に白のスクリムを敷いて可読性を確保する。
     重なり順：写真 → スクリム → 名前 */
  .legend__card { isolation: isolate; }
  .legend__photo { z-index: 0; }
  .legend__card::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 38%;
    z-index: 1;
    background: linear-gradient(to top,
      #ffffff 0%,
      oklch(1 0 0 / 0.97) 42%,
      oklch(1 0 0 / 0.75) 68%,
      transparent 100%);
    pointer-events: none;
  }
  .legend__en { z-index: 2; }
}

@layer components {
  /* 冠協賛の白枠は全幅に伸ばさず、ロゴに合わせた幅にする。
     ロゴ自体は大きいまま */
  .logo-wall--title {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
  }
  .logo-wall--title li {
    inline-size: auto;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 1.5rem 2.6rem;
  }
  .logo-wall--title img { max-block-size: 5.2rem; }

  @media (max-width: 47.99rem) {
    .logo-wall--title li { padding: 1.1rem 1.5rem; }
    .logo-wall--title img { max-block-size: 3.4rem; }
  }
}

@layer components {
  /* ヒーロー直後のレジェンド。白いカードを目立たせるため地は無地の暗色。
     写真バンド → 無地 → ネット地 のリズムを崩さない位置 */
  .section--legend {
    background: linear-gradient(180deg,
      var(--bg) 0%,
      oklch(0.17 0.012 250) 45%,
      var(--bg) 100%);
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  }
  .legend-note {
    margin-block-start: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.2rem;
    font-size: 0.9rem;
    color: var(--ink-mut);
  }
  .legend-more {
    color: var(--amber);
    font-weight: 700;
    text-decoration: none;
    border-block-end: 1px solid color-mix(in oklch, var(--amber), transparent 60%);
  }
  .legend-more:hover { border-block-end-color: var(--amber); }
}

@layer components {
  /* 冠スポンサーは大会の看板なので、ヒーロー内で十分な面積を取る */
  .presents-logo {
    inline-size: clamp(13rem, 8rem + 15vw, 23rem);
    margin-block-end: 0.7rem;
  }
  .hero__presents {
    font-size: clamp(0.82rem, 0.68rem + 0.55vw, 1.15rem);
    letter-spacing: 0.18em;
    margin-block-end: 1.5rem;
  }
}

/* ============================================================
   レジェンド：自動で流れるカルーセル
     カードを複製して連結し、トラックを -50% ずらし続けることで
     途切れないループにする。ホバー／フォーカスで停止。
     Wixでは「ギャラリーの自動再生」で同等の演出になる。
   ============================================================ */
@layer components {
  .legend-rail {
    display: block;
    overflow: hidden;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    scroll-snap-type: none;
    padding-block-end: 0.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .legend-track,
  .legend-clone {
    display: flex;
    gap: 1.4rem;
    inline-size: max-content;
  }
  .legend-track { animation: legend-rail 55s linear infinite; }
  .legend-clone { margin-inline-start: 1.4rem; }

  .legend-rail:hover .legend-track,
  .legend-rail:focus-within .legend-track { animation-play-state: paused; }

  @keyframes legend-rail {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 0.7rem)); }
  }

  /* カードを3枚見える大きさに */
  .legend {
    flex: 0 0 auto;
    inline-size: clamp(15rem, 10rem + 14vw, 21.5rem);
    scroll-snap-align: none;
  }
  .legend__en { font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.75rem); }
  .legend__jp { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .legend-track { animation: none; }
  .legend-rail { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================
   レジェンド：人物が背景カードから上にはみ出す構成
     frame … 余白を含む器（はみ出し分の高さを確保）
     card  … 色面と斜めアクセント。ここだけ角丸＋クリップ
     photo … card の外に置くのではみ出せる
     scrim … 名前の可読性を確保。写真より前、名前より後ろ
   ============================================================ */
@layer components {
  .legend__frame {
    position: relative;
    isolation: isolate;
    padding-block-start: 16%;          /* はみ出す余白 */
  }

  .legend__card {
    position: relative;
    inset: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0.9rem;
    overflow: hidden;
    z-index: 0;
  }

  .legend__photo {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    margin-inline: auto;
    block-size: auto;
    max-block-size: 100%;              /* frame の高さ＝カード＋はみ出し分 */
    inline-size: auto;
    max-inline-size: 96%;
    object-fit: contain;
    object-position: bottom;
    z-index: 1;
    filter: drop-shadow(0 10px 20px oklch(0.05 0.01 250 / 0.45));
  }

  /* スクリムは frame 側に持たせ、写真より前面に出す */
  .legend__card::after { content: none; }
  .legend__frame::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 30%;
    z-index: 2;
    border-end-start-radius: 0.9rem;
    border-end-end-radius: 0.9rem;
    background: linear-gradient(to top,
      #ffffff 0%,
      oklch(1 0 0 / 0.96) 45%,
      oklch(1 0 0 / 0.7) 72%,
      transparent 100%);
    pointer-events: none;
  }

  .legend__en { z-index: 3; }
}

@layer components {
  /* はみ出し量を増やす。写真は高さ基準で伸ばし、幅は多少はみ出しても許容する
     （幅が制約になると縦に伸びず、はみ出しが出ないため） */
  .legend__frame { padding-block-start: 24%; }
  .legend__photo {
    block-size: 100%;
    max-block-size: none;
    inline-size: auto;
    max-inline-size: 112%;
  }

  /* --- 見出しをすべてゴールドに --- */
  .sec-head__jp { color: var(--gold); }
  .faq summary { color: var(--amber); }
  .legend__jp  { color: var(--gold); }
  .logo-wall__label { color: var(--amber); }
}

/* ============================================================
   レジェンド：全幅の白セクション ／ カードはゴールドで下半分のみ
     人物は白地の上にはみ出す（参考デザイン準拠）
   ============================================================ */
@layer components {
  /* CSSの連続スクロールは廃止。送りはJSが担当 */
  .legend-track { animation: none; }
  .legend-clone { margin-inline-start: 1.4rem; }

  .section--legend {
    background: #ffffff;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  }
  /* 白地では金の見出しがコントラスト不足になるため一段暗い金にする */
  .section--legend .sec-head__en { color: oklch(0.56 0.11 72); }
  .section--legend .sec-head__jp { color: oklch(0.48 0.05 80); }
  .section--legend .sec-head__en::after { background: oklch(0.56 0.11 72); }
  .section--legend .legend-note { color: oklch(0.42 0.02 250); }
  .section--legend .legend-more { color: oklch(0.50 0.12 60); border-block-end-color: currentColor; }
  .section--legend .tbd { color: oklch(0.52 0.10 25); }

  /* 白地なのでレール端のマスクも白に馴染ませる（マスクは色に依存しないのでそのまま） */

  /* --- カードはゴールド。高さは器の半分強にとどめる --- */
  .legend__frame { padding-block-start: 0; }
  .legend__card {
    aspect-ratio: auto;
    block-size: 15rem;
    margin-block-start: 9.5rem;        /* 上にはみ出す余白 */
    border-radius: 0.9rem;
    background: linear-gradient(150deg,
      oklch(0.84 0.13 88) 0%,
      oklch(0.78 0.14 80) 46%,
      oklch(0.70 0.13 74) 46%,
      oklch(0.62 0.11 70) 100%);
    box-shadow: 0 14px 30px -18px oklch(0.35 0.06 70 / 0.8);
  }
  .legend__card::before {
    background: linear-gradient(180deg,
      oklch(1 0 0 / 0.22), oklch(1 0 0 / 0.05));
  }

  .legend__photo {
    max-inline-size: 108%;
    filter: drop-shadow(0 12px 22px oklch(0.45 0.03 250 / 0.32));
  }

  /* 金地の上なので、名前は濃い墨色。スクリムは不要 */
  .legend__frame::after { content: none; }
  .legend__en {
    color: oklch(0.24 0.03 70);
    inset-block-end: 0.9rem;
  }
  .legend__en::before { background: oklch(0.28 0.03 70); }
  .legend__jp { color: oklch(0.35 0.02 250); }
}

@layer components {
  /* ヒーローの内容を上寄せに。上下の余白を非対称にする */
  .hero__inner {
    padding-block: clamp(1.2rem, 0.6rem + 3.2vw, 3rem)
                   clamp(3rem, 1.5rem + 9vw, 8rem);
  }

  /* カードの margin だと器の高さに乗らず、写真の 100% がカード高になって
     はみ出しが消えていた。器側の padding に持たせる */
  .legend__card { margin-block-start: 0; }
  .legend__frame { padding-block-start: 9.5rem; }
}

@layer components {
  /* 名前が人物に重なって読めないので、カード下部に無地の金帯を敷く。
     写真より前面・名前より背面。Wixでは矩形＋テキストで再現できる */
  .legend__frame::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 3.6rem;
    z-index: 2;
    background: oklch(0.74 0.135 78);
    border-end-start-radius: 0.9rem;
    border-end-end-radius: 0.9rem;
    box-shadow: 0 -1px 0 oklch(0.62 0.11 70 / 0.5);
    pointer-events: none;
  }
  .legend__en {
    inset-block-end: 0.55rem;
    color: oklch(0.24 0.03 70);
  }
  .legend__en::before { margin-block-end: 0.3rem; }
}

@layer components {
  /* 左右のフェード（マスク）は不要 */
  .legend-rail {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@layer components {
  /* 和文だけの大見出し（レジェンド用） */
  .sec-head--jp {
    font-size: clamp(1.6rem, 0.9rem + 2.6vw, 3rem);
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: oklch(0.56 0.11 72);        /* 白地でも読める濃いめの金 */
    margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  }
  .sec-head--jp::after {
    content: "";
    display: block;
    inline-size: 3.5rem;
    block-size: 3px;
    background: oklch(0.56 0.11 72);
    margin-block-start: 0.9rem;
  }
}

@layer components {
  /* 1行で収める。長いので字間を詰め、狭い画面では自動で折り返す */
  .sec-head--jp {
    letter-spacing: 0.02em;
    text-wrap: nowrap;
    font-size: clamp(1.5rem, 0.6rem + 2.7vw, 2.7rem);
  }
  @media (max-width: 47.99rem) {
    .sec-head--jp { text-wrap: balance; }
  }
}

@layer components {
  /* ナビのホバーに下線。transform だけで動かすのでレイアウトに影響しない */
  .site-nav a {
    position: relative;
    padding-block: 0.35em;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
  }
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: none; }
}

/* ============================================================
   開催概要：左に大会情報、右に特典・注記を並べる
   ============================================================ */
@layer components {
  .outline-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(1rem, 0.5rem + 2vw, 2rem);
    align-items: start;
  }
  .outline-side { display: grid; gap: 1.1rem; }

  /* 縦長の枠に入るので、特典は横並びから縦積みに変える */
  .outline-side .perk {
    display: block;
    text-align: center;
    padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  }
  .outline-side .perk__label {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--gold);
    margin-block-end: 0.6rem;
  }
  .outline-side .perk__value {
    display: block;
    font-size: clamp(1.5rem, 0.9rem + 1.9vw, 2.4rem);
    line-height: 1.15;
  }
  .outline-side .perk__note {
    display: block;
    margin-block-start: 0.9rem;
    text-align: start;
  }

  @media (max-width: 61.99rem) {
    .outline-grid { grid-template-columns: 1fr; }
  }
}

/* ============================================================
   表彰（PRIZE）
   ============================================================ */
@layer components {
  .awards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }
  .awards__block {
    background: color-mix(in oklch, var(--bg-2), transparent 8%);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.2rem, 0.9rem + 1.2vw, 1.9rem);
  }
  /* 優勝チームは主役なので幅を取り、金の縁で立てる */
  .awards__block:first-child {
    grid-column: 1 / -1;
    border-color: color-mix(in oklch, var(--amber), transparent 45%);
    background:
      radial-gradient(120% 140% at 0% 0%,
        color-mix(in oklch, var(--amber), transparent 90%), transparent 60%),
      color-mix(in oklch, var(--bg-2), transparent 4%);
  }
  .awards__title {
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
    color: var(--amber);
    letter-spacing: 0.06em;
    margin-block-end: 0.85rem;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid color-mix(in oklch, var(--gold), transparent 70%);
  }
  .awards__block:first-child .awards__title { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem); }
  .awards__note {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.82rem;
    color: var(--ink-mut);
  }
}

@layer components {
  /* 本文が小さいので、規約まわりの文字を一段上げる */
  .rulebox { font-size: 1.06rem; line-height: 1.9; }
  .rulebox .bullets li { padding-inline-start: 1.3em; }
  .rulebox .bullets li::before { inset-block-start: 0.78em; inline-size: 0.4em; block-size: 0.4em; }
  .rulebox__title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); margin-block-end: 1rem; }
  .rulebox .small { font-size: 0.95rem; }
  .note { font-size: 1rem; }
  .awards { font-size: 1.06rem; line-height: 1.9; }
  .faq summary { font-size: 1.08rem; }
  .faq__a { font-size: 1.02rem; line-height: 1.9; }
  .deflist { font-size: 1.02rem; }
}

@layer components {
  /* 冠協賛はセンター寄せ */
  .logo-wall--title { justify-content: center; }

  /* 会場の地図 */
  .venue-map__wrap { margin-block-start: 1.5rem; }
  .venue-map {
    display: block;
    inline-size: 100%;
    block-size: clamp(14rem, 10rem + 12vw, 21rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    filter: saturate(0.85) brightness(0.94);
  }
  .venue-map--empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    background: color-mix(in oklch, var(--bg-2), transparent 20%);
    border-style: dashed;
    color: var(--ink-mut);
    font-size: 0.95rem;
  }
  .venue-map__note { margin-block-start: 0.55rem; }
}

/* ============================================================
   ローディング
     ★ JSが動かなくても必ず消えるよう、CSSアニメーションで
       自動的に非表示になるようにしている（フェイルオープン）
   ============================================================ */
@layer components {
  .loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--bg);
    animation: loader-failsafe .6s ease 4.8s forwards;   /* 4.8秒で必ず解除（最低表示3秒より後ろ） */
  }
  .loader.is-done { animation: none; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }

  .loader__inner { display: grid; justify-items: center; gap: 1.1rem; padding: 2rem; }
  .loader__logo {
    inline-size: clamp(7rem, 5rem + 8vw, 11rem);
    block-size: auto;
    filter: drop-shadow(0 0 18px color-mix(in oklch, var(--amber), transparent 60%));
  }
  .loader__text {
    font-family: var(--font-en);
    font-size: clamp(0.72rem, 0.6rem + 0.45vw, 0.95rem);
    letter-spacing: 0.3em;
    color: var(--gold);
    text-indent: 0.3em;
  }
  .loader__bar {
    inline-size: clamp(9rem, 6rem + 12vw, 15rem);
    block-size: 2px;
    background: color-mix(in oklch, var(--ink), transparent 85%);
    overflow: hidden;
    border-radius: 2px;
  }
  .loader__bar span {
    display: block;
    block-size: 100%;
    inline-size: 40%;
    background: var(--amber);
    animation: loader-sweep 1.15s cubic-bezier(.65,0,.35,1) infinite;
  }

  @keyframes loader-sweep {
    from { transform: translateX(-120%); }
    to   { transform: translateX(320%); }
  }
  @keyframes loader-failsafe {
    to { opacity: 0; visibility: hidden; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader { animation-delay: .2s; }
  .loader__bar span { animation: none; inline-size: 100%; }
}

/* ============================================================
   開催概要の表を2カラムに
   ============================================================ */
@layer components {
  .deflist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.2rem, 0.6rem + 2vw, 2.6rem);
  }
  /* 募集区分は行数が多いので全幅で使う */
  .deflist > div:last-child { grid-column: 1 / -1; }
  .deflist > div { grid-template-columns: 6.5rem 1fr; }
  .deflist > div:last-child { grid-template-columns: 6.5rem 1fr; }

  @container (max-width: 34rem) {
    .deflist { grid-template-columns: 1fr; }
  }
}

/* ============================================================
   本大会バナー ／ 他の予選大会
   ============================================================ */
@layer components {
  .mainbanner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
    padding: clamp(1.2rem, 0.9rem + 1.4vw, 2rem);
    border-radius: var(--radius);
    text-decoration: none;
    background:
      radial-gradient(120% 160% at 0% 0%,
        color-mix(in oklch, var(--amber), transparent 82%), transparent 62%),
      linear-gradient(100deg, var(--navy), oklch(0.18 0.012 250));
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--amber), transparent 55%);
    transition: transform .2s, box-shadow .2s;
  }
  .mainbanner:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--amber);
  }
  .mainbanner__label {
    font-family: var(--font-en);
    font-size: clamp(1.3rem, 0.9rem + 1.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--amber);
    padding-inline-end: clamp(0.8rem, 0.5rem + 1vw, 1.6rem);
    border-inline-end: 1px solid color-mix(in oklch, var(--gold), transparent 65%);
  }
  .mainbanner__body { display: grid; gap: 0.3rem; }
  .mainbanner__title {
    font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.5rem);
    font-weight: 700;
    color: var(--ink);
  }
  .mainbanner__sub { font-size: 0.92rem; color: var(--ink-mut); }
  .mainbanner__go {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--amber);
    white-space: nowrap;
  }
  .mainbanner__go::after { content: " →"; }

  .related-label {
    margin-block: 2rem 0.8rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--amber);
    font-weight: 700;
  }
  .related-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  }
  .related-card {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: color-mix(in oklch, var(--bg-2), transparent 10%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .2s, transform .2s;
  }
  .related-card:hover { border-color: var(--amber); transform: translateY(-2px); }
  .related-card__pref { font-size: 0.72rem; color: var(--gold); letter-spacing: 0.1em; }
  .related-card__name { font-size: 0.95rem; font-weight: 700; color: var(--ink); }

  .related-all { margin-block-start: 1.2rem; }
  .related-all a { color: var(--amber); font-weight: 700; }

  @media (max-width: 47.99rem) {
    .mainbanner { grid-template-columns: 1fr; text-align: center; }
    .mainbanner__label { border-inline-end: 0; padding-inline-end: 0; }
  }
}

/* ============================================================
   ヒーローの動画背景
     静止画を下に敷き、その上で動画を再生する。
     動画が読めない／動きを抑える設定のときは静止画が残る。
   ============================================================ */
@layer components {
  .hero__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .hero__media picture,
  .hero__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ============================================================
   ENTRY：カード内に写真を入れて2カラムに
   ============================================================ */
@layer components {
  .cta--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    text-align: start;
  }
  .cta__media { position: relative; min-block-size: 16rem; }
  .cta__media picture,
  .cta__media img {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
  }
  .cta__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      oklch(0.13 0.01 250 / 0.25) 0%,
      oklch(0.13 0.01 250 / 0.15) 55%,
      var(--navy) 100%);
  }
  .cta__body {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.4rem;
    padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  }
  .cta--split .cta__deadline { margin-block: 0.6rem 1.6rem; }

  @media (max-width: 47.99rem) {
    .cta--split { grid-template-columns: 1fr; }
    .cta__media { min-block-size: 11rem; }
    .cta__media::after {
      background: linear-gradient(180deg,
        oklch(0.13 0.01 250 / 0.2) 0%, var(--navy) 100%);
    }
    .cta__body { justify-items: center; text-align: center; }
  }
}

/* ============================================================
   他の予選大会：バナー画像カード
   ============================================================ */
@layer components {
  .related-grid { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.8rem; }
  .related-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 0.1rem;
    min-block-size: 6.5rem;
    padding: 1rem 1.15rem;
    align-content: end;
    background: var(--bg-2);
    border-color: color-mix(in oklch, var(--gold), transparent 78%);
  }
  .related-card__bg,
  .related-card__bg img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
  }
  .related-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      oklch(0.12 0.01 250 / 0.45) 0%,
      oklch(0.12 0.01 250 / 0.78) 55%,
      oklch(0.12 0.01 250 / 0.92) 100%);
    transition: background .25s;
  }
  .related-card:hover::before {
    background: linear-gradient(180deg,
      oklch(0.12 0.01 250 / 0.25) 0%,
      oklch(0.12 0.01 250 / 0.62) 55%,
      oklch(0.12 0.01 250 / 0.88) 100%);
  }
  .related-card__bg img { transition: transform .45s ease; }
  .related-card:hover .related-card__bg img { transform: scale(1.06); }
  .related-card__name { font-size: 1.05rem; }
  .related-card__pref { color: var(--amber); }
}

/* ============================================================
   フッター
   ============================================================ */
@layer components {
  .site-footer {
    background:
      linear-gradient(180deg,
        oklch(0.16 0.012 250) 0%,
        oklch(0.12 0.008 250) 100%),
      url("../images/pattern-net.png") repeat;
    background-size: cover, 80px 138px;
    border-block-start: 2px solid color-mix(in oklch, var(--amber), transparent 55%);
    padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) 0;
  }
  .footer-grid {
    display: grid;
    gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
    grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .footer-brand img { inline-size: clamp(7rem, 5rem + 6vw, 10rem); block-size: auto; }
  .footer-brand__en {
    margin-block-start: 0.8rem;
    font-family: var(--font-en);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    color: var(--gold);
  }
  .footer-col__title {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    color: var(--amber);
    padding-block-end: 0.6rem;
    margin-block-end: 0.9rem;
    border-block-end: 1px solid color-mix(in oklch, var(--gold), transparent 72%);
  }
  .footer-col p { font-size: 0.88rem; line-height: 1.85; }
  .footer-col p + p { margin-block-start: 0.7rem; }
  .footer-mail a { font-weight: 700; letter-spacing: 0.03em; }
  .footer-links { display: grid; gap: 0.5rem; }
  .footer-links a {
    font-size: 0.88rem;
    color: var(--ink-mut);
    text-decoration: none;
    transition: color .18s;
  }
  .footer-links a:hover { color: var(--amber); }
  .site-footer .copyright {
    margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
    padding-block: 1.1rem;
    text-align: center;
  }

  @media (max-width: 61.99rem) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 34rem) {
    .footer-grid { grid-template-columns: 1fr; }
  }
}

@layer components {
  /* ヒーローは大きめに動かして、順番に立ち上がる印象を出す */
  [data-reveal].reveal--hero {
    transform: translateY(34px) scale(0.985);
    transition:
      opacity .85s cubic-bezier(.22,.61,.36,1),
      transform .85s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].reveal--hero.is-visible { transform: none; }
}

@layer components {
  /* 右カラムに入るので、地図は縦を少し詰めて枠に馴染ませる */
  .outline-side .venue-map__wrap { margin-block-start: 0; }
  .outline-side .venue-map { block-size: clamp(13rem, 9rem + 10vw, 18rem); }
}

/* ============================================================
   レジェンドセクション：白一色をやめて質感を持たせる
     ・暖色寄りのオフホワイトにグラデーション
     ・ネットパターンを淡く敷いて他セクションと同じ言語にする
     ・上下端を暗色へなじませて、前後のセクションとの段差を消す
   ============================================================ */
@layer components {
  .section--legend {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(140% 90% at 50% -10%,
        color-mix(in oklch, var(--amber), transparent 82%) 0%, transparent 58%),
      linear-gradient(180deg,
        oklch(0.955 0.008 85) 0%,
        oklch(0.985 0.004 85) 42%,
        oklch(0.935 0.010 82) 100%);
  }
  /* 淡いネット地。他セクションと同じモチーフを明るい面でも使う */
  .section--legend::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/pattern-net-dark.png") repeat;
    background-size: 80px 138px;
    opacity: 0.13;
    pointer-events: none;
  }
  /* 上下端を暗色へ溶かす */
  .section--legend::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, var(--bg) 0%, transparent 7%),
      linear-gradient(0deg,  var(--bg) 0%, transparent 7%);
  }

  /* 見出しと本文を一段濃くして、明るい地の上で締める */
  .section--legend .sec-head--jp { color: oklch(0.47 0.11 68); }
  .section--legend .sec-head--jp::after { background: oklch(0.62 0.14 72); }
  .legend__jp { color: oklch(0.32 0.02 250); font-weight: 700; }

  /* カードの影を強めて面から浮かせる */
  .legend__card {
    box-shadow:
      0 18px 34px -20px oklch(0.30 0.05 70 / 0.55),
      0 2px 6px -2px oklch(0.30 0.05 70 / 0.25);
  }
}

@layer components {
  /* GUEST もレジェンドと同じ明るい面にするので、
     欧文見出し・本文・注記の色を明るい地に合わせる */
  .section--legend .sec-head__en { color: oklch(0.56 0.11 72); }
  .section--legend .sec-head__en::after { background: oklch(0.62 0.14 72); }
  .section--legend .sec-head__jp { color: oklch(0.47 0.06 80); }
  .section--legend .muted,
  .section--legend .small.muted { color: oklch(0.44 0.02 250); }
  .section--legend .rulebox {
    background: oklch(1 0 0 / 0.55);
    border-color: oklch(0.86 0.01 80);
    color: oklch(0.28 0.02 250);
  }
  .section--legend .rulebox__title { color: oklch(0.47 0.11 68); }
  .section--legend .bullets li::before { background: oklch(0.62 0.14 72); }
  .section--legend .pending { color: oklch(0.52 0.02 250); }
  .section--legend .carry { color: inherit; }
}

@layer components {
  /* 本番で値が未確定の箇所。マーカーではなく控えめな「調整中」 */
  .pending-live {
    color: color-mix(in oklch, currentColor, transparent 40%);
    font-size: 0.86em;
    font-weight: 400;
  }
}

/* ============================================================
   ヘッダー：スマホ表示の整理
     ロゴを上段中央、CTAを2つ横並びで全幅、ナビを最下段に
   ============================================================ */
@media (max-width: 61.99rem) {
  .site-header__inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
  }
  .site-header__logo {
    flex: 1 0 100%;
    justify-content: center;
    padding-block: 0.7rem 0.5rem;
  }
  .site-header__panel {
    flex: 1 0 100%;
    flex-direction: column-reverse;   /* CTAを上、ナビを下に */
  }
  .site-header__ctas {
    inline-size: 100%;
    margin-inline-start: 0;
  }
  .site-header__ctas .hcta {
    flex: 1 1 50%;
    padding-block: 0.85rem;
    font-size: 0.8rem;
  }
  .site-nav {
    inline-size: 100%;
    justify-content: center;
    padding: 0.55rem 0.5rem;
  }
  .site-nav ul { justify-content: center; gap: 0.35rem 0.9rem; }
  .site-nav a { font-size: 0.72rem; letter-spacing: 0.06em; }
}

/* アンカー移動時に固定ヘッダーへ潜り込まないようにする */
@layer base {
  section[id] { scroll-margin-block-start: 5.5rem; }
}