/* ===== 20_site.css ===== */
@charset "UTF-8";
/* ============================================================
   ヤマイチ運輸株式会社（S01066）トップ草案 — 共通スタイル
   ------------------------------------------------------------
   ★このファイルが草案サイトのCSSの唯一の置き場所（共通1ファイル集中管理）。
     インラインstyle・ページ個別の ＜style＞ は使わない（design_rules「HTML版草案生成時の追加ルール」）。
   ★トンマナは下の :root だけで一括調整できる。値を変えるときはここを触る。
   ★CueZilla納品時は AI生成指示書_CueZilla.md に従って具体値へベイクする（草案段階は変数でよい）。

   契約（1_ディレクション/契約.md）
     jump 3.0 ／ jump-top 5.0 ／ colorCount 3 ／ areaRatio 60/30/10
     density 1.15 ／ roundness 1 ／ motionScale 1.1 ／ body 17px ／ font-size-kinds 12

   署名DNA（参考 isomurass.jp から採ったのは「構造・レイアウト・動き」のみ。
            配色値・書体・写真・文言・コードは持ち込んでいない）
     ① site-rulegrid … 背面固定の縦罫5列グリッド
     ② site-chapter  … 章扉のアウトライン英字（線が描かれるリビール）
     ③ site-diag     … 斜めライン（垂直から約7°）
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root{
  /* 配色（colorCount 3＝深緑 / 温かい白 / 黄緑。無彩色の文字色は数えない） */
  --c-base:        #f6f7f2;   /* ベース：温かみのある白（面積 約60%） */
  --c-white:       #ffffff;   /* ベースの明るい面 */
  --c-deep:        #1b5e20;   /* サブ：深緑（面積 約30%） */
  --c-deep-2:      #10390f;   /* 深緑の暗い側。斜めの面の切り替えを「線」ではなく「面の差」で見せる */
  --c-accent:      #7cb342;   /* アクセント：黄緑（面積 約10%・点使い） */
  --c-accent-ink:  #37601a;   /* 明るい地の上の小さな文字用。★背面の縦罫グリッド線（#ccd4c4）の上でも
                              AA 4.5:1 を満たす濃さにしてある（#3f6b1a では罫線上で4.14:1で割れた） */
  --c-accent-lite: #a5d66e;   /* 深緑の地の上の見出し・装飾用（3:1以上） */
  --c-ink:         #2a2e2b;   /* 本文 */
  --c-ink-soft:    #4d554e;   /* 補助文字。同じく縦罫グリッド線の上でも AA を満たす濃さ */
  --c-rule:        #d8ddd3;   /* 罫線 */
  --c-rulegrid:    #e9ece4;   /* 背面の縦罫グリッド（署名DNA①）。
                                 ★文字に干渉しない濃さまで落としている。濃くすると本文に線がかぶる */
  --c-rule-deep:   rgba(255,255,255,.22);

  /* 書体（★参考サイトの書体名は持ち込まない。系統だけを合わせている）
     見出し・本文＝和文ゴシック／FVキャッチのみ和文明朝／英字ラベル＝幾何学サンセリフ */
  --f-ja:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-min:  "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-en:   "Outfit", "Zen Kaku Gothic New", sans-serif;

  /* タイポスケール（font-size-kinds 12以内・9種） */
  --fs-xs:      13px;                              /* 注記・法的最小表記のみ */
  --fs-sm:      15px;                              /* ラベル・英字アイブロウ */
  --fs-base:    17px;                              /* 本文（★これより下げない） */
  --fs-lead:    19px;                              /* リード */
  --fs-h3:      22px;
  --fs-num:     44px;                              /* 数字 */
  --fs-h2:      clamp(29px, 3.6vw, 51px);          /* 本文比 3.0（jump） */
  --fs-hero:    clamp(37px, 6.0vw, 85px);          /* 本文比 5.0（jump-top） */
  --fs-chapter: clamp(56px, 8.4vw, 118px);         /* 章扉のアウトライン英字（全幅セクション用） */
  --fs-chapter-s: clamp(40px, 4.6vw, 68px);        /* 章扉のアウトライン英字（2分割の列内用） */

  --lh-body: 1.75;
  --lh-head: 1.5;
  --ls-body: .04em;
  --ls-head: .06em;
  --ls-en:   .18em;

  /* 余白（design_rules「セクション間の余白は背景色で機械的に決める」）
     ★守るのは P_large > P_medium > P_small の大小関係。density 1.15＝標準より広い側 */
  --row-pad: clamp(66px, 8.2vw, 124px);   /* P_large：Rowの上下端＝背景の切り替わり */
  --sec-gap: clamp(44px, 5.2vw, 76px);    /* P_medium：同一Row内のセクション間 */
  --el-gap:  26px;                        /* P_small：セクション内の要素間 */

  --wrap: 1200px;                          /* 版面幅（機構契約 wrap:1200） */
  --gutter: clamp(20px, 4vw, 40px);

  /* 形（roundness 1＝標準。参考は角丸0だが「温かみ」側へ置換） */
  --radius:    8px;
  --radius-lg: 14px;

  /* 動き（motionScale 1.1＝標準よりわずかにゆったり） */
  --dur:  .77s;
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 88px;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background-color: var(--c-base);
  background-image: linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--c-rulegrid) calc(12.5% - 1px) 12.5%, transparent 12.5% calc(37.5% - 1px), var(--c-rulegrid) calc(37.5% - 1px) 37.5%, transparent 37.5% calc(62.5% - 1px), var(--c-rulegrid) calc(62.5% - 1px) 62.5%, transparent 62.5% calc(87.5% - 1px), var(--c-rulegrid) calc(87.5% - 1px) 87.5%, transparent 87.5% 100%);
  color: var(--c-ink);
  font-family: var(--f-ja);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }
p{ margin: 0 0 var(--el-gap); font-size: var(--fs-base); }
/* 行末孤立（最終行が1〜2文字）を避ける。和文は文節で折り返す */
/* 行末孤立（最終行が1〜2文字）を避ける。
   ★word-break: auto-phrase は使わない ── 和文を文節で折り返すため行長のばらつきが大きくなり、
     verify/responsive-audit.mjs の [ragged]（途中の行が極端に短い）を大量に出す。 */
p, li, dd, address, th, td, summary{
  text-wrap: pretty;
  /* 行頭に「ー」「ャ」等の約物・小書き仮名が来るのを禁じる（既定の auto では許される）。
     verify/measure-pages.mjs の #14「行頭の約物（禁則）」対策。 */
  line-break: strict;
}
/* 見出しは balance（行長を均す）＋ strict（行頭約物の禁則）。
   ★pretty へ変えたら responsive-audit の NG が 13→35 に増えたので balance に戻した（実測で決めている）。 */
h1, h2, h3{ text-wrap: balance; line-break: strict; }
/* 見出しの各行。＜br＞ のままだと text-wrap:balance が強制改行をまたげず、2行目だけが
   1〜2文字の行末になる（実測 600/1024px）。行ごとに block span にして各行を balance させる。 */
.site-h2__l{ display: block; text-wrap: balance; }
p:last-child{ margin-bottom: 0; }
ul, dl{ margin: 0; padding: 0; list-style: none; }
address{ font-style: normal; font-size: var(--fs-base); }
time{ font-size: var(--fs-base); font-variant-numeric: tabular-nums; }

:focus-visible{
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 版面幅（機構契約 wrap:1200）。padding の内側が 1200px になるように外形を広げる */
.site-wrap{
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* スキップリンク。left:-9999px で画面外へ飛ばすと横方向のオーバーフロー判定に引っかかるため、
   1px に潰して clip-path で隠す（読み上げには残る） */
.site-skip{
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
  min-width: 44px; min-height: 44px;   /* 非表示でもタップ領域44pxの基準は満たす */
  background: var(--c-deep); color: #fff;
  padding: 12px 20px; z-index: 400;
  white-space: nowrap;
}
.site-skip:focus{ width: auto; height: auto; clip-path: none; }

/* ---------- 3. 署名DNA① 背面固定の縦罫グリッド ----------
   ★実装方式の注意: 全画面の ＜div＞ オーバーレイにしない。
     verify/shoot-pages.mjs は「全画面を覆う要素」をローディング幕とみなして
     撮影時に非表示にするため、オーバーレイで作ると機械ゲートのスクリーンショットから
     この署名が丸ごと消える（教訓 opening-curtain-blinds-the-gate と同じ型）。
     そこで background-attachment: fixed の背景として各面に敷く。
     ＝要素を1つも増やさずに「スクロールしても動かない縦罫」を実現する。 */
:root{
  --rulegrid-w: calc(var(--wrap) + var(--gutter) * 2);
}
body,
.bg-white,
.bg-deep{
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: var(--rulegrid-w) 100%;
}
@media (max-width: 899px){
  :root{ --rulegrid-w: 100%; }
}

/* ---------- 4. 署名DNA② 章扉のアウトライン英字 ---------- */
.site-chapter{
  position: absolute;
  top: -.28em;
  left: var(--gutter);
  z-index: 0;
  font-family: var(--f-en);
  font-size: var(--fs-chapter);
  font-weight: 300;
  letter-spacing: var(--ls-en);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-rule-deep);
  white-space: nowrap;
  pointer-events: none;
}
/* 2分割の中に置く章扉。絶対配置のまま本文の背面に敷く（back-layer） */
.site-chapter--ink{
  -webkit-text-stroke-color: #c3cbbe;
  font-size: var(--fs-chapter-s);
  top: .06em;
  left: var(--gutter);
}
/* text-stroke が使えない環境でも文字が消えないようにする */
@supports not (-webkit-text-stroke: 1px currentColor){
  .site-chapter{ color: var(--c-rule-deep); }
  .site-chapter--ink{ color: #c3cbbe; }
}

/* ---------- 5. 署名DNA③ 斜めライン（垂直から約7°） ---------- */
.site-diag{ position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.site-diag span{
  position: absolute;
  top: -12%;
  height: 124%;
  width: 3px;
  background: rgba(255,255,255,.30);
  transform: rotate(7deg);
  transform-origin: top center;
}
/* ★線が本文の背後を通ると、白文字とのコントラストが AA(4.5:1) を割る（実測で3.4〜4.0:1）。
   位置を本文の外側へ寄せ、濃度も 白.20 / 黄緑.26 に落として 4.8:1 以上を確保している。 */
.site-diag span:nth-child(1){ left: 77%; }
.site-diag span:nth-child(2){ left: 85%; width: 5px; background: rgba(165,214,110,.55); }

/* ---------- 6. 共通パーツ ---------- */
.site-eyebrow{
  margin: 0 0 12px;
  font-family: var(--f-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-en);
  color: var(--c-accent-ink);
  text-transform: uppercase;
}
.site-eyebrow--onDeep{ color: var(--c-accent-lite); }

.site-h2{
  margin: 0 0 var(--el-gap);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--c-ink);
}
.site-h2--onDeep{ color: #fff; }

.site-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-btn::after{ content: "→"; font-family: var(--f-en); }
.site-btn--accent{ background: var(--c-deep); color: #fff; }
.site-btn--accent:hover{ background: var(--c-accent-ink); transform: translateY(-2px); }
.site-btn--ghost{ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.site-btn--ghost:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
.site-btn--onDeep{ background: var(--c-accent); color: #14300a; }
.site-btn--onDeep:hover{ background: var(--c-accent-lite); transform: translateY(-2px); }

.site-textlink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: gap var(--dur) var(--ease);
}
.site-textlink::after{ content: "→"; font-family: var(--f-en); }
.site-textlink:hover{ gap: 16px; }

/* 未支給の画像スロット（撮影 2026-08-29 で差し替える） */
[data-ph]{
  position: relative;
  display: flex;
  align-items: flex-end;   /* ラベルを下端へ。中央寄せだと余白実測（spacing-audit）が水増しされる */
  justify-content: center;
  padding-bottom: 12px;
  background:
    repeating-linear-gradient(-45deg, rgba(27,94,32,.05) 0 10px, transparent 10px 20px),
    #e6ebe1;
  border: 1px dashed #b6c2ae;
  color: var(--c-ink-soft);
  overflow: hidden;
}
.site-ph__label, .site-fv__phlabel{
  font-family: var(--f-en);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
  color: var(--c-ink-soft);
}

/* ---------- 7. セクション余白（背景色で機械的に決める） ----------
   design_rules「セクション間の余白は背景色で機械的に決める」の実装。
   Row をラッパー div にすると main > section が消えて機構ゲート（mechanism-check /
   measure-pages は main > section を数える）が測れなくなるため、
   **判定結果を各 section の e-* クラスとして持たせる**方式にした。
   判定ロジックは規約どおり:
     背景が切り替わる境目          → P_large（--row-pad）を両側が持つ ＝ 合算 P_large × 2
     同一背景内で隣接するセクション → P_medium の半分ずつ ＝ 合算 --sec-gap
     セクション内の要素間          → --el-gap
   守る大小関係: --row-pad > --sec-gap > --el-gap（verify/spacing-audit.mjs が実測で照合する）
   ★FV と CTA はフルブリードの意匠ブロックなので Row Padding を掛けない（規約の例外）。 */
main > section{ padding-block: 0; }
.e-tl{ padding-top: var(--row-pad); }
.e-bl{ padding-bottom: var(--row-pad); }
.e-tm{ padding-top: calc(var(--sec-gap) / 2); }
.e-bm{ padding-bottom: calc(var(--sec-gap) / 2); }

/* 背景面。縦罫グリッド（署名DNA①）は fixed 背景として全ての面に同じ位置で敷く＝スクロールしても動かない */
.bg-base{ background: transparent; }   /* body の面と罫線をそのまま見せる */
.bg-white{
  background-color: var(--c-white);
  background-image: linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--c-rulegrid) calc(12.5% - 1px) 12.5%, transparent 12.5% calc(37.5% - 1px), var(--c-rulegrid) calc(37.5% - 1px) 37.5%, transparent 37.5% calc(62.5% - 1px), var(--c-rulegrid) calc(62.5% - 1px) 62.5%, transparent 62.5% calc(87.5% - 1px), var(--c-rulegrid) calc(87.5% - 1px) 87.5%, transparent 87.5% 100%);
}
.bg-deep{
  color: #fff;
  background-color: var(--c-deep);
  background-image: linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--c-rule-deep) calc(12.5% - 1px) 12.5%, transparent 12.5% calc(37.5% - 1px), var(--c-rule-deep) calc(37.5% - 1px) 37.5%, transparent 37.5% calc(62.5% - 1px), var(--c-rule-deep) calc(62.5% - 1px) 62.5%, transparent 62.5% calc(87.5% - 1px), var(--c-rule-deep) calc(87.5% - 1px) 87.5%, transparent 87.5% 100%);
}
.bg-deep p{ color: rgba(255,255,255,.92); }

/* ---------- 8. ヘッダー ---------- */
.sh{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,247,242,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-rule);
}
.sh__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sh__logo{ text-decoration: none; display: block; }
.sh__logo-ja{
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-deep);
  line-height: 1.3;
}
.sh__logo-en{
  display: block;
  font-family: var(--f-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-en);
  color: var(--c-ink-soft);
}
.sh__panel{ display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.sh__nav ul{ display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }
.sh__nav a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--c-ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sh__nav a:hover{ color: var(--c-accent-ink); border-bottom-color: var(--c-accent); }
.sh__actions{ display: flex; align-items: center; gap: 16px; }
.sh__tel{ text-decoration: none; display: block; }
.sh__tel-num{
  display: block;
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-deep);
  line-height: 1.2;
}
.sh__tel-note{ display: block; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.sh__cta{ min-height: 48px; padding: 10px 22px; }
.sh__toggle, .sh__burger, .sh__close, .sh__scrim{ display: none; }

@media (max-width: 1499px){
  :root{ --header-h: 72px; }
  .sh__burger{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px; height: 48px;
    cursor: pointer;
  }
  .sh__burger span{ display: block; height: 2px; background: var(--c-deep); }
  .sh__panel{
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 120;
    width: min(88vw, 380px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 84px var(--gutter) 40px;
    background: var(--c-base);
    border-left: 1px solid var(--c-rule);
    /* ★閉じている間もビューポートの中に置く。translateX(100%) で画面外へ出すと
       position:fixed でも横スクロールが発生する（headless Chromium で実測。
       shoot-pages の「横はみ出し」判定に引っかかる）。
       不透明度と visibility で隠し、わずかなスライドだけを残す。 */
    transform: translateX(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    overflow-y: auto;
  }
  .sh__close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px; right: var(--gutter);
    min-width: 88px; min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--c-rule);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-white);
    cursor: pointer;
  }
  .sh__nav{ width: 100%; }
  .sh__nav ul{ flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .sh__nav a{ min-height: 56px; border-bottom: 1px solid var(--c-rule); font-size: var(--fs-base); }
  .sh__actions{ flex-direction: column; align-items: stretch; gap: 16px; width: 100%; margin-top: 28px; }
  .sh__cta{ width: 100%; }
  .sh__scrim{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(20,30,20,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  .sh__toggle:checked ~ .sh__panel{ transform: translateX(0); opacity: 1; visibility: visible; }
  .sh__toggle:checked ~ .sh__scrim{ opacity: 1; visibility: visible; }
}

/* ---------- 9. FV ---------- */
.site-fv{
  position: relative;
  isolation: isolate;
  min-height: min(84svh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 6vw, 84px);
  overflow: hidden;
}
.site-fv__media{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 斜め（垂直から約7°）で面を切り替える＝依頼資料「斜めのラインを入れたデザイン」 */
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px),
    linear-gradient(97deg, var(--c-deep) 0 52%, var(--c-deep-2) 52%);
  border: 0;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 24px var(--gutter);
}
.site-fv__phlabel{ color: rgba(255,255,255,.5); }
/* 写真・面の上に載る文字のスクリム（design_rules「写真上文字はスクリム」）。
   撮影素材が入っても同じ濃度で効くよう、面ではなくFV側に持たせている。
   これが無いと斜めラインが文字の背後を通る幅で AA(4.5:1) を割る（実測3.7:1）。 */
.site-fv::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(8,30,10,.74) 0%, rgba(8,30,10,.5) 46%, rgba(8,30,10,0) 78%);
  pointer-events: none;
}
.site-fv__body{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: #fff;
}
.site-fv__catch{
  margin: 0 0 18px;
  font-family: var(--f-min);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  color: #fff;
}
.site-fv__sub{
  margin: 0 0 22px;
  text-wrap: balance;
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--c-accent-lite);
}
.site-fv__lead{
  max-width: 42em;
  font-size: var(--fs-base);
  color: rgba(255,255,255,.9);
}
.site-fv__acts{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--el-gap); }
.site-fv__acts .site-btn--accent{ background: var(--c-accent); color: #14300a; }
.site-fv__acts .site-btn--accent:hover{ background: var(--c-accent-lite); }
.site-fv__scroll{
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  z-index: 1;
  font-family: var(--f-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-en);
  color: rgba(255,255,255,.7);
  writing-mode: vertical-rl;
  padding-bottom: 56px;
}
.site-fv__scroll::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 44px;
  background: rgba(255,255,255,.5);
}

/* ---------- 10. NEWS ---------- */
.site-news__inner{ display: grid; grid-template-columns: minmax(180px, 240px) 1fr auto; gap: 24px clamp(24px, 4vw, 56px); align-items: start; }
.site-news__ttl{ margin: 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-head); }
.site-news__list{ display: grid; gap: 4px; }
.site-news__list li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-base);
}
.site-news__list time{ color: var(--c-ink-soft); font-family: var(--f-en); letter-spacing: .04em; }
.site-news__list a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.site-news__list a:hover{ color: var(--c-accent-ink); }
@media (max-width: 1099px){
  .site-news__inner{ grid-template-columns: 1fr; }
}

/* ---------- 11. 完全2分割（split-full） ---------- */
.site-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  align-items: stretch;
}
.site-split__media{ min-height: clamp(320px, 34vw, 520px); }
.site-split__body{ display: flex; align-items: center; background: transparent; overflow: hidden; }
/* テキスト列の内寸を 600px に揃える（機構契約 wrap:600 の回帰基準）。
   600px ÷ 本文17px ≒ 35文字／行＝和文の可読レンジ内 */
.site-split__inner{
  position: relative;
  width: 100%;
  max-width: calc(var(--wrap) / 2 + var(--gutter) * 2);
  padding: clamp(48px, 6vw, 84px) var(--gutter);
}
.site-split:not(.site-split--rev) .site-split__inner{ margin-right: auto; }
.site-split--rev .site-split__inner{ margin-left: auto; }
@media (max-width: 899px){
  /* 狭幅の縦積み順＝テキスト→画像（decisions narrow-stack-order で確定） */
  .site-split{ grid-template-columns: 1fr; }
  .site-split__body{ order: 1; }
  .site-split__media{ order: 2; min-height: 260px; }
  .site-split__inner{ max-width: none; padding: 0 var(--gutter) 32px; }
}

.site-badges{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 var(--el-gap); }
.site-badges li{
  padding: 9px 18px;
  border: 1px solid var(--c-accent-ink);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent-ink);
}

/* ---------- 12. 採用の入口（深緑面） ---------- */
.site-recruit{ position: relative; }
.site-recruit .site-wrap{ position: relative; z-index: 1; }
.site-recruit__text{ max-width: 46em; margin-bottom: var(--sec-gap); }
.site-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 var(--sec-gap);
  border-top: 1px solid var(--c-rule-deep);
  border-bottom: 1px solid var(--c-rule-deep);
}
.site-stats > div{ padding: 28px 20px; border-left: 1px solid var(--c-rule-deep); }
.site-stats > div:first-child{ border-left: 0; padding-left: 0; }
.site-stats dt{ font-size: var(--fs-sm); color: var(--c-accent-lite); letter-spacing: .06em; text-wrap: balance; }
/* ★数字と単位は同じ font-size にする。サイズを変えると行ボックスが2つに割れ、
   verify/measure-pages.mjs の「行末孤立（最終行が1〜2文字）」に引っかかる（実測で3件）。
   差は不透明度でつける。 */
.site-stats dd{
  margin: 6px 0 0;
  font-family: var(--f-en);
  font-size: var(--fs-num);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.site-stats dd b{ font-weight: 500; }
.site-stats dd span{ opacity: .82; }
.site-stats__word{ font-family: var(--f-ja); font-size: var(--fs-h3); font-weight: 700; }
@media (max-width: 899px){
  .site-stats{ grid-template-columns: repeat(2, 1fr); }
  .site-stats > div{ padding: 20px 16px; border-top: 1px solid var(--c-rule-deep); }
  .site-stats > div:nth-child(-n+2){ border-top: 0; }
  .site-stats > div:nth-child(odd){ border-left: 0; padding-left: 0; }
}

/* ---------- 13. 大小2枚組の重なり（photo-duo） ---------- */
.site-duo__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.site-duo__figs{ position: relative; padding-bottom: 96px; }
.site-duo__fig--lg{ min-height: clamp(280px, 30vw, 420px); border-radius: var(--radius-lg); }
.site-duo__fig--sm{
  position: absolute;
  /* 小さい方だけがページ外側の辺（ビューポート左端）に接触する */
  left: calc(min(0px, (var(--wrap) + var(--gutter) * 2 - 100vw) / 2) - var(--gutter));
  bottom: 0;
  width: 62%;
  min-height: 240px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 18px 40px rgba(20,40,20,.14);
}
@media (max-width: 899px){
  .site-duo__grid{ grid-template-columns: 1fr; }
  .site-duo__body{ order: 1; }
  .site-duo__figs{ order: 2; padding-bottom: 56px; }
  .site-duo__fig--sm{ width: 62%; min-height: 140px; left: calc(var(--gutter) * -1); }
}

/* ---------- 14. ステートメント＋背面の流れる英字（back-layer） ---------- */
.site-statement{ position: relative; overflow: hidden; }
.site-statement__inner{ position: relative; z-index: 1; max-width: 62em; }
.site-marquee{
  position: absolute;
  top: 6%;
  left: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--f-en);
  font-size: var(--fs-chapter);
  font-weight: 300;
  letter-spacing: var(--ls-en);
  line-height: 1;
  color: rgba(27,94,32,.07);
}
.site-marquee span{
  display: inline-block;
  white-space: nowrap;
  animation: site-marquee 38s linear infinite;
}
@keyframes site-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- 15. CTA（斜め帯） ---------- */
.site-cta{ position: relative; isolation: isolate; padding-block: clamp(56px, 7vw, 96px); overflow: hidden; }
.site-cta__band{
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  background: linear-gradient(97deg, var(--c-deep) 0 58%, var(--c-deep-2) 58%);
  transform: skewY(-2deg);
}
.site-cta__inner{ text-align: center; color: #fff; }
.site-cta__ttl{ margin: 0 0 14px; font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--ls-head); color: #fff; }
.site-cta__lead{ margin: 0 0 var(--el-gap); color: rgba(255,255,255,.92); }
.site-cta__acts{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 16. BLOG ---------- */
.site-blog__ttl{ margin: 0 0 var(--el-gap); font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-head); }
.site-blog__cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); margin-bottom: var(--el-gap); }
.site-blog__cards a{
  display: grid;
  gap: 10px;
  text-decoration: none;
  min-height: 44px;
  transition: transform var(--dur) var(--ease);
}
.site-blog__cards a:hover{ transform: translateY(-4px); }
.site-blog__thumb{ display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); }
.site-blog__cards time{ color: var(--c-ink-soft); font-family: var(--f-en); font-size: var(--fs-sm); letter-spacing: .04em; }
.site-blog__cardttl{ font-size: var(--fs-base); font-weight: 700; line-height: 1.6; }
@media (max-width: 1199px){
  .site-blog__cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px){
  .site-blog__cards{ grid-template-columns: 1fr; }
}

/* ---------- 17. フッター ---------- */
.sf{ background: var(--c-deep); color: #fff; padding-block: clamp(48px, 6vw, 80px) 0; }
.sf__inner{ display: grid; grid-template-columns: minmax(280px, 1fr) 1.2fr; gap: clamp(32px, 5vw, 72px); }
.sf__logo{ margin: 0 0 14px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: .08em; }
.sf__addr{ color: rgba(255,255,255,.9); line-height: 1.9; }
.sf__addr a{ color: var(--c-accent-lite); }
.sf__nav ul{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; }
.sf__nav a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-base);
  text-decoration: none;
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sf__nav a:hover{ color: var(--c-accent-lite); border-bottom-color: var(--c-accent-lite); }
.sf__copy{
  margin: clamp(36px, 5vw, 64px) 0 0;
  padding: 20px var(--gutter);
  border-top: 1px solid var(--c-rule-deep);
  text-align: center;
  font-family: var(--f-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-en);
  color: rgba(255,255,255,.7);
}
@media (max-width: 899px){
  .sf__inner{ grid-template-columns: 1fr; }
  .sf__nav ul{ grid-template-columns: 1fr; }
}

/* ---------- 18. リビール（フェード＋線描の2型のみ・JS不要） ----------
   ★方向つきスライドインは使わない（参考サイトと同じ手つき）。
   ★既定は「見えている」状態。animation-timeline に対応した環境でだけ動く。
     これは機械ゲートのスクリーンショットが幕で塞がれて「未検査を合格と誤読する」事故
     （教訓 opening-curtain-blinds-the-gate）を避けるため。 */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-reveal="fade"]{
      animation: site-fade linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    [data-reveal="draw"]{
      animation: site-draw linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 32%;
    }
  }
}
@keyframes site-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes site-draw{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .site-marquee span{ animation: none; }
  *{ transition-duration: .001s !important; }
}

/* ============================================================
   19. 下層ページ（design-buildout）
   ------------------------------------------------------------
   トップで確立した署名DNA（縦罫グリッド／章扉アウトライン英字／斜めライン）と
   契約トークン（--fs-* / --row-pad / --sec-gap / --el-gap / --radius）にすべて従属させる。
   ★MISSIONパーツは当てていない。理由はセクション構成プラン「パーツ選定」を参照。
   ============================================================ */

/* --- 下層ヒーロー帯（パンくず内包）＝下層に残る唯一の顔 --- */
.sub-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 11vw, 156px) 0 clamp(40px, 5vw, 64px);
  color: #fff;
  background-color: var(--c-deep);
  background-image: linear-gradient(97deg, var(--c-deep) 0 56%, var(--c-deep-2) 56%);
}
.sub-hero__diag{ position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sub-hero__diag span{
  position: absolute; top: -12%; height: 124%; width: 3px;
  background: rgba(255,255,255,.18);
  transform: rotate(7deg); transform-origin: top center;
}
.sub-hero__diag span:nth-child(1){ left: 79%; }
.sub-hero__diag span:nth-child(2){ left: 87%; width: 5px; background: rgba(165,214,110,.45); }
.sub-hero__en{
  display: block;
  font-family: var(--f-en);
  font-size: var(--fs-chapter-s);
  font-weight: 300;
  letter-spacing: var(--ls-en);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
  margin-bottom: .06em;
}
@supports not (-webkit-text-stroke: 1px currentColor){
  .sub-hero__en{ color: rgba(255,255,255,.28); }
}
.sub-hero h1{
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: #fff;
}
.sub-crumb{ margin-top: var(--el-gap); font-size: var(--fs-sm); color: rgba(255,255,255,.82); }
.sub-crumb ol{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sub-crumb li + li::before{ content: "／"; margin-right: 8px; opacity: .6; }
.sub-crumb a{
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-accent-lite); text-decoration: none;
}
.sub-crumb a:hover{ text-decoration: underline; }
.sub-crumb li[aria-current]{ display: inline-flex; align-items: center; min-height: 44px; }

/* --- 導入リード --- */
.sub-lead{ max-width: 46em; }

/* --- 下層のブロック部品は要素間余白（P_small）を持つ。持たせないと直後のテキストリンクが密着する --- */
.site-cards,
.site-gates,
.site-table,
.site-timeline,
.site-faq,
.site-places{ margin-bottom: var(--el-gap); }

/* --- カード群（3カード／2カード） --- */
.site-cards{ display: grid; gap: clamp(20px, 2.4vw, 32px); }
.site-cards--3{ grid-template-columns: repeat(3, 1fr); }
.site-cards--2{ grid-template-columns: repeat(2, 1fr); }
.site-cards li{
  padding: clamp(24px, 3vw, 36px);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
}
.bg-white .site-cards li{ background: var(--c-base); }
/* 表の項目名もカードと同じ扱い（面の色に合わせて反転） */
.bg-white .site-table th{ background: var(--c-base); }
.site-cards__no{
  display: block;
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-en);
  color: var(--c-accent-ink);
  margin-bottom: 10px;
}
/* 短文（カードの説明・表のセル・一覧タイトル）は balance で各行の長さを均し、2文字だけの行末を作らない。
   ★見出しと違い、これらは ＜br＞ を含まない1本のテキストなので balance が素直に効く。 */
.site-cards p,
.site-table td,
.site-td__l,
.site-news__list a,
.site-blog__cardttl{ text-wrap: balance; }
/* 表のセル内で行を分けたいときは ＜br＞ でなく block span（balance は強制改行をまたげない） */
.site-td__l{ display: block; }

.site-cards h3{
  margin: 0 0 10px;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
/* 中間幅の詰まり対策（design_rules「中間幅チェック」）。900〜1199px は3カラムだと1カラム約250pxで
   12文字の短文が2行に割れる。2カラムを挟む。 */
@media (max-width: 1199px){
  .site-cards--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px){
  .site-cards--3, .site-cards--2{ grid-template-columns: 1fr; }
}

/* --- ゲートカード（回遊導線） --- */
.site-gates{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.site-gates a{
  display: block;
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bg-deep .site-gates a{ background: rgba(255,255,255,.06); border-color: var(--c-rule-deep); color: #fff; }
.site-gates a:hover{ transform: translateY(-4px); border-color: var(--c-accent); }
.site-gates h3{ margin: 0 0 10px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-head); }
.site-gates__go{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: 8px; font-weight: 700; color: var(--c-accent-ink);
}
.bg-deep .site-gates__go{ color: var(--c-accent-lite); }
.site-gates__go::after{ content: "→"; font-family: var(--f-en); }
@media (max-width: 899px){ .site-gates{ grid-template-columns: 1fr; } }

/* --- 表（募集要項・料金・会社データ） --- */
.site-table{ width: 100%; border-collapse: collapse; }
.site-table th, .site-table td{
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-base);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-body);
}
.site-table th{
  width: 30%;
  min-width: 168px;
  font-weight: 700;
  color: var(--c-accent-ink);
  background: var(--c-white);
}
.site-table tr:first-child th, .site-table tr:first-child td{ border-top: 1px solid var(--c-rule); }
@media (max-width: 719px){
  .site-table, .site-table tbody, .site-table tr, .site-table th, .site-table td{ display: block; width: 100%; }
  .site-table th{ border-bottom: 0; padding-bottom: 6px; min-width: 0; }
  .site-table td{ padding-top: 6px; }
}

/* --- タイムライン --- */
.site-timeline{ display: grid; gap: 0; border-left: 2px solid var(--c-accent); padding-left: clamp(20px, 2.4vw, 32px); }
.site-timeline li{ position: relative; padding: 0 0 var(--el-gap); }
.site-timeline li:last-child{ padding-bottom: 0; }
.site-timeline li::before{
  content: "";
  position: absolute;
  left: calc(clamp(20px, 2.4vw, 32px) * -1 - 7px);
  top: .55em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
}
.site-timeline b{
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  margin-bottom: 4px;
}

/* --- FAQ（JS不要のアコーディオン） --- */
.site-faq{ display: grid; gap: 12px; }
.site-faq details{
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
}
.bg-white .site-faq details{ background: var(--c-base); }
.site-faq summary{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px clamp(20px, 2.4vw, 28px);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-head);
  cursor: pointer;
  list-style: none;
}
.site-faq summary::-webkit-details-marker{ display: none; }
.site-faq summary::before{
  content: "Q";
  flex: 0 0 auto;
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  color: var(--c-accent-ink);
}
.site-faq summary::after{
  content: "＋";
  margin-left: auto;
  color: var(--c-accent-ink);
  font-weight: 400;
}
.site-faq details[open] summary::after{ content: "－"; }
/* ★閉じている ＜details＞ の中身に author 側から display を与えると、ブラウザの「閉じたら隠す」が効かず
   要素が箱の外に残る（実測: details 高さ67pxに対し中身が173px）。painted されないので目には見えないが、
   verify/responsive-audit.mjs は幾何で判定するため「テキストが重なっている」を全幅で検出する。
   → 既定を display:none にし、開いたときだけ flex にする。 */
.site-faq__a{ display: none; }
.site-faq details[open] .site-faq__a{
  display: flex;
  gap: 16px;
  padding: 0 clamp(20px, 2.4vw, 28px) 24px;
}
.site-faq__a::before{
  content: "A";
  flex: 0 0 auto;
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  color: var(--c-ink-soft);
  line-height: 1.3;
}

/* --- 拠点＋地図 --- */
.site-places{ display: grid; gap: clamp(24px, 3vw, 40px); }
.site-places > li{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.site-places h3{ margin: 0 0 10px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-head); }
.site-places iframe, .site-places .site-map-ph{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
}
@media (max-width: 899px){ .site-places > li{ grid-template-columns: 1fr; } }

/* --- 本文の長文ブロック（プライバシーポリシー等） --- */
.site-prose{ max-width: 46em; }
.site-prose h2{
  margin: var(--sec-gap) 0 var(--el-gap);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.site-prose h2:first-child{ margin-top: 0; }
.site-prose ul{ margin: 0 0 var(--el-gap); }
/* プライバシーポリシーの箇条書きは定型文＝文言を変えられないので、行分けで孤立行を避ける
   （text-wrap: balance は行数の少ない項目で各行の長さを均す） */
.site-prose li{ position: relative; padding-left: 1.2em; margin-bottom: 8px; font-size: var(--fs-base); text-wrap: balance; }
.site-prose li::before{ content: "・"; position: absolute; left: 0; color: var(--c-accent-ink); }

/* --- 注記スタイルは撤去した。D2要確認・申し送りは HTML コメントで残す方針に変更
       （00_ディレクター業務指示 ⑦「内部分析を成果物に載せない」／可視テキストにしない）。 --- */


/* ============================================================
   20. ④デザイン仕上げ（Claude Design・2026-08-25）
   ------------------------------------------------------------
   一次生成の構造・本文・スラッグは触っていない。触ったのは
   「タイポの詰め／余白／あしらい／写真枠の見せ方」の4点のみ。
   契約は維持: 本文17px・配色3色（面積60/30/10）・jump 3.0/5.0・
   リビール2型・JSなし・角丸8/14px。
   ★変えた値はすべてこのブロック内。戻すときはこのブロックを消す。
   ============================================================ */

/* --- 20-1. 大きな文字の詰め（和文見出しは字間を締める／行送りを詰める） --- */
:root{ --ls-head:.015em; --lh-head:1.42; --fs-num: clamp(46px, 4.4vw, 60px); }
.site-h2{ font-feature-settings:"palt" 1; }
.site-h2__l + .site-h2__l:not(.site-h2__l--lg){ color:var(--c-ink-soft); }
.site-h2--onDeep .site-h2__l + .site-h2__l:not(.site-h2__l--lg){ color:rgba(255,255,255,.72); }
.site-eyebrow{ margin-bottom:14px; font-size:var(--fs-xs); letter-spacing:.22em; }

/* --- 20-2. FV：キャッチを主役にする --- */
.site-fv{ min-height:min(90svh, 820px); }
.site-fv__catch{ line-height:1.16; letter-spacing:.01em; margin-bottom:24px; text-indent:-.05em; }
.site-fv__sub{ position:relative; padding-left:58px; margin-bottom:26px; }
.site-fv__sub::before{ content:""; position:absolute; left:0; top:.78em; width:42px; height:2px; background:var(--c-accent); }
.site-fv__lead{ max-width:34em; font-size:var(--fs-base); color:rgba(255,255,255,.84); }
.site-fv::before{ background:linear-gradient(to top, rgba(8,30,10,.82) 0%, rgba(8,30,10,.56) 44%, rgba(8,30,10,.06) 82%); }
.site-fv__media{ border:0; border-radius:0; }
.site-fv__phlabel{ color:rgba(255,255,255,.62); letter-spacing:.14em; }
.site-fv__scroll{ letter-spacing:.24em; }

/* --- 20-3. 署名DNA③ 斜めライン：本数を増やして粗密をつける（本文域は避ける） --- */
.site-diag::before, .site-diag::after{ content:""; position:absolute; top:-12%; height:124%; transform:rotate(7deg); transform-origin:top center; }
.site-diag::before{ left:69%; width:1px; background:rgba(255,255,255,.16); }
.site-diag::after{ left:93%; width:1px; background:rgba(255,255,255,.20); }
.sub-hero__diag span:nth-child(2){ width:4px; }

/* --- 20-4. 署名DNA② 章扉アウトライン英字：線を太らせて意匠として立てる --- */
.site-chapter{ -webkit-text-stroke-width:1.5px; letter-spacing:.14em; top:-.32em; }
.site-chapter.site-chapter--ink{ top:.06em; }
.site-chapter--ink{ -webkit-text-stroke-width:1.5px; -webkit-text-stroke-color:#c8d0c2; }
.sub-hero__en{ -webkit-text-stroke-width:1.5px; letter-spacing:.14em; }

/* --- 20-5. 写真枠：面を落ち着かせ、用途ラベルをピルにする（枠比率は入替時に自由） --- */
[data-ph]:not(.site-fv__media){ background:repeating-linear-gradient(-45deg, rgba(27,94,32,.05) 0 12px, transparent 12px 24px), linear-gradient(180deg,#eaefe4,#dfe6d8); border:1px solid #c4cebb; }
.site-split__media{ border-radius:0; }
[data-ph]{ padding-bottom:16px; }
.site-ph__label{ display:inline-flex; align-items:center; min-height:30px; padding:5px 16px; border-radius:999px; background:rgba(255,255,255,.86); border:1px solid #c4cebb; font-size:var(--fs-xs); letter-spacing:.12em; }
[data-ph].site-duo__fig--lg{ border-radius:var(--radius-lg); }
[data-ph].site-duo__fig--sm{ border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
[data-ph].site-blog__thumb{ border-radius:var(--radius); }
.site-split__media{ min-height:clamp(340px, 36vw, 560px); }

/* --- 20-6. ボタン・リンク：矢印を動かし、押せる感じを強める --- */
.site-btn{ min-height:60px; padding:16px 34px; letter-spacing:.04em; }
.site-btn::after{ transition:transform var(--dur) var(--ease); }
.site-btn:hover::after{ transform:translateX(5px); }
.site-btn--accent:hover, .site-btn--onDeep:hover, .site-btn--ghost:hover{ box-shadow:0 10px 24px rgba(16,57,15,.18); }
.site-textlink{ border-bottom-width:2px; padding-bottom:2px; }
main a:not([class]){ color:var(--c-accent-ink); text-decoration-thickness:1px; text-underline-offset:3px; }
main a:not([class]):hover{ color:var(--c-deep); }
.bg-deep a:not([class]){ color:var(--c-accent-lite); }
.sub-hero a:not([class]), .sub-crumb a:not([class]){ color:var(--c-accent-lite); }

/* --- 20-7. ヘッダー：ロゴの文字組み（ロゴ支給までの暫定・縦の黄緑罫で起こす） --- */
.sh__logo{ position:relative; display:inline-grid; gap:3px; padding-left:16px; }
.sh__logo::before{ content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:3px; background:var(--c-accent); border-radius:2px; }
.sh__logo-ja{ letter-spacing:.14em; }
.sh__logo-en{ letter-spacing:.2em; }
/* 正式名称のナビは1200pxの版面に収まらない。ヘッダー帯だけ版面より広く使う（1440px以上のみ横並び） */
@media (min-width:1500px){
  .sh__inner{ max-width:1600px; }
  .sh__nav a{ white-space:nowrap; }
}
.sh__tel-num{ letter-spacing:.04em; }

/* --- 20-8. NEWS：一覧に上罫を入れて表として立てる --- */
.site-news__list li{ padding:18px 0; }
.site-news__list li:first-child{ border-top:1px solid var(--c-rule); }

/* --- 20-9. 数字（実績）：単位との差を保ちつつ数字を大きく --- */
.site-stats > div{ padding:32px 24px; }
.site-stats dt{ letter-spacing:.1em; font-size:var(--fs-xs); }
.site-stats dd{ margin-top:10px; letter-spacing:0; }

/* --- 20-10. マーキー／CTA：地の英字を少し起こし、CTA下端に黄緑の点使い --- */
.site-marquee{ top:3%; color:rgba(27,94,32,.085); }
.site-cta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c-accent); z-index:-1; }

/* --- 20-11. カード類：影を使わず罫で持たせる（温かみ側の角丸は維持） --- */
.site-cards li, .site-gates a, .site-faq details{ border-color:#cfd7c8; }
.site-gates a:hover{ box-shadow:0 12px 28px rgba(16,57,15,.10); }

/* --- 20-12. 小見出し（上）＋大見出し（下）の2段見出し --- */
.site-h2__l.site-h2__l--sm{ font-size:var(--fs-lead); font-weight:700; color:var(--c-ink-soft); letter-spacing:.06em; margin-bottom:10px; }
.site-h2__l.site-h2__l--lg{ font-size:var(--fs-h2); color:var(--c-ink); }
.site-h2--onDeep .site-h2__l.site-h2__l--sm{ color:var(--c-accent-lite); }
.site-h2--onDeep .site-h2__l.site-h2__l--lg{ color:#fff; }

/* --- 20-13. NEWS：FV直下の細帯（左に濃い見出しブロック＋一行ずつの罫） --- */
.site-news--bar{ padding:0; }
.site-news--bar .site-news__inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:stretch; gap:0; padding-inline:0; max-width:none; }
.site-news__ttl{ display:flex; align-items:center; gap:0; }
.site-news--bar .site-news__ttl{ align-self:stretch; }
.site-news__badge{ display:inline-flex; align-items:center; justify-content:center; align-self:stretch; min-width:132px; min-height:56px; padding:0 26px; background:var(--c-deep); color:#fff; font-family:var(--f-en); font-size:var(--fs-sm); font-weight:500; letter-spacing:var(--ls-en); }
.site-news__ja{ display:inline-flex; align-items:center; min-height:56px; padding:0 clamp(18px,2vw,32px); font-size:var(--fs-base); font-weight:700; letter-spacing:.08em; color:var(--c-ink-soft); border-right:1px solid var(--c-rule); }
.site-news--bar .site-news__list{ gap:0; padding:0 clamp(18px,2.4vw,36px); }
.site-news--bar .site-news__list li{ padding:6px 0; border-bottom:1px solid var(--c-rule); }
.site-news--bar .site-news__list a{ min-height:40px; }
.site-news--bar .site-news__list time{ font-size:var(--fs-sm); }
.site-news--bar .site-news__list li:first-child{ border-top:0; }
.site-news--bar .site-news__list li:last-child{ border-bottom:0; }
.site-news__more{ align-self:center; justify-self:start; margin-right:var(--gutter); white-space:nowrap; }
@media (max-width:1099px){
  .site-news--bar .site-news__inner{ grid-template-columns:1fr; }
  .site-news--bar .site-news__ttl{ border-bottom:1px solid var(--c-rule); }
  .site-news__ja{ border-right:0; }
  .site-news--bar .site-news__list{ padding:0 var(--gutter); }
  .site-news--bar .site-news__list li{ border-bottom:1px solid var(--c-rule); }
  .site-news__more{ margin:0 var(--gutter) 22px; align-self:start; justify-self:start; }
}


/* --- 20-14. /order：運送×倉庫の一貫フロー図（2分割の図版列・写真枠の代わり） --- */
.oflow{ display:flex; align-items:center; justify-content:center; padding:clamp(40px,5vw,72px) var(--gutter); background:var(--c-white); border-left:1px solid var(--c-rule); }
.oflow__inner{ display:grid; justify-items:center; gap:0; width:100%; max-width:520px; text-align:center; }
.oflow__cap{ margin:0 0 26px; padding-bottom:14px; border-bottom:1px solid var(--c-rule); width:100%; font-size:var(--fs-sm); font-weight:700; letter-spacing:.1em; color:var(--c-accent-ink); }
.oflow__node{ display:inline-flex; align-items:center; justify-content:center; min-height:60px; padding:16px 40px; border:1px solid #c0cbb6; border-radius:var(--radius); background:var(--c-base); font-size:var(--fs-base); font-weight:700; letter-spacing:.08em; }
.oflow__link{ width:2px; height:40px; background:var(--c-accent); flex:0 0 auto; }
.oflow__hub{ display:grid; gap:6px; width:100%; padding:26px 34px; border-radius:var(--radius-lg); background:var(--c-deep); color:#fff; box-shadow:0 14px 30px rgba(16,57,15,.18); }
.oflow__hub-en{ font-family:var(--f-en); font-size:var(--fs-xs); letter-spacing:var(--ls-en); color:var(--c-accent-lite); }
.oflow__hub-ja{ font-size:var(--fs-h2); font-weight:700; letter-spacing:.08em; line-height:1.2; }
.oflow__link--fan{ height:32px; }
.oflow__out{ --oflow-gap:12px; --oflow-drop:34px; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--oflow-gap); width:100%; margin-top:var(--oflow-drop); }
.oflow__out::before{ content:""; position:absolute; left:calc((100% - var(--oflow-gap) * 2) / 6); right:calc((100% - var(--oflow-gap) * 2) / 6); top:calc(var(--oflow-drop) * -1); height:2px; background:var(--c-accent); }
.oflow__out li{ position:relative; padding:18px 8px; border:1px solid var(--c-accent-ink); border-radius:var(--radius); background:var(--c-base); font-size:var(--fs-base); font-weight:700; color:var(--c-accent-ink); }
.oflow__out li::before{ content:""; position:absolute; left:50%; top:calc(var(--oflow-drop) * -1); width:2px; height:var(--oflow-drop); background:var(--c-accent); transform:translateX(-1px); }
@media (max-width:899px){ .oflow{ order:2; min-height:260px; padding:44px var(--gutter); border-left:0; border-top:1px solid var(--c-rule); } }
/* 上下配置版（本文の下に図版を敷く） */
.sub-lead--center{ margin-inline:auto; text-align:center; }
/* 本文と図版を「ひと続き」に見せる：囲みを外し、本文中央から縦罫でつなぐ */
.oflow--wide{ --oflow-in:clamp(40px,4.4vw,64px); position:relative; margin-top:clamp(28px,3.4vw,48px); border:0; border-radius:0; background:transparent; padding:var(--oflow-in) 0 0; }
.oflow--wide::before{ content:""; position:absolute; left:50%; top:0; width:2px; height:var(--oflow-in); background:var(--c-accent); transform:translateX(-1px); }
/* 図版の先頭ノードは、上から降りてくる縦罫と隙間なく繋ぐ */
.oflow--wide .oflow__inner{ margin-top:0; }
.oflow--wide .oflow__inner{ max-width:720px; }
.oflow--wide .oflow__node{ background:var(--c-white); }
.oflow--wide .oflow__out li{ background:var(--c-white); }
@media (max-width:899px){ .oflow--wide{ --oflow-in:36px; margin-top:24px; min-height:0; border-top:0; } }

/* --- 20-15. 下層の装飾（章扉英字を効かせる面／引用調の縦罫／囲みパネル） --- */
.sub-deco{ position:relative; overflow:hidden; }
.sub-deco > .site-wrap{ position:relative; z-index:1; }
.sub-mark{ position:relative; padding-left:26px; }
.sub-mark::before{ content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:3px; background:var(--c-accent); border-radius:2px; }
.sub-panel{ position:relative; padding:clamp(28px,3.4vw,44px); border:1px solid var(--c-rule); border-left:4px solid var(--c-deep); border-radius:var(--radius-lg); background:var(--c-base); }
.bg-white .sub-panel{ background:var(--c-base); }
.sub-panel .site-h2{ margin-bottom:18px; }
.sub-panel__body{ max-width:46em; }
.sub-panel::after{ content:""; position:absolute; right:clamp(20px,2.4vw,32px); top:clamp(20px,2.4vw,32px); width:34px; height:34px; border-top:2px solid var(--c-accent); border-right:2px solid var(--c-accent); border-radius:0 var(--radius) 0 0; }

/* --- 20-16. /warehouse 導入：見出し・リードを一段大きく、料金は2枠の囲みで大きく見せる --- */
.wh-intro__ttl{ font-size:clamp(34px,4.4vw,60px); line-height:1.26; margin-bottom:24px; }
.wh-intro__lead{ max-width:40em; font-size:var(--fs-lead); }
.wh-price{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,28px); margin-top:36px; }
.wh-price li{ display:grid; gap:6px; justify-items:center; padding:clamp(22px,2.6vw,32px) 20px; border:2px solid var(--c-deep); border-radius:var(--radius-lg); background:var(--c-white); text-align:center; }
.wh-price b{ font-size:clamp(24px,2.6vw,34px); font-weight:700; letter-spacing:.04em; color:var(--c-deep); line-height:1.3; }
.wh-price span{ font-size:var(--fs-base); color:var(--c-ink-soft); }
@media (max-width:719px){ .wh-price{ grid-template-columns:1fr; } }

/* --- 20-17. 深緑の締めセクション：同色のフッターと面が溶けるため一段暗い面＋黄緑の際で切る --- */
.wh-close{ position:relative; background-color:var(--c-deep-2); }
.wh-close::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c-accent); }

/* --- 20-18. 引用調の強調ブロック（深緑面／明るい面の両方で使える） --- */
.site-pull{ position:relative; margin:var(--el-gap) 0; padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,36px); border-left:4px solid var(--c-accent); border-radius:0 var(--radius) var(--radius) 0; background:rgba(255,255,255,.08); font-size:var(--fs-h3); font-weight:700; line-height:1.7; letter-spacing:.04em; }
.bg-deep .site-pull{ color:#fff; }
.bg-base .site-pull{ background:var(--c-white); color:var(--c-deep); }
.bg-white .site-pull{ background:var(--c-base); color:var(--c-deep); }
.site-pull .site-td__l{ display:block; }

/* --- 20-19. 小見出しを「声」として見せる（鉤括弧＋黄緑の下罫） --- */
.site-h2__l.site-h2__l--quote{ display:inline-block; margin-bottom:16px; padding:0 2px 6px; border-bottom:2px solid var(--c-accent); }
.site-h2__l--quote::before{ content:"「"; }
.site-h2__l--quote::after{ content:"」"; }

/* --- 20-20. /recruit「今日はどこへ行くだろう」デザイン候補用 --- */
.rt-center{ text-align:center; margin-inline:auto; }
.rt-center p:not(.site-eyebrow){ max-width:38em; margin-inline:auto; }
.rt-big{ font-size:clamp(36px,4.8vw,66px); line-height:1.24; }
.rt-deep{ position:relative; isolation:isolate; overflow:hidden; }
.rt-deep > .site-wrap{ position:relative; z-index:1; }
.rt-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,48px); max-width:56em; }
.rt-cols p{ margin:0; }
@media (max-width:899px){ .rt-cols{ grid-template-columns:1fr; } }

/* --- 20-21. /recruit/rookie「一人で走れるようになるまで」候補 --- */
/* 案A：横3ステップの番号カード */
.stepx{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin:0 0 var(--el-gap); padding:0; list-style:none; }
.stepx li{ position:relative; padding:clamp(24px,3vw,34px); border:1px solid var(--c-rule); border-top:3px solid var(--c-accent); border-radius:var(--radius-lg); background:var(--c-base); }
.stepx li + li::before{ content:"→"; position:absolute; left:calc(clamp(16px,2vw,28px) * -1); top:50%; width:clamp(16px,2vw,28px); transform:translate(0,-50%); text-align:center; font-family:var(--f-en); color:var(--c-accent-ink); }
.stepx__no{ display:block; font-family:var(--f-en); font-size:var(--fs-num); font-weight:500; line-height:1; color:var(--c-accent); margin-bottom:12px; }
.stepx b{ display:block; font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--ls-head); margin-bottom:6px; }
.stepx p{ margin:0; font-size:var(--fs-base); color:var(--c-ink-soft); }
@media (max-width:899px){ .stepx{ grid-template-columns:1fr; } .stepx li + li::before{ content:"↓"; left:50%; top:calc(clamp(16px,2vw,28px) * -1); transform:translate(-50%,0); height:clamp(16px,2vw,28px); } }

/* 案B：一本の道の上に3つのマイルストーン */
.road{ position:relative; margin:calc(var(--el-gap) + 10px) 0 var(--el-gap); padding-top:46px; }
.road::before{ content:""; position:absolute; left:0; right:0; top:20px; height:6px; border-radius:3px; background:var(--c-deep); }
.road::after{ content:""; position:absolute; left:0; right:0; top:22px; height:2px; background:repeating-linear-gradient(to right, var(--c-accent-lite) 0 18px, transparent 18px 36px); }
.road__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin:0; padding:0; list-style:none; }
.road__list li{ position:relative; text-align:center; }
.road__dot{ position:absolute; left:50%; top:-32px; width:18px; height:18px; border-radius:50%; background:var(--c-accent); border:3px solid var(--c-white); transform:translateX(-50%); }
.road__list b{ display:block; font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--ls-head); margin-bottom:6px; }
.road__list p{ margin:0; font-size:var(--fs-base); color:var(--c-ink-soft); text-wrap:pretty; }
@media (max-width:899px){ .road{ padding:0 0 0 26px; } .road::before{ left:0; top:0; bottom:0; right:auto; width:6px; height:auto; } .road::after{ left:2px; top:0; bottom:0; right:auto; width:2px; height:auto; background:repeating-linear-gradient(to bottom, var(--c-accent-lite) 0 18px, transparent 18px 36px); } .road__list{ grid-template-columns:1fr; gap:24px; } .road__list li{ text-align:left; } .road__dot{ left:-26px; top:.4em; transform:none; } }

/* 案C：期間を大きく、罫線で段を区切る */
.stepd{ margin:0 0 var(--el-gap); border-top:1px solid var(--c-rule); }
.stepd > div{ display:grid; grid-template-columns:minmax(240px,1fr) 1.4fr; gap:clamp(20px,3vw,48px); padding:clamp(22px,2.6vw,30px) 0; border-bottom:1px solid var(--c-rule); align-items:baseline; }
.stepd dt b{ display:block; font-size:clamp(24px,2.4vw,32px); font-weight:700; letter-spacing:var(--ls-head); }
.stepd__no{ display:block; font-family:var(--f-en); font-size:var(--fs-sm); letter-spacing:var(--ls-en); color:var(--c-accent-ink); margin-bottom:6px; }
.stepd dd{ margin:0; font-size:var(--fs-lead); }
@media (max-width:719px){ .stepd > div{ grid-template-columns:1fr; gap:8px; } }

/* --- 20-22. /recruit/rookie「資格も 少しずつ増やせます」候補 --- */
.lic-note{ display:inline-block; margin-top:var(--el-gap); padding:14px 20px; border:1px solid var(--c-rule); border-left:3px solid var(--c-accent-ink); border-radius:0 var(--radius) var(--radius) 0; background:var(--c-white); font-size:var(--fs-sm); color:var(--c-ink-soft); }
/* 案A */
.lic-a__ttl{ font-size:clamp(32px,4vw,56px); }
.lic-a__lead{ font-size:var(--fs-lead); }
/* 案B */
.licx{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,28px); margin:var(--el-gap) 0 0; }
.licx li{ padding:clamp(24px,3vw,34px); border:1px solid var(--c-rule); border-radius:var(--radius-lg); background:var(--c-white); }
.licx__tag{ display:inline-block; margin-bottom:12px; padding:6px 14px; border-radius:999px; background:var(--c-accent); color:#14300a; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; }
.licx b{ display:block; font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--ls-head); color:var(--c-deep); }
@media (max-width:719px){ .licx{ grid-template-columns:1fr; } }
/* 案C */
.licstep{ margin:var(--el-gap) 0 0; padding:clamp(24px,3vw,36px); border:1px solid var(--c-rule); border-radius:var(--radius-lg); background:var(--c-white); }
.licstep__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,48px); }
.licstep__row li{ position:relative; padding:18px 10px; border:1px solid #c0cbb6; border-radius:var(--radius); text-align:center; font-size:var(--fs-base); font-weight:700; }
.licstep__row li + li::before{ content:"→"; position:absolute; left:calc(clamp(28px,3.4vw,48px) * -1); top:50%; width:clamp(28px,3.4vw,48px); transform:translateY(-50%); text-align:center; font-family:var(--f-en); color:var(--c-accent-ink); }
.licstep__goal{ background:var(--c-deep); color:#fff; border-color:var(--c-deep); }
.licstep__side{ margin:22px 0 0; padding-top:18px; border-top:1px dashed var(--c-rule); font-size:var(--fs-base); font-weight:700; color:var(--c-accent-ink); }
@media (max-width:719px){ .licstep__row{ grid-template-columns:1fr; gap:26px; } .licstep__row li + li::before{ content:"↓"; left:50%; top:calc(26px * -1); transform:translateX(-50%); width:auto; height:26px; } }

/* --- 20-23. /recruit/career「次の会社は 長く走れる場所で」候補 --- */
.car-ttl{ font-size:clamp(34px,4.4vw,60px); line-height:1.24; }
/* 案A：問いを縦に大きく */
.carq{ display:grid; gap:14px; margin:var(--el-gap) 0; }
.carq li{ position:relative; padding:14px 0 14px 26px; font-size:var(--fs-h3); font-weight:700; color:var(--c-deep); border-bottom:1px solid var(--c-rule); }
.carq li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-1px); width:14px; height:2px; background:var(--c-accent); }
.carq--onDeep li{ color:#fff; border-bottom-color:var(--c-rule-deep); }
/* 案B：中央寄せ＋3カラム */
.car-center{ text-align:center; }
.car-center__lead{ max-width:38em; margin-inline:auto; font-size:var(--fs-lead); }
.carq3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin:36px 0; }
.carq3 li{ padding:clamp(24px,3vw,34px) 18px; border:1px solid var(--c-rule); border-top:3px solid var(--c-accent); border-radius:var(--radius-lg); background:var(--c-white); font-size:var(--fs-h3); font-weight:700; color:var(--c-deep); text-wrap:pretty; }
@media (max-width:899px){ .carq3{ grid-template-columns:1fr; } }
/* 案C：深緑の2カラム */
.car-deep{ position:relative; isolation:isolate; overflow:hidden; }
.car-deep > .site-wrap{ position:relative; z-index:1; }
.car-deep__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:899px){ .car-deep__grid{ grid-template-columns:1fr; } }

/* --- 20-24. /recruit/career「仕事だけの生活にしない」候補 --- */
/* 案A */
.life-deep{ position:relative; isolation:isolate; overflow:hidden; }
.life-deep > .site-wrap{ position:relative; z-index:1; }
.life-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.life-stats{ margin:0; grid-template-columns:repeat(2,1fr); }
@media (max-width:899px){ .life-grid{ grid-template-columns:1fr; } }
/* 案C：一日の時間の帯 */
.daybar{ position:relative; margin-top:var(--sec-gap); display:grid; grid-template-columns:1.6fr 1fr; gap:4px; }
.daybar > div{ display:flex; align-items:center; justify-content:center; min-height:84px; border-radius:var(--radius); font-size:var(--fs-base); font-weight:700; letter-spacing:.08em; }
.daybar__work{ background:var(--c-deep); color:#fff; }
.daybar__own{ background:var(--c-accent); color:#14300a; }
.daybar__mark{ grid-column:1 / -1; margin:14px 0 0; padding-left:26px; position:relative; font-size:var(--fs-sm); font-weight:700; color:var(--c-accent-ink); }
.daybar__mark::before{ content:""; position:absolute; left:0; top:.55em; width:14px; height:2px; background:var(--c-accent); }
@media (max-width:719px){ .daybar{ grid-template-columns:1fr; } }

/* --- 20-25. /recruit/career「休みの日は 休めるように」候補 --- */
.ba{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:clamp(16px,2vw,28px); margin:var(--el-gap) 0; }
.ba__col{ padding:clamp(24px,3vw,34px); border:1px solid var(--c-rule); border-radius:var(--radius-lg); background:var(--c-base); }
.ba__col--after{ border-color:var(--c-deep); background:var(--c-white); }
.ba__tag{ display:inline-block; margin-bottom:12px; padding:6px 16px; border-radius:999px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; background:var(--c-rule); color:var(--c-ink-soft); }
.ba__col--after .ba__tag{ background:var(--c-accent); color:#14300a; }
.ba__col p{ margin:0; font-size:var(--fs-h3); font-weight:700; line-height:1.6; color:var(--c-ink); text-wrap:pretty; }
.ba__col--before p{ color:var(--c-ink-soft); }
.ba::after{ content:"→"; grid-column:2; grid-row:1; align-self:center; font-family:var(--f-en); font-size:var(--fs-h3); color:var(--c-accent-ink); }
@media (max-width:899px){ .ba{ grid-template-columns:1fr; } .ba::after{ content:"↓"; grid-column:1; grid-row:auto; justify-self:center; } }

/* --- 20-26. 中間幅（1100〜1499px）は2段ヘッダーでナビを常時表示する --- */
@media (min-width:1100px) and (max-width:1499px){
  .sh__burger, .sh__close, .sh__scrim{ display:none; }
  .sh__inner{ flex-wrap:wrap; align-items:center; gap:6px 20px; min-height:0; padding-block:10px; padding-inline:20px; }
  .sh__logo{ order:1; }
  .sh__panel{ order:2; position:static; width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; padding:0; background:transparent; border:0; transform:none; opacity:1; visibility:visible; overflow:visible; }
  .sh__nav{ width:auto; }
  .sh__nav ul{ flex-direction:row; align-items:center; gap:10px; width:auto; }
  .sh__nav a{ min-height:44px; font-size:var(--fs-sm); border-bottom:2px solid transparent; white-space:nowrap; }
  .sh__actions{ flex-direction:row; align-items:center; gap:14px; width:auto; margin-top:0; }
  .sh__cta{ width:auto; }
}

/* --- 20-28. BLOG：3列を狭幅まで維持（参考画像の3並び／トーンは既存カードに合わせる） --- */
.site-blog__cards{ grid-template-columns:repeat(3,1fr); }
.site-blog__cards a{ padding:clamp(18px,2vw,24px); border:1px solid #cfd7c8; border-radius:var(--radius-lg); background:var(--c-base); }
.site-blog__cards a:hover{ box-shadow:0 12px 28px rgba(16,57,15,.10); }
@media (max-width:1199px){ .site-blog__cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:719px){ .site-blog__cards{ grid-template-columns:1fr; } }

/* --- 20-27. 求人情報のプルダウン（JSなし・hover / focus-within で開く） --- */
.sh__has-sub{ position:relative; }
.sh__sub{ position:absolute; left:0; top:100%; z-index:20; display:grid; min-width:220px; margin:0; padding:8px; list-style:none; background:var(--c-white); border:1px solid var(--c-rule); border-top:3px solid var(--c-accent); border-radius:0 0 var(--radius) var(--radius); box-shadow:0 14px 30px rgba(16,57,15,.14); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.sh__has-sub:hover > .sh__sub, .sh__has-sub:focus-within > .sh__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.sh__sub a{ display:flex; align-items:center; min-height:46px; padding:0 14px; border-radius:var(--radius); white-space:nowrap; }
.sh__sub a:hover{ background:var(--c-base); color:var(--c-accent-ink); }
/* ドロワー時（〜1099px）は入れ子リストとして常時展開 */
@media (max-width:1099px){
  .sh__sub{ position:static; display:grid; min-width:0; margin:2px 0 6px 16px; padding:0 0 0 14px; border:0; border-left:2px solid var(--c-accent); border-radius:0; background:transparent; box-shadow:none; opacity:1; visibility:visible; transform:none; }
  .sh__sub a{ min-height:44px; padding:0; font-size:var(--fs-sm); color:var(--c-ink-soft); }
  .sh__sub a:hover{ background:transparent; }
}

/* --- 20-29. ヘッダー レイアウト候補（hd-*.html 用） --- */
/* 案B：上部ユーティリティ帯＋下段ロゴ＋ナビ */
.hd-b .sh__util{ background:var(--c-deep); color:#fff; }
.hd-b .sh__util-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1600px; margin-inline:auto; padding:0 clamp(20px,2.4vw,40px); min-height:52px; }
.hd-b .sh__util-note{ font-size:var(--fs-xs); letter-spacing:.1em; color:rgba(255,255,255,.78); }
.hd-b .sh__util-acts{ display:flex; align-items:center; gap:18px; }
.hd-b .sh__util .sh__tel-num{ color:#fff; }
.hd-b .sh__util .sh__tel-note{ color:rgba(255,255,255,.7); }
.hd-b .sh__util .sh__cta{ min-height:40px; padding:8px 22px; }
@media (min-width:1100px){
  .hd-b .sh__inner > .sh__panel > .sh__actions{ display:none; }
  .hd-b .sh__inner{ flex-wrap:nowrap; min-height:78px; }
  .hd-b .sh__panel{ justify-content:flex-end; }
}
@media (max-width:1099px){ .hd-b .sh__util-note{ display:none; } .hd-b .sh__util-inner{ justify-content:flex-end; } }
/* 案C：ロゴ中央・ナビ左右 */
@media (min-width:1100px){
  .hd-c .sh__inner--c{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(16px,2vw,36px); max-width:1600px; }
  .hd-c .sh__inner--c > .sh__panel{ display:none; }
  .hd-c .sh__logo{ justify-items:center; text-align:center; padding-left:0; }
  .hd-c .sh__logo::before{ display:none; }
  .hd-c .sh__nav--left ul{ justify-content:flex-start; }
  .hd-c .sh__nav--right ul{ justify-content:flex-end; }
  .hd-c .sh__nav ul{ display:flex; flex-direction:row; gap:clamp(10px,1.4vw,22px); }
  .hd-c .sh__nav a{ white-space:nowrap; font-size:var(--fs-sm); }
}
@media (max-width:1099px){ .hd-c .sh__nav--left, .hd-c .sh__nav--right{ display:none; } }
/* 案D：全幅でメニューボタン */
.hd-d .sh__inner--d{ display:flex; align-items:center; gap:clamp(16px,2vw,32px); }
.hd-d .sh__d-acts{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.hd-d .sh__burger{ display:flex; position:relative; inset:auto; }
.hd-d .sh__panel .sh__actions{ display:none; }
@media (max-width:719px){ .hd-d .sh__d-acts .sh__tel{ display:none; } }

/* --- 20-30. フッター レイアウト候補（ft-*.html 用） --- */
.sf-col__ttl{ margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--c-rule-deep); font-size:var(--fs-sm); font-weight:700; letter-spacing:.12em; color:var(--c-accent-lite); }
.sf__nav .sf-col ul{ display:grid; grid-template-columns:1fr; gap:6px; margin:0; padding:0; list-style:none; }
.sf-col a{ display:inline-flex; align-items:center; min-height:40px; }
/* 案A */
.sf-a__inner{ grid-template-columns:minmax(280px,1fr) 2.2fr; }
.sf-a__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,48px); }
.sf-a__nav ul{ display:grid; }
.sf__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1200px; margin:clamp(28px,3vw,44px) auto 0; padding:20px clamp(20px,2.4vw,40px) 0; border-top:1px solid var(--c-rule-deep); }
.sf__bottom p{ margin:0; }
.sf__bottom .sf__copy{ padding:0; border-top:0; }
@media (max-width:1099px){ .sf-a__inner{ grid-template-columns:1fr; } }
@media (max-width:719px){ .sf-a__nav{ grid-template-columns:1fr; } .sf__bottom{ flex-direction:column; align-items:flex-start; } }
/* 案B：ゲート2枠 */
.sf-b__cta{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,28px); margin-bottom:clamp(36px,4vw,60px); }
.sf-gate{ display:grid; gap:6px; padding:clamp(24px,3vw,34px); border:1px solid var(--c-rule-deep); border-radius:var(--radius-lg); background:rgba(255,255,255,.05); transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sf-gate:hover{ background:rgba(255,255,255,.1); transform:translateY(-3px); }
.sf-gate__en{ font-family:var(--f-en); font-size:var(--fs-xs); letter-spacing:var(--ls-en); color:var(--c-accent-lite); }
.sf-gate__ja{ font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--ls-head); color:#fff; }
.sf-gate--accent{ background:var(--c-accent); border-color:var(--c-accent); }
.sf-gate--accent .sf-gate__en{ color:#2c4a12; }
.sf-gate--accent .sf-gate__ja{ color:#14300a; }
.sf-gate--accent:hover{ background:var(--c-accent-lite); }
@media (max-width:719px){ .sf-b__cta{ grid-template-columns:1fr; } }
/* 案C：社名を大きく */
.sf-c__inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,72px); max-width:1200px; margin-inline:auto; padding:0 clamp(20px,2.4vw,40px); }
.sf-c__logo{ margin:0; font-size:clamp(26px,3vw,40px); font-weight:700; letter-spacing:.06em; color:#fff; }
.sf-c__en{ margin:6px 0 20px; font-family:var(--f-en); font-size:var(--fs-sm); letter-spacing:var(--ls-en); color:var(--c-accent-lite); }
.sf-c__nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,32px); }
@media (max-width:899px){ .sf-c__inner{ grid-template-columns:1fr; } }

/* --- 20-31b. NEWS strip はブロック21で微調整する（下記参照） --- */
/* --- 20-31. NEWS：FV直下の1行ストリップ（最新1件だけを黄緑の帯で見せる） --- */
.site-news--strip{ padding:0; background:var(--c-accent); }
.site-news--strip .site-news__inner{ display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); max-width:1200px; margin-inline:auto; padding:0 clamp(20px,2.4vw,40px); min-height:64px; }
.site-news--strip .site-news__ttl{ margin:0; }
.site-news--strip .site-news__badge{ min-width:0; min-height:0; padding:0; background:transparent; color:#14300a; font-family:var(--f-en); font-size:var(--fs-base); font-weight:500; letter-spacing:var(--ls-en); }
.site-news--strip .site-news__list{ display:flex; flex:1 1 auto; min-width:0; gap:0; margin:0; padding:0; list-style:none; }
.site-news--strip .site-news__list li{ display:flex; align-items:center; gap:clamp(12px,1.6vw,24px); min-width:0; padding:0; border:0; }
.site-news--strip .site-news__list time{ flex:0 0 auto; font-family:var(--f-en); font-size:var(--fs-sm); color:#2c4a12; letter-spacing:.04em; }
.site-news--strip .site-news__list a{ min-height:44px; display:flex; align-items:center; min-width:0; color:#14300a; font-size:var(--fs-base); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-wrap:nowrap; }
.site-news--strip .site-news__list a:hover{ color:var(--c-deep); text-decoration:underline; text-underline-offset:4px; }
.site-news--strip .site-news__more{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; color:#14300a; font-size:var(--fs-sm); font-weight:700; letter-spacing:.06em; border-bottom:2px solid rgba(20,48,10,.35); }
.site-news--strip .site-news__more:hover{ border-bottom-color:#14300a; }
@media (max-width:719px){
  .site-news--strip .site-news__inner{ flex-wrap:wrap; gap:8px 18px; padding-block:14px; }
  .site-news--strip .site-news__list{ flex:1 1 100%; }
  .site-news--strip .site-news__list li{ flex-wrap:wrap; gap:2px 14px; }
  .site-news--strip .site-news__list a{ white-space:normal; text-wrap:pretty; }
}


/* ============================================================
   21. 参照デザイン移植（斜め境界／ゴースト英字／FV強化／ローディング）
   ------------------------------------------------------------
   ★斜め境界の切り替え方
     ・全部水平に戻す  … 下の :root の --dg を 0px にする
     ・1か所だけ水平に … その ＜section＞ から dg dg--t を外し、
                        直前セクションから dg--pb を外す
     ・角度を強くする  … --dg を大きくする（画面幅に応じた clamp）
   ★仕組み：下側のセクションだけが上辺を斜めに切り、その分だけ上へ食い込む。
     上側のセクションは矩形のまま＝重なり部分を埋める役なので、
     下辺に食い込み分の余白（dg--pb）を足すだけでよい。
     ＝ 1つの seam に触るクラスは2つだけ。レスポンシブでも clamp 1本で追従する。
   ============================================================ */

:root{
  --dg: clamp(34px, 5.2vw, 104px);   /* 斜めの落差。0px で全セクション水平になる */
  --fs-ghost: clamp(58px, 13vw, 210px);
}

/* --- 21-1. セクション余白をカスタムプロパティ経由にする（斜め分を加算できるようにする） --- */
main > section{ padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.e-tl{ --pt: var(--row-pad); padding-top: var(--pt); }
.e-bl{ --pb: var(--row-pad); padding-bottom: var(--pb); }
.e-tm{ --pt: calc(var(--sec-gap) / 2); padding-top: var(--pt); }
.e-bm{ --pb: calc(var(--sec-gap) / 2); padding-bottom: var(--pb); }

/* --- 21-2. 斜め境界 --- */
.dg{ position: relative; }
/* 上辺を斜めに切って、切った分だけ上のセクションへ食い込む */
.dg--t{
  /* 右肩上がり（左端が下がる）。左右を入れ替えたい場合はこの polygon の
     0 と var(--dg) を入れ替える＝ polygon(0 0, 100% var(--dg), 100% 100%, 0 100%) */
  clip-path: polygon(0 var(--dg), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--dg) * -1);
  padding-top: calc(var(--pt, 0px) + var(--dg));
}
/* 斜めの辺に沿う細いハイライト（面の切り替わりを「線」で拾う） */
.dg--t::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--dg) + 4px);
  clip-path: polygon(0 var(--dg), 100% 0, 100% 2px, 0 calc(var(--dg) + 2px));
  background: linear-gradient(270deg, rgba(165,214,110,.5) 0%, rgba(165,214,110,0) 72%);
  z-index: 3;
  pointer-events: none;
}
.dg--t.dg--hl-light::before{ background: linear-gradient(270deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 72%); }
/* 上側のセクション：食い込まれる分を下に足す */
.dg--pb{ padding-bottom: calc(var(--pb, 0px) + var(--dg)); }
@media (prefers-reduced-motion: no-preference){
  .dg--t{ transition: clip-path var(--dur) var(--ease); }
}

/* --- 21-3. ゴースト英字（深緑面の背面。決定②＝深緑面は縦罫を外してこちらに置き換える） --- */
.bg-deep{ background-image: none; }
.site-ghost{
  position: absolute;
  z-index: 0;
  font-family: var(--f-en);
  font-weight: 300;
  font-size: var(--fs-ghost);
  line-height: .82;
  letter-spacing: .12em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.19);
  pointer-events: none;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px currentColor){ .site-ghost{ color: rgba(255,255,255,.09); } }
.site-ghost--r{ right: -.06em; top: 50%; transform: translateY(-50%); }
.site-ghost--bl{ left: -.04em; bottom: -.16em; }

/* --- 21-4. FV --- */
.site-fv{ min-height: 100svh; padding-top: clamp(96px, 12vw, 160px); }
/* FV→NEWS を切れ目なく繋ぐ（下端の濃度を揃える） */
/* 下端の濃度は .site-msg の上端と同値にして、境目を消す */
.site-fv::before{ background: linear-gradient(to top, rgba(8,30,10,.62) 0%, rgba(8,30,10,.5) 44%, rgba(8,30,10,.08) 86%); }

/* 背面を流れる極太アウトライン英字 */
.site-fv__ghost{
  position: absolute;
  left: 0; right: 0;
  top: 22vh;
  z-index: 0;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  overflow: hidden;
  pointer-events: none;
}
.site-fv__ghost > span{
  flex: 0 0 auto;
  display: block;
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(76px, 15vw, 250px);
  line-height: .9;
  letter-spacing: .1em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,.17);
  animation: site-drift 42s linear infinite;
  padding-right: .3em;
}
@supports not (-webkit-text-stroke: 1px currentColor){ .site-fv__ghost > span{ color: rgba(255,255,255,.08); } }
@keyframes site-drift{ from{ transform: translateX(0); } to{ transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .site-fv__ghost > span{ animation: none; } }

/* 右端の縦組み英字 */
.site-fv__side{
  position: absolute;
  top: 0; bottom: 0;
  right: clamp(12px, 2.4vw, 34px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  writing-mode: vertical-rl;
  font-family: var(--f-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .38em;
  color: rgba(255,255,255,.78);
  pointer-events: none;
}
.site-fv__side::before{ content: ""; display: block; width: 1px; height: 56px; background: rgba(255,255,255,.45); }
.site-fv__side em{ font-style: normal; color: var(--c-accent-lite); }
@media (max-width: 899px){ .site-fv__side{ display: none; } }

/* キャッチを階段状に組む */
.site-fv__catch{ display: grid; justify-items: start; }
.site-fv__catch .site-fv__l2{ margin-left: clamp(24px, 7vw, 150px); }

/* SCROLL を左下へ（右端は縦組み英字が占める） */
.site-fv__scroll{
  right: auto;
  left: var(--gutter);
  writing-mode: vertical-rl;
  letter-spacing: .3em;
}
.site-fv__scroll::after{
  height: 56px;
  background: linear-gradient(to bottom, var(--c-accent) 0 26%, rgba(255,255,255,.32) 26% 100%);
  background-size: 100% 340%;
  animation: site-cue 2.1s ease-in-out infinite;
}
@keyframes site-cue{ from{ background-position: 0 -120%; } to{ background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce){ .site-fv__scroll::after{ animation: none; } }
/* 版面の外に置き場がない幅では出さない（本文と重なるため） */
@media (max-width: 1359px){ .site-fv__scroll{ display: none; } }

/* --- 21-5. NEWS ストリップ：FV と地続きに見せる --- */
.site-news--strip .site-news__inner{ min-height: 72px; }

/* --- 21-6. 採用（深緑面）：ゴースト英字を主役の背面に --- */
.site-recruit{ overflow: hidden; }

/* --- 21-7. CTA：斜め境界に合わせて下端の黄緑罫を外す（斜め辺のハイライトが役目を継ぐ） --- */
.site-cta.dg--pb::after{ display: none; }
.site-cta.dg--t{ padding-top: calc(clamp(56px, 7vw, 96px) + var(--dg)); }
.site-cta.dg--pb{ padding-bottom: calc(clamp(56px, 7vw, 96px) + var(--dg)); }

/* --- 21-8. フッターも同じ斜めで受ける --- */
.sf.dg--t{ padding-top: calc(clamp(48px, 6vw, 80px) + var(--dg)); }

/* --- 21-9. ローディング（初回のみ／?load=1 で強制再生） --- */
html.is-loading{ overflow: hidden; }
.site-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-deep);
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.site-loader.is-done{ opacity: 0; visibility: hidden; }
.site-loader__ghost{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(76px, 19vw, 300px);
  line-height: .8;
  letter-spacing: .1em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  pointer-events: none;
}
.site-loader__body{
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
}
.site-loader__logo{
  margin: 0;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: .18em;
  color: #fff;
}
.site-loader__en{
  margin: 0;
  font-family: var(--f-en);
  font-size: var(--fs-xs);
  letter-spacing: .34em;
  color: var(--c-accent-lite);
}
.site-loader__bar{
  width: min(300px, 64vw);
  height: 2px;
  margin-top: 8px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.site-loader__bar > span{
  display: block;
  width: 100%; height: 100%;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: site-load 1.5s var(--ease) forwards;
}
@keyframes site-load{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .site-loader__bar > span{ animation: none; transform: scaleX(1); } }

/* --- 21-10. 深緑面の上の主ボタンは黄緑（深緑ボタンだと地と同化する） --- */
.bg-deep .site-btn--accent{ background: var(--c-accent); color: #14300a; }
.bg-deep .site-btn--accent:hover{ background: var(--c-accent-lite); }
.site-cta__acts .site-btn--onDeep{ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.site-cta__acts .site-btn--onDeep:hover{ background: rgba(255,255,255,.12); color: #fff; }


/* ============================================================
   22. FV＋MESSAGE ゾーン（写真をピン留めして2画面を通過させる）
   ------------------------------------------------------------
   ・.site-hz__bg が sticky で写真を画面に固定し、
     ゾーンを抜けるところで自然に流れ去る（margin-bottom の負値で場所を取らない）
   ・スクロールに連れて写真は ぼけ＋寄る（scroll-driven animation・JS不要）
   ・2画面目は深緑のベールが濃くなり、下端で面と溶けきる＝NEWS へ切れ目なく渡す
   ★ピン留めをやめる場合は .site-hz__bg の position を static にする
   ============================================================ */
.site-hz{ position: relative; background: var(--c-deep); timeline-scope: --hz; }
.site-hz__bg{
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 0;
  overflow: hidden;
  background: var(--c-deep);
}
.site-hz__media{
  position: absolute;
  inset: -4%;
  border: 0;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 28px var(--gutter);
  transform-origin: 52% 46%;
  will-change: transform, filter;
}
.site-hz__media.site-hz__media,
[data-ph].site-hz__media{
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px),
    linear-gradient(97deg, var(--c-deep) 0 52%, var(--c-deep-2) 52%);
  border: 0;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .site-msg{ view-timeline-name: --hz; view-timeline-axis: block; }
    .site-hz__media{
      animation: site-hz-zoom linear both;
      animation-timeline: --hz;
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes site-hz-zoom{
  from{ transform: scale(1); filter: blur(0px) saturate(1); }
  to{ transform: scale(1.14); filter: blur(7px) saturate(.86); }
}

/* FV は写真を持たなくなる。スクリムだけを残して重ねる */
.site-fv{ background-color: transparent; }
.site-fv__media{ display: none; }

/* 2画面目 */
.site-msg{
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(72px, 12vh, 140px);
  color: #fff;
  background: linear-gradient(180deg,
    rgba(8,30,10,.62) 0%,
    rgba(8,30,10,.66) 30%,
    rgba(16,57,15,.88) 64%,
    var(--c-deep) 93%,
    var(--c-deep) 100%);
}
.site-msg__inner{ position: relative; z-index: 2; }
.site-msg__lead{
  max-width: 26em;
  margin: 0;
  font-family: var(--f-min);
  font-size: clamp(21px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(255,255,255,.96);
  text-wrap: pretty;
}
/* 黄緑の短い罫を頭に置いて「語り出し」を作る */
.site-msg__inner::before{
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-bottom: clamp(24px, 3vw, 40px);
  background: var(--c-accent);
}
@media (max-width: 719px){
  .site-msg{ min-height: 88svh; }
  .site-msg__lead{ line-height: 1.95; }
}

/* --- 22-1. 流れる英字が斜めの切り口で見切れないよう、落差ぶんだけ下げる --- */
.site-statement.dg--t .site-marquee{ top: calc(var(--dg) + 10px); }

/* --- 22-2. ベース地のセクションにも実体の背景を持たせる
       （transparent のままだと斜めに切っても色が変わらず、
         上のセクションの水平な下端が見えてしまう。
         body と同じ指定なので見た目は変わらない） --- */
.bg-base{
  background-color: var(--c-base);
  background-image: linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--c-rulegrid) calc(12.5% - 1px) 12.5%, transparent 12.5% calc(37.5% - 1px), var(--c-rulegrid) calc(37.5% - 1px) 37.5%, transparent 37.5% calc(62.5% - 1px), var(--c-rulegrid) calc(62.5% - 1px) 62.5%, transparent 62.5% calc(87.5% - 1px), var(--c-rulegrid) calc(87.5% - 1px) 87.5%, transparent 87.5% 100%);
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: var(--rulegrid-w) 100%;
}

/* --- 22-3. MESSAGE → NEWS帯 → SERVICE は水平のまま（決定：帯は水平で受ける）。
       斜めにしたくなった場合は NEWS に dg dg--t dg--sm dg--pb、
       SERVICE に dg--t dg--sm を足すと帯ごと平行四辺形になる --- */
.dg--sm{ --dg: clamp(20px, 2.6vw, 46px); }
.site-news--strip.dg--t .site-news__inner{ min-height: 56px; }
.site-news--strip.dg--t::before{ background: linear-gradient(270deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 72%); }

/* --- 22-4. 斜めで食い込むセクションは、直前のセクション（z-index を持つ .site-msg 等）
       より前面に置く。同値なので DOM 順＝下のセクションが上に重なる --- */
.dg{ z-index: 2; }

/* --- 22-5. NEWS帯を前面に。直前の .site-msg が z-index:1 を持つため、
       帯にも重なり順を与えないと背面へ潜る --- */
.site-news--strip{ position: relative; z-index: 2; }


/* ============================================================
   23. 参考サイト（isomurass.jp）から読み取った「章の型」の移植
   ------------------------------------------------------------
   全セクションの頭を次の3段で統一する。ここがサイトの背骨。
     ① 巨大アウトライン英字（章の名前）
     ② ●＋日本語ラベル（英字ラベルのセクションは①に昇格させて②を省く）
     ③ 2段見出し（小見出し／大見出し）
   ★参考サイトは無機質・先進的に振れているので、こちらは
     大見出しを明朝にして温かみ側へ寄せている（幾何学的な線の装飾は入れない）。
   ============================================================ */

/* --- 23-1. ① 巨大アウトライン英字（章の名前） --- */
.sec-en,
.site-eyebrow--big{
  display: block;
  position: static;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-family: var(--f-en);
  font-size: var(--fs-chapter);
  font-weight: 300;
  line-height: .88;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #c3cbbe;
  pointer-events: none;
  user-select: none;
}
.sec-en--onDeep,
.site-eyebrow--big.site-eyebrow--onDeep{ -webkit-text-stroke-color: rgba(255,255,255,.34); }
@supports not (-webkit-text-stroke: 1px currentColor){
  .sec-en, .site-eyebrow--big{ color: #c3cbbe; }
  .sec-en--onDeep, .site-eyebrow--big.site-eyebrow--onDeep{ color: rgba(255,255,255,.34); }
}
/* 2分割の列の中では版面が半分なので一段小さく */
.site-split__inner .sec-en,
.site-split__inner .site-eyebrow--big,
.site-duo__body .sec-en,
.site-duo__body .site-eyebrow--big{ font-size: var(--fs-chapter-s); }

/* --- 23-2. ② ●＋日本語ラベル --- */
.site-eyebrow--dot{
  position: relative;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  padding-left: 22px;
  font-family: var(--f-ja);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-ink-soft);
  text-transform: none;
}
.site-eyebrow--dot::before{
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}
.site-eyebrow--onDeep.site-eyebrow--dot{ color: rgba(255,255,255,.9); }
/* 英字を①に昇格させたセクションは、①と③の間を②と同じだけ空ける */
.site-eyebrow--big{ margin-bottom: clamp(20px, 2.6vw, 32px); }

/* --- 23-3. ③ 大見出しを明朝にする（温かみ側への振り分け） --- */
.site-h2__l.site-h2__l--lg{
  font-family: var(--f-min);
  font-weight: 600;
  font-size: clamp(31px, 3.9vw, 55px);
  line-height: 1.38;
  letter-spacing: .02em;
}
.site-h2__l.site-h2__l--sm{ font-weight: 500; letter-spacing: .1em; }
.site-cta__ttl{ font-family: var(--f-min); font-weight: 600; }
.site-blog__ttl{ font-family: var(--f-min); font-weight: 600; font-size: var(--fs-h2); }

/* --- 23-4. 章頭のまとまりと本文の間を広く取る（参考サイトの余白の取り方） --- */
.site-h2{ margin-bottom: clamp(26px, 3vw, 40px); }
.site-recruit__text, .site-statement__inner p:first-of-type{ margin-top: 0; }

/* --- 23-5. 2分割の列は版面が半分。大見出しを一段落として不自然な折り返しを防ぐ --- */
.site-split__inner .site-h2__l--lg,
.site-duo__body .site-h2__l--lg{ font-size: clamp(24px, 2.5vw, 38px); line-height: 1.45; }

/* --- 23-6. 見出しは語の途中で折らない（見出しはすべて「〇〇 △△」の空白区切り）。
       収まらないときだけ通常の折り返しに戻す --- */
.site-h2__l{ word-break: keep-all; overflow-wrap: break-word; }

/* --- 23-7. OUR HISTORY：流れる英字と章頭の巨大英字がぶつかるので、
       流れる英字はセクション下端へ回す（章頭＝OUR HISTORY、下端＝SINCE 1984 の二層） --- */
.site-statement.dg--t .site-marquee{ top: auto; bottom: 0; color: rgba(27,94,32,.07); }


/* --- 23-8. CTA のゴースト英字が BLOG の斜めのくさびに食われるので、
       落差ぶんだけ持ち上げて全高を緑面の中に収める --- */
.site-cta .site-ghost--bl{ bottom: calc(var(--dg) + 16px); }

/* --- 23-9. OUR STANCE：大きい枠のラベルは小さい枠に隠れないよう右上へ逃がす --- */
.site-duo__fig--lg{ align-items: flex-start; justify-content: flex-end; padding: 16px 18px; }



/* ============================================================
   24. アウトライン英字の書体（章頭・背面・ローディング）
   ------------------------------------------------------------
   Outfit は1文字が複数パーツの重ねで作られており、text-stroke すると
   「E」の縦画と横画の継ぎ目が線として出てしまう。
   Oswald 500 は1文字が単一の輪郭なので、1文字まるごとのアウトラインになる。
   ★小さい英字ラベル・数字・電話番号は従来どおり Outfit（--f-en）のまま。
     大きく図形として見せる英字だけ --f-out を使う。
   ============================================================ */
:root{ --f-out: "Oswald", "Outfit", sans-serif; }
.sec-en,
.site-eyebrow--big,
.site-ghost,
.site-fv__ghost > span,
.site-loader__ghost,
.site-marquee,
.sub-hero__en,
.site-chapter{
  font-family: var(--f-out);
  font-weight: 500;
  letter-spacing: .08em;
}

/* --- 24-1. FV背面の流れる英字：行ボックスが詰まりすぎて上下が切れるので余裕を持たせる --- */
.site-fv__ghost{ top: 20vh; }
.site-fv__ghost > span{ line-height: 1.24; }

/* --- 24-2. アウトライン英字は行ボックスが詰まっていると上下が切れる。
       Oswald は字面が高いので、全ての大英字に行の余裕を持たせる --- */
.sec-en,
.site-eyebrow--big,
.site-ghost,
.site-loader__ghost,
.site-marquee,
.sub-hero__en,
.site-chapter{ line-height: 1.24; }
/* 行を広げたぶん、章頭と下の要素の間が空きすぎるので詰め直す */
.sec-en, .site-eyebrow--big{ margin-bottom: clamp(10px, 1.4vw, 18px); }
.site-eyebrow--big{ margin-bottom: clamp(14px, 1.8vw, 24px); }


/* ============================================================
   25. HOME デザインレビューの反映
   ============================================================ */

/* --- 25-1. FV：キャッチを主役に戻す（背面英字が主役を食っていた） --- */
.site-fv{ justify-content: flex-end; padding-bottom: clamp(96px, 16vh, 200px); }
.site-fv__catch{ font-size: clamp(42px, 7.2vw, 100px); }
.site-fv__ghost{ top: 26vh; }
.site-fv__ghost > span{ -webkit-text-stroke-color: rgba(255,255,255,.085); }
@supports not (-webkit-text-stroke: 1px currentColor){ .site-fv__ghost > span{ color: rgba(255,255,255,.05); } }

/* --- 25-2. 2分割の写真は面の端まで届かせる（セクション余白は文字側だけが持つ）。
       これで NEWS帯の直下から写真が始まり、下は斜めの境界まで届く --- */
.site-split.e-tl, .site-split.e-tm{ padding-top: 0; }
.site-split.e-bl, .site-split.e-bm, .site-split.dg--pb{ padding-bottom: 0; }
.site-split .site-split__inner{
  padding-top: calc(var(--pt, 0px) + clamp(48px, 6vw, 84px));
  padding-bottom: calc(var(--pb, 0px) + clamp(48px, 6vw, 84px));
}
.site-split.dg--pb .site-split__inner{
  padding-bottom: calc(var(--pb, 0px) + var(--dg) + clamp(48px, 6vw, 84px));
}
@media (max-width: 899px){
  .site-split .site-split__inner{ padding-bottom: clamp(28px, 5vw, 40px); }
  .site-split.dg--pb .site-split__inner{ padding-bottom: clamp(28px, 5vw, 40px); }
}

/* --- 25-3. 章頭：英字＋●ラベルを1つの塊として詰め、見出しとの間を大きく空ける --- */
.sec-en{ margin-bottom: clamp(6px, .8vw, 12px); }
.site-eyebrow--dot{ margin-bottom: clamp(30px, 4vw, 54px); }
.site-eyebrow--big{ margin-bottom: clamp(30px, 4vw, 54px); }

/* --- 25-4. 採用：ボタンの下の空洞を詰める --- */

.site-recruit .site-stats{ margin-bottom: clamp(32px, 4vw, 52px); }

/* --- 25-5. OUR STANCE：2枚のサイズ差を大きくして「重ねただけ」から脱する --- */
.site-duo__fig--lg{ min-height: clamp(340px, 38vw, 540px); }
.site-duo__figs{ padding-bottom: 76px; }
.site-duo__fig--sm{ width: 42%; min-height: 168px; }
@media (max-width: 899px){
  .site-duo__figs{ padding-bottom: 48px; }
  .site-duo__fig--sm{ width: 48%; min-height: 120px; }
}

/* --- 25-6. 車両紹介：2分割が3回続いてテンプレート感が出るので、
       ここだけ全幅の帯写真＋その下にテキスト、という別のリズムにする --- */
.site-split--band{ display: block; }
.site-split--band .site-split__media{ width: 100%; min-height: 0; aspect-ratio: 21 / 8; }
.site-split--band .site-split__body{ display: block; overflow: visible; }
.site-split--band .site-split__inner{
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
}
.site-split--band .site-split__inner > p:not(.site-eyebrow){ max-width: 44em; }
@media (max-width: 899px){ .site-split--band .site-split__media{ aspect-ratio: 16 / 9; } }

/* --- 25-7. CTA：2つのボタンの幅を揃えて主従をはっきりさせる。背面英字は文字に被せない --- */
.site-cta__acts .site-btn{ min-width: min(300px, 84vw); }
.site-cta .site-ghost--bl{ -webkit-text-stroke-color: rgba(255,255,255,.1); }
@supports not (-webkit-text-stroke: 1px currentColor){ .site-cta .site-ghost--bl{ color: rgba(255,255,255,.06); } }


/* ============================================================
   26. 画像プレースホルダーの共通ルール（サイト全体・以降追加分にも自動適用）
   ------------------------------------------------------------
   ★背景は薄いグレー1色。外周の破線・点線ガイドは出さない。注釈も出さない。
     理由：CMS（CueZilla等）へ組み込むと点線が本番に残るため、最初から出さない。
   ★撮影素材の指示は HTML の data-ph 属性に残してある（画面には出ない）。
   ============================================================ */
[data-ph],
[data-ph]:not(.site-fv__media),
.site-hz__media,
[data-ph].site-hz__media,
.site-hz__media.site-hz__media{
  background: #c9cec9 !important;
  border: 0 !important;
}
.site-ph__label,
.site-fv__phlabel{ display: none !important; }

/* 今後 image-slot を使う場合も同じ見え方にする */
image-slot{ background: #c9cec9 !important; }
image-slot::part(ring){ display: none !important; }
image-slot::part(frame){ background: transparent !important; }


/* ============================================================
   27. 角丸を全廃（カクッとした硬さを出す）
   ------------------------------------------------------------
   ★トークンを 0 にすることで、var(--radius) / var(--radius-lg) を
     使っている全部品（カード・写真枠・ボタン・パネル・表）が一括で角ゼロになる。
   ★真円のドット（●ラベル・タイムライン・ロードマップ）は「角丸」ではなく
     図形そのものなので円のまま残している。
   ============================================================ */
:root{ --radius: 0px; --radius-lg: 0px; }
.site-skip,
.sh__logo::before,
.site-badges li,
.site-ph__label,
.licx__tag,
.ba__tag,
.wh-price li,
.site-blog__thumb,
.site-blog__cards a,
.site-cards li,
.site-gates a,
.site-faq details,
.site-duo__fig--lg,
.site-duo__fig--sm,
.site-split__media,
.site-hz__media,
.stepx li,
.licstep,
.licstep__row li,
.carq3 li,
.daybar > div,
.sf-gate,
.oflow__node,
.oflow__hub,
.oflow__out li,
.lic-note,
.site-pull,
.sub-panel,
.sub-panel::after,
.site-places iframe,
.site-places .site-map-ph,
[data-ph]{ border-radius: 0 !important; }
:focus-visible{ border-radius: 0; }

/* --- 26-1. FV だけは撮影素材が入るまで深緑の面で見せる（完成イメージの伝達を優先）。
       グレーの共通ルールに揃えたい場合は、この2行を消す --- */
.site-hz__media, .site-hz__media.site-hz__media, [data-ph].site-hz__media{
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px),
    linear-gradient(97deg, var(--c-deep) 0 52%, var(--c-deep-2) 52%) !important;
}

/* --- 27-1. OUR STANCE：小さい方の写真が小さすぎたので大きくする --- */
.site-duo__figs{ padding-bottom: 118px; }
.site-duo__fig--sm{ width: 60%; min-height: 268px; }
@media (max-width: 899px){
  .site-duo__figs{ padding-bottom: 72px; }
  .site-duo__fig--sm{ width: 62%; min-height: 160px; }
}

/* --- 27-2. OUR STANCE と 倉庫・保管サービス の間の余白を広げる
       （同じ白面が続く境目なので、余白でしか区切りを作れない） --- */



/* ============================================================
   28. 和文はゴシックで統一（明朝は使わない）
   ============================================================ */
.site-fv__catch,
.site-msg__lead,
.site-h2__l.site-h2__l--lg,
.site-cta__ttl,
.site-blog__ttl,
.wh-intro__ttl,
.car-ttl,
.lic-a__ttl,
.rt-big{
  font-family: var(--f-ja);
  font-weight: 700;
}
.site-msg__lead{ font-weight: 500; }


/* ============================================================
   29. 浮いた面のパネル＋またぎ写真（倉庫・保管サービス）
   ------------------------------------------------------------
   全幅の面ばかりが続くとリズムが出ないので、ここだけ左右に白を残した
   「浮いた深緑の面」にする。面の右下を斜めに切り、その切り口へ写真を差し込む。
   写真は面の上下からはみ出して重なる（＝セクション境界のまたぎと同じ手つき）。
   ★はみ出し量は --ov、斜めの切り口は .site-panel__face の clip-path で調整する。
   ============================================================ */
.site-panel{ position: relative; --pad: clamp(38px, 4.6vw, 74px); }

.site-panel__grid{
  --ov: clamp(22px, 3.6vw, 56px);
  position: relative;
  padding-block: var(--ov);
}
.site-panel__face{
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--c-deep);
  color: #fff;
  padding: var(--pad);
  padding-right: min(46%, 520px);
  /* 切り口はセクション境界と同じ角度・同じ向き（右肩上がり）に揃える。
     サイト全体で角度は2種類だけ＝セクション境界の緩い斜めと、FVの署名7°。
     ★深さは --dgp。0px にすると水平な矩形パネルに戻る。 */
  --dgp: 0px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--dgp)), 0 100%);
}
.site-panel__body{ position: relative; z-index: 2; }
.site-panel__face p{ color: rgba(255,255,255,.92); max-width: 34em; }
.site-panel__ghost{
  left: -.03em;
  bottom: -.2em;
  font-size: clamp(52px, 9vw, 150px);
  -webkit-text-stroke-color: rgba(255,255,255,.13);
}
@supports not (-webkit-text-stroke: 1px currentColor){ .site-panel__ghost{ color: rgba(255,255,255,.07); } }
/* 写真は版面の外（ビューポート右端）まで抜けて、パネルの右辺をまたぐ */
.site-panel__media{
  position: absolute;
  z-index: 2;
  top: 0;
  right: calc(min(0px, (var(--wrap) + var(--gutter) * 2 - 100vw) / 2) - var(--gutter));
  height: 74%;
  width: min(52%, 620px);
}
/* パネルの上の部品は明るい面用の色なので、深緑面用に振り替える */
.site-panel__face .site-badges{ margin-bottom: var(--el-gap); }
.site-panel__face .site-badges li{ border-color: var(--c-accent-lite); color: var(--c-accent-lite); }
.site-panel__face .site-textlink{ color: var(--c-accent-lite); }

@media (max-width: 899px){
  .site-panel__grid{ padding-block: 0; }
  .site-panel__face{ padding-right: clamp(24px, 6vw, 40px); --dgp: 0px; clip-path: none; }
  .site-panel__media{ position: static; width: 100%; aspect-ratio: 16 / 10; }
}

/* パネル内のゴースト英字は章頭の英字と重複するので使わない */
.site-panel__ghost{ display: none; }
@media (max-width: 899px){
  .site-panel__media{ right: auto; }
}

/* --- 29-1. 章頭の型を全セクションで揃える（巨大英字 → ●日本語ラベル → 見出し）。
       BLOG は一覧ブロックなので大見出しが「ブログ」＝●ラベル位置を兼ねる --- */
/* ●日本語ラベルは全セクション同一（BLOG は見出し要素だが見え方は他と揃える） */
.site-blog__ttl--dot{
  position: relative;
  margin: 0 0 clamp(30px, 4vw, 54px);
  padding-left: 22px;
  font-family: var(--f-ja);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.site-blog__ttl--dot::before{
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* --- 29-2. 流れる英字は OUR HISTORY の下端から、下の全幅写真の上へ移した（§31 参照）。
       移したので OUR HISTORY 側の高さ確保は不要になった --- */


/* ============================================================
   30. 章頭の文字サイズを全セクションで統一
   ------------------------------------------------------------
   2分割の列内と全幅セクションでサイズを分けていたため、
   同じ役割の要素が違う大きさに見えていた。
   最も狭い列（2分割のテキスト列＝約600px）で一番長いラベル
   「OUR STANCE」が収まるサイズに全体を合わせる。
   ============================================================ */
.sec-en,
.site-split__inner .sec-en,
.site-duo__body .sec-en{ font-size: clamp(44px, 6.4vw, 94px); }

.site-h2__l.site-h2__l--lg,
.site-split__inner .site-h2__l--lg,
.site-duo__body .site-h2__l--lg{ font-size: clamp(28px, 3.4vw, 46px); line-height: 1.42; }

.site-h2__l.site-h2__l--sm,
.site-split__inner .site-h2__l--sm,
.site-duo__body .site-h2__l--sm{ font-size: var(--fs-lead); }


/* ============================================================
   31. 流れる英字を全幅写真の上に重ねる（車両紹介の帯写真）
   ============================================================ */
.site-split--band .site-split__media{ position: relative; overflow: hidden; }
.site-marquee--onPhoto{
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: clamp(52px, 9vw, 148px);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.62);
}
@supports not (-webkit-text-stroke: 1px currentColor){ .site-marquee--onPhoto{ color: rgba(255,255,255,.4); } }
.site-marquee--onPhoto span{ animation-duration: 46s; }

/* --- 31-1. 全幅の帯写真：高さを半分にし、写真は固定（スクロールで動かない）にする。
       ★狭幅・タッチ端末では fixed が効かない／重いので通常のカバー表示に戻す --- */
.site-split--band .site-split__media{
  aspect-ratio: 21 / 4;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 899px){
  .site-split--band .site-split__media{ aspect-ratio: 16 / 7; background-attachment: scroll; }
}

/* --- 31-2. 車両紹介：下余白を詰める --- */
.site-split--band.dg--pb .site-split__inner{
  padding-bottom: calc(var(--pb, 0px) + var(--dg) + clamp(48px, 6vw, 84px) - 100px);
}

/* --- 31-3. OUR STANCE 小画像：幅を%で持たせると画面が広いほど
       ビューポート左端までの距離が伸びて大画像に届かず、間に余白ができる。
       幅ではなく「右端の位置」で決めて、どの幅でも必ず大画像に重なるようにする --- */
.site-duo__fig--sm{ width: auto; right: 36%; min-height: 380px; }
.site-duo__figs{ padding-bottom: 180px; }
@media (max-width: 899px){
  .site-duo__fig--sm{ right: 34%; min-height: 150px; }
  .site-duo__figs{ padding-bottom: 76px; }
}

/* --- 31-4. OUR STANCE 大画像：右端は動かさず、左へ広げる --- */
.site-duo__fig--lg{ margin-left: calc(clamp(24px, 4.4vw, 96px) * -1); }
@media (max-width: 899px){ .site-duo__fig--lg{ margin-left: calc(var(--gutter) * -1); } }

/* --- 31-5. 小画像：左端は動かさず、右側で幅を詰める --- */
.site-duo__fig--sm{ right: 44%; }
@media (max-width: 899px){ .site-duo__fig--sm{ right: 40%; } }

/* --- 31-6. 倉庫・保管サービス：章頭（巨大英字＋●ラベル）もカードの中に入れる --- */
.site-panel__face .sec-en{ margin-bottom: clamp(6px, .8vw, 12px); }
.site-panel > .site-wrap > .sec-en{ display: none; }

/* --- 31-7. 小画像：もう一段詰める --- */
.site-duo__fig--sm{ right: 56%; }
@media (max-width: 899px){ .site-duo__fig--sm{ right: 42%; } }

/* --- 31-8. 倉庫カード右の写真：上方向へさらに出して浮遊感を強める --- */
.site-panel__grid{ --ov: clamp(38px, 5.8vw, 104px); }
.site-panel__media{ top: calc(var(--ov) * -.65); height: 76%; }
@media (max-width: 899px){ .site-panel__media{ top: auto; height: auto; } }


/* ============================================================
   32. 左端を全セクションで揃える
   ------------------------------------------------------------
   基準＝.site-wrap（max-width: --wrap + --gutter*2／padding-inline: --gutter）。
   ★セクション内で読み幅を絞りたいときは、外側の版面ではなく
     中の段落に max-width を掛ける（外側に掛けると中央寄せになって左端がずれる）。
   ============================================================ */
.site-statement__inner{
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
}
.site-statement__inner p{ max-width: 46em; }

.site-news--strip .site-news__inner{
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  padding-inline: var(--gutter);
}


/* ============================================================
   33. 縦の余白を規約どおりに統一
   ------------------------------------------------------------
   ① 背景が切り替わる境目   … P_large（--row-pad）を両側が持つ
   ② 同一背景が続く境目     … --gap-same を半分ずつ
   ③ 斜めで食い込む側        … ①②に落差（--dg）を加算
   ★場当たりの個別指定は置かない。値を変えるときはこの3つのトークンだけを触る。
   ============================================================ */
:root{ --gap-same: clamp(88px, 10vw, 168px); }
.e-tm{ --pt: calc(var(--gap-same) / 2); }
.e-bm{ --pb: calc(var(--gap-same) / 2); }

/* テキスト列の左端を2分割と大小2枚組で揃える（9px のずれを解消） */
.site-duo__grid{ grid-template-columns: 1fr 1fr; }

/* --- 33-1. カード内の文章の左端を他セクションに揃える。
       カードをパディングぶんだけ左へずらす＝版面より左へはみ出し、
       右の写真のはみ出しと呼応する --- */
.site-panel__grid{ margin-left: calc(var(--pad) * -1); }
@media (max-width: 899px){ .site-panel__grid{ margin-left: 0; } }


/* ============================================================
   34. MESSAGE：左余白はそのまま、折り返し幅を左余白ぶん右へ広げる
   ------------------------------------------------------------
   --lm ＝ 版面の左余白（画面幅にかかわらず他セクションの左端と同じ値）
   ============================================================ */
:root{
  --lm: calc(max(0px, (100vw - (var(--wrap) + var(--gutter) * 2)) / 2) + var(--gutter));
}
.site-msg__inner{
  max-width: none;
  margin-inline: 0;
  padding-left: var(--lm);
  padding-right: var(--gutter);
}
.site-msg__lead{ max-width: calc(26em + var(--lm)); }
@media (max-width: 719px){
  .site-msg__lead{ max-width: none; }
}

/* --- 34-1. MESSAGE：3つの段落に分け、文字を一段小さくする --- */
.site-msg__lead{
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.95;
  margin: 0 0 1.4em;
}
.site-msg__lead:last-child{ margin-bottom: 0; }

/* --- 34-2. MESSAGE：折り返し幅をさらに広げ、ブロックごと中央に置く（文字は左揃え） --- */
.site-msg__inner{
  max-width: calc(var(--wrap) + var(--gutter) * 2 + 200px);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.site-msg__lead{ max-width: none; text-align: left; }

/* --- 34-3. MESSAGE：版面（--wrap）に戻す。左端も右端も他セクションと同じ --- */
.site-msg__inner{ max-width: calc(var(--wrap) + var(--gutter) * 2); }

/* --- 34-4. MESSAGE：改行位置を読点（文節）で決める。
       狭い幅では強制改行をやめて自然な折り返しに戻す --- */
.site-msg__l{ display: block; }
@media (max-width: 899px){ .site-msg__l{ display: inline; } }

/* ============================================================
   35. 質感（① FV〜MESSAGE を1枚の連続グラデで地続きにする ／ ② 白以外の面にノイズ）
   ------------------------------------------------------------
   ① FV側とMESSAGE側で別々にスクリムを持つと、境目に濃度の段差＝線が出る。
      2画面ぶんのゾーン（.site-hz）全高に1枚だけグラデを敷き、
      FVの下端 → MESSAGE → 深緑ベタ まで一続きの落ち込みにする。
      ★濃度はこの1本の stops だけで決める。FV／MESSAGE 側に面を足さない。
   ② ノイズは「白以外の面」＝温白ベースと深緑面に敷く。.bg-white は素のまま。
      粒はテクスチャなので粗さを変えるときは baseFrequency ではなく
      --noise-size（タイル寸法）で調整する。
   ============================================================ */
:root{
  --noise-size: 150px;
  --noise-l: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  --noise-d: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  /* 深緑面に持たせる濃さ（FV〜MESSAGE と同じ手つき）。
     --depth-x＝左からの落ち込み／--depth-y＝上下の締め */
  --depth-x: linear-gradient(100deg, rgba(6,26,8,.4) 0%, rgba(6,26,8,.1) 46%, rgba(6,26,8,0) 74%);
  --depth-y: linear-gradient(180deg, rgba(6,26,8,.3) 0%, rgba(6,26,8,0) 32%, rgba(6,26,8,.06) 66%, rgba(6,26,8,.34) 100%);
  /* 深緑面の奉行を作る黄緑のごく薄いブルーム。右上から入れて
     左下の落ち込み（--depth-x）と対角になるように置く。
     ★アクセント（面積約10%）の枠を超えないよう濃度は .14 以下に留める */
  --depth-a: radial-gradient(128% 96% at 94% 8%, rgba(124,179,66,.14) 0%, rgba(124,179,66,.05) 40%, rgba(124,179,66,0) 70%);
}

/* --- 35-1. FV〜MESSAGE：ゾーン全高に1枚だけ乗せる連続グラデ（＋ノイズ） --- */
.site-hz{ isolation: isolate; }
.site-hz::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    var(--noise-l),
    linear-gradient(180deg,
      rgba(6,26,8,.18) 0%,
      rgba(6,26,8,0) 10%,
      rgba(6,26,8,0) 17%,
      rgba(8,30,10,.30) 23%,
      rgba(8,30,10,.44) 34%,
      rgba(8,30,10,.54) 44%,
      rgba(8,30,10,.66) 56%,
      rgba(16,57,15,.88) 78%,
      var(--c-deep) 94%,
      var(--c-deep) 100%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
}
/* 本文はグラデより前面へ */
.site-fv{ position: relative; z-index: 2; }
.site-msg{ z-index: 2; }
/* キャッチ背景は FV 側に別レイヤーを持たない（干渉の細工を作らない） */
.site-fv::before{ background: none; }
.site-msg{ background: none; }

/* --- 35-2. 温白ベース（body・.bg-base）にノイズ。縦罫グリッドはそのまま残す --- */
body{
  background-image: var(--noise-l), linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--c-rulegrid) calc(12.5% - 1px) 12.5%, transparent 12.5% calc(37.5% - 1px), var(--c-rulegrid) calc(37.5% - 1px) 37.5%, transparent 37.5% calc(62.5% - 1px), var(--c-rulegrid) calc(62.5% - 1px) 62.5%, transparent 62.5% calc(87.5% - 1px), var(--c-rulegrid) calc(87.5% - 1px) 87.5%, transparent 87.5% 100%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, repeat;
  background-position: 0 0;
}

/* --- 35-3. 深緑の面にノイズ。
       ★ .bg-deep 等は先行する background 短縮形で no-repeat を拾うので
         repeat / position を明示する（これが無いと上部に1タイルだけ出る） --- */
.bg-deep, .sf, .site-panel__face{
  background-image: var(--noise-d), var(--depth-x), var(--depth-y), var(--depth-a);
  background-size: var(--noise-size) var(--noise-size), auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}
.site-panel__face{ background-color: var(--c-deep); }
.site-cta__band{
  background-image: var(--noise-d), var(--depth-x), var(--depth-y), var(--depth-a), linear-gradient(97deg, var(--c-deep) 0 58%, var(--c-deep-2) 58%);
  background-size: var(--noise-size) var(--noise-size), auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}
.sub-hero{
  background-image: var(--noise-d), var(--depth-x), var(--depth-y), var(--depth-a);
  background-size: var(--noise-size) var(--noise-size), auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}
/* 下層ヘーローの深い面（deep-2）も FV と同じように下へ向かって消す */
.sub-hero__diag::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(97deg, rgba(16,57,15,0) 0 56%, var(--c-deep-2) 56%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.5) 68%, rgba(0,0,0,0) 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.5) 68%, rgba(0,0,0,0) 94%);
}
/* 背面を流れる巨大英字は撤去（写真が主役のため）。7°ラインも同様に撤去 */
.site-fv__ghost, .site-diag{ display: none; }
.site-fv, .site-msg{ background-image: none; }

/* --- 35-5. FVの7°ラインは下に向かってグラデで消す（MESSAGEに入るところで
       バツッと切れないように）。★消え始めの位置は 1本目の stop で調整 --- */
/* --- 26-1. FV だけは撮影素材が入るまで深緑の面で見せる（完成イメージの伝達を優先）。
       ★斜線テクスチャは撤去。ノイズと1枚グラデだけで面を作る --- */
.site-hz__media, .site-hz__media.site-hz__media, [data-ph].site-hz__media{
  background: var(--c-deep) !important;
}
.site-hz__media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(97deg, rgba(16,57,15,0) 0 52%, var(--c-deep-2) 52%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.5) 68%, rgba(0,0,0,0) 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.5) 68%, rgba(0,0,0,0) 94%);
}
/* --- 35-7. 7°ライン：1pxは下のマスクでちりちりに割れるので、
       4本すべて左から2番目の太さ（3px）に統一する --- */
.site-diag span,
.site-diag::before,
.site-diag::after{ width: 1px; }
.sub-hero__diag span{ width: 1px; }
/* 4本とも1pxに統一（黄緑の光学補正も不要な太さ） */
.site-diag span:nth-child(2){ width: 1px; }
.sub-hero__diag span:nth-child(2){ width: 1px; }
.sub-hero__diag span{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 92%);
}

.site-diag span,
.site-diag::before,
.site-diag::after{
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 92%);
}

/* ============================================================
   36. セクションのリンク行（.site-row）
   ------------------------------------------------------------
   小さい塗りボタン／テキストリンクをやめ、版面いっぱいの「行」にする。
   上下の細罫＋和文大きめ＋Oswaldの小英字＋右のロングアロー。
   ホバーで黄緑（深緑面では黄緑→文字を深緑に反転）が左から流れる。
   ★同じ役割のリンクはすべてこの型。塗りボタン（.site-btn）はヘッダーだけに残す。
   ============================================================ */
.site-row{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: var(--el-gap);
  padding: clamp(22px, 3vw, 34px) clamp(12px, 1.6vw, 22px);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-ink);
  text-decoration: none;
  overflow: hidden;
}
.site-row::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .62s cubic-bezier(.2,.7,.2,1);
}
.site-row:hover::before, .site-row:focus-visible::before{ transform: scaleX(1); }
.site-row__t{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 16px;
  font-size: clamp(21px, 2.7vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls-head);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.site-row__t em{
  font-family: var(--f-en);
  font-style: normal;
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 500;
  letter-spacing: .26em;
  opacity: .5;
  margin-bottom: .62em;
}
.site-row__a{
  position: relative;
  display: block;
  width: clamp(46px, 6.5vw, 92px);
  height: 2px;
  margin-bottom: 0;
  background: currentColor;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.site-row__a::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.site-row:hover .site-row__t, .site-row:focus-visible .site-row__t{ transform: translateX(12px); }
.site-row:hover .site-row__a, .site-row:focus-visible .site-row__a{ transform: translateX(10px); }
.site-row:hover .site-row__a::after, .site-row:focus-visible .site-row__a::after{ transform: translateY(-50%) rotate(45deg); }
.site-row:hover, .site-row:focus-visible{ color: #14300a; }

/* 深緑面の上 */
.site-row--onDeep{
  border-top-color: var(--c-rule-deep);
  border-bottom-color: var(--c-rule-deep);
  color: #fff;
}
.site-row--onDeep:hover, .site-row--onDeep:focus-visible{ color: #14300a; }

/* 隣接する行は罫を重ねない */
.site-row + .site-row{ margin-top: 0; border-top: 0; }

/* CTA：見出しは中央のまま、行は版面いっぱいに縦積み */
.site-cta__acts{ display: grid; gap: 0; margin-top: var(--sec-gap); text-align: left; }
.site-cta__acts .site-row{ margin-top: 0; }

.site-blog .site-row{ margin-top: var(--sec-gap); }
/* 横1カラムのセクション（2分割の中ではない行）は、幅を半分にして右へ寄せる。
   全幅で置くと行が間延びするため。狭い画面では全幅に戻す */
.site-recruit .site-row,
.site-statement .site-row,
.site-blog .site-row,
.site-split--band .site-row{ width: 50%; margin-left: auto; }
@media (max-width: 899px){
  .site-recruit .site-row,
  .site-statement .site-row,
  .site-blog .site-row,
  .site-split--band .site-row{ width: 100%; }
}

/* ============================================================
   37. ヘッダー／フッターの作り直し
   ------------------------------------------------------------
   ・リンクの下線は「左から入り、外すと右へ抜ける」（transform-origin の入れ替え）
   ・ロゴは黄緑の縦バーを付け、ホバーでバーが伸びる
   ・電話番号は Oswald で大きく、TEL ラベルは装飾として擬似要素で置く
   ・フッターは巨大アウトライン英字を沈め、章の型と同じ言語に揃える
   ============================================================ */

/* --- 37-1. 共通：下線スライド --- */
.sh__nav a, .sh__sub a, .sf-col a, .sf__addr a, .sf__bottom a{
  position: relative;
  text-decoration: none;
  border-bottom: 0;
  transition: color .3s var(--ease);
}
.sh__nav a::after, .sf-col a::after, .sf__addr a::after, .sf__bottom a::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + .96em);
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
.sh__nav a:hover::after, .sh__nav a:focus-visible::after,
.sf-col a:hover::after, .sf-col a:focus-visible::after,
.sf__addr a:hover::after, .sf__addr a:focus-visible::after,
.sf__bottom a:hover::after, .sf__bottom a:focus-visible::after{
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.sh__nav a:hover{ color: var(--c-accent-ink); }
.sf-col a:hover, .sf__bottom a:hover{ color: var(--c-accent-lite); }

/* --- 37-2. ヘッダー --- */
.sh{ border-bottom: 1px solid var(--c-rule); }
.sh__logo{ position: relative; padding-left: 18px; }
.sh__logo::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 1.5em;
  background: var(--c-accent);
  transform: translateY(-50%) scaleY(.72);
  transform-origin: 50% 50%;
  transition: transform .4s var(--ease);
}
.sh__logo:hover::before{ transform: translateY(-50%) scaleY(1); }
.sh__logo-ja{ font-size: clamp(18px, 1.2vw, 22px); letter-spacing: .1em; }
.sh__logo-en{ font-size: 10px; letter-spacing: .24em; color: var(--c-ink-soft); }
.sh__nav a{ font-size: clamp(13.5px, .98vw, 15px); letter-spacing: .06em; }
/* 帯の中身は縮める（これがないと幅が足りない画面で横スクロールが出る） */
.sh__inner, .sh__panel, .sh__nav, .sh__actions{ min-width: 0; }
/* サブメニュー：縦積み。.sh__nav ul の flex が優先されて横並びになっていた */
.sh__nav .sh__sub{ display: grid; grid-auto-flow: row; gap: 0; }
/* 背景は変えず、下線は文字幅だけ */
.sh__nav .sh__sub a{
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  padding: 0;
  margin: 0 14px;
  border-radius: 0;
}
.sh__nav .sh__sub a:hover, .sh__nav .sh__sub a:focus-visible{ background: transparent; }
.sh__tel-num{ font-size: clamp(18px, 1.35vw, 23px); letter-spacing: .02em; }
.sh__tel-num::before{
  content: "TEL";
  margin-right: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--c-ink-soft);
  vertical-align: .22em;
}
.sh__tel-note{ letter-spacing: .04em; }
.sh__tel:hover .sh__tel-num{ color: var(--c-accent-ink); }
/* CTAボタン：セクションのリンク行と同じ「左から面が流れる」ホバー */
.sh__cta{ position: relative; overflow: hidden; isolation: isolate; letter-spacing: .06em; }
.sh__cta::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sh__cta:hover{ background: var(--c-deep); color: #14300a; transform: none; }
.sh__cta:hover::before{ transform: scaleX(1); }

/* ドロワー：.sh が backdrop-filter を持つため fixed の包含ブロックがヘッダー帯になる。
   高さを明示してビューポート全高に戻す */
@media (max-width: 1099px){
  .sh__panel{ height: 100svh; overflow-y: auto; overscroll-behavior: contain; }
  .sh__scrim{ height: 100svh; }
}

/* ボタンの矢印はリンク行と同じ形（2pxの45°穂先）に揃える */
.site-btn::after{
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
}
/* ホバーで穂先の角度が変わらないようにする（§20-6 の translateX で回転が消えていた） */
.site-btn:hover::after{ transform: translateX(5px) rotate(45deg); }

/* 倉庫カードの写真は 100vw 基準でビューポート右端まで抜くので、
   スクロールバー幅ぶん（8px）だけ横スクロールが出る。X方向だけ切る（Yのはみ出しは維持） */
.site-panel{ overflow-x: clip; overflow-y: visible; }

/* 下層ヒーローの直下が深緑の節の場合、上下の締めが重なって帯が出るので左の落ち込みだけにする */
.sub-hero + .bg-deep{
  background-image: var(--noise-d), var(--depth-x);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
}

/* ============================================================
   41. 下層ページへの横展開（トップで確立した型を同じ役割にそのまま適用）
   ------------------------------------------------------------
   ・章頭＝巨大アウトライン英字（.sec-en）。●日本語ラベルは原稿に無いので置かない
   ・セクション下のリンクは .site-row（トップと同じ）
   ・CTAはトップと同じ深緑面＋斜め帯＋リンク行2本
   ・下層は情報量が多いので、装飾は増やさずサイズと余白で整える
   ============================================================ */
/* 2分割の列に入る章頭英字は、長い語（AFTER WORK / NEW PLACES 等）が
   版面から出るのでもう一段落とす。
   ★トップは「サイズは全セクション同一（2分割の列内でも変えない）」の決定があるので、
     下層（.sub-hero を持つページ）だけに限定する */
body:has(.sub-hero) .site-split__inner .sec-en,
body:has(.sub-hero) .site-duo__body .sec-en{ font-size: clamp(28px, 4.2vw, 60px); }

/* パンくずの英字（TOP）が和文ゴシックで出ていたので、他の小英字と同じ Outfit に揃える */
.sub-crumb{ font-family: "Outfit", "Zen Kaku Gothic New", sans-serif; letter-spacing: .06em; }
.sub-crumb a, .sub-crumb span{ font-family: inherit; }

/* ============================================================
   42. FV 4枚スライダー
   ------------------------------------------------------------
   1枚ずつ「右へ流れながらふんわり消える／次は左へ流れる」を交互に。
   JS不要。1周 24s（1枚あたり6s・重なり1.2s）。
   ★枚数を変える場合は --fv-dur と nth-child の delay を合わせて直す
   ============================================================ */
.fv-slider{ position: absolute; inset: 0; overflow: hidden; }
.fv-slider__img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  will-change: opacity, transform;
}
.fv-slider__img:first-child{ opacity: 1; }
@media (prefers-reduced-motion: no-preference){
  .fv-slider__img{
    animation: fv-pan-r 24s linear infinite both;
  }
  .fv-slider__img:nth-child(2n){ animation-name: fv-pan-l; }
  .fv-slider__img:nth-child(1){ animation-delay: 0s; }
  .fv-slider__img:nth-child(2){ animation-delay: 6s; }
  .fv-slider__img:nth-child(3){ animation-delay: 12s; }
  .fv-slider__img:nth-child(4){ animation-delay: 18s; }
}
/* ★暗転を出さないための仕組み：
     ・退場側はフェードしない（次の1枚が完全に被ってから opacity を落とす）
     ・入場側を z-index で常に手前に置く（退場側は25%で背面へ下がる）
     → 写真の被覆率が常に100%になる */
@keyframes fv-pan-r{
  0%{   opacity: 0; z-index: 3; transform: translateX(-2.2%) scale(1.07); }
  5%{   opacity: 1; z-index: 3; }
  25%{  opacity: 1; z-index: 3; }
  25.01%{ opacity: 1; z-index: 1; }
  30%{  opacity: 1; z-index: 1; transform: translateX(2.2%) scale(1.07); }
  30.5%{ opacity: 0; z-index: 1; transform: translateX(2.2%) scale(1.07); }
  100%{ opacity: 0; z-index: 1; transform: translateX(-2.2%) scale(1.07); }
}
@keyframes fv-pan-l{
  0%{   opacity: 0; z-index: 3; transform: translateX(2.2%) scale(1.07); }
  5%{   opacity: 1; z-index: 3; }
  25%{  opacity: 1; z-index: 3; }
  25.01%{ opacity: 1; z-index: 1; }
  30%{  opacity: 1; z-index: 1; transform: translateX(-2.2%) scale(1.07); }
  30.5%{ opacity: 0; z-index: 1; transform: translateX(-2.2%) scale(1.07); }
  100%{ opacity: 0; z-index: 1; transform: translateX(2.2%) scale(1.07); }
}
/* 写真が入ったので枠のグレー面は出さない。
   撮影素材が入るまでの暫定だった deep-2 のウェッジも止め、写真はグラデだけで締める */
.site-hz__media:has(.fv-slider){ background: var(--c-deep) !important; }
.site-hz__media:has(.fv-slider)::after{ display: none; }

/* --- 42-1. FV下側の深緑グラデは §35-1 直後の斜めレイヤーで持つ（ここでは打ち消さない） --- */

/* --- 37-3. フッター --- */
.sf{ position: relative; overflow: hidden; }
.sf::after{
  content: "YAMAICHI UNYU";
  position: absolute;
  right: -.04em;
  bottom: -.28em;
  z-index: 0;
  font-family: var(--f-out);
  font-weight: 500;
  font-size: clamp(64px, 13vw, 210px);
  line-height: 1.24;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.sf__inner, .sf__bottom{ position: relative; z-index: 1; }
.sf__logo{ margin: 0 0 18px; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: .1em; }
.sf__addr{ line-height: 2.05; letter-spacing: .02em; }
.sf-col__ttl{
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--c-rule-deep);
  font-size: 12px;
  letter-spacing: .18em;
}
.sf-col a::after, .sf__addr a::after, .sf__bottom a::after{ top: calc(50% + .82em); }
.sf-col a{ font-size: 15px; }
.sf__bottom{ letter-spacing: .04em; }
.sf__copy{ font-family: var(--f-en); letter-spacing: .14em; opacity: .7; }

/* ============================================================
   38. FV／MESSAGE の詰め
   ============================================================ */
/* MESSAGE 上の短い黄緑の罫は撤去 */
.site-msg__inner::before{ display: none; }

/* FVキャッチ：平仮名だけ75%に落として漢字を立てる */
.site-fv__catch .kn{ font-size: 75%; }
.site-fv__scroll{ display: none; }

/* キャッチコピーは左下へ */
.site-fv{ justify-content: flex-end; padding-top: clamp(96px, 12vw, 160px); padding-bottom: calc(clamp(72px, 10vh, 140px) + 50px); }
/* さらに左へ：版面（--wrap）の中央寄せをやめ、画面左のガター基準に置く。
   ★戻す場合は margin-inline: auto に戻す */
.site-fv__body{ margin-inline: 0 auto; max-width: calc(var(--wrap) + var(--gutter)); }

/* --- 39. 採用の数字：単位は小さく、和文の「土日祝」は数字と同寸・太字に --- */
.site-stats dd{ white-space: nowrap; font-size: clamp(50px, 4.6vw, 76px); }
.site-stats dd span{ font-size: .42em; letter-spacing: .02em; margin-left: .12em; }
.site-stats__word{ font-family: "M PLUS 1", var(--f-ja); font-size: .84em; font-weight: 900; letter-spacing: .02em; }
.site-stats dt{ font-size: clamp(16px, 1.15vw, 20px); font-weight: 500; letter-spacing: .08em; }

/* ============================================================
   40. 表示アニメーション（スクロール連動の"徐々に"をやめ、
       画面に入った時点で1回だけ再生する演出に切り替える）
   ------------------------------------------------------------
   ・html.js-rv が付いた環境でだけ動く（JS無しでは最初から見えている）
   ・型は3つだけ：rise（下から起きる）／wipe（下から現れる）／draw（左から線が伸びる）
   ・同じセクション内の要素は --d で順番に遅らせる（JS側で付与）
   ★スクロール連動（§18）は js-rv 環境では止める
   ============================================================ */
.js-rv [data-reveal]{ animation-name: none; animation-timeline: auto; }
.js-rv [data-reveal="fade"]{ opacity: 0; transform: translateY(26px); }
.js-rv [data-reveal="draw"]{ clip-path: inset(0 100% 0 0); }
.js-rv [data-reveal="wipe"]{ clip-path: inset(100% 0 0 0); }
.js-rv [data-reveal].is-in{
  animation-duration: .92s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: both;
  animation-delay: var(--d, 0s);
}
.js-rv [data-reveal="fade"].is-in{ animation-name: rv-rise; }
.js-rv [data-reveal="draw"].is-in{ animation-name: rv-draw; animation-duration: 1.05s; }
.js-rv [data-reveal="wipe"].is-in{ animation-name: rv-wipe; animation-duration: 1.05s; }
@keyframes rv-rise{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }
@keyframes rv-draw{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
@keyframes rv-wipe{ from{ clip-path: inset(100% 0 0 0); } to{ clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce){
  .js-rv [data-reveal]{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* --- 40-1. 配置画像のパララックス（遠近感）
       ★いったん保留。[data-ph] に position:relative を掛けると、
         絶対配置している枠（倉庫カードの写真など）の位置が壊れるため。
         撮影素材が入り、枠の中に ＜img＞ が入る構造になった時点で
         その img に対して view() タイムラインを掛ける形で入れ直す。
       深さの目安：倉庫9% ＞ 小写真8% ＞ 2分割6% ＞ 大写真4% ＞ ブログ3% --- */

/* --- 35-4. 斜めの辺に沿う細いハイライト線は撤去（面の差だけで境界を見せる）。
       戻す場合はこのブロックを消す --- */
.dg--t::before{ display: none; }

/* --- 42-2. FV写真：面に沈まないよう、写真そのものを少し起こす --- */
.fv-slider__img{ filter: brightness(1.1) saturate(1.06) contrast(1.03); }

/* --- 42-3. 写真のノイズは overlay で合成する。
       灰色をそのまま重ねると明度が落ちて濁るため（薄暗さの原因はこれだった）。
       ★粒の強さは opacity、粗さは --noise-size --- */
.fv-slider::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background-image: var(--noise-d);
  background-size: var(--noise-size) var(--noise-size);
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .85;
  pointer-events: none;
}

/* ============================================================
   44. MESSAGE本文のキーフレーズに引く下線
   文字の下半分に重なる太さの帯。左から伸び、上から順に時間差で出る。
   ★帯は mark 自身の background なので必ず文字の背面。可読性は落ちない
   ============================================================ */
.ul{
  color: inherit;
  background-color: transparent;   /* mark の既定の黄色を消す */
  background-image: linear-gradient(90deg, rgba(124,179,66,.5), rgba(124,179,66,.28));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .04em);
  background-size: 100% .5em;
}
.js-rv .ul{
  background-size: 0 .5em;
  transition: background-size 1.05s cubic-bezier(.16,.84,.3,1);
  transition-delay: var(--d, 0s);
}
.js-rv .ul.is-in{ background-size: 100% .5em; }
@media (prefers-reduced-motion: reduce){
  .js-rv .ul{ background-size: 100% .5em; transition: none; }
}

/* ============================================================
   45. HOME 大見出しの下線
   NEWS帯と同じ黄緑。MESSAGE本文の下線と同じ「左から伸びる」描画で統一する
   ============================================================ */
.ult{
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(124,179,66,.9), rgba(124,179,66,.5));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .1em);
  background-size: 100% .52em;
}
.js-rv .ult{
  background-size: 0 .52em;
  transition: background-size 1.05s cubic-bezier(.16,.84,.3,1);
  transition-delay: var(--d, 0s);
}
.js-rv .ult.is-in{ background-size: 100% .52em; }
@media (prefers-reduced-motion: reduce){
  .js-rv .ult{ background-size: 100% .52em; transition: none; }
}

/* ============================================================
   46. 写真の流し込み
   プレースホルダーに --img を渡すと写真面に変わる（§26 のグレーを上書き）。
   撮影素材が入るまでの仮置きも同じ仕組みで差し替えられる
   ============================================================ */
[data-ph].ph-set, .ph-set.ph-set{
  background-color: #c9cec9 !important;
  background-image: var(--img) !important;
  background-size: cover !important;
  background-position: var(--imgpos, 50% 50%) !important;
  background-repeat: no-repeat !important;
}
.ph-set .site-ph__label{ display: none; }

/* --- 46-2. 下層ヘッダーの背景写真（深緑の面に沈める） --- */
.sub-hero{
  background-image:
    var(--noise-d), var(--depth-x), var(--depth-y), var(--depth-a),
    linear-gradient(97deg, rgba(11,42,14,.9) 0 56%, rgba(11,42,14,.94) 56%),
    url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1540/hero-bg-c.webp);
  background-size: var(--noise-size) var(--noise-size), auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 50% 42%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* --- 46-3. CTA の斜め帯にも写真を入れる（帯ごと skew されるので写真も一緒に傾く） --- */
.site-cta__band{
  background:
    linear-gradient(97deg, rgba(11,42,14,.9) 0 58%, rgba(15,58,18,.93) 58%),
    url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1540/cta-bg-c.webp) 50% 46% / cover no-repeat;
}

/* ============================================================
   47. 下層ヘッド／CTA の斜め要素を撤去
   ・7°ライン（.sub-hero__diag / .site-diag）は全ページで出さない
   ・面の色を分ける斜めの継ぎ目（97deg の分割）と CTA 帯の skew も撤去し、
     写真＋深緑のフラットな面にする
   ============================================================ */
.sub-hero__diag, .site-diag{ display: none !important; }
.sub-hero{
  /* 写真の手前は「ノイズ＋深緑」の2枚だけ。depth系を重ねると階調が消えるため外す。
     文字は左側に来るので、左を濃く右を抜くグラデで写真を見せる */
  background-image:
    var(--noise-d),
    linear-gradient(100deg, rgba(11,42,14,.9) 0%, rgba(11,42,14,.82) 38%, rgba(11,42,14,.6) 100%),
    url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1540/hero-bg-c.webp);
  background-size: var(--noise-size) var(--noise-size), auto, cover;
  background-position: 0 0, 0 0, 50% 54%;
  background-repeat: repeat, no-repeat, no-repeat;
}
.site-cta__band{
  inset: 0;
  transform: none;
  background:
    linear-gradient(100deg, rgba(11,42,14,.9) 0%, rgba(11,42,14,.82) 38%, rgba(11,42,14,.6) 100%),
    url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1540/cta-bg-c.webp) 50% 46% / cover no-repeat;
}

/* --- 47-2. /order フロー図：狭幅で3列が縦積みになると横罫の意味が消えるため線を切る --- */
@media (max-width:599px){
  .oflow__out{ grid-template-columns:1fr; }
  .oflow__out::before{ display:none; }
  .oflow__out li:first-child::before{ display:block; }
  .oflow__out li::before{ display:none; }
}

/* ============================================================
   48. セクション背景の左下に「ふわっと」置く写真
   面の中に溶け込ませる装飾。輪郭を出さず、右上へ向かって消える
   ============================================================ */
.site-recruit{ position: relative; overflow: hidden; }
.site-panel__face{ position: relative; overflow: hidden; }
.site-recruit > .site-wrap{ position: relative; z-index: 2; }
.site-panel__face > .site-panel__body{ position: relative; z-index: 2; }
.sec-photo{
  position: absolute;
  z-index: 1;
  left: -40px;
  bottom: -40px;
  width: clamp(360px, 52vw, 720px);
  height: clamp(260px, 36vw, 500px);
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(115% 115% at 6% 100%, #000 0%, rgba(0,0,0,.72) 44%, transparent 82%);
  mask-image: radial-gradient(115% 115% at 6% 100%, #000 0%, rgba(0,0,0,.72) 44%, transparent 82%);
}
/* 採用情報（深緑地）：面より明るい写真なので、そのまま薄く重ねると浮いて見える */
.site-recruit .sec-photo{
  background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1540/recruit-road-c.webp);
  background-position: 50% 58%;
  opacity: .46;
  filter: saturate(.6) brightness(.7);
}
/* 倉庫（白地）：影のように沈める */
.site-panel__face .sec-photo{
  background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1540/wh-inside-c.webp);
  background-position: 50% 45%;
  opacity: .32;
  filter: saturate(.45);
}
@media (max-width:899px){
  .sec-photo{ width: 76vw; height: 52vw; opacity: .2 !important; }
}

/* --- 48-2. 採用情報の写真は面いっぱいに近い大きさで置く --- */
.site-recruit .sec-photo{
  left: -60px; bottom: -60px;
  width: clamp(420px, 62vw, 900px);
  height: clamp(300px, 42vw, 600px);
}
/* --- 48-3. 倉庫は「浮いた深緑カード」の中の左下に置く --- */
.site-panel__face .sec-photo{
  left: -40px; bottom: -40px;
  width: clamp(400px, 52vw, 780px);
  height: clamp(300px, 38vw, 540px);
  opacity: .3;
  filter: saturate(.5) brightness(.78);
}

/* ============================================================
   49. ローディング（TOP内オーバーレイ）
   ------------------------------------------------------------
   ・幕は初回描画から全画面を覆う（後出し禁止）
   ・state は #site-loader[data-state] で持つ：loading → transition → completed
   ・終了演出は [data-out] の分岐で差し替える（wipe / fade / blur / scale / slide）
   ・ヒーローの登場は html.is-hero-in が付いてから（幕の裏で終わらせない）
   ============================================================ */
.site-loader{ z-index: 9999; }
.site-loader[data-state="completed"]{ display: none !important; }

/* --- 49-1. ローディング演出（中央の要素）--- */
.site-loader__panes{ position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); z-index: 1; }
.site-loader__panes > span{ display: block; background: var(--c-deep); }
.site-loader__panes::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-d);
  background-size: var(--noise-size) var(--noise-size);
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 1;
  pointer-events: none;
}
/* 粒をもう一段立てるため、通常合成のノイズを薄く重ねる */
.site-loader__panes::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-d);
  background-size: var(--noise-size) var(--noise-size);
  background-repeat: repeat;
  opacity: .5;
  pointer-events: none;
}
.site-loader__panes{ position: absolute; }
.site-loader[data-state="transition"] .site-loader__panes::after{ transition: opacity .5s var(--ease); opacity: 0; }
.site-loader__bar > span{ animation-duration: 2.2s; }

/* --- 49-2. 終了演出（ここだけ差し替えれば見せ方が変わる）--- */
.site-loader[data-state="transition"]{ pointer-events: none; }
/* wipe：3枚の幕が時間差で上へ抜ける */
.site-loader[data-out="wipe"] .site-loader__panes > span{ transition: transform .82s cubic-bezier(.72,0,.24,1); }
.site-loader[data-out="wipe"][data-state="transition"] .site-loader__panes > span{ transform: translateY(-101%); }
.site-loader[data-out="wipe"] .site-loader__panes > span:nth-child(2){ transition-delay: .08s; }
.site-loader[data-out="wipe"] .site-loader__panes > span:nth-child(3){ transition-delay: .16s; }
.site-loader[data-out="wipe"]{ background: transparent; }
.site-loader[data-out="wipe"] .site-loader__body,
.site-loader[data-out="wipe"] .site-loader__ghost{ transition: opacity .34s var(--ease), transform .6s var(--ease); }
.site-loader[data-out="wipe"][data-state="transition"] .site-loader__body,
.site-loader[data-out="wipe"][data-state="transition"] .site-loader__ghost{ opacity: 0; transform: translate(-50%,-50%) scale(.98); }
.site-loader[data-out="wipe"][data-state="transition"] .site-loader__body{ transform: translateY(-14px); }
/* fade / blur / scale / slide */
.site-loader[data-out="fade"] .site-loader__panes{ display: none; }
.site-loader[data-out="fade"]{ transition: opacity .9s var(--ease); }
.site-loader[data-out="fade"][data-state="transition"]{ opacity: 0; }
.site-loader[data-out="blur"] .site-loader__panes{ display: none; }
.site-loader[data-out="blur"]{ transition: opacity .9s var(--ease), filter .9s var(--ease); }
.site-loader[data-out="blur"][data-state="transition"]{ opacity: 0; filter: blur(22px); }
.site-loader[data-out="scale"] .site-loader__panes{ display: none; }
.site-loader[data-out="scale"]{ transition: opacity .8s var(--ease), transform .9s cubic-bezier(.72,0,.24,1); }
.site-loader[data-out="scale"][data-state="transition"]{ opacity: 0; transform: scale(1.12); }
.site-loader[data-out="slide"] .site-loader__panes{ display: none; }
.site-loader[data-out="slide"]{ transition: transform .9s cubic-bezier(.72,0,.24,1); }
.site-loader[data-out="slide"][data-state="transition"]{ transform: translateY(-100%); }

/* --- 49-3. ヒーローの登場（幕が開いてから順に立ち上げる）--- */
html.is-loading [data-hero]{ opacity: 0; }
[data-hero]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease) var(--hd,0s), transform 1.1s cubic-bezier(.16,.84,.3,1) var(--hd,0s), filter 1.1s var(--ease) var(--hd,0s);
}
html.is-hero-in [data-hero]{ opacity: 1; transform: none; }
/* 写真は寄りから戻す（テキストとは別の動き） */
.fv-slider[data-hero]{ transform: scale(1.08); filter: blur(6px); transition-duration: 1.5s, 1.8s, 1.4s; }
html.is-hero-in .fv-slider[data-hero]{ transform: none; filter: none; }
.site-fv__side[data-hero]{ transform: translateY(0) translateX(18px); }
html.is-hero-in .site-fv__side[data-hero]{ transform: none; }
/* JSが動かない環境では最初から見えている状態を保つ */
html:not(.js-rv) [data-hero]{ opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce){
  .site-loader{ display: none !important; }
  [data-hero]{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ============================================================
   50. レスポンシブの詰め（_check/responsive.html で確認したもの）
   ・スマホは縦積み＋左揃えを基本にする
   ・CTAの中央揃えは意図（決定事項）なので維持する
   ============================================================ */
/* 大小2枚組：§33 の後出し指定が @media を越えて効いていたため、狭幅で2列に戻っていた */
@media (max-width: 899px){
  .site-duo__grid{ grid-template-columns: 1fr; }
  /* フッターナビはタブレット縦（768）で3列だと窮屈 */
  .sf-a__nav{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px){
  .sf-a__nav{ grid-template-columns: 1fr; }
}
@media (max-width: 599px){
  /* ベントー（数値）は1列に。2列だと「土日祝」「年2回」が窮屈になる */
  .site-stats{ grid-template-columns: 1fr; }
  .site-stats > div{ border-top: 1px solid var(--c-rule-deep); }
  .site-stats > div:first-child{ border-top: 0; }
  .site-stats--onLight > div{ border-top-color: var(--c-rule); }
  /* 本文は左揃え（中央寄せは読みづらい）。CTAとコピーライトは中央のまま */
  .car-center, .sub-lead--center, .site-statement__inner,
  .site-center, .site-lead--center{ text-align: left; }
  .sub-lead--center{ margin-inline: 0; }
  .site-cta, .site-cta__inner, .sf__copy{ text-align: center; }
  /* 3列のカード類は縦積み */
  .carq3, .site-cards--3, .site-cards--2{ grid-template-columns: 1fr; }
}

/* --- 50-2. 車両紹介の帯写真は fixed（写真を流し込む .ph-set が attachment を上書きしていた） --- */
.site-split--band .site-split__media.ph-set{
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: 50% center !important;
}
/* モバイルは fixed が効かない／重いので通常のスクロールに戻す */
@media (max-width: 899px){
  .site-split--band .site-split__media.ph-set{ background-attachment: scroll !important; }
}

/* ============================================================
   51. 配置写真のパララックス
   ★枠のレイアウトには一切触らない。枠の内側に写真の面を1枚敷き、
     その面だけを上下に動かす。
     ・position は CSS で指定しない（絶対配置の枠＝またぎ写真・重ね写真の
       position:absolute を奪うと配置が崩れるため）。static の枠にだけ
       JS がインラインで relative を付ける
   ============================================================ */
.plx{ overflow: hidden; }
.plx__i{
  position: absolute;
  left: 0; right: 0;
  top: -9%; bottom: -9%;
  background-image: var(--img);
  background-size: cover;
  background-position: var(--imgpos, 50% 50%);
  background-repeat: no-repeat;
  will-change: transform;
  transform: translate3d(0,0,0);
}
/* 枠が持っている装飾（流れる英字・ラベル等）は写真より前に出す */
.plx > *:not(.plx__i){ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){
  .plx__i{ top: 0; bottom: 0; transform: none !important; }
}

/* --- 51-2. 倉庫カード：900〜1199px の帯で、本文の行末が「またぎ写真」に潜っていた。
       この帯だけ写真を少し細くし、本文側に写真ぶんの余白を持たせる
       （テキストの右端 < 写真の左端 を全幅で担保する） --- */
@media (min-width: 900px) and (max-width: 1279px){
  .site-panel__media{ width: min(44%, 470px); }
  .site-panel__body{ padding-right: 0; }
  .site-panel__face p, .site-panel__face .site-badges{ max-width: none; }
}

/* ============================================================
   52. ヘッダー：横幅が足りないPC（1100〜1499px）の2段組み
   ------------------------------------------------------------
   これまでは1段目がロゴだけ、2段目にナビと電話・CTAが同居していて
   右上が空洞になり、2段の役割が読めなかった。役割で段を分ける：
     1段目  ロゴ ………………………… 電話番号／お問い合わせ
     2段目  グローバルナビ（全幅・左揃え・上に細い罫）
   ★.sh__panel を display:contents にして、中のナビと操作類を
     ヘッダー帯の直接の要素として扱う（HTMLは触らない）
   ============================================================ */
@media (min-width: 1100px) and (max-width: 1499px){
  .sh__inner{ flex-wrap: wrap; align-items: center; gap: 0; padding-block: 0; }
  .sh__panel{ display: contents; }
  .sh__logo{ order: 1; padding-block: 14px; }
  .sh__panel > .sh__actions{ order: 2; margin-left: auto; padding-block: 8px; width: auto; margin-top: 0; flex-direction: row; align-items: center; gap: 18px; }
  .sh__panel > .sh__actions .sh__cta{ min-height: 44px; padding-block: 10px; }
  .sh__cta{ width: auto; }
  .sh__nav{
    order: 3;
    width: 100%;
    margin-top: 0;
    border-top: 1px solid var(--c-rule);
  }
  .sh__nav ul{ flex-direction: row; align-items: stretch; gap: 0 clamp(10px, 1.4vw, 22px); width: auto; }
  .sh__nav a{ min-height: 50px; border-bottom: 0; font-size: clamp(13.5px, 1.05vw, 15px); white-space: nowrap; }
  /* 下線ホバーは帯の下辺ではなく文字の下に出す（1段目と同じ見え方に揃える） */
  .sh__nav a::after{ top: calc(50% + .95em); }
  /* サブメニューは2段目のナビから下に開く */
  .sh__nav .sh__sub{ top: 100%; }
}

/* --- 52-2. PC（狭）はヘッダーが2段になるぶんFVの下端が画面外へ下がるので、
       キャッチを同じ量だけ上へ戻す --- */
@media (min-width: 1100px) and (max-width: 1499px){
  .site-fv{ padding-bottom: calc(clamp(72px, 10vh, 140px) + 50px + 56px); }
}

/* --- 52-3. 採用の数字：縦積みのときは縦罫を全部外す（左の有無で行頭がガタつく） --- */
@media (max-width: 599px){
  .site-stats > div{ border-left: 0 !important; padding-left: 0 !important; padding-right: 0; }
}
/* --- 52-4. 倉庫カード：タブレット横（900〜1199px）では本文の行が細くなりすぎるので、
       この帯は写真をカードの外に出さず、テキストに版面を明け渡す --- */
@media (min-width: 900px) and (max-width: 1279px){
  .site-panel__media{ width: min(38%, 400px); }
  /* 写真ぶんの逃げは .site-panel__face の padding-right が既に持っている。
     本文側に重ねて padding を入れると二重取りになり、行が細くなるだけ */
  .site-panel__body{ padding-right: 0; }
  .site-panel__face p{ max-width: none; }
}

/* ============================================================
   53. MESSAGE：上下の余白を詰める
   余白の正体は padding ではなく min-height:100svh（＋上下中央揃え）だった。
   高さの縛りを外し、余白は padding だけで決める
   ★FV写真のピン留め距離もこの高さで決まるが、演出は成立する
   ============================================================ */
.site-msg{ min-height: 0; padding-block: 0 clamp(112px, 11vw, 164px); }
/* タブレット（縦）は画面が縦長で特に空くため、さらに詰める */
@media (min-width: 720px) and (max-width: 1099px){
  .site-msg{ padding-block: 0 clamp(128px, 16vh, 172px); }
}
@media (max-width: 719px){
  .site-msg{ min-height: 0; padding-block: 0 clamp(100px, 12.5vh, 128px); }
}

/* ============================================================
   54. FV下端とMESSAGEの間を詰める
   キャッチの画面上の位置は動かさない。FVの高さと下余白を同じ量だけ
   削ることで、キャッチ位置はそのままにFVの下端だけを引き上げる。
   ★詰める量は --fv-trim の1箇所。0 にすれば元に戻る
   ============================================================ */
.site-fv{
  --fv-trim: 0px;
  min-height: calc(100svh - var(--fv-trim));
  padding-bottom: calc(clamp(72px, 10vh, 140px) + 50px - var(--fv-trim));
}
@media (min-width: 1100px) and (max-width: 1499px){
  .site-fv{ padding-bottom: calc(clamp(72px, 10vh, 140px) + 50px + 56px - var(--fv-trim)); }
}
@media (max-width: 719px){
  .site-fv{ --fv-trim: 0px; }
}

/* ============================================================
   55. 章扉のアウトライン英字（.site-chapter）は撤去
   セクション左上に本文と無関係な英字が浮いて意味が読めないため。
   章頭の英字は .sec-en（見出しの上）に統一する
   ============================================================ */
.site-chapter{ display: none !important; }

/* ============================================================
   56. ゲートカード（回遊導線）を「押せる面」にする
   ・薄く写真を敷き、深緑のグラデを重ねて文字を守る
   ・ホバーで写真が寄り、面が持ち上がる
   ============================================================ */
.site-gates a{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(240px, 26vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(30px, 3.6vw, 46px);
  border-color: transparent;
  background: var(--c-deep);
  color: #fff;
}
.site-gates a::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--gate-img);
  background-size: cover;
  background-position: var(--gate-pos, 50% 50%);
  opacity: 1;
  filter: saturate(.85);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), opacity var(--dur) var(--ease);
}
.site-gates a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(178deg, rgba(8,30,10,.1) 0%, rgba(8,30,10,.34) 40%, rgba(11,42,14,.82) 100%),
    var(--noise-d);
  background-size: auto, var(--noise-size) var(--noise-size);
  background-repeat: no-repeat, repeat;
}
.site-gates h3{ color: #fff; font-size: clamp(22px, 2.2vw, 30px); }
.site-gates a p{ color: rgba(255,255,255,.9); margin-bottom: 4px; }
.site-gates__go, .bg-deep .site-gates__go{ color: var(--c-accent-lite); letter-spacing: .04em; }
.site-gates a:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,42,14,.28); border-color: transparent; }
.site-gates a:hover::before{ transform: scale(1.09); }
/* 深緑面の上に置く場合は、面と沈まないよう縁を1本立てる */
.bg-deep .site-gates a{ background: var(--c-deep); border: 1px solid var(--c-rule-deep); }
@media (max-width: 719px){
  .site-gates a{ min-height: 200px; }
}

/* --- 56-2. 写真だけのカード（車両ギャラリー）は写真の比率で高さを持つ。
       ラベル1行ぶんの高さしか無く、縦に潰れて見えていた --- */
.site-cards li.ph-set{ aspect-ratio: 3 / 2; padding: 0; border: 0; }
.site-cards li.ph-set .site-ph__label{ display: none; }
@media (max-width: 599px){
  .site-cards li.ph-set{ aspect-ratio: 4 / 3; }
}

/* --- 56-3. 写真だけのギャラリーは、この幅帯でも3列を保つ。
       2列だと3枚目の右に写真の高さぶんの空セルが残り、尻切れに見える --- */
@media (min-width: 900px) and (max-width: 1199px){
  .site-cards--3:has(li.ph-set){ grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
}
/* :has 非対応でも空セルが出ないよう、最後の1枚が単独行になる場合は全幅に伸ばす */
@supports not selector(:has(*)){
  @media (min-width: 900px) and (max-width: 1199px){
    .site-cards--3 li.ph-set:last-child:nth-child(odd){ grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  }
}

/* --- 56-4. 極小幅（〜400px）：章頭の英字が1語で版面を超えるため、幅基準で縮める --- */
@media (max-width: 400px){
  .sec-en{ font-size: clamp(19px, 8.6vw, 34px); }
  .sub-hero__en{ font-size: clamp(24px, 11vw, 46px); }
}

/* --- 56-5. 3枚組カードは 900〜1279px で2列になり、3枚目の右に空セルが残る。
       この帯は3列を保つ（内容量が少ないカードなので3列でも読める） --- */
@media (min-width: 900px) and (max-width: 1279px){
  .site-cards--3{ grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
  .site-cards--3 li{ padding: clamp(18px, 2.2vw, 28px); }
}

/* --- 56-6. FVサブコピー左の横線は1行目の文字の中央に置く
       （top:.78em は行送りの影響で上に寄る。line-height の半分で合わせる） --- */
.site-fv__sub::before{ top: calc(0.5lh - 1px); }
@supports not (height: 1lh){
  .site-fv__sub::before{ top: calc(0.5em * var(--lh-body, 1.9) - 1px); }
}

/* --- 56-7. 写真のない記事のサムネイルは OGP 画像を流用する。
       図版なので寄りではなく全体を見せる（cover だと屋号が切れる） --- */
.site-blog__thumb[data-om-note]{ background-size: cover !important; background-position: 50% 42% !important; }

/* ============================================================
   57. FVキャッチの影
   写真の上の白文字を少し起こす。輪郭が硬くならないよう、
   ①近くの締まった影 ②遠くの広い影 の2枚重ねにする。
   サブコピーは同じ方向の弱い影だけ（主役の影より弱く保つ）。
   ============================================================ */
.site-fv__catch{
  text-shadow:
    3px 5px 0 rgba(6,26,8,.45),
    0 4px 14px rgba(2,14,4,.55),
    0 22px 54px rgba(2,14,4,.45);
}
.site-fv__sub{ text-shadow: 1px 2px 0 rgba(6,26,8,.32), 0 4px 14px rgba(2,14,4,.4); }

/* --- 57-1. 本文のあとに置く一行注記（/work の取扱貨物など） --- */
.site-lede-note{ margin-top: clamp(18px,2vw,26px); font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* --- 57-2. 代表メッセージの署名 --- */
.site-sign{ margin-top: clamp(24px,2.6vw,36px); font-size: var(--fs-lead); font-weight: 700; letter-spacing: .06em; }
.site-sign__t{ display: block; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 500; letter-spacing: .14em; color: var(--c-ink-soft); }

/* --- 57-3. /recruit「ここで働く人の声」：コメント回収前は枠と「準備中」だけ --- */
.site-voice{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,32px); margin: 0; padding: 0; list-style: none; }
.site-voice li{ display: grid; gap: 0; border: 1px solid #cfd7c8; background: var(--c-white); }
.site-voice__fig{ display: block; aspect-ratio: 4 / 3; }
.site-voice__wip{ margin: 0; padding: clamp(18px,2vw,26px); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; color: var(--c-ink-soft); }
@media (max-width: 899px){ .site-voice{ grid-template-columns: 1fr; } }

/* ============================================================
   58. 写真スロット（image-slot）
   写真枠に画像をドラッグして置けるようにするための受け皿。
   ・パララックスの層（.plx__i）にスロットを入れているので、
     層側の背景画像は出さない（スロットが描く）
   ・FVスライダーは ＜img＞ と同じ振る舞いにする（4枚の重ね＋パン）
   ============================================================ */
.plx__i:has(image-slot){ background-image: none !important; background-color: transparent !important; }
.plx__i > image-slot{ display: block; width: 100%; height: 100%; }
image-slot.fv-slider__img{ display: block; }

/* ============================================================
   59. OUR HISTORY：本文の横に2枚組
   後半が文字だけになるので、章の型は変えずに写真列だけを足す。
   縦長を上、横長を下にずらして重ね、横長は版面の右外へ抜ける
   （倉庫カードの「またぎ」と同じ考え方。斜めは足さない）
   ============================================================ */
.site-hist__grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.78fr); gap: clamp(32px,4vw,72px); align-items: start; }
.site-hist__body p{ max-width: 40em; }
.site-hist__figs{ position: relative; display: grid; grid-template-columns: 1fr; }
.site-hist__fig{ position: relative; overflow: hidden; }
.site-hist__fig--tall{ aspect-ratio: 3 / 4; margin-left: clamp(24px,4vw,84px); }
.site-hist__fig--wide{ aspect-ratio: 16 / 8; margin-top: clamp(-96px,-6vw,-40px); margin-right: min(0px, calc((var(--wrap) - 100vw) / 2)); z-index: 1; }
@media (max-width: 1099px){
  .site-hist__grid{ grid-template-columns: 1fr; }
  .site-hist__figs{ grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,24px); align-items: end; }
  .site-hist__fig--tall{ margin-left: 0; }
  .site-hist__fig--wide{ aspect-ratio: 4 / 3; margin-top: 0; margin-right: calc(-1 * var(--gutter)); }
}
@media (max-width: 599px){
  .site-hist__figs{ grid-template-columns: 1fr; }
  .site-hist__fig--wide{ aspect-ratio: 16 / 9; }
}

/* ============================================================
   60. FV スライダー：3枚（差し替え後の枚数）
   1周 24s のまま、1枚の持ち時間を 8s に伸ばす。
   重なりは §42 と同じ約1.1s（暗転を出さないための被覆）。
   ★枚数を変える場合は delay と可視域（33.33%）を合わせて直す
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .fv-slider--3 .fv-slider__img{ animation-name: fv3-pan-r; }
  .fv-slider--3 .fv-slider__img:nth-child(2n){ animation-name: fv3-pan-l; }
  .fv-slider--3 .fv-slider__img:nth-child(1){ animation-delay: 0s; }
  .fv-slider--3 .fv-slider__img:nth-child(2){ animation-delay: 8s; }
  .fv-slider--3 .fv-slider__img:nth-child(3){ animation-delay: 16s; }
}
@keyframes fv3-pan-r{
  0%{   opacity: 0; z-index: 3; transform: translateX(-2.2%) scale(1.07); }
  3.5%{ opacity: 1; z-index: 3; }
  33.33%{ opacity: 1; z-index: 3; }
  33.34%{ opacity: 1; z-index: 1; }
  38%{  opacity: 1; z-index: 1; transform: translateX(2.2%) scale(1.07); }
  38.5%{ opacity: 0; z-index: 1; transform: translateX(2.2%) scale(1.07); }
  100%{ opacity: 0; z-index: 1; transform: translateX(-2.2%) scale(1.07); }
}
@keyframes fv3-pan-l{
  0%{   opacity: 0; z-index: 3; transform: translateX(2.2%) scale(1.07); }
  3.5%{ opacity: 1; z-index: 3; }
  33.33%{ opacity: 1; z-index: 3; }
  33.34%{ opacity: 1; z-index: 1; }
  38%{  opacity: 1; z-index: 1; transform: translateX(-2.2%) scale(1.07); }
  38.5%{ opacity: 0; z-index: 1; transform: translateX(-2.2%) scale(1.07); }
  100%{ opacity: 0; z-index: 1; transform: translateX(2.2%) scale(1.07); }
}

/* ============================================================
   61. 下層ページの写真スロット
   ph-set の枠の中にスロットを敷く（枠の装飾・ラベルは前面のまま）。
   下層にはパララックスが無いので、枠側で位置と切り抜きを持つ。
   ============================================================ */
.imgslot{ position: absolute; inset: 0; display: block; z-index: 0; }
.imgslot > image-slot{ display: block; width: 100%; height: 100%; }
.ph-set:has(> .imgslot){ position: relative; overflow: hidden; background-image: none !important; }
.ph-set:has(> .imgslot) > *:not(.imgslot){ position: relative; z-index: 1; }

/* --- 62. /warehouse：導入の用途リストと表の注記 --- */
.wh-uses{ display: grid; gap: 10px; margin: clamp(20px,2.4vw,30px) 0; padding: 0; list-style: none; font-size: var(--fs-lead); font-weight: 500; }
.wh-uses li{ padding-left: 1.1em; text-indent: -1.1em; }
.site-table__note{ display: inline-block; margin-top: 4px; font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* --- 63. /recruit/rookie：STEP番号と1日の流れの小見出し --- */
.road__no{ display: block; margin-bottom: 6px; font-family: var(--f-en); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .14em; color: var(--c-accent); }
.site-timeline__ttl{ display: block; margin: 4px 0 6px; font-size: var(--fs-lead); font-weight: 700; }

/* ============================================================
   64. TOP：6b反映で増えた部品
   FVのボタン2本／求人ショート導線の帯／深緑地のカードと入口／
   CTAの2列。既存のトークン（--row-pad / --el-gap / --wrap）だけで組む。
   ============================================================ */

/* --- 64-1. FV のボタン --- */
.site-fv__acts{ display: flex; flex-wrap: wrap; gap: clamp(12px,1.4vw,18px); margin-top: clamp(26px,3vw,40px); }

/* --- 64-2. 求人ショート導線（NEWSの直後）---
   セクションではなく「帯」として読ませたいので、上下の余白は
   --row-pad より一段浅く取り、面は深緑2色の斜めグラデーション（97deg＝
   FVの署名と同じ角度）。背面に大きな英字を流して密度を作る。 */
.site-jobstrip{
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px,6.4vw,96px);
  background: linear-gradient(97deg, var(--c-deep-2) 0%, var(--c-deep) 58%, #227127 100%);
}
.site-jobstrip::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: var(--c-accent); }
.site-jobstrip__inner{ position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(400px,.46fr); gap: clamp(28px,4vw,72px); align-items: end; }
.site-jobstrip__acts{ display: grid; gap: 10px; }
.site-jobstrip__bang{ font-style: normal; color: var(--c-accent); }
/* 視認性は文字サイズではなく面で稼ぐ：この帯だけ章頭英字の線を明るくし、
   行（ボタン）を黄緑の罫にして深緑地から浮かせる */
.site-jobstrip .sec-en{ -webkit-text-stroke-color: rgba(255,255,255,.5); }
@supports not (-webkit-text-stroke: 1px currentColor){ .site-jobstrip .sec-en{ color: rgba(255,255,255,.5); } }
.site-jobstrip .site-row{ border-color: rgba(124,179,66,.55); }
.site-jobstrip .site-row:hover{ border-color: var(--c-accent); }
.site-jobstrip__body{ display: flex; flex-direction: column; justify-content: flex-end; }
.site-jobstrip__body .site-h2{ margin-bottom: 0; }

@media (max-width: 1099px){ .site-jobstrip__inner{ grid-template-columns: 1fr; align-items: start; } }

/* --- 64-3. 深緑地に置くカード（採用セクションのPOINT） --- */
.site-cards--onDeep li{ background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; }
.site-cards--onDeep li h3{ color: #fff; }
.site-cards--onDeep li p{ color: rgba(255,255,255,.82); }
.site-cards--onDeep .site-cards__no{ color: var(--c-accent); }
.site-recruit .site-cards, .site-recruit .site-gates{ margin-top: clamp(28px,3vw,44px); }
.site-gates--onDeep{ margin-bottom: clamp(28px,3vw,44px); }

/* --- 64-4. CTA の2列 --- */
/* 2列のCTA：リード文の行数が違っても、行（ボタン）の頭が左右で揃うように
   列を縦フレックスにして行を下端へ寄せる。行は列いっぱいの幅で揃える */
.site-cta__duo{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,4vw,80px); margin-top: clamp(30px,3.4vw,48px); text-align: left; }
.site-cta__col{ display: flex; flex-direction: column; }
.site-cta__col .site-cta__lead:last-child{ margin-bottom: 0; }
/* ボタンは本文の下に横3つ。行は等幅で、矢印までの間延びを抑える */
.site-cta__acts--2{ display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,28px); margin-top: clamp(30px,3.4vw,48px); text-align: left; }
.site-cta__acts--2 .site-row{ width: 100%; margin-top: 0; }
@media (max-width: 899px){ .site-cta__acts--2{ grid-template-columns: 1fr; gap: 0; } }
.site-cta__sub{ margin: 0 0 10px; font-size: var(--fs-lead); font-weight: 700; color: #fff; }
.site-cta__duo .site-cta__lead{ margin: 0 0 clamp(18px,2.2vw,28px); }
.site-cta__duo .site-cta__acts{ margin-top: auto; justify-content: stretch; justify-items: stretch; }
.site-cta__duo .site-row{ width: 100%; }
@media (max-width: 899px){
  .site-cta__duo{ grid-template-columns: 1fr; gap: clamp(28px,4vw,40px); }
  .site-cta__duo .site-cta__acts{ margin-top: clamp(16px,2vw,22px); }
}

/* 求人ショート導線：本文と行の下端を揃える。2列に割るのは行が窮屈にならない幅から */


/* ============================================================
   65. TOP の細部
   ・求人ショート導線の見出しは深緑（温白地で黒文字だと沈むため）
   ・OUR HISTORY の行は写真列と競合するので、本文の直下に文字幅ぶんで置く
   ============================================================ */
/* 求人ショート導線は深緑の帯。温白地では章頭英字も見出しも沈むため、
   面ごと反転させて「募集中」であることを一目で分かるようにする */
.site-jobstrip{ color: #fff; }

.site-hist .site-row{ width: fit-content; min-width: min(340px,100%); margin-left: 0; margin-right: auto; }

/* ============================================================
   66. 見出しの折り返し
   和文見出しが「…ありませ／ん」のように1〜2文字だけ落ちるのを防ぐ。
   サイトの既定は word-break: keep-all（語の途中で折らない）だが、
   和文では区切り位置が少なく、結果的に末尾だけが落ちる。
   見出しに限り word-break: auto-phrase を掛けて文節で折り、
   text-wrap: balance で行長を揃える。本文（長文）には掛けない。
   例：毎日同じルートで／はありません（従来は …ありま／せん）
   ============================================================ */
.site-h2__l,
.site-h2,
.sub-hero h1,
.site-cta__ttl,
.site-cta__sub,
.site-cards li h3,
.site-gates h3,
.site-voice__wip,
.site-news__ttl,
.site-blog__ttl,
.site-blog__cardttl,
.site-eyebrow,
.wh-intro__ttl{ text-wrap: balance; word-break: auto-phrase; }
@supports not (word-break: auto-phrase){
  .site-h2__l, .site-h2, .sub-hero h1, .site-cta__ttl, .site-cta__sub,
  .site-cards li h3, .site-gates h3, .site-blog__cardttl, .wh-intro__ttl{ word-break: normal; }
}

/* 章頭の●ラベルと小見出しは短いので、そもそも折らない */
.site-eyebrow--dot{ text-wrap: nowrap; }
@media (max-width: 599px){ .site-eyebrow--dot{ text-wrap: balance; } }

/* ============================================================
   67. 求人3ページの写真枠
   撮影指示（社員同士の会話／作業風景）を受けて増やした枠。
   ・.site-figs … 本文のあとに 1〜3枚並べる横組み。版面幅に従う
   ・.site-atmo … /recruit「働く人たち・現場の雰囲気」の8枚。
     4列2段。1枚だけ2マス使って単調な格子にしない
   ・.site-timeline__fig … 1日の流れの各ステップに添える小さな写真
   ・.gate-img … 入口カードの写真をドロップ可にする層（従来の
     ::before の背景を置き換える。ホバーの寄りはこの層が持つ）
   ============================================================ */
.site-figs{ display: grid; gap: clamp(16px,2vw,28px); margin-top: clamp(30px,3.4vw,48px); }
.site-figs--1{ grid-template-columns: 1fr; }
.site-figs--2{ grid-template-columns: repeat(2,1fr); }
.site-figs--3{ grid-template-columns: repeat(3,1fr); }
/* 1枚だけ置くが版面いっぱいにはしない（本文の読み幅に合わせる） */
.site-figs--half{ grid-template-columns: minmax(0,min(560px,58%)); }
@media (max-width: 599px){ .site-figs--half{ grid-template-columns: 1fr; } }
.site-figs__i{ position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.site-figs--1 .site-figs__i{ aspect-ratio: 21 / 9; }
@media (max-width: 899px){
  .site-figs--3{ grid-template-columns: repeat(2,1fr); }
  .site-figs--1 .site-figs__i{ aspect-ratio: 16 / 9; }
}
@media (max-width: 599px){ .site-figs--2, .site-figs--3{ grid-template-columns: 1fr; } }

/* 2枚。横に並べ、写真そのものを大きく見せる */
.site-atmo{ display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,28px); margin: clamp(30px,3.4vw,48px) 0 0; padding: 0; list-style: none; }
.site-atmo li{ position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
@media (max-width: 599px){ .site-atmo{ grid-template-columns: 1fr; } }


/* 入口カードの重ね順：写真(0) → 暗いスクリム(1) → 文字(2)。
   ::before の背景写真は使わず、この層が写真とホバーの寄りを持つ */
.site-gates .gate-img{ position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; transition: transform 1.1s var(--ease); }
.site-gates a:has(> .gate-img)::before{ display: none; }
.site-gates a:has(> .gate-img)::after{ z-index: 1; }
.site-gates a:has(> .gate-img) > :not(.gate-img){ position: relative; z-index: 2; }
.site-gates a:hover .gate-img{ transform: scale(1.09); }

/* --- 68. /recruit/career 定着率：写真の横に数字を2×2で置く --- */
.years-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(24px,3vw,52px); align-items: stretch; margin-top: clamp(30px,3.4vw,48px); }
.years-grid__fig{ position: relative; overflow: hidden; min-height: clamp(240px,26vw,380px); }
.years-grid__stats{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.4vw,36px) clamp(24px,3vw,48px); align-content: center; margin: 0; }
@media (max-width: 899px){
  .years-grid{ grid-template-columns: 1fr; }
  .years-grid__fig{ aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 479px){ .years-grid__stats{ grid-template-columns: 1fr; } }

/* ============================================================
   69. ヘッダー 1500〜1599px の詰め
   1段組みの下限は1500pxだが、ナビ8項目では正式名称の長さで
   約36px 足りず、電話番号とぶつかる。この帯だけ項目間と
   字送りを詰めて1段に収める（1600px以上は従来のゆとりのまま）
   ============================================================ */
@media (min-width:1500px) and (max-width:1599px){
  .sh__nav ul{ gap: 12px; }
  .sh__nav a{ font-size: 13.5px; letter-spacing: .03em; }
  .sh__panel{ gap: 22px; }
}

/* --- 70. /information 代表メッセージ：写真は本文の横に小さく（縦3:4） --- */
.msg-grid{ display: grid; grid-template-columns: minmax(0,1fr) clamp(240px,22vw,340px); gap: clamp(28px,3.4vw,64px); align-items: start; }
.msg-grid__body p{ max-width: 40em; }
.msg-grid__fig{ position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
@media (max-width: 899px){
  .msg-grid{ grid-template-columns: 1fr; }
  .msg-grid__fig{ max-width: 320px; aspect-ratio: 3 / 4; }
}

/* ============================================================
   71. ヘッダー1段組み：文字を折り返させない
   §69 で項目間を詰めても、ロゴ・電話番号・CTAは nowrap でなく
   min-width:0 で縮むため、幅の足りない画面で2行に折れていた。
   1段組みの帯では3者を縮ませず（flex-shrink:0）1行に固定する。
   ============================================================ */
@media (min-width:1500px){
  .sh__logo, .sh__tel, .sh__cta{ flex: 0 0 auto; white-space: nowrap; }
  .sh__logo-ja, .sh__logo-en, .sh__tel-num, .sh__tel-note{ white-space: nowrap; }
  .sh__nav{ flex: 1 1 auto; }
  .sh__nav ul{ flex-wrap: nowrap; justify-content: center; }
}

/* ============================================================
   72. フォーム（お問い合わせ／応募）
   草案では送信処理を持たないので、入力欄は ＜input＞ ではなく
   見た目だけの箱で作る（誤操作・誤送信を避ける）。
   ラベルと欄の2列。狭幅では縦積み。角丸なしは全体ルールどおり。
   ============================================================ */
.site-form{ display: grid; margin-top: clamp(30px,3.4vw,48px); border-top: 1px solid var(--c-rule); }
.site-form__row{ display: grid; grid-template-columns: minmax(200px,.3fr) minmax(0,1fr); gap: clamp(12px,2vw,32px); padding: clamp(18px,2vw,26px) 0; border-bottom: 1px solid var(--c-rule); align-items: start; }
.site-form__label{ display: flex; align-items: baseline; gap: 10px; font-weight: 700; letter-spacing: .04em; }
.site-form__label em{ font-family: var(--f-en); font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: .1em; color: var(--c-white); background: var(--c-deep); padding: 3px 7px; }
.site-form__input{ display: block; width: 100%; height: 52px; background: var(--c-white); box-shadow: inset 0 0 0 1px #cfd7c8; }
.site-form__input--sm{ max-width: 320px; }
.site-form__input--area{ height: 168px; }
.site-form__choices{ display: flex; flex-wrap: wrap; gap: clamp(10px,1.4vw,18px); }
.site-form__radio{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; background: var(--c-white); box-shadow: inset 0 0 0 1px #cfd7c8; }
.site-form__radio::before{ content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px #9aa79a; }
.site-form__radio.is-on{ box-shadow: inset 0 0 0 2px var(--c-accent); }
.site-form__radio.is-on::before{ background: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.site-form__submit{ display: flex; justify-content: center; margin-top: clamp(28px,3vw,44px); }
.site-form__submit .site-btn{ min-width: 300px; justify-content: center; }
.site-form__submit--rows{ display: grid; justify-content: stretch; }
@media (max-width: 767px){
  .site-form__row{ grid-template-columns: 1fr; gap: 10px; }
  .site-form__submit .site-btn{ min-width: 0; width: 100%; }
}

/* ============================================================
   73. ブログ（一覧・記事）
   CMSが吐く形に合わせた2カラム。左に記事、右に「最近の投稿」と
   「カテゴリー」。サムネイルは §26 の薄いグレー枠がそのまま効く。
   ============================================================ */
.blog-layout{ display: grid; grid-template-columns: minmax(0,1fr) clamp(260px,24vw,320px); gap: clamp(28px,3.4vw,64px); align-items: start; }
.blog-cards{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.2vw,32px); margin: clamp(28px,3vw,44px) 0 0; padding: 0; list-style: none; }
.blog-cards a{ display: grid; text-decoration: none; color: inherit; background: var(--c-white); }
.blog-card__thumb{ display: block; aspect-ratio: 4 / 3; }
.blog-card__meta{ display: flex; align-items: center; gap: 10px; padding: clamp(14px,1.6vw,18px) clamp(14px,1.6vw,18px) 0; font-family: var(--f-en); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--c-ink-soft); }
.blog-card__cat{ font-family: var(--f-ja); font-size: 12px; letter-spacing: .06em; padding: 3px 9px; box-shadow: inset 0 0 0 1px var(--c-rule); }
.blog-card__ttl{ display: block; padding: 8px clamp(14px,1.6vw,18px) clamp(16px,1.8vw,22px); font-weight: 700; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.blog-cards a:hover .blog-card__ttl{ color: var(--c-accent-ink); }

.blog-pager{ display: flex; gap: 8px; margin-top: clamp(28px,3vw,44px); }
.blog-pager__i{ display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 14px; background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-rule); font-family: var(--f-en); text-decoration: none; color: inherit; }
.blog-pager__i.is-on{ background: var(--c-deep); color: #fff; box-shadow: none; }
.blog-pager__i:hover:not(.is-on){ box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-accent-ink); }

.blog-side{ display: grid; gap: clamp(20px,2.4vw,32px); }
.blog-side__box{ background: var(--c-white); }
.blog-side__ttl{ margin: 0; padding: 14px 18px; background: var(--c-deep); color: #fff; font-size: var(--fs-base); font-weight: 700; letter-spacing: .06em; }
.blog-side__list{ margin: 0; padding: 0; list-style: none; }
.blog-side__list a{ display: grid; gap: 4px; padding: 14px 18px; border-bottom: 1px solid var(--c-rule); text-decoration: none; color: inherit; }
.blog-side__list li:last-child a{ border-bottom: 0; }
.blog-side__list--posts time{ font-family: var(--f-en); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--c-ink-soft); }
.blog-side__list--posts span{ font-weight: 500; line-height: 1.6; }
.blog-side__list--cats a{ grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.blog-side__list--cats em{ display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; font-family: var(--f-en); font-style: normal; font-size: var(--fs-sm); box-shadow: inset 0 0 0 1px var(--c-rule); }
.blog-side__list a:hover{ color: var(--c-accent-ink); }

.blog-post__meta{ display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--f-en); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--c-ink-soft); }
.blog-post__fig{ aspect-ratio: 16 / 9; margin-bottom: clamp(24px,2.8vw,40px); }
.blog-post__body p{ max-width: 40em; }
.blog-post__sign{ margin-top: clamp(28px,3vw,44px); padding-top: clamp(18px,2vw,26px); border-top: 1px solid var(--c-rule); font-weight: 700; letter-spacing: .06em; }

@media (max-width: 1099px){ .blog-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 899px){ .blog-layout{ grid-template-columns: 1fr; } }
@media (max-width: 599px){ .blog-cards{ grid-template-columns: 1fr; } }

/* ============================================================
   74. バナー（下層ヒーロー）の写真をドロップ可にする
   ・写真は .imgslot--hero が持ち、深緑のスクリムはその ::after に移す
     （スクリムは pointer-events: none。写真のドロップ／位置調整を邪魔しない）
   ・見え方は 47 節の指定と同じ（ノイズ＋左を濃く右を抜くグラデ）
   ============================================================ */
.sub-hero:has(> .imgslot--hero){ background-image: none; }
.imgslot--hero{ position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; }
.imgslot--hero > image-slot{ display: block; position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
.imgslot--hero::after{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image:
    var(--noise-d),
    linear-gradient(100deg, rgba(11,42,14,.9) 0%, rgba(11,42,14,.82) 38%, rgba(11,42,14,.6) 100%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
}
.sub-hero:has(> .imgslot--hero) > :not(.imgslot--hero){ position: relative; z-index: 2; }

/* --- 74-2. バナーのドロップ判定を写真層に通す
   ・文字層は矩形でヒットテストを奪うので pointer-events を切り、
     実際に押す要素（パンくずのリンク）だけ戻す
   ・閉じているドロワーは画面右半分を覆っていたので、開いた時だけ受ける --- */
.sub-hero:has(> .imgslot--hero) > :not(.imgslot--hero){ pointer-events: none; }
.sub-hero:has(> .imgslot--hero) a,
.sub-hero:has(> .imgslot--hero) button{ pointer-events: auto; }
@media (max-width: 1099px){
  .sh__panel, .sh__scrim{ pointer-events: none; }
  .sh__toggle:checked ~ .sh__panel,
  .sh__toggle:checked ~ .sh__scrim{ pointer-events: auto; }
}

/* ============================================================
   75. トップに残っていた背景CSS固定の写真をドロップ可にする
   ・車列の全幅帯／CTA帯／背面の装飾写真2枚
   ・スクリム・マスクは写真層より前に置き、pointer-events を切る
   ★車列帯の「スクロールで動かない（background-attachment: fixed）」は
     写真を要素で持つ間は効かない。焼き込み時に CSS 背景へ戻して復帰させる
   ============================================================ */
.site-cta__band:has(> .imgslot--cta){ background: none; }
.imgslot--cta{ position: absolute; inset: 0; display: block; overflow: hidden; z-index: 0; }
.imgslot--cta > image-slot{ display: block; position: absolute; inset: 0; }
.imgslot--cta::after{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(100deg, rgba(11,42,14,.9) 0%, rgba(11,42,14,.82) 38%, rgba(11,42,14,.6) 100%);
}
.sec-photo:has(> .imgslot){ background-image: none !important; pointer-events: auto; }
.sec-photo > .imgslot{ position: absolute; inset: 0; display: block; }
.sec-photo > .imgslot > image-slot{ display: block; position: absolute; inset: 0; }
.imgslot > image-slot{ position: absolute; inset: 0; }

/* ============================================================
   76. FV（メインビジュアル）へ写真をドラッグできるようにする
   ・キャッチ・ボタン帯・ノイズ層が写真の上に矩形で載っていて、
     ドロップ判定を全部奪っていた。文字層はヒットテストから外し、
     実際に押す要素（ボタン・リンク）だけ戻す
   ・3枚の重ねは表示中の1枚だけを対象にする（下の script が付ける
     .is-drop-target 以外は判定を切る）
   ============================================================ */
/* FVの面ごとヒットテストから外す（写真はこの面の下＝ピン留めした層にある） */
.site-fv, .site-fv__body, .site-fv__side, .site-fv__scroll, .site-ghost, .site-marquee{ pointer-events: none; }
.site-fv a, .site-fv button, .site-fv label, .site-fv input, .site-fv [tabindex]{ pointer-events: auto; }
.fv-slider::after{ pointer-events: none; }
html.is-dropping .fv-slider__img{ pointer-events: none; }
html.is-dropping .fv-slider__img.is-drop-target{ pointer-events: auto; }

/* --- 76-2. ドラッグ中だけ、写真枠を覆っている面をヒットテストから外す
   （リンクカードの面／カード内の文字層／装飾のスクリム）。
   ドラッグが終われば戻るので、カードのクリックはそのまま --- */
html.is-dropping a:has(image-slot){ pointer-events: none; }
html.is-dropping a:has(image-slot) .imgslot,
html.is-dropping a:has(image-slot) .gate-img,
html.is-dropping a:has(image-slot) image-slot{ pointer-events: auto; }
html.is-dropping .site-gates a > :not(.gate-img){ pointer-events: none; }
html.is-dropping .site-blog__thumb ~ *,
html.is-dropping .blog-card__thumb ~ *{ pointer-events: none; }

/* --- 78. 入口カードの写真層：.ph-set:has(> .imgslot) の position:relative に
   負けて枠が高さ16pxに潰れていたので、絶対配置を明示して戻す --- */
.site-gates .gate-img.ph-set{ position: absolute; inset: 0; }

/* ============================================================
   80. 明るい配色（2026-09 調整。ここが配色の最終指定）
   ------------------------------------------------------------
   上の §1 トークンを打ち消して上書きする。色を変えるときはここだけ触る
   ============================================================ */
/* --- 1. トークン --- */
:root{
  --c-base:        #FAFBF7;
  --c-white:       #ffffff;
  --c-lite:        #EFF6EA;
  --c-deep:        #39804E;
  --c-deep-2:      #2F6E42;
  --c-deepest:     #205C42;
  --c-accent:      #9ACD32;
  --c-accent-ink:  #4A7A1E;
  --c-accent-lite: #EAF4D4;
  --c-ink:         #333833;
  --c-ink-soft:    #5A605A;
  --c-rule:        #DDE4D7;
  --c-rulegrid:    #EBF0E5;
}

/* --- 2. FV〜MESSAGE：写真に載る緑のベールを現状より約35%弱める --- */
.site-hz::after{
  background:
    var(--noise-l),
    linear-gradient(180deg,
      rgba(20,52,26,.08) 0%,
      rgba(20,52,26,0) 10%,
      rgba(20,52,26,0) 17%,
      rgba(24,60,32,.15) 23%,
      rgba(24,60,32,.23) 34%,
      rgba(26,64,34,.30) 44%,
      rgba(28,70,40,.36) 56%,
      rgba(34,86,48,.54) 78%,
      var(--c-deep) 94%,
      var(--c-deep) 100%);
  background-size: var(--noise-size) var(--noise-size), auto;
  background-repeat: repeat, no-repeat;
}
/* ベールが薄くなるぶん、FVのキャッチだけ足元に弱いスクリムを残す */
.site-fv__body{ text-shadow: 0 1px 26px rgba(14,38,18,.42); }

/* --- 3. 中盤の大きな緑面（採用）：緑地のまま、濃さをメイングリーンまで上げる --- */
.site-recruit.bg-deep{ background-color: var(--c-deep); }
.site-recruit .site-stats dt{ color: #fff; }
/* 背面の写真は面より暗く沈めない。明るめに置いて面の重さを抜く */
.site-recruit .sec-photo{ opacity: .44; filter: saturate(.78) brightness(1.06); }
.site-recruit.bg-deep .site-gates a{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

/* --- 4. 白地／オフホワイト／淡いグリーンの交互 --- */
/* 業務内容（2分割①）を淡いグリーンに */
section[aria-labelledby="h-s1"].bg-base{
  background-color: var(--c-lite);
  --c-rulegrid: rgba(46,107,63,.07);
}

/* --- 5-1. 求人ショート導線：メイングリーン＋黄緑の行（採用CTA） --- */
.site-jobstrip.bg-deep{ background-color: var(--c-deep); }
.site-jobstrip .site-row--onDeep{ color: #14300a; border-color: var(--c-accent); }
.site-jobstrip .site-row--onDeep::before{ transform: scaleX(1); }
.site-jobstrip .site-row--onDeep:hover{ color: #14300a; }

/* --- 5-2. 倉庫の浮いたパネルはメイングリーン --- */
.site-panel__face{ background-color: var(--c-deep); }
.site-panel__face .sec-photo{ opacity: .34; filter: saturate(.7) brightness(1.02); }

/* --- 5-3. CTA：写真に載せる緑を明るく。採用の行だけ黄緑 --- */
.site-cta__band,
.imgslot--cta::after{
  background-image: linear-gradient(100deg, rgba(57,128,78,.82) 0%, rgba(57,128,78,.7) 38%, rgba(57,128,78,.46) 100%);
}
.site-cta__acts .site-row--onDeep[href="/recruit"]{ color: #14300a; border-color: var(--c-accent); }
.site-cta__acts .site-row--onDeep[href="/recruit"]::before{ transform: scaleX(1); }
.site-cta__acts .site-row--onDeep[href="/recruit"]:hover{ color: #14300a; }

/* --- 5-4. フッターだけ濃く締める --- */
.sf{ background: var(--c-deepest); }

/* ============================================================
   6. アクセントは黄緑 #9ACD32 のみ（点使い・面には使わない）
   ============================================================ */
.site-h2__l.site-h2__l--sm{ color: var(--c-accent-ink); }
.site-h2--onDeep .site-h2__l.site-h2__l--sm{ color: var(--c-accent-lite); }
.site-stats dd{ color: #fff; }
.site-stats dd span{ color: var(--c-accent-lite); opacity: 1; }
.site-stats dt{ color: #fff; opacity: .96; font-weight: 700; }

/* --- 80-7. 明るい緑の上の小さな文字は不透明にして読みやすさを確保（AA 4.5:1） --- */
.bg-deep p,
.site-recruit .site-recruit__text p,
.site-panel__face p,
.site-cta__lead{ color: #fff; }
.site-eyebrow--onDeep,
.site-eyebrow--onDeep.site-eyebrow--dot{ color: #fff; }
.site-h2--onDeep .site-h2__l.site-h2__l--sm{ color: #F4FAE8; }
.site-stats dd span{ color: #F4FAE8; }
.site-panel__face .site-badges li{ border-color: #F4FAE8; color: #F4FAE8; }
.site-panel__face .site-textlink{ color: #F4FAE8; }
.site-recruit .site-gates__go,
.bg-deep .site-gates__go{ color: #F4FAE8; }


/* ============================================================
   79. 焼き込み版（dist）：写真スロットを ＜img＞ に置き換えた状態の指定
   枠側が位置とクリップを持ち、写真はその枠を埋めるだけ
   ============================================================ */
.baked-img{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.plx__i:has(> .baked-img){ background-image: none !important; background-color: transparent !important; }
.ph-set:has(> .imgslot){ position: relative; overflow: hidden; }
.site-gates .gate-img.ph-set{ position: absolute; inset: 0; }


/* ===== 21_cuezilla-skin.css ===== */
/* ============================================================
   ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★
   ------------------------------------------------------------
   （Claude Code / Claude Design / 手作業、いずれの経路でも同じです）

   ■ 案件ごとの調整は、必ず `override.css` に書いてください。
     読み込み/結合順が  … → style.css → cuezilla-skin.css → 【override.css】  なので、
     override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。**
     （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`）

   ■ なぜ編集してはいけないか
     本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。
     以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／
     フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。
     実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。
     「毎案件おなじ崩れを直している」の原因はこれです。

   ■ 共通で直すべき崩れを見つけたら
     案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。
     還流し忘れると、次の同期でその修正は消えます。

   詳細は R-30（70_運用ルール/運用ルール集.md）。
   ============================================================ */

/* ============================================================
   CueZilla 動的パーツ スキンキット v1.0
   ------------------------------------------------------------
   目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の
         CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・
         フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。

   思想:
     (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動
         → サイトのテーマ設定がそのまま skin にも効く（色は一元管理）
     (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため）
     (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等)
         → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない）

   ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）:
     ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない
       （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。
     ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。
       単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。
     ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／
       .partsNNN_blog_＜ID＞(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、
       負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。
     ・変数の注意：実機は body内コンポの style 要素の :root が7色(--main-color等)を撒きうる（490件中16件）。
       →§0の--dyn-*はその頁で乗っ取られ得る。動的パーツの色合わせには許容だが、サイト設計の主機構にしない。

   使い方:
     1. §0 のトークンを案件に合わせて調整（ダーク/ライトはプリセットをコピー）
     2. CueZilla テーマカラー(--main-color 等)をブランド値に設定
     3. 本ファイルをサイト全体CSS(AddCssInfo)へ貼る（サイト固有のフリーコーディングCSSの後ろ）
   ============================================================ */


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） ---
     ※これらは【動的パーツの色合わせ用】。生成サイトCSSはこの変数に依存せず具体値で書く（安全契約）。
       実機では body内コンポの style 要素の :root が --main-color 等を頁単位で上書きしうる＝--dyn-*も追従する。 */
  --dyn-bg:        var(--background-color, #ffffff);   /* ページ/セクション背景 */
  --dyn-surface:   var(--temporary-color, #f4f4f2);    /* カード/パネル/入力欄の面 */
  --dyn-text:      var(--text-color, #222222);         /* 本文 */
  --dyn-heading:   var(--text-color, #111111);         /* 見出し */
  --dyn-muted:     var(--sub-color, #8a8a8a);          /* 補助/日付 */
  --dyn-border:    var(--sub-color, #dddddd);          /* 罫線/枠 */
  --dyn-accent:    var(--main-color, #1e3a5f);         /* アクセント（ボタン/チップ/見出しバー） */
  --dyn-accent-2:  var(--link-color, var(--main-color, #1e3a5f)); /* リンク/ホバー */
  --dyn-on-accent: #ffffff;                             /* アクセント面の上の文字 */

  /* --- フォント（site.css の :root に定義があればそれを使用） ---
     KEEP: ★既定を明朝にしない（2026-08-31 ディレクター判断）。旧既定は display と numeric が
     `"Noto Serif JP","Yu Mincho",serif` / `"EB Garamond","Noto Serif JP",serif` ＝**明朝**で、
     案件が `--font-*` を渡し忘れると**動的ページ（ブログ・施工実績）だけが明朝で出る**。
     実測 S00757 スマイルカミオン: 記事タイトル・抜粋・タグ（display）7要素＋20要素、日付（numeric）各4要素が明朝になり、
     ディレクター指摘「ブログページに明朝が活用されていますが、サイト全体のフォントで統一してください」を受けた。
     ★渡し忘れは"案件のミス"だが、**気づけるのが公開直前の目視だけ**で、静的ページを見ている限り絶対に露見しない。
     ＝**既定が事故を作っていた**ので、既定側を直す。方針は「今後進める案件がサイトに使用しているフォントで
     反映される仕様にする」（ディレクター 2026-08-31）。
     ★意図して明朝にしたい案件は、これまでどおり `--font-display` 等を渡せばそのまま効く（機構は不変）。
     ★numeric は日付・英字ラベル用なので、和文本文より英字の顔が合う。sans を既定にしつつ英字を先頭へ置く。
     ★既存の納品済み案件は影響を受けない（納品CSSは書き出し時にベイク済みで、再エクスポートしない限り変わらない）。 */
  --dyn-font-display: var(--font-display, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif);
  --dyn-font-numeric: var(--font-numeric, "Helvetica Neue",Arial,"Noto Sans JP",sans-serif);
  /* /KEEP */

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 0 --- */
  --dyn-radius: 6px;
  /* --- 一覧カードの最小幅 / 段組ギャップ --- */
  --dyn-card-min: 300px;
  --dyn-gap: 32px;
}

/* === テーマ プリセット（使う方を §0 の後にコピペして上書き） =========
   【ダーク】
   :root{
     --dyn-bg:#0A0A0A; --dyn-surface:#111110; --dyn-text:#F4F1EC; --dyn-heading:#FAF7F1;
     --dyn-muted:#8C857A; --dyn-border:#3A352D; --dyn-accent:#8E3A22; --dyn-accent-2:#B0533A;
     --dyn-on-accent:#FAF7F1; --dyn-radius:0;
   }
   【ライト】
   :root{
     --dyn-bg:#ffffff; --dyn-surface:#f7f7f5; --dyn-text:#222222; --dyn-heading:#111111;
     --dyn-muted:#8a8a8a; --dyn-border:#e3e3e3; --dyn-accent:#1e3a5f; --dyn-accent-2:#1e3a5f;
     --dyn-on-accent:#ffffff; --dyn-radius:6px;
   }
   ※ CueZilla テーマ変数(--main-color 等)を設定する場合は §0 が自動連動するのでプリセット不要。
   ============================================================ */


/* ============================================================
   §1  パンくず（CueZilla parts###_breadcrumb / p-breadcrumb）
   実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb
             > ul.p-breadcrumb__inner(BreadcrumbList) > li.p-breadcrumb__item(ListItem)
   CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与
   ============================================================ */
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; }
.p-breadcrumb__inner{
  list-style:none; margin:0 auto; padding:14px 24px;
  max-width:1200px; display:flex; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb__item{
  display:inline-flex; align-items:center;
  color:var(--dyn-muted) !important; font-family:var(--dyn-font-body);
  font-size:.78rem; letter-spacing:.04em;
}
.p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; }
.p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; }
.p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; }   /* 現在地 */
/* 区切り（2件目以降の左に縦罫線）※R-27対応（2026-08-26）
   旧実装は `::before` の content 宣言（文字リテラル "›"）で区切りを描いていたが、AddCssInfo は
   疑似要素の content 宣言をサニタイズで落とすため、実機では区切りが消えて
   「ホーム私たちの歴史」のように語が詰まっていた。
   ★実要素（＜span＞）へ昇格させず「content を使わない罫線」で代替した理由:
     パンくずの運用第一候補は「CueZilla がページ階層から自動描画するパンくずパーツ」で、
     その markup に区切り用の要素を挿す手段が無い。templates/breadcrumb.html（明示設置版）だけ
     直しても自動描画側は直らないので、両経路に1本のCSSで効く手段を採った。
     border / padding はサニタイズ後も残る（R-27「残る」側）。
   ★物理プロパティ（border-left）で書く理由: サニタイズのホワイトリストに論理プロパティが
     載っていない可能性を避ける。和文サイトは横書きLTR固定なので意味は同じ。 */
.p-breadcrumb__item + .p-breadcrumb__item{
  margin-left:.7em; padding-left:.7em;
  border-left:1px solid var(--dyn-border) !important;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の ＜meta itemprop="position"＞ は非表示 */


/* ============================================================
   §2  ページヘッダー（[class*="_article_header"]）画像上のタイトル
   ============================================================ */
[class*="_article_header"] .ja, [class*="_article_header"] h1, [class*="_article_header"] h2{
  color:var(--dyn-heading) !important; font-family:var(--dyn-font-display) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.5) !important;
}
[class*="_article_header"] .en{ color:var(--dyn-muted) !important; font-family:var(--dyn-font-numeric) !important; letter-spacing:.1em; text-shadow:0 1px 10px rgba(0,0,0,.5) !important; }


/* ============================================================
   §3  ページネーション（2系統。テーマCSSの持ち方が違うので扱いを分ける＝崩れ防止）
   ・.pagination_*（enjoyworks系）            … テーマが素 → 体裁＋色を一式付与
   ・[class*="_pagenation"]（parts222/225/228系）… テーマが体裁を持つ（flex/padding/border/白黒ハードコード）
        → レイアウト・サイズはテーマに任せ、ハードコードの白黒(#000/#fff)だけブランド色へ置換（最小限）。
          a/.current 以外（余白用の素の ＜span＞）には触らない＝二重ボックス化を防ぐ。
          --dyn-accent は §0 で var(--main-color) にバインド済み＝サイトのCMS色に自動一致（案件側の手当て不要）。
   ============================================================ */
/* (A) pagination_* 系：テーマ装飾が無いので一式付与 */
.pagination_num, .pagination_prev, .pagination_next{
  font-family:var(--dyn-font-numeric); color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
  min-width:40px; /*height:40px; */display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.pagination_num.current{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }

/* (B) _pagenation 系：色だけ寄せる（ジオメトリはテーマのまま＝箱を再定義しない） */
[class*="_pagenation"] a{ border-color:var(--dyn-accent) !important; color:var(--dyn-text) !important; }
[class*="_pagenation"] span.current, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
[class*="_pagenation"] a:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }
.pe-none{ opacity:.3; pointer-events:none; }


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  /* カード等寸化：中身を縦に積み、内側の ＜a＞/本文枠を flex で伸長させて高さを揃える（S01189還流） */
  display:flex !important; flex-direction:column;
  margin:0 !important;   /* theme_default の margin-bottom(55px等)残存で最終行カードだけ高さ不揃いになるのを打ち消す */
  width:auto !important; max-width:none !important; text-decoration:none;
  background:var(--dyn-surface) !important; border:1px solid var(--dyn-border) !important;
  border-radius:var(--dyn-radius); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
[class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:var(--dyn-accent-2) !important; }
[class*="_post_wrap"] > a{ display:flex; flex-direction:column; flex:1 1 auto; color:inherit; }  /* カード全体ラップ＜a＞を縦伸長（内容を上下に満たす） */
/* サムネ等寸化：グリッド列の幅から高さを算出（幅制約下＝§6.5の aspect-ratio×height 併用の罠には該当しない） */
[class*="_post_img"]{ width:100%; display:block; border-radius:0; aspect-ratio:16/10; overflow:hidden; }
[class*="_post_img"] img{ width:100%; height:100%; object-fit:cover; display:block; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; align-items:center; }
[class*="_post_status"]:has([class*="_title-excerpt"]){ display:block !important; }   /* parts228系「日付｜タイトル」の横並びを解除（:has非対応環境ではflex-wrapで折返し） */
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; flex:1 1 auto; }   /* 本文枠を伸長＝カード等寸化の要 */
[class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding:10px 0 16px !important; }   /* 施工実績は左端揃え */
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; font-weight:700 !important; line-height:1.5; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* カテゴリ/ステータスは1チップに。
   テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので
   同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */
[class*="_post_category"]:not([class*="_sidebar"]), [class*="_post_status"] > span:last-child{
  /* :not(_sidebar) ＝ この§4チップ装飾が §5 の _sidebar_post_category_count へ漏れ二重適用されるのを防ぐ（S01189還流） */
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

/* --- 一覧パーツ固有の崩れ2点（実共有CSS=theme parts222/225/228 を突き合わせて確定）---
   (a) 自動セクション見出し（「ブログ」「施工実績」等）の撤去：
       テーマは `.parts222_section h2 / .parts228_section h2` に
       color:var(--main-color)/font-size:35px/text-align:center を付与し、
       一覧上部に大見出しを自動描画する。自前の下層ヘッダー(hero)と二重化＝崩れ。
       → 一覧パーツ(_post_list を含む _section)直下の素の h2 だけ隠す。
         残したいサイトは案件CSSで個別に復帰。`:has()` 非対応保険に f_meiryo 版も併記。 */
[class*="_section"]:has([class*="_post_list"]) > h2,
[class*="_section"] > h2.f_meiryo{ display:none !important; }
/* (b) flex前提の余白スペーサー ::after の無効化：
       テーマは `.parts228_post_list::after{content:"";width:32.465%}` で flex の最終行詰めをする。
       §4 で _post_list を grid 化すると、この ::after が「空のゴースト列」になり最終行が片寄る。
       → grid では不要なので除去（content:none で擬似要素自体を消す）。 */
[class*="_post_list"]::after{ content:none !important; display:none !important; }


/* ============================================================
   §4-b  ブログ枠パーツ（parts131415_blog 系）＝ 内側でBootstrapが生きている型
   ------------------------------------------------------------
   §4 は parts222/225/228 の `_post_list` / `_post_wrap` 接尾辞を前提にしている。
   parts131415_blog 系は接尾辞が違い（`.row.row-cols-lg-3 > .col > .card`）、§4のセレクタが
   **1つも届かない**。そのため案件ごとに同じCSSを書き直す状態になっていた。
   教訓: 70_運用ルール/デザイン教訓/cms-part-bootstrap-grid-collapses-cards.md
         70_運用ルール/デザイン教訓/cms-part-heading-typography-override.md
   （承認: 2026-09-01「A・B・C ＋ I ＋ G/H（受領チェック1項目）」）

   (a) カードが列幅のさらに1/3に潰れる（独立3案件で真因一致: S02150・O01540・S00459）
       パーツが吐く `.row.row-cols-1.row-cols-sm-2.row-cols-lg-3` は Bootstrap の
       `.row-cols-lg-3 > *{flex:0 0 auto; width:33.3333%}` が生きたまま。案件側で `.row` を
       grid 化しても **grid の子に残った width:33.3333% が「列幅の33.3%」として再び効く**ため、
       341px の列の中でカードが 114px（サムネイル 52px）まで潰れる（実測 S02150 2026-08-25）。
       ★崩れるのは実機だけで、受領データを単体で開くと正常に見える＝**受領物を見ている限り
         絶対に気づけない**。だから案件ごとの気づきに任せず skin の既定にする。
       → §4 の `_post_list` と同じ扱い（auto-fill グリッド＋子の幅指定を落とす）を対にして当てる。
         **grid 化と子の無効化は必ずセット**。片方だけだと、grid 化なしで幅を落とせば1列に伸び、
         幅を落とさず grid 化すれば上記の 1/3 潰れが起きる。
       ★施工実績枠には当たらない。あちらは `.content.d-flex`（`.row` を持たない）で、
         flex の子に幅を当てると3枚が横にあふれる。クラス名では枠を判別できない
         （CMSが `parts131415_blog_DKhwGnz7DM` のように乱数の接尾辞を付け、作り直すと変わる）ため、
         **`.row` を持つか＝中身で分岐している**。 */
[class*="parts131415_blog"] .row{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important;
  gap:var(--dyn-gap) !important;
}
[class*="parts131415_blog"] .row > *{
  width:auto !important; max-width:none !important; min-width:0 !important;
  flex:none !important; margin:0 !important; padding:0 !important;
}

/* (b) パーツ見出しがCMS既定の書体・色のまま出てブランドタイポから浮く（独立2案件: S00459・S01926）
       レイアウト（配置・カラム）は案件CSSで整えられる一方、**パーツ自身が生成する見出し要素の
       書体・色はパーツ内部に付いているため見落とされやすい**。結果「配置は整っているのに見出しだけ
       フォントが違う・色が違う」という部分的な浮きが残る。
       実測: S00459 `.design-parts-11 .parts-title` が色 #0E6FB8 のまま／
             S01926 `.parts131415_blog_title_wrap .title` が明朝のまま（一度PC幅だけ直して
             「全端末で適用」と差し戻された＝BP単位の個別対応では同じ穴が別BPで再発する）。
       → §4 の `_post_title` / §5 の `_sidebar_post_title` と同じ扱いで、**書体と色だけ**を寄せる。
       ★サイズ・寄せは案件ごとのデザイン判断なので skin では触らない（§4の既存方針と同じ）。
         そちらは 30_コード生成/AI生成指示書_CueZilla.md 側の手順で担保する。
       ★全BP共通で当たる（メディアクエリの外に置いてある）。
       ★実測で確認できた2クラスだけに絞ってある。`.card-title` / `.card-text` は当てていない
         （O01540 では `.card-title` が「濃緑地に白文字のチップ」＝見出しではなくラベルとして
         使われており、`--dyn-heading` を当てると読めなくなる）。パーツが増えたら実機で確認して追記する。 */
[class*="_blog_title_wrap"] .title,
[class*="design-parts-"] .parts-title{
  font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important;
}


/* ============================================================
   §4-c  テーマが一覧サムネに掛ける「固定の高さ」を打ち消す（番号非依存）
   ------------------------------------------------------------
   ★§4 の意図が theme_default に**黙って負けていた**のを直すぶん（2026-09-11 実測）。

   何が起きていたか:
     §4 は `[class*="_post_img"]{ aspect-ratio:16/10 }` でサムネを等寸化する設計だが、
     theme_default は `.parts228_post_wrap .parts228_post_img{ height:240px }` と
     `… img{ max-height:240px }` を持つ。**セレクタの詳細度は テーマ(0,2,0) > skin(0,1,0)** なので、
     skin の aspect-ratio は計算に使われず**常にテーマの240pxで確定**していた。
     実測（local-sandbox・theme+skin のみ・案件CSS無し）:
       打ち消し前: .parts228_post_img の computed height = 240px（aspect-ratio:16/10 は設定されているのに無効）
       打ち消し後: 233px（＝列幅375px ÷ 1.6）＝**skin 自身の設計どおりになる**
     ＝「skin を採用しているのにサムネだけテーマの寸法」という状態で、案件側は毎回
     `.parts228_post_wrap .parts228_post_img img{ max-height:unset; height:200px }` を手で書いていた
     （実測: 収穫ログで4案件が同じ規則を貼っていた。機械化台帳 B1）。

   線引き（§4 の既存方針と同じ。ここを広げないこと）:
     ・**打ち消すだけ**＝テーマが持ち込む固定値を外して §4 の aspect-ratio に戻す。
     ・**寸法の具体値と色は入れない**。案件が貼っていた `height:200px` `margin-bottom:45px`
       `background:#FFFFFF` は**デザイン判断**なので案件CSSに残す（値は案件ごとに違う）。

   ★入れなかったもの（実測して落とした・同じ検討を繰り返さないため）:
     `[class*="_sidebar"]{ max-width:none !important }`（案件が4件で手貼りしていた規則）は
     **skin に入れてはいけない**。theme_default は `.parts222_sidebar{ max-width:28.179%; width:100% }`
     と対で持っており、max-width だけ外すと width:100% が生きて**2カラムが崩れる**。
     実測（local-sandbox）: main 780px + sidebar 333px → **main 590px + sidebar 590px**。
     サイドバー幅は案件ごとのレイアウト判断なので、案件CSSで width とセットで指定すること。
   ============================================================ */
[class*="_post_wrap"] [class*="_post_img"]{ height:auto !important; }          /* テーマの height:240px を外し §4 の aspect-ratio に戻す */
[class*="_post_wrap"] [class*="_post_img"] img{ max-height:none !important; }  /* 同 max-height:240px の頭打ちを外す（§4 の height:100% を効かせる） */



/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
/* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。
   theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と
   色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、
   ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。
   背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。
   あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、
   帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。
   （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */
[class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !important; }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
/* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。
   theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、
   §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない
   (b) 要素が ＜div＞（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。
   一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、
   案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。
   ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */
.recent_post_title{ background:transparent !important; padding-left:0 !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */
[class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; }
/* カテゴリ右の記事数を視認できるチップに */
[class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; }
/* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */
[class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; }
/* カテゴリ名と件数チップが重ならないよう両端寄せ。
   あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と
   **帯／箱があった前提**の字下げを持つため、帯を外した状態では
   カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。
   上下15pxはタップ領域として残す。 */
[class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; }


/* ============================================================
   §6  詳細ページ（本文 / 署名 / SNS / 詳細内スライダー）
   ============================================================ */
.parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; }
.parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
.signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; }
.slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; }
/* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */


/* ============================================================
   §7  お問い合わせフォーム
   ============================================================ */
.contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
[class*="_form_wrap"]{ max-width:720px; margin:0 auto; }
[class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; }
/* 入力欄を十分な大きさに（チェック/ラジオは除外） */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
[class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
/* チェックボックス/ラジオはサイズ統一 */
[class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; }
/* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */
.required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.error{ color:var(--dyn-accent-2) !important; }
/* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */
.form_textarea, .form_text_dt{ border:none !important; background:transparent !important; }
/* 送信ボタン。★セレクタに包み(.contact_submit 自体)を含めないこと：
   包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると
   (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える
   (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1）
   になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */
.contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; }
/* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */
.contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; }
/* 送信前 disabled（reCAPTCHA未完了）の見え方 */
.contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */
/* ファイル添付の自作UI：受領のインライン style が #eee 地・#999 文字・明るいグラデで固定し、
   ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */
.label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
.label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; }
.label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; }
.des{ color:var(--dyn-muted) !important; }
/* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */
.attention{ color:var(--dyn-muted) !important; }
/* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])`
   は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて
   詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */
[class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; }
/* プライバシー同意 */
.privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; }
.privacypolicy-link{ color:var(--dyn-accent-2) !important; }
/* 電話/メール等の content バー（角丸はトークン） */
[class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; }


/* ============================================================
   §7b  お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統）
   ------------------------------------------------------------
   【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）：
     ・§7  = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit）
     ・§7b = wpcf7/.formBox 系（.formWrap > .formBox > dt>label>span.req + dd>input,
              送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来）
   §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。
   いずれも番号非依存のセマンティッククラスで記述。
   ============================================================ */
.formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.formWrap{ max-width:720px; margin:0 auto; }
.formBox{ margin-bottom:20px; }
.formBox dt, .formBox label{ color:var(--dyn-text) !important; }
.formBox dd input:not([type="checkbox"]):not([type="radio"]),
.formBox dd select,
.formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{
  width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important;
  min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formBox dd textarea, .formWrap textarea{
  width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formWrap input[type="checkbox"], .formWrap input[type="radio"]{
  width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important;
  vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important;
}
/* 必須バッジ（wpcf7系は .req） */
.req, .formBox .req{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important;
  white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important;
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
.wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; }
/* 送信（Contact Form 7） */
input.wpcf7-submit, .formWrap button[type="submit"]{
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
  border:none !important; border-radius:var(--dyn-radius) !important;
  min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer;
}
/* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */


/* ============================================================
   §14  自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約
   ------------------------------------------------------------
   CueZilla は body内コンポの style 要素でパーツ単位に `.partsNNN_blog_＜ID＞ .card .card-body{…!important}`
   等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は
   同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。

   → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。
        ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。
        （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる）
   → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ：
        section.parts131415_blog_xxxx .card .card-body{ … !important }   ← 実採番。構造変化に不感
     ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。
     ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */
/* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。
   theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */
[class*="_section"] h2, [class*="_section"] h3{
  border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important;
}


/* ============================================================
   §8  トップ用 お知らせ/ブログ teaser（notice-news / blog teaser）
   ============================================================ */
.parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.parts040506_notice-news *{ color:var(--dyn-text) !important; }
.parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; }
.parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
.parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; }
.parts040506_notice-news a{ color:var(--dyn-accent-2) !important; }
/* サムネ型ブログ teaser */
[class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); }
/* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */
[class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; }
[class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; }
[class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; }


/* ============================================================
   §9  Bootstrap汎用クラスの地ならし（パーツ内に限定）
       text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える
   ============================================================ */
[class*="parts"] .text-dark{ color:var(--dyn-text) !important; }
[class*="parts"] .bg-light{ background:var(--dyn-surface) !important; }
.card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }


/* ============================================================
   §10  プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版）
   ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される
   ============================================================ */
.privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; }
.privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); }
.privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; }
.privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; }
.privacy-item{ margin-bottom:32px; }
.privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; }
.privacy-item__body{ color:var(--dyn-text); }
/* 原文の (1)(2)… 表記は【HTML側のテキスト】で持つ ※R-27対応（2026-08-26）
   旧実装は `li::before` の content 宣言（`counter(pp)` を括弧で挟む）で番号を描いていたが、AddCssInfo は
   content 宣言をサニタイズで落とす（counter() は content 専用なのでCSS単独の代替が無い）。実機では番号が消えたうえに
   下のぶら下げインデントだけが残り、本文が左へはみ出していた。
   ★番号を捨てず HTML テキストへ移した理由: 本文が「上記(1)から(6)に掲げるほか」と番号を参照しており、
     番号は装飾ではなく文書の一部（消すと文意が壊れる）。会社承認の定型文なので表記も変えられない。
     → templates/privacy-policy.html の各 ＜li＞ 先頭に "(1) " 等を直接書く形へ変更した。
   ★ぶら下げインデント（padding-left / text-indent）は残す: 番号が行頭テキストになった今も、
     折り返し行を本文位置に揃えるために必要（＝この2行が番号の受け皿）。
     番号を持たない古い privacy HTML に当たると字下げだけが見えるので、その場合はCSSではなく
     HTML側に番号を入れて直す。counter-reset / counter-increment は用が無くなったので外した。 */
.privacy-item__list{ list-style:none; margin:8px 0; padding:0; }
.privacy-item__list li{ padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }


/* ============================================================
   §11  下層ヘッダーパーツ（templates/subpage-header.html）
   サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化
   ============================================================ */
/* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。
   固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */
.subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; }
.subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; }
.subpage-header__inner{ position:relative; z-index:1; }
.subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; }


/* ============================================================
   §12  システム定型ページ：送信完了(thanks) / 404
   templates/thanks.html, templates/404.html 用。トークンスキン準拠
   ============================================================ */
.thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; }
/* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */
.not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); }
.thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; }
.thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; }
.thanks__action, .notfound__action{ margin-top:8px; }


/* ============================================================
   §13  Bootstrap(テーマ)既定の恒久打ち消し（R-20）
   ------------------------------------------------------------
   CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が
   フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。
   ここは確認済みの実害2件（test0605）に限定して打ち消す。
   ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で
     付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。
   ============================================================ */
/* (a) ＜mark＞ / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。
       意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */
mark, .mark{
  background-color:transparent !important; color:inherit !important;
  padding:0 !important; border-radius:0 !important;
}
/* (b) a:hover が Bootstrap青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。
       !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が
       そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */
a:hover{ color:inherit; }

/* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。
       本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */
a[href^="tel:"]{ white-space:nowrap; }


/* ===== 22_override.css ===== */
/* ============================================================
   ヤマイチ運輸株式会社（S01066）追補CSS
   結合順: 20_site.css → 21_cuezilla-skin.css → 【22_override.css】
   ここが案件の上書きが効く唯一の場所（R-30）。skin 本体は編集しない。
   ============================================================ */

/* ============================================================
   1. ローディング幕のフォールバック（★これが無いとJS不動でトップが緑一色で固まる）
   ------------------------------------------------------------
   受領版は幕を「最初から全面に出し、JSだけが外す」作りだった。CueZilla ではJSが
   サイト情報＞トラッキングID（BODY内）に入る＝貼り忘れ・貼り間違い・他JSの例外で
   簡単に不動になる。そこで既定を display:none にし、BODY内JSが同期で付ける
   html.js-load が居るときだけ出す（JS有効時のちらつきは出ない＝＜body＞直後で付くため）。
   ============================================================ */
.site-loader{ display: none; }
html.js-load .site-loader{ display: flex; }

/* ============================================================
   2. パンくずの二重表示を防ぐ（R-10a）
   ------------------------------------------------------------
   下層ヘッダー（04a）と各ページ本文に .sub-crumb を内蔵しているので、
   CueZilla が自動挿入するパンくずは隠す。
   ★このサイトは「自前パンくず」方式。CueZilla自動パンくずだけを使う案件では
     このブロックを消すこと（消さないとパンくずが1つも出なくなる）。
   ============================================================ */
[class*="_breadcrumb"]{ display: none !important; }

/* ============================================================
   3. 動的パーツを本サイトのトンマナへ寄せる（skin へ渡すトークン）
   ------------------------------------------------------------
   skin は --dyn-* と --font-* を見て自動で寄る設計。値はここで渡すだけにして、
   skin 本体も site.css も触らない（二重管理を作らない）。
   ============================================================ */
:root{
  /* 書体（skin の既定はゴシックだが、本サイトの実体を明示して渡す） */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-numeric: "Outfit", "Zen Kaku Gothic New", sans-serif;

  /* 配色（§80「明るい配色」の確定値に合わせる） */
  --dyn-bg:        #FAFBF7;
  --dyn-surface:   #FFFFFF;
  --dyn-text:      #333833;
  --dyn-heading:   #333833;
  --dyn-muted:     #5A605A;
  --dyn-border:    #DDE4D7;
  --dyn-accent:    #39804E;
  --dyn-accent-2:  #4A7A1E;
  --dyn-on-accent: #FFFFFF;
  --dyn-radius:    8px;
  --dyn-card-min:  300px;
  --dyn-gap:       32px;
}

/* ============================================================
   4. 動的ページの器を静的ページと同じ版面に揃える
   ------------------------------------------------------------
   ブログ一覧／記事／フォームは CueZilla が描く。静的ページの版面（--wrap 1200px＋
   左右 --gutter）と合わないと、下層ヘッダーだけが広くて本文だけ狭い状態になる。
   ============================================================ */
/* --- 4-1. パーツのセクションは地色を持たない -----------------------------
   ★2026-09-17 修正。テーマの `.bg-color` がセクションを**白**で塗るため、body が持つ
     地色（#FAFBF7）＋署名DNAの縦罫グリッド＋ノイズが隠れていた。
     実機 /blog で「全体の背景に画像が無い」「記事のセクションに色が付いている」として顕在化。
     透明にして body の背景をそのまま見せる（＝静的ページと同じ地になる）。 */
[class*="parts"][class*="_section"],
[class*="parts"][class*="_single_article"]{ background: transparent !important; }

/* --- 4-2. フォーム系の器を静的ページと同じ版面に揃える -------------------- */
[class*="_form_wrap"],
.formWrap,
.sectionInner{
  max-width: calc(1200px + clamp(20px, 4vw, 40px) * 2) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
  background-color: transparent !important;
}

/* --- 4-3. 一覧の器とカード（ブログ／施工実績） ---------------------------
   ★2026-09-17 修正。ここに 4-2 と同じ「左右 40px」を掛けていたのが原因で、
     **記事カードの内側にも 40px の余白**が入り、サムネイルが端まで届いていなかった
     （実機 /blog: カード 334px に対し中身 252px）。
     器は幅も余白も持たない。白い面を持つのは**カードだけ**（受領 .blog-cards a と同じ）。
   ★段組（2列）はテーマの grid のまま触らない（ディレクター指示 2026-09-17）。 */
[class*="parts"][class*="_post_list"]{
  background: transparent !important;
  padding-inline: 0 !important;
  max-width: none !important;
}
[class*="parts"][class*="_post_wrap"]{
  background: #FFFFFF !important;
  padding-inline: 0 !important;
  max-width: none !important;
}

/* --- 4-4. サイドバー（受領 .blog-side__box / .blog-side__ttl に合わせる） ---
   受領デザイン: 箱は白、見出しは深緑の帯に白文字、項目は 14/18px の余白＋区切り線。
   テーマ既定は見出しが素のテキストで、箱に地色が無い（＝箱の間が白く抜けて見える）。 */
[class*="parts"][class*="_sidebar_wrap"]{ background: #FFFFFF !important; }
[class*="parts"][class*="_sidebar_wrap"] + [class*="_sidebar_wrap"]{ margin-top: clamp(20px, 2.4vw, 32px) !important; }
[class*="parts"][class*="_sidebar_wrap"] > h3{
  margin: 0 !important;
  padding: 14px 18px !important;
  background: #39804E !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}
[class*="parts"][class*="_sidebar_wrap"] > ul{ margin: 0 !important; padding: 0 !important; list-style: none !important; }
[class*="parts"][class*="_sidebar_wrap"] > ul > li{ margin: 0 !important; padding: 0 !important; border: 0 !important; }
[class*="parts"][class*="_sidebar_wrap"] > ul > li > a{
  display: block !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #DDE4D7 !important;
  text-decoration: none !important;
}
[class*="parts"][class*="_sidebar_wrap"] > ul > li:last-child > a{ border-bottom: 0 !important; }

/* ============================================================
   0. ★テーマが body をスクロールboxにしているのを解除する（position:sticky の復活）
   ------------------------------------------------------------
   実機（enjoyworks-seisaku.uno・2026-09-17）で実測:
     getComputedStyle(body) → height:911px / overflow-y:auto
   CueZilla のテーマ側が body に高さと overflow を掛けており、**body が独自のスクロール box**に
   なっていた。position:sticky は「いちばん近いスクロール祖先」に対して効くため、body の子である
     ・＜header class="sh">（サイトヘッダー）
     ・＜div class="site-hz__bg">（FVのピン留め写真）
   がどちらも固定されず、スクロールでそのまま流れて消えていた。
   ★実測: 修正前 scrollY=2500 でヘッダーの画面上位置 -1678px（＝画面外）／修正後 0px（＝上端に固定）。
   ★納品CSS側は body に height/overflow を一切書いていない（原因はテーマ）。ここで打ち消す。
   ============================================================ */
html,
body{
  height: auto !important;
  overflow: visible !important;
}

/* ============================================================
   0-2. ★焼き込み写真（.imgslot）がパララックス層の規則に潰されるのを防ぐ
   ------------------------------------------------------------
   site.css の `.plx > *:not(.plx__i){ position: relative; z-index: 1; }`（詳細度 0,2,0）が
   `.imgslot{ position: absolute; inset: 0; }`（0,1,0）に競り勝つと、.imgslot は
   **relative ＋ 中身が絶対配置＝高さ0** になり、写真が 0×0 で消える。
   実測（/recruit・2026-09-17）: rec-evening.webp / rec-daysoff.webp が 0×0 だった。
   BODY内JS 側でも「.plx__i を持たない枠には .plx を付けない」ように直しているが、
   JSの貼り忘れ・古い版が残っていても写真が消えないよう、CSSでも二重に押さえる。
   ============================================================ */
.plx > .imgslot{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ============================================================
   0-3. 応募フォーム（/form/recruit）の電話補足だけ、上の余白を消す
   ------------------------------------------------------------
   受領では `.site-lede-note` は同じ section の中でフォームの【後ろ】に続いていたので、
   margin-top（clamp(18px,2vw,26px) ＝実測26px）は「フォームとの間隔」として正しかった。
   納品ではフォームが CueZillaパーツ＝別ブロックになり、この段落が 15b の**先頭要素**に
   なるため、その余白が頭に乗って見える（実機 2026-09-17: margin-top 26px を確認）。
   ★`.site-lede-note` は 07/08/11/12 でも使っているのでクラス本体は触らず、
     15b の1箇所にだけ付けた修飾クラスで打ち消す。
   ============================================================ */
.site-lede-note--flush{
  margin-top: 0;
}

/* ============================================================
   0-4. 確認ボタン下の補足テキスト内のリンクを、リンクと分かる見た目にする
   ------------------------------------------------------------
   受領デザインは **`main a:not([class])`**（style.css 1129-1130行）で
   クラス無しリンクに「accent-ink の色＋下線 1px／offset 3px」を当てていた。
   ところが CueZilla のテーマは ＜main＞ を出力しない（実機 2026-09-18 に
   document.querySelector('main') === null を確認）ため、このルールが
   **1件も当たらず**、リンクが本文と同じ色（rgb(90,96,90)）・下線なしになっていた。
   さらにテーマ側が a{text-decoration:none} を当てるので、下線は明示指定が要る。
   ★`a:not([class])` の main を単に外すのは不可。ヘッダー/フッターの
     ナビもクラス無し ＜a＞（02で11件・03で15件）なので全部に下線が付く。
     納品HTMLで .site-lede-note の中にリンクがあるのは 15b/16b の2箇所だけなので、
     そこに限定して当てる（棚卸し済み・2026-09-18）。
   ★色はデザインと同じ変数を使う。§80確定値で --c-accent-ink:#4A7A1E /
     --c-deep:#39804E に上書きされており、地色 #FAFBF7 上で 4.94:1 / 4.62:1＝AA合格。
   ============================================================ */
.site-lede-note a{
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-lede-note a:hover{ color: var(--c-deep); }

/* ============================================================
   5. トップの「お知らせ」帯（ヒーロー直下・CueZillaパーツ）
   ------------------------------------------------------------
   ★2026-09-17 修正。実機で**パーツの背景が透けていた**のを直す。
     帯の地色は受領デザインでは ＜section class="site-news site-news--strip"> が持っており
     （`background: var(--c-accent)` ＝黄緑 #9ACD32 ／ `position:relative; z-index:2`）、
     パーツ自身は地色を持たない。器を 05a に残したうえで、**パーツ側にも同じ地色**を当てて
     「NEWSバッジの行」＋「記事の行」で1本の帯に見せる。
     （R-6「各ファイルは自己完結＝section を跨がせない」を守るため、1行ではなく上下2段になる）
   ★実採番（parts〇〇）は投入時に決まるので番号非依存で当てる。
   ============================================================ */
/* ★position:relative + z-index:2 が要（これが無いと写真に覆われて「透ける」）。
   実測: 入れる前はパーツ中心の最前面が IMG.fv-slider__img（FVのピン留め写真）だった。
   受領デザインの .site-news--strip も同じ理由で position:relative; z-index:2 を持っている。 */
.design-parts-52{
  position: relative;
  z-index: 2;
  background: #9ACD32 !important;   /* テーマの .bg-color（白）を上書き */
}
.design-parts-52 > .container{
  max-width: calc(1200px + clamp(20px, 2.4vw, 40px) * 2);
  padding-inline: clamp(20px, 2.4vw, 40px);
}
.design-parts-52 .content{ align-items: center; gap: clamp(14px, 2vw, 32px); min-height: 64px; }
/* NEWS バッジ: テーマ既定は黄色地＋白文字（実測 #FFCC44 / #FFF）。帯の中では地なし＋濃緑にする */
.design-parts-52 .banner-area{
  flex: 0 0 auto;
  padding: 0 !important;
  background: transparent !important;
  color: #14300a !important;
  font-family: "Outfit", "Zen Kaku Gothic New", sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
}
.design-parts-52 ul{ flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.design-parts-52 li{ min-width: 0; }
.design-parts-52 a{
  display: flex !important;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  min-height: 44px;                 /* タップ領域（§5.5-3） */
  color: #14300a !important;        /* テーマ既定は黒。黄緑地で読める濃緑に揃える */
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.design-parts-52 a:hover{ color: #205C42 !important; text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   5-1. トップのブログ：見出し／一覧リンクとパーツの間の余白を殺す
   ------------------------------------------------------------
   ★2026-09-17 実機で計測した不良（上下に余分な空きができる）。
     受領デザインでは見出し・カード・一覧リンクが**1つの section の中**にあったので、
       .site-blog__ttl の margin-bottom（54px）  … 見出しとカードの間
       .site-row     の margin-top（76px）       … カードと一覧リンクの間
     はどちらも「セクション内の間隔」として正しかった。
     納品では間に CueZillaパーツが入って**別ブロックに割れる**ため、この2つの margin が
     セクションの外へ抜け（padding が 0 側なのでマージン相殺で外に出る）、
     パーツとの間に 30px / 76px の空きとして出ていた。
   ★対象は 05b と 05c の各1セクションだけ（納品全体で1つずつ）。
   ============================================================ */
section.site-blog.e-tl > .site-wrap > :last-child{ margin-bottom: 0 !important; }
section.site-blog.e-bl > .site-wrap > :first-child{ margin-top: 0 !important; }

/* ============================================================
   5-2. トップの「ブログ」一覧（CueZillaパーツ・実機の実体は parts131415_blog）
   ------------------------------------------------------------
   前後を白地の .site-blog セクション（05b の見出し／05c の一覧リンク）で挟む。
   ★パーツ自身も ＜h2＞BLOG＜/h2＞ を描くので、そのままだと見出しが二重になる → パーツ側を隠す。
     見出しはフリーコーディング側に残すのが R-6 の方針（ブランド見出しは 05b が持つ）。
   ============================================================ */
[class*="parts"][class*="_blog"]{
  background: #FFFFFF !important;
  padding-block: 0 !important;
}
[class*="parts"][class*="_blog"] [class*="_blog_title_wrap"]{ display: none !important; }
[class*="parts"][class*="_blog"] > [class*="container"]{
  box-sizing: border-box;
  max-width: calc(1200px + clamp(20px, 4vw, 40px) * 2);
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ============================================================
   5-3. トップのブログカードを受領デザインの見た目に寄せる（日付の位置にタグ）
   ------------------------------------------------------------
   受領デザイン index.html のカードは【サムネ → 日付 → タイトル】の3段。
   CueZillaのブログパーツは **日付を出力しない** 代わりに **カテゴリ** を出す
   （実機DOM 2026-09-18: .card-body > h5.card-title「お知らせ」→ a > p.card-text → div._blog_thumbnail）。
   そこで、受領デザインが日付を置いていた位置にカテゴリ＝タグを置く。
   タグの意匠は受領 blog.html のカテゴリチップ（style.css 3842行 .blog-card__cat）に合わせる:
     font-size:12px / letter-spacing:.06em / padding:3px 9px / box-shadow: inset 0 0 0 1px var(--c-rule)
   カードの枠は受領 index.html 側（style.css 1376行 .site-blog__cards a）に合わせる:
     padding:clamp(18px,2vw,24px) / border:1px solid #cfd7c8 / radius:var(--radius-lg) / bg:var(--c-base)
   ★並べ替えの要は a を display:contents にして、a の中身（タイトル・サムネ）を
     .card-body のグリッド項目に昇格させること。h5 は a の外側にあるので、
     これをやらないとタグをサムネとタイトルの間に挟めない。
     a の箱が消えるためホバーの浮きは .card 側へ移した。リンクはサムネとタイトルが持つ。
   ★保険: display を grid → contents の順で2回書く。サニタイズが「content」を含む宣言ごと
     落とした場合でも grid が残り、サムネ→タイトルの順は保てる（R-27）。
   ★詳細度: CueZillaは .parts131415_blog_＜ID＞ .card .card-body{padding:0!important}（0,3,0）を吐く。
     属性セレクタ2つ＋クラスで (0,3,0)〜(0,4,0) を作り !important で上書きする（R-27 末尾の注意）。
   ★角が四角いのは意図どおり（受領 style.css 2092行 :root{--radius:0px}）。
     トークン参照のままにしてあるので、デザイナーが角丸を戻せば自動で追従する。
   ============================================================ */
[class*="parts"][class*="_blog"] .card{
  height: 100% !important;
  padding: clamp(18px, 2vw, 24px) !important;
  border: 1px solid #cfd7c8 !important;
  border-radius: var(--radius-lg) !important;
  background: var(--c-base) !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[class*="parts"][class*="_blog"] .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 57, 15, .10);
}
[class*="parts"][class*="_blog"] .card .card-body{
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}
[class*="parts"][class*="_blog"] .card .card-body > a{
  display: grid;      /* 保険（上の★参照） */
  gap: 10px;
  display: contents;  /* 本命 */
}

/* ------------------------------------------------------------
   5-3a. パーツが前セクションの下に 24px 潜って、カードの上枠が隠れるのを直す
   ------------------------------------------------------------
   Bootstrap の .row は margin-top: calc(-1 * var(--bs-gutter-y)) ＝ -24px を持つが、
   相方の .row > *{ margin-top: var(--bs-gutter-y) } を CueZillaのテーマが 0 にしている。
   打ち消されない -24px がパーツの上マージンとして相殺(margin collapsing)され、
   パーツ全体が 24px 上へずれる。前後の .site-blog セクションは position:relative + z-index:2 の
   白地なので、静的配置のパーツより後に描かれ、**上の24pxを塗りつぶす**。
   実機 2026-09-18 実測: 前セクション bottom 10655 / パーツ top 10631 ＝ 重なり -24px。
   カードに枠と余白を付けた 5-3 以前は、隠れていたのが白い余白だけだったので見えなかった。
   ★上の間隔は受領デザインの見出し側の余白 .site-blog__ttl{ margin-bottom: var(--el-gap) }
     ＝26px に合わせる。見出し側の margin は 5-1 で 0 にしてあるので、ここで持たせる。
   ★★ margin ではなく padding で持たせること。margin は透明なので、その帯に
      body の地色 #FAFBF7 が出て「記事の上に色が付いた帯」になる
      （実機 2026-09-18 実測: 前後セクションは bg-white、body は rgb(250,251,247)）。
      padding ならパーツ自身の白（5-2 の background:#FFFFFF）が帯を埋める。
      5-2 の padding-block:0 !important（0,2,0）に勝つため、要素名付き(0,2,1)+!important。
   ★下側も同じ理由で padding。受領デザインは .site-blog__cards{ margin-bottom: var(--el-gap) }
      ＝26px を空けている。空けないと「ブログ一覧」ボタンがカードに接する
      （2026-09-18 ユーザー指摘）。margin で空けると再び body の地色の帯が出る。
   ------------------------------------------------------------ */
[class*="parts"][class*="_blog"] .row{ margin-top: 0 !important; }
section[class*="parts"][class*="_blog"]{ margin-block: 0 !important; padding-block: var(--el-gap) !important; }

/* 並び順＝受領デザイン: サムネ → タグ（日付の位置）→ タイトル */
[class*="parts"][class*="_blog"] .card [class*="_blog_thumbnail"]{
  order: 1;
  height: auto !important;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
}
[class*="parts"][class*="_blog"] .card img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
[class*="parts"][class*="_blog"] .card .card-title{
  order: 2;
  justify-self: start;
  margin: 0 !important;
  padding: 3px 9px;
  box-shadow: inset 0 0 0 1px var(--c-rule);
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .06em !important;
  text-align: left !important;
  color: var(--c-ink-soft) !important;
}
[class*="parts"][class*="_blog"] .card .card-text{
  order: 3;
  margin: 0 !important;
  height: auto !important;
  overflow: visible !important;
  font-size: var(--fs-base) !important;
  font-weight: 700;
  line-height: 1.6 !important;
}

/* ============================================================
   6. ＜mark＞ の地ならしで本文の下線演出が消えないようにする
   ------------------------------------------------------------
   skin §13(a) は Bootstrap の黄ハイライトを打ち消すため
   `mark{ background-color:transparent !important }` を当てる。
   本サイトの下線（.ul / .ult）は **background-image** で描いているので生き残るが、
   結合順が入れ替わっても壊れないよう、ここで明示して確定させる。
   ============================================================ */
mark.ul,
mark.ult{ padding: 0 !important; border-radius: 0 !important; }

/* ============================================================
   7. 固定ヘッダーぶんのアンカー位置合わせ
   ------------------------------------------------------------
   /recruit#h-gate への遷移で見出しがヘッダーの裏に隠れないようにする。
   ============================================================ */
[id]{ scroll-margin-top: calc(88px + 16px); }