/* =====================================================================
   human-development.css — 07-ものづくり人財育成 固有スタイル
   固定の青背景ページ（has-site-bg）。透明セクションは青背景を見せ白文字、
   背景色を持つセクション（薄グレー#eef0f6 / インタビュー本文）は通常配色。
   共通クラス（.container/.section/.btn/.cta/.subfv 等）は上書きしない。
   ===================================================================== */

/* ---- 下層FV背景写真（Figma 07-human-development bg-image 2414:7457）：
   common.css .fv-photo（ページ先頭900px・下端マスクで光アニメへ溶かす）に画像のみ指定。 ---- */
body[data-page="human-development"] .fv-photo{ background-image:url("../pages/human-development/images/fv-bg.webp") }

/* ---- 共通：本ページのブロック見出し（jp大→en） ----
   Figma title instance 2414:7470/7489: jp48・en24とも cap-trim、gap24、下余白64、tracking1%（2026-07-08 parity） */
.hd-block-head{ display:flex; flex-direction:column; gap:24px; margin-bottom:64px }
.hd-block-head__jp{ font-size:48px; line-height:1.25; font-weight:700; letter-spacing:.01em;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.hd-block-head__en{ font-family:var(--ff-en); font-size:24px; line-height:1.25; font-weight:500; letter-spacing:.01em;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
@media (max-width:1023px){
  .hd-block-head{ gap:16px; margin-bottom:48px }
  .hd-block-head__jp{ font-size:38px } .hd-block-head__en{ font-size:21px }
}
@media (max-width:767px){
  .hd-block-head{ margin-bottom:36px }
  .hd-block-head__jp{ font-size:24px } .hd-block-head__en{ font-size:14px }
}

/* ---- 本文タイポ ----
   Figma: H2 40/1.3・H3 32/1.4 とも cap-trim＋tracking1%。本文16/1.8 tracking1px（2026-07-08 parity） */
.hd-h2{ font-size:40px; line-height:1.3; font-weight:700; letter-spacing:.01em;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.hd-h3{ font-size:32px; line-height:1.4; font-weight:700; letter-spacing:.01em;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.hd-body{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px }
.hd-caption{ font-size:14px; line-height:1.8; margin-top:10px }
@media (max-width:1023px){
  .hd-h2{ font-size:30px } .hd-h3{ font-size:26px }
}
@media (max-width:767px){
  .hd-h2{ font-size:22px } .hd-h3{ font-size:18px } .hd-caption{ font-size:10px }
}

/* =====================================================================
   FV タイトルの on-dark tgrad（要件7のバリアント）
   共通 .tgrad の最終色 #2b5eb4 は濃紺の固定背景上で低コントラスト＝判読不可。
   common.css のコメント（on-dark 用は淡色版をバリアントで上書き）に従い、
   Figma カンプの淡ラベンダー→accent グラデ（#c1c9ea→#2b5eb4）に差し替える。
   JS無効/reduced-motion の最終状態も淡色側で確実に視認できるようにする。
   ===================================================================== */
.hd-fv .subfv__title.tgrad{ color:#c8d2ee }                 /* JS無効/最終フォールバック（淡色＝可読） */
.js .hd-fv .subfv__title.tgrad{
  background-image:linear-gradient(120deg, #c8d2ee 0%, #c8d2ee 50%, rgba(200,210,238,0) 50%, rgba(200,210,238,0) 100%);
  -webkit-text-fill-color:transparent; color:transparent;
}
@media (prefers-reduced-motion:reduce){
  .js .hd-fv .subfv__title.tgrad{ background:none; color:#c8d2ee; -webkit-text-fill-color:#c8d2ee }
}

/* =====================================================================
   FV：イントロのリード＋本文（透過＝青背景上・白文字）
   ===================================================================== */
.hd-fv{ min-height:900px; padding-bottom:96px }
.hd-fv__intro{ display:flex; flex-direction:column; gap:48px; max-width:1208px; margin-top:127px /* Figma 2414:7463: リードcap上端abs577に実測合わせ（trim適用に伴い77→127に是正 2026-07-08 parity） */ }
.hd-fv__lead{ color:var(--c-white); font-size:40px; line-height:1.3; font-weight:700; letter-spacing:.01em;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.hd-fv__text{ color:var(--c-white) }
.hd-fv__text p{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px }
@media (max-width:1023px){
  .hd-fv__intro{ gap:32px } .hd-fv__lead{ font-size:30px }
}
@media (max-width:767px){
  .hd-fv__lead{ font-size:22px } .hd-fv__intro{ gap:24px }
}

/* =====================================================================
   透明セクション（OJT）＝青背景を見せる・白文字
   ===================================================================== */
.hd-ondark{ background:transparent; color:var(--c-white); padding-bottom:144px /* Figma 2414:7468: Section pb144（青帯はabs2234でグレー帯へ） */ }
.hd-fv + .hd-ondark{ padding-top:88px } /* Figma: wrap先頭見出しy988 */
@media (max-width:1023px){ .hd-ondark{ padding-bottom:96px } }
@media (max-width:767px){ .hd-ondark{ padding-bottom:48px } .hd-fv + .hd-ondark{ padding-top:44px } }
.hd-ondark .hd-block-head{ color:var(--c-white) }
.hd-ondark .hd-h3,.hd-ondark .hd-body,.hd-ondark .hd-caption{ color:var(--c-white) }

/* 2カラム split（テキスト｜画像） */
.hd-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start;
  margin-top:120px }
.hd-split:first-of-type{ margin-top:0 }
.hd-split__text{ display:flex; flex-direction:column; gap:32px; min-width:0 }
.hd-split__media{ min-width:0 }
.hd-split__media img{ width:100%; height:auto; object-fit:cover; aspect-ratio:3/2 }
@media (max-width:1023px){
  .hd-split{ gap:32px; margin-top:80px }
}
@media (max-width:767px){
  .hd-split{ grid-template-columns:1fr; gap:24px; margin-top:56px }
}

/* 青グラデボタン（Figma 2414:7484：ボタン青グラデ #2b5eb4→#0851a2。
   カラム全幅580・padding 22px/左32右28・本文16px bold lh1.8・右端に動画アイコン18px＝高さ73 2026-07-08 parity） */
.hd-btn-grad{ width:100%; justify-content:space-between; padding:22px 28px 22px 32px; line-height:1.8;
  background:linear-gradient(180deg,#2b5eb4 0%,#0851a2 100%); color:var(--c-white); border-radius:8px }
.hd-btn-grad:hover{ background:linear-gradient(180deg,#3a6cc0 0%,#0a5bb4 100%) }
.hd-btn-grad .btn__video{ width:18px; height:18px; flex:0 0 18px }

/* =====================================================================
   薄グレー帯（資格取得）＝濃紺文字
   ===================================================================== */
.hd-light{ background:var(--c-grad-end); /* Figma正: フラット#eef0f6（旧: 青みグラデ#c3cfeb） */
  color:var(--c-main); padding:144px 0 /* Figma 2414:7487: グレー帯はpy144（2026-07-08 parity） */ }
.hd-light .hd-block-head{ color:var(--c-main) }
/* グレー帯内の split 間隔はFigma pt80（OJT側の120と異なる） */
.hd-light .hd-split{ margin-top:80px }
@media (max-width:1023px){ .hd-light{ padding:96px 0 } .hd-light .hd-split{ margin-top:64px } }
@media (max-width:767px){ .hd-light{ padding:48px 0 } .hd-light .hd-split{ margin-top:32px } }

/* リード行（見出し＋本文を横並び→縮約で縦） */
.hd-lead-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px }
.hd-feature{ margin-top:80px; display:flex; flex-direction:column; gap:64px }
.hd-feature .hd-lead-row{ gap:32px }
@media (max-width:1023px){ .hd-feature{ margin-top:56px; gap:40px } }

/* =====================================================================
   インタビュー記事（Article）
   ===================================================================== */
.hd-article{ position:relative }
.hd-article__hero{ position:relative; padding:40px; background-image:var(--hero-img); background-size:cover; background-position:center;
  display:flex; align-items:center; aspect-ratio:1440/685; min-height:auto }
  /* 背景webpはFigma帯(1440×685)と同一クロップ。帯高さ685を超えると背景が拡大しズレるため、
     カードは縦padding64で685内に収める（Figmaカードx=40・帯padding40に一致させcontainerの横paddingは無効化） */
.hd-article__hero .container{ display:flex }
@media (min-width:1024px){ .hd-article__hero .container{ padding-inline:0; max-width:none } }
.hd-comment{ background:rgba(255,255,255,.88); border-radius:24px; padding:64px 40px;
  display:flex; flex-direction:column; gap:32px; width:580px; max-width:100%; color:var(--c-main) }
.hd-comment__label{ font-size:24px; line-height:1.5; font-weight:700; letter-spacing:1px;
  padding-bottom:32px; border-bottom:1px solid var(--c-ink-08) }
.hd-comment__quote{ font-size:40px; line-height:1.3; font-weight:700; letter-spacing:1px; color:#000 }
.hd-comment__name{ font-size:24px; line-height:1.5; font-weight:700; letter-spacing:1px; color:#000 }
.hd-comment__text p{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px; color:#000 }
@media (max-width:1023px){
  .hd-article__hero{ min-height:auto; padding:40px 0 }
  .hd-comment{ padding:56px 36px; gap:24px }
  .hd-comment__quote{ font-size:30px } .hd-comment__label,.hd-comment__name{ font-size:21px }
}
@media (max-width:767px){
  /* 対応3: 背景画像をアイキャッチ(::before)として上に配置、テキストは角丸なしの通常フロー
     （小見出し→タイトル→名前→リード→QA）。明地(グレー)で本文と連続させる。 */
  .hd-article__hero{ display:block; padding:40px var(--pad-x-sp) 8px;
    background:var(--c-grad-end); background-image:none; aspect-ratio:auto; min-height:0 }
  .hd-article__hero::before{ content:""; display:block; background-image:var(--hero-img);
    background-size:cover; background-position:100% center; aspect-ratio:3/2; margin-bottom:24px }
  .hd-article__hero .container{ display:block; padding-inline:0; max-width:none }
  .hd-comment{ width:100%; background:none; border-radius:0; padding:0; gap:12px } /* カードあしらい削除 */
  .hd-comment__label{ padding-bottom:0; border-bottom:0; color:var(--c-accent) } /* 小見出し（罫線・余白なし） */
  .hd-comment__quote{ font-size:22px } .hd-comment__label,.hd-comment__name{ font-size:18px }
}

/* 記事本文（薄グレー帯） */
.hd-article__body{ background:var(--c-grad-end); color:#000; padding:88px 0 114px }
.hd-qa{ display:flex; flex-direction:column; gap:48px; padding-bottom:64px /* Figma: 最終ブロックもpb64を保持（last-childの0化は誤り 2026-07-08 parity） */ }
.hd-qa .hd-h2{ color:#000 }
/* Figma 2423:5642等: Q見出し24/1.5 cap-trim・tracking1%。QnAブロック間はgap48のまま（--gapの追加余白は廃止 2026-07-08 parity） */
.hd-qa__q{ font-size:24px; line-height:1.5; font-weight:700; letter-spacing:.01em; color:#000;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.hd-qa__a{ display:flex; flex-direction:column }
.hd-qa__a p{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px; color:#000 }
/* Q→A 間の詰め：見出しgap48は維持、QとAの距離は内側で調整 */
.hd-qa .hd-qa__a{ margin-top:-16px }
.hd-qa__split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start }
.hd-qa__col{ display:flex; flex-direction:column; gap:32px; min-width:0 }
.hd-qa__col .hd-qa__a{ margin-top:0 }
.hd-qa__media{ min-width:0 }
.hd-qa__media img{ width:100%; height:auto; object-fit:cover; aspect-ratio:3/2 }
@media (max-width:1023px){
  .hd-article__body{ padding:64px 0 80px }
  .hd-qa{ gap:32px; padding-bottom:48px }
  .hd-qa__split{ gap:32px }
}
@media (max-width:767px){
  .hd-article__body{ padding:48px 0 56px }
  .hd-qa{ gap:24px }
  .hd-qa .hd-qa__a{ margin-top:-8px }
  .hd-qa__q{ font-size:18px; text-indent:-20px; padding-left:20px }
  .hd-qa__split{ grid-template-columns:1fr; gap:24px }
}

/* CTAリード（共通.cta内の追加要素） */
.cta__lead{ max-width:680px }

/* =====================================================================
   人材育成・資格取得支援制度（HP-v2クライアント指示 row41/45/46/50 反映で新設。
   Figmaに対応ノード無し＝指示反映のため乖離。hd-light帯の既存コンポーネント
   （.hd-feature/.hd-split/.table-scroll）を流用し、テーブルは organization.css
   .org-quals__table と同一パターンを hd- プレフィックスで踏襲 2026-07-08）
   ===================================================================== */
.hd-quals__label{ font-size:var(--fz-body); font-weight:700; letter-spacing:1px; margin-bottom:16px }
.hd-quals__tablewrap{ min-width:0 }
.hd-quals__table{ width:100%; table-layout:fixed; border-collapse:collapse }
.hd-quals__table .col-content{ width:50% }
.hd-quals__table .col-grade{ width:50% }
.hd-quals__table thead th{ font-size:var(--fz-body); font-weight:700; color:var(--c-ink-60);
  letter-spacing:1px; text-align:left; line-height:1.8; padding:16px 16px 16px 0; border-bottom:1px solid var(--c-line) }
.hd-quals__table tbody th{ font-size:var(--fz-body); font-weight:700; color:var(--c-main);
  text-align:left; vertical-align:middle; padding:16px 16px 16px 0; line-height:1.8;
  border-bottom:1px solid var(--c-ink-08) }
.hd-quals__table tbody td{ font-size:var(--fz-body); color:var(--c-main); vertical-align:middle;
  line-height:1.8; letter-spacing:1px; padding:16px 0; border-bottom:1px solid var(--c-ink-08) }
.hd-quals__table tbody tr:last-child th,
.hd-quals__table tbody tr:last-child td{ border-bottom:0 }
@media (max-width:767px){
  /* SPはセル余白と最小幅を詰める（列に対して幅が広すぎる指摘対応 2026-07-13） */
  .hd-quals__table{ min-width:360px }
  .hd-quals__table thead th,
  .hd-quals__table tbody th{ padding:10px 8px 10px 0; font-size:12px }
  .hd-quals__table tbody td{ padding:10px 0; font-size:12px }
}
/* hd-feature内のsplitは親flexのgap(64px)で間隔を確保するためmargin-topは0に上書き */
.hd-feature .hd-split{ margin-top:0 }
/* 表彰状スキャンは実寸比1200:867（既定aspect-ratio 3/2よりわずかに横長）。
   既定のままだと縁の飾り枠が上下トリミングされるため実寸比に上書き */
.hd-split__media--award img{ aspect-ratio:1200/867 }

/* ===== 対応2(SP): 2x余白の半減＋ボタン余白詰め（2026-07-13） ===== */
@media (max-width:767px){
  .hd-fv{ min-height:auto; padding-bottom:48px }
  .hd-fv__intro{ margin-top:32px }        /* FV縦余白さらに半減（63→32 SP 2026-07-13） */
  .hd-feature{ margin-top:80px; gap:32px } /* 指定により80pxへ */
  .hd-btn-grad{ padding:12px 28px 12px 16px }
  .hd-split{ gap:24px }
  .hd-qa{ gap:20px }
}