/* ============================================================
   運送・物流テンプレート — site.css
   アカツキ運輸マスター(Claude Design確定版)のデザイントークンを移植。

   **運送・物流**(一般貨物輸送・チャーター便・倉庫保管)のコーポレート。
   マスターは固定幅1440pxのキャンバス出力(全スタイルがインライン属性)
   だったため、見た目を1:1で保ったままレスポンシブに組み直している。
   1440px幅での見えはマスターと同一。1200 / 1024 / 768 / 640px で段階的に畳む。

   色・字送り・余白・角丸の数値はマスターからそのまま持ってきた値。
   勝手に変えないこと(デザイン課 CLAUDE.md 参照)。

   **このテンプレートの骨格は「濃紺の地 × 特大の欧文」**。
   ヒーローの RUN BEYOND(172px)と区切りの BEYOND LOGISTICS(210px)が
   世界観そのものなので、**狭い画面でも小さくまとめない**
   (下の --fs-hero-en / --fs-divider-en の max() を参照)。
   角丸は**全要素0px**。トラックと鉄の世界なので丸みを足さないこと。
   仕切りは製菓の波でもモノ系の斜め切りでもなく、**地色の切り替えだけ**。
   ============================================================ */

:root {
  /* ブランド ─ build.py が企業ごとに上書きできる。
     運送は**濃紺の地 + スチールブルー + 差し色1色**。
     濃紺が地、スチールブルーが小さい文字とラベル、差し色がCTA */
  --navy:        #0B1622;  /* ページの地色・ヘッダー */
  --steel:       #7A99B8;  /* ラベル・サブ文字・罫 */
  --accent:      #1B4B7A;  /* CTA・番号・矢印 */
  --surface:     #F4F6F8;  /* MESSAGE・CONTACT の明るい面 */

  /* ↓ build.py が上の4色から作る派生色。brief には書かない */
  --navy-deep:   #08111B;  /* フッター */
  --navy-panel:  #12202E;  /* ヒーローの下地・採用カード */
  --navy-band:   #0F1D2B;  /* NUMBERS の帯 */
  --navy-type:   #16283A;  /* 特大タイポの塗り(地色より一段明るい) */
  --steel-deep:  #4A6E8A;  /* 明るい面の上の小さいラベル */
  --accent-hover:#2A6299;
  --navy-rgb:    11,22,34;
  --steel-rgb:   122,153,184;

  /* 文字 */
  --white:       #FFFFFF;
  --text-body:   #33475A;  /* 明るい面の本文 */
  --text-hero:   #E7EDF3;  /* ヒーローのサブコピー */
  --text-lead:   #9FB5C9;  /* 濃紺の上の本文 */
  --text-lead2:  #B7C7D6;  /* 濃紺の上のリード文(一段明るい) */
  --text-link:   #C4D2DE;  /* フッターのリンク */
  --text-addr:   #8399AC;  /* フッターの住所 */
  --text-meta:   #5A7189;  /* コピーライト・注記 */
  --nav-link:    #D7E0E8;  /* ヘッダーのナビ */

  --font-en: 'Bebas Neue', 'Oswald', sans-serif;
  --font-ja: 'Noto Sans JP', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* **角丸は0**。マスターは全要素とも直角 */
  --radius: 0px;

  /* セクション左右パディング(マスターは全セクション48px) */
  --gutter: clamp(20px, 3.4vw, 48px);

  /* ヘッダーの高さ。**ドロワーの top と動画ヒーローの引き上げ量が
     この値に連動している**ので、高さを変えるときは必ずここを変える */
  --header-h: 76px;

  /* ── 特大欧文のスケール ────────────────────────────────
     **max() を挟んでいるのが肝。** clamp() だけだと 11.95vw が下限に
     当たった時点で「画面は狭いのに文字はそこそこ」という中途半端な
     大きさで止まり、マスターの大胆さが死ぬ(依頼時の指摘そのもの)。
     max(clamp(…), min(N vw, 上限)) にすると、狭い画面では vw の強い側
     (26vw / 21vw)が勝って**画面幅に対する占有率を保ったまま**縮む。
     二つの式は交差点(hero=約1105px / divider=約960px)で入れ替わるので
     値は単調増加のまま。逆転もジャンプもしない。

     係数の根拠: Bebas Neue の大文字は1文字あたり約0.44em。
       hero "BEYOND"(6字) → 2.64em。375px端末の可視域335pxに
                            収めるには 127px まで。26vw=97.5px で余裕
     **文字数の多い欧文を入れるときはこの計算をやり直すこと。**
     check_logistics が hero_en 8字で警告を出す。

     **区切り(--fs-divider-en)は max() を持たない。** 2026-08-09 に
     マーキー(流れる帯)へ変えたので、はみ出しようがなくなったため
     (文字数が増えれば帯が長くなるだけ)。素の clamp で足りる。 */
  --fs-hero-en:    max(clamp(76px, 11.95vw, 172px), min(26vw, 132px));
  --fs-divider-en: clamp(88px, 14.58vw, 210px);

  /* セクション見出しの欧文(MESSAGE / SERVICE / …)。76px */
  --fs-section-en: clamp(42px, 5.28vw, 76px);
}

/* ── リセット ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ja);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd { margin: 0; }

/* マスターの1440px固定キャンバス。これより広い画面では中央寄せになる */
.page {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--navy);
  overflow-x: clip;
}

/* ── 画像スロット ─────────────────────────────────────────
   build.py の slot() が吐く。写真が無い枠はハッチングのまま出す
   (推測で埋めない方針。デザイン課 CLAUDE.md 参照)。
   マスターの .phl(明るい面)/ .ph(濃紺の上)に対応する */
.slot {
  position: relative;
  background: repeating-linear-gradient(135deg, #DDE3E9 0 10px, #D3DAE1 10px 20px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.slot-dark {
  background: repeating-linear-gradient(135deg, #2A3A4A 0 10px, #243343 10px 20px);
}
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-label {
  padding: 12px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .08em;
  color: #6C8199;
}
.slot-dark .slot-label { color: #8FA8BF; }
.slot-wrap { display: flex; flex-direction: column; }
.slot-wrap .slot { flex: 1; }
.slot-note {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-meta);
}

/* ── ボタン ─────────────────────────────────────────────
   マスターは全部**直角の箱**。矢印は Bebas Neue の → */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 30px;
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--white); }
.btn .arw { font-family: var(--font-en); font-size: 18px; }

.btn-outline { background: transparent; border-color: var(--steel); }
.btn-outline:hover { background: var(--steel); color: var(--navy); }

/* ── ヘッダー ───────────────────────────────────────────
   マスターは sticky の半透明ぼかし。ヒーローの上に重なる */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: rgba(var(--navy-rgb), .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--steel-rgb), .18);
}

.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-name {
  font-family: var(--font-en);
  font-size: 30px;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}
.brand-sub {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--steel);
  white-space: nowrap;
}

/* マスターは CTA も <nav> の中。**ドロワーにしたときCTAも一緒に畳める**ので
   この入れ子は崩さないこと(外に出すと狭い画面でCTAだけ行き場を失う) */
.site-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.site-nav a {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--nav-link);
  transition: color .2s ease;
}
.site-nav a:hover { color: var(--steel); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  background: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--white);
  transition: background .2s ease;
}
.nav-cta:hover { background: var(--accent-hover); color: var(--white); }
.nav-cta .arw { font-family: var(--font-en); font-size: 16px; }

/* ハンバーガー。1024px 以下でだけ出る。
   **JSは使わない**(他テンプレも site.css だけで完結している)。
   隠しチェックボックスの :checked を後続の兄弟へ流す形にしてあるので、
   .nav-check → .site-nav → .nav-toggle の**並び順を変えないこと**。 */
.nav-check { display: none; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(var(--steel-rgb), .32);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 4px auto;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-check:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-check:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-check:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 01 ヒーロー ────────────────────────────────────────
   マスターは 820px の箱に映像を敷き、左下に特大欧文。
   hero_type: video のときはモジュール(hero.css)が 100svh に張り替える */
/* z-index を .hero の中に閉じ込める(建設・モノ系と同じ作り)。
   .hero-visual には z-index を付けない ─ 付けると .svh の中の層が
   .hero-veil より上に来られなくなる */
.hero {
  position: relative;
  z-index: 0;
  height: 820px;
  overflow: hidden;
  background: var(--navy-panel);
}

.hero-visual { position: absolute; inset: 0; z-index: 0; }

/* 静止フォールバック(hero_type: photo / 動画到着前 / reduced-motion)。
   写真が無ければ濃紺のグラデーションで出る。素材ゼロでも黒く抜けない */
.hero-still {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 62% 40%, #1D3348 0%, var(--navy-panel) 58%, var(--navy) 100%);
}
.hero-still.has-image {
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* マスターの上下グラデーション。**文字の可読性はこの層が持つ** */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(var(--navy-rgb), .55) 0%,
    rgba(var(--navy-rgb), .10) 35%,
    rgba(var(--navy-rgb), .75) 100%);
  pointer-events: none;
}

.hero-body {
  position: absolute;
  left: var(--gutter);
  bottom: 64px;
  z-index: 4;
  width: min(720px, calc(100% - var(--gutter) * 2));
}

.hero-en {
  font-family: var(--font-en);
  font-size: var(--fs-hero-en);
  line-height: .82;
  letter-spacing: .01em;
  color: var(--white);
}

.hero-catch {
  margin-top: 28px;
  font-size: clamp(17px, 1.53vw, 22px);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text-hero);
  text-wrap: pretty;
}

.hero-lead {
  margin-top: 14px;
  font-size: 13px;
  line-height: 2;
  font-weight: 300;
  color: var(--text-lead);
  text-wrap: pretty;
}

/* 縦書きの SCROLL。マスターは右下 */
.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 64px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  font: 400 11px var(--font-mono);
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .65);
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, .5);
}

/* ── セクションの共通 ─────────────────────────────────── */

.section { padding: 120px var(--gutter) 128px; }
.section-surface { background: var(--surface); color: var(--navy); }
.section-white { background: var(--white); color: var(--navy); }

/* 見出し = 特大欧文 + 日本語の添え字。全セクション共通の作り */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.section-en {
  font-family: var(--font-en);
  font-size: var(--fs-section-en);
  line-height: .9;
  letter-spacing: .02em;
}
.section-ja {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--steel-deep);
}
.section-navy .section-en { color: var(--white); }
.section-navy .section-ja { color: var(--steel); }

/* ── 02 MESSAGE ────────────────────────────────────────── */

#message .section-head { margin-bottom: 56px; }

.message {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 72px;
  align-items: start;
}

.message h2 {
  margin: 0 0 32px;
  font-size: clamp(24px, 2.36vw, 34px);
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: .02em;
  text-wrap: pretty;
}
.message p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 2.2;
  font-weight: 300;
  color: var(--text-body);
  text-wrap: pretty;
}
.message p:last-of-type { margin-bottom: 40px; }

.message-sign { display: flex; align-items: center; gap: 16px; }
.message-sign .slot { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.message-sign .slot-label { display: none; }
.sign-title { font-size: 11px; letter-spacing: .16em; color: var(--steel-deep); }
.sign-name {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .06em;
}

/* 写真タイル。マスターは3列 × 172px行の変則グリッド
   1枚目が2×2、2・3枚目が右列、4枚目が左下、5枚目が右下2枠ぶん */
.message-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 172px;
  gap: 12px;
}
/* **`.slot` を直接の子に保つこと。** build.py の slot() は注記を渡すと
   `.slot-wrap` で包むので、nth-child が当たらずグリッドが1段ずれる
   (2026-08-09 に実測)。注記はタイルの下に1本だけ出す作りにしてある */
.message-tiles .slot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.message-tiles .slot:nth-child(5) { grid-column: span 2; }

/* セクション末尾の「※写真はイメージです」。タイルの直下に置く */
.section-note { margin-top: 12px; }

/* ── 03 特大タイポの区切り(流れる帯) ─────────────────────
   **このセクションがテンプレートの世界観の芯**。
   2026-08-09 にゆい氏指示で 2行組み → **1行が右から左へ流れるマーキー**へ。
   セクションの高さも欧文1行ぶんまで詰めてある。

   同時に**1語目を中抜き・最後の語を塗り**にした。元は1語目が
   地色に近い塗り(--navy-type)で、**背景に埋もれて読めなかった**。
   中抜きも塗りも色は同じ --steel。**1語目を塗りへ戻さないこと。** */
.divider {
  position: relative;
  background: var(--navy);
  padding: clamp(16px, 1.8vw, 26px) 0;
  overflow: hidden;
}
/* 左からの淡い光。マスターは 60% で透明になる指定だったが、
   帯を1行ぶん(232px)まで詰めたら**落ちきる位置が縦の帯として見えた**
   (高さがあった頃はグラデーションの面積が広く、気づかない falloff だった)。
   幅いっぱいまで伸ばして見える境目を消してある(2026-08-09) */
.divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(27, 75, 122, .35), rgba(var(--navy-rgb), 0) 100%);
}

.marquee { position: relative; overflow: hidden; }

/* **track の中身は同じものが3つ。** -33.3333% まで動かすと1つぶん流れた
   時点で先頭に戻るので継ぎ目が出ない。**数を減らすと1周ごとに空白が横切る。**
   3つなのは「1つぶんが画面幅の半分を超えていれば必ず埋まる」から
   (2つだと1つぶんが画面幅を超える必要があり、1440pxの実測で余裕11pxしか
   無かった。build.py の build_log_marquee 参照)。
   移動量は**割合**なので、文字数が変わっても速さの体感は変わらない */
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mq-scroll var(--mq-duration, 34s) linear infinite;
}
@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

.marquee__item {
  display: flex;
  align-items: baseline;
  gap: clamp(28px, 4vw, 72px);
  padding-right: clamp(28px, 4vw, 72px);
  white-space: nowrap;
}

.mq-en {
  font-family: var(--font-en);
  font-size: var(--fs-divider-en);
  line-height: .86;
  letter-spacing: .01em;
  color: var(--steel);
}
/* 中抜き。線幅は文字サイズに追随させる(固定pxだと大きい側で細く見える) */
.mq-outline {
  color: transparent;
  -webkit-text-stroke: max(1.2px, .012em) var(--steel);
}
.mq-solid { color: var(--steel); }

.mq-sub {
  font-size: clamp(11px, .9vw, 13px);
  letter-spacing: .34em;
  color: var(--steel-deep);
}

/* 動きを抑制している環境では止める(帯そのものは残す) */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ── 04 SERVICE ────────────────────────────────────────── */

#service .section-head { margin-bottom: 20px; }
.service-lead {
  margin: 0 0 56px;
  font-size: 15px;
  line-height: 2;
  font-weight: 300;
  color: var(--text-body);
  text-wrap: pretty;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service .slot { height: 280px; }
.service-code {
  margin-top: 24px;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--accent);
}
.service h3 {
  margin: 10px 0 14px;
  font-size: clamp(19px, 1.67vw, 24px);
  font-weight: 500;
  letter-spacing: .04em;
}
.service p {
  margin: 0;
  font-size: 14px;
  line-height: 2.05;
  font-weight: 300;
  color: var(--text-body);
  text-wrap: pretty;
}

/* ── 05 NUMBERS ────────────────────────────────────────── */

.numbers-band {
  background: var(--navy-band);
  padding: 104px var(--gutter);
}
.numbers-band .section-head { margin-bottom: 64px; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); }
.number { padding: 0 32px; border-right: 1px solid rgba(var(--steel-rgb), .22); }
.number:first-child { padding-left: 0; }
.number:last-child { padding-right: 0; border-right: 0; }

.number-label { font-size: 12px; letter-spacing: .2em; color: var(--steel); }
.number-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.number-value .num {
  font-family: var(--font-en);
  font-size: clamp(58px, 7.22vw, 104px);
  line-height: 1;
  color: var(--white);
}
.number-value .unit { font-size: 18px; color: var(--text-lead); }

/* ── 06 COMPANY ────────────────────────────────────────── */

#company .section-head { margin-bottom: 48px; }

.company-links { border-top: 1px solid rgba(var(--navy-rgb), .14); }
.company-link {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 34px 8px;
  border-bottom: 1px solid rgba(var(--navy-rgb), .14);
  transition: background .2s ease;
}
.company-link:hover { background: var(--surface); color: inherit; }
.company-link .no {
  font-family: var(--font-en);
  font-size: 34px;
  color: var(--steel);
  width: 56px;
  flex: none;
}
.company-link .title {
  font-size: clamp(19px, 1.81vw, 26px);
  font-weight: 500;
  letter-spacing: .06em;
  width: 280px;
  flex: none;
}
.company-link .desc {
  flex: 1;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-body);
}
.company-link .arw {
  font-family: var(--font-en);
  font-size: 26px;
  color: var(--accent);
  flex: none;
}

/* ── 07 RECRUITING ─────────────────────────────────────── */

.recruit {
  position: relative;
  background: var(--navy);
  padding: 120px var(--gutter) 130px;
  overflow: hidden;
}
/* 背後に流れる中抜きの RECRUITING。マスターは右へはみ出している */
.recruit-type {
  position: absolute;
  right: -40px;
  top: 64px;
  font-family: var(--font-en);
  font-size: clamp(96px, 13.2vw, 190px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--steel-rgb), .16);
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
}
.recruit-inner { position: relative; }
.recruit .section-head { margin-bottom: 24px; }
.recruit-lead {
  margin: 0 0 64px;
  max-width: 660px;
  font-size: 15px;
  line-height: 2.2;
  font-weight: 300;
  color: var(--text-lead2);
  text-wrap: pretty;
}

.jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.job {
  background: var(--navy-panel);
  border: 1px solid rgba(var(--steel-rgb), .2);
}
.job .slot { height: 260px; }
.job-body { padding: 40px 40px 44px; }
.job-code {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--steel);
}
.job h3 {
  margin: 10px 0 18px;
  font-size: clamp(22px, 2.08vw, 30px);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--white);
}
.job p {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 2.05;
  font-weight: 300;
  color: var(--text-lead);
  text-wrap: pretty;
}
.job-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--steel-rgb), .18);
}
.job-row { display: flex; gap: 20px; font-size: 13px; color: var(--text-lead2); }
.job-row dt { width: 88px; flex: none; color: var(--steel); }
.job-row dd { margin: 0; }
.job .btn { margin-top: 32px; }

/* ── 08 CONTACT ────────────────────────────────────────── */

.contact {
  background: var(--surface);
  color: var(--navy);
  padding: 112px var(--gutter);
}
.contact-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
}
.contact .section-head { margin-bottom: 24px; }
.contact h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  letter-spacing: .04em;
  text-wrap: pretty;
}
.contact-lead {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  font-weight: 300;
  color: var(--text-body);
  text-wrap: pretty;
}

.contact-right { display: flex; align-items: flex-end; gap: 40px; }
.tel-label { font-size: 12px; letter-spacing: .2em; color: var(--steel-deep); }
.tel-num {
  display: block;
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: clamp(34px, 4.45vw, 64px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--navy);
  white-space: nowrap;
}
.tel-note { margin-top: 8px; font-size: 12px; color: var(--text-meta); }

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 72px;
  padding: 0 44px;
  /* CONTACT の主CTA。**差し色で塗る**。
     以前は地色の濃紺で、hover で初めて差し色になっていたが、
     ヘッダーの `.nav-cta` と採用の `.btn` が差し色なのに、
     一番押させたいここだけ色が違って見えた(2026-08-12 ゆい氏指摘)。
     **サイト内のCTAは全部 --accent に揃える。濃紺へ戻さないこと。** */
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: background .2s ease;
}
.btn-contact:hover { background: var(--accent-hover); color: var(--white); }
.btn-contact .arw { font-family: var(--font-en); font-size: 20px; }

/* ── フッター ───────────────────────────────────────────── */

.site-footer { background: var(--navy-deep); padding: 72px var(--gutter) 40px; }

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(var(--steel-rgb), .16);
}
.footer-logo {
  font-family: var(--font-en);
  font-size: 38px;
  letter-spacing: .06em;
  color: var(--white);
  line-height: 1;
}
.footer-name { margin-top: 8px; font-size: 12px; letter-spacing: .16em; color: var(--steel); }
.footer-addr {
  margin-top: 24px;
  font-size: 12px;
  line-height: 2.1;
  font-weight: 300;
  color: var(--text-addr);
}

.footer-cols { display: flex; gap: 80px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col-head {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--steel-deep);
}
.footer-col a { font-size: 13px; font-weight: 300; color: var(--text-link); }
.footer-col a:hover { color: var(--steel); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  font-size: 11px;
  color: var(--text-meta);
}
.footer-credit {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-meta);
}
.footer-credit a { text-decoration: underline; }

/* ============================================================
   レスポンシブ
   1440px の見えはマスターと同一。ここから下は畳み方の定義。
   ============================================================ */

/* ── 1200px: 2カラムの左右比を詰める ───────────────────── */
@media (max-width: 1200px) {
  .section { padding: 100px var(--gutter) 104px; }
  .message { grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; }
  .message-tiles { grid-auto-rows: 148px; }
  .site-nav { gap: 24px; }
  .company-link { gap: 28px; }
  .company-link .title { width: 220px; }
  .footer-cols { gap: 48px; }
  .job-body { padding: 32px 32px 36px; }
}

/* ── 1024px: 2カラムを解体。ナビをドロワーへ ─────────────── */
@media (max-width: 1024px) {
  .nav-toggle { display: block; }

  /* ドロワー。ヘッダーの下に落ちる。**ヒーローより上(z-index 50 の中)** */
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(var(--navy-rgb), .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(var(--steel-rgb), .18);
  }
  .nav-check:checked ~ .site-nav { display: flex; }
  .site-nav a {
    padding: 16px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(var(--steel-rgb), .12);
  }
  .site-nav a:last-child { border-bottom: 0; }

  /* ドロワーの中では CTA を全幅の帯にする。
     `.site-nav a`(0,1,1)より詳細度が高い(0,2,0)ので上の指定を上書きする */
  .site-nav .nav-cta {
    justify-content: center;
    margin-top: 16px;
    height: 52px;
    padding: 0 24px;
    border-bottom: 0;
  }

  .message { grid-template-columns: 1fr; gap: 56px; }
  .message-tiles { grid-auto-rows: minmax(0, 1fr); aspect-ratio: 16 / 9; }

  .jobs { grid-template-columns: 1fr; }
  .contact-in { flex-direction: column; align-items: flex-start; gap: 44px; }
  .contact-right { width: 100%; justify-content: space-between; }
}

/* ── 768px: ヒーローのモバイル節。hero.js の判定と同じ値 ────
   **640px ではなく 768px。** hero.js は max-width:768px をモバイル
   (軽い抽出予算・切り出し幅の縮小)と見なすので、ここを 640 にすると
   641〜768px(iPad縦・iPhone横持ち)だけ別レイアウトが残る。
   **hero.js の判定とこの値は必ず揃える。**

   ヒーローを 100svh にして .hero-visual を全面に敷くのはモジュール側
   (modules/scroll-video-hero/hero.css)が持つ。ここはテンプレート固有の層。

   **このテンプレートはスマホでも全面 cover。** 介護・建設の
   「56svh の映像パネル + 下端固定カード」は採らない ─ あちらは
   白カードがヒーロー下端に居座る作りで、パネルの下に余る地色を
   カードで埋める必要があった。運送のヒーローは**カードを持たず
   文字が映像に直接乗る**ので、パネル化すると文字の下に濃紺の板が
   出るだけになる(製菓・モノ系・動物病院と同じ判断)。 */
@media (max-width: 768px) {
  .site-header { --header-h: 64px; }
  .brand-name { font-size: 24px; }
  .brand-sub { font-size: 10px; letter-spacing: .16em; }

  .hero { height: 640px; }

  /* 動画ヒーローのスマホは「映像パネル56svh + 下のテキスト層」。
     枠とベールを揃える指定はこのファイル末尾の
     「スマホ縦持ちの映像パネル」節が持つ(モジュールの hero.css より
     後勝ちにする必要があるため、詳細度を上げてそこにまとめてある)。
     **ベールを映像の枠と別々に動かさないこと**(映像の上に地色の板が乗る) */

  .hero-body { bottom: 48px; }
  .hero-catch { margin-top: 20px; }
  .hero-scroll { display: none; }

  .section { padding: 76px var(--gutter) 80px; }
  .numbers-band { padding: 72px var(--gutter); }
  .recruit { padding: 76px var(--gutter) 84px; }
  .contact { padding: 72px var(--gutter); }
  .site-footer { padding: 56px var(--gutter) 32px; }

  /* 帯が短くなるぶん、同じ速さだと流れが遅く見える。尺を詰める */
  .marquee__track { --mq-duration: 22s; }
  .mq-sub { letter-spacing: .24em; }

  .recruit-type { display: none; }

  .footer-top { flex-direction: column; gap: 40px; }
  .footer-cols { gap: 40px; flex-wrap: wrap; }
}

/* ── 640px: 1カラムへ ─────────────────────────────────── */
@media (max-width: 640px) {
  .section-head { gap: 12px; }
  .section-ja { font-size: 12px; letter-spacing: .14em; }

  /* MESSAGE の写真タイルは**2列**。1枚目だけ全幅、あとは2枚ずつ2段 */
  .message-tiles {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 132px;
    aspect-ratio: auto;
  }
  /* 1枚目は全幅 × 2行ぶん(276px)の大判のまま。**height で伸ばさないこと** ─
     grid-auto-rows(132px)を超えたぶんが次の行に重なる(2026-08-09 に実測) */
  .message-tiles .slot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .message-tiles .slot:nth-child(5) { grid-column: auto; }

  .message p { font-size: 14.5px; line-height: 2.05; }

  /* SERVICE の3カードは縦積み */
  .services { grid-template-columns: 1fr; gap: 40px; }
  .service .slot { height: 220px; }

  /* NUMBERS は2×2。縦罫を横罫に置き換える */
  .numbers { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .number { padding: 0 20px; }
  .number:nth-child(odd) { padding-left: 0; }
  .number:nth-child(even) { padding-right: 0; border-right: 0; }
  .number-label { font-size: 11px; letter-spacing: .16em; }
  .number-value .unit { font-size: 15px; }

  /* COMPANY の4行は縦積み。番号 + 見出しを1行、説明を2行目に */
  .company-link {
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    gap: 8px 16px;
    padding: 24px 4px;
    align-items: center;
  }
  /* **4つとも配置を明示すること。** 自動配置に任せると矢印が2段目の
     左端(番号の下)へ回り込む(2026-08-09 に実測) */
  .company-link .no { grid-area: 1 / 1; font-size: 26px; width: auto; }
  .company-link .title { grid-area: 1 / 2; width: auto; }
  .company-link .arw { grid-area: 1 / 3; font-size: 22px; }
  .company-link .desc { grid-area: 2 / 2 / 3 / 4; font-size: 13px; line-height: 1.9; }

  .job .slot { height: 200px; }
  .job-body { padding: 28px 24px 32px; }
  .job-row { gap: 12px; font-size: 12.5px; }
  .job-row dt { width: 74px; }

  .contact-right { flex-direction: column; align-items: flex-start; gap: 28px; }
  .btn-contact { height: 60px; padding: 0 28px; font-size: 14px; }

  .footer-cols { gap: 28px 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── 横持ち(高さが低い) ─────────────────────────────────
   16:9 に近い画面なので、ヒーローは従来どおり全面 cover のまま。
   下端の余白だけ詰めて特大欧文が画面外へ出ないようにする */
@media (max-width: 900px) and (max-height: 480px) {
  .hero-body { bottom: 28px; }
  .hero-catch { margin-top: 12px; font-size: 15px; }
  .hero-lead { display: none; }
}

/* ── 動画ヒーロー(scroll-video-hero)の運送向けチューニング ────
   template.html は site.css → hero.css の順で読み込むので、
   モジュール側が後勝ちになる。ここで上書きするのは**重なりと色だけ**。

   マスターのベール(.hero-veil)を活かすため、モジュールの
   オーバーレイ(.svh-overlay)は消す。二重に掛けると映像が沈む */
.page .svh-overlay { background: none; }

/* 環境映像モード(低メモリ端末の降格先)だけは上端スクリムを残す。
   素材の上端が朝焼けで明るく、白いロゴが飛ぶため */
.page .svh.is-ambient .svh-overlay {
  background: linear-gradient(180deg,
    rgba(var(--navy-rgb), .58) 0%, rgba(var(--navy-rgb), 0) 28%);
}

/* z-index の整理。.hero が position:relative + z-index:0 で中に閉じる。
   .hero-visual(.svh) 0 → .hero-veil 1 → .hero-body / .hero-scroll 4 */
.page .hero .svh { z-index: 0; }

/* **ヘッダーの高さぶんヒーローを引き上げる(動画ヒーローのときだけ)。**

   マスターのヘッダーは sticky = フロー上にあるので 76px の場所を取る。
   静止ヒーロー(820px の箱)ならそれで正しいが、動画ヒーローはピン中に
   100svh になるため、**ヒーローの下端が画面から76pxはみ出す**。
   スクロール0でリード文の下端が切れる(2026-08-09 実測: リードの底が
   ビューポート900pxに対して912px)。

   製菓・モノ系は `.site-header` を absolute にして解決しているが、
   運送は**半透明ぼかしのヘッダーが映像に重なるのがマスターの見え方**で、
   ピン中もヘッダーを画面に残したい。そこでヘッダーは sticky のまま、
   ヒーロー側を負マージンで持ち上げる。ヘッダー(z-index 50)が
   ヒーロー(z-index 0)の上に乗るので重なり順も変わらない。

   **--header-h と必ずセットで動かすこと。** */
.page:has(.svh) .hero { margin-top: calc(var(--header-h) * -1); }

/* ── スマホ縦持ちの映像パネル(56svh) ──────────────────────
   **全面 cover にしないこと。** 16:9 を 375×812 へ cover すると拡大率3.85倍で、
   素材1280pxのうち中央332px(26%)しか映らない。実測すると朝焼けの空と
   街路樹だけが写り、**トレーラーが1台も見えない**(2026-08-09)。
   これは介護・建設で 2026-08-07 に直した「拡大しすぎ」と同じ症状。

   56svh なら拡大率2.0倍・素材の50%が映る。パネルの下に残る地色は
   ページ本来の濃紺(--navy)なので、**介護のように別色の板が覗くことはない**。
   ここを埋めるのは白カードではなく**ヒーローのテキスト層そのもの**
   (このデザインはカードを持たず、文字が直接乗る)。

   **パネルの高さと .hero-body の bottom はセットで動かすこと。**
   56svh(455px)のとき、残りは357px。テキスト層は 375px 幅で約296px
   (欧文2行160 + サブ44 + リード3行92)なので、bottom:28px でちょうど収まる。
   パネルを縮めると「カードだけの画面」に、伸ばすとテキストが映像に潜る。

   hero.js 側の変更は要らない ─ canvas の cover(drawSource)も抽出の
   切り出し幅(cropRectFor)も枠の寸法から計算しているので、
   CSSの高さを変えれば抽出解像度もついてくる。

   site.css は hero.css より**先**に読まれるので、モジュールの
   `.hero-visual { inset: 0 }`(0,1,0)に勝てるよう `.page` を噛ませて
   詳細度を上げてある。**このプレフィクスを外さないこと。** */
@media (max-width: 768px) {
  .page .hero:has(.svh) .hero-visual,
  .page .hero:has(.svh) .svh,
  .page .hero:has(.svh) .hero-veil {
    inset: 0 0 auto;
    height: 56svh;
    aspect-ratio: auto;
    max-height: none;
  }
  .page .hero:has(.svh) .hero-body { bottom: 28px; }
}

/* 横持ち(高さ480px以下)は従来どおり全面 cover。
   画面が 16:9 に近いので拡大の問題が起きない */
@media (max-width: 900px) and (max-height: 480px) {
  .page .hero:has(.svh) .hero-visual,
  .page .hero:has(.svh) .svh,
  .page .hero:has(.svh) .hero-veil { inset: 0; height: auto; }
}

/* 退場区間。**特大欧文は一切薄くしない**(全テンプレ共通・2026-08-07)。
   モジュール側は .hero-card だけを 24px 持ち上げる指定なので、
   運送のテキスト層(.hero-body)にも同じ動きだけを足す */
.page .hero.svh-exiting .hero-body {
  transform: translateY(calc(var(--svh-exit, 0) * -24px));
}
.page .hero.svh-exiting .hero-scroll {
  opacity: calc(1 - var(--svh-exit, 0) * 1.6);
}

@media (prefers-reduced-motion: reduce) {
  .page .hero.svh-exiting .hero-body,
  .page .hero.svh-exiting .hero-scroll { opacity: 1; transform: none; }
}