/* career-recruit — 昇格ステップ（階段）・年齢の軸・経路の表。値はトークン、幾何は WF（1376×470 / 316px の軸 / 210 ＋ 5 列）
   色の方針: 地の階調（ink の 6 / 12 / 22%）＋ アクセント 1 点（最上段・クオレガの印・合流の矢印）。側面の灰や白い当て板は外し、2D に */
.rcr { display: grid; gap: 96px; }
.rcr__blk { display: grid; gap: 40px; }
.rcr__text { display: grid; gap: 16px; }
.rcr__body { max-width: 46em; }
.rcr__fig { min-width: 0; }

/* ---------- ① 階段 ---------- */
.rcr-st { display: block; width: 100%; height: auto; font-family: var(--cds-font); font-feature-settings: "palt"; }
/* 段は 4 階調の灰（6 / 12 / 22 / 34%）。最上段の上辺 5px とピンの番号だけ碧（300×110 の碧の面は「点」ではなかった: design-critic 2026-10-18） */
.rcr-st__face--1 { fill: color-mix(in srgb, var(--cds-text) 6%, var(--cds-bg)); }
.rcr-st__face--2 { fill: color-mix(in srgb, var(--cds-text) 12%, var(--cds-bg)); }
.rcr-st__face--3 { fill: color-mix(in srgb, var(--cds-text) 22%, var(--cds-bg)); }
.rcr-st__face--4 { fill: color-mix(in srgb, var(--cds-text) 34%, var(--cds-bg)); }
.rcr-st__top { fill: var(--cds-accent); }
circle.rcr-st__face--4 { fill: var(--cds-accent); }
.rcr-st__pin { stroke: var(--cds-text); stroke-width: 2; }
.rcr-st__dot { fill: var(--cds-text); }
.rcr-st__no-bg { stroke: var(--cds-text); stroke-width: 0; }
circle.rcr-st__face--1, circle.rcr-st__face--2 { stroke: var(--cds-rule); stroke-width: 1; }
.rcr-st__no { font-family: var(--cds-font-en); font-size: 19px; font-weight: 700; fill: var(--cds-text); }
circle.rcr-st__face--4 + .rcr-st__no { fill: var(--cds-text); }
.rcr-st__name { font-size: 28px; font-weight: 700; fill: var(--cds-text); letter-spacing: 1px; }
.rcr-st__desc { font-size: 16px; font-weight: 500; fill: var(--cds-text-body); }
.rcr-st__pill { fill: var(--cds-text); }
.rcr-st__pill-t { font-size: 13px; font-weight: 700; fill: var(--cds-on-ink); letter-spacing: 2px; }
.rcr-st__crit { font-size: 15px; font-weight: 500; fill: var(--cds-text-body); }
.rcr-st__sep { stroke: var(--cds-rule); stroke-width: 1.5; }
.rcr-st-sp { display: none; }
@media (max-width: 767px) {
  .rcr-st { display: none; }
  .rcr-st-sp { display: grid; gap: 0; margin-left: 18px; border-left: 2px solid var(--cds-text); }
  .rcr-st-sp li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 0 0 28px 0; }
  .rcr-st-sp__no { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -20px; border-radius: 50%; font-family: var(--cds-font-en); font-size: 13px; font-weight: 700; color: var(--cds-text); }
  .rcr-st-sp__no.rcr-st__face--1 { background: color-mix(in srgb, var(--cds-text) 6%, var(--cds-bg)); }
  .rcr-st-sp__no.rcr-st__face--2 { background: color-mix(in srgb, var(--cds-text) 12%, var(--cds-bg)); }
  .rcr-st-sp__no.rcr-st__face--3 { background: color-mix(in srgb, var(--cds-text) 22%, var(--cds-bg)); }
  .rcr-st-sp__no.rcr-st__face--4 { background: var(--cds-accent); }
  .rcr-st-sp li h4 { margin: 6px 0 0; font-size: 18px; font-weight: 700; color: var(--cds-text); }
  .rcr-st-sp li p { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--cds-text-body); }
  /* 昇格基準: 面もピルも持たず、11px のラベル ＋ 本文（二重の囲みは軽く見える: design-critic 2026-10-18） */
  .rcr-st-sp__cr { margin-top: 10px !important; font-size: 12.5px !important; color: var(--cds-text-body); }
  .rcr-st-sp__cr b { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--cds-text); }
}

/* ---------- ② 年齢の軸（WF .mt。x は % の CSS 変数） ---------- */
.rcr-tl { overflow-x: auto; scrollbar-width: none; }
.rcr-tl::-webkit-scrollbar { display: none; }
.rcr-tl [style*="--x"] { --l: calc(var(--x) * 1%); }
.rcr-tl__in { position: relative; min-width: 720px; height: 316px; display: grid; grid-template-columns: 120px 1fr; column-gap: 28px; padding-right: 16px; font-feature-settings: "palt"; }   /* 右端の目盛（35）が半分切れないよう 16 空ける */
.rcr-tl__who { position: absolute; left: 0; width: 120px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }
.rcr-tl__who--g { top: 112px; background: var(--cds-bg-soft); color: var(--cds-text-secondary); }
.rcr-tl__who--u { top: 242px; background: var(--cds-text); color: var(--cds-on-ink); }
.rcr-tl__who--u::before { content: ""; width: 6px; height: 6px; margin-right: 10px; background: var(--cds-accent); }
.rcr-tl__plot { position: relative; grid-column: 2; height: 100%; }
.rcr-tl__ticks span { position: absolute; top: 0; left: var(--l); transform: translateX(-50%); font-family: var(--cds-font-en); font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; color: var(--cds-text-secondary); }
.rcr-tl__grid i { position: absolute; top: 24px; bottom: 0; left: var(--l); border-left: 1px solid var(--cds-rule); }
.rcr-tl__ln { position: absolute; left: 0; right: 12px; height: 2px; transform: translateY(-50%); }
.rcr-tl__ln::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.rcr-tl__ln--g { top: 134px; background: color-mix(in srgb, var(--cds-text) 18%, var(--cds-bg)); color: color-mix(in srgb, var(--cds-text) 18%, var(--cds-bg)); }
.rcr-tl__ln--u { top: 264px; height: 3px; background: var(--cds-text); color: var(--cds-text); }
.rcr-tl__band { position: absolute; top: 272px; height: 6px; left: var(--l); width: calc(var(--w) * 1%); background: color-mix(in srgb, var(--cds-accent) 40%, transparent); }   /* 期間は線の下の 6px の帯（18px の面は大きすぎた: design-critic 2026-10-18） */
.rcr-tl__mk { position: absolute; left: var(--l); transform: translate(-50%, -50%); border-radius: 50%; }
.rcr-tl__mk--dot { top: 134px; width: 12px; height: 12px; background: color-mix(in srgb, var(--cds-text) 34%, var(--cds-bg)); }
.rcr-tl__mk--ring { width: 30px; height: 30px; background: var(--cds-bg); border: 4px solid color-mix(in srgb, var(--cds-text) 34%, var(--cds-bg)); }
.rcr-tl__mk--ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: color-mix(in srgb, var(--cds-text) 34%, var(--cds-bg)); }
.rcr-tl__mk--ring.rcr-tl__mk--u { width: 38px; height: 38px; border: 5px solid var(--cds-text); box-shadow: 0 0 0 8px color-mix(in srgb, var(--cds-text) 6%, transparent); z-index: 1; }
.rcr-tl__mk--ring.rcr-tl__mk--u::after { inset: 6px; background: var(--cds-accent); }
.rcr-tl__chip { position: absolute; left: var(--l); transform: translateX(-50%); padding: 5px 12px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; letter-spacing: 0.06em; }
.rcr-tl__chip--g { background: var(--cds-bg-soft); color: var(--cds-text-secondary); }
.rcr-tl__chip--u { background: var(--cds-text); color: var(--cds-on-ink); }
.rcr-tl__chip--u::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border-top: 5px solid var(--cds-text); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.rcr-tl__cap { position: absolute; left: var(--l); transform: translateX(-50%); font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; color: var(--cds-text-secondary); }
.rcr-tl__cap--u { color: var(--cds-text); font-size: 14px; }
.rcr-tl__bandcap { position: absolute; top: 288px; left: var(--l); width: calc(var(--w) * 1%); text-align: right; padding-right: 14px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.06em; color: var(--cds-accent-deep, var(--cds-accent)); }
.rcr-tl__conn { position: absolute; left: var(--l); top: 152px; height: 104px; border-left: 1.5px solid color-mix(in srgb, var(--cds-text) 40%, var(--cds-bg)); }
@media (max-width: 767px) {
  .rcr-tl { margin-right: calc(var(--cds-gutter) * -1); padding-right: var(--cds-gutter); }
  .rcr-tl__in { min-width: 760px; grid-template-columns: 96px 1fr; column-gap: 16px; }
  .rcr-tl__who { width: 96px; font-size: 12px; }
}

/* ---------- ③ 経路の表（WF .cpx） ---------- */
.rcr-cp__in { overflow-x: auto; scrollbar-width: none; }
.rcr-cp__in::-webkit-scrollbar { display: none; }
.rcr-cp__hd, .rcr-cp__g { min-width: 900px; display: grid; grid-template-columns: 210px repeat(5, minmax(0, 1fr)); }
.rcr-cp__hd { padding-bottom: 10px; border-bottom: 1px solid var(--cds-text); font-family: var(--cds-font-en); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--cds-text-body); }
.rcr-cp__hd span { padding-left: 2px; }
.rcr-cp__g { row-gap: 6px; position: relative; padding-bottom: 10px; margin-top: 10px; font-feature-settings: "palt"; }
.rcr-cp__mband { background: var(--cds-bg-soft); }   /* 帯は石の面（碧の面にしない） */
.rcr-cp__lab { grid-column: 1; align-self: center; padding-left: 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.55; color: var(--cds-text); z-index: 1; }
.rcr-cp__lab--m { white-space: nowrap; }
.rcr-cp__lab i { font-style: normal; font-family: var(--cds-font-en); color: var(--cds-text-secondary); margin-right: 10px; font-size: 12px; }
.rcr-cp__b { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; z-index: 1; padding: 0 6px; }
.rcr-cp__b--bk { background: var(--cds-text); color: var(--cds-on-ink); }
.rcr-cp__b--gy { background: var(--cds-bg-soft); border: 1px solid color-mix(in srgb, var(--cds-text) 40%, var(--cds-bg)); margin-left: 28px; }
.rcr-cp__b--wh { background: var(--cds-bg); border: 1.5px solid var(--cds-text); margin: 12px 0 12px 28px; font-size: 13px; }
.rcr-cp__g > .rcr-cp__b[style*="grid-row:1"] { margin-top: 12px; margin-bottom: 12px; }
.rcr-cp__b--bk[style*="grid-row:1"] { font-size: 13.5px; }
.rcr-cp__b[style*="grid-column:5"] { margin-left: 28px; }
.rcr-ar { display: flex; align-items: center; z-index: 2; width: 28px; padding: 0 3px; color: color-mix(in srgb, var(--cds-text) 40%, var(--cds-bg)); }
.rcr-ar svg { width: 22px; height: 8px; }
.rcr-ar--m { color: var(--cds-accent); }
.rcr-cp__pl { background: var(--cds-bg-soft); margin-left: 16px; margin-bottom: -4px; z-index: 0; }
.rcr-cp__pl-lb { position: relative; z-index: 2; margin-left: 28px; display: flex; justify-content: center; }
.rcr-cp__pl-tx { position: absolute; left: calc(50% + 14px); top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--cds-accent-deep, var(--cds-accent)); letter-spacing: 0.04em; white-space: nowrap; }
.rcr-cp__pl-up { position: relative; width: 2px; height: 100%; background: var(--cds-accent); margin-top: 6px; }
.rcr-cp__pl-up::before { content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 8px solid var(--cds-accent); border-top: 0; }
.rcr-cp__sep { border-top: 1px solid var(--cds-rule); align-self: center; z-index: 1; }
.rcr-cp__lgd { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cds-rule); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11.5px; letter-spacing: 0.02em; color: var(--cds-text-secondary); }
.rcr-cp__lgd span { display: inline-flex; align-items: center; gap: 8px; }
.rcr-cp__lgd .rcr-ar--lg { width: 26px; padding: 0; }
.rcr-cp__lgd .rcr-ar--lg svg { width: 26px; height: 9px; }
.rcr-cp__lgd i { width: 14px; height: 14px; display: inline-block; }
.rcr-cp__k { background: var(--cds-text); }
.rcr-cp__w { background: var(--cds-bg); border: 1.5px solid var(--cds-text); }
.rcr-cp__lg-g { background: var(--cds-bg-soft); border: 1px solid color-mix(in srgb, var(--cds-text) 40%, var(--cds-bg)); }
@media (max-width: 767px) {
  .rcr { gap: 64px; }
  .rcr__blk { gap: 28px; }
  .rcr-cp__in { margin-right: calc(var(--cds-gutter) * -1); padding-right: var(--cds-gutter); }
}

/* ---------- 図を VISUAL ASSETS にした組み（variant figures: asset）: 文 5 : 面 7、上揃え、塊の間 120（SP 64） ---------- */
.rcr:has(.rcr__blk--va) { gap: 120px; }
.rcr__blk--va { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.rcr__blk--va .rcr__text { gap: 20px; padding-top: 4px; }
.rcr__blk--va .rcr__body { max-width: 28em; }
.rcr__blk--va .va__in { background: var(--cds-va-bg, var(--cds-bg-soft)); }
@media (max-width: 960px) { .rcr__blk--va { grid-template-columns: 1fr; gap: 28px; } .rcr__blk--va .rcr__body { max-width: none; } }
@media (max-width: 767px) { .rcr:has(.rcr__blk--va) { gap: 64px; } .rcr__blk--va .va { aspect-ratio: 4 / 3; } }