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

/* ---- 0. ページ全体の地 --------------------------------------
   ⚠ 白い箱を縦に積まない。Hero の下から最後まで、
      1枚の面の中で White ⇄ Light Blue が入れ替わるだけにする。 */
.flow{ position:relative; overflow:hidden; }
/* 薄い青の光を2つだけ置く。⚠ 増やすと画面が濁る */
.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:16%;  width:min(880px,90%); height:760px; }
.flow::after { right:-20%; top:58%; width:min(940px,96%); height:820px; }
.flow > *{ position:relative; z-index:1; }

/* ⚠ 地は白一色にしない。見本と同じく、ごく薄い Light Blue の面の上に
   白いガラスの板が乗っている状態にする。 */
.flow{ 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%); }

/* 板。⚠ 不透明な白い箱にしない。ガラスにして、地の青をわずかに通す */
.panel{ border-radius:var(--r-3); padding:clamp(24px,3.2vw,52px);
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 30px 70px -48px rgba(31,95,168,.55);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }

/* 面の切り替え。⚠ 境界を直線で見せない（上下を透明へ抜く） */
.band{ position:relative; }
.band::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(238,244,251,0) 0%, rgba(238,244,251,.72) 22%,
    rgba(238,244,251,.72) 78%, rgba(238,244,251,0) 100%); }

/* ---- 1. Hero ------------------------------------------------
   ⚠ Hero の構造・動画・object-position は base.css のまま。
      DELIVERY で足すのは、ラベルと本文の並びだけ。 */
.dh__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); }
.dh__tag::before{ content:""; width:22px; height:2px; background:var(--blue); }
.dh__lead{ margin-top:clamp(16px,2vw,22px); }
.dh__sub{ margin-top:16px; max-width:34em; }

/* ---- 2. 配達エリア ------------------------------------------
   ⚠ 2026-08-30：地図イラスト・エリアを囲う図形・重なる装飾はすべて削除した。
      分かりにくかったため、エリア名のタグ一覧だけで見せる。
   🛑 .map / .map__in / .map__svg / .pin の指定はもう無い。復活させない。 */
.area{ margin-top:clamp(18px,2.2vw,26px); }
.area .h2{ margin-top:0; }

.chips{ margin-top:clamp(22px,2.6vw,32px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(9px,1.1vw,14px); }
@media(max-width:479px){ .chips{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:900px){ .chips{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.chip{ display:flex; align-items:center; justify-content:center; gap:8px;
  padding:clamp(14px,1.5vw,18px) 10px; border-radius:99px; text-align:center;
  background:rgba(255,255,255,.86); border:1px solid rgba(31,95,168,.20);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 14px 32px -26px rgba(31,95,168,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:clamp(13px,1.15vw,15px); font-weight:700; letter-spacing:.02em; line-height:1.3; }
/* ⚠ 図形ではなく、タグの前に置く小さな点だけ。囲みは作らない */
.chip::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--blue-lit); }

/* ---- 3. 勤務時間 --------------------------------------------
   ⚠ 「拘束時間」とは書かない。⚠ 断定しない。あくまで目安。 */
.tl{ margin-top:clamp(26px,3.2vw,40px); display:grid; }
@media(min-width:768px){ .tl{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(6px,1vw,14px); } }
.tl__i{ position:relative; text-align:center; }
.tl__t{ font-family:var(--en); font-size:clamp(13px,1.2vw,15px); font-weight:700;
  letter-spacing:.04em; color:var(--blue); line-height:1.4; }
.tl__ic{ margin:clamp(10px,1.2vw,14px) auto 0;
  width:clamp(46px,4.4vw,60px); height:clamp(46px,4.4vw,60px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); border:1px solid rgba(31,95,168,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 16px 34px -24px rgba(31,95,168,.7); }
.tl__ic svg{ width:46%; height:46%; stroke:var(--blue); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tl__n{ margin-top:12px; font-size:clamp(14px,1.3vw,16.5px); font-weight:700; letter-spacing:.03em; }
.tl__d{ margin-top:7px; font-size:clamp(11.5px,1vw,12.5px); line-height:1.8; color:#26303c; }

/* つなぎの線（PC は横）⚠ 最後の1つには引かない */
@media(min-width:768px){
  .tl__i::after{ content:""; position:absolute; z-index:-1;
    /* 時刻の1行ぶん＋余白＋円の半径 ＝ 円の中心 */
    top:calc(1.4em + clamp(10px,1.2vw,14px) + clamp(23px,2.2vw,30px));
    left:calc(50% + clamp(30px,2.8vw,38px)); right:calc(-50% + clamp(30px,2.8vw,38px));
    height:1px; background:linear-gradient(90deg, rgba(31,95,168,.30), rgba(31,95,168,.18)); }
  .tl__i:last-child::after{ display:none; }
  .tl__i::before{ content:""; position:absolute; z-index:-1;
    top:calc(1.4em + clamp(10px,1.2vw,14px) + clamp(20px,2.2vw,27px));
    left:calc(100% - 3px); width:6px; height:6px; border-radius:50%;
    background:rgba(31,95,168,.34); }
  .tl__i:last-child::before{ display:none; }
}
/* SP は縦。⚠ 無理に横へ並べない */
@media(max-width:767px){
  .tl__i{ display:grid; grid-template-columns:clamp(46px,13vw,54px) minmax(0,1fr);
    column-gap:16px; text-align:left; padding-bottom:26px; }
  .tl__ic{ grid-column:1; grid-row:1 / span 3; margin:0; width:clamp(46px,13vw,54px); height:clamp(46px,13vw,54px); }
  .tl__t,.tl__n,.tl__d{ grid-column:2; }
  .tl__n{ margin-top:2px; }
  .tl__i::after{ content:""; position:absolute; z-index:-1;
    left:calc(clamp(46px,13vw,54px) / 2); top:clamp(46px,13vw,54px); bottom:4px; width:1px;
    background:linear-gradient(180deg, rgba(31,95,168,.30), rgba(31,95,168,.12)); }
  .tl__i:last-child{ padding-bottom:0; }
  .tl__i:last-child::after{ display:none; }
}
.note{ margin-top:clamp(18px,2vw,26px); font-size:12px; line-height:1.9; color:var(--ink-mute); }

/* ---- 4. 案件内容 -------------------------------------------- */
.jobs{ margin-top:clamp(26px,3.2vw,42px); display:grid; gap:clamp(14px,1.8vw,24px); }
@media(min-width:860px){ .jobs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.job{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-2);
  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 -38px rgba(31,95,168,.55);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
/* ⚠ 3枚とも同じ大きさ。写真の比率も同じにする */
.job__ph{ position:relative; aspect-ratio:16/10; background:var(--sky-2); overflow:hidden; }
.job__ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.job__bd{ padding:clamp(16px,1.8vw,22px); }
.job__h{ display:flex; align-items:center; gap:11px; }
.job__h svg{ flex:none; width:clamp(20px,2vw,24px); height:clamp(20px,2vw,24px);
  stroke:var(--blue); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.job__h b{ font-size:clamp(15px,1.4vw,18px); font-weight:700; letter-spacing:.02em; }
.job__t{ margin-top:10px; font-size:clamp(12.5px,1.05vw,13.5px); line-height:1.95; color:#26303c; }

/* ---- 5. 案件の特徴 ------------------------------------------
   ⚠ 補足。ここを主役にしない。カードを増やさない。 */
.feat{ margin-top:clamp(22px,2.6vw,32px); display:grid; gap:clamp(10px,1.4vw,16px); }
@media(min-width:860px){ .feat{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.feat > 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); }
.feat 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; }
.feat b{ font-size:clamp(13.5px,1.15vw,15px); font-weight:700; letter-spacing:.02em; line-height:1.6; }
.feat p{ margin-top:5px; font-size:12.5px; line-height:1.85; color:#26303c; }

/* ---- 6. RECRUIT への導線 ------------------------------------
   ⚠ ここは「お問い合わせ」ではない。募集ページへ渡すだけ。 */
.rec{ position:relative; overflow:hidden; border-radius:var(--r-3);
  box-shadow:0 30px 70px -48px rgba(31,95,168,.75); }
.rec img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 56%; }
.rec::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(15,58,110,.88) 0%, rgba(31,95,168,.74) 46%, rgba(47,122,209,.42) 100%); }
.rec__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){ .rec__in{ grid-template-columns:minmax(0,1fr) auto; } }
.rec__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); }
.rec__t{ margin-top:14px; font-size:clamp(12.5px,1.1vw,14.5px); line-height:1.95;
  color:rgba(255,255,255,.92); }
.rec__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); }
.rec__b:hover{ transform:translateY(-2px); background:#f2f8ff; }
.rec__b i{ font-style:normal; position:relative; width:20px; height:1px; background:currentColor; }
.rec__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){ .rec__b:hover{ transform:none; } }

/* ---- 1''. Hero の背景【2026-08-30 動画 → 静止画】-----------
   ⚠ 動画（lq-hero-journey.mp4）は TOP 専用にした。DELIVERY では使わない。
   ⚠ DELIVERY の Hero は静止画1枚で成立させる。
      明るい住宅地の道＋黒い LQ 車両＝地域密着・実務が伝わる絵。
      🛑 みなとみらいの絵にしない（TOP と同じ見え方になるため）。
   ⚠ 実写が届いたら <img> の src と --pos / --pos-pc を直すだけでよい。 */
.hero__media{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
@media(min-width:768px){ .hero__media{ object-position:var(--pos-pc,var(--pos,50% 50%)); } }

/* ⚠ 静止画なので明るさが動かない。⚠ 空の明るい側へ文字を置き、
   TOP の白文字ではなく濃紺にする。見本の DELIVERY と同じ見せ方。
   ⚠ 車の上には1pxも重ねない。車は画面の中央〜下にいるので、文字は上へ寄せる。 */
.hero__ui{ justify-content:flex-start !important;
  padding-top:calc(var(--h) + clamp(26px,6vh,72px)); }
.dh__lead{ color:#0f2b4a; text-shadow:0 2px 20px rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.5); }

/* ---- 1'. Hero の文字の位置と読みやすさ【実測して調整】-------
   ⚠ TOP は下端に4ボタンがあるので base.css の下余白はボタン用の数値。
      DELIVERY にはボタンが無く、その数値のままだと補足文が
      .hero__fade（下端の白いにじみ）へ入り込んで読めなかった。
      ⚠ 白い膜を足して解決しない。文字の位置を上へ逃がす。 */
@media(min-width:768px){
  .hero__ui{ padding-bottom:calc(clamp(170px,24vh,260px) + env(safe-area-inset-bottom)); }
}
/* ⚠ 補足文は白文字だと沈む。⚠ 影を濃くしても、みなとみらいの水面のように
   明るい場所では読めない（実測）。⚠ 映像へ黒い膜を敷いて解決しない。
   → TOP の4ボタンと同じ「白いガラス＋濃い文字」にする。
     ガラスなので、映像が明るくても暗くても読める。 */
.dh__sub{ display:inline-block; margin-top:clamp(16px,1.8vw,20px);
  padding:clamp(12px,1.3vw,15px) 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; line-height:1.85; letter-spacing:.03em; }
/* ⚠ 語の途中で折らない。塊ごとに inline-block にして、切れ目を句読点だけにする */
.dh__sub span{ display:inline-block; }


/* ⚠ 静止画にしたら Hero の上部が明るい空になり、
   base.css の白いヘッダー文字が飛んで読めなくなった（実測）。
   ⚠ 黒い帯を敷いて解決しない。⚠ このページだけ濃紺にする。
   ⚠ ロゴの Q（赤）とお問い合わせボタン（青のガラス）はそのまま。 */
.hd__logo{ color:#0f2b4a; text-shadow:0 2px 16px rgba(255,255,255,.85); }
.hd__nav a, .hd__nav span{ color:#0f2b4a; text-shadow:0 2px 14px rgba(255,255,255,.9); }

/* ⚠ 地図を消して配達エリアの板が低くなったぶん、
   下の余白が空きすぎて見えた（実測）。⚠ 板と板の間だけ詰める。
   ⚠ セクションの左右余白と読み幅は変えない。 */
#area{ padding-bottom:clamp(34px,4.4vw,64px); }
#hours{ padding-top:clamp(34px,4.4vw,64px); }