/* ============================================================
   RECRUIT ページ固有のパーツ【2026-08-30】
   ------------------------------------------------------------
   ⚠ 試作。本番未反映。実行される JavaScript 0件。
   ⚠ 共通の Color / Typography / Header / Glass / Hero / 曲線 /
      Scroll reveal は ../v9-brand-base/base.css。
      ここには RECRUIT にしか出てこない形だけを書く。
   ⚠ base.css を書き換えない。書き換えると TOP / DELIVERY が動く。
   ⚠ 赤は使わない（ロゴを除く）。アクセントは Blue だけ。
   ============================================================ */

/* ---- 0. ページ全体の地 ---------------------------------------
   ⚠ 白い箱を縦に積まない。White ⇄ Light Blue が入れ替わるだけにする。 */
.flow{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,
    rgba(232,241,251,0) 0%, rgba(232,241,251,.50) 13%,
    rgba(234,242,252,.78) 46%, rgba(240,246,253,.86) 100%); }
.flow::before,
.flow::after{ content:""; position:absolute; pointer-events:none; z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(148,190,236,.30) 0%, rgba(148,190,236,0) 72%); }
.flow::before{ left:-18%; top:14%; width:min(880px,90%); height:760px; }
.flow::after { right:-20%; top:60%; width:min(940px,96%); height:820px; }
.flow > *{ position:relative; z-index:1; }

/* 中央そろえの見出し（見本と同じ） */
.hd-c{ text-align:center; }
.hd-c .lb{ justify-content:center; }
.hd-c .lb::before{ display:none; }
.hd-c .tx{ margin-inline:auto; max-width:720px; }

/* ---- 1. Hero の文字 ------------------------------------------
   ⚠ Hero の構造・動画・object-position は base.css のまま。触っていない。 */
.rh__tag{ display:inline-flex; align-items:center; gap:11px; align-self:flex-start;
  padding:12px 20px; border-radius:99px; line-height:1;
  background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.62);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, var(--sh-1);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.26em; color:var(--blue); }
.rh__tag::before{ content:""; width:22px; height:2px; background:var(--blue); }
.rh__lead{ margin-top:clamp(16px,2vw,22px); }
/* ⚠ 補足文は白文字だと映像の明るい所で沈む。白いガラス＋濃い文字にする */
.rh__sub{ display:inline-block; margin-top:clamp(16px,1.8vw,20px);
  padding:clamp(13px,1.4vw,17px) clamp(16px,1.7vw,22px); border-radius:var(--r-1);
  background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.62);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, var(--sh-1);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  color:#15304d; text-shadow:none; font-size:clamp(12.5px,1.15vw,15px); line-height:1.95; letter-spacing:.03em; }
.rh__sub span{ display:inline-block; }   /* ⚠ 語の途中で折らない */

/* ---- 2. 働く3つの理由 ---------------------------------------
   ⚠ 写真は使わない。⚠ カードを重く見せない。 */
.why__grid{ margin-top:clamp(40px,5.2vw,72px); display:grid; gap:clamp(16px,2vw,28px); }
@media(min-width:860px){ .why__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.rc{ padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,34px); border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 26px 60px -46px rgba(31,95,168,.5);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
.rc__hd{ display:flex; align-items:center; gap:14px; }
.rc__n{ font-family:var(--en); font-size:clamp(36px,4.2vw,52px); font-weight:800; line-height:1;
  letter-spacing:.02em; color:var(--blue); }
.rc__ic{ margin-left:auto; flex:none;
  width:clamp(46px,4.4vw,56px); height:clamp(46px,4.4vw,56px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,95,168,.07); border:1px solid rgba(31,95,168,.14); }
.rc__ic svg{ width:46%; height:46%; stroke:var(--blue); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rc__h{ margin-top:clamp(20px,2.2vw,28px);
  font-size:clamp(16.5px,1.6vw,20px); font-weight:700; line-height:1.65; letter-spacing:.01em; }
.rc__t{ margin-top:14px; font-size:clamp(13px,1.1vw,14px); line-height:2.1; color:#26303c; }
.rc__t + .rc__t{ margin-top:1.2em; }

/* ---- 3. 働く人を知る -----------------------------------------
   🛑 架空の社員・年齢・コメントを置かない（CLAUDE.md §1）。
      写真と本人の言葉が届くまで、役割だけ出して枠にしておく。
   ⚠ 実写と原稿が来たら .mb__slot / .mb__wait を消して入れ替えるだけ。 */
/* ⚠ 2026-09-01：お預かりした写真が2名分なので2枚並び。
   ⚠ 3枚のときの幅のままだと1枚が大きくなりすぎるので、読み幅を絞る。 */
.mb{ margin-top:clamp(30px,4vw,52px); display:grid; gap:clamp(14px,1.8vw,26px);
  max-width:840px; margin-inline:auto; }
@media(min-width:760px){ .mb{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mb__c{ overflow:hidden; border-radius:var(--r-2); display:flex; flex-direction:column;
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 24px 54px -40px rgba(31,95,168,.5);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
.mb__ph{ position:relative; aspect-ratio:4/3; background:var(--sky-2); }
.mb__badge{ position:absolute; left:14px; bottom:14px; z-index:2;
  padding:7px 15px; border-radius:99px; background:var(--blue); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  box-shadow:0 12px 26px -16px rgba(31,95,168,.9); }
.mb__bd{ padding:clamp(16px,1.8vw,22px); }
.mb__wait{ padding:14px 16px; border-radius:var(--r-1);
  border:1px dashed var(--line-blue); background:var(--blue-soft);
  font-size:12px; line-height:1.9; color:var(--blue); }

/* 3つの補足（見本の下段）*/
/* ⚠ 上の2枚と幅をそろえる。そろえないと下段だけ広くて段差に見える */
/* ⚠ 2026-09-01：3つのうち2つを削除したので、残り1つを中央に置く */
.mb3{ margin-top:clamp(16px,2vw,26px); display:grid; gap:clamp(10px,1.4vw,16px);
  max-width:min(100%,460px); margin-inline:auto; }
/* ⚠ 2026-09-01：中身が1つになったので3列指定は外した。
   ⚠ 3列のままだと1枚が約145pxまで潰れて、1文字ずつ改行された（実測）。 */
.mb3 > div{ display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:14px;
  padding:clamp(14px,1.6vw,20px) clamp(15px,1.7vw,22px); border-radius:var(--r-1);
  background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.86);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 16px 38px -34px rgba(31,95,168,.5);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
/* 🛑 確認が取れていない項目は、断定せずに枠だけ置く */
.mb3 > div.is-wait{ background:var(--blue-soft); border:1px dashed var(--line-blue); box-shadow:none; }
.mb3 svg{ grid-row:1 / span 2; width:26px; height:26px; margin-top:3px;
  stroke:var(--blue); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.mb3 b{ font-size:clamp(13.5px,1.15vw,15px); font-weight:700; line-height:1.6; }
.mb3 p{ margin-top:5px; font-size:12.5px; line-height:1.85; color:#26303c; }
.mb3 .is-wait b, .mb3 .is-wait p{ color:var(--blue); }

/* ---- 4. 最後の導線 ------------------------------------------
   ⚠ 旧「1日の流れ」の指定（.tl / .note）は 2026-08-30 に削除した。
      セクションごと DELIVERY へ寄せたため、ここには残さない。
   ⚠ 見本と同じく Blue。⚠ 赤いボタンにしない。 */
.fin{ position:relative; overflow:hidden; border-radius:var(--r-3);
  box-shadow:0 30px 70px -48px rgba(31,95,168,.75); }
.fin img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 56%; }
.fin::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(15,58,110,.86) 0%, rgba(31,95,168,.72) 46%, rgba(47,122,209,.40) 100%); }
.fin__in{ position:relative; z-index:2; padding:clamp(30px,4.4vw,60px) clamp(22px,4vw,64px);
  display:grid; gap:clamp(20px,2.6vw,40px); align-items:center; }
@media(min-width:860px){ .fin__in{ grid-template-columns:minmax(0,1fr) auto; } }
.fin__h{ font-size:clamp(21px,2.8vw,34px); font-weight:700; line-height:1.5; color:#fff;
  text-shadow:0 2px 18px rgba(10,32,64,.35); }
.fin__h span{ display:inline-block; }
.fin__t{ margin-top:14px; font-size:clamp(12.5px,1.1vw,14.5px); line-height:1.95; color:rgba(255,255,255,.92); }
.fin__b{ display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
  padding:clamp(16px,1.7vw,20px) clamp(24px,2.6vw,34px); border-radius:99px;
  background:#fff; color:var(--blue); font-size:clamp(13.5px,1.2vw,15px); font-weight:700; letter-spacing:.04em;
  box-shadow:0 18px 40px -26px rgba(6,26,54,.9);
  transition:transform .3s var(--ease), background .3s var(--ease); }
.fin__b:hover{ transform:translateY(-2px); background:#f2f8ff; }
.fin__b i{ font-style:normal; position:relative; width:20px; height:1px; background:currentColor; }
.fin__b i::after{ content:""; position:absolute; right:0; top:-3px; width:6px; height:6px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
@media (prefers-reduced-motion: reduce){ .fin__b:hover{ transform:none; } }

/* ⚠ SP で「1日の流れ（例：ドライバー）」が「ドライバ／ー）」と
   語の途中で折れた（実測）。⚠ 括弧の中は塊のまま折り返す。 */
.hd-c .h2 em{ display:inline-block; }

/* ⚠ SP の Hero【実測して調整】-------------------------------
   ⚠ 動画の車は SP では x199〜365 / y427〜下 に出る（実測）。
      base.css の下そろえのままだと、見出しとガラスが車の上に重なった。
      ⚠ 車の上に見出し・サブコピーを1pxも重ねない（TOP と同じ決まり）。
      → SP だけ上そろえにして、車より上へ逃がす。 */
@media(max-width:767px){
  .hero__ui{ justify-content:flex-start;
    padding-top:calc(var(--h) + 14px);
    padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .rh__tag{ padding:10px 17px; font-size:10.5px; }
  .rh__sub{ padding:12px 15px; font-size:12px; line-height:1.8; }
}

/* お名前。⚠ 年齢・役割は未確認なので出さない */
.mb__nm{ font-size:clamp(17px,1.7vw,20px); font-weight:700; letter-spacing:.03em; }
.mb__nm + .mb__wait{ margin-top:12px; }

/* ---- 求人情報【2026-09-01】-------------------------------------
   ⚠ 値は delivery.html ④募集要項と同じもの。片方だけ直さない。 */
.info{ max-width:840px; margin-inline:auto;
  padding:clamp(20px,2.6vw,40px) clamp(20px,2.6vw,44px); border-radius:var(--r-3);
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 30px 70px -50px rgba(31,95,168,.55);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
.info .dl{ border-top:none; }
.info .dl > div:first-child{ padding-top:0; }
.info .dl > div:last-child{ border-bottom:none; padding-bottom:0; }
.info .dl dd small{ color:var(--ink-mute); line-height:1.85; }

/* コメント（社長承認済み・2026-09-01）*/
.mb__cm{ margin-top:12px; font-size:clamp(13px,1.1vw,14px); line-height:2.05; color:#26303c; }

/* 2026-09-17: recruitment facts and application path before the longer story. */
.hero, .hero__ui { min-height: max(460px, 62svh); }
.hero__ui { padding-bottom: 100px; }
.recruit-start { padding: 64px var(--pad) 36px; }
.recruit-start h2 { margin-top: 14px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.6; }
.recruit-start__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.recruit-start__facts > div { background: #fff; border: 1px solid #dce7f4; border-radius: 14px; padding: 18px; }
.recruit-start__facts dt { font-size: 12px; color: #546a82; }
.recruit-start__facts dd { margin-top: 5px; font-size: 16px; font-weight: 600; }
.recruit-start__facts strong { color: #205f9f; font-size: 23px; }
.recruit-start__facts small { font-size: 11px; white-space: nowrap; }
.recruit-start__note { font-size: 12px; color: #546a82; margin-top: 14px; }
.recruit-start__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 24px; }
.recruit-start__actions a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; color: #205f9f; font-size: 14px; }
.recruit-start__actions .recruit-start__apply { background: #205f9f; color: #fff; padding: 12px 32px; border-radius: 30px; }
.recruit-start__actions a:focus-visible { outline: 3px solid #205f9f; outline-offset: 4px; }
@media(min-width:1000px) { .recruit-start__facts { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:430px) { .recruit-start__facts > div { padding: 14px 12px; } .recruit-start__facts dd { font-size: 14px; } .recruit-start__actions { flex-direction: column; align-items: stretch; gap: 8px; } }

/* Recruitment hero: video and editorial content occupy separate document rows. */
.hero { display: flex; flex-direction: column; min-height: 0; background: #f3f7fc; }
.hero__bg { position: relative; inset: auto; height: clamp(280px, 43vw, 560px); flex: none; }
.hero__fade { display: none; }
.hero__ui { display: block; width: 100%; min-height: 0; padding: 36px var(--pad) 44px; }
.hero__col { width: 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 48px; }
.rh__tag { grid-column: 1 / -1; justify-self: start; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.rh__lead { color: #15304d; text-shadow: none; margin-top: 16px; }
.rh__sub { margin-top: 16px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 15px; line-height: 2; }
.hero + .joint { margin-top: 0; border-radius: 0; }
.recruit-start { padding-top: 28px; }
@media(max-width:767px) {
  .hero__col { grid-template-columns: minmax(0, 1fr); }
  .hero__ui { padding-top: 28px; padding-bottom: 32px; }
  .rh__sub { font-size: 14px; }
}

/* 2026-09-21: separate job terms and online interview process. */
.job-info{margin-top:24px;scroll-margin-top:100px}
.job-info h3{font-size:clamp(20px,2vw,26px);line-height:1.6;color:#15304d}
.job-info__intro{margin:16px 0 24px;font-size:15px;line-height:1.9}
.interview-flow ol{padding-left:22px;margin-top:20px}
.interview-flow li{padding:8px 0;line-height:1.9}
.interview-flow li p{font-size:14px}