/* _recruit.css — 採用サイト用パーツ（recruit/）の共通語彙。CUOLEGA 新卒採用特設サイト（2026-10-18）で起こした。値は --cds-* だけ、案件固有の値は持たない。
   出典: Master Prompt「CUOLEGA RECRUIT SITE / Quality Upgrade」§08〜§09（Editorial / Typography）、§14〜§16（Motion / Hover）、
         littleplains.com 実測（measured/littleplains.md: 出現 0.5s、兄弟 0.2s 刻み、カード hover 入り 0.2s / 戻り 0.3s）、
         tech.garage.co.jp 実測（measured/f-tech-garage-detail.md: 文字は窓の中で translateY(110%) → 0、transform 1.4s / opacity .8s、並列ブロックは番号 → 罫 → 見出し → 本文）、
         docs/playbook/DESIGN-PLAYBOOK.md §2（型スケール 8 段）§4（余白 3 段）§6（非対称スピード: hover 入り 0.45 / 戻り 0.7）。
   採用サイトは Editorial（pci）より一段 Energetic: 出現は透明度 ＋ 16px（0.7s / 1s）、行は窓の中を 100% 上がる（0.9s）、写真は 1.04 → 1（1.4s）。 */

/* ---------- 章の見出し: 小さな英字ラベル ＋ 和文の見出し（gap 12、見出し → 内容 = --cds-blk） ---------- */
.rc-head { display: grid; gap: 12px; margin-bottom: var(--cds-blk); }
.rc-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }
.rc-head--row > .rc-label { grid-column: 1; }
.rc-head--row > .rc-title { grid-column: 1; }
.rc-head--row > .rc-head__aside { grid-column: 2; grid-row: 1 / 3; align-self: end; padding-bottom: 6px; }
/* 章ラベルの英字は本体サイト C案と同じ Unbounded 400 / 16 / 4px（c.css .b-eyebrow / .bb-eyebrow「英字ラベルはサイト全体で Unbounded 400 / 16px に統一」。依頼側 2026-10-18「英語の書体もこちらに合わせる」）。書体は brand.json の links で読み込む */
.rc-label { font-family: "Poppins", var(--cds-font-en); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cds-text-secondary); }   /* 英字ラベルは Poppins 600（careers.dinii.jp の Recruitment / Company Deck と同じ書体・太さ: 依頼側 2026-10-20「少し太く」） */
.rc-title { font-size: clamp(30px, 2.7778vw, 40px); font-weight: var(--cds-weight-head); line-height: 1.4; letter-spacing: var(--cds-track-head); color: var(--cds-text); font-feature-settings: "palt"; }
.rc-h3 { font-size: clamp(20px, 1.6667vw, 24px); font-weight: var(--cds-weight-head); line-height: 1.5; letter-spacing: 0.02em; color: var(--cds-text); font-feature-settings: "palt"; }
.rc-lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.9; letter-spacing: 0.02em; color: var(--cds-text-body); max-width: 40em; }
.rc-body { font-size: 16px; line-height: 1.9; letter-spacing: 0.02em; color: var(--cds-text-body); }
.rc-body b, .rc-lead b { font-weight: var(--cds-weight-strong); color: var(--cds-text); }
/* 本文は文節で折らない（keep-all だと狭い列で行末が最大 80px 揺れた: design-critic 2026-10-18）。文節の折り返しは見出し・題・ラベルだけ */
.rc-body .ph, .rc-lead .ph, .rc-prose .ph { word-break: normal; overflow-wrap: anywhere; line-break: strict; }
.rc-meta { font-family: var(--cds-font-en); font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.rc-num { font-family: var(--cds-font-en); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- 行の出現（見出し）: PCI site-light（_editorial.css .ed-lines、holon-inc.jp 実測）と同じ。依頼側 2026-10-18「文字、見出し、スクロールに合わせて高級感のある動き。PCI のワイヤーを参考に」
   .line がマスク、.line__in が 110% 下から skewY(3deg) を戻しながら上がる（transform 0.7s cubic-bezier(.47,.43,0,.998)、opacity 0.7s (.54,0,0,.99)、行ごと 0.1s）。
   順序は ラベル → 見出しの行 → 0.2s 遅れて本文（.rc-late）。 ---------- */
.rc-lines .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.rc-lines .line__in { display: block; }
.is-js .rc-lines .line > .line__in[data-reveal] { opacity: 0; transform: translate3d(0, 110%, 0) skewY(3deg); transform-origin: left top; transition: transform 0.7s cubic-bezier(0.47, 0.43, 0, 0.998) calc(var(--cds-delay-reveal) + 0.08s + var(--i, 0) * 0.1s), opacity 0.7s cubic-bezier(0.54, 0, 0, 0.99) calc(var(--cds-delay-reveal) + 0.08s + var(--i, 0) * 0.1s); }
.is-js .rc-lines .line > .line__in[data-reveal].is-inview { opacity: 1; transform: none; }
.is-static .rc-lines .line > .line__in[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .is-js .rc-lines .line > .line__in[data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- ブロックの出現: 透明度 ＋ 20px、0.65s cubic-bezier(.66,0,.34,1)（PCI .sec [data-reveal="up"] と同じ）。見出しの後の本文は .rc-late で 0.2s 遅らせる ---------- */
.is-js .sec [data-reveal="up"]:not(.line__in), .is-js .rc [data-reveal="up"]:not(.line__in) { transform: translateY(20px); transition-duration: 0.65s, 0.65s; transition-timing-function: cubic-bezier(0.66, 0, 0.34, 1), cubic-bezier(0.66, 0, 0.34, 1); }
.is-js .sec [data-reveal="up"].is-inview:not(.line__in), .is-js .rc [data-reveal="up"].is-inview:not(.line__in) { transform: none; }
.is-js .rc-late [data-reveal="up"], .is-js [data-reveal="up"].rc-late { transition-delay: calc(var(--cds-delay-reveal) + 0.2s + var(--i, 0) * 0.1s) !important; }
.is-js [data-stagger="80"] > [data-reveal="up"] { transition-delay: calc(var(--cds-delay-reveal) + var(--i, 0) * 0.08s); }
.is-js [data-stagger="120"] > [data-reveal="up"] { transition-delay: calc(var(--cds-delay-reveal) + var(--i, 0) * 0.12s); }
/* 写真（visualAsset fade）: 透明度 0.9s ＋ 1.04 → 1 を 1.4s（文字より長く、少し遅れて） */
.is-js .rc .va--fade { transition: opacity 0.9s var(--cds-ease) calc(var(--cds-delay-reveal) + 0.1s + var(--i, 0) * 0.08s); }
.is-js .rc .va--fade .va__in { transform: scale(1.04); transition: transform 1.4s var(--cds-ease) calc(var(--cds-delay-reveal) + 0.1s + var(--i, 0) * 0.08s); }
.is-js .rc .va--fade.is-inview .va__in { transform: none; }
/* hover（リンクの中の写真）: 1.03 へ 0.5s、戻り 0.8s（§16 image subtle scale。入りを速く戻りを緩く） */
@media (hover: hover) {
  a .rc .va.is-inview .va__in, .rc a .va.is-inview .va__in { transition: transform 0.8s var(--cds-ease); }
  .rc a:hover .va.is-inview .va__in { transform: scale(1.03); transition-duration: 0.5s; }
}

/* ---------- 横の動き: 掴んで送る横スクロール ＋ 1px の進捗 ---------- */
.rc-scroll { display: flex; gap: var(--cds-g); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.rc-scroll::-webkit-scrollbar { display: none; }
.rc-scroll.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rc-scroll > * { flex: none; scroll-snap-align: start; }
/* 灰の章は最初から帯を見せず、章が画面の中ほどに来たら地が灰に変わる（runtime ⑧ [data-rc-tone] が .is-toned を付け外し。上へ戻れば紙に戻る）。
   zeroten.jp の SERVICE の実測（2026-10-18）: 章の上端が画面の 62% を越えたら点き、下端が 36% より上へ抜けたら消える、background-color 0.5s cubic-bezier(.215,.61,.355,1)。
   依頼側 2026-10-18「グレーの境界が元からあるのではなく、このセクションに来たら現れる」 */
.is-js .rc[data-rc-tone] { background-color: var(--cds-bg); transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
.is-js .rc[data-rc-tone].is-toned { background-color: var(--cds-bg-soft); }
.is-static .rc[data-rc-tone] { background-color: var(--cds-bg-soft); transition: none; }
/* 画面全体の背面の暗い層（runtime ⑧ scrub が body の先頭に置き、不透明度を書く）。miai-corporate .svc-aurora の移植: position fixed、z −1 で地（canvas）の上・中身の下。章は地を塗らない（.sec は透明）ので、画面に見えている全部がふわっと暗くなり、境界線が出ない */
.rc-veil { position: fixed; inset: 0; z-index: -1; background: #0d0d0e; opacity: 0; pointer-events: none; }
/* body の地は canvas（html）に移す。body が自分で塗ると z −1 の層を隠してしまい、前後の章が暗くならず境界線が出た（2026-10-19 実測） */
html:has(.rc-veil) { background: var(--cds-bg); }
body:has(.rc-veil) { background: transparent; }
/* 地のままの章（.sec）も自分では塗らない（base.css の .sec は var(--cds-bg) を塗る）。淡い面（.sec--soft）と暗い面はそのまま */
body:has(.rc-veil) .sec:not(.sec--soft):not(.sec--dark) { background: transparent; }
/* 中身の不透明な面（VISUAL ASSETS・写真）は背面の層より前にあるので、暗転のあいだ明るいまま浮いて見えた（依頼側 2026-10-19）。
   runtime が html に --veil（0〜1）を書き、面の上に同じ黒を同じ割合で重ねる。暗い章（行動指針）の中の面は自分で色を持つので除く */
body:has(.rc-veil) .va__in::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #0d0d0e; opacity: var(--veil, 0); pointer-events: none; }
body:has(.rc-veil) .rcv-sec--stack .va__in::after { content: none; }
/* ピン留めの横送り（runtime ⑦ [data-rc-pin]。PC だけ .is-pin が付く）: 章の高さ ＝ 留まる面の高さ ＋ 送る距離、面は sticky、列は translate3d。本体サイト C案 bb-hscroll の移植。
   留まる面の余白は上 96 / 下 80。進捗の位置はスクロールに直結（遅れを足さない） */
[data-rc-pin].is-pin { height: var(--rcv-total, auto); padding-block: 0; }
[data-rc-pin].is-pin [data-rc-pin-sticky] { position: sticky; top: var(--rcv-top, 0px); padding-block: 128px 112px; overflow: hidden; }   /* 96 / 80 → 128 / 112（依頼側 2026-10-18「間をもう少し開ける」。768 高の画面でも面が収まる） */   /* padding-block だけ（.wrap の左右の余白を消さない） */
[data-rc-pin].is-pin [data-rc-pin-track] { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; }
[data-rc-pin].is-pin [data-rc-pin-track] > * { scroll-snap-align: none; }
[data-rc-pin].is-pin .rc-bar > span { transition: width 0.3s var(--cds-ease); }
.rc-bar { position: relative; height: 1px; margin-top: 48px; background: var(--cds-rule); overflow: visible; }
.rc-bar > span { position: absolute; left: 0; top: -1px; height: 3px; width: 30%; background: var(--cds-accent); transition: transform 0.15s linear, width 0.3s var(--cds-ease); }

/* ---------- ボタン（base.css .btn のピル）: 採用サイトは 14px / 700 / 0.08em、hover でアクセントに満ちる（§16 text color transition） ---------- */
.rc .btn { min-height: 56px; padding: 0 40px; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; }
.rc .btn--ghost::after { background: transparent; border-color: var(--cds-ink); border-width: 1.5px; }   /* 枠のピルの線は 1.5px（1px は細く、2px は太すぎた: 依頼側 2026-10-19） */
/* 枠のピルの hover: 墨で満たして文字を白に（base の hover は文字だけ白にするので、透明の枠の上で文字が消えていた: 依頼側 2026-10-18） */
@media (hover: hover) { .rc .btn--ghost:hover::after { background: var(--cds-ink); border-color: var(--cds-ink); } }
.rc .btn--s { min-height: 40px; padding: 0 24px; font-size: 13px; }
/* 主 CTA（行動の帯）: 64 / 15px / 0.12em、幅 300（C案のボタンより一段大きく。小さな白いピルは弱かった: 依頼側 2026-10-18） */
.rc .btn--l { min-height: 64px; min-width: 300px; padding: 0 56px; font-size: 15px; letter-spacing: 0.12em; }
/* テキストリンク（base .link: 文字 ＋ 20px の丸 ＋ ↗）: 採用サイトは 14 / 700 / 0.08em、丸は 24 */
.rc .link { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; gap: 10px; }
.rc .link .circ { width: 24px; height: 24px; }
.rc .link .circ svg { width: 7.5px; height: 7px; }
.rc .link .t { display: block; }

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .rc-head { gap: 10px; margin-bottom: 40px; }
  .rc-head--row { grid-template-columns: 1fr; }
  .rc-head--row > .rc-head__aside { grid-column: 1; grid-row: auto; padding: 8px 0 0; }
  .rc-title { font-size: 28px; }
  .rc-lead { font-size: 16px; }
  .rc-body { font-size: 15px; line-height: 1.9; }
  .rc-bar { margin-top: 32px; }
}

/* ボタンの文字ロール: 下で待つ 2 枚目の上端が 1 枚目の箱の下端と同じ小数 px にあり、上端の画素が 1 本の線として滲んでいた（ヘッダーの ENTRY の下に下線のように見えた: 依頼側 2026-10-19）。
   2 枚目を 3px 下で待たせ、hover では同じ 3px ぶん余分に上げる（見え方は変えない） */
.rc .btn .t.is-split > span + span { top: calc(100% + 3px); }
@media (hover: hover) { .rc .btn:hover .t.is-split > span + span .ch { transform: translateY(calc(-100% - 3px)); } }

/* ---------- [data-rc-morph] 円から角丸の四角へ（hello.ai の motion-image-active / inactive の実測 2026-10-19）----------
   画面に入ると 1s linear で 0%（透明・角丸 --mr0 の円・0.5 倍）→ 50%（不透明・--mr1・0.9 倍）→ 100%（角丸 --mr・等倍）、出ると逆。
   仕上がりの角丸 --mr は部品ごとに（既定 1.3889vw ＝ 1440 で 20。SP は 5.33vw）。runtime ⑩ が .is-on / .is-off を付け外す */
[data-rc-morph] { --mr: 1.38889vw; --mr0: 25vw; }
[data-rc-morph] .va { border-radius: var(--mr); }
/* ぎこちなさの原因: 3 段の keyframes は区間ごとにイージングが掛かり 50% で一度減速していた ＋ 大きな面の border-radius を毎フレーム描き直していた（依頼側 2026-10-19「ぎこちない。スムーズに」）。
   → 連続した 1 本の transition にし、角丸は clip-path: inset(0 round r) で切る（transform と clip-path だけが動く）。入り 0.9s / 出 0.5s、cubic-bezier(.16,1,.3,1) */
.is-js [data-rc-morph] .va { opacity: 0; transform: scale(0.5); clip-path: inset(0 round var(--mr0)); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.7, 0, 0.84, 0), clip-path 0.5s cubic-bezier(0.7, 0, 0.84, 0); will-change: transform, clip-path, opacity; }
.is-js [data-rc-morph].is-on .va { opacity: 1; transform: none; clip-path: inset(0 round var(--mr)); transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.is-static [data-rc-morph] .va { opacity: 1; transform: none; clip-path: none; transition: none; }
@media (max-width: 767px) { [data-rc-morph] { --mr: 5.33333vw; --mr0: 96vw; } }
@media (prefers-reduced-motion: reduce) { .is-js [data-rc-morph] .va { opacity: 1; transform: none; clip-path: none; transition: none; } }

/* VISUAL ASSETS の角丸をそろえる（依頼側 2026-10-19「visual assets、少しだけ他に合わせて角丸に」）: 面の写真・札は 12（募集要項・メンバーと同じ）。全面の面（va--fill）と、円 → 角丸の出現を持つ図（[data-rc-morph]）は除く */
.rc .va:not(.va--fill) { border-radius: 12px; }
.rc [data-rc-morph] .va { border-radius: var(--mr); }

/* 番号・英名は Inter（ベーシックでスタイリッシュな書体: 依頼側 2026-10-20）。Chillax の丸い数字から変更。数字は等幅 */
.rc { --rc-font-basic: "Poppins", "Noto Sans JP", sans-serif; }   /* Dinii と同じ Poppins */
.rcp__no, .rcv-card__no, .rcv__no { font-family: var(--rc-font-basic) !important; font-weight: 500 !important; letter-spacing: 0 !important; font-feature-settings: "tnum"; }
.rcv-card__en, .rcv__en, .rce__en { font-family: var(--rc-font-basic) !important; font-weight: 600 !important; letter-spacing: 0.06em !important; }

/* 地のうっすらした色（careers.dinii.jp のトーン: 依頼側 2026-10-20「白背景にうっすら色のついている仕様」）。
   Dinii は全面の WebGL で淡い色の雲を描く。ここは CSS で同じ見え: 白に近い地 ＋ 大きなぼかしの色 5 つ（左のミント、上のクリーム／ピーチ、右のラベンダー、左下の淡い黄、右上の水色）を固定で敷き、90s でゆっくり漂わせる。
   z −2（暗転の層 .rc-veil −1 より下）。章の地は透明なのでページ全体に乗る。淡い面の章（.sec--soft）も半透明にして透かす */
html:has(.rc-veil) { background: #fbfbfa; }
body:has(.rc-veil)::before { content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 42% at 8% 46%, rgba(186, 236, 214, 0.42) 0%, transparent 70%),
    radial-gradient(42% 34% at 52% 2%, rgba(255, 226, 204, 0.40) 0%, transparent 70%),
    radial-gradient(40% 46% at 94% 62%, rgba(226, 208, 246, 0.42) 0%, transparent 70%),
    radial-gradient(36% 38% at 14% 92%, rgba(250, 238, 196, 0.38) 0%, transparent 70%),
    radial-gradient(30% 32% at 88% 10%, rgba(206, 236, 246, 0.36) 0%, transparent 70%);
  filter: saturate(110%); animation: rcTint 90s ease-in-out infinite alternate; will-change: transform; }
@keyframes rcTint { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(2%, -2%, 0) rotate(6deg) scale(1.05); } 100% { transform: translate3d(-2%, 2%, 0) rotate(-4deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { body:has(.rc-veil)::before { animation: none; } }
.is-js .rc[data-rc-tone].is-toned:not([data-rc-tone="scrub"]), .is-static .rc[data-rc-tone]:not([data-rc-tone="scrub"]) { background-color: color-mix(in srgb, var(--cds-bg-soft) 55%, transparent); }
/* FV とステートメントも自分では地を塗らない（塗ると淡い色の地がそこだけ切れて境界線が出た） */
body:has(.rc-veil) .rcb--collage, body:has(.rc-veil) .rcs { background: transparent; }
/* 淡い面の章（カルチャーデック）も地を塗らない。淡い色の地が一続きに見え、章の上下に境界線が出ない（Dinii の地と同じ） */
body:has(.rc-veil) .rcd.sec--soft, body:has(.rc-veil) .is-js .rcd[data-rc-tone].is-toned, .is-js body:has(.rc-veil) .rcd[data-rc-tone].is-toned { background: transparent !important; }