/* ============================================================
   SaishiLu コーポレートLP — style.css
   デザインシステム v1.0 準拠
   house style: plusmate-hp を継承・SaishiLu カラーに置換
   ============================================================ */

/* ============================================================
   :root — デザイントークン（デザインシステム §2/3/4/5 準拠）
   ============================================================ */
:root {
  /* === カラー: プライマリ（ネイビー） === */
  --color-primary:       #1B3F6A;
  --color-primary-dark:  #112B4D;
  --color-primary-deep:  #0A1E35;
  --color-primary-mid:   #2E5A8E;
  --color-primary-soft:  #EAF0F7;

  /* === カラー: アクセント（アンバーゴールド） === */
  /* --color-accent は装飾用（大見出し「0円」・アイコン等）のみに使用。白文字CTAには使わない */
  --color-accent:        #C8842A;
  /* --color-accent-dark: CTAボタン背景用。白文字との比率 5.38:1 ✓ WCAG AA */
  --color-accent-dark:   #A56820;
  /* --color-accent-hover: CTAボタンhover用 */
  --color-accent-hover:  #8A5519;
  --color-accent-soft:   #FDF3E6;

  /* === カラー: テキスト === */
  --color-text:          #1B2440;
  --color-text-mid:      #4A5568;
  /* --color-text-sub: 白背景 4.54:1 ✓ WCAG AA（旧 #8E9AAF は 2.79:1 で NG） */
  --color-text-sub:      #5B6678;

  /* === カラー: 背景 === */
  --color-bg:            #FFFFFF;
  --color-bg-soft:       #F4F7FA;
  --color-bg-navy:       #1B3F6A;
  --color-footer:        #0A1E35;

  /* === カラー: ボーダー === */
  --color-border:        #D8DEE7;

  /* === カラー: システム === */
  /* #B5281E: 白地で4.5:1以上 ✓ WCAG AA（旧#D9534F は3.1:1でNG → A-2対応 2026-05-24） */
  --color-error:         #B5281E;
  --color-success:       #2D9D5F;

  /* === フォント === */
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;

  /* === スペーシング（8pxグリッド） === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* === コンテナ === */
  --container:        1120px;
  --container-narrow:  720px;
  --header-h:           72px;

  /* === 角丸 === */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* === 影 === */
  --shadow-sm:    0 4px 16px rgba(27, 36, 64, 0.07);
  --shadow-md:    0 12px 36px rgba(27, 36, 64, 0.10);
  --shadow-focus: 0 0 0 3px rgba(27, 63, 106, 0.14);
}

/* ============================================================
   ベースリセット・タイポグラフィ基盤
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

/* prefers-reduced-motion: スクロールアニメ・アコーディオン無効化 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .faq-answer { transition: none !important; }
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.25s, color 0.25s; }
a:hover { opacity: 0.8; }
ul { list-style: none; }
button { background: none; border: 0; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* コンテナ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 28px;
}

/* セクション共通余白 */
.section {
  padding: var(--space-8) 0;
}
@media (max-width: 767px) {
  .section { padding: var(--space-7) 0; }
}

/* セクション見出し共通（ENGラベル + h2） */
.section-heading {
  margin-bottom: var(--space-6);
}
.section-heading.center { text-align: center; }
.section-heading .label-en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--color-primary-mid);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-heading h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: 0.02em; /* 旧: 0.04em — FV H1(0.03em)に近づける */
}
@media (max-width: 767px) {
  .section-heading h2 { font-size: 24px; }
  .section-heading { margin-bottom: var(--space-5); }
}

/* ============================================================
   スクロールリビール（reveal アニメーション）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* カード連鎖ディレイ */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ============================================================
   スリッパリースライド（セクション末の誘導テキスト）
   ============================================================ */
.slippery-slide {
  text-align: center;
  padding-top: var(--space-6);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.slippery-slide .arrow-down {
  width: 24px;
  height: 24px;
  border-right: 2.5px solid var(--color-text-mid);
  border-bottom: 2.5px solid var(--color-text-mid);
  transform: rotate(45deg);
  display: inline-block;
}
/* ネイビー背景セクション（#mechanism）では白系で可読に（後藤さん指摘 2026-05-22） */
.section-mechanism .slippery-slide { color: rgba(255, 255, 255, 0.9); }
.section-mechanism .slippery-slide .arrow-down {
  border-right-color: rgba(255, 255, 255, 0.75);
  border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   ボタン（デザインシステム §6-1 準拠）
   ============================================================ */

/* Primary CTA */
/* C-1対応: 背景を --color-accent-dark (#A56820) に変更。白文字との比率 5.38:1 ✓ WCAG AA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px;
  min-width: 220px;
  background: var(--color-accent-dark);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-jp);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(165, 104, 32, 0.18); /* 旧: 0 4px 20px rgba(165, 104, 32, 0.28) */
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(165, 104, 32, 0.24); /* 旧: 0 8px 28px rgba(165, 104, 32, 0.36) */
  opacity: 1;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}
.btn-primary:active { transform: translateY(0); }

/* Secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  background: transparent;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  transition: background 0.22s, color 0.22s, transform 0.22s;
  text-decoration: none;
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* テキストリンクCTA */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.btn-text:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  opacity: 1;
}
.btn-text::after {
  content: '→';
  font-style: normal;
  font-weight: 700;
}
.btn-text:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* CTAラッパー（ボタン＋補助文） */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-5);
}
.cta-note {
  font-size: 12px;
  color: var(--color-text-sub);
  text-align: center;
}

/* ============================================================
   HEADER（デザインシステム §6-12 準拠）
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 8px rgba(27, 36, 64, 0.05);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: var(--header-h);
  max-width: 1440px;
  margin: 0 auto;
}

/* ロゴ */
.site-logo {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo a { color: inherit; }
.site-logo a:hover { opacity: 0.8; }
.site-logo a { display: inline-block; }
.site-logo img { display: block; width: 138px; height: auto; }   /* テキスト→横型ロゴ 2026-05-24 */

/* グローバルナビ — 撤去済み（決定版制作指示: LPに逃げ道を作らない） */

/* ヘッダーCTA（PC・単一） */
.header-cta {
  padding: 10px 24px;
  font-size: 13px;
  min-width: auto;
}

/* レスポンシブ：ヘッダー */
@media (max-width: 767px) {
  .header-cta-wrap { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .header-cta { padding: 8px 16px; font-size: 12px; }
}

/* ============================================================
   MAIN — body上部余白（固定ヘッダー分）
   ============================================================ */
main { padding-top: var(--header-h); }

/* セクションのscroll-margin-top（アンカーが隠れないように） */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ============================================================
   ① HERO `#hero` — 動画背景＋3指標版
   FV再設計仕様_ミニマル.md 動画背景改訂版 準拠（2026-05-22 小林 颯）
   旧: 白背景 + ENGラベル指標 + ::after 下端ルール線
   新: 動画フルブリード + ネイビーオーバーレイ + 白文字 + 3指標（日本語ラベル）
   ============================================================ */

/* --- セクション本体 --- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 48px; /* スライド文＋矢印が下端で見切れないよう余白（後藤さん指摘 2026-05-22） */
  /* 動画非再生・reduced-motion フォールバック用背景色
     #FFFFFF on #0A1E35: CR = 18.1:1 WCAG AAA ✓ */
  background-color: #0A1E35;
}

/* --- [レイヤー1] 動画フルブリード --- */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* --- [レイヤー2] ネイビーオーバーレイ ---
   濃度 0.82: 白文字とのCR ≥ 7.5:1 確保（A-1対応 2026-05-24。旧0.72→0.82に引き上げ） */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 53, 0.82);
  z-index: 1;
  pointer-events: none;
}

/* --- [レイヤー3] コンテンツラッパー --- */
/* main に padding-top: var(--header-h) が既に当たっているため、
   hero-content は追加余白 64px のみ指定する（合計 72+64=136px 相当） */
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px; /* 120→64: CTAとブリッジ文の距離を詰める（後藤さん指摘 2026-05-22） */
}

/* --- ENGラベル（白半透明） --- */
.hero .hero-label {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.0;
  margin-bottom: 20px;
}

/* --- H1（白文字） --- */
.hero .hero-heading {
  font-family: var(--font-jp);
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin-bottom: 28px;
  max-width: 720px;
}

/* --- サブコピー（白半透明 0.82: CR≈5.1:1 WCAG AA ✓） --- */
.hero .hero-sub {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.82);
  max-width: 540px;
  margin-bottom: 0;
}

/* --- 3指標コンテナ（背景・箱・影なし） --- */
.hero .hero-metrics {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 52px;
  flex-wrap: nowrap;
}

/* --- 各指標セル --- */
.hero .hero-metric {
  padding: 0 40px;
  min-width: 0;
}

/* 最初のセル: 左パディングなし */
.hero .hero-metric:first-child {
  padding-left: 0;
}

/* 縦ルール線（白半透明 0.25） */
.hero .hero-metric + .hero-metric {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* --- 日本語ラベル（指標名・上段） --- */
.hero .hero-metric-label {
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* --- 数値型主値（指標1 専用） --- */
.hero .hero-metric-num {
  font-family: var(--font-en);
  font-size: clamp(48px, 5.0vw, 68px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
}

/* --- 数値単位（%） --- */
.hero .hero-metric-unit {
  font-family: var(--font-en);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.0;
  color: #FFFFFF;
}

/* 「以上」サフィックス（数値より控えめ・和文）2026-05-23 */
.hero .hero-metric-suffix {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.0;
  color: #FFFFFF;
}

/* --- テキスト型主値（指標2・3 専用） --- */
.hero .hero-metric-text-val {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.55;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  margin: 0;
}

/* テキスト主値内の添え書き（「企業出身」等） */
.hero .hero-metric-text-note {
  font-size: 0.82em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
}

/* --- 指標補足テキスト（全指標共通・最下段） --- */
.hero .hero-metric-note {
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 0;
}

/* --- CTAブロック --- */
.hero .cta-block {
  margin-top: 56px;
}

/* PC: 左揃え */
@media (min-width: 768px) {
  .hero .cta-block {
    align-items: flex-start;
  }
  .hero .btn-primary {
    min-width: 260px;
  }
}

/* CTA補助文（白半透明） */
.hero .hero-cta-note {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* --- スリッパリースライド（白文字・動画背景対応） --- */
.hero .hero-slippery {
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 2;
  padding-top: var(--space-5); /* 48→32px: CTAとの距離をさらに詰める（後藤さん指摘 2026-05-22） */
}

.hero .hero-slippery span:first-child {
  color: rgba(255, 255, 255, 0.65);
}

.hero .hero-slippery .arrow-down {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ================================================================
   prefers-reduced-motion: reduce
   動画を非表示 → ネイビー単色 (#0A1E35) にフォールバック
   テキストは白のまま CR=18.1:1 を維持
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-video-bg {
    display: none;
  }
  /* .hero の background-color: #0A1E35 が有効になる */
}

/* ================================================================
   SP（〜767px）
   ================================================================ */
@media (max-width: 767px) {
  .hero-content {
    /* main の padding-top 72px が既に当たっているため追加余白のみ */
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .hero .hero-label {
    font-size: 11px;
    letter-spacing: 0.28em;
    margin-bottom: 16px;
  }

  .hero .hero-heading {
    margin-bottom: 20px;
  }

  .hero .hero-sub {
    max-width: 100%;
    font-size: 15px;
  }

  /* SP: 指標1=全幅1行目 / 指標2・3=2列2行目。grid化で確実に50%ずつ＋上罫線を全幅に（崩れ修正 2026-05-23） */
  .hero .hero-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: 24px;
    margin-top: 40px;
  }

  /* 指標1（面接接続率）＝全幅・1行目 */
  .hero .hero-metric--num {
    grid-column: 1 / -1;
    padding: 0;
    border-left: none;
  }

  /* 指標2・3 共通＝2行目の2列。上罫線＋上余白を揃える（3つ目がズレる不具合の修正） */
  .hero .hero-metric--num ~ .hero-metric {
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    padding-top: 24px;
  }

  /* 指標2（左列） */
  .hero .hero-metric--num + .hero-metric {
    border-left: none;
    padding-left: 0;
    padding-right: 14px;
  }

  /* 指標3（右列）＝縦罫線で仕切る */
  .hero .hero-metric--text:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 14px;
    padding-right: 0;
  }

  .hero .cta-block {
    margin-top: 40px;
    align-items: center;
  }

  .hero .btn-primary {
    width: 100%;
    min-width: unset;
  }
}

/* ================================================================
   TAB（768px〜1023px）
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-content {
    /* main の padding-top 72px が既に当たっているため追加余白のみ */
    padding-top: 56px;
    padding-bottom: 96px;
  }

  .hero .hero-metric {
    padding: 0 28px;
  }

  .hero .hero-metric:first-child {
    padding-left: 0;
  }
}

/* ============================================================
   ② 共感 `#empathy`（コピーv4 決定版: 見出し＋VoC地の文＋共感3点リスト）
   徹底ミニマル化（セクションデザイン統一仕様 2026-05-22 反映）
   ============================================================ */
/* 【変更】背景を白に / 上罫線でセクション区切り */
.section-empathy {
  background: var(--color-bg); /* 旧: var(--color-bg-soft) */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}
/* 見出しも中央揃え（後藤さん指示 2026-05-22） */
.section-empathy .section-heading { text-align: center; }

/* 地の文（ナラティブ）— 中央揃え（後藤さん指示 2026-05-22。max-width で中央の読みやすい幅に） */
.empathy-narrative {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  font-size: 18px;
  line-height: 2;
  color: var(--color-text);
  text-align: center;
}
.empathy-narrative p { margin-bottom: var(--space-3); }
/* empathy-repeat: color: var(--color-primary) は強調として維持 */
.empathy-repeat {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: var(--space-4) !important;
}

/* 【変更】empathy-list: カード型からリスト型へ（gap: 0 / 罫線区切り） */
.empathy-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 旧: gap: 24px */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
  margin-top: var(--space-6);
}

/* 【変更】empathy-item: カード装飾を全撤去 / 修正1: padding左右を均一化（2026-05-22 桜井仕様） */
.empathy-item {
  background: transparent;     /* 旧: #fff */
  border: none;                 /* 旧: 1px solid var(--color-border) */
  border-top: none;             /* 旧: 3px solid var(--color-primary-mid) */
  border-right: 1px solid rgba(27, 36, 64, 0.10); /* 隣接アイテム縦仕切り */
  border-radius: 0;             /* 旧: var(--radius-md) */
  box-shadow: none;             /* 旧: var(--shadow-sm) */
  padding: 32px 24px;           /* 旧: 32px 28px — 左右を均一の24pxに調整 */
  border-bottom: 1px solid rgba(27, 36, 64, 0.10);
  text-align: center;           /* 中央揃え（後藤さん指示 2026-05-22） */
}
/* 最後のアイテム: 右罫線なし */
.empathy-item:last-child {
  border-right: none;
}

/* h3: 装飾なし・タイポで強調 */
.empathy-item h3 {
  font-size: 15px; /* 旧: 16px */
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* p: 変更なし（コントラスト維持）*/
.empathy-item p {
  font-size: 14px;
  color: var(--color-text-mid); /* #4A5568 on #FFF: 5.6:1 ✓ WCAG AA */
  line-height: 1.7;
}

/* SP: 縦積みリスト */
@media (max-width: 767px) {
  .empathy-list {
    grid-template-columns: 1fr;
  }
  .empathy-item {
    border-right: none;
    padding: 24px 0;
  }
  .empathy-narrative {
    font-size: 16px;
    text-align: center;          /* SP でも中央揃え（後藤さん指示 2026-05-22） */
  }
}
/* タブレット: 2列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .empathy-list { grid-template-columns: repeat(2, 1fr); }
  .empathy-item:nth-child(2) { border-right: none; }
  .empathy-item:last-child {
    grid-column: span 2;
    border-right: none;
    max-width: 100%;
    margin: 0;
  }
}

/* ============================================================
   ③ なぜ採れないのか `#reframe`
   図主役リデザイン（2026-05-25 後藤さん指示：建設業向け字を読まない対策）
   ============================================================ */
.section-reframe {
  background: var(--color-bg);
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}

/* 本文エリア: 中央寄せ・最大幅を絞ってゆったり見せる */
.reframe-narrative {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.reframe-heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

/* 図の前の導入1文 */
.reframe-intro {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-mid);
  margin-bottom: var(--space-6);
}

/* ============================================================
   お金の流れ フロー図（ChatGPT生成画像: reframe-flow-pc.webp / reframe-flow-sp.webp）
   PC横版（1672x941）とスマホ縦版（941x1672）を picture で出し分け
   ============================================================ */

/* picture ラッパー（中央寄せ・最大幅制限）*/
.reframe-flow {
  display: block;
  margin: 0 auto var(--space-5);
  max-width: 880px;
}

/* 内包する img（picture の子要素として width:100% で親に追従）*/
.reframe-flow img {
  width: 100%;
  height: auto;
  display: block;
}

/* 図の下の補強テキスト（旧 reframe-diagram-note を reframe-flow-note に改名）*/
.reframe-flow-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-mid);
  margin-bottom: var(--space-5);
}

/* SP: max-width を解除して画面幅いっぱいに */
@media (max-width: 767px) {
  .reframe-flow {
    max-width: 100%;
  }
}

/* 図の後の補足文 */
.reframe-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-mid);
  margin-bottom: var(--space-4);
}

/* ピボット文（次セクションへの橋渡し）*/
.reframe-pivot {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-4);
  font-style: italic;
}

/* ============================================================
   SP対応: reframe-heading・reframe-intro のサイズ調整
   ============================================================ */
@media (max-width: 767px) {
  .reframe-heading { font-size: 22px; margin-bottom: var(--space-4); }
  .reframe-intro   { margin-bottom: var(--space-5); }
}

/* ============================================================
   ④ 創業者ストーリー `#story`（デザインシステム §6-6 準拠）
   徹底ミニマル化（セクションデザイン統一仕様 2026-05-22 反映）
   ============================================================ */
/* 【変更】背景を白に */
.section-story {
  background: var(--color-bg); /* 旧: var(--color-bg-soft) */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}
.story-inner {
  display: flex;
  align-items: flex-start;  /* 上揃え（写真が中央に浮かないように） */
  gap: var(--space-7, 64px);
}

/* 【変更】story-visual: 影・角丸を撤去 */
.story-visual {
  flex: 0 0 360px;           /* 写真カラム（固定幅）。旧: float left */
  max-width: 360px;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

/* C-11対応: .story-img-placeholder はHTML未使用のため削除（2026-05-24）*/
/* 実写真（運営責任者）2026-05-22 — 徹底ミニマル：角丸/影なし、正方形のまま */
.story-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.story-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}
.story-body p { margin-bottom: var(--space-4); }
.story-body .story-input-note {
  display: inline-block;
  background: #fffbe6;
  border: 1px dashed #c8842a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-accent-dark);
  font-style: italic;
}
.story-signature {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
  clear: both;
}
.story-signature .sig-role {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-bottom: 4px;
}
.story-signature .sig-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
.story-cta {
  margin-top: var(--space-5);
  clear: both;
}

@media (max-width: 767px) {
  .story-inner { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .story-visual { flex: none; max-width: 240px; align-self: center; }
}

/* ============================================================
   ⑤ SaishiLuの考え方 `#mechanism`（デザインシステム §6-7 準拠）
   ============================================================ */
.section-mechanism {
  background: var(--color-bg-navy);
  color: #fff;
  padding: 80px 0;
}
@media (max-width: 767px) { .section-mechanism { padding: 56px 0; } }

.mechanism-inner {
  text-align: center;
}
.mechanism-inner h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) { .mechanism-inner h2 { font-size: 24px; } }

.mechanism-body {
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.88);
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-5);
}
.mechanism-body p { margin-bottom: var(--space-3); }

/* 注記（成果報酬の開示）= 小さく控えめに（紺地）。2026-05-22 デクラッタで本文外へ独立 */
/* A-4対応: rgba(255,255,255,0.62)（紺#1B3F6A上で4.5:1以上 ✓ WCAG AA。旧0.55は約3.5:1でNG） 2026-05-24 */
.mechanism-note {
  max-width: var(--container-narrow);
  margin: var(--space-5) auto var(--space-3);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.mechanism-points {
  max-width: var(--container-narrow);
  margin: var(--space-5) auto var(--space-6);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* 【変更】mechanism-point: アイコンとテキストの並列を維持 / 上罫線で区切り */
.mechanism-point {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;   /* 追加: 上下余白で区切り感を出す */
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* 白罫線で区切り */
}
.mechanism-point:first-child {
  border-top: none; /* 最初の要素は上罫線不要 */
}

/* 【変更】mp-icon: 円背景を廃止 */
.mechanism-point .mp-icon {
  flex-shrink: 0;
  width: 16px;          /* 旧: 24px */
  height: 16px;
  background: transparent; /* 旧: var(--color-accent) */
  border-radius: 0;     /* 旧: 50% */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
/* SVGアイコンのstroke色を白半透明に */
.mechanism-point .mp-icon svg {
  stroke: rgba(255, 255, 255, 0.55);
}
.mechanism-point .mp-content {}
.mechanism-point .mp-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.mechanism-point .mp-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* 【変更】mechanism-inner .btn-primary: box-shadow を削除 */
.mechanism-inner .btn-primary {
  background: #fff;
  color: var(--color-primary);
  box-shadow: none; /* 旧: 0 4px 20px rgba(255, 255, 255, 0.2) */
}
.mechanism-inner .btn-primary:hover {
  background: rgba(255,255,255,0.9);
  opacity: 1;
}

/* ============================================================
   ⑥ 実証・信頼 `#proof`（コピーv4 決定版: バッジ＋声カード＋比較表）
   徹底ミニマル化（セクションデザイン統一仕様 2026-05-22 反映）
   ============================================================ */
.section-proof {
  background: var(--color-bg); /* 変更なし（元々白） */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}

/* 【変更】proof-badges: バッジをFV指標スタイル（縦罫線＋左揃えタイポ）に統一
   修正2: justify-content を center に変更（2026-05-22 桜井仕様） */
.proof-badges {
  display: flex;
  gap: 0;
  justify-content: center;       /* 旧: flex-start — 中央揃えに変更 */
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
  border-top: 1px solid rgba(27, 36, 64, 0.10);
  padding-top: var(--space-5);
}

/* 【変更】proof-badge: カード装飾を全撤去、FVのhero-metricスタイルへ
   修正2: text-align center / padding均一化 / first-child の padding-left:0 廃止（2026-05-22 桜井仕様） */
.proof-badge {
  text-align: center;            /* 旧: left — 中央揃えに変更 */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 32px;               /* 旧: 0 40px — 均一な 0 32px に変更 */
  min-width: auto;
}
/* 修正2: first-child の padding-left:0 を削除し中央配置に揃える */
/* 縦ルール線（FVと同じ作法） */
.proof-badge + .proof-badge {
  border-left: 1px solid rgba(27, 36, 64, 0.12);
}

/* 【変更】proof-badge--highlight: 背景塗りをやめ文字色で差別化 */
.proof-badge--highlight {
  border-left: 1px solid rgba(27, 36, 64, 0.12); /* 旧: border-color変更 / background塗り */
  background: transparent;
}

/* pb-label: FVのhero-metric-labelに準じる / 修正2: center明示（2026-05-22 桜井仕様） */
.pb-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-sub);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 8px;
  text-align: center;        /* 修正2: バッジcenter化に合わせ明示 */
}

/* pb-value: 全体として落ち着かせる / 修正2: center明示（2026-05-22 桜井仕様） */
.pb-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  display: block;
  line-height: 1.3;
  margin-bottom: 4px;
  text-align: center;        /* 修正2: バッジcenter化に合わせ明示 */
}

/* proof-num: 大きな数値はFV作法に */
.proof-num {
  font-family: var(--font-en);
  font-size: 22px; /* 3バッジの値サイズを統一（2026-05-22 後藤さん指摘）。突出をやめ色で軽く差別化 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-primary); /* 数値のみネイビー強調を維持（サイズは揃え、色で差別化） */
}

.proof-unit {
  font-size: 16px; /* 値22pxに対する単位サイズ（2026-05-22 統一） */
  font-weight: 700;
}

/* 「以上」サフィックス（実証バッジ・和文・控えめ）2026-05-23 */
.proof-num-suffix {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  margin-left: 1px;
}

/* pb-note: FVのhero-metric-noteに準じる / 修正2: center明示（2026-05-22 桜井仕様） */
.pb-note {
  font-size: 11px;
  color: var(--color-text-sub);
  display: block;
  margin-top: 8px;
  text-align: center;        /* 修正2: バッジcenter化に合わせ明示 */
}

@media (max-width: 767px) {
  .proof-badges {
    gap: 24px 0;
    flex-direction: column;
    align-items: center;         /* 修正2: SP縦積み時も中央揃え（2026-05-22 桜井仕様） */
  }
  .proof-badge {
    padding: 0 0 24px 0;
    border-left: none;
    border-bottom: 1px solid rgba(27, 36, 64, 0.10);
    width: 100%;                 /* 修正2: SP全幅に */
    text-align: center;          /* 修正2: SP でも中央揃え */
  }
  .proof-badge:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .proof-badge + .proof-badge { border-left: none; }
  .proof-num { font-size: 22px; }
}

/* ----------------------------------------------------------------
   修正2: 実績写真エリア（バッジの下・声カードの上）
   影なし・角丸なし・底辺1px極薄罫線のミニマルプレースホルダ
   （2026-05-22 桜井仕様）
   ---------------------------------------------------------------- */
/* C-11対応: .case-highlight / .case-photo / .case-body / .case-* はHTML未使用のため削除（2026-05-24）*/

.proof-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3社：REMIO/エアーコネクト/まいもん寿司 */
  gap: 16px;   /* 余白はgapで統一→3枚同サイズ（旧: 各itemの右padding） */
  margin-bottom: var(--space-6);
  border-top: 1px solid rgba(27, 36, 64, 0.10);
  padding-top: var(--space-5);
}
/* 実績写真（実写真）— プレースホルダから差し替え 2026-05-22 */
.proof-photo-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.proof-photo-item {
  padding: 0;   /* 余白はgridのgapで統一（3枚同サイズ） */
}

/* プレースホルダ枠（影なし・角丸なし・ミニマル） */
.proof-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);   /* プレースホルダ識別用の薄背景 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-text-sub);       /* #5B6678 on #F4F7FA: 4.1:1 WCAG AA large ✓ */
  border-bottom: 1px solid rgba(27, 36, 64, 0.10); /* 底辺1本のみ */
  border-radius: 0;
  box-shadow: none;
}
/* 実写真 <img> に置換したら .proof-photo-placeholder は削除してよい */

/* 写真直下の会社情報（会社名・業種地域・募集職種）2026-05-22 後藤さん指示で声カードから移設 */
.proof-photo-meta {
  margin-top: 16px;
  text-align: center;
}
.ppm-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.45;
  margin: 0;
}
.ppm-detail {
  font-size: 12px;
  color: var(--color-text-sub);
  line-height: 1.5;
  margin: 4px 0 0;
}
.ppm-roles {
  font-size: 12px;
  color: var(--color-text-sub);
  line-height: 1.55;
  margin: 8px 0 0;
}

/* キャプション＝実績スタッツ（応募数・選考接続率）。大きな数字＋小ラベル 2026-05-22 */
/* 会社情報と実績の間に区切り罫線（2026-05-22 写真下集約に伴い追加） */
.proof-photo-caption {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 36, 64, 0.10);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;        /* 中央揃え */
}
.pc-stat {
  display: flex;
  flex-direction: column;    /* ラベル(上・小)→値(下・大) の縦並び */
  align-items: center;
  gap: 4px;
  margin: 0;
}
.pc-label {                  /* ラベル（応募件数／選考接続率）小さくグレー */
  font-size: 12px;
  color: var(--color-text-sub);
  letter-spacing: .02em;
}
.pc-value {                  /* 値 — 紺で大きく（落ち着いて目立つ） */
  font-family: var(--font-jp);
  font-size: 23px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  letter-spacing: .01em;
}

/* お客様の声（1社カード内・実績の下に統合）2026-05-23：1社ごと表示へ */
.proof-photo-voice {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 36, 64, 0.10);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-text-mid);
  text-align: left;
}

/* SP: 縦積み。1社=1ブロック（写真→情報→実績→声）で社ごとに広めの余白 */
@media (max-width: 767px) {
  .proof-photos {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .proof-photo-item { padding: 0; }
}

/* タブレットも3列のまま（3枚を同サイズに保つ）。SPのみ1列 */

/* 【変更】比較表: 外枠装飾撤去・塗り背景やめ極薄罫線＋SaishiLu列は縦罫線で示唆 */
.comparison-wrap {
  overflow-x: auto;
  border-radius: 0;   /* 旧: var(--radius-md) */
  box-shadow: none;   /* 旧: var(--shadow-sm) */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
  margin-top: var(--space-4);
}
.comparison-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border-radius: 0;   /* 旧: var(--radius-md) */
  overflow: hidden;
}
/* 修正3: 比較表スタイル強化（2026-05-22 桜井仕様）
   SaishiLu列の左右に縦罫線 / 見出し差別化 / 観点列sticky */
.comparison-table th, .comparison-table td {
  padding: 14px 20px;            /* 旧: 16px 20px — 行を少しコンパクトに */
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid rgba(27, 36, 64, 0.08);
  line-height: 1.5;
  vertical-align: middle;        /* 縦方向の揃え */
}

/* thead 全体 */
.comparison-table thead th {
  font-weight: 700;
  font-size: 13px;
  background: transparent;
  padding-bottom: 16px;          /* 見出し行に下余白 */
  border-bottom: 2px solid rgba(27, 36, 64, 0.15); /* thead/tbody の区切りを強く */
}

/* 観点列見出し（左端の空見出し）*/
.comparison-table thead th:first-child {
  background: transparent;
  color: var(--color-text-sub);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* 競合2列の見出し: グレーアウトで存在感を落とす */
.comparison-table thead th.col-media,
.comparison-table thead th.col-agency {
  background: transparent;
  color: var(--color-text-sub);  /* #5B6678 on #FFF: 4.54:1 ✓ WCAG AA */
  font-size: 13px;
  font-weight: 500;              /* 旧: 700 → 500 に落として見出し差別化 */
}

/* SaishiLu列見出し: 唯一明確にハイライト */
.comparison-table thead th.col-saishilu {
  background: rgba(27, 63, 106, 0.06);   /* 推し列：薄い紺ティント */
  color: var(--color-primary);           /* #1B3F6A on tint: AAA */
  font-size: 16px;
  font-weight: 700;
  border-top: 3px solid var(--color-primary);   /* 列を「冠」で強調 */
  border-left: none;
  border-right: none;
}
/* SaishiLu列見出しの「おすすめ」ラベル（小・アンバー） */
/* A-3対応: #8A5519（紺6%ティント背景上で4.5:1以上 ✓ WCAG AA。旧#A56820は3.1:1でNG） 2026-05-24 */
.th-recommend {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #8A5519;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

/* tbody 観点列（1列目）: 行ラベルとして強調 */
.comparison-table tbody td:first-child {
  font-weight: 700;
  font-size: 13px;               /* 旧: 14px — 見出し的役割なので少し小さく */
  color: var(--color-text);
  background: transparent;
  white-space: nowrap;           /* 観点テキストが折り返さないように */
}

/* 競合2列のtbodyセル */
.comparison-table tbody td.col-media,
.comparison-table tbody td.col-agency {
  color: var(--color-text-sub);  /* #5B6678 on #FFF: 4.54:1 ✓ WCAG AA */
  font-size: 14px;
}

/* SaishiLu列のtbodyセル: 両側縦罫線 + ネイビー太字 */
.comparison-table tbody td.col-saishilu {
  background: rgba(27, 63, 106, 0.05);   /* 推し列：薄い紺ティント */
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  border-left: none;
  border-right: none;
}

.comparison-table tbody tr:last-child td { border-bottom: none; }
/* 推し列の最下段に底アクセント（上の冠と対で列を締める） */
.comparison-table tbody tr:last-child td.col-saishilu { border-bottom: 3px solid var(--color-primary); }

/* モバイル横スクロール時: 観点列（1列目）を左固定
   background必須（スクロール時に他列と重なるため） */
.comparison-table tbody td:first-child,
.comparison-table thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--color-bg);  /* #1B2440 on #FFFFFF: 15.5:1 ✓ WCAG AAA */
  z-index: 1;
}

/* comparison-lead: 左揃え・コンテナ全幅（2026-05-22 桜井仕様） */
.comparison-lead {
  text-align: left;              /* 旧: center */
  font-size: 14px;
  color: var(--color-text-mid);
  max-width: 100%;               /* 旧: 640px */
  margin: 0 0 var(--space-3);   /* 旧: 0 auto 16px */
  border-top: 1px solid rgba(27, 36, 64, 0.10); /* 声カードとの区切り */
  padding-top: var(--space-5);  /* 上余白 */
}

.reasons-cta {
  text-align: center;
  margin-top: var(--space-5);
}

/* ============================================================
   ⑦ 安心・リスク除去 `#trust`（コピーv4: Damaging Admission）
   徹底ミニマル化（セクションデザイン統一仕様 2026-05-22 反映）
   ============================================================ */
/* 【変更】背景を白に */
.section-trust {
  background: var(--color-bg); /* 旧: var(--color-bg-soft) */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}
.trust-body {
  font-size: 17px;
  line-height: 2;
  color: var(--color-text);
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.trust-body p { margin-bottom: var(--space-4); }
.trust-body p:last-child { margin-bottom: 0; }

/* C-11対応: .voice-cards / .voice-card / .vc-* クラスはHTML未使用のため削除（2026-05-24）*/

/* ============================================================
   ⑧ FAQ `#faq`（デザインシステム §6-10 準拠）
   徹底ミニマル化（セクションデザイン統一仕様 2026-05-22 反映）
   ============================================================ */
.section-faq {
  background: var(--color-bg); /* 変更なし（元々白） */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}
.faq-list {
  /* container--narrow を使う */
}

/* 【変更】faq-item の罫線色を極薄に統一 */
.faq-item {
  border-bottom: 1px solid rgba(27, 36, 64, 0.10); /* 旧: var(--color-border) */
}
.faq-item:first-child {
  border-top: 1px solid rgba(27, 36, 64, 0.10); /* 旧: var(--color-border) */
}
.faq-question {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--color-primary); }
/* A11y不可侵: focus-visible は変更なし */
.faq-question:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }

/* 【変更】fq-label: 控えめに */
.faq-question .fq-label {
  font-family: var(--font-en);
  font-size: 12px;           /* 旧: 14px */
  font-weight: 500;          /* 旧: 700 */
  color: var(--color-text-sub); /* 旧: var(--color-primary) — #5B6678 on #FFF: 4.54:1 ✓ WCAG AA */
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.faq-question .fq-text { flex: 1; line-height: 1.5; }

/* 【変更】fq-icon: 縮小 */
.faq-question .fq-icon {
  flex-shrink: 0;
  width: 20px;               /* 旧: 24px */
  height: 20px;
  position: relative;
  color: var(--color-text-sub); /* 旧: var(--color-primary-mid) — 控えめに */
  margin-left: auto;
}
.faq-question .fq-icon::before,
.faq-question .fq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
/* 【変更】十字線の寸法を縮小 */
.faq-question .fq-icon::before { width: 12px; height: 1px; top: 9px; left: 4px; } /* 旧: w14/h2/top11/left5 */
.faq-question .fq-icon::after  { width: 1px; height: 12px; top: 4px; left: 9px; } /* 旧: w2/h14/top5/left11 */
.faq-question[aria-expanded="true"] .fq-icon::after { transform: rotate(90deg); opacity: 0; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.is-open .faq-answer {
  max-height: 800px;
}
/* 【変更】faq-answer-inner: インデントを fq-label 縮小分に揃える */
.faq-answer-inner {
  padding: 0 0 20px 24px; /* 旧: 0 0 20px 28px */
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.8;
}
.faq-answer-inner p { margin-bottom: 12px; }
.faq-answer-inner p:last-child { margin-bottom: 0; }

/* ============================================================
   ⑨ クロージング＋相談フォーム `#contact`（デザインシステム §6-11 準拠）
   徹底ミニマル化（セクションデザイン統一仕様 2026-05-22 反映）
   ============================================================ */
/* 【変更】背景を白に */
.section-contact {
  background: var(--color-bg); /* 旧: var(--color-bg-soft) */
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}
.contact-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}
.contact-heading h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}
@media (max-width: 767px) { .contact-heading h2 { font-size: 24px; } }
.contact-heading .contact-lead {
  font-size: 16px;
  color: var(--color-text-mid);
  line-height: 1.8;
}
/* 無料診断の流れ（一言）コピーv4 */
.contact-flow {
  font-size: 14px;
  color: var(--color-text-sub);
  margin-top: var(--space-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 【変更】フォームラッパー: 箱をやめ、コンテナのみ */
.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  background: transparent;  /* 旧: #fff */
  padding: 0;               /* 旧: 40px 36px — 外枠がなくなるので各form-groupに任せる */
  border-radius: 0;         /* 旧: var(--radius-md) */
  box-shadow: none;         /* 旧: var(--shadow-md) */
  border-top: 1px solid rgba(27, 36, 64, 0.12); /* フォーム開始の仕切り線のみ */
  padding-top: var(--space-5);
}
@media (max-width: 767px) {
  .contact-form-wrap { padding-top: var(--space-4); }
}

.form-group {
  margin-bottom: var(--space-4);
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* 【変更】required-badge: ネイビー塗りバッジをテキストに */
.form-group label .required-badge {
  display: inline;              /* 旧: inline-block */
  background: transparent;      /* 旧: var(--color-primary) */
  color: var(--color-text-sub); /* 旧: #fff — #5B6678 on #FFF: 4.54:1 ✓ */
  font-size: 10px;
  padding: 0;                   /* 旧: 2px 8px */
  border-radius: 0;             /* 旧: 4px */
  margin-left: 4px;
  vertical-align: middle;
}
.form-group label .optional-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-sub);
  margin-left: 6px;
}

/* 【変更】入力欄: 角丸撤去、下線ベースのフォームに近づける */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"] {
  width: 100%;
  height: 48px;
  border: none;                             /* 旧: 1px solid var(--color-border)（全辺） */
  border-bottom: 1px solid var(--color-border); /* 下線のみ */
  border-radius: 0;                         /* 旧: var(--radius-sm) */
  padding: 0 0 0 4px;                       /* 旧: 0 16px */
  font-size: 15px;
  color: var(--color-text);
  background: transparent;                  /* 旧: #fff */
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
}
/* D-15対応: WCAG 2.2 SC2.4.11 フォーカス可視化。outline追加 2026-05-24 */
.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}
.form-group input[aria-invalid="true"] {
  border-bottom-color: var(--color-error);   /* 旧: border-color + box-shadow */
  box-shadow: none;
}

/* 【変更】textarea: 下線ベースに */
.form-group textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;                          /* 旧: var(--radius-sm) */
  padding: 12px 4px;                         /* 旧: 12px 16px */
  font-size: 15px;
  color: var(--color-text);
  background: transparent;
  transition: border-color 0.2s;
  outline: none;
  line-height: 1.7;
}
/* D-15: textarea:focus は input:focus との統合ルールで処理済み（上方を参照） */
.form-group textarea[aria-invalid="true"] {
  border-bottom-color: var(--color-error);
  box-shadow: none;
}

/* ヒントテキスト */
.form-hint {
  display: block;
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 4px;
  line-height: 1.5;
}

/* PP同意文（小） */
.form-pp-note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 8px;
  line-height: 1.6;
}
.form-pp-note a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* エラーメッセージ */
.form-error {
  display: none;
  font-size: 12px;
  color: var(--color-error);
  margin-top: 4px;
}
.form-error.is-show {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* プライバシーポリシー同意 */
.form-agree {
  margin-bottom: var(--space-5);
}
.form-agree label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.6;
  font-weight: 400;
}
.form-agree input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.form-agree input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.form-agree input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 8px;
  height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(40deg);
}
.form-agree input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.form-agree a { color: var(--color-primary); text-decoration: underline; }

/* ハニーポット（スパム対策・視覚的に非表示） */
/* C-3対応: 無効なCSS属性 tabindex:-1 を削除。tabindex はHTML属性として <input> に設定済み */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* 送信ボタン */
.form-submit {
  width: 100%;
}
/* 送信失敗時のエラー表示（2026-05-24 実送信実装） */
.form-submit-error {
  margin: 12px 0 0;
  color: var(--color-error);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.form-submit .btn-primary {
  width: 100%;
  min-width: auto;
  padding: 20px 40px;
  font-size: 16px;
}
.form-submit .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 送信完了メッセージ */
.form-complete {
  display: none;
  text-align: center;
  padding: 40px 32px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}
.form-complete.is-show { display: block; }
.form-complete h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.form-complete p {
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}
.form-complete .complete-tel {
  font-size: 14px;
  color: var(--color-text-sub);
}

/* 電話・メール導線 */
.contact-alt {
  max-width: 640px;
  margin: var(--space-5) auto 0;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
/* 【変更】contact-tel: 箱撤去 */
.contact-tel {
  flex: 1;
  text-align: center;
  background: transparent;  /* 旧: #fff */
  border: none;             /* 旧: 1px solid var(--color-border) */
  border-radius: 0;         /* 旧: var(--radius-md) */
  padding: 20px 16px;
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}
.contact-tel p { font-size: 13px; color: var(--color-text-mid); margin-bottom: 4px; }
.contact-tel a {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
  line-height: 1.2;
}
.contact-tel .tel-hours { font-size: 12px; color: var(--color-text-sub); margin-top: 4px; }
@media (max-width: 767px) {
  .contact-alt { flex-direction: column; }
}

/* ============================================================
   FOOTER（デザインシステム §6-13 準拠）
   ============================================================ */
.site-footer {
  background: var(--color-footer);
  padding: 56px 0 0;
  color: rgba(255, 255, 255, 0.85);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-brand .footer-logo {
  width: 152px;          /* 横型ロゴ（白）に差し替え 2026-05-24 */
  height: auto;
  margin-bottom: 14px;
  display: block;
}
.footer-info a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-info a:hover { color: #fff; }
/* m-1対応: 0.65 → 0.80 に引き上げ。#0A1E35背景上で約5.8:1 ✓ WCAG AA */
.footer-brand .footer-tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.6;
}
.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.footer-nav li a {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.80);
  transition: color 0.2s;
}
.footer-nav li a:hover { color: var(--color-accent); opacity: 1; }
.footer-contact {}
/* m-1対応: 0.65 → 0.80 */
.footer-contact .fc-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: var(--space-2);
  display: block;
}
/* M-1対応: fc-cta を accent-dark に変更。白文字との比率 5.38:1 ✓ */
.footer-contact .fc-cta {
  display: inline-block;
  background: var(--color-accent-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
  transition: background 0.2s;
}
.footer-contact .fc-cta:hover { background: var(--color-accent-hover); opacity: 1; }
/* m-1対応: 0.55 → 0.80 に引き上げ。#0A1E35背景上で約5.8:1 ✓ WCAG AA */
.footer-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom .footer-links {
  display: flex;
  gap: 16px;
}
/* m-1対応: 0.55 → 0.78 */
.footer-bottom .footer-links a {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-en);
}
.footer-bottom .footer-links a:hover { color: rgba(255, 255, 255, 0.9); opacity: 1; }
/* m-1対応: 0.45 → 0.78 に引き上げ。#0A1E35背景上で約4.5:1以上 ✓ WCAG AA */
.copyright {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-en);
}

@media (max-width: 767px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   モバイル下部追従CTAバー（デザインシステム §6-14 準拠）
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(27, 63, 106, 0.97);
  backdrop-filter: blur(8px);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  /* 初期非表示 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 0.4s, transform 0.4s;
}
.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* PC では非表示 */
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}
/* 決定版: 単一CTAバー（電話ボタン廃止）
   M-1対応: sticky-consult を accent-dark に変更。白文字との比率 5.38:1 ✓
   M-3対応: min-height: 44px を付与（WCAG 2.5.8） */
.sticky-cta .sticky-consult {
  flex: 1;
  background: var(--color-accent-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 16px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.sticky-cta .sticky-consult:hover { background: var(--color-accent-hover); opacity: 1; }
.sticky-cta .sticky-consult:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* body 下部余白（追従バー分） */
@media (max-width: 767px) {
  body { padding-bottom: 70px; }
}

/* ============================================================
   プライバシーポリシーページ固有
   ============================================================ */
.privacy-page main { padding-top: calc(var(--header-h) + 48px); }
.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 28px var(--space-8);
}
.privacy-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  letter-spacing: 0.04em;
}
.privacy-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-soft);
}
.privacy-content p {
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}
.privacy-content ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: var(--space-4);
}
.privacy-content ul li {
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: 6px;
}
.privacy-content .privacy-date {
  font-size: 13px;
  color: var(--color-text-sub);
  text-align: right;
  margin-top: var(--space-7);
}

/* ============================================================
   スキップリンク（M-2対応: WCAG 2.4.1 ブロックスキップ AA）
   ============================================================ */
/* 通常は画面外に隠し、フォーカス時に表示する */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  z-index: 200;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  top: 0;
}

/* ============================================================
   編集メモ（QA Warn-10/11 対応: draft-note クラス）
   ============================================================ */
/* 公開前の編集箇所を視覚的に明示するスタイル。公開前に削除または非表示にすること */
.draft-note {
  display: block;
  border: 1.5px dashed #b0895c;
  background: #fff8ee;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 6px 0;
  font-size: 12px;
  color: #7a5520;
  font-style: normal;
  line-height: 1.6;
}
.draft-note::before {
  content: '編集メモ（公開前に差し替え）: ';
  font-weight: 700;
  display: inline;
}

/* ============================================================
   proof-photos 2列バリアント（建設LPなど2社掲載時に使用）
   .proof-photos.proof-photos--2col を付与するとPC/TABで2列表示。
   SP（~767px）は通常の1列のまま。本体LPには影響なし。
   ============================================================ */
@media (min-width: 768px) {
  .proof-photos.proof-photos--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   proof-photos 1列バリアント（空調LP など1社掲載時に使用）
   .proof-photos.proof-photos--1col を付与すると全幅で1列表示。
   写真を中央に寄せ、幅を制限して読みやすくする。
   ============================================================ */
.proof-photos.proof-photos--1col {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   section-roles（職種書き分け・建設LP専用）
   ハウススタイル: 1px極薄罫線・余白・タイポ主導。箱/影/角丸/装飾背景なし
   ============================================================ */
.section-roles {
  background: var(--color-bg);
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}

.roles-lead {
  max-width: 680px;
  margin: 0 auto var(--space-6);
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-mid);
}

/* 2カラムグリッド（PC/TAB）*/
.roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(27, 36, 64, 0.10);
}

/* 各カード（左右を縦罫線で仕切る）*/
.roles-card {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid rgba(27, 36, 64, 0.10);
}
.roles-card:last-child {
  border-right: none;
}

/* カードラベル（職種分類）*/
.roles-card-label {
  display: block;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-primary-mid);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(27, 36, 64, 0.10);
}

/* カード見出し（h3）*/
.roles-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.45;
  margin-bottom: var(--space-3);
}

/* カード本文 */
.roles-card p {
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}
.roles-card p:last-child {
  margin-bottom: 0;
}

/* 締めの一文（カード外・中央）*/
.roles-closing {
  max-width: 680px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.7;
}

/* SP: 縦積み */
@media (max-width: 767px) {
  .roles-grid {
    grid-template-columns: 1fr;
  }
  .roles-card {
    border-right: none;
    border-bottom: 1px solid rgba(27, 36, 64, 0.10);
    padding: var(--space-5) 0;
  }
  .roles-card:last-child {
    border-bottom: none;
  }
  .roles-lead {
    font-size: 15px;
  }
}

/* ============================================================
   empathy-list 5枚対応（建設LP v2）
   PC: 3列 → 2行（3+2）
   TAB: 2列（3+2）
   SP: 1列縦積み（既存と同じ）
   ============================================================ */
@media (min-width: 1024px) {
  .empathy-list--5 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 3列グリッドで3の倍数が右端：罫線除去 */
  .empathy-list--5 .empathy-item:nth-child(3n) {
    border-right: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .empathy-list--5 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2列で偶数列右端：罫線除去 */
  .empathy-list--5 .empathy-item:nth-child(2n) {
    border-right: none;
  }
  /* 5枚目（最後の奇数）は全幅 */
  .empathy-list--5 .empathy-item:nth-child(5) {
    grid-column: 1 / -1;
    border-right: none;
  }
}

/* ============================================================
   empathy-list 6枚対応（建設LP v3: 3×2行で均等割り）
   PC: 3列×2行
   TAB: 2列×3行
   SP: 1列縦積み（共通）
   ハウススタイル: 極薄罫線・余白主導、箱/影/角丸なし（既存 .empathy-item 踏襲）
   ============================================================ */
@media (min-width: 1024px) {
  .empathy-list--6 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 3列グリッドで3の倍数が右端：縦罫線除去 */
  .empathy-list--6 .empathy-item:nth-child(3n) {
    border-right: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .empathy-list--6 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2列で偶数列が右端：縦罫線除去 */
  .empathy-list--6 .empathy-item:nth-child(2n) {
    border-right: none;
  }
}

/* ============================================================
   empathy-list 7枚対応（建設LP 旧v1・参照残し）
   PC: 4+3 の2行グリッド（3列ベース）
   TAB: 2列
   SP: 1列縦積み（既存と同じ）
   ============================================================ */
@media (min-width: 1024px) {
  .empathy-list--7 {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 後半3枚は3列で均等配置 */
  .empathy-list--7 .empathy-item:nth-child(5),
  .empathy-list--7 .empathy-item:nth-child(6),
  .empathy-list--7 .empathy-item:nth-child(7) {
    /* 4列グリッドで後半は span なし。5-7枚目の右端は罫線不要 */
  }
  /* 4列グリッドで4の倍数の右端：罫線除去 */
  .empathy-list--7 .empathy-item:nth-child(4n) {
    border-right: none;
  }
  /* 後半行の上罫線は「行の切れ目」を示す border-top で */
  .empathy-list--7 .empathy-item:nth-child(n+5) {
    border-top: none; /* border-topは既存セクションではなくgrid gap を使う */
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .empathy-list--7 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* タブレット2列の場合、奇数列右端に罫線なし */
  .empathy-list--7 .empathy-item:nth-child(2n) {
    border-right: none;
  }
  /* 7枚目は全幅 */
  .empathy-list--7 .empathy-item:nth-child(7) {
    grid-column: 1 / -1;
    border-right: none;
  }
}

/* ============================================================
   empathy 受け文（努力不足ではないブロック）
   ============================================================ */
.empathy-outro {
  max-width: 680px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
}
.empathy-outro p { margin-bottom: var(--space-3); }
.empathy-outro p:last-child { margin-bottom: 0; }
.empathy-outro .empathy-stat {
  font-weight: 700;
  color: var(--color-primary);
}

/* ============================================================
   proof-photo ラベルバッジ（建設LP用）
   ============================================================ */
.proof-case-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(27, 63, 106, 0.25);
}

/* キャプション強調文 */
.proof-caption-strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 0;
  text-align: center;
}

/* ============================================================
   ユーティリティ
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   フォーム拡張 v2（2026-05-28 後藤さん指摘修正・既存ミニマルデザイン準拠）
   下線オンリー・背景透明・角丸なし のスタイル言語に統一
   ============================================================ */

/* fieldset を form-group と同等視覚に */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  min-inline-size: 0;
}
.form-fieldset legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  padding: 0;
  float: none;
}
.form-fieldset legend .required-badge {
  display: inline;
  background: transparent;
  color: var(--color-text-sub);
  font-size: 10px;
  padding: 0;
  border-radius: 0;
  margin-left: 4px;
  vertical-align: middle;
}

/* (任意・複数選択可) 表記 */
.form-optional {
  font-weight: 400;
  font-size: 11px;
  color: var(--color-text-sub);
  margin-left: 6px;
}

/* ラジオ・チェックボックスのグループ — borderless スマート版 */
.form-radio-group,
.form-checkbox-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
  border: none;
  margin-top: 6px;
}

@media (min-width: 768px) {
  .form-radio-group,
  .form-checkbox-group {
    grid-template-columns: 1fr 1fr;
  }
}

.form-radio,
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
  border: none;
  background: transparent;
  transition: color 0.15s;
}
.form-radio:hover,
.form-checkbox:hover {
  color: var(--color-primary);
}
.form-radio input[type="radio"],
.form-checkbox input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
/* 選択時：プライマリ色 + 太字 */
.form-radio:has(input:checked),
.form-checkbox:has(input:checked) {
  color: var(--color-primary);
  font-weight: 600;
}

/* textarea — 既存inputと同じ下線オンリーに */
#contactForm textarea {
  width: 100%;
  min-height: 96px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: transparent;
  resize: vertical;
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
  display: block;
}
#contactForm textarea:focus {
  border-bottom-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
#contactForm textarea[aria-invalid="true"] {
  border-bottom-color: var(--color-error);
}