/* values-scroll-recruit — 罫 ＋ 番号 ＋ 題 ＋ 英名 ＋ 本文、横に 400 幅で並ぶ。左端は本文の左端、右は画面端まで */
.rcv { --rcv-pad: max(var(--cds-gutter), calc((100% - var(--cds-content)) / 2)); padding-inline: var(--rcv-pad); scroll-padding-inline: var(--rcv-pad); gap: 48px; }
/* PC のピン留め（runtime が .is-pin を付け、--rcv-total（章の高さ ＝ 画面に留まる高さ ＋ 横に送る距離）と --rcv-top（sticky の top）を書く）。
   本体サイト C案 .bt-business / .bb-sticky / .bb-track の移植: 章の高さ = 660 + travel、sticky の top = clamp(0, 50vh − 330, 200)、列は translate3d(−p × travel)、進捗は同じ p。
   留まる面の余白は上 96 / 下 80（章の 144 だと 768 高の画面で足元が切れる） */
/* 留まる面・列の共通の規則は _recruit.css の [data-rc-pin]。ここは列の左端だけ（本文の左端から始める） */
.rcv-sec.is-pin .rcv { width: max-content; padding-inline: 0; margin-left: var(--rcv-pad); }
/* 1 項目の組み（依頼側 2026-10-18「一つ一つのレイアウト、もっとバランス良く、洗練させる」）:
   罫 → 28 → 番号（左）と英名（右端、番号のベースラインに揃える）の 1 段 → 44 → 題 → 16 → 本文。
   英名が番号の上に乗る 3 段（英名 / 番号 / 題）は、小さい文字が先に目に入って読み始めがぶれた。段は 2 つ（数字の段・言葉の段）に分け、間を大きく取る */
.rcv__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; width: 400px; }
.rcv__rule { grid-column: 1 / -1; display: block; height: 1px; margin-bottom: 28px; background: var(--cds-text); transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--cds-ease) calc(var(--cds-delay-reveal) + var(--i, 0) * 0.08s); }
.rcv__item.is-inview .rcv__rule { transform: scaleX(1); }
.is-static .rcv__rule { transform: none; }
/* 番号: 表示語（Chillax 40 / 400）。英名: 11 / 500 / 0.16em、右端でベースライン揃え（番号の下端から 3px 上） */
.rcv__no { grid-column: 1; grid-row: 2; font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--cds-text); font-variant-numeric: tabular-nums; }
.rcv__en { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; margin: 0 0 3px; font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.16em; text-align: right; text-transform: uppercase; color: var(--cds-text-secondary); }
.rcv__ttl { grid-column: 1 / -1; margin-top: 44px; font-size: clamp(20px, 1.6667vw, 24px); font-weight: var(--cds-weight-head); line-height: 1.5; letter-spacing: 0.03em; color: var(--cds-text); font-feature-settings: "palt"; }
/* 本文: 15 / 1.95、行末を揃えて最終行の 1 字だけの行を避ける（text-wrap: pretty） */
.rcv__txt { grid-column: 1 / -1; margin-top: 16px; font-size: 15px; line-height: 1.95; letter-spacing: 0.02em; color: var(--cds-text-body); text-wrap: pretty; }
.rcv__txt .ph { word-break: normal; }
@media (max-width: 767px) {
  .rcv { gap: 24px; }
  .rcv__item { width: 72vw; max-width: 340px; }   /* 次の列が 55px 以上見える（30px では文字の途中で切れて事故に見えた: design-critic 2026-10-18） */
  .rcv__rule { margin-bottom: 20px; }
  .rcv__no { font-size: 32px; }
  .rcv__en { font-size: 10px; margin-bottom: 2px; }
  .rcv__ttl { margin-top: 32px; font-size: 19px; }
  .rcv__txt { margin-top: 12px; font-size: 14.5px; line-height: 1.9; }
}

/* ---------- 重なるカード（variant layout=stack）: recruit.positive.co.jp の重なり ＋ 暗い面 ----------
   章は来たら紙 → 黒に変わる（runtime ⑧ data-rc-tone、0.5s）。黒の間はトークンを反転し、カードは黒より一段明るい灰（#18191c）で白との対比を弱める
   （依頼側 2026-10-19「背景黒、カードの白もグレーにしてコントラスト弱めてスタイリッシュに。visual assets もカードの天地ぴったり」）。
   カード: 本文幅いっぱい、最低 520、左に文（padding 64）、右 46% に VISUAL ASSETS をカードの天地・右端ぴったりに（参考の PRODUCT LINEUP の割り付け）。
   sticky で上 --rcv-pin（PC 120 / SP 80）に留まり、次は 320 下から上がって重なる。重なられたカードは --q（ease-out の重なり）ぶん scale 1 → 0.94・opacity 1 → 0（C案 c-products の重なり方。束は見せない） */
/* 黒へのなり方は miai-corporate Red-orange-2 の実測（2026-10-19）: 固定の暗い層の不透明度がスクロールに連動して約 600px で 0 → 1（章の上端が画面の 95% に来てから）、章の下端が画面の 30% に来るまでの 600px で 1 → 0。クラス切替ではなく連続。
   runtime ⑧ が data-rc-tone="scrub" の章に --tone（0〜1）を書き、地・文字・カード・面の色を color-mix で混ぜる */
.rcv-sec--stack { --tone: 0; --t: calc(var(--tone) * 100%); --cds-bg: color-mix(in srgb, #0d0d0e var(--t), #f1f0ec); --cds-text: color-mix(in srgb, #f3f2ef var(--t), #0d0d0e); --cds-text-body: color-mix(in srgb, rgba(243, 242, 239, 0.7) var(--t), #26262a); --cds-text-secondary: color-mix(in srgb, rgba(243, 242, 239, 0.46) var(--t), #606070); --cds-va-bg: color-mix(in srgb, #232427 var(--t), #e9e8e4); --cds-va-label: color-mix(in srgb, rgba(243, 242, 239, 0.3) var(--t), rgba(13, 13, 14, 0.34)); --cds-bg-soft: var(--cds-bg); }
/* 章の地は塗らない（暗さは画面全体の .rc-veil が持つ。塗ると白と黒の境界線が出る）。静止画（is-static）だけ黒で塗る */
.is-js .rc[data-rc-tone="scrub"], .is-js .sec--soft[data-rc-tone="scrub"] { background: transparent !important; transition: none; }
.is-static .rcv-sec--stack { --tone: 1; background: #0d0d0e; }
/* 見出し（Value / 7つの行動指針）も上に留め、その下でカードが重なって切り替わる（依頼側 2026-10-19）。見出しは画面の上 96 に留まり（高さ 84）、カードは 48 下の 228 に留まる。
   見出しとカードは同じ .wrap の中なので sticky が最後のカードまで効く */
.rcv-sec--stack .rc-head { position: sticky; top: 88px; z-index: 2; margin-bottom: 36px; }
/* カードの高さは画面に合わせる: 下端と画面下端の間を 40（依頼側 2026-10-19「カード下端と画面下端の間に 32〜48px」）。1440×900 で 632、1280×720 で 452 */
.rcv-stack { --rcv-pin: 208px; --rcv-gap: 320px; display: grid; gap: var(--rcv-gap); }   /* 見出し 88〜172 → 36 → カード 208 */
.rcv-card { position: sticky; top: var(--rcv-pin); display: grid; grid-template-columns: minmax(0, 1fr) 46%; align-items: stretch; height: clamp(320px, calc(100svh - var(--rcv-pin) - 72px), 620px);   /* 下に 72 の余白（依頼側 2026-10-19「もう少し上に、下に少し余白」）。1440×900 で 620 */ border-radius: 12px; background: color-mix(in srgb, #18191c var(--t), #fff); overflow: hidden; transform-origin: 50% 50%; transform: scale(calc(1 - var(--q, 0) * 0.06)); opacity: calc(1 - var(--q, 0)); will-change: transform, opacity; }   /* C案 c-products: 重なられると中心で 0.94 に縮みながら消える（束は見せない） */
.rcv-card__txt { display: grid; align-content: center; gap: 0; max-width: 600px; padding: 64px; }
/* 番号 40 と英名 20 をベースラインでそろえ、間 20（依頼側 2026-10-19「英語をもう少し大きくしてデザイン性を上げる。番号の横でバランス良く」）。英名は本文と同じ明るさで番号より一段引く */
.rcv-card__head { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }   /* 英名は番号の天地センター（ベースライン揃えではなく: 依頼側 2026-10-19） */
.rcv-card__no { font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--cds-text); font-variant-numeric: tabular-nums; }
.rcv-card__en { font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cds-text-body); }
.rcv-card__ttl { font-size: clamp(22px, 1.9444vw, 28px); font-weight: var(--cds-weight-head); line-height: 1.5; letter-spacing: 0.03em; color: var(--cds-text); font-feature-settings: "palt"; }
.rcv-card__body { margin-top: 20px; font-size: 15px; line-height: 2; letter-spacing: 0.02em; color: var(--cds-text-body); text-wrap: pretty; }
.rcv-card__body .ph { word-break: normal; }
.rcv-card__fig { position: relative; min-height: 100%; }
.rc .rcv-card__fig .va { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }   /* カードの角丸（12）で切る */
.rcv-card__fig .va__in { background: var(--cds-va-bg, var(--cds-bg-soft)); }
@media (max-width: 1100px) {
  .rcv-card { grid-template-columns: minmax(0, 1fr) 40%; }
  .rcv-card__txt { padding: 48px; }
}
@media (max-width: 767px) {
  /* 縦積み: 面（16:9、カードの上端・左右ぴったり）→ 文 */
  .rcv-sec--stack .rc-head { top: 76px; margin-bottom: 28px; }
  .rcv-stack { --rcv-pin: 182px; --rcv-gap: 160px; }
  .rcv-card { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .rcv-card__fig { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .rcv-card__txt { padding: 24px 24px 28px; }
  .rcv-card__head { margin-bottom: 20px; }
  .rcv-card__no { font-size: 32px; }
  .rcv-card__head { gap: 14px; }
  .rcv-card__en { font-size: 14px; letter-spacing: 0.08em; }
  .rcv-card__ttl { font-size: 20px; }
  .rcv-card__body { margin-top: 14px; font-size: 14px; line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) { .rcv-card { position: relative; top: auto; transform: none; } .rcv-stack { --rcv-gap: 24px; } }