/* hero-boards-recruit — Figma 15:1334 の FV（1440×800）を円柱の回転で。--u ＝ 1440 を 100vw に写す単位。
   円柱: 中心 x 1000、半径 520（1440 基準）、板は外向き。perspective 1400、消失点は 62% / 50%。80s で 1 周（linear。遠近は perspective が保つ）
   板の下は紙の地へ溶ける（mask で 56% → 100% を透明に ＋ 碧の淡い帯。境界線を出さない: 依頼側 2026-10-18）
   見出し: x 93 → 本文の左端（120）、y 224（＋ヘッダー 80）。SCROLL: 見出しと同じ x、y 579。線は上から描かれて下へ抜ける（2.4s、上品に） */
.rcb { --u: calc(100vw / 1440); --ring-x: 1000; --ring-r: 520; position: relative; height: calc(var(--u) * 800 + var(--cds-header-h, 80px)); min-height: 640px; max-height: 1000px; padding-top: var(--cds-header-h, 80px); background: var(--cds-bg); color: var(--cds-text); overflow: hidden; }
.rcb__stage { position: absolute; left: 0; right: 0; top: var(--cds-header-h, 80px); height: calc(var(--u) * 800); perspective: 1400px; perspective-origin: 62% 50%; }
/* hover の傾き（runtime が --mx / --my を −1〜1 で書く）: ±3deg、戻りは 1.2s。回転（.rcb__ring）とは別の箱に掛ける */
.rcb__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--mx, 0) * 3deg)) rotateX(calc(var(--my, 0) * -2deg)); transition: transform 1.2s var(--cds-ease); }
.rcb__ring { position: absolute; inset: 0; transform-style: preserve-3d; animation: rcbSpin var(--period, 80s) linear infinite; }
@keyframes rcbSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.rcb__board { position: absolute; left: calc(var(--u) * (var(--ring-x) - var(--w) / 2)); top: calc(var(--u) * (400 - var(--h) / 2)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h));
  transform: rotateY(var(--a)) translateZ(calc(var(--u) * var(--ring-r))); transform-origin: center; backface-visibility: hidden; }
.rcb__face { position: absolute; inset: 0; display: grid; place-items: center; background: var(--cds-va-bg, var(--cds-bg-soft)); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.82) 70%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.12) 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.82) 70%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.12) 94%, transparent 100%); }
.rcb__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 碧の淡い帯（Figma の焼き込み）: 写真の上に 58% から薄く、下端で地に */
.rcb__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--cds-accent) 42%, transparent) 86%, color-mix(in srgb, var(--cds-accent) 18%, var(--cds-bg)) 100%); pointer-events: none; }
.rcb__face .va__label { position: relative; z-index: 1; font-size: 9px; }
/* 見出し: Noto Sans JP 900、87.883 → 6.1vw（1440 で 88）、lh 1.339、ls 0.0097em。板の上に乗る */
.rcb__in { position: relative; z-index: 3; height: 100%; pointer-events: none; }
/* 文字の塊（ラベル ＋ 見出し）は Figma の見出しの位置（y 224）に。ラベルは見出しの 28 上（PCI hst__kicker と同じ段: 英字 15 / 500 / 0.14em） */
.rcb__text { position: absolute; left: max(0px, calc((100% - var(--cds-content)) / 2)); top: calc(var(--u) * 224); pointer-events: auto; }
/* 章ラベル（.rc-label）と同じ Unbounded 400 / 16 / 0.25em（本体サイト C案の英字ラベル）。Lato のままで FV だけ書体が違っていた（依頼側 2026-10-18） */
.rcb__kicker { margin-bottom: 28px; font-family: "Unbounded", var(--cds-font-en); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cds-text-secondary); }
.rcb__title { font-size: clamp(40px, 6.1vw, 88px); font-weight: 900; line-height: 1.339; letter-spacing: 0.0097em; color: var(--cds-text); font-feature-settings: "palt"; }
.rcb__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rcb__title .line__in { display: block; }
/* SCROLL: Lato 11 / 700 / 0.2em、上から下へ、12 空けて 1×48 の線（35%）。線は上から下へ描かれ、下へ抜けて消える（2.4s、cubic-bezier(.76,0,.24,1)。間に 0.6s の静止） */
.rcb__scroll { position: absolute; left: max(0px, calc((100% - var(--cds-content)) / 2)); top: calc(var(--u) * 579); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rcb__scroll-t { font-family: var(--cds-font-en); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; color: var(--cds-text); writing-mode: vertical-rl; }
.rcb__scroll-l { position: relative; display: block; width: 1px; height: 48px; background: color-mix(in srgb, var(--cds-text) 14%, transparent); overflow: hidden; }
.rcb__scroll-l::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--cds-text); transform: scaleY(0); transform-origin: top; animation: rcbScroll 2.4s cubic-bezier(0.76, 0, 0.24, 1) infinite; }
@keyframes rcbScroll { 0% { transform: scaleY(0); transform-origin: top; } 42% { transform: scaleY(1); transform-origin: top; } 43% { transform: scaleY(1); transform-origin: bottom; } 78% { transform: scaleY(0); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* 「面」の形（写真が決まるまで。PCI site-light の FV と同じ）: 全面の VISUAL ASSETS の面、表記は出さない、下 45% から地へ薄く溶ける。面は 0.2s から 1.6s で現れ、中身は 1.04 → 1 */
.rcb__stage--asset { top: 0; height: auto; bottom: 0; perspective: none; }   /* 面はヘッダーの下まで（PCI と同じ全面） */
.rcb__stage--asset .va { position: absolute; inset: 0; margin: 0; }
.rcb__stage--asset .va__in { position: absolute; inset: 0; background: color-mix(in srgb, var(--cds-text) 7%, var(--cds-bg)); }   /* 薄い灰一色（依頼側 2026-10-18「文字は入れず薄い、綺麗な全面グレーに」）。VA の石の地（#f1f0ec）より一段落ち着いた灰 */
.rcb__stage--asset .va__label { display: none; }
.rcb__stage--asset::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--cds-bg) 62%, transparent) 100%); }
.is-js .rcb__stage--asset { animation: rcbIn 1.6s var(--cds-ease) 0.2s both; }
.is-js .rcb__stage--asset .va__in { transform: scale(1.04); animation: rcbZoom 2s var(--cds-ease) 0.2s both; }
@keyframes rcbZoom { from { transform: scale(1.04); } to { transform: none; } }
.is-js .rcb__kicker { opacity: 0; animation: rcbKick 0.9s cubic-bezier(0.66, 0, 0.34, 1) 0.35s both; }
@keyframes rcbKick { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.is-static .rcb__kicker, .is-static .rcb__stage--asset .va__in { animation: none; opacity: 1; transform: none; }
/* 読込: 板 0.1s から 1.6s で現れ（透明度）、見出しの行 0.5s / 0.65s、SCROLL 1.3s */
.is-js .rcb__stage { opacity: 0; animation: rcbIn 1.6s var(--cds-ease) 0.1s both; }
@keyframes rcbIn { from { opacity: 0; } to { opacity: 1; } }
/* 見出しの行: 章の見出しと同じ動き（110% 下から skewY(3deg) を戻しながら。PCI .ed-lines）を FV では少し長く 1.1s、行ごと 0.12s */
.is-js .rcb__title .line__in { opacity: 0; transform: translate3d(0, 110%, 0) skewY(3deg); transform-origin: left top; animation: rcbLine 1.1s cubic-bezier(0.47, 0.43, 0, 0.998) both; animation-delay: calc(0.55s + var(--i, 0) * 0.12s); }
@keyframes rcbLine { to { opacity: 1; transform: none; } }
.rcb__title .line { padding-bottom: 0.12em; margin-bottom: -0.12em; }
.is-js .rcb__scroll { opacity: 0; animation: rcbIn 0.9s var(--cds-ease) 1.3s both; }
.is-static .rcb__stage, .is-static .rcb__title .line__in, .is-static .rcb__scroll { animation: none; opacity: 1; transform: none; }
.is-static .rcb__ring { animation: none; transform: rotateY(24deg); }
.is-static .rcb__scroll-l::after { animation: none; transform: scaleY(1); }
.is-paused .rcb__ring { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .is-js .rcb__stage, .is-js .rcb__title .line__in, .is-js .rcb__scroll { animation: none; opacity: 1; } .rcb__ring { animation: none; transform: rotateY(24deg); } .rcb__tilt { transition: none; } .rcb__scroll-l::after { animation: none; transform: scaleY(1); } }
/* SP: 見出し → 板（円柱を画面の中央に、半径を詰める）。.wrap の左右の余白は保つ */
@media (max-width: 767px) {
  .rcb { --u: calc(100vw / 720); --ring-x: 360; --ring-r: 300; display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding-top: 64px; }
  .rcb__in { order: 1; height: auto; padding-block: 40px 0; }
  .rcb__text { position: static; }
  .rcb__kicker { margin-bottom: 20px; }
  .rcb__title { font-size: clamp(36px, 10.4vw, 44px); line-height: 1.3; }
  /* 「面」の形の SP: PCI と同じく文字が面の上に乗る（面を分けて積むと上が白く浮いて釣り合わない）。高さ 84svh（560〜720）、文字は中央よりやや上 */
  .rcb--asset { display: block; height: clamp(560px, 84svh, 720px); padding-top: 0; }
  .rcb--asset .rcb__stage--asset { position: absolute; inset: 0; height: auto; margin: 0; }
  .rcb--asset .rcb__in { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 64px 0 8vh; }
  .rcb__stage { order: 2; position: relative; top: auto; height: calc(var(--u) * 560); margin-top: 24px; overflow: hidden; perspective: 900px; perspective-origin: 50% 50%; }
  .rcb__board { top: calc(var(--u) * (320 - var(--h) / 2)); }
  .rcb__scroll { display: none; }
}