/* hero-portraits-recruit — 文字 ＋ ポートレートの縦送り 3 列
   出典: CUOLEGA 新卒 WF .fv（高さ 800、文字 470 幅、写真 3 列 256 / gap 4 / 120s）、PLAYBOOK §2.1（eyebrow → 見出し 24、見出し → リード 32）、§5（主役は FV の 1 つ）。
   PC: 100svh（min 680 / max 1000）。文字は左の 44%、写真は右の 50% から画面の右端まで。SP: 文字 → 帯（横送り）。 */
.rcf { position: relative; display: grid; align-items: center; min-height: 100svh; max-height: 1040px; padding-top: 80px; background: var(--cds-bg); color: var(--cds-text); overflow: hidden; }
.rcf__in { position: relative; z-index: 2; width: 100%; }
/* 文字の塊は左へ（.wrap > * の margin-inline: auto を戻す。中央に寄って写真と重なった: 2026-10-18 実測）。幅は内側の 50%、写真は 54% から */
.rcf__text { max-width: 50%; margin-inline: max(0px, calc((100% - var(--cds-content)) / 2)) 0; padding: 40px 0 56px; }   /* 左端を他章の内側（1440 で 120）に揃える */
/* 小さなラベル: ブランドの 1 点（Master Prompt §06「Point」。原本の .fv__en も #00A9AD） */
.rcf__kicker { margin-bottom: 24px; font-family: var(--cds-font-en); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cds-accent); }
/* 見出し: 和文 700、5vw（1440 で 72、1200 で 60）、行間 1.3、字送り 0.02em。行はマスクの中を下から（傾けない） */
/* 1 行 8 字（「新卒1年目から、」）が 1440 の 50%（628px）に入る上限 ＝ 68px → 4.7vw */
.rcf__title { font-size: clamp(38px, 4.7vw, 68px); font-weight: var(--cds-weight-head); line-height: 1.3; letter-spacing: var(--cds-track-head); color: var(--cds-text); font-feature-settings: "palt"; }
.rcf__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rcf__title .line__in { display: block; }
.rcf__sub { margin-top: 32px; font-size: clamp(16px, 1.3889vw, 20px); font-weight: 700; line-height: 1.9; letter-spacing: 0.04em; color: var(--cds-text); }
.rcf__body { margin-top: 20px; max-width: 32em; font-size: 15px; line-height: 2; letter-spacing: 0.02em; color: var(--cds-text-body); }
.rcf__body .ph { word-break: normal; }
/* 写真: 右半分、3 列が画面の上下いっぱい。列ごとに頭をずらす（段差のリズム）。列の中身を 2 回並べ -50% まで送る */
.rcf__media { position: absolute; left: 54%; right: 0; top: var(--cds-header-h, 80px); bottom: 0; z-index: 1; display: flex; gap: 6px; overflow: hidden; }   /* 写真はヘッダーの下から（ヘッダーは最上部で地なし。導線のピルを写真に重ねない） */
/* スクロール連動: 奇数列は上へ、偶数列は下へ（--rc-drift 0 → 1 で最大 12vw ＝ 1440 で 173px。layerx の 0.12vw × 進捗と同じ量）。
   列の箱に translate（個別プロパティ）で掛け、中の縦送り（transform の animation）とは別に動かす。上下に 12vw ぶん写真を足して地を見せない */
.rcf__col { --rc-d: calc(var(--rc-drift, 0) * 12vw); flex: 1 1 0; min-width: 0; overflow: hidden; margin-block: -12vw; translate: 0 calc(var(--rc-d) * -1); }
.rcf__col:nth-child(even) { translate: 0 var(--rc-d); }
/* 縦送り: 96s → 64s で 1 周（1440 で約 52px/s。solvvy 30px/s、layerx 100px/s の間） */
.rcf__track { display: flex; flex-direction: column; gap: 6px; will-change: transform; animation: rcfUp 64s linear infinite; }
.rcf__col--1 .rcf__track { margin-top: -140px; animation-delay: -5s; }
.rcf__col--2 .rcf__track { margin-top: -40px; animation-name: rcfDown; animation-delay: -40s; }
.rcf__col--3 .rcf__track { margin-top: -220px; animation-delay: -16s; }
.rcf__track img, .rcf__ph { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; flex: none; background: var(--cds-bg-soft); }
.rcf__ph { display: grid; place-items: center; }
@keyframes rcfUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes rcfDown { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.is-paused .rcf__track, .is-paused .rcf__btrack { animation-play-state: paused; }
/* 読込の段取り（Master Prompt §15: Heading / Body / Image で Timing を変える）: 写真 0.1s から 1.4s で現れ、ラベル 0.4s、見出し 1 行目 0.55s / 2 行目 0.7s、文 1.05s、本文 1.2s */
.is-js .rcf__media { opacity: 0; animation: rcfIn 1.4s var(--cds-ease) 0.1s both; }
@keyframes rcfIn { from { opacity: 0; } to { opacity: 1; } }
.is-js .rcf__kicker, .is-js .rcf__sub, .is-js .rcf__body { opacity: 0; transform: translateY(14px); animation: rcfUpIn 0.9s var(--cds-ease) both; }
.is-js .rcf__kicker { animation-delay: 0.4s; }
.is-js .rcf__sub { animation-delay: 1.05s; }
.is-js .rcf__body { animation-delay: 1.2s; }
.is-js .rcf__title .line__in { opacity: 0; transform: translate3d(0, 100%, 0); animation: rcfLine 1s var(--cds-ease) both; animation-delay: calc(0.55s + var(--i, 0) * 0.15s); }
@keyframes rcfUpIn { to { opacity: 1; transform: none; } }
@keyframes rcfLine { to { opacity: 1; transform: none; } }
.is-static .rcf__media, .is-static .rcf__kicker, .is-static .rcf__sub, .is-static .rcf__body, .is-static .rcf__title .line__in { animation: none; opacity: 1; transform: none; }
.is-static .rcf__track, .is-static .rcf__btrack { animation: none; }
.rcf__sp { display: none; }
@media (prefers-reduced-motion: reduce) {
  .is-js .rcf__media, .is-js .rcf__kicker, .is-js .rcf__sub, .is-js .rcf__body, .is-js .rcf__title .line__in { animation: none; opacity: 1; transform: none; }
  .rcf__track, .rcf__btrack { animation: none; }
}
/* ≤1100: 文字の列が狭くなるので写真を 42% に */
@media (max-width: 1100px) {
  .rcf__text { max-width: 54%; }
  .rcf__media { left: 60%; }
}
/* SP: 文字の塊 → 帯（1 段、横へ流れる。高さ 240、4:5）。列の縦送りは出さない */
@media (max-width: 767px) {
  .rcf { display: block; min-height: 0; max-height: none; padding-top: 64px; }
  .rcf__in { padding-top: 32px; }
  .rcf__text { max-width: none; padding: 0 0 32px; }
  .rcf__kicker { margin-bottom: 16px; font-size: 12px; }
  .rcf__title { font-size: clamp(34px, 9.6vw, 40px); line-height: 1.3; }
  .rcf__sub { margin-top: 20px; font-size: 16px; line-height: 1.8; }
  .rcf__body { margin-top: 16px; max-width: none; font-size: 15px; }
  .rcf__media { display: none; }
  .rcf__sp { display: block; }
  .rcf__band { overflow: hidden; }
  .rcf__btrack { display: flex; gap: 4px; width: max-content; will-change: transform; animation: rcfLeft 50s linear infinite; }   /* 70s → 50s（PC と同じ割合で速く） */
  .rcf__btrack img, .rcf__btrack .rcf__ph { height: 240px; width: auto; aspect-ratio: 4 / 5; flex: none; }
  @keyframes rcfLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
  .is-js .rcf__sp { opacity: 0; animation: rcfIn 1.2s var(--cds-ease) 1.1s both; }
  .is-static .rcf__sp { animation: none; opacity: 1; }
}