/* 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: "Poppins", var(--cds-font-en); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; 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; }
/* 「散らした面」の形（cosawell 採用 FV を参考。2026-10-18）: 白い地に灰の面 4 枚（1440 基準の --x/--y/--w/--h、角丸なし）、ラベルは面の中央。
   読込で右から滑り込む（translateX 160 → 0 ＋ 透明度、1.4s cubic-bezier(.16,1,.3,1)、面ごと 0.1s）。見出しは左下（y 486 から）で面に重なる。SCROLL は右下 */
/* 読込: 板 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; }
}


/* ---------- media=collage: 流れる面（cosawell 採用 FV の実測 2026-10-19）----------
   FV は画面の高さちょうど（100svh、min 620 / max 1000）。写真の帯は上から 19% に置き、高さ 57%（cosawell 173 / 511 at 900）。
   面は全て 3:2（cosawell は 541×395 と 413×395 の 2 種だが、依頼側の指定で同じ比率に）、偶数枚目は 0.29h 下げる（116 / 395）、間 40。
   帯は左へ一定に流れ続ける（cosawell は swiper の linear で約 52px/s）。同じ 6 枚を 2 回並べ、半分ぶんを --mq 秒で。画面外では止める（data-rc-loop）。
   読込では帯ごと右から 160px 滑り込む（1.4s）。見出しは帯の下端に重なり、画面の下から 7%（60 / 900）に置く → 高さで決めるので文字が見切れない */
.rcb--collage { --ph: clamp(240px, 44svh, 440px); --pg: 40px; height: 100svh; min-height: 620px; max-height: 1000px; padding-top: 0; background: var(--cds-bg); }
.rcb__stage--collage { top: 19%; height: 57%; perspective: none; overflow: hidden; }
.rcb__belt { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; height: 100%; animation: rcbBeltIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.rcb__track { display: flex; align-items: flex-start; gap: var(--pg); padding-right: var(--pg); animation: rcbBelt var(--mq, 60s) linear infinite; will-change: transform; }
/* 面は全て同じ横長 3:2（依頼側 2026-10-19「写真の比率は全て横長に合わせて同じに」）。偶数枚目は 0.29h 下げて段を付ける（cosawell と同じ） */
.rcb__plate { flex: none; display: grid; place-items: center; width: calc(var(--ph) * 1.5); height: var(--ph); border-radius: 12px; overflow: hidden; background: var(--cds-va-bg, var(--cds-bg-soft)); }   /* 角丸 12 は他の VISUAL ASSETS と同じ（依頼側 2026-10-19） */
.rcb__plate:nth-child(even) { margin-top: calc(var(--ph) * 0.29 - 20px); }   /* 下がる面は 20px だけ上げる（依頼側 2026-10-19、PC） */
@media (max-width: 767px) { .rcb__plate:nth-child(even) { margin-top: calc(var(--ph) * 0.29); } }
.rcb__plate .va__label { font-size: 11px; }
@keyframes rcbBelt { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes rcbBeltIn { from { opacity: 0; transform: translate3d(160px, 0, 0); } to { opacity: 1; transform: none; } }
.rcb__stage--collage.is-paused .rcb__track { animation-play-state: paused; }
.is-js .rcb__stage--collage { opacity: 1; animation: none; }
/* 文字: 帯の下端（76%）に重なり、下から 7% で止まる。見出しは画面の高さでも縮む（10.4vh: 900 で 94 → 88 で止まる） */
.rcb--collage .rcb__in { height: 100%; }
.rcb--collage .rcb__text { top: auto; bottom: 7%; }
.rcb--collage .rcb__title { font-size: clamp(40px, min(6.1vw, 10.4svh), 88px); line-height: 1.3; }
.rcb--collage .rcb__kicker { margin-bottom: 20px; }
.rcb--collage .rcb__scroll { left: auto; right: max(0px, calc((100% - var(--cds-content)) / 2)); top: auto; bottom: 7%; }
.is-static .rcb__belt, .is-static .rcb__track { animation: none; }
@media (prefers-reduced-motion: reduce) { .rcb__belt, .rcb__track { animation: none; } }
@media (max-width: 767px) {
  /* SP（cosawell の SP を参考 2026-10-19）: 画面の高さには合わせず、流れで ヘッダー → 帯 → 見出し。帯はヘッダーの 48 下、面は高さ 26svh（3:2）、偶数枚目の段差ぶんまで帯に入れる。
     見出しは帯の 36 下、左右はガター（以前は absolute の left 0 でガターが消えていた）、下 64 */
  .rcb--collage { --ph: clamp(160px, 26svh, 230px); --pg: 14px; display: block; height: auto; min-height: 0; max-height: none; padding: 112px 0 64px; }
  .rcb--collage .rcb__stage--collage { position: relative; top: auto; left: auto; right: auto; height: calc(var(--ph) * 1.29); margin: 0; }
  .rcb--collage .rcb__in { position: relative; height: auto; padding-block: 36px 0; }
  .rcb--collage .rcb__text { position: static; }
  .rcb--collage .rcb__kicker { margin-bottom: 16px; font-size: 13px; }
  .rcb--collage .rcb__title { font-size: clamp(32px, 9.6vw, 42px); line-height: 1.32; }
  .rcb--collage .rcb__scroll { display: none; }
}