/* =========================================================
   パターンC｜余白と写真で魅せる
   2026-09-10 修正版（Uiさんのご指摘①〜⑧を反映）
   ・英字見出しは Bebas Neue（本文とは別の、インパクトのある書体）
     スマホ80px / PC96px
   ・本文の黒は #1D1D1D に統一
   ・ヒーローのフィルタは黒。斜めに区切る
   ・フッターと写真に重ねる四角は #004888
   ・受け入れの流れは1列（上から下へ番号順）
   ========================================================= */

:root {
  /* --- 色 --- */
  --c-primary: #004888;             /* ⑦ フッター・写真に重ねる四角・ボタン・見出し */
  --c-primary-dark: #003567;
  --c-accent: #2B6CF6;              /* 面では使わない。リンク・アイコン・罫線などの「点」専用 */
  --c-on-primary: #FFFFFF;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F4F5F7;
  --c-surface: #FFFFFF;
  --c-text: #1D1D1D;                /* ② 本文の黒はこれで統一 */
  --c-text-sub: #585858;            /* ② 補足文も青みのないグレーに揃える */
  --c-border: #E1E5EA;
  --c-band: #1D1D1D;                /* ③ 写真が読み込めなかったときの下地も黒に */

  /* ③⑧ ヒーローのフィルタ：青をやめて黒に。斜めに区切る。
        左側（文字が乗る側）を濃く、右側を薄くして写真を見せる。
        スマホは文字が全幅に広がるため、薄い側も0.55まで濃くして
        白文字のコントラスト（5.7:1）を確保している。 */
  --c-hero-overlay: linear-gradient(
      168deg,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.80) 78%,
      rgba(0, 0, 0, 0.55) 78.4%,
      rgba(0, 0, 0, 0.55) 100%);

  /* --- フォント --- */
  --font-head: 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-en: 'Bebas Neue', 'Oswald', sans-serif;   /* ① インパクトのある英字書体 */

  --fs-h1: clamp(25px, 2.8vw, 34px);
  --fs-h2: clamp(20px, 2.1vw, 26px);
  --fs-h3: clamp(17px, 1.5vw, 19px);

  /* ① 英字見出し：スマホ80px。
        画面幅が375pxより狭い端末では「DISCLOSURE」がはみ出すため、
        20.5vw を上限にして自動で少し小さくなるようにしている
        （iPhone 14/15 の390px幅ではちょうど80pxになる）。 */
  --fs-section-en: min(80px, 20.5vw);
  /* ヒーローの「CHIBA NEXTAGE」は13文字あり、スマホで80pxにすると
     画面からはみ出すため、ここだけ小さくしている（PCでは96px）。 */
  --fs-hero-en: min(52px, 13.5vw);
  --fs-footer-org: 26px;

  --ls-head: 0.02em;
  --ls-en: 0.14em;
  --fw-head: 700;
  --section-en-weight: 400;         /* Bebas Neue は1ウェイトのみ */
  --lh-body: 1.9;

  /* --- 余白（スマホ） --- */
  --sp-section: 72px;
  --sp-block: 36px;
  --sp-inner: 18px;
  --max-width: 1060px;

  --motion-y: 24px;
  --motion-dur: 0.6s;
  --motion-stagger: 0.09s;

  /* --- スイッチ --- */
  --photo-offset: 24px;             /* スマホは24px、PCは40px */
  --band-skew: 0px;
  --chip-display: none;
  --rule-display: block;
  --fig-optional-display: block;
  --nav-en-display: block;
  --header-transparent: 1;
  --hero-media-opacity: 1;

  /* ④ 写真は4:3で表示（素材も4:3で用意しているので余計な切り取りが起きない） */
  --figure-ratio: 4 / 3;
  --figure-ratio-sp: 4 / 3;
}

/* ---------------------------------------------------------
   ① 見出しセット：英字（Bebas Neue）→ 細い横罫 → 小さな和文サブ
   Bebas Neue は大文字だけの書体。字間は詰めて塊として見せる。
   色は本文と同じ #1D1D1D にして、和文見出しの青と役割を分ける。
   --------------------------------------------------------- */
.section-en {
  color: var(--c-text);
  letter-spacing: 0.005em;
  line-height: 0.92;
  margin-bottom: 14px;
}
.hero-en {
  letter-spacing: 0.02em;
  line-height: 0.95;
}
.section-rule { width: 64px; margin-bottom: 14px; }
.section-eyebrow { letter-spacing: 0.14em; }

/* ナビ：和文14px＋英字11pxの2段（スマホでは英字を出さない） */
.main-nav > ul > li > a { display: flex; flex-direction: column; gap: 3px; }

/* ステップ番号も英字書体で揃える（Bebas Neue は数字も細長い） */
.flow-step-num { font-family: var(--font-en); font-size: 22px; font-weight: 400; }

/* ⑥ 受け入れの流れは1列にして、上から下へ番号順に読ませる */
.flow-steps { grid-template-columns: 1fr; }

/* 3項目も縦に並べて余白を活かす */
.strengths-grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  :root {
    --sp-section: 136px;
    --sp-block: 56px;
    --sp-inner: 24px;
    --photo-offset: 40px;           /* ⑦ 写真の右下にずらす #004888 の四角 */
    --fs-footer-org: 40px;          /* フッターで団体名を大きく見せる */
    --fs-section-en: 96px;          /* ① PCの英字見出し */
    --fs-hero-en: 96px;

    /* ③⑧ PCのヒーロー：左66%を濃い黒、右を薄い黒にして斜めに区切る。
           文字は左側にしか置かないので、薄い側は0.25まで下げて写真を見せる。 */
    --c-hero-overlay: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.80) 66%,
        rgba(0, 0, 0, 0.25) 66.3%,
        rgba(0, 0, 0, 0.25) 100%);
  }
  /* 写真45：テキスト55 */
  .media-row { grid-template-columns: 45% 1fr; gap: 60px; }
  .strengths-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  /* ボタンの直前だけ余白を大きく取る */
  .hero-cta-group { margin-top: 40px; }
  .flow-step-num { font-size: 26px; }
}

@media (min-width: 1024px) {
  .strengths-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .strength-item { flex-direction: row; }
}