/* ---- tokens.css ---- */
/* デザイントークン
 *
 * 由来:
 * - データ/08.千葉ロッテデザインデータ/ブランドガイドライン.md §1 / §14
 * - データ/08.千葉ロッテデザインデータ/DESIGN.md
 *
 * ガイドライン §14-1 サイトカラー Primary:
 *   MARINES BLACK #000000 / MARINES WHITE #ffffff / DARK GRAY #9f9f9f
 * §14-2 サイトカラー Secondary:
 *   TEXT COLOR BLACK #272727 / BACKGROUND S LIGHT GRAY #f7f7f7
 *
 * ブレイクポイントは PC/SP の2段階のみ。境界 960px。
 */

:root {
  /* ---- Surface（ガイドライン Primary + Secondary 準拠） ---- */
  --color-surface-base: #ffffff;          /* MARINES WHITE / §14-1 */
  --color-surface-dark: #f7f7f7;          /* BACKGROUND S LIGHT GRAY / §14-2 */
  --color-surface-card: #f2f2f2;          /* サポート色（実装上の3階調目） */
  --color-surface-card-hover: #e8e8e8;    /* サポート色（hover中間階調） */
  --color-surface-black: #000000;         /* MARINES BLACK / §14-1（Hero・ContactCTA・Primaryボタン） */

  /* ---- Text ---- */
  --color-text-primary: #000000;          /* MARINES BLACK */
  --color-text-secondary: #272727;        /* TEXT COLOR BLACK / §14-2 */
  --color-text-muted: #9f9f9f;            /* DARK GRAY / §14-1 */
  --color-text-on-dark: #ffffff;          /* MARINES WHITE */

  /* ---- Gray パレット（ガイドライン §1 Primary / §14-2 Secondary） ---- */
  --color-gray-light: #dddddd;            /* LIGHT GRAY / §1 Primary（ボタン hover 背景） */
  --color-bg-light-gray: #dcdcdc;         /* BACKGROUND COLOR LIGHT GRAY / §14-2 */
  --color-bg-dark-gray: #444444;          /* BACKGROUND COLOR DARK GRAY / §14-2 */

  /* ---- Border ---- */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.2);
  --color-border-on-dark: rgba(255, 255, 255, 0.2);

  /* ---- Overlay（画像上の暗グラデ用、§4-4 で生 rgba 直書き禁止のため alias） ---- */
  --color-overlay-strong: rgba(0, 0, 0, 0.8);   /* Hero 画像左側オーバーレイ強（→ transparent へフェード） */
  --color-overlay-mid:    rgba(0, 0, 0, 0.6);   /* Header グラデ上端（→ transparent へフェード） */

  /* ---- Font ----
   * JP = りょうゴシック PlusN（Adobe Fonts kit obd5ncv・本番 marines.co.jp/sponsor と同一） / EN = Inter。
   * ローダーは base.njk の head に埋め込み済み。
   */
  /* 葉トークンは総称フォントを持たない（単一ファミリ）。sans-serif はスタック末尾で1回だけ付ける。
   * ここに sans-serif を入れるとスタック展開時に "ryo-gothic-plusn", sans-serif, "Inter"… と
   * 中間に総称が混ざり、Inter に到達せず重複もする。 */
  --font-family-jp: "ryo-gothic-plusn";
  --font-family-en: "Inter";
  --font-family-stack:    var(--font-family-jp), var(--font-family-en), sans-serif;  /* "ryo-gothic-plusn", "Inter", sans-serif（日本語優先） */
  --font-family-stack-en: var(--font-family-en), var(--font-family-jp), sans-serif;  /* "Inter", "ryo-gothic-plusn", sans-serif（数字・英文優先） */

  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.3;
  --line-height-snug: 1.4;
  --line-height-base: 1.8;

  /* ---- Spacing ----
     実装で使われている px 値の頻度に合わせた 13 段階。
     近傍ノイズ（18 / 20 / 22 / 28 / 56 / 72px）は近い値に丸める方針。 */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 120px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 16px;
  --radius-pill: 50px;

  /* ---- Shadow ---- */
  --shadow-sticky: 0 24px 64px rgba(0, 0, 0, 0.14);

  /* ---- Motion ---- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 400ms;
  --duration-fast: 1000ms;

  /* ---- Layout ----
   * セクションインナー余白: SP=24px / TB=48px / PC=64px（3段階）
   * ブレイクポイント:
   *   SP  : 0 〜 959px   → 24px
   *   TB  : 960 〜 1079  → 48px
   *   PC  : 1080+        → 64px
   */
  --container-max: 1150px;
  --container-pad: 24px;          /* SP デフォルト */
  --section-py-sm: 80px;   /* py-20 */
  --section-py-lg: 112px;  /* py-28 */

  /* ---- Breakpoint ---- */
  --bp-tb: 960px;
  --bp-pc: 1080px;
}

@media (min-width: 960px) {
  :root {
    --container-pad: 48px;         /* TB */
  }
}

@media (min-width: 1080px) {
  :root {
    --container-pad: 64px;         /* PC */
  }
}


/* ---- reset.css ---- */
/* 最小限のリセット */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* details はネイティブ animation を保持 */
details > div {
  overflow: hidden;
}


/* ---- base.css ---- */
/* html / body / グローバル要素 */

/* Inter（可変フォント・SIL Open Font License）を自社配信に切り替え。
 * fonts.googleapis.com への外部リクエストを無くし、文字自体は同一のまま軽量化。
 * v20 latin subset の woff2 は 400〜900 の全ウェイトを1ファイルでカバーする可変フォント。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Sans JP（サブセット・SIL Open Font License）— ブランドガイドライン §6-4 の
 * 「Primaryフォント（りょうゴシックPlusN）が使用不可な場合の代替」を、Adobe Fonts確定前の
 * フォールバックとして採用。対象要素の実テキストで使われている文字だけに Google Fonts の
 * text= サブセットAPIで絞り込み済み。対象文字以外はこの @font-face にマッチしないため、
 * 他セクションの表示には影響しない。コピーを変更したら文字が不足し得るので再生成が必要。
 * 700は hero__lead に加え、ヘッダーナビ（解決できること/スポンサーメニュー/活用事例/
 * マリーンズの今）と CTA ボタン（お問合せ・資料請求）の文字も含む（changelog: Adobe Fonts
 * のkitが未使用ウェイト込み7種を非同期に読み込み、各ウェイト到達ごとに再描画されて
 * 「複数の書体が次々切り替わる」ように見える件の対症療法。ヘッダーは常時視界に入るため対象化）。 */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-900-subset.woff2") format("woff2");
  unicode-range: U+3042, U+3044, U+3046, U+304a-304c, U+3053-3056, U+3059-305c, U+305f-3060, U+3068-306b, U+306e, U+307e, U+308a, U+3092, U+3094, U+3099, U+30a8, U+30ad-30ae, U+30b9-30ba, U+30cd, U+30de, U+30ea-30eb, U+30f3, U+30fb-30fc, U+4f1a, U+5408, U+554f, U+6599, U+6c42, U+71b1, U+72c2, U+793e, U+8acb, U+8cc7;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-700-subset.woff2") format("woff2");
  unicode-range: U+36, U+3001-3002, U+304a, U+304d-304e, U+3053-3054, U+3057-3058, U+305b-305c, U+3064-306b, U+306e-3071, U+3081-3082, U+308b, U+3092, U+3099-309a, U+30a3, U+30af-30b0, U+30b5-30b6, U+30b9-30ba, U+30c6-30c7, U+30cb, U+30d5-30d7, U+30db-30de, U+30e1, U+30e5, U+30e9-30ea, U+30f3, U+30fb-30fc, U+4e8b, U+4eca, U+4f01, U+4f1a, U+4f8b, U+4fc2, U+5148, U+52d5, U+5316, U+53d6, U+5408, U+554f, U+55b6, U+5f15, U+5f37, U+63a1, U+6599, U+696d, U+6c42, U+6c7a, U+6d3b, U+732e, U+7528, U+793e, U+7d4c, U+89e3, U+8ab2, U+8acb, U+8ca2, U+8cc7, U+95a2, U+984c;
}

html {
  scroll-behavior: smooth;
  /* アンカーリンクのスクロール位置を固定ヘッダーの直下に合わせる。
   * SP/TB: SP レイヤー fixed 56px / PC: Compact レイヤー fixed 64px */
  scroll-padding-top: 56px;
}
@media (min-width: 1080px) {
  html {
    scroll-padding-top: 64px;
  }
}

body {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  /* SP/TB: ヘッダー(56px fixed)のクリアランス（SP/TB は SP レイヤーを fixed で使う）。
   * PC : Default ヘッダー(120px absolute) のクリアランス（Hero は -120 margin で相殺 → Hero 上の領域で header 重なり）。 */
  padding-top: 56px;
}
@media (min-width: 1080px) {
  main {
    padding-top: 120px;
  }
}

/* contact/download: ヘッダ常時 Compact のためクリアランスは Compact 高さ（64px PC / 56px SP） */
body.is-always-compact main {
  padding-top: 56px;
}
@media (min-width: 1080px) {
  body.is-always-compact main {
    padding-top: 64px;
  }
}

a {
  transition: color var(--duration-instant) var(--ease-default);
}

/* キーボード操作のフォーカス可視化 */
:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

/* スクロールバーはブラウザデフォルトに任せる（独自 styling 撤去） */


/* ---- layout.css ---- */
/* レイアウト原始体
 *
 * sponsor-lp-wire-design.md の規律:
 * - 全セクションのコンテナは <section><div class="section__inner"> パターン
 * - max-w-7xl mx-auto px-6 = max-width: 1150px; padding-inline: 24px;
 * - ブレイクポイントは 960px の1点のみ
 */

.section {
  padding-block: var(--section-py-sm);
}
@media (min-width: 960px) {
  .section {
    padding-block: var(--section-py-lg);
  }
}

.section--dark {
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
}
.section--soft {
  background-color: var(--color-surface-dark);
}
.section--card {
  background-color: var(--color-surface-card);
}

.section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 縦積み（モバイル）→ 横並び（PC）の基本グリッド */
.grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* PCでも常に縦積み・モバイルでは1列の単純スタック */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* 中央寄せのナロー幅（Hero テキストブロック等） */
.measure {
  max-width: 720px;
}

/* 視覚的隠蔽（aria 用テキスト） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---- components.css ---- */
/* 部品クラス
 *
 * sponsor-lp-wire-design.md の規律:
 * - タグは outline 型・シャープ角・細い黒ボーダー・白背景・ボールド黒文字
 * - カードは3エリア構成（画像／タイトル＋説明／特長）
 */

/* ---- Button ----
 * ブランドガイドライン §14-4 準拠
 * - Primary: 黒背景・白テキスト・ラウンド
 * - Secondary（=.btn--outline）: 白背景・黒枠・ラウンド
 * - Hover: グレー背景（Primary→DARK GRAY / Outline→LIGHT GRAY）
 * - Large: W320 × H64px / 14px Bold
 * - Small: W220 × H40px / 12px Bold
 * - 文字数が多い場合はラベル幅を可変（min-width で固定下限・上限なし）
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-7);
  min-height: 48px;                              /* default（Medium）— GL未指定の中間値 */
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  line-height: 1;
  text-align: center;
  transition: background-color var(--duration-instant) var(--ease-default),
              color var(--duration-instant) var(--ease-default),
              border-color var(--duration-instant) var(--ease-default);
  cursor: pointer;
}

/* Primary — 黒背景・白テキスト。Hover はガイドライン指定の「グレー背景」 */
.btn--primary {
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-surface-black);
}
.btn--primary:hover {
  background-color: var(--color-text-muted);     /* DARK GRAY #9f9f9f / §1 Primary */
  border-color: var(--color-text-muted);
}

/* Secondary（Outline）— 白背景・黒枠。Hover は LIGHT GRAY 背景 */
.btn--outline {
  background-color: var(--color-surface-base);   /* 白背景（§14-4 Secondary 仕様） */
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
}
.btn--outline:hover {
  background-color: var(--color-gray-light);     /* LIGHT GRAY #dddddd / §1 Primary */
}

/* Ghost dark — ガイドライン外の独自拡張。黒背景セクション専用。
 * 整合性のため Hover はグレー（明るくなる方向）。 */
.btn--ghost-dark {
  background-color: var(--color-surface-black);  /* 黒地 */
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-text-on-dark);
}
.btn--ghost-dark:hover {
  background-color: var(--color-text-muted);     /* DARK GRAY */
  border-color: var(--color-text-muted);
}

/* Solid light — ガイドライン外の独自拡張。黒背景セクション内で「目立たせる主CTA」用。
 * 白地・黒文字・枠なし。Primary を黒背景上で反転した変種。
 * Hover は地色（白）系統に合わせて LIGHT GRAY。 */
.btn--solid-light {
  background-color: var(--color-surface-base);   /* 白地 */
  color: var(--color-text-primary);
  border: 1px solid var(--color-surface-base);   /* 枠なし扱い（地と同色） */
}
.btn--solid-light:hover {
  background-color: var(--color-gray-light);     /* LIGHT GRAY #dddddd */
  border-color: var(--color-gray-light);
}

/* ---- Sizes（ガイドライン §14-4 固定寸法。文字数で可変は min-width で許容） ---- */
.btn--sm {
  min-width: 220px;
  min-height: 40px;
  padding: 0 var(--space-7);
  font-size: var(--font-size-sm);                /* 12px Bold */
}
.btn--lg {
  min-width: 320px;
  min-height: 56px;                              /* Hero CTA Figma 準拠（W320×H56）。§14-4 Large の H64 から LP 用に 56px に統一 */
  padding: 0 var(--space-7);
  font-size: 16px;                               /* 16px Bold（Figma Hero CTA / §14-4 Large 表記） */
}

/* Header CTA size — ガイドライン §14-4 とは別のサポートサイズ。
 * ヘッダーバー内に2つ並べる用途で、SM (W220) より狭い W128 固定。 */
.btn--header {
  min-width: 128px;
  min-height: 36px;
  padding: 0 var(--space-6);
  font-size: var(--font-size-sm);                /* 12px Bold */
  /* 常時視界に入るヘッダーCTAは Adobe Fonts 確定前も Noto Sans JP サブセットで表示（base.css参照） */
  font-family: "ryo-gothic-plusn", "Noto Sans JP", var(--font-family-en), sans-serif;
}

/* ---- Icon-in-button ----
 * 使い方: <a class="btn btn--primary">ラベル<svg class="btn__icon">…</svg></a>
 * .btn 既存の gap がアイコン間隔を担う。
 *
 * svg.btn__icon 自身に width/height を明示指定する。
 * 子 svg を使うパターン（<span class="btn__icon"><svg/></span>）の場合は
 * 中の svg にも同サイズが効くよう、子セレクタも併記する。
 */
.btn__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;                /* stroke ベース線画アイコンが塗りつぶされないように none。色は stroke="currentColor" 側で制御 */
  stroke: currentColor;
}
.btn__icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.btn--lg .btn__icon { width: 18px; height: 18px; }
.btn--sm .btn__icon,
.btn--header .btn__icon { width: 14px; height: 14px; }

/* ---- Tag（黒地白文字・LP標準・全セクション共通） ----
 * 規律: 新規に .*__tag を作らない。タグはこの .tag のみ使う。
 * sponsor-lp-html-design.md §7-1 参照。 */
.tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
/* スポンサーメニュー・活用事例のタグは元のサイズ（12px）のまま、太さだけ .tag のボールドを継承 */
.product-card .tag,
.case-card .tag {
  font-size: var(--font-size-sm);
}

/* ---- Section Head（セクション見出しブロック共通） ----
 * 構造:
 *   <header class="section-head">
 *     <p class="eyebrow">
 *       <span class="eyebrow__rule" aria-hidden="true"></span>
 *       解決できること
 *       <span class="eyebrow__rule" aria-hidden="true"></span>
 *     </p>
 *     <h2 class="section-title">タイトル</h2>
 *     <p class="section-lead">説明文</p>
 *   </header>
 * 規律: 新規セクションは .*__head / .*__eyebrow / .*__title / .*__lead を作らずこの canonical を使う。
 * sponsor-lp-html-design.md §7-2 参照。 */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-10);                /* 48px SP */
}
@media (min-width: 960px) {
  .section-head { margin-bottom: var(--space-11); } /* 64px PC */
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}
.eyebrow__rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}
.section-title {
  font-size: var(--font-size-4xl);               /* 32px SP */
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
  white-space: pre-line;
}
@media (min-width: 960px) {
  .section-title { font-size: var(--font-size-5xl); } /* 40px PC */
}
.section-lead {
  font-size: var(--font-size-lg);                /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---- Number index（01, 02 …） ---- */
.num {
  font-family: var(--font-family-stack-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
}

/* ---- EN font utility ----
 * 「en」「英文フォント」指定で使う。Inter を優先し、日本語混在時は りょうゴシック PlusN にフォールバック。
 * 数値訴求（年・%・万人・億円・人数 等）には .font-en を付ける、または .num-en で同等指定。
 */
.font-en,
.num-en {
  font-family: var(--font-family-stack-en);
}

/* ---- Stat num（大型の数値訴求用） ----
 * 規律: 大型数値（40px Black）はこのクラスを使う。新規に *__stat-num を作らない。
 * sponsor-lp-html-design.md §7-5 参照。 */
.stat-num {
  font-family: var(--font-family-stack-en);
  font-size: var(--font-size-5xl);                /* 40px */
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---- Media 16:9（画像 / 映像コンテナ・LP標準） ----
 * 規律: 16:9 の画像コンテナはこのクラスを使う。新規に *__image で aspect-ratio を書かない。
 * 使い方: <div class="media-16x9"><img src="..." alt=""></div>
 * 親カード側で background-color や placeholder 色を上書き可。
 * sponsor-lp-html-design.md §7-6 参照。 */
.media-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.media-16x9 > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Bullet list（番号 / チェックアイコン式・LP標準・全セクション共通） ----
 * 規律: 新規に .*__bullet を作らない。バレットはこの .bullet-list のみ使う。
 * 構造:
 *   <ul class="bullet-list">          番号式（既定）
 *     <li class="bullet-list__item">
 *       <span class="bullet-list__num">1</span>
 *       <span>テキスト</span>
 *     </li>
 *   </ul>
 *   <ul class="bullet-list bullet-list--check">  チェックアイコン式
 *     <li class="bullet-list__item">
 *       <img class="bullet-list__check" src="…/icon_check.svg" width="24" height="24" alt="">
 *       <span>テキスト</span>
 *     </li>
 *   </ul>
 * sponsor-lp-html-design.md §7-3 参照。 */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bullet-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}
.bullet-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--color-text-secondary);
  color: var(--color-text-on-dark);
  font-family: var(--font-family-stack-en);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.bullet-list__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
}
.bullet-list__item > :not(.bullet-list__num):not(.bullet-list__check) {
  flex: 1 1 0;
  min-width: 0;
}
/* チェックアイコン式は本文を一段大きく（form-page など、独立セクションでの強調用途） */
.bullet-list--check .bullet-list__item {
  font-size: var(--font-size-lg);
}

/* =========================
 * CTA Block — Plans / Services 共通 CTA（changelog #16）
 * Figma 80:1247 (Plans PC) / 95:2229 (Plans SP) / 95:2218 (Services PC) / 95:2237 (Services SP) 準拠
 * - 黒地 + bg_cta.webp（opacity 20%）を被せた背景
 * - 白文字、丸ピルボタン（W240/SP full、H48、200px radius）
 * - SP: 縦並び・PC: アクション横並び
 * ========================= */
.cta-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px 24px;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  overflow: hidden;
  isolation: isolate;            /* bg z-index を内側に閉じ込める */
  width: 100%;
}
@media (min-width: 960px) {
  .cta-block { padding: 64px 40px; }  /* changelog #25: 上下 64px に */
}

.cta-block__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}

.cta-block__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.cta-block__title {
  font-size: 20px;                                /* SP */
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  margin: 0;
  width: 100%;
}
@media (min-width: 960px) {
  .cta-block__title {
    font-size: 24px;
    text-align: center;
  }
}

.cta-block__lead {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  margin: 0;
  width: 100%;
}
@media (min-width: 960px) {
  .cta-block__lead { text-align: center; }
}

/* actions: SP 縦並び・PC 横並び（gap 8 / Figma 仕様） */
.cta-block__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
@media (min-width: 960px) {
  .cta-block__actions {
    flex-direction: row;
    width: auto;
  }
}

/* cta-block 内のボタンは .btn コンポーネントに集約済み（changelog #17）
 * - 相談  ：.btn .btn--outline .btn--lg（Hero CTA と同型）
 * - 資料DL：.btn .btn--ghost-dark .btn--lg
 * SP では actions コンテナ内で width:100% に伸ばす（btn--lg の min-width:320 を上書き） */
.cta-block__actions > .btn { width: 100%; min-width: 0; }
@media (min-width: 960px) {
  .cta-block__actions > .btn { width: auto; min-width: 320px; }
}


/* ---- sections.css ---- */
/* セクション固有スタイル
 *
 * このフェーズの目的:
 * - テキストが読める
 * - PC/SPで縦横が切り替わる（960px）
 * - グラフ・カードが「それっぽい」見た目で並ぶ
 *
 * ピクセルパーフェクトな調整は次フェーズ（Figma 反映時）。
 */

/* =========================
 * Header（Figma node 25:3142 / 25:24 / 25:3198 準拠）
 *
 * 3レイヤー構成:
 * - .site-header__layer--default : PC 黒背景・白文字。常時固定、scroll=0 で見えている
 * - .site-header__layer--compact : PC 白背景・黒文字。translateY(-100%) で隠れていて、
 *                                  .is-compact 付与で translateY(0) スライドイン（80px超）
 * - .site-header__layer--sp      : SP 白背景。常時固定、右端に黒い 56px のメニューボタン
 *
 * クラス制御:
 * - scripts/header.js が scrollY > 80 で <header data-site-header> に .is-compact 付与
 * - PC/SP の出し分けは media (min-width: 960px) で display 切替
 * ========================= */
.site-header {
  position: relative;
  z-index: 40;
}

/* レイヤーの出し分け（3段階ブレイクポイント）
 * - SP/TB（〜1079px）: SP レイヤーのみ表示。TB は SP レイヤー内に CTA を追加表示
 * - PC（1080+）       : Default / Compact レイヤーを表示 */
.site-header__layer--default,
.site-header__layer--compact {
  display: none;
}
.site-header__layer--sp {
  display: block;
}
@media (min-width: 1080px) {
  .site-header__layer--default,
  .site-header__layer--compact {
    display: block;
  }
  .site-header__layer--sp {
    display: none;
  }
}

/* Default レイヤー: 黒地グラデ・白文字（PC、Figma 3:2 = 高さ 120px / changelog #9）
 * position: absolute で Hero と重なって配置（Figma で y=0 起点が一致）
 *   → ページ最上部で Hero の上にオーバーレイ
 *   → スクロールすると body の上端から離れて自然にスクロールアウト（フローには載っていない）
 * 背景は Figma 3:2 準拠で「上が純黒 → 下が DARK GRAY(#9f9f9f)」の縦方向グラデ。
 * 他ページ（Contact/Download/DS）は main の padding-top:120 でコンテンツが隠れないようにし、
 * Hero のみ margin-top:-120 で padding を打ち消して重なりを成立させる。 */
.site-header__layer--default {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* グラデ撤去（ユーザー指示）。背景透明で Hero の上に乗る */
  background: transparent;
  color: var(--color-text-on-dark);
  z-index: 40;
}

/* Compact レイヤー: 白背景・黒文字（PC、Figma 64px、スライドイン固定）
 * Figma 仕様準拠でボーダー無し。 */
.site-header__layer--compact {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  z-index: 41;
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease-default);
  will-change: transform;
}
.site-header.is-compact .site-header__layer--compact {
  transform: translateY(0);
}

/* contact/download ページ: ヘッダを常時 Compact 表示
 * - Default レイヤーは非表示
 * - Compact レイヤーは translateY(0) で固定表示（is-compact クラスと同等の見た目を常時）
 * - SP レイヤーは元から常時表示なので影響なし */
body.is-always-compact .site-header__layer--default { display: none; }
body.is-always-compact .site-header__layer--compact {
  transform: translateY(0);
}

/* SP レイヤー: 白背景・黒文字（Figma 70:270 = 56px、常時固定、ボーダー無し）
 * 切替なし。Hero は margin-top:-56 で y=0 から始まり、上 56px は SP layer の白地で隠れる構造。 */
.site-header__layer--sp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  z-index: 40;
}

/* レイヤー内部のコンテナ — Figma の高さに合わせて padding-block を分配。
 * 左右パディングは PC=48px / SP=24px の統一ルール（--container-pad で吸収）。
 * max-width 1150 + margin-inline auto で .section__inner とコンテンツ位置を揃える。 */
.site-header__container {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.site-header__layer--default .site-header__container {
  padding-block: 28px;   /* 28 + 64(nav) + 28 = 120px = Figma 3:2。logo は flex center で自動配置 */
}
.site-header__layer--compact .site-header__container {
  padding-block: 0;      /* 上下パディング無し。container 高さは nav 64px と一致 = Figma Compact 64px */
}
.site-header__container--sp {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 0 0 var(--container-pad);
  gap: 24px;
  /* SP は logo (30px) + 上下 13px = 56px。メニューボタンは full-height 56px。
   * 子の高さで決まるので padding-block は不要。右パディング無し（メニュー flush right）。 */
}
.site-header__layer--sp .site-header__logo {
  padding-block: 12px;   /* 12 + 32(logo) + 12 = 56 = Figma 70:269 */
}

/* ロゴグループ（画像ロゴ + 縦線 + sponsorshipguide ワードマーク）
 * default レイヤーは自然幅（ナビが空きを吸収）。compact / SP はフル幅で他要素を右端へ押し出す。 */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.site-header__layer--compact .site-header__logo {
  flex: 1 1 0;
}
.site-header__logo--sp {
  flex: 1 1 0;
  gap: 12px;
}
/* M シンボル（Figma 仕様: default 55x48 / compact 46x40 / sp は compact 流用） */
.site-header__logo-mark {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.site-header__layer--compact .site-header__logo-mark {
  height: 40px;
}
/* SP（Figma 70:269）: M ロゴ 32px + 上下 padding 12px = 56px */
.site-header__logo--sp .site-header__logo-mark {
  height: 32px;
}
/* logo-divider は changelog #9 で撤去（Figma 3:2 にロゴと文字間の縦線が無いため） */

/* ロゴ右側テキスト（旧 sponsorguide.svg マスクからテキストに変更）
 * 構造: 千葉ロッテマリーンズ（上）/ スポンサーシップガイド（下） */
.site-header__logo-text {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;                     /* changelog #24: default 2行マージン 4px */
  line-height: 1;
  white-space: nowrap;
}
.site-header__layer--compact .site-header__logo-text {
  gap: 4px;                     /* changelog #24: compact 2行マージン 4px */
}
.site-header__logo--sp .site-header__logo-text {
  gap: 4px;                     /* changelog #24: SP 2行マージン 4px */
}
.site-header__logo-jp {
  font-family: var(--font-family-stack-en);  /* changelog #24: en指定 → Inter */
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  letter-spacing: 0.02em;
}
.site-header__logo-en {
  font-family: var(--font-family-stack-en);  /* changelog #24: en指定 → Inter */
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.site-header__layer--compact .site-header__logo-jp {
  font-size: 14px;
}
.site-header__layer--compact .site-header__logo-en {
  font-size: 18px;
}
.site-header__logo--sp .site-header__logo-jp {
  font-size: 10px;
}
.site-header__logo--sp .site-header__logo-en {
  font-size: 14px;
}

/* ナビ */
.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0;
}
/* compact ではロゴがフル幅。ナビは自然幅で CTA に近接 */
.site-header__layer--compact .site-header__nav {
  flex: 0 0 auto;
}
/* ナビ各項目（Figma 「123 Hug × 64 Fill」準拠）
 * 構造分担:
 * - <a>: クリック反応エリア。高さ 64px、左右 padding 12px。下線は持たない
 * - <span.site-header__nav-text>: 文字幅で inline-flex、下端に 1px 下線（領域予約）。
 *   下線がテキスト幅と完全一致するのは span が文字内容で auto 幅になるため
 * - Default / Compact ともに 1px、色は currentColor で各レイヤーから自動 */
.site-header__nav a {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 12px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  font-family: "ryo-gothic-plusn", "Noto Sans JP", var(--font-family-en), sans-serif;
  letter-spacing: 0.01em;
  color: currentColor;
  white-space: nowrap;
}
.site-header__nav-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
  border-bottom: 2px solid transparent;             /* 領域予約。active 時のシフト防止 */
  transition: border-bottom-color 0.15s var(--ease-default);
}
.site-header__nav a:hover .site-header__nav-text,
.site-header__nav a.is-active .site-header__nav-text {
  border-bottom-color: currentColor;
}

/* changelog #28: ナビ項目が増えて幅で詰まるとき、左から順に display:none で逃がす。
 * 1280px 以下 → 先頭 1 つ非表示 / 1180px 以下 → 先頭 2 つ非表示。
 * 1080px 未満は PC ナビ自体が非表示（site-header__layer--default が消える）。 */
@media (max-width: 1279px) {
  .site-header__nav > a:nth-child(1) { display: none; }
}
@media (max-width: 1179px) {
  .site-header__nav > a:nth-child(2) { display: none; }
}

/* CTA 2個 — Default は btn--outline（白地黒文字、黒bg上で見える白pill）、
 *           Compact は btn--primary（黒地白文字、白bg上で見える黒pill）。
 *           SP/TB レイヤー内では .site-header__cta--tb 修飾子で TB のみ表示制御。
 *           どちらも §14-4 標準形に整合（独自バリアント不要）。 */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* TB（960〜1079px）でのみ SP レイヤー内の CTA を表示
 * .site-header__cta より後に書くこと（特異性同じため記述順の後勝ち） */
.site-header__cta--tb {
  display: none;
}
@media (min-width: 960px) {
  .site-header__cta--tb {
    display: flex;
  }
}

/* SP のメニューボタン（黒い 56px 正方形） */
.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-default);
}
.site-header__menu:hover {
  background-color: var(--color-text-muted);
}

/* =========================
 * Mobile Nav パネル（site-header__menu からトリガー）
 * ========================= */
/* 旧 mobile-nav__toggle は廃止（site-header__menu に統合） */
.mobile-nav__panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--color-surface-base);
  flex-direction: column;
}
.mobile-nav__panel.is-open { display: flex; }
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;                     /* close ボタンのみ表示 → 右寄せ */
  height: 56px;                                  /* デフォルトヘッダ（SP layer）と同じ高さ */
  padding: 0 var(--container-pad);
}
.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-right: calc(var(--container-pad) * -1);  /* 右パディング相殺で full-bleed タップ領域 */
  background: transparent;
  border: 0;
  cursor: pointer;
}
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-7) var(--container-pad);
}
.mobile-nav__list a {
  font-size: 20px;                               /* 指示: 20px */
  font-weight: var(--font-weight-bold);
  font-family: "ryo-gothic-plusn", "Noto Sans JP", var(--font-family-en), sans-serif;
  color: var(--color-text-secondary);
}
.mobile-nav__footer {
  margin-top: auto;
  padding: 0 var(--container-pad) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-nav__footer .btn { width: 100%; }
.mobile-nav__copy {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
}

/* =========================
 * Hero（Figma node 3:22 PC / 33:4359 SP 準拠 — changelog #9）
 *
 * 構成:
 * - SP: 黒地・縦並び。.hero__inner（テキスト+CTA）→ .hero__image（aspect 1920/1080）が下に並ぶ
 * - PC: .hero__image を absolute fill で背景化し、左30%→右70%の黒グラデで暗く落とす。
 *       .hero__inner（テキスト+CTA）を z-index で上にオーバーレイ
 * ========================= */
.hero {
  position: relative;
  /* display: flex を撤去（block default）。子の .hero__inner と .hero__image は
   * 通常のブロックフローで縦並びになる。.hero__inner の max-width / margin による
   * 左寄せが flex item の align によって阻害されない構造に。 */
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  overflow: hidden;
  padding-block: 0;
}
/* SP/TB: SP layer(56px fixed transparent) と重ねるため負マージンで main の padding-top:56 を相殺。
 * PC   : Default header(120px absolute) と重ねるため負マージンで main の padding-top:120 を相殺。
 * → Hero が常に viewport y=0 から開始し、header と視覚的に重なる（Figma 3:2 + 3:22 / 33:4359 一致）。 */
.hero { margin-top: -56px; }
@media (min-width: 1080px) {
  .hero { margin-top: -120px; }
}

/* Hero __inner — Figma の pt/pb 非対称を反映（上に多くの余白、下は狭め）
 * SP : pt 120 / pb 48（Figma 33:4360）
 * PC : pt 240 / pb 80（Figma 3:22）
 * 背景画像（.hero__image）はフル幅。
 * 内部要素は他セクションと同じ「コンテンツ最大幅」(.section__inner 継承)：
 *   max-width: 1150 + margin-inline: auto + padding-inline: container-pad で中央寄せ。
 * 内部の hero__copy / hero__cta は block 子要素として左揃え。 */
.hero__inner {
  position: relative;
  z-index: 1;                    /* PC で画像 overlay より上に */
  padding-block: 120px 48px;
  /* max-width / margin-inline / padding-inline は .section__inner クラスから継承 */
}
@media (min-width: 960px) {
  .hero__inner { padding-block: 240px 80px; }
}

/* タイトル ↔ リードの隙間 — Figma 33:4445 / 33:4361 で gap-24（旧 16 から変更） */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Adobe Fonts（Typekit）確定までのフォールバックを、ブランドガイドライン §6-4
 * （Primaryフォントが使用不可な場合の代替＝Noto Sans JP）に差し替える。
 * base.css で該当4見出しの実テキストのみをサブセット化した Noto Sans JP を自社配信しており
 * （unicode-range で対象文字だけに限定、汎用 sans-serif よりりょうゴシックPlusNに近い字形）、
 * 確定前から見た目の近いフォントで即表示できるため、visibility:hidden 等で隠す必要がなくなった。
 * りょうゴシックPlusN確定後は自動でそちらに切り替わる（wf-active時、Typekitのkit CSSが優先）。 */
.hero__title,
.hero__lead,
.form-page__title,
.thanks-page__title {
  font-family: "ryo-gothic-plusn", "Noto Sans JP", var(--font-family-en), sans-serif;
}

/* タイトル — Figma 3:22 / 33:4416 準拠（旧の横線アクセントは撤去）
 * SP: 36px / 4行（短く折り返し、`<br class="br-sp">` で SP のみ追加改行）
 * PC: 56px / 2行
 * ※ 36px / 56px とも DS のフォントサイズトークン外（スケールは …24 → 32 → 40 で 36 は無い）。
 *   hero は表示用ディスプレイ見出しのため raw px で指定する。 */
.hero__title {
  font-size: 40px;                                /* SP（36→40に拡大） */
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0;
}
@media (min-width: 960px) {
  .hero__title { font-size: 56px; }
}

/* SP では `<br class="br-sp">` を改行として効かせる。PC では display: none で消す */
.br-sp { display: inline; }
@media (min-width: 960px) {
  .br-sp { display: none; }
}

/* PC でのみ改行を効かせる（SP では消す）。.br-sp の逆。 */
.br-pc { display: none; }
@media (min-width: 960px) {
  .br-pc { display: inline; }
}

/* リード — Figma 33:4455 (text-16 leading-1.75)
 * changelog #25: 幅をフル（max-width 撤去）→ コンテナ幅いっぱい */
.hero__lead {
  font-size: 16px;                                /* SP: 通常サイズ */
  font-weight: var(--font-weight-bold);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  margin: 0;
}
@media (min-width: 960px) {
  .hero__lead {
    font-size: 18px;                              /* TB は従来どおり */
    font-weight: var(--font-weight-bold);
  }
}
@media (min-width: 1080px) {
  .hero__lead {
    font-size: 20px;                              /* PCのみ少し拡大 */
  }
}

/* CTA — Figma 3:26 / 33:4370
 * SP: 縦並び・全幅 H56（Figma 33:4371 w-full）
 * PC: 横並び・各 W320 H56（Figma 25:101 w-[320px]）
 * .hero__inner が block 化したため、.hero__copy との間隔は margin-top で再現 */
.hero__cta {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
.hero__cta .btn {
  width: 100%;
  min-width: 0;               /* .btn--lg の 320px 下限を解除して親幅に従わせる */
}
@media (min-width: 960px) {
  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }
  .hero__cta .btn { width: 320px; }
}

/* Hero 画像エリア
 * <img> から CSS background-image に切替（リサイズ時のレンダリング負荷軽減）。
 * SP/PC 共通: absolute fill で .hero__inner（テキスト+CTA）の背景として敷く。
 * SP: 上（テキストが乗る側）が暗く、下へ向かうほど明るくなる縦グラデ。
 * PC: 左（テキストが乗る側）が暗く、右へ向かうほど明るくなる横グラデ。 */
.hero__image {
  position: absolute;
  inset: 0;
  background-image: url("../images/img_fv.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* SP: 上30%は黒地に近く（--color-overlay-strong = 元画像が20%透過）、下へ向かうほど明るくなる */
.hero__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-overlay-strong) 0%, transparent 55%);
}
@media (min-width: 960px) {
  /* 左端は黒地に近く（--color-overlay-strong: rgba(0,0,0,0.8) = 元画像が20%透過）、
   * 30%地点までに明るさを立ち上げきり、それ以降は画像そのまま（transparent）。
   * テキストが乗る左側の可読性を確保しつつ、右側の大部分は写真の明るさを活かす。 */
  .hero__image::before {
    background: linear-gradient(to right, var(--color-overlay-strong) 0%, transparent 30%);
  }
}

/* Section head の正は components.css の .section-head / .eyebrow / .section-title / .section-lead */

/* =========================
 * Solution（旧 Target）— Figma node 4:2 / 45:4991 準拠
 * - PC ≥1080: 3×2 / TB 960-1079: 2×3 / SP <960: 1×6
 * - section padding: 80px (SP) / 120px (TB/PC)
 * - eyebrow「— 解決できること —」/ タイトル 32px(SP)→40px(TB+) / リード 16px
 * - カード: ナンバー(64px Inter Bold #9f9f9f) ＋ タイトル(20px Black) ＋ タグ(黒地白)+横線 ＋ 本文(14px justify)
 * ========================= */
.solution {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
}

/* .section__inner のデフォルト（max-width: 1150, margin: auto, padding-inline: container-pad）を継承 */
.solution__inner {
  /* （デフォルト継承、上書きなし） */
}

.solution__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 48px;
}

.solution__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.solution__eyebrow-rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}

.solution__title {
  font-size: 24px;                        /* SP */
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 960px) {
  .solution__title { font-size: 40px; }   /* TB/PC */
}

.solution__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* グリッド: SP 1col / TB 2col / PC 3col、gap 40px */
.solution__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;                    /* SP: カード 1〜6 間マージン 24px */
}
@media (min-width: 960px) {
  .solution__grid {
    grid-template-columns: repeat(2, 1fr);   /* TB */
    gap: 40px;                  /* TB/PC は従来どおり 40px */
  }
}
@media (min-width: 1080px) {
  .solution__grid { grid-template-columns: repeat(3, 1fr); }   /* PC */
}

/* ----- Issue Card ----- */
.issue-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 旧 outline カードのスタイルは廃止（Figma は枠線なし） */
}

/* 番号 + 横線を1行に（コンパクトな "1.----" 形式） */
.issue-card__num-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.issue-card__num {
  flex-shrink: 0;
  font-family: var(--font-family-stack-en);    /* Inter 優先（規律 §5-2 数値訴求） */
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);              /* DARK GRAY #9f9f9f */
}

.issue-card__num-rule {
  flex: 1 0 0;
  height: 1px;
  background-color: var(--color-border-strong); /* rgba(0,0,0,0.2) */
}

.issue-card__title {
  font-size: 20px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}

/* タグ + 横線（Solution 専用）。.tag 体系（outline）には影響させない */
.issue-card__meta {
  display: flex;
  align-items: center;
  width: 100%;
}
.issue-card__rule {
  flex: 1 0 0;
  height: 1px;
  background-color: var(--color-surface-black); /* #000000（Figma 仕様の不透明黒 1px） */
}

.issue-card__body {
  font-size: var(--font-size-lg);               /* 16px（changelog: 14px から拡大） */
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);          /* #272727 */
  text-align: justify;
  margin: 0;
}

/* =========================
 * Message（サブロー監督メッセージ）
 * 背景: .section--dark（黒 / 白文字）を流用。
 * レイアウト:
 *   SP: 見出し→本文→写真（横長トリミング）→サインの縦積み。
 *       .message__body を display:contents にして中身を .message__inner に展開し、
 *       .message__image と合わせて order で並び替える（.feature-row と同じ手法）。
 *   PC: 横並び・本文が左、画像が右（DOM 順 [image, body] を row-reverse で反転）。
 * ========================= */
.message__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 960px) {
  .message__inner {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 56px;
  }
}

.message__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media (min-width: 960px) {
  .message__image {
    width: 340px;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
  }
}
.message__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
@media (min-width: 960px) {
  .message__image img { object-position: 48% 50%; }
}

.message__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
@media (min-width: 960px) {
  .message__body { flex: 1 1 0; }
}
/* SP: body を展開して .message__image と order で並び替え（後勝ちさせるため base の直後に置く） */
@media (max-width: 959px) {
  .message__body { display: contents; }
  .message__body .section-head        { order: 1; }
  .message__image                      { order: 2; }
  .message__body .message__text-group  { order: 3; }
  .message__body .message__signature   { order: 4; }
}

/* .section-head / .eyebrow / .section-title は共通クラス（他セクションと統一）。
 * ダーク背景用に文字色のみ上書きし、外側の margin-bottom は .message__body 側の gap と
 * 二重になるため打ち消す。 */
.message__body .section-head { margin-bottom: 0; }
.message .eyebrow { color: var(--color-text-on-dark); }
.message .section-title { color: var(--color-text-on-dark); }

.message__text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message__text {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  opacity: 0.85;
  text-align: justify;
  margin: 0;
}

.message__signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 960px) {
  .message__signature {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}
.message__signature-img {
  width: 160px;
  height: auto;
  display: block;
  flex-shrink: 0;
  filter: invert(1);    /* 黒インクのサインを白背景向けに反転 */
}
@media (min-width: 960px) {
  .message__signature-img { width: 190px; }
}
.message__role {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin: 0;
}

/* =========================
 * Plans — Figma node 6:2 (PC) / 80:1248 (SP) 準拠（changelog #13）
 * ========================= */

/* セクション全体: Figma py 80(SP) / 120(PC)、px は container-pad */
.plans {
  padding-block: 80px;                           /* SP: 80 */
}
@media (min-width: 960px) {
  .plans { padding-block: 120px; }               /* PC: 120 */
}

/* .section__inner のデフォルト（max-width: 1150, margin: auto, padding-inline: container-pad）を継承
 * 加えて flex column gap 48 で section head / plan-card 群 / CTA を縦並び */
.plans__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;                                     /* Figma 親 gap: 48 */
}

/* section head: eyebrow + title + lead（gap 16 で縦並び）*/
.plans__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.plans__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin: 0;
  /* 親 .plans__head は items-start なので、eyebrow も左寄せ（Figma 通り） */
}
.plans__eyebrow-rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: var(--color-text-secondary);
}
.plans__title {
  font-size: 24px;                              /* SP: 24 */
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 960px) {
  .plans__title { font-size: 40px; }            /* PC: 40 */
}
.plans__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* plans__list: 3 plan-card + CTA を gap 48 で縦並び（Figma 親 gap 48） */
.plans__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* plan-card: PC 横並び（左コンテンツ flex-1 / 右画像 400px） / SP 縦並び（上コンテンツ / 下画像 240px）*/
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  background: transparent;
}
@media (min-width: 960px) {
  .plan-card {
    flex-direction: row;
    align-items: stretch;
  }
}

/* 左カラム（コンテンツ） */
.plan-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  min-width: 0;
}
@media (min-width: 960px) {
  .plan-card__content { flex: 1 0 0; }
}

/* head: 一行説明 16px Regular + 軸名タイトル 28px Black（Figma 80:1023, gap 4） */
.plan-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
.plan-card__title {
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.plan-card__one-liner {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}

/* description: head の下に 14px Regular の補足文（Figma 95:1813、両端揃え） */
.plan-card__description {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  text-align: justify;
  margin: 0;
}

/* features: タグ+横線 head + 番号付き bullet list */
.plan-card__features {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-card__features-head {
  display: flex;
  align-items: center;
  width: 100%;
}
.plan-card__features-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.plan-card__features-rule {
  flex: 1 0 0;
  height: 1px;
  background-color: var(--color-surface-black);
}
.plan-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.plan-card__bullet {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.plan-card__bullet-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;                                 /* grow/shrink 0、basis 20px で固定 */
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;                            /* テキスト複数行時の縦伸びを防止 */
  border-radius: 50%;                             /* 完全正円 */
  background-color: var(--color-text-secondary);  /* #272727 */
  color: var(--color-text-on-dark);
  font-family: var(--font-family-stack-en);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  align-self: center;                             /* 親 flex で縦中央配置（text 複数行時も中央）*/
}
.plan-card__bullet-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

/* services: ラベル + pill タグ wrap */
.plan-card__services {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-card__services-label {
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
  /* 旧 services-label の border-top / padding-top はリセット */
  border: 0;
  padding: 0;
  text-transform: none;
}
.plan-card__services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;                                   /* Figma gap: 0px 4px */
  align-items: flex-start;
  width: 100%;
}
.plan-card__service-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-surface-base);
  border: 1px solid #e5e5e5;
  border-radius: 100px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  white-space: nowrap;
  margin-bottom: 4px;                           /* 折返し時の行間 4px（Figma の意図、復活） */
}

/* 右カラム（画像）: PC 400px 固定 / SP w-full × 240px
 * img タグそのものに当てる前提（changelog #16）。object-fit:cover で枠フィット。 */
.plan-card__image {
  width: 100%;
  height: 240px;                                /* SP: 240px */
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
@media (min-width: 960px) {
  .plan-card__image {
    width: 400px;                               /* PC: 400px */
    height: auto;
    min-height: 240px;                          /* コンテンツが短いカードでも最低限 */
    align-self: stretch;                        /* コンテンツと同高 */
  }
}

/* 最下部 CTA は components.css の .cta-block へ移譲（changelog #16） */

/* =========================
 * Services — Figma 6:225 (PC) / 95:1997 (SP) 準拠（changelog #15）
 * - bg: #F7F7F7（.section--soft で適用）
 * - PC: 8カテゴリ × 各カテゴリ 3カード横並び（PC は cards 3列、SP は 1列）
 * - 製品カード: 画像 + tags（黒地白文字） + 名称 20px + 説明 14px 両端揃え + bullet × N（20px 円）
 * - section padding: SP 80 / PC 120（共通 token は PC 112 なので Plans と同じく override）
 * ========================= */
.services { padding-block: 80px; overflow: visible; }
@media (min-width: 960px) {
  .services { padding-block: 120px; }
}

/* services__inner: section head / list / outro を縦並びで gap 48 制御（plans と同パターン） */
.services__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: visible;                            /* カルーセル左 peek が 1150 枠で切れないよう */
}

/* section head: eyebrow + title + lead（plans と同等） */
.services__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin: 0;
}
.services__eyebrow-rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: var(--color-text-secondary);
  flex-shrink: 0;
}
.services__title {
  font-size: 24px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 960px) {
  .services__title { font-size: 40px; }
}
.services__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* カテゴリー一覧 — 1パネル内に6ボタン（サムネ左 + 01. カテゴリ名） */
.services-overview {
  width: 100%;
  margin-top: 8px;
  display: none;
}
@media (min-width: 960px) {
  .services-overview { display: block; }
}
.services-overview__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--color-surface-card);   /* gap 線: margin（surface-dark）より一段濃い #f2f2f2 */
  border: 1px solid var(--color-surface-card); /* 外枠も gap と同色 */
  overflow: hidden;
}
@media (min-width: 640px) {
  .services-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .services-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.services-overview__item {
  margin: 0;
  min-width: 0;
}
.services-overview__btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: none;
  border-radius: 0;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-default),
    color 0.2s var(--ease-default);
}
.services-overview__btn:hover:not(.is-active) {
  background-color: var(--color-surface-card);
}
.services-overview__btn.is-active {
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
}
.services-overview__btn.is-active:hover {
  background-color: var(--color-bg-dark-gray);
}
.services-overview__media {
  flex-shrink: 0;
  width: 48px;
  height: 36px;
  background-color: var(--color-bg-light-gray);
  overflow: hidden;
}
.services-overview__num {
  font-family: var(--font-family-stack-en);
}
.services-overview__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-overview__caption {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 960px) {
  .services-overview__btn {
    min-height: 56px;
    padding: 10px 14px;
    gap: 12px;
  }
  .services-overview__media {
    width: 56px;
    height: 42px;
  }
  .services-overview__caption {
    font-size: 15px;
  }
}
@media (min-width: 1200px) {
  .services-overview__caption {
    font-size: 16px;
  }
}

/* sticky-wrap: services__nav の position:sticky を「カード群終端」で解除させる親
 * （changelog #17）。CTA は wrap 外に置く構造で、CTA に到達した瞬間 nav は流れる。
 * gap で nav と list の間隔を確保（Figma 視覚調整で 48px）。 */
.services__sticky-wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
}

/* カテゴリナビ — Figma 102:2259 準拠（changelog #17）
 * - 白地・pill (radius 100px)・H48・padding-x 24px
 * - 各リンク padding-x 12px / 14px Regular / letter-spacing 0.01em
 * - sticky で ヘッダ下に固定（SP 56px / PC 64px = compact 高）
 * - 幅狭で横スクロール、スクロールバー非表示
 * - アンダーラインはヘッダナビ仕様継承（span に border-bottom transparent → currentColor on hover/active） */
.services__nav {
  position: sticky;
  top: 72px;                                     /* SP layer 高さ 56px + 余白 16px */
  z-index: 30;                                   /* ヘッダ (40〜41) より下、コンテンツより上 */
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  background-color: var(--color-surface-base);
  border-radius: 100px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;                         /* Firefox: スクロールバー非表示 */
  transition: box-shadow 0.2s var(--ease-default);
}
.services__nav::-webkit-scrollbar { display: none; }
@media (min-width: 1080px) {
  .services__nav { top: 80px; }                  /* PC: Compact ヘッダ高さ 64px + 余白 16px */
}
/* sticky 中だけ薄い影を出す（is-stuck は JS で付与） */
.services__nav.is-stuck {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.services__nav-track {
  display: flex;
  align-items: center;
  height: 100%;
}

.services__nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-size: var(--font-size-md);                /* 14px */
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.services__nav-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
  border-bottom: 1px solid transparent;          /* 領域予約。active 時のシフト防止 */
  transition: border-bottom-color 0.15s var(--ease-default);
}

.services__nav-link:hover .services__nav-text,
.services__nav-link.is-active .services__nav-text {
  border-bottom-color: currentColor;
}

/* services__list: 8カテゴリ縦並び（Figma 親 gap 48） */
.services__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* service-cat: head + cards、gap 24 column
 * scroll-margin-top: ヘッダ高 + nav 高 + 余白 で アンカースクロール時に見出しが隠れないように */
.service-cat {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: calc(72px + 48px + 16px);   /* SP: 136px（ヘッダ56 + 余白16 + nav48 + 余白16） */
}
@media (min-width: 1080px) {
  .service-cat { scroll-margin-top: calc(80px + 48px + 16px); }  /* PC: 144px（ヘッダ64 + 余白16 + nav48 + 余白16） */
}
.service-cat__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
.service-cat__label {
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.service-cat__desc {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.service-cat__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;                                    /* Figma 6:234 準拠（PC・SP 共通） */
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 960px) {
  .service-cat__cards {
    flex-direction: row;
    align-items: stretch;
  }
}

/* ============================================================
 * services 横スライド（タブ切替）
 * - tabs: pill 内に横並び、SP は横スクロール、active は下線
 * - viewport: overflow hidden、track を translateX で移動
 * - slide: 1カテゴリ = 100% 幅
 * ============================================================ */
.services__slider {
  display: flex;
  flex-direction: column;
  gap: 0;
  --slide-gap: 16px;
  --slide-peek: 44px;
  --carousel-duration: 0.6s;
  /* overview ナビからのスクロール停止位置は services-slider.js で window.scrollTo(-64px) 制御 */
}

/* タブバー — services__nav の pill 見た目を踏襲 */
.services__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background-color: var(--color-surface-base);
  border-radius: 100px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}
.services__tabs::-webkit-scrollbar { display: none; }

.services__tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-radius: 100px;
  font-family: inherit;
  font-size: var(--font-size-md);              /* 14px */
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-default), color 0.15s var(--ease-default);
}
.services__tab:hover {
  color: var(--color-text-primary);
}
.services__tab.is-active {
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-bold);
}
.services__tab-text {
  display: inline-block;
}

/* 見出しバー: SP=タイトル上・ナビ下 / PC=左=番号+カテゴリ名 / 右=矢印で挟んだカウンタ */
.services__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 960px) {
  .services__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* 現在カテゴリ見出し（番号 + ラベル、service-cat__label の 28px Black を踏襲）
 * SP=24px / PC=28px（changelog #31: カルーセル各タイトルを SP 24px に） */
.services__current {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  font-size: 24px;
  font-weight: var(--font-weight-black);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
@media (min-width: 960px) {
  .services__current { font-size: 28px; }
}
.services__current-num {
  font-family: var(--font-family-stack-en);      /* 番号は EN 優先 */
}
.services__current-dot {
  margin-right: 8px;
}

/* コントロール: 矢印 ‹ カウンタ › を1行で */
.services__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.services__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  min-width: 48px;                               /* 桁変動での横揺れ防止 */
  justify-content: center;
  font-family: var(--font-family-stack-en);      /* 数字訴求は EN 優先 */
  letter-spacing: 0.04em;
  line-height: 1;
}
.services__counter-current {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.services__counter-sep,
.services__counter-total {
  font-size: var(--font-size-md);               /* 14px */
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.services__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-strong);
  border-radius: 100px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-default), opacity 0.15s var(--ease-default);
}
.services__arrow:hover {
  background-color: var(--color-gray-light);     /* ボタン規律: outline hover はグレー */
}
.services__arrow:disabled,
.services__arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.services__arrow-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* プログレスバー: 現在位置ぶんだけ黒く伸びる */
.services__progress {
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: 24px;                             /* 見出しバーとの空き */
  background-color: var(--color-gray-light);     /* LIGHT GRAY のレール */
  overflow: hidden;
}
.services__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background-color: var(--color-surface-black);
  transition: width var(--carousel-duration) var(--ease-default);
}

/* ビューポート + トラック
 * 寸法・padding-left は services-slider.js が px で設定
 * viewport = 画面全幅（左 peek が window 左端で切れない） */
.services__viewport {
  margin-top: 32px;
  max-width: none;
  overflow: hidden;
  transition: height var(--carousel-duration) var(--ease-default);
}
.services__track {
  display: flex;
  align-items: flex-start;
  gap: var(--slide-gap);
  padding-left: 0;                              /* JS: コンテンツ左端 = タイトル位置 */
  transition: transform var(--carousel-duration) var(--ease-default);
  will-change: transform;
}

.services__slide {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* JS 無効時のフォールバック: 縦積みに戻す */
.no-js .services__viewport { overflow: visible; }
.no-js .services__track { display: block; }
.no-js .services__slide + .services__slide { margin-top: 48px; }
.no-js .services__tabs { display: none; }

/* SP overlay arrows（SP のみ表示） */
.services__viewport-wrap {
  position: relative;
}
.services__sp-arrow {
  display: none;
}
@media (max-width: 959px) {
  /* SP カード幅（= flex-basis）。矢印位置もこの値から算出してカードと一致させる #33
     コンテンツ幅いっぱい（100vw - 左右paddingぶん）= 他セクションの内容右端と揃う */
  .products-slider-wrap {
    --sp-card-w: calc(100vw - var(--container-pad) * 2);
  }
  .services__sp-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* 画像（16:9）の下端から 16px 上（矢印 44px 高）#33 */
    top: calc(var(--sp-card-w) * 9 / 16 - 44px - 16px);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
  }
  /* prev=画像左下16px / next=画像右下16px（カード右端から16px内側）#33 */
  .services__sp-arrow--prev { left: 16px; right: auto; }
  .services__sp-arrow--next { left: calc(var(--sp-card-w) - 44px - 16px); right: auto; }
}

/* SP: 18枚フラットスクロール */
@media (max-width: 959px) {
  .services__inner { gap: 16px; }
  .services__bar { display: none; }
  .services__progress { margin-top: 0; }
  .services__viewport { margin-top: 12px; }
  .services__controls { display: none; }
  .product-card__tags { display: none; }
  .service-cat__cards .bullet-list { display: none; }
  .product-card__desc + .bullet-list { display: none; }

  /* カテゴリラッパーをフラット化して18枚連続スライドを実現 */
  .service-cat { display: contents; }
  .service-cat__cards { display: contents; }
  .service-cat__head { display: none; }

  /* Viewport → SP スクロールコンテナ（フル幅ブリード） */
  .services__viewport {
    height: auto;
    margin-left: -24px;
    width: calc(100% + 48px);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: none;
  }
  .services__viewport::-webkit-scrollbar { display: none; }

  /* Track: JS の translateX を無効化 + カード高さを最長に統一 */
  .services__track {
    transform: none !important;
    transition: none !important;
    align-items: stretch;
    gap: 16px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* カード: SP では78vw固定幅でスナップ */
  .product-card {
    flex-shrink: 0;
    width: 78vw;
    scroll-snap-align: start;
  }

  /* カテゴリ名を1行に収める */
  .services__current {
    font-size: 18px;
    max-width: calc(100vw - 48px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* product-card: bg-white、column、overflow-clip、角丸なし */
.product-card {
  background-color: var(--color-surface-base);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
}
@media (min-width: 960px) {
  .product-card { flex: 1 0 0; width: auto; min-width: 0; scroll-snap-align: none; }
}

/* image: aspect-ratio と <img> の object-fit は .media-16x9 で担保。ここでは画像未配置時の placeholder bg のみ */
.product-card__image {
  background-color: var(--color-surface-black);
}

/* body: padding 32（左右マージンを広げてテキストの折返し・余白バランスを改善）, column gap 8 */
.product-card__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  flex: 1 1 auto;
}

/* tags: row gap 2 items-center、複数タグ対応 */
.product-card__tags {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.product-card__tags:empty { display: none; }

/* name: 20px Black leading 1.5 */
.product-card__name {
  font-size: 20px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
}

/* desc: 14px Regular #272727 leading 1.75 text-justify */
.product-card__desc {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  text-align: justify;
  margin: 0;
  width: 100%;
}

/* desc → bullet-list 間の区切り線（product-card 限定。空 features のカードでは表示されない）
 * changelog #31: 罫線をカード端までフル幅に。
 * - align-self: stretch … body は align-items:flex-start で ul が内容幅に縮むため、明示的に全幅化
 * - margin-inline:-24px … body の padding(24px) を打ち消して border-box をカード幅まで広げる
 * - padding-inline:24px … リスト本文は元の 24px インセットに戻す（罫線だけ左右いっぱい） */
.product-card__desc + .bullet-list {
  align-self: stretch;
  margin-inline: -24px;
  padding-inline: 24px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* 全体ラインナップ CTA は components.css の .cta-block へ移譲（changelog #16）
 * changelog #31: services の CTA リードは SP=両端揃え / PC=センター。
 * SP の改行は HTML 側で <br class="br-pc"> にしてあるため SP は改行なしで justify される。 */
.services__cta .cta-block__lead {
  text-align: justify;          /* SP */
}
@media (min-width: 960px) {
  .services__cta .cta-block__lead { text-align: center; }   /* PC はセンター */
}

/* products-slider-wrap: SP=矢印・カウンターのアンカー */
.products-slider-wrap {
  position: relative;
}

/* products-grid: SP=横スクロール / PC=3列グリッド */
.products-grid {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  /* section__inner のパディングを打ち消してフルブリード */
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  /* scroll-snap が左 padding を 0 に詰めるのを防ぎ、開始位置を 24px(container-pad) に揃える #33 */
  scroll-padding-inline: var(--container-pad);
  padding-bottom: 16px;
  scrollbar-width: none;
}
.products-grid::-webkit-scrollbar { display: none; }

.products-grid .product-card {
  flex: 0 0 var(--sp-card-w, 82%);
  scroll-snap-align: start;
}

/* SP: bullet list を非表示にして説明短縮 */
.products-grid .bullet-list { display: none; }

@media (min-width: 960px) {
  .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .products-grid .product-card { flex: none; }
  .products-grid .bullet-list { display: flex; }
}

/* services__official: 仕切り + オフィシャル権益ブロック */
.services__official {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.services__official-rule {
  border: none;
  border-top: 1px solid var(--color-surface-black);   /* feature-row（マリーンズの今）の罫線と同色 #33 */
  margin: 0;
}

.services__official-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.services__official-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  line-height: 1.3;
}

@media (min-width: 1080px) {
  .services__official-head { align-items: center; text-align: center; }
  .services__official-title { font-size: var(--font-size-3xl); }
}

.services__official-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* NEW タグ: アクセントなし（黒地白文字の .tag と区別するための別バリアント）*/
.tag--accent {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
}

/* product-card__new-placeholder: 画像未設定時の黒地プレースホルダー */
.product-card__new-placeholder {
  position: absolute;
  inset: 0;
  background: var(--color-surface-black);
}

/* =========================
 * Cases — 活用事例（changelog #18）
 * Figma 7:3 (PC) / 107:2639 (SP) 準拠
 * - PC: 左180px フィルター sticky + 右2列カードグリッド
 * - SP: 縦並び（select プルダウン + 1列カード）
 * ========================= */
.cases { padding-block: 80px; }
@media (min-width: 960px) {
  .cases { padding-block: 120px; }
}
.cases__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* section head（services と同パターン: eyebrow + title + lead） */
.cases__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cases__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin: 0;
}
.cases__eyebrow-rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: var(--color-text-secondary);
  flex-shrink: 0;
}
.cases__title {
  font-size: 24px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 960px) {
  .cases__title { font-size: 40px; }
}
.cases__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* グリッド（changelog #26: フィルター撤廃 / PC 3列 / SP 1列） */
.cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 960px) {
  .cases__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 初期表示は6件まで。「もっと見る」クリックで .is-expanded が付与され、全件表示。 */
.cases__grid > .case-card:nth-child(n+7) {
  display: none;
}
.cases.is-expanded .cases__grid > .case-card:nth-child(n+7) {
  display: flex;
}

/* もっと見る（フル幅バー型・changelog #31）
 * - 上下ボーダー付きのフル幅バー（上のカード列との margin は 16px = グリッド gap と一致）
 * - hover で背景 base10（rgba(0,0,0,0.1) = --color-border）。テキスト・アイコンは不変 */
.cases__more {
  display: flex;
  /* cases__inner は gap:48px。more バーはその gap に加えて margin が乗ると 48+16=64px 開くため、
   * calc(16 - 48) でグリッドとの実質間隔を 16px に揃える（changelog #31 追補） */
  margin-top: calc(16px - 48px);
}
.cases.is-expanded .cases__more {
  display: none;
}
.cases__more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 8px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-default);
}
.cases__more-link:hover {
  background-color: var(--color-border);
}
.cases__more-icon {
  width: 16px;
  height: 16px;
}

/* ---- case-card（Figma 6:234 系の単体カード仕様で全面書き換え） ----
 * bg #f7f7f7 / padding 24 / gap 8 / 角丸なし
 * 内部: tag → メタ → タイトル → challenge → 結果ボックス（bg-white） */
.case-card {
  background-color: var(--color-surface-dark);    /* #F7F7F7 */
  border: 0;
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-card__tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.case-card__meta {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

.case-card__title {
  margin: 0;
  font-size: 20px;                                /* SP/PC 共通（Figma 準拠、SP の小型化はしない） */
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

.case-card__challenge {
  margin: 0;
  font-size: 14px;                                /* SP/PC 共通 */
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  text-align: justify;
}

/* 結果ボックス: bg white、内側 padding 0 12 12（上は 0 で arrow を box 上端にぴったり）、gap 4
 * 左右マージンをギリギリまで詰めてテキスト幅を最大化（orphan wrap防止）。
 * gap は arrow分(12px)を差し引いて bottom padding(12px)と釣り合うよう調整
 * （旧16pxだと上28px/下12pxで不均衡・8pxでも上20px/下12pxでまだ差があったため4pxに）。 */
.case-card__result {
  margin-top: auto;                               /* カード下部にぴったり寄せる */
  padding: 0 12px 12px;                           /* top:0 で arrow の上の空きをカット */
  background-color: var(--color-surface-base);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.case-card__result-arrow {
  display: block;
  width: 24px;
  height: 12px;
}
.case-card__result-label {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-black);
  letter-spacing: 0.05em;
  color: var(--color-text-primary);
}
.case-card__result-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-card__result-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-primary);
}
.case-card__result-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 3px;                                /* 行高との視覚バランス */
  font-family: var(--font-family-stack-en);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-on-dark);
  background-color: var(--color-text-secondary);  /* #272727 */
  border-radius: 50%;
}
.case-card__result-text {
  flex: 1 0 0;
}

/* =========================
 * Now（千葉ロッテマリーンズの今）— Figma node 4:54 / 45:5263 / 45:5274 準拠
 * - SP < 960: 縦積み（body → stats 縦並び → image full / aspect 4:3）
 * - TB/PC: body 左（flex-1） + image 右（400px / aspect そのまま）
 * - feature-row 上端に 1px 黒の border-top
 * ========================= */
.now {
  background-color: var(--color-surface-dark);   /* #f7f7f7 */
  color: var(--color-text-primary);
  /* #13 で取り組み（黒帯）を末尾に移動。下余白は initiatives__inner の padding-bottom で確保 */
  padding-bottom: 0;
}

/* .section__inner のデフォルト（max-width: 1150, margin: auto, padding-inline: container-pad）を継承 */
.now__inner,
.now__assets-inner {
  /* （デフォルト継承、上書きなし） */
}

.now__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 48px;
}
.now__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.now__eyebrow-rule {
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}
.now__title {
  font-size: 24px;                              /* SP（他セクションの見出しに統一） */
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 960px) {
  .now__title { font-size: 40px; }              /* TB/PC */
}
.now__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* feature-row 3つを縦に並べる */
.now__rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ----- Feature Row ----- */
.feature-row {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 24px;                            /* SP/TB/PC 共通: 上 24px（Figma 45:5445 / 45:5263 準拠） */
  border-top: 1px solid var(--color-surface-black);   /* 1px black */
}
@media (min-width: 960px) {
  .feature-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
}

/* body 左（PC は flex-1）、SP はフル幅。
 * SP のみ display:contents で子要素（copy/stats/lead）を .feature-row の直接の
 * flex item にし、.feature-row__image と合わせて order で並び替える
 * （見出し→画像→説明→数字の順）。 */
.feature-row__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
@media (max-width: 959px) {
  .feature-row__body { display: contents; }
  .feature-row__copy  { order: 1; }
  .feature-row__image { order: 2; }
  .feature-row__lead  { order: 3; }
  .feature-row__stats { order: 4; }
}
@media (min-width: 960px) {
  .feature-row__body { flex: 1 0 0; }
}

.feature-row__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-row__title {
  font-size: 20px;                                /* SP: now__title(h2, 22px)より小さくして階層を明確化 */
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 960px) {
  .feature-row__title { font-size: 28px; }        /* TB/PC は従来どおり */
}
.feature-row__title-num {
  font-family: var(--font-family-stack-en);    /* Inter 優先（規律 §5-2 数値訴求） */
  color: var(--color-surface-black);           /* #000000 */
}
.feature-row__lead {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  text-align: justify;
  margin: 0;
}

/* ----- Feature Row: stats grid（3 数字カード） -----
 * 子の白カードを 1px 間隔で並べる。背景に親の灰色 (--color-border) が透けて 1px の線になる。
 * SP は 2 列グリッド（3つ目は2列目下に単独配置）、TB/PC は横並び 3 col */
.feature-row__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--color-border);         /* 隙間に見える grid 線 */
}
@media (min-width: 960px) {
  .feature-row__stats { grid-template-columns: repeat(3, 1fr); }
}
.feature-row__stat {
  background-color: var(--color-surface-base);
  padding: 16px 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;                                  /* grid item のオーバーフロー防止 */
}
/* SP 2列グリッドで3個目（＝最後かつ奇数番目）が余った時、隣に空セルができるのを防ぐため全幅に広げる */
.feature-row__stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 960px) {
  .feature-row__stat:last-child:nth-child(odd) {
    grid-column: auto;                            /* TB/PC は3列で常に埋まるため解除 */
  }
}
.feature-row__stat-label {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
  white-space: pre-line;                        /* "\n" を改行に */
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-row__stat-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* SP は2列グリッドでカード幅が狭いため、5桁の数字（26,018 等）が収まるよう縮小 */
.feature-row__stat-value .stat-num {
  font-size: 28px;
}
@media (min-width: 960px) {
  .feature-row__stat-value .stat-num {
    font-size: var(--font-size-5xl);              /* 40px（TB/PC は従来どおり） */
  }
}
.feature-row__stat-prefix {
  font-family: var(--font-family-stack);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
}
.feature-row__stat-unit {
  font-family: var(--font-family-stack);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  white-space: pre-line;
}
.feature-row__stat-sub {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-surface-black);
  margin: 0;
  white-space: nowrap;
}

/* ----- Feature Row: 画像（右 400px / SP は full + aspect 4:3） ----- */
.feature-row__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;                          /* SP: 400/300 = 4:3 */
  background-color: var(--color-surface-black);
  overflow: hidden;
}
@media (min-width: 960px) {
  .feature-row__image {
    width: 400px;
    flex-shrink: 0;
    align-self: stretch;                        /* body と同高 */
    aspect-ratio: auto;
  }
}
.feature-row__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
 * Initiatives（千葉ロッテマリーンズの取り組み）— Figma node 56:150 準拠
 * - now セクション内のサブブロック（section__inner の外に配置してフル幅）
 * - 背景 #272727 (DARK GRAY)、section head は中央寄せ白文字、上部に下向き矢印
 * - grid: 1px 隙間で背景の DARK GRAY が透けて 1px 線になる構造（white card × DARK GRAY bg）
 * - カード: padding 24 / gap 8 / 黒地白文字タグ + title 20px Black + body 14px
 * ========================= */
/* .initiatives は背景フル幅で、内部の .initiatives__inner で 1150 max-w 中央寄せ
 * （他セクションの section / section__inner 構造と同じ役割分担） */
.initiatives {
  background-color: var(--color-text-secondary);  /* #272727 */
  color: var(--color-text-on-dark);
  margin-top: 48px;
  padding-bottom: 0;                            /* 下余白は __inner、CTA との空き 0 */
}

.initiatives__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 上部の下向き三角矢印 — arrow.svg（#F7F7F7、now bg と同色で「now が initiatives に食い込む」表現）
 * Figma: PC 120×60 (62:5549) / SP 80×40 (62:5587) */
.initiatives__arrow {
  display: block;
  width: 80px;
  height: 40px;
  flex-shrink: 0;
}
@media (min-width: 960px) {
  .initiatives__arrow {
    width: 120px;
    height: 60px;
  }
}

.initiatives__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
}
.initiatives__title {
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  margin: 0;
}
.initiatives__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  margin: 0;
}

/* grid: 1px gap で背景の DARK GRAY を線として見せる */
.initiatives__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: 100%;
  margin-top: 24px;                               /* head ↔ grid gap 48 = 24(gap) + 24(margin) */
}
@media (min-width: 960px) {
  .initiatives__grid { grid-template-columns: repeat(2, 1fr); }    /* TB 2col */
}
@media (min-width: 1080px) {
  .initiatives__grid { grid-template-columns: repeat(3, 1fr); }    /* PC 3col */
}

/* initiative-card — 画像 + content (tag+title+body) の2エリア構成（Figma 62:5552 準拠 / changelog #10） */
.initiative-card {
  background-color: var(--color-surface-base);    /* 白 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--color-text-primary);               /* カード内は黒文字に戻す */
  overflow: hidden;
}
/* aspect-ratio と <img> の object-fit は .media-16x9 で担保。ここでは画像未配置時の placeholder bg のみ */
.initiative-card__image {
  background-color: var(--color-bg-light-gray);
}
.initiative-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.initiative-card__label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  margin: 0;
}
.initiative-card__title {
  font-size: 20px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.initiative-card__body {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  text-align: justify;                          /* 長文は両端揃え（feature-row__lead / issue-card__body と同方針） */
  margin: 0;
}

.initiative-card__placeholder {
  position: absolute;
  inset: 0;
  background: var(--color-bg-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* =========================
 * Stadium card — Figma node 80:535 (PC) / 80:600 (SP) 準拠（changelog #10）
 * - initiatives の最後に配置されるヒーロー風カード
 * - 黒地 + 背景画像 (opacity 24%) オーバーレイ + 中央寄せタイトル + 3 stats
 * - PC: stats 3 横並び（flex 1px gap）/ SP: 縦並び
 * ========================= */
.stadium-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  overflow: hidden;
  margin-top: 24px;                              /* 親 .initiatives の gap:24 と合わせて initiatives__grid との空きを 48px に */
}
.stadium-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.stadium-card__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stadium-card__inner {
  padding: 80px 24px;                            /* SP: py 80 / px 24 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
@media (min-width: 960px) {
  .stadium-card__inner { padding: 80px 40px; }   /* PC: py 80 / px 40 */
}
.stadium-card__tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.stadium-card__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-weight: var(--font-weight-black);
  color: var(--color-text-on-dark);
  margin: 0;
}
.stadium-card__title-year-line {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.stadium-card__title-year {
  font-family: var(--font-family-stack-en);     /* Inter Black */
  font-size: 48px;                              /* SP: 48px */
  line-height: 1;
  letter-spacing: 0.02em;
}
@media (min-width: 1080px) {
  .stadium-card__title-year { font-size: 64px; }  /* PC: 64px */
}
.stadium-card__title-year-suffix,
.stadium-card__title-main {
  font-family: var(--font-family-stack);
  font-size: 32px;
  line-height: 1.5;
}
.stadium-card__title-main {
  display: block;
}
.stadium-card__body {
  max-width: 800px;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  text-align: justify;
  margin: 0;
}
/* stats: SP 縦並び 1px gap / PC 横並び 1px gap（背景に親の黒が透けて白カード×3 が並ぶ） */
.stadium-card__stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 960px) {
  .stadium-card__stats {
    flex-direction: row;
    justify-content: center;
  }
}
.stadium-card__stat {
  flex: 1 0 0;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.stadium-card__stat-label {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
}
.stadium-card__stat-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}
.stadium-card__stat-prefix {
  font-family: var(--font-family-stack);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  white-space: pre-line;                        /* "\n" を改行に */
  text-align: right;
}
.stadium-card__stat-num {
  font-family: var(--font-family-stack-en);     /* Inter Black */
  font-size: 40px;
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: 0.02em;
}
.stadium-card__stat-unit {
  font-family: var(--font-family-stack);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  white-space: pre-line;                        /* "\n" を改行に */
}

/* =========================
 * Assets（数字で見るマリーンズ）— Figma node 57:150 (PC) / 80:761 (SP) 準拠 / changelog #11
 * - Now セクションの最後（initiatives の下）に配置、section__inner で container 幅
 * - 親 .assets: gap 32 / 黒太枠 4px の assets-blocks 内に 3 block を gap 64 で並べる
 * - 各 block: 黒地ヘッダー + lead + tag+横線 + 中身 (#272727 背景、padding 40/24)
 * - block-01 集客力: 動員数グラフ（PC/SP picture で出し分け）
 * - block-02 ファンクラブ会員: 3 chart 横並び (gap 24, PC/SP 共通)
 * - block-03 発信力: SNS 5 (PC 横並び / SP 縦並び、1px gap)
 * ========================= */
.assets {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;                              /* initiatives との空き */
}
.assets__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assets__title {
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.assets__lead {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.assets__blocks {
  border: 4px solid var(--color-surface-black);
  padding: 24px;                                 /* SP: 24 */
  display: flex;
  flex-direction: column;
  gap: 48px;                                     /* SP: 48 */
  overflow: hidden;
  /* 24px 方眼グリッド背景（changelog #12-2）— rgba(0,0,0,0.05) で薄く */
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}
@media (min-width: 960px) {
  .assets__blocks {
    padding: 40px;                               /* PC: 40 */
    gap: 64px;                                   /* PC: 64 */
  }
}

/* ----- assets-block 共通 ----- */
.assets-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                                     /* Figma block 内 gap: 16 */
  overflow: hidden;
}
/* head: 28px Black 黒地白文字タグ + 1px 横線 */
.assets-block__head {
  width: 100%;
  display: flex;
  align-items: center;
}
.assets-block__head-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  padding: 8px 10px;                             /* Figma px-10 py-8 */
  border-radius: var(--radius-xs);
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;                                     /* h3 のブラウザデフォルトマージンをリセット */
}
.assets-block__head-rule {
  flex: 1 0 0;
  height: 1px;
  background-color: var(--color-surface-black);
}
/* body: 16px Regular text-justify の lead */
.assets-block__body {
  width: 100%;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-align: justify;                            /* Figma text-justify */
  margin: 0;
}
/* subtitle: 16px Black 黒文字 小タイトル（前回の「タグ+横線」は head に移行、ここはシンプルテキスト） */
.assets-block__subtitle {
  width: 100%;
  font-size: 16px;
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.assets-block__note {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0;
}

.assets-block__media {
  background-color: var(--color-text-secondary);  /* #272727 */
  padding: 16px;                                  /* SP: 16（block-01 / block-02 用） */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 960px) {
  .assets-block__media { padding: 40px; }         /* PC: 40（共通） */
}
/* block-02 ファンクラブ会員（charts）/ block-03 発信力（sns）は SP の padding が
 * block-01 と異なる（Figma 80:950 / 80:967）。SP: 横 16 / 縦 40、PC: 共通 40 */
.assets-block__media--charts,
.assets-block__media--sns {
  padding: 40px 16px;
}
@media (min-width: 960px) {
  .assets-block__media--charts,
  .assets-block__media--sns { padding: 40px; }
}
.assets-block__media picture {
  display: block;
  width: 100%;
}
.assets-block__media picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- charts grid（block 02 ファンクラブ会員）-----
 * SP < 960: 3 chart 縦並び gap 40（Figma 80:950）
 * PC >= 960: 3 chart 横並び gap 24（各列 flex-1 等幅）*/
.charts-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
@media (min-width: 960px) {
  .charts-grid {
    flex-direction: row;
    gap: 24px;
  }
}
.charts-grid__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 960px) {
  .charts-grid__item {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
  }
}
.charts-grid__image {
  width: 100%;
  aspect-ratio: 454 / 450;                       /* Figma 正方寄りのアスペクト */
  display: flex;
  align-items: center;
  justify-content: center;
}
.charts-grid__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.charts-grid__label {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  margin: 0;
  white-space: nowrap;
}

/* ----- SNS grid（block 03 発信力）-----
 * SP < 960: 5 縦並び gap 40（Figma 80:967）/ PC >= 960: 5 横並び gap 8 */
.sns-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;                                      /* SP: 40 */
  align-items: center;
  justify-content: center;
}
@media (min-width: 960px) {
  .sns-grid {
    flex-direction: row;
    gap: 8px;                                     /* PC: 8 */
  }
}
.sns-grid__item {
  width: 100%;
  background-color: var(--color-text-secondary);  /* 親と同色 #272727 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-on-dark);
}
@media (min-width: 960px) {
  .sns-grid__item {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
  }
}
/* SVG アイコン自体を 56px で直接表示（changelog #12-3 で円を撤去）
 * icon_*.svg は fill: #fff の白塗りつぶしなので、#272727 の親背景上に白く浮かぶ */
.sns-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.sns-grid__icon img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.sns-grid__platform {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  text-align: center;
  margin: 0;
}
.sns-grid__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}
.sns-grid__unit {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-family-stack);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
}

/* =========================
 * Assets card（旧仕様・未使用、changelog #11 で .assets / .assets-block に置換済み）
 * ========================= */
.assets-card {
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}
.assets-card__block {
  padding: 28px;
  border-bottom: 1px solid var(--color-border);
}
.assets-card__block:last-child { border-bottom: 0; }
@media (min-width: 960px) {
  .assets-card__block { padding: 48px; }
}
.assets-card__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.assets-card__head h4 {
  font-size: 20px;
  font-weight: var(--font-weight-black);
}
@media (min-width: 960px) {
  .assets-card__head h4 { font-size: 24px; }
}
.assets-card__block > p {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.85;
}
.assets-card__block > p b {
  font-family: var(--font-family-stack-en);  /* 1,915,246人・15.2万人 等の数値強調 */
  color: var(--color-text-primary);
  font-weight: var(--font-weight-black);
}

/* =========================
 * Chart image（観客動員グラフ・既存サイトの画像）
 * ========================= */
.chart-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin: 28px 0 18px;
}
.chart-image {
  display: block;
  width: 100%;
}
.chart-image img {
  display: block;
  width: 100%;
  height: auto;
}
.chart-note {
  margin-top: 18px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.chart-note--right { text-align: right; }

/* =========================
 * Pie chart（既存サイトの円グラフ画像：性別・年代・居住地）
 * ========================= */
.pie-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 600px) {
  .pie-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .pie-row { gap: 40px; }
}
.pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.pie__label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.pie__image {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
}

/* 旧 .sns-grid 系（grid 3/5列レイアウト + 灰色テキスト）は changelog #11 の新 .sns-grid 系（1537行〜）に置換済みで削除 */
.sns-foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}
.sns-foot b {
  font-family: var(--font-family-stack-en);  /* 100番組以上 の 100 を en 優先 */
  font-size: 24px;
  font-weight: var(--font-weight-black);
  flex-shrink: 0;
}
.sns-foot b span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-left: 4px;
}
.sns-foot > span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* =========================
 * News — お知らせ（changelog #21 / Figma 7:141 PC / 125:971 SP）
 * - <details>/<summary> アコーディオン
 * - サマリー: [メタ(タグ+日付)] / [タイトル] / [chevron]（左1fr + 右24）
 * - パネル: bg #F7F7F7, 本文 + 画像 + リンクボタン
 *   PC: 本文 1fr + 画像 W320×180、リンクは W240 中央寄せ
 *   SP: 本文 + 画像 縦並び（画像はフル幅 750:422）、リンクはフル幅
 * - body / image / link は任意。画像が無い場合、本文が全幅まで広がる
 * - セクション上 / 各 item に #E5E5E5 のセパレータ
 * ========================= */
.news {
  border-top: 1px solid #e5e5e5;                  /* セクション上セパレータ */
  padding-block: 64px;
}

/* inner: SP 縦並び gap 40 / PC 2カラム gap 40 */
.news__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 960px) {
  .news__inner {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* タイトル: SP 32px / PC 40px Black */
.news__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
@media (min-width: 960px) {
  .news__title {
    font-size: 40px;
    width: 200px;
    flex-shrink: 0;
  }
}

/* リスト */
.news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 0 0;
}
.news__list-item {
  border-top: 1px solid #e5e5e5;
}
.news__list-item:last-child {
  border-bottom: 1px solid #e5e5e5;
}

/* details ラッパー */
.news__item {
  padding-block: 24px;
  /* auto キーワードへの transition を許可（Chrome 129+ / Safari 18.4+。
   * Firefox 未対応はネイティブの瞬時開閉にフォールバック） */
  interpolate-size: allow-keywords;
}

/* アコーディオン展開アニメ:
 * - ::details-content を block-size 0 → auto で遷移
 * - 24px の間隔は ::details-content 側の padding-block-start として持たせる
 *   → [open] 解除時に gap が瞬時に消えてパネルがズレる現象を回避
 * - content-visibility も allow-discrete で同期、閉時もスムーズに畳む
 * - @starting-style で「開き始めの block-size」を明示しないと開時のアニメが効かない */
.news__item::details-content {
  block-size: 0;
  padding-block-start: 0;
  overflow: clip;
  transition: block-size var(--duration-instant) var(--ease-default),
              padding-block-start var(--duration-instant) var(--ease-default),
              content-visibility var(--duration-instant) var(--ease-default);
  transition-behavior: allow-discrete;
}
.news__item[open]::details-content {
  block-size: auto;
  padding-block-start: 24px;                      /* サマリーとパネルの間隔 */
}
@starting-style {
  .news__item[open]::details-content {
    block-size: 0;
    padding-block-start: 0;
  }
}

/* サマリー: 左メインカラム + 右 chevron。デフォルトの marker は消す */
.news__summary {
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  list-style: none;                               /* Firefox の marker を消す */
}
.news__summary::-webkit-details-marker {
  display: none;                                  /* Safari/Chrome の marker を消す */
}
.news__summary:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}

/* サマリー左カラム: 縦並びで [メタ] → [タイトル]（gap 8px） */
.news__head {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.news__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 日付: 16px Inter Bold #9F9F9F */
.news__date {
  margin: 0;
  font-family: var(--font-family-stack-en);       /* Inter 優先 */
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);                 /* #9F9F9F */
  white-space: nowrap;
}

/* タグ: 黒地白文字 12px、padding 10/6、radius 4、幅 120px 固定（Figma 準拠） */
.news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--color-text-on-dark);
  background-color: var(--color-surface-black);
  border-radius: 4px;
  white-space: nowrap;
}

/* タイトル: 20px Bold（JP 既定スタック＝りょうゴシック PlusN を継承）。hover でグレー化 */
.news__heading {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  transition: color var(--duration-instant) var(--ease-default);
}
.news__summary:hover .news__heading {
  color: var(--color-text-muted);             /* DARK GRAY #9F9F9F（§14-1） */
}

/* chevron: 24×24。open 時に 180° 回転（down → up）。色は currentColor で hover 連動 */
.news__chevron {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: center;
  color: var(--color-text-primary);
  transition: transform var(--duration-instant) var(--ease-default),
              color var(--duration-instant) var(--ease-default);
}
.news__chevron > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.news__item[open] .news__chevron {
  transform: rotate(180deg);
}
.news__summary:hover .news__chevron {
  color: var(--color-text-muted);             /* DARK GRAY #9F9F9F */
}

/* パネル: bg #F7F7F7, padding 24, gap 24（コンテンツ + リンク） */
.news__panel {
  background-color: var(--color-surface-dark);    /* #F7F7F7 */
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;                            /* リンクボタンを中央寄せ（PC W240） */
}

/* パネルコンテンツ: SP 縦並び / PC 本文+画像 横並び */
.news__panel-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 960px) {
  .news__panel-content {
    flex-direction: row;
    align-items: flex-start;
  }
  /* 画像なしの場合は flex-direction が row のままでも本文 1 要素なので自然に全幅 */
}

/* 本文: 16px Regular, line-height 1.75 */
.news__body {
  flex: 1 0 0;
  margin: 0;
  min-width: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

/* 画像: SP フル幅で 750:422 / PC W320×H180 固定 */
.news__image {
  width: 100%;
  aspect-ratio: 750 / 422;
  overflow: hidden;
  flex-shrink: 0;
}
.news__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 960px) {
  .news__image {
    width: 320px;
    height: 180px;
    aspect-ratio: auto;
  }
}

/* リンクボタン: SP フル幅 / PC W240（btn--sm の W220 を上書き、font 14px） */
.news__link {
  width: 100%;
  min-width: 0;
  font-size: var(--font-size-md);                 /* Figma: 14px Bold */
}
@media (min-width: 960px) {
  .news__link {
    width: 240px;
  }
}

/* =========================
 * Footer — Figma 118:2934 (PC) / 118:2935 (SP) 準拠（changelog #20）
 * 構造: bg_footer 画像（フル幅）→ Footer 本体（1 つの inner にロゴ+SNS+リンク+copyright）
 * ========================= */
.site-footer {
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
}

/* inner: 本体（head + bottom）を内包する 1 つのコンテナ */
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 上段: ロゴ + SNS。
 * SP: 縦並び（logo 横並び → SNS 横並び）、gap 40（Figma SP: Logo と SNS が 40 で離れる）
 * PC: 横並び（両端寄せ） */
.site-footer__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
@media (min-width: 960px) {
  .site-footer__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;                                   /* PC は両端寄せのため gap は意味薄、最小確保 */
  }
}

/* ロゴ — Figma 119:2936 準拠 */
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 16px;                                    /* Figma: M シンボル ↔ テキストブロック 16px */
  text-decoration: none;
  color: inherit;
}
.site-footer__logo-mark {
  display: block;
  width: auto;                                  /* changelog #24: type.svg はアスペクト比可変 */
  height: 40px;
  flex-shrink: 0;
}
.site-footer__logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;                                     /* changelog #24: ヘッダと同じ 4px */
  line-height: 1;                               /* changelog #24: ヘッダと同じ（line-height 込みの実gapを揃える） */
}
.site-footer__logo-jp {
  font-family: var(--font-family-stack-en);     /* changelog #24: en指定 → Inter */
  font-size: 14px;                              /* changelog #24: ヘッダ compact に合わせる */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}
.site-footer__logo-en {
  font-family: var(--font-family-stack-en);     /* changelog #24: en指定 → Inter */
  font-size: 18px;
  font-weight: var(--font-weight-black);
  letter-spacing: 0.02em;
}

/* SNS: アイコン SVG をそのまま表示（白塗り背景なし）、gap 24px（Figma 仕様） */
.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: opacity var(--duration-instant) var(--ease-default);
}
.site-footer__social-link:hover { opacity: 0.7; }
.site-footer__social-link img {
  width: 24px;
  height: 24px;
  display: block;
  /* アイコンは元から白（黒地フッター上で表示）。filter なし */
}

/* 上部の bg_footer.webp（球場全景）: フッター本体の上にフル幅で表示 */
.site-footer__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 下段: 法的リンク + コピーライト
 * - SP: 縦並び（legal 縦並び gap 16 → copyright 別行）
 * - PC: 横並び 1 行（legal 横並び gap 24 ← 左 / copyright ← 右） */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;                                     /* SP: legal と copyright の間 40px（Figma 118:2927 gap 40） */
}
@media (min-width: 960px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    gap: 40px;                                   /* PC: legal block の右に gap 40 で copyright が連続（両端寄せではない） */
  }
}
.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                                     /* SP: 縦並び gap 16 */
}
@media (min-width: 960px) {
  .site-footer__legal {
    flex-direction: row;
    gap: 24px;                                   /* PC: 横並び gap 24 */
  }
}
.site-footer__legal a {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  text-decoration: none;
}
.site-footer__legal a:hover { opacity: 0.7; }
.site-footer__copyright {
  margin: 0;
  font-family: var(--font-family-stack-en);       /* Inter 優先（EN コピーライト） */
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);                 /* #9F9F9F */
}

/* =========================
 * Sticky CTA
 * ========================= */
.sticky-cta { position: fixed; z-index: 30; }
.sticky-cta[hidden] { display: none !important; }

/* SP: 下からスライドイン */
.sticky-cta--mobile {
  bottom: 0;
  left: 0;
  right: 0;
  display: block !important; /* hidden 属性より先に表示状態を確保 */
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.sticky-cta--mobile[hidden] {
  display: none !important;
  transform: translateY(100%);
}
.sticky-cta--mobile.is-visible {
  transform: translateY(0);
}
@media (min-width: 960px) {
  .sticky-cta--mobile { display: none !important; }
}
.sticky-cta--mobile .sticky-cta__inner {
  display: flex;
  background-color: var(--color-surface-base);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  width: 100%;
  /* border-top は削除（.sticky-cta__primary 自体の黒枠と重なり二重線になっていたため） */
}
.sticky-cta--mobile .sticky-cta__inner > a {
  flex: 1;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  padding: 16px 12px;
  line-height: 1.2;
}
.sticky-cta__primary {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 1px solid var(--color-surface-black);
}
.sticky-cta__outline {
  border-left: 1px solid var(--color-border);
  color: var(--color-text-primary);
  background-color: var(--color-surface-base);
}
.sticky-cta--desktop {
  bottom: 32px;
  right: 32px;
  width: 360px;                                  /* PC: 360px（指示） */
  background-color: var(--color-surface-base);
  box-shadow: var(--shadow-sticky);
  overflow: hidden;
  display: none;
}
@media (min-width: 960px) {
  .sticky-cta--desktop:not([hidden]) { display: block; }
}
.sticky-cta__body {
  padding: 20px;
  position: relative;
}
.sticky-cta__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sticky-cta__close:hover { color: var(--color-text-primary); }
.sticky-cta__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}
.sticky-cta__title {
  font-size: 17px;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-snug);
  margin-bottom: 8px;
  text-align: center;                            /* センター揃え（指示） */
}
.sticky-cta__lead {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 18px;
}
.sticky-cta__body .btn {
  width: 100%;
  margin-bottom: 10px;
}
.sticky-cta__sub-link {
  display: block;
  text-align: center;
  font-size: 12px;                               /* 指示: 12px */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
}

/* =========================
 * Contact / Download 2カラム
 * ========================= */
.two-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 960px) {
  .two-col { flex-direction: row; gap: 64px; }
}
.two-col__main { flex: 1; }
@media (min-width: 960px) {
  .two-col__main { flex: 0 0 52%; }
  .two-col__side { flex: 0 0 44%; }
}
.form-shell {
  background-color: var(--color-surface-card);
  padding: 28px;
}
@media (min-width: 960px) {
  .form-shell { padding: 40px; }
}

/* =========================
 * Contact CTA section — Figma 118:2934 ContactCTA 準拠（changelog #20）
 * 黒地・中央寄せレイアウト・タイトル + 説明文 + ボタン2個 + 注釈
 * ========================= */
.contact-cta {
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  padding-block: 0;                              /* .section の padding を打ち消し */
}

.contact-cta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 64px 24px;                            /* SP: 上下 64 / 左右 24 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 960px) {
  .contact-cta__inner {
    padding: 64px;                               /* PC: 全辺 64 */
  }
}

.contact-cta__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;                       /* SP: 左寄せ */
  gap: 16px;
  width: 100%;
}
@media (min-width: 960px) {
  .contact-cta__head {
    align-items: center;                         /* PC: 中央寄せ */
    max-width: 720px;                            /* PC のみテキストブロック幅を制限 */
  }
}
.contact-cta__title {
  margin: 0;
  font-size: 28px;                               /* SP */
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  text-align: left;                              /* SP: 左揃え */
  width: 100%;
}
@media (min-width: 960px) {
  .contact-cta__title {
    font-size: 40px;
    text-align: center;                          /* PC: 中央寄せ */
  }
}
.contact-cta__lead {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark);
  text-align: left;                              /* SP: 左揃え */
  width: 100%;
}
@media (min-width: 960px) {
  .contact-cta__lead {
    text-align: center;                          /* PC: 中央寄せ */
  }
}

/* ボタン群: SP 縦並び gap 8 / PC 横並び gap 12 */
.contact-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
@media (min-width: 960px) {
  .contact-cta__actions {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    width: auto;
  }
}
.contact-cta__actions .btn {
  width: 100%;
  min-width: 0;
}
@media (min-width: 960px) {
  .contact-cta__actions .btn { width: 320px; }
}

.contact-cta__note {
  margin: 0;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);                /* #9F9F9F */
  text-align: left;                              /* SP: 左揃え */
  width: 100%;
}
@media (min-width: 960px) {
  .contact-cta__note {
    text-align: center;                          /* PC: 中央寄せ */
    max-width: 720px;
  }
}

/* =========================
 * Sponsors Logo Section（Figma node 25:3296 準拠 / changelog #10）
 * - 白背景・2行・スクロールアニメーション無し
 * - 各行をセンター配置、合計幅がビューポートを超えたら左右見切れOK（Figma も同設計）
 * ========================= */
.sponsors-marquee {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;          /* 横にはみ出すロゴをクリップ */
  border-bottom: 1px solid var(--color-border);   /* Figma node 25:3422 由来のセパレータ */
}

.marquee {
  width: 100%;
  display: flex;
  justify-content: center;   /* track をセンター配置、左右が画面外に出たら見切れる */
}

.marquee__track {
  display: flex;
  gap: 24px;
  align-items: center;
  width: max-content;        /* 内側 flex 子要素の合計幅をそのまま採用 */
  flex-shrink: 0;            /* センター配置時に縮まないように */
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__item img {
  display: block;
  height: 48px;
  width: auto;            /* 縦48固定、横はSVG元アスペクト比 */
  object-fit: contain;
}

/* =========================
 * Form Page — contact / download 共通レイアウト
 * Figma 8:15 (contact PC) / 125:1160 (download PC) / 125:1228 (contact SP) / 125:1240 (download SP)
 * - 2 カラム（PC 横並び gap 40 / SP 縦積み gap 40）
 * - LEFT: タイトル + lead + サブ要素（trustpoint or cover + bullets）
 * - RIGHT: フォームシェル（bg #F7F7F7 padding 40）
 * - section padding は base.css の section_inner と container-pad で管理（独自指定なし）
 * ========================= */

/* section 直下 layout: 2 カラム */
.form-page__layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
}
@media (min-width: 960px) {
  .form-page__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
}

/* LEFT カラム: 縦 stack gap 40 */
.form-page__main {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* RIGHT カラム: フォームシェル */
.form-page__side {
  flex: 1 0 0;
  min-width: 0;
}

/* head: title + lead, gap 24 */
.form-page__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* タイトル: メインページ section title と同じルール（SP 32 / PC 40 Black） */
.form-page__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
@media (min-width: 960px) {
  .form-page__title { font-size: 40px; }
}

/* lead: 18px Regular line-height 1.75 */
.form-page__lead {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
@media (max-width: 959px) {
  .form-page__lead { display: none; }             /* SPのみ非表示（PCは表示） */
}

/* check icon 共通: 24×24（src/public/images/icon_check.svg を <img> で参照、色は SVG 内 stroke="black" 固定） */
.form-page__check {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
}

/* ---- contact 専用: trustpoints ---- */
.form-page__trustpoints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 959px) {
  .form-page__trustpoints { display: none; }       /* SPのみ非表示（PCは表示） */
}
.form-page__trustpoint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.form-page__trustpoint-content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-page__trustpoint-title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
.form-page__trustpoint-body {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);              /* #272727 */
}

/* ---- download 専用: カバー画像 + bullets ---- */
.form-page__cover {
  width: 100%;
  aspect-ratio: 160 / 90;
  overflow: hidden;
  background-color: var(--color-surface-card);
}
.form-page__cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* bullets グループ: 2 セクション縦並び gap 24 */
.form-page__bullets-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-page__bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-page__bullets-title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

/* =========================
 * Contact Form — 共通フォーム（contact / download 両ページに include）
 * Figma 8:27 (contact PC) / 125:1176 (download PC)
 * - shell: bg #F7F7F7 padding 40 gap 24 flex-col
 * - field: gap 12（ラベル → 入力）
 * - input: H48 px16 py8 radius 4 border #ccc / focus で黒に切替（outline なし）
 * - submit: 黒地白文字 H48 radius 50 full
 * ========================= */
.contact-form {
  background-color: var(--color-surface-dark);     /* #F7F7F7 */
  padding: 24px;                                   /* SP デフォルト */
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 960px) {
  .contact-form { padding: 40px; }                 /* PC: 40 */
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* fieldset として描画する場合（checkboxes 群、changelog #28-extra）:
 * デフォルトの border / padding / margin / min-width をリセットして
 * <div class="contact-form__field"> と完全同等の見た目にする */
fieldset.contact-form__field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.contact-form__field > legend.contact-form__label {
  display: flex;
  width: 100%;
  padding: 0;                      /* legend のデフォルト padding を消す */
  margin-bottom: 0;                /* gap で間隔を作るので margin 不要 */
  float: none;
}
/* チェックボックス群は legend が flex 子として効かないため、legend に margin で間隔を確保 */
fieldset.contact-form__field--checkboxes > legend.contact-form__label {
  margin-bottom: 12px;
}

/* ラベル: 16px Black + 必須マーク ※ #C00 */
.contact-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
.contact-form__required {
  color: #c00;
}

/* 入力共通: H48 px16 py8 radius 4 border #ccc placeholder #9f9f9f
 * appearance: none で OS UI の癖を消す
 * デフォルトはグレー枠 / focus でボーダーが黒に切り替わる（outline は出さない） */
.contact-form__input,
.contact-form__textarea,
.contact-form__select {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid #ccc;                          /* デフォルト: グレー */
  border-radius: 4px;
  background-color: var(--color-surface-base);     /* 白 */
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-instant) var(--ease-default);
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text-muted);                  /* #9F9F9F */
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
  outline: none;                                   /* 外側 outline は出さない */
  border-color: var(--color-text-primary);         /* focus: ボーダーを黒に */
}
.contact-form__textarea {
  min-height: 120px;
  padding: 12px 16px;
  resize: vertical;
}

/* select wrap: chevron icon を絶対配置でかぶせる */
.contact-form__select-wrap {
  position: relative;
}
.contact-form__select {
  padding-right: 48px;                             /* chevron 領域 */
  cursor: pointer;
}
.contact-form__select:has(option:checked[value=""]) {
  color: var(--color-text-muted);                  /* 未選択時はプレースホルダー風 */
}
.contact-form__select-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-primary);
}

/* チェックボックス群（changelog #28: お問い合わせ理由を select → checkboxes に変更）
 * - 縦並びリスト、各行 H32 程度
 * - native checkbox は visually-hidden、custom box（W20×H20、border 1px #ccc）で描画
 * - checked 時: 黒地に白チェックアイコン
 * - focus-visible: アクセシブルなフォーカスリング */
.contact-form__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}
.contact-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.contact-form__checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.contact-form__checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: var(--color-surface-base);
  color: transparent;                              /* チェックアイコンは未選択時非表示 */
  flex-shrink: 0;
  transition: border-color var(--duration-instant) var(--ease-default),
              background-color var(--duration-instant) var(--ease-default),
              color var(--duration-instant) var(--ease-default);
}
.contact-form__checkbox input[type="checkbox"]:checked + .contact-form__checkbox-box {
  background-color: var(--color-surface-black);
  border-color: var(--color-surface-black);
  color: var(--color-text-on-dark);                /* svg currentColor → 白 */
}
.contact-form__checkbox input[type="checkbox"]:focus-visible + .contact-form__checkbox-box {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.contact-form__checkbox:hover .contact-form__checkbox-box {
  border-color: var(--color-text-primary);
}

/* フォーム直前のクロージング一言: 15px Bold（notesより強め、submitボタンへの後押し） */
.contact-form__closing {
  margin: 0;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

/* 注記 2行: 12px Regular #9F9F9F line-height 1.75 */
.contact-form__notes {
  margin: 0;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);                  /* #9F9F9F */
}

/* submit: 黒地白文字 H48 radius 50 full-width 16px Bold */
.contact-form__submit {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: none;
  border-radius: 50px;
  background-color: var(--color-surface-black);
  color: var(--color-text-on-dark);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--duration-instant) var(--ease-default);
}
.contact-form__submit:hover {
  background-color: var(--color-text-muted);       /* DARK GRAY (§14-4 Primary hover) */
}
.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* バリデーションエラー */
.contact-form__error {
  margin: 6px 0 0;
  font-size: var(--font-size-sm);
  color: #c0392b;
  line-height: 1.4;
}
.contact-form__input.is-error,
.contact-form__textarea.is-error {
  border-color: #c0392b;
}

/* 送信完了メッセージ */
.contact-form__success[hidden] { display: none !important; }
.contact-form__success {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 0;
  text-align: center;
}
.contact-form__success-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  line-height: 1.4;
}
.contact-form__success-body {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* SF 非表示 iframe */
.sf-target { display: none; }

/* サンクスページ */
.thanks-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 80px 0;
  max-width: 640px;
  margin-inline: auto;
}
.thanks-page__icon {
  color: var(--color-text-primary);
}
.thanks-page__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-black);
  line-height: 1.3;
}
@media (min-width: 1080px) {
  .thanks-page__title { font-size: 40px; }
}
.thanks-page__body {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.thanks-page__btn {
  margin-top: 8px;
  min-width: 240px;
}

/* セクション eyebrow 統一: 両サイドの線を削除、14px Bold */
.solution__eyebrow-rule,
.plans__eyebrow-rule,
.services__eyebrow-rule,
.cases__eyebrow-rule,
.now__eyebrow-rule,
.message .eyebrow__rule {
  display: none;
}
.solution__eyebrow,
.plans__eyebrow,
.services__eyebrow,
.cases__eyebrow,
.now__eyebrow,
.message .eyebrow {
  gap: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
}

/* SP専用: 画像右上の枚数カウンタ（1/18）。矢印と同じトーン */
.services__sp-counter {
  display: none;
}
@media (max-width: 959px) {
  .services__sp-counter {
    display: inline-flex;
    align-items: baseline;
    position: absolute;
    top: 12px;
    right: 8px;
    z-index: 10;
    margin: 0;
    padding: 5px 12px;
    background-color: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .services__sp-counter [data-services-sp-current] {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
  }
  .services__sp-counter-sep {
    margin: 0 3px;
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    opacity: 0.55;
  }
  .services__sp-counter [data-services-sp-total] {
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    opacity: 0.65;
  }
}

/* =========================
 * Policy Page — privacy 等、読み物系の法的文書ページ共通レイアウト
 * - .form-page__* と同じく <section class="section policy-page"><div class="section__inner">
 *   パターンを踏襲。本文は可読性のため 760px の内側ラッパーで中央寄せ。
 * - 公式サイトのプライバシーポリシー（marines.co.jp/expansion/privacy.html）の
 *   構成（H1タイトル / H2条項見出し / H3細分見出し / 左寄せ本文）を、
 *   本サイトのトークン（:root 変数）のみで再現する。
 * ========================= */
.policy-page__inner {
  display: flex;
  justify-content: center;
}

.policy-page__wrap {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
}

/* head: title（黒バー） + lead */
.policy-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-bottom: var(--space-11);
}

.policy-page__title {
  position: relative;
  margin: 0;
  padding: var(--space-7) var(--space-10);
  background-color: var(--color-surface-black);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-xl);                /* 18px SP */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  text-align: center;
}
@media (min-width: 960px) {
  .policy-page__title { font-size: var(--font-size-2xl); } /* 22px PC */
}

.policy-page__lead {
  margin: 0;
  font-family: var(--font-family-stack);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);          /* 1.8 */
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}
.policy-page__lead a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.policy-page__date {
  margin: 0;
  font-family: var(--font-family-stack);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  text-align: right;
}

.policy-page__body {
  display: flex;
  flex-direction: column;
}

/* 各「１．」条項ブロック */
.policy-page__section + .policy-page__section {
  margin-top: var(--space-12);                   /* 80px */
}
@media (max-width: 959px) {
  .policy-page__section + .policy-page__section {
    margin-top: var(--space-11);                 /* 64px SP */
  }
}

.policy-page__section-title {
  margin: 0;
  padding: var(--space-6) var(--space-7);
  background-color: var(--color-surface-card);
  border-left: 4px solid var(--color-bg-dark-gray);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-lg);                /* 16px SP */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
@media (min-width: 960px) {
  .policy-page__section-title { font-size: var(--font-size-xl); } /* 18px PC */
}

/* 見出し直下のボーダーボックス（本文＋小見出しを内包） */
.policy-page__section-box {
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-7);
  border: 1px solid var(--color-border-strong);
}
.policy-page__section-box > .policy-page__text:first-child {
  margin-top: 0;
}
.policy-page__section-box > .policy-page__subsection:last-child {
  margin-bottom: 0;
}

.policy-page__text {
  margin: 0 0 var(--space-7) 0;
  font-size: var(--font-size-md);                /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);          /* 1.8 */
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}
.policy-page__text:last-child {
  margin-bottom: 0;
}

/* 各「（1）」小見出しブロック */
.policy-page__subsection {
  margin-top: var(--space-9);                    /* 40px */
}
.policy-page__subsection:first-of-type {
  margin-top: var(--space-7);                    /* 24px（section本文直後は少し詰める） */
}

.policy-page__subsection-title {
  margin: 0 0 var(--space-5) 0;
  font-family: var(--font-family-stack);
  font-size: var(--font-size-lg);                /* 16px SP */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
@media (min-width: 960px) {
  .policy-page__subsection-title { font-size: var(--font-size-xl); } /* 18px PC */
}

/* リンクリスト（利用規約・プライバシーステートメント等） */
.policy-page__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.policy-page__links a {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-page__links a:hover {
  color: var(--color-text-secondary);
}