@charset "UTF-8";

/* =========================================================
   SkyGrid AI/DX 研修 LP  /  style.css

   構成メモ
   - 本体は中央 max 1000px。画面が広い場合、左右のグレーは余白。
   - セクション帯（白/淡ブルー/淡ラベンダー/淡グレー/ネイビー）は本体幅内で全幅。
   - 追従ヘッダー、ホバーアニメは「仮」。ハンバーガーメニュー内容は調整中。
   - イラスト/写真は images/ 配下。仮ボックスは .ph。
   - 見出し=24px / 本文p=14px / 黒文字は #4B4C50 に統一。
   - <br class="pc"> は 800px 超でのみ改行（800px以下は解除）。

   目次
   01. 変数・リセット・共通
   02. ヘッダー / ボタン / ハンバーガー / メニュー
   03. FV
   04. お悩み（吹き出し）
   05. before / after
   06. ご提案の背景
   07. 本プログラムの特徴
   08. リスキリング助成金とは？（料金カード）
   09. 表（活用条件・概要）
   10. カリキュラム（タブ）
   11. 選ばれる理由
   12. ステップ / 申請フロー / 期間の目安
   13. FAQ
   14. CTA / フッター
   15. 仮ボックス（イラスト/写真）
   16. レスポンシブ
   ========================================================= */


/* =========================================================
   01. 変数・リセット・共通
   ========================================================= */
:root {
  /* ネイビー系 */
  --navy:        #16335f;   /* 主ネイビー（カード・丸番号・CTA・濃帯） */
  --navy-deep:   #0f2748;   /* さらに濃いネイビー */
  --navy-line:   #2a4b7c;

  /* ゴールド系 */
  --gold:        #EAC10A;   /* ★修正32: ボタン・アクセントの黄色を #EAC10A に */
  --gold-dark:   #c99e04;
  --gold-mark:   #fbecae;   /* マーカー風ハイライト（淡い黄） */

  --blue-accent: #2156a8;   /* 強調テキスト・リンク */

  /* セクション帯の背景 */
  --band-blue:     #e3ecf8; /* お悩み */
  --band-lavender: #e8ecf7; /* before/after・ご提案背景・概要・申請フロー */
  --band-gray:     #f1f2f4; /* 助成金とは・流れ・必要書類 */

  --page-bg:   #d9dade;     /* 本体外側のグレー余白 */
  --card-bg:   #ffffff;
  --card-line: #e4e7ee;

  /* テキスト（黒文字は全部 #4B4C50 に統一） */
  --text:      #4B4C50;
  --text-sub:  #4B4C50;
  --heading:   #4B4C50;

  --maxw:   1000px;         /* 本体最大幅 */
  --pad:    56px;           /* セクション左右パディング（PC） */
  --radius: 14px;

  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
          "Yu Gothic", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  /* ★修正30: グレー余白部分に背景画像（LPFV2）を敷く */
  background: var(--page-bg) url("images/LPFV2.png") center top / cover fixed no-repeat;
  line-height: 1.8;
  font-size: 0.875rem;             /* 本文p基準 = 14px */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* ★修正63: 横スクロール/はみ出し防止の保険 */
}
/* 長文・URLが枠からはみ出さない保険 */
.step h4, .step p, .kai h4, .kai p, .ba-card p, .worry-card p { overflow-wrap: anywhere; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
p   { margin: 0; }

/* 本体コンテナ（中央 max 1000px） */
.lp {
  max-width: var(--maxw);
  margin: 0 auto;
  background: #fff;
  overflow: hidden;            /* 角の帯がはみ出さないように */
  box-shadow: 0 0 40px rgba(0, 0, 0, .06);
}

/* セクション共通 */
.section            { padding: 64px var(--pad); }
.section--blue      { background: var(--band-blue); }
.section--lavender  { background: var(--band-lavender); }
.section--gray      { background: var(--band-gray); }
.section--white     { background: #fff; }
.section--navy      { background: var(--navy); color: #fff; }

.section-title {
  text-align: center;
  font-size: 1.5rem;             /* 見出し基準 = 24px */
  font-weight: 700;
  color: var(--heading);
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.section-title--navy {
  color: var(--navy);
  text-align: left;
}

.section-lead {
  text-align: center;
  color: var(--text-sub);
  font-size: 0.875rem;
  margin: 0 auto 36px;
  max-width: 640px;
}

.subhead {
  text-align: center;
  color: var(--text-sub);
  margin: 0 0 28px;
}

/* 800px超でのみ改行する <br class="pc">（800px以下は解除） */
br.pc { display: inline; }

/* マーカー風ハイライト */
.mark {
  background: linear-gradient(transparent 55%, var(--gold-mark) 55%);
  padding: 0 4px;
  font-weight: 700;
}


/* =========================================================
   02. ヘッダー / ボタン / ハンバーガー / メニュー
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 300;   /* 通常時の追従ヘッダー。メニュー展開時はオーバーレイ(350)・ドロワー(400)が上に重なる */
  background: #fff;
  border-bottom: 1px solid #eef0f3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 64px;
  padding: 0 var(--pad);   /* ★修正83: 本文(content)の左右に揃える（みちみち解消） */
  display: flex;
  align-items: center;
  gap: 14px;
}
.header__spacer { flex: 1; }
.header .btn-gold { padding: 6px 24px; }   /* ヘッダーお問い合わせの上下幅 */

/* ブランド（ロゴ＋社名） */
.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: opacity .2s ease;
}
.brand:hover { opacity: .8; }
.brand__logo-img { height: 40px; width: auto; display: block; }
.brand__title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--heading);
  white-space: nowrap;
}

/* ボタン共通（ホバーアニメ＝仮） */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
  padding: 12px 24px;
  font-size: 1rem;             /* ヘッダーのお問い合わせ = 16px */
}
/* ★修正24: ボタン内の細い長い矢印（元デザイン準拠・currentColorで色追従） */
.btn-arrow { width: 30px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }

.btn-gold:hover  { transform: translateY(-2px); }
.btn-gold:active { transform: translateY(0); }

.btn-outline {
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 12px 26px;
  font-size: 0.875rem;
}
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ハンバーガー（メニュー内容は調整中＝仮） */
.hamburger {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--navy);
  transition: transform .25s ease, opacity .25s ease;
}
/* ★修正92: 開いてもハンバーガーは三本線のまま（中央に浮く×は廃止）。閉じるはドロワー内の×で行う */

/* ★修正91: 右からスライドインのドロワー（幅80%・オーバーレイ） */
.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 360px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 400;   /* ★修正92: ヘッダー(300)より上＝ドロワー上部の×まで全部見える */
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
  transform: translateX(100%);   /* 通常は画面外（右） */
  transition: transform .3s ease;
}
.menu-panel.is-open { transform: translateX(0); }
.menu-panel__inner {
  padding: 72px 24px 24px;   /* ★修正92: 上の×ボタンと被らない位置からリンク開始 */
}
/* ★修正92: ドロワー右上の閉じる×（分かりやすい位置に固定） */
.menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--heading);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .2s ease;
}
.menu-close:hover { background: #f0f1f4; }

/* 背景オーバーレイ */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 350;   /* ★修正92: ヘッダー(300)も含めて全体を暗くする／ドロワー(400)より下 */
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-panel a {
  display: block;
  padding: 12px 6px;
  border-bottom: 1px solid #f0f1f4;
  font-weight: 600;
  color: var(--heading);
  transition: color .2s ease, padding .2s ease;
}
.menu-panel a:hover { color: var(--blue-accent); padding-left: 12px; }
.menu-panel .note { color: var(--text-sub); font-size: 0.75rem; padding-top: 10px; }


/* =========================================================
   03. FV（ファーストビュー）
   ========================================================= */
.fv {
  padding: 75px 44px 0px;   /* ★修正7: FV下（次セクションまで）の余白を詰めた（下56px → 24px） */
  background: #fff;
}
.fv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.chip {
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 2px;          /* 角丸にしない（ほぼ直角） */
}
.fv__grid {
  display: flex;
  gap: 15px;
  align-items: flex-start;   /* ★修正4: 縦中央→上揃え。チップと大見出しの間の空きを詰めた（間隔自体は .fv__chips の margin-bottom で微調整可） */
}
.fv__body { flex: 1 1 0; min-width: 0; }
.fv__title {
  font-size: 1.75rem;
  line-height: 1.45;
  font-weight: 800;
  color: var(--heading);
  margin: 0 0 16px;
  letter-spacing: 0;
}
.fv__lead {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 12px;
  white-space: nowrap;
}
.fv__text {
  color: var(--text-sub);
  font-size: 1rem;
  margin: 0 0 26px;
}
.fv__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.fv__btns .btn-pill { font-size: 0.875rem; }     /* FVボタン = 14px */
.fv__illust { flex: 0 0 528px; }
.fv__illust img { width: 100%; height: auto; display: block; }


/* =========================================================
   04. お悩み（吹き出し：淡ブルー角丸＋下向きしっぽ）
   ========================================================= */
.worry-bubble {
  position: relative;
  background: var(--band-blue);
  border-radius: 24px;
  padding: 44px 40px 48px;
}
.worry-bubble::after {            /* 下向きのしっぽ */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 24px solid var(--band-blue);
}

.worry__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;   /* ★修正5: H2「同じ悩み〜」と下のカードまでの距離を広げた（8px → 32px） */
}
.worry-card { text-align: center; }
.worry-card__img {
  background: #fff;
  border: 1px solid #dde3ee;
  border-radius: 14px;
  overflow: hidden;
}
.worry-card__img img { width: 100%; height: auto; display: block; }
.worry-card__img.ph--sq { aspect-ratio: 1 / 1; }
.worry-card p {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 600;
}

.worry__conc {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--heading);
  margin: 56px 0 16px;
}
.worry__sum {
  text-align: center;
  color: var(--text-sub);
  font-size: 0.875rem;
}


/* =========================================================
   05. before / after
   上＝淡ラベンダー（before）＋下端に大三角 / 下＝白（bridge＋after）
   ========================================================= */
.ba { background: #fff; }

.ba__top {
  position: relative;
  background: var(--band-lavender);
  padding: 60px 56px 64px;
}
.ba__top .section-title { margin-bottom: 30px; }
.ba__top::after {                /* 下向きの大きな三角（視線を下へ誘導） */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -86px;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 86px solid var(--band-lavender);
}

.ba__bottom { padding: 118px 56px 110px; }   /* ★修正3: after（黄色枠）下の白い余白を拡大（64px → 110px） */

.ba__bridge {
  text-align: center;
  margin: 0 0 32px;
  font-size: 1.5rem;          /* ★修正85: 「にすると」も同サイズに（黄色は付けない） */
  font-weight: 800;
  color: var(--heading);
}
.ba__bridge .hl {            /* ★修正85: 黄色マーカーは「AIを“自分の道具”」だけに（余分な黄色線を解消） */
  background: linear-gradient(transparent 55%, var(--gold-mark) 55%);
  padding: 2px 12px;
}
/* スマホ専用の改行（PC・タブレットは1行） */
br.sp { display: none; }

.ba__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ba-card {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  display: flex;            /* ★修正53: 1行キャプションを2行ぶんの高さの中で縦中央に */
  flex-direction: column;
}
.ba-card--after { border: 2px solid var(--gold); }
.ba-card__img { border-radius: 8px; overflow: hidden; }
.ba-card__img img { width: 100%; height: auto; display: block; }
.ba-card p {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  flex: 1;                  /* ★修正53: 残りの高さを占有して中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   06. ご提案の背景（番号すかし付き 3カラム）
   ========================================================= */
.bg-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}
.bg-col {
  position: relative;
  background: rgba(255, 255, 255, .6);
  border-radius: var(--radius);
  padding: 26px 10px 34px;
  text-align: center;
  overflow: hidden;
  /* 見出し＋本文を四角の中で縦横とも中央寄せ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bg-col h3 {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  color: var(--heading);
  font-weight: 700;
}
.bg-col p { font-size: 0.875rem; color: var(--text-sub); }
.bg-col__num {
  position: absolute;
  right: 8px;
  bottom: -14px;
  font-size: 4.25rem;
  font-weight: 800;
  color: rgba(22, 51, 95, .07);
  line-height: 1;
}


/* =========================================================
   07. 本プログラムの特徴
   ========================================================= */
/* ★修正1→8: 本プログラムの特徴セクションの上下余白。上は少し広げ(56px)、下は狭め(36px) */
.feature-sec { padding-top: 56px; padding-bottom: 36px; }

.feature {
  display: flex;
  gap: 72px;   /* ★修正22: 文字を画像から離して右へ寄せた（28px → 72px） */
  align-items: center;
  justify-content: center;   /* ★修正25: 画像＋文字を1セットとして横幅中央に */
  margin-top: 24px;
}
.feature__illust { flex: 0 0 380px; }
.feature__illust img { width: 100%; height: auto; display: block; }
.feature__text {
  flex: 0 1 auto;   /* ★修正25: 伸ばさず自然幅にして中央寄せを効かせる */
  color: var(--text-sub);
  font-size: 1.125rem;   /* ★修正6→23: 18pxに変更（.feature は align-items:center で縦中央、gap 72pxで右寄せ） */
  line-height: 1.9;
}
.feature__text strong { color: var(--blue-accent); font-weight: 700; }


/* =========================================================
   08. リスキリング助成金とは？（料金カード）
   ========================================================= */
.subsidy__sub {
  color: var(--blue-accent);
  font-weight: 700;
  font-size: 1rem;
  margin: 6px 0 14px;
}
.subsidy__intro {
  color: var(--text-sub);
  font-size: 0.875rem;
  margin-bottom: 28px;
}
.subsidy__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: stretch;   /* ★修正2: 左右カードの高さを揃える（料金カードを縦中央化する前提） */
}
/* ★修正9: 助成金の特徴（左カラム）を右の料金カード高さに対して縦中央に揃える */
.subsidy__feat {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.subsidy__feat h3 { font-size: 1rem; color: var(--heading); margin: 0 0 14px; }
.subsidy__feat ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--text-sub);
  font-size: 0.875rem;
}
.subsidy__feat li { margin-bottom: 8px; }

.price-card {
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 26px 28px;
  /* ★修正2: 文字の塊を四角の中で縦中央に揃える */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-card__head { font-weight: 700; font-size: 1rem; }
.price-card__sub  { font-size: 0.75rem; color: #b9c6dd; margin-bottom: 18px; }
.price-card hr    { border: none; border-top: 3px solid #fff; margin: 12px 0; }   /* ★修正10→13: 実質負担額の上の線を太く＆真っ白に */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 0.9375rem;
}
.price-row span:last-child { font-size: 1.25rem; font-weight: 700; }
.price-row--total span:first-child { font-size: 1.125rem; font-weight: 700; }
.price-row--total span:last-child  { font-size: 1.625rem; }


/* =========================================================
   09. 表（活用条件・概要）
   ========================================================= */
.tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.tbl th,
.tbl td {
  text-align: left;
  padding: 16px 14px;
  border-bottom: 1px solid var(--card-line);
  font-size: 0.875rem;
  vertical-align: top;
}
.tbl thead th { color: var(--heading); font-weight: 700; border-bottom: 2px solid #d4d9e2; }
.tbl td:first-child,
.tbl th:first-child { width: 30%; font-weight: 600; color: var(--heading); }

/* 概要：ラベル付きミニ表＋ネイビーカード */
.overview-sec { padding-top: 40px; }   /* ★修正27: 本提案の概要の上余白を詰めた（64px → 40px） */
.overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ★修正31: 左右の四角の横幅を統一（1.15fr 1fr → 1fr 1fr） */
  gap: 22px;
  margin-top: 28px;
  align-items: stretch;   /* ★修正17: 左の表と右カードの上端（高さ）を揃える */
}
/* ★修正14→18: 各行を等高に＋隙間なし（元デザイン通りの余白なし四角）。区切りは細線のみ */
.label-table { display: grid; gap: 0; grid-auto-rows: 1fr; margin: 0; }   /* ★修正19: dl標準マージン除去で右カードと上端を揃える */
.label-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  background: #fff;
  border-radius: 0;        /* 角丸なし */
  overflow: hidden;
}
.label-row:not(:last-child) > dd { border-bottom: 1px solid var(--card-line); }
.label-row > dt {
  background: var(--navy);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.label-row > dd {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--text);
}

.overview-card {
  background: var(--navy);
  color: #fff;
  border-radius: 0;   /* ★修正18: 右カードも角丸なし */
  padding: 30px 28px;
  /* ★修正21: 文字の塊をカード高さに対して縦中央に */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overview-card__price  { font-size: 1rem; margin-bottom: 18px; }
.overview-card__note   { font-size: 0.875rem; color: #c2cee2; }
.overview-card__strong { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 4px 0 22px; }
/* ★修正26: 右カードのお問い合わせをヘッダーと同じゴールドに */
.overview-card .btn-pill {
  width: 100%;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 14px;
}
.overview-card .btn-pill:hover { transform: translateY(-2px); }


/* =========================================================
   10. カリキュラム（タブ）
   ========================================================= */
/* ★修正28: カリキュラムのリード文と米印の間を詰める */
.curriculum-sec .subhead { margin-bottom: 8px; }
.curriculum__note {
  text-align: center;
  color: var(--text-sub);
  font-size: 0.75rem;
  margin-bottom: 30px;
}

.tabs__list {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.tab {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 11px 32px;
  border-radius: 999px;
  background: #e6e9ef;
  color: var(--navy);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.tab:hover { background: #d6dbe5; transform: translateY(-1px); }
.tab.is-active { background: var(--navy); color: #fff; }

/* ★修正15: コマ（タブ内容）の後ろに薄いグレーの面を敷く */
.tab-body {
  background: #f4f5f7;
  border-radius: 16px;
  padding: 28px;
}
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fadeIn .25s ease; }
.tabpanel .kai:last-child { margin-bottom: 0; }   /* グレー面の下余白を揃える */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* 各回カード（左の縦バー：通常ネイビー / 4コマ=ゴールド） */
.kai {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 20px 28px 20px 48px;   /* ★修正50: 左の余白を広げた（28→48px） */
  margin: 0 auto 14px;            /* ★修正39→40: 中央揃え */
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
  max-width: 680px;               /* ★修正50: 横幅を少し広げた（600→680px） */
}
.kai::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 3px;
  background: var(--navy);
}
.koma--gold .kai::before { background: var(--gold); }
.kai h4 { margin: 0 0 10px; font-size: 0.875rem; color: var(--heading); font-weight: 700; }
.kai p  { font-size: 0.875rem; color: var(--text-sub); }


/* =========================================================
   11. 選ばれる理由
   ========================================================= */
.reason__sub {
  color: var(--text-sub);
  margin: 4px 0 24px;
  font-size: 0.875rem;
}
.reason-sec { padding-top: 36px; }   /* ★修正43: 選ばれる理由の上余白を詰めた（64px → 36px） */

/* ★修正33→35: 写真を半分ラインまで拡大・角丸なし・本文16px */
.reason__grid {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
}
.reason__photo { flex: 0 0 50%; }   /* 半分のラインまで */
.reason__photo img { width: 100%; height: auto; display: block; border-radius: 0; }   /* 登壇写真・角丸なし */
.reason__text {
  flex: 1 1 0;
  color: var(--text-sub);
  font-size: 1rem;
  line-height: 1.9;
}
.reason__text strong { color: var(--heading); }


/* =========================================================
   12. ステップ（流れ）/ タイムライン（申請フロー）/ 期間の目安
   ========================================================= */
/* ★修正34→38: 真四角（角丸なし）の左辺に丸の中心が重なり（左半分が外）、縦は四角の中央に置く */
.steps {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 内容を縦中央に */
  min-height: 96px;          /* 丸が縦中央に収まる高さを確保 */
  background: #fff;
  border-radius: 0;          /* 真四角（角丸なし） */
  padding: 24px 28px 24px 72px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
  width: calc(80% + 90px);     /* ★修正66→67: 流れのカードをセクション帯の約80%幅に（左右パディング跨ぎで補正） */
  margin: 0 auto;              /* 中央揃え */
  transform: translateX(15px); /* ★修正49: 丸の左はみ出し(30px)の半分だけ右へ。丸＋四角のセットで中央に見せる */
}
.step__num {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);   /* ★修正38: 中心を左辺＆縦中央に重ねる */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}
.step__num--label { font-size: 0.8125rem; }
.step h4 { margin: 0 0 8px; font-size: 0.9375rem; color: var(--heading); }
.step p  { font-size: 0.875rem; color: var(--text-sub); }
.step p a { color: var(--blue-accent); word-break: break-all; }

/* 申請フロー：事前準備2カード */
.flow-label {
  font-size: 1.25rem;   /* ★修正44: 事前準備ラベル = 20px */
  font-weight: 700;
  color: var(--heading);
  margin: 26px 0 14px;
  display: inline-block;
}
.flow-prep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.flow-prep .card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}
.flow-prep .card h4 { margin: 0 0 10px; font-size: 1rem; color: var(--heading); }   /* ★修正44: GビズIDの取得 = 16px */
.flow-prep .card p  { font-size: 0.875rem; color: var(--text-sub); }
.flow-prep .card a  { color: var(--blue-accent); word-break: break-all; font-size: 0.75rem; }

.flow-docs {
  display: grid;
  grid-template-columns: 250px 1fr;   /* ★修正46: 左列+50px＝表を50px右へ＆50px細く */
  gap: 18px;
  align-items: start;
  margin-top: 40px;   /* ★修正45: 事前準備カードと必要書類の表の間を広げた（8px → 40px） */
}
.flow-docs__cap { font-size: 1rem; color: var(--text-sub); }   /* ★修正46: 記載の3点が必須となります = 16px */
.flow-docs__cap .flow-label { font-size: 1.25rem; }   /* ★修正46: 必要書類のご準備 = 20px */

/* ★修正90: 必要書類の3カード（①ヒアリングシート②見取り図③雇用契約書写し） */
.flow-docs__note { color: var(--text-sub); margin: 6px 0 20px; font-size: 1rem; }
.docs-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.docs-card {
  background: #fff;
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}
.docs-card h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--heading);
  font-weight: 700;
}
.docs-card__num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-card p { font-size: 0.875rem; color: var(--text-sub); }

/* スケジュール見出し（中央）＋目安3カラム */
.sched-head {
  text-align: center;
  margin: 64px 0 6px;   /* ★修正51: 見出しの上をもう少し広げた（40→64px） */
}
/* ★修正56: 必要書類のご準備(.flow-label)と同じ見え方に（黄色帯の縦幅を統一） */
.sched-head .mark { font-size: 1.25rem; display: inline-block; line-height: 1.8; }
.sched-head .full {
  display: block;
  font-size: 1rem;   /* ★修正47: 全体期間 = 16px */
  color: var(--text-sub);
  margin-top: 4px;
}

/* ★修正48→54: 細い幅のステップ（スケジュール／必要書類で共通）＝丸+四角セットの大きさを統一 */
.steps--narrow .step { width: calc(100% - 300px); }
/* ★修正52: 全体期間の下を詰める＆各ステップ間を狭める（スケジュールのみ） */
.steps--sched { margin-top: 16px; gap: 14px; }
.term-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
  max-width: calc(100% - 300px);   /* ★修正55: 上のステップ（丸+四角）と幅を合わせた */
  margin-left: auto;
  margin-right: auto;
}
.term-col {
  background: #fff;
  border-radius: 0;   /* ★修正57: 角丸なし */
  overflow: hidden;
  text-align: center;
}
.term-col__head {
  background: var(--navy);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px;
}
.term-col__val {
  font-size: 1.125rem;   /* ★修正58: 見出し(14px)＋4 に縮小 */
  font-weight: 800;
  color: var(--heading);
  padding: 10px 8px;   /* ★修正57: 縦幅をコンパクトに（18px → 10px） */
}


/* =========================================================
   13. FAQ
   ========================================================= */
.faq-sec { padding-bottom: 104px; }   /* ★修正59: FAQ下〜CTA（紺）までの余白を広げた（64→104px） */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}
.faq-card {
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
}
.faq-card .q { font-weight: 700; color: var(--heading); margin-bottom: 12px; }
.faq-card .a { color: var(--text-sub); font-size: 0.875rem; }


/* =========================================================
   14. CTA / フッター
   ========================================================= */
.cta { text-align: center; padding: 64px var(--pad); }
.cta h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 0 0 30px;
}
.cta .btn-gold { font-size: 1.0625rem; padding: 18px 50px; }

.footer {
  background: var(--navy-deep);
  color: #cdd6e4;
  text-align: center;
  padding: 30px 20px;
  font-size: 0.75rem;
}
.footer__links {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.footer__links a:hover { color: #fff; text-decoration: underline; }


/* =========================================================
   15. 仮ボックス（イラスト/写真の差し替え用プレースホルダ）
   ========================================================= */
.ph {
  width: 100%;
  background: repeating-linear-gradient(45deg, #eef1f6 0 10px, #e7ebf2 10px 20px);
  border: 1px dashed #b9c2d2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8893a6;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 8px;
}
.ph--photo {
  background: repeating-linear-gradient(45deg, #e9ecef 0 10px, #e1e5ea 10px 20px);
  border-color: #b0b6bf;
}


/* =========================================================
   15-2. 中間幅（801〜1010px）の微調整
   ========================================================= */
/* ★修正88: 1010px以下でFVのタイトル/リードが画像に潜り込むのを防ぐ
   （リードを折り返し可・画像を縮められるように） */
@media (max-width: 1010px) {
  .fv__lead { white-space: normal; }
  .fv__illust { flex: 0 1 46%; min-width: 0; }
}

/* ★修正89: 801〜950pxで「丸＋四角」の両端が空きすぎるので約10%広げる */
@media (min-width: 801px) and (max-width: 950px) {
  .steps--narrow .step { width: calc(100% - 250px); }
}


/* =========================================================
   16. レスポンシブ（800px以下は1カラム）
   ========================================================= */
@media (max-width: 800px) {
  :root { --pad: 22px; }

  .lp { box-shadow: none; }
  br.pc { display: none; }            /* 800px以下はデザイン用改行を解除 */
  .fv__lead { white-space: normal; }

  .ba__top    { padding: 48px 22px 48px; }
  .ba__bottom { padding: 92px 22px 80px; }   /* ★修正3: スマホでも下余白を拡大 */

  .header__inner { padding: 8px calc(10% - 18px); gap: 8px; height: auto; min-height: 64px; }   /* ★修正83: 本文80%の左端に合わせる */
  .brand__title  { font-size: 1rem; white-space: normal; }          /* ★修正61: +4px */
  .header .btn-gold { font-size: 1rem; padding: 8px 28px; }         /* ★修正61: +4px・横幅長く */

  .fv__grid   { flex-direction: column; }
  .fv__illust { flex: none; width: 100%; }
  .fv__title  { font-size: 1.625rem; }

  /* ★修正69: ご提案の背景カードは画面の約80%幅・中央 */
  .bg-cols { grid-template-columns: 1fr; max-width: calc(80% + 35px); margin-left: auto; margin-right: auto; }

  /* ★修正62/70: 画像カード・期間の目安は2個並び＋3個目を下に中央配置 */
  .worry__cards { grid-template-columns: 1fr 1fr; gap: 32px 12px; }   /* ★修正78: 上下（行）の間隔を広げる */
  .ba__cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* ★修正74: 期間の目安は最大80%幅・中央（3個目も上2つと同サイズ） */
  .term-cols { grid-template-columns: 1fr 1fr; gap: 12px; max-width: calc(80% + 35px); margin-left: auto; margin-right: auto; }
  .worry-card:last-child,
  .ba-card:last-child,
  .term-col:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 6px);   /* ★修正77: max-width→width。中身幅に縮まず上2つと同じ幅に */
    margin-left: auto;
    margin-right: auto;
  }

  .subsidy__grid,
  .overview__grid,
  .feature,
  .reason__grid,
  .flow-prep,
  .faq__grid { grid-template-columns: 1fr; display: grid; }

  .feature,
  .reason__grid { display: flex; flex-direction: column; }
  .reason__photo { flex: none; width: 100%; }
  /* ★修正71: 特徴の画像は半分サイズ・中央 */
  .feature__illust { flex: none; width: calc(60% + 26px); align-self: center; }   /* ★修正87: 画像を約60%に（+20%） */
  /* ★修正72/73: 特徴・選ばれる理由の本文は画面の約70%・中央 */
  .feature__text,
  .reason__text { flex: none; width: calc(70% + 31px); align-self: center; }

  .flow-docs { grid-template-columns: 1fr; }
  /* ★修正75/79: 助成金特徴＋料金・本提案概要・事前準備・必要書類・FAQ を画面の約80%幅・中央 */
  .subsidy__grid,
  .overview__grid,
  .flow-prep,
  .flow-docs,
  .docs-cards,
  .faq__grid { max-width: calc(80% + 35px); margin-left: auto; margin-right: auto; }
  /* ★修正90: 必要書類の見出し・注記もカードの左端に揃える */
  .flow-docs__note { margin-left: calc(10% - 18px); }
  /* ★修正80: リスキリング助成金とは の見出し・リード・特徴も80%に揃える（文字が飛び出さないように） */
  #subsidy .section-title,
  #subsidy .subsidy__sub,
  #subsidy .subsidy__intro { max-width: calc(80% + 35px); margin-left: auto; margin-right: auto; }

  /* ★修正82/84: FV以外すべて max幅80%（800px以下）。見出し・リード・表・写真など一括で80%上限に */
  .section-title,
  .section-lead,
  .subhead,
  .curriculum__note,
  .worry-bubble,
  .worry__conc,
  .worry__sum,
  .ba__bridge,
  .ba__cards,
  .tabs,
  .reason__sub,
  .tbl,
  .sched-head,
  .cta h2 { max-width: calc(80% + 35px); margin-left: auto; margin-right: auto; }
  /* ★修正84: 選ばれる理由の写真も80%・中央に */
  .reason__photo { flex: none; width: 100%; max-width: calc(80% + 35px); align-self: center; }
  /* ★修正76: 「事前準備」ラベルを下のカード（80%中央）の左端に揃える */
  .flow-label--pre { margin-left: calc(10% - 18px); }
  .section-title { font-size: 1.375rem; }
  .cta h2 { font-size: 1.375rem; }

  /* ★修正60: ステップ／カードの左右calc・translateを解除して全幅に（モバイル） */
  .brand { gap: 10px; }

  /* ★修正68: .steps をセクションのパディング外まで広げ、画面幅基準で配置できるようにする */
  .steps { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }

  /* ★修正68: 丸＋四角＋文字のセット全体を画面幅の80%・中央寄せ（丸の左はみ出し24px込み） */
  .step,
  .steps--narrow .step {
    width: calc(80% - 24px);          /* 80%(=画面) から 丸のはみ出し24pxを引く */
    margin: 0 0 0 calc(10% + 24px);   /* 左に10%の余白＋はみ出し分 → セットが中央 */
    transform: none;
    min-height: 76px;
    padding: 20px 16px 20px 50px;
  }
  .step__num {              /* 丸の中心を四角の左辺に乗せる（半分外） */
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
  }
  .step__num--label { font-size: 0.6875rem; }

  .kai { max-width: 100%; padding: 18px 16px 18px 24px; }
  .tab-body { padding: 16px; }

  /* ★修正74: term-cols は上の80%指定（982行）に統一（旧 max-width:100% を撤去） */

  /* 大三角を小さめに */
  .ba__top::after {
    border-left-width: 110px;
    border-right-width: 110px;
    border-top-width: 70px;
    bottom: -70px;
  }
}


/* =========================================================
   16-2. スマホ（480px以下）：2列カードを1列に積み替え＋各ブロックを広めに
   ★修正81
   ========================================================= */
@media (max-width: 480px) {
  /* ★修正85: スマホでブリッジを「AIを“自分の道具”」/「にすると」で改行 */
  br.sp { display: inline; }

  /* ★修正86: ヘッダーのタイトルが3行になるのを解消（余白・文字・ロゴ・ボタンを縮小） */
  .header__inner { padding: 10px 12px; }
  .brand { gap: 8px; }
  .brand__logo-img { height: 32px; }
  .brand__title { font-size: 0.8125rem; line-height: 1.35; }
  .header .btn-gold { font-size: 0.8125rem; padding: 6px 14px; }

  /* 2列にしていたカードを1列に積み替え（幅は800px以下の80%指定をそのまま維持） */
  .worry__cards,
  .ba__cards,
  .term-cols,
  .docs-cards { grid-template-columns: 1fr; }
  .worry-card:last-child,
  .ba-card:last-child,
  .term-col:last-child {
    grid-column: auto;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}