/* hero-columns-recruit — ai-model.jp/movie の COMPANY 章（依頼側が「FV」と呼んだ見え方）の移植。実測: measured/aimodel-movie-fv.md（2026-10-21）。
   列 4 本 x 72 / 405 / 738 / 1071・幅 297・列間 36、カード 297×360 角丸 13.5、縦ピッチ 396。4 列とも上へ linear（158 / 63 / 106 / 53 px/s）。
   切り替え: 灰のパネルが上へ抜ける 1.2s cubic-bezier(.57,0,.13,1)、列は −7.5% へ同じ 1.2s（後ろから 0.12s ずつ）。コピーは 1.4s expo.out で本文 → ロゴ → ラベル → リンク（0.07〜0.49s）。
   ① 読込: 暗い地（#141416）に 4 列の縦長カード（幅 = (1440 − 余白) / 4、4:5、角丸 12、列の間 40）が画面いっぱいに縦に流れる（奇数列は上へ、偶数列は下へ、1 周 36s linear）。
   ② --hold 秒後に .is-open: 左の列が左へ抜け（translateX −110%、1.1s）、残る 3 列は右の 56% に寄り、地が明るい灰（#e6e6e4）へ 1.2s。コピーはラベル → 見出し → 本文 → リンクの順で下から（0.15s ずつ）。
   runtime ⑪ [data-rc-intro] が --hold 秒後に .is-open を付ける。reduced-motion / is-static は最初から ② */
.rhc { --rhc-dark: #131313; --rhc-light: #d9d9d9; --rhc-gap: 36px; --rhc-pad: 72px; --rhc-e: cubic-bezier(0.57, 0, 0.13, 1); position: relative; height: 100svh; min-height: 640px; max-height: 1080px; background: var(--rhc-dark); color: var(--cds-text); overflow: hidden; transition: background-color 1.2s var(--rhc-e); }
.rhc.is-open { background: var(--rhc-light); }
/* 列の箱: 4 列を等分。② では右 56% に 3 列（左の列は抜ける） */
.rhc__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rhc-gap); padding: 0 var(--rhc-pad); transition: grid-template-columns 1.2s var(--rhc-e), padding 1.2s var(--rhc-e); }
.rhc__col { position: relative; height: 100%; overflow: hidden; transition: transform 1.2s var(--rhc-e), opacity 0.9s ease; }
/* 4 列とも上へ。1 周（6 枚 ＝ 2376px）を列ごとに 15s / 37.5s / 22.5s / 45s（ai-model の 158 / 63 / 106 / 53 px/s） */
.rhc__track { display: grid; gap: var(--rhc-gap); animation: rhcUp 15s linear infinite; will-change: transform; }
.rhc__col:nth-child(2) .rhc__track { animation-duration: 37.5s; animation-delay: -9s; }
.rhc__col:nth-child(3) .rhc__track { animation-duration: 22.5s; animation-delay: -5s; }
.rhc__col:nth-child(4) .rhc__track { animation-duration: 45s; animation-delay: -20s; }
@keyframes rhcUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - var(--rhc-gap) / 2), 0); } }
@keyframes rhcDown { from { transform: translate3d(0, calc(-50% - var(--rhc-gap) / 2), 0); } to { transform: translate3d(0, 0, 0); } }
.rhc__card { position: relative; display: grid; place-items: center; aspect-ratio: 297 / 360; border-radius: 13.5px; overflow: hidden; background: #2a2a2e; }
.rhc__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rhc__card .va__label { color: rgba(251, 250, 248, 0.32); }
.rhc.is-open .rhc__card { background: var(--cds-va-bg, #ecebe7); }
.rhc.is-open .rhc__card .va__label { color: var(--cds-va-label, rgba(13, 13, 14, 0.34)); }
.rhc__card, .rhc__card .va__label { transition: background-color 1.2s ease, color 1.2s ease; }
/* ② 左の列が抜けて、残り 3 列が右 56% へ */
/* ② 残るのは右の 2 列（ai-model.jp と同じ: カード 384、間 48、右の余白 88）。左の 2 列は左へ抜け、空きにコピー（依頼側 2026-10-21「写真は 2 列にしてレイアウトを近づける」） */
.rhc.is-open .rhc__cols { grid-template-columns: minmax(0, 1fr) 297px 297px; column-gap: 36px; padding-right: 72px; }
.rhc.is-open .rhc__col:nth-child(1), .rhc.is-open .rhc__col:nth-child(2) { position: absolute; left: var(--rhc-pad); width: 297px; height: 100%; transform: translate3d(-150%, 0, 0); opacity: 0; }
.rhc.is-open .rhc__col:nth-child(2) { left: calc(var(--rhc-pad) + 297px + var(--rhc-gap)); transition-delay: 0.12s; }
.rhc.is-open .rhc__col:nth-child(3) { grid-column: 2; }
.rhc.is-open .rhc__col:nth-child(4) { grid-column: 3; }
/* コピー: 左 44% の中。ラベル（英字 16 / 400、括弧つき）→ 見出し（display 72 / 400）→ 本文 16 / 2 → リンク。最初は透明、② で下から 24px */
.rhc__in { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; pointer-events: none; }
/* コピーは左 40% の箱の中（本文の左端から、2 列目の 56px 手前まで） */
.rhc__in { justify-content: flex-start; }
.rhc__copy { width: min(100%, calc(100vw - 2 * 297px - 36px - 72px - 96px - max(var(--cds-gutter), (100vw - var(--cds-content)) / 2))); max-width: 480px; margin-inline: 0; pointer-events: auto; }   /* .wrap > * の margin-inline: auto（中央寄せ）を打ち消し、本文の左端から */
/* コピー: 86px 下から 1.4s expo.out（ai-model の class co）。パネルが開き始めて 0.5s 後から、ラベル → 見出し → 本文 → リンク（0.07s ずつ） */
.rhc__copy > * { opacity: 0; transform: translate3d(0, 86px, 0); transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.rhc.is-open .rhc__copy > * { opacity: 1; transform: none; }
.rhc.is-open .rhc__kicker { transition-delay: 0.5s; }
.rhc.is-open .rhc__title { transition-delay: 0.57s; }
.rhc.is-open .rhc__body { transition-delay: 0.71s; }
.rhc.is-open .rhc__link { transition-delay: 0.99s; }
.rhc__kicker { margin-bottom: 36px; font-family: "Poppins", var(--cds-font-en); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; color: var(--cds-text-secondary); }
.rhc__title { font-size: clamp(40px, 4.7222vw, 68px); font-weight: 900; line-height: 1.25; letter-spacing: 0.01em; color: var(--cds-text); font-feature-settings: "palt"; white-space: nowrap; }
.rhc__title .line { display: block; }
.rhc__body { margin-top: 32px; font-size: 15px; line-height: 2; letter-spacing: 0.04em; color: var(--cds-text-body); }   /* ai-model 14.4 / 28.8 */
.rhc__link { margin-top: 44px; }
/* 静止画 / reduced-motion は ② の形 */
.is-static .rhc, .rhc.is-static { background: var(--rhc-light); }
.is-static .rhc .rhc__cols { grid-template-columns: minmax(0, 1fr) 297px 297px; column-gap: 36px; padding-right: 72px; }
.is-static .rhc .rhc__col:nth-child(1), .is-static .rhc .rhc__col:nth-child(2) { position: absolute; transform: translate3d(-150%, 0, 0); opacity: 0; }
.is-static .rhc .rhc__col:nth-child(3) { grid-column: 2; }
.is-static .rhc .rhc__col:nth-child(4) { grid-column: 3; }
.is-static .rhc .rhc__copy > * { opacity: 1; transform: none; transition: none; }
.is-static .rhc .rhc__track, .rhc.is-paused .rhc__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rhc { background: var(--rhc-light); transition: none; } .rhc__track { animation: none; } .rhc__cols { grid-template-columns: minmax(0, 1fr) 297px 297px; column-gap: 36px; padding-right: 72px; transition: none; } .rhc__col:nth-child(1), .rhc__col:nth-child(2) { position: absolute; transform: translate3d(-150%, 0, 0); opacity: 0; } .rhc__col:nth-child(3) { grid-column: 2; } .rhc__col:nth-child(4) { grid-column: 3; } .rhc__copy > * { opacity: 1; transform: none; transition: none; } }
@media (max-width: 767px) {
  /* SP: 2 列が流れ、② で上 52% に 2 列が残り、下にコピー */
  .rhc { --rhc-gap: 16px; --rhc-pad: 20px; min-height: 100svh; }
  .rhc__cols { grid-template-columns: repeat(2, 1fr); }
  .rhc__col:nth-child(n + 3) { display: none; }
  .rhc.is-open .rhc__cols { grid-template-columns: repeat(2, 1fr); bottom: 48%; }
  .rhc.is-open .rhc__cols { grid-template-columns: repeat(2, 1fr); column-gap: var(--rhc-gap); padding-right: var(--rhc-pad); }
  .rhc.is-open .rhc__col:nth-child(1), .rhc.is-open .rhc__col:nth-child(2) { position: relative; left: auto; width: auto; transform: none; opacity: 1; }
  .rhc.is-open .rhc__col:nth-child(3), .rhc.is-open .rhc__col:nth-child(4), .is-static .rhc .rhc__col:nth-child(3), .is-static .rhc .rhc__col:nth-child(4) { grid-column: auto; }
  .rhc__in { align-items: flex-end; padding-bottom: 40px; }
  .rhc__copy { width: 100%; }
  .rhc__kicker { margin-bottom: 20px; font-size: 13px; }
  .rhc__title { font-size: clamp(32px, 9vw, 40px); }
  .rhc__body { margin-top: 18px; font-size: 14px; line-height: 1.9; }
  .rhc__link { margin-top: 24px; }
  .is-static .rhc .rhc__cols { grid-template-columns: repeat(2, 1fr); bottom: 48%; }
  .is-static .rhc .rhc__cols { column-gap: var(--rhc-gap); padding-right: var(--rhc-pad); }
  .is-static .rhc .rhc__col:nth-child(1), .is-static .rhc .rhc__col:nth-child(2) { position: relative; transform: none; opacity: 1; }
}