/* ===== _css-1_site.css ===== */
/* ============================================================
   S01870 株式会社君津水道サービスセンター — 案件CSS本体
   投入先: この単体ファイルではなく **site.combined.css**（＝CueZilla「追加CSS」欄／add.css）
   生成:   2_Claude作業/decompose.mjs（3_DESIGNER修正後 から機械生成）
           ★手編集せず入力側（3_DESIGNER修正後 / 本スクリプト）を直して再生成すること
   構成:   case-vars.css の テーマ色7値 ＋ style.css（受領そのまま／下記3点のみ変換）
     ①画像参照 url(../images/x.webp) → {{MEDIA:x.webp}} → CueZilla CDN URL
     ②`::before/::after の content`（矢印・ダッシュ）→ 実体 ＜span＞ 用の指定（R-27）
     ③JS不動フォールバック（下の KEEP ブロック）を追加
   ============================================================ */

/* ===== 固定ヘッダーの高さ（R-18）＝実測 130px ===== */
:root{ --fixed-header-h:130px; }

/* ===== テーマ色7値（CueZilla「テーマカラー設定」に入れる値と一致させる）=====
   受領デザインから抽出（詳細と根拠は 19_theme-vars.txt）。
   ★受領の case-vars.css はテンプレ既定値（紺 #1E3A5F 系）のまま残っていたため、
     受領 style.css の :root トークン実測値へ置き換えている（2026-08-27）。 */
:root{
  --main-color:       #006AB6;  /* メイン／アクセント：ロゴ実測の水色ink（白文字5.6:1） */
  --text-color:       #1A2632;  /* 本文（白地14:1） */
  --sub-color:        #55636E;  /* 補助文（白地6.1:1） */
  --accent-color:     #1F3A5F;  /* 補助アクセント：紺（見出し・フッター地） */
  --background-color: #FFFFFF;  /* ベース */
  --link-color:       #006AB6;  /* リンク（受領 a{color:var(--c-aqua-ink)} と同値） */
  --temporary-color:  #F3FAFD;  /* 一時色／面色フォールバック：淡水色 */
}

/* ===== JS不動フォールバック（R-4）=====
   KEEP: 受領デザインは ①オープニングの白幕 ②[data-reveal] の opacity:0
   ③FAQ回答の hidden の3つが「JSが動いて初めて見える」設計。CueZilla のフリーHTML内
   ＜script＞ は実行されないため、BODY内JS（サイト情報＞トラッキングID(BODY内)）が
   先頭で html に .js を付ける。貼り忘れ・JSエラー時に**白画面／全消え**にならないよう、
   .js が付いていない場合は初期非表示そのものを当てない。**消さないこと。** */
html:not(.js) .site-open{ display:none !important; }
html:not(.js) [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
html:not(.js) .site-acc__a[hidden]{ display:block !important; }
/* /KEEP */

@charset "utf-8";
/* ==========================================================================
   S01870 株式会社君津水道サービスセンター ／ トップ草案 style.css
   --------------------------------------------------------------------------
   ★草案段階のCSSは「共通1ファイル・:root変数で集中管理」が正（design_rules.md）。
     トンマナ調整は下の :root だけを触れば全体に効く。
   ★CueZilla納品コード化の段階では AI生成指示書_CueZilla.md が優先＝変数を具体値へ
     ベイクする（body内コンポ＜style＞が :root を撒くため変数は非決定的になる）。
   ★クラス接頭辞は site- / sh- / sf- / xw- のみ。Bootstrap汎用名は流用しない（R-20）。
   ★参考サイト①（ntec-work.com）から採ったのは構造・動き・寸法のリズムのみ。
     配色値・書体・写真・コードは持ち込まない（reference-sites の DNA-only 規約）。
   ========================================================================== */

:root{
  /* ---- 書体（デザイン指示：丸ゴシックは使わない／suzukikougyousyo.net の実測に準拠）---- */
  --f-mincho: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  --f-gothic: "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Noto Sans JP",sans-serif;
  --f-en: "Helvetica Neue","Segoe UI",Arial,sans-serif;

  /* ---- 配色（②コンセプトシート：白ベース＋水色主体／紺は要所／黄緑は少量）----
     ・#006AB6 は現行ロゴ実測値。白地の小文字でAA(5.6:1)を満たすため「水色のink」として使う
     ・#5BC2E7 は装飾専用（白地では文字に使えない＝2.0:1）
     ・濃い面は 未経験育成の左パネル／中間バンド／CTA／フッターの4箇所。
       うち紺の面はフッターのみ（紺の面を増やすと重くなる＝デザイン指示） */
  --c-ink:        #1A2632; /* 本文（白地 14:1） */
  --c-sub:        #55636E; /* 補助文（白地 6.1:1） */
  --c-navy:       #1F3A5F; /* 見出し・フッター地（白地 11.4:1） */
  --c-aqua:       #5BC2E7; /* 水色・装飾専用 */
  --c-aqua-ink:   #006AB6; /* 水色ink＝白地の文字用／濃色面（白文字5.6:1） */
  --c-aqua-lite:  #8FDCF3; /* 水色lite＝**紺地(--c-navy)専用**の文字色（紺地7.5:1）。★水色ink面では使わない（下） */
  /* ★★2026-08-05: 水色ink面（#006AB6＝`.site-row--brand` の地）に載せる補助文字。
     `--c-aqua-lite` を水色ink面に置くと **3.67:1 でAA割れ**する（①contrast-pixels で261件検出）。
     あれは「濃地の文字用」だが、実際に想定していた濃地は**紺地(#1F3A5F・7.5:1)**であって、
     水色ink面ではない。**地が2種類あることを見落とした**のが原因。
     この値は水色ink面 4.77:1 ／ 紺地 9.75:1 で**どちらの濃地でもAAを満たす**。 */
  --c-on-brand:   #D6F1FB;
  --c-green:      #8DC63F; /* 黄緑・装飾専用（3:1） */
  --c-green-ink:  #4F7A1C; /* 黄緑ink＝白地の文字用（5.1:1） */
  --c-bg:         #FFFFFF;
  --c-bg-tint:    #F3FAFD; /* 淡水色（面） */
  --c-bg-tint2:   #E6F3FA; /* 淡水色（やや濃・片側ブリードの面） */
  --c-wash:       #DCEFF7; /* 巨大英字・連番の透かし（背面装飾のみ） */
  --c-line:       #D7E5ED;

  /* ---- タイポスケール（種類を増やさない：本文17px基準）---- */
  --fs-h1:    clamp(1.7rem, 6.4vw, 3.25rem);   /* 375px幅で「君津の水を守る技術を、」が1行に収まる下限 */
  --fs-h2:    clamp(1.6rem, 4.6vw, 2.5rem);
  --fs-h2-sm: clamp(1.35rem, 3.6vw, 1.9rem);
  /* ★★2026-08-05（ディレクター指摘「h3以下にあたるのか、本来目立つべき文字が少し小さい」）:
     実測すると **375px で h3=16.8px ＜ 本文17px** ＝ 見出しが本文より小さいという逆転が起きていた
     （clamp の下限 1.05rem が本文 1.0625rem を下回るため。狭幅では 2.6vw が下限に負けて常にこの値）。
     PCでも 20px 対 17px で差が1.18倍しかなく、h2(40px) との間が2倍空く＝スケールに穴があった。
     → **下限19px / 上限22px** へ引き上げる（傾き 2.6vw は変えない＝カーブの形はそのまま）。
       375px: 19px（本文の1.12倍）／846px以上: 22px（本文の1.29倍）。
     ★上限を **22px＝`--fs-tel` と同値**にしてある。**既にスケールにある値を再利用する**ことで
       `font-size-kinds`（15種以内の契約）が増えない（23pxにすると16種になり契約を割る・実測）。
     ★影響＝カード見出し・ステップ項目名・ゲート見出し・タイムラインの時刻・FVの小見出し。
       **承認済みトップの見出しも大きくなる**（意図した変更。指摘への対応） */
  --fs-h3:    clamp(1.1875rem, 2.6vw, 1.375rem);
  --fs-num:   clamp(2.6rem, 8vw, 4.25rem);
  --fs-bigen: clamp(3rem, 11vw, 6.5rem);        /* 巨大英字（参考①：hero__eng 相当） */
  /* 巨大英字と明朝見出しの間隔（ユーザー指示 2026-08-03「英語の大見出しと日本語の明朝見出しの
     間が狭いので調整してほしい」）。★.xw-bigen の bottom と、セクション側の予約
     （見出しシステム節の :has(.xw-bigen) ルール）の**両方**がこの値を参照する。
     片方だけ変えると英字が予約からはみ出して前のセクションに食い込む。 */
  --bigen-gap: clamp(12px, 1.7vw, 24px);
  --fs-no:    clamp(2.4rem, 7vw, 4.4rem);       /* 連番 01.〜04.（参考①：70px 相当） */
  --fs-lead:  clamp(1.0625rem, 2.2vw, 1.125rem);
  --fs-tel:   1.375rem;   /* 22px：電話番号（英数）※3箇所で共用し種類を増やさない */
  --fs-body:  1.0625rem;  /* 17px：本文・CTA・アクセス・フッター・注記すべてこの値以上 */
  --fs-label: 0.75rem;    /* 12px：英字ラベル（これ未満のテキストは作らない） */
  --fs-fine:  0.9375rem;  /* 15px：許認可番号・コピーライトのみ */

  /* ---- 余白トークン（参考①の65px基調＋山型の落差。個別px値を撒かない）---- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px; --s5: 56px;
  --s6: clamp(52px, 7.5vw, 88px);    /* 軽いセクション（①の50〜65px相当） */
  --s7: clamp(72px, 10vw, 120px);    /* 標準（①の98〜120px相当） */
  --s8: clamp(88px, 13vw, 152px);    /* 最重量セクション（①aboutの2635px相当の重さ） */
  --gut: clamp(20px, 5vw, 40px);     /* 左右ガター（全セクション共通＝端が揃う） */
  --wrap: 1200px;                    /* ヘッダー1列が実測で収まる内寸を確保した値 */

  /* ---- Row/Section 余白（2026-08-03 ディレクター指示・全案件共通ルール）----
     背景色が同じセクションを1つの Row に束ね、Row端＝--row-pad／Row内＝--sec-gap／
     要素間＝--el-gap の3段で機械的に決める。正本は design_rules.md。
     ★--row-pad > --sec-gap > --el-gap の大小関係を崩さないこと
     ★2026-08-03（第16版）に増量した。第14版の 100/60/40 はユーザー指摘「セクションの余白が
       めちゃくちゃ窮屈。特に上側」に対して不足だった。真因の半分は巨大英字が --sec-gap を
       食い潰していたこと（→ 見出しシステム節の予約ルールで解消）だが、それを直したうえでも
       Row内60pxは詰まっていたため PC実寸を 128/88/40 へ上げた。
       ディレクター指示「数値はサイトに合わせて変更してよい／大小関係と判定ロジックは崩さない」の範囲内。 */
  --row-pad: clamp(80px, 8.9vw, 128px); /* P_large：Rowの上下端＝背景の切り替わり */
  --sec-gap: clamp(56px, 6.1vw, 88px);  /* P_medium：同一Row内のセクション間 */
  --el-gap:  40px;                      /* P_small：見出し→本文→ボタン（既存 --s4 と同値） */

  /* 版面の左端＝.site-wrap の内側左端に一致させる計算値。
     片側ブリードのレイアウトで、テキストだけ他セクションと端を揃えるために使う。
     （100% は grid コンテナ＝全幅セクションの幅に解決される） */
  --edge: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));

  /* ---- 形（参考①：角丸0・罫線で締める）---- */
  --r: 0px;

  /* 下線の体裁（ヘッダー・フッターのリンク共通・ユーザー指示 2026-08-03「全部同じ体裁に」）。
     ★太さは固定px＝どこでも同じ線の重さに見せる。
     ★文字からの距離は em ＝文字サイズに比例して離れる（17pxで5.1px／33pxで9.9px）。
       px固定にすると大きい文字でくっつき、小さい文字で離れて見える。
     ★border-bottom は使わない。ボックス下端に引かれるため、min-height:44px を持つ
       リンクでは文字から13pxも離れてしまう（実測）。 */
  --ul-thick:  2px;
  --ul-offset: .3em;
  --ul-dur:    .3s;   /* 下線のフェード時間。他のtransitionと同じ .3s に揃える */

  /* ヘッダー帯を浮かせる隙間。上下**と左右**に同じ値で回す＝デバイス全幅に対して
     均等に浮かせる（ユーザー指示 2026-07-31）。従来 clamp(8px,1.1vw,14px) の約1.5倍。
     ★帯だけは版面（--wrap 1200px）ではなく**全幅基準**で置く。--gut とも別物 */
  --hd-gap: clamp(12px, 1.65vw, 21px);

  /* ---- 演出（参考①のDNA：duration差でずらす fade-up）---- */
  --rv-y: 20px;
  --rv-d0: .8s; --rv-d1: 1.2s; --rv-d2: 1.6s; --rv-d3: 2s; --rv-d4: 2.4s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- 基礎 */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* ★★ページ内リンクの飛び先が**固定ヘッダーの裏に潜らない**ようにする（2026-08-03・a11y監査）。
   `.sh-head` は position:fixed なので、`scroll-margin-top` が 0 のままだと
   「本文へスキップ」で飛んだ直後に見出しが帯に隠れる（実測 ヘッダー下端121px 対 0px）。
   ★帯の実高さ（375pxで109px／1920pxで121px）に余白を足した値。帯の高さを変えたらここも直す。 */
[id]{ scroll-margin-top:clamp(124px, 8vw, 148px); }
body{
  margin:0;
  font-family:var(--f-gothic);
  font-size:var(--fs-body);
  font-weight:500;              /* 400未満に落とさない（かすれ防止） */
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--c-ink);
  background:var(--c-bg);
  overflow-x:hidden;            /* 巨大英字・片側ブリードが版面外へ出るため */
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-aqua-ink); }
/* ★★フォーカスリングは**2色**にする（2026-08-03・a11y監査）。
   水色ink 単色だと、CTA（`#006AB6` ベタ）や未経験育成の青パネルの上で **1:1＝完全に見えない**（実測）。
   外側に白いリングを重ねると、明るい面では白が消えて ink が見え／濃い面では白が見える
   ＝**面の色に関係なく必ずどちらかが立つ**。面ごとに上書きを書き足すより壊れにくい。
   ★`box-shadow` は角丸に追従するので、ボタン・カードでも形が破綻しない。 */
:focus-visible{
  outline:3px solid var(--c-aqua-ink);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.92);
}
address{ font-style:normal; }

.site-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.site-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--c-navy); color:#fff; padding:12px 20px; text-decoration:none;
}
.site-skip:focus{ left:0; }

/* ------------------------------------------- 日本語の文字組み（機械計測NGの対策）
   ・見出し＝balance（行長を揃え、末行が極端に短くならないようにする）
   ・本文  ＝pretty（最終行に1〜2文字だけ残る「行末孤立」を避ける）
   ・数字＋単位・社名は nowrap で割れないようにする（jp-text-linebreak-control） */
h1,h2,h3,
.site-fv__ttl,.site-hd__ttl,.site-cta__ttl,.site-merit__ttl,.site-band__txt,.site-news__ttl{
  text-wrap:balance;
}
p,li,address,figcaption{ text-wrap:pretty; }
.xw-nb{ white-space:nowrap; }
/* 意味の区切りで行を分ける。＜br＞ と違い、各行が独立して balance されるため
   「長い行＋2文字だけの行」が生まれない（実測NG対策） */
.xw-line{ display:block; text-wrap:balance; }

/* ==================================================== 巨大英字（参考①のDNA）
   ①は hero__eng / message-pics__eng として英字タイポを画像で敷いている。
   ここでは文字で実装（画像素材に依存させない）。装飾なので aria-hidden。
   ★指示のない装飾ではない＝参考サイト①由来・ユーザー承認済。撤去しないこと。
   ★見出しと重ねず真上に置く（重ねると明朝の細い横画が濁る・2026-07-31実測）。 */
.xw-bigen{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  /* ★bottom は「見出しの上に完全に逃がす」位置。旧 calc(100% - .10em) は英字の箱が
     見出しブロックへ 10px 食い込んでいて、明朝見出しとの間が詰まって見えた
     （ユーザー指摘 2026-08-03）。--bigen-gap ぶん上へ離す。 */
  top:auto; bottom:calc(100% + var(--bigen-gap)); left:-.04em;
  font-family:var(--f-en); font-size:var(--fs-bigen); font-weight:700;
  letter-spacing:-.02em; line-height:1; white-space:nowrap;
  color:var(--c-wash);
}
.xw-bigen--center{ left:50%; transform:translateX(-50%); }
/* ★★2026-08-03（第25版）: FV の英字だけは**内側に置く**。
   他セクションは `bottom:calc(100% - .1em)`＝見出しブロックの外へ逃がす方式でよいが、
   FV は `.site-fv{overflow:hidden}` の直下なので、外へ逃がすと**そのまま切り取られる**
   （第24版の実測＝104px のうち 10px しか見えていなかった）。
   ★中央組みのコピーに軸を合わせるため `--center` 相当の中央寄せも同時に持たせる。
     `transform` は `translateX(-50%)` だけにすること（縦を transform で足すと中央寄せが壊れる）。 */
.xw-bigen--fv{
  top:clamp(28px,3vw,48px); bottom:auto;
  left:50%; transform:translateX(-50%);
}
.xw-bigen--on{ color:rgba(255,255,255,.16); }

/* ---------------------------------------------------- 見出しシステム（署名） */
.site-en{
  margin:0 0 var(--s1);
  font-family:var(--f-en);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.26em;
  color:var(--c-aqua-ink);
  white-space:nowrap;
}

.site-hd{ position:relative; margin:0 0 var(--el-gap); padding-top:.42em; }
/* ★★巨大英字ぶんの場所を見出しブロックで予約する（2026-08-03・第16版）。
   .xw-bigen は position:absolute ＋ bottom:calc(100% - .10em) なので、見出しの上へ
   font-size の約0.9倍（1440pxで94px）突き出すが、レイアウト上は幅も高さも持たない。
   第14版で Row/Section の余白に切り替えたとき、この突き出しが --sec-gap（60px）を
   丸ごと食い潰していた。実測（1440px・前セクションの最終行 → 次の英字の上端）:
     会社の思い 1px ／ 数字 0px ／ 手当 6px ／ 安定 −34px（前の内容に重なっていた）
   → 突き出し量を padding-top で予約し、--sec-gap / --row-pad が宣言どおりの白場になるようにする。
   ★--flush の Row には当てない。フルブリードの意匠ブロックは内側に --row-pad 相当の
     padding を自前で持っているため（§3-7）、当てると二重に空く。
   ★この予約を消すと「セクションの上が窮屈」が再発する。余白トークンの値をいくら上げても
     英字が先に食うので直らない＝直す場所はここ。
   ★予約は**セクション側**に置く。`.site-hd` に padding-top を足しても英字は動かない
     （`bottom:calc(100% - .10em)` は .site-hd の高さ基準なので、padding で高さが増えると
     英字も同じだけ下がり、見出しだけが英字から離れる＝§3-4-1「見出しの真上」を壊す。実測で確認）。
   ★これは §3-7 の「セクションは縦余白を持たない」の例外ではない。**余白ではなく
     絶対配置の意匠がはみ出す領域の確保**であり、値も余白トークンではなく --fs-bigen から導く。
     padding-bottom は持たせない（下の余白は従来どおり Row が持つ）。 */
.site-row:not(.site-row--flush) > *:has(.xw-bigen){
  /* 英字の箱の高さ（line-height:1 なので --fs-bigen そのもの）＋ 見出しとの間隔 */
  padding-top:calc(var(--fs-bigen) + var(--bigen-gap));
}
.site-hd__ttl{
  position:relative; z-index:1;
  margin:0;
  font-family:var(--f-mincho);
  font-size:var(--fs-h2);
  font-weight:600;
  /* ①実測は 2.1 だが、明朝の多行見出しでは行が離れて塊に見えない（ユーザー指摘 2026-07-31）。
     見出しは 1.6〜1.65 に締め、本文（1.95）との差で「見出しの塊感」を作る。
     ★この値を 1.8 以上へ戻さないこと（同じ指摘が再発する） */
  line-height:1.65;
  letter-spacing:.12em;       /* ①実測 0.15em。明朝では開きすぎるため .12em */
  color:var(--c-navy);
}
.site-hd__ttl--sm{ font-size:var(--fs-h2-sm); line-height:1.55; }
.site-hd__ttl--on{ color:#fff; }
.site-hd--center{ text-align:center; }

/* 見出し下の細い線＝水面の記号（装飾は3:1不要） */
.site-hd__ttl::after{
  content:""; display:block; width:64px; height:3px; margin-top:var(--s3);
  background:linear-gradient(90deg,var(--c-aqua),var(--c-green));
}
.site-hd--center .site-hd__ttl::after{ margin-inline:auto; }
.site-hd__ttl--on::after{ background:linear-gradient(90deg,#fff,var(--c-aqua-lite)); }

/* ---------------------------------------------------------------- 本文 */
.site-prose > p{ margin:0 0 var(--s3); }
.site-prose > p:last-child{ margin-bottom:0; }
.site-prose--center{ text-align:left; max-width:46em; margin-inline:auto; }
.site-prose--on{ color:#EAF4FA; }

/* ================================= Row（背景色のレイヤー）＝余白の主体
   2026-08-03 ディレクター指示の全案件共通ルール。背景色が同じセクションを束ね、
   Row端＝--row-pad／Row内＝--sec-gap で機械的に決める。正本は design_rules.md。
   ★セクション側に padding-block を戻さないこと（二重になる）。 */
.site-row{ padding-block:var(--row-pad); }
.site-row > * + *{ margin-top:var(--sec-gap); }
.site-row--tint{ background:var(--c-bg-tint); }
/* ★★FV直後のRowだけ上を詰める（ユーザー指示 2026-08-03「ヒーローセクションの水とお知らせが
   少し空きすぎているので間を狭めてほしい」）。
   FVは下端が白へ溶けきっているので、そこへさらに `--row-pad`（1440pxで128px）が乗ると
   「白い空白が2枚重なった」状態になる。**FVに続く1つ目のRowに限った例外**で、
   Row/Section ルール（§3-7）そのものは変えていない。
   ★**`:first-child` を必ず付ける。** 付けないと Row3（完全2分割・フルブリード）の直後にある
     Row4（中間バンド）にも効いてしまい、指示していない箇所の余白まで変わる。 */
.site-row--flush:first-child + .site-row{ padding-top:clamp(32px, 3.6vw, 52px); }
/* ★CTAの写真（.site-cta__side）は Row 全体＝上下の Row Padding も含めて覆う。
   位置の基準を Row 側に置くのがポイント。.site-cta に position:relative を残すと、
   写真が Row Padding のぶん上下100pxずつ足りなくなる（実測 2026-08-03）。
   ★overflow:hidden は付けないこと。付けると 900〜1279px で巨大英字 CONTACT の上端が
     10〜25px 切れる（この帯は --row-pad が旧 --s7 より小さく、英字の突き出し量89pxに足りない）。
     写真は right:0・width:min(44%,600px) なので横に溢れず、そもそも clip は不要（実測 2026-08-03）。 */
.site-row--brand{ background:var(--c-aqua-ink); position:relative; }
/* フルブリードの意匠ブロック（FV・完全2分割・全幅バンド）は背景が画面端まで届く必要があるため
   Row Padding を掛けない。内側の余白を --row-pad に合わせて体裁だけ揃える */
.site-row--flush{ padding-block:0; }

.site-sec{ position:relative; }

/* ---------------------------------------------------------- リンク・ボタン */
.site-link{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px;
  font-weight:700; color:var(--c-aqua-ink); text-decoration:none;
  transition:color var(--ul-dur) var(--ease);
}
/* ★下線は必ずラベルの span に付ける。親（inline-flex）に付けると擬似要素の矢印も
   flex item として text-decoration を受け継ぎ、矢印の下にも線が出る（実測 2026-08-03）。
   ::after 側の text-decoration:none / color:transparent では打ち消せない。 */
.site-link__t{
  text-decoration:underline transparent;
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:text-decoration-color var(--ul-dur) var(--ease);
}
/* KEEP: 矢印は実体の ＜span class="site-link__ar"> で出す（2026-08-27 コード化時に変換）。
   受領CSSは site-link の擬似要素 after に矢印の content を持たせていたが、CueZilla の
   AddCssInfo は擬似要素の content を除去する（R-27）ため実機では矢印が消える。
   **擬似要素へ戻さないこと。** */
.site-link__ar{
  font-family:var(--f-en);
  transition:transform var(--ul-dur) var(--ease);
}
/* /KEEP */
.site-link:hover .site-link__t{ text-decoration-color:var(--c-aqua); }
.site-link:hover .site-link__ar{ transform:translateX(4px); }
.site-link--go{
  padding-inline:var(--s3) var(--s2);
  border-left:3px solid var(--c-aqua);
}
.site-link--on{
  color:#fff; padding-inline:var(--s3) var(--s2);
  border-left:3px solid var(--c-aqua-lite);
}
.site-link--on:hover .site-link__t{ text-decoration-color:var(--c-aqua-lite); }
.site-go{ margin:var(--el-gap) 0 0; }

/* 参考①：角丸0・横長のバー */
.site-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:60px; min-width:min(100%,300px); padding:var(--s2) var(--s5);
  border-radius:var(--r); border:2px solid transparent;
  font-family:var(--f-gothic); font-size:var(--fs-body); font-weight:700;
  letter-spacing:.08em; text-decoration:none; text-align:center;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
/* ★★2026-08-05（ディレクター指摘「スマホ時もボタンの文字が1行に収まるように。
   もしかすると padding 値が広いかも？」）: 狭幅では左右の内側余白を `--s5`(56px) → `--s3`(24px) へ。
   ボタンは文字を中央寄せするので、**短いラベルでは見た目が1pxも変わらない**（余白は効いていない）。
   効くのは「文字がボタン幅に収まらない時だけ」＝**折り返しを防ぐ保険**として働く。
   実測: 360px幅で `.site-next` のボタン内寸が157pxしかなく「募集要項を見る →」(161px)が折り返していた。 */
@media (max-width:767px){
  .site-btn{ padding-inline:var(--s3); }
}
.site-btn--main{ background:var(--c-aqua-ink); color:#fff; }
.site-btn--main:hover{ background:var(--c-navy); transform:translateY(-2px); }
.site-btn--on{ background:#fff; color:var(--c-aqua-ink); }         /* 青ベタ面の上 */
.site-btn--on:hover{ background:var(--c-navy); color:#fff; transform:translateY(-2px); }
.site-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.site-btn--ghost:hover{ background:#fff; color:var(--c-aqua-ink); transform:translateY(-2px); }

/* ============================================ 【撤去済み】ベクターの波（2026-07-31）
   SVGで描いていた「水面の稜線」5箇所（FV下端／中間バンド上下／CTA上端／フッター上端）と
   CTA右の波線デコを全削除した。理由は ①ベクター表現では品質が出ない
   ②波の演出がサイトの雰囲気とミスマッチ（ユーザー指示）。
   跡地は画像スロット（.site-fv__band / .site-cta__side）に置き換えている。
   ★SVGの波を復活させないこと。水の表現が必要な箇所は画像で入れる。
   ※ 見出し下の3pxグラデ罫（.site-hd__ttl::after）は波形ではないため残す判断（ユーザー確認済）。 */

/* ================================================================ ヘッダー
   ＝上・左右に余白を取って浮かせた「帯」（参考①と同じ機構・ユーザー指示 2026-07-31）
   ①実測（1440px）: fixed／表示時 top:10px／w1212・L106 R107＝左右対称の余白／高さ80px／
   白面／影 rgba(73,122,152,.22) -7px 9px 20px -4px／幅指定は 95.833vw。
   ・★帯は**デバイス全幅**に対して上下左右とも --hd-gap ぶんだけ浮かせる（ユーザー指示）。
     版面（--wrap 1200px）に合わせて左右余白を作る方式は**やめた**＝帯だけは全幅基準。
     したがって .sh-inner に max-width は掛けない（掛けると左右の隙間が上と揃わなくなる）
   ・sticky の内側パディングなので、スクロール追従時もこの隙間がそのまま残る
   ・★①は border-radius:50px のピル型だが、本サイトは §3-2 の roundness:0 契約を優先して
     角丸0のまま当てている（ピルに寄せるかはディレクター判断） */
/* ★★2026-08-03（第26版）: `position:sticky` → **`fixed`** に変更（デザイン画像に合わせる）。
   sticky はフロー上に自分の高さ（1440pxで143px）を占めるため、FVが必ずその下から始まり
   **亀岩の上端がヘッダーの下で切られていた**。fixed にするとフローから外れ、
   FVが y0 から始まって画がヘッダーの裏まで抜ける＝画像どおり「天まで届く」絵になる。
   ★スクロール時の挙動は sticky と同じ（先頭要素なので実質 fixed だった）。
   ★戻すと FV が143px下がり、上端の抜けが消える。 */
.sh-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:var(--hd-gap);        /* 上下左右すべて同じ隙間 */
  background:transparent;
  pointer-events:none;          /* 帯の外側（余白）は下のコンテンツを触れるようにする */
}
.sh-inner{
  pointer-events:auto;
  width:100%;
  /* ★★2026-08-05（ディレクター指摘「スマホ時、メニューが帯に対して右の適切な余白が確保できていない」）:
     左右パディングの**下限を 20px → 28px** へ上げた。
     実測では左右とも20pxで対称だったが、右端に来るのは**バーガー＋「メニュー」の塊**で、
     文字（社名）と違ってグリフの内側余白を持たないため**箱の端＝見た目の端**になり、帯に貼り付いて見える。
     さらに社名との間隔が41pxあり、「隣より外側のほうが狭い」＝押し出されて見える状態だった。
     28pxにすると 375px で 社名との間隔25px・右の余白28px となり、**外側のほうが広い**関係に反転する。
     ★変わるのは clamp の下限に当たる幅（〜1167px）だけ。**1280/1440/1920px は 1px も動かない**
       （2.4vw が28pxを上回るため）＝承認済みトップのPC表示は不変。
     ★375px で社名（206px）＋バーガー（64px）＋間隔（25px）＋左右パディング（56px）＝351px ＝ 帯の内寸ちょうど。
       これ以上広げると社名が折り返すので **28px が上限**。 */
  padding:var(--s2) clamp(28px,2.4vw,36px);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-radius:var(--r);
  box-shadow:0 8px 20px -6px rgba(31,58,95,.20);
  transition:box-shadow .3s var(--ease);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
/* ★375px 未満は 20px へ戻す。社名（206px）＋バーガー（64px）＋間隔（24px）＝294px が固定幅で、
   360px では 28px パディングだと右の余白が 14px まで潰れる（実測）。
   ★このサイトの検証下限は375px（ゲートの最小幅）。360/320px は「破綻させない」ための保険。 */
@media (max-width:374px){
  .sh-inner{ padding-inline:20px; }
}
.sh-head.is-solid .sh-inner{ box-shadow:0 10px 26px -6px rgba(31,58,95,.26); }
.sh-brand{ text-decoration:none; color:inherit; flex:0 0 auto; min-width:0; }
.sh-brand__ph{ display:block; }
/* ロゴ枠（実ロゴ画像に差し替える。差し替えまでは社名の文字組みで代替）
   狭幅では許可番号を伏せる（フッターに掲載あり）。社名は「株式会社／社名」の2行で割り、
   長音記号だけが次行に落ちるのを防ぐ */
/* ★許可番号は水色を使わない（ユーザー指示 2026-08-03）。「株式会社」と同じ補助文の色に揃える。
   水色ink はリンク・CTAの色なので、押せない情報に使うと導線が散る */
/* ★★2026-08-03（第26版）: 許可番号と「株式会社」を **--fs-fine(15px) → --fs-label(12px)** へ落とし、
   社名を大きくした（ユーザー指示「君津水道サービスセンターの文字を大きくしたい。
   上の許可番号や株式会社がやや目立ちすぎている」）。
   ★**新しいpx値を作らず既存トークンに寄せている**（font-size の種類を増やさないため。§7）。 */
.sh-brand__lic{
  display:none; font-size:var(--fs-label); letter-spacing:.08em; color:var(--c-sub);
  line-height:1.5; white-space:nowrap;
}
/* ★★`font-size` を持たせないこと（2026-08-03）。この要素は「株式会社／社名」を包むだけで、
   中の2つ（`__co` 12px ／ `__main`）が**必ず上書きする**ため、ここで指定した値では
   **文字が1つも描かれない**。にもかかわらず font-size の種類数には数え上げられ、
   1280pxで 19px という「誰も使っていない1種」を生んで契約15種を超過させていた（実測）。
   → サイズは `__main` 側に全幅ぶん持たせた（下）。**ここに font-size を戻さないこと。** */
.sh-brand__name{
  display:block; font-family:var(--f-mincho); font-weight:600;
  line-height:1.4; letter-spacing:.02em; color:var(--c-ink);
}
.sh-brand__co,.sh-brand__main{ display:block; white-space:nowrap; }
.sh-brand__co{ font-size:var(--fs-label); letter-spacing:.06em; color:var(--c-sub); }
/* ★社名のサイズは**全幅ここで決める**（旧: 1200px以上だけ指定し、それ未満は親から継承していた）。
   1200px の値（19.2px）は継承時と同一なので、この帯の見た目は変わらない。
   375px は 16→16.8px、1280px は 20.48px で据え置き、1920px は上限24px。 */
.sh-brand__main{ font-size:clamp(1.05rem, 1.6vw, 1.5rem); }
.sh-right{ display:flex; align-items:center; gap:var(--s3); }
.sh-nav{ display:none; }
.sh-nav__list{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); list-style:none; margin:0; padding:0; }
.sh-nav__list a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-body); font-weight:700; color:var(--c-ink); white-space:nowrap;
  /* ★下線は常時 underline で置き、色だけ transparent にして見えなくしておく。
     text-decoration-line は遷移できないため、none から出すと必ず瞬間表示になる（ユーザー指摘 2026-08-03）。 */
  text-decoration:underline transparent;
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:color var(--ul-dur) var(--ease), text-decoration-color var(--ul-dur) var(--ease);
}
.sh-nav__list a:hover{ color:var(--c-aqua-ink); text-decoration-color:var(--c-aqua); }
/* ---- プルダウン（PCナビの下層メニュー・2026-08-05）--------------------------
   ★対応する下層はモバイルドロワー／フッターの入れ子と同じ2本（私たちについて／求職者の皆様へ）。
     3か所そろえる規約に従う（_partials/header.html 冒頭の注意）。
   ★開くのは hover と :focus-within の両方＝マウスとキーボードのどちらでも到達できる。
     JS不動でも開閉するのが基本形で、site.js は「Escapeで閉じる」だけを足している。
   ★親項目と面のあいだに隙間を作らない（top:100%）。隙間があるとポインタが抜けて閉じる。
   ★面の色は白・文字は白地で読める色だけ（--c-navy / --c-aqua-ink）＝ドロワーと同じ規約。 */
.sh-nav__list > li{ position:relative; }
.sh-nav__par{ display:inline-flex; align-items:center; gap:4px; }
.sh-nav__ar{
  font-size:10px; line-height:1; color:var(--c-sub);
  transition:transform .22s var(--ease), color .22s var(--ease);
}
.sh-nav__has:hover .sh-nav__ar,
.sh-nav__has:focus-within .sh-nav__ar{ transform:rotate(180deg); color:var(--c-aqua-ink); }
.sh-nav__sub{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  z-index:5; min-width:190px; margin:0; padding:var(--s2) 0; list-style:none;
  background:#fff; border-radius:var(--r);
  box-shadow:0 12px 28px -8px rgba(31,58,95,.30);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.sh-nav__has:hover > .sh-nav__sub,
.sh-nav__has:focus-within > .sh-nav__sub,
.sh-nav__has.is-open > .sh-nav__sub{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.sh-nav__sub a{
  display:flex; align-items:center; width:100%; min-height:44px;
  padding:0 var(--s3); font-size:var(--fs-fine); font-weight:500;
  color:var(--c-navy); white-space:nowrap; text-decoration:none;
}
.sh-nav__sub a:hover,.sh-nav__sub a:focus-visible{ color:var(--c-aqua-ink); background:rgba(91,194,231,.10); }
/* 電話番号を1つの塊にする（ユーザー指摘「まとまりを感じない」対応・2026-08-03）。
   字間.14em/行間1.5だとラベルと番号が別要素に見えるため詰める。
   ★番号の色は水色にしない（ユーザー指示 2026-08-03）。--c-navy を継承させ、他の文字色と揃える。
     まとまりは「縦罫＋字間・行間」で作る。色で押せる感を出すと青が増えてCTAが埋もれる */
/* ★min-height:44px は必須。行間を詰めた結果、中身の高さが41pxになりタップ領域を割った（実測）。
   詰めるのは見た目だけで、当たり判定は44pxを下回らせない */
.sh-tel{ display:none; text-decoration:none; color:var(--c-navy); line-height:1.15; min-height:44px; }
.sh-tel__label{
  display:block; font-size:var(--fs-fine); letter-spacing:.06em; line-height:1;
  margin-bottom:3px; color:var(--c-sub); white-space:nowrap;
}
.sh-tel__num{
  /* 明朝体に変更（ユーザー指示「電話番号のフォントを変更したい。明朝体が良い」2026-08-03）。
     ★游明朝にはW7が無く700は合成太字になり輪郭が濁るため、見出しと同じW600に合わせる
     （.site-hd__ttl も600）。 */
  display:block; font-family:var(--f-mincho); font-size:var(--fs-tel); font-weight:600;
  line-height:1.05; letter-spacing:.01em; white-space:nowrap;   /* 色は .sh-tel の --c-navy を継承 */
  /* ★下線は常時 underline・色は透明で待機し、hoverで色だけアクアへフェードさせる（2026-08-03）。 */
  text-decoration:underline transparent;
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:text-decoration-color var(--ul-dur) var(--ease);
}
.sh-tel:hover .sh-tel__num{ text-decoration-color:var(--c-aqua); }
.sh-cta{ display:none; }
/* 1280px未満は幅の余りが無いので矢印を出さない（1200pxで余り46pxしか無い＝実測） */
.sh-cta__ar{ display:none; font-family:var(--f-en); }

/* ★★2026-08-04（テンプレート形式へ移植した時に追加）: `line-height:normal` は **Bootstrap のリセット**。
   BS5 は `button{ font:inherit; line-height:inherit }` を当てるため、これが無いとバーガーが
   body の行送り（1.95＝33.15px）を継ぐ。子の `.sh-burger__txt` は line-height を持たないので
   そこへ伝わり、**帯の高さが 119→122px、社名が2px下へずれる**（草案サイト＝BS非読込 との
   計算値比較で検出。1200px以上はバーガー非表示なので 1440/1920px では差0だった）。
   ★意匠を変える指定ではなく、**承認済みの見え方を新しいカスケードでも保つための復元**
     （`normal` は草案での実効値と同一）。 */
.sh-burger{
  appearance:none; -webkit-appearance:none; background:none; border:0;
  width:64px; min-height:44px; padding:6px 2px; cursor:pointer; line-height:normal;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.sh-burger__bar{ display:block; width:26px; height:2px; background:var(--c-navy); }
.sh-burger__txt{
  font-family:var(--f-gothic); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.06em; color:var(--c-navy); white-space:nowrap;
}

/* ★★★2026-08-04（第28版）: ドロワーの地を **紺 → 白ベース**（ユーザー指示「紺色は重たいので
   白色ベースに切り替えたい」）。§3-1 の「紺は文字のみ・面には使わない（重くなる）」とも整合する
   ＝紺の面はこのドロワーが最後の1箇所だった。**濃い面はCTAと未経験育成の左パネルの2箇所だけになる。**
   ★配色の反転は「地と文字を入れ替える」だけでは済まない。**濃地用に選んだ水色lite `#8FDCF3` は
     白地では 1.6:1 で読めない**（§3-1 の「濃地の文字用」）。白地に載る文字はすべて
     `--c-navy`（11.4:1）／`--c-aqua-ink`（5.6:1）／`--c-sub`（6.1:1）のいずれかへ寄せること。
   ★hover の下線も `--c-aqua`（#5BC2E7・白地2.0:1）では見えない。**白地では必ず `--c-aqua-ink`**。
     `--c-aqua` は§3-1で「装飾専用」＝濃地か面の上でしか使えない。 */
.sh-drawer{
  position:fixed; inset:0; z-index:60;
  background:#fff; color:var(--c-ink);
  padding:var(--s3) var(--gut) var(--s5);
  overflow-y:auto;
  opacity:0; transition:opacity .28s var(--ease);
}
.sh-drawer.is-open{ opacity:1; }
.sh-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3); }
.sh-drawer__ttl{ font-family:var(--f-en); font-size:var(--fs-label); font-weight:700; letter-spacing:.26em; color:var(--c-aqua-ink); }
.sh-drawer__close{
  appearance:none; background:none; border:1px solid rgba(31,58,95,.32); color:var(--c-navy);
  min-height:44px; padding:0 var(--s3); border-radius:var(--r);
  font-family:var(--f-gothic); font-size:var(--fs-body); cursor:pointer;
}
.sh-drawer__list{ list-style:none; margin:0 0 var(--s4); padding:0; }
/* ★罫は紺の12%。白地で「線がある」と分かる最小の濃さ＝これ以上薄いと項目の区切りが消える。 */
.sh-drawer__list > li{ border-bottom:1px solid rgba(31,58,95,.12); }
.sh-drawer__list a{
  display:flex; align-items:center; min-height:56px;
  color:var(--c-navy); font-size:var(--fs-body); font-weight:700;
  /* ★下線は常時 underline・色は透明で待機し、hoverで色だけフェードさせる（2026-08-03）。 */
  text-decoration:underline transparent;
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:text-decoration-color var(--ul-dur) var(--ease);
}
.sh-drawer__list a:hover{ text-decoration-color:var(--c-aqua-ink); }
/* ★子項目は「親より弱いが読める」＝水色ink。白地5.6:1でAA可（濃地用の lite ではない）。 */
.sh-drawer__child a{ padding-left:var(--s3); font-weight:500; color:var(--c-aqua-ink); }
.sh-drawer__dash{ margin-right:var(--s1); }   /* KEEP: 受領の擬似要素 before のダッシュを実体化（R-27） */ /* /KEEP */
/* ★電話ボタンは地の反転とセットで**逆に**する（白地に白ボタンでは消えるため）。
   本文のCTAと同じ `.site-btn--main` の配色＝サイト内でボタンの意味と色が一致する。 */
.sh-drawer__tel{
  display:flex; align-items:center; justify-content:center; min-height:56px;
  background:var(--c-aqua-ink); color:#fff; border-radius:var(--r);
  font-family:var(--f-en); font-size:var(--fs-tel); font-weight:700; text-decoration:none;
}

/* ==========================================================================
   オープニング演出（`.site-open`）＝**トップページ専用**（2026-08-05・ディレクター指示）
   ==========================================================================
   ■ 第2版（2026-08-05・**現行**）＝**白背景に英字社名だけ**
     ①白一色の画面に、FVと同じ英字社名が明朝でふわりと出る（0.7秒）
     ②少し置いて白幕ごと消え、FVが現れる（全体 約1.7秒）
     **動く要素は文字のフェードだけ**。

   ■ 第1版（撤去済み）＝「下から実写の水の帯が上がって抜ける」
     ★ディレクター指摘「**水が高速で上に上がるのが違和感**」により**動く水そのものを撤去**した。
       水の帯は FV 下端に既にあるので、サイトの意匠は失われていない。
     ★**この演出に水を戻さないこと。** 戻すなら「速度」ではなく**動かす是非**から判断が要る。
     ★（第1版で解決済みだった論点＝素材の下端が水の切り口なのでCSSマスクで溶かす必要がある、は
       水を使わなくなったので**もう関係ない**。再び水を動かす案が出たときだけ思い出せばよい）

   ■ 規約の確認
     ・角丸0・影なし（浮遊感はヘッダーの浮き帯だけの専用表現）
     ・黄緑は「見出し下の3px罫の1箇所だけ」＝**オープニングには使わない**
     ・紺は面に使わない＝地は白のまま
     ・`prefers-reduced-motion` では**一切再生せず即座に消す**（下のメディアクエリ）
     ・FVの上に被せるだけ＝**FVのレイアウトは1pxも動かない**（375×667の詰めを壊さない）
   ■ 実装の置き場所
     ・マークアップは**トップの index.html だけ**（下層には置かない＝下層では何も起きない）
     ・制御JSは `assets/js/site.js`（CueZilla納品時は「サイト情報→トラッキングID(BODY内)」へ・R-16）
     ・セッション中1回だけ（`sessionStorage`）＝回遊して戻ってくるたびには出さない */
.site-open{
  position:fixed; inset:0; z-index:200;      /* ヘッダー(z-50)より上 */
  background:#fff;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* ★2026-08-05（第3版）: **全体をゆっくりに**（ディレクター指示「もう少しゆっくり見たい」）。
   文字の立ち上がり .7s → 1.4s、白幕の抜け .5s → .9s。JS側の待ち時間（site.js）と対で調整すること。 */
.site-open.is-done{ opacity:0; visibility:hidden; transition:opacity .9s var(--ease), visibility 0s .9s; }
/* 英字社名＝FVの `.site-fv__en` と同じ体裁（明朝700・水色ink・字間.1em）。
   ★サイズだけは大きく見せたいので `--fs-h2-sm` を再利用する＝**新しいサイズを作らない**。 */
.site-open__en{
  position:relative; z-index:1; margin:0;
  font-family:var(--f-mincho); font-size:var(--fs-h2-sm); font-weight:700;
  letter-spacing:.1em; line-height:1.6; color:var(--c-aqua-ink); text-align:center;
  opacity:0; transform:translateY(10px);
  /* ★立ち上がりは 10px だけ。**動きの量を増やさない**（第2版は「文字だけ」が要件）。 */
  /* ★立ち上がりはやや速め（.9s）にして、**出そろってから静止して見せる時間**を長く取る。
     静止時間は site.js の endOpening 待ち（3600ms）側で確保している。 */
  animation:kssc-open-en .9s var(--ease) .2s forwards;
}
@keyframes kssc-open-en{ to{ opacity:1; transform:translateY(0); } }
/* ★演出を止める設定のときは**何も動かさず即座に消す**（a11yゲートの対象） */
@media (prefers-reduced-motion:reduce){
  .site-open{ display:none; }
}

/* ====================== 型1：FV（縦組み見出し × 全面の亀岩 × 大きな水）
   ★★★2026-08-03（第26版）: ユーザー支給のデザイン画像どおりに全面組み替え。
     第25版までの「コピー＝上／亀岩＝下の縦分割・中央組み」は**破棄**。骨格は5点:
       ①見出しは**縦組み（明朝）で右端**。3列が右→左へ流れる
       ②コピー（英字ラベル→リード→青ボタン）は**左**で左寄せ
       ③亀岩は**全面に大きく、上端はヘッダーの裏まで抜ける**
       ④写真枠は「左上に1点＋右下に3点のクラスタ（重ね置き）」
       ⑤水は**下半分を占める**大きさ
   ★素材 `千葉県君津市にある亀岩の洞窟-2.jpg` は**四辺の白フェードが焼き込み済み**。
     だから地を白にして置くだけで背景へ溶ける。**画像の端を切らないこと**（切るとフェードが消えて
     矩形の縁が出る）。
   ★地は `--c-bg-tint` ではなく **白**。焼き込みフェードは白へ向かうので、淡水色地だと縁が浮く。
   ★高さは幅基準（vh ではない）。亀岩も水も**幅に比例して高さが決まる**画像なので、
     vh だとウィンドウの高さ次第で下の絵が入りきらない（第24版で実際に入りきらなかった）。 */
/* ★★高さは 80vw → **68vw**（2026-08-03・亀岩の下端マスク導入とセット）。
   水は FV の下端にアンカーしているので、FV が高いほど水が下へ逃げる。80vw のままだと
   亀岩の溶けた下端（1440pxで y349〜671）と水の本体（同 y766〜）の間に **白い帯が約100px** 残り、
   「溶かして水とコラージュ」にならなかった（実測）。68vw にすると水の本体が y593 から始まり、
   亀岩のフェード帯と重なる。**高さ・マスクの開始位置・水の bottom は3点セット。** */
/* ★★★2026-08-04（第28版）: **FVの「画面端からの余白」を1つのトークンに集約**した
   （ユーザー指示「あらゆるデバイス幅でデバイスの端から適切な余白を設けてほしい」）。
   改修前の実測（右側だけが端に寄っていた）:
     | 幅   | 縦見出しの右 | p3の右 | 左（p1・コピー） |
     | 1200 |  31px       | 30px   | 68px  |
     | 1440 |  37px       | 36px   | 82px  |
     | 1920 |  50px       | 48px   | 109px |
   右は `clamp(16px,2.6vw,50px)` と `2.5%` という**別々の式**で決まっていたため、
   幅によって値がばらつき、かつセクション共通のガター `--gut`（40px）より内側に食い込んでいた。
   → **`--fv-edge` に一本化**。他セクションと端が揃う（`--gut` の目的そのもの）。
   ★左（p1・コピーの `clamp(20px,5.7vw,110px)`）は**意図的に右より広い**（縦見出しを端へ寄せる構図）。
     ただし下限が `--fv-edge` を割らないよう max() で床を張ってある。
   ★狭幅でも同じトークンで効かせる＝亀岩の幅も写真グリッドの外側もこの値になる（下の @media）。 */
.site-fv{
  --fv-edge: var(--gut);        /* clamp(20px,5vw,40px)＝全セクション共通のガター */
  position:relative; overflow:hidden; background:#fff;
  min-height:clamp(680px, 68vw, 1240px);
}
.site-fv__stage{
  position:absolute; inset:0;
  /* ★ステージ内で重ね順を完結させる。isolation:isolate は必須＝外すと合成がコピー・ボタンまで
     巻き込み、実描画コントラストの測定も壊れる（実測）。
     内訳: 亀岩0 → スクリム1 → 水2 → 写真枠3 → 下端の溶かし4。
     コピー（h1 と .site-fv__body ＝ FV直下の z-index:3）はステージ全体より前にいる。 */
  isolation:isolate;
  /* ★装飾レイヤーなのでクリックを透過させる（面積が全面のため） */
  pointer-events:none;
}
/* ①主役＝亀岩。**上端を 0 に置いてヘッダーの裏まで抜く**（ヘッダーは position:fixed）。
   ★`top:0` を動かさないこと。デザイン画像の「画が天まで届いている」感はこれで出ている。 */
.site-fv__hero{
  position:absolute; z-index:0; top:0; left:50%; transform:translateX(-50%);
  width:min(70vw, 1340px); aspect-ratio:1700/1132;
  /* ★★下側を白へ溶かす（ユーザー指示 2026-08-03「亀岩の下側をグラデーションで白く溶かして、
     水の乗算とコラージュする形に」）。素材に焼き込まれている白フェードは**四辺の細い縁だけ**で、
     下1/3の水面はベタで残るため、そのままだと水の帯と「水が2段」に見えていた。
     ★マスク＝地の白が透けるので、水（白をアルファ抜き済み＝乗算と同じ見え方）が
       そのまま上に重なってコラージュになる。**塗りを重ねるのではなくマスクで抜くこと**
       （塗りだと水より前に白い面ができて水が沈む）。 */
  /* ★開始 52%→**62%**。52%だと亀岩の実効面積・コントラストが落ちて**水に主役を奪われた**
     （FV主役検定で1279/1280/1440pxがNG・水0.6742 対 亀岩0.6538・実測）。
     水の opacity とセットで調整すること。 */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.38) 86%, transparent 99%);
          mask-image:linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.38) 86%, transparent 99%);
  background:linear-gradient(160deg,#93C4DB,#5E9FC0);
}
/* ④写真枠。p1＝左上の単独／p2〜p4＝右下のクラスタ。
   ★クラスタは **DOM順で重なる**（p4が最前面）。z-index を足して順序を作らないこと＝
     ステージ内の他レイヤー（水2・溶かし4）との関係が崩れる。 */
/* ★写真4枚の受け皿。**PCでは箱を作らない**（display:contents）＝中の4枚は従来どおり
   `.site-fv__stage` を基準に絶対配置される。狭幅でだけグリッドに変えて「小写真の行」を作る。 */
.site-fv__pics{ display:contents; }
.site-fv__pic{
  position:absolute; z-index:3; display:none;   /* ≥1200px でのみ出す（下の @media） */
  background:linear-gradient(150deg,#BFDEEC,#9AC8DE) center/cover no-repeat;
  box-shadow:0 10px 30px -12px rgba(31,58,95,.28);
}
/* ★p1 の top は**ヘッダーの下端（1440pxで143px）より下**に置く。上げると帯の裏に潜る。 */
/* ★★★2026-08-04（第32版）: 左端も **`--fv-edge` に統一**（ユーザー指摘「左が広く見える」）。
   旧値は `clamp(20px,5.7vw,110px)` ＝**幅に比例して増える式**だったため、右端（`--fv-edge`＝40px固定）との差が
   1200pxで+28px → 1920pxで**+69px** まで開いていた（実測）。1199px以下は既に両側 `--fv-edge` で揃っていたので、
   **1200px以上だけ左右非対称**という状態だった。
   ★左右を1つのトークンで持つ＝以後どちらかだけ動かす事故が起きない。個別の clamp に戻さないこと。 */
.site-fv__pic--p1{ width:clamp(150px,18.2vw,350px); aspect-ratio:14/9;
                   left:var(--fv-edge); top:clamp(150px,10.9vw,210px); }
/* ★★クラスタの top は **%（FV高さ比）ではなく px（vw連動）**（ユーザー指示 2026-08-03
   「縦キャッチ下の3枚がファーストビューに収まるように」）。
   % だと FV の高さが幅に比例して伸びるため、1920px では3枚が y900 より下へ落ちて
   ファーストビューから外れていた（実測 p4 の下端 1103px）。px 基準なら全幅で ~880px 以内に収まる。
   ★同時に「縦組み見出しの下端より下」も満たす必要がある＝**見出しのサイズと3点セット**。
     1920pxで 見出し下端596 → p2 580 / p3 610 / p4 690（下端871）。1440pxで 見出し下端418 → p2 435。 */
/* ★★★右下クラスタは「右の大きい1枚＋左に2枚を縦積み」の**右揃えグリッド**として組む
   （ユーザー指示 2026-08-03「写真同士の間隔をすべてそろえてください」）。
   ・**すべての隙間を `--fvc-gap` の1変数**にした＝3辺が必ず同じ値になる。
     以前は left:% の直書きで、p2↔p3=12px／p2↔p4=10px／p4↔p3=7px とバラついていた（実測）
   ・p2 と p4 は **right 基準**で揃える（幅が違っても右端が一直線に並ぶ）
   ・p3 の左端 ＝ 右端 2.5% ＋ 幅 18.7vw なので、左列の right はそこへ gap を足した値
   ★p2/p3 の幅を変えたら `--fvc-col` の 18.7vw と p4 の top 計算（p2の高さ＝幅×5/8）も直すこと。
   ★p4 の下端は FV下端の溶かしに掛けない（掛かると写真の下辺だけ白く濁る・第25版で実測）。 */
/* ★2026-08-04: 右端の基準を `2.5%`（幅で変動）→ **`--fv-edge`**（＝`--gut`）へ。
   p3 の right と `--fvc-col` は**同じ基準でなければクラスタの右揃えが崩れる**ので必ずセットで直す。 */
.site-fv__stage{ --fvc-gap:clamp(8px,.85vw,16px); --fvc-col:calc(var(--fv-edge) + 18.7vw + var(--fvc-gap)); }
.site-fv__pic--p2{ width:clamp(140px,16.5vw,320px); aspect-ratio:8/5;
                   right:var(--fvc-col); left:auto; top:clamp(260px,25.5vw,520px); }
/* ★p3 の top は**縦組み見出しの下端より下**。1200pxでは見出しの top が下限150pxに張り付いて
   相対的に下りるため、29vw では 16px 重なった（実測）→ 30.8vw へ。 */
.site-fv__pic--p3{ width:clamp(160px,18.7vw,360px); aspect-ratio:3/2;
                   right:var(--fv-edge); left:auto; top:clamp(320px,30.8vw,620px); }
.site-fv__pic--p4{ width:clamp(120px,13.5vw,260px); aspect-ratio:8/5;
                   right:var(--fvc-col); left:auto;
                   /* p2 の下端（top ＋ 高さ10.3vw）＋ gap */
                   top:calc(clamp(260px,25.5vw,520px) + 10.3vw + var(--fvc-gap)); }
/* ★スクリムは**左右の両端だけ**を白へ寄せる（第26版）。
   左＝コピー、右＝縦組み見出しがそれぞれ亀岩の端に乗るため。中央のアーチは素のまま残す
   ＝ここを白くすると主役が消える（第24版で楕円スクリムがアーチを飛ばしていた再発）。
   ★白の量を減らすときは必ず実描画コントラストを測り直すこと（§8）。 */
.site-fv__veil{
  position:absolute; z-index:1; inset:0;
  /* ★★左右とも**全高の帯ではなく楕円**にする（第26版で修正）。
     帯（linear-gradient）で必要な不透明度まで上げると、左右の帯が中央で出会って
     **亀岩のアーチまで白く飛ぶ**（1440pxで実測）。文字が乗るのはコピー塊と見出し列だけなので、
     その周りだけを白くすれば足りる。**帯に戻さないこと。** */
  /* ★★★2026-08-03: **半径を「文字が乗る範囲ちょうど」まで縮めた**（ユーザー指摘
     「メイン画像の滝の入口をもう少し全体が見えるように。文字用の白い光彩が不要」）。
     旧値（左52%・右34%）は 1920px で
       ・左の楕円が x1171 まで届き、**洞窟のアーチ（x600〜1300）を .6 前後の白で覆っていた**
       ・右の楕円も x1094 まで届き、アーチの右側を洗っていた
     ＝「文字を読ませるための白」が主役の絵まで消していた。
     新値は **左＝コピー列の右端まで（36%）／右＝縦組み見出しの左端まで（18%）**。
     1920pxで左は x864 まで・右は x1401 から＝**アーチ（x864〜1401）は素のまま**。
     ★半径を戻すと洞窟がまた白く飛ぶ。広げたくなったら、まず「文字の側を動かせないか」を考えること。 */
  background:
    /* ★★★2026-08-03: **左の楕円は撤去した**（ユーザー判断「左の楕円スクリム自体が不要。
       なくても文字は読めそう。文字に白い光彩でも良い」）。
       面で白を敷くと必ず主役の絵に掛かるので、**文字側に光彩（text-shadow）を持たせる**方式へ移行。
       残しているのは**右の小さい楕円だけ**＝縦組み見出しの背後で、洞窟には届かない大きさ（1920pxで x1401 から）。
       ★左を復活させないこと。復活させると 1920px で洞窟のアーチが白く飛ぶ（実測で戻した経緯あり）。 */
    radial-gradient(18% 40% at 93% 30%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 50%,
                    rgba(255,255,255,.34) 76%, rgba(255,255,255,0) 100%);
}
/* FV下端の溶かし。★ステージ内の最前面。
   ★下端は完全な白まで持っていく＝次の Row（白）と地続きにするため。途中で止めると境目に線が残る。 */
.site-fv__fade{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  height:clamp(70px, 7vw, 120px);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 62%, #fff 100%);
}
/* ①縦組みの大見出し。`.xw-line` は display:block なので、縦書きでは**1つの span＝1列**になり
   右から左へ積まれる。HTML側で3つに割ってあるので**自動折り返しに頼らず列が確定する**。
   ★`writing-mode` を外すと横組みに戻り、右端の版面設計が丸ごと壊れる。
   ★★サイズは `--fs-h1`（813px以上で52px固定）ではなく**幅に連動する独自 clamp**。
     --fs-h1 だと1440pxでも1920pxでも列の高さが454pxで一定になり、FVの高さ（幅比）だけが縮む
     ＝1440pxで見出しの下端がFVの56%まで下りて**右下の写真クラスタと重なった**（実測）。
     幅連動にすると見出しの下端が全幅で46〜50%に収まり、クラスタの居場所が確保される。
     ★この1行ぶん font-size の種類が1つ増える（契約15 → 実測は §8 で確認すること）。 */
.site-fv__ttl{
  position:absolute; z-index:3;
  /* ★★top は**左上の写真枠 p1 と同じ値**（ユーザー指示 2026-08-03「左の蛇口の写真と上揃え」）。
     `.site-fv__pic--p1` の top と**必ずセットで動かすこと**。片方だけ変えると上揃えが崩れる。 */
  /* ★★right は 2026-08-04 に `clamp(16px,2.6vw,50px)` → **`--fv-edge`**（＝`--gut`・PCで40px固定）。
     幅ごとに31〜50pxとばらついていたのを、他セクションのガターと揃えた（③の指示）。 */
  top:clamp(150px, 10.9vw, 210px); right:var(--fv-edge);
  margin:0;
  writing-mode:vertical-rl;
  /* ★ユーザー指示 2026-08-03「縦キャッチはもう少し小さくてよい」で 3.6vw/4.3rem → 2.7vw/3.25rem。
     ★小さくした目的は見た目だけではない＝列が短くなり、**下の写真クラスタがファーストビュー
       （高さ900px）に収まる**ようになる。サイズとクラスタの top はセットで決まる。 */
  /* ★★★サイズは「**写真クラスタに重ならない上限**」で決まっている（ユーザー指示 2026-08-03
     「縦書きの見出しはやはり下の写真に重ならないように、大きさを調整してください」）。
     条件: 見出しの上端 clamp(150px,10.9vw,210px) ＋ 6文字ぶんの列長（≒ 6.72 × font-size）
           ≦ p3 の上端 clamp(300px,29vw,590px)。
     これを満たす上限が **2.65vw**（1440pxで38.2px・列長257px → 下端414px ＜ p3の418px）。
     ★**これ以上大きくすると写真に重なり、紺文字が写真の暗部に乗って 1.02:1 まで落ちる**
       （一度3.4vwまで拡大して実測。見出しに白のにじみを敷いて解こうとしたが、
        「重ねない」方針に戻したため にじみごと撤去した）。
     ★p3 の top かこの上限のどちらかを動かすときは、必ずもう一方も計算し直すこと。 */
  font-family:var(--f-mincho); font-size:clamp(1.5rem, 2.65vw, 3.3rem); font-weight:600;
  line-height:1.6; letter-spacing:.12em; color:var(--c-navy);
  /* ★★★縦キャッチだけ**メインカラーで青く光らせる**（ユーザー指示 2026-08-03
     「鮮やかなメインカラー色の光彩をつけて少し印象深く」）。
     色は `--c-aqua` #5BC2E7＝§3-1 で「装飾専用」と決めた値で、光彩はまさに装飾用途。
     ★内側に不透明の白を1段だけ挟んでいるのは、**紺の文字が青い光に食われないようにする**ため。
       これを外すと文字の輪郭が青くにじんで可読性が落ちる（明朝の細い横画で顕著）。
     ★白の光彩（--fv-halo）とは別物。**左のコピーへ青い光を広げないこと**＝
       青が2箇所に増えると「黄緑は3px罫の1箇所だけ」と同じ配色予算の考え方が崩れる。 */
  text-shadow:
    0 0 3px rgba(255,255,255,.95),
    0 0 12px rgba(91,194,231,.85), 0 0 26px rgba(91,194,231,.6),
    0 0 48px rgba(91,194,231,.4);
}
/* ②左のコピー。絶対配置で「見出しの左・亀岩の左端」に置く。
   ★幅は 38vw → **34vw** に絞ってある。38vw だと1440pxでリードの右端が x629 まで伸び、
     亀岩の岩肌（中間調）に本文が乗ってコントラストが割れた（実測）。左のスクリムの
     不透明域とセットで決まる値＝**片方だけ広げないこと**。 */
.site-fv__body{
  position:absolute; z-index:3;
  /* ★左端は `--fv-edge` に統一（第32版・上の p1 の★★★を参照）。個別の clamp に戻さないこと。 */
  left:var(--fv-edge); top:clamp(280px, 24.4vw, 470px);
  /* ★下限 440px は**リードの3行目が折り返さない幅**（1200pxで実測 432px 必要）。
     下限を外すと 1200px帯だけ4行になり「ます。」が孤立する。 */
  width:clamp(440px, 34vw, 600px);
  text-align:left;
}
/* ★★2026-08-03（第26版）: 英数フォント → **游明朝**（ユーザー指示「KIMITSU SUIDO SERVICE CENTER
   の文字は明朝へ変更したい」）。縦組みの見出しと同じ書体で揃い、FVの中で書体が2種に収まる。
   ★weight は **600**（見出しと同じ）。游明朝に W7 は無いので 700 にしないこと＝合成太字で輪郭が濁る。
   ★明朝は字面が細いので字間を .06em → .1em へ広げてラベルとしての可読性を保つ。 */
/* ★★左のコピーは「英字ラベル→リード→ボタン」を**1つの塊**として詰める
   （ユーザー指示 2026-08-03「隙間を狭めてまとまりをもたせてほしい」）。
   間隔は 24px→**16px**（en下）／56px→**24px**（リード下）。ディレクター方針の粗密
   （グループ内は密・グループ間は疎）に沿う＝この塊の外側（見出し・写真）とは大きく空いている。 */
/* ★★★左のコピーは**文字自身が白い光彩を持つ**（2026-08-03・ユーザー判断で面のスクリムから移行）。
   面で白を敷くと主役の絵まで白くなるので、輪郭のまわりだけを白で持ち上げる。
   ★`--fv-halo` を en / リード / ボタン外の要素で共有する。値を変えるときは1箇所で済む。
   ★**text-shadow は CueZilla の AddCssInfo で消えない**（除去されるのは content と filter:url()）。
   ★⚠ 光彩は**見た目の可読性**を上げるが、WCAG のコントラスト比は「文字色 対 背後の地色」で
     測るため**数値には反映されない**。`contrast-pixels` の結果は光彩なしの値として読むこと。 */
/* ★内側4段は**不透明の白**。ここを薄くすると、文字のすぐ外が地の色のまま残り
   「白く光って見えるのに実測は 2:1」という状態になる（実測。柔らかい光彩だけでは数値が上がらない）。
   外側2段は広がりの演出。 */
:root{ --fv-halo:
  0 0 2px #fff, 0 0 4px #fff, 0 0 7px #fff, 0 0 11px #fff, 0 0 15px #fff,
  0 0 24px rgba(255,255,255,.92), 0 0 40px rgba(255,255,255,.72); }
.site-fv__en{
  margin:0 0 var(--s2);
  /* ★weight は 600 → **700**。游明朝の合成太字だが、**線が太いほど文字の芯の画素が増え、
     地の色を拾いにくくなる**（実測で 3.6:1 → 改善）。明朝の細い横画は光彩だけでは救えない。 */
  /* ★★2026-08-05: ここだけ `--fs-h3` を**使わず旧値で固定する**。
     h3 を 19〜22px へ引き上げた（見出しが本文より小さい逆転の修正）が、**FVは別扱い**:
       ①FVは「ボタンをあらゆる幅でファーストビューに収める」ため 375×667px の**画素単位で詰めてある**
         （第36版で求人ラベルを足した際、上パディング・リード下余白・亀岩の重なりから 44px を回収している）。
         この英字が2px伸びるだけで、その回収がそのまま食われる。
       ②実際に h3 を上げた状態で `contrast-pixels` を回すと、FVの構成が下へずれて
         **求人ラベルが写真の別の場所へ乗り、3.54:1 まで落ちた**（AA割れ・実測）。
     ★`font-size-kinds` は **15種のまま**（実測確認済み）。h3 の上限を 22px＝`--fs-tel` と同値にしたことで
       h3 が既存の値へ吸収され、その空き枠にこの旧値(20px)が入る形になったため。契約.md の宣言は変更不要。 */
  font-family:var(--f-mincho); font-size:clamp(1.05rem, 2.6vw, 1.25rem); font-weight:700;
  letter-spacing:.1em; color:var(--c-aqua-ink);
  text-shadow:var(--fv-halo);
}
/* ★★リードは**意味の切れ目で改行を固定**する（ユーザー指示 2026-08-03「自然な位置で改行して」）。
   HTML側で `.xw-line` に3分割してある＝自動折り返し任せだと「30年以上培ってき／た技術と」のように
   語の途中で折れる（1440pxで実測）。**行を増減するときはHTMLの span を直すこと。**
   ★太さは本文の500から **600** へ（ユーザー指示「太さをあげて読みやすさを向上したい」）。
     游ゴシックに W6 は無いので合成になるが、リードは1〜3行の短文なので破綻しない
     （明朝見出しで W7 を避けているのとは別の判断。**見出しには広げないこと**）。 */
.site-fv__lead{ margin:0 0 var(--s3); font-size:var(--fs-lead); font-weight:600; color:var(--c-ink);
                text-shadow:var(--fv-halo); }
/* ★★★2026-08-04（第36版）: 求人であることを示す小ラベル（ボタンの直上）。
   ★**サイズは既存トークン `--fs-label`**（ヘッダーのラベル等と同じ）＝ font-size の種類を増やさない。
   ★色は水色ink。白地5.6:1・写真の上でも `--fv-halo` が効く。**装飾用の `--c-aqua` は使わないこと**（白地2.0:1）。
   ★塗りの箱（バッジ）にしないこと＝§3-1「濃い面は2箇所だけ（CTA・未経験育成）」に触る。
     角丸0・影1種の契約もあるので、**面ではなく文字の強さだけ**で見せる。
   ★下の余白は `--s2`。ボタンとの間を詰めて「ラベル＋ボタン」を1つの塊に見せる（粗密の密側）。 */
.site-fv__badge{
  margin:0 0 var(--s2);
  font-family:var(--f-gothic); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.12em; color:var(--c-aqua-ink);
  text-shadow:var(--fv-halo);
}
.site-fv__act{ margin:0; }
/* ★★★2026-08-25（第37版）: FVの対応範囲の注記（`.site-fv__note`）。
   ヘッダー（全ページ共用）でなくFVに置く判断の経緯は index.html の当該箇所のコメント。
   ★**ボタンの下だけ**に置く。上に入れると 375×667px の画素予算（第30/36版）を食う。
   ★面は塗らない・角丸なし・1pxの上罫のみ＝フッターの細字帯（L1645）と同じ注記の語彙。
   ★文字サイズは `--fs-body`（トークン定義「注記すべてこの値以上」）。`--fs-fine` は許認可番号・
     コパイライト専用なので使わない。**番号も `--fs-tel`(22px) ではなく本文サイズ＋太字**
     ＝FVの主役は見出しとボタンなので、ここを大きくしない（font-sizeの種類は増やしていない）。
   ★幅は 30em で止める＝リードより短い行長にして、従（注記）であることを形で示す。
   ★FVは写真の上に文字が乗る場合があるので `--fv-halo` を忘れない。色は `--c-sub`（白地6.1:1）。 */
.site-fv__note{
  max-width:30em; margin:var(--s3) 0 0; padding-top:var(--s2);
  border-top:1px solid var(--c-line);
}
.site-fv__note-tel{
  margin:0 0 var(--s1);
  font-family:var(--f-gothic); font-size:var(--fs-body); font-weight:700;
  color:var(--c-ink); text-shadow:var(--fv-halo);
}
.site-fv__note-l{ font-weight:700; color:var(--c-ink); }
.site-fv__note-tel a{ color:var(--c-aqua-ink); letter-spacing:.04em; }
.site-fv__note-tel small{ font-size:var(--fs-body); font-weight:700; color:var(--c-ink); }
.site-fv__note-list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:2px;
  font-size:var(--fs-body); line-height:1.6; font-weight:700; color:var(--c-aqua-ink);
  padding-left:var(--s2); border-left:2px solid var(--c-aqua-ink);
  text-shadow:var(--fv-halo);
}
/* ★★★2026-08-25: ※2行を**水色ink（#006AB6）**へ（ディレクター指示「ここだけ別の色で目立たせたい」）。
   ★警告色（赤・オレンジ）は**作らない**＝case-vars.css の7値に無い色を増やすと配色契約が崩れる。
     水色ink は既にFVの求人ラベル・電話番号・ボタンで使っている強調色で、白地5.6:1。
   ★左に2pxの水色inkの罫で塔を立てて。2行を一つの塩に見せるためで、**面は塗らない**（§3-1）。 */
.site-fv__note-list li{ padding-left:1.1em; text-indent:-1.1em; }
/* ★スマホ（≤599px）では番号の前で必ず改行＝CTAの電話行（`.site-cta__tel-l`）と同じ手当て。 */
@media (max-width:599px){
  .site-fv__note-l{ display:block; }
}
/* ★FVのボタンは**既定サイズのまま**（ユーザー指示 2026-08-03「元の大きさが良い。プレビューに
   合わせて大きくする必要はなかった」）。第26版初版で入れた `.site-btn--fv` の拡大は撤去済み。
   **デザイン画像のボタンが大きく見えるのは画像の縮尺の都合なので、追随しないこと。** */

/* ---- 狭幅（≤1199px）------------------------------------------------------------
   ★★★2026-08-04（第28版）: **縦書きの見出しを全幅で維持する**（ユーザー指示
     「h1見出しはどのデバイス幅でも縦書き表示に統一したい。h1は画面の右端、
       その他のテキストは画面の左揃えでバランスを取りたい」）。
   第27版までは ≤1199px で `writing-mode:horizontal-tb` ＋ 中央揃えに戻していた＝
   **狭幅だけ別サイトの顔**になっていた（PCの「右に縦組み／左にコピー」という骨格が消える）。
   組み直しの骨子:
     ・`.site-fv` 自体を**グリッド**にする（stage＝全幅の行／その下に コピー｜見出し の2列）
     ・768〜1199px … 左＝コピー（左揃え）／右＝縦組み見出し。**PCと同じ左右関係を保つ**
     ・≤767px      … 2列にすると本文の行長が足りないので（下記）、
                      **見出しは右寄せのまま独立した行**へ落とし、コピーはその下で左揃え
   ★DOM順は stage → h1 → body のまま＝**写真→文字**（ユーザー指示 2026-07-31）を満たす。
     見た目の左右はグリッドの明示配置で作っているので、読み上げ順は h1 が先＝見出しとして正しい。
   ★ステージを `position:static` に戻すと、中の亀岩がフローに入り積み上げになる。
     スクリム・溶かしは狭幅では非表示、水はグリッドで亀岩に重ねる（下記）。 */
@media (max-width:1199px){
  /* ★上パディング＝ヘッダーの高さ弱。ヘッダーは fixed なので、これが無いと狭幅では
     小さい亀岩の上半分が帯の裏に隠れる（375pxで109pxぶん＝画の45%が消える）。
     ★わざと帯の高さより少しだけ小さくして、上端の抜け（画がヘッダーの裏へ続く感じ）は残す。
     ★下パディングは水の居場所。水の高さは 幅/2.256 なので vw で持たせる。 */
  /* ★列は「1fr（コピー）｜auto（縦組み見出し）」。見出し側を auto にしてあるので、
     列幅は**縦組みの実際の列数×行間**で決まり、font-size を変えても破綻しない。
     ★`.site-fv` に padding-inline を掛けないこと＝亀岩と水は全幅で出す必要がある。
       端の余白は写真の受け皿と、コピー・見出しの余白が持つ。
     ★★★2026-08-04（第29版）: 行の並びを**ユーザー指定の順**に固定した
       （「上から 亀岩／縦書き見出し／文章／小写真／水」）。
         行1＝亀岩 ／ 行2＝見出し（＋≥768px はコピーも同じ行の左） ／ 行3＝コピー（≤767px）
         行4＝小写真4枚 ／ 行5＝水
       第28版までは「亀岩と水を同じセルに重ねて→写真→文字」だったので、**水と写真の位置が入れ替わった**。 */
  /* ★上パディングは 100→**88px**（第30版）。ヘッダー帯の高さ（375pxで85px）ぎりぎりまで詰めた
     ＝「募集要項ボタンをファーストビューに収める」ための削り代のひとつ。**これ以上は帯の裏に潜る。** */
  .site-fv{ min-height:0; padding-top:clamp(88px, 8vw, 130px); padding-bottom:0;
            display:grid; grid-template-columns:1fr auto; align-items:start; }

  /* ★★★ステージを**グリッド**にして PC の絵を狭幅へ翻訳する（2026-08-04）。
     旧実装は `.site-fv__pic{display:none}` で**周囲の写真枠を丸ごと捨てていた**ため、
     狭幅だけ「亀岩1枚＋文字」の別サイトの顔になっていた（1024pxで実測）。
     PCの構成要素（亀岩／水が亀岩に重なる／写真4枚／見出し／コピー）を**1つも落とさず**、
     重ね置き → 積み上げに置き換える:
       行1 = 亀岩（同じセルに水を下端揃えで重ね、負のマージンで少しはみ出させる＝PCのコラージュ）
       行2 = 写真4枚（PCの「ちりばめ」を横1列に翻訳。600px未満は 2×2）
       その後 = 見出し → コピー（DOM順のまま＝**写真→文字**の指示どおり）
     ★左右の `--gut` 列を持たせているのは、**亀岩と水だけを全幅に、写真だけ内側に**するため。
       stage 自体に padding を掛けると水まで内側に入ってしまう。 */
  /* ★★★stage は狭幅では**箱をやめる**（`display:contents`）。
     こうすると中の 亀岩／写真の受け皿／水 が `.site-fv` のグリッドに直接並び、
     その外にある 見出し・コピー と**1つのグリッドで順番を組める**（＝⑤の指定順が作れる）。
     ★PC（≥1200px）では stage は `position:absolute` の箱に戻る＝中の絶対配置の基準になるので、
       `display:contents` をこのメディアクエリの外へ出さないこと。 */
  .site-fv__stage{
    display:contents;
    position:static; isolation:auto; pointer-events:auto;
  }
  /* ★亀岩の幅も `--fv-edge` 基準へ（旧 `96vw`＝375pxで左右8pxしか空いていなかった）。
     ★★★第30版で **`74vh` の上限**を足した（ユーザー指示「あらゆるデバイス幅で募集要項ボタンを
       ファーストビューに収める」）。
       狭幅では 行1＝亀岩／行2＝見出し＋コピー なので、**ボタンの位置は「亀岩の高さ＋コピーの高さ」で決まる**。
       見出しの重なりをいくら深くしてもボタンは動かない（行の高さを決めているのはコピー側）＝
       実測で確認済み（重なり200→280pxにしてもボタン下端は 804px のまま動かなかった）。
       残る削り代は亀岩の高さだけなので、**ウィンドウの高さに連動**させる。
       ・1024×768（iPad横）… 74vh=568px → 亀岩 h379（-127px）→ ボタン下端が折り返しの内側に入る
       ・768×1024（iPad縦）… 74vh=758px → 幅の制約(691px)が先に効くので**見え方は変わらない**
       ・375×667（iPhone SE）… 74vh=494px → 同上（335px が先）
       ＝**背の高い端末では従来どおり大きく、背の低い窓でだけ縮む。**
     ★ここは `.site-fv` の min-height ではない（そちらを vh にすると絵が入りきらない・§3-4の★）。
       亀岩は幅から高さが決まる画像なので、**幅の上限として vh を使う**のが崩れない書き方。
     ★測定するときは**実機と同じウィンドウ高さ**にすること。撮影スクリプトの既定（1400/1600px）だと
       vh の上限に掛からず、改修前と同じ数字が出る。 */
  .site-fv__hero{ grid-column:1 / -1; grid-row:1; justify-self:center;
                  position:relative; top:auto; left:auto; transform:none;
                  width:min(calc(100% - var(--fv-edge) * 2), 760px, 74vh); margin:0; }
  /* ★小写真の行。受け皿を grid にして4枚を横1列（≤599pxは2×2）に並べる。
     端の余白は受け皿の padding-inline が持つ＝亀岩・水と同じ `--fv-edge` で揃う。 */
  .site-fv__pics{
    display:grid; grid-column:1 / -1; grid-row:4;
    grid-template-columns:repeat(4,1fr); gap:var(--fvc-gap, 12px);
    padding-inline:var(--fv-edge); margin-top:var(--s4);
  }
  /* ★水（.site-fv__band）の狭幅指定は**このブロックには書けない**。
     基底の `.site-fv__band{position:absolute}` がソース上これより**後ろ**にあり、
     詳細度が同じなので後勝ちで打ち消される（実際に踏んだ：水がFVの最下部へ落ちた）。
     → 基底ルールの**直後**に専用のメディアクエリを置いてある（「FV下端の水」の節）。 */
  .site-fv__pic{ display:block; position:static; width:auto; top:auto; right:auto; left:auto;
                 grid-row:1; aspect-ratio:4/3; }
  .site-fv__pic--p1{ grid-column:1; }
  .site-fv__pic--p2{ grid-column:2; }
  .site-fv__pic--p3{ grid-column:3; }
  .site-fv__pic--p4{ grid-column:4; }
  /* ★スクリムと下端の溶かしは狭幅では**不要**。文字は写真の下の白地に来るので地色の問題が無く、
     ステージが static になった時点で inset:0 も効かない（残すと意味のない層が1枚増えるだけ）。 */
  .site-fv__veil,
  .site-fv__fade{ display:none; }

  /* ★★見出し＝**縦組みのまま**（`writing-mode` を上書きしない）。右列に置き、
     `justify-self:end` で画面の右端側へ寄せる。端からの距離は padding-inline が持つ。
     ★★font-size は**既存トークン `--fs-h1` をそのまま使う**（第27版の横組み時と同じ値）。
       PC用の `clamp(1.5rem,2.65vw,3.3rem)` を狭幅へ持ち込むと 768px で **24px**まで落ち、
       横組み時の 49px から見出しの格が半分になる（実測）。あの clamp は
       「右下の写真クラスタに重ならない上限」という**PC固有の制約**から決まった値で、
       写真が別の行にある狭幅では制約自体が無い。
       ★新しい clamp を書き足さないこと＝font-size の種類が増え、契約 `font-size-kinds:15` を圧迫する。
     ★`.xw-line` は block のまま＝縦組みでは **1 span ＝ 1列**。3列が右→左に流れる（PCと同じ組み）。 */
  /* ★★★端の余白は**物理プロパティ**で書くこと（2026-08-04・実測して直した）。
     `writing-mode:vertical-rl` の要素では論理プロパティの軸が入れ替わる:
       `padding-inline` → 視覚的には**上下**（inline軸が縦に走るため）
       `margin-block`   → 視覚的には**左右**（block軸が横に走るため）
     最初 `padding-inline:var(--fv-edge)` と書いたところ、右端の余白は 0px のまま
     見出しの上下に 40px が入った（600〜1199pxで実測 R0）。**縦組みでは論理プロパティを使わない。**
     ↓ physical: top / right / bottom / left */
  /* ★★見出しは**亀岩に重なる位置から始める**（ユーザー指示 2026-08-04「もっと重なる形でよい」）。
     重ねてよいのは、亀岩の下端が `mask-image` で 70%地点から白へ抜けているため
     **重なる帯がほぼ白**だから（＝紺の文字が写真の暗部に乗らない）。
     ★★重なり量は第30版で **32〜72px → 110〜200px** へ拡大した。これは意匠の指示であると同時に
       **「募集要項ボタンをファーストビューに収める」ための最大の削り代**でもある
       （1024pxで149px、375pxで81px ぶん下の要素が全部せり上がる）。
     ★重なりを増やすときは実描画コントラストを必ず測り直すこと。深く重ねると洞窟の暗部に届く。
       第30版の値は 22幅で測って AA割れ0 を確認済み。 */
  .site-fv__ttl{ grid-column:2; grid-row:2; justify-self:end;
                 position:relative; z-index:3; top:auto; right:auto;
                 font-size:var(--fs-h1);
                 margin:calc(-1 * clamp(110px, 30vw, 200px)) var(--fv-edge) var(--s4) 0; padding:0; }
  /* ★コピーは左列・**左揃え**（第27版までは中央揃えだった）。
     ★★横並びのときは**下揃え**（ユーザー指示 2026-08-04「文章は下揃えに」）。
       見出しの `margin-bottom` とコピーの `padding-bottom` を同じ `--s5` にしてあるので、
       両方の“文字の下端”が同じ線で揃う。**片方だけ変えないこと。** */
  .site-fv__body{ grid-column:1; grid-row:2; align-self:end;
                  position:relative; left:auto; top:auto; width:auto;
                  padding-inline:var(--fv-edge); padding-bottom:var(--s4);
                  padding-top:0; text-align:left; }
  /* ★34em は「読みやすい行長」の上限。中央寄せ（margin-inline:auto）はやめ、左端で揃える。 */
  .site-fv__lead{ margin-inline:0; max-width:34em; }
  /* ★★狭幅では**固定改行を解除**する（`.xw-line` の display:block → inline）。
     PC用に意味の切れ目で3分割した span を狭幅にそのまま持ち込むと、
     1行が入りきらずに **span の内部で折れて**「30年以上培ってき／た技術と」のように
     語の途中で切れる（375pxで実測）。inline に戻せば1つの文として自然に折り返す。
     ★見出し（`.site-fv__ttl`）の `.xw-line` は**そのまま block で残す**＝3行の組みが崩れる。 */
  .site-fv__lead .xw-line{ display:inline; }
  /* ★英字ラベルは字間を詰める。.1em のままだと375pxで2行に折れる（明朝は字面が広い）。
     ★下の余白も 16→8px（第30版・ボタンをファーストビューへ収めるための削り代）。 */
  .site-fv__en{ letter-spacing:.04em; margin-bottom:var(--s1); }
}
/* ★★★≤767px は**縦組み見出しとコピーを横に並べない**（2026-08-04）。
   並べると本文の行長が足りない。実測（600px・游ゴシック17px）:
     ・コピー列 326px ＝ 1行19文字 → リードが4行になり、
       **2行目が「…受け継ぎ、」で終わって行末に2文字だけ残る**（`responsive-audit` の [orphan] で検出）
     ・375pxまで下ると1行11文字＝日本語の本文として成立しない
   768px（コピー列417px＝1行24文字）から上は掃引でNG0だったので、そこを分岐点にした。
   ★見出しは縦組み・右寄せのまま**独立した行**へ落とし、コピーはその下で左揃え＝
     「h1は右端／その他は左揃え」という指示の骨格は保ったまま行長を確保する。
   ★分岐点を下げたくなったら、先に `responsive-audit` の [orphan] を通すこと（目視では気づけない）。 */
@media (max-width:767px){
  .site-fv{ grid-template-columns:1fr; }
  /* ★physical（上・右・下・左）。縦組みなので `margin-block` は使わない（＝左右になる）。
     ★上マージンは負＝亀岩に少し重ねる（≥768px と同じ考え方）。 */
  .site-fv__ttl{ grid-column:1; grid-row:2; justify-self:end;
                 margin:calc(-1 * clamp(110px, 30vw, 200px)) var(--fv-edge) var(--s2) 0; }
  /* ★縦積みのときは下揃えの意味が無いので通常の流れに戻す。 */
  .site-fv__body{ grid-column:1; grid-row:3; align-self:start; padding-bottom:0; }
}
/* ★★★スマホ（≤599px）は**下の小写真4枚を出さない**（ユーザー指示 2026-08-04）。
   縦1列で4枚を積む／2×2に折る のどちらにしても FV が 250〜400px 伸び、
   「募集要項ボタンをファーストビューに収める」と両立しない。
   ★4枚は暮らしの情景の補足で、同じ写真は下のセクション（会社の思い・音で見つけ）にも出る＝
     スマホで落としても伝える内容は欠けない。
   ★復活させるときは 2×2 に折ること（横1列だと375pxで1枚78px）。指定は
     `.site-fv__pics{grid-template-columns:repeat(2,1fr)}` ＋ p1〜p4 を 1/2行に割り当てるだけ。 */
@media (max-width:599px){
  .site-fv__pics{ display:none; }

  /* ★★★2026-08-04（第36版）: 求人ラベル（`.site-fv__badge`）を足したぶん **39px** を
     スマホでだけ**同額回収する**（ユーザー要件「ボタンはあらゆる幅でファーストビューに収める」＝第30版）。
     ラベル追加後の実測は 375×667 で **703px（折り返し +36px 超過）**だった。回収の内訳:
       ・上パディング 88 → 80px          （−8）
       ・リード下の余白 `--s3` → `--s2`  （−8）
       ・亀岩と見出しの重なりの下限 110 → 140px（−28。375pxでは 30vw=112 なので下限が効く）
     合計 −44px → **659px**（折り返し667pxの内側）。
     ★重なりを深くした結果、見出しの上端が亀岩の**マスクが効く前の帯**へ入る。
       実描画コントラストを22幅で測り直して AA割れ0 を確認済み（これを確認せずに深めないこと）。
     ★ラベルの文言を長くする／2行にすると、この回収分を食い潰してまた折り返しの外へ出る。 */
  .site-fv{ padding-top:80px; }
  .site-fv__lead{ margin-bottom:var(--s2); }
  .site-fv__ttl{ margin-top:calc(-1 * clamp(140px, 30vw, 200px)); }
}

/* FV下端の水（現行HPに実在する意匠）。ベクターでは品質が出ないため画像で入れる。
   ★★2026-08-03にユーザー指示で2点変更（「乗算でかぶせましょう」「天地左右ともに途中で
     トリミングされることの無いように」）:
     ①**画像側で白をアルファ抜き**してある（＝乗算と同じ見え方を blend mode なしで得る）
     ②**画像を一切切らない。** 要素の `aspect-ratio` を画像の実比（2400/1262）に合わせ、
       `background-size:100% 100%` で全面を出す。**`cover` に戻すと天地が切れる**
       （旧実装は height 固定＋cover で、水の上下が途中で切れていた）
   ★したがって height は指定しない（幅から aspect-ratio で決まる）。1920pxでは 851px になる＝
     **フル幅で水を切らずに出すと必然的にこの高さになる**（画像の水のbboxが 2400x1064＝比2.256のため）。
     FVの min-height はこれが収まるよう 92vh を確保してある。 */
.site-fv__band{
  position:absolute; z-index:2; left:0; right:0;
  /* ★★2026-08-03（第26版）: デザイン画像に合わせて**水を下半分を占める大きさ**にした。
     下げ幅を -17vw → **-6vw** に浅くしただけで、画像そのものは全幅・無トリミングのまま。
     画像の高さは 100vw/2.256＝約0.443×幅なので、下げ幅も vw で持たせて全幅で同じ位置に来る。
     ★これで水の面積が大きく増える＝**FVの主役検定で水が1位になりやすい**。
       触ったら必ず `verify/fv-protagonist.mjs` を回して、亀岩との関係を人が見て判断すること。 */
  bottom:-2vw;
  aspect-ratio:2400/1064;   /* ＝画像の水のbboxの比。切らずに全面を出すための値 */
  /* ★★2026-08-03: `mix-blend-mode:multiply` はやめ、**画像側の白をアルファで抜いた**。
     見え方は乗算と同じ（白地・亀岩のどちらに重ねても水だけが残る）が、blend mode を使わないので
     ①フルページ描画で合成がコピー・ボタンへ漏れない ②実描画コントラスト測定の誤検知が出ない
     （multiply のときは 700/1279/1399/1400/1439px でFVボタンが「白地に白文字」と誤判定された。
      実画素ではボタンは #006AB6 ベタ＝5.6:1 で問題なし、という乖離が出ていた）。 */
  opacity:.9;
  /* ★★第26版の既知の逸脱: **FV主役検定が 1279/1280/1440px で「水が1位」を出す。**
     検定のスコアは**面積の重みが大きい**ので、デザイン画像どおり水を下半分に敷くと
     水の可視面積（1440pxで763,200px²）が亀岩（676,368px²）を上回るため。
     ・濃さを .95→.9→.84 と下げても順位は変わらなかった（面積が効いているため・実測）
     ・水素材のアルファ有効域は上下とも余白0%＝**要素を縮めて面積だけ減らす余地は無い**（実測）
     ・順位を戻すには亀岩を 1279px で **81vw 相当**まで拡大する必要があり、
       デザイン画像の「幅68%で中央に据える」構図から外れる
     → **意匠を優先して現状のままにしてある。** 検定は §8 のとおりゲートではなく診断なので、
        スコア表を人が読む前提。**この行を消す前に、なぜ NG が出るかを必ず読み直すこと。** */
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(91,194,231,.42),rgba(0,106,182,.62));
}
.site-fv__band > span{
  font-family:var(--f-gothic); font-size:var(--fs-fine); font-weight:700;
  letter-spacing:.06em; color:#08344B; text-align:center; padding-inline:var(--s2);
}
/* ★★狭幅の水（2026-08-04）。**この位置に置くのが必須**＝上の `.site-fv__band` 基底ルールより
   後ろでないと、同じ詳細度で後勝ちされて `position:absolute` に戻り、
   水がFVの最下部（写真・見出し・コピーより下）へ落ちる（実際に踏んだ）。
   ★狭幅では亀岩と**同じグリッドセル**に下端揃えで重ね、負のマージンで少しはみ出させる
   ＝PCの「亀岩の溶けた下端に水が乗る」コラージュを、積み上げレイアウトでも保つ。 */
/* ★★★2026-08-04（第29版）: 狭幅の水は**FVの最終行（小写真の下）**へ移した
   （ユーザー指示「上から 亀岩／縦書き見出し／文章／小写真／水 の順」）。
   第28版までは亀岩と同じセルに `margin-bottom:-22vw` で重ねてコラージュを作っていたが、
   指定順では水が写真より後ろに来るため**重ね置きは成立しない**。
   ★上に少しだけ食い込ませてある（-4vw）＝写真の行と水の間に白い帯ができると、
     水が「切り忘れの帯」に見える（第19版のフッターと同じ型の崩れ）。
   ★重ね直したくなったら §1「★第29版」の順序指定に戻ることになるので、先にユーザー確認。 */
@media (max-width:1199px){
  .site-fv__band{ grid-column:1 / -1; grid-row:5;
                  position:static; bottom:auto; margin-top:-4vw; margin-bottom:0; }
}
/* ★★写真の行と水の間隔（600〜1199px・第30版。ユーザー指示「1024px付近は写真の行と水の間隔を狭める」）。
   水の素材は**上端から2〜3割が透明**なので、要素の箱を写真の直下に置いても
   「水のリボン」が始まるのはさらに下＝1024pxで**約80pxの白い抜け**に見えていた（実測）。
   → 食い込み量を **-4vw → clamp(40px, 11vw, 150px)** へ（1024pxで-113px＝72px詰まる）。
   ★≤599px には当てない。スマホは小写真が非表示で、水の直前がコピー＝
     深く食い込ませるとボタンに水が掛かる。 */
@media (min-width:600px) and (max-width:1199px){
  .site-fv__band{ margin-top:calc(-1 * clamp(40px, 11vw, 150px)); }
}

/* ========================================== 型2：NEWS（中央寄せの薄い帯） */
.site-news{ border-bottom:1px solid var(--c-line); }
.site-news__inner{ display:grid; gap:var(--s3); }
/* ★2026-08-03：ラベルを簡素化（ユーザー指示「NEWSお知らせ の部分が重たい」）。
   旧＝英字ラベル `NEWS`（12px）＋ 明朝の見出し（20px）の2行＋2pxの縦罫。
   新＝**ゴシック本文サイズの1行だけ**。細い帯の端にあるラベルなので、主張させず
   「日付＋タイトル」に主役を渡す。★見出し要素（h2）は残す＝aria-labelledby の参照先。
   ★`--fs-h3`（20px）は .site-merit__ttl で使い続けているので font-size-kinds は減らない。 */
.site-news__ttl{
  margin:0; font-family:var(--f-gothic); font-size:var(--fs-body); font-weight:700;
  line-height:1.6; letter-spacing:.14em; color:var(--c-sub); white-space:nowrap;
}
/* ★★2026-08-03：表示を1件に変えた（ユーザー指示）。**罫線を外してある。**
   3件並べていた頃は上下の罫が「一覧」を作っていたが、1件だと罫2本に挟まれた
   1行＝取り残された行に見える。1件のときは罫ではなく
   「ラベル｜本文｜すべて見る」の横並び（≥900px）でまとまりを作る。 */
.site-news__list{ list-style:none; margin:0; padding:0; }
.site-news__list a{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3);
  min-height:56px; padding:var(--s2) 0;
  color:var(--c-ink); text-decoration:none;
}
/* ★★★2026-08-04（第29版）: **縦配置（≤767px）のときだけ帯を締める**（ユーザー指摘
   「縦配置になったタイミングで上下の余白が広すぎる」）。
   横1列（≥768px）は「ラベル｜本文｜すべて見る」が1行に収まるので高さ139px だが、
   縦に割れると 27＋24＋139＋24＋44＝**260px** まで伸びる。内訳の大半は
   ①行間の gap 24px×2 ②リンクの上下 padding 16px×2 で、**どちらも横1列を前提にした値**。
   → 縦のときは gap を16pxへ、リンクの padding を8pxへ。タップ領域は `min-height:44px` で確保する
     （padding を削っても本文2行で必ず44pxを超えるが、1行の記事タイトルでも下回らないように残す）。
   ★`min-height` を 0 にしないこと＝a11y のタップ44px を割る。 */
@media (max-width:767px){
  .site-news__inner{ gap:var(--s2); }
  .site-news__list a{ min-height:44px; padding:var(--s1) 0; }
}
.site-news__list a:hover{ color:var(--c-aqua-ink); }
.site-news__list time{
  font-family:var(--f-en); font-size:var(--fs-body); font-weight:700;
  letter-spacing:.06em; color:var(--c-aqua-ink); flex:0 0 auto;
}
.site-news__more{ margin:0; }

/* ================== 型3・型5：テキスト＋写真2枚組の片側ブリード（参考①aboutの型）
   ①実測（1440px）: 写真群 __pictures w713 が L713（右）／L0（左）と交互にブリードし、
   大463x323 の右下に 小235x300(縦) が重なって画面端（R15 / L0）に接する。
   青い面 blue-block は w1346 L79 R15 ＝片側だけ余白を残して端まで届く。 */
/* overflow:hidden は必須。巨大英字と片側ブリードの面がセクション外へ出て
   横スクロールを生むため、セクション境界で切る（①も端で切っている） */
.site-duo{ position:relative; overflow:hidden; }
.site-duo__txt{ position:relative; z-index:2; padding-inline:var(--gut); }

.site-duo__pics{
  position:relative; z-index:1;
  margin-top:var(--s5);
  padding-inline:var(--gut);
}
/* 淡水色の面。★2026-08-03（第16版）にユーザー指示で水の画像を敷いた
   （「背景の薄い水色部分に画像（水）を反映させて」＝会社の思い／音で見つけ の2セクション）。
   ★ベタ塗りの淡水色は残す。写真の上に --c-bg-tint2 の膜を重ねて
     「薄い水色の面に水のテクスチャが透けている」状態にしてある。
   ★★**本文が乗る側は膜を不透明（1）にして水を消す。** この面は ≥900px で本文側へ 22% せり出すため、
     一様な半透明にすると文字が水の濃い部分に乗ってAAを割る。実測: 一様 .80 で
     `.site-link__t`「業務案内」が **4.0:1（要4.5:1）**＝1199/1439/1440/1920px の4件でNG。
     地の淡水色 #E6F3FA 自体が水色ink #006AB6 に対し **4.97:1 しか無く余裕が0.5しかない**ので、
     膜の不透明度を上げて逃げることはできない（.88でも4.37:1＝まだ割れる。計算・実測とも）。
     → **横方向のグラデにして、本文が乗る側だけ不透明**にした。**一様な半透明に戻さないこと。**
   ★2セクションで同じ素材を使うが、--rev 側は background-position を変えて同じ絵に見せない。
   ★通常＝写真が右／本文が左、--rev＝写真が左／本文が右。**不透明の側は本文側**なので向きが逆になる。 */
.site-duo__plate{
  position:absolute; z-index:0;
  /* ★bottom は 8% ではなく 14%。8% だと 1199px で面の下端が「業務案内」リンクの行を
     途中で横切り、アクアの下線が「面の上」と「白地の上」にまたがって、グリフ端のブレンドが
     4.18:1（要4.5:1）になった（実測・contrast-pixels）。面をリンクの行に掛けない位置まで
     上げて解消した。**8%に戻さないこと。** */
  top:8%; bottom:14%; left:var(--gut); right:0;
  background:
    linear-gradient(to left,
      rgba(230,243,250,.55) 0%, rgba(230,243,250,.55) 40%,
      rgba(230,243,250,1) 66%, rgba(230,243,250,1) 100%),
    var(--c-bg-tint2) url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/duo-plate.webp) 30% center/cover no-repeat;
}
/* ★★狭幅（縦積み）では**面を出さない**（2026-08-04・レスポンシブ掃引の目視で判明）。
   この面は「本文側へ 22% せり出して写真と本文を橋渡しする」PC専用の意匠で、
   縦積みになると本文の横に居場所が無く、**写真2枚の隙間に取り残された色の矩形**になる
   （768pxで実測。左下と右上に切り忘れのような面が出ていた）。
   ★水の絵はここでしか使っていないが、狭幅ではFVの水が大きく出るので表現は失われない。
   ★≥1200px は一切変えていない（PCの意匠はそのまま）。 */
@media (max-width:1199px){
  .site-duo__plate{ display:none; }
}
.site-duo--rev .site-duo__plate{
  background-image:
    linear-gradient(to right,
      rgba(230,243,250,.55) 0%, rgba(230,243,250,.55) 40%,
      rgba(230,243,250,1) 66%, rgba(230,243,250,1) 100%),
    url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/duo-plate.webp);
  background-position:center, 75% center;
}
.site-ph{
  position:relative; z-index:1;
  /* 用途ラベルは上端に置く。下端にすると重ねた小写真がラベルを隠す */
  display:flex; align-items:flex-start; justify-content:center;
  background:linear-gradient(150deg,#BFDEEC,#8FC2DA);
  overflow:hidden;
}
.site-ph > span{
  font-family:var(--f-gothic); font-size:var(--fs-fine); font-weight:700;
  letter-spacing:.06em; color:#0F3A50; text-align:center; padding:var(--s2);
}
.site-ph--lg{ width:88%; aspect-ratio:463/323; }
.site-ph--sm{
  width:44%; aspect-ratio:235/300;
  margin:-14% 0 0 auto;                 /* 大の右下に重ねる */
  background:linear-gradient(150deg,#A9D2E4,#6FAECD);
}

/* ================ 型6：完全2分割・余白ゼロ（参考①top-recruitの型）
   ①実測: 青面 w594 L0（左端）＋ 写真 w831 R15（右端）＝両方が画面端に到達し、
   セクション内に左右の余白が存在しない。 */
.site-split2{ position:relative; }
.site-split2__panel{ background:var(--c-aqua-ink); color:#fff; }
/* ★★上だけ「Row Padding ＋ 巨大英字の突き出し」を確保する（2026-08-03・ユーザー指摘
   「FIRST STEPのうえですが余白が狭いです」）。
   このセクションは --flush の Row にあり Row Padding が無いので、内側の padding が
   Row の役割を肩代わりしている（§3-7）。ところが上側は巨大英字 FIRST STEP が
   `--fs-bigen + --bigen-gap`（1440pxで128px）ぶん突き出すため、padding:var(--row-pad) だけだと
   **英字の上端が青い面の上端にぴったり張り付く**（実測 0px）。
   → 上だけ row-pad に突き出し量を足す。**この足し算を消すと英字が天井に貼り付く。**
   ★他セクションは `.site-row:not(--flush) > *:has(.xw-bigen)` が同じ役割を担っている
     （--flush は二重に空くので除外してある）。ここはその --flush 側の手当て。 */
.site-split2__inner{
  position:relative;
  padding:calc(var(--row-pad) + var(--fs-bigen) + var(--bigen-gap)) var(--gut) var(--row-pad);
}
/* ★★★2026-08-04（第31版）: 900〜1199px では巨大英字「FIRST STEP」を**パネル幅に収める**
   （ユーザー指摘「FIRST STEPの英字が写真の下に潜らないようにしたい」）。
   `.xw-bigen` は絶対配置で幅を持たないため、パネル（＝画面の半分）より長いと
   **そのまま右の写真列の下へ滑り込む**。実測の潜り込み量は 900px=82px ／ 1024px=44px ／ 1080px=16px。
   1200px以上は -43px（＝収まっている）ので、この帯だけの手当て。
   ★英字の幅は font-size にほぼ比例する（104pxで521px＝1文字あたり約5.0px）。
     パネル内に使える幅は「パネル幅 − 左オフセット36px − 右余白」なので、9.1vw が全帯で収まる上限。
   ★セクションの上パディングは `--fs-bigen` から計算しているが、そこは**縮めない**
     （縮めた英字の上に少し余分な空きが出るだけで、天井への貼り付きは起きない）。
   ★1200px以上へこの指定を広げないこと＝PCの英字が理由もなく小さくなる。 */
@media (min-width:900px) and (max-width:1199px){
  .site-grow .xw-bigen{ font-size:min(var(--fs-bigen), 9.1vw); }
}
.site-split2__fig{
  position:relative;
  min-height:clamp(260px,60vw,520px);
  display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(150deg,#9AC8DE,#5E9FC0);
}
.site-split2__fig > span{
  font-family:var(--f-gothic); font-size:var(--fs-fine); font-weight:700;
  letter-spacing:.06em; color:#0F3A50; text-align:center; padding:var(--s3);
}

/* ================================= 型7：中間バンド（**白地の言い切り一文**）
   ★★2026-08-03に「白背景にしましょう」（ユーザー指示）で全面的に組み替えた。
   旧＝全幅写真（band-water）＋濃いブランド色スクリム＋白文字のフルブリード帯。
   新＝**白地・中央組み・文字だけ**。したがって:
     ・`.site-band__bg`（写真）と `.site-band__scrim`（スクリム）は**HTMLごと削除**した。
       戻す場合は §3-1 の「濃い面は3箇所だけ」を先に更新すること
     ・Row は `--flush` をやめ、**独立した白の Row**にした（§3-7 の判定＝背景色が変わったら新しい Row）。
       縦余白は Row が持つので `.site-band__txt` の padding-block も外してある
     ・文字色を白 → 紺／本文色へ、3px罫を「白→aqua-lite」→「aqua→green」（明地用）へ差し替え
   ★`band-water`（AdobeStock_283636423）はこの変更で**未使用に戻った**。 */
.site-band{ position:relative; background:#fff; }
.site-band__inner{ position:relative; }
/* ★2026-08-03に主従構造へ組み替えた（ユーザー指示「印象的にしつつも調和が取れていない」）。
   旧：2文とも --fs-h2-sm（30.4px）で同じ大きさ＝中央に文字が2行あるだけで、
       他セクションの「見出し→3px罫→本文」という語彙とつながっていなかった。
   新：結論（--fs-h2）→ 白→aqua-lite の3px罫 → 理由（--fs-lead・aqua-lite）。
   ★サイズは既存トークンだけで組んである（--fs-h2 は .site-hd__ttl と、--fs-lead は
     .site-fv__lead と共用）。**新しいpx値を足すと font-size-kinds 契約15を超える。**
   ★白地化（2026-08-03）で **padding-block:var(--row-pad) は外した**。
     --flush をやめて独立した白の Row にしたので、縦余白は Row が持つ（§3-7）。 */
.site-band__txt{
  margin:0;
  color:var(--c-ink); text-align:center;
}
/* ★サイズは --fs-h1（1440pxで52px＝FVの見出しと同じ最大級）。第18版で --fs-h2（40px）に
   上げたがユーザーから再度「印象的に見せれませんか？」と指摘があり、**ページ内で最大の文字**へ。
   このバンドはトップで唯一「読み進めを促す一文」だけを置く面なので、
   白地化後も**ページ最大の明朝＋中央組み**で「言い切りの一文」として立たせる（面の力が無くなったぶん、
   字の大きさと余白だけで持たせる）。色は他の見出しと同じ紺。
   ★新しいpx値ではなく既存トークン（FVと共用）なので font-size-kinds は増えない。 */
.site-band__lead{
  margin:0;
  font-family:var(--f-mincho); font-size:var(--fs-h1); font-weight:600;
  line-height:1.5; letter-spacing:.08em; color:var(--c-navy);
}
/* ★白地なので明地用の罫（aqua→green）を使う。濃色面用の「白→aqua-lite」は白地では消える */
.site-band__rule{
  display:block; width:64px; height:3px; margin:var(--s3) auto 0;
  background:linear-gradient(90deg,var(--c-aqua),var(--c-green));
}
/* ★白地化に伴い本文色へ（旧＝濃色面の白文字）。主従は色ではなく**大きさ（52px 対 18px）と3px罫**で作る。
   ★★濃色面に戻す場合でも **--c-aqua-lite を使わないこと。** §3-1 の「水色lite＝濃地の文字」は
   **紺 #1F3A5F 地での 7.5:1** を指していて、水色inkの面では **3.89〜4.07:1 で割れる**
   （実測・375/700/701/767/768/899px 等でNG）。 */
.site-band__sub{
  margin:var(--s3) 0 0;
  font-family:var(--f-gothic); font-size:var(--fs-lead); font-weight:500;
  line-height:1.9; letter-spacing:.06em; color:var(--c-ink);
}

/* ================================================ 型4：数字（中央・写真なし） */
.site-stats__lead{ margin:0 auto var(--el-gap); max-width:40em; text-align:center; }
/* ★★★2026-08-04（第29版）: 列数を **`auto-fit` から明示指定へ**（ユーザー指摘
   「2×2で並ぶときに30年以上だけ上にずれる」の原因）。
   旧実装は `repeat(auto-fit,minmax(210px,1fr))` で、**約490px から自動的に2列**になっていた。
   ところが下の「区切り線」は `+` セレクタなので**2〜4番目だけ**に `padding-top:40px` と
   `border-top` が付く。1列のときは正しい区切りだが、2列になると
   **1番目（30年以上）だけ padding が無く41px高く浮く**（700pxで実測）。
   ＝「並びが自動で変わるのに、区切りの指定が並びを知らない」型の崩れ。
   → **列数を段階で明示**し、区切り線は1列のときだけ出す（下の `min-width:600px` で解除）。
   ★`auto-fit` に戻さないこと。戻すなら区切り線も同時に別の作り方へ変えること。 */
.site-stats__grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--s5) var(--s3); list-style:none; margin:0; padding:0;
}
/* ★★★2026-08-04（第33版・全セクションの左右バランス見直し）: ユーザー方針
   **「左右の空きよりも、セクション内のアイテムの空きは狭くあるべき」**。
   このセクションはアイテムに `padding-inline` を持たせているため、**見た目の隙間は
   「列の gap ＋ 左右のpadding×2」**になる。2×2のときは 24＋16×2＝**56px** で、
   狭い帯の左右の空き（38〜40px）を上回っていた（実測）。
   → 2列のときは padding を落として gap（24px）だけにする。 */
.site-stats__item{ text-align:center; padding-inline:var(--s2); }
@media (min-width:600px) and (max-width:1199px){
  .site-stats__item{ padding-inline:0; }
}
/* 区切り線は**1列のときだけ**。1列の狭幅で border-left を残すと左端に縦線が浮く */
.site-stats__item + .site-stats__item{ padding-top:var(--s4); border-top:1px solid var(--c-line); }
/* ★2列になる帯。ここで区切り線と padding を必ず解除する（上の★の再発防止）。 */
@media (min-width:600px){
  .site-stats__grid{ grid-template-columns:repeat(2,1fr); }
  .site-stats__item + .site-stats__item{ padding-top:0; border-top:0; }
}
.site-stats__num{
  margin:0 0 var(--s1);
  font-family:var(--f-mincho); font-size:var(--fs-num); font-weight:600;
  line-height:1.1; letter-spacing:.01em; color:var(--c-aqua-ink);
  /* flexにすると数字と単位が別の行ボックスになり、文字組み計測で誤検知になる。
     ひとつの文字列として流し、nowrapで割れないようにする */
  white-space:nowrap;
}
/* 単位（年以上・件以上・件超・個）。★2026-08-03 に黄緑ink → --c-sub(#55636E) へ変更
   （ユーザー指示「深緑の文字は『約』と同じく #55636E に」）。「約」＝.site-stats__pre と同色になり、
   数字に添う補助文字がすべて同じ扱いに揃う。
   ★これで **黄緑の出番は見出し下の3px罫の1箇所だけ**になった（§3-1の「黄緑は2箇所限定」を更新済み）。 */
.site-stats__num small{
  font-family:var(--f-gothic); font-size:var(--fs-lead); font-weight:700;
  letter-spacing:.04em; color:var(--c-sub); margin-left:2px;
}
.site-stats__num .site-stats__pre{ margin:0 2px 0 0; color:var(--c-sub); }
/* ★キャプションは数字の下。字数が「業歴」2字〜「水道メーター交換（年間）」12字とばらつくため、
   ★行間を詰めて塊にし、数字との間隔を --s2 で固定して**4項目の下端の高さを揃える**
   （2026-08-03・バランス調整）。 */
.site-stats__cap{
  margin:var(--s2) 0 0; font-size:var(--fs-body); line-height:1.6; color:var(--c-sub);
}

/* ============================== 型8：手当＝連番カード2×2（他と違う型） */
.site-merit__lead{ margin:0 0 var(--el-gap); max-width:44em; }
.site-merit__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s4) var(--s3); list-style:none; margin:0; padding:0;
}
.site-merit__item{
  position:relative; overflow:hidden;
  padding:var(--s5) var(--s4) var(--s4);
  background:#fff; border-top:3px solid var(--c-aqua-ink);
}
/* 連番（参考①の 01./02./03. — 背面・出現アニメで浮かび上がる） */
.site-merit__no{
  position:absolute; top:-.16em; right:.06em; z-index:0;
  font-family:var(--f-en); font-size:var(--fs-no); font-weight:700;
  letter-spacing:-.03em; line-height:1; color:var(--c-wash);
  pointer-events:none; user-select:none;
}
.site-merit__ttl{
  position:relative; z-index:1;
  margin:0 0 var(--s2);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  line-height:1.6; letter-spacing:.06em; color:var(--c-navy);
  /* ★2026-08-05: カードが3列になる下層では見出しが2行になり、`text-wrap:balance` だけだと
     **語の途中**で折れていた（実測「漏水を音で見つけ／る「音聴」の技術」「資格取得支援 ─ 費／用は…」）。
     `word-break:auto-phrase` は日本語を**文節で**折る指定。未対応ブラウザは無視するだけ＝安全に効かせられる。
     ★見出しの文言は③HTML版草案が正本なので、**文字を削って収める対処はしない**。 */
  word-break:auto-phrase;
}
.site-merit__item p{ position:relative; z-index:1; margin:0; }

/* ================== 型10：CTA（青ベタ面・左寄せの非対称／参考①ctaの型）
   ①実測: cta__left-area w811 L99 / R530 ＝左に寄せ、右を大きく空ける。 */
.site-cta{
  /* ★position:relative を持たせないこと。写真の位置基準は .site-row--brand 側にある
     （持たせると写真が Row Padding のぶん上下100pxずつ足りなくなる・実測 2026-08-03） */
  color:#fff;
}
/* 右側の写真（狭幅では本文の下に帯として置き、文字と重ねない） */
.site-cta__side{
  position:relative; z-index:0;
  display:flex; align-items:flex-start; justify-content:center;
  aspect-ratio:16/9; width:100%; margin-top:var(--s5);
  background:linear-gradient(150deg,#3C7FA6,#1B5E85);
  /* ▼ 実画像に差し替え： background:url({{MEDIA:xxx.jpg}}) center/cover no-repeat; */
}
.site-cta__side > span{
  font-family:var(--f-gothic); font-size:var(--fs-fine); font-weight:700;
  letter-spacing:.06em; color:#EAF6FC; text-align:center; padding:var(--s2);
}
.site-cta__inner{ position:relative; z-index:2; }
/* ★★2026-08-05（ディレクター指摘「スマホ時の RECRUIT の文字位置がおかしい／このCTAは全ページ共通」）
   原因: 巨大英字は他セクションでは `.site-hd`（＝ラップの padding の内側にある relative な箱）を
   基準に置かれるので見出しと左が揃う。ところが CTA だけは `.site-cta__inner`（＝`.site-wrap` 自身）が
   基準で、**絶対配置の基準はパディングボックス＝ラップの外枠**になる。
   結果 `left:-.04em` が「画面の左端から -4px」を意味してしまい、
   見出しが `--gut` ぶん内側にあるのに**英字だけ画面外へはみ出していた**
   （実測 375px: 英字 x=-2 / 見出し x=20 ＝ 22px ズレ。1280pxでも 44px ズレ）。
   → ラップのパディングぶんを足して、他セクションと同じ「見出しの真上に左揃え」にする。
   ★トップの CTA（CONTACT）も同じズレを持っていたので、ここを直すと全ページ同時に直る。 */
.site-cta__inner > .xw-bigen{ left:calc(var(--gut) - .04em); }
.site-cta__ttl{
  position:relative; z-index:1;
  margin:0 0 var(--s3);
  font-family:var(--f-mincho); font-size:var(--fs-h2); font-weight:600;
  line-height:1.6; letter-spacing:.12em; color:#fff;
}
.site-cta__lead{ margin:0 0 var(--s5); max-width:34em; color:#F2F9FD; }
.site-cta__acts{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s4); }
.site-cta__tel{ margin:0; font-size:var(--fs-body); color:#F2F9FD; }
.site-cta__tel a{
  font-family:var(--f-en); font-size:var(--fs-tel); font-weight:700; letter-spacing:.02em;
  color:#fff; margin-inline:var(--s1);
  /* 下線の体裁をヘッダー・フッターと揃える。border-bottom はボックス下端に引かれて
     文字から離れるため使わない（2026-08-03） */
  text-decoration:underline rgba(255,255,255,.6);
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
}
.site-cta__tel small{ display:block; font-size:var(--fs-body); color:#DCEDF7; }
/* ★スマホは「お電話でも受け付けています」で**必ず改行**して番号を独立させる
   （ユーザー指示 2026-08-04）。375pxでは自動折り返しでも割れるが、割れる位置が幅次第で動く
   （ラベルの途中／番号の直前）ので、**span を block にして位置を固定**する。
   ★`--s1` を空けているのは、改行後に番号がラベルへ張り付いて1つの文に見えるのを防ぐため。 */
@media (max-width:599px){
  .site-cta__tel-l{ display:block; margin-bottom:var(--s1); }
  /* ★★改行したら番号の**左マージンを消す**こと。`.site-cta__tel a` は横並び前提で
     `margin-inline:var(--s1)` を持っているため、そのままだと番号だけ8px右へずれて
     ラベルと頭が揃わない（実測 ラベル左20px 対 番号左28px）。 */
  .site-cta__tel a{ margin-left:0; }
}

/* ================================================ 型11：BLOG（カード3枚） */
.site-blog__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s3); list-style:none; margin:0 0 var(--s4); padding:0;
}
/* ★2026-08-03（第16版）にサムネイルを追加（ユーザー指示「記事内の画像を反映させたい」）。
   カード全体がリンクなので、画像は枠いっぱい・本文だけ内側に余白を持つ2段構成にした。
   ★padding をリンク直下から .site-blog__body へ移してある。リンク側に戻すと画像の周りに
     余白が入って「カードに貼った写真」に見える。
   ★画像は div の background で入れる（＜img＞ にしない）＝アスペクト比を CSS 側で固定し、
     記事ごとに縦横比の違う画像が来てもカードの高さが揃うようにするため。 */
.site-blog__item a{
  display:flex; flex-direction:column; height:100%;
  /* ★左の水色の縦線（border-left:3px solid var(--c-aqua)）は 2026-08-03 に撤去（ユーザー指示）。
     サムネイルが付いてカードの輪郭が写真で立つようになり、縦線は二重の主張になっていた。**戻さないこと。** */
  background:var(--c-bg-tint);
  color:var(--c-ink); text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.site-blog__ph{
  aspect-ratio:3 / 2;
  background:linear-gradient(150deg,#BFDEEC,#8FC2DA) center/cover no-repeat;
}
.site-blog__body{ padding:var(--s4) var(--s3); }
.site-blog__item a:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(31,58,95,.10); }
.site-blog__item time{
  display:block; margin-bottom:var(--s1);
  font-family:var(--f-en); font-size:var(--fs-body); font-weight:700;
  letter-spacing:.06em; color:var(--c-aqua-ink);
}
.site-blog__item h3{
  margin:0; font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  line-height:1.6; letter-spacing:.04em; color:var(--c-navy);
}
.site-blog__more{ margin:0; }

/* ================= フッター＝白地＋会社の顔を右下に大きく（参考①footerの型）
   ①実測: 地は白・文字は濃色。社屋の実写を background-size:80% / position:100% 100% で
   右下に置き、padding-top:220px で空を見せる。内容は w1264 L161 R15 の片側ブリード。
   ★フェードは素材に焼き込まず CSSマスクで再現する（支給写真は無加工でよい）。 */
.sf-foot{
  /* ★店舗情報 ↔ NAVI の列間（粗密の「疎」側・ユーザー指示 2026-08-03）。
     ★★左の余白はこの値から導く（第34版）。`--sf-colgap` を変えると左余白も一緒に動く＝
       「左右の空き＞アイテムの空き」が常に成り立つ。**左余白に直値を書き戻さないこと。** */
  --sf-colgap: clamp(80px, 8vw, 200px);
  position:relative; overflow:hidden;
  background:var(--c-bg); color:var(--c-ink);
  padding-top:var(--s7);
}
.sf-inner{ position:relative; z-index:2; display:grid; gap:var(--s5); padding-block:var(--s6); }
.sf-brand__ph{ margin:0 0 var(--s3); }
/* ヘッダーの .sh-brand__lic と同じ扱い＝許可番号に水色を使わない（ユーザー指示 2026-08-03） */
.sf-brand__lic{ display:block; font-size:var(--fs-fine); letter-spacing:.08em; color:var(--c-sub); }
.sf-brand__name{
  display:block; font-family:var(--f-mincho); font-weight:600;
  font-size:clamp(1.05rem,3vw,1.3rem); line-height:1.5; letter-spacing:.02em; color:var(--c-navy);
}
/* 社名の折返しはヘッダーと同じ位置で割る（全域一貫） */
.sf-brand__co{ display:block; font-size:var(--fs-fine); letter-spacing:.06em; color:var(--c-sub); }
/* 住所・TEL・FAX・営業時間は読み物ではなくデータの塊なので本文（1.95）より詰めて
   1ブロックとして見せる（粗密の「密」側・ユーザー指示 2026-08-03）。
   ★.sf-tel は自身の line-height:1.45 を持つので影響を受けない */
/* ★★2026-08-04（テンプレート形式へ移植した時に追加）: `margin:0` は **Bootstrap のリセット**。
   BS5 は `address{ margin-bottom:1rem }` を当てるため、これが無いと**375pxでフッターが16px背高になる**
   （草案サイト＝BS非読込 との実画素比較で検出。1440pxでは差0だったのでこの1箇所だけ）。
   ★意匠を変える指定ではなく、**承認済みの見え方を新しいカスケードでも保つための復元**。
   ★`override.css` ではなく style.css に置いたのは、これが `.sf-addr` という案件コンポーネント自身の
     持つべき値で、**同じ style.css を読む下層ページでも同じ復元が必要**だから。 */
.sf-addr{ margin:0; font-size:var(--fs-body); color:var(--c-ink); line-height:1.7; }
/* hover下線はヘッダー・フッター共通の体裁に統一（ユーザー指示 2026-08-03）。border-bottomから
   text-decorationへ変更＝文字直下すぎる/離れすぎるバラつきを解消 */
.sf-addr a{
  color:var(--c-aqua-ink);
  text-decoration:underline var(--c-aqua);
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
}
/* 電話は英数フォント＋本文から切り離す（ユーザー指示「本文フォントと同じはダサい」）。
   ヘッダーの .sh-tel__num と書体・字間は同じ書式（サイズのみ1.5倍・下の .sf-tel コメント参照）。
   min-height:44px が当たり判定（inline-block なので行ボックスがそのまま領域になる）。
   ★ここは水色のままでよい（実際にリンクだから）。ヘッダーの .sh-tel__num を紺にしたのは
   あちらが「押せる感を色で出すな」という指示だったため（2026-08-03・混同注意）。 */
.sf-tel{
  /* 明朝体・W600 の理由は既存コメントのまま（游明朝にW7が無いため）。
     ★サイズは --fs-h2-sm（＝中間バンド .site-band__txt と同一トークン。1440pxで30.4px）。
       第12版の `calc(var(--fs-tel) * 1.5)`＝33px から 2026-08-03 に変更した。
       理由: 33px はこのページで .sf-tel だけが持つ値で、契約 font-size-kinds=15 に対し
       実測16種になっていた（measure-pages の #2 警告）。ユーザー指示「既存サイズに寄せる。
       ただし大きめが良い」に対し、33px 直下の既存サイズが --fs-h2-sm。
     ★**個別px値や calc で書き戻さないこと。** 種類数は幅ごとに測るため、固定pxにすると
       clamp が縮む狭幅で「その幅にしか無いサイズ」が生まれて再び16種になる。
       既存トークンをそのまま参照するのが、全幅で種類を増やさない唯一の書き方。
     ★line-height を 44px 固定から 1.45 へ変更。大きめの文字に44pxの行送りだと
       下線（baselineから .3em）が行ボックスからはみ出して次行に近づく。
       min-height:44px はタップ領域として残す。
     ★margin-bottom は必須。拡大した時点で「下線とFAX行の間が3px」まで詰まった（実測）。
       他の行は7px間隔なので、強調要素として上下とも余裕を持たせる。**0に戻さないこと。** */
  display:inline-block; min-height:44px; line-height:1.45; margin-bottom:12px;
  font-family:var(--f-mincho); font-size:var(--fs-h2-sm); font-weight:600; letter-spacing:.01em;
  color:var(--c-aqua-ink);
  text-decoration:underline var(--c-aqua);
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:color var(--ul-dur) var(--ease);
}
.sf-tel:hover{ color:var(--c-navy); }
.sf-nav__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s1); }
.sf-nav__list a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-body); font-weight:700; color:var(--c-navy);
  /* ★下線は常時 underline で置き、色だけ transparent にして見えなくしておく。
     text-decoration-line は遷移できないため、none から出すと必ず瞬間表示になる（ユーザー指摘 2026-08-03）。 */
  text-decoration:underline transparent;
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:color var(--ul-dur) var(--ease), text-decoration-color var(--ul-dur) var(--ease);
}
.sf-nav__list a:hover{ color:var(--c-aqua-ink); text-decoration-color:var(--c-aqua); }
.sf-nav__list ul{ list-style:none; margin:0; padding-left:var(--s2); }
.sf-nav__list ul a{ font-weight:500; color:var(--c-sub); }
.sf-nav__dash{ margin-right:var(--s1); color:var(--c-aqua); }   /* KEEP: 受領の擬似要素 before のダッシュを実体化（R-27） */ /* /KEEP */

/* 会社の顔（社屋・作業車）。狭幅では本文の下に帯として置き、文字と重ねない */
.sf-bg{
  position:relative; z-index:0;
  display:flex; align-items:flex-start; justify-content:center;
  aspect-ratio:1188/815; width:100%;
  background:linear-gradient(150deg,#9AC8DE,#4E8FB4);
  /* ▼ 実画像に差し替え： background:url({{MEDIA:xxx.jpg}}) center/cover no-repeat; */
}
.sf-bg > span{
  font-family:var(--f-gothic); font-size:var(--fs-fine); font-weight:700;
  letter-spacing:.06em; color:#0F3A50; text-align:center; padding:var(--s2);
}
.sf-copy{
  position:relative; z-index:2;
  margin:0; padding:var(--s3) var(--gut);
  border-top:1px solid var(--c-line);
  font-size:var(--fs-fine); letter-spacing:.04em; color:var(--c-sub); text-align:center;
}

/* ============================================ 浮かび上がり（参考①のDNA）
   ①は delay ではなく transition-duration の差で段差をつけている（実測）。 */
[data-reveal]{
  opacity:0; transform:translateY(var(--rv-y));
  transition:opacity var(--rv-d0) var(--ease), transform var(--rv-d0) var(--ease);
}
[data-reveal][data-reveal-step="1"]{ transition-duration:var(--rv-d1); }
[data-reveal][data-reveal-step="2"]{ transition-duration:var(--rv-d2); }
[data-reveal][data-reveal-step="3"]{ transition-duration:var(--rv-d3); }
[data-reveal][data-reveal-step="4"]{ transition-duration:var(--rv-d4); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .site-btn,.site-link,.site-link__t,.site-link::after,.site-blog__item a,
  .sh-nav__list a,.sh-tel__num,.sh-drawer__list a,.sf-nav__list a,.sf-tel{ transition:none; }
}

/* ============================================================ 中間幅・PC */
@media (min-width:768px){
  /* ★FVのスクリムを横方向へ倒すのは 1200px 以上でだけ（min-width:1200px の節にある）。
     768〜1199px は見出しが全幅に伸びて写真の暗部に重なり、AAを割る（実測済み）。 */
  /* 4枚は3+1に割れないよう2×2で固定する */
  .site-merit__grid{ grid-template-columns:repeat(2,1fr); }
  /* 数字の2×2と区切り線の解除は `min-width:600px` の節へ移した（第29版・上の★を参照）。 */
  /* ★★1件表示（2026-08-03）に合わせて「ラベル｜最新1件｜すべて見る」の**横1列**にした。
     3件の頃は2カラム＋下に「すべて見る」の3段だったが、1件だと本文1行に対して
     段が2つ余り、帯の中に空白の段ができて間延びする（実測）。
     3列＋align-items:center で、1行の高さに全要素が揃う。 */
  .site-news__inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    /* ★2026-08-04（第33版）: gap を `--s4`(40) → `--s3`(24)。
       「左右の空きよりセクション内のアイテムの空きは狭く」の方針で、
       この帯の左右の空きは狭い幅で38〜40pxしかなく、40pxのgapが同値以上になっていた（実測）。 */
    align-items:center; gap:var(--s3);
  }
  .site-news__more{ grid-column:3; justify-self:end; }
  /* ★2px の縦罫は 2026-08-03 に撤去（ユーザー指示「重たい」）。ラベル自体を1行に軽くしたので
     罫まで足すと端が主張しすぎる。区切りは gap（--s4）だけで足りている。**戻さないこと。** */
  .site-news__head{ padding-right:var(--s3); }
  /* ★768〜899px を「社名｜ナビ」の2カラムにしない（2026-08-03）。
     2カラムにするとナビの実幅が318pxしか取れず、そこを2段に割ると1段139pxになって
     「スタッフ紹介」「プライバシーポリシー」が折り返す（実測）。かといって段組をやめると
     ナビが12項目の縦長1本になり、この帯だけフッターが300px背高になる（実測1417px）。
     → 900〜1199pxと同じ「1カラム＋ナビだけ2段」に揃える。ナビ幅480pxで1段220px＝余裕あり。 */
  .sf-inner{ grid-template-columns:minmax(0,30rem); gap:var(--s5); }
  /* ★2026-08-04（第33版）: 段間を `--s4`(40) → `--s3`(24)。
     フッターの左の空きは狭い幅で38〜40pxなので、40pxの段間は同値以上だった（実測）。
     ★狭める方向は安全＝1段が広くなるので「プライバシーポリシー」の折り返し（下の★）は起きない。
       **広げる方向（--s5）は禁止**、というのが元の注意書きの主旨。 */
  .sf-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); align-items:start; }
  /* 電話は早めに出す（採用サイトの主要導線）。flex-column＋中央寄せで min-height:44px を活かす */
  .sh-tel{ display:flex; flex-direction:column; justify-content:center; }
}

@media (min-width:900px){
  /* ---- フッターのサイトマップを2段に割る（768px以上。定義は上の 768px 節にある） ----
     ★columns:2 は使わない。項目数（4対4）で機械的に割るため、入れ子（会社概要・仕事を知る等）を
       持つ項目が片側に固まり、段の高さが 396px 対 176px＝220px もズレる（実測）。
       HTMLで2つの ＜ul＞ に分け、grid で並べて高さを揃えている（実測 296px 対 324px＝差28px）。
       分け方は意味で切る＝2列目が「求職者の皆様へ＋その下層」＝採用サイトの主導線。
     ★段間は --s4(40px)。--s5(56px) にすると1段が172pxになり「プライバシーポリシー」（実測173px）が
       1px足りずに折り返す。--s4 ＋ .sf-inner のナビ列 26rem で1段188px＝15pxの余裕。
       この2つはセットで動かすこと（片方だけ縮めると折り返しが再発する）。 */
  /* ---- 型3・型5：3カラムgridで「テキストは版面の端に揃え／写真は画面端までブリード」 ----
     col1=版面外の余白 ／ col2=テキスト（版面の半分） ／ col3=写真（画面端まで） */
  .site-duo{
    display:grid; align-items:center; gap:0;
    grid-template-columns:
      var(--edge)
      minmax(0, calc(var(--wrap) / 2 - var(--gut)))
      minmax(0, 1fr);
  }
  .site-duo__txt{ grid-column:2; padding-inline:0 var(--s5); }
  .site-duo__pics{ grid-column:3; margin-top:0; padding-inline:0; }
  .site-duo__plate{ left:-22%; right:0; }

  /* 左右反転（①の about が右→左→右と交互になる型） */
  .site-duo--rev{
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, calc(var(--wrap) / 2 - var(--gut)))
      var(--edge);
  }
  .site-duo--rev .site-duo__pics{ grid-column:1; }
  .site-duo--rev .site-duo__txt{ grid-column:2; padding-inline:var(--s5) 0; }
  .site-duo--rev .site-duo__plate{ left:0; right:-22%; }
  .site-duo--rev .site-ph--lg{ margin-left:auto; }
  .site-duo--rev .site-ph--sm{ margin-inline:0 auto; }

  /* ---- 型6：完全2分割（左右どちらも画面端まで／セクション内の余白ゼロ） ---- */
  .site-split2{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  /* パネル内テキストの左端を .site-wrap の内側左端に揃える。
     grid item の % は grid area 基準＝200% がセクション全幅に一致する */
  .site-split2__inner{
    /* ★padding-block を一括で上書きしない。上は巨大英字の突き出しぶんを足した値が要る
       （base 側の★参照）。ここで var(--row-pad) に戻すと英字が青い面の天井に貼り付く。 */
    padding-top:calc(var(--row-pad) + var(--fs-bigen) + var(--bigen-gap));
    padding-bottom:var(--row-pad);
    padding-left:max(var(--gut), calc((200% - var(--wrap)) / 2 + var(--gut)));
    /* ★★★2026-08-04（第31版）: 右は **`--s5`(56px) 固定をやめ「左を超えない」**ようにした
       （ユーザー指摘「1080pxくらいで左の空きより右の空きのほうが広くバランスが悪い」）。
       左は版面（`--wrap`）から導く式なので、**1232px より狭いと下限の `--gut`(40px) に張り付く**。
       そこに右56px固定が当たると 40 対 56 で右が広い＝900〜1231pxの帯だけ左右が逆転していた（実測）。
       `min(--s5, 左と同じ式)` にすると、狭い帯では 40/40 で揃い、
       1232px 以上では従来どおり「左が広く右が締まる」①由来の非対称に戻る。 */
    padding-right:min(var(--s5), max(var(--gut), calc((200% - var(--wrap)) / 2 + var(--gut))));
  }
  .site-split2__fig{ min-height:100%; }

  /* ---- フッター：会社の顔を右下に大きく／内容は片側ブリード（①footerの型） ---- */
  .sf-foot{
    padding-top:var(--s7);
    min-height:clamp(560px,54vw,820px);   /* ①は824px。写真を見せるための高さ */
    /* 高さは確保したまま（写真を大きく見せるため min-height は下げない）、
       ナビの段組解消で短くなった内容を縦中央に置いて上下の間延びを散らす（ユーザー指示 2026-08-03）。 */
    display:flex; flex-direction:column;
  }
  /* 文字は「白い面」に載せる（①の white-txt-block が blue-block に載る機構）。
     ★これが無いと、支給写真が暗かった時にフッターの文字がAAを割る。
       スクリムは兄弟要素なのでCSSカスケードでも監査ツールでも地色が解決できず、
       "通ってしまう" 種類の不具合になる。面は不透明にし、右端だけ溶かす。
     面はフッター全高に1枚で敷く（.sf-inner と .sf-copy に別々に敷くと継ぎ目が出る）。
     ★2026-08-03: .sf-inner／.sf-copy を --edge から --gut へ変更（写真とのバランス改善のため
       左寄せ・全幅基準に統一）。それに伴い ::before の上限も 1440px→1080px に縮小し、
       内容の右端（--gut+21rem+--s5+25rem≒832px）より不透明端が常に外側にくるよう調整済み
       （下の検算コメント参照）。旧「1280pxでなく1440px」の --edge 依存の根拠は本変更で解消。 */
  .sf-foot::before{
    content:""; position:absolute; z-index:1; top:0; bottom:0; left:0;
    /* .sf-inner が --gut 基準になり内容の右端が全幅で一定(≒832px)になったため、
       白面を縮めて写真を広く見せる（1440px以下→1080pxで内容右端832pxに対し余裕+162px、実測・2026-08-03）。 */
    width:min(80%,1080px); pointer-events:none;
    /* ★★★2026-08-04（第29版）: **淡水色の一段を撤去**（ユーザー指示「この青のグラデは
       写真自体を修整したので廃止で良いのでは？」）。
       この面は**フッター全高**（top:0/bottom:0）に敷くが、写真（`.sf-bg`）は
       右下にアスペクト比で置かれるので**写真より背が高い**。1000pxでは写真の上端が y443 に対し
       面は y0 から始まるため、写真が無い上半分で**淡水色の縁だけが白地に浮いて縦の帯に見えていた**
       （ユーザー指摘「写真の高さが足りず、横の青のグラデのみが写真の高さ以上に表示されている」）。
       淡水色は 2026-08-03 に「写真から白面への継ぎ目を消す」ために入れたものだが、
       **素材が `AdobeStock_2052712205-2` に差し替わった時点で左端のフェードは焼き込み済み**＝
       CSS側で挟む必要がなくなっていた（§6の★と同じ経緯）。
       ★白 → 透明の2段に戻した。透明の先はフッターの地（白）なので、写真の無い高さでは**何も見えない**。
       ★白の不透明域は 90% のまま。文字の右端（実測1200pxで約825px＝白面の86%）が
         必ず不透明な白の上に乗るようにするため。ここを手前へ動かすとAAを割る。
       ★フェードは to right（真横）のまま。斜めにすると背の高いフッターで左下の隅が先に透けて
         コピーライトが写真に乗る（1920pxで2.67:1 を実測済み） */
    background:linear-gradient(to right,
      #fff 0%,
      #fff 90%,
      rgba(255,255,255,0) 100%);
  }
  .sf-inner{
    max-width:none; margin:0; width:fit-content;
    /* --edge は画面幅とともに増え、広い画面ほど内容が右へ動いて写真とぶつかっていた。
       フッターだけ版面（--wrap）を外して全幅基準にする＝--gut（ユーザー指示 2026-08-03
       「フッターに関してはコンテンツ幅を除外してよい。左に寄せる」）。 */
    padding-left:var(--gut); padding-right:var(--s7);
    padding-block:var(--s4) var(--s6);
    /* ナビ側を26remにしているのは、2段組の1段を188px確保して「プライバシーポリシー」
       （実測173px）の折り返しを防ぐため（.sf-nav の gap:--s4 とセット）。
       内容の右端は 40+336+56+416＝848px で、白面の不透明端（1200pxで883px）の内側に収まる。
       ★--edge をやめて左寄せにしたので、この右端は全幅で一定になる。 */
    /* 粗密（ユーザー指示 2026-08-03「店舗情報とNAVIは少し離して考えたい」）:
       住所の最長行「千葉県君津市久保3丁目12番8号」は実測約260px。18remで縮めた分64pxを
       列間（column-gap）へ回し、グループ間だけ大きく空ける。 */
    /* ★★★2026-08-04（第34版）: 列間を**トークン `--sf-colgap` に切り出した**。
       左の余白（`.sf-inner` / `.sf-copy` の padding-left）を必ずこれより広くするため＝
       「左右の空き＞セクション内のアイテムの空き」を**式で保証する**（下の `min-width:1200px` の節）。
       ★片方だけ数値を書き換えないこと。粗密の比率はこのトークン1つで決まる。 */
    grid-template-columns:minmax(0,18rem) minmax(0,26rem);
    row-gap:var(--s4); column-gap:var(--sf-colgap);
    align-items:start;
    /* .sf-foot を flex-column 化した縦中央寄せの受け皿。display:grid のままなので
       align-content:center が行方向の寄せとして効く（ユーザー指示 2026-08-03） */
    flex:1 1 auto; align-content:center;
  }
  /* ロゴ・住所・ナビを .sf-inner のグリッドへ直接並べるため、ラッパーを透過させる。
     .sf-brand は意味を持たない div なので display:contents で問題ない
     （ユーザー指示 2026-08-03「NAVIは郵便番号の高さから始める。ロゴのみ分離して目立たせる」）。 */
  .sf-brand{ display:contents; }
  .sf-bg{
    position:absolute; z-index:0; right:0; bottom:0;
    width:min(78%,1188px); height:auto;
    /* 左へ向かって白へ溶かす（①は素材に焼き込み。ここはCSSマスクで代替）。
       ★不透明になる位置を 78%→64% へ早めた（2026-08-03）。白面の白は写真の58%地点で終わるので、
         78%だと「白面が明けてもマスクがまだ7割」＝人物が霞んで消える。64%なら被写体（73%地点）が
         完全な不透明域に入る。**この値を戻すと人物がまた消える。** */
    -webkit-mask-image:linear-gradient(105deg,transparent 2%,rgba(0,0,0,.22) 28%,rgba(0,0,0,.78) 48%,#000 64%);
    mask-image:linear-gradient(105deg,transparent 2%,rgba(0,0,0,.22) 28%,rgba(0,0,0,.78) 48%,#000 64%);
  }
  .sf-bg > span{ align-self:flex-end; margin-bottom:var(--s3); }
  .sf-copy{
    border-top:0; text-align:left;
    /* .sf-inner と同じく --edge をやめ --gut に揃える（全幅基準・2026-08-03） */
    padding-left:var(--gut); padding-right:var(--s7);
  }

  /* ---- 型10：CTAの非対称（右側に写真を置いて余白を成立させる） ---- */
  .site-cta__side{
    position:absolute; z-index:0; top:0; bottom:0; right:0;
    /* ★★2026-08-03（第26版）: 44%/600px → **58%/860px**（ユーザー指示「コンタクトセクションの
       水の背景はもっと見せてほしい。左に面積を広げてほしい」）。
       ★左へ広げたぶん**溶かし始めを早める**（30%→18%地点）＝広げただけだと文字の裏に
         濃い水が入ってコントラストが落ちる。幅とマスクはセットで動かすこと。 */
    width:min(58%,860px); aspect-ratio:auto; margin-top:0;
    align-items:flex-end;
    /* 左端を青へ溶かす。文字が乗る左側のコントラストは影響を受けない。
       ★2026-08-03に溶かす幅を広げた（56% → 82%）。ブランド色の膜（下の割り当てブロック）と
         セットで「面から水へ連続的に変わる」状態にするため。片方だけ戻すと境目が線に戻る。 */
    -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.28) 18%,rgba(0,0,0,.72) 52%,#000 78%);
    mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.28) 18%,rgba(0,0,0,.72) 52%,#000 78%);
  }
  .site-cta__side > span{ margin-bottom:var(--s3); }
  .site-cta__lead{ max-width:30em; }
}

/* 900〜**1399px** は「白い面＋右下の写真」を左右に成立させる幅が足りない。
   サイトマップを横に並べると2列目が面の外へ出て写真に乗り、AAを割る（実測 1024px で 1:1）。
   この帯だけ内容を1カラムに積み、面の不透明域に収める。
   ★★★2026-08-04（第35版）: 上限を **1199 → 1399px** へ広げた（ユーザー指示
     「1280pxあたりは写真の人物が表示されておらず入れている意味がない。**早めに1199px以下の表示に
       切り替えてほしい**」）。2カラム＋全高の写真は 1400px 以上でだけ成立する。
     実測（第34版の2カラム版）＝ **1200pxで見える写真は228px**しかなく、子どもが
     フェードの境目で縦に割れて半分しか出ていなかった。1280pxでも左半分が沈む。
     1400pxなら見える316px・人物のズレ32pxで収まる（下の `min-width:1400px` の表）。 */
@media (min-width:900px) and (max-width:1399px){
  .sf-inner{ grid-template-columns:minmax(0,30rem); }

  /* ★★★2026-08-04（第31版）: この帯だけ**白い面を縮め、写真のマスクを短くする**
     （ユーザー指摘「1080pxくらいで写真幅が狭くなるが、人物が中心になるようにしたい」）。
     実測（1080px）: 写真は右端から842px、白い面は 864px（不透明864×0.9＝778px）、
     さらに写真自身のマスクが 64%地点（＝777px）まで抜けている
     → **実際に見えている写真は右の216pxだけ**で、人物（写真の約73%＝853px）は
       ちょうどフェードの中に埋まっていた。「人物が中心にならない」の正体はこれ。
     ★この帯は `.sf-inner` が1カラム（30rem）なので**文字の右端は520px**しかない
       ＝PC帯（832px）と違って**面を縮める余地がある**。ここが手が入れられる理由。
     ・面: `min(80%,1080px)` → `clamp(611px, 62%, 1080px)`
       （下限611pxは 611×0.9＝550px＞文字の右端520px＝**不透明域に文字が必ず乗る**ための値）
     ・マスク: 不透明になる位置を 64% → **46%**（面の不透明端とほぼ同じ位置で写真が立ち上がる）
     → 見える写真は 1080pxで216px → **455px**、人物は見える範囲のほぼ中央に来る（実測で照合済み）。
     ★面の下限611pxを下げないこと＝文字がフェードに掛かってAAを割る。 */
  .sf-foot::before{ width:clamp(611px, 62%, 1080px); }
  .sf-bg{
    -webkit-mask-image:linear-gradient(105deg,transparent 2%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.78) 35%,#000 46%);
            mask-image:linear-gradient(105deg,transparent 2%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.78) 35%,#000 46%);
  }
}

/* ナビの開始位置を「〒299-1152」に揃える＝ロゴ（社名）だけが上に独立して目立つ
   （ユーザー指示 2026-08-03）。行を明示して2×2に組む。
   ★2カラムになるのは1200pxから（900〜1199pxは上の30rem1カラムのまま）なので、
   明示配置はこの帯からに限定する＝900〜1199pxで入れると grid-column:2 が
   暗黙の2列目を作ってしまう。 */
/* ★2026-08-04（第35版）: 1200 → **1400px** へ（フッターの2カラム化を1400px以上に限定したため。
   上の 900〜1399px の★★★を参照）。ここを1200pxに戻すと、1カラムの帯で `grid-column:2` が
   暗黙の2列目を作ってレイアウトが割れる。 */
@media (min-width:1400px){
  .sf-inner{ grid-template-rows:auto auto; row-gap:var(--s4); }
  .sf-brand__ph{ grid-column:1; grid-row:1; margin-bottom:0; }
  .sf-addr{ grid-column:1; grid-row:2; }
  .sf-nav{ grid-column:2; grid-row:2; }
  /* 分離した社名を少し大きくして「会社の顔」にする */
  .sf-brand__name{ font-size:clamp(1.2rem,3.4vw,1.6rem); }
}

/* 900〜1023px だけ CTA 写真の左端が本文・ボタンの文字に届く。
   900px では 44% ＝ 396px なので写真は x504 から始まるが、リード（max-width:30em）と
   ボタンのラベルは x550 まで伸びる＝白文字が写真に乗る（実測 リード3.67:1／ゴースト3.09:1）。
   1024px 以上は 44% でも写真が文字の右で始まるため、この帯だけ写真を狭めて離す。 */
@media (min-width:900px) and (max-width:1023px){
  .site-cta__side{ width:min(32%,600px); }
}

@media (min-width:900px){
  /* お問い合わせボタンのブラッシュアップ（ユーザー指摘・2026-08-03）。
     高さ48→52px（幅は増えない）・字間.04em→.08emで存在感を上げ、hoverに
     translateY(-2px)を足して .site-btn--main と同じ挙動に揃える。角丸は0のまま。 */
  .sh-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
    min-height:52px; padding:0 var(--s3);
    background:var(--c-aqua-ink); color:#fff; border-radius:var(--r);
    font-size:var(--fs-body); font-weight:700; letter-spacing:.08em; text-decoration:none;
    white-space:nowrap;
    transition:background-color .3s var(--ease), transform .3s var(--ease);
  }
  .sh-cta:hover{ background:var(--c-navy); transform:translateY(-2px); }
}

@media (min-width:1024px){
  /* 数字4つが1行に並ぶ幅。ここで初めて縦罫の区切りを入れる（単一行なので浮かない）。
     ★★2026-08-03：**等幅セル（repeat(4,1fr)）をやめ、内容幅＋等間隔に変えた**
       （ユーザー指摘「各項目センターとしてバランスを再調整、バランスが悪く見える」）。
       4つの数字は字数がばらばら（30 / 5,000 / 150 / 約6,000）で glyph幅が実測 190〜300px と
       1.6倍ちがう。等幅セルの中央に置くと**セル内の余りが 112〜167px と不揃い**になり、
       数字の左端が列ごとにずれて「ガタついて見える」原因になっていた。
       → セルを auto にして justify-content:center、余白は左右均等の padding-inline で持たせる。
       これで**数字と数字の間隔が常に一定**になり、縦罫もちょうど中間に落ちる。
     ★gap を使わず padding-inline で間隔を作っているのは、罫（border-left）を
       グループとグループの**真ん中**に置くため。gap にすると罫が次の項目に寄る。 */
  .site-stats__grid{
    grid-template-columns:repeat(4,auto); justify-content:center; gap:0;
  }
  /* ★★2026-08-04（第33版）: 間隔を**セクションの左右の空き（`--edge`）より必ず狭く**する。
     見た目の隙間は padding×2 なので、`--edge` ＝ (100vw − 1200)/2 + 40 に対して
     padding ＝ (100vw − 1200)/4 + 16 と置けば **常に8px内側**に収まる（下限16px・上限40px）。
     旧 `clamp(24px,2.6vw,40px)` は 1200pxで31px＝隙間62px となり、
     その幅の左右の空き40pxを上回っていた（実測。1280px以上では問題なし）。
     ★`--edge` をそのまま参照しないのは、あの式の `100%` が使う場所の親幅で解決されるため
       （ここで書くとグリッド幅基準になって意図と変わる）。**vw で書くこと。** */
  .site-stats__item{ padding-inline:clamp(16px, calc((100vw - var(--wrap)) / 4 + 16px), 40px); }
  .site-stats__item + .site-stats__item{ border-left:1px solid var(--c-line); }
}

/* ------------------------------------------------------------ ヘッダーの段階開放
   横1列に「社名＋ナビ6＋電話＋CTA」を並べると1200px未満で詰まる（中間幅の崩れ）。
   ナビの横並びは実測で収まる1200px以上に限定する。 */
@media (min-width:1200px){
  /* ★FVの周囲の写真枠はこの幅から出す。1199px以下は中央のコピー（max-width 46em）と
     重なってしまうため出さない（実測）。旧構成の「横グラデのスクリム」は
     2026-08-03の組み替えで中央の楕円スクリムに変わったので、ここでの上書きは廃止した。 */
  .site-fv__pic{ display:block; }
  .sh-brand__lic{ display:block; }
  .sh-nav{ display:block; }
  .sh-nav__list a{ font-size:1rem; letter-spacing:0; }   /* 6項目を1行に収めるため16pxへ */
  .sh-nav__list{ gap:10px; }
  /* ★社名は「株式会社」「許可番号」（ともに12px）に対して**2倍前後**にして主従をはっきりさせる
     （ユーザー指示 2026-08-03）。1.125rem=18px では12pxとの差が足りず、上2行が同格に見えていた。
     ★★サイズ指定そのものは**基本スタイル側へ移した**（19px問題の解消・上のコメント参照）。
       この帯では下限だけを引き上げる＝1200〜1279pxでも社名が小さくなりすぎないようにする。 */
  .sh-brand__main{ font-size:clamp(1.2rem, 1.6vw, 1.5rem); }
  .sh-inner{ gap:var(--s2); }
  .sh-right{ gap:var(--s2); }
  .sh-burger{ display:none; }
  .sh-drawer{ display:none; }
}

/* ============================================ ヘッダーの間隔（1280px以上）
   1200pxでは余りが46pxしか無く広げられないため、この幅から配分を変える（ユーザー指摘
   「項目同士の空きが狭く窮屈」対応・2026-08-03）。
   ★.sh-right を伸ばし、.sh-nav に margin-left:auto を当てると、1箇所（社名｜ナビ）に
     溜まっていた余りがナビの**左だけ**へ寄り、ナビが電話側へ寄る＝社名=左／ナビ+電話+CTA=右。
     ★margin-inline:auto（左右均等＝ナビ中央）から margin-left:auto へ変更（ユーザー指示 2026-08-03
     「NAVIを電話番号側に寄せてほしい」）。**右側に auto を付け直さないこと**＝ナビが中央へ戻る。 */
@media (min-width:1280px){
  .sh-right{ flex:1 1 auto; gap:clamp(20px,2.2vw,40px); }
  .sh-nav{ margin-left:auto; margin-right:0; }
  .sh-nav__list{ gap:clamp(14px,1.5vw,26px); }   /* ≥1200px の gap:10px を上書き */
  /* 電話をナビから縦罫で切り離す＝「まとまり」と「間隔」を同時に作る。
     border は納品時のサニタイズで消えない（content/filter は消される＝R-CueZilla） */
  .sh-tel{ border-left:1px solid var(--c-line); padding-left:clamp(18px,1.6vw,30px); }
  .sh-cta__ar{ display:inline-block; transition:transform .3s var(--ease); }
  .sh-cta:hover .sh-cta__ar{ transform:translateX(4px); }
}

/* ★★1280〜1399px だけ間隔を締める（2026-08-04・レスポンシブ掃引で検出）。
   上の `min-width:1280px` は「余りが増える幅」を前提に間隔を一気に開くが、
   **1280pxの余りはそれを賄えない**。社名を大きくした（19px廃止・2026-08-03）ぶんも重なり、
   実測で **CTAが帯から +37px はみ出していた**（1320pxでも +11px）。
   ★1400px以上は実測で収まっているので**触らない**＝1440/1920pxの隙間配分（§8の表）は不変。
   ★この帯の値を緩めるときは `%LOCALAPPDATA%\ewg-tools\hdfit.mjs` 相当でCTAの右端を測り直すこと。 */
@media (min-width:1280px) and (max-width:1399px){
  .sh-right{ gap:clamp(14px, 1.2vw, 22px); }
  .sh-nav__list{ gap:clamp(10px, .95vw, 14px); }
  .sh-tel{ padding-left:14px; }
}

@media (min-width:1440px){
  .sh-cta{ padding-inline:var(--s4); }   /* 余りが273pxある幅からボタンを堂々とさせる */
}

/* ============================================ 広い画面のフッター
   ★★★2026-08-04（第34版・ユーザー判断「フッターは**左余白を広げる**で進行」）:
   2カラムになる 1200px 以上で、**左の余白を必ず列間より広くする**
   （ディレクター方針「左右の空きよりセクション内のアイテムの空きは狭くあるべき」）。
   改修前の実測 ＝ 1280px:左40 対 列間102 ／ 1440px:左98 対 115 ／ 1920px:左130 対 154 ＝**全部逆転**していた。
   → 左余白を `calc(var(--sf-colgap) + 20px)` ＝ **列間より常に20px広い**式で持つ。
     旧 `@media(min-width:1400px)` の `clamp(60px,6.8vw,130px)` はこの式に吸収した（1400px境界は不要になった）。

   ★★**左を広げたぶん、内容の右端も同じだけ右へ動く。** フッターの文字は白い面の
     **不透明域（面の90%地点まで）**に乗っていないとAAを割るので、面も一緒に広げる必要がある。
     検算（内容右端 ＝ 左余白 ＋ 18rem ＋ 列間 ＋ 26rem）:
       | 幅   | 左余白 | 内容右端 | 面の不透明端 | 余裕 |
       | 1200 |  116  |   916   |     972     | +56 |
       | 1280 |  122  |   928   |     991     | +63 |
       | 1440 |  135  |   954   |    1098     | +144|
       | 1920 |  174  |  1032   |    1098     | +66 |
     → 面は `clamp(1080px, 86%, 1220px)`。旧 `min(80%,1080px)`＋1600px例外 は**この1本にまとめた**。
   ★**代償**: 写真の可視幅が 1200pxで336→228px ／ 1440pxで468→342px に狭まる（1920pxはほぼ不変）。
     「左余白を広げる」を選んだ以上ここは避けられない＝面が右へ伸びるぶん写真が隠れる。
     写真を優先したくなったら、`--sf-colgap`（粗密）を縮める方が総量は稼げる。
   ★1199px以下は触っていない（1カラムなので列間そのものが無い＝この方針の対象外）。 */
/* ★2026-08-04（第35版）: 開始を 1200 → **1400px**。1200〜1399pxは 900pxからの1カラム帯に含める
   （2カラムにすると写真の見える幅が228〜289pxしか無く、人物が縦に割れる＝ユーザー指摘）。
   実測（2カラム時の「見える写真の幅」）: 1200px=228 ／ 1280px=289 ／ 1360px=307 ／ **1400px=316** ／ 1440px=342。 */
@media (min-width:1400px){
  .sf-inner, .sf-copy{ padding-left:calc(var(--sf-colgap) + 20px); }
  .sf-foot::before{ width:clamp(1080px, 86%, 1220px); }

  /* ★★★左余白を広げた副作用の手当て（同日・実測で発見）。
     面が右へ伸びたぶん**写真の見える範囲が右端の340px前後だけ**になり、
     子ども（PCクロップでは枠の65%の位置）が**面の裏に隠れて水しぶきしか見えなくなった**
     （1280pxで実測。1440pxでは人物の中心1047pxに対し面の不透明端が1098px＝完全に裏）。
     ★枠を狭めて人物を右へ動かす方法は、1200pxで枠326pxまで縮める必要があり
       「会社の顔を右下に**大きく**」（参考①のフッターDNA）が壊れる。
     → **枠の縦横比を変えて画像をパンする**方式にした:
        `aspect-ratio` をやめ **height:100%（フッター全高）× width:60%** の縦長の枠にすると、
        `cover` は高さ基準で拡大するので**横に画像がはみ出す＝はみ出したぶんパンできる**。
        `background-position:left` で左端を見せる＝子どもが枠の右寄り（約85%）に来て、
        見える範囲のほぼ中央に収まる。
     ★おまけに**写真の上辺の水平な切れ目も消える**（枠がフッター全高になるため）。
     ★`background-position` は素材の割り当てブロック（ファイル末尾）が
       `center/cover` で入れているので、**そちらより後ろで上書きする**必要がある（末尾の @media 参照）。 */
  .sf-bg{
    aspect-ratio:auto; width:min(60%, 1188px);
    top:0; bottom:0; height:auto;
  }
}

/* ============================================ 狭幅の縦積み順（ユーザー指示 2026-07-31）
   1列になったときは「画像 → テキスト」の順で見せる。DOM順は変えずCSSのorderで入れ替える
   （読み上げ順・SEOの見出し先行を保つため）。
   ≥900px は明示 grid-column / grid で配置しているため order の影響を受けない。 */
@media (max-width:899px){
  .site-duo{ display:flex; flex-direction:column; }
  .site-duo__pics{ order:-1; margin-top:0; margin-bottom:var(--s5); }
  .site-split2{ display:flex; flex-direction:column; }
  .site-split2__fig{ order:-1; }
  .site-cta{ display:flex; flex-direction:column; }
  /* ★★★2026-08-04（第29版）: 狭幅のCTAの水を「本文の上に置く帯」から**背景**へ変えた
     （ユーザー指示「この水の画像はあくまで背景として扱う形でよい。タブレット以下で縦並びになる時に、
       この水の上に文字を配置してもよい。水の写真は下に向けて消えていくような形に」）。
     旧＝`order:-1` の 16:9 の帯が本文の上に積まれ、**下端が水平にスパッと切れて**いた（768pxで実測 y635）。
     新＝PCと同じく Row 全体を覆う背景レイヤーにして、**下へ向かって消える縦マスク**を掛ける。
     ★`inset:0`（＝Row の高さいっぱい）にするのが重要。高さを px/vw で持たせると、
       本文が短い幅で水が Row からはみ出す（`.site-row--brand` には overflow:hidden を付けられない＝
       付けると巨大英字 CONTACT の上端が切れる・§3-7の★）。
     ★位置の基準は `.site-row--brand`。`.site-cta` に position:relative を付けないこと（§3-7の★）。
     ★マスクは 0%〜52% はベタ、そこから下へ抜く。抜けた先は面の `#006AB6` なので、
       **消えた先が白くならず「水が面に溶ける」**。下端まで水を残すと文字の足元が騒がしくなる。 */
  .site-cta__side{
    position:absolute; z-index:0; inset:0;
    width:auto; height:auto; aspect-ratio:auto; margin:0;
    /* ★消え始めは **200px**＝リード文が始まる（実測250px〜）より上。膜と同じく px で止める
       （% にすると狭い幅ほど文字が上の帯に来てAAを割る＝下の★★★の実測）。 */
    -webkit-mask-image:linear-gradient(180deg,#000 0px,#000 200px,rgba(0,0,0,.5) 340px,transparent 520px);
            mask-image:linear-gradient(180deg,#000 0px,#000 200px,rgba(0,0,0,.5) 340px,transparent 520px);
  }
}

/* ============ 下層: 定義リスト表（.site-dl）＝B2（下層コンポーネント台帳）
   /information（会社概要）／/recruit（募集要項）で使用。③の ＜table class="data"> を
   そのまま table 構造で組む（＜dl＞ に変えない）。狭幅は th/td を縦積みにして横スクロールを出さない。 */
.site-dl{
  width:100%; margin:var(--el-gap) 0 0; border-collapse:collapse;
  border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
}
.site-dl__row{ border-top:1px solid var(--c-line); }
.site-dl__row:first-child{ border-top:0; }
.site-dl__k{
  width:9.5em; padding:var(--s2) var(--s3) var(--s2) 0;
  font-family:var(--f-gothic); font-size:var(--fs-body); font-weight:700;
  color:var(--c-navy); text-align:left; vertical-align:top; white-space:nowrap;
}
/* ★2026-08-05: `text-wrap:pretty` は行末孤立の回避（375pxで「…12番8号」の最終行が「号」1文字、
   「…ともに歓迎）」が「迎）」2文字などで `responsive-audit` の [orphan] に落ちた）。
   ★表の値は③HTML版草案が正本なので**文言で逃げない**＝組版側で解く。 */
/* ★`word-break:auto-phrase` を併用する。表の値は「住所」「時刻＋条件」「手当名＋金額」など
   **短い語のかたまりの連続**なので、`pretty` だけでは最終行に2文字だけ残る折り方が消えなかった
   （実測「…12番8号」→「8号」／「…残業あり」→「あり」）。文節で折ると塊が保たれる。 */
.site-dl__v{ padding:var(--s2) 0; font-size:var(--fs-body); color:var(--c-ink); text-wrap:pretty; word-break:auto-phrase; }
/* ★箇条書き（募集要項の給与欄＝「・調整手当：…」）は**ぶら下げインデント**にする。
   ★の付いた行が折り返したとき、2行目が「・」の下に潜り込んで箇条書きに見えなくなるため
   （実測: 375〜1920px の全幅で折り返しが発生している）。 */
.site-dl__li{ display:block; padding-left:1em; text-indent:-1em; }
@media (max-width:599px){
  .site-dl,.site-dl__row,.site-dl__k,.site-dl__v{ display:block; width:auto; }
  .site-dl__row{ padding:var(--s2) 0; border-top:1px solid var(--c-line); }
  .site-dl__row:first-child{ border-top:0; }
  .site-dl__k{ padding:0 0 var(--s1); white-space:normal; }
  .site-dl__v{ padding:0; }
}

/* ============ 下層: 地図＋住所（.site-map）＝B3（下層コンポーネント台帳）
   /information（アクセス）で使用。APIキー不要の Google Maps 埋め込み（?q=住所&output=embed）。 */
.site-map{ margin:var(--el-gap) 0 0; }
/* ★2026-08-05: 地図が読めない環境（Artifactプレビューは CSP で外部iframeを遮断する／
   社内ネットワークで maps.googleapis.com が塞がれている等）でも**空の穴にしない**ための地。
   埋め込みが正常に描画されればタイルが不透明に覆うので、通常は見えない。 */
.site-map__frame{ aspect-ratio:16/9; background:linear-gradient(150deg,#BFDEEC,#8FC2DA); }
.site-map__frame iframe{ display:block; width:100%; height:100%; border:0; }
.site-map__addr{ margin:var(--s2) 0 0; font-size:var(--fs-body); color:var(--c-sub); text-wrap:pretty; word-break:auto-phrase; }

/* ============ 下層: ステップ（.site-step）＝B4（下層コンポーネント台帳）
   /recruit（応募の流れ）／/about/environment（キャリアステップ）で使用。
   角丸0・罫線で締める（参考①の形の掟）。

   ★★2026-08-05（ディレクター指示「タブレット時に3列になると1つだけ落ちる。4列・2列・1列のどれかに」）:
     旧実装は `display:flex; flex-wrap:wrap` ＋ `flex:1 1 160px` で、**列数が幅任せ**だった。
     4項目なので中間幅でちょうど3列になり、**4つ目だけが次の行へ落ちて 3+1 に割れていた**。
     → grid で列数を明示し、**4列 → 2列 → 1列**とだけ変化させる（3列を作らない＝どの幅でも割れない）。
     ★これは連番カード（`.site-merit__grid`）で同じ理由から「4枚は3+1に割れないよう2×2で固定」と
       決めてあるのと**同じ考え方**。項目数が固定の並びは列数を幅任せにしない。 */
.site-step{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
  margin:var(--el-gap) 0 0; padding:0; list-style:none;
}
@media (min-width:600px){
  .site-step{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .site-step{ grid-template-columns:repeat(4,1fr); }
}
.site-step__item{ padding-top:var(--s2); border-top:2px solid var(--c-line); }
/* ★★2026-08-05（ディレクター指摘「01 応募 の文字サイズが小さい」）:
   **番号（20px）より項目名（17px＝本文サイズ）のほうが小さい**という逆転が起きていた。
   ステップの主役は「応募」「面接日決定」という**項目名**なので、
   ・項目名 `--fs-body`(17px) → `--fs-h3`(20px)＝サイトのカード見出しと同じ格
   ・番号　 `--fs-h3`(20px) → `--fs-h2-sm`(22〜30px)＝順序が一目で追える大きさ
   に上げた。★**新しいサイズ値は作っていない**（既存トークンの入れ替えのみ＝種類数は増えない）。 */
.site-step__no{
  display:block; margin:0 0 var(--s1);
  font-family:var(--f-en); font-size:var(--fs-h2-sm); font-weight:700;
  letter-spacing:.04em; line-height:1.2; color:var(--c-aqua-ink);
}
.site-step__ttl{ margin:0; font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600; line-height:1.6; color:var(--c-navy); }
.site-step__body{ margin:var(--s1) 0 0; font-size:var(--fs-body); color:var(--c-sub); }

/* ============ 下層: 部品の直後に続く散文の余白（全ページ共通）
   ★★2026-08-05（ディレクター指摘「応募の流れ：上部が4項目ごとの見せ方なのに、下の文章が地続きで見にくい。
     『応募』『面接日決定』の文字と下の文字の間に適切な余白を」）。
     実測すると **部品 → 散文の間が 0px**（`.site-step` `.site-dl` とも）。
     このサイトの部品は「自分の上に `--el-gap` を持つ」流儀（`margin:var(--el-gap) 0 0`）で作ってあるが、
     **散文（`.site-prose`）は上マージンを持たない**ため、部品の直後に置くと隙間ゼロで貼り付き、
     4項目の並びの続きの文章に見えてしまう。
   ★§3-7 の「セクション内の要素間＝`--el-gap`」に合わせる（新しい値を作らない）。
   ★同じ事故は `/recruit`（要項表→補足文）でも起きていたので、部品をまとめて対象にする。 */
.site-dl + .site-prose,
.site-step + .site-prose,
.site-tl + .site-prose,
.site-cards + .site-prose,
.site-merit__grid + .site-prose,
.site-acc + .site-prose,
.site-pay + .site-prose,
.site-gates + .site-prose,
.site-voice + .site-prose,
.site-map + .site-prose{ margin-top:var(--el-gap); }

/* ============ 下層: Row背景・淡水色2（.site-row--tint2）＝B1（下層コンポーネント台帳）
   /about/job（一日の仕事の流れ）で使用。既存 .site-row--tint より一段濃い淡水色（片側ブリードの面と同色）。
   ★本来は .site-row--tint の隣（§3-7節）に置く値だが、下層コンポーネント台帳の指示によりB群と
     まとめてここに追記する。 */
.site-row--tint2{ background:var(--c-bg-tint2); }

/* ============ 下層: 写真つきカード（.site-cards）＝B5（下層コンポーネント台帳）
   /about/job（普段対応している現場・3枚）／/about（こんな方におすすめ・4枚・写真なし）で使用。
   ★箱と箱の距離（gap）は左右の空き（.site-wrap の --gut）より狭くする（design.md §3）。

   ★★列数は `auto-fit` で決めない（2026-08-04・指令塔側の実測で差し戻し）。
     `repeat(auto-fit,minmax(240px,1fr))` は 768px で **3枚が 2+1 に割れ**、
     最後の1枚だけが次の行に取り残される（実測: 2列 326px ＋ 3枚目が単独行）。
     4枚版も同じ理屈で 3+1 に割れる。**既存の `.site-merit__grid` が
     「4枚は3+1に割れないよう2×2で固定する」と明示指定にしてあるのと同じ理由**なので、
     ここも段階を明示する。幅の境目はサイト既存のブレークポイント（1199/899/599）に合わせた。
   ★≤899px の1列化は `:not(.site-cards--4)` で3枚版に限定する。付けないと、
     ソース順が後のこの規則が4枚版の2列指定まで打ち消してしまう（同一詳細度）。 */
.site-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s4) var(--s3); list-style:none; margin:var(--el-gap) 0 0; padding:0;
}
.site-cards--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1199px){
  .site-cards--4{ grid-template-columns:repeat(2,1fr); }   /* 4枚 → 2×2 */
}
@media (max-width:899px){
  .site-cards:not(.site-cards--4){ grid-template-columns:1fr; }  /* 3枚 → 1列（写真つきなので2列にすると本文が狭すぎる） */
}
@media (max-width:599px){
  .site-cards--4{ grid-template-columns:1fr; }
}
/* ★背景（プレースホルダのグラデ）は `.site-ph` が持つ。ここは比率と余白だけ。
   HTML側は `class="site-cards__ph site-ph"` の二重クラスにすること＝
   実素材の割り当ては `.site-ph[data-ph="…"]` で書く契約のため（台帳 §C の★★）。 */
.site-cards__ph{
  margin:0 0 var(--s3);
  aspect-ratio:4/3;
}
.site-cards__ttl{
  margin:0 0 var(--s1);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  color:var(--c-navy);
}
.site-cards__body{ margin:0; font-size:var(--fs-body); color:var(--c-sub); }

/* ============ 下層: 時刻つきタイムライン（.site-tl）＝B6（下層コンポーネント台帳）
   /about/job（一日の仕事の流れ）で使用。左に縦罫、項目ごとに横罫（実体のborderで区切る＝
   ::before{content}は使わない。CueZillaのAddCssInfoがcontentを除去するため）。
   時刻は英字書体・水色ink。狭幅は時刻を上に積む。 */
.site-tl{
  margin:var(--el-gap) 0 0; padding:0; list-style:none;
  border-left:2px solid var(--c-line);
}
.site-tl__item{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  padding:var(--s3) 0 var(--s3) var(--s4);
  border-bottom:1px solid var(--c-line);
}
.site-tl__item:first-child{ padding-top:0; }
.site-tl__item:last-child{ border-bottom:0; }
.site-tl__time{
  flex:0 0 5em;
  font-family:var(--f-en); font-size:var(--fs-h3); font-weight:700;
  letter-spacing:.02em; color:var(--c-aqua-ink);
}
.site-tl__ttl{ margin:0 0 var(--s1); font-family:var(--f-mincho); font-size:var(--fs-body); font-weight:600; color:var(--c-navy); }
.site-tl__body{ flex:1 1 240px; margin:0; font-size:var(--fs-body); color:var(--c-sub); }
@media (max-width:599px){
  .site-tl__item{ flex-direction:column; gap:var(--s1); }
  .site-tl__time{ flex-basis:auto; }
}

/* ============ 下層: 罫で囲む注意ブロック（.site-note）＝B7（下層コンポーネント台帳）
   /about/job（大変なことも、正直に）で使用。写真なし・中央組み・面は塗らない（design.md）。 */
.site-note{ margin:var(--el-gap) 0 0; }
.site-note__inner{
  max-width:46em; margin-inline:auto;
  padding:var(--s5) var(--s4);
  border:1px solid var(--c-line);
}
.site-note__inner p{ margin:0; font-size:var(--fs-body); color:var(--c-ink); }

/* ============ 共用: 対応範囲の注記（2026-08-25）
   ※は**HTML側の実体文字**（`::before{content}` はCueZillaのAddCssInfoで除去される）。
   面は塗らない・角丸なし（§3-1）。サイズは `--fs-body`（トークン定義「注記はこの値以上」）。 */
/* /work の本文の直後に続ける注記。本文と同じ幅に乗るので上罫で切る。 */
.site-prose__note{
  margin:var(--s3) 0 0; padding-top:var(--s2);
  border-top:1px solid var(--c-line);
  font-size:var(--fs-body); line-height:1.7; color:var(--c-sub);
}
/* お問い合わせフォームの送信直前。フォームの dl 群と送信ボタンの間に入るので上下に余白を持たせる。 */
.site-form__note{
  max-width:46em; margin:var(--s4) auto 0; padding-top:var(--s3);
  border-top:1px solid var(--c-line);
  display:grid; gap:var(--s1);
}
.site-form__note p{
  margin:0; padding-left:1.1em; text-indent:-1.1em;
  font-size:var(--fs-body); line-height:1.7; color:var(--c-sub);
}

/* ============ 下層: 濃い面の給与パネル（.site-pay）＝B8（下層コンポーネント台帳）
   /about/environment（給与モデル）で使用。.site-stats の数字表現（数字＋小さい単位）を濃地版として流用。
   ★濃地なので文字は白／水色系のみ。--c-aqua・--c-aqua-ink は濃地の文字に使わない
     （design.md §1「白地に文字を載せるときの鉄則」の逆＝濃地は白系のみ）。
   ★★2026-08-05: 補助文字を **--c-aqua-lite → --c-on-brand** へ変更。
     この面の地は **水色ink(#006AB6)** で、--c-aqua-lite（紺地用）だと **3.67:1 でAA割れ**していた
     （①contrast-pixels・29幅すべてで検出）。意匠（白の数字＋水色の単位）は変えていない。 */
.site-pay{ margin:var(--el-gap) 0 0; }
.site-pay__num{
  margin:0;
  font-family:var(--f-mincho); font-size:var(--fs-num); font-weight:600;
  line-height:1.1; letter-spacing:.01em; color:#fff;
  white-space:nowrap;
}
.site-pay__num small{
  font-family:var(--f-gothic); font-size:var(--fs-lead); font-weight:700;
  letter-spacing:.04em; color:var(--c-on-brand); margin-right:2px;
}
.site-pay__unit{
  font-family:var(--f-gothic); font-size:var(--fs-lead); font-weight:700;
  letter-spacing:.04em; color:var(--c-on-brand); margin-left:2px;
}
.site-pay__note{ margin:var(--s2) 0 0; font-size:var(--fs-body); color:var(--c-on-brand); }

/* ============ 下層: 定義リスト表・濃地版（.site-dl--on）＝B2追加（下層コンポーネント台帳）
   /about/environment（給与モデルの内訳）で使用。罫は白の半透明、__k は水色、__v は白。
   ★★2026-08-05: `__k` を **--c-aqua-lite → --c-on-brand** へ（上の .site-pay と同じ理由＝
     地が水色ink面なので紺地用の色では 3.67:1 でAA割れ。手当名7項目×29幅＝203件が落ちていた）。 */
.site-dl--on{ border-top-color:rgba(255,255,255,.3); border-bottom-color:rgba(255,255,255,.3); }
.site-dl--on .site-dl__row{ border-top-color:rgba(255,255,255,.3); }
.site-dl--on .site-dl__k{ color:var(--c-on-brand); }
.site-dl--on .site-dl__v{ color:#fff; }

/* ============ 下層: ゲートカード（.site-gates）＝B9（下層コンポーネント台帳）
   /about（各ページのご案内・ハブの本体＝最重要）で使用。行き先4枚のカード・各枚が丸ごと1リンク。
   hoverの言語は .site-next と揃える（面が --c-aqua-ink へ反転・矢印が右へ動く）。
   ★反転先に --c-aqua を使わない（白地2.0:1でAA割れ）。写真枠はプレースホルダの背景を
     `.site-ph` 側に任せ、ここでは比率と余白だけを持つ。 */
.site-gates{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s3); margin:var(--el-gap) 0 0; padding:0; list-style:none;
}
.site-gates__item{
  display:block; padding:var(--s4);
  background:var(--c-bg-tint2); color:var(--c-ink);
  text-decoration:none;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.site-gates__ph{ margin:0 0 var(--s3); aspect-ratio:4/3; }
.site-gates__ttl{
  display:block; margin:0 0 var(--s1);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  color:var(--c-navy);
  transition:color .3s var(--ease);
}
.site-gates__lead{
  display:block; font-size:var(--fs-body); color:var(--c-sub);
  /* ★`text-wrap:pretty` は**行末孤立の回避**（`.site-next__lead` と同じ対処）。
     900pxで「…キャリアステップ」の「プ」1文字、1024pxで「…身につく力」の「く力」2文字が
     最終行に取り残され `responsive-audit` の [orphan] で落ちた（2026-08-04 実測）。
     本文は③HTML版草案が正本なので**文言で逃げない**＝組版側で解く。
     ★`pretty` ではなく `balance`。この一言は2〜3行の短文なので、
       「最終行だけ短くしない」（pretty）より**全行の長さを均す**（balance）方が確実に解ける。
       実測: pretty のままだと 1024px の「く力」が残った。
       長い散文（`.site-next__lead`）は balance の対象行数を超えるので、あちらは pretty のまま。 */
  text-wrap:balance;
  transition:color .3s var(--ease);
}
.site-gates__ar{
  display:inline-block; margin-top:var(--s2);
  font-family:var(--f-en); line-height:1; color:var(--c-aqua-ink);
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.site-gates__item:hover{ background:var(--c-aqua-ink); color:#fff; }
.site-gates__item:hover .site-gates__ttl,
.site-gates__item:hover .site-gates__lead{ color:#fff; }
.site-gates__item:hover .site-gates__ar{ color:#fff; transform:translateX(5px); }
@media (max-width:599px){
  .site-gates{ grid-template-columns:1fr; }
}

/* ============ 下層: 匿名スタッフカード（.site-voice）＝B10（下層コンポーネント台帳）
   /about/staff（先輩スタッフの声・このページの主力）で使用。顔写真は使わない匿名カード2枚。
   写真枠の比率は .site-ph--lg（463/323）に揃える。プレースホルダの背景は `.site-ph` 側に任せる。 */
.site-voice{
  display:grid; grid-template-columns:repeat(2,1fr);
  /* ★★2026-08-05（ディレクター指摘「2人が並ぶときの余白を少し広めに。文字量に対して空きが狭い」）:
     間隔を `--s3`(24px) → `--s5`(56px) へ。このカードは**面も枠も持たない**（写真＋文字だけ）ので、
     2枚を隔てているのは**間隔だけ**。本文が5〜6行と密度が高く、24pxでは左右の段落が続き物に見えていた。
     ★design.md §3「左右の空き ＞ セクション内のアイテムの空き」は維持している
       （1440pxで 左右の空き152px ＞ カード間56px）。 */
  gap:var(--s5); margin:var(--el-gap) 0 0;
}
.site-voice__ph{ margin:0 0 var(--s3); aspect-ratio:463/323; }
.site-voice__meta{
  margin:0 0 var(--s1);
  font-family:var(--f-gothic); font-size:var(--fs-body); font-weight:700;
  color:var(--c-sub);
}
.site-voice__lead{
  margin:0 0 var(--s2);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  color:var(--c-navy);
}
.site-voice__body{ margin:0; font-size:var(--fs-body); color:var(--c-ink); }
@media (max-width:599px){
  .site-voice{ grid-template-columns:1fr; }
}

/* ============ 下層: 連番カード「3枚」版（.site-merit__grid--3）
   ★★2026-08-05（ディレクター指摘「トップに同じ体裁があるのに罫線の仕様などが異なる」）。
   トップの型8（手当）は **4枚を2×2** で組んであり、`@media(min-width:768px)` に
   「4枚は3+1に割れないよう2×2で固定する」と明示されている。
   下層の3枚（/about/job この仕事で身につく力／/about/environment 手厚い手当）は
   その2列指定に乗ったため **2+1 に割れ、3枚目だけが次の行に取り残されていた**（1280pxで実測）。
   → 3枚用の段階を別に持つ。カードの面・3px罫・連番・余白はトップと同一のまま**列数だけ**変える。
   ★狭幅で2列にしない（写真のないカードでも本文が2〜3行あり、半幅では読みにくい）。 */
.site-merit__grid--3{ grid-template-columns:1fr; }
@media (min-width:900px){
  .site-merit__grid--3{ grid-template-columns:repeat(3,1fr); }
}

/* ============ ブログ記事末の署名ブロック（.site-postsign）＝B13（下層コンポーネント台帳）
   ★③HTML版草案の「署名：（※要回収）／記事末リンクボタン：お問い合わせ」への実装
     （ディレクター指示 2026-08-05「キャッチコピーや社名などとボタンを合わせて」）。
   ★**CueZillaのブログ本文（フリーHTML）に毎回貼るスニペット**。実体は
     `2_Claude作業/ブログ記事末_署名ブロック.html`（コピー用の正本）。
     ★スニペット側に `＜script＞` を書かない（フリーHTML内のscriptは実行されない・R-16）。
     ★スニペット側に `style=` を書かない（CueZillaのAddCssInfoの影響を受けず、この共通CSSだけで効かせる）。
   ★意匠の根拠: 記事本文は白地なので、**淡水色の面**で「記事が終わってサイトの声に戻る」ことを示す
     （連番カードの鉄則と同じ＝面と地の明度差で塊を作る）。角丸0・影なしは全域の契約どおり。
   ★キャッチはFVと同じ一文を使う＝**新しいコピーを作らない**（サイト全体で言葉を増やさない）。 */
.site-postsign{
  margin:var(--s5) 0 0;
  padding:var(--s5) var(--s4);
  background:var(--c-bg-tint);
  text-align:center;
}
.site-postsign__catch{
  margin:0 0 var(--s2);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  line-height:1.65; letter-spacing:.08em; color:var(--c-navy);
  text-wrap:balance;
}
.site-postsign__name{
  margin:0 0 var(--s4);
  font-family:var(--f-mincho); font-size:var(--fs-body); font-weight:600;
  letter-spacing:.06em; color:var(--c-ink);
}
/* ★社名の「株式会社」だけ補助文の扱いにする（ヘッダー・フッターと同じ主従） */
.site-postsign__co{
  display:block; margin:0 0 var(--s1);
  font-family:var(--f-gothic); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.06em; color:var(--c-sub);
}
.site-postsign__acts{ margin:0; }

/* ============ 下層: アコーディオン（.site-acc）＝B11（下層コンポーネント台帳）
   /faq（仕事について／待遇について／応募について）で使用。＜details＞は使わない
   （このBrowserペインで凍結する既存教訓）。開閉は assets/js/site.js の1関数
   （hiddenの付け外しのみ・高さアニメーションなし）。他の項目は閉じない＝複数展開可。 */
.site-acc{ margin:var(--el-gap) 0 0; border-top:1px solid var(--c-line); }
.site-acc__item{ border-bottom:1px solid var(--c-line); }
.site-acc__q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; min-height:44px; margin:0; padding:var(--s3) 0;
  background:none; border:0; border-radius:0; appearance:none; -webkit-appearance:none;
  font-family:var(--f-mincho); font-size:var(--fs-body); font-weight:600; line-height:normal;
  color:var(--c-navy); text-align:left; cursor:pointer;
}
/* ★`text-wrap:pretty` は**行末孤立の回避**。375pxで「…大丈夫ですか？」「…応募すればいいですか？」の
   最終行が「か？」の2文字だけになり `responsive-audit` の [orphan] で落ちた（2026-08-04 実測）。
   質問文は③HTML版草案が正本なので**文言で逃げない**＝組版側で解く。 */
.site-acc__q > span:first-child{ flex:1 1 auto; text-wrap:pretty; }
.site-acc__ar{
  flex:none; font-family:var(--f-en); font-size:var(--fs-h3); font-weight:400; line-height:1;
  color:var(--c-aqua-ink); transition:transform .3s var(--ease);
}
.site-acc__item.is-open .site-acc__ar{ transform:rotate(45deg); }
.site-acc__a{ padding:0 0 var(--s3); }
.site-acc__a p{ margin:0; font-size:var(--fs-body); color:var(--c-ink); }

/* ============ 下層: 法務テキスト（.site-legal）＝B14（下層コンポーネント台帳）
   /privacypolicy で使用。本文は `templates/privacy-policy.html`（会社承認の定型・改変禁止）で、
   **9つの小見出し＋段落＋番号リスト**という、このサイトの他のページには無い組み方になる。
   → `.site-prose` は `> p` しか面倒を見ない（h3・ol が素のまま）ため、この1ページ用に足す。
   ★新しい font-size は作らない（`--fs-h3` / `--fs-body` の使い回し＝15種の契約を守る）。
   ★小見出しの上は `--s5`（56px）＝**条と条の切れ目**を作る。段落間 `--s3` より明確に大きくして
     「9つの条が並んでいる」ことを余白だけで示す（罫線は引かない＝B7不採用と同じ理由）。
   ★1行の長さは `.site-prose--center` と同じ 46em に揃える（法務文は行が長いと追えない）。 */
.site-legal{ max-width:46em; }
.site-legal__ttl{
  margin:var(--s5) 0 var(--s2);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  line-height:1.6; letter-spacing:.06em; color:var(--c-navy);
  word-break:auto-phrase;
}
/* ★行末孤立の回避。本文は会社承認の定型文＝**文言で逃げられない**ので組版側で解く。
   375/600px で「…新サービス・／ため」「…必要な範囲／とき」等が2文字残りになり
   ⑦responsive-audit の [orphan] が4件出た（2026-08-05 実測）。
   ★★`text-wrap:pretty` **だけでは4件とも消えなかった**（`.site-acc__q` では効いたが、
     長い条項文＋ぶら下げインデントの箇条書きには効かない）。下の `li` に
     `word-break:auto-phrase`（日本語を文節で折る）を足して **NG 0**。
     ＝**箇条書きの行末孤立は auto-phrase で解く**。 */
.site-legal > p{ margin:0 0 var(--s3); text-wrap:pretty; }
.site-legal > p:last-child{ margin-bottom:0; }
/* 番号リスト＝定型文の「(1)(2)…」に相当する箇条書き。マーカーは本文色より弱くしない
   （法令の条項なので装飾扱いにしない）。ぶら下げは `padding-left` で作る。 */
.site-legal__list{
  margin:0 0 var(--s3); padding-left:1.5em;
  font-size:var(--fs-body); color:var(--c-ink);
}
.site-legal__list > li{ margin:0 0 var(--s1); line-height:1.9; text-wrap:pretty; word-break:auto-phrase; }
.site-legal__list > li:last-child{ margin-bottom:0; }
/* 電話は他ページと同じ扱い（水色ink・下線なし）。タップ領域は行の高さで確保される */
.site-legal__tel{ color:var(--c-aqua-ink); font-weight:700; }

/* ==========================================================================
   支給画像の割り当て（2026-07-31 受領・AdobeStock＋亀岩の洞窟）
   --------------------------------------------------------------------------
   ★スロットの指定は data-ph 属性で行う。HTML構造とレイアウト（比率・マスク・
     ブリード座標）は上の各型の定義が正で、ここは background だけを差し替える。
   ★差し替え・追加支給のときも、このブロックの url() を変えるだけでよい。
   ★画像は assets/img/*.webp（原本は 0_受領素材/images/。加工＝比率クロップのみ）。
   ★3点は現場・自社写真が未支給のため、支給素材からの代用で埋めている（2026-07-31・ユーザー判断）。
     work-main は蛇口の流水と手元、work-sub は無人の水回り、footer-face は屋外の水しぶき。
     撮影素材が入り次第この3行の url() を差し替える。
   ★work-main は 2026-08-03 に差し替えた（ユーザー指示「音で見つけ のセクションメイン画像のみ差し替え」）。
     旧＝AdobeStock_2063385913 の手元アップだったが、これは grow-split（06_未経験育成）と**同一カット**で、
     間に中間バンド282pxしか挟まらず使い回しが直接見えていた。新＝AdobeStock_39928836（蛇口の流水と手元）。
     クロップは left2400 top800 3200x2232 → 1400x976。**作業員の写真は 06 の専有に戻したので、
     ここに 2063385913 系を戻さないこと。**
   ★footer-face は「顔アップ→引きで水を見せる」指示（2026-08-03）に対応し、引き構図へ
     差し替え済み。水しぶきが素材の左側にあり白い面に隠れるため、左右反転して水を右
     （可視側）へ回してある。
   ========================================================================== */
/* ★FVの中央＝亀岩-2。**白フェードが焼き込み済みなので cover で切らず contain 相当で全面を出す**
   （要素側で aspect-ratio を画像比に合わせてあるので 100% 100% ＝ 無変形・無トリミング） */
.site-fv__hero[data-ph="fv-nomizo"]{     background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-nomizo.webp) center/100% 100% no-repeat; }
/* 周囲のランダムな写真枠 */
.site-fv__pic[data-ph="fv-life-water"]{  background-image:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-life-water.webp); }
.site-fv__pic[data-ph="fv-home"]{        background-image:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-home.webp); }
.site-fv__pic[data-ph="fv-kitchen"]{     background-image:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-kitchen.webp); }
.site-fv__pic[data-ph="fv-drink"]{       background-image:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-drink.webp); }
/* 水の帯＝白をアルファで抜いた切り抜き素材。波だけを見せる（青グラデは重ねない）。
   ★★2026-08-03（第25版）: **地の `#fff` を外した。** 素材側で白を抜いてあるのに
     背景色に白を敷いていたため、`opacity:.9` の**ほぼ不透明な白い矩形**が帯の全面に乗り、
     その下にある亀岩を丸ごと消していた（1440px実測＝亀岩 y612〜1245 のうち y722 以降が真っ白）。
     ＝「亀岩が薄い」のもう一つの真因。**`#fff` を書き戻さないこと。** */
.site-fv__band[data-ph="fv-water-band"]{ background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-water-band.webp) center/100% 100% no-repeat; }
.site-ph[data-ph="belief-main"]{         background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/belief-main.webp) center/cover no-repeat; }
.site-ph[data-ph="belief-sub"]{          background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/belief-sub.webp) center/cover no-repeat; }
/* ★★★2026-08-25: grow-split を差し替え（ユーザー支給 AdobeStock_737559046）。
   旧＝AdobeStock_2063385913（作業員の手元アップ）。新＝道路を掘った穴の中で作業する現場
   （工具とバケツが並んだ路上＋ヘルメットの作業員）。**このセクションの専有カット**で、
   work-main との使い回しは起きていない。
   ★原本は 7108×4744の16MBなので **1800×1201 / JPEG q86（663KB）に缮してある**。
   ★位置は `center` でなく **50% 62%**＝主役の作業員が画面下寄りなので、
     center だと紬いパネルで人が切れる。 */
.site-split2__fig[data-ph="grow-split"]{ background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/grow-split2.webp) 50% 62%/cover no-repeat; }
/* ★CTAの写真は**ブランド色の膜を重ねてから**置く（ユーザー指示 2026-08-03「水の背景を自然に水色に
   なじませてほしい」）。素材（水面）は明るいシアンで、面の水色ink #006AB6 とは**明度も色相も離れている**ため、
   マスクで端をぼかすだけでは境目が線として見えていた。左ほど濃く効く横グラデで写真を面の色へ寄せ、
   右へ行くほど水を見せる。★マスク（≥900px の .site-cta__side）と**セットで効く**ので片方だけ外さないこと。 */
.site-cta__side[data-ph="cta-side"]{
  background:
    linear-gradient(to right,
      rgba(0,106,182,.96) 0%, rgba(0,106,182,.78) 26%,
      rgba(0,106,182,.52) 58%, rgba(0,106,182,.42) 100%),
    url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/cta-side.webp) center/cover no-repeat;
}
/* ★★狭幅は膜の向きを**横→縦**に変える（2026-08-04・第29版）。
   PCの横グラデは「左＝文字／右＝水」の非対称レイアウト専用で、左ほど濃い。
   狭幅では水が全幅の背景になり**文字が右端まで乗る**ため、そのままだと
   右側（膜42%）の明るい水面に白文字が乗ってコントラストが落ちる。
   → 全面に効く縦グラデへ。上ほどやや薄く（水を見せる）、下へ行くほど面の色に寄せる。
   ★この値と `.site-cta__side` の縦マスクはセット。片方だけ変えると
     「消えたはずの下端に濃い膜だけ残る」状態になる。 */
/* ★★★膜の濃さは**実測で決めてある**（2026-08-04）。初版は上から .70→.96 の緩い縦グラデにしたが、
   **リード文（小さい文字＝AAは4.5:1が必要）が 3.44〜3.66:1 で全8幅NG**になった
   （`contrast-pixels`。素材の水は rgb(209,238,250) の明るいシアンで、.78 の膜では地色が
    rgb(46,135,197) までしか沈まない＝面の #006AB6 より明るい）。
   → **文字が始まる高さから一気に面の色へ寄せる**形に組み直した。
   ★★★止め位置は **% ではなく px**（2回目の実測で判明）。%にすると
     「文字がRowの何%の位置に来るか」が幅ごとに変わる＝375pxではRowが795pxまで伸びて
     見出しが 17.8% の位置に来る（768pxでは 25.5%）ので、**狭い幅ほど文字が薄い帯に乗る**。
     実際 %版では 375px の見出しが 2.86:1（要3:1）で落ちた。
     文字の**実座標**は幅が変わってもほぼ動かない（見出しの上端 141〜196px／リードの上端 250〜350px）ので、
     px で止めれば全幅で同じ関係になる。
     ・0〜100px  … .50〜.58＝**水がいちばん見える帯**（巨大英字 CONTACT が乗る）
     ・〜175px   … .84 へ。見出し（大きい文字＝3:1）の上端がこの直後
     ・〜245px   … .94。リードの上端（250px〜）に間に合わせる
   ★上のマスク（200pxから抜き始め）と**合わせて**効く。マスクが抜けた先は面の #006AB6 なので、
     濃い膜 → 面、と連続して見える。**どちらか片方だけ緩めると必ずAAを割る。** */
@media (max-width:899px){
  .site-cta__side[data-ph="cta-side"]{
    background:
      linear-gradient(180deg,
        rgba(0,106,182,.50) 0px, rgba(0,106,182,.58) 100px,
        rgba(0,106,182,.84) 175px, rgba(0,106,182,.94) 245px,
        rgba(0,106,182,.96) 100%),
      url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/cta-side.webp) center/cover no-repeat;
  }
}
.site-ph[data-ph="work-main"]{           background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/work-main.webp) center/cover no-repeat; }
.site-ph[data-ph="work-sub"]{            background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/work-sub.webp) center/cover no-repeat; }

/* ---- 下層の割り当て（2026-08-05・AdobeStock 18点を追加購入して19枠を実装）----------
   ★経緯: 当初は受領20点の範囲で5枠しか埋まらなかった（未使用4点がすべて「白背景の水しぶき・
     水面」の抽象カットで、現場・スタッフ・職場・休日を写したものが1枚も無かったため）。
     ディレクターが不足分を選定・購入して 2026-08-05 に18点を追加格納 → **19枠を実装**。
     調達の経緯と候補の選定理由は `2_Claude作業/画像スロット_追加調達リスト.md`。
   ★**プレースホルダは全枚埋まった**。
     `ceo-main` / `ceo-sub` は 2026-08-25 にディレクター支給の写真を当てた（AdobeStock_2019985521）。
     ★**顔の無い胸元のカット**（作業着にネクタイ、胸に手を当てる）なので、
       「実在の代表取締役にストック写真を当てない」（design.md §7）に抵触しない。
       同じ理由で /about/staff も顔を写していない。`aria-label` も写真の中身に合わせて直してある。
     ★`ceo-sub` は**同じ写真の手元を寄った別トリミング**（原本の46%幅を切り出して900px）。
       小さい枚を空けるとグラデのプレースホルダが実写真の上に重なって**画像欠損に見える**ため。
       1枚の写真を2枚で使うのは work-meter / job-scene-meter と同じ手当て（主題が同一）。
   ★同じ写真を2枠で使っている箇所（いずれも**主題が同一**＝design.md の「同じ場面」に該当）:
     ・`work-meter` と `job-scene-meter`（水道メーター）
     ・`job-scene-road` と `gate-job` ／ `env-holiday` と `gate-env` ／ `staff-atmos` と `gate-staff`
       → ゲートカードは「行き先ページの絵を小さく見せる」枠なので、**同じ絵であることが機能**。
   ★`sound-split`（音で見つける）だけは写真ではなく**水面の波紋**のまま。音＝振動＝波紋の比喩で、
     音聴作業そのものを写したカットが存在しないため。/work と /about/job が共有する。
   ★★**この19枠は実画像を入れた状態で①実描画コントラストを再測済み**
     （プレースホルダのままの合格は信用できない＝写真を入れたら必ず測り直す）。 */
/* /company（私たちについて） */
/* ★位置は center でなく **50% 35%**＝主題の「胸に当てた手」が写真の中心よりやや上にあるため、
   `.site-ph--lg` の縦長パネルに center で入れると手が下に外れる。 */
.site-ph[data-ph="ceo-main"]{            background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/ceo-main.webp) 50% 35%/cover no-repeat; }        /* 作業着で胸に手を当てる（顔なし） */
/* ★**形式は他の写真と揃えて .webp**（2026-08-25）。当初 .jpg で入れたが、デプロイ先で
   表示されない事象があったため、他の19枚と同じ webp に統一した。jpg はリポジトリに残してある。 */
/* ★ceo-sub の割り当ては 2026-08-25 に外した（手元寄りの小さい枚を削除＝ディレクター指示）。
   画像を復活させる場合は assets/images/ceo-sub.jpg が残してある。 */
/* /work（業務案内） */
.site-ph[data-ph="work-repair"]{         background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/work-repair.webp) center/cover no-repeat; }      /* 道路の掘削と工具＝上水道漏水修繕工事 */
.site-ph[data-ph="work-repair-sub"]{     background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/work-repair-sub.webp) center/cover no-repeat; }  /* 道路から水が噴き出す＝漏水そのもの */
.site-ph[data-ph="work-meter"]{          background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/work-meter.webp) center/cover no-repeat; }       /* メーターボックス内の水道メーター */
.site-ph[data-ph="work-meter-sub"]{      background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/work-meter-sub.webp) center/cover no-repeat; }   /* 配管をつなぐ手元 */
.site-split2__fig[data-ph="sound-split"]{ background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/sound-split.webp) center/cover no-repeat; }     /* 水面の波紋＝音の比喩 */
/* /about/job（仕事を知る） */
.site-ph[data-ph="job-scene-road"]{      background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/job-scene-road.webp) center/cover no-repeat; }   /* 道路を掘る工事 */
.site-ph[data-ph="job-scene-home"]{      background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/job-scene-home.webp) center/cover no-repeat; }   /* 家庭のキッチンを点検 */
.site-ph[data-ph="job-scene-meter"]{     background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/job-scene-meter.webp) center/cover no-repeat; }  /* 水道メーター */
.site-ph[data-ph="job-merit"]{           background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/job-merit.webp) center/cover no-repeat; }        /* 現場で記録する作業員 */
.site-ph[data-ph="job-merit-sub"]{       background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/job-merit-sub.webp) center/cover no-repeat; }    /* 2人で確認する */
/* /about/environment（働く環境） */
.site-ph[data-ph="env-holiday"]{         background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/env-holiday.webp) center/cover no-repeat; }      /* テントの下で休憩・水分補給 */
.site-ph[data-ph="env-holiday-sub"]{     background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/env-holiday-sub.webp) center/cover no-repeat; }  /* 日陰で休憩する後ろ姿 */
/* /about/staff（スタッフ紹介）★顔は写さない（実在の社員と誤読させない） */
.site-ph[data-ph="staff-voice-1"]{       background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/staff-voice-1.webp) center/cover no-repeat; }    /* レンチを持つ手＋洗面台 */
.site-ph[data-ph="staff-voice-2"]{       background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/staff-voice-2.webp) center/cover no-repeat; }    /* 点検記録の手元 */
.site-ph[data-ph="staff-atmos"]{         background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/staff-atmos.webp) center/cover no-repeat; }      /* 4人が図面を囲む */
.site-ph[data-ph="staff-atmos-sub"]{     background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/staff-atmos-sub.webp) center/cover no-repeat; }  /* 上から見た打ち合わせ */
/* /about（ハブのゲートカード4枚）＝行き先ページの絵を小さく再掲する */
.site-ph[data-ph="gate-job"]{            background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/gate-job.webp) center/cover no-repeat; }
.site-ph[data-ph="gate-env"]{            background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/gate-env.webp) center/cover no-repeat; }
.site-ph[data-ph="gate-staff"]{          background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/gate-staff.webp) center/cover no-repeat; }
.site-ph[data-ph="gate-recruit"]{        background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/gate-recruit.webp) center/cover no-repeat; }     /* 道路の全景＝これから加わる現場 */
/* ★フッター写真は「水色のスクリーン → 白」で溶かす（ユーザー指示 2026-08-03
   「写真の左側に水色のスクリーン状のグラデーションを入れてきれいに白へ溶かしてほしい」）。
   2層構成: ①淡水色の膜（左ほど濃く、右へ抜ける）／②写真。
   これに ≥900px の CSSマスク（左端を透明へ）が重なって、
   **写真 → 淡水色 → 白** の順に溶ける。★膜とマスクは角度（105deg）を揃えてある。
   片方だけ角度を変えると溶けの向きがねじれて縞に見える。 */
/* ★★2026-08-03：素材が `AdobeStock_2052712205-2.jpeg` に差し替わった（ユーザーが自分で修正）。
   **このファイルは既に「左右反転済み＋左端の水色→白フェードが焼き込み済み」**で、子どもも
   ほぼ中央（幅の52%）にいる。したがって:
     ・**CSS側で `.flop()` しない**（二重反転になる）
     ・**CSSの水色グラデの膜は撤去した**（焼き込みと二重になって左が白飛びする）
   残しているのは ≥900px のマスクだけ＝白い面との継ぎ目を消すためのもの。 */
.sf-bg[data-ph="footer-face"]{
  background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/footer-face-sp.webp) center/cover no-repeat;
}
/* ★★狭幅（≤899px）と PC で**画像を出し分けている**（ユーザー指示 2026-08-03
   「レスポンシブ時にも写真枠に対して人物がセンターとなるようにしたい」）。
   ・PC（≥900px）= `footer-face.webp` … 白い面が左側を覆うので、子どもは枠の **62%** に置く
     （中央だと面の裏に隠れる。§7の「被写体を右へ寄せる」理由はこれ）
   ・狭幅（≤899px）= `footer-face-sp.webp` … 写真が全幅の帯になり**何も覆わない**ので、
     左24%を落として子どもを枠の **中央** に置いたクロップ（原画像 left1142 top196 3616×2480 → 1188×815）
   ★1枚で両立はできない。枠の比（1188:815）と画像の比が同じなので background-position では動かせず、
     クロップ違いの2枚に分けるのが唯一の解（実測して確認）。**1枚に戻さないこと。** */
@media (min-width:900px){
  .sf-bg[data-ph="footer-face"]{ background-image:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/footer-face.webp); }
}
/* ★★1200px以上は枠を縦長（全高×60%）にしてあるので、`cover` の余りを**左へ寄せて**見せる
   （2026-08-04・第34版。理由と経緯はフッターの `@media (min-width:1200px)` の★★★）。
   ここに書いているのは、上の割り当てが `center/cover` の**ショートハンド**で位置まで指定しており、
   セクション側の指定では上書きできないため（ソース順で必ずここが後ろになる）。 */
@media (min-width:1400px){
  .sf-bg[data-ph="footer-face"]{ background-position:left center; }
}
/* ★ブログのサムネイル（2026-08-03・第16版）。**記事のアイキャッチが入る枠**で、
   ここに置いてあるのは草案の仮置き（記事側の画像が未入稿のため支給素材を当てている）。
   CueZilla投入時はブログ一覧パーツのサムネイル出力に差し替わる＝この3行は納品コードには残らない。 */

/* ==========================================================================
   下層ページ共通（2026-08-04・第1版）
   --------------------------------------------------------------------------
   ★ここは**9ページ共通の「顔」**。トップの署名DNA（巨大英字＋明朝見出し＋3px罫）を
     下層向けに"薄く"翻訳したもの。①ページ構成の全体ルール
     「下層FVは『英字ラベル＋ページ名』のみ」に従い、**写真の顔を作らない**。
   ★1ページだけ直さない。ここを触ると9ページ全部の顔が変わる（それが狙いの設計）。
   ========================================================================== */

/* ★下層ヒーロー帯（.subpage-header*）の指定は **override.css へ移した**。
   理由: cuezilla-skin.css §11 が同じクラス名を持ち、skin は style.css の**後**に読まれるため
   ここに書くと必ず負ける（実測: padding-top が skin の 72px になっていた）。
   R-30「案件の上書きが効く唯一の場所は override.css」に従う。 */

/* ---- パンくず（CueZilla parts231 と同じclass名）---------------------------
   ★本番では CueZilla が parts231 を描画する。ここはその見え方をローカルで再現しつつ、
     固定ページでは自前のこのマークアップがそのまま出る（教訓 cuezilla-breadcrumb-unify-parts231）。
   ★`content` を使わない（AddCssInfo が疑似要素の content を除去するため）＝区切りは
     `border-left` で作る。 */
.parts231_breadcrumb{
  padding:var(--s2) var(--edge) var(--s3);
  background:#fff;
}
.parts231_breadcrumb .p-breadcrumb__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s2);
  list-style:none; margin:0; padding:0;
}
.parts231_breadcrumb .p-breadcrumb__item{
  font-size:var(--fs-fine); letter-spacing:.04em; color:var(--c-sub);
}
.parts231_breadcrumb .p-breadcrumb__item + .p-breadcrumb__item{
  padding-left:var(--s2); border-left:1px solid var(--c-line);
}
.parts231_breadcrumb a{
  color:var(--c-sub);
  text-decoration:underline transparent;
  text-decoration-thickness:var(--ul-thick);
  text-underline-offset:var(--ul-offset);
  transition:color var(--ul-dur) var(--ease), text-decoration-color var(--ul-dur) var(--ease);
}
.parts231_breadcrumb a:hover{ color:var(--c-aqua-ink); text-decoration-color:var(--c-aqua-ink); }
/* ★現在地（最後の項目）はリンクだが色を落として"いま居る場所"に見せる */
.parts231_breadcrumb .p-breadcrumb__item:last-child a{ color:var(--c-ink); }

/* ---- 回遊ゲート（.site-next）＝「遷移に特化した」大きなリンク帯 ------------
   ★★第1版（.site-gate＝淡水色の面に見出し＋リード＋矢印リンク）は**却下**。
     ユーザー指摘「もう少し遷移するボタンをデザイン化したような、遷移に特化した見せ方に」。
     原因＝**セクションの見た目のまま**で、押せることが伝わらなかった。
   ★設計:
     ・帯の全面が1つのリンク（どこを押しても遷移する）
     ・行き先のページ名を**明朝で大きく**＝主役は「どこへ行くか」
     ・右端に大きな矢印。hover で**面が水色inkへ反転**し矢印が右へ動く
   ★角丸0・影なしは全域の契約どおり（影はヘッダーの浮き帯だけの専用表現）。
   ★hover 時は白文字 × #006AB6 ＝5.6:1（AA可）。**反転先を --c-aqua にしないこと**（白地2.0:1）。 */
/* ★★上下の余白（ユーザー指示 2026-08-04「カード式のデザインとなるなら上下に適切な余白を」）。
   改修前は上下とも **0px** で、上は淡水色Rowの下端に、下はフッターの上端に**直接接していた**（実測）。
   ★値は `--row-pad`。このカードは自前の面を持つ＝§3-7 の「背景が切り替わる境目」に当たるので、
     Rowの端と同じ扱いにするのが余白ルールと整合する（上下で違う値にしない）。 */
.site-next{ padding:var(--row-pad) var(--edge); }
.site-next__link{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s3) var(--s5);
  padding:clamp(28px, 3.6vw, 48px) clamp(24px, 3vw, 44px);
  background:var(--c-bg-tint2); color:var(--c-ink);
  border-radius:var(--r); text-decoration:none;
  /* ★左端の3px罫＝見出し下の罫と同じ意匠（水色→黄緑）。「このサイトの遷移」だと分かる手掛かり */
  border-left:3px solid transparent;
  border-image:linear-gradient(to bottom, var(--c-aqua), var(--c-green)) 1;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.site-next__body{ display:block; }
.site-next__label{
  display:block; margin-bottom:var(--s1);
  font-family:var(--f-en); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.26em; color:var(--c-aqua-ink);
  transition:color .3s var(--ease);
}
.site-next__ttl{
  margin:0 0 var(--s1);
  font-family:var(--f-mincho); font-size:var(--fs-h3); font-weight:600;
  line-height:1.6; letter-spacing:.06em; color:var(--c-navy);
  transition:color .3s var(--ease);
}
.site-next__lead{
  display:block; font-size:var(--fs-body); line-height:1.9; color:var(--c-sub);
  /* ★`text-wrap:pretty` は**行末孤立の回避**。375pxで最終行が「い。」の2文字だけになり
     `responsive-audit` の [orphan] で落ちた。本文は③HTML版草案が正本なので**文言で逃げない**＝
     組版側で解く（固定改行の span を足す方法は、PCで1行に収まる文を2行に割ってしまうので採らない）。 */
  text-wrap:pretty;
  transition:color .3s var(--ease);
}
/* 右側＝行き先。ページ名を大きく見せ、矢印を添える */
.site-next__go{
  display:flex; align-items:center; gap:var(--s3);
  flex:0 0 auto; margin-left:auto;
}
/* ★★第3版（2026-08-04）: 行き先名＋矢印枠の2要素をやめ、**既存の `.site-btn--main` を流用**。
   却下した第2版の中身と理由は index.html の該当コメントに残してある（色の主従逆転・汎用UI感）。
   ★`.site-btn` は `min-width:min(100%,300px)`・高さ60px・角丸0・字間.08em を既に持つので、
     ここで**サイズや色を上書きしない**（上書きするとサイト内でボタンの体裁が2種になる）。 */
.site-next__btn{
  /* .site-btn の既定に任せる。矢印を右へ置くぶんだけ内側の詰めを調整する */
  gap:var(--s2);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.site-next__ar{
  display:inline-block; font-family:var(--f-en); line-height:1;
  transition:transform .3s var(--ease);
}
/* ★hover: 面を反転して「押した先」を予感させる。文字は白へ（コントラストは5.6:1で確定） */
.site-next__link:hover{ background:var(--c-aqua-ink); color:#fff; }
.site-next__link:hover .site-next__label,
.site-next__link:hover .site-next__ttl,
.site-next__link:hover .site-next__lead{ color:#fff; }
/* ★親カードが水色inkへ反転するので、ボタンは**白地＋水色ink文字**へ入れ替える
   （濃い面の上のボタン＝既存の .site-btn--on と同じ考え方。白×#006AB6＝5.6:1でAA可）。 */
.site-next__link:hover .site-next__btn{ background:#fff; color:var(--c-aqua-ink); }
.site-next__link:hover .site-next__ar{ transform:translateX(5px); }
/* ★狭幅は縦積み。矢印は行き先ページ名の右に残す（押せる感を保つ）
   ★★2026-08-05（ディレクター指摘「スマホ時リンクボタンがカードからはみ出している。
     **全サイト共通なのでこのページだけ崩れることが無いように**」）:
     `.site-btn` は `min-width:min(100%,300px)` を持つ。この `100%` は
     **自分の幅で決まる `.site-next__go`** を指すので実質 300px 固定として効き、
     カードの内側（帯幅 − 左右パディング24px×2）が 300px を下回る幅で**はみ出す**。
     実測: 320px で **+48px**／360px で **+8px** はみ出し（375px 以上では偶然収まっていたため
     375pxだけ見ていた検証では素通りしていた）。
   → 狭幅ではボタンを**カードの内寸いっぱい**にする。`min-width:0` で 300px の下限を解除し、
     `width:100%` で内寸に従わせる＝**どんなに狭くても構造的にはみ出せない**。
   ★このコンポーネントは回遊ゲートとして全下層で使う共通部品。ページ側では一切上書きしないこと。 */
@media (max-width:767px){
  .site-next__link{ align-items:flex-start; }
  .site-next__go{ margin-left:0; width:100%; }
  .site-next__btn{ min-width:0; width:100%; }
}

/* ---- 写真2枚組の狭幅（全ページ共通）--------------------------------------
   ★★狭幅で**セクション上端の巨大英字の予約を外す**ためだけの修飾クラス。

   何が起きていたか（375pxで実測）: `.site-duo` には
   `.site-row:not(--flush) > *:has(.xw-bigen){ padding-top:calc(var(--fs-bigen)*.9) }`（§3-7）で
   **60px の padding-top** が入る。これは「絶対配置の巨大英字が前のセクションへ食い込まないための予約」。
   ところが狭幅では `.site-duo__pics{order:-1}` で**写真が先頭に来る**ので、
   英字は写真の下（テキスト列の頭）へ移動し、**セクション上端の予約は誰も使わない空きになる**
   ＝ユーザー指摘「スマホ時の代表挨拶の写真上が少し広い」の正体。
   英字の居場所は `.site-duo__pics{margin-bottom:var(--s5)}`（56px）が既に確保している。

   ★★2026-08-04: 当初は下層だけの修飾クラス（`.site-duo--sub`）にしていたが、
     **トップ（.site-belief / .site-skill）にも同じ重なりが実在した**ため
     （実測 375px:-7 / 600px:-25 / 768px:-45 / 899px:-62px）、ユーザー判断「直してほしい」で
     **`.site-duo` 全体へ適用**した。修飾クラスは廃止＝下層で付け忘れる事故も無くなる。
   ★変わるのは **≤899px だけ**。900px以上は横並びでこのメディアクエリの外なので1pxも動かない。 */
@media (max-width:899px){
  .site-row:not(.site-row--flush) > .site-duo:has(.xw-bigen){ padding-top:0; }
  /* ★★予約を「セクション上端」から「写真とテキストの間」へ**付け替える**。
     `--s5`(56px) 固定では足りない＝英字の突き出しは `--fs-bigen × .9` で**幅に比例して伸びる**ため、
     600〜899pxで**英字が写真に18〜54px重なっていた**（実測）。
     ★+34px は英字と写真の間に残す実測ベースの空き（+16pxでは768〜899pxで2〜4px重なった）。突き出し量から導いているので幅が変わっても崩れない。
     ★この重なりは padding-top を外したから起きたのではなく、**元から起きていた**
       （セクション上端の予約は、写真が先に来る狭幅では英字の居場所を作れない）。 */
  .site-duo__pics{
    margin-bottom:max(var(--s5), calc(var(--fs-bigen) * .9 + 34px));
  }
}

/* ---- 代表挨拶の署名（.site-sign）------------------------------------------
   ★③はインラインstyle（`text-align:right;font-weight:700`）で書かれていたが、
     **インラインstyleは使わない**（CSS安全契約／CueZillaのサニタイズ対象にもなる）。
   ★社名は補助文サイズ・氏名だけ明朝で立てる＝手紙の署名の見え方に寄せる。
   ★①の明示指定「署名に『代表取締役 笹本 一彦』を明記」。**氏名を削らないこと。** */
.site-sign{
  margin:var(--el-gap) 0 0; text-align:right;
  font-size:var(--fs-fine); line-height:1.9; letter-spacing:.04em; color:var(--c-sub);
}
.site-sign__name{
  display:inline-block; margin-top:2px;
  font-family:var(--f-mincho); font-size:var(--fs-body); font-weight:600;
  letter-spacing:.08em; color:var(--c-navy);
}
/* 中央組みセクションのリンクは中央へ（`.site-go` の既定は左寄せ） */
.site-go--center{ text-align:center; }

/* ---- 日本語の行頭禁則（2026-08-04）--------------------------------------
   ★`line-break:strict` は **小書き仮名（ゃ ゅ ょ っ 等）を行頭に置かせない**ための指定。
     既定（auto）の Chrome は拗音に禁則を効かせないため、375pxで
     「…と同じだと思って直す。そうや／ょうって…」のように**行頭に「ょ」が来る**
     （`verify/responsive-audit.mjs` の [kinsoku] で検出）。
   ★本文は③HTML版草案が正本＝**文章を書き換えて回避しない**。CSSで組版側を直すのが筋。
   ★`body` に当てるのでトップ・下層の全ページに効く。 */
body{ line-break:strict; }


/* ===== _css-2_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 に定義があればそれを使用） --- */
  --dyn-font-display: var(--font-display, "Noto Serif JP","Yu Mincho",serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Yu Gothic",sans-serif);
  --dyn-font-numeric: var(--font-numeric, "EB Garamond","Noto Serif JP",serif);

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 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件目以降の前に "›"） */
.p-breadcrumb__item + .p-breadcrumb__item::before{
  content:"\203A"; margin:0 .6em; color:var(--dyn-border) !important; font-size:.95em;
}
.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; }

/* ============================================================
   §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:#1e3a5f!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:#1e3a5f !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)… 表記を維持（auto ol の "1." ではなく括弧付き番号で表示） */
.privacy-item__list{ list-style:none; counter-reset:pp; margin:8px 0; padding:0; }
.privacy-item__list li{ counter-increment:pp; padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }
.privacy-item__list li::before{ content:"(" counter(pp) ") "; }

/* ============================================================
   §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; }


/* ===== _css-3_override.css ===== */
/* ============================================================
   override.css ─ 案件ごとの上書き（CSSのうち、案件が編集してよいのはここだけ）
   ------------------------------------------------------------
   読み込み順（ローカル・実機とも）:
     theme_default.css → case-vars.css → style.css → cuezilla-skin.css → 【本ファイル】

   納品時も tools/convert.mjs が site.combined.css の【最後】に置く
   （優先度3。ファイル名に override / custom / 追補 のいずれかを含むことが条件）。
   ＝ここに書いた指定は skin に打ち消されない。**案件の上書きが効く唯一の場所。**

   ★鉄則: cuezilla-skin.css は【全案件共通の資産】。案件では絶対に編集しないこと。
     編集した瞬間、その案件の skin は共通から切り離され、以後の共通修正
     （カード高さの不揃い・サイドバーの可読性・フォーム送信ボタンの崩れ 等）が
     二度と届かなくなる。「毎案件おなじ崩れを直している」の原因がこれ。
     → 共通で直すべきものを見つけたら、案件で握り込まず
        repo `skin/cuezilla-skin.css`（正本）へ還流する。

   ------------------------------------------------------------
   用途① 動的パーツの案件設定（--dyn-* の上書き）

   skin §0 は色を CueZilla テーマ7値（--main-color 等）から自動連動させる。
   まずは case-vars.css の7値を案件の色に合わせること。それで足りるなら本ファイルは空でよい。
   7値からは導けない値だけ、ここで固定する。
   （例: --temporary-color がグレーや鮮やかな色でも、カード面は白にしたい）

     :root {
       --dyn-surface: #ffffff;   → カード/パネル/入力欄の面
       --dyn-heading: #0A2540;   → カード見出し
       --dyn-border:  #E4E9EE;   → 罫線/枠
       --dyn-radius:  16px;      → 角丸をサイトのカードに合わせる
     }

   主な --dyn-* は他に: --dyn-bg（地）/ --dyn-text（本文）/ --dyn-muted（日付・補助）/
   --dyn-accent（ボタン・チップ）/ --dyn-accent-2（リンク・hover）/ --dyn-on-accent（accent地の文字）/
   --dyn-font-display, --dyn-font-body, --dyn-font-numeric（書体）/ --dyn-card-min（一覧カード最小幅）。
   定義と既定値の正本は cuezilla-skin.css の :root（§0）を参照。

   ------------------------------------------------------------
   用途② skin を採用しない案件の受け皿

   受領デザインが自前で全パーツをstyle済みの場合、skin の !important が
   受領デザインを上書きして崩す。その場合は skin を外し、必要な最小限だけここに書く。
   （教訓: 70_運用ルール/教訓メモリ/cuezilla-skin-skip-when-received-styles-parts.md）

   ------------------------------------------------------------
   ★このファイルは「最小限」に保つ。
     サイトの見た目は style.css（具体値・自作接頭辞クラス）で作るのが正。
     ここが厚くなってきたら、共通で直すべきもの（＝正本へ還流すべきもの）が
     混ざっていないか疑うこと。
   ============================================================ */

/* 案件ごとの指定をここに書く（初期は空） */

/* ==========================================================================
   S01870 君津水道サービスセンター ─ 下層ヒーロー帯（2026-08-04）
   --------------------------------------------------------------------------
   ★ここに書いてある理由: cuezilla-skin.css §11 が `.subpage-header*` を所有しており、
     skin は style.css の**後**に読まれる＝style.css に書くと負ける（実測で踏んだ）。
     R-30「案件の上書きが効く唯一の場所は override.css」。**skin 側は絶対に編集しない。**
   ★skin の既定から変えているのは4点: ①上パディング（固定ヘッダーを避ける実測値）
     ②中央揃え → **左揃え**（トップの版面と揃える）③タイトルの `text-shadow` を消す
     （写真背景を前提にした影。①ページ構成の「下層FVは英字＋ページ名のみ」で写真を置かないため不要）
     ④英字と見出しのサイズ・書体を案件のトークンへ
   ========================================================================== */
/* ---- 下層ヒーロー帯（.subpage-header）------------------------------------
   ★上パディングはヘッダーの帯（fixed・PCで101px＋浮かせ21px）を避ける値。
     トップの `.site-fv{padding-top}` と同じ考え方＝**帯の下に文字が潜らない**ことが条件。
   ★巨大英字は帯の中で**背面に敷く**（`.xw-bigen` は使わない＝あちらは
     `bottom:calc(100% - .1em)` で見出しの真上へ飛ぶ絶対配置で、帯の中では切れる）。
   ★英字は `aria-hidden`（読み上げに英語が混じるのを避ける。h1が主題を持つ）。 */
.subpage-header{
  position:relative; overflow:hidden; background:#fff;
  padding-top:clamp(132px, 12vw, 190px);
  padding-bottom:clamp(28px, 3.4vw, 48px);
  /* ★左右パディングは __inner へ移した（下の★★）。帯自身は全幅にして水を素直に伸ばす。
     ★★`padding-inline:0` が必須。skin は `padding:calc(…) 24px 72px` の**ショートハンド**で
       左右24pxも当てているので、自分の padding-inline を消しただけでは skin の24pxが残り、
       水が1392px幅になる（1440pxで実測）。 */
  padding-inline:0;
}
.subpage-header__inner{ position:relative; }
/* ★英字はページ名の**真上に重ねず**、上に置いて薄く敷く。トップの巨大英字は見出しに
   3%だけ重なる設計だったが、下層は帯が浅いので重ねると英字が切れる（実測で外した）。 */
.subpage-header__en{
  margin:0 0 var(--bigen-gap);
  font-family:var(--f-en); font-size:clamp(2.2rem, 6.4vw, 4rem); font-weight:700;
  line-height:1; letter-spacing:.06em; color:var(--c-wash);
  user-select:none;
}
.subpage-header__title{
  margin:0;
  font-family:var(--f-mincho); font-size:var(--fs-h2); font-weight:600;
  line-height:1.45; letter-spacing:.12em; color:var(--c-navy);
}
/* ★見出し下の3px罫＝**署名DNA**（水色→黄緑）。トップの `.site-hd` と同じ意匠で、
   下層でも「同じサイト」だと分かる最小の手掛かりにしている。**黄緑の出番はここだけ**（§3-1）。 */
.subpage-header__rule{
  display:block; width:64px; height:3px; margin-top:var(--s3);
  background:linear-gradient(to right, var(--c-aqua), var(--c-green));
}

/* skin の既定を打ち消す3点（上の★の②③） */
.subpage-header{ text-align:left; }
.subpage-header__title{ text-shadow:none; }
/* ★skin の `padding:calc(72px + var(--fixed-header-h,0px)) …` に備えて実値も渡しておく
   （このサイトのヘッダーは fixed・PCで帯109px＋浮かせ21px＝130px）。
   上の padding 指定が効いていればこの変数は使われないが、**skin 側の計算が復活しても崩れない**ようにする。 */
:root{ --fixed-header-h:130px; }

/* ---- 下層ヘッダーの水（2026-08-04・第2版）--------------------------------
   ユーザー指示: 「**下層ヘッダーと次のセクションにかかるように**」「**水は上下がトリミングされていない
   状態に**」「この画像は全体像を見せてなんぼの画像」。

   ★第1版（見せる高さを固定して `cover` で覗かせる）は**却下**。あれは素材を上下とも切っていた。
     → `aspect-ratio` を素材の実比（2400/1064）に固定し、`background-size:100% 100%` で
       **全面を無変形・無トリミングで出す**（トップのFVの水と同じ扱い方）。

   ★★**位置の持ち方を「絶対配置＋vw」から「通常フロー＋次要素の引き上げ」へ変えた。**
     絶対配置＋vw だと、水の高さ（幅に比例）と帯の高さ（中身の量で決まる＝幅に比例しない）が
     別々に動くため、1920pxでリボンが h1 へ迫る（第1版の前に踏んだのと同じ型の事故）。
     フローに置けば水の上端は**常に罫の直下**に付くので、幅が変わっても文字に掛からない。
   ★またぎは「次のセクションを水の下端ぶん引き上げる」で作る（`.parts231_breadcrumb` の負マージン）。
     引き上げ量は水の高さの約30%＝`13.3vw`（水の高さ＝44.3vw なので 0.3×44.3）。
   ★引き上げるぶん、パンくずと本文は水より**前面**に置く（`z-index:1`）。 */
.subpage-header{
  position:relative;
  /* ★skin は `overflow:hidden` を持つ。水を帯の外へ出すので**打ち消す**。 */
  overflow:visible;
  /* 水がフローで入るので下パディングは最小に戻す（水自身が下端の余白になる） */
  padding-bottom:0;
}
/* ★★左右パディングは**帯ではなく inner** が持つ。帯に padding を置くと水の幅が
   「帯の内寸」になり、1440pxで1120px幅＝全体像にならない（実測で踏んだ）。
   `--edge` の中の `100%` は**使う場所の親幅**で解決されるので、負マージンでの逃がしも当てにならない。
   帯を全幅にして inner だけ字下げするのが、幅の計算を1箇所に閉じる書き方。 */
.subpage-header__inner{ position:relative; z-index:1; padding-inline:var(--edge); }
.subpage-header__water{
  position:relative; z-index:0;
  /* 帯が全幅になったので、水は素直に100%で端まで伸びる（負マージン不要） */
  width:100%;
  /* ★素材の実比。切らないための値＝**`cover` にしないこと** */
  aspect-ratio:2400/1064;
  /* ★★2026-08-04（第3版・ユーザー指示「罫と水の間をもっと狭めて」）: **負のマージンで引き上げる**。
     素材の上から約30%は**透明**なので、箱の上端を罫へ近づけただけでは
     「見えるしぶき」までの空きが縮まらない（1440pxで実測 **229px** 空いていた）。
     ★引き上げ量は vw で持つ＝水の高さ（44.3vw）も vw なので、
       「罫からしぶきまでの空き」＝(-9.5 + 13.3)vw ＝ **3.8vw** が全幅で一定になる
       （1440pxで約55px・375pxで約14px）。
     ★これ以上マイナスにすると**しぶきが罫に触る**。数字を触るときは 罫の下端と
       しぶきの上端を実測して確認すること。 */
  margin-top:-9.5vw;
  opacity:.9;
  background:url(https://cdn.cuezilla-cms.com/cuezilla-cms-test5.net/images/1509/fv-water-band.webp) center/100% 100% no-repeat;
  pointer-events:none;
}
/* ★次のセクションを水の下端へ乗り上げさせる＝帯と次セクションの両方に水が掛かる
   ★★2026-08-05: セレクタを **`.subpage-header +`（隣接）に限定**した。
     以前は `.parts231_breadcrumb` 単独だったため、**下層ヒーロー帯を持たないページ**
     （＝CueZillaが描画するブログ記事詳細・施工実績詳細。parts231だけが載る）でも
     `-20vw` が効き、1905pxで**パンくずが -384px ＝ 画面の外へ飛んでいた**（実測）。
     水の帯があるページだけの補正なので、隣接セレクタが本来の意図。
     ★これは参照用プレビューだけの話ではない＝**実機の記事ページでも同じことが起きる**。 */
.subpage-header + .parts231_breadcrumb{
  position:relative; z-index:1;
  /* ★引き上げ量は水の高さ（44.3vw）の約45%。「またぐ」ことが指示なので、
     下端がしっかり次セクションへ乗り上げる量にしてある。 */
  margin-top:-20vw;
}

/* ==========================================================================
   動的ページ（CueZillaが実行時描画）の上端オフセット（2026-08-05）
   --------------------------------------------------------------------------
   ブログ一覧・記事／施工実績一覧・詳細／お問い合わせ・応募フォームは
   **下層ヒーロー帯を持たない**ため、`position:fixed` のヘッダーの下に本文の先頭が潜る。
   実測（ヘッダー帯の下端 ／ 本文の先頭）:
     390px  … 97px ／ 0px      1265px … 116px ／ 0px      1905px … 121px ／ 100px（カードが21px潜る）
   固定ページは `.subpage-header` の `padding-top` がこの役目を担っているが、
   **動的ページのDOMはCueZillaが吐くので、こちらでは足せない**。→ 器（main）側で逃がす。
   ★固定ページの `＜main id="site-main">` は対象外（FV・下層帯が自前で余白を持っている）。
   ★値はヘッダー帯の下端＋約24pxの空き（390→121 / 1265→133 / 1905→145）。
   ★★**実機でも同じ現象が起きる**＝これは参照用の見た目合わせではなく**納品に必要な補正**
     （この override.css は変換で site.combined.css＝実機の追加CSS欄に入る）。
   ========================================================================== */
main:not(#site-main){ padding-top:clamp(121px, 10.5vw, 145px); }

/* ==========================================================================
   セクション追加のガードレール（2026-08-05）
   --------------------------------------------------------------------------
   ★目的: **デザイン知識の少ないスタッフが Claude Design でセクションを1つ足したときに、
     このサイトの契約から外れても「崩れた状態のまま公開されない」ようにする。**
     コピペ元は `site/_セクション追加ガイド.html`（納品対象外の内部ページ）。
     ここに書くのは「間違えたときに自動で正しい側へ寄せる」規則だけで、
     正しく書いた場合の見た目は1pxも変えない（`verify/visual-snapshot.mjs` で11ページ×5幅の差分0を実測）。
   ★なぜ override.css なのか: これらは skin より後に効かせる必要があり、
     かつ「案件の上書き」に当たるため（R-30）。
   ========================================================================== */

/* ---- ガード1: 白いカードを白いRowに置いたら、Rowの地を自動で淡水色にする ----------
   このサイトは**影も角丸も使わない**ので、カードの輪郭は「面と地の明度差」だけが支えている。
   白Rowに白カードを置くと面が地に溶け、上辺の3px罫だけが宙に浮いて見える
   （教訓 white-card-needs-tinted-field＝ディレクター指摘「罫線の仕様が異なる」の真因は地の色だった）。
   ★スタッフは「連番カードを足す」しか意識していないので、**Rowの背景色まで直せない**前提で組む。
   ★`--flush`（フルブリードのFV・完全2分割）は面の設計が別なので除外。
   ★既に淡水色・brandが指定されている正しいRowには当たらない＝現行11ページは無影響。 */
.site-row:not([class*="--tint"]):not(.site-row--brand):not(.site-row--flush):has(.site-merit__grid),
.site-row:not([class*="--tint"]):not(.site-row--brand):not(.site-row--flush):has(.site-cards),
.site-row:not([class*="--tint"]):not(.site-row--brand):not(.site-row--flush):has(.site-voice){
  background:var(--c-bg-tint);
}

/* ---- ガード2: 水色ink面（brand Row）に置いた文字を、必ず読める色にする ------------
   濃地が2種類ある（水色ink #006AB6 ／ 紺 #1F3A5F）ことに気づかず紺地用の色を置くと 3.67:1 で
   AA割れする（2026-08-05 に実際に261件出した。教訓 dark-ground-is-not-one-color）。
   → **brand Row の中は、指定を忘れても白／`--c-on-brand` になる**ようにしておく。
   ★★**Row自身の color を変えるだけにする＝継承で効かせる。**
     はじめは `:where(.site-row--brand) :where(p,li,td,…)` と子孫へ直接当てたが、
     **詳細度0でも「継承した値」には勝ってしまう**ため、親が意図して純白 `#fff` にしていた
     `.site-cta__acts` が `#EAF4FA` に落ちた（実測。どちらもAA内だが**意図を書き換えている**）。
     Row に color を置けば、自前で色を持つ部品（`.site-cta` の白・`.site-dl--on` の白）は
     そのまま勝ち、**色指定を忘れた要素だけ**が読める色を継承する。
   ★`--c-aqua-lite`（紺地用）を明示的に書かれた場合はこのガードでは救えない。
     そこは `_セクション追加ガイド.html` の「濃い面に置くとき」の注意と①ゲートで拾う。 */
.site-row--brand{ color:#EAF4FA; }

/* ---- ガード3: 画像スロットは `site-ph` を忘れても効くようにする --------------------
   画像の割り当ては `style.css` 末尾で `.site-ph[data-ph="…"]` と書く契約だが、
   独自クラスの `__ph` を作るたびに `site-ph` の併記を忘れて**無言で画像が出ない**
   （2026-08-04 に `/about/job` の `.site-cards__ph` で実際に踏んだ）。
   → `data-ph` があれば `site-ph` の見た目（cover・中央・繰り返さない）が付くようにする。
   ★★**必ず `:where()` で詳細度0にする。** 素の `[data-ph]:not(.site-ph)` で書いたら、
     **意図的に別の置き方をしている既存スロットを上書きした**（実測）:
       `.site-fv__hero` / `.site-fv__band` … `background-size:100% 100%`（水の素材を**切らない**設計）→ cover に変わった
       `.sf-bg`（フッター写真）… `background-position:0% 50%`（左寄せ＋左へ白フェード）→ 中央に変わった
       `.site-cta__side` … グラデ＋写真の2レイヤーの1枚目が auto → cover に変わった
     いずれも**レイアウトは1pxも動かないので矩形差分に出ない**＝絵の切り取りだけが静かに変わる型。
     `:where()` なら既存の指定が必ず勝ち、**何も指定していないスロットだけ**が救済される。 */
:where([data-ph]:not(.site-ph)){
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* ---- ガード4は「作って壊れたので撤去した」記録（2026-08-05）--------------------
   ★やろうとしたこと: 「セクションは縦余白を持たず Row が持つ」（§3-7）という契約を守らせるため、
     `.site-row > .site-sec:not(.site-sec--own-pad){ padding-block:0 }` を置いて、
     スタッフがセクションに `padding-block` を足しても効かないようにする。
   ★★**これは間違いだった。** このサイトは**セクションの padding-top を正当に使っている**:
     `style.css` の `.site-row:not(.site-row--flush) > *:has(.xw-bigen){ padding-top:… }`
     ＝**巨大英字が見出しの上へ突き出す分の予約**（§3-7・第14版で作った機構）。
     詳細度が同じ (0,3,0) で override.css は後に読まれるため、**この予約を丸ごと殺していた**。
     実測: company −251px／about/environment −512px／about/job −640px／index −384px の縦詰まり
     （`verify/visual-snapshot.mjs` で検出。**目視では「少し詰まった」以上のことは分からない**）。
   ★教訓: **`.site-sec` のような器のクラスに、器の外から一律の余白規則をかけない。**
     セクションの余白は「Rowが持つ」だけでなく「意匠の予約」としても使われていて、
     一律のリセットはその予約と区別できない。
   → セクションの余白は**CSSで縛らず `_セクション追加ガイド.html` の注意書きで担保**する方針にした。 */

/* ==========================================================================
   JS無効時のフォールバック（2026-08-25）
   --------------------------------------------------------------------------
   ★何が起きていたか（verify/nojs-audit.mjs の実測 2026-08-25）:
     JSを切ると index.html の可視本文が 1934字 → 183字（**9%**）まで落ちていた。原因は2つとも
     「初期状態は隠す／表示に戻すのはJS」という作りで、JSが動かないと戻す側だけが欠ける:
       ① style.css `[data-reveal]{opacity:0}` … `.is-in` を付けるのは IntersectionObserver（JS）
       ② style.css `.site-open{position:fixed;inset:0;background:#fff}` … `is-done` を付けるのもJS
     ＝**白い幕が出たまま、その下の本文も透明**＝実質まっさらな画面。
     ★撮影（verify/shoot-pages.mjs）はJS実行後を撮るので、**この不良はスクショにも目視にも写らない**。
   ★直し方: 演出そのものは消さず、**スクリプトが無効な環境でだけ**初期値を可視へ戻す。
     JSが動く環境の見え方は1pxも変わらない（`(scripting: none)` はJS有効時に一切マッチしない）。
   ★なぜ `＜noscript＞` ではなくCSSなのか（判断 2026-08-25）:
     ① `＜noscript＞` は17ページ全部の `＜head＞` に要る＝**デザイナーが作業中のDesign側HTMLを
        全ファイル書き換える**ことになる（この修正は本文に触る必要が無い）
     ② このファイルは変換で site.combined.css ＝**実機の追加CSS欄**に入るので、
        CueZilla納品後もそのまま効く。`＜noscript＞` はHTML側に残らないので納品時に落ちる。
   ★残っている穴（報告済み）: **JSが例外で途中停止した場合はこの指定では救えない。**
     `scripting: none` が真になるのは「スクリプトが無効」のときだけ。停止の検知は
     verify/shoot-pages.mjs の consoleErrors の担当。
   ★対応ブラウザ: Chrome 120+ / Safari 17+ / Firefox 113+（未対応ブラウザではこの
     ブロックごと無視される＝**修正前と同じ挙動に戻るだけ**で、新たな崩れは起こさない）。
   ========================================================================== */
/* KEEP: JS無効時に本文が消える不良（verify/nojs-audit.mjs）の修正。消すと index が9%表示へ戻る */
@media (scripting: none){
  /* 浮かび上がり演出の初期値を可視へ戻す（`.is-in` を付けるJSが動かないため） */
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  /* オープニングの白幕を出さない（`is-done` を付けるJSが動かないため） */
  .site-open{ display:none !important; }
}
/* /KEEP */

/* ============================================================
   ▼ ここから下は 2026-08-27 のコード化（納品）で追加した分
      ・受領物は「1ページ＝1ファイル」の静的サイト。納品では1ページが
        複数のフリーHTMLブロック＋CueZillaパーツに分かれるため、
        **DOMの隣接関係に依存していた余白**をクラスで確定させる
   ============================================================ */

/* KEEP: フリーHTMLを持つページの上余白の相殺（★消すと全ページが 121〜145px 下へずれる）。
   受領の `main:not(#site-main){padding-top:clamp(121px,10.5vw,145px)}` は
   「固定ヘッダーの下に本文の先頭が潜るページ」を逃がすための指定で、固定ページは
   `＜main id="site-main">` にすることで除外していた。
   ★実機の ＜main＞ は CueZilla が吐く＝id を付けられないので、この除外が成立しない。
     そこで**フリーHTML側の先頭ラッパー（#site-main.site-page-top）で同じ量を打ち消す**。
     ・FV／下層ヘッダーは自前で上余白（skin §11 の calc(72px + var(--fixed-header-h))）を持つ
     ・フリーHTMLを1つも持たないページ（記事詳細・施工実績詳細・送信完了）では
       ラッパーが無い＝受領の逃がしがそのまま効く
   ★:has() に頼らない書き方にしてある（対応状況に関係なく決まる）。
   ★★投入後に固定ヘッダーの潜り込みを実機で必ず確認する（R-18/R-28。申し送り C-2）。 */
/*.site-page-top{ margin-top:calc(-1 * clamp(121px, 10.5vw, 145px)); }*/
/* /KEEP */

/* KEEP: トップの分割に伴う余白の確定（隣接セレクタの代替）。
   受領は `.site-row--flush:first-child + .site-row` で FV 直後の Row を詰めていたが、
   納品では 05a と 05b が別ブロックとして貼られ隣接関係が成立しない。 */
.site-row--after-parts{ padding-top:var(--sec-gap); }
/* BLOG セクションは 05c（見出し）→ パーツ → 05d（すべて見る）の3ブロックに割れるため、
   接合面の Row Padding を落として1つのセクションに見せる。 */
.site-row--tail0{ padding-bottom:0; }
.site-row--head0{ padding-top:0; }
.site-blog--foot{ margin-top:var(--s4); }
/* /KEEP */


/* ===== _css-4_override-dynamic-top.css ===== */
/* ============================================================
   TOP 動的セクションの再スキン — S01870
   ・トップの「お知らせ帯」「ブログカード3枚」は CueZilla パーツが描画する（R-8）。
     受領デザインの `.site-news` / `.site-blog` の見え方へ、パーツ側を寄せる。
   ・セレクタは **採番非依存**（[class*="…"]）。パーツ番号はサイトごとに違う。
   ・テーマ共有CSSと CueZilla 自動CSS(0,3,0)+!important に勝つため !important を使う（R-27/R-28）。
   ・★投入後に `verify/dynamic-harvest.js` の harvestEW() で実DOMを採取し、
     ここで当たっていない箇所だけを追補する（投機で足さない・R-28）。
   ============================================================ */

/* ------------------------------------------------------------------
   お知らせ帯（最新1件・横1行）＝ 受領 .site-news の見え方
   ラベル｜日付＋タイトル｜（すべて見る無し）の薄い帯・下罫1本
------------------------------------------------------------------ */
section[class*="design-parts-5"][class*="_preview"],
section[class*="design-parts-5"]{
  background:var(--c-bg) !important;
  border-bottom:1px solid var(--c-line) !important;
  padding:clamp(32px, 3.6vw, 52px) 0 0 !important;
}
section[class*="design-parts-5"] .container{
  width:100% !important; max-width:var(--wrap) !important;
  margin-inline:auto !important; padding-inline:var(--gut) !important;
}
section[class*="design-parts-5"] .content{
  /* KEEP: flex-direction:row を明示する。テーマは 576px未満で .content を column にするため、
     軸が縦になると子の flex-basis が「高さ」として効いて帯が巨大な空箱になる
     （S01853 で実測・還流）。 */
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  align-items:center !important; gap:var(--s2) var(--s3) !important;
  /* /KEEP */
}
/* ラベル（受領 .site-news__ttl＝ゴシック本文サイズ・字間.14em・補助色。面は塗らない） */
section[class*="design-parts-5"] h4.banner-area,
section[class*="design-parts-5"] .banner-area{
  margin:0 !important; padding:0 !important;
  background:transparent !important; border-radius:0 !important;
  flex:0 0 auto !important;
  font-family:var(--f-gothic) !important; font-size:var(--fs-body) !important; font-weight:700 !important;
  line-height:1.6 !important; letter-spacing:.14em !important; color:var(--c-sub) !important;
  white-space:nowrap !important;
}
section[class*="design-parts-5"] ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
  flex:1 1 240px !important; min-width:0 !important;
}
section[class*="design-parts-5"] li{ border:0 !important; }
section[class*="design-parts-5"] li a{
  display:flex !important; flex-wrap:wrap !important; align-items:baseline !important;
  gap:var(--s1) var(--s3) !important;
  min-height:56px !important; padding:var(--s2) 0 !important;
  color:var(--c-ink) !important; text-decoration:none !important;
}
section[class*="design-parts-5"] li a:hover{ color:var(--c-aqua-ink) !important; }
/* 日付（受領 .site-news__list time＝英字書体・水色ink・太字） */
section[class*="design-parts-5"] .date,
section[class*="design-parts-5"] li a time{
  flex:0 0 auto !important;
  font-family:var(--f-en) !important; font-size:var(--fs-body) !important; font-weight:700 !important;
  letter-spacing:.06em !important; color:var(--c-aqua-ink) !important;
}
section[class*="design-parts-5"] .parts-52-textarea{
  display:flex !important; flex-wrap:wrap !important; align-items:baseline !important;
  gap:var(--s1) var(--s3) !important; width:100% !important;
}
section[class*="design-parts-5"] .d-inline-block{
  font-size:var(--fs-body) !important; line-height:1.95 !important; color:var(--c-ink) !important;
  white-space:normal !important;
}
@media (max-width:767px){
  section[class*="design-parts-5"] .content{ gap:var(--s2) !important; }
  section[class*="design-parts-5"] li a{ min-height:44px !important; padding:var(--s1) 0 !important; }
}

/* ------------------------------------------------------------------
   ブログカード3枚 ＝ 受領 .site-blog の見え方
   淡水色のカード・3:2サムネ・日付（英字/水色ink）＋明朝の見出し（紺）
   ★見出し（BLOG／水道のことを、もう少し詳しく）は 05c のフリーHTMLが持つ。
     パーツ側の自動タイトルは出さない。
------------------------------------------------------------------ */
section[class*="parts131415_blog"],
section[class*="_blog"]:has([class*="_blog_title_wrap"]){
  background:var(--c-bg) !important;
  padding:0 var(--gut) !important;
}
section[class*="parts131415_blog"] [class*="_blog_title_wrap"]{ display:none !important; }
section[class*="parts131415_blog"] .container,
section[class*="parts131415_blog"] .container-lg{
  width:100% !important; max-width:var(--wrap) !important; margin-inline:auto !important; padding:0 !important;
}
/* KEEP: 列数は **1→2→3 で固定**する。★`repeat(auto-fit,…)` にしないこと。
   教訓 auto-fit-grid-blows-up-when-cms-returns-few-items:
   auto-fit は空トラックを潰して残ったカードへ幅を再配分するため、**CMSの記事が1件のとき
   カードが横いっぱいの帯（1144px 実測）になる**。受領モックは常に3枚なので再現せず、
   公開直後（記事1件）に人が見た瞬間に露見する＝納品前チェックをすり抜ける型。
   ブレークポイントは パーツ自身が吐く `row-cols-1 / -sm-2 / -lg-3` に合わせる。 */
section[class*="parts131415_blog"] .row,
section[class*="parts131415_blog"] [class*="row-cols"]{
  display:grid !important; grid-auto-rows:1fr;
  grid-template-columns:minmax(0,1fr) !important;      /* 〜575px: 1列 */
  gap:var(--s3) !important;
  margin:0 !important;
  /* `.g-4` の溝（--bs-gutter-x/y）は grid の gap と二重に掛かる（カード間が倍・負マージンで
     container からはみ出す）。ここで0にする。 */
  --bs-gutter-x:0 !important; --bs-gutter-y:0 !important;
}
@media (min-width:576px){
  section[class*="parts131415_blog"] .row,
  section[class*="parts131415_blog"] [class*="row-cols"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:992px){
  section[class*="parts131415_blog"] .row,
  section[class*="parts131415_blog"] [class*="row-cols"]{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
/* ★列数固定と**必ずセット**で子の width を解除する（同教訓 ★続き・本案件でも実測で再発）。
   Bootstrap の `.row-cols-lg-3 > .col` は `flex:0 0 auto; width:33.3333%` を持ち、
   親を grid にしてもこの % は消えず「**grid列の33%**」として効く
   （実測 2026-08-27: 列384px に対しカード128px・サムネ128×85 まで潰れた）。
   `margin-top:var(--bs-gutter-y)` も付くので padding だけの解除では足りない。 */
section[class*="parts131415_blog"] .col,
section[class*="parts131415_blog"] .row > *{
  padding:0 !important; margin:0 !important;
  width:auto !important; max-width:none !important; flex:0 1 auto !important; min-width:0 !important;
}
/* /KEEP */
/* カード内の並び：受領デザインは「写真 → 日付 → 見出し」。
   パーツのDOMは `.card-body > h5.card-title + a > (p.card-text + div.thumbnail)` の順なので、
   flex の order で **写真を先頭**へ出す（h5 と p は ＜a＞ の内外に分かれており、
   1段の order だけでは日付と見出しの入れ替えまではできない＝写真 → 見出し → 日付 になる）。
   ★実機投入後に harvestEW() で実DOMを採り、必要ならここを実採番で詰める（R-28・申し送り C-7）。 */
section[class*="parts131415_blog"] .card-body > a{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; order:1 !important; }
section[class*="parts131415_blog"] .card-body > .card-title{ order:2 !important; padding:0 var(--s3) var(--s4) !important; }
section[class*="parts131415_blog"] .card-body > a > [class*="_thumbnail"]{ order:-1 !important; }
section[class*="parts131415_blog"] .card-body > a > .card-text{ order:1 !important; padding:var(--s4) var(--s3) var(--s1) !important; }
section[class*="parts131415_blog"] .card{
  display:flex !important; flex-direction:column !important; height:100% !important;
  background:var(--c-bg-tint) !important;
  border:0 !important; border-radius:var(--r) !important;
  color:var(--c-ink) !important; text-decoration:none !important;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}
section[class*="parts131415_blog"] .card:hover{
  transform:translateY(-3px) !important; box-shadow:0 6px 18px rgba(31,58,95,.10) !important;
}
section[class*="parts131415_blog"] .card-body{ padding:0 !important; /*display:flex !important;*/ flex-direction:column !important; height:100% !important; }
/* サムネ：受領は aspect-ratio 3/2（画像が無い記事は淡水色のグラデで埋める） */
section[class*="parts131415_blog"] [class*="_thumbnail"]{
  width:100% !important; height:auto !important; aspect-ratio:3/2 !important;
  overflow:hidden !important; order:-1 !important;
  background:linear-gradient(150deg,#BFDEEC,#8FC2DA) center/cover no-repeat !important;
}
section[class*="parts131415_blog"] [class*="_thumbnail"] img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
}
/* 日付（受領 .site-blog__item time＝英字書体・水色ink・太字） */
section[class*="parts131415_blog"] .card-title{
  margin:0 !important;
  font-family:var(--f-en) !important; font-size:var(--fs-body) !important; font-weight:700 !important;
  letter-spacing:.06em !important; color:var(--c-aqua-ink) !important; text-align:left !important;
}
/* 記事見出し（受領 .site-blog__item h3＝明朝600・紺） */
section[class*="parts131415_blog"] .card-text{
  margin:0 !important;
  font-family:var(--f-mincho) !important; font-size:var(--fs-h3) !important; font-weight:600 !important;
  line-height:1.6 !important; letter-spacing:.04em !important; color:var(--c-navy) !important;
  text-align:left !important;
}
header .sh-cta:hover{
    color: #fff!important;
}
.site-fv .site-btn--main:hover{
    color: #fff!important;
}
.parts131415_blog_ltP5gTqypA .card-text{
    height: auto!important;
}