/* cta-photo-recruit — 全幅の写真 ＋ 平らな暗幕 ＋ 中央の文字。高さ 72svh（min 520 / max 760） */
/* 文字は左下（写真 ＋ 暗幕 ＋ 中央揃え ＋ 枠のボタンは「型そのもの」: design-critic 2026-10-18）。暗幕は 46%、ボタンは白の塗り */
.rcc { position: relative; display: grid; align-items: end; min-height: clamp(560px, 76svh, 800px); padding: 120px 0 96px; color: #fff; background: var(--cds-text); overflow: hidden; }
.rcc__media { position: absolute; inset: 0; }
.rcc__media .va__label { display: none; }
.rcc__media .va__in { background: color-mix(in srgb, var(--cds-text) 86%, var(--cds-bg)); }
.rcc__media img { object-position: center top; }   /* 上寄せ: 富士山の頂上を切らない（依頼側 2026-10-19） */
/* 暗幕は置かない（依頼側 2026-10-19「写真の色味が綺麗に見えるように半調にしない。そのまま綺麗な色のまま」）。白い文字は薄い影だけで読ませる */
.rcc__veil { display: none; }
.rcc__ttl, .rcc__txt { text-shadow: 0 1px 28px rgba(13, 13, 14, 0.35), 0 0 2px rgba(13, 13, 14, 0.2); }
/* 写真の出現: 1.06 → 1 を 2s（画面に入った瞬間）。transition は .va__in に */
.is-js .rcc .va__in { transform: scale(1.06); transition: transform 2s var(--cds-ease); }
.is-js .rcc.is-inview .va__in { transform: none; }
.is-static .rcc .va__in { transform: none; }
.rcc__in { position: relative; z-index: 1; width: 100%; }   /* grid の子なので幅を明示（無いと中身の幅に縮んで中央に寄った） */
.rcc__box { margin-inline: max(0px, calc((100% - var(--cds-content)) / 2)) 0 !important; }
.rcc__box { display: grid; justify-items: start; gap: 24px; max-width: 760px; margin-inline: 0; text-align: left; }
.rcc__ttl { font-size: clamp(28px, 3.0556vw, 44px); font-weight: var(--cds-weight-head); line-height: 1.4; letter-spacing: 0.04em; color: #fff; font-feature-settings: "palt"; }
.rcc__txt { font-size: 15px; line-height: 2; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.86); }
.rcc__cta { margin-top: 12px; }
.rcc__cta .btn--l { min-width: 300px; }
@media (max-width: 767px) {
  .rcc { min-height: 520px; padding: 88px 0 64px; }
  .rcc__box { gap: 16px; }
  .rcc__ttl { font-size: 26px; }
  .rcc__txt { font-size: 14px; }
  .rcc__txt br { display: none; }
  .rcc__cta .btn--l { min-width: 0; width: min(320px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .is-js .rcc .va__in { transform: none; transition: none; } }

/* ---------- layout=sky（Figma 33:3772「最終CTA」の実測 2026-10-19）----------
   1440×533（--u で縮む、min 460）。写真は幅いっぱい、縦は元画像の 52 / 1365 から（object-position 8%）。暗幕・グラデ・影なし
   文字は墨: 見出し 700 / 40 / lh 60 / ls 2.4px、本文 400 / 14 / lh 29.4 / ls 0.84px。見出し → 15 → 本文 → 46 → ピル。塊の上 57（--u） */
.rcc--sky { --u: calc(min(100vw, 1440px) / 1440); display: block; min-height: 0; height: max(460px, calc(var(--u) * 533)); padding: calc(var(--u) * 56) 0 0; color: var(--cds-text); background: #14161a; }
.rcc--sky .rcc__media img { object-position: center 8%; }
.rcc--sky .rcc__ttl, .rcc--sky .rcc__txt { text-shadow: none; color: #0d0d0e; }
.rcc--sky .rcc__box { gap: 0; max-width: none; }
.rcc--sky .rcc__ttl { font-size: clamp(28px, 2.7778vw, 40px); font-weight: 700; line-height: 1.5; letter-spacing: 0.06em; }
/* 見出しと本文はひとつの塊（間 14、本文の行送り 1.9）、ピルは 56 空けて別の塊に（依頼側 2026-10-19「少し上に上げる。チャンク化」: 上 57 → 40） */
.rcc--sky .rcc__txt { margin-top: 14px; font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; color: #0d0d0e; }
.rcc__ctas { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 56px; }
/* ピル（依頼側 2026-10-19「ボタンのデザインだけ、インタラクション含めて品質を上げる」）: 54 高、角丸 999、左右 26、文字と矢印は両端。
   ENTRY: 白の地に墨。hover で差し色（#00A9AD）が左から満ち（0.6s expo）、文字と矢印は白に。
   説明会に申し込む: すりガラス（白 8% ＋ blur 10）に白 45% の 1px 枠。hover で白が左から満ち、文字と矢印は墨に。
   矢印は 12 角の SVG ↗ を 2 枚重ね、hover で 1 枚目が右上へ抜け 2 枚目が左下から入る（0.5s）。押下で 0.98 */
.rcc-pill { --e: cubic-bezier(0.19, 1, 0.22, 1); position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; height: 54px; padding: 0 26px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color 0.5s var(--e), border-color 0.5s var(--e), transform 0.3s var(--e); -webkit-tap-highlight-color: transparent; }
.rcc-pill__fill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--e); }
.rcc-pill__t { position: relative; line-height: 1; }
.rcc-pill__a { position: relative; display: block; flex: none; width: 12px; height: 12px; overflow: hidden; }
.rcc-pill__a svg { position: absolute; inset: 0; transition: transform 0.5s var(--e); }
.rcc-pill__a svg + svg { transform: translate(-130%, 130%); }
.rcc-pill--fill { min-width: 202px; background: #fff; color: #0d0d0e; font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 15px; font-weight: 500; letter-spacing: 0.12em; box-shadow: 0 10px 30px -14px rgba(13, 13, 14, 0.35); }
.rcc-pill--fill .rcc-pill__fill { background: var(--cds-accent); }
.rcc-pill--fill .rcc-pill__t { top: 1px; }   /* Chillax は字面が上に寄るので、和文のピルと天地をそろえる */
.rcc-pill--line { min-width: 201px; color: #fff; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }   /* 中の塗りは目立たせない（白 8% ＋ blur 10 → 3% ＋ blur 4: 依頼側 2026-10-19） */
.rcc-pill--line .rcc-pill__fill { background: #fff; }
.rcc-pill:active { transform: scale(0.98); }
.rcc-pill:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 3px; }
@media (hover: hover) {
  .rcc-pill:hover .rcc-pill__fill { transform: scaleX(1); }
  .rcc-pill:hover .rcc-pill__a svg { transform: translate(130%, -130%); }
  .rcc-pill:hover .rcc-pill__a svg + svg { transform: none; }
  .rcc-pill--fill:hover { color: #fff; }
  .rcc-pill--line:hover { color: #0d0d0e; }
}
@media (prefers-reduced-motion: reduce) { .rcc-pill, .rcc-pill__fill, .rcc-pill__a svg { transition: none; } }
@media (max-width: 767px) {
  /* SP: 文字は空の上、富士山は文字の下から（依頼側 2026-10-19「文字が読めない。富士山に文字がかからないように」）。
     章の地は写真の空と同じ青（上 #6cbafa → #8fcdf5）にし、写真は章の 46% から下に置いて上端を地へ溶かす（mask 0 → 24%）。ピルは写真の上 */
  .rcc--sky { height: auto; min-height: 0; padding: 40px 0 340px; background: linear-gradient(180deg, #6cbafa 0%, #8fcdf5 60%); }
  .rcc--sky .rcc__media { top: auto; bottom: 0; height: 52%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%); }
  .rcc--sky .rcc__media img { object-position: 50% 0%; }
  .rcc--sky .rcc__ttl { font-size: 26px; }
  .rcc--sky .rcc__txt { font-size: 13px; line-height: 2; }
  .rcc__ctas { margin-top: 32px; gap: 12px; }
  .rcc-pill { height: 50px; }
}