/* kenshu.css — 人材研修ページ固有コンポーネント（Figma: 人材研修 2247:67252）
   .ld              L&Dイントロ（Learning & Development 透かし + 青カード6枠 2247:67271）
   .kenshu-feature  業務改善立ち上げプログラム（青パネル + 成果物カード 2247:67301）
   .kenshu-program  プログラム一覧（グレー地 + ピルリンク 2247:67338）
   .kenshu-resources 業務改善お役立ち資料（白地 + 青カード4枚 2652:29239） */

/* --- ページ全体：セクションはFigma準拠で密着（base.cssの48px余白を打ち消す）--- */
.page-template-page-kenshu section {
  margin-block: 0;
}

/* Figma上は Value(壁) と L&D が密着（ノッチのみ重なる） */
.page-template-page-kenshu .wall {
  margin-bottom: 0;
}

/* --- L&Dイントロ ---------------------------------------------------------- */
/* 実値: pt114 pb80 / 見出しブロックとカード群の間 144px
         見出し 42.67px Black ls.1em lh1.5 + サブ 25.6px SemiBold lh1.8
         透かし 150px 青グラデ op.1（枠内は白 op.1）
         カード 青 p32 radius16 影 --shadow-drop / 見出し32px Black・本文21.3px */

.ld {
  display: flex;
  flex-direction: column;
  gap: var(--space-144);
  align-items: center;
  padding: var(--space-114) 0 var(--space-80);
  overflow: hidden;
}

/* カード群：3列グリッド（5枚＋2行目3列目にイラスト）。
   flexの行分割だと列が行ごとにズレるため、Gridで列を厳密に揃える。 */
.ld__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  width: 100%;
  max-width: var(--layout-max);
}

.ld-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  box-shadow: var(--shadow-drop);
}

.ld-card__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* 見出しは PHP 側で 行(__line) > 文節(__clause) の入れ子に分解される。
   PCは __line が block ＝ Figma通りの行組み。SPでは __clause を inline-block にし、
   行に収まらない文節だけが次行へ送られる（語の途中では割れない）。 */
.ld-card__line {
  display: block;
}

.ld-card__text {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* 2行目3列目のイラスト（Figma: 話す 3）。webpはフレーム書き出しなのでクロップせず実寸表示。
   セルは他カードと等幅（flex:1）、画像はカード高さに合わせて中央配置。 */
.ld__figure {
  position: relative;
  min-width: 0;
}

/* 画像は絶対配置（行高を押し広げない）。object-fit:containでアスペクト維持のまま
   セル（カード高さ）に内接。新webpはフレーム書き出しなのでクロップ不要。 */
.ld__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- 業務改善立ち上げプログラム（FEATURE 青パネル）------------------------ */
/* 実値: セクション py80 / パネル 青 radius32 pt120 pb80 幅1200 内側1000
         透かし FEATURE 200px グレーグラデ op.11
         成果物カード グレーグラデ radius20 p24/32 gap16 + 青罫線2px */

.kenshu-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-80) 0;
}

.kenshu-feature__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  align-items: center;
  width: 100%;
  max-width: var(--layout-max);
  padding: var(--space-120) 0 var(--space-80);
  border-radius: var(--radius-32);
  background: var(--color-primary);
  overflow: hidden;
}

.kenshu-feature__watermark {
  position: absolute;
  top: 1.520625rem; /* ⚠ Figma実値 */
  left: calc(50% - 28.4375rem);
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.11; /* ⚠ Figma実値 11% */
  pointer-events: none;
}

.kenshu-feature__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  align-items: center;
  width: 62.5rem; /* Figma実値 */
  max-width: 100%;
}

.kenshu-feature__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
}

.kenshu-feature__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.kenshu-feature__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-white);
}

.kenshu-feature__sub {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  text-align: center;
}

.kenshu-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
}

.kenshu-feature__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.kenshu-feature__block--deliverables {
  gap: var(--space-40);
}

/* 白角ビュレット + 小見出し */
.kenshu-feature__lead {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

.kenshu-feature__lead::before {
  content: "";
  flex-shrink: 0;
  width: var(--space-24);
  height: var(--space-24);
  background: var(--color-white);
}

.kenshu-feature__text {
  max-width: 50rem; /* Figma実値 */
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  text-align: justify;
}

/* 成果物カード：3列グリッド（5枚＋2行目3列目にイラスト/空き）。
   flexの行分割だと列が行ごとにズレるため、Gridで列を厳密に揃える。 */
.kenshu-feature__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40);
  width: 100%;
}

.seika-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius-20);
  background: var(--gradient-panel-gray);
}

.seika-card__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-num-lg);
  text-align: center;
}

.seika-card__divider {
  display: block;
  width: 100%;
  height: 0;
  border-top: 2px solid var(--color-primary);
}

.seika-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-square);
  object-fit: contain;
}

.seika-card__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  text-align: justify;
}

/* 空きセルのイラスト（Figma: 話す 4 241x293） */
.kenshu-feature__figure {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.kenshu-feature__figure img {
  width: 15.0625rem; /* Figma実値 */
  height: auto;
}

/* フッター：誘導テキスト + ピルボタン */
.kenshu-feature__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: center;
  width: 100%;
}

.kenshu-feature__note {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.kenshu-feature__btn {
  display: inline-flex;
  gap: var(--space-40);
  align-items: center;
  padding: var(--space-16) var(--space-32);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kenshu-feature__btn small {
  font-size: var(--font-size-h5);
}

.kenshu-feature__btn::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

/* hover: 塗りボタン → 白地＋濃青字（.btn--fill と同トーン）＋矢印を右へ */
@media (hover: hover) {
  .kenshu-feature__btn:hover {
    background: var(--color-white);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
  }
  .kenshu-feature__btn:hover::after {
    transform: translateX(var(--space-4));
  }
}

/* --- プログラム一覧（PROGRAM）--------------------------------------------- */
/* 実値: グレー地 #F3F3F3 py120 / 内側1120px
         透かし PROGRAM 200px 白 op.5 / ピル 青 白枠3px radius5 h68 影 --shadow-pill */

.kenshu-program {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-120) 0;
  background: var(--color-gray-light);
  overflow: hidden;
}

.kenshu-program__watermark {
  position: absolute;
  top: 4.57875rem; /* ⚠ Figma実値 */
  left: calc(50% - 34rem);
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  opacity: 0.5; /* Figma実値 50% */
  pointer-events: none;
}

.kenshu-program__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  align-items: center;
  width: 100%;
  max-width: 70rem; /* Figma実値 */
}

.kenshu-program__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
}

.kenshu-program__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.kenshu-program__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-primary);
}

.kenshu-program__lead {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.kenshu-program__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
}

.kenshu-program__row {
  display: flex;
  gap: var(--space-80);
  align-items: flex-start;
}

.kenshu-program__col {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
}

.kenshu-program__cat {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
}

.kenshu-program__cat::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--gradient-blue-text);
}

.program-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem; /* Figma実値 */
  padding: var(--space-8) var(--space-16);
  border: .1875rem solid var(--color-white);
  border-radius: var(--radius-5);
  background: var(--color-primary);
  box-shadow: var(--shadow-pill);
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap; /* Figma: タイトルは1行（折り返さない） */
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.program-pill::after {
  content: "";
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: url("../../images/icon-download-circle.svg") center / contain no-repeat;
}

/* hover: 青塗り → 白地＋青字＋青枠（アイコンは2色SVGのため据え置き） */
@media (hover: hover) {
  .program-pill:hover {
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* .kenshu-resources — 業務改善お役立ち資料（Figma: 人材研修 RESOURCES 2652:29239）
   実値: 白地 py120 / 内側1120px gap56 / 透かし RESOURCES 200px グレーグラデ op.3
         カード 青 radius14→--radius-lg py32 px24 gap24 影 --shadow-pill
         ボタン 白 pill p16 gap10 / アイコン32px / ラベル12.8px ExtraBold 青 */

.kenshu-resources {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-120) 0;
  overflow: hidden;
}

.kenshu-resources__watermark {
  position: absolute;
  top: 4.57875rem; /* ⚠ Figma実値 */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.3; /* Figma実値 30% */
  pointer-events: none;
}

.kenshu-resources__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  align-items: center;
  width: 100%;
  max-width: 70rem; /* Figma実値（PROGRAM と同じ内側幅で列を揃える）*/
}

.kenshu-resources__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
}

.kenshu-resources__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.kenshu-resources__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-primary);
}

.kenshu-resources__lead {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.kenshu-resources__list {
  display: flex;
  gap: var(--space-24);
  align-items: stretch;
  width: 100%;
}

.resource-card {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-lg); /* Figma実値14px → 既存トークン16pxを採用（合意済み）*/
  background: var(--color-primary);
  box-shadow: var(--shadow-pill);
}

.resource-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
  color: var(--color-white);
}

.resource-card__title {
  margin: 0;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-align: center;
}

.resource-card__text {
  margin: 0;
  width: 100%;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.resource-card__btn {
  display: flex;
  gap: var(--space-10);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-16);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* アイコンは単色SVG → mask + currentColor で文字色に追従（hover反転用） */
.resource-card__btn::before {
  content: "";
  flex-shrink: 0;
  width: 2rem;  /* Figma実値 32px */
  height: 2rem;
  background: currentColor;
  mask: url("../../images/icon-doc-pen.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-doc-pen.svg") center / contain no-repeat;
}

/* hover: 白地 → 濃青塗り＋白字（カード地の青に埋もれないよう濃青を使う） */
@media (hover: hover) {
  .resource-card__btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
  }
}

.resource-card__btn-label {
  color: inherit;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-widest);
  white-space: nowrap;
}

/* --- SP ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* L&Dイントロ：カードは1カラム */
  /* SPの上余白は中身（.catch / 青パネル）が持つので、この2つは padding-block を外す。
     共通セクション（case-study / faq / contact 等）はコンポーネント側の余白のまま */
  .ld,
  .kenshu-feature {
    padding-block: 0;
  }
  .ld {
    gap: var(--space-24);
    padding-bottom: var(--space-40);
  }
  .ld__grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-24);
  }
  .ld-card__title {
    font-size: var(--font-size-card);
  }
  .ld-card__text {
    font-size: var(--font-size-h3);
  }
  .ld-card__clause {
    display: inline-block;
  }
  /* SPは行の固定改行を解き、文節（__clause）単位でだけ折り返す */
  .ld-card__title .ld-card__line {
    display: inline;
  }
  /* 空きセルのイラストは1カラムでは行全体を占めるため高さを確保して残す */
  .ld__figure {
    min-height: 12rem;
  }

  /* FEATURE 青パネル。SPでは画面幅いっぱいなので角丸を落とし、上下は48/40に揃える
     （shindanの .section--rounded / .comparison と同じ扱い） */
  .kenshu-feature__panel {
    gap: var(--space-40);
    padding: var(--space-48) var(--space-24) var(--space-40);
    border-radius: 0;
  }
  /* 透かしの位置は section.css の .section__watermark（トップ）に合わせる */
  .kenshu-feature__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
  }
  .kenshu-feature__inner {
    gap: var(--space-40);
  }
  .kenshu-feature__title {
    font-size: var(--font-size-h2);
  }
  .kenshu-feature__lead {
    font-size: var(--font-size-h3-lg);
  }
  .kenshu-feature__block--deliverables {
    gap: var(--space-24);
  }
  .kenshu-feature__grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
  .kenshu-feature__figure {
    display: none;
  }
  .kenshu-feature__note {
    text-align: left;
  }
  /* サイズ感（余白・文字サイズ）は buttons.css の .btn--lg に合わせる。
     幅は .btn--lg の20rem固定だと文言が長く3行に割れるため成り行きにする */
  /* SPは矢印を absolute で流れから外し、テキストをピル基準の中央に置く
     （flexに矢印が入ったままだと「テキスト＋矢印」の合計が中央になり、
     テキストは左へずれる）。padding-right で矢印との重なりを防いでいる。 */
  .kenshu-feature__btn {
    position: relative;
    white-space: normal;
    text-align: center;
    justify-content: center;
    gap: 0;
    max-width: 100%;
    margin-inline: auto;
    padding: var(--space-16) var(--space-56);
    font-size: var(--font-size-h3);
  }
  .kenshu-feature__btn::after {
    position: absolute;
    top: 50%;
    right: var(--space-24);
    transform: translateY(-50%);
  }
  /* 「業務改善コンサルティング／を詳しくみる」で改行する */
  .kenshu-feature__btn small {
    display: block;
  }

  /* PROGRAM 一覧 */
  .kenshu-program {
    padding-block: var(--space-48) var(--space-40);
  }
  .kenshu-program__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
  }
  .kenshu-program__lead {
    text-align: left;
  }
  .kenshu-program__inner {
    gap: var(--space-40);
    padding: 0 var(--space-24);
  }
  .kenshu-program__groups {
    gap: var(--space-40);
  }
  .kenshu-program__row {
    flex-direction: column;
    gap: var(--space-32);
  }
  .kenshu-program__col {
    width: 100%;
  }
  .program-pill {
    height: auto;
    min-height: 4.25rem;
    white-space: normal;
  }

  /* RESOURCES 資料カード */
  .kenshu-resources {
    padding-block: var(--space-40);
  }
  .kenshu-resources__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
  }
  .kenshu-resources__inner {
    gap: var(--space-40);
    padding: 0 var(--space-24);
  }
  .kenshu-resources__lead {
    text-align: left;
  }
  /* 4枚横並びはSPで潰れるため1カラムに積む */
  .kenshu-resources__list {
    flex-direction: column;
    gap: var(--space-24);
  }
  /* カード内は縦積みで高さが揃わないため、伸縮ではなく内容なりの高さにする */
  .resource-card {
    flex: none;
  }

  /* リード文: PC用の<br>を無効化し、SPは素の折返しに任せる
     （資料ボタンのラベルは nowrap のまま1行に収める） */
  .kenshu-program__lead br,
  .kenshu-resources__lead br,
  .resource-card__btn-label br,
  .kenshu-feature__note br { display: none; }

  /* PCでは1行のため align-items: center で四角と文字が並ぶが、SPは2行に
     折り返して四角が行間の中央へ浮く。上寄せにし、1行目の行ボックス
     （font-size × line-height）の中央へ四角を落とし込む。 */
  .kenshu-feature__lead { align-items: flex-start; }
  .kenshu-feature__lead::before {
    margin-top: calc((var(--font-size-h2-lead) * var(--line-height-loose) - var(--space-24)) / 2);
  }
}