/* ══════════════════════════════════════════════
   求人ページ専用スタイル
   ・common.css を読み込んだ「後」に読むこと
   ・すべての指定が .recruit-page の中だけに効くので、
     トップページや他のページには影響しない
   ・色は common.css の配色を参照している
   ══════════════════════════════════════════════ */

/* ── メインビジュアルの写真 ──────────────────────
   写真を替えるときは、下の4行のファイル名だけ差し替える。
   置き場所： /assets/img/recruit/

     hero-1  バギーの横を歩いて案内するスタッフ
     hero-2  バギーの前で盛り上がるお客様
     hero-3  森を走るバギーの一団
     hero-4  泥だらけで笑うお客様

   ★いまは全点がトップページの写真の流用（仮）。
     スタッフが写っている写真に差し替えたい。           */
.recruit-page .mv .slide.s1{background-image:url("../img/recruit/hero-1.jpg");background-image:image-set(url("../img/recruit/hero-1.webp") type("image/webp"),url("../img/recruit/hero-1.jpg") type("image/jpeg"))}
.recruit-page .mv .slide.s2{background-image:url("../img/recruit/hero-2.jpg");background-image:image-set(url("../img/recruit/hero-2.webp") type("image/webp"),url("../img/recruit/hero-2.jpg") type("image/jpeg"))}
.recruit-page .mv .slide.s3{background-image:url("../img/recruit/hero-3.jpg");background-image:image-set(url("../img/recruit/hero-3.webp") type("image/webp"),url("../img/recruit/hero-3.jpg") type("image/jpeg"))}
.recruit-page .mv .slide.s4{background-image:url("../img/recruit/hero-4.jpg");background-image:image-set(url("../img/recruit/hero-4.webp") type("image/webp"),url("../img/recruit/hero-4.jpg") type("image/jpeg"))}

.recruit-page .mv .slide.s1{background-position:50% 45%}
.recruit-page .mv .slide.s2{background-position:55% 40%}
.recruit-page .mv .slide.s3{background-position:55% 50%}
.recruit-page .mv .slide.s4{background-position:50% 40%}

/* ── 見出しの中で色を変える文字 ────────────────── */
.recruit-page .mv-copy h1 em,
.recruit-page .sec-title em,
.recruit-page .book h2 em{font-style:normal;color:var(--mud)}

/* ── 本文中で目立たせる文字 ────────────────── */
.recruit-page .lede b,
.recruit-page .qa .a p b{font-weight:700;color:var(--sand)}

/* ══════════════════════════════════════════════
   冒頭「働く場所」
   広い画面： 左に大きな見出し／右に説明
   ══════════════════════════════════════════════ */
.recruit-page #about .panel__body{
  padding-top:clamp(40px,6.5vw,104px);
  padding-bottom:clamp(40px,6.5vw,104px);
}
.recruit-page #about .sec-title{
  font-size:clamp(2.6rem,8vw,6rem);
  line-height:1.06;letter-spacing:-.03em;
  max-width:none;margin:0 0 1.6rem;
}
.recruit-page #about .sec-title em{display:block}
.recruit-page #about .lede{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:36em}
.recruit-page #about .lede + .lede{margin-top:1rem}
@media(min-width:1000px){
  .recruit-page #about .panel__body{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    column-gap:clamp(32px,4.5vw,86px);align-items:start;
  }
  .recruit-page #about .sec-title{grid-column:1;grid-row:1 / span 8;align-self:center;margin:0}
  .recruit-page #about .lede,
  .recruit-page #about .btnrow{grid-column:2}
  .recruit-page #about .btnrow{margin-top:1.4rem}
}

/* ── 裏方の仕事（写真3枚を横並び） ─────────── */
.recruit-page .strip{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.recruit-page .strip{grid-template-columns:repeat(3,1fr)}}
.recruit-page .strip figure{margin:0;background:var(--ink)}
.recruit-page .strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.recruit-page .strip figcaption{
  padding:.8rem 1rem;font-size:.9rem;color:#B2B0A5;line-height:1.7}
.recruit-page .strip figcaption b{
  display:block;font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mud-lt);font-weight:700;margin-bottom:.2rem}

/* ── 1日の流れ ────────────────────────────── */
.recruit-page .flow{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:640px){.recruit-page .flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.recruit-page .flow{grid-template-columns:repeat(5,1fr)}}
.recruit-page .flow .st{background:var(--ink);padding:clamp(18px,2.2vw,26px)}
.recruit-page .flow .no{
  font-family:"Anton",sans-serif;font-size:2.1rem;line-height:1;
  color:var(--mud);letter-spacing:.02em;display:block;margin-bottom:.5rem}
.recruit-page .flow .t{font-weight:900;font-size:1.05rem;margin:0 0 .5rem;line-height:1.6}
.recruit-page .flow .d{margin:0;font-size:.92rem;color:#B2B0A5;line-height:1.85}
.recruit-page .flow .time{
  display:inline-block;margin-top:.7rem;
  font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  color:var(--moss);text-transform:uppercase}

/* ── 向いている人／覚悟してほしいこと ─────── */
.recruit-page .kit{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.recruit-page .kit{grid-template-columns:repeat(2,1fr)}}
.recruit-page .kit .col{background:var(--ink);padding:clamp(18px,2.4vw,28px)}
.recruit-page .kit h3{
  font-family:"Roboto Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mud-lt);margin:0 0 1rem}
.recruit-page .kit ul{list-style:none;margin:0;padding:0}
.recruit-page .kit li{position:relative;padding:.45rem 0 .45rem 1.4em;font-size:.96rem;line-height:1.8}
.recruit-page .kit li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--mud)}
.recruit-page .kit li small{display:block;font-size:.85rem;color:#B2B0A5;line-height:1.75}

/* ── 募集要項 ─────────────────────────────── */
.recruit-page #terms .tbl th{width:9.5em;white-space:nowrap}
.recruit-page #terms .tbl td{line-height:1.8}
.recruit-page .terms-note{margin:1.2rem 0 0;font-size:.88rem;color:#B2B0A5;line-height:1.85}

/* ★未確定の項目。中身が決まったら <span class="tbd"> ごと書き換える。
   本番公開前に、このページから .tbd が1つも無くなっていること。 */
.recruit-page .tbd{
  display:inline-block;padding:.05em .55em;
  border:1px dashed var(--mud);color:var(--mud-lt);
  font-size:.86em;line-height:1.6}

/* 見出し「まわりませんか。」が狭い画面で1文字だけ次の行へ落ちないよう、
   スマホでは文字を少し小さくして、1行に収める */
@media(max-width:600px){
  .recruit-page .mv-copy h1{font-size:10.4vw}
  .recruit-page .mv-copy h1 em{white-space:nowrap}
}