/* =========================================================
   研修とキャリア /environment/training/ — training.css（lower.css の後に読む）
   01 3つの柱／02 入社後3年間（見せ場：.timeline の縦線が伸びる。PC は左に見出しをスティッキー）／03 研修の種類4／
   04 資格取得支援 #certification（数字3つ＋罫線の表。SP は1行ずつ積む）／05 評価と昇給 #evaluation（3つの軸＋1年の流れ）／
   06 キャリアステップ（点と線のステップ。SP は縦）
   ========================================================= */

.lpanel__proof-value { display: inline-flex; align-items: baseline; gap: 2px; font-size: 15px; font-weight: var(--fw-bold); }

/* ---------- 01 3つの柱 ---------- */
.pillars { margin: 0; padding: 0; list-style: none; }
/* 入社後3年の道のりの図（見出しの下。PC は見出しと一緒にスティッキー） */
.years__ig { width: min(300px, 86%); margin: -8px auto 32px; }
.pillars .lpanel__in { display: flex; flex-direction: column; height: 100%; }
.pillars .lpanel__text { flex: 1; }

/* ---------- 02 入社後3年間（時系列） ---------- */
.years__list { --tl-x: 72px; }
.years__list .timeline__time { display: grid; align-content: start; row-gap: 2px; }
.years__y { font-size: 17px; line-height: 1.5; color: var(--color-ink); }
.years__when { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.years__points { display: grid; gap: 6px; margin-top: 10px; }
.years__points li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.years__pt-label {
  padding: 0 8px; border-radius: var(--radius-xs); background: var(--color-bg); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: var(--ls-ja); white-space: nowrap;
}
.years__pt-text { font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.years__points + .timeline__text { margin-top: 10px; }
.years__list .timeline__item:last-child .timeline__title {
  display: inline-block; padding: 0 10px; border-radius: var(--radius-xs);
  background: var(--color-brand); color: var(--color-on-brand);
}
.years__note { margin-top: 24px; }
.years__case { margin-top: 24px; }
.years__case-label {
  display: inline-block; padding: 1px 10px; border-radius: var(--radius-xs);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .08em;
}
.years__case-title { margin-top: 10px; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.years__case-text { margin-top: 8px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.years__case .text-link { margin-top: 6px; }

/* ---------- 03 研修の種類4 ---------- */
.programs { margin: 0; padding: 0; list-style: none; }
.program__in { display: flex; flex-direction: column; height: 100%; }
.program__in .lpanel__text { flex: 1; }
.program__en { font-size: 11px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: .16em; color: var(--color-ink-sub); }
.program .lpanel__title { margin-top: 4px; }
.program__proof { display: grid; gap: 6px; }
.program__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.program__tags li {
  padding: 1px 9px; border-radius: var(--radius-xs); background: var(--color-bg); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-ja);
}

/* ---------- 04 資格取得支援 ---------- */
.cert-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.cert-fig { display: grid; align-content: start; row-gap: 4px; padding: 18px 22px 16px; border-radius: var(--radius-m); background: var(--color-bg); }
.cert-fig__label { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.cert-fig__value { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.cert-fig__value .num { font-size: 40px; }
.cert-fig__value--text { font-size: 24px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .04em; word-break: auto-phrase; }
.cert { margin-top: 48px; }
.cert__title { margin-bottom: 14px; }
.cert__sheet { padding: 6px 18px; border-radius: var(--radius-l); background: var(--color-bg); }
.cert__note { margin-top: 14px; }
.cert-table { width: 100%; border-collapse: collapse; }
.cert-table td { word-break: auto-phrase; text-wrap: balance; }
/* SP：見出しの行は読み上げにだけ残し、1行ずつ「資格名／主な職種・手当」に積む */
.cert-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cert-table tbody tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "jobs pay";
  column-gap: 16px; row-gap: 6px; padding: 16px 2px; border-bottom: 1px solid var(--color-line);
}
.cert-table tbody tr:last-child { border-bottom: 0; }
.cert-table tbody th { grid-area: name; padding: 0; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); text-align: left; }
.cert-table tbody td { grid-area: jobs; padding: 0; font-size: 13px; line-height: 1.7; letter-spacing: var(--ls-ja); }
.cert-table tbody td.is-num { grid-area: pay; align-self: end; font-size: 17px; font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cert-table__label { display: block; font-size: 11px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }

/* ---------- 05 評価と昇給 ---------- */
.axes { margin: 0; padding: 0; list-style: none; }
.axis__in { display: flex; flex-direction: column; height: 100%; }
.axis__head { display: flex; align-items: baseline; gap: 12px; }
.axis__en { font-size: 11px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: .16em; color: var(--color-ink-sub); }
.axis__sub { display: inline-block; font-size: 14px; font-weight: var(--fw-medium); letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.cycle { margin-top: 48px; }
.cycle__title { margin-bottom: 12px; }
.cycle__sum { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--color-line); }
.cycle__sum-row { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--color-line); }
.cycle__sum-row dt { font-size: 14px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.cycle__sum-row dd { margin: 0; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); }
/* 1年の流れ（図。aria-hidden。中身は上の dl と同じ）：SP は6か月×2段、768 から12か月を1段 */
.cycle__months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.cycle__m {
  display: grid; align-content: start; justify-items: center; row-gap: 4px;
  min-height: 92px; padding: 10px 4px; border-radius: var(--radius-s); background: var(--color-bg-page);
}
.cycle__m.has-ev { background: var(--color-tint); }
.cycle__mo { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--color-ink-sub); }
.cycle__m.has-ev .cycle__mo { color: var(--color-ink); }
.cycle__ev {
  width: 100%; max-width: 52px; padding: 1px 0; border-radius: var(--radius-xs);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .04em; text-align: center;
}
.cycle__ev--eval { background: var(--color-brand); color: var(--color-on-brand); }
.cycle__ev--raise { background: var(--color-bg); color: var(--color-ink); }
.cycle__ev--bonus { background: var(--color-layer); color: var(--color-ink); }

/* ---------- 06 キャリアステップ：点と線（SP は縦、PC は横） ---------- */
.csteps { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.cstep { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; }
.cstep__track { display: flex; flex-direction: column; align-items: center; padding-top: 24px; }
.cstep__dot { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-brand); }
.cstep__line { flex: 1; width: 2px; margin: 8px 0 0; border-radius: 2px; background: var(--color-line); }
.cstep:last-child .cstep__line { display: none; }
.cstep__body { margin-bottom: 16px; padding: 20px 20px 20px; border-radius: var(--radius-m); background: var(--color-bg); }
.cstep:last-child .cstep__body { margin-bottom: 0; }
.cstep__year {
  display: inline-block; padding: 1px 12px; border-radius: var(--radius-pill);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: .06em;
}
.cstep__role { margin-top: 10px; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.cstep__income { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-line); }
.cstep__income-label { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.cstep__income-value { display: inline-flex; align-items: baseline; gap: 2px; }
.cstep__income .num { font-size: 32px; }
.cstep__text { margin-top: 10px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.cstep__skills { margin-top: 12px; font-size: 13px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.cstep__skills-label { display: block; font-size: 12px; font-weight: var(--fw-bold); color: var(--color-ink-sub); }
.csteps__note { margin-top: 18px; }

/* =========================================================
   タブレット（768px から）
   ========================================================= */
@media (min-width: 768px) {
  .years__list { --tl-x: 96px; }
  .years__y { font-size: 20px; }
  .years__when { font-size: 13px; }
  .years__pt-text { font-size: 15px; }
  .years__case-title { font-size: 18px; }
  .years__case-text { font-size: 15px; }

  .cert-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cert-fig { padding: 22px 26px 20px; }
  .cert__sheet { padding: 8px 32px 12px; }
  .cert-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .cert-table tbody tr { display: table-row; border-bottom: 0; }
  .cert-table th, .cert-table td, .cert-table tbody th, .cert-table tbody td { padding: 18px 16px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: middle; }
  .cert-table thead th { padding-top: 16px; padding-bottom: 14px; font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
  .cert-table thead th:first-child, .cert-table tbody th { padding-left: 4px; width: 40%; }
  .cert-table .is-num, .cert-table tbody td.is-num { padding-right: 4px; text-align: right; }
  .cert-table tbody th { font-size: 16px; }
  .cert-table tbody td { font-size: 15px; }
  .cert-table tbody td.is-num { font-size: 18px; }
  .cert-table tbody tr:last-child th, .cert-table tbody tr:last-child td { border-bottom: 0; }
  .cert-table__label { display: none; }

  .cycle__months { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .cstep__body { padding: 24px 26px; }
}

/* =========================================================
   PC：左右に分ける（1024px から）
   ========================================================= */
@media (min-width: 1024px) {
  /* 02 入社後3年間：左に見出し（スティッキー）、右に時系列（会社を知るの歩みと同じ組み方） */
  .years { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start; }
  .years__aside { position: sticky; top: 120px; }
  .years__aside > .sec-head { margin-bottom: 0; }
  .years__ig { width: min(340px, 100%); margin: 36px 0 0; }
  .years__list { padding-top: 8px; }

  /* 05 1年の流れ：左に要約、右に12か月 */
  .cycle { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
  .cycle__title { grid-column: 1; grid-row: 1; }
  .cycle__sum { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .cycle__months { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .cycle__m { min-height: 116px; padding-top: 14px; row-gap: 6px; }
  .cycle__mo { font-size: 14px; }
  .cycle__ev { max-width: 60px; font-size: 12px; }

  /* 06 キャリアステップ：横に4つ。点のあいだを線でつなぐ（線は次の点の手前で止める） */
  .csteps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .cstep { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 16px; }
  .cstep__track { flex-direction: row; padding: 0 0 0 26px; }
  .cstep__line { width: auto; height: 2px; margin: 0 -38px 0 8px; }
  .cstep:last-child .cstep__line { display: block; visibility: hidden; }
  .cstep__body { margin-bottom: 0; }
}

/* =========================================================
   PC（1200px から）
   ========================================================= */
@media (min-width: 1200px) {
  .cert-fig__value .num { font-size: 48px; }
  .cert-fig__value--text { font-size: 28px; }
  .cycle { grid-template-columns: 320px minmax(0, 1fr); column-gap: 64px; }
  .csteps { column-gap: 24px; }
  .cstep__track { padding-left: 28px; }
  .cstep__body { padding: 28px 28px 26px; }
  .cstep__line { margin-right: -44px; }
  .cstep__role { font-size: 22px; }
}