/* _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; }
.rc-label { font-family: var(--cds-font-en); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cds-text-secondary); }   /* PCI の ed-label と同じ段（14 / 500 / 0.14em） */
.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; }

/* ---------- 行の出現（見出し）: .line がマスク、.line__in が 100% 下から上がる。傾けない（Master Prompt §15: 文字が飛び回る演出は禁止） ---------- */
.rc-lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.rc-lines .line__in { display: block; }
.is-js .rc-lines .line > .line__in[data-reveal] { opacity: 0; transform: translate3d(0, 100%, 0); transition: transform 0.9s var(--cds-ease) calc(var(--cds-delay-reveal) + var(--i, 0) * 0.12s), opacity 0.6s var(--cds-ease) calc(var(--cds-delay-reveal) + var(--i, 0) * 0.12s); }
.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; }

/* ---------- ブロックの出現: 透明度 ＋ 16px（§15 基本）。Heading / Body / Image で尺を変える（§15） ---------- */
.is-js .sec [data-reveal="up"]:not(.line__in) { transform: translateY(16px); transition-duration: var(--cds-dur-fade), var(--cds-dur-reveal); }
.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; }
.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); }
.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; }
}