/* ============================================================
   Recruit — page-specific layout
   Depends on style.css (variables, fonts, .mono, .page-hero,
   .vqa, .vlinks, .cta). Light sections on mercury ground.
   ============================================================ */

.rec{max-width:1920px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--frame) 0}
.rec-intro{max-width:none;padding-bottom:clamp(2rem,4vw,3.2rem)}
.rec-intro p{font-weight:400;font-size:clamp(16px,1.7vw,22px);line-height:1.85;color:var(--blue);white-space:nowrap}
@media(max-width:900px){.rec-intro p{white-space:normal}}

.rec-label{color:var(--blue);margin-bottom:2rem;display:block}

/* job cards — reuse the Interview card design (.ivx-card in style.css) */
.rec-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.6rem);
  padding-bottom:clamp(3rem,6vw,5rem)}
@media(max-width:900px){.rec-jobs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.rec-jobs{grid-template-columns:1fr}}

/* requirements strip (navy band) */
.rec-req{background:var(--blue);color:var(--mercury);padding:clamp(4rem,8vw,7rem) var(--frame)}
/* 2 columns: left = label / right = cards (same split as the FAQ) */
.rec-req-in{max-width:1920px;margin:0 auto;display:grid;grid-template-columns:.20fr .80fr;
  gap:clamp(2rem,5vw,5rem);align-items:start}
.rec-req-in>.mono{color:rgba(232,230,224,.7);margin-bottom:0;display:block;position:sticky;top:110px}
.rec-req-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem}
@media(max-width:720px){
  .rec-req-in{grid-template-columns:1fr;gap:1.8rem}
  .rec-req-in>.mono{position:static}
  .rec-req-grid{grid-template-columns:1fr;gap:1.8rem}
}
.rec-req-card{border-top:1px solid rgba(232,230,224,.4);padding-top:1.3rem}
.rec-req-card h3{font-weight:400;font-size:clamp(18px,1.9vw,25px);margin-bottom:.9rem;letter-spacing:-.01em}
.rec-req-card p{color:rgba(232,230,224,.9)}

/* selection flow — numbered steps */
.rec-flow{max-width:1920px;margin:0 auto;padding:clamp(4.5rem,9vw,8rem) var(--frame)}
.rec-flow-label{color:var(--blue);margin-bottom:2.6rem;display:block}
.rec-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media(max-width:860px){.rec-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.rec-steps{grid-template-columns:1fr}}
.rec-step{border-top:1px solid var(--blue);padding-top:1.1rem;position:relative}
.rec-step-no{font-family:var(--font-m);font-size:.78rem;color:var(--blue);display:block;margin-bottom:.8rem}
.rec-step h3{font-weight:400;font-size:clamp(15px,1.6vw,19px);letter-spacing:-.01em;line-height:1.35}
.rec-step p{font-size:.82rem;line-height:1.7;color:#5a5a66;margin-top:.5rem}
.rec-flow-note{max-width:none;margin-top:2.4rem;font-size:clamp(14px,1.4vw,16px);
  line-height:1.8;color:var(--blue)}
.rec-flow-casual{display:inline-block;margin-top:1.2rem;font-family:var(--font-m);font-size:.74rem;
  letter-spacing:.04em;color:var(--blue);border:1px solid var(--blue);padding:.55rem 1rem}

/* Recruit cards: "エントリーはこちら" label sits left of the arrow */
.rec-jobs .ivx-arw{display:flex;justify-content:flex-end;align-items:center;gap:.9rem}
.rec-jobs .ivx-arw-t{font-family:var(--font-ja);text-transform:none;letter-spacing:.02em;font-size:.82rem;opacity:.9}

/* ===== iPad extension: safe mobile refinements up to 1080px ===== */
/* 募集職種カードの1カラム化(.rec-jobs)は除外 — iPadは複数カラム維持 */
@media(max-width:1080px){
  .rec-req-in{grid-template-columns:1fr;gap:1.8rem}
  .rec-req-in>.mono{position:static}
  .rec-req-grid{grid-template-columns:1fr;gap:1.8rem}
}