/* =============================================================
   recruit-reel.css — 採用ページだけ（2026-10-14 第3段）
   既定（JSなし・動きを減らす設定）：写真の格子＋名前の帯＋大きな文字（静止）
   .is-reel（JS が付ける）：画面を止めて、写真が3Dに傾きながら流れる
   ============================================================= */
.rc-reel { position: relative; background: var(--black); border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); overflow: clip; }
.rc-head { width: 90%; max-width: var(--container); margin: 0 auto; padding: 96px 0 40px; }
.rc-head h2 { font-family: var(--font-serif-ja); font-weight: 300; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: .08em; line-height: 1.55; color: var(--white); margin: 0 0 12px; }
.rc-head p { color: var(--gray-light); font-size: 15px; line-height: 1.9; margin: 0; }
.rc-frame { position: relative; }
.rc-cards { list-style: none; margin: 0 auto; padding: 0 0 48px; width: 90%; max-width: var(--container); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.rc-card { position: relative; margin: 0; background: var(--black-card); border: 1px solid var(--gold-border); border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 5; }
.rc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-card.is-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px;
  background: radial-gradient(circle at 50% 36%, rgba(201,168,76,.16), transparent 62%), var(--black-card); }
.rc-card.is-face img { width: 56%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--gold-border); object-fit: cover; }
.rc-card .rc-nick { font-family: var(--font-serif-ja); font-size: 18px; letter-spacing: .1em; color: var(--gold-light); }
.rc-card .rc-nm { font-size: 13px; letter-spacing: .14em; color: var(--gray-light); }
.rc-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-size: 13px; letter-spacing: .08em; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.rc-card figcaption span { display: block; font-family: var(--font-label); font-size: 10px; letter-spacing: .3em; color: var(--gold); margin-bottom: 4px; }
.rc-names { position: relative; overflow: hidden; white-space: nowrap; padding: 14px 0; border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); }
.rc-names-track { display: inline-block; font-family: var(--font-serif-ja); font-weight: 300; font-size: clamp(22px, 3vw, 40px); letter-spacing: .12em; color: var(--gold-light); will-change: transform; }
.rc-names-track i { font-style: normal; color: var(--gold-dark); margin: 0 .8em; }
.rc-giant { overflow: hidden; white-space: nowrap; padding: 24px 0 8px; }
.rc-giant-track { display: inline-block; font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(64px, 12vw, 190px); line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.32); will-change: transform; }
.rc-giant-track b { font-weight: 300; color: rgba(201,168,76,.14); -webkit-text-stroke: 0; font-family: var(--font-serif-ja); }
.rc-note { width: 90%; max-width: var(--container); margin: 0 auto; padding: 12px 0 40px; font-size: 12px; color: var(--gray); }

/* ---------- 流れる形 ---------- */
.rc-reel.is-reel { height: 360vh; }
.rc-reel.is-reel .rc-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rc-reel.is-reel .rc-head { position: absolute; z-index: 3; left: max(5vw, calc((100vw - var(--container)) / 2)); top: calc(var(--nav-h) + 3vh); width: auto; max-width: 420px; padding: 0; margin: 0; pointer-events: none; }
.rc-reel.is-reel .rc-frame { position: absolute; inset: 0; perspective: 1200px; perspective-origin: 50% 50%; }
.rc-reel.is-reel .rc-cards { position: absolute; inset: 0; width: auto; max-width: none; padding: 0; display: block; transform-style: preserve-3d; }
.rc-reel.is-reel .rc-card { position: absolute; top: 0; left: 50%; width: clamp(200px, 21vw, 300px); margin-left: calc(clamp(200px, 21vw, 300px) / -2); will-change: transform, opacity; backface-visibility: hidden; }
.rc-reel.is-reel .rc-names { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); background: rgba(10,10,10,.55); backdrop-filter: blur(2px); pointer-events: none; }
.rc-reel.is-reel .rc-giant { position: absolute; z-index: 1; left: 0; right: 0; bottom: 2vh; pointer-events: none; }
.rc-reel.is-reel .rc-note { position: absolute; z-index: 3; right: 5vw; bottom: 2.5vh; left: auto; width: auto; padding: 0; }
@media (max-width: 760px) {
  .rc-reel.is-reel { height: 420vh; }
  .rc-reel.is-reel .rc-card { width: 58vw; margin-left: -29vw; }
  .rc-reel.is-reel .rc-head { right: 6vw; max-width: none; }
  .rc-reel.is-reel .rc-head p { display: none; }
  .rc-reel.is-reel .rc-note { left: 6vw; right: 6vw; bottom: calc(1.5vh + 64px); }
  .rc-reel.is-reel .rc-giant { bottom: 70px; }
}
/* スマホ：見出しの後ろに暗い帯（流れてくる写真と文字が重ならないように） */
@media (max-width: 760px) {
  .rc-reel.is-reel .rc-head { left: 0; right: 0; top: 0; padding: calc(var(--nav-h) + 16px) 6vw 40px;
    background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a 72%, rgba(10,10,10,0) 100%); }
}

.rc-reel.is-reel .rc-frame { z-index: 1; }
.rc-reel.is-reel .rc-names { z-index: 4; background: rgba(10,10,10,.82); }
.rc-reel.is-reel .rc-head { z-index: 5; }
.rc-reel.is-reel .rc-note { z-index: 5; background: rgba(10,10,10,.85); padding: 4px 10px; }
@media (max-width: 760px) {
  .rc-reel.is-reel .rc-giant { bottom: calc(64px + 44px); }
  .rc-reel.is-reel .rc-note { left: 0; right: 0; bottom: 64px; text-align: center; }
}