/* ===== 20_site.css ===== */
/* ===== cuezilla-skin.css（共通スキン・動的パーツの崩れ止め） ===== */
/* ============================================================
   ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★
   ------------------------------------------------------------
   （Claude Code / Claude Design / 手作業、いずれの経路でも同じです）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== style.css（デザイナー仕上げ・受領のまま。image-slot → img:where(.site-slot) の付け替えのみ） ===== */
@charset "UTF-8";
/* ============================================================
   S01802 小川冷熱株式会社 ／ トップ草案 style.css
   共通1ファイル集中管理（design_rules「HTML版草案生成時の追加ルール」KEEPブロック）。
   トンマナは先頭 :root の変数だけで一括調整できる形にしてある。

   ★★ このプロジェクトへの取り込みメモ（2026-08-31）★★
   Drive 経由の取得では 43KB のうち §16 途中（.sp-crumb__list）までしか読み出せなかった。
   ここに入っているのは §0〜§15（TOPページが使う範囲・原本どおり）＋ reveal 演出の復元分。
   下層ページ用の sp-table / sp-cards / sp-steps / sp-qa 以降は未取り込み。
   ＝TOPページは原本どおり、下層10ページは style.css の実ファイルをもらってから。
   ============================================================ */

/* ============================================================
   0. トークン（ここだけで色・余白・タイポを一括調整できる）
   ============================================================ */
:root{
  /* --- 面（白・黒ベース） --- */
  --paper:      #ffffff;
  --tint:       #f3f4f2;
  --ink:        #101112;
  --ink-sub:    #4a5054;   /* 本文の弱め。白地 8.0:1 */
  --dark:       #17191a;
  --dark-2:     #101112;
  --line:       #dfe1de;
  --line-dark:  #33383a;

  /* --- 差し色＝緑（ink/lite の2値。design_rules「アクセント色は白地用/濃地用の2値で持つ」） --- */
  --green:      #007a54;   /* 白地の文字・面。★現ロゴの緑 #00B078 を白地でAAに乗るまで暗くした値（#fff に対し 5.37:1） */
  --green-lite: #3fc495;   /* 濃地の文字。同じ色相(161°)を明るく振った値（#17191a に対し 8.16:1） */
  --green-deep: #005e41;   /* 緑面の上のホバー・押下 */

  /* --- タイポ（種類は6つ。font-size-kinds 12 の上限内） --- */
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-en:  "Roboto", var(--font-ja);                       /* 欧文（本文・ラベル系） */
  --font-enc: "Roboto Condensed", "Roboto", var(--font-ja);   /* 欧文（見出し・数字など詰めたい箱） */
  --t-eyebrow: 13px;                              /* 英字ラベル・和文社名・コピーライト（補助的表記のみ） */
  --t-body:    17px;                              /* ★本文。CTA・注記・フッター・ナビも同じ（二重基準を作らない） */
  --t-lead:    19px;                              /* リード・思想セクション本文・英字ワードマーク */
  --t-h2:      clamp(1.95rem, 3.12vw, 2.7rem);   /* ★120%アップ：31 → 43px */
  --t-h1sub:   clamp(1.75rem, 3.4vw, 2.625rem);   /* 28 → 42px。下層ページのH1（jump 2.47 @1280） */
  --t-h1:      clamp(2.75rem, 6.6vw, 5.5rem);    /* ★TOP FV の見出し：44 → 88px */
  --t-stat:    clamp(2.375rem, 6cqi, 4.5rem);

  /* --- 版面（★読み幅を絶対値でキャップせず「段の版面」を切り替える） --- */
  --wrap:      1440px;   /* 既定の版面（全セクション共通） */
  --wrap-read: 1440px;   /* セクションの版面は全て揃える */
  --measure:      100%;  /* ★本文は版面いっぱいで折り返す */
  --gutter:    clamp(20px, 4vw, 40px);

  /* --- 余白トークン（P_large ＞ P_medium ＞ P_small。design_rules「背景色で決める」） --- */
  --row-pad: clamp(64px, 8vw, 112px);   /* P_large：Row の上下端＝背景の切り替わり */
  --sec-gap: clamp(40px, 5vw, 64px);    /* P_medium：同一 Row 内のセクション間 */
  --el-gap:  20px;                      /* P_small：セクション内の要素間 */

  /* --- 角丸・動き（roundness 0 / motionScale 0.9） --- */
  --radius: 0;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur:    520ms;
  --dur-s:  220ms;
}

/* ============================================================
   1. リセット・素の要素（素タグに装飾は当てない。体裁は接頭辞クラス側で持つ）
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ja);
  font-size:var(--t-body);
  font-weight:400;
  line-height:2.0;     /* 和文横組み本文は 2.0〜2.3 */
  letter-spacing:.01em;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul{ list-style:none; padding:0; }

/* 行末孤立（最終行が1〜2文字）の対策。★文字を足しも削りもせずCSSだけで直す */
h1,h2,h3,.dual-path-split__title,.site-cta__h2,.sp-hero__h1{ text-wrap:balance; line-break:strict; }
/* 本文は行幅を使い切って折り返す（pretty / auto-phrase による行調整はしない。
   セクション内で折り返し位置がばらついて見えるため） */
p,li,dd,dt,td{ text-wrap:wrap; line-break:strict; }
.sp-table__key,.sp-table__val,.sp-card__txt,.sp-step__txt,.sp-qa__a,.site-body{ word-break:normal; }
.stats-band__label,.sf__nav a,.site-blog__ttl,.sp-table__key,.sp-card__ttl,.sp-step__ttl{ text-wrap:balance; }
.site-textlink{ white-space:nowrap; }

.site-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; font-size:var(--t-body);
}
.site-skip:focus-visible{ left:0; }

:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
.sh a:focus-visible,.sf a:focus-visible,
.site-recruit a:focus-visible,.site-cta a:focus-visible,
.site-news a:focus-visible,.dual-path-split__panel:focus-visible{
  outline-color:var(--green-lite);
}

/* ============================================================
   2. 版面と Row（背景色が切り替わったら新しい Row。Row が縦余白を持つ）
   ============================================================ */
.site-wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* ヘッダーはバーではなく、左上のロゴブロック＋右上のハンバーガー（＋CTA）の
   フローティング構成。本文は最上部まで full-bleed で通す（全ページ先頭が濃地のFV）。 */
body{ padding-top:0; }
html{ scroll-padding-top:80px; }
[id]{ scroll-margin-top:80px; }
.site-row{ padding-block:var(--row-pad); background:var(--paper); }
.site-row > * + *{ margin-top:var(--sec-gap); }
.site-row--tint{ background:var(--tint); }
.site-row--dark{ background:var(--dark); color:#eceeec; }

/* 版面（セクション幅）は1440pxで全体揃え、読み物系は「行長」だけを絞る。
   （セクションを絞ると見出し・写真の左端が他の段とずれるため） */
.site-body,
.site-lead,
.site-tbc,
.site-ideology__text,
.site-fv__lead,
.sp-hero__lead,
.sp-qa__a{ max-width:var(--measure); }

/* 長文の器（フォーム・定義リスト）は列ごと絞る */
.sp-form{ max-inline-size:min(100%, 860px); }
.sp-table{ max-inline-size:100%; }

/* ★中央寄せの3セクション（思想・目的から選ぶ・強み）。
   スマホは方針どおり左揃えのままとするので 600px 以上でだけ適用。 */
@media (min-width:600px){
  .site-ideology .site-wrap,
  .site-select   .site-wrap,
  .site-strength .site-wrap{ text-align:center; }
  .site-ideology .site-eyebrow,
  .site-select   .site-eyebrow,
  .site-strength .site-eyebrow{ justify-content:center; }
  .site-ideology__text,
  .site-select .site-lead,
  .site-select .site-body,
  .site-strength .site-lead,
  .site-strength .site-body{ margin-inline:auto; }
}

/* ============================================================
   3. 共通の部品（見出し・本文・ボタン・英字ラベル＝署名3）
   ============================================================ */
.site-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-enc);
  font-size:calc(var(--t-eyebrow) * 2.06);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.4;
  /* 指定色は #0ab478。白地でのコントラストが 2.7:1 と不足するため、
     色味を保ったまま最小限だけ濃くする（約 3.5:1／大きい太字なので基準を満たす） */
  color:#099e69;
  margin-bottom:var(--el-gap);
}
/* 先頭の短い横罫は使わない（英字ラベルは文字のみ） */
.site-eyebrow::before{ content:none; }
.site-eyebrow--onDark{ color:var(--green-lite); }

.site-h2{
  /* ★CONCEPT（セクション1）以外の見出しは110% */
  font-size:calc(var(--t-h2) * 1.1);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.02em;
  margin-bottom:var(--el-gap);
}
.site-h2--onDark{ color:#fff; }

.site-body{ font-size:var(--t-body); line-height:2.0; }
.site-body + .site-body{ margin-top:var(--el-gap); }
.site-body--onDark{ color:#e7eae7; }
.site-lead{ font-size:var(--t-lead); line-height:2.0; }

/* 原稿の ＜br＞ は意味の切れ目。狭幅では自然改行に任せる */
.site-br{ display:none; }
@media (min-width:900px){ .site-br{ display:inline; } }

.site-textlink{
  color:var(--green);
  font-size:var(--t-body);
  text-underline-offset:.25em;
}
.site-textlink--onDark{ color:var(--green-lite); display:inline-block; margin-top:var(--el-gap); }

.site-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:64px;
  padding:18px 30px;
  margin-top:var(--el-gap);
  background:var(--green); color:#fff;
  border:2px solid var(--green);
  border-radius:var(--radius);
  font-size:var(--t-body); font-weight:700; line-height:1.5;
  text-decoration:none;
  transition:background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.site-btn:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.site-btn--outline{ background:transparent; color:var(--green); }
.site-btn--outline:hover{ background:var(--green-lite); border-color:var(--green-lite); color:var(--ink); }
.site-btn--onDark{ background:var(--green); border-color:var(--green); color:#fff; }
.site-btn--tel{ background:#fff; color:var(--green); border-color:#fff; font-family:var(--font-en); letter-spacing:.04em; }
.site-btn--tel:hover{ background:#e6f2ec; border-color:#e6f2ec; color:var(--green-deep); }
.site-btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
/* 施工実績ボタン：黒地・白文字／ホバーで明るい緑 */
.site-btn--ink{ background:var(--ink); border-color:var(--ink); color:#fff; }
.site-btn--ink:hover{ background:var(--green-lite); border-color:var(--green-lite); color:var(--ink); }

/* 施工実績：全幅の帯ボタン。ホバーで明るい緑が左から流れ込む */
.site-bandbtn{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  inline-size:100%; min-block-size:88px; padding:0 clamp(24px, 3vw, 48px);
  background:var(--ink); color:#fff; text-decoration:none;
  font-size:calc(var(--t-body) * 1.12); font-weight:700;
  position:relative; overflow:hidden;
  transition:color 520ms cubic-bezier(.22,.61,.36,1);
}
.site-bandbtn > *{ position:relative; z-index:1; }
.site-bandbtn::before{
  content:""; position:absolute; inset:0;
  background:var(--green-lite);
  transform:translateX(-101%);
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.site-bandbtn:hover{ color:var(--ink); }
.site-bandbtn:hover::before{ transform:translateX(0); }
.site-bandbtn--paper{
  background:#fff; color:var(--ink);
  margin-top:var(--sec-gap);
  inline-size:min(100%, 50%);
}
.site-bandbtn--paper .site-bandbtn__en{ opacity:.55; }
.site-bandbtn--half{ inline-size:min(100%, 50%); }
.site-bandbtn--line{ background:#05B44C; }
.site-bandbtn--incta{ margin-top:0; inline-size:100%; }
.site-bandbtn--gap{ margin-top:var(--sec-gap); }
/* CTA帯の2ボタン：ホバーは黒が流れ込み、文字は明るい緑 */
.site-bandbtn--incta::before{ background:var(--ink); }
.site-bandbtn--incta:hover{ color:var(--green-lite); }
.site-bandbtn--incta:hover .site-bandbtn__en{ opacity:.8; }
.site-bandbtn__en{
  font-family:var(--font-en); font-size:var(--t-eyebrow);
  letter-spacing:.1em; opacity:.72;
}
@media (max-width:599px){
  .site-bandbtn{ min-block-size:76px; font-size:var(--t-body); }
  .site-bandbtn--paper{ inline-size:100%; }
  .site-bandbtn--half{ inline-size:100%; }
}
.site-btn--ghost:hover{ background:#fff; color:var(--green); }

/* 注釈。本文より小さくグレー */
.site-note{
  margin-top:var(--el-gap);
  font-size:calc(var(--t-body) * .82); line-height:1.8;
  color:var(--ink-sub);
}

/* 要回収の注記。本文と同じ 17px */
.site-tbc{
  display:inline-block;
  margin-top:var(--el-gap);
  padding:10px 16px;
  border:1px dashed var(--green);
  color:var(--green);
  font-size:var(--t-body);
  line-height:1.7;
}
.site-tbc--onDark{ border-color:var(--green-lite); color:var(--green-lite); }

/* ============================================================
   4. ヘッダー（sh-）
   ・屋号は左上に固定。背景色はロゴの分だけ＝バーは全幅に伸ばさない
   ・PC・タブレット・スマホすべてハンバーガー。直下にCTA2つを縦書きで貼る
   ・展開時のメニューは全画面
   ============================================================ */
:root{ --sh-tap: 64px; }   /* ハンバーガー／CTAタブの一辺 */

.sh{
  position:fixed; inset-inline:0; top:0; z-index:50;
  background:transparent; border:0; backdrop-filter:none;
  pointer-events:none;   /* 帯としては存在しない。中の部品だけ受け取る */
}
.sh__bar{ display:block; max-width:none; margin:0; padding:0; }

/* 屋号（左上固定・背景はこのブロックの分だけ） */
.sh__logo{
  position:fixed; top:0; left:0; z-index:60; pointer-events:auto;
  display:flex; flex-direction:column; text-decoration:none;
  padding:14px clamp(20px,2.4vw,28px) 14px var(--gutter);
  /* ★縮小は block-size でなく transform で行う（レイアウトを動かさないのでガタつかない） */
  transform-origin:0 0;
  transform:scale(1);
  transition:transform 480ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  background:#fff;
  backdrop-filter:none;
}
.sh__logo-en{ font-family:var(--font-enc); font-size:var(--t-lead); font-weight:500; letter-spacing:.06em; line-height:1.2; }
.sh__logo-img{
  display:block; inline-size:auto;
  block-size:clamp(44px,4.2vw,56px);
}
/* ★スクロール開始後は縮小（site.js が .is-scrolled を付ける） */
.sh.is-scrolled .sh__logo{ transform:scale(.7); }
/* スマホはロゴブロックの高さをハンバーガー（64px）に揃える */
@media (max-width:599px){
  .sh__logo{ block-size:var(--sh-tap); justify-content:center; padding-block:0; }
  .sh__logo-img{ block-size:38px; }
}
/* ヘッダーメニュー内のCTA（PCのみ表示。狭幅はドロワーの既存CTAを使う） */
.sh__item--cta{ display:none; }
.sh__logo-img--dark{ display:none; }
.sh__logo-ja{ font-size:var(--t-eyebrow); color:var(--ink-sub); letter-spacing:.14em; line-height:1.6; }

/* 狭幅はハンバーガー、1160px 以上はヘッダーメニュー（下の @media で出す） */
.sh__gnav{ display:none; }
.sh__menu{ display:flex; align-items:center; gap:clamp(10px,1.4vw,22px); }
.sh__item{ position:relative; }
.sh__link{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-body); line-height:1.4; text-decoration:none; white-space:nowrap;
}
.sh__link:hover{ color:var(--green); }
.sh__item--has > .sh__link::after{
  content:""; inline-size:6px; block-size:6px; margin-left:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.sh__sub{
  position:absolute; left:0; top:100%; min-width:220px;
  background:var(--dark); padding:8px 0;
  opacity:0; visibility:hidden; translate:0 8px;
  transition:opacity var(--dur-s) var(--ease), translate var(--dur-s) var(--ease), visibility var(--dur-s);
}
.sh__item--has:hover .sh__sub,
.sh__item--has:focus-within .sh__sub{ opacity:1; visibility:visible; translate:0 0; }
.sh__sublink{
  display:block; padding:10px 20px; min-height:44px;
  color:#eceeec; font-size:var(--t-body); line-height:1.5; text-decoration:none; white-space:nowrap;
}
.sh__sublink:hover{ background:var(--green); color:#fff; }

/* ★ヘッダーのCTA2つは画面右端に貼り付け、縦書きで縦に並べる（サイド固定タブ） */
.sh__cta{
  display:none; flex-direction:column; gap:0;
  position:fixed; right:0; top:var(--sh-tap); z-index:61; pointer-events:auto;
}
/* ★下層ページ名（ハンバーガーの真下・タブレット縦以上で表示） */
.sh__page{
  display:none;
  position:fixed; top:var(--sh-tap); right:0; z-index:61; pointer-events:none;
  align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:upright;
  width:var(--sh-tap); height:auto; padding:18px 0;
  margin:0;
  background:#fff; color:var(--ink);
  font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.14em; line-height:1;
  white-space:nowrap;
}
@media (min-width:768px){
  .sh__page{ display:inline-flex; }
  /* ページ名の高さは文字数で変わるので、site.js の実測値だけCTAタブを下げる */
  .sh:has(.sh__page) .sh__cta{ top:calc(var(--sh-tap) + var(--sh-page-h, 0px)); }
}
/* 版面（最大1080）の外側にタブの幅が取れる幅でだけ出す。
   これより狭い幅では本文に重なるのでドロワー内のCTAに任せる。 */
@media (min-width:1120px){
  .sh__cta{ display:flex; top:var(--sh-bar-h); }
  .sh__page{ display:none; }
}

/* ★PC（1120px 以上）：ハンバーガーをやめ、白帯のヘッダーメニューに切り替える */
@media (min-width:1120px){
  :root{ --sh-bar-h:74px; }
  .sh{ pointer-events:auto; background:#fff; border-bottom:1px solid var(--line); }
  .sh__bar{
    display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,32px);
    block-size:var(--sh-bar-h);
    padding-inline:var(--gutter) calc(var(--sh-tap) + 16px);
  }
  .sh__logo{
    position:static; z-index:auto; padding:0; background:transparent;
    flex:0 0 auto; justify-content:center;
  }
  .sh__logo-img{ block-size:40px; }
  .sh.is-scrolled .sh__logo{ transform:none; }
  .sh__gnav{ display:block; flex:0 1 auto; min-inline-size:0; }
  .sh__menu{ justify-content:flex-end; gap:clamp(8px,1.1vw,22px); }
  .sh__link{ font-size:clamp(.8125rem, 1.05vw, 1rem); }
  .sh__link{ min-height:var(--sh-bar-h); }
  .sh__sub{ top:auto; }
  .sh .sh__burger,
  .sh .sh__toggle,
  .sh .sh__drawer{ display:none; }
  .sh__logo-img{ display:none; }
  .sh__logo-img--dark{ display:block; }
  /* 縦タブのCTAは廃止し、メニュー内のボタンに一本化する */
  .sh .sh__cta{ display:none; }
  .sh__bar{ padding-inline:var(--gutter) 0; }
  .sh__item--cta{ display:block; margin-inline-start:8px; }
  .sh__hbtn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:var(--sh-bar-h); padding-inline:clamp(14px,1.4vw,22px);
    font-size:clamp(.8125rem, 1.05vw, 1rem); font-weight:700; letter-spacing:.04em;
    text-decoration:none; white-space:nowrap;
    transition:background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  }
  .sh__hbtn--entry{ background:var(--green); color:#fff; }
  .sh__hbtn--entry:hover{ background:var(--green-lite); color:var(--ink); }
  .sh__hbtn--contact{ background:var(--ink); color:#fff; }
  .sh__hbtn--contact:hover{ background:var(--green-lite); color:var(--ink); }
  .sh__link{ padding-inline:2px; }
}
@media (min-width:1120px) and (max-width:1279px){
  .sh__logo-img{ block-size:32px; }
  .sh__menu{ gap:8px; }
  .sh__item--cta{ margin-inline-start:4px; }
  .sh__hbtn{ padding-inline:12px; }
}
.sh__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:8px 18px;
  border:2px solid transparent; border-radius:var(--radius);
  font-size:var(--t-body); font-weight:700; line-height:1.4; text-decoration:none; white-space:nowrap;
}
.sh__cta .sh__btn{
  writing-mode:vertical-rl; text-orientation:upright;
  inline-size:auto; width:var(--sh-tap); min-height:0;
  padding:24px 0;
  letter-spacing:.12em;
  border-width:0;
  transition:background 320ms cubic-bezier(.22,.61,.36,1), color 320ms cubic-bezier(.22,.61,.36,1);
}
/* 右端タブは2つとも、ホバーで明るい緑に */
.sh__cta .sh__btn:hover{ background:var(--green-lite); color:var(--ink); }
.sh__cta .sh__btn + .sh__btn{ border-top:1px solid var(--line); }
/* 右端タブのお問い合わせだけ黒地に緑文字（ドロワー内の白ボタンとは別扱い） */
.sh__cta .sh__btn--contact{ background:var(--ink); color:var(--green-lite); }
.sh__cta .sh__btn--contact:hover{ background:var(--green-lite); color:var(--ink); }
.sh__btn--entry{ background:var(--green); color:#fff; border-color:var(--green); }
.sh__btn--entry:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.sh__btn--contact{ background:#fff; color:var(--ink); border-color:#fff; }
/* ドロワー内の2つも、ホバーで背景が明るい緑に変わる */
.sh__dcta .sh__btn{ transition:background 320ms cubic-bezier(.22,.61,.36,1), border-color 320ms cubic-bezier(.22,.61,.36,1), color 320ms cubic-bezier(.22,.61,.36,1); }
.sh__dcta .sh__btn:hover{ background:var(--green-lite); border-color:var(--green-lite); color:var(--ink); }

/* ハンバーガー（CSSのみ・checkbox） */
.sh__toggle{
  position:absolute; inline-size:1px; block-size:1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.sh__burger{
  position:fixed; top:0; right:0; z-index:61; pointer-events:auto;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  inline-size:var(--sh-tap); min-block-size:var(--sh-tap);
  background:var(--ink);
  border-left:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  backdrop-filter:none;
  color:#fff;
  cursor:pointer;
}
.sh__burger-bar,
.sh__burger-bar::before,
.sh__burger-bar::after{
  content:""; display:block; inline-size:26px; block-size:2px; background:#fff;
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
/* 上下の線は ::before/::after で描くため、その分の高さを margin で確保する
   （確保しないと MENU の文字に線が重なる） */
.sh__burger-bar{ position:relative; margin-block:8px; }
.sh__burger-bar::before{ position:absolute; top:-8px; }
.sh__burger-bar::after{ position:absolute; top:8px; }
.sh__burger-txt{ margin-block-start:3px; font-family:var(--font-enc); font-size:var(--t-eyebrow); letter-spacing:.12em; line-height:1; }
.sh__toggle:focus-visible + .sh__burger{ outline:3px solid var(--green); outline-offset:2px; }
.sh__toggle:checked + .sh__burger .sh__burger-bar{ background:transparent; }
.sh__toggle:checked + .sh__burger .sh__burger-bar::before{ top:0; transform:rotate(45deg); }
.sh__toggle:checked + .sh__burger .sh__burger-bar::after{ top:0; transform:rotate(-45deg); }

/* ★展開時は全画面メニュー。開閉は透明度＋わずかな上下移動でつなぐ
   （display の切り替えではアニメーションが効かないため visibility で閉じる） */
.sh__drawer{
  position:fixed; inset:0; z-index:55;
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--dark) 85%, transparent);
  backdrop-filter:saturate(1.1) blur(10px);
  overflow:hidden;   /* 開く瞬間のスライド分で横スクロールバーが出ないようにする */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 420ms var(--ease), visibility 420ms;
}
.sh:has(.sh__toggle:checked) .sh__drawer{
  opacity:1; visibility:visible; pointer-events:auto;
}
.sh__drawer > nav{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  max-height:100%; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(var(--sh-tap) + 20px) var(--gutter) 28px;
  translate:0 20px;
  transition:translate 520ms var(--ease);
}
.sh:has(.sh__toggle:checked) .sh__drawer > nav{ translate:0 0; }
@media (prefers-reduced-motion: reduce){
  .sh__drawer,
  .sh__drawer > nav{ transition:none; }
  .sh__drawer > nav{ translate:0 0; }
}
/* 開いた状態で1画面に収める（スクロール不要）。
   行高は 44px 以上を保ったまま、画面が低いときは段数を増やして高さを吸収する。 */
.sh__dmenu{ display:grid; grid-template-columns:1fr; gap:0 clamp(20px,4vw,56px); padding:0; }
.sh__dmenu a{
  display:flex; align-items:center; min-height:48px;
  color:#eceeec; font-size:clamp(1.0625rem,1.8vw,1.375rem); font-weight:700; line-height:1.4;
  letter-spacing:.02em; text-decoration:none;
  transition:color var(--dur-s) var(--ease);
}
.sh__dmenu a:hover{ color:var(--green-lite); }
.sh__dsub{
  min-height:44px !important;
  padding-left:18px;
  font-size:var(--t-body) !important; font-weight:400 !important;
  color:#b9bfbb !important;
}
.sh__dsub:hover{ color:var(--green-lite) !important; }
.sh__dcta{ display:flex; flex-direction:column; flex-wrap:nowrap; gap:10px; padding:var(--el-gap) 0 0; }
.sh__dcta .sh__btn{ flex:0 0 auto; width:100%; }
/* 低い画面（タブレット横・スマホ横）は2〜3段組に切り替える */
/* 段組み時は列方向に流して、親項目とその下層（会社概要・働く環境など）を
   同じ列に並べる（行方向に流すと親子が左右に分断される） */
@media (max-height:800px){
  .sh__dmenu{ grid-template-columns:1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(7,auto); }
  .sh__dmenu a{ min-height:44px; }
}
@media (max-height:560px){
  .sh__dmenu{ grid-template-columns:repeat(3,1fr); grid-auto-flow:column; grid-template-rows:repeat(5,auto); }
  .sh__dmenu a{ min-height:40px; font-size:var(--t-body); }
  .sh__dcta{ padding-top:14px; }
  .sh__dcta .sh__btn{ min-height:40px; }
}

/* ★タブレット縦以上は、全画面ではなく画面の右1/4に出す（左側は本文が見える）。
   ナビは1カラム、CTAは縦積み。画面が低いとき（スマホ横など）は全画面のまま。 */
@media (min-width:768px) and (min-height:600px){
  .sh__drawer{
    inset:0 0 0 auto; width:max(25vw + 20px, 380px);
    /* 右パネル */
    background:color-mix(in srgb, var(--dark) 85%, transparent);
    backdrop-filter:saturate(1.1) blur(10px);
    border-left:1px solid var(--line-dark);
  }
  .sh__drawer > nav{
    max-width:none; margin-inline:0;
    padding:calc(var(--sh-tap) + 20px) calc(var(--sh-tap) + 16px) 28px clamp(28px,2.4vw,44px);
    translate:16px 0;
  }
  .sh:has(.sh__toggle:checked) .sh__drawer > nav{ translate:0 0; }
  .sh__dmenu{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; }
  .sh__dmenu a{ min-height:46px; font-size:clamp(1.0625rem,1.2vw,1.1875rem); }
  .sh__dcta{ flex-direction:column; flex-wrap:nowrap; gap:10px; padding-top:var(--sec-gap); max-width:none; }
  .sh__dcta .sh__btn{ flex:0 0 auto; width:100%; min-height:52px; }
}
/* 右1/4パネルのまま画面が低いときは、段を増やす代わりに行高を詰めて1画面に収める */
@media (min-width:768px) and (max-height:780px) and (min-height:600px){
  .sh__dmenu a{ min-height:40px; font-size:var(--t-lead); }
  .sh__dsub{ min-height:34px !important; }
}
/* 右上の縦並びCTAタブが出ている幅では、展開画面内の同じボタン2つは出さない */
@media (min-width:1120px){
  .sh__dcta{ display:none; }
}

/* ============================================================
   5. FV（署名2：地球・工事・人の3枚クロスフェード）
   ============================================================ */
.site-fv{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:100dvh;
  padding-block:var(--row-pad);
  background:var(--dark);
  overflow:hidden;
}
/* ★TOPのみ：FVは画面に固定され、NEWS以下が上に被さってくる。
   レイアウトは動かさず、被さる分だけ transform / opacity で自然に沈ませる。 */
#main > .site-fv{
  position:sticky; top:0; z-index:0;
  /* sticky中は overflow:hidden のまま（スライドのクリップ用） */
}
#main > *:not(.site-fv){ position:relative; z-index:1; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #main > .site-fv{
      animation:site-fv-sink linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
      will-change:transform, opacity;
    }
    @keyframes site-fv-sink{
      from{ transform:scale(1); opacity:1; }
      to{ transform:scale(.94); opacity:.55; }
    }
  }
}
.site-fv__media{ position:absolute; inset:0; z-index:0; isolation:isolate; }
.site-fv__slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  animation:site-fv-wipe 18s var(--ease) infinite both;
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
}
.site-fv__slide--1{ z-index:3; animation-delay:0s; }
.site-fv__slide--2{ z-index:2; animation-delay:-12s; object-position:50% 70%; }
.site-fv__slide--3{ z-index:1; animation-delay:-6s; }
@keyframes site-fv-wipe{
  /* 消えるときも現れるときも同じ左→右方向。
     見えていない間に左端へ戻してから、左→右へ広がって現れる */
  0%,28%       { clip-path:inset(0 0 0 0) }
  36%          { clip-path:inset(0 0 0 100%) }
  36.01%,92%   { clip-path:inset(0 100% 0 0) }
  100%         { clip-path:inset(0 0 0 0) }
}
/* 写真の上に文字が乗るのでスクリム（黒の単純な半透明ではなくブランド緑を含む方向グラデ） */
.site-fv__scrim{
  position:absolute; inset:0; z-index:4;
  background:
    linear-gradient(35deg, rgba(16,17,18,.82) 0%, rgba(16,17,18,.50) 28%, rgba(16,17,18,.16) 52%, rgba(16,17,18,0) 68%);
}
.site-fv__body{ position:relative; z-index:1; }
.site-fv__h1{
  color:#fff;
  /* ★収まる幅では1行。狭い幅（〜767px）は文字を小さくしすぎず2行に落とす */
  font-size:min(var(--t-h1), 7.2vw);
  text-wrap:nowrap;  font-weight:700;
  line-height:1.24;
  letter-spacing:-.02em;
}
@media (max-width:1020px){
  .site-fv__h1{ font-size:var(--t-h1); }
}
/* タブレット縦（768〜1020px）は少し大きく */
@media (min-width:768px) and (max-width:1020px){
  .site-fv__h1{ font-size:calc(clamp(3.25rem, 7vw, 4.5rem) * 1.1); }
}
/* タブレット横（1021〜1280px）は少し小さく */
@media (min-width:1021px) and (max-width:1280px){
  .site-fv__h1{ font-size:calc(min(var(--t-h1), 5.4vw) * 1.2); }
}
.site-fv__lead{
  margin-top:var(--el-gap);
  max-width:none;
  color:#e7eae7;
  font-size:var(--t-lead);
  line-height:2.0;
  display:flex; flex-direction:column; gap:2px;
}
/* 上2行は大きく、最後の署名行は本文サイズ。
   ★三行とも折り返さず1行に収める（狭い幅では文字側が縮む） */
.site-fv__lead-l{
  white-space:nowrap;
  font-size:min(clamp(1.0625rem,2.1vw,1.75rem), 3.5vw);
  font-weight:500; line-height:1.6; color:#fff;
}
.site-fv__lead-l br{ display:none; }
.site-fv__lead-s{
  white-space:nowrap;
  margin-top:10px;
  font-size:min(var(--t-body), 3.4vw);
  letter-spacing:.12em;
  line-height:1.8; color:#c9cfcb;
}

/* 自動再生の停止は prefers-reduced-motion で行う（画面上の停止ボタンは置かない） */
@media (prefers-reduced-motion: reduce){
  .site-fv__slide{ animation:none; }
  .site-fv__slide--1{ clip-path:inset(0 0 0 0); }
  .site-fv__slide--2,
  .site-fv__slide--3{ clip-path:inset(0 100% 0 0); }
}

/* 左下：スクロール案内バー（縦線を光が下へ走る）
   ★本文と重ならないよう、本文側（.site-fv__body）にこの分の下余白を取る */
.site-fv__body{ padding-block-end:clamp(20px,3vh,34px); }
.site-fv__scroll{
  position:absolute; left:var(--gutter); bottom:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
@media (max-width:599px){
  .site-fv__body{ padding-block-end:clamp(100px,17vh,146px); }
}
@media (min-width:600px){
  .site-fv__body{ padding-inline-start:calc(var(--gutter) + 68px); }
}
@media (min-width:600px){
  .site-fv__body{ padding-inline-start:calc(var(--gutter) + 68px); }
}
.site-fv__scroll-txt{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-enc); font-size:var(--t-eyebrow); font-weight:500;
  letter-spacing:.28em; color:#fff;
}
.site-fv__scroll-bar{
  position:relative; display:block; overflow:hidden;
  inline-size:1px; block-size:clamp(56px,9vh,88px);
  background:rgba(255,255,255,.35);
}
.site-fv__scroll-bar::after{
  content:""; position:absolute; inset-inline:0; top:0; block-size:100%;
  background:var(--green-lite);
  animation:site-scroll-run 2.4s var(--ease) infinite;
}
@keyframes site-scroll-run{
  0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) }
}

/* 右下：トップに戻る（上向きの矢羽） */
.site-totop{
  position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:45;
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:52px; block-size:52px;
  background:var(--ink); color:#fff; text-decoration:none;
  opacity:0; visibility:hidden; translate:0 8px;
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1),
             translate 420ms cubic-bezier(.22,.61,.36,1),
             visibility 420ms,
             background 340ms cubic-bezier(.22,.61,.36,1),
             color 340ms cubic-bezier(.22,.61,.36,1),
             scale 340ms cubic-bezier(.22,.61,.36,1);
}
.site-totop.is-in{ opacity:1; visibility:visible; translate:0 0; }
.site-totop:hover{ background:var(--green-lite); color:var(--ink); scale:1.06; }
.site-totop__ico{
  display:block; inline-size:12px; block-size:12px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  rotate:-45deg; translate:0 2px;
  transition:translate 340ms cubic-bezier(.22,.61,.36,1);
}
.site-totop:hover .site-totop__ico{ translate:0 -1px; }
@media (prefers-reduced-motion: reduce){
  .site-fv__scroll-bar::after{ animation:none; }
  .site-totop{ transition:none; }
}
@media (max-width:599px){
  .site-totop{ inline-size:46px; block-size:46px; }
}

/* ============================================================
   6. NEWS（濃地 Row）
   ============================================================ */
.site-fv + .site-news{ padding-block-start:clamp(8px,1.1vw,13px); }
.site-news__list{ border-top:1px solid var(--line-dark); }
.site-news__row{ border-bottom:1px solid var(--line-dark); }
.site-news__link{
  display:flex; flex-wrap:nowrap; align-items:center; gap:6px 24px;
  min-height:56px; padding:12px 0;
  color:#eceeec; font-size:var(--t-body); line-height:1.7; text-decoration:none;
}
.site-news__link:hover .site-news__label{ color:var(--green-lite); }
.site-news__date{ font-family:var(--font-en); letter-spacing:.06em; color:var(--green-lite); flex:0 0 auto; }
/* 一行表示：NEWSラベル＋最新1件＋ブログリンクを同一行に。
   CueZillaは3件固定で出力されるため、2件目以降はCSSで非表示にする。 */
.site-news .site-wrap{
  display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(14px,2.5vw,36px);
}
.site-news .site-eyebrow{ flex:0 0 auto; margin-block:0; }
/* 帯を細く：Row の上下余白をこのセクションだけ詰める */
.site-news{ padding-block:clamp(8px,1.1vw,13px); }
.site-news .site-wrap{ align-items:center; }
.site-news .site-eyebrow,
.site-news__link,
.site-news .site-textlink{ display:flex; align-items:center; line-height:1.4; }
.site-news .site-textlink{ margin-top:0; }
.site-news__list{ flex:1 1 auto; min-width:0; border-top:0; }
.site-news__row{ border-bottom:0; }
.site-news__row:nth-child(n+2){ display:none; }
.site-news__link{ min-height:0; padding-block:0; }
.site-news .site-textlink{ flex:0 0 auto; }
/* NEWSの「もっと見る」：矢印が右へ、下線が左から伸びる（transform のみ） */
.site-news .site-textlink{
  position:relative; gap:8px;
  color:#fff;
  text-decoration:none;
  transition:color var(--dur-s) var(--ease);
}
.site-news .site-textlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}
.site-news .site-textlink::before{
  content:"→"; font-family:var(--font-en); order:2;
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}
.site-news .site-textlink:hover{ color:var(--green-lite); }
.site-news .site-textlink:hover::after{ transform:scaleX(1); }
.site-news .site-textlink:hover::before{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .site-news .site-textlink::after,
  .site-news .site-textlink::before{ transition:none; }
}
@media (max-width:767px){
  .site-news .site-wrap{ flex-wrap:wrap; row-gap:10px; justify-content:center; text-align:center; }
  .site-news .site-eyebrow{ flex:0 0 100%; justify-content:center; }
  .site-news__list{ flex:1 1 100%; }
  .site-news__link{ justify-content:center; flex-wrap:wrap; }
  .site-news__label{ flex:0 1 auto; }
  .site-news .site-textlink{ flex:0 0 100%; justify-content:center; }
  .site-news{ padding-block:16px 22px; }
  .site-fv + .site-news{ padding-block-start:16px; }
  /* 英字ラベルは行送りが大きく、上だけ余白が広く見えるので詰める */
  .site-news .site-eyebrow{ line-height:1.1; }
}
.site-news__label{
  transition:color var(--dur-s) var(--ease);
  min-width:0; flex:1 1 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-wrap:nowrap;
}

/* ============================================================
   7. 思想セクション（署名1：スクロールで文字に緑が乗る）
   ============================================================ */
.site-ideology .site-eyebrow{ color:var(--ink); }
.site-ideology__h2{
  color:#099e69;
  font-size:calc(var(--t-h2) * 1.3);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.02em;
  margin-bottom:var(--sec-gap);
}
.site-ideology__text{
  font-size:calc(var(--t-lead) * 1.34);
  font-weight:800;
  line-height:2.0;
  color:var(--ink);
}
/* ★スクロールにともなって、見出し・本文が1文字ずつ灻っていく（site.js が span に分割）。
   JSが動かない環境では普通のテキストのまま。 */
/* 1文字ずつ span に分割すると flex アイテム化して gap が字間に入るため、
   このラベルだけ通常のインライン表示に戻す（字間は他セクションと同じ） */
.site-ideology .site-eyebrow{ display:block; gap:0; }
.site-ideology .site-eyebrow span[data-ch],
.site-ideology__h2 span[data-ch],
.site-ideology__text span[data-ch]{
  opacity:.1;
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .site-ideology .site-eyebrow span[data-ch],
  .site-ideology__h2 span[data-ch],
  .site-ideology__text span[data-ch]{ opacity:1 !important; transition:none; }
}

/* ============================================================
   8. 2ドア分岐（MISSION dual-path-split の bake 済みCSS）
   ============================================================ */
.dual-path-split{
  --dps-h: clamp(28rem, 60vh, 44rem);
  --dps-overlay: 0.45;
  container-type: inline-size;
}
.dual-path-split__inner{
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--tint);
  min-block-size: clamp(28rem, 60vh, 44rem);
}
.dual-path-split__panel{
  position:relative;
  display:flex;
  flex:1 1 50%;
  align-items:flex-end;
  min-block-size:18rem;
  padding: calc(clamp(3rem, 2.875rem + 0.556vw, 3.375rem) * 1.1) calc(clamp(2rem, 1.917rem + 0.370vw, 2.25rem) * 1.1);
  color:#ffffff;
  background-color:#007a54;
  background-size:cover;
  background-position:50% 50%;
  text-decoration:none;
  overflow:hidden;
  transition:flex-grow 420ms cubic-bezier(0.2, 0, 0, 1);
}
.dual-path-split__tint{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,
    rgba(16,17,18,.72) 0%,
    rgba(16,17,18,.52) 30%,
    rgba(16,17,18,0) 50%,
    rgba(16,17,18,0) 100%);
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1);
}
.dual-path-split__body{ position:relative; z-index:1; max-inline-size:28rem; }
.dual-path-split__title{
  margin: calc(clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem) * 1.1) 0 0;
  font-size:var(--t-h2);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.02em;
}
.dual-path-split__lead{
  margin: calc(clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem) * 1.1) 0 0;
  font-size:var(--t-body);
  line-height:2.0;
}
.dual-path-split__cta{
  display:inline-flex; align-items:center;
  gap: calc(clamp(0.5rem, 0.479rem + 0.093vw, 0.563rem) * 1.1);
  margin-block-start: calc(clamp(1.5rem, 1.438rem + 0.278vw, 1.688rem) * 1.1);
  font-size:var(--t-body);
  font-weight:700;
  letter-spacing:-.02em;
  border-bottom:2px solid var(--green-lite);
  padding-bottom:6px;
}
.dual-path-split__arrow{ transition:translate var(--dur-s) var(--ease); }
.dual-path-split__panel:hover .dual-path-split__arrow{ translate:0.3em 0; }
/* タブレット縦（768px前後）から横並び。スマホのみ縦積み */
@container (min-width: 46rem){
  .dual-path-split__inner{ flex-direction:row; }
  .dual-path-split__panel:hover{ flex-grow:1.35; }
}
@media (prefers-reduced-motion: reduce){
  .dual-path-split__panel{ transition:none; }
  .dual-path-split__panel:hover{ flex-grow:1; }
}
/* --- 案件側の上書き: 未支給写真を img で持つ --- */
.site-pathsplit__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* ============================================================
   9. 数字で見る（MISSION stats-band の bake 済みCSS）
   ============================================================ */
.stats-band{
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  padding-block:var(--row-pad);
  padding-inline:var(--gutter);
  background:var(--dark);
  color:#eceeec;
}
/* 建物が見える程度の黒オーバーレイ */
.stats-band::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(16,17,18,.50) 0%, rgba(16,17,18,.30) 45%, rgba(16,17,18,.44) 100%);
}
.stats-band__inner{
  position:relative;
  z-index:2;
  display:flex; flex-direction:column;
  gap:var(--sec-gap);
  margin-inline:auto;
  max-inline-size:var(--wrap);
}
.stats-band__head{ flex:0 0 auto; }
.stats-band__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--el-gap);
  font-family:var(--font-enc);
  font-size:calc(var(--t-eyebrow) * 2.06);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.4;
  color:var(--green-lite);
}
/* 4並び → 収まらなければ 2×2 → スマホは1列 */
.stats-band__grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sec-gap) clamp(24px, 3vw, 44px);
  min-inline-size:0;
  align-items:start;
}
@container (min-width: 34rem){
  .stats-band__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 66rem){
  .stats-band__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.stats-band__stat{
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.40);
  padding:clamp(20px, 2.2vw, 28px);
}
/* 値の行の高さを4項目で統一 → ラベルの頭が揃い、罫線の見え方も揃う */
.stats-band__value{ min-block-size:calc(var(--t-stat) * 1.05); align-content:flex-end; }
/* 緑の縦罫の長さも行内で揃える（ラベル1行/2行の差を吸収） */
.stats-band__grid{ align-items:stretch; gap:clamp(12px, 1.4vw, 20px); }
.stats-band__label{ min-block-size:calc(1.75em * 2); }
.stats-band__value{
  display:flex; align-items:baseline; flex-wrap:wrap;
  font-family:var(--font-enc);
  font-size:var(--t-stat);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
}
.stats-band__num{ color:var(--green-lite); font-variant-numeric:tabular-nums; }
.stats-band__unit{
  font-size:var(--t-body);
  font-weight:700;
  margin-inline:.15em;
  letter-spacing:0;
  color:#eceeec;
}
.stats-band__label{
  margin:calc(var(--el-gap) * .7) 0 0;
  font-size:var(--t-body);
  line-height:1.75;
  color:#d6dad7;
  text-wrap:wrap;
  word-break:normal;
  max-inline-size:26ch;
}
.stats-band__value{ column-gap:0; row-gap:2px; align-items:baseline; }
.stats-band__unit{ font-size:calc(var(--t-body) * 1.45); }
.stats-band__unit{ white-space:nowrap; }
.site-stats__word{ font-size:calc(var(--t-stat) * .62); letter-spacing:.02em; }
.stats-band--stacked .stats-band__inner{ flex-direction:column; }
.stats-band--stacked .stats-band__head{ inline-size:auto; }
/* --- 案件側の上書き: 数字でない値（「関東一円」）は見出しスケールで組む --- */
.site-stats__word{
  font-size:calc(var(--t-h2) * 1.18);
  line-height:1.05;
  /* 数字より小さいため、ベースライン揃えだと視覚的に沈む → 光学的に中央へ引き上げ */
  transform:translateY(calc((var(--t-stat) - var(--t-h2) * 1.18) * -0.34));
}

/* ============================================================
   10. 強み（3点グリッドはフルブリード）
   ============================================================ */
.site-worksgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
@media (min-width:768px){
  .site-worksgrid{ grid-template-columns:repeat(3,1fr); }
}
.site-worksgrid__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* 施工写真カルーセル：画面端から端へ、右から左へ流れる。
   ホバーで停止（速度を0へ緩める）／ドラッグで手送り。 */
.site-worksmq{
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}
.site-worksmq.is-dragging{ cursor:grabbing; }
.site-worksmq__track{
  display:flex;
  gap:2px;
  width:max-content;
  will-change:transform;
}
.site-worksmq__item{ flex:0 0 auto; width:88vw; }
@media (min-width:768px){
  .site-worksmq__item{ width:46vw; }
}
@media (min-width:1200px){
  .site-worksmq__item{ width:36vw; }
}
.site-worksmq__item img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  pointer-events:none;
}

/* ============================================================
   11. 代表メッセージ（縦位置写真＋テキストの2分割）
   ============================================================ */
.site-message__grid{ display:grid; grid-template-columns:1fr; gap:var(--sec-gap); align-items:center; }
@media (min-width:900px){
  .site-message__grid{ grid-template-columns:minmax(280px, 0.78fr) 1.22fr; gap:clamp(32px, 5vw, 72px); }
}
/* タブレット縦以下は 4:3。社名が残るよう左寄りを基点にトリミング */
.site-message__fig img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:42% 45%; }
.site-message__sign{ margin-top:var(--sec-gap); }
/* 画像を右に置く反転レイアウト（本文→画像の順にマークアップ） */
@media (max-width:899px){
  .site-message__grid--rev .site-message__fig{ order:-1; }
}
@media (min-width:900px){
  .site-message__grid--rev{ grid-template-columns:1.22fr minmax(280px, 0.78fr); }
}
/* 横位置カットの図版はトリミングを変えず 3:2 で見せる */
.site-message__fig--land img{ aspect-ratio:3/2; object-position:center; }
@media (min-width:1021px){
  .site-message__fig.site-message__fig--land img{ aspect-ratio:4/5; object-position:center; }
}

/* ============================================================
   12. 採用（全幅写真＋白文字）
   ============================================================ */
.site-recruit{
  position:relative;
  padding-block:var(--row-pad);
  background:var(--dark);
  overflow:hidden;
}
.site-recruit__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.site-recruit__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(16,17,18,.86) 0%, rgba(16,17,18,.76) 38%, rgba(16,17,18,.29) 68%, rgba(16,17,18,.05) 100%),
    linear-gradient(0deg, rgba(0,176,120,.14) 0%, rgba(0,176,120,0) 55%);
}
.site-recruit__body{ position:relative; max-width:var(--wrap-read); }
/* スマホは本文が全幅になるため、横方向の抜けを弱める */
@media (max-width:767px){
  .site-recruit__scrim{
    background:
      linear-gradient(90deg, rgba(16,17,18,.70) 0%, rgba(16,17,18,.62) 60%, rgba(16,17,18,.50) 100%),
      linear-gradient(0deg, rgba(0,176,120,.14) 0%, rgba(0,176,120,0) 55%);
  }
}

/* ============================================================
   13. CTA（緑帯）
   ============================================================ */
.site-cta{
  padding-block:var(--row-pad);
  background:var(--green);
  color:#fff;
  text-align:center;
}
.site-cta__h2{ font-size:calc(var(--t-h2) * 1.1); font-weight:700; line-height:1.35; letter-spacing:-.02em; }
.site-cta__lead{ margin-top:var(--el-gap); margin-bottom:var(--sec-gap); font-size:var(--t-body); line-height:2.0; }
.site-cta__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
/* リード文のない下層ページCTA：見出しとボタンの間を空ける */
.site-cta__h2 + .site-cta__row{ margin-top:var(--sec-gap); }
@media (min-width:600px){
  .site-cta__row{ flex-wrap:nowrap; }
  .site-cta__row .site-bandbtn--incta{ flex:1 1 0; min-inline-size:0; }
}

/* ============================================================
   13b. スマートフォン（〜599px）＝本文は左揃え・面は縦積み
   ============================================================ */
@media (max-width:599px){
  .site-cta{ text-align:left; }
  .site-cta__row{ flex-direction:column; align-items:stretch; gap:12px; }
  .site-cta__row .site-btn{ width:100%; }
  .sp-center{ text-align:left; }
  .sp-center .site-eyebrow{ justify-content:flex-start; }
  .sp-filter{ justify-content:flex-start; }
  .sp-form__submit{ text-align:left; }
  .sp-form__submit .site-btn{ min-width:100%; }
  .site-btn{ width:100%; }
}

/* ============================================================
   14. BLOG（CueZilla投稿パーツの器）
   ============================================================ */
.site-blog__list{ display:grid; grid-template-columns:1fr; gap:clamp(20px, 3vw, 32px); }
@media (min-width:768px){ .site-blog__list{ grid-template-columns:repeat(3,1fr); } }
.site-blog__link{ display:flex; flex-direction:column; gap:10px; text-decoration:none; }
.site-blog__thumb{ display:block; aspect-ratio:16/10; background:var(--tint); border:1px solid var(--line); overflow:hidden; }
.site-blog__thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.site-blog__link:hover .site-blog__thumb img{ transform:scale(1.04); }
.site-blog__date{ font-family:var(--font-en); font-size:var(--t-body); letter-spacing:.06em; color:var(--green); }
.site-blog__ttl{ font-size:var(--t-body); line-height:1.7; }
.site-blog__btn{ display:flex; margin-inline:auto; inline-size:fit-content; padding-inline:calc(var(--el-gap) * 2.25); }
.site-blog__link:hover .site-blog__ttl{ color:var(--green); }

/* ============================================================
   15. フッター（sf-）
   ============================================================ */
.sf{ background:var(--dark-2); color:#c9cfcb; padding-block:var(--sec-gap); font-size:var(--t-body); }
.sf__catch{ margin:0; line-height:2.0; text-align:center; text-wrap:wrap; padding-bottom:var(--sec-gap); border-bottom:1px solid var(--line-dark); }
.sf__cols{ display:grid; grid-template-columns:1fr; gap:var(--sec-gap); padding-block:var(--sec-gap); }
/* タブレット横以上：キャッチの上下余白を詰める */
@media (min-width:1021px){
  .sf{ padding-block:calc(var(--sec-gap) * .6); }
  .sf__catch{ padding-bottom:calc(var(--sec-gap) * .6); }
}
@media (min-width:600px){ .sf__cols{ grid-template-columns:repeat(2,1fr); gap:var(--sec-gap) clamp(24px,3vw,48px); } }
@media (min-width:1080px){ .sf__cols{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px); } }
.sf__logo{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:var(--el-gap); }
.sf__logo-img{ display:block; block-size:52px; inline-size:auto; width:auto; max-width:100%; object-fit:contain; object-position:left center; }
.sf__logo-en{ font-family:var(--font-enc); font-size:var(--t-lead); font-weight:500; letter-spacing:.06em; color:#fff; line-height:1.2; }
.sf__logo-ja{ font-size:var(--t-eyebrow); letter-spacing:.14em; color:#9aa19c; line-height:1.6; }
.sf__info{ line-height:2.0; }
.sf__tel{ font-family:var(--font-en); font-size:var(--t-lead); letter-spacing:.04em; color:#fff; text-decoration:none; }
.sf__tel:hover{ color:var(--green-lite); }
.sf__sns{ display:flex; align-items:center; gap:12px; margin-top:var(--el-gap); }
.sf__sns a{ color:var(--green-lite); }
.sf__sns-ico{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:44px; block-size:44px;
  border:1px solid rgba(255,255,255,.28); color:var(--green-lite);
  transition:background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.sf__sns-ico--tbc{ color:rgba(255,255,255,.7); border-style:dashed; border-color:rgba(255,255,255,.34); cursor:default; }
.sf__sns-ico--tbc:hover{ background:transparent; border-color:rgba(255,255,255,.34); color:rgba(255,255,255,.7); }
.sf__sns-ico:hover{ background:var(--green-lite); border-color:var(--green-lite); color:var(--ink); }
.sf__nav a{ display:inline-flex; align-items:center; min-height:44px; color:#c9cfcb; text-decoration:none; line-height:1.6; }
.sf__nav a:hover{ color:var(--green-lite); }
.sf__sub{ color:#9aa19c !important; }
.sf__sub:hover{ color:var(--green-lite) !important; }
.sf__copy{ margin:0; padding-block:calc(var(--sec-gap) * .5) 0; text-align:center; border-top:1px solid var(--line-dark); font-size:var(--t-body); color:#9aa19c; }

/* ============================================================
   16+. reveal 演出（site.js が is-in を付ける・R-16）
        ★原本の末尾がDrive経由で読み出せなかったため復元した部分。
   ============================================================ */
/* JSが動いているときだけ隠す（.js-reveal は site.js が ＜html＞ に付ける）。
   スクロールしない環境・JSなしでは最初から見えている。 */
.js-reveal [data-reveal]{
  opacity:0;
  translate:0 16px;
  transition:opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.js-reveal [data-reveal].is-in{ opacity:1; translate:0 0; }
/* 左→右のワイプ（見出し・画像）。clip-path だけを動かすのでレイアウト再計算なし。 */
.js-reveal [data-reveal="wipe"]{
  opacity:1;
  translate:0 0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 2400ms cubic-bezier(.22,.61,.36,1);
  will-change:clip-path;
}
.js-reveal [data-reveal="wipe"].is-in{ clip-path:inset(0 0 0 0); }
/* FVのキャッチコピーはさらにゆっくり */
.js-reveal .site-fv__h1[data-reveal="wipe"],
.js-reveal .site-fv__lead[data-reveal="wipe"]{ transition-duration:2400ms; }
/* 「やさしく」はワイプ通過後、全体がゆっくり白→薄緑に染まる（表示→着色の順・C案） */
.site-fv__hl{ position:relative; display:inline-block; color:inherit; }
.site-fv__hl::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  color:#96f6d4; white-space:nowrap; pointer-events:none;
  opacity:1;
  transition:opacity 1600ms cubic-bezier(.4,0,.2,1) 1000ms;
}
.js-reveal .site-fv__h1[data-reveal="wipe"]:not(.is-in) .site-fv__hl::after{
  opacity:0;
  transition-delay:0ms;
}
@media (prefers-reduced-motion: reduce){
  .site-fv__hl::after{ transition:none; }
}
/* 画像は見出しより少し速く */
.js-reveal figure[data-reveal="wipe"],
.js-reveal img[data-reveal="wipe"],
.js-reveal .sp-gallery[data-reveal="wipe"],
.js-reveal .site-worksmq[data-reveal="wipe"],
.js-reveal .dual-path-split__panel[data-reveal="wipe"]{ transition-duration:1600ms; }
@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal]{ opacity:1; translate:0 0; transition:none; }
  .js-reveal [data-reveal="wipe"]{ clip-path:none; }
}
@media (scripting: none){
  [data-reveal]{ opacity:1; translate:0 0; }
  [data-reveal="wipe"]{ clip-path:none; }
}

/* ============================================================
   16+. 写真の扱い（下層ページ共通 figure・トリミング統一）
        参考サイトの「写真を大きく・比率を揃えて見せる」方針に合わせ、
        現場写真は横長で統一トリミング。ワイドはラップ幅より外へ広げる。
   ============================================================ */
.sp-fig{ margin:var(--sec-gap) 0 0; }
.sp-fig img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:center;
  background:var(--tint); border:1px solid var(--line);
}
.sp-fig--wide img{ aspect-ratio:16/9; }
/* 4分割：2pxの線で仕切って4枚並べる */
.sp-fig--quad{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px; background:var(--tint);
  border:0;
}
.sp-fig--quad img{ aspect-ratio:4/3; border:0; }
@media (min-width:768px){
  .sp-fig--quad{
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-inline:calc(-1 * (var(--gutter) - 12px));
  }
  .sp-fig--quad img{ aspect-ratio:3/4; }
}
@media (min-width:768px){
  .sp-fig--wide{
    margin-inline:calc(-1 * (var(--gutter) - 12px));
  }
  .sp-fig--wide img{ aspect-ratio:21/9; }
}
.sp-fig figcaption{
  margin-top:12px; font-size:var(--t-eyebrow);
  letter-spacing:.04em; color:#5a636c; line-height:1.8;
}

/* ============================================================
   16+. 下層ページFV（写真の上に英字ラベル＋ページ名が乗る）
        TOPの .site-fv と同じ作りだが、高さを低く抜いて帯にする。
   ============================================================ */
.sp-hero{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:clamp(240px, 38vh, 400px);
  padding-block:var(--row-pad);
  background:var(--dark);
  overflow:hidden;
}
.sp-hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.sp-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(16,17,18,.62) 0%, rgba(16,17,18,.40) 48%, rgba(16,17,18,.10) 100%),
    linear-gradient(0deg, rgba(0,176,120,.14) 0%, rgba(0,176,120,0) 60%);
}
.sp-hero__body{ position:relative; z-index:2; width:100%; }
.sp-hero__label{
  font-family:var(--font-enc); font-size:calc(var(--t-eyebrow) * 1.2);
  font-weight:500; letter-spacing:.22em; line-height:1.6;
  color:var(--green-lite);
}
.sp-hero__h1{
  margin-top:12px;
  font-size:var(--t-h1sub); font-weight:700; line-height:1.35; letter-spacing:.04em;
  color:#fff;
}

/* ============================================================
   16+. パンくず（下層ページ）
   ============================================================ */
.sp-crumb{ padding-block:var(--el-gap); border-bottom:1px solid var(--line); background:var(--paper); }
.sp-crumb__list{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  list-style:none; padding-inline:0; margin:0;
  font-size:var(--t-eyebrow); letter-spacing:.04em; color:var(--ink-sub); line-height:1.8;
}
.sp-crumb__list li{ display:flex; align-items:center; gap:10px; }
.sp-crumb__list li + li::before{ content:"\002F"; color:var(--line); }
.sp-crumb__list a{ color:var(--ink-sub); text-decoration:none; }
.sp-crumb__list a:hover{ color:var(--green); }
.sp-crumb__list [aria-current="page"]{ color:var(--ink); }

/* 業務内容：工種と写真を1枚のカードにまとめる */
.sp-svcs{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3vw,40px); margin-top:var(--sec-gap);
}
@media (min-width:600px){ .sp-svcs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1120px){ .sp-svcs{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sp-svc{ display:flex; flex-direction:column; gap:12px; }
.sp-svc__fig{ margin:0; overflow:hidden; background:var(--tint); }
.sp-svc__fig img{
  inline-size:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.sp-svc:hover .sp-svc__fig img{ transform:scale(1.04); }
.sp-svc__ttl{
  font-size:var(--t-lead); font-weight:700; line-height:1.7; color:var(--ink);
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.sp-svc__txt{ font-size:var(--t-body); line-height:1.95; color:var(--ink-sub); word-break:normal; }
@media (prefers-reduced-motion: reduce){ .sp-svc__fig img{ transition:none; } }

/* ============================================================
   16+. 定義リスト表（工種・仕様など）
   ============================================================ */
.sp-table{ margin-top:var(--sec-gap); border-top:1px solid var(--line); }
.sp-table__row{
  display:grid; grid-template-columns:1fr;
  gap:6px; padding-block:var(--el-gap);
  border-bottom:1px solid var(--line);
}
@media (min-width:768px){
  .sp-table__row{ grid-template-columns:minmax(160px, 0.28fr) 1fr; gap:0 clamp(24px,4vw,56px); }
}
.sp-table__key{
  font-size:var(--t-lead); font-weight:700; line-height:1.7; color:var(--ink);
}
.sp-table__val{ margin:0; font-size:var(--t-body); line-height:1.9; color:var(--ink-sub); }

/* ============================================================
   16+. ステップ（施工の流れ）
   ============================================================ */
.sp-steps{
  display:grid; grid-template-columns:1fr; gap:var(--el-gap);
  margin-top:var(--sec-gap);
}
@media (min-width:640px){ .sp-steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .sp-steps{ grid-template-columns:repeat(4,1fr); } }
.sp-step{
  display:flex; flex-direction:column; gap:10px;
  padding:var(--el-gap);
  background:var(--paper); border:1px solid var(--line);
  border-top:2px solid var(--green);
}
.sp-step__no{
  display:block; font-family:var(--font-enc); font-size:var(--t-h2);
  font-weight:500; line-height:1; letter-spacing:.04em; color:var(--green);
}
.sp-step__ttl{ font-size:var(--t-lead); font-weight:700; line-height:1.6; }
.sp-step__txt{ margin:0; font-size:var(--t-body); line-height:1.9; color:var(--ink-sub); }

/* ============================================================
   16+. カード（強み・入口・Q&A補足など）
   ============================================================ */
.sp-cards{
  display:grid; grid-template-columns:1fr; gap:var(--el-gap);
  margin-top:var(--sec-gap);
}
@media (min-width:640px){
  .sp-cards--c2{ grid-template-columns:repeat(2,1fr); }
  .sp-cards--c3{ grid-template-columns:repeat(2,1fr); }
  .sp-cards--c4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .sp-cards--c3{ grid-template-columns:repeat(3,1fr); }
  .sp-cards--c4{ grid-template-columns:repeat(4,1fr); }
}
.sp-card{
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(20px,2.4vw,28px);
  background:var(--paper); border:1px solid var(--line);
}
.sp-card__fig{ margin:0; }
.sp-card__fig img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; background:var(--tint);
}
.sp-card__ttl{ font-size:var(--t-lead); font-weight:700; line-height:1.6; }
.sp-step__lbl{ letter-spacing:-.01em; margin-inline-end:.3em; color:var(--green-lite); }
/* カード背景を濃色に（文字は白／リンクは明るい緑） */
.sp-cards--dark .sp-card{ background:var(--dark); border-color:var(--line-dark); }
.sp-cards--dark .sp-card__ttl{ color:#fff; }
.sp-cards--bigttl .sp-card__ttl{ font-size:calc(var(--t-lead) * 1.35); line-height:1.5; }
/* タブレット縦：MOREカードは縦積み */
@media (min-width:768px) and (max-width:1020px){
  .sp-cards--dark{ grid-template-columns:minmax(0,1fr); }
}
@media (min-width:1281px){
  .sp-cards--bigttl .sp-card__ttl{ font-size:calc(var(--t-lead) * 1.55); }
}
.sp-cards--dark .sp-card__txt{ color:#c9cfcb; }
.sp-cards--dark .site-textlink{ color:var(--green-lite); }
.sp-cards--dark .site-textlink:hover{ color:#fff; }
.sp-cards--greenttl .sp-card__ttl{ color:var(--green-deep); font-size:clamp(var(--t-lead), 1.35vw, calc(var(--t-lead) * 1.2)); }
@media (min-width:1281px){
  .sp-cards--greenttl .sp-card__ttl{ font-size:calc(var(--t-lead) * 1.35); }
}
.sp-card__txt{ margin:0; font-size:var(--t-body); line-height:1.9; color:var(--ink-sub); }
.sp-card .site-textlink{ margin-top:auto; align-self:flex-end; }
/* カード内リンクはNEWSの「もっと見る」と同じ挙動（矢印が右へ／下線が左から伸びる） */
.sp-card .site-textlink{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  color:var(--green); text-decoration:none;
  transition:color var(--dur-s) var(--ease);
}
.sp-card .site-textlink::before{
  content:"→"; font-family:var(--font-en); order:2;
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}
.sp-card .site-textlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}
.sp-card .site-textlink:hover{ color:var(--green-deep); }
.sp-card .site-textlink:hover::after{ transform:scaleX(1); }
.sp-card .site-textlink:hover::before{ transform:translateX(4px); }
.sp-cards--dark .sp-card .site-textlink{ color:var(--green-lite); }
.sp-cards--dark .sp-card .site-textlink:hover{ color:#fff; }
@media (prefers-reduced-motion: reduce){
  .sp-card .site-textlink::after,
  .sp-card .site-textlink::before{ transition:none; }
}

/* ============================================================
   16+. Q&A（よくあるご質問）
   ============================================================ */
.sp-qa{ margin-top:var(--sec-gap); border-top:1px solid var(--line); }
.sp-qa__item{ padding-block:var(--el-gap); border-bottom:1px solid var(--line); }
.sp-qa__q{
  display:flex; gap:12px;
  font-size:var(--t-lead); font-weight:700; line-height:1.7;
}
.sp-qa__q::before{
  content:"Q"; flex:0 0 auto;
  font-family:var(--font-en); font-weight:500; color:var(--green);
}
.sp-qa__a{
  display:flex; gap:12px;
  margin:10px 0 0; font-size:var(--t-body); line-height:1.9; color:var(--ink-sub);
}
.sp-qa__a::before{
  content:"A"; flex:0 0 auto;
  font-family:var(--font-en); color:var(--ink-sub);
}

/* ============================================================
   16+. ブログ一覧（本文＋サイドバーの2段）
   ============================================================ */
.sp-blog{ display:grid; grid-template-columns:1fr; gap:var(--sec-gap); }
@media (min-width:1024px){
  .sp-blog{ grid-template-columns:1fr minmax(260px, 300px); gap:clamp(32px,4vw,56px); align-items:start; }
}
.sp-posts{ display:grid; gap:var(--sec-gap); }
.sp-post{ display:flex; flex-direction:column; gap:14px; }
.sp-post__thumb{ margin:0; }
.sp-post__thumb img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover;
  background:var(--tint); border:1px solid var(--line);
}
.sp-post__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sp-post__date{ font-family:var(--font-en); font-size:var(--t-body); letter-spacing:.06em; color:var(--green); }
.sp-post__cat{
  display:inline-flex; align-items:center; min-height:26px; padding:0 10px;
  background:var(--green); color:#fff;
  font-size:var(--t-eyebrow); letter-spacing:.08em;
}
.sp-post__ttl{ font-size:var(--t-lead); font-weight:700; line-height:1.7; }
.sp-post__ttl a{ color:var(--ink); text-decoration:none; }
.sp-post__ttl a:hover{ color:var(--green); }
.sp-post__txt{ margin:0; font-size:var(--t-body); line-height:1.9; color:var(--ink-sub); }

.sp-side{ display:grid; gap:var(--el-gap); }
.sp-widget{ border:1px solid var(--line); background:var(--paper); }
.sp-widget__ttl{
  padding:12px 16px;
  background:var(--green); color:#fff;
  font-size:var(--t-eyebrow); font-weight:500; letter-spacing:.12em;
}
.sp-widget__body{ padding:16px; }
.sp-widget__list{ list-style:none; margin:0; padding:0; }
.sp-widget__list li + li{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.sp-widget__list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:var(--ink); font-size:var(--t-body); line-height:1.7; text-decoration:none;
}
.sp-widget__list a:hover{ color:var(--green); }
.sp-widget__list a::after{ content:"›"; flex:0 0 auto; font-family:var(--font-en); color:var(--green); }
.sp-widget__date{ display:block; font-family:var(--font-en); font-size:var(--t-eyebrow); letter-spacing:.06em; color:var(--green); }
.sp-widget__link{ display:block; }

/* ============================================================
   16+. 施工実績（工種フィルタ＋写真グリッド）
   ============================================================ */
.sp-center{ text-align:center; }
.sp-center .site-eyebrow{ justify-content:center; }

/* 募集要項：PCは表を読み幅で中央寄せ（見出しは左揃えのまま） */
@media (min-width:1281px){
  .site-req .sp-table{ margin-inline:auto; max-inline-size:var(--wrap-read); }
}
/* 応募ボタンはタブレット縦以上でセンター（TOPブログの一覧ボタンと同じ） */
@media (min-width:768px){
  .site-req__act{ max-inline-size:none; }
  .site-req__act .site-btn{ display:flex; margin-inline:auto; inline-size:fit-content; padding-inline:calc(var(--el-gap) * 2.25); }
}

/* 導入セクションのセンター寄せ */
@media (min-width:768px){
  .site-lead-center{ text-align:center; }
  .site-lead-center .site-eyebrow{ justify-content:center; }
  .site-lead-center .site-body{ margin-inline:auto; max-inline-size:var(--wrap-read); }
}

/* タブレット縦以上：PHILOSOPHYはセンター寄せ */
@media (min-width:768px){
  .site-philosophy{ text-align:center; }
  .site-philosophy .site-eyebrow{ justify-content:center; }
  .site-philosophy .site-body{ margin-inline:auto; max-inline-size:var(--wrap-read); }
}

.sp-filter{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:var(--sec-gap); padding:0; list-style:none;
}
.sp-filter a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px; min-inline-size:9.5rem;
  background:var(--green); color:#fff;
  font-size:var(--t-body); line-height:1.4; text-decoration:none;
  transition:background var(--dur-s) var(--ease);
}
.sp-filter a:hover{ background:var(--green-deep); }
.sp-filter a[aria-current="true"]{ background:var(--ink); }

.sp-gallery{
  display:grid; grid-template-columns:1fr; gap:var(--sec-gap) var(--el-gap);
  margin-top:var(--sec-gap);
}
@media (min-width:640px){ .sp-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .sp-gallery{ grid-template-columns:repeat(3,1fr); } }
.sp-item{ display:flex; flex-direction:column; gap:8px; }
.sp-item__thumb{ margin:0; }
.sp-item__thumb img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  background:var(--tint); border:1px solid var(--line);
}
.sp-item__date{ font-family:var(--font-en); font-size:var(--t-eyebrow); letter-spacing:.06em; color:var(--green); }
.sp-item__ttl{ font-size:var(--t-body); font-weight:700; line-height:1.6; }
.sp-item__ttl a{ color:var(--ink); text-decoration:none; }
.sp-item__ttl a:hover{ color:var(--green); }
.sp-item__tag{
  align-self:flex-start;
  display:inline-flex; align-items:center; min-height:26px; padding:0 10px;
  border:1px solid var(--green); color:var(--green);
  font-size:var(--t-eyebrow); letter-spacing:.06em;
}

/* ============================================================
   16+. フォーム（お問い合わせ・応募）
        CueZillaのフォーム機能に置換される。見た目の器。
   ============================================================ */
.sp-form{ max-width:var(--wrap-read); margin-top:var(--sec-gap); }
.sp-form__row + .sp-form__row{ margin-top:var(--sec-gap); }
.sp-form__head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sp-form__label{ font-size:var(--t-body); font-weight:700; line-height:1.6; }
.sp-form__req{
  display:inline-flex; align-items:center; min-height:24px; padding:0 10px;
  background:#c8102e; color:#fff;
  font-size:var(--t-eyebrow); letter-spacing:.08em;
}
.sp-form__opt{
  display:inline-flex; align-items:center; min-height:24px; padding:0 10px;
  border:1px solid var(--line); color:var(--ink-sub);
  font-size:var(--t-eyebrow); letter-spacing:.08em;
}
.sp-form__note{ margin:8px 0 0; font-size:var(--t-body); line-height:1.9; color:var(--ink-sub); }
.sp-form__input,
.sp-form__textarea{
  display:block; width:100%; margin-top:10px;
  padding:14px 16px;
  font-family:inherit; font-size:var(--t-body); line-height:1.7; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:0;
  transition:border-color var(--dur-s) var(--ease);
}
.sp-form__input{ min-height:52px; }
.sp-form__textarea{ min-height:220px; resize:vertical; }
.sp-form__input::placeholder,
.sp-form__textarea::placeholder{ color:#9aa19c; }
.sp-form__input:focus,
.sp-form__textarea:focus{ outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.sp-form__file{ display:block; width:100%; margin-top:10px; padding:12px 16px; border:1px solid var(--line); background:#fff; font:inherit; font-size:var(--t-body); }
.sp-form__file::file-selector-button{ margin-right:16px; padding:10px 16px; border:1px solid var(--line); background:var(--paper, #f4f6f4); font:inherit; font-size:var(--t-eyebrow); letter-spacing:.06em; cursor:pointer; }
.sp-form__checks{ display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:12px; }
.sp-form__check{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; font-size:var(--t-body); line-height:1.6; cursor:pointer;
}
.sp-form__check input{ inline-size:20px; block-size:20px; accent-color:var(--green); }
.sp-form__submit{ margin-top:var(--sec-gap); text-align:center; }
.sp-form__submit .site-btn{ min-width:min(100%, 320px); }
.sp-form__submit .site-btn:hover{ background:var(--green-lite); border-color:var(--green-lite); color:var(--ink); }

/* ============================================================
   17. スプラッシュ（TOPのみ・白地／ヘッダーロゴ＋ローディングバー）
       退場は opacity と transform だけで行い、レイアウトは動かさない。
   ============================================================ */
.sp-splash{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:#fff;
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1);
}
.sp-splash__inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vh,32px);
  transform:translateY(0) scale(1);
  transition:transform 520ms cubic-bezier(.22,.61,.36,1), opacity 380ms cubic-bezier(.22,.61,.36,1);
}
.sp-splash__logo{
  display:block; block-size:clamp(34px,5.4vw,52px); inline-size:auto; width:auto; max-width:78vw;
  object-fit:contain; object-position:center;
  opacity:0; transform:translateY(8px);
  animation:sp-splash-in 620ms cubic-bezier(.22,.61,.36,1) 60ms forwards;
}
.sp-splash__bar{
  position:relative; display:block; overflow:hidden;
  inline-size:clamp(160px,26vw,260px); block-size:2px;
  background:rgba(16,17,18,.12);
}
.sp-splash__bar-fill{
  position:absolute; inset:0;
  background:var(--green);
  transform:scaleX(0); transform-origin:left center;
  animation:sp-splash-load 1400ms cubic-bezier(.22,.61,.36,1) 120ms forwards;
}
@keyframes sp-splash-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes sp-splash-load{
  0%{ transform:scaleX(0); }
  62%{ transform:scaleX(.72); }
  100%{ transform:scaleX(1); }
}
.sp-splash[hidden]{ display:none; }
.sp-splash.is-out{ opacity:0; pointer-events:none; }
.sp-splash.is-out .sp-splash__inner{ opacity:0; transform:translateY(-6px) scale(.985); }
/* スプラッシュ表示中は背後をスクロールさせない */
html.is-splashing, html.is-splashing body{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .sp-splash__logo{ animation:none; opacity:1; transform:none; }
  .sp-splash__bar-fill{ animation:none; transform:scaleX(1); }
  .sp-splash, .sp-splash__inner{ transition:none; }
}

/* --- 2ドア分岐：英字は括弧なしのサブラベル、CTAは右下に置く --- */
.dual-path-split__en{
  display:block; margin:0 0 10px;
  font-family:var(--font-enc); font-size:calc(var(--t-lead) * 1.15);
  font-weight:700; letter-spacing:.12em; line-height:1.3;
  color:var(--green-lite);
}
.site-pathsplit .dual-path-split__title{ margin-top:0; }
.site-pathsplit .dual-path-split__body{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end; column-gap:clamp(16px,3vw,40px);
  width:100%; max-inline-size:none;
}
.site-pathsplit .dual-path-split__en{ grid-column:1 / -1; }
/* タブレット縦以下：英字ラベルは白 */
@media (max-width:1020px){
  .site-pathsplit .dual-path-split__en{ color:#fff; }
}
.site-pathsplit .dual-path-split__title{ max-inline-size:28rem; }
/* タブレット縦の横並び時は1カラム幅が狭いので、見出しとCTAは縦に積む */
@container (min-width: 46rem) and (max-width: 63.99rem){
  .dual-path-split__panel{ min-block-size:clamp(15rem, 32vh, 21rem); }
  .dual-path-split__inner{ min-block-size:clamp(15rem, 32vh, 21rem); }
  .dual-path-split__panel{ padding:clamp(1.5rem, 2.6vw, 2rem); }
  .site-pathsplit .dual-path-split__body{ grid-template-columns:minmax(0,1fr); }
  .site-pathsplit .dual-path-split__cta{ grid-column:1; justify-self:start; }
  /* 英字ラベルは左上、見出し＋CTAは下に寄せる */
  .dual-path-split__panel{ align-items:stretch; }
  .site-pathsplit .dual-path-split__body{
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto auto;
    block-size:100%; row-gap:0;
  }
  .site-pathsplit .dual-path-split__en{ grid-row:1; align-self:start; margin:0; }
  .site-pathsplit .dual-path-split__title{
    grid-row:3; align-self:end; justify-self:end; text-align:right;
    white-space:nowrap; max-inline-size:none; margin:0;
  }
}
/* CTAはNEWSの「もっと見る」と同じ見え方・同じホバー（下線が左から伸びる＋矢印スライド） */
.site-pathsplit .dual-path-split__cta{
  position:relative;
  grid-column:2; justify-self:end; align-self:end; margin-block-start:0;
  gap:8px; padding-bottom:0; border-bottom:0;
  font-size:var(--t-body); font-weight:400; letter-spacing:normal;
  color:#fff;
  transition:color var(--dur-s) var(--ease);
}
.site-pathsplit .dual-path-split__cta::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}
.site-pathsplit .dual-path-split__arrow{ transition:transform 360ms cubic-bezier(.22,.61,.36,1); }
.site-pathsplit .dual-path-split__panel:hover .dual-path-split__cta,
.site-pathsplit .dual-path-split__panel:focus-visible .dual-path-split__cta{ color:var(--green-lite); }
.site-pathsplit .dual-path-split__panel:hover .dual-path-split__cta::after,
.site-pathsplit .dual-path-split__panel:focus-visible .dual-path-split__cta::after{ transform:scaleX(1); }
.site-pathsplit .dual-path-split__panel:hover .dual-path-split__arrow,
.site-pathsplit .dual-path-split__panel:focus-visible .dual-path-split__arrow{ transform:translateX(4px); translate:none; }
.site-pathsplit .dual-path-split__panel:hover .dual-path-split__tint{ opacity:.72; }
@media (prefers-reduced-motion: reduce){
  .site-pathsplit .dual-path-split__cta,
  .site-pathsplit .dual-path-split__cta::after,
  .site-pathsplit .dual-path-split__arrow,
  .dual-path-split__tint{ transition:none; }
}

/* --- 2ドア分岐：ホバーで写真をゆっくりズーム --- */
.site-pathsplit__img{
  transform:scale(1);
  transition:transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.site-pathsplit .dual-path-split__panel:hover .site-pathsplit__img,
.site-pathsplit .dual-path-split__panel:focus-visible .site-pathsplit__img{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .site-pathsplit__img{ transition:none; }
  .site-pathsplit .dual-path-split__panel:hover .site-pathsplit__img{ transform:none; }
}

/* --- 線のみの「OGAWA REINETSU.」が下から上へ流れる縦ティッカー（CONCEPT／SELECT） --- */
.site-ideology,
.site-select{ position:relative; overflow:hidden; }
/* ティッカーは絶対配置の装飾なので、Row の要素間マージン対象から外す */
.site-vticker + .site-wrap{ margin-top:0; }
/* 本文は必ずティッカーより前面。さらにティッカー幅ぶん左に余白を取り、文字が重ならないようにする */
.site-ideology .site-wrap,
.site-select .site-wrap{ position:relative; z-index:1; }
@media (min-width:768px){
  /* ティッカー幅ぶんを左右同量取り、テキストが画面の中央に見えるようにする */
  .site-ideology .site-wrap,
  .site-select .site-wrap{
    padding-inline:calc(var(--gutter) + clamp(190px, 21vw, 300px));
  }
}
/* タブレット縦以下は本文を1pxだけ小さく */
@media (max-width:1020px){
  :root{ --t-body:16px; --t-lead:18px; }
}
/* タブレット横（1021〜1280px）は左右余白を詰めて本文の行長を確保 */
@media (min-width:1021px) and (max-width:1280px){
  .site-ideology .site-wrap,
  .site-select .site-wrap{
    padding-inline:calc(var(--gutter) + clamp(150px, 15vw, 200px));
  }
}
.site-vticker{
  position:absolute; left:0; top:0; bottom:0; z-index:0;
  inline-size:clamp(190px, 21vw, 300px);
  overflow:hidden; pointer-events:none;
}
.site-vticker__track{
  position:absolute; left:50%; top:0; translate:-50% 0;
  animation:site-vticker-run 26s linear infinite;
  will-change:transform;
}
.site-vticker__txt{
  display:block; white-space:nowrap;
  writing-mode:vertical-rl; text-orientation:sideways;
  font-family:var(--font-enc);
  font-size:clamp(68px, 9vw, 128px);
  font-weight:700; letter-spacing:-.015em; line-height:1;
  color:var(--paper);
  -webkit-text-fill-color:var(--paper);
  -webkit-text-stroke:2.5px var(--green-lite);
  paint-order:stroke fill;
  padding-block-end:.18em;
}
.site-select .site-vticker__txt{
  color:var(--tint); -webkit-text-fill-color:var(--tint);
  -webkit-text-stroke-color:var(--green);
}
@keyframes site-vticker-run{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .site-vticker__track{ animation:none; }
}
@media (max-width:767px){
  /* スマホ：縦のティッカーはやめ、S1とS2の境界に横向きで流す（S2側の1本だけ使う） */
  .site-ideology .site-vticker{ display:none; }
  /* 境界に跨らせるため S2 のクリップを解除 */
  .site-select{ overflow:visible; padding-block-start:calc(var(--row-pad) + .6em); }
  .site-select .site-vticker{
    inset:0 0 auto 0; inline-size:auto; block-size:auto;
    display:block; overflow:hidden; z-index:2;
    transform:translateY(-50%);
  }
  .site-select .site-vticker__track{
    position:relative; left:auto; top:auto; translate:0 0;
    display:flex; inline-size:max-content;
    animation:site-hticker-run 30s linear infinite;
  }
  .site-select .site-vticker__txt{
    writing-mode:horizontal-tb; text-orientation:mixed;
    /* セクション1側の配色（白文字＋明るい緑の枠線）に揃える */
    color:var(--paper); -webkit-text-fill-color:var(--paper);
    -webkit-text-stroke:2.5px var(--green-lite);
    font-size:clamp(34px, 11vw, 54px);
    padding-block-end:0; padding-inline-end:.35em;
  }
}
@keyframes site-hticker-run{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* タブレット縦（768〜1020px）：ティッカーは細く左端寄せ、本文は左右余白を最小限に */
@media (min-width:768px) and (max-width:1020px){
  .site-vticker{ inline-size:clamp(120px, 14vw, 150px); }
  .site-vticker__track{ left:0; translate:0 0; }
  .site-vticker__txt{ font-size:clamp(52px, 7vw, 78px); }
  .site-ideology .site-wrap,
  .site-select .site-wrap{
    padding-inline:calc(var(--gutter) + 72px);
  }
}

/* スマホだけで効く改行 */.site-br-sp{ display:none; }
@media (max-width:599px){
  .site-br-sp{ display:inline; }
}

/* スマホ：CONCEPTセクションの文字だけ 1px 小さく */
@media (max-width:599px){
  .site-ideology__h2{ font-size:calc(var(--t-h2) * 1.3 - 2px); }
  .site-ideology__text{ font-size:calc(var(--t-lead) * 1.34 - 2px); }
}

/* ============================================================
   ブログ一覧：2段カード＋サイドバー（クライアント指定レイアウト）
   ============================================================ */
.sp-bloglayout{
  display:grid; grid-template-columns:1fr; gap:var(--sec-gap);
  margin-top:var(--sec-gap);
}
@media (min-width:1024px){
  .sp-bloglayout{ grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,3.4vw,56px); align-items:start; }
}
.sp-bloglayout .sp-gallery{ margin-top:0; grid-template-columns:1fr; }
@media (min-width:640px){ .sp-bloglayout .sp-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .sp-bloglayout .sp-gallery{ grid-template-columns:repeat(2,1fr); } }
.sp-item__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sp-item__meta .sp-item__tag{ align-self:auto; }
.sp-item__excerpt{
  font-size:calc(var(--t-body) * .92); line-height:1.75; color:var(--ink-sub);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* サイドバー */
.sp-side{ display:flex; flex-direction:column; gap:var(--sec-gap); }
.sp-side__block{ border:1px solid var(--line); }
.sp-side__ttl{
  margin:0; padding:14px 18px;
  background:var(--green); color:#fff;
  font-size:calc(var(--t-body) * .95); font-weight:700; letter-spacing:.02em;
}
.sp-side__list{ list-style:none; margin:0; padding:0 18px; }
.sp-side__list > li + li{ border-top:1px solid var(--line); }
.sp-side__list > li{ padding:14px 0; }
.sp-side__date{
  display:block; font-family:var(--font-en); font-size:var(--t-eyebrow);
  letter-spacing:.06em; color:var(--ink-sub);
}
.sp-side__link{
  display:block; margin-top:4px;
  font-size:calc(var(--t-body) * .95); line-height:1.65;
  color:var(--ink); text-decoration:none;
  transition:color var(--dur-s) var(--ease);
}
.sp-side__link:hover{ color:var(--green); }
.sp-side__cat{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-decoration:none; color:var(--ink);
  font-size:calc(var(--t-body) * .95);
  transition:color var(--dur-s) var(--ease);
}
.sp-side__cat:hover{ color:var(--green); }
.sp-side__count{
  flex:0 0 auto; min-inline-size:30px; padding:2px 8px;
  background:var(--tint); color:var(--ink-sub);
  font-family:var(--font-en); font-size:var(--t-eyebrow); text-align:center;
}

/* ページネーション */
.sp-pager{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:var(--sec-gap); padding:0; list-style:none;
}
.sp-pager a,.sp-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:44px; min-block-size:44px; padding:0 14px;
  border:1px solid var(--line);
  font-family:var(--font-en); font-size:calc(var(--t-body) * .95);
  color:var(--ink); text-decoration:none;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.sp-pager a:hover{ border-color:var(--green); color:var(--green); }
.sp-pager [aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* タブレット縦：CTAを1カラム目の右端に置き、見出しと右端を揃える（後段の grid-column:2 を上書き） */
@container (min-width: 46rem) and (max-width: 63.99rem){
  .site-pathsplit .dual-path-split__cta{
    grid-row:4; grid-column:1; justify-self:end; align-self:end;
    white-space:nowrap; margin-block-start:10px;
  }
  .site-pathsplit .dual-path-split__arrow{ margin-inline-end:-.12em; }
}

/* スマホ（縦積み）でも同じ文字レイアウト：英字は左上、見出し＋CTAは下寄せ右揃え */
@container (max-width: 45.99rem){
  .dual-path-split__panel{
    flex-direction:column; align-items:stretch;
    min-block-size:clamp(15rem, 32vh, 21rem);
    padding-block:clamp(1.25rem, 4vw, 1.75rem);
  }
  .site-pathsplit .dual-path-split__body{
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto auto;
    flex:1 1 auto; block-size:auto; row-gap:0;
  }
  .site-pathsplit .dual-path-split__en{ grid-row:1; grid-column:1; align-self:start; margin:0; }
  .site-pathsplit .dual-path-split__title{
    grid-row:3; grid-column:1; align-self:end; justify-self:end; text-align:right;
    white-space:nowrap; max-inline-size:none; margin:0;
  }
  .site-pathsplit .dual-path-split__cta{
    grid-row:4; grid-column:1; justify-self:end; align-self:end;
    white-space:nowrap; margin-block-start:10px;
  }
  .site-pathsplit .dual-path-split__arrow{ margin-inline-end:-.12em; }
}

/* タブレット縦以下は写真が小さく文字が乗る面積が広いので、ティントを5%濃く */
@container (max-width: 63.99rem){
  .dual-path-split__tint{
    background:linear-gradient(0deg,
      rgba(16,17,18,.77) 0%,
      rgba(16,17,18,.57) 30%,
      rgba(16,17,18,.05) 50%,
      rgba(16,17,18,.05) 100%);
  }
}

/* スマホのみ：縦積みの最後（小川冷熱で働く）の下端にも境界線 */
@container (max-width: 45.99rem){
  .dual-path-split__panel:last-child{ box-shadow:none; }
  .dual-path-split__panel:last-child::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--tint); z-index:2; pointer-events:none;
  }
}

/* 「小川冷熱で働く」の写真：被写体（作業姿）が見えるよう上寄りにトリミング */
.site-pathsplit .dual-path-split__panel:last-child .site-pathsplit__img{ object-position:50% 70%; }

/* タブレット横（1021px）以上は縦長にトリミング。右の暗部は見切れてよい／社名は残す */
@media (min-width:1021px){
  .site-message__fig img{
    aspect-ratio:4/5; height:auto; object-fit:cover; object-position:38% 45%;
  }
}

/* BLOG は見出しが短く間隔が広く見えるため、ラベル下だけ詰める */
.site-blog .site-eyebrow{ margin-bottom:calc(var(--el-gap) * .5); }

/* OUR APPROACH：タブレットと手元が入る位置でトリミング */
.site-message__fig img[src*="about-ipad"]{ object-position:32% 62%; }

/* 小川冷熱について：ヒーローは社名サインが見える位置でトリミング */
.sp-hero__bg[src*="about-hero-office"]{ object-position:62% 32%; }
/* ブログ：機器まわり（右側）が見える位置でトリミング */
.sp-hero__bg[src*="blog-hero-plant"]{ object-position:78% 50%; }
/* よくあるご質問：キーボード・手元が入る位置でトリミング */
.sp-hero__bg[src*="faq-hero-desk"]{ object-position:50% 60%; }
/* お問い合わせ：クリップボードと余白が入る位置でトリミング */
.sp-hero__bg[src*="contact-hero-desk"]{ object-position:55% 55%; }

/* 数字セクション：背景写真は img で持ち、他セクションと同じワイプで出す */
.site-stats__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 78%;
}
/* スマホのみ別カット（縦位置・被写体が合う写真）に差し替える */
.site-stats__bg--sp{ display:none; }
@media (max-width:767px){
  .site-stats__bg--pc{ display:none; }
  .site-stats__bg--sp{ display:block; object-position:18% 60%; }
}
@media (max-width:1020px){
  .site-stats.stats-band::before{
    background:
      linear-gradient(180deg, rgba(16,17,18,.52) 0%, rgba(16,17,18,.36) 45%, rgba(16,17,18,.48) 100%);
  }
}

/* 採用セクション：人物（右側の作業者）が見えるようトリミング基点を右寄りに */
.site-recruit__bg{ object-position:72% 53%; }
@media (max-width:767px){
  .site-recruit__bg{ object-position:80% 53%; }
}

/* ============================================================
   写真差し替え枠（＜img:where(.site-slot)＞）。元の ＜img＞ と同じ箱として扱う
   ============================================================ */
img:where(.site-slot){ display:block; inline-size:100%; }
.site-worksgrid__item img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
.site-worksmq__item img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
.site-message__fig img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
.site-message__fig--land img:where(.site-slot){ aspect-ratio:3/2; }
@media (min-width:1021px){
  .site-message__fig img:where(.site-slot){ aspect-ratio:4/5; }
  .site-message__fig.site-message__fig--land img:where(.site-slot){ aspect-ratio:4/5; }
}
.site-blog__thumb img:where(.site-slot){ inline-size:100%; block-size:100%; aspect-ratio:auto; }
.sp-fig img:where(.site-slot){ inline-size:100%; aspect-ratio:3/2; border:1px solid var(--line); }
.sp-fig--wide img:where(.site-slot){ aspect-ratio:16/9; }
.sp-fig--quad img:where(.site-slot){ aspect-ratio:4/3; border:0; }
@media (min-width:768px){
  .sp-fig--quad img:where(.site-slot){ aspect-ratio:3/4; }
  .sp-fig--wide img:where(.site-slot){ aspect-ratio:21/9; }
}
.sp-svc__fig img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
.sp-card__fig img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
.sp-post__thumb img:where(.site-slot){ inline-size:100%; aspect-ratio:16/10; }
.sp-item__thumb img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
/* 全面敷きの写真（FV・数字帯・採用・下層ヒーロー）は親いっぱいに */
img:where(.site-slot).site-fv__slide,
img:where(.site-slot).site-stats__bg,
img:where(.site-slot).site-recruit__bg,
img:where(.site-slot).sp-hero__bg,
img:where(.site-slot).site-pathsplit__img{ inline-size:100%; block-size:100%; aspect-ratio:auto; }

/* 写真の上に重なる層は、差し替え枠の操作を通す（内部のリンク・ボタンだけ戻す） */
.sp-hero__scrim,
.site-fv__scrim,
.site-recruit__scrim,
.dual-path-split__tint,
.site-stats__scrim{ pointer-events:none; }
.sp-hero__body,
.site-fv__inner,
.site-recruit__body,
.dual-path-split__body,
.stats-band__inner{ pointer-events:none; }
.sp-hero__body a, .sp-hero__body button,
.site-fv__inner a, .site-fv__inner button,
.site-recruit__body a, .site-recruit__body button,
.dual-path-split__body a, .dual-path-split__body button,
.stats-band__inner a, .stats-band__inner button{ pointer-events:auto; }

/* ホバーの拡大は枠ごとに掛ける（シャドウ内の img には CSS が届かない） */
.sp-svc__fig img:where(.site-slot),
.site-blog__thumb img:where(.site-slot){ transition:transform 520ms cubic-bezier(.22,.61,.36,1); }
.sp-svc:hover .sp-svc__fig img:where(.site-slot),
.site-blog__link:hover .site-blog__thumb img:where(.site-slot){ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .sp-svc__fig img:where(.site-slot),
  .site-blog__thumb img:where(.site-slot){ transition:none; }
}

/* 業務内容：文章量に対して写真が大きいので、図版だけ一段小さく見せる */
@media (min-width:900px){
  .site-message__fig--sm{ inline-size:82%; }
  .site-message__grid:not(.site-message__grid--rev) .site-message__fig--sm{ margin-inline-end:auto; }
  .site-message__grid--rev .site-message__fig--sm{ margin-inline-start:auto; }
}

/* 採用：働きやすさの4カード（アイコン＋番号＋上端の緑罫） */
.sp-cards--env .sp-card{
  position:relative; gap:14px;
  padding:clamp(22px,2.6vw,30px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  transition:transform 380ms cubic-bezier(.22,.61,.36,1), border-color 380ms cubic-bezier(.22,.61,.36,1), box-shadow 380ms cubic-bezier(.22,.61,.36,1);
}
.sp-cards--env .sp-card::before{
  content:""; position:absolute; inset:-1px auto auto -1px;
  inline-size:calc(100% + 2px); block-size:3px; background:var(--green);
  transform:scaleX(.28); transform-origin:left center;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
.sp-cards--env .sp-card:hover{ transform:translateY(-4px); border-color:var(--green); box-shadow:0 12px 28px rgba(16,17,18,.08); }
.sp-cards--env .sp-card:hover::before{ transform:scaleX(1); }
.sp-cards--env .sp-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sp-cards--env .sp-card__ico{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:52px; block-size:52px; flex:0 0 auto;
  border-radius:12px;
  background:var(--tint); color:var(--green);
  transition:background-color 380ms cubic-bezier(.22,.61,.36,1), color 380ms cubic-bezier(.22,.61,.36,1);
}
.sp-cards--env .sp-card__ico svg{ inline-size:26px; block-size:26px; }
.sp-cards--env .sp-card:hover .sp-card__ico{ background:var(--green); color:#fff; }
.sp-cards--env .sp-card__no{
  font-family:var(--font-enc); font-size:calc(var(--t-lead) * 1.5); line-height:1;
  letter-spacing:.04em; color:var(--line);
}
@media (prefers-reduced-motion: reduce){
  .sp-cards--env .sp-card,
  .sp-cards--env .sp-card::before,
  .sp-cards--env .sp-card__ico{ transition:none; }
  .sp-cards--env .sp-card:hover{ transform:none; }
}

/* ============================================================
   下層ページのレイアウト型（2分割一択をやめるための追加パーツ）
   ============================================================ */
/* A. 図版を大きく、注釈を添える非対称レイアウト */
.sp-feature{ display:grid; gap:clamp(22px,3.4vw,48px); grid-template-columns:minmax(0,1fr); margin-top:var(--sec-gap); }
.sp-feature__fig{ margin:0; }
.sp-feature__fig img:where(.site-slot){ inline-size:100%; aspect-ratio:16/10; }
.sp-feature__body{ display:flex; flex-direction:column; gap:14px; }
@media (min-width:900px){
  .sp-feature{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; column-gap:clamp(32px,4vw,64px); }
  .sp-feature__body{ padding-bottom:4px; }
}

/* B. 見出しを左に据え、本文を右に流す（写真を使わない段） */
.sp-stack{ display:grid; gap:clamp(18px,2.6vw,32px); grid-template-columns:minmax(0,1fr); }
.sp-stack__body{ display:flex; flex-direction:column; gap:var(--el-gap); }
@media (min-width:1000px){
  .sp-stack{ grid-template-columns:minmax(220px,.42fr) minmax(0,1fr); column-gap:clamp(40px,6vw,96px); align-items:start; }
  .sp-stack__head{ position:sticky; top:110px; }
}

/* C. 縦のタイムライン（工程・ステップ） */
.sp-tl{ position:relative; display:grid; gap:clamp(22px,3vw,36px); margin-top:var(--sec-gap); padding-inline-start:38px; }
.sp-tl::before{
  content:""; position:absolute; inset-block:10px 10px; inset-inline-start:5px;
  inline-size:2px; background:var(--line);
}
.sp-tl__item{ position:relative; display:flex; flex-direction:column; gap:8px; }
.sp-tl__item::before{
  content:""; position:absolute; inset-inline-start:-38px; top:8px;
  inline-size:12px; block-size:12px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 5px var(--paper);
}
.site-row--tint .sp-tl__item::before{ box-shadow:0 0 0 5px var(--tint); }
.sp-tl__no{ font-family:var(--font-enc); font-size:var(--t-body); letter-spacing:.1em; color:var(--green); }
.sp-tl__ttl{ font-size:var(--t-lead); font-weight:700; line-height:1.6; }
.sp-tl__txt{ margin:0; font-size:var(--t-body); line-height:1.95; color:var(--ink-sub); }

/* D. 片側が版面の外へ抜ける写真（左右交互の2分割と差をつける） */
.sp-bleed{ display:grid; gap:clamp(22px,3.4vw,44px); grid-template-columns:minmax(0,1fr); align-items:start; margin-top:var(--sec-gap); }
.sp-bleed__fig{ margin:0; }
.sp-bleed__fig img:where(.site-slot){ inline-size:100%; aspect-ratio:3/2; }
.sp-bleed__body{ display:flex; flex-direction:column; gap:14px; }
@media (min-width:900px){
  .sp-bleed{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); column-gap:clamp(36px,5vw,80px); }
  .sp-bleed__fig{ position:sticky; top:104px; inline-size:calc(100% + var(--gutter)); margin-inline-end:calc(-1 * var(--gutter)); }
  .sp-bleed--left .sp-bleed__fig{
    order:-1; position:sticky; top:104px; inline-size:calc(100% + var(--gutter));
    margin-inline:calc(-1 * var(--gutter)) 0;
  }
  .sp-bleed--left{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
  .sp-bleed__fig img:where(.site-slot){ aspect-ratio:4/3; }
}

/* セクション直下に置く場合は上の余白を親（Row Padding）に任せる */
.site-wrap.sp-bleed, .site-wrap.sp-feature{ margin-top:0; }

/* TOP MESSAGE：署名の下に会社紹介へのボタンを置く */
.site-message__act{ margin-top:var(--el-gap); }
.site-message__act .site-btn{ inline-size:fit-content; }

/* ボタン内の矢印（ホバーでわずかに前へ出る） */
.site-btn--arrow{ gap:14px; }
.site-btn__arw{
  font-family:var(--font-en); line-height:1;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.site-btn--arrow:hover .site-btn__arw{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .site-btn__arw{ transition:none; } }

/* 写真2枚を横に並べる図版 */
.sp-fig--duo{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.sp-fig--duo img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; border:1px solid var(--line); }
@media (min-width:768px){
  .sp-fig--duo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-fig--duo img:where(.site-slot){ aspect-ratio:3/2; }
}

@media (min-width:1120px){ .sp-svcs--c3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ============================================================
   背景のメリハリ：--tint の段は「濃地（黒）」として組む
   （差し色の緑はそのまま。濃地では green-lite を使う）
   ============================================================ */
.site-row--tint{ background:var(--dark); color:#e7e9e8; }
.site-row--tint .site-h2,
.site-row--tint .sp-card__ttl,
.site-row--tint .sp-svc__ttl,
.site-row--tint .sp-qa__q,
.site-row--tint .sp-tl__ttl,
.site-row--tint .sp-step__ttl,
.site-row--tint .sp-table__key,
.site-row--tint .site-message__sign{ color:#fff; }
.site-row--tint .site-body,
.site-row--tint .site-lead,
.site-row--tint .sp-card__txt,
.site-row--tint .sp-svc__txt,
.site-row--tint .sp-qa__a,
.site-row--tint .sp-tl__txt,
.site-row--tint .sp-step__txt,
.site-row--tint .sp-table__val,
.site-row--tint .sp-fig figcaption,
.site-row--tint .sp-scroller figcaption{ color:#c3c8c9; }
.site-row--tint .site-eyebrow{ color:var(--green-lite); }
.site-row--tint .site-tbc{ color:#9aa1a3; }

/* 罫・面 */
.site-row--tint .sp-table,
.site-row--tint .sp-table__row,
.site-row--tint .sp-qa,
.site-row--tint .sp-qa__item,
.site-row--tint .sp-svc__ttl,
.site-row--tint .sp-fig img:where(.site-slot),
.site-row--tint .sp-fig--duo img:where(.site-slot){ border-color:var(--line-dark); }
.site-row--tint .sp-fig img:where(.site-slot),
.site-row--tint .sp-svc__fig,
.site-row--tint .site-blog__thumb{ background:var(--dark-2); }
/* 黒地セクションのカードは白面にして、背景とはっきり分ける */
.site-row--tint .sp-card{ background:var(--paper); border-color:var(--line); color:var(--ink-sub); }
.site-row--tint .sp-cards--env .sp-card{ background:var(--paper); border-color:var(--line); }
.site-row--tint .sp-card .sp-card__ttl{ color:var(--ink); }
.site-row--tint .sp-card .sp-card__txt{ color:var(--ink-sub); }
.site-row--tint .sp-card .site-textlink{ color:var(--green); }
.site-row--tint .sp-cards--env .sp-card::before{ background:var(--green); }
.site-row--tint .sp-cards--env .sp-card:hover{ border-color:var(--green); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.site-row--tint .sp-cards--env .sp-card__ico{ background:var(--tint); color:var(--green); }
.site-row--tint .sp-cards--env .sp-card:hover .sp-card__ico{ background:var(--green); color:#fff; }
.site-row--tint .sp-cards--env .sp-card__no{ color:var(--line); }
.site-row--tint .sp-cards--env .sp-card::before{ background:var(--green-lite); }
.site-row--tint .sp-cards--env .sp-card:hover{ border-color:var(--green-lite); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.site-row--tint .sp-cards--env .sp-card__ico{ background:rgba(255,255,255,.08); color:var(--green-lite); }
.site-row--tint .sp-cards--env .sp-card:hover .sp-card__ico{ background:var(--green-lite); color:var(--ink); }
.site-row--tint .sp-cards--env .sp-card__no{ color:#3d4244; }

/* タイムライン */
.site-row--tint .sp-tl::before{ background:var(--line-dark); }
.site-row--tint .sp-tl__item::before{ background:var(--green-lite); box-shadow:0 0 0 5px var(--dark); }
.site-row--tint .sp-tl__no{ color:var(--green-lite); }

/* リンク・ボタン */
.site-row--tint .site-textlink{ color:var(--green-lite); }
.site-row--tint .site-btn--ink{ background:#fff; color:var(--ink); }
.site-row--tint .site-btn--ink:hover{ background:var(--green-lite); color:var(--ink); }
.site-row--tint .site-bandbtn{ background:var(--dark-2); border:1px solid var(--line-dark); }
.site-row--tint .sp-filter a{ border-color:var(--line-dark); color:#e7e9e8; }
.site-row--tint .sp-crumb__list{ color:#c3c8c9; }

/* 見出しを上、本文を下に積む段（sp-stack の縦組み） */
.sp-stack--top{ grid-template-columns:minmax(0,1fr); row-gap:var(--sec-gap); }
@media (min-width:1000px){
  .sp-stack--top{ grid-template-columns:minmax(0,1fr); }
  .sp-stack--top .sp-stack__head{ position:static; }
}

/* 画像の解像度に合わせて図版を小さく見せる（中サイズ） */
.sp-fig--mid{ margin-inline:auto; max-inline-size:min(100%, 480px); }
.sp-fig--mid img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }

/* 本文左・写真右（写真は元画像の実寸 480px までで拡大させない） */
.sp-split{ display:grid; gap:clamp(22px,3vw,44px); grid-template-columns:minmax(0,1fr); align-items:start; }
.sp-split__body{ display:flex; flex-direction:column; gap:var(--el-gap); }
.sp-split__fig{ margin:0; max-inline-size:480px; }
.sp-split__fig img:where(.site-slot){ inline-size:100%; aspect-ratio:4/3; }
@media (min-width:900px){
  .sp-split{ grid-template-columns:minmax(0,1fr) minmax(280px, 480px); column-gap:clamp(32px,4vw,72px); }
}

/* 3:2 の小さい原画に合わせる中サイズ枠 */
.sp-fig--mid32 img:where(.site-slot){ aspect-ratio:3/2; }

.sp-split--32 .sp-split__fig img:where(.site-slot){ aspect-ratio:3/2; }

/* 縦型の写真（原画が小さいので幅は 360px までに抑える） */
.sp-split--portrait .sp-split__fig{ max-inline-size:360px; }
.sp-split--portrait .sp-split__fig img:where(.site-slot){ aspect-ratio:3/4; }
@media (min-width:900px){
  .sp-split--portrait{ grid-template-columns:minmax(0,1fr) minmax(240px, 360px); }
}

/* 見出しは本文列の先頭に置き、写真はその高さから始める */
.sp-split__head{ display:flex; flex-direction:column; }
.sp-split__head .site-eyebrow{ margin-bottom:calc(var(--el-gap) * .6); }

/* 採用：働き方の数字（TOPの濃地バンドとは別の、罫線だけの組み） */
.sp-facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; margin-top:var(--sec-gap);
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:900px){ .sp-facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sp-fact{
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(20px,2.4vw,30px); background:var(--paper);
}
.sp-fact__label{
  font-family:var(--font-enc); font-size:var(--t-eyebrow); letter-spacing:.1em;
  color:var(--green);
}
.sp-fact__value{ display:flex; align-items:baseline; gap:8px; margin:0; flex-wrap:wrap; }
.sp-fact__num{
  font-family:var(--font-enc); font-size:calc(var(--t-h2) * .92); font-weight:500;
  line-height:1; letter-spacing:.01em; color:var(--ink);
}
.sp-fact__unit{ font-size:var(--t-body); line-height:1.6; color:var(--ink-sub); }
.site-row--tint .sp-facts{ background:var(--line-dark); border-color:var(--line-dark); }
.site-row--tint .sp-fact{ background:var(--dark-2); }
.site-row--tint .sp-fact__num{ color:#fff; }
.site-row--tint .sp-fact__unit{ color:#c3c8c9; }
.site-row--tint .sp-fact__label{ color:var(--green-lite); }

/* 採用：歓迎する人のリスト（チェック付き・2列） */
.sp-welcome{
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px 40px;
  margin-top:var(--sec-gap); padding:0; list-style:none;
}
@media (min-width:768px){ .sp-welcome{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sp-welcome__item{
  position:relative; padding-inline-start:36px;
  padding-block:10px 12px; border-bottom:1px solid var(--line);
  font-size:var(--t-lead); line-height:1.75;
}
.sp-welcome__item::before{
  content:""; position:absolute; inset-inline-start:4px; top:1.05em;
  inline-size:14px; block-size:8px;
  border-inline-start:2px solid var(--green); border-block-end:2px solid var(--green);
  transform:rotate(-45deg) translateY(-50%);
}
.site-row--tint .sp-welcome__item{ border-color:var(--line-dark); color:#e7e9e8; }
.site-row--tint .sp-welcome__item::before{ border-color:var(--green-lite); }

/* 縦型写真を使う抜けレイアウト（本文の高さに近づけて空白を出さない） */
@media (min-width:900px){
  .sp-bleed--portrait .sp-bleed__fig img:where(.site-slot){ aspect-ratio:3/4; }
  .sp-bleed--portrait.sp-bleed--left{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); }
}

/* THREE POINTS など：カード見出しは balance をやめ、カード幅いっぱいで折り返す */
.sp-cards--env .sp-card__ttl{ text-wrap:wrap; word-break:normal; }

/* 日本語見出しは文節で折る（語中改行を避ける） */
.sp-split .site-h2,
.sp-stack__head .site-h2{ word-break:auto-phrase; }

/* 左の写真は右の本文と同じ高さまで伸ばす（比率ではなく高さ合わせ） */
@media (min-width:900px){
  .sp-bleed--portrait{ align-items:stretch; }
  .sp-bleed--portrait .sp-bleed__fig{ position:static; display:flex; }
  .sp-bleed--portrait .sp-bleed__fig img:where(.site-slot){ aspect-ratio:auto; block-size:100%; }
}

/* ある1日：時刻と内容の間を詰める */
@media (min-width:768px){
  .sp-table--tight .sp-table__row{ grid-template-columns:minmax(84px, 0.1fr) 1fr; gap:0 clamp(12px,1.4vw,20px); }
}

/* ある1日：休憩の行は面で色分けする */
.sp-table--tight .sp-table__row--rest{
  background:var(--tint);
  box-shadow:0 0 0 1px var(--line) inset;
}
.sp-table--tight .sp-table__row--rest .sp-table__key{ color:var(--green); }
.sp-table--tight .sp-table__row--rest .sp-table__val strong{ color:var(--green); }
@media (min-width:768px){
  .sp-table--tight .sp-table__row{ padding-inline:clamp(10px,1.2vw,16px); }
}
.site-row--tint .sp-table--tight .sp-table__row--rest{
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px var(--line-dark) inset;
}
.site-row--tint .sp-table--tight .sp-table__row--rest .sp-table__key,
.site-row--tint .sp-table--tight .sp-table__row--rest .sp-table__val strong{ color:var(--green-lite); }

/* 写真を大きめに取る2列（写真は原寸まで使う） */
.sp-split--figlg .sp-split__fig{ max-inline-size:none; }
@media (min-width:900px){
  .sp-split--figlg{ grid-template-columns:minmax(0,1fr) minmax(340px, 0.95fr); }
}

/* 写真は本文の高さに合わせる（構成は変えない） */
@media (min-width:900px){
  .sp-split--figlg{ align-items:stretch; }
  .sp-split--figlg .sp-split__fig{ display:flex; }
  .sp-split--figlg .sp-split__fig img:where(.site-slot){ aspect-ratio:auto; block-size:100%; }
}

/* 会社概要：本社・営業所の地図 */
.sp-maps{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,3vw,40px); margin-top:var(--sec-gap); }
@media (min-width:900px){ .sp-maps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sp-map{ display:flex; flex-direction:column; gap:10px; }
.sp-map__ttl{ font-size:var(--t-lead); font-weight:700; line-height:1.6; }
.sp-map__addr{ margin:0; font-size:var(--t-body); line-height:1.8; color:var(--ink-sub); }
.sp-map__box{
  position:relative; margin-top:4px; aspect-ratio:4/3;
  border:1px solid var(--line); background:var(--tint); overflow:hidden;
}
@media (min-width:900px){ .sp-map__box{ aspect-ratio:3/2; } }
.sp-map__frame{ position:absolute; inset:0; inline-size:100%; block-size:100%; border:0; }
.sp-map__link{ margin:0; font-size:var(--t-body); }
.site-row--tint .sp-map__addr{ color:#c3c8c9; }
.site-row--tint .sp-map__box{ border-color:var(--line-dark); background:var(--dark-2); }

/* THREE POINTS：カード本文は幅いっぱいまで使って折り返す
   （文節改行・pretty の行調整をやめ、カードごとの折り返し位置のばらつきをなくす） */
.sp-cards--env .sp-card__txt{ text-wrap:wrap; word-break:normal; }
@media (max-width:767px){
  .sp-cards--env .sp-card__ttl,
  .sp-cards--env .sp-card__txt{ text-wrap:wrap; word-break:normal; }
}

/* 社員インタビュー：狭幅では本文→写真の順に統一（PCの左右配置は変えない） */
@media (max-width:899px){
  .site-interview .sp-feature__fig,
  .site-interview .sp-bleed__fig{ order:2; }
  .site-interview .sp-feature__body,
  .site-interview .sp-bleed__body{ order:1; }
}

/* ===== 受領HTMLのインラインstyleをクラスへ移したもの（R-7）。インラインと同じ強さにするため !important ===== */
.og-i1.og-i1{max-inline-size:none !important;}


/* ===== 30_override.css ===== */
/* ============================================================
   S01802 override.css — CueZilla へ載せるための追加（受領CSSは消していない・後勝ちで効く）
   ★実機の崩れ合わせ（R-28）は組立後に実DOMを採取してから足す。ここには投入前に確定できるものだけ置く。
   ============================================================ */

/* ① 写真（受領の ＜image-slot＞ を ＜img class="site-slot"> にした分）
      既定値は受領 image-slot.js の :host{display:block;width:100%;height:100%;aspect-ratio:3/2} と同じ＋写真は cover・中央。
      width/height を落とすと inset:0 の背景写真が原寸・自然比になる（教訓 image-slot-to-img-loses-aspect-ratio-default）。
      個別の比率は site.css の「.〇〇 img:where(.site-slot){aspect-ratio…}」（受領の image-slot 向け指定）がそのまま上書きする。
      ★:host は外側のどの指定にも負ける既定値なので、ここも最弱の img:where(.site-slot)＝(0,0,1) で書く（受領の img{height:auto} には記述順で勝つ）。
        display は受領の image-slot{display:block} を付け替えた規則がそのまま持つ（ここで持つとスマホ用写真の display:none に勝ってしまう）。 */
img:where(.site-slot){ width:100%; height:100%; max-width:none; aspect-ratio:3/2; object-fit:cover; }
/*    ★image-slot は CSS の object-position を読まない（中央 cover ＋ state.json の位置だけで写真を置く）。
      受領 style.css にある「… img{object-position…}」「.sp-hero__bg[src*=…]{object-position…}」は受領プレビューでは効いておらず、
      ＜img＞ にすると急に効き出して、デザイナーが見て承認したトリミングと変わる → 中央に固定する。
      state.json で位置を動かした写真は BODY内JS が image-slot.js と同じ計算で object-position を入れる（インラインの !important）。
      ★写真のホバー拡大（.sp-svc:hover の scale(1.04)）は受領CSSが image-slot 向けにも書いている＝受領でも動く。止めない
        （2026-09-25 に止めていたのは誤り。2026-09-28 のホバー再現比較で判明して外した） */
html body img.site-slot{ object-position:50% 50% !important; }
/*    古い版の追加CSS（CDNに残っている 9/25 版）にだけある「ホバー拡大を止める」指定（transform:none !important）を、
      受領どおりの拡大（受領 .sp-svc:hover .sp-svc__fig image-slot{transform:scale(1.04)}）で後勝ちに打ち消す。CDNが入れ替わった後も受領どおりで害は無い */
html body .sp-svc:hover .sp-svc__fig img.site-slot,
html body .site-blog__link:hover .site-blog__thumb img.site-slot{ transform:scale(1.04) !important; }

/* ①b ホバーでリンクの文字色を保つ（Bootstrap／共通スキンの a:hover に負ける分。受領 style.css から機械生成） */
a.site-skip:where(:hover){ color:#fff; }
a.site-textlink:where(:hover){ color:var(--green); }
a.site-textlink--onDark:where(:hover){ color:var(--green-lite); }
a.site-btn:where(:hover){ color:#fff; }
a.site-btn--ink:where(:hover){ color:#fff; }
a.site-bandbtn:where(:hover){ color:#fff; }
a.site-bandbtn--paper:where(:hover){ color:var(--ink); }
a.sh__sublink:where(:hover){ color:#eceeec; }
@media (min-width:1120px){ a.sh__hbtn--entry:where(:hover){ color:#fff; } }
@media (min-width:1120px){ a.sh__hbtn--contact:where(:hover){ color:#fff; } }
a.sh__btn--entry:where(:hover){ color:#fff; }
a.sh__btn--contact:where(:hover){ color:var(--ink); }
a.sh__dsub:where(:hover){ color:#b9bfbb !important; }
a.site-totop:where(:hover){ color:#fff; }
a.site-news__link:where(:hover){ color:#eceeec; }
a.dual-path-split__panel:where(:hover){ color:#ffffff; }
a.sf__tel:where(:hover){ color:#fff; }
a.sf__sns-ico:where(:hover){ color:var(--green-lite); }
a.sf__sub:where(:hover){ color:#9aa19c !important; }
a.sp-side__link:where(:hover){ color:var(--ink); }
a.sp-side__cat:where(:hover){ color:var(--ink); }
/*    採用情報「ABOUT WORKING」の縦長写真（.sp-bleed--portrait）は、受領CSSが「比率ではなく右の本文と同じ高さまで伸ばす」
      （aspect-ratio:auto; block-size:100%）。image-slot は自然比を持たないので本文の高さに揃うが、＜img＞ は自然比（3:4）で
      行を押し広げる（2026-09-25 プレビュー実測 545×666 → 545×727）。contain:size で自然サイズを行の計算から外す＝受領と同じ 545×666 */
@media (min-width:900px){
  .sp-bleed--portrait .sp-bleed__fig img.site-slot{ contain:size; }
}

/* ② CueZilla テーマの打ち消し（教訓 cuezilla-theme-html-body-height-100-kills-sticky / body-overflowx-hidden-kills-sticky）。
      TOP の FV は position:sticky で画面に残り、NEWS 以下が上に被さる演出。テーマの html,body{height:100%} と
      body{overflow-x:hidden} が残ると sticky の箱が1画面で尽きる。短いページ（確認・完了・404）は min-height で1画面を保つ */
html{ height:auto !important; }
body{ height:auto !important; min-height:100vh; min-height:100dvh; overflow-x:clip !important; }

/* ②b 固定ヘッダー（受領 .sh は position:fixed）。skin がシステム描画ページ（送信完了・404 等）の上余白に加算する（R-18）。
       高さは受領 site.js がバーの実測値を --sh-h に入れる。JS が動く前の既定は 80px（受領の scroll-padding-top と同じ値） */
:root{ --fixed-header-h: var(--sh-h, 80px); }

/* ③ パンくずの二重表示を防ぐ（R-10a）。全下層ページのヒーロー直下に受領デザインのパンくず（BreadcrumbList 付き）がある */
.parts231_breadcrumb,
html body [class*="parts"][class*="_breadcrumb"]{ display:none !important; }

/* ④ TOP の CMSパーツの前後で切った帯（NEWS・BLOG）。受領では1つの帯だった所を分けたので、切れ目に余白を二重に付けない。
      パーツ自体の見た目（濃地の NEWS 帯に合わせる等）は投入後に実DOMを見て合わせる（R-28） */
.site-row.cz-cut-end{ padding-bottom:0 !important; }
.site-row.cz-cut-start{ padding-top:clamp(24px, 3vw, 40px) !important; }

/* ⑦ TOP の CMSパーツ（2026-09-28 実機採取・R-28）。通常は BODY内JS が記事を受領の器へ写してパーツを隠す。
      ここは JS が動かないときの受け皿：
      ・固定FV（#main > .site-fv の sticky）が、背景の無いパーツの後ろから透けて見える → パーツに地色を持たせる
      ・新着投稿（parts040506_notice＝白箱＋「最新情報」）は濃地の NEWS 帯に馴染ませ、見出しは受領の「NEWS」と重複するので隠す
      ・ブログ（parts131415_blog）は Bootstrap の row の負マージンが版面からはみ出す → 版面を受領の .site-wrap と揃える */
#main > [class*="parts"]:not([class*="_breadcrumb"]){ position:relative; z-index:1; background:var(--paper) !important; }
#main section[class*="parts040506_notice"],
#main section[class*="parts040506_notice"] .content{ background:var(--dark) !important; }
section[class*="parts040506_notice"]{ padding-block:clamp(8px,1.1vw,13px) !important; }
section[class*="parts040506_notice"] .container,
section[class*="parts131415_blog"] .container-lg{ max-width:var(--wrap) !important; margin-inline:auto !important; padding-inline:var(--gutter) !important; }
section[class*="parts040506_notice"] .content{ padding:0 !important; }
section[class*="parts040506_notice"] .sec_title{ display:none !important; }
section[class*="parts040506_notice"],
section[class*="parts040506_notice"] *{ color:#eceeec !important; }
section[class*="parts040506_notice"] [class*="date"]{ font-family:var(--font-en) !important; color:var(--green-lite) !important; }
section[class*="parts131415_blog"]{ padding-block:var(--sec-gap) 0 !important; }

/* ⑧ 動的ページのCMSパーツを受領デザインの見本（受領HTMLの「表示の器」）に揃える（2026-09-28 実機採取・R-28）。
      値は受領 style.css の同じ役割のクラスからそのまま写した（右の対応）。
      ★CueZilla の自動CSSは (0,3,0)+!important なので、ここは「html body ＋クラス2つ重ね」で (0,3,2) 以上にしている。
      ★受領の見本にあってCMSが出さない要素（一覧の抜粋文・施工実績の絞り込み・フォームの入力例）はCSSでは作れない＝申し送り */

/* ⑧-1 ブログ一覧 parts222 ← 受領 .sp-bloglayout（本文＋右300px）／.sp-gallery（2列）／.sp-item／.sp-side／.sp-pager */
html body .parts222_section.parts222_section.parts222_section,
html body .parts228_section.parts228_section.parts228_section{ max-width:none !important; margin:0 !important; padding:var(--sec-gap) 0 var(--row-pad) !important; background:var(--paper) !important; }
html body .parts222_section.parts222_section > h2,
html body .parts228_section.parts228_section > h2{ display:none !important; }
html body .parts222_section.parts222_section .parts222_wrap,
html body .parts228_section.parts228_section .parts228_wrap{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:var(--sec-gap) !important; width:100% !important; max-width:var(--wrap) !important; margin:0 auto !important; padding:0 var(--gutter) !important; }
@media (min-width:1024px){
  html body .parts222_section.parts222_section .parts222_wrap{ grid-template-columns:minmax(0,1fr) 300px !important; gap:clamp(32px,3.4vw,56px) !important; align-items:start !important; }
}
html body .parts222_section.parts222_section .parts222_main,
html body .parts228_section.parts228_section .parts228_main{ width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; }
html body .parts222_section.parts222_section .parts222_post_list,
html body .parts228_section.parts228_section .parts228_post_list{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:var(--sec-gap) var(--el-gap) !important; margin:0 !important; padding:0 !important; }
@media (min-width:640px){
  html body .parts222_section.parts222_section .parts222_post_list,
  html body .parts228_section.parts228_section .parts228_post_list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:1024px){
  html body .parts228_section.parts228_section .parts228_post_list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
html body .parts222_section.parts222_section .parts222_post_list::after,
html body .parts228_section.parts228_section .parts228_post_list::after{ content:none !important; display:none !important; }
html body .parts222_section.parts222_section .parts222_post_wrap,
html body .parts228_section.parts228_section .parts228_post_wrap{ display:flex !important; flex-direction:column !important; gap:8px !important; height:auto !important; min-height:0 !important; max-height:none !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; }
html body .parts222_section.parts222_section .parts222_post_wrap > a{ display:flex !important; flex-direction:column !important; gap:8px !important; height:auto !important; min-height:0 !important; color:var(--ink) !important; text-decoration:none !important; }
html body .parts222_section.parts222_section .parts222_post_img,
html body .parts228_section.parts228_section .parts228_post_img{ flex-shrink:0 !important; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; aspect-ratio:auto !important; overflow:hidden; background:transparent !important; border:0 !important; }
/*    受領 .sp-item__thumb img と同じく「画像そのもの」に 4:3・罫線・下地（枠に比率を当てると画像の実寸比が勝つ＝実測 492×182 → 492×369） */
html body .parts222_section.parts222_section .parts222_post_img img,
html body .parts228_section.parts228_section .parts228_post_img img{ display:block !important; box-sizing:border-box !important; width:100% !important; height:auto !important; max-width:none !important; max-height:none !important; aspect-ratio:4/3 !important; object-fit:cover !important; background:var(--tint) !important; border:1px solid var(--line) !important; }
html body .parts222_section.parts222_section .parts222_post_status,
html body .parts228_section.parts228_section .parts228_post_status{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important; gap:8px 12px !important; margin:0 !important; padding:0 !important; }
html body .parts222_section.parts222_section .parts222_post_date,
html body .parts228_section.parts228_section .parts228_post_date{ margin:0 !important; padding:0 !important; background:none !important; font-family:var(--font-en) !important; font-size:var(--t-eyebrow) !important; letter-spacing:.06em !important; line-height:2 !important; color:var(--green) !important; }
html body .parts222_section.parts222_section .parts222_post_category,
html body .parts228_section.parts228_section [class*="parts228_post_tag"],
html body .parts228_section.parts228_section [class*="parts228_post_category"]{ display:inline-flex !important; align-items:center !important; min-height:26px !important; margin:0 !important; padding:0 10px !important; border:1px solid var(--green) !important; border-radius:0 !important; background:transparent !important; color:var(--green) !important; font-family:var(--font-ja) !important; font-size:var(--t-eyebrow) !important; letter-spacing:.06em !important; line-height:1.2 !important; }
html body .parts222_section.parts222_section .parts222_post_title-excerpt,
html body .parts228_section.parts228_section .parts228_post_title-excerpt{ flex:1 1 100% !important; margin:0 !important; padding:0 !important; }
html body .parts222_section.parts222_section .parts222_post_title,
html body .parts228_section.parts228_section .parts228_post_title{ margin:0 !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; font-weight:700 !important; line-height:1.6 !important; color:var(--ink) !important; text-decoration:none !important; }
html body .parts222_section.parts222_section a:hover .parts222_post_title,
html body .parts228_section.parts228_section a:hover .parts228_post_title{ color:var(--green) !important; }
/*    タグが付くとCMSのカードのリンクが分割され、日付・タイトルを包むリンクが .parts228_post_status 等の直下に出る＝下線が付く（2026-09-28 実測）。
      受領 .sp-item__ttl a は下線なし。下線は祖先のリンクから描かれるので、子の text-decoration:none では消えない＝リンク側で消す */
html body .parts222_section.parts222_section .parts222_post_wrap a,
html body .parts228_section.parts228_section .parts228_post_wrap a{ text-decoration:none !important; }
/*    CMSパーツ自前の「写真にホバーで opacity:.65」（.parts222_post_wrap a:hover img）は受領の見本に無い動き＝止める（受領はタイトルが緑になるだけ） */
html body .parts222_section.parts222_section .parts222_post_wrap a:hover img,
html body .parts228_section.parts228_section .parts228_post_wrap a:hover img{ opacity:1 !important; }
/*    サイドバー ← .sp-side（緑の見出し帯＋罫線区切り） */
html body .parts222_section.parts222_section .parts222_sidebar{ display:flex !important; flex-direction:column !important; gap:var(--sec-gap) !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap{ margin:0 !important; padding:0 !important; border:1px solid var(--line) !important; background:var(--paper) !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap > h3{ margin:0 !important; padding:14px 18px !important; border:0 !important; background:var(--green) !important; color:#fff !important; font-family:var(--font-ja) !important; font-size:calc(var(--t-body) * .95) !important; font-weight:700 !important; line-height:2 !important; letter-spacing:.02em !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap > ul{ margin:0 !important; padding:0 18px !important; list-style:none !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap > ul > li{ margin:0 !important; padding:14px 0 !important; border:0 !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap > ul > li + li{ border-top:1px solid var(--line) !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap a{ display:block !important; color:var(--ink) !important; text-decoration:none !important; }
html body .parts222_section.parts222_section .parts222_sidebar_date{ display:block !important; font-family:var(--font-en) !important; font-size:var(--t-eyebrow) !important; line-height:2 !important; letter-spacing:.06em !important; color:var(--ink-sub) !important; }
html body .parts222_section.parts222_section .parts222_sidebar_post_title{ margin:4px 0 0 !important; font-family:var(--font-ja) !important; font-size:calc(var(--t-body) * .95) !important; font-weight:400 !important; line-height:1.65 !important; color:var(--ink) !important; }
html body .parts222_section.parts222_section .category_post_count a{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
html body .parts222_section.parts222_section .parts222_sidebar_post_category{ margin:0 !important; font-family:var(--font-ja) !important; font-size:calc(var(--t-body) * .95) !important; font-weight:400 !important; color:var(--ink) !important; }
html body .parts222_section.parts222_section .parts222_sidebar_post_category_count{ flex:0 0 auto !important; min-inline-size:30px !important; padding:2px 8px !important; border-radius:0 !important; background:var(--tint) !important; color:var(--ink-sub) !important; font-family:var(--font-en) !important; font-size:var(--t-eyebrow) !important; text-align:center !important; }
html body .parts222_section.parts222_section .parts222_sidebar_wrap a:hover,
html body .parts222_section.parts222_section .parts222_sidebar_wrap a:hover p{ color:var(--green) !important; }
/*    ページ送り ← .sp-pager（44px角・罫線・現在ページは墨） */
html body .parts222_section.parts222_section .parts222_pagenation,
html body .parts228_section.parts228_section .parts228_pagenation{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin:var(--sec-gap) 0 0 !important; padding:0 !important; }
html body .parts222_section.parts222_section .parts222_pagenation:empty,
html body .parts228_section.parts228_section .parts228_pagenation:empty{ display:none !important; }
html body .parts222_section.parts222_section .parts222_pagenation :is(a,span),
html body .parts228_section.parts228_section .parts228_pagenation :is(a,span){ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-inline-size:44px !important; min-block-size:44px !important; padding:0 14px !important; border:1px solid var(--line) !important; border-radius:0 !important; background:transparent !important; font-family:var(--font-en) !important; font-size:calc(var(--t-body) * .95) !important; color:var(--ink) !important; text-decoration:none !important; }
html body .parts222_section.parts222_section .parts222_pagenation a:hover,
html body .parts228_section.parts228_section .parts228_pagenation a:hover{ border-color:var(--green) !important; color:var(--green) !important; }
html body .parts222_section.parts222_section .parts222_pagenation :is(.current,[aria-current],span:not(:has(a))),
html body .parts228_section.parts228_section .parts228_pagenation :is(.current,[aria-current],span:not(:has(a))){ background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important; }

/*    施工実績の工種札（CMS: .parts-blog-ex-tag_wrap > a > span.parts-blog-ex_tag）← 受領 .sp-item__tag
      （緑の枠線・高さ26px・左右10px・13px・字間.06em・タイトルの下8px）。タグの無い記事では枠ごと出さない
      （共通スキンの .parts-blog-ex-tag_wrap{padding:0 16px 14px} が空の枠を14px残していた＝実測）。詳細ページの札（.parts-blog-ex-single_tag_wrap）も同じ見た目 */
html body .parts228_section.parts228_section .parts-blog-ex-tag_wrap,
html body .parts166_single_article.parts166_single_article.parts166_single_article .parts-blog-ex-single_tag_wrap{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin:8px 0 0 !important; padding:0 !important; }
html body .parts228_section.parts228_section .parts-blog-ex-tag_wrap:not(:has(*)),
html body .parts166_single_article.parts166_single_article.parts166_single_article .parts-blog-ex-single_tag_wrap:not(:has(*)){ display:none !important; }
html body .parts228_section.parts228_section .parts-blog-ex-tag_wrap a,
html body .parts166_single_article.parts166_single_article.parts166_single_article .parts-blog-ex-single_tag_wrap a{ display:inline-flex !important; text-decoration:none !important; }
/*    タグが付くと CMS のカードは「リンクの中にリンク」になり、ブラウザがリンクを分割する＝中身の無い ＜a＞ がカード・日付の段・タイトルの段に
      できて、flex の gap（8px）が余分に入る（2026-09-28 実測：日付の上28px・カード高443px）→ 中身の無い ＜a＞ は隠す。
      日付は分割後の ＜a＞ の中の inline になり行の高さ（2.0＝26px）が効かない → ブロックにする（受領 .sp-item__date と同じ高さ） */
html body .parts228_section.parts228_section .parts228_post_wrap a:not(:has(*)){ display:none !important; }
html body .parts228_section.parts228_section .parts228_post_date{ display:block !important; }
/*    CMSはタグ枠の先頭に中身の無いリンク（＜a href="/blog-ex/instance/記事ID">＜/a＞）を出す＝札の枠が付いて札が28px右へずれていた（2026-09-28 実測）→ 隠す */
html body .parts228_section.parts228_section .parts-blog-ex-tag_wrap a:empty,
html body .parts166_single_article.parts166_single_article.parts166_single_article .parts-blog-ex-single_tag_wrap a:empty{ display:none !important; }
/*    行の高さは受領 .sp-item__tag と同じく本文の 2.0（13px×2＋枠線2px＝高さ28px。1.2 だと 26px になっていた） */
html body .parts228_section.parts228_section .parts-blog-ex-tag_wrap :is(.parts-blog-ex_tag, a:not(:has(span)):not(:empty)),
html body .parts166_single_article.parts166_single_article.parts166_single_article .parts-blog-ex-single_tag_wrap :is(span, a:not(:has(span)):not(:empty)){ display:inline-flex !important; align-items:center !important; min-height:26px !important; margin:0 !important; padding:0 10px !important; border:1px solid var(--green) !important; border-radius:0 !important; background:transparent !important; color:var(--green) !important; font-family:var(--font-ja) !important; font-size:var(--t-eyebrow) !important; font-weight:400 !important; letter-spacing:.06em !important; line-height:2 !important; }

/* ⑧-2b 施工実績の詳細（CMS: section.parts-blog-ex-single-wrap ＞ タイトル h2＋日付・工種札／写真ギャラリー（slick）／署名・SNS・前後記事）。
       受領に見本は無い＝ブログ詳細（⑧-2）と同じく受領の版面（最大 --wrap・左右 --gutter）と文字組みに揃える（2026-09-28 実機採取）。
       既定のままだとタイトルと日付が画面の左端に張り付いていた */
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap.parts-blog-ex-single-wrap{ margin:0 !important; padding:var(--sec-gap) 0 var(--row-pad) !important; background:var(--paper) !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .content_wrap,
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .container,
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap > div{ box-sizing:border-box !important; width:100% !important; max-width:var(--wrap) !important; margin-left:auto !important; margin-right:auto !important; padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex_text_wrap,
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex_text{ margin:0 !important; padding:0 !important; text-align:left !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex_text h2{ margin:0 0 var(--el-gap) !important; font-family:var(--font-ja) !important; font-size:calc(var(--t-h2) * 1.1) !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:-.02em !important; color:var(--ink) !important; text-align:left !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .article_status{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:12px !important; margin:0 0 var(--sec-gap) !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .article_date{ font-family:var(--font-en) !important; font-size:var(--t-eyebrow) !important; line-height:2 !important; letter-spacing:.06em !important; color:var(--green) !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex-single_tag_wrap{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin:0 !important; padding:0 !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex-single_tag_wrap:not(:has(*)){ display:none !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex-single_tag_wrap a:empty{ display:none !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex-single_tag_wrap a{ display:inline-flex !important; text-decoration:none !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .parts-blog-ex-single_tag_wrap :is(span, a:not(:has(span)):not(:empty)){ display:inline-flex !important; align-items:center !important; min-height:26px !important; margin:0 !important; padding:0 10px !important; border:1px solid var(--green) !important; border-radius:0 !important; background:transparent !important; color:var(--green) !important; font-family:var(--font-ja) !important; font-size:var(--t-eyebrow) !important; font-weight:400 !important; letter-spacing:.06em !important; line-height:2 !important; }
/*    署名・シェア・最近の投稿はブログ詳細と同じく「罫線も中身も本文の幅」に（2026-09-28 実機で実測）。上の「直下の div を版面幅＋左右 gutter」のままだと、
      署名の上の罫線だけが gutter 分（左右40px）本文よりはみ出していた。最近の投稿の上はブログ詳細（カテゴリ札の上）と同じ間隔を空ける */
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap.parts-blog-ex-single-wrap > :is(.signature_wrap, .sns_button_wrap, .recent_posts_wrap){ box-sizing:border-box !important; width:calc(100% - var(--gutter) * 2) !important; max-width:calc(var(--wrap) - var(--gutter) * 2) !important; padding-left:0 !important; padding-right:0 !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap.parts-blog-ex-single-wrap > .recent_posts_wrap{ margin-top:var(--sec-gap) !important; }
html body .parts-blog-ex-single-wrap.parts-blog-ex-single-wrap .signature_wrap{ margin-top:var(--sec-gap) !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; line-height:2 !important; color:var(--ink-sub) !important; text-align:left !important; }
/*    署名の下のお問い合わせ・電話ボタン（BODY内JS の sigCta が差し込む。2026-09-28 ユーザー承認）。ボタン自体は受領の .site-btn のまま、並べ方だけ決める */
html body .signature_wrap .site-sigcta{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; margin-top:var(--el-gap) !important; margin-bottom:var(--el-gap) !important; }
/*    ↑ margin-bottom：署名の枠は下の余白が0で、直下のシェアボタンがボタンに接していた（2026-09-28 ユーザー指摘）。署名文→ボタンと同じ間隔を空ける */
html body .signature_wrap .site-sigcta .site-btn{ margin:0 !important; text-decoration:none !important; }
/*    記事詳細のシェアボタン（ブログ・施工実績共通）を1行に揃える（2026-09-28 品質レビュー指摘7）。Facebook の SDK がボタンの間に横幅いっぱいの箱（.fb_reset）を
      差し込むため「Xでポスト」の後で改行され、Facebook のボタンだけ左右10pxの余白で左端がずれていた。箱は流れから外す（消すと SDK のダイアログが壊れうる） */
html body .sns_button_wrap.sns_button_wrap{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; }
html body .sns_button_wrap.sns_button_wrap > .fb_reset{ position:absolute !important; }
html body .sns_button_wrap.sns_button_wrap > * > span,
html body .sns_button_wrap.sns_button_wrap > iframe{ margin:0 !important; }
html body .sns_button_wrap.sns_button_wrap > .fb-share-button{ display:inline-flex !important; align-items:center !important; line-height:0 !important; }
html body .sns_button_wrap.sns_button_wrap > .fb-share-button > span{ vertical-align:top !important; }

/* ⑧-2 ブログ詳細 parts166（受領に見本は無い）＝版面・見出し・日付タグ・本文を受領の文字組みに揃える */
html body .parts166_single_article.parts166_single_article.parts166_single_article{ padding:var(--sec-gap) 0 var(--row-pad) !important; background:var(--paper) !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article .container{ max-width:var(--wrap) !important; padding:0 var(--gutter) !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article h1{ margin:0 0 var(--el-gap) !important; font-family:var(--font-ja) !important; font-size:calc(var(--t-h2) * 1.1) !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:-.02em !important; color:var(--ink) !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article .article_status{ display:flex !important; align-items:center !important; gap:12px !important; margin:0 0 var(--sec-gap) !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article .article_date{ font-family:var(--font-en) !important; font-size:var(--t-eyebrow) !important; letter-spacing:.06em !important; color:var(--green) !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article .article_category{ display:inline-flex !important; align-items:center !important; min-height:26px !important; padding:0 10px !important; border:1px solid var(--green) !important; border-radius:0 !important; background:transparent !important; color:var(--green) !important; font-size:var(--t-eyebrow) !important; letter-spacing:.06em !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article article :is(p,li){ font-family:var(--font-ja) !important; font-size:var(--t-body) !important; line-height:2.0 !important; color:var(--ink) !important; }
/*    記事下のカテゴリ（.article_category_wrap）は隠す（2026-09-28 ユーザー指示）。記事冒頭の日付の横に同じカテゴリ札があり二重だった。
      施工実績の詳細には記事下のカテゴリ欄が無い＝隠すと下部の並び（シェア → 最近の投稿）が両ページで揃う。間隔は施工実績側と同じ --sec-gap */
html body .parts166_single_article.parts166_single_article.parts166_single_article .article_category_wrap{ display:none !important; }
html body .parts166_single_article.parts166_single_article.parts166_single_article .recent_posts_wrap{ margin-top:var(--sec-gap) !important; }
/*    「最近の投稿」はCMSパーツの見た目のまま（2026-09-28 ユーザー指示）。以前は一覧サイドバーに合わせた緑の見出し帯＋枠を当てていたが、施工実績の詳細には無く、ページごとに見た目が違っていた＝両方とも指定なしに揃える */

/* ⑧-3 フォーム parts213（お問い合わせ）／parts219（応募）＝dl系 ← 受領 .sp-form（最大860px・左寄せ／項目名＋必須の赤札・任意の枠札） */
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"],
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"]{ max-width:none !important; margin:0 !important; padding:0 0 var(--row-pad) !important; background:var(--paper) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] [class*="_form_wrap"],
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] [class*="_form_wrap"]{ box-sizing:border-box !important; width:100% !important; max-width:var(--wrap) !important; margin:0 auto !important; padding:var(--sec-gap) var(--gutter) 0 !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dl,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dl{ display:block !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dl + dl,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dl + dl{ margin-top:var(--sec-gap) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dt,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dt{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:12px !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; font-weight:700 !important; line-height:1.6 !important; color:var(--ink) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dt > span:not(.required),
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dt > span:not(.required){ display:contents !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dt .required,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dt .required{ order:1 !important; display:inline-flex !important; align-items:center !important; min-height:24px !important; margin:0 !important; padding:0 10px !important; border:0 !important; border-radius:0 !important; background:#c8102e !important; color:#fff !important; font-size:var(--t-eyebrow) !important; font-weight:700 !important; letter-spacing:.08em !important; line-height:1.4 !important; }
/*    受領は必須でない項目に「任意」の枠札を付けている（受領HTMLの文言）。CMSは札を出さないので同じ見た目で補う */
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dt:not(:has(.required))::after,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dt:not(:has(.required))::after{ content:"任意"; order:1; display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border:1px solid var(--line); color:var(--ink-sub); font-size:var(--t-eyebrow); font-weight:400; letter-spacing:.08em; line-height:1.4; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dt .attention,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dt .attention,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dt :is(small,.note){ order:2 !important; display:block !important; flex:1 1 100% !important; margin:0 !important; font-size:var(--t-body) !important; font-weight:400 !important; line-height:1.9 !important; color:var(--ink-sub) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dd,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dd{ width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea),
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea){/* display:block !important; */box-sizing:border-box !important; width:100% !important; max-width:none !important; min-height:52px !important; margin:10px 0 0 !important; padding:14px 16px !important; border:1px solid var(--line) !important; border-radius:0 !important; background:var(--paper) !important; box-shadow:none !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; line-height:1.7 !important; color:var(--ink) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] textarea:not([type="_"]),
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] textarea:not([type="_"]){ min-height:220px !important; resize:vertical !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] :is(input,select,textarea):focus,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] :is(input,select,textarea):focus{ outline:2px solid var(--green) !important; outline-offset:1px !important; border-color:var(--green) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dd:has(input[type="checkbox"],input[type="radio"]),
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dd:has(input[type="checkbox"],input[type="radio"]){ display:flex !important; flex-wrap:wrap !important; gap:12px 24px !important; margin-top:12px !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] dd label,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] dd label{ display:inline-flex !important; align-items:center !important; gap:8px !important; min-height:44px !important; margin:0 !important; font-size:var(--t-body) !important; font-weight:400 !important; line-height:1.6 !important; color:var(--ink) !important; cursor:pointer; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] :is(input[type="checkbox"],input[type="radio"]),
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] :is(input[type="checkbox"],input[type="radio"]){ inline-size:20px !important; block-size:20px !important; margin:0 !important; accent-color:var(--green) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] input[type="file"],
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] input[type="file"]{ display:block !important; box-sizing:border-box !important; width:100% !important; margin:10px 0 0 !important; padding:12px 16px !important; border:1px solid var(--line) !important; background:#fff !important; font:inherit !important; font-size:var(--t-body) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] .error,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] .error{ margin:6px 0 0 !important; color:#c8102e !important; font-size:var(--t-eyebrow) !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] .error:empty,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] .error:empty{ display:none !important; }
/*    送信ボタン ← 受領 .sp-form__submit .site-btn（中央・最小320px・緑面／ホバーで明るい緑＋墨文字） */
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] .contact_submit,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] .contact_submit{ margin:calc(var(--sec-gap) + var(--el-gap)) 0 0 !important; padding:0 !important; text-align:center !important; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] .contact_submit :is(input,button),
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] .contact_submit :is(input,button){ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:min(100%, 320px) !important; min-height:64px !important; margin:0 !important; padding:18px 30px !important; border:2px solid var(--green) !important; border-radius:var(--radius) !important; background:var(--green) !important; box-shadow:none !important; color:#fff !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; font-weight:700 !important; line-height:1.5 !important; cursor:pointer; }
html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] .contact_submit :is(input,button):hover,
html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] .contact_submit :is(input,button):hover{ background:var(--green-lite) !important; border-color:var(--green-lite) !important; color:var(--ink) !important; }
@media (max-width:599px){
  html body [class*="parts213_section"][class*="parts213_section"][class*="parts213_section"] .contact_submit :is(input,button),
  html body [class*="parts219_section"][class*="parts219_section"][class*="parts219_section"] .contact_submit :is(input,button){ width:100% !important; }
}

/* ⑧-5 404（CMS: section.not-found > .not-found-contents > h2.not-found-title「File Not Found」＋説明 p×3）。受領に見本は無い＝
       受領の下層ページと同じ組み方に揃える：見出しを下層ヒーロー（.sp-hero：濃地・最低 clamp(240px,38vh,400px)・下揃え・白の大見出し）に、
       説明文を版面（.site-wrap）の中に本文の文字組みで置く。文字はCMSのまま（足さない）。
       共通スキンの .not-found{padding-top:固定ヘッダー分} は外す（受領のヒーローもヘッダーの下に潜る＝ページ最上部から濃地） */
html body section.not-found.not-found.not-found{ max-width:none !important; margin:0 !important; padding:0 0 var(--row-pad) !important; background:var(--paper) !important; text-align:left !important; }
html body section.not-found.not-found .not-found-contents{ max-width:none !important; margin:0 !important; padding:0 !important; text-align:left !important; }
html body section.not-found.not-found .not-found-title{ display:flex !important; align-items:flex-end !important; box-sizing:border-box !important; min-height:clamp(240px, 38vh, 400px) !important; margin:0 0 var(--row-pad) !important; padding:var(--row-pad) max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) !important; border:0 !important; background:var(--dark) !important; color:#fff !important; font-family:var(--font-ja) !important; font-size:var(--t-h1sub) !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:.04em !important; text-align:left !important; }
html body section.not-found.not-found .not-found-contents > p{ box-sizing:border-box !important; max-width:var(--wrap) !important; margin:0 auto !important; padding:0 var(--gutter) !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; line-height:2 !important; color:var(--ink) !important; text-align:left !important; }
html body section.not-found.not-found .not-found-contents > p + p{ margin-top:var(--el-gap) !important; }

/* ⑧-4 プライバシーポリシー（CMSテンプレ・R-12a）← 受領 .sp-table（罫線区切りの2列表：項目名＝太字／内容＝薄墨）。
       テンプレの見出し「PrivacyPolicy／個人情報保護方針」は受領のヒーローと重複するので隠す（受領の本文側に見出しは無い） */
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"]{ margin:0 !important; padding:var(--row-pad) 0 !important; background:var(--paper) !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .container{ max-width:var(--wrap) !important; margin:0 auto !important; padding:0 var(--gutter) !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .section_title_wrap{ display:none !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .about{ margin:0 !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; line-height:2.0 !important; color:var(--ink) !important; text-align:left !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .content{ margin:var(--sec-gap) 0 0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .content > ul{ margin:0 !important; padding:0 !important; list-style:none !important; border-top:1px solid var(--line) !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .item_wrap{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:6px !important; margin:0 !important; padding:var(--el-gap) 0 !important; border:0 !important; border-bottom:1px solid var(--line) !important; background:transparent !important; }
@media (min-width:768px){
  html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .item_wrap{ grid-template-columns:minmax(160px, 0.28fr) minmax(0,1fr) !important; gap:0 clamp(24px,4vw,56px) !important; }
}
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .item_title{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; font-family:var(--font-ja) !important; font-size:var(--t-lead) !important; font-weight:700 !important; line-height:1.7 !important; color:var(--ink) !important; }
html body [class*="privacypolicy-parts"][class*="privacypolicy-parts"][class*="privacypolicy-parts"] .item_description{ margin:0 !important; padding:0 !important; font-family:var(--font-ja) !important; font-size:var(--t-body) !important; line-height:1.9 !important; color:var(--ink-sub) !important; }

/* ⑤ 記事の詳細ページ（BODY内JS が html に .cz-detail を付ける）。
      CueZilla は一覧用の下層ヘッダー（04a/04b）を詳細にも出すため、一覧の導入文の節が記事の上に出る（S01275 実機で同型を確認）。
      → 詳細では導入文の節を隠す（ヒーローとパンくずは残す） */
html.cz-detail .sp-crumb ~ section.site-row{ display:none !important; }

/* ⑥ 送信完了ページ（/form/complete/inquiry ・ /form/complete/recruit）。
      フォームの下層ヘッダー（04c/04d）が完了ページにも出るため、入力画面用の導入文が「送信が完了しました」の前に出る（S01275 実機で同型）。
      → 完了パーツ（parts243-245_complete_form）がある時だけ、入力画面用の節を隠す。ヒーローとパンくずは残す */
html body:has(section[class*="_complete_form"]) .sp-crumb ~ section.site-row{ display:none !important; }

/* ⑨ パンくずのリンクのタップ範囲を 44px 以上に（2026-09-28 品質レビュー指摘10・「TOP」が 27×23px）。見た目は変えない：
      内側の余白を足し、同じだけ外側の余白を負にして打ち消す（文字の位置・パンくずの高さは前後で不変を実測）。
      上を多め・下を少なめにしたのは、スマホで記事タイトルが2行目に折り返したとき、1行目のリンクの当たり判定がタイトルに被らないため。
      左右 9px なら隣のリンクの当たり判定とは 7.6px 離れる（区切りの「/」の上で止まる） */
html body .sp-crumb__list a{ padding:16.5px 9px 4.5px !important; margin:-16.5px -9px -4.5px !important; }

/* ⑩ 公式LINE は未開設のため非表示（2026-09-28 ユーザー指示）。フッターの SNS アイコン（準備中）と、お問い合わせページ上部の「公式LINEで問い合わせる」ボタン。
      HTML は残す＝開設したらこの2行を消し、ボタンの href="#" とフッターのアイコンを URL 付きのリンクに差し替える */
html body .sf__sns-ico--tbc{ display:none !important; }
html body p:has(> a.site-bandbtn--line){ display:none !important; }

/* ⑪ 社員インタビュー（/recruit/interview）は非公開（2026-09-28 ユーザー指示）。ページ自体は CMS の公開設定で非公開にする。
      ここではサイト内のリンクを隠す：ヘッダーの採用情報メニュー・スマホのメニュー・フッター（いずれも li ごと）、採用情報ページ「MORE」のカード。
      MORE は3枚→2枚になるので、PC でも同じページ上部の「あなたに合う入口から。」と同じ2列に並べる（640px 未満は受領どおり1列）。
      働く環境・待遇の「NEXT →」の帯は HTML 側で未経験者向け求人へ付け替え済み。公開に戻すときはこの節と付け替えを消す */
html body li:has(> a[href="/recruit/interview"]){ display:none !important; }
html body .sp-card:has(> a[href="/recruit/interview"]){ display:none !important; }
@media (min-width:1024px){
  html body .sp-cards--c3:has(> .sp-card > a[href="/recruit/interview"]){ grid-template-columns:repeat(2,1fr) !important; }
}