@charset "UTF-8";

/* ==========================================================================
   QA Mode (?qa=1): アニメーションを完全無効化し、すべての要素を即時表示
   html.qa-mode が JS で付与される
   ========================================================================== */
html.qa-mode *,
html.qa-mode *::before,
html.qa-mode *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.qa-mode [class*="js-"],
html.qa-mode .s-hero *,
html.qa-mode .s-about *,
html.qa-mode .s-experience *,
html.qa-mode .s-committee *,
html.qa-mode .s-requirements *,
html.qa-mode .s-report *,
html.qa-mode .l-footer * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* QA mode 例外：ヒーローの「！」は SVG 自身に傾きを持つため transform は 0 */
html.qa-mode .s-hero__excl {
  transform: none !important;
}

/* ==========================================================================
   OPENING LOADER — assets/logo.svg のパーツが集まって組み上がる
   インラインSVG の <path> を JS（GSAP）で散らばらせて飛来 → 合体させる
   ========================================================================== */
.l-opener {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-base-light);
  opacity: 1;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow: hidden;
}

/* ロゴ全体コンテナ: SVGを中央サイズで表示 */
.l-opener__logo {
  width: clamp(220px, 36vw, 360px);
  height: auto;
  overflow: visible;
}
.l-opener__logo svg {
  width: 100%;
  height: auto;
  overflow: visible; /* 散らばった path が viewBox 外に出ても表示 */
}

/* JS（GSAP）が起動するまでは path を非表示にし、組み上がる前のチラつきを防止 */
.l-opener__logo svg path {
  opacity: 0;
}

/* 完了演出: 3 色の円が画面を覆い → 縮んで消える
   - 直径はアンカー位置に応じて最小必要量に：
     コーナー起点 → 300vmax（半径=対角線をカバー）
     中央起点    → 150vmax（半径=対角線の半分）
   - 大きすぎると scale を縮めても画面を覆い続けて「止まって見える」原因になる */
.l-opener__cover {
  position: absolute;
  width: 300vmax;
  height: 300vmax;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
/* 中央起点の黄色は、ビューポート対角線の半分（≈71vmax）をカバーすれば十分 */
.l-opener__cover--yellow {
  width: 150vmax;
  height: 150vmax;
}

/* セッション 2 回目以降: ローダーを完全スキップ（チラつき防止） */
html.is-opener-skip .l-opener {
  display: none !important;
}

/* ローダー表示中はスクロール無効化 */
html:not(.is-opener-skip):not(.is-opener-done) {
  overflow: hidden;
}

/* 動きを抑制したいユーザー: ロゴをそのまま即時表示 */
@media (prefers-reduced-motion: reduce) {
  .l-opener__logo svg path {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   CSS Variables — v2 Design Tokens
   Source: docs/design-spec.md + tools/design-gen/style-guide.json (v2)
   ========================================================================== */
:root {
  /* --- Colors (v2 確定) --- */
  --color-primary:     #FFC100;  /* イエロー: 体験会CTA背景・体験会セクション背景・ハイライト */
  --color-accent1:     #E50012;  /* レッド: 締切日・注意喚起テキスト・ボランティア募集テキスト */
  --color-accent2:     #0028FF;  /* ブルー: 委員CTA背景・委員セクション背景・リンクテキスト */
  --color-base-dark:   #1A1A1A;  /* ダークグレー: 本文テキスト・見出しテキストのみ（背景禁止） */
  --color-base-light:  #FAFAF7;  /* オフホワイト: ページ基本背景・フッター背景 */
  --color-neutral:     #F0EDE8;  /* ライトグレー: 06-reportセクション背景・保護者パネル背景 */

  /* --- Typography --- */
  --font-family-base:  'Zen Maru Gothic', sans-serif;

  /* タイポスケール — デスクトップ
     ルール:
       - 標準文字サイズ: 16px
       - サブ・注釈等の最小サイズ: 14px
       - 14px 未満（13/12px）は禁止 → 全て 14px に丸める */
  --fs-display:        88px;
  --fs-h1:             52px;
  --fs-h2:             38px;
  --fs-h3:             26px;
  --fs-h4:             19px;
  --fs-body:           16px;    /* 標準 */
  --fs-body-small:     16px;    /* 標準と同等（旧 15px） */
  --fs-caption:        14px;    /* サブ・注釈（最小） */
  --fs-small:          14px;    /* 最小に統一（旧 13px） */
  --fs-label:          14px;    /* 最小に統一（旧 12px） */

  /* タイポスケール — SP
     ルール:
       - 標準文字サイズ: 14px
       - 最小サイズ: 12px
       - 12px 未満は禁止 */
  --fs-display-sp:     52px;
  --fs-h1-sp:          38px;
  --fs-h2-sp:          30px;
  --fs-h3-sp:          22px;
  --fs-h4-sp:          17px;
  --fs-body-sp:        14px;    /* SP 標準（旧 15px） */
  --fs-caption-sp:     12px;    /* SP 最小（旧 13px） */

  /* ヘッダーCTAボタン専用フォントサイズ */
  --fs-header-cta:     14px;

  /* CTA ボタン（セクション内） */
  --fs-cta:            18px;

  /* フォントウェイト
     標準文字（regular）を 500 に底上げして可読性を強化
     Zen Maru Gothic 400 は軽すぎるため、500 を実質「常用」とする */
  --fw-regular:  500;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  /* ライン・ハイト */
  --lh-display:  1.1;
  --lh-h1:       1.2;
  --lh-h2:       1.3;
  --lh-h3:       1.4;
  --lh-h4:       1.5;
  --lh-body:     1.9;
  --lh-body-lg:  2.0;
  --lh-caption:  1.8;
  --lh-label:    1.6;

  /* レタースペーシング */
  --ls-display:  0.08em;
  --ls-heading:  0.08em;
  --ls-h3:       0.06em;
  --ls-h4:       0.04em;
  --ls-body:     0.04em;
  --ls-caption:  0.04em;
  --ls-label:    0.08em;
  --ls-wide:     0.12em;  /* セクションラベル */

  /* --- Spacing (8px baseline grid) --- */
  --sp-2:    2px;
  --sp-4:    4px;
  --sp-8:    8px;
  --sp-12:   12px;
  --sp-16:   16px;
  --sp-20:   20px;
  --sp-24:   24px;
  --sp-32:   32px;
  --sp-40:   40px;
  --sp-48:   48px;
  --sp-64:   64px;
  --sp-80:   80px;
  --sp-96:   96px;
  --sp-120:  120px;

  /* セクション上下パディング (design-spec.md §1-3) */
  --section-pt-desktop:  120px;
  --section-pb-desktop:   80px;
  --section-pt-sp:         80px;
  --section-pb-sp:         80px;

  /* コンテナ */
  --container-max-width:   1200px;
  --container-px-desktop:  40px;
  --container-px-sp:       24px;

  /* --- ヘッダー --- */
  --header-height:    72px;  /* sticky固定高さ (desktop) */
  --header-height-sp: 64px;  /* SP — ロゴの上下余白を確保するため拡大 */

  /* --- Border & Radius --- */
  --radius-btn:   4px;   /* ボタン */
  --radius-card:  8px;   /* カード */
  --radius-input: 4px;   /* 入力欄 */
  --radius-full:  9999px;

  /* --- Shadow --- */
  --shadow-card:       0 2px 12px rgba(26, 26, 26, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(26, 26, 26, 0.16);
  --shadow-header:     0 2px 12px rgba(26, 26, 26, 0.08);
  --shadow-youtube:    0 4px 24px rgba(26, 26, 26, 0.12);

  /* --- Transition --- */
  --ease-base:    0.3s ease;
  --ease-fast:    0.2s ease;
  --ease-bounce:  0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* --- Focus Ring (WCAG 2.1 AA) --- */
  --focus-outline: 2px solid #0028FF;
  --focus-offset:  2px;
}

/* ==========================================================================
   SP（〜767px）: 標準文字サイズ 14px / 最小 12px に切替
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-body:           14px;
    --fs-body-small:     14px;
    --fs-caption:        12px;
    --fs-small:          12px;
    --fs-label:          12px;
  }
}

/* ==========================================================================
   Modern CSS Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  /* Lenis スムーススクロールと競合するため scroll-behavior はJS側で管理 */
}

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  background-color: var(--color-base-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    font-size: var(--fs-body);
  }
}

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

a {
  color: var(--color-accent2);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* フォーカスリング (WCAG 2.1 AA) */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

img {
  border-style: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* ==========================================================================
   ▼▼▼ ルビ（<ruby>/<rt>）グローバルルール ▼▼▼
   ----------------------------------------------------------------------
   【背景: 必ず守るべき設計】
   - `<ruby>` 要素はブラウザ既定で `display: ruby` のため、
     漢字の前後にわずかな余白が生まれてレイアウトが崩れる。
   - さらに親が `display: flex/grid + gap` のとき、`<ruby>` は個別の
     flex item として扱われ `gap` 分の隙間が漢字前後に入る。
     （ボタン内テキスト、ラベル、リンクなどで頻発）
   - そのため、ルビ OFF 時は `<ruby>` を「ボックスを生成しない要素」
     にして、子テキストを親の通常テキストフローと完全に一体化させる。
   ----------------------------------------------------------------------
   【ルール】
   1) `<rt>` は通常非表示。`body.is-furigana-on` のとき表示。
   2) ルビ OFF 時の `<ruby>`/`<rb>` は `display: contents` を使用。
      → 親の box 生成上は存在しないため、flex/grid の gap 影響を受けない。
   3) ルビ ON 時は `display: revert` で本来の `display: ruby` に戻る。
   4) ふりがなサイズは 16px を上限（巨大見出しでも安定）。
   ----------------------------------------------------------------------
   【新規ページ・コンポーネント開発者向けの注意】
   - ボタンやラベルに `<ruby>` を含める場合、通常は何もしなくて良い。
   - ただし、ルビ ON 時にサイズが変わる可能性があるため、
     見た目の固定が必要なボタンは `min-height` で行高を確保すること。
   ========================================================================== */

/* ふりがな注釈テキスト */
rt {
  display: none;
  font-size: min(0.5em, 16px);  /* 上限 16px */
}
body.is-furigana-on rt {
  display: revert;
}

/* ルビ要素本体 — OFF 時は完全に DOM ボックス生成を抑止 */
ruby {
  ruby-align: center;
  display: contents;            /* ← 重要: gap や余分な余白を一切受けない */
}
ruby rb {
  display: contents;
}

/* ふりがな ON 時の表示設計（全ページ共通）
   - ruby は inline で、漢字幅は OFF 時と同じ（隣接漢字にスペースなし）
   - rt は absolute で漢字の上に重ね、box 幅に影響を与えない
   - 行間はパラグラフ側で広げてふりがなの被りを防ぐ */
body.is-furigana-on ruby {
  /* iOS Safari で display:inline + absolute rt が機能しないため inline-block を採用。
     atomic inline-level の box ができ、rt を bottom:86% で確実に上に配置できる */
  display: inline-block !important;
  position: relative;
  line-height: 1;
  vertical-align: baseline;
}
body.is-furigana-on ruby rb {
  display: inline !important;
}
body.is-furigana-on rt {
  display: block !important;
  position: absolute;
  /* ruby box の上端（= 親文字の上）に rt の下端を合わせ、わずかに離す */
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  font-size: min(0.5em, 14px);                /* 親文字の50%、上限 14px */
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;                    /* ふりがな間隔を少し詰める */
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
  margin-bottom: 0;
  color: inherit;
}
@media (max-width: 767px) {
  body.is-furigana-on rt {
    font-size: min(0.5em, 12px);              /* SP は上限 12px */
  }
}
/* 文章ブロックは ふりがな分のスペースを確保するため line-height を広げる */
body.is-furigana-on p,
body.is-furigana-on li,
body.is-furigana-on dd,
body.is-furigana-on dt {
  line-height: 2.1;
}

/* ==========================================================================
   iOS Safari / iOS Chrome (WebKit) では display:inline-block + position:absolute
   の rt が安定して位置決めできない（rt が漢字の隣に流れる等の崩れが起きる）。
   iOS 端末を @supports で検出し、ブラウザネイティブの ruby 表示に
   フォールバックさせる（漢字の上に ruby-text として表示される）。
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
  body.is-furigana-on ruby,
  body.is-furigana-on ruby rb {
    display: revert !important;
    position: static !important;
    line-height: inherit;
  }
  body.is-furigana-on rt {
    display: revert !important;
    position: static !important;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0;
    /* ネイティブ ruby-text のフォントサイズと色は仕様に近づける */
    font-size: min(0.5em, 14px);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: inherit;
  }
  /* iOS では rt が漢字の上に積まれるため、テキストブロックの line-height を
     さらに広げて重なりを防止 */
  body.is-furigana-on p,
  body.is-furigana-on li,
  body.is-furigana-on dd,
  body.is-furigana-on dt {
    line-height: 2.4;
  }
}

/* CTAボタン内は line-height が詰まっているため、rt が親文字に被る。
   親 box の上端より少し上に余裕を持って配置する */
body.is-furigana-on .l-header__ctaBtn rt,
body.is-furigana-on .l-nav-overlay__ctaBtn rt,
body.is-furigana-on .s-hero__ctaBtn rt,
body.is-furigana-on .c-btn--primary rt,
body.is-furigana-on .c-btn--blue rt,
body.is-furigana-on .c-btn--yellow rt,
body.is-furigana-on .c-btn--on-yellow rt,
body.is-furigana-on .s-committee__cta-btn rt,
body.is-furigana-on .c-button rt {
  bottom: calc(100% + 1px);
}

/* 年間プログラム図はマス目レイアウトが密に組まれているため、
   ふりがな ON 時もレイアウト維持。
   ruby は inline で <br> 改行を維持しつつ、rt を absolute で漢字の上に重ねる。
   inline-block にすると <br> の改行が効かなくなるので注意 */
body.is-furigana-on .s-about__pt ruby {
  display: inline !important;
  position: relative;
}
body.is-furigana-on .s-about__pt ruby rb {
  display: inline !important;
}
body.is-furigana-on .s-about__pt rt {
  display: block !important;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: inherit;
}
/* flex container の anonymous flex item では <br> による改行が効かないため、
   ruby を含むテキスト box は ON 時のみ block 表示に切り替えて改行を維持する。
   さらに行間を広げて、上の行の漢字に下の行の rt(ふりがな)が被らないようにする */
body.is-furigana-on .s-about__pt-stepBox,
body.is-furigana-on .s-about__pt-resultBox,
body.is-furigana-on .s-about__pt-cta-text {
  display: block !important;
  text-align: center;
  line-height: 2;
}

/* 縦書き要素（SP のフェーズ帯 / 赤帯 / 月軸）は writing-mode: vertical-rl のため
   rt の absolute 位置（bottom: 100% / left: 50%）が機能しないので、
   縦書き対象の漢字には ふりがな（rt）を出さずに OFF 時と同じ表示に戻す */
body.is-furigana-on .s-about__pt-phase-title rt,
body.is-furigana-on .s-about__pt-band rt {
  display: none !important;
}
body.is-furigana-on .s-about__pt-phase-title ruby,
body.is-furigana-on .s-about__pt-phase-title ruby rb,
body.is-furigana-on .s-about__pt-band ruby,
body.is-furigana-on .s-about__pt-band ruby rb {
  display: contents !important;
}

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

/* コンテナ */
.l-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-sp);
}

@media (min-width: 1200px) {
  .l-container {
    padding-inline: var(--container-px-desktop);
  }
}

/* ページ本文 — ヘッダー高さ分オフセット */
.l-main {
  padding-top: var(--header-height-sp);
}

@media (min-width: 1200px) {
  .l-main {
    padding-top: var(--header-height);
  }
}

/* セクション標準パディング */
.u-section {
  padding-block: var(--section-pt-sp) var(--section-pb-sp);
}

@media (min-width: 1200px) {
  .u-section {
    padding-block: var(--section-pt-desktop) var(--section-pb-desktop);
  }
}

/* ==========================================================================
   Header — v2 LP仕様
   高さ: 72px (desktop) / 56px (SP)
   背景: #FAFAF7 (常時)
   下ボーダー: 1px solid #F0EDE8
   右端: 黄CTA + 青CTA + ふりがなトグル
   ========================================================================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height-sp);
  /* グラスモーフィズム: 半透明オフホワイト + 背景ぼかし + 軽い彩度ブースト */
  background-color: rgba(250, 250, 247, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  z-index: 200;
  transition: box-shadow var(--ease-base), background-color var(--ease-base);
}

/* backdrop-filter 非対応ブラウザへのフォールバック（不透明背景） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .l-header {
    background-color: var(--color-base-light);
  }
}

.l-header.is-scrolled {
  box-shadow: var(--shadow-header);
  background-color: rgba(250, 250, 247, 0.78); /* スクロール後は少し不透明寄り */
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-left: var(--container-px-sp);
  padding-right: var(--header-height-sp); /* ハンバーガーボタン分の余白を確保 */
  gap: var(--sp-12);
  position: relative;                      /* hamburger absolute の基準 */
}

@media (min-width: 1200px) {
  .l-header {
    height: var(--header-height);
  }

  .l-header__inner {
    padding-left: var(--container-px-desktop);
    padding-right: var(--container-px-desktop);  /* デスクトップは両端に余白 */
    gap: var(--sp-16);
  }
}

/* ロゴ */
.l-header__logo {
  flex-shrink: 0;
}

.l-header__logo a {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--color-base-dark);
  text-decoration: none;
}

.l-header__logo a:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* ロゴマーク: 背景なし、mark.svg を表示（少し大きめに） */
.l-header__logoMark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* SP: 上下に余白を確保 */
  height: 44px;
  flex-shrink: 0;
  margin-right: 10px;          /* ロゴテキストとの間隔 */
}

@media (min-width: 1200px) {
  .l-header__logoMark {
    width: 56px;               /* デスクトップは元のサイズ */
    height: 56px;
  }
}

.l-header__logoMark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ロゴテキスト: SP では非表示 */
.l-header__logoText {
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  color: var(--color-base-dark);
  line-height: 1.3;
  display: none;
}

@media (min-width: 1200px) {
  .l-header__logoText {
    display: block;
  }
}

.l-header__logoYear {
  /* 「2026」を視覚的に強調する場合にカラー付与可能 */
}

/* 右端グループ: アクション */
.l-header__actions {
  display: none;
  align-items: center;
  gap: var(--sp-12);
  flex-shrink: 0;
}

@media (min-width: 1200px) {
  .l-header__actions {
    display: flex;
  }
}

/* ヘッダー内 CTA ボタン（小サイズ） */
.l-header__ctaBtn {
  display: inline-flex;
  align-items: center;
  /* gap は使わない（ruby などインライン要素間に余分な空きが生まれるため）。
     矢印は margin-left: auto で右端に押し出す */
  padding: 10px 20px;
  border-radius: 999px;
  font-size: var(--fs-header-cta);
  font-weight: var(--fw-bold);
  font-family: var(--font-family-base);
  letter-spacing: var(--ls-body);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
  min-height: 40px;
}

.l-header__ctaBtn:hover {
  transform: scale(1.04);
  text-decoration: none;
}

.l-header__ctaBtn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* 黄ボタン（体験会） */
.l-header__ctaBtn--yellow {
  background-color: var(--color-primary);
  color: #fff;
}

.l-header__ctaBtn--yellow:hover {
  box-shadow: 0 4px 16px rgba(255, 193, 0, 0.4);
}

/* 青ボタン（委員） */
.l-header__ctaBtn--blue {
  background-color: var(--color-accent2);
  color: var(--color-base-light);
}

.l-header__ctaBtn--blue:hover {
  box-shadow: 0 4px 16px rgba(0, 40, 255, 0.35);
}

.l-header__ctaArrow {
  flex-shrink: 0;
  margin-left: var(--sp-8);   /* テキストとの最小余白（gap 撤去の代わり） */
}

/* ふりがなトグル: スイッチUI（SP/PC 共通でハンバーガー左に配置） */
.l-header__furigana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;           /* SP: 右端 hamburger 直前に押し出す */
  margin-right: var(--sp-16);  /* hamburger との隙間 */
}

@media (min-width: 1200px) {
  .l-header__furigana {
    margin-left: 0;             /* デスクトップでは actions 内のリズムを維持 */
    margin-right: 0;
  }
}

.l-header__furigana:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-btn);
}

.l-header__furiganaLabel {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
  line-height: 1;
}

.l-header__furiganaSwitch {
  position: relative;
  width: 40px;
  height: 22px;
  background: #e5e5e5;
  border: 1px solid #b8b8b8;
  border-radius: 999px;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}

.l-header__furiganaSwitchKnob {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.l-header__furigana[aria-checked="true"] .l-header__furiganaSwitch {
  background: var(--color-primary);
}

.l-header__furigana[aria-checked="true"] .l-header__furiganaSwitchKnob {
  transform: translateX(20px);
}

/* ハンバーガーボタン (SP) — 赤い正方形ボタン、画面右上にピッタリ配置 */
.l-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--header-height-sp);   /* ヘッダー高さに揃えて正方形 */
  height: var(--header-height-sp);
  padding: 22px 18px;
  background: var(--color-accent1);
  border: none;
  border-radius: 0;                  /* 角を落として直線的に */
  cursor: pointer;
  z-index: 210;
  flex-shrink: 0;
  transition: background-color var(--ease-fast);
}

.l-header__hamburger:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.l-header__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;       /* 赤背景に白いバー */
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* ハンバーガー → × モーフィング
   inner height 20px / bars 3×2px / gap 7px → 上下バーは中央まで 9px 移動 */
.l-header__hamburger[aria-expanded="true"] .l-header__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.l-header__hamburger[aria-expanded="true"] .l-header__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.l-header__hamburger[aria-expanded="true"] .l-header__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (min-width: 1200px) {
  .l-header__hamburger {
    display: none;
  }
}

/* ==========================================================================
   Nav Overlay — SP メニュー
   背景: #FAFAF7 / CTA 2ボタン縦積み / ふりがなトグル
   ========================================================================== */
.l-nav-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-neutral);   /* 薄いグレーで殺風景さを回避 */
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow: hidden;
}

.l-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.l-nav-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  width: 100%;
  padding-inline: var(--container-px-sp);
}

/* SP: CTA カード 2件縦積み */
.l-nav-overlay__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  width: 100%;
  max-width: 400px;
}

/* 各カード：説明文 + ボタン + 締切 を 1 ブロックにまとめる */
.l-nav-overlay__ctaCard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-20);
  background-color: var(--color-base-light);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.04);
}

/* 説明テキスト（ボタン上に配置） */
.l-nav-overlay__ctaCaption {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  text-align: center;
}

/* 締切（ボタン下に配置） */
.l-nav-overlay__ctaDeadline {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-accent1);
  letter-spacing: var(--ls-body);
  line-height: 1.4;
  text-align: center;
}

/* CTA ボタン: デスクトップと同様 — テキスト左寄せ、矢印は右端に押し出し */
.l-nav-overlay__ctaBtn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: var(--fw-bold);
  font-family: var(--font-family-base);
  letter-spacing: var(--ls-body);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  min-height: 56px;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}

.l-nav-overlay__ctaArrow {
  flex-shrink: 0;
  margin-left: auto;          /* 矢印を右端へ押し出す（デスクトップと同じルール） */
}

.l-nav-overlay__ctaBtn:hover {
  transform: scale(1.02);
  text-decoration: none;
}

.l-nav-overlay__ctaBtn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.l-nav-overlay__ctaBtn--yellow {
  background-color: var(--color-primary);
  color: #fff;
}

.l-nav-overlay__ctaBtn--blue {
  background-color: var(--color-accent2);
  color: var(--color-base-light);
}

/* SP: ふりがなトグル */
.l-nav-overlay__furigana {
  display: flex;
  justify-content: center;
}

.l-nav-overlay__furiganaBtn {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-base-dark);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--radius-btn);
  background: transparent;
  border: 1px solid var(--color-neutral);
  cursor: pointer;
  letter-spacing: var(--ls-body);
  transition: background-color var(--ease-fast);
}

.l-nav-overlay__furiganaBtn:hover {
  background-color: var(--color-neutral);
}

.l-nav-overlay__furiganaBtn[aria-pressed="true"] {
  background-color: var(--color-base-dark);
  color: var(--color-base-light);
  border-color: var(--color-base-dark);
}

.l-nav-overlay__furiganaBtn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Shared Components
   ========================================================================== */

/* ---- CTA ボタン 3種 ---- */

/* 共通基底
   レイアウト仕様：
   - テキスト：左揃え（ボタン左端から）
   - アイコン：ボタン右端に配置（`margin-left: auto` で押し出し）
*/
.c-btn--primary,
.c-btn--blue,
.c-btn--on-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;          /* テキスト左揃え */
  /* gap は使わない（ruby などインライン要素間に余分な空きが生まれるため）。
     矢印は margin-left: auto で右端に押し出す */
  padding: 18px 24px;
  border-radius: var(--radius-btn);
  font-family: var(--font-family-base);
  font-size: var(--fs-cta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
  min-height: 56px;
}

/* アイコン（矢印）をボタン右端に押し出す */
.c-btn--primary > svg,
.c-btn--primary > i,
.c-btn--blue > svg,
.c-btn--blue > i,
.c-btn--on-yellow > svg,
.c-btn--on-yellow > i,
.c-btn--primary > .c-btn__arrow,
.c-btn--blue > .c-btn__arrow,
.c-btn--on-yellow > .c-btn__arrow {
  margin-left: auto;
  flex-shrink: 0;
}

.c-btn--primary:hover,
.c-btn--blue:hover,
.c-btn--on-yellow:hover {
  text-decoration: none;
  transform: scale(1.04);
}

.c-btn--primary:focus-visible,
.c-btn--blue:focus-visible,
.c-btn--on-yellow:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* 黄背景型（PRIMARY - 体験会 / 共通） */
.c-btn--primary {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
}

.c-btn--primary:hover {
  box-shadow: 0 8px 24px rgba(255, 193, 0, 0.4);
}

/* 青背景型（PRIMARY - 委員） */
.c-btn--blue {
  background-color: var(--color-accent2);
  color: var(--color-base-light);
  border: none;
}

.c-btn--blue:hover {
  box-shadow: 0 8px 24px rgba(0, 40, 255, 0.4);
}

/* 白背景型（黄背景セクション内専用: 03-experience） */
.c-btn--on-yellow {
  background-color: var(--color-base-light);
  color: var(--color-base-dark);
  border: 2px solid var(--color-base-dark);
}

.c-btn--on-yellow:hover {
  background-color: var(--color-base-dark);
  color: var(--color-base-light);
}

/* SP: ボタン内テキストが長い場合の overflow 対策。
   横 padding を縮小して矢印が切れないようにする */
@media (max-width: 480px) {
  .c-btn--primary,
  .c-btn--blue,
  .c-btn--on-yellow {
    padding: 16px 16px;
    font-size: 16px;
    min-height: 52px;
  }
}

/* リップルエフェクト用 */
.c-btn--primary .c-btn__ripple,
.c-btn--blue .c-btn__ripple,
.c-btn--on-yellow .c-btn__ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  pointer-events: none;
}

/* ---- セクション見出しコンポーネント
   英語キッカー（左右に装飾線）+ 日本語見出し（黄色マーカー下線）
   仕様統一のため、年間プログラム見出しと同一の見た目を提供
   モディファイア: --on-blue / --on-yellow で背景色に応じて色味を切替 ---- */
.c-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

/* 上段: 英文キッカー（左右に短い装飾線） */
.c-section-heading__en {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-accent2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 var(--sp-20);
  margin-bottom: var(--sp-12);
}
.c-section-heading__en::before,
.c-section-heading__en::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 2px;
  background-color: var(--color-accent2);
  transform: translateY(-50%);
  border-radius: 2px;
}
.c-section-heading__en::before { right: 100%; }
.c-section-heading__en::after  { left: 100%;  }

/* 下段: 日本語見出し（黄色マーカー下線つき） */
.c-section-heading__ja {
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-heading);
  line-height: 1.25;
  margin: 0;
  padding: 0 var(--sp-8);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 72%,
    var(--color-primary) 72%,
    var(--color-primary) 92%,
    transparent 92%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 複数行で表示する場合: 各行を span で包んで個別にマーカーを当てる
   親 __ja 側のマーカーは無効化（:has で自動判定） */
.c-section-heading__ja:has(.c-section-heading__ja-line) {
  background-image: none;
  padding: 0;
  display: block;
}
.c-section-heading__ja-line {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0 var(--sp-8);
  line-height: 1.5;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 72%,
    var(--color-primary) 72%,
    var(--color-primary) 92%,
    transparent 92%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.c-section-heading__ja-line + .c-section-heading__ja-line {
  margin-top: 6px;
}

/* 青背景セクション用: EN を白系・線も白系、JA を白文字 */
.c-section-heading--on-blue .c-section-heading__en {
  color: var(--color-base-light);
}
.c-section-heading--on-blue .c-section-heading__en::before,
.c-section-heading--on-blue .c-section-heading__en::after {
  background-color: var(--color-base-light);
}
.c-section-heading--on-blue .c-section-heading__ja {
  color: var(--color-base-light);
}

/* ---- カード ---- */
.c-card {
  background-color: var(--color-base-light);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius-card);
  padding: var(--sp-32);
  box-shadow: var(--shadow-card);
  transition: transform var(--ease-base), box-shadow var(--ease-base);
}

.c-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ---- テキストリンク ---- */
.c-link {
  color: var(--color-accent2);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.c-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ease-fast);
}

.c-link:hover {
  text-decoration: none;
}

.c-link:hover::after {
  transform: scaleX(1);
}

/* ---- バッジ ---- */
.c-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-btn);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
}

.c-badge--tbd {
  background-color: rgba(250, 250, 247, 0.2);
  color: var(--color-base-light);
}

/* ---- 波形ディバイダー ---- */
.c-wave-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  /* 高さはSVGのviewBoxで制御 */
}

.c-wave-divider svg {
  display: block;
  width: 100%;
}

/* ---- YouTube 埋め込み ---- */
.c-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-youtube);
  background-color: var(--color-neutral); /* 動画読込待ちプレースホルダー */
}

/* 動画読込待ち: 中央に薄い再生ボタンを表示 */
.c-youtube::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background-color: rgba(26, 26, 26, 0.15);
  border-radius: 50%;
  z-index: 0;
}

.c-youtube::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% + 4px);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent rgba(26, 26, 26, 0.25);
  z-index: 0;
}

.c-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  z-index: 1;
}

/* ---- セクションラベル ---- */
.c-section-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.4);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--sp-16);
}

/* ==========================================================================
   Footer — v2: オフホワイト背景
   ========================================================================== */

/* ---- 実行委員会セクション ---- */
.l-footer__committee {
  background-color: var(--color-base-light);
  padding-block: var(--section-pt-sp) var(--section-pb-sp);
}

@media (min-width: 1200px) {
  .l-footer__committee {
    padding-block: var(--section-pt-desktop) var(--section-pb-desktop);
  }
}

.l-footer__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-px-sp);
}

@media (min-width: 1200px) {
  .l-footer__inner {
    padding-inline: var(--container-px-desktop);
  }
}

/* セクションラベル */
/* 実行委員会 見出しブロック（c-section-heading に下マージンを与える） */
.l-footer__committeeHead {
  margin-bottom: var(--sp-48);
}

/* メンバーグリッド: SP 2列 / Desktop 4列 */
.l-footer__memberGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-32) var(--sp-24);
  list-style: none;
  margin-bottom: var(--sp-40);
}

@media (min-width: 1200px) {
  .l-footer__memberGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-40) var(--sp-24);
  }
}

/* メンバーカード */
.l-footer__memberItem {
  display: flex;
  flex-direction: column;
  align-items: center;            /* グリッド内で水平中央寄せ */
  text-align: center;
  gap: var(--sp-12);
}

/* アバター: 72×72px 円形、写真未提供時は #F0EDE8 プレースホルダー */
.l-footer__memberAvatar {
  width: 94px;          /* 旧 72px から +30% */
  height: 94px;
  border-radius: 50%;
  background-color: var(--color-neutral);
  overflow: hidden;
  flex-shrink: 0;
}

.l-footer__memberAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-footer__memberInfo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.l-footer__memberName {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: var(--lh-h4);
  margin: 0;
}

.l-footer__memberRole {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.6);
  line-height: var(--lh-caption);
  margin: 0;
}

/* ボランティア募集注記（赤字） */
/* ==========================================================================
   ボランティア募集カードピル（実行委員会セクション末尾）
   ========================================================================== */
/* ボランティア募集 CTA カード（赤ベタ + 白文字） */
.l-footer__volunteerCard {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin: var(--sp-32) auto 0;
  padding: 18px 22px;
  background-color: var(--color-accent1);
  color: #fff;
  border: none;
  border-radius: var(--radius-card);
  text-decoration: none;
  width: 100%;
  max-width: 480px;
  align-self: center;
  box-shadow: 0 4px 16px rgba(229, 0, 18, 0.18);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}
.l-footer__volunteerCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(229, 0, 18, 0.28);
  text-decoration: none;
  color: #fff;
}

.l-footer__volunteerInner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.l-footer__volunteerLabel {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-black);
  color: #fff;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.85;
}

.l-footer__volunteerText {
  display: block;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: var(--ls-body);
  line-height: 1.4;
}

/* キャッチ「＼ご興味のある方はお問い合わせください／」: ボタン直前で呼びかける */
.l-footer__volunteerCallout {
  margin: var(--sp-32) 0 var(--sp-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
  line-height: 1.4;
  text-align: center;
}

/* キャッチコピーが直前にある場合は volunteer card 上の margin-top を削る */
.l-footer__volunteerCallout + .l-footer__volunteerCard {
  margin-top: 0;
}

.l-footer__volunteerArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background-color var(--ease-fast);
}
.l-footer__volunteerCard:hover .l-footer__volunteerArrow {
  background-color: rgba(255, 255, 255, 0.28);
}

/* committee 内 inner を縦 flex で揃え、ピルが中央寄せできるよう */
.l-footer__committee .l-footer__inner {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   フッター下部
   - 上段: ブランド + コネクト（2カラム）
   - 中段: ナビ（横並び中央）
   - 下段: コピーライト（中央）
   ========================================================================== */
.l-footer__bottom {
  background-color: var(--color-base-light);
  border-top: 1px solid var(--color-neutral);
  padding-block: var(--sp-48);
}

.l-footer__bottom .l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

/* 上段: ロゴ（左）+ 情報ブロック（右） */
.l-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

@media (min-width: 768px) {
  .l-footer__top {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-48);
  }
}

/* ロゴ */
.l-footer__logo {
  display: inline-block;
  text-decoration: none;
  transition: opacity var(--ease-fast);
  align-self: flex-start;
  flex-shrink: 0;
}
.l-footer__logo:hover {
  text-decoration: none;
  opacity: 0.8;
}
.l-footer__logoImg {
  display: block;
  width: clamp(120px, 14vw, 180px);
  height: auto;
}

/* 右側: 主催・ナビ・SNS を縦に積む */
.l-footer__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

/* 主催（タグライン） */
.l-footer__tagline {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
}

/* ナビ */
.l-footer__navWrap {
  display: block;
  padding-block: var(--sp-12);
  border-top: 1px solid var(--color-neutral);
  border-bottom: 1px solid var(--color-neutral);
}

.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--sp-8) 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.l-footer__nav li {
  display: flex;
  align-items: center;
}

.l-footer__nav li:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(26, 26, 26, 0.2);
  margin-inline: var(--sp-16);
}

.l-footer__nav a {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  transition: color var(--ease-fast);
}
.l-footer__nav a:hover {
  color: var(--color-accent2);
  text-decoration: none;
}
.l-footer__nav a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* SNS + お問い合わせ（横並び） */
.l-footer__connect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}

.l-footer__sns {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
}

.l-footer__connectLabel {
  margin-right: var(--sp-4);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.l-footer__snsLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-base-dark);
  font-size: 28px;
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--ease-fast), transform var(--ease-fast);
  line-height: 1;
}
.l-footer__snsLink:hover {
  color: var(--color-accent2);
  transform: translateY(-2px);
  text-decoration: none;
}
.l-footer__snsLink:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* お問い合わせリンク（テキスト + 外部アイコン）
   gap を使うと <ruby> 要素ごとに余白が入るため、テキストを span で包んで
   margin-left でアイコン位置を調整 */
.l-footer__contactLink {
  display: inline-flex;
  align-items: center;
  color: var(--color-base-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--ease-fast);
}
.l-footer__contactLink:hover {
  color: var(--color-accent2);
  text-decoration: none;
}
.l-footer__contactText {
  display: inline-block;
}
.l-footer__contactLink i {
  font-size: 0.85em;
  margin-left: 6px;
}

/* コピーライト（情報ブロック内・右寄せ） */
.l-footer__copyright {
  margin: 0;
  text-align: right;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: var(--ls-body);
  line-height: 1.5;
}

/* 補助事業の注記（ロゴ枠 + ごく小さい文字）*/
.l-footer__subsidy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--sp-16) 0 var(--sp-8);
}
.l-footer__subsidyLogo {
  flex-shrink: 0;
  display: inline-flex;
}
.l-footer__subsidyLogo img {
  height: 50px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;   /* ロゴの白背景を抜く */
}
.l-footer__subsidyText {
  margin: 0;
  font-size: 10px;
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.5);
  line-height: 1.6;
}
@media (max-width: 767px) {
  .l-footer__subsidy {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   SP: フッター全体を中央寄せ
   ========================================================================== */
@media (max-width: 767px) {
  .l-footer__bottom .l-footer__inner {
    align-items: center;
    text-align: center;
  }
  .l-footer__top {
    align-items: center;
  }
  .l-footer__logo {
    align-self: center;
  }
  .l-footer__info {
    align-items: center;
    width: 100%;
  }
  .l-footer__tagline {
    text-align: center;
  }
  .l-footer__navWrap {
    width: 100%;
  }
  .l-footer__nav {
    justify-content: center;
  }
  .l-footer__connect {
    justify-content: center;
  }
  .l-footer__copyright {
    text-align: center;
  }
}

/* ==========================================================================
   === 01-hero ===
   Phase 3-B: ヒーローセクション
   ========================================================================== */

/* ---- セクション基本 ---- */
/* l-main が padding-top: 56px(SP)/72px(desktop) でヘッダーオフセット済み。
   design-spec §3「上パディング: 120px（ヘッダー高さ 72px 分 offset）」の解釈:
   コンテンツの見た目上の上余白 = 120px - 72px = 48px (desktop)
   SP: 80px - 56px = 24px */
.s-hero {
  background-color: var(--color-base-light);
  padding-block: var(--sp-24) var(--section-pb-sp);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .s-hero {
    padding-block: var(--sp-48) var(--section-pb-desktop);
    overflow: visible;          /* sticky を機能させるため */
  }
}

/* ---- コンテナ: 2カラムグリッド ---- */
.s-hero__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-48);
  align-items: start;
}

@media (min-width: 768px) {
  .s-hero__container {
    gap: var(--sp-40);
  }
}

@media (min-width: 1200px) {
  .s-hero__container {
    grid-template-columns: 58fr 42fr;
    gap: var(--sp-64);
    align-items: start;          /* 左右コンテンツを上揃え */
  }
  /* 右カラムは hero エリア終端まで sticky で追従 */
  .s-hero__col--video {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    align-self: start;
  }
}

/* ---- 左カラム ---- */
.s-hero__col--text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

/* ---- エイブロウテキスト（キャッチコピー小：subcopy と同サイズに統一）---- */
.s-hero__eyebrow {
  font-size: clamp(18px, 3vw, 22px);   /* subcopy と同サイズ */
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  margin: 0;
  margin-bottom: calc(var(--sp-24) * -1 + var(--sp-8));   /* タイトルとの間を24px→8pxに詰める */
}

/* ---- タイトルアートワークラッパー ---- */
.s-hero__title-wrap {
  position: relative;
  /* 紙吹雪がはみ出せるようにoverflow: visibleを維持 */
  /* タイトル「開催決定!!」のテキスト幅にフィットさせる（直下の voteDay 帯がこの幅に揃う） */
  display: inline-block;
  width: max-content;
  max-width: 100%;
}

/* ---- タイトル本体 ---- */
.s-hero__title {
  font-family: var(--font-family-base);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ---- タイトル1行目: 「2026年秋」のレイアウト ---- */
.s-hero__title-line1 {
  display: flex;
  align-items: flex-end;
  gap: 0.08em;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* 「2026」: 巨大イエロー */
.s-hero__year {
  font-size: clamp(80px, 18vw, 200px);
  color: var(--color-primary);
  display: inline-block;
  line-height: 0.9;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 「年秋」: 縦積み、ダークグレー */
.s-hero__year-suffix {
  font-size: clamp(32px, 5.5vw, 64px);
  color: var(--color-base-dark);
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  align-self: flex-end;
  padding-bottom: 0.1em;
}

/* ---- タイトル2行目: 「開催決定！」 ---- */
.s-hero__title-line2 {
  display: flex;
  align-items: flex-end;
  gap: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* 「開催」: ダークグレー大サイズ（横書き固定） */
.s-hero__kaishi {
  font-size: clamp(56px, 11vw, 120px);
  color: var(--color-base-dark);
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 「決定」: ブルー強調（横書き固定） */
.s-hero__kettei {
  font-size: clamp(56px, 11vw, 120px);
  color: var(--color-accent2);
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 「！」: SVG（assets/bikkuri.svg）に置き換え。直立配置・傾きなし */
.s-hero__excl {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  margin-left: 0.1em;
  margin-bottom: -0.05em;
  flex-shrink: 0;
  /* テキスト「決定」高さの 80% 程度 */
  height: clamp(52px, 9.5vw, 106px);
  transform: none;
  transform-origin: bottom center;
}

.s-hero__exclImg {
  display: block;
  height: 100%;
  width: auto;
}

/* ---- 紙吹雪コンテナ ---- */
.s-hero__confetti {
  position: absolute;
  inset: -60px -40px;
  pointer-events: none;
  z-index: 0;
}

/* 紙吹雪パーティクル（JSで注入） */
.s-hero__confetti-item {
  position: absolute;
  display: block;
  line-height: 0;
}

.s-hero__confetti-item img,
.s-hero__confetti-item svg {
  display: block;
}

/* ---- 投票日バッジ（開催決定の直下、薄いグレー帯） ---- */
/* タイトル幅にフィット（親 .s-hero__title-wrap が max-content） */
.s-hero__voteDay {
  display: block;
  width: 100%;
  margin: var(--sp-12) 0 0;
  padding: 10px 18px;
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--color-base-dark);
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.4;
  border-radius: 6px;
  text-align: center;
  box-sizing: border-box;
}

/* ---- サブコピー ---- */
.s-hero__subcopy {
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  margin: 0;
}

/* ---- リード文 ---- */
.s-hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.s-hero__lead p {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  margin: 0;
  max-width: 560px;
}

@media (min-width: 1200px) {
  .s-hero__lead p {
    font-size: var(--fs-body-small);
  }
}

/* ---- アワード受賞リスト（リード文の※注記）---- */
.s-hero__leadAsterisk {
  font-size: 0.85em;
  vertical-align: super;
  margin-left: 2px;
}
.s-hero__awards {
  margin-top: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  background-color: rgba(0, 40, 255, 0.04);
  border-radius: 6px;
  max-width: 560px;
}
.s-hero__awards-intro {
  margin: 0 0 6px;
  font-size: var(--fs-small);
  color: var(--color-base-dark);
  line-height: 1.5;
}
.s-hero__awards-list {
  margin: 0;
  padding: 0 0 0 1.2em;
  list-style: disc;
  font-size: var(--fs-small);
  color: var(--color-base-dark);
  line-height: 1.7;
}
.s-hero__awards-list li {
  margin: 0;
}
.s-hero__awards-list a {
  color: var(--color-base-dark);
  text-decoration: underline;
  text-decoration-color: rgba(0, 40, 255, 0.3);
  text-underline-offset: 3px;
  transition: color var(--ease-fast), text-decoration-color var(--ease-fast);
}
.s-hero__awards-list a:hover {
  color: var(--color-accent2);
  text-decoration-color: var(--color-accent2);
}

/* ---- 2 CTA ボタン（右カラム・YouTube下に配置）---- */
.s-hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
}

.s-hero__ctaBtn {
  /* c-btn--primary / c-btn--blue の基底スタイルに上乗せ */
  font-size: 15px;
  padding: 14px 24px;
  white-space: normal;
  text-align: center;
  width: 100%;        /* 右カラム内で幅100% */
  justify-content: center;
}

@media (min-width: 768px) {
  .s-hero__ctaBtn {
    font-size: var(--fs-cta);
    padding: 18px 28px;
    white-space: nowrap;
  }
}

/* ---- 過去開催リンク（白背景・グレー枠ボタン） ---- */
.s-hero__past-link {
  margin: 0;
}
@media (max-width: 767px) {
  .s-hero__past-link {
    text-align: center;
  }
}

.s-hero__pastBtn {
  display: inline-flex;
  align-items: center;
  /* gap は使わない（ruby を含む文字列の前後にスペースが入るため）。
     アイコンは下記 .s-hero__pastBtnIcon で margin により位置調整 */
  padding: 10px 18px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  background-color: var(--color-base-light);
  border: 1px solid currentColor;
  border-radius: var(--radius-btn);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  transition: background-color var(--ease-fast);
}

.s-hero__pastBtn:hover {
  background-color: #fff;
  text-decoration: none;
}

.s-hero__pastBtn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.s-hero__pastBtnIcon {
  font-size: 11px;
  color: var(--color-base-dark);
  flex-shrink: 0;
  margin-left: var(--sp-12);   /* テキストとの余白（gap 撤去の代わり） */
}

/* ---- 右カラム（動画 + CTA） ---- */
.s-hero__col--video {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  align-items: center;
}

/* ---- 動画ラッパー（円状回転テキスト + 正円サムネイル） ---- */
.s-hero__videoWrap {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(280px, 42vw, 440px);     /* サムネ周囲に+40px程度の余白 */
  aspect-ratio: 1 / 1;
}

/* 円状回転テキスト */
.s-hero__videoCircleText {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: heroCircleSpin 24s linear infinite;
  transform-origin: center center;
}

@keyframes heroCircleSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .s-hero__videoCircleText {
    animation: none;
  }
}

.s-hero__videoCircleTxt {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 22px;                       /* SVG viewBox 400 内基準（拡大）*/
  letter-spacing: 0.10em;
  fill: var(--color-base-dark);
  text-transform: uppercase;
}

/* Font Awesome 7 Sharp Solid（Pro Kit）アイコン */
.s-hero__videoCircleIcon {
  font-family: 'Font Awesome 7 Sharp', 'Font Awesome 6 Sharp', 'Font Awesome 7 Free', sans-serif;
  font-weight: 900;
  font-size: 22px;
  fill: var(--color-accent1);
  letter-spacing: 0;
}

/* 円状テキスト全体のオーバーフロー許可（星アイコンが端で切れない） */
.s-hero__videoCircleText {
  overflow: visible;
}

/* ---- 動画サムネイル（正円ボタン） ---- */
.s-hero__videoTrigger {
  position: relative;
  width: clamp(220px, 36vw, 360px);
  height: clamp(220px, 36vw, 360px);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26, 26, 26, 0.18);
  transition: transform var(--ease-base), box-shadow var(--ease-base);
  display: grid;
  place-items: center;          /* grid centerで子要素を完全中央配置 */
  flex-shrink: 0;
}

.s-hero__videoTrigger:hover,
.s-hero__videoTrigger:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.28);
}

/* スライドショーラッパー（複数のサムネイルを重ねるコンテナ） */
.s-hero__videoSlideshow {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  transition: transform var(--ease-base);
}

/* 各スライド（重ねて crossfade） */
.s-hero__videoSlide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.0s ease-in-out;
  pointer-events: none;
}

.s-hero__videoSlide.is-active {
  opacity: 1;
}

.s-hero__videoTrigger:hover .s-hero__videoSlideshow {
  transform: scale(1.06);
}

/* prefers-reduced-motion: スライドショー停止（最初の画像のみ表示） */
@media (prefers-reduced-motion: reduce) {
  .s-hero__videoSlide {
    transition: none;
  }
}

.s-hero__videoPlayIcon {
  /* grid place-items: center により、親 (.s-hero__videoTrigger) 内で完全中央配置 */
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  display: block;
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
  transition: transform var(--ease-base);
}

.s-hero__videoPlayIcon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.s-hero__videoTrigger:hover .s-hero__videoPlayIcon {
  transform: scale(1.08);
}

.s-hero__videoLabel {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
  white-space: nowrap;
}

/* ==========================================================================
   c-videoModal: 動画モーダル
   ========================================================================== */
.c-videoModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.c-videoModal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-videoModal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.c-videoModal__dialog {
  position: relative;
  width: min(100%, 1100px);
  max-width: 100%;
  z-index: 1;
}

.c-videoModal__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-base-light);
  background: transparent;
  border: 2px solid var(--color-base-light);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--ease-fast), color var(--ease-fast);
}

.c-videoModal__close:hover,
.c-videoModal__close:focus-visible {
  background-color: var(--color-base-light);
  color: var(--color-base-dark);
}

.c-videoModal__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-base-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.c-videoModal__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* モーダル開いている時、body スクロール抑制（JSで管理） */

/* ==========================================================================
   === 01b-gallery ===
   マーキーギャラリー（無限横スクロール、右→左）— セクション区切り役
   過去実施の写真を高さ統一・幅可変で表示
   ========================================================================== */

.s-gallery {
  position: relative;
  background-color: var(--color-base-light);
  padding-top: var(--sp-48);
  padding-bottom: var(--sp-48);
  overflow: hidden;
}

@media (min-width: 768px) {
  .s-gallery {
    padding-top: var(--sp-64);
    padding-bottom: var(--sp-64);
  }
}

/* ---- 上部ロゴマーク（スクロール組み上げ演出） ---- */
.s-gallery__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto var(--sp-96);     /* マーキーとの下余白 */
  padding-top: var(--sp-64);        /* 上余白 */
  pointer-events: none;
}
.s-gallery__logo svg {
  width: clamp(160px, 22vw, 240px);
  height: auto;
  overflow: visible;                /* 散らばった path が viewBox 外でも表示 */
}
.s-gallery__logo svg path {
  transform-origin: center center;
}

@media (min-width: 768px) {
  .s-gallery__logo {
    margin-bottom: 140px;
    padding-top: 96px;
  }
  .s-gallery__logo svg {
    width: clamp(200px, 20vw, 300px);
  }
}

/* ---- マーキー本体 ---- */
.s-gallery__marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.s-gallery__track {
  display: flex;
  gap: var(--sp-20);
  width: max-content;
  /* duration は (1セット枚数 / 7) に比例。22枚なので 50 × 22/7 ≈ 157s */
  animation: galleryMarquee 157s linear infinite;
}

@media (min-width: 768px) {
  .s-gallery__track {
    gap: var(--sp-24);
    /* 60 × 22/7 ≈ 189s */
    animation-duration: 189s;
  }
}

/* マーキーアニメ：1セットのちょうど50%分を左へ移動して無限ループ */
@keyframes galleryMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .s-gallery__track {
    animation: none;
  }
}

/* ---- 各写真アイテム（高さ統一・幅可変） ---- */
.s-gallery__item {
  position: relative;
  flex-shrink: 0;
  height: 240px;            /* SP: 統一高さ 240px */
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.08);
  background-color: var(--color-neutral);
  margin: 0;
}

@media (min-width: 768px) {
  .s-gallery__item {
    height: 320px;          /* タブレット〜PC: 統一高さ 320px */
  }
}

@media (min-width: 1200px) {
  .s-gallery__item {
    height: 360px;          /* PC大: 360px */
  }
}

/* アスペクト比バリエーション（幅 = 高さ × 比率） */
.s-gallery__item--landscape {  /* 16:9 */
  aspect-ratio: 16 / 9;
}

.s-gallery__item--wide {       /* 3:2 */
  aspect-ratio: 3 / 2;
}

.s-gallery__item--square {     /* 1:1 */
  aspect-ratio: 1 / 1;
}

.s-gallery__item--portrait {   /* 3:4 */
  aspect-ratio: 3 / 4;
}

.s-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   Section Skeleton Styles (Phase 3-A)
   各セクションは Phase 3-B で実装。
   最低限のmin-heightを設定して構造を確保。
   ========================================================================== */
/* .s-hero は 01-hero ブロックで実装済み */

.s-about {
  background-color: var(--color-base-light);
  /* min-height 削除: Phase 3-B で実装完了 */
}

/* ==========================================================================
   === 02-about ===
   Phase 3-B: こども選挙とはセクション
   ========================================================================== */

/* ---- コンテナ ---- */
.s-about__container {
  position: relative; /* 装飾パーツの絶対配置基点 */
}

/* ---- 装飾パーツ（ロゴパーツ絶対配置） ---- */
.s-about__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.s-about__deco--tl {
  top: -24px;
  left: -16px;
  transform: rotate(-20deg);
}

.s-about__deco--br {
  bottom: 80px;
  right: -8px;
  transform: rotate(25deg);
}

/* ---- 上部: 見出しブロック ---- */
.s-about__heading-block {
  text-align: center;
  margin-bottom: var(--sp-96);    /* 旧 48 → 96 で下余白を広めに */
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .s-about__heading-block {
    margin-bottom: 120px;
  }
}

/* タイプライター演出: 1 文字ずつ表示
   .tw-char は JS で text node を split して付与される */
.js-typewriter-heading .tw-char {
  display: inline-block;
  opacity: 0;
}

/* エイブロウ: 「こども選挙とは」 */
.s-about__eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  margin: 0 0 var(--sp-16) 0;
}

/* メイン見出し: h2
   仕様: 3行表示 / ブロック中央配置 / 各行は左揃え */
.s-about__heading {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  line-height: 1.7;          /* 行間ゆったり */
  letter-spacing: var(--ls-heading);
  margin: 0;
  display: inline-block;     /* 中央寄せの親 (.s-about__heading-block text-align: center) で水平中央配置 */
  text-align: left;          /* 各行は左揃え */
}

/* 各行を block 化して3行表示 */
.s-about__heading-line {
  display: block;
}

/* カラーアクセント: 動詞3語 */
.s-about__accent--yellow {
  color: var(--color-primary);
}

.s-about__accent--red {
  color: var(--color-accent1);
}

.s-about__accent--blue {
  color: var(--color-accent2);
}

/* ---- 中部: 3カードグリッド ---- */
.s-about__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
  /* アイコンがカード上部から半分はみ出す分（最大 96/2 = 48px）の余白を確保 */
  margin-top: clamp(48px, 6vw, 64px);
  margin-bottom: var(--sp-64);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .s-about__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-24);
  }
}

/* ---- カード個別（c-card を継承 + about 固有） ---- */
.s-about__card {
  /* c-card の基底スタイルを継承 */
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  position: relative;
  overflow: visible;            /* アイコンを上にはみ出させるため */
  transform-style: preserve-3d;
  will-change: transform;
}

/* カード上部: アクセントボーダー（絶対配置でコンテンツに影響しない） */
.s-about__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  z-index: 1;
}

.s-about__card--yellow::before {
  background-color: var(--color-primary);
}

.s-about__card--red::before {
  background-color: var(--color-accent1);
}

.s-about__card--blue::before {
  background-color: var(--color-accent2);
}

/* カードヘッダー: アイコン + タイトル */
.s-about__card-header {
  display: flex;
  flex-direction: column;            /* 縦積み: アイコンを大きく見せる */
  align-items: center;               /* カード内で水平中央配置 */
  text-align: center;
  gap: var(--sp-16);
  /* アイコンを上に大きくはみ出させるためのネガティブマージン
     アイコン高さの 70% を引き上げる（旧: 50%） */
  margin-top: calc(clamp(72px, 9vw, 96px) * -0.7);
  margin-bottom: var(--sp-8);
}

/* 大型アイコン（わくわく感）— カラー塗りブロック + 白グリフ */
.s-about__card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  border-radius: 22px;
  font-size: clamp(36px, 4.5vw, 48px);
  color: #fff;
  position: relative;
  z-index: 2;                     /* カード上部の colored border を覆う */
  transform: rotate(-5deg);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  will-change: transform;
}

.s-about__card-icon i {
  /* font-awesome アイコンのサイズ・色は親の color を継承 */
  line-height: 1;
}

/* 黄色のアクセント: 黄色ブロック + 白グリフ */
.s-about__card-icon--yellow {
  background-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(255, 193, 0, 0.32);
}

/* 赤のアクセント: 赤ブロック + 白グリフ */
.s-about__card-icon--red {
  background-color: var(--color-accent1);
  box-shadow: 0 10px 24px rgba(229, 0, 18, 0.28);
}

/* 青のアクセント: 青ブロック + 白グリフ */
.s-about__card-icon--blue {
  background-color: var(--color-accent2);
  box-shadow: 0 10px 24px rgba(0, 40, 255, 0.28);
}

/* hover でバウンス */
.s-about__card:hover .s-about__card-icon {
  transform: rotate(4deg) scale(1.08) translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

/* 動きを抑制したいユーザーには静止 */
@media (prefers-reduced-motion: reduce) {
  .s-about__card-icon {
    transition: none;
    transform: none;
  }
  .s-about__card:hover .s-about__card-icon {
    transform: none;
  }
}

.s-about__card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin: 0;
}

@media (min-width: 768px) {
  .s-about__card-title {
    font-size: 24px;
  }
}

/* タイトル内の動詞漢字（聞・選・届）を 30% 大きく強調 */
.s-about__card-title-emph {
  font-size: 1.3em;
  display: inline-block;
  vertical-align: -0.06em;     /* 大きくした分のベースライン微調整 */
  line-height: 1;
}

/* ---- ステップリスト ---- */
.s-about__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.s-about__step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
}

.s-about__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}

/* ステップ番号: カード色を背景に、文字は白で統一 */
.s-about__card--yellow .s-about__step-num {
  background-color: var(--color-primary);
  color: #fff;
}

.s-about__card--red .s-about__step-num {
  background-color: var(--color-accent1);
  color: #fff;
}

.s-about__card--blue .s-about__step-num {
  background-color: var(--color-accent2);
  color: #fff;
}

.s-about__step-text {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-base-dark);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-body);
}

/* ---- カード本文 ---- */
.s-about__card-body {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.75);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  margin: 0;
  margin-top: auto; /* カードの下部に押し出し */
  padding-top: var(--sp-12);
  border-top: 1px solid var(--color-neutral);
}

/* ---- 3Dホバーエフェクト（CSS基盤、GSAP が上書き） ---- */
.s-about__card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ---- タイムラインブロック ---- */
.s-about__timeline-block {
  margin-top: 160px;
  margin-bottom: var(--sp-64);
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .s-about__timeline-block {
    margin-top: var(--sp-80);
  }
}

/* エイブロウ */
/* ---- 年間プログラム セクション見出し ---- */
.s-about__timeline-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto var(--sp-24);
}

/* 上部: 英文キッカー（左右に装飾線つき） */
.s-about__timeline-eyebrow-en {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-accent2);    /* ブランドブルー */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 var(--sp-20);
  margin-bottom: var(--sp-12);
}

.s-about__timeline-eyebrow-en::before,
.s-about__timeline-eyebrow-en::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 2px;
  background-color: var(--color-accent2);
  transform: translateY(-50%);
  border-radius: 2px;
}
.s-about__timeline-eyebrow-en::before { right: 100%; }
.s-about__timeline-eyebrow-en::after  { left: 100%;  }

/* 下部: 日本語見出し（黄色マーカー下線つき）
   linear-gradient で文字背面に黄色ハイライトを描画（z-index 不要・確実に表示） */
.s-about__timeline-eyebrow-ja {
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-heading);
  line-height: 1.25;
  margin: 0;
  padding: 0 var(--sp-8);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 72%,
    var(--color-primary) 72%,
    var(--color-primary) 92%,
    transparent 92%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* タイムライン本体: 水平（desktop）/ 垂直（SP） */
.s-about__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  padding: var(--sp-16) 0;
}

@media (min-width: 768px) {
  .s-about__timeline {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }
}

/* タイムライン接続線トラック: desktop のみ表示
   3等分グリッドで各ステップは 33.33% 幅。
   ノードはステップ内中央: 全体の 16.66%, 50%, 83.33% の位置
   接続線: ステップ1ノード右端〜ステップ3ノード左端 */
.s-about__timeline-track {
  display: none;
  position: absolute;
  top: 24px; /* ノード中心 (height:48px / 2 = 24px) */
  left: calc(16.66% + 24px);
  right: calc(16.66% + 24px);
  height: 2px;
  background-color: var(--color-neutral);
  z-index: 0;
  border-radius: 1px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .s-about__timeline-track {
    display: block;
  }
}

/* アニメーション: JS が width を 0 → 100% にする */
.s-about__timeline-track-inner {
  height: 100%;
  width: 0;
  background-color: var(--color-neutral);
  transition: none;
}

/* タイムラインステップ */
.s-about__timeline-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-16);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .s-about__timeline-step {
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: var(--sp-12);
    text-align: center;
  }
}

/* タイムラインノード（番号丸バッジ） */
.s-about__timeline-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

.s-about__timeline-node--yellow {
  background-color: var(--color-primary);
}

.s-about__timeline-node--blue {
  background-color: var(--color-accent2);
}

.s-about__timeline-node-num {
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  line-height: 1;
}

.s-about__timeline-node--yellow .s-about__timeline-node-num {
  color: var(--color-base-dark);
}

.s-about__timeline-node--blue .s-about__timeline-node-num {
  color: var(--color-base-light);
}

/* タイムラインコンテンツ */
.s-about__timeline-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .s-about__timeline-content {
    align-items: center;
  }
}

/* 期間テキスト */
.s-about__timeline-period {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: var(--ls-body);
  margin: 0;
  line-height: 1.4;
}

/* プログラム名 */
.s-about__timeline-name {
  font-size: var(--fs-body-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-body);
  margin: 0;
  line-height: 1.4;
}

/* バッジ */
.s-about__timeline-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sp-8);
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.4;
  white-space: nowrap;
}

.s-about__timeline-badge--yellow {
  background-color: var(--color-primary);
  color: var(--color-base-dark);
}

.s-about__timeline-badge--blue {
  background-color: var(--color-accent2);
  color: var(--color-base-light);
}

/* 年間プログラム説明文 */
.s-about__timeline-desc {
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body);
  margin: var(--sp-32) auto 0;
  max-width: 800px;
  text-align: center;
}

/* ==========================================================================
   年間プログラム図（HTML/CSS 実装）
   - PC: 横型タイムライン（月軸 + シェブロン矢印 + ピル + 詳細）
   - SP: 縦積みカード形式（フェーズ毎にまとまる）
   ========================================================================== */
.s-about__program-timeline {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  white-space: nowrap;             /* 全要素で自動折返しを防止（<br> による明示的改行のみ有効）*/
}

.s-about__pt {
  display: grid;
  gap: var(--sp-12);
}

/* ==========================================================================
   タブレット〜小PC（768px〜1199px）では、1120px 基準のPCレイアウトを
   縦横比固定で縮小表示する（要素の重なり防止 / 整ったレイアウトを維持）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .s-about__program-timeline {
    container-type: inline-size;
    aspect-ratio: 1120 / 415;
    overflow: hidden;
    position: relative;
  }
  .s-about__pt {
    position: absolute;
    top: 0;
    left: 0;
    width: 1120px;
    transform-origin: top left;
    transform: scale(calc(100cqw / 1120px));
  }
}

/* ---- 全体を跨ぐタイトル帯（黄色枠） ---- */
.s-about__pt-title {
  padding: 10px 18px;
  background-color: transparent;
  border: 3px solid var(--color-primary);
  color: var(--color-base-dark);
  font-size: 18px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-align: center;
  border-radius: var(--radius-card);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .s-about__pt-title {
    font-size: 22px;
    padding: 14px 20px;
  }
}

/* ---- 月軸（PC のみ）---- */
.s-about__pt-months {
  display: none;
}

@media (min-width: 768px) {
  .s-about__pt-months {
    display: grid;
    /* 末尾に余白セルを追加して 11月 が右端ぎりぎりに来ないように。
       全月は均等間隔のまま、全体を少し左に詰める。*/
    grid-template-columns: repeat(6, 1fr) 1.2fr;
    margin-bottom: var(--sp-4);
  }
  .s-about__pt-months span {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--color-base-dark);
    line-height: 1;
  }
}

/* ---- フェーズ矢印 ---- */
.s-about__pt-phases {
  display: grid;
  gap: var(--sp-12);
}

.s-about__pt-phase {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: 14px 18px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-card);
}

/* Phase2/3 はこども選挙委員フェーズなので青背景 */
.s-about__pt-phase--p2,
.s-about__pt-phase--p3 {
  background-color: var(--color-accent2);
  color: #fff;
}

.s-about__pt-phase-num {
  font-size: 28px;
  font-weight: var(--fw-black);
  line-height: 1;
  flex-shrink: 0;
}

.s-about__pt-phase-title {
  font-size: 18px;
  font-weight: var(--fw-black);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.s-about__pt-phase-title small {
  font-size: 0.7em;
  font-weight: var(--fw-bold);
}

.s-about__pt-phase-month {
  margin-left: auto;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .s-about__pt-phases {
    grid-template-columns: 1.5fr 2.7fr 3.8fr;  /* Phase2 を拡張（被り回避）、Phase3 をややコンパクトに */
    gap: 6px;
  }
  .s-about__pt-phase {
    /* シェブロン矢印形（右端が三角）*/
    position: relative;
    padding: 16px 36px 16px 22px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  }
  .s-about__pt-phase--p2,
  .s-about__pt-phase--p3 {
    /* 左端も矢印形に切り欠き */
    padding-left: 38px;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  }
  .s-about__pt-phase-month {
    display: none;       /* PC では月軸が別行にあるため非表示 */
  }
  .s-about__pt-phase-title {
    font-size: 17px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .s-about__pt-phase-title small {
    font-size: 0.75em;
  }
  .s-about__pt-phase-num {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .s-about__pt-phase-title {
    font-size: 19px;
  }
  .s-about__pt-phase-num {
    font-size: 34px;
  }
}

/* ---- 参加形態ピル ---- */
.s-about__pt-bands {
  display: grid;
  gap: var(--sp-8);
}

.s-about__pt-band {
  padding: 3px 18px;
  background-color: var(--color-accent1);
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .s-about__pt-bands {
    grid-template-columns: 1.5fr 6.5fr;
    gap: var(--sp-12);
  }
}

/* ---- フェーズ詳細 ---- */
.s-about__pt-bodies {
  display: grid;
  gap: var(--sp-32);
  /* margin-top は親 .s-about__pt の gap で統一するため削除 */
}

@media (min-width: 768px) {
  .s-about__pt-bodies {
    grid-template-columns: 1.5fr 2.7fr 3.8fr;  /* Phase2 を拡張、Phase3 はステップ縮小分やや控え */
    gap: var(--sp-16);
    align-items: stretch;
  }
}

/* ---- フェーズ1: 体験会 ---- */
.s-about__pt-body--p1 {
  display: grid;
  gap: var(--sp-12);
  align-content: center;                       /* 上下中央寄せ */
  padding: var(--sp-16);
  background-color: rgba(255, 193, 0, 0.10);   /* 薄い黄色 */
  border-radius: var(--radius-card);
}

.s-about__pt-card {
  display: flex;
  flex-direction: column;          /* 投票体験/民主主義 を縦積み */
  gap: var(--sp-8);
  padding: var(--sp-16);
  background-color: rgba(255, 193, 0, 0.18);
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-card);
}

.s-about__pt-topic {
  flex: 1;
  padding: 10px 6px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--fw-black);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;             /* 「投票体験」「民主主義」を 1 行に維持 */
}

.s-about__pt-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-accent1);
  text-align: center;
  line-height: 1.4;
}

.s-about__pt-cta-text strong {
  font-weight: var(--fw-black);
}

@media (min-width: 768px) {
  .s-about__pt-body--p1 {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .s-about__pt-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* ---- フェーズ2: マニフェスト ---- */
.s-about__pt-body--p2 {
  display: grid;
  gap: var(--sp-12);
  align-content: center;                       /* 上下中央寄せ */
  padding: var(--sp-16);
  background-color: rgba(0, 40, 255, 0.06);    /* 薄い青 */
  border-radius: var(--radius-card);
  position: relative;                           /* ::before の遷移矢印用 */
}

/* フェーズ間遷移矢印（既存レイアウトを変えず ::before でオーバーレイ）*/
.s-about__pt-body--p2::before,
.s-about__pt-body--p3::before {
  content: '';
  position: absolute;
  left: -8px;                                   /* gap = 16px なのでギャップ中央 */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 24px;
  background-color: var(--color-base-dark);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'><path d='M0 8h18V2l14 10-14 10v-6H0z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'><path d='M0 8h18V2l14 10-14 10v-6H0z' fill='black'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* SP: PC と同じ CSS mask の太矢印を 90 度回転して下向きに */
  .s-about__pt-body--p2::before,
  .s-about__pt-body--p3::before {
    left: 50%;
    top: -10px;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 32px;
    height: 24px;
  }
}

.s-about__pt-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* row 自体を内容幅にとどめる */
  gap: 8px;
}

.s-about__pt-topicRow {
  display: flex;
  align-items: center;
  gap: 8px;                         /* ラベルと円の間隔 */
  padding: 6px 10px;
  background-color: var(--color-accent2);
  border-radius: 8px;
}

.s-about__pt-topicLabel {
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-black);
  text-align: left;
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 36px;                  /* 「環境/防災/多様性」を揃える */
}

.s-about__pt-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #fff;
  color: var(--color-base-dark);
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: var(--fw-black);
  line-height: 1;
  flex-shrink: 0;
}

.s-about__pt-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  position: relative;                 /* アイコン absolute 配置用 */
}

/* マニフェストアイコン / 投票アイコン: カードの中心に揃え、下に絶対配置（レイアウトには影響しない）*/
.s-about__pt-resultIcon,
.s-about__pt-stepIcon {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 4px);
  font-size: 45px;
  color: var(--color-accent1);
  pointer-events: none;
}
@media (max-width: 767px) {
  /* SP: カードの下ではなく、カード内の右側に重ねて配置（色は白）*/
  .s-about__pt-resultIcon,
  .s-about__pt-stepIcon {
    top: 50%;
    left: auto;
    right: 10px;
    transform: translateY(-50%);
    font-size: 29px;
    color: #fff;
  }
}
/* stepBox の位置基準（アイコン用）*/
.s-about__pt-step {
  position: relative;
}
.s-about__pt-stepBox {
  position: relative;
}

.s-about__pt-resultBox {
  padding: 10px 12px;
  background-color: var(--color-accent2);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;                 /* Phase3 ステップボックスと揃える */
  font-weight: var(--fw-black);
  text-align: center;
  line-height: 1.4;
  min-width: 0;
  white-space: nowrap;
  position: relative;              /* アイコンの位置基準 */
}

@media (min-width: 768px) {
  .s-about__pt-body--p2 {
    grid-template-columns: minmax(0, 1fr) auto;   /* topics は伸縮、result は内容幅に合わせる */
    align-items: center;
    gap: var(--sp-12);
  }
}

/* ---- フェーズ3: 投票4ステップ ---- */
.s-about__pt-body--p3 {
  display: grid;
  align-content: center;
  padding: var(--sp-16);
  background-color: rgba(0, 40, 255, 0.06);    /* 薄い青（フェーズ2と統一）*/
  border-radius: var(--radius-card);
  position: relative;
}

.s-about__pt-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-12);
  counter-reset: pt-step;
}

.s-about__pt-step {
  position: relative;
}

/* SP: 各ステップ間に下向き三角（Unicode で FA caret-down 相当）*/
.s-about__pt-step:not(:last-child)::after {
  content: '\25BC';                /* BLACK DOWN-POINTING TRIANGLE ▼ */
  display: block;
  margin: var(--sp-8) auto 0;
  color: var(--color-base-dark);
  font-size: 14px;
  text-align: center;
  line-height: 1;
}

.s-about__pt-stepBox {
  padding: var(--sp-12);
  background-color: var(--color-accent2);
  color: #fff;
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
  text-align: center;
  line-height: 1.4;
  min-height: 64px;
  height: 100%;                /* 親 li セルにフィットさせ高さを揃える */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .s-about__pt-steps {
    /* 質問・投票集計は短文なので狭め、回答動画・こどもの声は広めに */
    grid-template-columns: 0.9fr 1.4fr 0.8fr 1.2fr;
    gap: 22px;                       /* 三角矢印が収まる広めの隙間 */
  }
  .s-about__pt-step:not(:last-child)::after {
    content: '\25B6';               /* BLACK RIGHT-POINTING TRIANGLE ▶ */
    position: absolute;
    top: 50%;
    right: -16px;                    /* 矢印は隙間の中央付近に */
    margin: 0;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-base-dark);
  }
  .s-about__pt-stepBox {
    padding: 8px 6px;
    font-size: 13px;
    min-height: 64px;
  }
}

/* ---- 矢印（Unicode 三角 ▶ — Phase3 の ::after と同種で統一）---- */
.s-about__pt-arrow {
  font-size: 14px;
  color: var(--color-base-dark);
  flex-shrink: 0;
  line-height: 1;
}

/* =========================================================
   SP（〜767px）専用: タイムラインを縦書きヘッダー＋詳細の
   2-3列グリッドで再構成。PC レイアウトには影響を与えない。
   ========================================================= */
@media (max-width: 767px) {

  /* 親グリッドを再定義: [縦書きフェーズ] [縦書き赤帯] [詳細] の3列
     月軸は grid に含めず、左の隙間に absolute オーバーレイで配置 */
  .s-about__pt {
    position: relative;
    grid-template-columns: 56px 36px 1fr;
    grid-template-areas:
      "title  title    title"
      "p1head bandopen p1body"
      "p2head bandcom  p2body"
      "p3head bandcom  p3body";
    column-gap: var(--sp-8);
    row-gap: 0;
    align-items: stretch;
  }
  .s-about__pt-title {
    grid-area: title;
    margin-bottom: var(--sp-12);
  }
  /* row-gap=0 にした分、body 側にだけ余白を確保（帯同士はぴったり噛み合う）*/
  .s-about__pt-body--p1,
  .s-about__pt-body--p2 {
    margin-bottom: var(--sp-24);
  }
  .s-about__pt-band--open {
    margin-bottom: var(--sp-24);
  }

  /* phases / bands / bodies のラッパーは grid を分解 */
  .s-about__pt-phases,
  .s-about__pt-bands,
  .s-about__pt-bodies {
    display: contents;
  }

  /* 月軸: 図の左側にオーバーレイ配置（grid には含めない）
     最後の月（11月）が phase 3 の途中（10月だった位置）に来るよう bottom を縮める */
  .s-about__pt-months {
    position: absolute;
    left: -20px;             /* 親コンテナ padding-left の手前まで寄せる */
    top: 0;
    bottom: 130px;           /* 最後のステップ「こどもの声を届けよう」分を除外 */
    width: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) 0;
    margin: 0;
  }
  .s-about__pt-months span {
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: var(--color-base-dark);
    line-height: 1;
    writing-mode: vertical-rl;
    text-orientation: upright;     /* 数字も正立 */
    letter-spacing: 0;
  }

  /* grid-area 割り当て */
  .s-about__pt-phase--p1 { grid-area: p1head; }
  .s-about__pt-phase--p2 { grid-area: p2head; }
  .s-about__pt-phase--p3 { grid-area: p3head; }
  .s-about__pt-band--open       { grid-area: bandopen; }
  .s-about__pt-band--committee  { grid-area: bandcom; }
  .s-about__pt-body--p1 { grid-area: p1body; }
  .s-about__pt-body--p2 { grid-area: p2body; }
  .s-about__pt-body--p3 { grid-area: p3body; }

  /* フェーズタイトル: 縦書きカラム */
  .s-about__pt-phase {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    /* 下端が下向き三角になるシェブロン（PC の右向き矢印を90度回した形）*/
    padding: var(--sp-12) 4px calc(var(--sp-12) + 18px);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
  }
  /* Phase 2 / 3: 上端も切り欠きにして前 phase からの受けを表現 */
  .s-about__pt-phase--p2,
  .s-about__pt-phase--p3 {
    padding: calc(var(--sp-12) + 18px) 4px calc(var(--sp-12) + 18px);
    clip-path: polygon(0 0, 50% 18px, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
  }
  /* Phase 3 は最後なので下端は平らに */
  .s-about__pt-phase--p3 {
    padding: calc(var(--sp-12) + 18px) 4px var(--sp-12);
    clip-path: polygon(0 0, 50% 18px, 100% 0, 100% 100%, 0 100%);
  }
  .s-about__pt-phase-num {
    /* 番号は水平のまま */
    writing-mode: horizontal-tb;
    font-size: 22px;
  }
  .s-about__pt-phase-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }
  /* SP では "program" の small 表記は省略してすっきり */
  .s-about__pt-phase-title small {
    display: none;
  }
  .s-about__pt-phase-month {
    /* SP では月情報は親のヘッダー帯側に置きたいが、煩雑になるため非表示 */
    display: none;
  }

  /* 赤帯: 縦書きピル */
  .s-about__pt-band {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: var(--sp-12) 6px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }

  /* フェーズ詳細: SP では上方向のマージン余地を確保 */
  .s-about__pt-body--p1,
  .s-about__pt-body--p2,
  .s-about__pt-body--p3 {
    padding: var(--sp-12);
  }

  /* フェーズ詳細内の子要素は SP でも横書き（= 元のまま）*/
  /* phase1: 黄色枠は詳細領域いっぱいに広げ、こども選挙委員募集！は下段に移動 */
  .s-about__pt-body--p1 {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: var(--sp-8);
  }
  .s-about__pt-card {
    width: 100%;
  }
  .s-about__pt-cta {
    flex-direction: row;
    justify-content: center;
    text-align: center;
  }
  /* SP: 「こども選挙委員募集！」を 1 行に */
  .s-about__pt-cta-text br {
    display: none;
  }
  .s-about__pt-cta-text {
    white-space: nowrap;
  }

  /* SP: phase2 の「こどもマニフェストをつくろう」 */
  /* 三角矢印をカードの上、向きを下向きに。カード幅は領域いっぱい */
  .s-about__pt-result {
    flex-direction: column;
    gap: var(--sp-4);
  }
  .s-about__pt-arrow {
    display: inline-block;
    transform: rotate(90deg);   /* ▶ → ▼相当 */
    font-size: 16px;
    line-height: 1;
  }
  .s-about__pt-resultBox {
    width: 100%;
    padding: 12px 8px;
    white-space: normal;        /* 幅を広げる代わりに 1 行表示も許容 */
  }
  /* SP: 「こども マニフェスト をつくろう」 → 「こどもマニフェスト / をつくろう」 */
  .s-about__pt-resultBox br:first-of-type {
    display: none;
  }

  /* SP: phase3 の「質問を考えよう」を 1 行に（高さは他カードと統一） */
  .s-about__pt-step:nth-child(1) .s-about__pt-stepBox br {
    display: none;
  }
  /* SP: 「回答動画を/見よう/投票所運営を/学ぼう」を 2 行に
       1番目と3番目の <br> を消して
       「回答動画を見よう / 投票所運営を学ぼう」 */
  .s-about__pt-step:nth-child(2) .s-about__pt-stepBox br:nth-of-type(1),
  .s-about__pt-step:nth-child(2) .s-about__pt-stepBox br:nth-of-type(3) {
    display: none;
  }

  /* SP: ステップ間の ▼ がカードに重ならないよう li を縦 flex 化 */
  .s-about__pt-step {
    display: flex;
    flex-direction: column;
  }
  .s-about__pt-stepBox {
    height: auto;                /* height:100% を解除して内容に合わせる */
  }
  /* SP: 「投票/集計」を 1 行に */
  .s-about__pt-step:nth-child(3) .s-about__pt-stepBox br {
    display: none;
  }
}

/* タイムライン上のリード文（年間プログラムの直下、タイムライン本体の直前） */
.s-about__timeline-lead {
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body);
  margin: 0 auto var(--sp-40);
  max-width: 820px;
  text-align: center;
}

@media (max-width: 768px) {
  .s-about__timeline-lead {
    text-align: left;
    margin-bottom: var(--sp-32);
  }
  .s-about__timeline-lead br { display: none; }
}

/* ---- 下部: 2 CTA ---- */
.s-about__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .s-about__cta {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.s-about__cta-btn {
  /* c-btn の基底スタイルを継承 */
  /* SP: 幅いっぱいに広げる */
  width: 100%;
  justify-content: center;
}

@media (min-width: 640px) {
  .s-about__cta-btn {
    width: auto;
  }
}

/* ---- 波形ディバイダー（上端・下端） ---- */
/* 上端: オフホワイト背景の上に黄色の波形SVG → "白→黄" の遷移 */
.c-wave-divider--to-yellow {
  background-color: var(--color-base-light);
  margin-bottom: -1px; /* SVGと次の背景の隙間を防ぐ */
}

/* イエロー → ブルー（直接遷移）
   黄背景の上に青い波形を描き、間に白い帯を作らない */
.c-wave-divider--yellow-to-blue {
  background-color: var(--color-primary);
  margin-top: -1px;
  margin-bottom: -1px;
}

/* ==========================================================================
   === 03-experience ===
   Phase 3-B: こども選挙体験会セクション
   ========================================================================== */

/* ==========================================================================
   03-experience — こども選挙体験会
   背景: 黄一色 / テキスト: ダーク
   設計方針: 装飾を排し、タイポグラフィと余白でリズムを作る
   ========================================================================== */
.s-experience {
  background-color: var(--color-primary);
  padding-block: var(--sp-80);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .s-experience {
    padding-block: 112px;
  }
}

/* ---- コンテナ: 上段（2カラム）+ 下段（1カラムカード） ---- */
.s-experience__container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
  position: relative;
  z-index: 1;
}

.s-experience__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-48);
}

@media (min-width: 1024px) {
  .s-experience__container {
    gap: 80px;
  }
  .s-experience__top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
    align-items: start;
  }
}

/* ---- 下段: プログラムカード（中央 1カラム） ---- */
.s-experience__bottom {
  display: flex;
  justify-content: center;
}

/* ---- 左カラム ---- */
.s-experience__col--text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

/* ---- エイブロウ: 中央寄せ + 両端に短い横線 ---- */
.s-experience__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.s-experience__eyebrow::before,
.s-experience__eyebrow::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-base-dark);
  flex-shrink: 0;
}

/* ---- メイン見出し: 中央寄せ ---- */
.s-experience__heading {
  font-size: clamp(26px, 6vw, 52px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-align: center;
}
.s-experience__heading-line { display: block; }

/* 「募集！」: 太さで強調のみ（背景ハイライト等の装飾はしない） */
.s-experience__heading-strong {
  font-weight: var(--fw-black);
  font-size: 1em;
  color: var(--color-base-dark);
  margin-left: 0.05em;
}

@media (min-width: 1024px) {
  .s-experience__heading { font-size: 56px; }
}

/* ---- リード文 ---- */
.s-experience__lead {
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: 1.95;
  letter-spacing: var(--ls-body);
  margin: 0;
  max-width: 36em;
}

/* ---- 開催詳細: 区切り線のみのクリーンな dl ---- */
.s-experience__details {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(26, 26, 26, 0.18);
}

.s-experience__details-row {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
  border-bottom: 1px solid rgba(26, 26, 26, 0.18);
  align-items: baseline;
}

@media (min-width: 1024px) {
  .s-experience__details-row {
    grid-template-columns: 5.5em 1fr;
    padding-block: 18px;
  }
}

.s-experience__details-term {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: rgba(26, 26, 26, 0.6);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.s-experience__details-desc {
  margin: 0;
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: 1.75;
  letter-spacing: var(--ls-body);
}

.s-experience__date-row {
  display: block;
}
.s-experience__date-row + .s-experience__date-row {
  margin-top: 4px;
}

/* マップリンク: テキストリンク（下線のみ）+ 先頭にピンアイコン */
.s-experience__map-link {
  color: var(--color-base-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--ease-fast);
}
.s-experience__map-link:hover {
  opacity: 0.65;
  text-decoration: underline;
}
.s-experience__map-icon {
  margin-right: 4px;
  font-size: 0.95em;
  color: var(--color-accent1);
  text-decoration: none;
  /* リンクの下線対象外にする */
  display: inline-block;
}

/* ---- プログラム内容カード（中央配置・CTA 内包） ---- */
.s-experience__programCard {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  background-color: var(--color-base-light);
  border-radius: 16px;
  padding: var(--sp-32) var(--sp-24);
  box-shadow: 0 14px 40px rgba(26, 26, 26, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  text-align: left;
}

@media (min-width: 1024px) {
  .s-experience__programCard {
    padding: 56px 64px;
    gap: var(--sp-32);
  }
}

/* カード見出し（committee と統一: kicker + title・下線なし） */
.s-experience__cardHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.s-experience__cardKicker {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-primary);   /* 体験会セクションの黄色テーマに合わせる */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.s-experience__cardTitle {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-heading);
  line-height: 1.3;
}

/* 旧ラベル（互換のため残すが新HTMLでは未使用） */
.s-experience__program-label {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: rgba(26, 26, 26, 0.6);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}

.s-experience__program-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: prog-counter;
}

.s-experience__program-item {
  position: relative;
  padding: 4px 0 4px 36px;
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: 1.7;
  letter-spacing: var(--ls-body);
  counter-increment: prog-counter;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.s-experience__program-item:last-child { border-bottom: 0; }

.s-experience__program-item::before {
  content: counter(prog-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-accent1);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* ---- CTA エリア（カード内・中央配置） ---- */
.s-experience__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding-top: var(--sp-8);
}

.s-experience__cta-btn {
  width: 100%;
  justify-content: flex-start;
}
@media (min-width: 480px) {
  .s-experience__cta-btn { width: auto; min-width: 320px; }
}

.s-experience__deadline {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.7);
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  text-align: center;
}

/* ==========================================================================
   右カラム: 写真 — 編集誌的なクリーンな組み
   メイン1枚 + サブ2枚を非対称グリッドで配置（傾き・装飾なし）
   ========================================================================== */
.s-experience__col--photos {
  position: relative;
}

.s-experience__photos {
  display: grid;
  /* SP: 2 列でコンパクトに並べる（縦に長くなりすぎないため） */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-12);
}

.s-experience__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  line-height: 0;
  position: relative;       /* スライドショー img を重ねるため */
  aspect-ratio: 4 / 3;      /* デフォルト 4:3 横長。個別バリアントで上書き可能 */
}

/* スライドショー：複数の img を重ねて crossfade */
.s-experience__photo img,
.s-experience__photoSlide {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.0s ease-in-out;
}

.s-experience__photoSlide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .s-experience__photoSlide {
    transition: none;
  }
}

/* Tablet/Desktop: 4 列のモザイクタイル（横長 + 縦長 + ワイドの混在）
   レイアウト：
     [ p1: 4:3 横, span 2 ] [ p2: 縦長, span 2 col × 2 row ]
     [ p3: 4:3 横, span 2 ] [ ↑ p2 続き                ]
     [ p4: 16:6 ワイド, span 4                          ]
     [ p5: 4:3 横, span 2 ] [ p6: 4:3 横, span 2       ]
*/
@media (min-width: 768px) {
  .s-experience__photos {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-12);
  }
  .s-experience__photo--p1,
  .s-experience__photo--p3,
  .s-experience__photo--p5,
  .s-experience__photo--p6 {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }
  .s-experience__photo--p2 {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;     /* 2 行スパン分の高さに自然フィット → 縦長になる */
  }
  .s-experience__photo--p4 {
    grid-column: span 4;
    aspect-ratio: 16 / 6;   /* 横全幅のシネマティックワイド */
  }
}

/* ---- GSAP アニメーション初期状態 ---- */
.js-exp-fade {
  opacity: 0;
}

.js-exp-photo {
  opacity: 0;
}

/* ---- GSAP アニメーション初期状態 ---- */
.js-exp-fade {
  opacity: 0;
}

.js-exp-photo {
  opacity: 0;
}

/* ==========================================================================
   04-committee — こども選挙委員
   背景: ブルー #0028FF（フルブリード）
   テキスト: オフホワイト #FAFAF7
   ========================================================================== */

/* セクション本体 */
.s-committee {
  position: relative;
  background-color: var(--color-accent2);
  padding-block: var(--sp-80);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .s-committee {
    padding-block: 112px;
  }
}

/* コンテナ */
.s-committee__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}

@media (min-width: 1024px) {
  .s-committee__container {
    gap: 80px;
  }
}

/* ===== 上部: 見出しエリア（experience と同じトーン） ===== */
.s-committee__heading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  gap: var(--sp-24);
}

/* エイブロウ: 中央寄せ + 両端に短い横線（experience に倣う） */
.s-committee__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-light);
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.s-committee__eyebrow::before,
.s-committee__eyebrow::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-base-light);
  flex-shrink: 0;
}
/* PC では <br class="s-committee__eyebrow-br"> は無効（1行表示） */
.s-committee__eyebrow-br {
  display: none;
}
@media (max-width: 767px) {
  /* SP は 2 行表示（水平線は非表示） */
  .s-committee__eyebrow {
    display: block;
    text-align: center;
  }
  .s-committee__eyebrow::before,
  .s-committee__eyebrow::after {
    display: none;
  }
  .s-committee__eyebrow-br {
    display: block;
  }
}

/* メイン見出し */
.s-committee__heading {
  margin: 0;
  font-size: clamp(24px, 6vw, 52px);
  font-weight: var(--fw-black);
  color: var(--color-base-light);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
}
.s-committee__heading-line { display: block; }

.s-committee__heading-strong {
  font-weight: var(--fw-black);
  font-size: 1em;
  color: var(--color-base-light);
  margin-left: 0.05em;
}

@media (min-width: 1024px) {
  .s-committee__heading { font-size: 56px; }
}

/* リード文 */
.s-committee__lead {
  margin: 0;
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: rgba(250, 250, 247, 0.92);
  line-height: 1.95;
  letter-spacing: var(--ls-body);
  max-width: 36em;
}

/* ===== 中部: 共通カード（プログラム / 募集要項 を別カード化） ===== */
.s-committee__card {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  background-color: var(--color-base-light);
  border-radius: 16px;
  padding: var(--sp-32) var(--sp-24);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  text-align: left;
}

@media (min-width: 1024px) {
  .s-committee__card {
    padding: 56px 64px;
    gap: var(--sp-32);
  }
}

/* カード見出し（しっかり目立たせる: kicker + title） */
.s-committee__cardHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.s-committee__cardKicker {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-accent2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.s-committee__cardTitle {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-heading);
  line-height: 1.3;
}

/* ===== プログラムエリア（カード内） ===== */
.s-committee__program {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
}

@media (min-width: 1024px) {
  .s-committee__program {
    gap: var(--sp-48);
  }
}

/* フェーズブロック */
.s-committee__phase {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

/* フェーズヘッダー（区切り線 + ラベル） */
.s-committee__phase-header {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 2px solid var(--color-accent2);
}

/* 「フェーズ1」ラベル */
.s-committee__phase-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-accent2);
  letter-spacing: 0.08em;
  white-space: nowrap;
  background-color: rgba(0, 40, 255, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
}

/* フェーズ名 */
.s-committee__phase-name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
}

@media (min-width: 768px) {
  .s-committee__phase-name {
    font-size: 20px;
  }
}

/* ===== プログラム items リスト ===== */
.s-committee__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* 各エントリ */
.s-committee__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  align-items: start;
}
.s-committee__item:last-child { border-bottom: 0; padding-bottom: 0; }
.s-committee__item:first-child { padding-top: 0; }

@media (min-width: 768px) {
  .s-committee__item {
    gap: var(--sp-24);
    padding: var(--sp-20) 0;
  }
}

/* 日付ラップ */
.s-committee__item-date-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  min-width: 0;
}

@media (min-width: 768px) {
  .s-committee__item-date-wrap {
    flex-direction: column;
    align-items: center;
    width: 100px;
    flex-shrink: 0;
    gap: var(--sp-8);
  }
}

/* 番号バッジ（確定: 青背景 + 白文字） */
/* 番号バッジ: タイトル h3 内に inline 配置（左側に小さな丸バッジ） */
.s-committee__item-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: var(--color-accent2);
  color: var(--color-base-light);
  font-size: 14px;
  font-weight: var(--fw-black);
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -2px;  /* タイトル文字とのベースライン微調整 */
}

@media (min-width: 768px) {
  .s-committee__item-num {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}

/* TBD: 薄いグレー枠 */
.s-committee__item--tbd .s-committee__item-num {
  background-color: transparent;
  border: 1.5px solid rgba(26, 26, 26, 0.3);
  color: rgba(26, 26, 26, 0.45);
}

/* 日付ブロック: 8/29 (土) + 期間バッジ を中央寄せ */
.s-committee__item-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  color: var(--color-base-dark);
  line-height: 1.2;
  padding-top: 4px;
}

/* メイン日付: スラッシュ表記の数字 + 曜日 */
.s-committee__item-mainDate {
  display: inline-flex;
  align-items: baseline;
  font-size: 26px;
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  letter-spacing: 0;
  line-height: 1;
  font-feature-settings: "tnum";  /* 数字を等幅に */
}

/* Day6 「11月中」の "月中" 部分は数字より小さく（65%） */
.s-committee__item-monthChu {
  font-size: 0.65em;
  font-weight: var(--fw-bold);
  margin-left: 1px;
  color: rgba(26, 26, 26, 0.85);
}

/* 曜日（添字として小さく密着） */
.s-committee__item-dow {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: rgba(26, 26, 26, 0.65);
  margin-left: 2px;
}

/* 期間ラベル（午前/午後/終日）: 白背景・グレー枠ピル */
.s-committee__item-period {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 12px;
  background-color: #fff;
  border: 1px solid var(--color-neutral);
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .s-committee__item-date {
    padding-top: 0;
  }
  .s-committee__item-mainDate {
    font-size: 30px;
  }
}

.s-committee__item--tbd .s-committee__item-date {
  color: rgba(26, 26, 26, 0.6);
}

.s-committee__item-date-sub {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-accent1);
}

.s-committee__tbd-badge {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.65);
  background-color: rgba(26, 26, 26, 0.06);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: var(--ls-label);
  white-space: nowrap;
  margin-top: 4px;
}

/* アイテム本体 */
.s-committee__item-body {
  padding-top: 2px;
  min-width: 0;
}

.s-committee__item-title {
  font-size: var(--fs-body-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  letter-spacing: var(--ls-heading);
}

/* SP: タイトルが badge + 本文で枠を超えるため letter-spacing を詰める */
@media (max-width: 767px) {
  .s-committee__item-title {
    letter-spacing: 0.02em;
  }
  .s-committee__item-num {
    margin-right: 6px;
  }
}

@media (min-width: 768px) {
  .s-committee__item-title {
    font-size: 18px;
  }
}

.s-committee__item--tbd .s-committee__item-title {
  color: rgba(26, 26, 26, 0.6);
}

.s-committee__item-desc {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.75);
  line-height: 1.7;
  letter-spacing: var(--ls-body);
  margin: 0;
}

.s-committee__item--tbd .s-committee__item-desc {
  color: rgba(26, 26, 26, 0.55);
}

/* ===== 募集要項（カード内コンテンツ） ===== */
.s-committee__requirements {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

/* 要項リスト: experience と同じトーンの dl */
.s-committee__details {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}

.s-committee__details-row {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: var(--sp-16);
  padding-block: var(--sp-12);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  align-items: baseline;
}

@media (min-width: 1024px) {
  .s-committee__details-row {
    grid-template-columns: 8em 1fr;
    padding-block: var(--sp-16);
  }
}

.s-committee__details-term {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: rgba(26, 26, 26, 0.6);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.s-committee__details-desc {
  margin: 0;
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: 1.75;
  letter-spacing: var(--ls-body);
}

/* 応募条件リスト */
.s-committee__conditions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s-committee__conditions li {
  position: relative;
  padding-left: 14px;
}
.s-committee__conditions li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent2);
}

/* 締切日強調 */
.s-committee__deadlineDate {
  display: inline-block;
  font-size: 1.05em;
  font-weight: var(--fw-bold);
  color: var(--color-accent1);
  letter-spacing: 0.02em;
}

/* 注意喚起 */
.s-committee__caution {
  margin: 0;
  padding: var(--sp-12) var(--sp-16);
  background-color: rgba(0, 40, 255, 0.06);
  border-radius: 8px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-base-dark);
  line-height: 1.7;
}

/* 保護者向けノート */
.s-committee__parents {
  padding: var(--sp-16);
  background-color: rgba(26, 26, 26, 0.04);
  border-radius: 8px;
}
.s-committee__parents-heading {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-heading);
}
.s-committee__parents-body {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.75);
  line-height: 1.75;
  letter-spacing: var(--ls-body);
}

/* インラインリンク（要項エリア内・体験会への導線） */
.s-committee__inlineLink {
  color: var(--color-accent2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: var(--fw-bold);
}
.s-committee__inlineLink:hover {
  opacity: 0.7;
}

/* ===== カード内 CTA（experience と同じ） ===== */
.s-committee__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding-top: var(--sp-8);
}

.s-committee__cta-btn {
  width: 100%;
  justify-content: flex-start;
}
@media (min-width: 480px) {
  .s-committee__cta-btn { width: auto; min-width: 320px; }
}

/* 青ボタンのホバー: 青系シャドウで強調 */
.s-committee__cta-btn:hover {
  box-shadow: 0 8px 24px rgba(0, 40, 255, 0.32);
}

.s-committee__deadline {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--color-base-dark);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  align-self: center;
}
.s-committee__deadlineLabel {
  display: inline-block;
  padding: 2px 10px;
  background-color: var(--color-accent1);
  color: #fff;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
}
.s-committee__deadlineEm {
  color: var(--color-accent1);
  font-size: 1.15em;
  font-weight: var(--fw-black);
  letter-spacing: 0.02em;
}
.s-committee__deadlineEm-unit {
  font-size: 0.82em;
  font-weight: var(--fw-bold);
}

/* ===== 波形ディバイダー: ブルー ===== */

/* 上端: 白→青（experienceセクション下の白地から青に）
   SVG fill は #0028FF、親背景は白(#FAFAF7) */
/* ブルー → オフホワイト */
.c-wave-divider--from-blue {
  background-color: var(--color-accent2);
  margin-top: -1px;
  margin-bottom: -1px;
}

/* ===== GSAP アニメーション初期状態 ===== */
.js-committee-fade {
  opacity: 0;
}

.js-committee-item {
  opacity: 0;
}

/* ==========================================================================
   05-requirements — 募集要項
   Phase 3-B 実装済み
   ========================================================================== */

.s-requirements {
  background-color: var(--color-base-light);
  padding-block: var(--section-pt-sp) var(--section-pb-sp);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .s-requirements {
    padding-block: var(--section-pt-desktop) var(--section-pb-desktop);
  }
}

/* --- 装飾パーツ --- */
.s-requirements__deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.s-requirements__deco--tr {
  top: 48px;
  right: 32px;
}

@media (min-width: 1200px) {
  .s-requirements__deco--tr {
    top: 64px;
    right: 48px;
    width: 48px;
    height: 48px;
  }
}

/* --- コンテナ --- */
.s-requirements__container {
  max-width: 800px;
  margin-inline: auto;
}

/* --- 見出しブロック --- */
.s-requirements__heading-block {
  text-align: center;
  margin-bottom: var(--sp-48);
}

.s-requirements__eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.4);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-label);
  margin-bottom: var(--sp-16);
  text-transform: uppercase;
}

.s-requirements__heading {
  font-size: 36px;
  font-weight: var(--fw-black);
  color: var(--color-accent2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

@media (min-width: 1200px) {
  .s-requirements__heading {
    font-size: 56px;
  }
}

/* --- 要項パネル（青枠） --- */
.s-requirements__panel {
  border-radius: var(--radius-card);
  margin-bottom: var(--sp-24);
}

.s-requirements__panel--border {
  background-color: var(--color-base-light);
  border: 2px solid var(--color-accent2);
  padding: var(--sp-24);
}

@media (min-width: 768px) {
  .s-requirements__panel--border {
    padding: var(--sp-32);
  }
}

/* --- 各行（定義リスト風） --- */
.s-requirements__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--color-neutral);
}

.s-requirements__row:first-child {
  padding-top: 0;
}

.s-requirements__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .s-requirements__row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-24);
    padding-block: var(--sp-20);
  }
}

.s-requirements__term {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: var(--lh-body);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 96px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .s-requirements__term {
    min-width: 120px;
    font-size: var(--fs-body);
  }
}

.s-requirements__term-mark {
  color: var(--color-accent2);
}

.s-requirements__desc {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: var(--lh-body);
}

@media (min-width: 768px) {
  .s-requirements__desc {
    font-size: var(--fs-body);
  }
}

/* --- 応募条件リスト --- */
.s-requirements__conditions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.s-requirements__conditions li {
  padding-left: 1em;
  position: relative;
}

.s-requirements__conditions li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* --- 応募締切の行 --- */
.s-requirements__row--deadline {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .s-requirements__row--deadline {
    flex-direction: row;
    align-items: center;
  }
}

.s-requirements__deadline {
  font-size: 28px;
  font-weight: var(--fw-black);
  color: var(--color-accent1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  display: block;
}

@media (min-width: 768px) {
  .s-requirements__deadline {
    font-size: 40px;
  }
}

/* --- 保護者向けパネル（ライトグレー背景） --- */
.s-requirements__panel--parents {
  background-color: var(--color-neutral);
  padding: var(--sp-24);
}

@media (min-width: 768px) {
  .s-requirements__panel--parents {
    padding: var(--sp-32);
  }
}

.s-requirements__parents-heading {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-accent2);
  line-height: var(--lh-h4);
  margin-bottom: var(--sp-16);
}

@media (min-width: 768px) {
  .s-requirements__parents-heading {
    font-size: 18px;
  }
}

.s-requirements__parents-body {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: var(--lh-body-lg);
}

@media (min-width: 768px) {
  .s-requirements__parents-body {
    font-size: var(--fs-body);
  }
}

/* --- 注意喚起（赤字） --- */
.s-requirements__caution {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-bold);
  color: var(--color-accent1);
  line-height: var(--lh-body);
  padding: var(--sp-12) var(--sp-16);
  background-color: rgba(229, 0, 18, 0.04);
  border-radius: var(--radius-card);
  margin-bottom: var(--sp-32);
}

@media (min-width: 768px) {
  .s-requirements__caution {
    font-size: var(--fs-body);
  }
}

/* --- CTA エリア --- */
.s-requirements__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}

/* c-btn--blue の基底スタイルを継承。追加スタイルのみ記述 */
.s-requirements__cta-btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 768px) {
  .s-requirements__cta-btn {
    width: auto;
    min-width: 360px;
  }
}

/* ===== GSAP アニメーション初期状態 ===== */
.js-req-fade {
  opacity: 0;
}

/* ==========================================================================
   Section 06-report — 活動レポート
   背景: #F0EDE8（ライトグレー / --color-neutral）
   ========================================================================== */

/* ---- セクション本体 ---- */
.s-report {
  background-color: var(--color-neutral);
  padding-block: var(--section-pt-sp) var(--section-pb-sp);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .s-report {
    padding-block: var(--section-pt-desktop) var(--section-pb-desktop);
  }
}

/* ---- 装飾パーツ ---- */
.s-report__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.s-report__deco--tr {
  top: var(--sp-48);
  right: var(--sp-24);
}

@media (min-width: 1200px) {
  .s-report__deco--tr {
    top: var(--sp-80);
    right: var(--sp-64);
  }
}

/* ---- コンテナ ---- */
.s-report__container {
  position: relative;
  z-index: 1;
}

/* ---- 見出しエリア ---- */
.s-report__heading-block {
  margin-block-end: var(--sp-48);
}

@media (min-width: 1200px) {
  .s-report__heading-block {
    margin-block-end: var(--sp-64);
  }
}

.s-report__eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.4);
  letter-spacing: var(--ls-wide);
  font-variant: small-caps;
  text-transform: uppercase;
  margin-block-end: var(--sp-12);
}

.s-report__heading {
  font-size: var(--fs-h2-sp);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
  margin-block-end: var(--sp-12);
}

@media (min-width: 1200px) {
  .s-report__heading {
    font-size: 48px;
  }
}

.s-report__subheading {
  margin-top: var(--sp-16);
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  line-height: var(--lh-body);
}

@media (min-width: 1200px) {
  .s-report__subheading {
    font-size: var(--fs-body);
  }
}

/* ---- 2カラム ---- */
/* 1カラム縦積み（note → instagram） */
.s-report__cols {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}

/* 旧 2カラム横並び指定は無効化 */
@media (min-width: 1200px) {
  .s-report__cols--legacy-row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-40);
  }
}

/* 左カラム: note（~58%） */
.s-report__col--note {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 1200px) {
  .s-report__col--note--legacy {
    flex: 0 0 57%;
    width: 57%;
  }
}

/* 右カラム: Instagram（~42%） */
.s-report__col--instagram {
  flex: 1 1 auto;
  width: 100%;
}

@media (min-width: 1200px) {
  .s-report__col--instagram {
    flex: 1 1 auto;
  }
}

/* ---- カラムヘッダー ---- */
.s-report__col-header {
  margin-block-end: var(--sp-20);
}

.s-report__col-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}

/* ロゴ共通 */
.s-report__col-logo {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}

/* note ロゴ（SVG画像） */
.s-report__col-logo--note {
  height: 18px;
  width: auto;
}

/* Instagram アイコン（Font Awesome ブランド） */
.s-report__col-logo--insta {
  font-size: 20px;
  color: var(--color-base-dark);
  /* テキストの薄いグレーに対しブランドアイコンは濃く出して識別しやすく */
}

.s-report__col-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-h4);
  margin: 0;
}

/* note ロゴはタイトル内では少し大きめに、Instagram アイコンも本文サイズより大きく */
.s-report__col-title .s-report__col-logo--note {
  height: 22px;
}
.s-report__col-title .s-report__col-logo--insta {
  font-size: 26px;
}

/* ---- note カードリスト ---- */
.s-report__note-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;                    /* SP: iframe 自体に余白があるため小さめに */
  margin-block-end: var(--sp-20);
}

@media (min-width: 768px) {
  .s-report__note-list {
    /* コンテナ幅を埋める 2カラム。
       note ウィジェットは内部で 494px max-width だが、左寄せで表示されるため
       iframe を 100% 幅にすれば右余白は消える */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-16);
  }
}

/* note 公式埋め込み iframe: ウィジェット幅（494px）にフィット
   高さは 240px でコンテンツに合わせる（下部のグレー余白を解消） */
.s-report__note-list .note-embed-wrapper {
  position: relative;
  border-radius: var(--radius-card);
  /* note 埋め込み iframe 自体に枠＆影が含まれるため、ホバー時の追加効果は付与しない */
}

.s-report__note-list .note-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 223px;            /* note 公式埋め込みカードの実コンテンツ高さ */
  border: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: var(--radius-card);
  /* スクロール時に iframe が wheel イベントを横取りしないように透過 */
  pointer-events: none;
}

/* クリック用透明オーバーレイ（iframe の上に配置、wheel は通さずクリックだけ受ける） */
.s-report__note-list .note-embed-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  border-radius: var(--radius-card);
  /* visually invisible but tabbable */
  background: transparent;
  text-decoration: none;
}
.s-report__note-list .note-embed-overlay:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* note カード */
.s-report__note-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-base-light);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.06);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}

.s-report__note-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.s-report__note-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.s-report__note-card-link:hover {
  text-decoration: none;
}

.s-report__note-card-inner {
  display: flex;
  align-items: stretch;
  min-height: 88px;
}

/* カードのカラーブロック（左端） */
.s-report__note-thumb {
  flex: 0 0 8px;
  min-height: 80px;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.s-report__note-thumb--red    { background-color: var(--color-accent1); }
.s-report__note-thumb--blue   { background-color: var(--color-accent2); }
.s-report__note-thumb--yellow { background-color: var(--color-primary); }

/* カード本体 */
.s-report__note-body {
  flex: 1 1 auto;
  padding: var(--sp-16) var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* note ロゴ */
.s-report__note-logo {
  font-size: var(--fs-label);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-block-end: var(--sp-4);
  display: inline-block;
  /* note ブランドカラー模倣: 黒文字に細い枠 */
  border: 1.5px solid var(--color-base-dark);
  border-radius: 3px;
  padding: 1px 5px;
  width: fit-content;
}

.s-report__note-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-body);
}

@media (min-width: 1200px) {
  .s-report__note-title {
    font-size: var(--fs-body-small);
  }
}

.s-report__note-excerpt {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.65);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);

  /* 2行クランプ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.s-report__note-date {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: var(--ls-caption);
  margin-block-start: auto;
}

/* ---- more リンク共通 ---- */
.s-report__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-accent2);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--ease-fast);
}

.s-report__more-link:hover {
  text-decoration: none;
  border-bottom-color: var(--color-accent2);
}

.s-report__more-arrow {
  font-size: 12px;
  line-height: 1;
}

/* note more リンク */
.s-report__note-more {
  margin-block-start: var(--sp-8);
}

/* ---- Instagram グリッド ---- */
/* Instagram グリッド: SP=2列, タブレット=5列×2行（最新10投稿） */
.s-report__insta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-12);
  margin-block-end: var(--sp-20);
}

@media (min-width: 768px) {
  .s-report__insta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Instagram タイル */
.s-report__insta-tile {
  display: flex;
  flex-direction: column;
}

.s-report__insta-tile-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}

.s-report__insta-tile-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

/* タイル画像プレースホルダー（正方形） */
.s-report__insta-img {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--sp-4);
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
}

.s-report__insta-img--blue   { background-color: var(--color-accent2); }
.s-report__insta-img--yellow { background-color: var(--color-primary); }
.s-report__insta-img--red    { background-color: var(--color-accent1); }

/* Instagram タイル: API 連携時は実投稿のサムネイル画像を表示する。
   API 未設定・通信失敗時は --yellow のプレースホルダーへフォールバック。 */
.s-report__insta-img--photo {
  padding: 0;
  background-color: var(--color-primary); /* 画像読み込み中の背景 */
}

.s-report__insta-img--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 投稿番号バッジ: 不使用のため非表示 */
.s-report__insta-num {
  display: none;
}

/* キャプション: 視覚的には非表示（スクリーンリーダー向けに DOM へは残す） */
.s-report__insta-caption {
  display: none;
}

/* Instagram more リンク */
.s-report__insta-more {
  margin-block-start: var(--sp-8);
}

/* ---- GSAP 初期状態 ---- */
.js-report-fade {
  opacity: 0;
}

.js-report-note-card {
  opacity: 0;
}

.js-report-insta-tile {
  opacity: 0;
}

/* ==========================================================================
   Animations: GSAP ターゲット要素の初期状態
   Phase 3-B で各セクションのアニメーションを追加実装
   ========================================================================== */

/* js-fade-hero: ヒーロー周辺要素（初期表示は不可視、JS でアニメーション開始）
   ローダー終了直後に「素のまま一瞬表示される」のを防ぐ。
   prefers-reduced-motion / JS 失敗時は JS 側で opacity:1 を強制する */
.js-fade-hero {
  opacity: 0;
}

/* js-hero-title-part: タイトル文字パーツも同様に初期非表示にして、
   ローダー終了直後の「素のまま一瞬表示」を防止する。
   prefers-reduced-motion / JS 失敗時 / failsafeTimer(5秒) で opacity:1 を強制する */
.js-hero-title-part {
  opacity: 0;
}

/* js-fade-up: スクロール進入アニメーション要素 */
.js-fade-up {
  opacity: 0;
}

/* js-footer-member: フッターメンバーカード stagger */
.js-footer-member {
  opacity: 0;
}

/* ==========================================================================
   Ripple Effect（CTAボタン共通）
   ========================================================================== */
.c-btn--primary,
.c-btn--blue,
.c-btn--on-yellow {
  position: relative;
  overflow: hidden;
}

.c-btn__ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  pointer-events: none;
}

/* ==========================================================================
   FORM PAGES — experience/ committee/
   フォーム専用クラス群（p-form*, c-button, c-heading, c-infoBox, c-req, c-opt 等）
   LP デザインシステム（青/黄/赤の3色アクセント、Zen Maru Gothic）に合わせた汎用スタイル
   ========================================================================== */

/* ---- レイアウト ヘルパー ---- */
.l-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-px-sp);
}
@media (min-width: 1024px) {
  .l-inner { padding: 0 var(--container-px-pc); }
}

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

/* ---- ページヘッダー（フォーム上部の見出しエリア） ---- */
.p-pageHeader {
  background-color: var(--color-base-light);
  color: var(--color-base-dark);
  padding-block: var(--sp-64);
  text-align: center;
}
@media (min-width: 1024px) {
  .p-pageHeader { padding-block: 96px; }
}

/* ---- フォームコンテナ ---- */
.p-formContainer {
  background-color: var(--color-base-light);
  padding-block: var(--sp-64);
}
@media (min-width: 1024px) {
  .p-formContainer { padding-block: var(--sp-80); }
}

/* ---- 共通見出し ---- */
.c-heading {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--fw-black);
  color: var(--color-base-dark);
  line-height: 1.4;
  letter-spacing: var(--ls-heading);
  margin: 0;
}

/* ---- 情報ボックス ---- */
.c-infoBox {
  background-color: #fff;
  border: 1px solid var(--color-neutral);
  border-radius: 12px;
  padding: var(--sp-24);
  margin-bottom: var(--sp-24);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.04);
}
.c-infoBox dl {
  margin: 0;
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: var(--sp-8) var(--sp-16);
}
.c-infoBox dt {
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  font-size: var(--fs-body-small);
}
.c-infoBox dd {
  margin: 0;
  color: var(--color-base-dark);
  font-size: var(--fs-body-small);
  line-height: 1.7;
}
.c-infoBox h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  margin: 0 0 var(--sp-12);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.c-infoBox h3::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- 必須/任意バッジ ---- */
.c-req,
.c-opt {
  display: inline-block;
  padding: 2px 8px;
  margin-left: var(--sp-8);
  border-radius: 4px;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.4;
}
.c-req {
  background-color: var(--color-accent1);
  color: #fff;
}
.c-opt {
  background-color: rgba(26, 26, 26, 0.1);
  color: rgba(26, 26, 26, 0.7);
}

/* ---- フォーム本体 ---- */
.p-form {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16px;
  padding: var(--sp-32) var(--sp-24);
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06);
}
@media (min-width: 1024px) {
  .p-form { padding: 48px 56px; }
}

.p-form__group {
  margin-bottom: var(--sp-32);
}
.p-form__group:last-child {
  margin-bottom: 0;
}

/* fieldset リセット（デフォルト枠線・パディング除去） */
.p-form__fieldset,
fieldset.p-form__group {
  border: 0;
  padding: 0;
  margin-block: 0 var(--sp-32);
}
.p-form__fieldset legend,
fieldset.p-form__group legend {
  padding: 0;
  margin-bottom: var(--sp-8);
}

.p-form__label {
  display: block;
  font-size: var(--fs-body-small);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  margin-bottom: var(--sp-8);
  line-height: 1.5;
}

.p-form__note {
  font-size: var(--fs-small);
  color: rgba(26, 26, 26, 0.65);
  margin: 0 0 var(--sp-12);
  line-height: 1.6;
}

.p-form__input,
.p-form__textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-body);
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-base-dark);
  background-color: #fff;
  border: 1.5px solid var(--color-neutral);
  border-radius: 8px;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.p-form__input:focus,
.p-form__textarea:focus {
  outline: none;
  border-color: var(--color-accent2);
  box-shadow: 0 0 0 3px rgba(0, 40, 255, 0.12);
}
.p-form__input::placeholder,
.p-form__textarea::placeholder {
  color: rgba(26, 26, 26, 0.35);
}
.p-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* ラジオ・チェックボックス: 枠なし、シンプルなインライン配置 */
.p-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16) var(--sp-24);
}
.p-form__radioLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-small);
  color: var(--color-base-dark);
  cursor: pointer;
  transition: color var(--ease-fast);
}
.p-form__radioLabel:hover {
  color: var(--color-accent2);
}
.p-form__radioLabel input {
  margin: 0;
  accent-color: var(--color-accent2);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.p-form__tableWrapper {
  overflow-x: auto;
  margin-bottom: var(--sp-12);
  border-radius: 8px;
  border: 1px solid var(--color-neutral);
}
.p-form__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-small);
  min-width: 480px;
}
.p-form__table th,
.p-form__table td {
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  border-bottom: 1px solid var(--color-neutral);
  vertical-align: middle;
}
.p-form__table tbody tr:last-child th,
.p-form__table tbody tr:last-child td {
  border-bottom: 0;
}
.p-form__table thead th {
  background-color: rgba(0, 40, 255, 0.06);
  color: var(--color-base-dark);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.p-form__table tbody td:first-child {
  text-align: left;
  font-size: var(--fs-body-small);
  line-height: 1.5;
}
.p-form__table tbody td small {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: rgba(26, 26, 26, 0.6);
  font-weight: var(--fw-regular);
}
.p-form__table input[type="radio"] {
  accent-color: var(--color-accent2);
  cursor: pointer;
  width: 18px;
  height: 18px;
}

/* ===== SP: テーブルをカード状縦積みレイアウトに変換（横スクロール回避） ===== */
@media (max-width: 767px) {
  .p-form__tableWrapper {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  .p-form__table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  .p-form__table thead {
    display: none;                            /* 見出し行は隠す */
  }
  .p-form__table,
  .p-form__table tbody,
  .p-form__table tr,
  .p-form__table td {
    display: block;
    width: 100%;
  }
  .p-form__table tr {
    border: 1px solid var(--color-neutral);
    border-radius: 8px;
    padding: var(--sp-12);
    margin-bottom: var(--sp-12);
    background: #fff;
  }
  .p-form__table td {
    padding: 4px 0;
    text-align: left;
    border-bottom: 0;
  }
  .p-form__table tbody td:first-child {
    font-weight: var(--fw-bold);
    padding-bottom: var(--sp-8);
    margin-bottom: var(--sp-8);
    border-bottom: 1px dashed var(--color-neutral);
  }
  /* ラジオ td: 「◯ ラベル」順 + label 全体（テキスト含む）をタップ対象に */
  .p-form__table tbody td:not(:first-child) {
    display: inline-flex;
    width: auto;
    align-items: center;
    margin-right: var(--sp-12);
    font-size: var(--fs-body-small);
  }
  .p-form__table tbody td label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;                    /* タップ領域確保 */
    cursor: pointer;
    min-height: 32px;
  }
  /* label::after にテキスト挿入（label の中なのでタップ対象になる）*/
  .p-form__table tbody td:nth-child(2) label::after { content: '参加'; }
  .p-form__table tbody td:nth-child(3) label::after { content: '不参加'; }
  .p-form__table tbody td:nth-child(4) label::after { content: '未定'; }
}

.p-form__privacy {
  margin: var(--sp-32) 0 var(--sp-24);
  padding: var(--sp-16);
  background-color: rgba(0, 40, 255, 0.04);
  border-radius: 8px;
  font-size: var(--fs-body-small);
  text-align: center;
}
.p-form__privacy label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.p-form__privacy input[type="checkbox"] {
  accent-color: var(--color-accent2);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.p-form__privacy a {
  color: var(--color-accent2);
  font-weight: var(--fw-bold);
}

.p-form__submit {
  margin-top: var(--sp-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
}

.p-form__errors {
  background-color: rgba(229, 0, 18, 0.08);
  border: 1px solid var(--color-accent1);
  border-radius: 8px;
  padding: var(--sp-16);
  margin-bottom: var(--sp-24);
  color: var(--color-accent1);
  font-size: var(--fs-body-small);
}
.p-form__errors ul {
  margin: 0;
  padding-left: 1.5em;
}

/* ---- 汎用ボタン c-button ---- */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 14px 32px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-family-base);
  font-size: var(--fs-cta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), background-color var(--ease-fast), color var(--ease-fast);
  min-height: 52px;
}
.c-button:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.c-button--primary {
  background-color: var(--color-accent2);
  color: #fff;
}
.c-button--primary:hover {
  box-shadow: 0 8px 24px rgba(0, 40, 255, 0.32);
}
.c-button--secondary {
  background-color: var(--color-primary);
  color: #fff;
}
.c-button--secondary:hover {
  box-shadow: 0 8px 24px rgba(255, 193, 0, 0.4);
}
.c-button--outline {
  background-color: #fff;
  color: var(--color-base-dark);
  border-color: var(--color-neutral);
}
.c-button--outline:hover {
  border-color: var(--color-base-dark);
}
.c-button.js-ripple {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   PRIVACY POLICY ページ
   ========================================================================== */
.p-privacy {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16px;
  padding: var(--sp-32) var(--sp-24);
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06);
}
@media (min-width: 1024px) {
  .p-privacy { padding: 56px 64px; }
}

.p-privacy__intro {
  margin: 0 0 var(--sp-32);
  font-size: var(--fs-body);
  line-height: 1.95;
  color: var(--color-base-dark);
}

.p-privacy__heading {
  margin: var(--sp-32) 0 var(--sp-12);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-base-dark);
  letter-spacing: var(--ls-heading);
  line-height: 1.5;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-neutral);
}
.p-privacy__heading:first-of-type {
  margin-top: 0;
}

.p-privacy__body {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-body-small);
  line-height: 1.95;
  color: var(--color-base-dark);
}

.p-privacy__list {
  margin: 0 0 var(--sp-16);
  padding-left: 1.4em;
  font-size: var(--fs-body-small);
  line-height: 1.85;
  color: var(--color-base-dark);
}
.p-privacy__list li {
  list-style: disc;
  margin-bottom: 4px;
}

.p-privacy__link {
  color: var(--color-accent2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: var(--fw-bold);
}
.p-privacy__link:hover { opacity: 0.7; }

.p-privacy__date {
  margin: var(--sp-40) 0 0;
  text-align: right;
  font-size: var(--fs-small);
  color: rgba(26, 26, 26, 0.7);
  line-height: 1.7;
  padding-top: var(--sp-16);
  border-top: 1px solid var(--color-neutral);
}

.p-privacy__back {
  margin: var(--sp-40) 0 0;
  text-align: center;
}