/* =============================================================================
   components.css — 最小コンポーネント（@layer components）
   -----------------------------------------------------------------------------
   ヘッダ／ナビ／ボタン／カード／フッター等の見た目。すべて tokens.css の
   意味トークンを参照します（生のマジックナンバーは書きません）。
   設計方式は「素直な単一クラス中心」（過剰な抽象化をしない）。
   02_conventions/css.md / accessibility.md 準拠。
   ============================================================================= */

@layer components {
  /* ====================== レイアウト共通 ====================== */

  /* 中央寄せコンテナ（左右ガター付き・論理プロパティ） */
  .container {
    inline-size: 100%;
    max-inline-size: var(--layout-max-inline);
    margin-inline: auto;
    padding-inline: var(--layout-gutter);
  }

  /* セクションの上下余白 */
  .section {
    padding-block: var(--space-2xl);
  }

  .section-narrow {
    padding-block: var(--space-xl);
  }

  /* ====================== スキップリンク ====================== */

  /* 通常は画面外に隠し、キーボードでフォーカスされたら左上に出現させる。
     accessibility.md §2.4（2.4.1）。 */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: var(--z-toast);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ====================== サイトヘッダ／ナビ ====================== */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    /* 列間 gap は最小値として効く（space-between が実際の間隔を広げるため、
       収まる幅では見た目に影響しない）。ナビ9項目化（2026-08-13 指示書2）で
       ロゴ＋ナビ＋言語切替＋CTAを 1152px コンテナの1行に収めるため列間のみ詰めた。
       行間（折返し時）は従来どおり space-sm を保つ。 */
    gap: var(--space-sm) var(--space-2xs);
    padding-block: var(--space-xs);
  }

  /* ロゴ（リンク）。白い台座パネルを兼ねる。
     2026-08-25 指示書04 2-1: 台座は「角丸の四角」へ変更（旧: 現行サイト踏襲の
     右下だけ45pxの非対称角丸——特にPCでロゴの右下が欠けて見えるとの上田様指摘）。
     トップページの透過ヘッダー（.page-home）ではヒーローに白い台座として浮かぶ。 */
  .site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);

    /* 横パディングはナビ9項目化（2026-08-13 指示書2）に伴い sm→2xs へ詰めた
       （ヘッダー1行維持のため。48rem 未満の圧縮変則と同値になり見た目も揃う）。 */
    padding-inline: var(--space-2xs);
    color: var(--color-text-strong);
    font-size: var(--text-md);
    font-weight: 700;
    text-decoration: none;
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);

    /* タップ領域確保（24px 以上） */
    min-block-size: var(--size-7);
  }

  .site-logo__mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--color-primary); /* ロゴ SVG は currentColor で追従 */
  }

  /* グローバルナビ */
  .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ヘッダー内だけ項目間ギャップを一段詰める（ナビ9項目化・2026-08-13 指示書2。
     リンク自身の横パディング 2xs×2 と合わせ、隣接テキスト間は 20px を確保。
     フッターの .nav-list には影響させない。48rem 未満は 2458 行付近の
     モバイル縦積み規則（gap: 0・特異度 0,3,0）が引き続き勝つ）。 */
  .site-header__nav .nav-list {
    gap: var(--space-3xs);
  }

  /* 48rem 以上（横並びヘッダー）のみ: ナビ文字を base→sm へ一段下げる。
     ナビ9項目化（2026-08-13 指示書2）で 1152px コンテナ（左右 padding を
     除く実容量 1104px）に1行で収めるための主対策（パディングをこれ以上
     削るより可読性への影響が小さい）。同じ行の .lang-switch が既に sm 相当
     なので段も揃う。タップ領域は min-block-size 48px のまま不変。
     48rem 未満の縦積みメニューは従来どおり base のまま。 */
  @media (width >= 48rem) {
    .site-header__nav .nav-list__link {
      font-size: var(--text-sm);
    }
  }

  .nav-list__link {
    display: inline-flex;
    align-items: center;

    /* タップ領域: 高さ 24px 以上を確保（accessibility.md §2.3）。
       横パディングはナビ9項目化（2026-08-13 指示書2）に伴い xs→2xs へ詰めた
       （ヘッダー1行維持のため。高さ 48px は維持しておりタップ領域は不変）。 */
    min-block-size: var(--size-7);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
  }

  .nav-list__link:hover {
    background-color: var(--color-surface-2);
    color: var(--color-text-strong);
  }

  /* 現在地（aria-current="page"）を色だけでなく下線でも示す */
  .nav-list__link[aria-current="page"] {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
  }

  /* ====================== ボタン ====================== */

  /* a でも button でも同じ見た目にできる汎用クラス。
     タップ領域は最小 24px、主要操作は 44px 目安（accessibility.md §2.3）。 */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--size-7); /* 48px */
    min-inline-size: var(--size-7);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard);
  }

  .button:hover {
    background-color: var(--color-primary-strong);
    color: var(--color-text-on-primary);
  }

  /* 副ボタン（枠線） */
  .button--secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-link);
  }

  .button--secondary:hover {
    background-color: var(--color-surface-2);
    color: var(--color-link-hover);
  }

  /* ====================== ヒーロー ====================== */
  .hero {
    padding-block: var(--space-3xl);
    background-color: var(--color-primary-weak);
    border-block-end: 1px solid var(--color-border);
  }

  .hero__title {
    margin-block-end: var(--space-sm);
    max-inline-size: 24ch;
  }

  .hero__lead {
    /* 2026-08-20 指示書03「表示の統一化」: PCで本文が画面約1/2で折り返す幅上限を撤廃（旧 60ch。行長は視覚予算で計測継続） */
    font-size: var(--text-md);
    color: var(--color-text);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
  }

  /* ====================== カード ====================== */

  /* 列の適応はメディアクエリ（またはコンテナクエリ）で行う。
     注意: container-type は @container を実際に使うときだけ付けること。
     投機的な containment は iOS Safari(WebKit) でグリッドを min-content 幅に潰し、
     日本語が1文字ずつ縦に折り返す重大なモバイル崩れを起こす（実案件で実測・
     Chromium系の機械監査では検出できない）。auto-fit を使う場合は
     minmax(min(Xrem, 100%), 1fr) で最小幅が親を超えないよう保護する。 */
  .card-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    margin-block-start: var(--space-lg);
    list-style: none;
    padding: 0;
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    block-size: 100%;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .card__icon {
    inline-size: var(--size-6);
    block-size: var(--size-6);
    color: var(--color-primary); /* アイコン SVG は currentColor で追従 */
  }

  .card__title {
    margin-block: var(--space-2xs) 0;
  }

  .card__text {
    margin: 0;
    color: var(--color-text);
  }

  /* カード内にCTAリンクを含める場合の共通スタイル（.program-card__link 等と同じ
     見た目。admission.html の予約チャネル選択カードで使用）。 */
  .card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-block-start: var(--space-2xs);
    font-weight: 700;
    text-decoration: none;
  }

  .card__link:hover {
    text-decoration: underline;
  }

  /* ====================== 連絡先・問い合わせ導線 ====================== */
  .contact {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .contact__list {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
  }

  .contact__list div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .contact__list dt {
    min-inline-size: 6rem;
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .contact__list dd {
    margin: 0;
  }

  /* ====================== サイトフッタ ====================== */
  .site-footer {
    margin-block-start: var(--space-3xl);
    padding-block: var(--space-xl);
    background-color: var(--color-surface-2);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .site-footer a {
    color: var(--color-link);
  }

  /* ====================== 補助テキスト ====================== */
  .lead {
    font-size: var(--text-md);
    color: var(--color-text);
  }

  .text-muted {
    color: var(--color-text-muted);
  }

  /* ====================== 404 など中央寄せの単純ページ ====================== */
  .center-prose {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding-block: var(--space-3xl);
  }

  /* =========================================================================
     ここから トップページ（index.html）専用コンポーネント追加
     design-base.md §0/§5 準拠。既存の部品定義は変更せず追加のみ行う。

     注記（ブレークポイント）: メディアクエリの条件値には CSS カスタムプロパティを
     使えない（var() は @media の条件に解決されない仕様上の制約）。そのため以下は
     tokens.css の --bp-sm(36rem) / --bp-md(48rem) / --bp-lg(64rem) と同じ値を
     直接記述している。値を変える場合は tokens.css 側と揃えて更新すること。
     ========================================================================= */

  /* ── 見出し書体（design-base.md §0-2: 明朝 500・写真上でも読める中字）───────── */
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 500;
  }

  /* ── セクション背景の出し分け（design-base.md §5 セクションリズム）───────── */
  .section--tint {
    background-color: var(--color-surface);
  }

  .section--band {
    background-color: var(--color-surface-2);
  }

  .section--cta {
    padding-block: var(--space-3xl);
    background-color: var(--color-cta);
    color: var(--color-text-on-primary);
  }

  /* ── 見出し添え字（セクション種別のミニラベル） ───────────────────────── */
  .eyebrow {
    display: block;
    margin-block-end: var(--space-2xs);
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* --color-brand（ロゴ原色）は装飾・罫線専用（本文級の文字には使わない。小さい
     文字に使うと白地で4.5:1を満たさないため）。eyebrow文字自体は上のとおり
     コントラスト確保済みの --color-primary-strong のまま、代わりに添え字前の
     短い罫線をロゴ原色で飾る（装飾のみ＝コントラスト規定の対象外。
     accessibility.md §1.1）。 */
  .eyebrow::before {
    content: "";
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 3px;
    margin-inline-end: var(--space-3xs);
    background-color: var(--color-brand);
    border-radius: var(--radius-pill);
    vertical-align: middle;
  }

  /* .section-head の幅上限（旧 42rem）は撤廃——2026-08-20 指示書03「表示の統一化」: PCで本文が画面約1/2で折り返す幅上限を撤廃。
     節リード（.lead）を含む導入ブロックがコンテナ幅いっぱいまで使えるようにする */

  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-head h2 {
    margin-block-end: var(--space-2xs);
  }

  /* ── ヘッダーロゴ画像（letter.png の横長ワードマークを使用） ───────────── */
  .site-logo__img {
    /* 2026-08-25 指示書04 2-2: スマホ実機（iOS Safari）でロゴが横方向に圧縮される
       指摘への防御。flexコンテナ（.site-logo）内の置換要素はエンジンにより
       flex-shrink で幅だけ潰されることがある（headless Chrome では再現しない実機差
       ＝8/17の「再現せず」判断の訂正）。縮小禁止＋縦横比の明示で等倍を保証する。 */
    flex-shrink: 0;
    inline-size: auto;
    block-size: var(--size-6);
    aspect-ratio: 743 / 177;
  }

  /* ── ヘッダー右端の常設CTAボタン ──────────────────────────────────────── */
  .site-header__cta {
    flex-shrink: 0;

    /* ナビ9項目化（2026-08-13 指示書2）に伴い .button 既定の md より二段詰める
       （ヘッダー1行維持のため。高さは .button の min-block-size 48px のまま。
       48rem 未満の圧縮変則と同値になり見た目も揃う）。 */
    padding-inline: var(--space-xs);
  }

  /* ── トップページ限定: 透過フロートヘッダー ──────────────────────────────
     design-current-site.md §4「ナビゲーション」踏襲: ヒーローの上にヘッダーを
     重ね、スクロールで追従しないシンプルな構成（position: sticky ではなく
     absolute。JSを増やさない）。スコープは .page-home のみ（index.html の
     <body> にだけ付与。他ページは既存の白背景 sticky ヘッダーのまま）。
     "body." を付けず ".page-home" のみで書くのは selector-max-specificity
     （css.md §2 の詳細度上限）に収めるため（body要素セレクタ1つ分、余計な詳細度
     を持たせない。.page-home は body 以外に付与しない運用なので実害はない）。
     position: absolute はヘッダーを通常フローから外すため、直後の <main> は
     ページ最上部から開始し、ヒーロー画像/動画の上にヘッダーが重なる。スクロール
     すればヘッダーはドキュメントと一緒に流れて視界から消える（固定し続けない
     ＝ページ内リンクの飛び先を隠す事故が起きない）。

     幅 69rem(1104px) 未満では適用しない: ナビ＋ロゴ＋CTAボタンが1行に
     収まらず複数行に折り返すと、position: absolute で通常フローから外れている
     ため後続のヒーロー文言（h1/リード文）に重なってしまう実害を実機確認で検出
     したため（狭幅は既存の白背景 sticky ヘッダーのまま＝折り返しても自分の分の
     高さを確保して押し下げるので重なる事故が起きない）。
     しきい値の経緯: 当初 48rem(768px)。2026-08-13 指示書2 #6 でヘッダーに
     予約CTAが加わり、実測でヘッダーの1行収まりが 1100px〜 に後退（768〜1099px
     は2段化し、TOPでは 768〜1000px でヒーローh1に被る実害を再計測で確認）。
     このため 2026-08-14 に 48rem → 69rem(1104px) へ引き上げ（透過化と連動する
     後続2ブロック＝lang-switch 白文字・.is-scrolled 復帰も同値で揃える）。 */
  @media (width >= 69rem) {
    .page-home .site-header {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      z-index: var(--z-sticky);
      background-color: transparent;

      /* ナビ白文字の可読性はヘッダー自身の帯グラデーションで確保する
         （ヒーロー全面のスクリムから分離。動画を暗くしない・2026-07-12指摘対応） */
      background-image: linear-gradient(
        180deg,
        color-mix(in oklch, var(--color-gray-950) 55%, transparent) 0%,
        color-mix(in oklch, var(--color-gray-950) 25%, transparent) 70%,
        transparent 100%
      );
      border-block-end: none;
    }

    /* ヒーロー写真/動画の上でもナビ文字が読めるよう白文字にする（ロゴ台座は
       白背景パネルなので変更不要）。可読性はヒーロー側の上部スクリムが担保する
       （hero-home__media::after）。白文字にも軽い影を足して二重に確保する。 */
    .page-home .site-header .nav-list__link {
      color: var(--color-gray-0);
      text-shadow: 0 1px 6px color-mix(in oklch, var(--color-gray-950) 45%, transparent);
    }

    .page-home .site-header .nav-list__link:hover {
      background-color: color-mix(in oklch, var(--color-gray-0) 22%, transparent);
      color: var(--color-gray-0);
    }

    /* フォーカスリングも暗い写真の上で見えるよう白に切り替える（3:1以上を確保。
       accessibility.md §2.2）。 */
    .page-home .site-header :focus-visible {
      outline-color: var(--color-gray-0);
    }
  }

  /* ── ボタン: CTA（オレンジ）系統 ──────────────────────────────────────── */
  .button--cta {
    background-color: var(--color-cta);
  }

  .button--cta:hover {
    background-color: var(--color-cta-strong);
  }

  /* オレンジ帯の上で使う反転ボタン（白地にCTA文字色） */
  .button--on-cta {
    background-color: var(--color-bg);
    color: var(--color-cta-strong);
  }

  .button--on-cta:hover {
    background-color: var(--color-surface);
    color: var(--color-cta-strong);
  }

  /* ====================== ① ヒーロー（写真全幅） ====================== */
  .hero-home {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: 30rem;
    overflow: clip;
    color: var(--color-gray-0);
  }

  /* 動画の全フレーム（16:9）が縦に切れず見える高さを確保する（動画内の
     テロップが読めるように・事業担当者指示 2026-07-12）。56.25vw = 幅の9/16。
     画面が低い環境では 92svb で頭打ちにして、はみ出す分だけ僅かにクロップ。
     block-size でなく min-block-size なので、文言が多い環境では自然に伸びる。 */
  @media (width >= 48rem) {
    .hero-home {
      min-block-size: min(56.25vw, 92svb);
    }
  }

  .hero-home__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    overflow: clip;
  }

  /* 静止画フォールバックと動画を完全に重ねて敷く。DOM順（img→video）がそのまま
     重なり順になるため z-index は不要（video が後着なので上に乗る）。 */
  .hero-home__media img,
  .hero-home__media video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;

    /* 元映像がやや暗め（曇天シーン等）のため、ごく軽い明るさ補正（+5%）。
       映像の質感を変えない範囲（「動画が暗い」指摘・2026-07-12） */
    filter: brightness(1.05);
  }

  /* 「視差効果を減らす」設定時の方針: 動画要素は隠さず、冒頭フレーム（poster）を
     静止表示したまま自動再生だけを止める（JS側で制御）。動きは本人が再生ボタンを
     押したときだけ始まる＝勝手に動かさない、の本義を満たす（accessibility.md §2.6）。
     フォールバック <img> と poster は同一画像（動画の冒頭フレーム）なので、
     どの経路でも見た目が変わらない。 */

  /* 写真/動画の上に敷く薄いグラデーション（design-base.md §0-2）。
     「スクリムが暗すぎる」指摘（2026-07-12）を受けて全体を大幅に軽くした:
     動画の中身とテロップが素直に見える明るさを既定とし、
     ・上端だけ透過ヘッダーの白文字用に暗め（55%）
     ・中央はほぼ素通し（8〜10%）
     ・下端は再生ボタンと写真の締まり用に40%
     文字の読みやすさは文言ボックス（.hero-home__box）側が受け持つ二段構え。 */
  .hero-home__media::after {
    content: "";
    position: absolute;
    inset: 0;

    /* 「動画が暗い」指摘（2026-07-12）対応: 全面スクリムは実質廃止に近い薄さへ。
       ヘッダー文字の保護はヘッダー側の帯へ移設済み。残すのは
       下端の再生ボタン用のわずかな締まり（22%→0%）のみ。 */
    background-image: linear-gradient(
      0deg,
      color-mix(in oklch, var(--color-gray-950) 22%, transparent) 0%,
      transparent 22%
    );
  }


  .hero-home__inner {
    position: relative;
    z-index: var(--z-base);
    padding-block: var(--space-2xl);
  }

  /* 現行サイト同様、左寄せで浮かぶ文言ボックス。半透明の暗色パネル（白ではなく
     黒地の透過）を敷いて「浮いている」質感を強調しつつ、白文字（design-base.md
     §0-2で維持と規定）との重なりでも読みやすさを落とさない。動画の動きがある
     背景でも文字が安定して読めるよう、スクリムに加えてこのパネル自体でも
     コントラストを補強する（二重の安全側設計）。 */
  .hero-home__box {
    max-inline-size: 34rem;
    padding: var(--space-lg);

    /* 全面スクリムを軽くした分、白文字の可読性はこのパネルが一手に担う
       （38%の暗色＋ぼかし強め。パネルは局所なので動画の見えは損なわない） */
    background-color: color-mix(in oklch, var(--color-gray-950) 38%, transparent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(10px);
  }

  .hero-home__title {
    margin-block-end: var(--space-sm);
    color: var(--color-gray-0);
    text-shadow: 0 1px 12px color-mix(in oklch, var(--color-gray-950) 35%, transparent);
  }

  .hero-home__lead {
    max-inline-size: 32ch;
    color: var(--color-gray-0);
    font-size: var(--text-md);
  }

  .hero-home__actions {
    margin-block-start: var(--space-lg);
  }

  /* Admissions への小さなフロートリンク（ヒーロー左下）。現行サイトの左端固定
     バナーそのままの再現はやりすぎになるため、控えめな1本のリンクに留める。
     リンク本体は要素セレクタ(a)ではなく専用クラスで指定する（他カード部品の
     __link 命名と揃え、no-descending-specificity を避ける）。 */
  .hero-home__float-link {
    margin-block-start: var(--space-sm);
  }

  .hero-home__float-link__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: var(--size-5);
    margin-inline-start: calc(var(--space-2xs) * -1);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
    color: var(--color-gray-0);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .hero-home__float-link__link:hover {
    color: var(--color-gray-0);
    text-decoration-thickness: 2px;
  }

  /* 動画の一時停止/再生トグル（ヒーロー右下）。5秒を超える自動再生には停止手段が
     必須（accessibility.md §2.6/2.2.2）。JSが再生を開始できたときだけ表示される
     （index.html 末尾のスクリプトが hidden を外す）。 */
  .hero-home__motion-toggle {
    position: absolute;
    inset-block-end: var(--space-md);
    inset-inline-end: var(--space-md);
    z-index: var(--z-dropdown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-6);
    block-size: var(--size-6);
    padding: 0;
    border: 1px solid color-mix(in oklch, var(--color-gray-0) 55%, transparent);
    border-radius: 50%;
    background-color: color-mix(in oklch, var(--color-gray-950) 45%, transparent);
    color: var(--color-gray-0);
    cursor: pointer;
  }

  .hero-home__motion-toggle:hover {
    background-color: color-mix(in oklch, var(--color-gray-950) 65%, transparent);
  }

  /* display: inline-flex を上で明示しているため、そのままだとHTML標準の
     [hidden]（display:none相当）より author 側の指定が勝ってしまい、
     hidden 属性が効かなくなる。明示的に上書きして本来の非表示を復元する。 */
  .hero-home__motion-toggle[hidden] {
    display: none;
  }

  .hero-home__motion-toggle-icon {
    inline-size: var(--size-4);
    block-size: var(--size-4);
  }

  .hero-home__motion-toggle-icon--play {
    display: none;
  }

  .hero-home__motion-toggle.is-paused .hero-home__motion-toggle-icon--pause {
    display: none;
  }

  .hero-home__motion-toggle.is-paused .hero-home__motion-toggle-icon--play {
    display: block;
  }


  /* ====================== ② Admissions 案内カード ====================== */
  .admission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .admission-card {
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .admission-card__index {
    margin: 0;
    color: var(--color-brand-tint);
    font-size: var(--text-xl);
  }

  .admission-card__age {
    margin-block-end: var(--space-3xs);
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .admission-card__title {
    margin-block-end: var(--space-2xs);

    /* 日本語見出しは文節で折り返す（対応ブラウザのみ）。anywhere併記で

       最小コンテンツ幅の暴走（グリッドはみ出し）を防ぐ（css.md §カード注記） */
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .admission-card__text {
    color: var(--color-text);
  }

  .admission-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-block-start: var(--space-sm);
    font-weight: 700;
    text-decoration: none;

    /* 「〜お問い合わせ」の1文字だけが次行に落ちるのを防ぐ（短い定型文なので折返し不要） */
    white-space: nowrap;
  }

  .admission-card__link:hover {
    text-decoration: underline;
  }

  /* 中間幅で3列にすると見出しが窮屈になり単語の途中で折れるため、
     2列→3列の2段階にする（design-base §0: 可読性・プロ品質の折り返し） */
  @media (width >= 36rem) {
    .admission-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .admission-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ====================== ③ 「英語も、その先も。」語りかけパネル ====================== */
  .message-panel {
    max-inline-size: 44rem;
    margin-inline: auto;
    padding: var(--space-xl);
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
    text-align: center;
  }

  .message-panel__lead {
    margin: 0;
    font-size: var(--text-md);
  }

  .message-panel__lead + .message-panel__lead {
    margin-block-start: var(--space-sm);
  }

  /* ====================== ④ Why Kodomo Edu カードグリッドの拡張 ======================
     .card / .card-grid は既存部品（サービス3カード用）。列数のみ広い画面で拡張する。 */
  @media (width >= 36rem) {
    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .card-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ====================== ⑤ 数値エビデンス帯 ====================== */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }

  .stat__value {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
  }

  .stat__unit {
    font-size: var(--text-lg);
  }

  .stat__label {
    margin-block-start: var(--space-3xs);
    color: var(--color-text);
  }

  @media (width >= 36rem) {
    .stats-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ====================== ⑥ プログラムカード（写真付き） ====================== */
  .program-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .program-card {
    display: flex;
    flex-direction: column;
    overflow: clip;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .program-card__media {
    aspect-ratio: 4 / 3;
    overflow: clip;
  }

  .program-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .program-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
  }

  .program-card__meta {
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .program-card__title {
    margin: 0;

    /* 日本語見出しは文節で折り返す（対応ブラウザのみ）。anywhere併記で

       最小コンテンツ幅の暴走（グリッドはみ出し）を防ぐ */
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .program-card__text {
    flex: 1 1 auto;
    color: var(--color-text);
  }

  .program-card__link {
    margin-block-start: var(--space-2xs);
    font-weight: 700;
    text-decoration: none;
  }

  .program-card__link:hover {
    text-decoration: underline;
  }

  /* プリスクールを最初・最大に見せる強調カード（design-base.md 実装要件） */
  .program-card--featured .program-card__title {
    font-size: var(--text-xl);
  }

  @media (width >= 36rem) {
    .program-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .program-card--featured {
      grid-column: 1 / -1;
    }
  }

  @media (width >= 48rem) {
    .program-card--featured {
      flex-direction: row;
    }

    .program-card--featured .program-card__media {
      flex: 0 0 42%;
      aspect-ratio: auto;
    }

    .program-card--featured .program-card__body {
      justify-content: center;
      padding: var(--space-xl);
    }
  }

  /* ====================== ⑦ 保護者の声 ====================== */
  .testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-md);
    padding: 0;
    list-style: none;
  }

  .testimonial {
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .testimonial__quote {
    margin: 0;
    font-size: var(--text-md);
  }

  .testimonial__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .testimonial__meta cite {
    font-style: normal;
    font-weight: 700;
  }

  .voice-note {
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  @media (width >= 36rem) {
    .testimonial-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ====================== 汎用部品: アバター（丸トリム） ======================
     保護者の声で使用。実写真が無い間はイニシャル入りの円プレースホルダとして
     <span class="avatar">、実写真が用意でき次第 <img class="avatar" src="..."
     alt="..."> にそのまま差し替えられる（同じクラスで両対応）。将来の
     Members（教職員紹介）ページでも同じ部品を再利用する想定の汎用定義。 */
  .avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-7);
    block-size: var(--size-7);
    overflow: clip;
    border-radius: 50%;
    background-color: var(--color-primary-weak);
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  /* <img class="avatar"> として実写真を使う場合の丸トリム＋カバー表示 */
  img.avatar {
    object-fit: cover;
  }

  .avatar--sm {
    inline-size: var(--size-6);
    block-size: var(--size-6);
    font-size: var(--text-sm);
  }

  .avatar--lg {
    inline-size: var(--size-8);
    block-size: var(--size-8);
    font-size: var(--text-lg);
  }

  /* ====================== ⑧ キャンパスカード（写真付き） ====================== */
  .campus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .campus-card {
    display: flex;
    flex-direction: column;
    overflow: clip;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .campus-card__media {
    aspect-ratio: 3 / 2;
    overflow: clip;
  }

  .campus-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .campus-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-lg);
  }

  .campus-card__title {
    margin: 0;

    /* 日本語見出しは文節で折り返す（対応ブラウザのみ）。anywhere併記で

       最小コンテンツ幅の暴走（グリッドはみ出し）を防ぐ */
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .campus-card__access {
    margin: 0;
    color: var(--color-text);
  }

  .campus-card__address {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .campus-card__link {
    margin-block-start: var(--space-2xs);
    font-weight: 700;
    text-decoration: none;
  }

  .campus-card__link:hover {
    text-decoration: underline;
  }

  @media (width >= 36rem) {
    .campus-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ====================== ⑨ FAQ（ネイティブ details/summary） ====================== */
  .faq-list {
    display: grid;
    gap: var(--space-sm);

    /* 2026-08-20 指示書03「表示の統一化」: PCで本文が画面約1/2で折り返す幅上限を撤廃（旧 48rem） */
    margin-block-start: var(--space-lg);
  }

  .faq-item {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
  }

  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    list-style: none;
    cursor: pointer;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item summary::marker {
    content: "";
  }

  .faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: var(--text-lg);
  }

  .faq-item[open] summary::after {
    content: "\2212";
  }

  .faq-item__q {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
  }

  .faq-item__a {
    margin-block-start: var(--space-2xs);
    color: var(--color-text);
  }

  /* ====================== ⑩ 予約CTA帯（オレンジ） ====================== */
  .cta-band__title {
    color: var(--color-text-on-primary);
  }

  .cta-band__text {
    max-inline-size: 46rem;
    font-size: var(--text-md);
  }

  .cta-band__meta {
    display: grid;
    gap: var(--space-3xs);
    margin-block: var(--space-md);
  }

  .cta-band__meta p {
    margin: 0;
  }

  .cta-band__meta a {
    color: var(--color-text-on-primary);
    font-weight: 700;
  }

  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
  }

  /* ====================== スクロール出現（控えめ・reduced-motion配慮） ======================
     対応ブラウザ（animation-timeline: view() 対応）かつ prefers-reduced-motion を
     希望しない場合のみ有効化する。非対応ブラウザは常に通常表示のままなので
     機能欠落（コンテンツが消えたまま）は起きない（css.md §5 / svg.md §7 準拠）。 */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        /* 現行サイトの fadeUp（80px/1s）の体感に寄せて 40px/0.8s に調整
           （事業担当者指示 2026-07-11）。tokens.css の既定 --motion-reveal(500ms)
           より強めの値のため、ここではリテラルで上書きする（tokens.css は
           このタスクの編集範囲外。css.md §1 の例外的運用＝ブランド固有の
           意図的な値のハードコード）。 */
        animation: reveal-up 0.8s var(--ease-standard) both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
      }
    }
  }

  @keyframes reveal-up {
    from {
      opacity: 0%;
      transform: translateY(2.5rem);
    }

    to {
      opacity: 100%;
      transform: translateY(0);
    }
  }

  /* ====================== フッター拡張（ロゴ画像・連絡先） ====================== */
  .site-footer__brand {
    display: grid;
    gap: var(--space-2xs);
  }

  .site-footer__logo-img {
    inline-size: auto;
    block-size: var(--size-8);
  }

  .site-footer__contact {
    color: var(--color-text-muted);
  }
}

/* ============================== utilities レイヤー ============================== */

/* 最後段。意図的にちょっとした上書きをしたいとき用（最小限）。 */
@layer utilities {
  .flow > * + * {
    margin-block-start: var(--space-sm);
  }

  .mbe-0 {
    margin-block-end: 0;
  }

  /* 語句のまとまりを途中で折り返さない（例: ヒーローの「中目黒・都立大」）。
     全ブラウザで有効なフォールバックとして inline-block を使う。 */
  .u-phrase {
    display: inline-block;
  }
}

/* =============================================================================
   ここから 下層ページ（about.html / message.html / members.html）専用
   コンポーネント追加。design-base.md §0/§5 準拠。既存の部品定義は変更せず
   追加のみ行う（cj:shared外の本文用）。トップページの .card / .card-grid /
   .avatar / .section-head / .eyebrow / .cta-band / .stats-grid 等は
   そのまま再利用し、ここでは3ページで新たに必要になった部品だけを足す。
   ============================================================================= */
@layer components {
  /* ====================== 汎用: 写真＋文章の2カラム構成 ======================
     About のメソッド解説・海外提携、Message の代表写真などで使う「写真半分・
     文章半分」の型。design-base.md §0「写真主役」の継承をセクション単位でも
     行うための共通部品。 */
  .split {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
  }

  .split__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
  }

  .split__media figcaption {
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  @media (width >= 48rem) {
    .split {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
    }

    /* 写真を右側に見せたいセクション用（交互配置で単調さを避ける） */
    .split--reverse .split__media {
      order: 2;
    }
  }

  /* ====================== 汎用: 出典・引用の小さな付記 ======================
     学術的根拠（Heckman・OECD 等）の出典名を本文より小さく添える
     （実装規定「学術引用は出典名を小さく付記」）。 */
  .citation {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ====================== 汎用: タグ（育つ力・キーワード） ====================== */
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-sm);
    padding: 0;
    list-style: none;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-3xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-surface-2);
    color: var(--color-primary-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  /* ====================== 汎用: 年表（沿革・経歴） ====================== */
  .timeline {
    display: grid;
    gap: 0;
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .timeline-item {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-block-start: 1px solid var(--color-border);
  }

  .timeline-item:first-child {
    border-block-start: none;
  }

  .timeline-item__year {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 500;
    white-space: nowrap;
  }

  .timeline-item__text {
    margin: 0;
    color: var(--color-text);
  }

  /* ====================== 汎用: データ表（合格実績など） ======================
     html.md §3「表形式データは table を使う」に準拠。横幅が狭い端末でも表を
     つぶさず、必要なら横スクロールで読める土台（overflow-x）を用意する。 */
  .data-table-wrap {
    overflow-x: auto;
    margin-block-start: var(--space-md);
  }

  .data-table {
    inline-size: 100%;
    min-inline-size: 26rem;
    border-collapse: collapse;
    font-size: var(--text-base);
  }

  .data-table caption {
    margin-block-end: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: start;
  }

  .data-table th,
  .data-table td {
    padding-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    white-space: nowrap;
  }

  .data-table th {
    color: var(--color-text-strong);
  }

  /* 縦積みキー・バリュー表の修飾子（company.html の基本情報／law.html の各表／
     recruit.html の募集要項など）。基本の .data-table は合格実績のような比較表
     （短い値・数値の最終列を右寄せ）を前提に white-space: nowrap を敷いているため、
     長文の値（住所・事業内容・キャンセル規定など）を1行目の見出し列に添える
     「基本情報」型の表ではそのままだと横あふれする（実機で確認・幅699pxでも
     値列が画面外に押し出された）。折り返し・左寄せ・固定レイアウトに上書きする。
     min-inline-size も 26rem(=416px) のままだと、2列で折り返し前提のこの表では
     375px幅で横あふれするため 0 に戻す（複数列の比較表用の下限であり、この
     修飾子には不要）。 */
  .data-table--kv {
    table-layout: fixed;
    min-inline-size: 0;
  }

  .data-table--kv th,
  .data-table--kv td {
    overflow-wrap: anywhere;
    white-space: normal;
    vertical-align: top;
  }

  .data-table--kv th[scope="row"] {
    inline-size: 35%;
  }

  .data-table tfoot th,
  .data-table tfoot td {
    border-block-end: none;
    color: var(--color-text-strong);
    font-weight: 700;
  }

  .data-table td:last-child,
  .data-table th:last-child {
    text-align: end;
  }

  .data-table--kv td:last-child,
  .data-table--kv th:last-child {
    text-align: start;
  }

  /* ====================== Assessment（10項目アセスメント） ====================== */
  .assessment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .assessment-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
  }

  .assessment-item__index {
    flex-shrink: 0;
    color: var(--color-brand-tint);
    font-family: var(--font-display);
    font-size: var(--text-lg);
  }

  .assessment-item__text {
    margin: 0;
    color: var(--color-text-strong);
    font-weight: 700;
  }

  @media (width >= 36rem) {
    .assessment-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ====================== アバター拡張サイズ（Members用） ======================
     既存の .avatar / .avatar--sm / .avatar--lg に続く1段階大きいサイズ。
     先生紹介カードの顔写真・イニシャルの両方で使う。 */
  .avatar--xl {
    inline-size: var(--size-9);
    block-size: var(--size-9);
    font-size: var(--text-xl);
  }

  /* ====================== Members（教職員紹介カード） ====================== */
  .member-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    block-size: 100%;
    gap: var(--space-2xs);
    padding: var(--space-lg);
    text-align: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .member-card__name {
    margin-block-start: var(--space-2xs);

    /* 英語人名なので日本語の分かち書きルールは不要。長い名前でもカードから
       はみ出さないよう任意の位置で折り返す保険を掛ける。 */
    overflow-wrap: anywhere;
  }

  .member-card__role {
    margin: 0;
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .member-card__origin {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .member-card__bio {
    margin-block-start: var(--space-2xs);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: start;
  }

  .member-card__link {
    margin-block-start: var(--space-2xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .member-card__link:hover {
    text-decoration: underline;
  }

  @media (width >= 36rem) {
    .member-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .member-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ── 代表（スクールファウンダー）の強調カード ───────────────────────── */
  .member-card--featured {
    grid-column: 1 / -1;
    gap: var(--space-md);
    padding: var(--space-xl);
    background-color: var(--color-surface);
  }

  @media (width >= 48rem) {
    .member-card--featured {
      flex-direction: row;
      align-items: center;
      text-align: start;
    }

    /* 代表カード紹介文の幅上限（旧 60ch）は撤廃——2026-08-20 指示書03「表示の統一化」: PCで本文が画面約1/2で折り返す幅上限を撤廃 */
  }
}

/* =============================================================================
   ここから Program群（program.html / program-preschool.html / program-kinder.html /
   program-elementary.html / global-programs.html）専用コンポーネント追加。
   design-base.md §0/§5 準拠。既存の部品定義は変更せず追加のみ行う。
   3ページ以上で再利用する .hero / .split / .card-grid / .tag-list / .timeline /
   .data-table / .stats-grid / .faq-list / .program-grid / .cta-band 等はそのまま
   再利用し、ここでは Program群で新たに必要になった「1日の流れ」用の修飾だけを足す。
   ============================================================================= */
@layer components {
  /* ====================== 1日の流れ（時刻表記が長い変則タイムライン） ======================
     .timeline は年表（西暦4桁）向けに1列目5.5rem固定＋white-space:nowrapで作られている。
     Program群の「1日の流れ」は "8:50-9:30" のような時刻表記で年より横幅を要するため、
     専用の修飾クラスで1列目を可変幅（5.5〜7.5rem）にしつつ折り返しも許可し、320px幅でも
     安全側に倒す（横はみ出し防止。既存 .timeline 定義は変更せず追加のみ）。 */
  .timeline--schedule .timeline-item {
    grid-template-columns: minmax(5.5rem, 7.5rem) 1fr;
  }

  .timeline--schedule .timeline-item__year {
    white-space: normal;
  }
}

/* =============================================================================
   ここから Campus群（campus.html/campus-nakameguro.html/campus-toritsudai.html）・
   Voice・Admission・Contact 専用コンポーネント追加。
   design-base.md §0/§5 準拠。既存の部品定義は変更せず追加のみ行う。
   .hero/.split/.card-grid/.tag-list/.data-table/.faq-list/.campus-grid/
   .campus-card/.testimonial-grid/.avatar/.timeline/.contact/.contact__list/
   .cta-band 等はそのまま再利用し、ここでは新たに必要になった部品だけを足す。
   ============================================================================= */
@layer components {
  /* ====================== 施設紹介: 補助フォトグリッド ======================
     キャンパスページの「施設紹介」で、.split の主写真に添える小さめの複数枚
     グリッド（キャプション付き）。02_conventions/css.md のカード注記に倣い、
     auto-fit ではなく固定2列＋gapで最小幅の暴走を避ける。 */
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
    padding: 0;
    list-style: none;
  }

  .photo-grid img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .photo-grid figcaption {
    margin-block-start: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ====================== 動画プレースホルダ（保護者インタビュー枠） ======================
     許諾・編集完了前の仮表示。実動画が入稿・許諾され次第、同じ枠を
     <video poster="..."> 等に差し替える想定（voice.html 内にコメントで明記）。 */
  .video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    aspect-ratio: 16 / 9;
    padding: var(--space-md);
    background-color: var(--color-surface-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-muted);
    text-align: center;
  }

  .video-placeholder__icon {
    inline-size: var(--size-6);
    block-size: var(--size-6);
    color: var(--color-primary);
  }

  .video-placeholder__label {
    margin: 0;
    color: var(--color-text-strong);
    font-weight: 700;
  }

  .video-placeholder__note {
    margin: 0;
    font-size: var(--text-sm);
  }

  /* ====================== フォーム ======================
     admission.html（予約フォーム）・contact.html（お問い合わせフォーム）共通。
     02_conventions/components.md §1・accessibility.md §6 準拠:
     ラベル関連付け・required明示・aria-invalid/aria-describedby・
     エラーサマリ＋フォーカス移動・二重送信防止。 */
  .form {
    display: grid;
    gap: var(--space-md);
    max-inline-size: 40rem;
  }

  .form-field {
    display: grid;
    gap: var(--space-3xs);
  }

  .form-label {
    color: var(--color-text-strong);
    font-weight: 700;
  }

  .form-required,
  .form-optional {
    margin-inline-start: var(--space-3xs);
    font-size: var(--text-sm);
  }

  .form-required {
    color: var(--color-danger);
    font-weight: 700;
  }

  .form-optional {
    color: var(--color-text-muted);
    font-weight: 400;
  }

  .form-hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .form-input,
  .form-textarea,
  .form-select {
    inline-size: 100%;
    min-block-size: var(--size-7);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-strong);
    font-size: var(--text-base);
  }

  .form-textarea {
    min-block-size: 8rem;
    resize: vertical;
  }

  .form-input[aria-invalid="true"],
  .form-textarea[aria-invalid="true"],
  .form-select[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .form-error {
    margin: 0;
    color: var(--color-danger);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  /* [hidden] はブラウザ既定で display:none。JS が hidden 属性を外すと表示される
     （表示切替専用のクラスを増やさない）。 */

  .form-error-summary {
    padding: var(--space-md);
    background-color: var(--color-bg);
    border: 2px solid var(--color-danger);
    border-radius: var(--radius-card);
  }

  .form-error-summary h2 {
    margin-block-end: var(--space-2xs);
    color: var(--color-danger);
    font-size: var(--text-md);
  }

  .form-error-summary ul {
    margin: 0;
    padding-inline-start: var(--space-md);
  }

  .form-error-summary a {
    color: var(--color-danger);
    font-weight: 700;
  }

  .form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  .form-checkbox-row input[type="checkbox"] {
    flex-shrink: 0;
    inline-size: var(--size-5);
    block-size: var(--size-5);
    margin-block-start: 0.15em;
    accent-color: var(--color-primary);
  }

  .form-checkbox-row label {
    color: var(--color-text-strong);
  }

  /* 同意ラベル内のポリシーリンク: 文中リンクだが check-visual.mjs の
     ターゲットサイズ例外（p/li/dd/td/figcaption 限定）が label には及ばないため、
     inline-block化＋上下パディングで24px以上の当たり判定を明示的に確保する
     （accessibility.md §2.3 / WCAG 2.5.8）。見た目の行送りはほぼ変えない程度の
     パディングに留める。 */
  .form-checkbox-row label a {
    display: inline-block;
    padding-block: var(--space-3xs);
  }

  /* ハニーポット: 人間（マウス/キーボード/スクリーンリーダーの全員）には一切
     見せない・読ませない（aria-hidden＋画面外配置＋tabindex=-1をHTML側で付与）。
     ボットだけが埋めるダミー項目（content-compliance §4 の同意UIとは無関係）。 */
  .form-honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    inset-block-start: -9999px;
  }

  .form-purpose {
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
  }

  .form-submit[aria-busy="true"] {
    cursor: progress;
    opacity: 70%;
  }

  /* ====================== 一覧ページ（Blog/News）: 記事リスト ======================
     blog.html/blog-N.html・news.html で使用。年区切り・ページ分割の親要素は
     h2/h3 のみで組み、リスト自体はシンプルな縦積み（.timeline と同じ罫線分割）。
     「続きを読む」リンクは新規クラスを増やさず既存の .card__link を再利用する。 */
  .archive-list {
    display: grid;
    gap: 0;
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .archive-item {
    padding-block: var(--space-md);
    border-block-start: 1px solid var(--color-border);
  }

  .archive-item:first-child {
    border-block-start: none;
  }

  .archive-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-xs);
    margin-block-end: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .archive-item__cat {
    color: var(--color-primary-strong);
  }

  .archive-item__title {
    margin-block: var(--space-2xs) 0;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .archive-item__excerpt {
    margin-block-start: var(--space-3xs);
    color: var(--color-text);
  }

  /* 年別グループの見出し直後だけ余白を詰める（.section-head 相当の反復を避ける） */
  .archive-year-title {
    margin-block-start: var(--space-xl);
  }

  .archive-list + .archive-year-title,
  .year-jump + .archive-year-title {
    margin-block-start: var(--space-lg);
  }

  /* 年ジャンプ（news.html 冒頭の年インデックス） */
  .year-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-md);
    padding: 0;
    list-style: none;
  }

  .year-jump__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--size-6);
    padding-inline: var(--space-sm);
    background-color: var(--color-surface-2);
    color: var(--color-primary-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
  }

  .year-jump__link:hover {
    background-color: var(--color-primary-weak);
  }

  /* ====================== 一覧ページ: ページネーション（blog.html） ====================== */
  .pagination-nav {
    margin-block-start: var(--space-xl);
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: 0;
    list-style: none;
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-7);
    min-block-size: var(--size-7);
    padding-inline: var(--space-sm);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
  }

  a.pagination__link:hover {
    background-color: var(--color-surface-2);
    color: var(--color-link-hover);
  }

  /* 現在ページ: 色だけでなく塗り＋枠でも区別する（accessibility.md 1.2 色のみに依存しない） */
  .pagination__link.is-current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
    cursor: default;
  }

  /* ====================== 一覧ページ（Gallery）: サムネイルカード ======================
     列の適応はメディアクエリで行う（css.md §3: 投機的containmentの禁止・
     auto-fitの最小幅保護に倣い、固定 repeat() + minmax(0,1fr) を使う）。 */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .gallery-card {
    overflow: clip;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  /* カード全体を1つのリンクにする（画像側 alt="" で視覚タイトルとの二重読み上げを防ぐ） */
  .gallery-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .gallery-card__media {
    /* .gallery-card__media は <span>（既定 display:inline）のため、display を
       明示しないと aspect-ratio が効かない（仕様上 aspect-ratio は inline
       ボックスに適用されない）。正方形トリム化にあたって実測で発覚・修正
       （2026-07-13 事業担当者指示: 正方形トリム）。 */
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: clip;
    background-color: var(--color-surface-2);
  }

  .gallery-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ムービー／インタビュー／説明会（YouTube埋め込み記事）のサムネイルに重ねる再生アイコン */
  .gallery-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gallery-card__play svg {
    inline-size: var(--size-7);
    block-size: var(--size-7);
    color: var(--color-bg);
    filter: drop-shadow(0 1px 3px oklch(0% 0 0deg / 45%));
  }

  .gallery-card__body {
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
  }

  .gallery-card__title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-base);
    font-weight: 700;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .gallery-card__link:hover .gallery-card__title {
    color: var(--color-link);
    text-decoration: underline;
  }

  .gallery-card__meta {
    margin-block-start: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  @media (width >= 36rem) {
    .gallery-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .gallery-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ====================== 一覧ページ共通: 会社情報などへの導線 ======================
     blog.html/news.html/gallery.html の末尾で使う小さな導線行（company/recruit/law/
     privacy-policy はグローバルナビに現在地を持たないため、この行が主な到達経路になる）。 */
  .archive-hub-links {
    margin-block-end: var(--space-2xs);
    font-weight: 700;
  }

  .archive-foot-links {
    margin-block-end: 0;
  }

  /* ====================== 法定ページ: 目次・項目表 ======================
     law.html・privacy-policy.html で使う簡易目次（十分な行間・見出し階層での
     可読性優先。checklist-content の法定表記レビュー観点と対応）。 */
  .legal-toc {
    margin-block-start: var(--space-md);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .legal-toc__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .legal-toc__list {
    display: grid;
    gap: var(--space-3xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (width >= 36rem) {
    .legal-toc__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .legal-toc__link {
    text-decoration: none;
  }

  .legal-toc__link:hover {
    text-decoration: underline;
  }

  /* 法定ページの本文はゆったりした行間で読ませる（十分な行間・段落間） */
  .legal-body h2 {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-border);
  }

  .legal-body h2:first-of-type {
    margin-block-start: var(--space-lg);
    padding-block-start: 0;
    border-block-start: none;
  }

  .legal-body ol,
  .legal-body ul {
    padding-inline-start: 1.4em;
  }

  .legal-body li {
    margin-block-end: var(--space-2xs);
  }

  .legal-body ol ol,
  .legal-body ul ul,
  .legal-body ol ul,
  .legal-body ul ol {
    margin-block-start: var(--space-2xs);
  }

  /* 入れ子の番号付きリストは数字→英字で視覚的に区別する（原文の階層を読み取りやすくする） */
  .legal-body ol ol {
    list-style-type: lower-alpha;
  }

  /* プライバシーポリシー6-(2)のみ原文が ア/イ/ウ/エ 表記（本文が「ウの決定」と直接参照する
     ため、忠実性を優先して自動採番でなく手動の記号を使う。§本文のHTMLコメント参照）。
     list-style は打ち消し、手動の記号 .legal-list--kana__mark を先頭に置く。 */
  .legal-list--kana {
    list-style: none;
    padding-inline-start: 0;
  }

  .legal-list--kana__mark {
    margin-inline-end: var(--space-3xs);
    font-weight: 700;
  }
}

/* =============================================================================
   ここから WordPress 移行記事（blog/ 配下）の原文書式の保存用スタイル。
   移行元がインライン style 属性で持っていた見た目（html-validate の
   no-inline-style 警告対象）を、html.md §3 / css.md に従いクラスへ置換した
   受け皿。値は移行原文の直書き値をそのまま保存する（css.md §1 の例外的運用＝
   移行コンテンツ固有の意図的なハードコード。新規ページでは使わず、tokens.css
   の意味トークンを参照すること）。
   ============================================================================= */
@layer components {
  /* WP の文字色ハイライト <mark class="has-inline-color"> は、原文では
     background-color: rgba(0, 0, 0, 0) をインライン指定してブラウザ既定の
     黄色マーカーを消し、色は下記 has-*-color クラスで付けていた。背景の
     透明化をここで再現し、文字色はブラウザ既定の MarkText（黒固定＝ダーク
     モードで背景に沈む）をやめて継承に戻す。個別の色は後続の has-*-color
     と、後勝ち utilities レイヤーの .u-bg-wp-*（固定背景＋固定前景）が決める。
     :where() で詳細度を 0,0,1 に抑え、単一クラス（0,1,0）の has-*-color が
     上書きできるようにする（css.md §2 詳細度抑制）。 */
  mark:where(.has-inline-color) {
    background-color: transparent;
    color: inherit;
  }

  /* WP プリセット文字色クラスの受け皿（mark.has-inline-color のほか、
     p/h2 の has-text-color でも使われる）。原文の色相を保ったまま両テーマの
     背景で本文 4.5:1 以上を満たすレガシートークン（tokens.css）を参照する。 */
  .has-vivid-red-color {
    color: var(--color-wp-vivid-red);
  }

  .has-luminous-vivid-orange-color {
    color: var(--color-wp-luminous-vivid-orange);
  }

  .has-luminous-vivid-amber-color {
    color: var(--color-wp-luminous-vivid-amber);
  }

  .has-vivid-purple-color {
    color: var(--color-wp-vivid-purple);
  }

  .has-vivid-cyan-blue-color {
    color: var(--color-wp-vivid-cyan-blue);
  }

  .has-vivid-green-cyan-color,
  .has-light-green-cyan-color {
    color: var(--color-wp-green-cyan);
  }

  /* 原文の「黒」はテーマの最強文字色に写像する（ダークモードで黒のまま
     背景に沈ませない）。wp-block-button__link（背景クラスが不活性のため
     現状は通常リンク表示）はリンク色の可視性を優先して除外する。
     固定背景上（.u-bg-wp-amber 等）では utilities 側の固定前景が後勝ちする。 */
  .has-black-color:not(.wp-block-button__link) {
    color: var(--color-text-strong);
  }

  /* has-white-color は固定背景（.u-bg-wp-purple / .u-bg-wp-red）の上でのみ
     意味を持つため utilities 側の固定前景で再現し、ここでは定義しない
     （汎用に white を当てるとライトの白地や背景クラス不活性のボタンで
     文字が消えるため）。 */

  /* 色付き移行コンテンツ内の strong/b は親の色を継承させる。base.css の
     strong { color: var(--color-text-strong) } が原文の単色装飾を分断し、
     固定背景上ではテーマ色文字が背景とぶつかって読めなくなるため。 */
  mark:where(.has-inline-color) :is(strong, b),
  :where(.has-text-color) :is(strong, b) {
    color: inherit;
  }
}

@layer utilities {
  /* 文字揃え（論理プロパティ: ja 横書きでは start=左 / end=右。css.md §3）。
     移行記事の style="text-align: …" の置換先。新規ページで使ってもよい。 */
  .u-text-start {
    text-align: start;
  }

  .u-text-center {
    text-align: center;
  }

  .u-text-end {
    text-align: end;
  }

  /* --- 以下、移行記事専用（原文の px／色コード直書きを忠実に保存） --- */

  /* 原文の強調フォントサイズ（px のまま＝移行時の見た目を変えない） */
  .u-fs-18 {
    font-size: 18px;
  }

  .u-fs-25 {
    font-size: 25px;
  }

  .u-fs-26 {
    font-size: 26px;
  }

  .u-fs-28 {
    font-size: 28px;
  }

  .u-fs-30 {
    font-size: 30px;
  }

  /* 原文の文字色（WP カスタムカラー由来） */
  .u-color-wp-orange {
    color: #f28241;
  }

  .u-color-wp-magenta {
    color: #bf4db1;
  }

  .u-color-wp-teal {
    color: #4ea3b2;
  }

  .u-color-wp-cyan {
    color: #28b7c2;
  }

  /* 原文のマーカー・リンクの背景色（WP プリセット／カスタムカラー由来）。
     背景はテーマで切り替わらない固定色のため、前景も原文どおりの固定色を
     セットで持つ（テーマ切替や has-*-color のテーマ色で文字だけ変わり、
     固定背景と衝突して読めなくなるのを防ぐ。後勝ちレイヤーなので
     components の has-*-color を意図的に上書きする）。 */
  .u-bg-wp-purple {
    background-color: #9b51e0;
    color: #fff; /* 原文 has-white-color。4.5:1 */
  }

  .u-bg-wp-amber {
    background-color: #fcb900;
    color: #000; /* 原文 has-black-color。12.6:1 */
  }

  .u-bg-wp-gold {
    background-color: #f6d068;
    color: #000; /* 原文 has-black-color。14.2:1 */
  }

  .u-bg-wp-red {
    background-color: #cf2e2e;
    color: #fff; /* 原文 has-white-color。5.1:1 */
  }

  .u-bg-wp-yellow {
    background-color: #ff9;

    /* リンクの下地に使われるため、テーマ非依存の原始トークンでリンク系色を
       固定する（意味トークンはダークで明色に振れて 2:1 を切る）。9.2:1 */
    color: var(--color-teal-800);
  }

  /* 固定背景の中のリンクは前景の固定色を継承させる（base.css のテーマ色
     リンクが固定背景上で沈むのを防ぐ。ライトでも紫地×ティールリンクは
     1.6:1 だった。下線は残るためリンクの識別性は保たれる） */
  :is(.u-bg-wp-purple, .u-bg-wp-amber, .u-bg-wp-gold, .u-bg-wp-red, .u-bg-wp-yellow) a {
    color: inherit;
  }
}

/* 新しい @layer components ブロック（このファイル冒頭・1252/1585/1608/2157行目の
   @layer components とレイヤーとしては同一に統合される。名前付きレイヤーは
   複数回開いても中身が蓄積される仕様のため問題ない＝css.md §2）。
   直前が @layer utilities のため、ここで明示的に再オープンしないと
   このブロックが utilities レイヤーに混入し、詳細度に関係なく最優先されて
   しまう（実測で発覚: モバイル専用の <768px 規則が768px以上でも適用される
   事故になっていた。utilitiesレイヤーは最優先のため）。 */
@layer components {
  /* =========================================================================
     モバイルヘッダー: 開閉式（ハンバーガー）ナビゲーション（<768px）
     -----------------------------------------------------------------------
     事業担当者報告（実機スマホ・2026-07-13）: 768px未満でヘッダーが「ロゴ行+
     ナビ6リンク折返し(2〜3行)+CTA行」と積み上がり、画面の上半分がメニューで
     埋まる不具合の是正。768px以上は現状と完全に同一の見た目を保つため、
     この開閉パネル用の規則はすべて width < 48rem（tokens.css --bp-md と同値の
     直書き。341行目付近の既存注記と同方針＝メディア条件にはカスタムプロパティを
     使えない）に閉じ込め、デスクトップ幅では一切適用しない。
     開閉ボタンの規約は components.md §4.1（ハンバーガーメニュー）準拠:
     aria-expanded同期／Escで閉じてトグルへフォーカス復帰／パネル外クリックで
     閉じる／リンク選択後は閉じる（実装は cj:shared:footer 末尾のスクリプト）。
     JS無効時は .has-js が付与されずナビが常時表示のまま操作できる
     （html.md §6 プログレッシブエンハンスメント）。 ========================= */

  /* 開閉ボタン本体。既定は常に非表示（768px以上はこのまま=無変更。<768px でも
     JS無効時は .has-js が付かず非表示のまま=上の <nav> が通常表示で操作可能）。 */
  .nav-toggle {
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    min-inline-size: var(--size-7);
    min-block-size: var(--size-7);
    padding: var(--space-3xs);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-text-strong);
    cursor: pointer;
  }

  .nav-toggle:hover {
    background-color: var(--color-surface-2);
  }

  .nav-toggle__icon {
    inline-size: var(--size-5);
    block-size: var(--size-5);
  }

  /* 三本線⇄×の切替は aria-expanded の状態をそのまま使う（状態を JS クラスと
     二重管理しない＝見た目とARIA状態を一致させる。accessibility.md §4.2） */
  .nav-toggle__icon--close {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
    display: block;
  }

  .nav-toggle__label {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-tight);
    white-space: nowrap;
  }

  @media (width < 48rem) {
    /* ロゴ|CTA|開閉ボタンの1行を維持する（ナビは下で position: absolute にして
       通常フローから外すため、残り3つだけが並ぶ）。折返し禁止で「2〜3行に
       積み上がる」元の不具合を断つ。 */
    .site-header__inner {
      flex-wrap: nowrap;
    }

    /* ロゴを縮小し、モバイル1行分の横幅を確保する */
    .site-logo {
      padding-inline: var(--space-2xs);
    }

    .site-logo__img {
      block-size: var(--size-5);
    }

    /* 主CVボタンは隠さず維持する。横幅だけ譲ってコンパクト化する（この幅制約下で
       1行に収まらない場合はテキストが複数行に折り返るが、ボタン自体は常に
       可視・タップ可能なまま＝要求「隠さない」を満たす）。 */
    .site-header__cta {
      flex-shrink: 1;
      min-inline-size: 0;
      padding-inline: var(--space-xs);
      font-size: var(--text-sm);
      text-align: center;
    }

    /* JS有効時のみ開閉ボタンを表示する（html.has-js は head の1行が描画前に付与＝低速環境でも「ナビ全展開→ハンバーガー化」の縮みが起きずCLSゼロ。旧実装は
       スクリプトが読み込み直後に付与）。 */
    :where(html.has-js) .site-header .nav-toggle {
      display: inline-flex;
    }

    /* JS有効時のみナビをパネル化して隠す。ヘッダー（position: sticky＝
       containing block）の直下いっぱいに落ちるパネルにする。JS無効時は
       このルールが適用されず、ナビは通常のドキュメントフロー内で表示され続ける
       （要求4: 隠れて操作不能にしない）。 */
    :where(html.has-js) .site-header .site-header__nav {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      z-index: var(--z-dropdown);
      display: none;
      background-color: var(--color-bg);
      border-block-end: 1px solid var(--color-border);
      box-shadow: var(--shadow-2);
    }

    :where(html.has-js) .site-header.nav-open .site-header__nav {
      display: block;
    }

    :where(html.has-js) .site-header .site-header__nav .nav-list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--space-sm);
    }

    :where(html.has-js) .site-header .site-header__nav .nav-list__link {
      inline-size: 100%;

      /* 48px ≥ 44px（要求されたモバイルのタップ領域を満たす） */
      min-block-size: var(--size-7);
      padding-inline: var(--space-sm);
      border-radius: var(--radius-md);
    }
  }
}


/* ============================================================================
   追記（2026-07-13）: 言語切替＋スマホのヒーロー非被せ（design-base §0-7）
   ファイル末尾で @layer components を再オープン（utilities より優先度は下のまま）
   ============================================================================ */
@layer components {
  /* ── 言語切替（JP | EN）: ヘッダー常設。スマホでも1行に収まる小型リンク ── */
  .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .lang-switch__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--size-6);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-md);
    color: var(--color-link);
    text-decoration: none;
  }

  .lang-switch__link:hover {
    background-color: var(--color-surface-2);
    color: var(--color-link-hover);
  }

  .lang-switch__sep {
    color: var(--color-border);
  }

  /* トップの透過フロートヘッダー上（>=69remのみ透過化される。しきい値の経緯は
     「トップページ限定: 透過フロートヘッダー」ブロックのコメント参照）では白文字に */
  @media (width >= 69rem) {
    .page-home .site-header .lang-switch__link {
      color: var(--color-gray-0);
      text-shadow: 0 1px 6px color-mix(in oklch, var(--color-gray-950) 45%, transparent);
    }

    .page-home .site-header .lang-switch__link:hover {
      background-color: color-mix(in oklch, var(--color-gray-0) 22%, transparent);
      color: var(--color-gray-0);
    }

    .page-home .site-header .lang-switch__sep {
      color: color-mix(in oklch, var(--color-gray-0) 60%, transparent);
    }
  }

  /* ── スマホのヒーロー: 文言ボックスを動画/写真に被せない（事業担当者指示） ──
     動画は16:9全幅で完全表示し、文言はその直下に通常配色で置く。 */
  @media (width < 48rem) {
    .hero-home {
      display: block;
      min-block-size: auto;
      color: var(--color-text);
    }

    .hero-home__media {
      position: relative;
      inset: auto;
      aspect-ratio: 16 / 9;
    }

    /* 被せないためスクリムは不要（動画をそのまま見せる） */
    .hero-home__media::after {
      display: none;
    }

    .hero-home__inner {
      position: static;
      padding-block: var(--space-md) 0;
    }

    .hero-home__box {
      max-inline-size: none;
      padding: 0;
      background: none;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
    }

    .hero-home__title {
      color: var(--color-text-strong);
      text-shadow: none;
    }

    .hero-home__lead {
      color: var(--color-text);
    }

    .hero-home__float-link__link {
      color: var(--color-link);
    }

    .hero-home__float-link__link:hover {
      color: var(--color-link-hover);
    }

    /* 再生/停止ボタンは動画（高さ=幅x9/16）の右下に重ねたまま維持 */
    .hero-home__motion-toggle {
      inset-block: calc(56.25vw - var(--size-7) - var(--space-2xs)) auto;
    }
  }
}

/* ============================================================================
   追記（2026-07-13）: タイル原則（design-base.md §0-6）
   カード/タイル系UIを「全面クリッカブル＋必ず写真」にする実装、および
   program.htmlの3プログラム比較表のモバイル縦積み化。
   ファイル末尾で @layer components を再オープン（utilities より優先度は下のまま。
   既存ブロックへの挿入は多重レイヤーの罠があるため、追記は必ずここで行う）。
   ============================================================================ */
@layer components {
  /* ====================== 汎用: カード全面クリック（ストレッチリンク） ======================
     タイル/カード系UIは全面クリッカブルにする（テキストリンクだけにしない）。
     使い方: カード側（.admission-card / .card / .program-card / .campus-card /
     .archive-card など）に position:relative を、実際にクリックさせたい唯一の
     <a>（各カードの既存 __link クラスと併用）に .stretched-link を付ける。
     ::after がカード全体を覆うクリック領域になる（Bootstrapのstretched-linkと
     同名・同方式）。1カード=1リンクを守り、カード内に他のリンクは残さない。
     重要: .stretched-link 自身は position:static のままにする（あえて
     position:relative を付けない）。ここに position を付けてしまうと、
     ::after の containing block がリンク自身（リンク文言だけの小さな範囲）に
     短絡し、写真など離れた場所のクリックが拾えなくなる（実装時に実測で
     踏んだ罠。カード全体を覆わせるには、絶対配置の基準を祖先カード側
     （下の position:relative 一括指定）まで届かせる必要がある）。
     カード内の他要素（写真・本文）も position:static のままにしておくこと
     （positionを持つ兄弟要素があると重なり順で::afterの下に隠れる可能性がある。
     このファイルの各カード__media はいずれも static のため問題なし）。 */
  .stretched-link::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  /* フォーカスリングはリンク自身ではなく祖先カード側に、カード全体を囲う形で
     出す（design-base.md §0-6「フォーカスリングはカード全体に見える形」）。
     :has() 未対応ブラウザでは下の @supports 内が丸ごと無効になるだけで、
     リンク自身に既定の:focus-visibleリングは残る（full-card表示にならない
     だけで、フォーカス可視性そのものは失われない＝安全側のフォールバック）。 */
  @supports selector(:has(*)) {
    .stretched-link:focus-visible {
      outline: none;
    }

    .admission-card:has(.stretched-link:focus-visible),
    .card:has(.stretched-link:focus-visible),
    .program-card:has(.stretched-link:focus-visible),
    .campus-card:has(.stretched-link:focus-visible),
    .archive-card:has(.stretched-link:focus-visible) {
      outline: 3px solid var(--color-focus);
      outline-offset: 2px;
      border-radius: var(--radius-card);
    }
  }

  /* ストレッチリンクの基準（位置決めの起点）。既存の各カード定義は変更せず、
     プロパティを1つだけ追記する（css.md §2 のレイヤー追記と同じ考え方）。 */
  .admission-card,
  .card,
  .program-card,
  .campus-card,
  .archive-card {
    position: relative;
  }

  /* ====================== Admissionsカード: 写真を追加 ======================
     既存の .admission-card は全体に padding があったが、写真付きカードは
     program-card / campus-card と同じ「写真フルブリード＋本文だけpadding」の
     型に合わせる。:has() 対応ブラウザのみ outer padding を 0 にし、__body 側で
     paddingを持つ（:has() 非対応ブラウザは padding が二重になるだけで、
     崩れたり読めなくなったりはしない＝安全側のフォールバック）。 */
  @supports selector(:has(*)) {
    .admission-card:has(.admission-card__media) {
      padding: 0;
      overflow: clip;
    }
  }

  .admission-card__media {
    aspect-ratio: 4 / 3;
    overflow: clip;
  }

  .admission-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .admission-card__body {
    padding: var(--space-lg);
  }

  /* ====================== Why Kodomo Edu カード: アイコン→写真 ======================
     既存の .card はアイコン+タイトル+本文をまとめて padding していたが、
     写真付きカードは admission-card と同じ考え方で「写真フルブリード＋
     本文だけpadding」にする。.card__icon を使う他ページ（about.html の
     method-title 3カード・en/index.html の card-grid）はこのセレクタに
     マッチしないため見た目は変わらない。 */
  @supports selector(:has(*)) {
    .card:has(.card__media) {
      padding: 0;
      overflow: clip;
    }
  }

  .card__media {
    aspect-ratio: 4 / 3;
    overflow: clip;
  }

  .card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
  }

  /* ====================== 一覧ページ（Blog/News）: サムネイル付きタイル ======================
     .archive-list / .archive-item（テキスト行のみ）は他ページから参照されて
     いないが、既存部品を壊さないためそのまま残し、新規に .archive-grid /
     .archive-card を追加する（gen_archives.py が出力するマークアップに合わせる）。 */
  .archive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .archive-card {
    display: flex;
    flex-direction: column;
    overflow: clip;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .archive-card__media {
    aspect-ratio: 4 / 3;
    overflow: clip;
    background-color: var(--color-surface-2);
  }

  .archive-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .archive-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-md);
  }

  .archive-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .archive-card__cat {
    color: var(--color-primary-strong);
  }

  .archive-card__title {
    margin: 0;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .archive-card__excerpt {
    flex: 1 1 auto;
    margin: 0;
    color: var(--color-text);
  }

  .archive-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-block-start: var(--space-2xs);
    font-weight: 700;
    text-decoration: none;
  }

  .archive-card__link:hover {
    text-decoration: underline;
  }

  @media (width >= 36rem) {
    .archive-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .archive-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ====================== program.html 3プログラム比較表: モバイル縦積み ======================
     768px未満は横スクロール表ではなく「プログラム単位の縦積みカード」に
     変換する（design-base.md §0-6）。CSSのdisplay切替でtableをcard化する
     手法はブラウザによって支援技術への表構造の伝わり方が不安定になりうる
     ため採らず、同一データを持つ2つの表現（表＝.data-table-wrap／
     カード＝.compare-grid）を用意し、ブレークポイントで丸ごと出し分ける
     （どちらのDOMも完全な状態で存在するため、表側のセマンティクスは
     一切崩れない。可読性優先＝task instruction）。 */
  .compare-grid {
    display: none;
  }

  .compare-card {
    padding: var(--space-md);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .compare-card__title {
    margin-block: 0 var(--space-xs);
  }

  .compare-card__list {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .compare-card__list > div {
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--color-border);
  }

  .compare-card__list > div:last-child {
    border-block-end: none;
  }

  .compare-card__list dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .compare-card__list dd {
    margin: 0;
    color: var(--color-text-strong);
  }

  @media (width < 48rem) {
    .data-table-wrap--compare {
      display: none;
    }

    .compare-grid {
      display: grid;
      gap: var(--space-md);
      margin-block-start: var(--space-lg);
      padding: 0;
      list-style: none;
    }
  }
}

/* ============================================================================
   追記（2026-07-13）: method-reggio.html / method-sel.html / method-japan.html
   （教育メソッド掘り下げ3ページ）専用の追加コンポーネント。
   .hero / .split / .section-head / .stats-grid / .citation / .card-grid /
   .card（.card__media 写真タイル込み）/ .message-panel / .testimonial /
   .cta-band 等の既存部品はそのまま再利用し（about.html・index.htmlと同一）、
   ここでは3ページで新たに必要になった「実践写真ギャラリー」だけを追加する。
   ファイル末尾で @layer components を再オープン（既存ブロックへの挿入は
   多重レイヤーの罠があるため、追記は必ずここで行う。2026-07-13の先行追記と
   同じ方針）。
   ============================================================================= */
@layer components {
  /* ====================== 実践写真ギャラリー（「Kodomo eduでの実践」節） ======================
     具体的な活動を写真2〜3点で見せる節専用のグリッド。カード/タイルと違い
     1枚1枚がリンクではない（クリック先を持たない純粋な写真+キャプション）ため
     .card / .program-card とは別の軽量な部品にする。写真は object-fit: cover の
     4:3固定比率にそろえ、ポートレート/ランドスケープが混在しても縦の高さが
     そろう（.card__media / .program-card__media と同じ考え方の再利用）。 */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  .gallery-item__media {
    aspect-ratio: 4 / 3;
    overflow: clip;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
  }

  .gallery-item__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .gallery-item figcaption {
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  @media (width >= 36rem) {
    .gallery-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}


/* ============================================================================
   追記（2026-07-14）: 多言語表示切替（:lang）
   共有ブロック（ヘッダー/フッター）は全ページ同一のまま、日英2系統の要素を持ち
   ページの <html lang> に応じて片方だけ表示する。EN版フルページ対応の土台。
   ============================================================================ */
@layer components {
  html:lang(ja) .i18n-en {
    display: none;
  }

  html:lang(en) .i18n-ja {
    display: none;
  }
}

/* 追記(2026-07-14): 比較表を枠内に収める（内側横スクロール禁止・デスクトップ指摘対応）。
   table-layout:fixed で列幅を等分固定し、セル内で折り返す。 */
@layer components {
  .data-table--fit {
    inline-size: 100%;
    table-layout: fixed;
  }

  .data-table--fit thead th:first-child {
    inline-size: 17%;
  }
}

/* 追記(2026-07-14): 比較表ラッパの幻の30pxスクロール除去。
   fixedレイアウト適用後、全セル・captionは枠内に収まっている（実測で最右要素=枠右端）
   にも関わらずスクロール領域だけが残るUA癖のため、このラッパのみ横クリップ。
   768px未満はカード表示（表は非表示）なので実害なし。 */
@layer components {
  @media (width >= 48rem) {
    .data-table-wrap--compare {
      overflow-x: clip;
    }
  }
}

/* 追記(2026-07-14): 比較表のセルは折り返し許可（既定のnowrap前提を解除）。
   fixed列幅×折り返しで、どの画面幅でも枠内に完全収容される。 */
@layer components {
  .data-table--fit :is(th, td) {
    white-space: normal;
  }
}

/* 追記(2026-07-14): EN Membersの代表カードリンク折り返し許可。
   .member-card__link は日本語の短いリンク文言前提で white-space: nowrap だが、
   英語版の "Read Yoshimi's full story (Japanese) ›" は 320px 幅で収まらず
   横はみ出し(69px@320/16px@375)の原因になるため、ENページに限り折り返しを許可する。
   JPページ（:lang(ja)）は従来どおり nowrap のまま=挙動変更なし。 */
@layer components {
  html:lang(en) .member-card__link {
    white-space: normal;
  }
}

/* 追記(2026-07-14): キャンパス系ページ用ヒーロー修飾 .hero-home--sub。
   トップ/enトップの .hero-home（写真全幅ヒーロー）を、動画なし・静止画のみで
   サブページ（campus-nakameguro.html / campus-toritsudai.html / campus.html）
   に流用するための高さ抑制モディファイア。トップの min-block-size:
   min(56.25vw, 92svb) は16:9動画全体を見せるための高さだが、サブページは
   「写真帯として品よく・本文が1スクロール目に見える高さ」で十分なため、
   それより低い上限に差し替える（768px未満はトップと同じモバイル専用ブロック
   ＝写真16:9→文言が下に縦積みがそのまま効くので、ここでは触らない）。
   このファイルの他の追記ブロック同様 @layer components 内に置く
   （unlayeredのままだとレイヤー間の優先順位がlayered側と揃わず、
   カスケードの前提が崩れるため）。 */
@layer components {
  @media (width >= 48rem) {
    .hero-home--sub {
      min-block-size: min(38vw, 62svb);
    }

    /* サブヒーローの文言ボックス/リードの幅上限は撤廃——2026-08-20 指示書03
       「表示の統一化」（FVのテキストも対象と明記）。経緯: トップ用32chでは説明文が
       縦に伸びすぎるため40rem/48chへ拡張（当初）→ 指示書03でPC本文の全幅統一が
       指示され上限自体を撤廃。白文字の可読性は暗色パネル＝ボックスの背景が担う。 */
  }
}

/* ============================================================================
   追記（2026-07-14）: フッターSNSリンク（アイコン・日英共通）
   ============================================================================ */
@layer components {
  .sns-list {
    display: flex;
    gap: var(--space-2xs);
    margin: var(--space-2xs) 0 0;
    padding: 0;
    list-style: none;
  }

  .sns-list__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-7);
    block-size: var(--size-7);
    color: var(--color-primary);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard);
  }

  .sns-list__link:hover {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
  }

  .sns-list__link svg {
    inline-size: var(--size-5);
    block-size: var(--size-5);
  }

  .sns-list__wordmark {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
}

/* =============================================================================
   トップの透過フロートヘッダーのスクロール追従（2026-07-14指摘対応）
   .page-home のヘッダーは >=69rem（2026-08-14 に 48rem から引き上げ）で
   ヒーロー動画に重ねる絶対配置のため、
   そのままではスクロールでメニューが画面外へ退場していた。共有スクリプトが
   スクロール量>24pxで付与する .is-scrolled で通常ページ同等の固定・白背景へ
   切替え、最上部へ戻れば透過フロートに復帰する。JS無効時はクラスが付かず
   従来の見た目のまま（プログレッシブエンハンスメント）。
   ファイル末尾で @layer components を再オープン（既存ブロックへの挿入は
   多重レイヤーの罠があるため、追記は必ずここで行う）。
   ============================================================================= */
@layer components {
  /* 69rem = 透過フロートヘッダーのしきい値と連動（経緯は同ブロックのコメント参照） */
  @media (width >= 69rem) {
    .page-home .site-header.is-scrolled {
      position: fixed;
      background: var(--color-bg);
      border-block-end: 1px solid var(--color-border);
    }

    /* 透過ヘッダー用の白文字上書きを、通常ページの配色へ戻す */
    .page-home .site-header.is-scrolled .nav-list__link {
      color: var(--color-text);
      text-shadow: none;
    }

    /* :where()で特異度を0,4,0に抑える（規約上限）。白文字上書き（0,4,0）とは
       同特異度になるが、このブロックはファイル末尾＝後勝ちで意図どおり効く */
    .page-home .site-header.is-scrolled :where(.nav-list__link):hover {
      background-color: var(--color-surface-2);
      color: var(--color-text-strong);
    }

    /* 現在地リンクの色も通常ページと同じに（上のrevertより後ろ＝同特異度で後勝ち） */
    .page-home .site-header.is-scrolled :where(.nav-list__link)[aria-current="page"] {
      color: var(--color-link);
    }

    .page-home .site-header.is-scrolled .lang-switch__link {
      color: var(--color-link);
      text-shadow: none;
    }

    .page-home .site-header.is-scrolled :where(.lang-switch__link):hover {
      background-color: var(--color-surface-2);
      color: var(--color-link-hover);
    }

    .page-home .site-header.is-scrolled .lang-switch__sep {
      color: var(--color-border);
    }

    .page-home .site-header.is-scrolled :focus-visible {
      outline-color: var(--color-focus);
    }
  }
}

/* =============================================================================
   説明会・体験会カレンダー（admission.html #reserve-cal・バロウズSSR）
   マークアップ契約: バロウズ AdmissionPageServlet が
   .cal > .cal__head(.cal__title/.cal__pager) + .cal__grid-wrap > table.cal__grid
   + .cal__note を出力する（月移動=?ym・予定リンク=?slot=ID#reserve）。
   .cal-fallback はサーブレット非経由（ローカルプレビュー）時のみ表示される静的文。
   日枠は複数予定に対応（ul.cal__events）。予定リンクはタップ目標24px以上を確保
   （accessibility.md §2.3）。配色はトークン参照のみ＝ダークモード自動対応。
   ============================================================================= */
@layer components {
  .cal-fallback {
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
  }

  .cal-fallback > p {
    margin: 0;
  }

  .cal__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    align-items: baseline;
    justify-content: space-between;
    margin-block-end: var(--space-xs);
  }

  .cal__title {
    margin: 0;
    font-size: var(--text-lg);
  }

  .cal__pager {
    display: flex;
    gap: var(--space-2xs);
    margin: 0;
  }

  .cal__pager-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-7);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    text-decoration: none;
  }

  .cal__pager-link:hover {
    background-color: var(--color-surface-2);
  }

  /* 7列を常に画面内へ（table-layout:fixed＋折返し許可）。万一の狭幅は枠内スクロール */
  .cal__grid-wrap {
    overflow-x: auto;
  }

  .cal__grid {
    inline-size: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .cal__dow {
    padding-block: var(--space-3xs);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .cal__day {
    padding: var(--space-3xs);
    vertical-align: top;
    min-block-size: var(--size-10);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
  }

  .cal__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-5);
    block-size: var(--size-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-pill);
  }

  .cal__day--other {
    background-color: var(--color-surface);
  }

  .cal__day--other .cal__date {
    color: var(--color-text-muted);
  }

  .cal__day--today .cal__date {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
  }

  .cal__events {
    display: grid;
    gap: var(--space-3xs);
    margin: var(--space-3xs) 0 0;
    padding: 0;
    list-style: none;
  }

  /* 予定チップ: 複数可・折返し可・タップ目標>=24px */
  .cal__event {
    display: block;
    min-block-size: var(--size-6);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    color: var(--color-link);
    text-decoration: none;
    background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
    border-radius: var(--radius-sm);
  }

  .cal__event:hover {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
  }

  .cal__note {
    margin-block: var(--space-xs) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  @media (width < 48rem) {
    .cal__head {
      flex-direction: column;
      align-items: stretch;
    }

    .cal__day {
      min-block-size: var(--size-9);
    }

    .cal__event {
      font-size: 0.72rem;
    }
  }
}

/* =============================================================================
   保護者インタビュー動画（voice.html / en/voice.html・2026-07-16 素材差し替え）
   video-placeholder（準備中カード）を実動画に置換した際の器。preload="none"＋
   poster でページ自体は軽いまま（動画バイトは再生時のみ取得）。配色・角丸は
   トークン参照＝ダークモード自動対応。
   ============================================================================= */
@layer components {
  .video-embed__video {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-gray-950);
  }

  .video-embed__caption {
    margin-block: var(--space-2xs) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
}

/* =============================================================================
   カレンダー日セルの最低高（2026-07-16 事業担当者指示「2件4行分をミニマムに」）
   「予定2件（各2行）」が収まる高さを空セルにも常時確保し、予定の有無で行の高さが
   暴れないようにする。<td> には min-block-size が効かない（表セルの min-height は
   CSS仕様上未定義＝ブラウザは無視。既存指定が効いていなかった真因）ため、
   表レイアウトで「最低値」として振る舞う block-size（height 相当）で指定する。
   内訳（実測・16px基準）: padding 4×2 + 日付ピル24 + 上余白4 + 2行チップ42×2 +
   チップ間4 = 124px = 7.75rem。内容がこれを超える場合（モバイルの多行折返し等）は
   表セルの性質どおり自然に伸びる。
   ============================================================================= */
@layer components {
  .cal__day {
    block-size: 7.75rem;
  }
}

/* =============================================================================
   キャンパス比較表の枠内スクロール解消（2026-07-16 事業担当者指摘: en/campus.html
   「Programs by Campus」以下が横スクロール。実測: EN 1280pxで枠内203px・
   JPもモバイルで潜在479px）。program比較表と同じ --fit（fixed列＋セル折返し）を
   両campusページの表に適用。3列表（項目+2キャンパス）は既定の1列目17%では
   行見出しが狭すぎるため、--campus 修飾で30%に広げる（--fitより後置=同特異度後勝ち）。
   ============================================================================= */
@layer components {
  .data-table--campus thead th:first-child {
    inline-size: 30%;
  }
}

/* =============================================================================
   幻スクロールの除去専用ラッパ修飾 .data-table-wrap--clip（2026-07-17）
   経緯: 2026-07-16のdata-table総点検で --fit 適用時に --compare を流用したが、
   --compare は「48rem未満で表を隠しカード（.compare-grid）を出す」program専用の
   仕組みとセットであり、カード代替の無い14ページの表がモバイルで消える退行を
   起こした（数値スイープは非表示=0pxで偽緑。可読性の目視確認で発覚）。
   本修飾は表示制御を一切持たず、fixedレイアウト適用後に残るUA癖の
   横スクロール領域だけをクリップする。--fit（fixed列＋折返し）とセットで使い、
   fixedレイアウトが幅を container に拘束するため clip が実内容を隠すことはない。
   ============================================================================= */
@layer components {
  @media (width >= 48rem) {
    .data-table-wrap--clip {
      overflow-x: clip;
    }
  }
}

/* =============================================================================
   --fit 表の最小幅床の解除（2026-07-17）。基底 .data-table の min-inline-size:26rem
   は「狭い画面では横スクロールで読む」前提の床だが、--fit は fixed列＋セル折返しで
   どの幅にも収まる設計のため床が不要（この床が全--fit表のモバイル89px@375/
   144px@320の一様な枠内スクロールの正体だった）。2列表での前例（line1397付近の
   min-inline-size:0）と同判断。
   ============================================================================= */
@layer components {
  .data-table--fit {
    min-inline-size: 0;
  }
}

/* =============================================================================
   --fit 表の微小はみ出しの最終防壁（2026-07-17）。min幅床の解除後も、固定列幅より
   長い「割れないトークン」（¥155,650・時刻レンジ等）が12〜26px程度セル外へ
   はみ出す残余があるため、①30rem未満は1段階縮小（可読性も向上）②最終手段として
   トークン途中での折返しを許可（overflow-wrap:anywhere は通常は発動せず、
   固定列に収まらない極端な語にだけ効く）。
   ============================================================================= */
@layer components {
  .data-table--fit :is(th, td) {
    overflow-wrap: anywhere;
  }

  @media (width < 30rem) {
    .data-table--fit {
      font-size: var(--text-sm);
    }
  }
}

/* =============================================================================
   data-table の表示戦略の最終形（2026-07-17・列密度で分岐）
   ・2〜3列の表 = --fit で全幅収容（全ビューポート。ただし1列目の17%固定は
     デスクトップ専用とし、狭幅では自動幅=等分に戻す。17%×320pxは1文字縦書きに
     なる可読性事故のため）
   ・5〜6列の料金表 = --scroll-sm でモバイル（<48rem）は従来設計の横スクロールへ
     復帰（fixed等分では金額が桁割れし読めない。48rem以上は--fitのまま枠内収容）
   ============================================================================= */
@layer components {
  @media (width < 48rem) {
    .data-table--fit thead th:first-child {
      inline-size: auto;
    }

    .data-table--scroll-sm {
      min-inline-size: 26rem;
      table-layout: auto;
    }

    .data-table--scroll-sm thead th:first-child {
      inline-size: auto;
    }

    .data-table--scroll-sm :is(th, td) {
      overflow-wrap: normal;
      white-space: nowrap;
    }
  }
}

/* =============================================================================
   ペルソナ回遊試験 B2/B9 対応（2026-07-17）
   B2: --scroll-sm 料金表のモバイル横スクロールに気づける文字ヒント
       （<48remのみ表示。aria-hidden=装飾・表自体はSRで線形に読める）
   B9: カレンダー予定チップのモバイル縦割れ対策——1行省略表示（時刻＋先頭語が
       見え、タップすればフォームに完全な日時・名称が転記される）
   ============================================================================= */
@layer components {
  .table-scroll-hint {
    display: none;
  }

  @media (width < 48rem) {
    .table-scroll-hint {
      display: block;
      margin-block: var(--space-3xs) 0;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .cal__event {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

/* =============================================================================
   ここから Members モーダル（members.html / en/members.html）専用追加
   （指示書2 #8・2026-08-14）。ファイル末尾で @layer components を再オープン
   （既存ブロックへの挿入は差分が散るため、このファイルの追記慣例に従う）。

   紹介文モーダル化の方針（プログレッシブエンハンスメント・html.md §6 と同じ流儀）:
   - JS有効（html.has-js）時のみ、カードの紹介文を隠して「プロフィールを見る」
     ボタンを表示。押すと <dialog> モーダルにカード内容を複製表示する。
   - JS無効・showModal 非対応環境では従来どおり紹介文が全文表示され、
     ボタンは出ない（開けないUIを見せない）。
   - 代表カード（--featured）は単独の紹介枠で一覧の縦長要因ではないため、
     JS有効時も紹介文を隠さない（モーダル対象外）。
   ============================================================================= */
@layer components {
  /* JS有効時: 一覧の縦長要因である紹介文を隠す（指示書2 #8「一覧で見れたほうが
     ユーザー利便性は高い」）。中身はDOMに残る＝モーダルの複製元・検索対象。 */
  :where(html.has-js) .member-card:not(.member-card--featured) .member-card__bio {
    display: none;
  }

  .member-card__more {
    display: none; /* JS無効時は非表示（モーダルを開けないため） */
  }

  :where(html.has-js) .member-card__more {
    display: inline-flex;
    align-items: center;
    margin-block-start: var(--space-2xs);

    /* テキスト風ボタンでも 24×24px のターゲットサイズを満たす
       （check-visual の target-size はインライン例外を button に適用しない） */
    padding: var(--space-3xs) var(--space-2xs);
    border: 0;
    background: none;
    color: var(--color-link);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
  }

  :where(html.has-js) .member-card__more:hover,
  :where(html.has-js) .member-card__more:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  /* ── モーダル本体（<dialog>。:modal のUAスタイルが position:fixed・中央寄せ・
        max-height・overflow:auto を既定で与えるため、ここでは見た目だけ足す） ── */
  .member-modal {
    inline-size: min(100% - 2rem, 34rem);

    /* dialog:modal のUA中央寄せは margin:auto で実現されているが、base.css の
       リセット（* { margin: 0 }）がそれを打ち消し全ビューで左上に張り付いていた
       （2026-08-20 指示書03で事業担当者が指摘・実バグ）。明示して復元する。 */
    margin: auto;
    padding: 0; /* 余白は __inner が持つ（背景クリック判定を dialog 自身に限定するため） */
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-2);
  }

  .member-modal::backdrop {
    background-color: oklch(0% 0 0deg / 55%);
  }

  .member-modal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xl);
    text-align: center;
  }

  /* 名前は見出し相当の見た目（実要素は <p>。空の見出しは empty-heading に
     かかるため、スケルトンは p で持ち aria-labelledby でラベル付けする） */
  .member-modal__name {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
  }

  .member-modal__role {
    margin: 0;
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .member-modal__origin {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .member-modal__bio {
    margin-block-start: var(--space-2xs);
    font-size: var(--text-sm);
    text-align: start;
  }

  .member-modal__close {
    position: absolute; /* 包含ブロックは dialog:modal（UAの position:fixed） */
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs); /* 24pxターゲットサイズ確保 */
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
  }

  .member-modal__close:hover,
  .member-modal__close:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
  }

  /* モーダル表示中は背景のスクロールを止める（dialogの標準挙動では止まらない） */
  html:has(.member-modal[open]) {
    overflow: hidden;
  }
}

/* =============================================================================
   ここから Campus 地図埋め込み（campus-nakameguro.html / campus-toritsudai.html）
   専用追加（指示書2 #9・2026-08-14）。ファイル末尾で @layer components を再オープン。
   Googleマップの iframe 埋め込み（従来はリンクのみ→「場所を視覚的に判断できる」ように）。
   iframe は loading="lazy"。読み込めない環境でも直下の「Googleマップで経路を確認する」
   リンクが従来どおり残る（劣化しても壊れない）。
   ============================================================================= */
@layer components {
  .map-embed {
    margin-block-start: var(--space-md);
    overflow: hidden; /* 角丸を iframe にも効かせる */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .map-embed__frame {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    border: 0;
  }
}

/* =============================================================================
   ここから FVスタンプ「幼児教育無償化＆補助金 認定校」（index.html 専用）
   （2026-08-16 事業担当者指示②・実装 2026-08-17）。ファイル末尾で @layer components を
   再オープン。提供PNG（白背景）を実テキストで再現した固定アートワーク——
   ダークモードでも配色を変えない（ハンコとしての同一性を優先）。
   配置: ≥48rem はヒーロー右下（動画一時停止ボタンの真上）へ絶対配置、
   <48rem は CTAボタンと同じ行の右側（指示スクリーンショットの丸印位置）。
   ============================================================================= */
@layer components {
  /* ≥48rem ではレイアウトに関与しない包み（スタンプは絶対配置・actionsは従来どおり） */
  .hero-home__cta-row {
    display: contents;
  }

  .hero-stamp {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    align-items: center;
    justify-content: center;
    inline-size: 8.5rem;
    block-size: 8.5rem;
    margin: 0;
    text-align: center;
    border-radius: 50%;

    /* 提供デザインの実測色（固定アートワーク＝トークン非連動。上の説明コメント参照） */
    background-color: #f5e565;
    color: oklch(28% 0.02 250deg);
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--shadow-1);
  }

  .hero-stamp__free {
    font-size: 0.95rem;
  }

  .hero-stamp__badge {
    padding: 0.1em 0.7em;
    background-color: oklch(46% 0.078 204deg); /* --color-teal-700 の固定値（白文字で4.5:1以上） */
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
  }

  /* 2026-08-25 指示書04: 位置指定はスタンプ単体から .hero-badges（スタンプ＋資料DLアイコンの枠）へ
     移動。アイコンは「PC=スタンプの右横・スマホ=スタンプの下」の指示配置。 */
  .hero-doc-link {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 8.5rem;
    block-size: 8.5rem;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;

    /* スタンプの帯と同じ固定teal（白文字で4.5:1以上。固定アートワーク扱い＝ダークモード不変） */
    background-color: oklch(46% 0.078 204deg);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: var(--shadow-1);
  }

  .hero-doc-link:hover,
  .hero-doc-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  @media (width >= 48rem) {
    /* 枠の基準は文言パネル（__box）。パネルの右横・下端揃え＝CTAボタンの並び
       （予約導線のすぐ横で無償化を補強する配置。パネル右の動画余白＝FV右下の空白に載る）。
       __inner（relative）基準だと包含ブロックの都合で中途半端な位置に落ちる実測のため、
       パネル自身を基準にして決定的にする。 */
    .hero-home__box {
      position: relative;
    }

    .hero-badges {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: calc(100% + var(--space-lg));
      display: flex;
      gap: var(--space-sm);
      align-items: flex-end;
    }
  }

  @media (width < 48rem) {
    /* CTAボタンと同じ行に左右振り分け。狭幅で入り切らないときは折り返して右寄せ
       （space-between＋margin-inline-start:auto＝重なりが構造的に起きない）。
       枠の中はスタンプ上・アイコン下の縦積み（指示: スタンプを少し上へずらし、その下に配置） */
    .hero-home__cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      align-items: center;
      justify-content: space-between;
    }

    .hero-badges {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      align-items: center;
      margin-inline-start: auto;
    }

    .hero-stamp {
      inline-size: 7rem;
      block-size: 7rem;
    }

    .hero-doc-link {
      inline-size: 7rem;
      block-size: 7rem;
      font-size: 0.8rem;
    }

    .hero-stamp__free,
    .hero-stamp__badge {
      font-size: 0.8rem;
    }
  }
}

/* =============================================================================
   ここから TOP Admissions カードのスマホ「バナー1枚」表示（index.html / en/index.html）
   （2026-08-20 指示書03: スマホで縦長になるため、各プログラムの生徒募集が
   バナー1枚で分かるコンパクト表示へ。PC(>=48rem)は従来の写真カードのまま——
   指示の理由がスマホ表示のため）。ファイル末尾で @layer components を再オープン。
   ============================================================================= */
@layer components {
  @media (width < 48rem) {
    /* 写真=左の縦いっぱいサムネ・右=番号/対象/名称/リンクの1段バナー。
       説明文（__text）は非表示にして高さを圧縮（要点は対象年齢と名称で伝わる。
       全文はプログラム詳細ページ側にある）。カード全面クリックは既存の
       stretched-link がそのまま担う。 */
    .admission-card {
      display: grid;

      /* minmax(0, 1fr): 本文列の min-content 幅が 320px 級の狭幅で全体を押し広げないように
         （1fr 素のままだと対象年齢ラベル等の最小幅でカードが横はみ出しした実測） */
      grid-template-columns: 7rem minmax(0, 1fr);
      overflow: clip; /* :has() 非対応環境でも角丸から写真がはみ出さないよう明示 */
    }

    .admission-card__media {
      block-size: 100%;
      aspect-ratio: auto; /* 列の高さ（本文側）に追従。img は object-fit: cover 済み */
    }

    .admission-card__body {
      padding: var(--space-sm) var(--space-md);
    }

    .admission-card__index {
      font-size: var(--text-md);
    }

    .admission-card__text {
      display: none;
    }

    .admission-card__link {
      margin-block-start: var(--space-3xs);

      /* 320px級では nowrap のリンク文言が本文列から溢れて overflow: clip に切られるため、
         バナー表示中のみ折り返しを許可（通常幅では従来どおり1行） */
      white-space: normal;
    }
  }
}

/* =============================================================================
   ここから TOPヒーロー動画の全フレーム表示（index.html・PCのみ）
   （2026-08-25 指示書04【PCのみ】: 動画下部の文字が切れる——object-fit: cover が
   92svb 上限とワイド画面の組で上下をクロップしていた。「ページの横に動画を
   合わせるのではなく、動画の縦がフレームに収まるように」の指示どおり contain 化。
   16:9 がぴったり収まる幅では従来と同一表示・ワイド画面でのみ左右に暗色の
   余白が出る（フォールバック画像も同挙動に揃える）。ファイル末尾で @layer 再オープン。
   ============================================================================= */
@layer components {
  @media (width >= 48rem) {
    .hero-home__media {
      background-color: var(--color-gray-950);
    }

    .hero-home__media img,
    .hero-home__media video {
      object-fit: contain;
    }
  }
}

/* =============================================================================
   ここから 予約・資料請求フォームの複合フィールド
   （2026-08-25 指示書04 3-1/3-2: 生年月日の年・月・日を1行3セレクトで並べる。
   fieldset はブラウザ既定の枠・余白を持つため素の form-field と同じ見た目に
   リセットする。狭幅でも3つ横並びを維持（最小幅で折返し）。
   ファイル末尾で @layer 再オープン。
   ============================================================================= */
@layer components {
  .form-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  .form-fieldset > .form-label {
    padding: 0;
  }

  .form-select-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(4.5rem, 1fr));
    gap: var(--space-2xs);
  }
}

/* =============================================================================
   ここから TOP「News & Blog」2カラム＋グロナビのスマホ限定項目
   （2026-08-26 指示書05: ①CAMPUSの次・FAQ手前に News/Blog 各最新3件の2カラム。
   ②Blog/Newsはグロナビに出さずスマホの3本線メニュー内のみ＝ .nav-list__item--sp。
   フッターのnav-listには使わない（フッターは常時全項目表示）。
   ファイル末尾で @layer 再オープン。
   ============================================================================= */
@layer components {
  .updates-grid {
    display: grid;
    gap: var(--space-lg);
  }

  @media (width >= 48rem) {
    .updates-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-xl);
    }
  }

  .updates-col__title {
    margin-block-end: var(--space-2xs);
    padding-block-end: var(--space-2xs);
    border-block-end: 2px solid var(--color-border);
    font-size: var(--text-md);
  }

  .updates-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .updates-item {
    border-block-end: 1px solid var(--color-border);
  }

  .updates-item__link {
    display: block;
    padding-block: var(--space-sm);
    color: inherit;
    text-decoration: none;
  }

  .updates-item__title {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--color-text-strong);
    font-weight: 700;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  .updates-item__link:hover .updates-item__title,
  .updates-item__link:focus-visible .updates-item__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .updates-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
  }

  .updates-item__cat {
    padding: 0 var(--space-2xs);
    border: 1px solid currentcolor;
    border-radius: var(--radius-pill);
  }

  .updates-col__more {
    margin-block-start: var(--space-sm);
  }

  /* Blog/News はスマホメニュー内のみ（指示書05: グロナビには不要・3本線の中へ追加） */
  @media (width >= 48rem) {
    .site-header__nav .nav-list__item--sp {
      display: none;
    }
  }
}

/* =============================================================================
   ここから カテゴリナビの現在地ピル（2026-08-26 指示書05）
   カテゴリ別一覧ページで year-jump ピルを流用したカテゴリナビの、現在カテゴリを
   反転表示で区別する（aria-current="page" はカテゴリページのナビのみ付与）。
   ファイル末尾で @layer 再オープン。
   ============================================================================= */
@layer components {
  .year-jump__link[aria-current="page"] {
    background-color: var(--color-primary-strong);
    color: var(--color-bg);
  }
}