/* ===== 15_site.css ===== */
/* ============================================================
   site.css — ユウ建設株式会社（O01676）受領 style.css を CueZilla 用に付け替えたもの
   ・変更点は機械変換のみ（宣言値は受領のまま）:
     image-slot → .site-slot ／ main・body.page-top → .yu-main・.yu-main.yu-top ／
     url(assets/…) → CDN ／ Webフォントの @import は削除（サイト情報「HEAD内」へ）
   ============================================================ */
@charset "utf-8";
/* ============================================================
   ユウ建設株式会社（O01676）／ 一次生成 草案サイト 共通CSS
   ------------------------------------------------------------
   本文の正本  : 1_ディレクション/Claudeデータ/③HTML版草案.html（本CSSは実装のみ・本文を変えない）
   契約         : 1_ディレクション/契約.md（確定値・機構契約・量契約・再現スコープ・署名採否）
   参考サイト   : kameoka-construction.com（構造・量＝再現／配色・タイポ＝置換）
                  採用した署名＝②「ブランド色のベタ面と写真を食い違わせて重ねる（版面中央寄せ＋写真だけ片側ブリード）」
                  不採用の署名＝①「手書き筆記体の欧文を和文見出しに重ねる」
                    根拠＝管理シート デザイン指示「文字が可愛すぎる」「かわいすぎない、すっきりした書体で」
                          ／①ページ構成§6「丸みの強い柔らかいフォントは避ける」＝案件固有の明示指定

   CSS方針（design_rules「HTML版草案生成時の追加ルール」KEEPブロック準拠）
     - 共通1ファイル集中管理。トンマナは先頭 :root のCSS変数で一括調整できる形にする
     - ★変数名は全て `--yu-` 接頭辞。CueZillaの実機は body内コンポーネントの :root が
       `--main-color` 等7色を撒いて上書きするため、汎用名を使わないことで乗っ取りを構造的に回避する
       （納品段階では 30_コード生成/AI生成指示書_CueZilla.md に従って具体値へベイクする）
     - 自作クラスは `site-` 接頭辞のみ。Bootstrap汎用名（.btn/.card/.container/.row/.col/.mark）は使わない（R-20）
   ============================================================ */

/* ============================================================
   1. トークン（:root）
   ============================================================ */
:root {
  /* --- 配色（②コンセプトシート「デザイン仕様」の確定値。参考サイトの寒色は持ち込まない） --- */
  --yu-base:        #FFFFFF;  /* ベース（白基調） */
  --yu-ink:         #1A1A1A;  /* 本文 */
  --yu-ink-weak:    #5A6B7C;  /* 補助文字（白地で 4.6:1） */
  --yu-tint:        #F4F6F8;  /* 薄地の面 */
  --yu-navy:        #123A5E;  /* サブ面・見出し（白地で 11.6:1） */
  --yu-navy-deep:   #0E2A44;  /* フッター */
  --yu-navy-line:   #23405C;  /* 濃地の罫線 */
  --yu-accent:      #D7A23C;  /* 差し色（面・罫・大きな文字のみ＝3:1で足りる用途） */
  --yu-accent-ink:  #D7A23C;
  --yu-accent-deep: #8A6417;  /* 白地の小さな英字ラベル用（黄の濃色・白地で4.7:1） */  /* 差し色ink（白抜き小文字のボタン地／白地の小文字＝AA 4.5:1確保） */
  --yu-line:        #E1E5EA;  /* 白地の罫線 */
  --yu-onnavy-weak: #C7D6E4;  /* 濃地の補助文字（濃紺地で 7.4:1） */

  /* --- 書体（明朝体。落ち着いた・誠実な印象。丸ゴシック／手書きは使わない） --- */
  --yu-font: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --yu-font-en: "EB Garamond", "Times New Roman", Georgia, serif;
  --yu-font-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;  /* 本文用ゴシック（見出し・ヘッダー・フッター・ヒーローは明朝） */

  /* --- タイポスケール（種類を増やさない＝契約 font-size-kinds 12以内） --- */
  --yu-fs-h1-top: clamp(30px, 4.6vw, 54px); /* @kind font */   /* トップFVのみ（契約 jump-top 2.9-3.4） */
  --yu-fs-h1-sub: clamp(26px, 3.4vw, 40px); /* @kind font */   /* 下層ページのH1（契約 jump 2.2-2.8） */
  --yu-fs-h2:     clamp(28px, 3.6vw, 46px); /* @kind font */
  --yu-fs-h3:     clamp(21px, 1.9vw, 28px); /* @kind font */
  --yu-fs-lead:   clamp(17px, 1.4vw, 20px); /* @kind font */
  --yu-fs-body:   17px;                       /* 契約 body=17。CTA・アクセス・フッター・注記も同じ（二重基準を作らない） */
  --yu-fs-cap:    16px;                       /* 補助＝ラベル・日付・注記の短文のみ */
  --yu-fs-label:  12px;                       /* 英字ラベル（原稿にあるものだけ） */

  /* --- 余白（design_rules「セクション間の余白は背景色で機械的に決める」の3値） ---
     守るのは P_large > P_medium > P_small の大小関係と、Row端=大／Row内=中／要素間=小 の判定ロジック。 */
  --yu-row-pad: clamp(48px, 6vw, 96px);      /* P_large : Row の上下端＝背景の切り替わり */
  --yu-sec-gap: clamp(40px, 4.8vw, 72px);     /* P_medium: 同一 Row 内のセクション間 */
  --yu-btn-gap: clamp(36px, 4.5vw, 64px);     /* ボタン上の余白（本文セクション共通） */
  --yu-el-gap:  26px;                         /* P_small : セクション内の要素間 */
  --yu-gutter:  clamp(20px, 4vw, 40px); /* @kind spacing */       /* 版面の左右の逃げ */
  --yu-wrap:    1300px;
  --yu-header-h: 104px;                       /* ヘッダー実測高（FVのフルスクリーン計算に使う） */                       /* 版面幅（写真だけがこれを破る＝署名②） */

  /* --- 形・動き（契約 roundness 0.6／motionScale 1） --- */
  --yu-radius:  0;
  --yu-radius-lg: 0;
  --yu-dur:     .7s; /* @kind other */
  --yu-ease:    cubic-bezier(.22,.61,.36,1); /* @kind other */
}

/* ============================================================
   2. 土台
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: 96px;   /* 固定ヘッダーの分だけアンカー着地をずらす */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--yu-font);
  font-size: var(--yu-fs-body);
  font-weight: 400;               /* 教訓 body-text-weight-contrast-not-size: Mediumに丸めない */
  line-height: 2.0;               /* 教訓 body-lineheight-paragraph-spacing: 和文横組み本文は 2.0〜2.3 */
  text-wrap: pretty;              /* 行末孤立（最終行が1〜2文字）を避ける。文字を足さずに組みで直す */
  line-break: strict;             /* 行頭に長音「ー」・小書き仮名が来ないようにする（禁則） */
  word-break: auto-phrase;        /* 和文を文節で折る（行末孤立の構造的な対策・非対応ブラウザは無視） */
  letter-spacing: .03em;
  color: var(--yu-ink);
  background: var(--yu-base);
}
img { max-width: 100%; height: auto; display: block; }
.site-slot { display: block; overflow: hidden; min-width: 0; }
.site-duo__media, .site-service__media, .site-recruit__media, .site-fv__media, .site-pointsmedia, .site-split__media, .site-timeline__media { min-width: 0; }   /* 写真スロット（ドラッグ＆ドロップ差し替え） */
a { color: var(--yu-navy); }
:focus-visible { outline: 3px solid var(--yu-accent-ink); outline-offset: 2px; }
.site-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yu-navy); color: #fff; padding: 12px 20px; text-decoration: none;
}
.site-skip:focus { left: 0; }

/* 本文はゴシック。ヘッダー／フッター／ヒーロー／見出しは明朝のまま */
.yu-main { font-family: var(--yu-font-gothic); }
.yu-main .site-fv, .yu-main .site-h1-top, .yu-main .site-h1, .yu-main .site-h2, .yu-main .site-h3 { font-family: var(--yu-font); }
.yu-main .site-news, .site-btn { font-family: var(--yu-font); }

/* 見出し（サイズ差・字間・書字方向で階層を作り、ウェイトを増やさない＝参考の手つき） */
.site-h1-top, .site-h1, .site-h2, .site-h3 {
  font-family: var(--yu-font);
  font-weight: 500;
  letter-spacing: .16em;   /* 明朝＋広いトラッキング＝参考サイトの静かな見出し */
  line-height: 1.6;
  margin: 0;
  text-wrap: balance;      /* 2行見出しの行長を均す（意味の区切りで折る・文字は変えない） */
}
.site-h1-top { font-size: var(--yu-fs-h1-top); line-height: 1.35; }
/* 意味の区切り以外で折り返さない（「もっと任せられる型／枠屋。」のような語中改行を止める）。
   ★文字は足さない。＜span＞ の入れ物を意味の区切りに置き、inline-block で折り返し位置を固定する。 */
.site-nobr { display: inline-block; }
.site-h1     { font-size: var(--yu-fs-h1-sub); }
.site-h2     { font-size: var(--yu-fs-h2); color: var(--yu-navy); font-weight: 700; }
.site-h3     { font-size: clamp(27px, 2.7vw, 38px); color: var(--yu-navy); font-weight: 700; }
.site-h2--onnavy, .site-h3--onnavy { color: #fff; }
.site-lead { font-size: var(--yu-fs-lead); line-height: 1.9; margin: 0; }
.site-p { margin: 0 0 1.1em; }
.site-p:last-child { margin-bottom: 0; }

/* 英字ラベル（原稿に存在するものだけ＝NEWS / BLOG / RECRUIT と下層FVのラベル） */
.site-label {
  display: block;
  font-family: var(--yu-font-en);
  font-size: var(--yu-fs-label);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--yu-accent-deep);
  margin: 0 0 12px;
}
.site-label--onnavy { color: #D7A23C; }   /* 濃紺地で 5.6:1 */
.site-h2--vertical { writing-mode: vertical-rl; text-orientation: upright; width: max-content; height: max-content; justify-self: start; margin-inline: 0; line-height: 1.6; color: var(--yu-ink); }

/* ============================================================
   3. Row / 版面グリッド（写真だけが版面を破る＝署名②の土台）
   ------------------------------------------------------------
   .site-row       … 背景色のレイヤー。上下端に P_large を持つ
   .site-row__in   … 版面グリッド。子は既定で wrap 列に入る
   .site-bleed-l/r … 片側だけ画面端まで出す（vw を使わないので横スクロールを生まない）
   .site-full      … 左右とも画面端まで
   ============================================================ */
.site-row { padding-block: var(--yu-row-pad); }
.site-row--tint { background: var(--yu-tint); }
.site-row--navy { background: var(--yu-navy); color: #fff; }
/* 背景写真をパララックスで固定し、黒のオーバーレイで文字を立てる */
.site-row--parallax {
  position: relative; isolation: isolate;
  background-image: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-inhouse-crew.webp");
  background-size: cover; background-position: center; background-attachment: fixed;
}
.site-row--parallax::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); z-index: -1; }
@media (hover: none) { .site-row--parallax { background-attachment: scroll; } }
.site-row--flush { padding-block: 0; }   /* フルブリードの意匠ブロックはRow Paddingを掛けない */

.site-row__in {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--yu-gutter), 1fr)
    [wrap-start] min(var(--yu-wrap), 100% - var(--yu-gutter) * 2)
    [wrap-end] minmax(var(--yu-gutter), 1fr)
    [full-end];
}
.site-row__in > * { grid-column: wrap; }
.site-row > .site-row__in > * + * { margin-top: var(--yu-sec-gap); }   /* 同一Row内のセクション間＝P_medium */
.site-row section { padding-block: 0; }                                 /* 縦余白はRowが持つ */
.site-bleed-r { grid-column: wrap-start / full-end; }
.site-bleed-l { grid-column: full-start / wrap-end; }
.site-full    { grid-column: full; }

/* セクション内の要素間＝P_small */
.site-stack > * + * { margin-top: var(--yu-el-gap); }
.site-stack--tight > * + * { margin-top: 14px; }
/* 写真の下に食い込む紺の面（組立から解体まで…の左右反転版） */
.site-row .site-stack--indent {
  grid-column: wrap-start / full-end;                  /* 背景は画面右端まで */
  background: var(--yu-navy); color: #fff;
  margin-top: clamp(-380px, -24vw, -190px); position: relative; z-index: 1;
  padding-block: clamp(210px, 26vw, 400px) clamp(36px, 4vw, 56px);
  padding-right: max(var(--yu-gutter), calc(100% - var(--yu-wrap)));   /* 本文の終わりは上のカード右端に揃える */
}
.site-stack--indent .site-h3, .site-stack--indent .site-p { color: #fff; }
.site-stack--indent .site-h3 { margin-bottom: clamp(12px, 1.4vw, 18px); }
.site-stack--indent .site-p, .site-stack--indent-rev .site-p { word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }
.site-stack--indent > * + * { margin-top: clamp(16px, 1.8vw, 24px); }
.site-stack--indent .site-btn { margin-top: 4px; }
/* 左右反転版（写真が右ブリード → 紺面は左ブリード） */
.site-row .site-stack--indent-rev {
  grid-column: full-start / wrap-end;
  padding-left: max(var(--yu-gutter), calc(100% - var(--yu-wrap)));
  padding-right: 0;
}
@media (min-width: 900px) {
  .site-stack--indent { padding-left: calc(clamp(120px, 28vw, 500px) + 48px); }   /* 左揃えのまま右へ寄せる */
  .site-row .site-stack--indent-rev { padding-right: calc(clamp(120px, 28vw, 500px) + 48px); }
}

/* ============================================================
   4. ボタン（個数・文言は原稿のまま。視認性はサイズ・色で作る）
   ============================================================ */
.site-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; white-space: nowrap;
  min-height: 56px; padding: 14px 74px 14px 30px;
  font-size: var(--yu-fs-body); font-weight: 700; letter-spacing: .04em;
  text-decoration: none; border-radius: var(--yu-radius);
  transition: background-color .25s var(--yu-ease), color .25s var(--yu-ease), border-color .25s var(--yu-ease);
}
.site-btn::before { content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; opacity: .55;
  transition: opacity .25s var(--yu-ease), transform .25s var(--yu-ease); }
.site-btn:hover::before { opacity: 1; transform: translateY(-50%) translateX(3px); background: currentColor; }
.site-btn:hover::after { background: var(--yu-base); }                      /* 円が塗られ矢印が抜ける */
.site-btn--primary:hover::after { background: var(--yu-accent-ink); }
.site-btn--primary::before, .site-btn--primary::after { color: var(--yu-navy); }
.site-btn--onnavy:hover::after { background: #fff; }
.site-btn::after { content: ""; position: absolute; right: 26px; top: 50%; margin-top: -4px; width: 18px; height: 8px;
  transition: transform .25s var(--yu-ease);
  background: currentColor;
  clip-path: polygon(0 3px, 11px 3px, 11px 0, 18px 4px, 11px 8px, 11px 5px, 0 5px); }
.site-btn:hover::after { transform: translateX(3px); }
.site-btn--primary { background: var(--yu-accent-ink); color: var(--yu-navy); }   /* 黄地に紺文字＝5.1:1 */
.site-btn--outline { background: transparent; color: var(--yu-navy); border: 2px solid var(--yu-navy); }
.site-btn--onnavy { background: #fff; color: var(--yu-navy); }
/* 極狭幅（〜399px）では長いラベルのボタンだけ折り返しを許す。
   実測: 320px で「協力会社の募集概要を見る」が4pxはみ出していた（nowrapのため） */
.site-btn { max-width: 100%; }
@media (max-width: 399px) {
  .site-btn { white-space: normal; text-align: center; padding-inline: 20px; }
}
.site-btn-group { display: flex; flex-wrap: wrap; gap: 14px; }
.yu-main .site-btn, .site-footer .site-btn { min-width: 260px; }   /* ヘッダー以外のボタンは最小幅を揃える */
.site-news--oneline .site-news__more .site-btn { min-width: 0; }   /* NEWSの一覧は最小幅の対象外 */
.site-stack > p:has(> .site-btn), .site-stack > .site-btn-group { margin-top: var(--yu-btn-gap); }
@media (max-width: 640px) { .site-split .site-btn-group { flex-wrap: wrap; } .site-split .site-btn-group .site-btn { flex: 1 1 100%; } }
@media (max-width: 560px) { .site-split .site-btn-group { flex-wrap: wrap; } }

/* ============================================================
   5. ヘッダー（CSSのみで動く：PCはhover/focus-within・SPはチェックボックス）
   ------------------------------------------------------------
   ★JSに依存させない。CueZilla納品時はハンバーガーを class="p-hamburger" + #p-drawer、
     ドロップダウンを Commons 標準へ差し替える（R-16／テンプレートClaude Design/_生成プロンプト.md）。
   ============================================================ */
.site-header { background: var(--yu-base); position: sticky; top: 0; z-index: 30; transition: box-shadow .25s ease; }
.site-header.is-stuck { box-shadow: 0 6px 20px rgba(18, 58, 94, .12); }   /* スクロール時も全ページで上部固定 */
.site-header__in {
  max-width: none; margin-inline: auto; padding: 24px clamp(20px, 3vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.site-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--yu-navy); }
.site-logo__img { height: clamp(34px, 3vw, 44px); width: auto; flex: none; max-width: none; }
.site-footer__logo { height: clamp(30px, 2.6vw, 38px); width: auto; margin-bottom: 18px; }
.site-logo__ph {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  height: 48px; padding: 0 16px; border: 2px dashed #8FA3B5; border-radius: var(--yu-radius);
  font-size: var(--yu-fs-cap); font-weight: 700; letter-spacing: .02em; color: var(--yu-navy);
}
.site-logo__name { display: none; }

/* ★opacity:0 で隠さない。opacity:0 は「入場演出の base 状態が不可視」として lint（L004）に当たるうえ、
   本当に不可視の要素とリベール待ちの要素を機械が区別できなくなる。
   キーボード操作を殺さない visually-hidden（clip-path）で隠す。 */
.site-nav__toggle, .site-nav__sub-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.site-nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 12px 10px; cursor: pointer; border: 1px solid var(--yu-line);
  border-radius: var(--yu-radius);
}
.site-nav__burger span { display: block; height: 2px; background: var(--yu-navy); }
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: var(--yu-ink); text-decoration: none; font-size: var(--yu-fs-body); font-weight: 500;
  white-space: nowrap;   /* ナビ・ボタンの短文ラベルは語中で折らない */
}
.site-nav__link--cta { background: var(--yu-navy); color: #fff; font-weight: 700; border-radius: var(--yu-radius); box-shadow: inset 0 0 0 1px var(--yu-navy); transition: background-color .25s var(--yu-ease), color .25s var(--yu-ease); }
.site-nav__link--cta:hover { background: var(--yu-base); color: var(--yu-navy); }
.site-nav__sub { list-style: none; margin: 0; padding: 0; }
.site-nav__sub .site-nav__link { padding-left: 30px; font-size: var(--yu-fs-body); }

@media (max-width: 1023px) {
  .site-nav__panel {
    position: absolute; inset: 100% 0 auto 0; background: var(--yu-base);
    border-bottom: 1px solid var(--yu-line); box-shadow: 0 12px 24px rgba(18, 58, 94, .10);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s var(--yu-ease), visibility .3s;
  }
  .site-nav__toggle:checked ~ .site-nav__panel { max-height: 80vh; overflow-y: auto; visibility: visible; }
  .site-nav__list > li { border-top: 1px solid var(--yu-line); }
  .site-nav__list > li:first-child { border-top: 0; }
  .site-nav__link { padding: 0 var(--yu-gutter); }
  .site-nav__parent { display: flex; align-items: center; justify-content: space-between; }
  .site-nav__sub-label {
    display: flex; align-items: center; justify-content: center;
    width: 56px; min-height: 48px; cursor: pointer; color: var(--yu-navy); font-size: var(--yu-fs-body);
  }
  .site-nav__sub {
    max-height: 0; overflow: hidden; visibility: hidden; background: var(--yu-tint);
    transition: max-height .3s var(--yu-ease), visibility .3s;
  }
  .site-nav__sub-toggle:checked ~ .site-nav__sub { max-height: 400px; visibility: visible; }
  .site-nav__link--cta { margin: 14px var(--yu-gutter) 20px; }
}
@media (min-width: 1024px) {
  .site-nav__burger { display: none; }
  .site-nav__panel { display: block; }
  .site-nav__list { display: flex; align-items: stretch; gap: 2px; }
  .site-nav__item { position: relative; display: flex; align-items: stretch; }
  .site-nav__parent { display: flex; align-items: center; height: 100%; }
  .site-nav__sub-label { display: none; }
  .site-nav__parent > .site-nav__link { display: inline-flex; align-items: center; gap: 7px; }
  .site-nav__parent > .site-nav__link::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; transition: transform .25s var(--yu-ease); }
  .site-nav__item:hover .site-nav__parent > .site-nav__link::after,
  .site-nav__item:focus-within .site-nav__parent > .site-nav__link::after { transform: rotate(180deg); opacity: 1; }
  .site-nav__sub {
    position: absolute; top: calc(100% + 24px); left: 0; min-width: 210px;  /* ヘッダー下端（padding 24px）から出す */
    border-top: 0;
    background: var(--yu-base); border: 0; border-radius: var(--yu-radius);
    box-shadow: 0 10px 24px -6px rgba(18, 58, 94, .16);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s var(--yu-ease), transform .2s var(--yu-ease), visibility .2s;
  }
  .site-nav__item:hover .site-nav__sub,
  .site-nav__item:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
  .site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }  /* 隙間を渡るためのブリッジ */
  .site-nav__sub .site-nav__link { transition: background-color .2s var(--yu-ease), color .2s var(--yu-ease); }
  .site-nav__sub .site-nav__link:hover { background: var(--yu-navy); color: #fff; }
  .site-nav__link { padding: 0 11px; font-size: 16px; }
  .site-nav__link--cta { padding: 0 20px; margin-left: 8px; }
}
/* 社名テキストはナビが窮屈にならない幅から出す（ロゴ画像が入ったら不要になる枠） */
@media (min-width: 1400px) {
  .site-logo__name { display: block; white-space: nowrap; font-size: var(--yu-fs-cap); font-weight: 700; letter-spacing: .06em; }
}

/* ============================================================
   6. FV（署名②：写真は全幅ブリード＋濃紺のスクリム面／NEWSカードが写真に食い込む）
   ------------------------------------------------------------
   写真上の文字は「ブランドカラー系グラデーションのスクリム」で可読性を作る
   （教訓 photo-overlay-brand-color-formula: 黒の単純な半透明は使わない）
   ============================================================ */
.site-fv { position: relative; overflow-x: clip; background: var(--yu-base); min-height: calc(100svh - var(--yu-header-h)); display: flex; flex-direction: column; }
.site-fv__media { position: relative; padding-inline: clamp(20px, 3vw, 48px); }
.site-fv__media img, .site-fv__media .site-slot { width: 100%; height: clamp(360px, 68vh, 700px); object-fit: cover; object-position: center 46%; }
/* ヒーローのスライダー（3枚をゆっくり入れ替える） */
.site-fv__slider { position: relative; width: 100%; height: clamp(360px, 68vh, 700px); }
.site-fv__slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--yu-ease); }
.site-fv__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .site-fv__slide { transition: none; } }
/* 写真の統一トーン（可読性のためではなく、写真ごとの色ムラを揃えるための薄い膜） */
.site-fv__scrim {
  position: absolute; inset: 0 clamp(20px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(18, 58, 94, .18) 0%, rgba(18, 58, 94, .10) 60%, rgba(18, 58, 94, .22) 100%);
}
.site-fv__body {
  position: relative; flex: 1;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--yu-gutter), 1fr)
    [wrap-start] min(var(--yu-wrap), 100% - var(--yu-gutter) * 2)
    [wrap-end] minmax(var(--yu-gutter), 1fr)
    [full-end];
}
/* ★署名②: 濃紺のベタ面が写真の下端に食い込む（版面は中央寄せのまま・写真だけが全幅） */
.site-fv__inner {
  grid-column: full-start / wrap-end;
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--yu-base); color: var(--yu-navy);
  padding: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 48px) clamp(28px, 3.2vw, 48px);
  margin-top: 0;
  max-width: 40em;
}
.site-fv__inner .site-h1-top { color: var(--yu-navy); position: relative; z-index: 5; }
.site-fv__sub { margin: 16px 0 0; font-size: var(--yu-fs-lead); line-height: 1.85; color: var(--yu-ink); }
.site-fv__script {
  /* 写真の上に置く装飾語。箱の下端＝白パネルの上端（H1と重ねない） */
  position: absolute; left: clamp(24px, 3vw, 48px); top: 0; z-index: 4;
  width: 600px; height: 118px; transform: translateY(calc(-100% - 34px));
  pointer-events: none;
}
/* 写真側／白パネル側で濃度を分ける。境界は画面に対して水平（パネル上端＝箱の50%） */
.site-fv__script-clip { position: absolute; left: -30px; right: -30px; overflow: visible; }   /* 回転で外に出る分は切らない */
.site-fv__script-clip--photo { top: 0; bottom: 0; }
.site-fv__script-clip--panel { display: none; }
.site-fv__ink {
  position: absolute; left: 30px; top: 0; width: 600px; height: 100%;
  transform: rotate(-7deg); transform-origin: center center;
  font-family: var(--yu-font-en); font-style: italic; font-weight: 500;
  font-size: clamp(46px, 6.6vw, 86px); line-height: 1; letter-spacing: .01em; white-space: nowrap;
  display: flex; align-items: center; justify-content: flex-start;
}
.site-fv__script-clip--photo .site-fv__ink { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }

.site-fv__cta { position: absolute; right: calc(clamp(6px, 1vw, 16px) + 2.4em); bottom: clamp(20px, 4vh, 56px); z-index: 3; margin: 0; }
.site-fv__scroll { position: absolute; right: 0; width: clamp(20px, 3vw, 48px); justify-content: center; bottom: clamp(20px, 4vh, 56px); z-index: 3; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; font-family: var(--yu-font-en); font-size: var(--yu-fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--yu-ink-weak); }
.site-fv__scroll::after { content: ""; inline-size: 56px; block-size: 1px; background: var(--yu-line); }

/* ============================================================
   7. NEWS / BLOG（日付＋タイトルの行を罫線で連ねる。画像を持たない）
   ============================================================ */
.site-news { background: var(--yu-base); border: 1px solid var(--yu-line); border-radius: var(--yu-radius-lg); padding: clamp(24px, 3vw, 36px); }
.site-row .site-news--overlap { padding-block: clamp(18px, 2vw, 28px); }
.site-news--overlap {
  position: relative; margin-top: 0;
  grid-column: full;
  border-inline: 0; border-block: 1px solid var(--yu-line);
  padding-inline: clamp(20px, 3vw, 48px);
  padding-block: clamp(18px, 2vw, 28px);
}
.site-news__list { list-style: none; margin: 0; padding: 0; }
.site-news__item + .site-news__item { border-top: 1px solid var(--yu-line); }
.site-news__link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
  min-height: 48px; padding: 14px 0; color: var(--yu-ink); text-decoration: none;
}
.site-news__link:hover { color: var(--yu-navy); text-decoration: underline; }
.site-news__date { flex: 0 0 auto; font-family: var(--yu-font-en); font-size: var(--yu-fs-cap); letter-spacing: .06em; color: var(--yu-ink-weak); }
.site-news__more { margin-top: var(--yu-btn-gap); }
/* BLOGカード（3列。サムネイル＋カテゴリ＋タイトル。画像未支給の記事はロゴ面がフォールバック） */
.site-blogcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); }
.site-blogcards__link { display: flex; flex-direction: column; height: 100%; background: var(--yu-base); border: 1px solid var(--yu-line); border-radius: var(--yu-radius-lg); overflow: hidden; color: var(--yu-ink); text-decoration: none; transition: border-color .25s var(--yu-ease), box-shadow .25s var(--yu-ease), transform .25s var(--yu-ease); }
.site-blogcards__link:hover { border-color: var(--yu-navy); box-shadow: 0 12px 28px rgba(18, 58, 94, .10); transform: translateY(-3px); }
.site-blogcards__media { aspect-ratio: 16 / 9; background: var(--yu-base); display: flex; align-items: center; justify-content: center; padding: 0; }
.site-blogcards__media img, .site-blogcards__media .site-slot, .site-blogcards__media > .site-slot { width: 100%; height: 100%; object-fit: cover; }
.site-blogcards__logo-ph { font-family: var(--yu-font-en); font-size: var(--yu-fs-cap); letter-spacing: .18em; text-align: center; color: var(--yu-onnavy-weak); border: 1px dashed var(--yu-onnavy-weak); border-radius: var(--yu-radius); padding: 10px 14px; }
.site-blogcards__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 24px; }
.site-blogcards__cat { align-self: flex-start; font-size: var(--yu-fs-cap); letter-spacing: .1em; color: var(--yu-navy); border: 1px solid var(--yu-navy); border-radius: var(--yu-radius); padding: 4px 12px; }
.site-blogcards__date { font-family: var(--yu-font-en); font-size: var(--yu-fs-cap); letter-spacing: .1em; color: var(--yu-ink-weak); }
.site-blogcards__title { font-size: var(--yu-fs-body); font-weight: 500; letter-spacing: .06em; line-height: 1.8; color: var(--yu-ink); margin: 0; }
@media (max-width: 599px) { .site-blogcards { grid-template-columns: 1fr; gap: 16px; } }

/* 一行表示（TOPのNEWS：ラベル＋最新1件を同一行に。あふれは省略記号） */
.site-news--oneline { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); padding: clamp(16px, 2vw, 22px) clamp(20px, 3vw, 32px); }
.site-news--oneline .site-label { margin: 0; flex: 0 0 auto; }
.site-news--oneline .site-news__list { flex: 1 1 auto; min-width: 0; }
.site-news--oneline .site-news__link { flex-wrap: nowrap; min-height: 0; padding: 0; gap: 20px; }
.site-news--oneline .site-news__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-news--oneline .site-news__more { margin: 0; flex: 0 0 auto; }
.site-news--oneline .site-news__more .site-btn { border: 0; padding: 0 42px 0 0; min-height: 34px; background: transparent; color: var(--yu-navy); }
.site-news--oneline .site-news__more .site-btn::before { right: 0; width: 34px; height: 34px; background: var(--yu-navy); border-color: var(--yu-navy); opacity: 1; }
.site-news--oneline .site-news__more .site-btn::after { right: 8px; background: #fff; }
.site-news--oneline .site-news__more .site-btn:hover { background: transparent; color: var(--yu-navy); }
.site-news--oneline .site-news__more .site-btn:hover::before { background: var(--yu-navy); border-color: var(--yu-navy); }
.site-news--oneline .site-news__more .site-btn:hover::after { background: #fff; }
@media (max-width: 600px) {
  .site-news--oneline { display: block; }
  .site-news--oneline .site-label { margin-bottom: 8px; }
  .site-news--oneline .site-news__more { margin-top: 12px; }
}

/* ============================================================
   8. 悩みカード（薄地Rowの中の白カード＋差し色の左罫）
   ============================================================ */
/* 悩みは1列・罫線のみ・本文大きめ（オレンジの小さな点で項目を立てる） */
.site-issues { list-style: none; margin: 0; padding: 0; display: grid; max-width: 900px; margin-inline: auto; }
.site-stack > .site-h2 + .site-issues { margin-top: clamp(28px, 3.4vw, 48px); }
.site-stack > .site-issues + .site-issues__close { margin-top: clamp(28px, 3.4vw, 48px); position: relative; }
.site-stack > .site-issues + .site-issues__close::before {   /* リストと結びの一文をつなぐ下向きの三角（線） */
  content: ""; display: block; box-sizing: border-box;
  width: clamp(34px, 4vw, 52px); height: clamp(34px, 4vw, 52px);
  margin: 0 auto clamp(30px, 3.6vw, 48px);
  border-right: 2px solid var(--yu-navy); border-bottom: 2px solid var(--yu-navy);
  transform: rotate(45deg);
}
.site-issues__item {
  border-top: 1px solid var(--yu-navy-line); padding: 24px 4px;
  display: flex; gap: 18px; font-size: var(--yu-fs-lead); line-height: 1.9; color: var(--yu-ink);
}
.site-issues__item:last-child { border-bottom: 1px solid var(--yu-navy-line); }
.site-issues__item::before {
  content: "✓"; flex: none; width: 26px; height: 26px; margin-top: .5em;
  display: grid; place-items: center; box-sizing: border-box;
  border: 2px solid var(--yu-navy); color: var(--yu-accent-ink);
  font-size: 17px; line-height: 1; font-weight: 700;
}
.site-issues__close { margin: 0; font-family: var(--yu-font); font-size: clamp(22px, 2.4vw, 32px); font-weight: 400; line-height: 1.8; letter-spacing: .08em; color: var(--yu-ink); text-align: center; }
/* 結びの一文の背後に敷くマーカー（文字と三角は動かさない） */
@keyframes yu-markw { from { width: 0; } to { width: 100%; } }
.site-issues__close { position: relative; isolation: isolate; width: fit-content; margin-inline: auto; }
.site-issues__close::after {
  content: ""; position: absolute; left: -.1em; bottom: .18em; z-index: -1;
  width: 0; height: .5em; background: rgba(200, 82, 15, .24);
}
.site-issues__close.is-in::after { animation: yu-markw 1.1s var(--yu-ease) forwards; }
@media (prefers-reduced-motion: reduce) { .site-issues__close::after { width: 100%; animation: none; } }
@media (scripting: none) { .site-issues__close::after { width: 100%; } }

/* ============================================================
   9. 写真＋テキストの組（片側ブリード＝署名②）
   ============================================================ */
.site-duo { display: grid; gap: var(--yu-el-gap); align-items: center; }
.site-headtext { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; background: var(--yu-navy); color: #fff; padding: clamp(28px, 4vw, 64px); }
.site-row .site-headtext {
  grid-column: full-start / wrap-end;                 /* 左は画面端まで・右は版面の余白を残す */
  margin-top: calc(var(--yu-row-pad) * -1);           /* 上のRow余白も紺で塗る */
  padding-block: var(--yu-row-pad) clamp(120px, 16vw, 260px);   /* 上は他セクションと同じRow余白／下は紺を伸ばし写真を重ねる */
  padding-left: max(var(--yu-gutter), calc(100% - var(--yu-wrap)));   /* 本文開始位置を上のカード（版面左端）に揃える */
}
.site-headtext .site-h2--vertical, .site-headtext .site-h3, .site-headtext .site-p { color: #fff; }
.site-headtext { position: relative; }
.site-marklogo {   /* 縦書き見出しの下、写真の左横に置くロゴマーク */
  position: absolute; left: max(var(--yu-gutter), calc(100% - var(--yu-wrap))); bottom: clamp(20px, 3vw, 48px);
  width: clamp(90px, 20vw, 500px); aspect-ratio: 433 / 306;
  background: rgba(255, 255, 255, .22);
  -webkit-mask: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-bg-logo.webp") left center / contain no-repeat;
  mask: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-bg-logo.webp") left center / contain no-repeat;
  pointer-events: none;
}
/* 素の2列レイアウト（背景なし・版面内） */
.site-row .site-headtext.site-headtext--plain { grid-column: wrap; background: none; padding: 0; margin-top: 0; }
.site-headtext--plain .site-h2--vertical, .site-headtext--plain .site-p { color: var(--yu-ink); }
/* 帯が高いときはリード文を上下中央に置き、下に空きが固まらないようにする */
@media (min-width: 1024px) { .site-headtext--plain .site-duo__text { align-self: start; } }
.site-marklogo--onlight { background: rgba(18, 58, 94, .14); top: auto; bottom: -120px; left: auto; right: 0; }   /* 薄地では紺の淡い抜き。写真の上に収める */
.site-row__in > .site-duo__media--bleed-r { position: relative; z-index: 2; margin-left: clamp(120px, 28vw, 500px); }
.site-row__in > .site-duo__media--overlap { margin-top: clamp(-320px, -20vw, -170px); }   /* 紺面に重ねる */
.site-row__in > .site-duo__media--bleed-l { margin-right: clamp(120px, 28vw, 500px); position: relative; z-index: 2; }   /* 上の右ブリード写真の左右反転版（同じ縦横比・同じ幅） */   /* 写真の左端を内側へ寄せて横幅を詰める／少し上へ */
.site-duo__media img, .site-duo__media .site-slot { width: 100%; height: clamp(260px, 38vw, 500px); object-fit: cover; border-radius: var(--yu-radius); }
.site-duo__media--bleed-r img, .site-duo__media--bleed-r .site-slot { border-radius: var(--yu-radius) 0 0 var(--yu-radius); }
.site-duo__media--bleed-l img, .site-duo__media--bleed-l .site-slot { border-radius: 0 var(--yu-radius) var(--yu-radius) 0; }
/* ★DOM順は常に「写真 → テキスト」＝狭幅で縦積みになるときは画像→テキストの順（取材無フロー既定値）。
   PCでの左右は order だけで入れ替える（--rev＝写真を右へ＝右端ブリード）。 */
@media (min-width: 900px) {
  .site-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
  .site-duo__media:not([class*="bleed"]) { padding-inline: clamp(16px, 2.4vw, 40px); }   /* 画像の左右に余白 */
  .site-duo--rev .site-duo__media { order: 2; }
  /* 縦書き見出し＋本文の2列（写真はその下） */
  .site-headtext { grid-template-columns: max-content minmax(0, 1fr); }
  .site-headtext .site-duo__text { padding-left: clamp(24px, 5vw, 96px); }   /* 本文を少し右へ */
}

/* 大小2枚組（小さい方が片端に接触して版面を破る） */
.site-pair { display: grid; gap: 14px; }
.site-pair__lg img, .site-pair__lg .site-slot { width: 100%; height: clamp(240px, 32vw, 400px); object-fit: cover; border-radius: var(--yu-radius); }
.site-pair__sm img, .site-pair__sm .site-slot { width: 100%; height: clamp(180px, 22vw, 260px); object-fit: cover; border-radius: var(--yu-radius); }
.site-pair__cap { display: block; font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); margin-top: 8px; }
@media (min-width: 900px) {
  .site-pair { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .site-pair:not(:has(.site-pair__sm)) { grid-template-columns: 1fr; }   /* 1枚構成では大判が版面いっぱい */
  /* 小さい方を下げて左へ寄せ、大判の端に食い込ませる＝参考の署名②（写真同士の食い違い重ね）。
     ★本文の上には重ねない（重ねると本文のコントラストが 1.4:1 まで落ちる。実測で確認済み） */
  .site-pair__sm {
    margin-top: clamp(40px, 5vw, 72px);
    margin-left: clamp(-56px, -3.5vw, -24px);
    position: relative; z-index: 1;
    /* ★写真とキャプションをまとめて白の器に入れる。器にしないとキャプションが
       大判写真の上に載り、コントラストが 1.1:1 まで落ちる（実測 2026-08-27） */
    background: var(--yu-base); padding: 6px; border-radius: var(--yu-radius);
  }
  .site-row--tint .site-pair__sm { background: var(--yu-tint); }
  .site-pair__sm .site-pair__cap { padding: 6px 4px 2px; }
}

/* 構造物リスト（chips・2列） */
.site-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-chips li {
  background: var(--yu-accent-ink); color: var(--yu-navy); border-radius: var(--yu-radius);
  padding: 12px 16px; font-size: var(--yu-fs-body); line-height: 1.6;
}
.site-row--tint .site-chips li { background: var(--yu-accent-ink); }
@media (min-width: 700px) { .site-chips { grid-template-columns: 1fr 1fr; } }   /* PCは2列（偶数で並ぶ）・スマホは1列 */
.site-chips__head { margin: 0 0 16px; font-family: var(--yu-font); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.5; font-weight: 700; color: var(--yu-navy); }

/* ============================================================
   10. 対応工事（写真が左右交互に版面を破る3行）
   ============================================================ */
.site-service { display: grid; gap: var(--yu-el-gap); }
.site-service__media img, .site-service__media .site-slot { width: 100%; height: clamp(250px, 34vw, 440px); object-fit: cover; border-radius: var(--yu-radius); }
@media (min-width: 900px) {
  .site-service { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 4vw, 60px); }
  .site-service__media { padding-inline: clamp(16px, 2.4vw, 40px); }   /* 画像の左右に余白 */
  .site-service--rev .site-service__media { order: 2; }   /* 写真を右へ＝右端ブリード */
}

/* ============================================================
   11. 実績（濃紺Row・工事種別のチップ）
   ============================================================ */
/* 工事種別＝分類の見出し列。上下のヘアラインと縦罫で「一覧の索引」として見せる（ボタンと混同しない） */
/* 工事種別＝写真サムネイル4枚（一覧への入口の提示） */
.site-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 18px); list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) { .site-cats { grid-template-columns: 1fr 1fr; } }
.site-stack--center { text-align: center; }
.site-row:not(.site-row--navy) .site-cats strong { color: #fff; }
.site-stack--center > * + * { margin-top: clamp(22px, 2.6vw, 34px); }
.site-stack--center > p:has(> .site-btn) { margin-top: clamp(26px, 3vw, 40px); }   /* ボタン上だけ少し空ける */
.site-stack--center .site-cats { justify-content: center; }
.site-cats li { position: relative; background: none; border: 0; padding: 0; display: grid; }
.site-cats img, .site-cats .site-slot { grid-area: 1 / 1; width: 100%; height: clamp(130px, 14vw, 180px); object-fit: cover; display: block; }
.site-cats li::after { content: ""; grid-area: 1 / 1; background: rgba(11, 26, 43, .5); }
.site-cats strong {
  grid-area: 1 / 1; place-self: center; position: relative; z-index: 1; text-align: center;
  padding: 14px 16px; font-weight: 500; font-size: var(--yu-fs-body); letter-spacing: .12em; line-height: 1.6; color: #fff;
}
.site-cats li:first-child { background: #fff; color: var(--yu-navy); font-weight: 700; border-color: #fff; }

/* ============================================================
   12. 理由（濃紺の縦罫＋本文）／採用（濃紺の面に写真が食い込む）
   ============================================================ */
.site-statement { border-left: 0; padding-left: 0; }

/* 見出し左／本文右の2列（参考サイトの会社概要パネル由来の版面。同型反復を避ける） */
.site-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yu-el-gap); }
.site-split > * { min-width: 0; }
/* 見出し下の余白に写真を収める（右列の高さに合わせて伸ばす） */
.site-split__media { margin-top: clamp(20px, 2.4vw, 32px); overflow: hidden; }
.site-split__media .site-slot { width: 100%; height: clamp(200px, 26vw, 300px); }
/* 見出しは全幅、その下に写真＋リード文を横並び */
.site-split--wanted .site-split__title { margin-bottom: clamp(20px, 2.4vw, 32px); }
.site-split--wanted .site-split__media { margin-top: 0; }
@media (min-width: 620px) {
  .site-split--wanted { grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
  .site-split--wanted .site-split__title { grid-column: 1 / -1; }
  .site-split--wanted .site-split__media .site-slot { height: clamp(220px, 26vw, 340px); }
}
@media (min-width: 900px) {
  .site-split { grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 4vw, 64px); align-items: stretch; }
  .site-split:has(.site-split__media) .site-split__head { display: grid; grid-template-rows: auto 1fr; }
  .site-split__media .site-slot { height: 100%; min-height: clamp(220px, 24vw, 320px); }
}

.site-recruit { display: grid; gap: 0; }
.site-recruit__panel { background: var(--yu-navy); color: #fff; padding: clamp(28px, 3.4vw, 52px); border-radius: var(--yu-radius) 0 0 var(--yu-radius); }
/* 白背景・写真と横並び（食い込みなし） */
.site-recruit--plain { gap: clamp(24px, 4vw, 56px); }
.site-recruit--plain .site-recruit__panel { align-self: center; }
.site-recruit--plain .site-recruit__media { margin: 0; }   /* 食い込み用マージンを打ち消す */
.site-row.site-row--nopadbottom { padding-bottom: 0; }   /* このRowだけ下余白なし */
.site-row:has(.site-blogcards) { padding-block: clamp(36px, 4.4vw, 68px); }   /* BLOGの上下を詰める */
.site-row:has(.site-blogcards) .site-news__more { margin-top: clamp(24px, 3vw, 40px); }
.site-recruit--plain .site-recruit__panel { background: none; color: var(--yu-ink); padding: 0; }
.site-recruit--plain .site-recruit__panel .site-h2 { color: var(--yu-ink); }
.site-recruit--plain .site-recruit__panel .site-quote { color: var(--yu-accent-ink); }   /* 白地では差し色ink（4.6:1） */
.site-recruit__panel .site-h2 { color: #fff; }
.site-recruit--plain:has(#slot-daihyo-aisatsu) .site-recruit__media { align-self: center; }
.site-recruit--plain:has(#slot-daihyo-aisatsu) .site-recruit__media .site-slot { max-height: clamp(300px, 34vw, 420px); }
.site-recruit__media img, .site-recruit__media .site-slot, .site-recruit__media > .site-slot { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
@media (min-width: 900px) {
  .site-recruit.site-recruit--plain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-recruit--plain .site-recruit__media { order: 2; padding-inline: clamp(16px, 2.4vw, 40px); }   /* 画像の左右に余白 */
}
@media (min-width: 900px) {
  .site-recruit { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; }
  .site-recruit__panel { order: 1; }
  .site-recruit__media { order: 2; margin-top: clamp(28px, 3vw, 56px); margin-bottom: clamp(-56px, -3vw, -28px); }
  /* 濃紺パネルが写真に食い込む型（人を知る「8名の現場です」） */
  .site-recruit--overlap { grid-template-columns: .92fr 1.08fr; align-items: center; }
  .site-recruit--overlap .site-recruit__panel { position: relative; z-index: 2; margin-right: clamp(-88px, -5vw, -48px); border-radius: var(--yu-radius-lg); }
  .site-recruit--overlap .site-recruit__media { margin: 0; }
.site-recruit--overlap .site-recruit__media img, .site-recruit--overlap .site-recruit__media .site-slot { min-height: clamp(320px, 34vw, 460px); }
}

/* ============================================================
   13. CTA（濃紺の面・中央寄せの見出し）
   ============================================================ */
.site-cta { text-align: center; }
/* 左に縦書き見出し・右に本文とボタン */
.site-cta--split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; text-align: left; }
.site-cta--split .site-cta__body { max-width: none; margin: 0; text-align: left; }
.site-nobr-pc { white-space: normal; }   /* 枠内で折り返す（はみ出し防止） */
@media (min-width: 900px) { .site-cta--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); } }
/* CTAは紺のブロックで囲み、その周囲（BLOGとの間）に写真が帯として見える */
.site-row--navy--photo {
  background-color: var(--yu-base);                                  /* ブロックの上半分の背景は白 */
  background-image: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-cta-site.webp");
  background-repeat: no-repeat; background-position: center bottom;
  background-size: cover;   /* 縦横比を保って切り抜く */
  background-clip: border-box;
}
.site-row--navy--photo { background-image: linear-gradient(to bottom, var(--yu-base) 0 50%, transparent 50%), url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-cta-panels.webp"); background-attachment: scroll, fixed; }   /* 写真だけ固定＝パララックス */
@media (hover: none) { .site-row--navy--photo { background-attachment: scroll, scroll; } }
.site-row .site-cta--boxed {
  background: var(--yu-navy); background-clip: padding-box;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 56px);
  max-width: 1080px; margin-inline: auto;
}
.site-cta .site-h2 { color: #fff; }
.site-cta--split .site-h2--vertical { background: transparent; padding: 0; }
.site-cta__headwrap .site-h2 { position: relative; z-index: 1; }   /* 筆記体はタイトルの背後 */
.site-cta__headwrap { position: relative; display: grid; align-content: center; }
.site-cta__script {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: clamp(150px, 25vw, 600px); aspect-ratio: 410 / 95;
  transform: translateY(-50%) rotate(-7deg); transform-origin: left center;
  background: rgb(92 147 187 / 55%);
  -webkit-mask: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-catch-contact.webp") left center / contain no-repeat;
  mask: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-catch-contact.webp") left center / contain no-repeat;
  pointer-events: none;
}
.site-cta__body { max-width: 44em; margin-inline: auto; text-align: center; }
.site-cta__btn { margin-top: var(--yu-btn-gap); }

/* ============================================================
   14. フッター
   ============================================================ */
.site-footer { background: var(--yu-navy-deep); color: #fff; padding-block: var(--yu-row-pad) 28px; }
.site-footer__in { max-width: var(--yu-wrap); margin-inline: auto; padding-inline: var(--yu-gutter); display: grid; gap: var(--yu-sec-gap); }
.site-footer__info p { margin: 0 0 8px; }
.site-footer__info a, .site-footer__info a:hover, .site-footer__info a:focus-visible { color: #fff; text-decoration: none; }
.site-footer__logo-ph {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 16px; border: 2px dashed #5C7A96; border-radius: var(--yu-radius);
  font-size: var(--yu-fs-cap); font-weight: 700; margin-bottom: 18px;
}
.site-footer__nav { list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); } }   /* PCは横2列・スマホは1列 */
.site-footer__nav a {
  display: block; min-height: 48px; padding: 12px 0; color: #fff; text-decoration: none;
  border-top: 1px solid var(--yu-navy-line); line-height: 1.5;
}
.site-footer__nav a:hover { color: var(--yu-onnavy-weak); }
.site-footer__copy { margin: 0; font-size: var(--yu-fs-cap); color: var(--yu-onnavy-weak); }
@media (min-width: 900px) {
  .site-footer__in { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); }
  .site-footer__bottom { grid-column: 1 / -1; border-top: 1px solid var(--yu-navy-line); padding-top: 20px; }
}

/* ============================================================
   15. 下層ページ共通（ページヘッダー帯＋パンくず）
   ============================================================ */
.site-pagehead {
  position: relative; isolation: isolate; color: #fff;
  background: var(--yu-navy) url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-pagehead-okayama.webp") center / cover no-repeat;
}
.site-pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 58, 94, .87); }
.site-pagehead__in {
  max-width: var(--yu-wrap); margin-inline: auto; padding: clamp(36px, 5vw, 72px) var(--yu-gutter);
}
.site-pagehead .site-h1 { color: #fff; }
.site-pagehead .site-label { color: #fff; }
.site-breadcrumb { background: var(--yu-tint); font-size: var(--yu-fs-cap); }
.site-breadcrumb ol {
  max-width: var(--yu-wrap); margin: 0 auto; padding: 2px var(--yu-gutter);
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
}
.site-breadcrumb li { display: flex; align-items: center; }
.site-breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;   /* タップ44px確保 */
}
.site-breadcrumb li[aria-current] { min-height: 44px; }
.site-breadcrumb li + li::before { content: "／"; margin-right: 8px; color: var(--yu-ink-weak); }
.site-breadcrumb a { color: var(--yu-navy); }

/* 定義リスト（会社概要・募集概要） */
.site-dl { margin: 0; display: grid; }
.site-dl dt { font-weight: 700; color: var(--yu-navy); padding: 16px 0 4px; border-top: 1px solid var(--yu-line); }
.site-dl dd { margin: 0 0 16px; padding: 0 0 12px; }
@media (min-width: 768px) {
  .site-dl { grid-template-columns: 15em 1fr; column-gap: 28px; }
  .site-dl dt { grid-column: 1; }
  .site-dl dd { grid-column: 2; border-top: 1px solid var(--yu-line); padding: 16px 0 16px; margin: 0; }
}

/* 仕様表（会社概要・募集要項・対応構造物一覧など）＝原稿の表をそのまま組む。
   狭幅では th/td を積む（表を横スクロールさせない） */
.site-table { width: 100%; border-collapse: collapse; }
.site-table th, .site-table td {
  text-align: left; vertical-align: top; line-height: 1.9;
  text-wrap: pretty; word-break: auto-phrase;   /* セル内でも行末孤立を避ける */
}
.site-table th {
  font-weight: 700; color: var(--yu-navy); background: var(--yu-tint);
  padding: 14px 18px; border-top: 1px solid var(--yu-line);
}
.site-table td { padding: 14px 18px; border-top: 1px solid var(--yu-line); }
.site-table tr:last-child th, .site-table tr:last-child td { border-bottom: 1px solid var(--yu-line); }
.site-row--tint .site-table th { background: var(--yu-base); }
.site-table--head th:first-child { white-space: nowrap; }
@media (max-width: 767px) {
  .site-table, .site-table tbody, .site-table tr, .site-table th, .site-table td { display: block; width: 100%; }
  .site-table th { border-bottom: 0; }
  .site-table td { border-top: 0; }
  .site-table tr { border-top: 1px solid var(--yu-line); }
  .site-table tr:last-child { border-bottom: 1px solid var(--yu-line); }
}
/* 3列以上の表（年収モデル等）は狭幅で横スクロールさせる器に入れる */
.site-table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;                                    /* Firefox */
  scrollbar-color: var(--yu-accent-ink) rgba(18, 58, 94, .10);
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
}
.site-table-scroll::-webkit-scrollbar { height: 8px; }
.site-table-scroll::-webkit-scrollbar-track { background: rgba(18, 58, 94, .10); border-radius: 999px; }
.site-table-scroll::-webkit-scrollbar-thumb { background: var(--yu-accent-ink); border-radius: 999px; }
.site-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--yu-navy); }
.site-table-scroll .site-table { min-width: 34em; }
@media (max-width: 767px) {
  .site-table-scroll .site-table, .site-table-scroll .site-table tbody, .site-table-scroll .site-table tr,
  .site-table-scroll .site-table th, .site-table-scroll .site-table td { display: revert; width: auto; }
}

/* 番号つきステップ（選考の流れ・一日の流れ） */
.site-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 16px; }
.site-steps li {
  counter-increment: step; background: var(--yu-base); border: 1px solid var(--yu-line);
  border-radius: var(--yu-radius); padding: 20px 22px 20px 66px; position: relative; line-height: 1.8;
}
.site-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 20px; top: 18px;
  font-family: var(--yu-font-en); font-size: 18px; font-weight: 700; color: var(--yu-accent-ink);
}
.site-row--tint .site-steps li { background: var(--yu-base); }

/* 5つのポイント（見出し＋補足の2段リスト） */
.site-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.site-points__item {
  background: var(--yu-base); border-left: 4px solid var(--yu-accent); border-radius: var(--yu-radius);
  padding: 20px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; gap: 6px 14px; align-items: center;
}
.site-points__item .site-icon--point { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.site-points__item .site-points__head, .site-points__item > span:not(.site-icon) { grid-column: 2; }
.site-row--tint .site-points__item { background: var(--yu-base); }
.site-points__head { font-family: var(--yu-font); font-weight: 500; color: var(--yu-navy); font-size: var(--yu-fs-h3); line-height: 1.5; }
@media (min-width: 900px) { .site-points { grid-template-columns: 1fr 1fr; } }

/* 回遊ゲート（下層への入口カード） */
.site-gates { display: grid; gap: 16px; }
.site-gates__item {
  display: grid; gap: 8px; text-decoration: none; color: var(--yu-ink);
  background: var(--yu-base); border: 1px solid var(--yu-line); border-radius: var(--yu-radius);
  padding: 24px 26px; transition: border-color .25s var(--yu-ease), transform .25s var(--yu-ease);
}
.site-gates__item:hover { border-color: var(--yu-navy); transform: translateY(-2px); }
.site-gates__head { color: var(--yu-navy); font-size: var(--yu-fs-h3); line-height: 1.5; }
.site-gates__item--accent { border-top: 3px solid var(--yu-accent); }   /* 採用情報＝差し色で目立たせる */
.site-gates__item--accent .site-gates__head { color: var(--yu-accent-ink); font-weight: 700; }
.site-gates__item--accent:hover { border-color: var(--yu-accent); }
.site-gates__head::after { content: " →"; font-family: var(--yu-font-en); }
@media (min-width: 900px) { .site-gates { grid-template-columns: repeat(3, 1fr); } }
.site-recruit__panel .site-gates { grid-template-columns: 1fr; }   /* 幅の狭いパネル内では1列（親幅で判定できないため） */

/* 注記（原稿の ※ 行） */
.site-note { margin: 0; font-size: var(--yu-fs-body); color: var(--yu-ink-weak); line-height: 1.8; }

/* カード列（下層の一覧・インタビュー） */
.site-cards { display: grid; gap: 20px; }
.site-cards__item { background: var(--yu-base); border: 1px solid var(--yu-line); border-radius: var(--yu-radius); overflow: hidden; }
.site-cards__item img, .site-cards__item .site-slot { width: 100%; height: clamp(180px, 20vw, 240px); object-fit: cover; }
.site-cards__body { padding: 22px; }
@media (min-width: 768px) { .site-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* 4工程の横並び帯（仕事を知る「型枠工事とは」＝Pattern A） */
.site-steps4 { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); border: 0; border-radius: 0; overflow: hidden; }
.site-steps4__item { counter-increment: st; position: relative; background: var(--yu-tint); border: 1px solid var(--yu-line); padding: clamp(20px, 2vw, 26px); display: grid; gap: 14px; line-height: 1.8; font-weight: 500; letter-spacing: .06em; color: var(--yu-navy); }
.site-steps4__media { aspect-ratio: 4 / 3; overflow: hidden; align-self: start; }

.site-steps4__item { align-content: start; grid-template-rows: auto auto auto 1fr; min-width: 0; }
@media (min-width: 700px) {
  .site-steps4__item { grid-template-columns: .58fr 1.42fr; grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 2.4vw, 32px); align-items: start; }
  .site-steps4__item::before { grid-column: 2; }
  .site-steps4__media { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 4 / 3; }
  .site-steps4__label, .site-steps4__note { grid-column: 2; }
}
.site-steps4__media .site-slot { width: 100%; height: 100%; }
.site-steps4__label { display: block; font-family: var(--yu-font); font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; color: var(--yu-navy); line-height: 1.5; }
.site-steps4__note { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-body); line-height: 1.85; color: var(--yu-ink); }
/* 工程間の矢印 */
.site-steps4__item + .site-steps4__item::after {
  content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(26px, 3vw, 40px)); translate: -50% 0;
  width: 14px; height: clamp(26px, 3vw, 40px); background: var(--yu-accent);
  clip-path: polygon(42% 0, 42% 62%, 0 62%, 50% 100%, 100% 62%, 58% 62%, 58% 0);
}
.site-steps4__item::before { content: "STEP 0" counter(st); display: block; font-family: var(--yu-font-en); font-size: var(--yu-fs-label); font-weight: 700; letter-spacing: .2em; color: var(--yu-accent-ink); margin-bottom: 12px; }
@media (max-width: 699px) { .site-steps4 { gap: clamp(24px, 5vw, 34px); } .site-steps4__media { aspect-ratio: 16 / 10; } .site-steps4__item + .site-steps4__item::after { top: calc(-1 * clamp(24px, 5vw, 34px)); height: clamp(24px, 5vw, 34px); } }

/* 工程間の細い縦線 */
.site-flow__item:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; bottom: calc(-1 * clamp(18px, 2vw, 26px) - 1px);
  width: 12px; height: clamp(18px, 2vw, 26px); background: var(--yu-accent);
  clip-path: polygon(40% 0, 40% 58%, 0 58%, 50% 100%, 100% 58%, 60% 58%, 60% 0);
}
.site-row--tint .site-flow__item { background: var(--yu-base); }

/* 一日の流れ（休憩の行を色分け＝原稿の実装指示） */
.site-schedule td strong { display: block; color: var(--yu-navy); }
.site-schedule td span { display: block; }
.site-schedule__rest th, .site-schedule__rest td,
.site-row--tint .site-schedule__rest th, .site-row--tint .site-schedule__rest td { background: #FBEDE2; }
/* 実測 4.02:1 だったため1段濃いオレンジへ（#FBEDE2 地で 5.1:1） */
.site-schedule__rest td strong { color: #A8450C; }

/* 成長のタイムライン（このページの核＝原稿の実装指示） */
.site-timeline { list-style: none; margin: 0; padding: 0; }
.site-timeline__item { position: relative; padding: 0 0 40px 34px; border-left: 2px solid var(--yu-line); }
.site-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.site-timeline__item::before {
  content: ""; position: absolute; left: -9px; top: 10px; width: 16px; height: 16px;
  background: var(--yu-accent-ink); border-radius: 50%; border: 4px solid var(--yu-base);
}
.site-row--tint .site-timeline__item::before { border-color: var(--yu-tint); }
.site-timeline__item .site-h3 { margin-bottom: 12px; }
/* 段階が一目で分かるように：時期をラベル化し、本文をカードに収める */
.site-timeline { counter-reset: tl; }
.site-timeline__item { padding-bottom: clamp(28px, 3vw, 44px); }
.site-timeline__item::before { counter-increment: tl; content: counter(tl); display: grid; place-items: center; left: -17px; top: 0; width: 32px; height: 32px; font-family: var(--yu-font-en); font-size: 15px; font-weight: 700; line-height: 1; color: #fff; background: var(--yu-navy); border: 3px solid var(--yu-base); border-radius: 50%; }
.site-timeline__when { margin: 0 0 10px; display: inline-block; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); font-weight: 700; letter-spacing: .04em; color: var(--yu-navy); background: var(--yu-accent-ink); padding: 6px 14px; }
.site-timeline__title { margin-top: 0; }
.site-timeline__item .site-p:last-child { margin-bottom: 0; }

/* 3点並べ（現場の多様さ） */
.site-trio { display: grid; gap: 16px; }
.site-trio img, .site-trio .site-slot { width: 100%; height: clamp(200px, 24vw, 300px); object-fit: cover; border-radius: var(--yu-radius); }
@media (min-width: 768px) { .site-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-trio > * { min-width: 0; }

.site-btn-group--center { justify-content: center; }

/* CMS描画領域の位置表示（動的パーツは生成しない＝R-29。ここに何が入るかを可視化する枠） */
.site-cms {
  background: var(--yu-base); border: 1px dashed var(--yu-navy); border-radius: var(--yu-radius);
  padding: 20px 22px; display: grid; gap: 6px;
}
.site-cms__label {
  margin: 0; font-family: var(--yu-font-en); font-size: var(--yu-fs-label); font-weight: 700;
  letter-spacing: .18em; color: var(--yu-navy);
}
.site-cms__note { margin: 0; font-size: var(--yu-fs-cap); line-height: 1.8; color: var(--yu-ink-weak); }

/* 実績カードのカテゴリタグ */
.site-tag {
  display: inline-block; margin: 0; padding: 4px 12px; border-radius: var(--yu-radius);
  background: var(--yu-navy); color: #fff; font-size: var(--yu-fs-cap); font-weight: 700;
}
.site-worksample { max-width: 40em; }
.site-worksample img, .site-worksample .site-slot { width: 100%; height: clamp(200px, 26vw, 320px); object-fit: cover; }

/* 白地Rowでのカテゴリチップ */
.site-cats--light li { border-color: var(--yu-line); color: var(--yu-ink); }
.site-cats--light li:first-child { background: var(--yu-navy); color: #fff; border-color: var(--yu-navy); }

/* 記事本文（ブログ初回投稿の草案） */
.site-article { max-width: 44em; }

/* サイトマップ */
.site-sitemap, .site-sitemap ul { list-style: none; margin: 0; padding: 0; }
.site-sitemap > li { border-top: 1px solid var(--yu-line); }
.site-sitemap > li:last-child { border-bottom: 1px solid var(--yu-line); }
.site-sitemap a { display: flex; align-items: center; min-height: 52px; padding: 4px 0; color: var(--yu-navy); text-decoration: none; }
.site-sitemap a:hover { text-decoration: underline; }
.site-sitemap ul a { padding-left: 24px; color: var(--yu-ink); }
.site-sitemap ul li + li { border-top: 1px solid var(--yu-line); }
.site-sitemap ul { border-top: 1px solid var(--yu-line); }

/* 未支給素材のプレースホルダ（asset-slots が data-ph を突合する） */
.site-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; background: #EDF1F5; border: 2px dashed #8FA3B5; border-radius: var(--yu-radius);
  min-height: 220px; padding: 22px; color: var(--yu-navy);
}
.site-ph__no { font-family: var(--yu-font-en); font-size: var(--yu-fs-label); font-weight: 700; letter-spacing: .14em; color: var(--yu-accent-ink); }
.site-ph__name { font-size: var(--yu-fs-body); font-weight: 700; }
.site-ph__note { font-size: var(--yu-fs-cap); line-height: 1.7; color: #41586E; max-width: 32em; }

/* 代表の言葉（原稿の blockquote 相当）＝装飾ではなく引用の見せ場 */
.site-quote {
  margin: 0 0 12px; font-size: var(--yu-fs-h3); font-weight: 700; line-height: 1.6;
  letter-spacing: .06em; color: #D7A23C;
}
.site-sign { margin-top: 20px; font-weight: 700; }

/* 地図の設置枠（納品時にGoogleマップを入れる） */
.site-map-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 260px; background: var(--yu-base); border: 2px dashed #8FA3B5; border-radius: var(--yu-radius);
  color: var(--yu-navy); text-align: center; padding: 20px;
}

/* 図版・写真のキャプション */
.site-figure { margin: 0; }
.site-figure figcaption { font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); margin-top: 8px; }

/* ============================================================
   16. 演出（参考の性格＝横1種だけ・常時ループは作らない）
   ------------------------------------------------------------
   ★JSが動かないときの安全網（design-top-draft 手順4-c の必須ブロック）。
     [data-reveal]{opacity:0} だけを書いて .is-in をJSで付ける作りは、JSが止まると
     本文が透明のまま残る（実測 S01870: 可視本文1934字→183字）。
   ============================================================ */
/* 写真は下から現れる（カード内サムネイルとヒーローは除く） */
/* ゆっくりズームイン */
.site-duo__media[data-reveal] { overflow: hidden; }
.site-duo__media[data-reveal] img, .site-duo__media[data-reveal] .site-slot { transform: scale(1); transition: transform 1.6s var(--yu-ease); }
.site-duo__media[data-reveal].is-in img, .site-duo__media[data-reveal].is-in .site-slot { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
.site-duo__media[data-reveal] img, .site-duo__media[data-reveal] .site-slot { transform: none; transition: none; }
}
@media (scripting: none) {.site-duo__media[data-reveal] img, .site-duo__media[data-reveal] .site-slot { transform: none; } }

/* 差し込みの演出は使わない（動かすのはマーカーとボタンのホバーだけ） */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity var(--yu-dur) var(--yu-ease), transform var(--yu-dur) var(--yu-ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-opening], .site-open, .splash, .opening { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html {
  scroll-padding-top: 96px;   /* 固定ヘッダーの分だけアンカー着地をずらす */ scroll-behavior: auto; }
}

/* ============================================================
   17. 印刷（最小限）
   ============================================================ */
@media print {
  .site-header, .site-footer__nav, .site-btn { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   見出しのあらわれ方（JSが [data-h-anim] を付けて .is-in で表示）
   JS不通・動きを減らす設定・印刷では必ず表示に戻す
   ============================================================ */
html.js-h-anim [data-h-anim] { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--yu-ease), transform .9s var(--yu-ease); will-change: opacity, transform; }
html.js-h-anim [data-h-anim].is-in { opacity: 1; transform: none; }
@media (scripting: none) { [data-h-anim] { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { [data-h-anim] { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media print { [data-h-anim] { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   19. 冒頭「課題3枚 → 濃紺の答えパネル」（組立／解体の写真をパネル右に）
   ============================================================ */
.site-issuecards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .site-issuecards { grid-template-columns: repeat(3, 1fr); } }
.site-issuecards li { background: var(--yu-base); border: 1px solid var(--yu-line); border-top: 3px solid var(--yu-accent); border-radius: var(--yu-radius); padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
.site-row--tint .site-issuecards li { background: var(--yu-base); }
.site-issuecards__no { font-family: var(--yu-font-en); font-size: 22px; color: var(--yu-accent-ink); line-height: 1; }
.site-issuecards p { margin: 0; line-height: 1.8; font-size: var(--yu-fs-body); }
/* 縦線を黄色のドットが走り、先端に矢印 */
.site-issuearrow { position: relative; justify-self: center; width: 1px; height: 86px; background: var(--yu-line); margin-block: clamp(20px, 3vw, 34px); font-size: 0; }
.site-issuearrow__dot { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--yu-accent); transform: translateX(-50%); animation: yu-arrowrun 1.7s cubic-bezier(.55, 0, .45, 1) infinite; }
.site-issuearrow::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; border-right: 2px solid var(--yu-navy); border-bottom: 2px solid var(--yu-navy); transform: translateX(-50%) rotate(45deg); }
@keyframes yu-arrowrun { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 74px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .site-issuearrow__dot { animation: none; opacity: 1; } }

.site-answerpanel { background: var(--yu-navy); color: #fff; border-radius: var(--yu-radius-lg); overflow: hidden; display: grid; }
@media (min-width: 960px) { .site-answerpanel { grid-template-columns: 1.15fr .85fr; } }
.site-answerpanel__text { padding: clamp(28px, 3.4vw, 52px); display: grid; gap: 16px; align-content: center; }
.site-answerpanel__text p { margin: 0; line-height: 1.95; font-size: var(--yu-fs-body); }
.site-answerpanel__media { display: grid; grid-template-rows: 1fr 1fr; }
.site-answerpanel__media figure { margin: 0; position: relative; height: clamp(150px, 14vw, 190px); overflow: hidden; }
.site-answerpanel__media img, .site-answerpanel__ph, .site-answerpanel__media .site-slot, .site-answerpanel__media figure .site-slot { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; background: var(--yu-navy-line); color: var(--yu-onnavy-weak); font-size: var(--yu-fs-cap); text-align: center; padding: 12px; line-height: 1.7; }
.site-answerpanel__media figcaption { position: absolute; left: 0; bottom: 0; background: rgba(14,42,68,.86); color: #fff; font-size: var(--yu-fs-cap); padding: 6px 14px; }

/* ============================================================
   20. 大きな数字＋本文の2列（4,000件以上の現場経験）
   ============================================================ */
.site-figure2 { display: grid; gap: var(--yu-sec-gap); align-items: start; }
@media (min-width: 900px) { .site-figure2 { grid-template-columns: .85fr 1.15fr; } }
.site-figure2__fig { border-top: 3px solid var(--yu-accent); padding-top: 20px; }
.site-figure2__num { font-family: var(--yu-font-en); font-size: clamp(64px, 9vw, 120px); line-height: .95; color: var(--yu-navy); display: block; }
.site-figure2__unit { font-size: var(--yu-fs-h3); color: var(--yu-navy); margin-left: 6px; }
.site-figure2__sub { margin: 12px 0 0; font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); line-height: 1.8; }
.site-figure2__body { display: grid; gap: 16px; }
.site-figure2__body p { margin: 0; line-height: 2; font-size: var(--yu-fs-body); }

/* ============================================================
   21. 写真＋声かけの吹き出し（怪我をしないために）
   ============================================================ */
.site-voice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yu-sec-gap); align-items: center; }
.site-voice > * { min-width: 0; }
@media (min-width: 900px) { .site-voice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site-voice__media img, .site-voice__ph, .site-voice__media .site-slot, .site-voice__media > .site-slot { width: 100%; height: clamp(240px, 30vw, 400px); object-fit: cover; border-radius: var(--yu-radius); display: grid; place-items: center; background: var(--yu-base); border: 1px dashed var(--yu-line); color: var(--yu-ink-weak); font-size: var(--yu-fs-cap); text-align: center; padding: 16px; line-height: 1.8; }
.site-voice__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; justify-items: start; }
.site-voice__list li { background: var(--yu-navy); color: #fff; border-radius: 0; padding: 12px 24px; font-size: var(--yu-fs-lead); line-height: 1.5; }
.site-voice__list li:nth-child(2) { margin-left: clamp(16px, 4vw, 56px); }
.site-voice__text { display: grid; gap: 16px; }
.site-voice__text p { margin: 0; line-height: 2; font-size: var(--yu-fs-body); }

/* ============================================================
   24. 施工実績（写真入りページヘッダー＋実績グリッド）
   ============================================================ */
.site-pagehead--photo { position: relative; isolation: isolate; overflow: hidden; }
.site-pagehead--photo > img, .site-pagehead--photo > .site-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.site-pagehead--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,58,94,.86), rgba(14,42,68,.92)); }
.site-pagehead--photo .site-pagehead__in { padding-block: clamp(28px, 3.4vw, 44px) clamp(44px, 6vw, 84px); display: grid; gap: 0; }
.site-pagehead__label { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.site-pagehead__label .site-label { margin: 0; }
.site-pagehead__label::before { content: ""; width: clamp(28px, 4vw, 56px); height: 1px; background: rgba(255,255,255,.7); flex: none; }
.site-pagehead--photo .site-h1 { margin: 0; }
.site-pagehead__lead { max-width: 46em; margin: clamp(18px, 2vw, 28px) 0 0; color: #fff; line-height: 2.0; }
.site-breadcrumb--onphoto { background: transparent; margin-bottom: clamp(20px, 3vw, 36px); }
.site-breadcrumb--onphoto ol { max-width: none; margin: 0; padding: 0; }
.site-breadcrumb--onphoto a, .site-breadcrumb--onphoto li { color: var(--yu-onnavy-weak); }
.site-breadcrumb--onphoto li[aria-current] { color: #fff; }

.site-worksgrid { display: grid; gap: clamp(20px, 2.4vw, 28px); }
@media (min-width: 640px) { .site-worksgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .site-worksgrid { grid-template-columns: repeat(3, 1fr); } }
.site-workcard { background: var(--yu-base); border: 1px solid var(--yu-line); border-radius: var(--yu-radius); overflow: hidden; display: flex; flex-direction: column; }
.site-workcard__media { position: relative; }
.site-workcard__media img, .site-workcard__media .site-slot { width: 100%; height: clamp(180px, 17vw, 210px); object-fit: cover; }
.site-workcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.site-workcard__date { margin: 0; font-family: var(--yu-font-en); font-size: var(--yu-fs-cap); letter-spacing: .12em; color: var(--yu-ink-weak); }
.site-workcard__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-workcard__tags li { border: 1px solid var(--yu-navy); border-radius: var(--yu-radius); padding: 2px 10px; font-size: var(--yu-fs-cap); line-height: 1.7; color: var(--yu-navy); }
.site-workcard__title { margin: 0; font-size: var(--yu-fs-body); font-weight: 500; line-height: 1.8; letter-spacing: .06em; color: var(--yu-ink); }
.site-workcard__title a { color: inherit; text-decoration: none; }
.site-workcard__title a:hover { color: var(--yu-navy); text-decoration: underline; }
.site-workcard__note { margin: 0; font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); }

.site-pager { display: flex; justify-content: center; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.site-pager li { font-family: var(--yu-font-en); font-size: var(--yu-fs-cap); }
.site-pager a, .site-pager span {
  display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 8px;
  border: 1px solid var(--yu-line); border-radius: var(--yu-radius); background: var(--yu-base);
  color: var(--yu-navy); text-decoration: none; letter-spacing: .08em;
}
.site-pager a:hover { border-color: var(--yu-navy); }
.site-pager [aria-current="page"] { background: var(--yu-navy); border-color: var(--yu-navy); color: #fff; font-weight: 700; }

/* ============================================================
   25. フォーム（parts213／parts214 のレイアウト見本）
   ============================================================ */
.site-form { display: grid; gap: clamp(24px, 3vw, 34px); }
.site-field { display: grid; gap: 10px; }
.site-field__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-field__label { margin: 0; font-size: var(--yu-fs-body); font-weight: 700; letter-spacing: .08em; color: var(--yu-navy); }
.site-req { flex: none; padding: 2px 12px; border-radius: var(--yu-radius); background: var(--yu-accent-ink); color: var(--yu-navy); font-size: var(--yu-fs-cap); font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
.site-field__help { margin: 0; font-size: var(--yu-fs-cap); line-height: 1.8; color: var(--yu-ink-weak); }
.site-input, .site-textarea, .site-file {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--yu-fs-body); color: var(--yu-ink);
  background: var(--yu-base); border: 1px solid var(--yu-navy-line); border-radius: var(--yu-radius);
  padding: 14px 16px; line-height: 1.9;
}
.site-input { min-height: 56px; }
.site-textarea { min-height: 220px; resize: vertical; }
.site-input::placeholder, .site-textarea::placeholder { color: var(--yu-ink-weak); }
.site-input:focus, .site-textarea:focus { border-color: var(--yu-accent-ink); }
.site-file { background: var(--yu-tint); padding: 16px; }
.site-file__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px;
  border: 1px solid var(--yu-navy); border-radius: var(--yu-radius);
  background: var(--yu-base); color: var(--yu-navy); font-size: var(--yu-fs-cap); font-weight: 700; letter-spacing: .06em;
}
.site-checks { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
.site-checks li { display: flex; align-items: center; gap: 10px; font-size: var(--yu-fs-body); }
.site-checks input { width: 20px; height: 20px; accent-color: var(--yu-navy); margin: 0; }
.site-form__submit { display: flex; justify-content: center; margin-top: clamp(8px, 1.5vw, 16px); }
.site-form__submit .site-btn { min-width: 320px; justify-content: center; padding-inline: 40px 74px; }

/* ============================================================
   26. ブログ一覧の2カラム（左＝新着情報・カテゴリー／右＝記事カード2列）
   ============================================================ */
.site-bloglayout { display: grid; gap: clamp(28px, 4vw, 56px); }
.site-blogside { order: 1; }   /* 狭幅では記事カードを上、新着・カテゴリーを下に */
.site-bloglayout .site-blogcards { grid-template-columns: 1fr 1fr; }
.site-bloglayout .site-pager { margin-top: clamp(28px, 3.4vw, 48px); }
@media (max-width: 599px) { .site-bloglayout .site-blogcards { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .site-bloglayout { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }   /* 左＝記事カード／右＝新着・カテゴリー */
  .site-bloglayout .site-blogcards { grid-column: 1; grid-row: 1; }
  .site-bloglayout .site-blogside { grid-column: 2; grid-row: 1; order: 0; }
  .site-bloglayout .site-pager { grid-column: 1; grid-row: 2; }
}
.site-blogside { display: grid; gap: clamp(24px, 3vw, 40px); }
.site-blogside__head { margin: 0 0 14px; font-family: var(--yu-font); font-size: var(--yu-fs-h3); font-weight: 500; letter-spacing: .1em; color: var(--yu-navy); border-bottom: 1px solid var(--yu-line); padding-bottom: 10px; }
.site-blogside__list { list-style: none; margin: 0; padding: 0; display: grid; }
.site-blogside__list a { display: block; padding: 12px 0; color: var(--yu-ink); text-decoration: none; font-size: var(--yu-fs-cap); line-height: 1.7; border-bottom: 1px solid var(--yu-line); }
.site-blogside__list a:hover { color: var(--yu-accent-ink); }
.site-blogside__date { display: block; font-family: var(--yu-font-en); letter-spacing: .1em; color: var(--yu-ink-weak); }

/* 施工実績の絞り込み（工事の種類から探す） */
.site-filter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; margin: 0 0 clamp(28px, 3.4vw, 48px); padding: 0; }
@media (max-width: 700px) { .site-filter { grid-template-columns: 1fr 1fr; } }
.site-filter li { display: grid; }
.site-filter__btn { width: 100%; box-sizing: border-box; }
.site-filter__btn { font-family: var(--yu-font); font-size: var(--yu-fs-cap); letter-spacing: .1em; line-height: 1.6; min-height: 44px; padding: 10px 22px; cursor: pointer; color: var(--yu-navy); background: var(--yu-base); border: 1px solid var(--yu-navy-line); transition: background-color .2s var(--yu-ease), color .2s var(--yu-ease), border-color .2s var(--yu-ease); }
.site-filter__btn:hover { border-color: var(--yu-navy); }
.site-filter__btn.is-on { background: var(--yu-navy); border-color: var(--yu-navy); color: #fff; }
.site-workcard[hidden] { display: none; }
.site-worksgrid__empty { margin: 0; color: var(--yu-ink-weak); }

/* 下層CTAの写真背景（黒オーバーレイ） */
.site-row--ctaphoto { position: relative; isolation: isolate; background-image: url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1556/yu-cta-site.webp"); background-size: cover; background-position: center; }
.site-row--ctaphoto::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); z-index: -1; }

/* 働く5つのポイント（見出し中央→写真は右寄せ→リストは左寄せの縦並び） */
.site-pointsrow { display: grid; gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .site-pointsrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* 左＝リスト／右＝写真 */
  .site-pointsmedia { width: 100%; order: 2; position: sticky; top: calc(var(--yu-header-h) + clamp(16px, 2vw, 32px)); }   /* リストを読む間、写真は追従 */
  .site-pointsrow > .site-points--left { order: 1; }
  .site-points--left { max-width: none; }
}
.site-points--left { display: grid; grid-template-columns: 1fr; gap: 16px; }   /* 縦1列 */

/* 見出し＝紺パネル／本文＝白パネルの2列（募集概要の補足セクション） */
.site-split--panel { gap: 0; align-items: stretch; }
.site-split--panel .site-split__head { background: var(--yu-navy); padding: clamp(20px, 2.6vw, 34px); display: grid; align-content: center; }
.site-split--panel .site-split__head .site-h3 { color: #fff; margin: 0; }
.site-split--panel .site-split__body { background: var(--yu-base); padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 16px; align-content: center; }
.site-split--panel .site-split__body .site-p { margin: 0; }

/* ============================================================
   27. レスポンシブの詰め（スマホ＝縦積み・本文左揃え／ドロワーは1画面）
   ============================================================ */
@media (max-width: 1023px) {
  .site-fv__script-clip { left: 0; right: 0; }
  /* ドロワーは全画面。項目はスクロールなしで収める */
  .site-nav__panel { inset: 100% 0 auto 0; }
  .site-nav__toggle:checked ~ .site-nav__panel {
    position: fixed; inset: var(--yu-header-h) 0 0 0; max-height: none; height: auto;
    background: var(--yu-base); border-bottom: 0; box-shadow: none; overflow-y: auto;
    display: grid; align-content: start;
  }
  /* 縦が短いときはさらに詰めて1画面に収める（届かない項目を作らない） */
  @media (max-height: 620px) {
    .site-nav__link { min-height: 38px; font-size: 14px; }
    .site-nav__sub-label { min-height: 38px; }
    .site-nav__sub .site-nav__link { min-height: 34px; font-size: 13px; }
    .site-nav__link--cta { margin: 8px var(--yu-gutter) 10px; min-height: 42px; }
  }
  .site-nav__link { min-height: 44px; font-size: 15px; }
  .site-nav__sub-label { width: 48px; min-height: 44px; }
  .site-nav__sub-toggle:checked ~ .site-nav__sub { display: grid; grid-template-columns: 1fr; max-height: 400px; }   /* 子ページは縦並び */
  .site-nav__sub .site-nav__link { padding-left: var(--yu-gutter); font-size: 14px; min-height: 40px; }
  .site-nav__link--cta { margin: 10px var(--yu-gutter) 14px; min-height: 48px; justify-content: center; }
  .site-header__in { padding-block: 14px; }
}
@media (max-width: 767px) {
  /* 本文は左揃え（PCで中央寄せにしている箇所もスマホでは左） */
  .site-p, .site-statement, .site-cta__body, .site-issues__close, .site-lead, .site-note { text-align: left !important; }
  .site-h2, .site-h3 { text-align: left !important; }
  /* 縦積み時は写真→テキストの順・食い込みや大きな負マージンは解除 */
  .site-row__in > .site-duo__media--overlap { margin-top: 0; }
  .site-row__in > .site-duo__media--bleed-r, .site-row__in > .site-duo__media--bleed-l { margin-inline: 0; }
  .site-row .site-headtext { grid-column: full; margin-top: 0; padding-inline: var(--yu-gutter); padding-block: var(--yu-row-pad); }
  .site-row .site-stack--indent { grid-column: full; margin-top: 0; padding: var(--yu-row-pad) var(--yu-gutter); }
  .site-row .site-stack--indent-rev { padding: var(--yu-row-pad) var(--yu-gutter); }
  .site-marklogo, .site-marklogo--onlight { display: none; }
  /* CTA・ボタンは幅いっぱい／最小幅の指定を外す */
  .yu-main .site-btn, .site-footer .site-btn { min-width: 0; width: 100%; justify-content: flex-start; }
  .site-form__submit .site-btn { min-width: 0; width: 100%; }
  /* フッターは縦積み */
  .site-footer__in { grid-template-columns: 1fr; }
  .site-footer__nav { grid-template-columns: 1fr; }
  /* 縦並びでもカードの高さを揃える */
  .site-blogcards, .site-worksgrid, .site-cards, .site-issues, .site-gates, .site-points, .site-issuecards { grid-auto-rows: 1fr; }
  .site-blogcards__item, .site-workcard, .site-cards__item, .site-issues__item, .site-gates__item, .site-points__item { height: 100%; }
  .site-blogcards__link { height: 100%; }
  /* 施工実績カード・サムネイルは1〜2列で自然に */
  .site-worksgrid { grid-template-columns: 1fr; }
  .site-filter { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   28. FV（タブレット縦・スマホ）＝写真→筆記体→キャッチ→ボタンの素直な縦組み
   ============================================================ */
@media (max-width: 1023px) {
  /* ヒーローは1画面（写真＋キャッチ＋ボタンで 100svh − ヘッダー） */
  .site-fv { min-height: calc(100svh - var(--yu-header-h)); height: calc(100svh - var(--yu-header-h)); display: grid; grid-template-rows: 52% 1fr; }
  .site-fv__media { padding-inline: 0; min-height: 0; position: relative; }
.site-fv__media img, .site-fv__media .site-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .site-fv__slider { position: absolute; inset: 0; width: 100%; height: 100%; }
  .site-fv__body { position: relative; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .site-fv__inner {
    position: static; grid-column: auto; max-width: none;
    padding: 0 var(--yu-gutter);
  }
  /* 筆記体：写真の下端をまたぐ位置に置き、写真に被る側を白・パネル側をグレーにする（PCと同じ考え） */
  .site-fv__script {
    display: block; position: absolute; left: var(--yu-gutter); top: 0; right: auto; bottom: auto; margin: 0;
    width: min(88vw, 600px); height: calc(min(88vw, 600px) * 152 / 734);
    transform: translateY(calc(-100% - 24px));   /* 箱の下端＝写真の下端の少し上 */
  }
  .site-fv__script-clip { position: absolute; left: -30px; right: -30px; overflow: visible; display: block; }
  .site-fv__script-clip--photo { top: 0; bottom: 0; }
  .site-fv__script-clip--panel { display: none; }
  .site-fv__ink {
    display: flex; align-items: center; position: absolute; left: 30px; top: 0; width: min(88vw, 600px); height: 100%;
    transform: rotate(-7deg); transform-origin: center center;
  }
  .site-fv__cta { position: static; margin: clamp(26px, 4vw, 44px) 0 0; padding-inline: var(--yu-gutter); }
  .site-fv__scrim { inset: 0; }   /* 写真の左右にも膜をかける（余白扱いにしない） */
  .site-fv__cta .site-btn { width: auto; }
  .site-fv__scroll { display: flex; position: absolute; right: 6px; width: auto; bottom: auto; top: clamp(16px, 3vw, 28px); }   /* 狭幅は写真の右端に添える */
  .site-h1-top { font-size: clamp(26px, 5.2vw, 40px); }
  .site-fv__sub { font-size: clamp(15px, 2.1vw, 18px); }
  .site-news--overlap { grid-column: full; }
}
@media (max-width: 767px) {
  .site-h1-top { font-size: clamp(24px, 7.4vw, 32px); }
  .site-fv__sub { font-size: 15px; line-height: 1.7; }
  .site-fv__cta .site-btn { width: 100%; justify-content: flex-start; }
}

/* ドロワー展開中のバーガーは「×」に */
@media (max-width: 1023px) {
  .site-nav { position: static; }
  .site-nav__burger { position: relative; z-index: 40; }
  .site-nav__burger span { transition: transform .25s var(--yu-ease), opacity .2s var(--yu-ease); }
  .site-nav__toggle:checked ~ .site-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav__toggle:checked ~ .site-nav__burger span:nth-child(2) { opacity: 0; }
  .site-nav__toggle:checked ~ .site-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* タブレット横：紺ブロックと後続の写真の間に余白を確保（食い込み量を控える） */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-row__in > .site-duo__media--overlap { margin-top: clamp(-120px, -8vw, -60px); }
  .site-row .site-headtext { padding-bottom: clamp(96px, 11vw, 130px); }
}

/* タブレット横（1024〜1199px）はナビを詰めて1行に収める */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav__link { padding: 0 5px; font-size: 14px; }
  .site-nav__link--cta { padding: 0 11px; margin-left: 4px; }
  .site-header__in { gap: 10px; }
  .site-logo__img { height: 34px; width: auto; }
}

/* スマホで結びの一文が2行になっても、各行にマーカーを引く */
@media (max-width: 767px) {
  .site-issues__close::after { display: none; }
  @keyframes yu-mark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
  .site-mark {
    padding: 0 .1em;
    background: linear-gradient(to top, rgba(200, 82, 15, .24) 0 42%, transparent 42%) left center no-repeat;
    background-size: 0% 100%;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .site-issues__close.is-in .site-mark { animation: yu-mark 1.1s var(--yu-ease) forwards; }
  @media (prefers-reduced-motion: reduce) { .site-mark { background-size: 100% 100%; animation: none; } }
  @media (scripting: none) { .site-mark { background-size: 100% 100%; } }
}

/* ============================================================
   29. タブレット縦（〜1023px）も縦組みに寄せる
   ============================================================ */
@media (max-width: 1023px) {
  .site-row .site-headtext { grid-column: full; margin-top: 0; padding: var(--yu-row-pad) var(--yu-gutter); }
  .site-row .site-stack--indent, .site-row .site-stack--indent-rev { grid-column: full; margin-top: 0; padding: var(--yu-row-pad) var(--yu-gutter); }
  .site-row__in > .site-duo__media--bleed-r { margin-left: 0; }
  .site-row__in > .site-duo__media--bleed-l { margin-right: 0; }
  .site-marklogo, .site-marklogo--onlight { display: none; }
  .site-headtext .site-duo__text { padding-left: 0; }
  .site-stack--indent { padding-left: var(--yu-gutter); }
}

/* スマホ・タブレット縦では片側ブリードだった写真を画面幅いっぱいに */
@media (max-width: 1023px) {
  .site-row__in > .site-duo__media--bleed-r, .site-row__in > .site-duo__media--bleed-l { grid-column: full; padding-inline: 0; }
  .site-duo .site-duo__media, .site-service .site-service__media, .site-recruit .site-recruit__media {
    margin-inline: calc(-1 * var(--yu-gutter)); padding-inline: 0;
  }
.site-duo__media img, .site-service__media img, .site-recruit__media img, .site-duo__media .site-slot, .site-service__media .site-slot, .site-recruit__media .site-slot { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; }   /* 全幅にしてもトリミング比は一定（16:9） */
}

/* スマホ・タブレット縦：写真をテキストの上に置き、背景色と写真をくっつける */
@media (max-width: 1023px) {
  .site-row__in > .site-duo__media--overlap { order: -1; margin-top: 0; margin-bottom: 0; }
  .site-row__in > .site-duo__media--bleed-l, .site-row__in > .site-duo__media--bleed-r { margin-bottom: 0; }
  .site-row > .site-row__in > .site-headtext,
  .site-row > .site-row__in > .site-stack--indent,
  .site-row > .site-row__in > .site-stack--indent-rev { margin-top: 0; }
  .site-duo, .site-service, .site-recruit, .site-recruit--plain, .site-pointsrow { gap: 0; }
  .site-duo__text, .site-service__text, .site-recruit__panel { padding-top: clamp(20px, 4vw, 28px); }
}

/* タブレット縦：CTAの紺ブロックを版面いっぱいまで広げる */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-row .site-cta--boxed { max-width: none; width: 100%; justify-self: stretch; margin-inline: 0; padding-inline: clamp(28px, 4vw, 44px); }
}

/* タブレット縦・スマホでも見出しは縦書きのまま（位置は縦組みの流れに従う） */
@media (max-width: 1023px) {
  .site-h2--vertical { writing-mode: vertical-rl; width: max-content; height: max-content; justify-self: start; }
  .site-cta--split .site-h2--onnavy.site-nobr-pc { writing-mode: horizontal-tb; }
}

/* タブレット縦・スマホ：CTAの紺ブロックに縦の余裕を足す */
@media (max-width: 1023px) {
  .site-row .site-cta--boxed { padding-block: clamp(48px, 8vw, 84px); }
  .site-cta--split { gap: clamp(28px, 5vw, 48px); }
}

/* 縦書き見出しの右の空きをなくす：見出しと本文を横並びに（狭幅でも維持） */
@media (max-width: 1023px) {
  .site-headtext, .site-headtext--plain { grid-template-columns: max-content minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
  .site-headtext .site-duo__text { padding-left: 0; }
}

/* スマホ・タブレット縦：写真と紺の面が連続するように、組の前後の余白も0に */
@media (max-width: 1023px) {
  .site-row > .site-row__in > .site-duo__media + *,
  .site-row > .site-row__in > * + .site-duo__media { margin-top: 0; }
}

/* スマホ：縦書きのままだと帯だけが片側に伸びるので、横書きの帯に切り替えて縦積みにする */
@media (max-width: 599px) {
  .site-headtext, .site-headtext--plain { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 4vw, 24px); }
  .site-headtext .site-h2--vertical, .site-headtext--plain .site-h2--vertical {
    writing-mode: horizontal-tb; text-orientation: mixed; justify-self: stretch;
    padding: clamp(16px, 4vw, 22px) clamp(16px, 4vw, 20px); background-size: 100% 100%;
    height: auto; max-height: none; min-height: 0; block-size: auto; overflow: visible;
    width: auto; inline-size: auto; max-width: 100%;
    line-height: 1.45; text-wrap: pretty;
  }
  .site-headtext .site-h2--vertical br, .site-headtext--plain .site-h2--vertical br { display: none; }
  .site-headtext .site-h2--vertical[data-en]::before, .site-headtext--plain .site-h2--vertical[data-en]::before { writing-mode: horizontal-tb; text-orientation: mixed; margin-block-end: .4em; }
}

/* 縦書き見出しと本文の開始位置（上端）を揃える */
@media (max-width: 1023px) {
  .site-headtext .site-h2--vertical, .site-headtext--plain .site-h2--vertical { align-self: start; margin-block: 0; }
  .site-headtext .site-duo__text, .site-headtext--plain .site-duo__text { padding-top: 0; margin-top: 0; }
  .site-headtext .site-duo__text > :first-child, .site-headtext--plain .site-duo__text > :first-child { margin-top: 0; }
}

/* タブレット縦・スマホ：採用情報の上に余白 */
@media (max-width: 1023px) {
  .site-row--nopadbottom:has(> .site-row__in > .site-recruit--plain) { padding-top: var(--yu-row-pad); }
  .site-row--nopadbottom > .site-row__in > .site-recruit--plain { margin-top: 0; }
  .site-row--keeppad { padding-block: var(--yu-row-pad); }
  .site-recruit--plain .site-recruit__panel { padding-top: clamp(28px, 5vw, 48px); }   /* 見出し「採用情報」の上に余白 */
}

/* タブレット縦・スマホ：白地の見出し＋本文ブロックの下に余白 */
@media (max-width: 1023px) {
  .site-row > .site-row__in > .site-headtext--plain { margin-bottom: clamp(28px, 5vw, 48px); }
}

/* タブレット縦・スマホ：薄地Row（型枠工事を中心に…）の下は写真が接するので帯を出さない */
@media (max-width: 1023px) {
  .site-row--tint:has(> .site-row__in > .site-headtext--plain) { padding-bottom: 0; }
  .site-row > .site-row__in > .site-headtext--plain { margin-bottom: 0; }
  .site-row--tint:has(> .site-row__in > .site-headtext--plain) .site-headtext--plain { padding-bottom: clamp(28px, 5vw, 48px); }
}

/* 下層ページの写真は左右に余白（全幅はトップの片側ブリード写真と採用情報だけ） */
@media (max-width: 1023px) {
  .site-duo .site-duo__media, .site-service .site-service__media, .site-recruit .site-recruit__media { margin-inline: 0; }
  .site-row--nopadbottom .site-recruit__media { margin-inline: 0; }   /* 採用情報の写真も左右余白あり */
}

/* タブレット縦・スマホ：働く5つのポイントは写真とリストの間に余白 */
@media (max-width: 1023px) {
  .site-pointsrow { gap: clamp(24px, 4vw, 40px); }
}

/* ============================================================
   見出しの英字表記（data-en）／見出しのあらわれ方（左から流れる）
   ★ 縦書き見出しは帯付き。帯は上から下へ伸びる
   ============================================================ */
.site-h2[data-en]::before { content: attr(data-en); display: block; font-family: var(--yu-font-en); font-size: var(--yu-fs-label); font-weight: 500; letter-spacing: .24em; color: var(--yu-accent-deep); margin-block-end: .8em; }
.site-h2--onnavy[data-en]::before, .site-cta .site-h2[data-en]::before, .site-recruit:not(.site-recruit--plain) .site-recruit__panel .site-h2[data-en]::before, .site-split__head .site-h2[data-en]::before { color: #D7A23C; }
.site-h2--vertical[data-en]::before { writing-mode: vertical-rl; text-orientation: sideways; margin-block-end: .9em; color: currentColor; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: .18em; }

/* 縦書き見出しの帯（背景をグラデーションで描き、高さで伸ばす） */
.site-h2--vertical { color: #fff; padding: clamp(20px, 2.2vw, 32px) clamp(13px, 1.3vw, 20px); background-image: linear-gradient(var(--yu-navy), var(--yu-navy)); background-repeat: no-repeat; background-position: top center; background-size: 100% 100%; }
.site-headtext .site-h2--vertical, .site-headtext--plain .site-h2--vertical { color: #fff; }
/* 縦書き見出しの帯は差し色（濃紺／薄地どちらの面でも） */
.site-headtext .site-h2--vertical, .site-headtext--plain .site-h2--vertical { background-image: linear-gradient(var(--yu-accent), var(--yu-accent)); color: var(--yu-navy); }   /* 黄帯に紺文字＝5.1:1 */
.site-cta--split .site-h2--vertical { background-image: none; padding: 0; }

/* 左から流れて入る */
html.js-h-anim [data-h-anim] { opacity: 0; transform: translateX(-16px); transition: opacity .7s var(--yu-ease), transform .9s var(--yu-ease); }
html.js-h-anim [data-h-anim].is-in { opacity: 1; transform: none; }
/* スマホは版面の余白（20px）内に収める＝横方向にはみ出さない */
@media (max-width: 767px) { html.js-h-anim [data-h-anim] { transform: translateX(-12px); } }
/* 縦書き見出しは帯が上から下へ伸び、少し遅れて文字が出る */
html.js-h-anim [data-h-anim].site-h2--vertical { opacity: 1; transform: none; -webkit-text-fill-color: transparent; background-size: 100% 0; transition: background-size .9s var(--yu-ease), -webkit-text-fill-color .35s linear .5s; }
html.js-h-anim [data-h-anim].site-h2--vertical.is-in { -webkit-text-fill-color: currentColor; background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .site-h2--vertical { background-size: 100% 100% !important; -webkit-text-fill-color: currentColor !important; } }
@media (scripting: none) { .site-h2--vertical { background-size: 100% 100% !important; } }

/* ============================================================
   年収モデルの棒グラフ（画面に入ると下から伸びる）
   ============================================================ */
.site-bars2 { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(24px, 3vw, 40px); }
.site-bars__group { display: grid; gap: 12px; }
.site-bars__title { margin: 0; padding-left: 14px; border-left: 6px solid var(--yu-navy); }
.site-bars__title--exp { border-left-color: var(--yu-accent); color: var(--yu-accent-ink); }
.site-bars { background: var(--yu-base); padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(16px, 2vw, 24px); }
.site-bars__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 56px); align-items: end; }
.site-bars__item { display: grid; grid-template-rows: auto clamp(120px, 15vw, 200px) auto; justify-items: center; gap: 10px; }
.site-bars__val { font-family: var(--yu-font-en); font-size: clamp(24px, 2.8vw, 38px); line-height: 1; color: var(--yu-navy); white-space: nowrap; }
.site-bars__val--exp { color: var(--yu-accent-ink); }
.site-bars__val i { font-family: var(--yu-font); font-style: normal; font-size: var(--yu-fs-cap); margin-left: 4px; }
.site-bars__bar { align-self: end; width: min(100%, 88px); background: var(--yu-navy); }
.site-bars__bar--exp { background: var(--yu-accent); }
.site-bars__label { font-family: var(--yu-font); font-size: var(--yu-fs-lead); color: var(--yu-navy); display: grid; justify-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--yu-line); width: 100%; text-align: center; }
.site-bars__label em { font-style: normal; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); white-space: nowrap; }

/* 伸びるアニメーション（JS起動時のみ縮める＝JS不通でも棒は出る） */
html.js-bars .site-bars[data-bars] .site-bars__bar { transform: scaleY(0); transform-origin: bottom; transition: transform .95s var(--yu-ease); }
html.js-bars .site-bars[data-bars] .site-bars__val { opacity: 0; transition: opacity .4s linear .45s; }
html.js-bars .site-bars[data-bars].is-in .site-bars__bar { transform: scaleY(1); }
html.js-bars .site-bars[data-bars].is-in .site-bars__val { opacity: 1; }
html.js-bars .site-bars[data-bars] .site-bars__item:nth-child(2) .site-bars__bar { transition-delay: .12s; }
html.js-bars .site-bars[data-bars] .site-bars__item:nth-child(3) .site-bars__bar { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js-bars .site-bars .site-bars__bar { transform: none !important; transition: none !important; } html.js-bars .site-bars .site-bars__val { opacity: 1 !important; } }
@media (min-width: 1024px) { .site-bars2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .site-bars__list { gap: 10px; } .site-bars__bar { width: min(100%, 56px); } .site-bars__val { font-size: 20px; } .site-bars__label { font-size: 15px; } .site-bars__label em { font-size: 12px; white-space: normal; } }

/* ============================================================
   社員アンケート（良いところ／悪いところ）
   ============================================================ */
.site-survey { display: grid; gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(24px, 3vw, 40px); }
.site-survey__panel { background: var(--yu-tint); padding: clamp(22px, 2.6vw, 36px); border-top: 3px solid var(--yu-navy); }
.site-survey__panel--bad { border-top-color: var(--yu-accent); }
.site-survey__panel .site-h3 { margin: 0 0 clamp(14px, 1.6vw, 20px); }
.site-survey__list { list-style: none; margin: 0; padding: 0; display: grid; }
.site-survey__list li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--yu-line); font-family: var(--yu-font-gothic); line-height: 1.8; }
.site-survey__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.site-survey__list li::before { content: ""; position: absolute; left: 4px; top: calc(14px + .9em); transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--yu-navy); }
.site-survey__panel--bad .site-survey__list li::before { background: var(--yu-accent); }
.site-survey__note { margin: clamp(16px, 1.8vw, 22px) 0 0; padding-top: clamp(14px, 1.6vw, 18px); border-top: 1px solid var(--yu-line); font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink); word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }
.site-survey__panel { max-width: 860px; }
@media (min-width: 900px) { .site-survey__list { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 44px); } .site-survey__panel { max-width: none; } .site-survey__list li:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; } }

/* ============================================================
   施工した構造物（カード・PC4列×2段）
   ============================================================ */
.site-structs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.site-structs li { background: var(--yu-base); border: 1px solid var(--yu-line); border-top: 3px solid var(--yu-accent); padding: clamp(16px, 1.8vw, 24px) clamp(12px, 1.4vw, 20px); font-family: var(--yu-font); font-size: var(--yu-fs-lead); line-height: 1.5; color: var(--yu-navy); text-align: center; display: grid; place-items: center; }
.site-row--tint .site-structs li { background: var(--yu-base); }
@media (min-width: 700px) { .site-structs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   主な対応構造物（写真つきカード）
   ============================================================ */
.site-structcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (min-width: 700px) { .site-structcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .site-structcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-structcards__item { background: var(--yu-base); border: 1px solid var(--yu-line); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
.site-structcards__media, .site-structcards__name, .site-structcards__text { min-width: 0; }
.site-row--tint .site-structcards__item { background: var(--yu-base); }
.site-structcards__media { aspect-ratio: 3 / 2; overflow: hidden; }
.site-structcards__media img, .site-structcards__media .site-ph, .site-structcards__media .site-slot { width: 100%; height: 100%; object-fit: cover; }
.site-structcards__media .site-ph { display: grid; place-items: center; gap: 6px; align-content: center; text-align: center; padding: 12px; min-height: 0; }
.site-structcards__name { margin: 0; padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px) 0; font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); border-top: 3px solid var(--yu-accent); }
.site-structcards__text { margin: 8px 0 0; padding: 0 clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px); font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink); }

/* 対応構造物一覧（分類ごとのカード） */
.site-catlist { display: grid; gap: clamp(16px, 2vw, 24px); }
.site-catlist__group { background: var(--yu-base); border: 1px solid var(--yu-line); padding: clamp(18px, 2.2vw, 28px); }
.site-catlist__head { margin: 0 0 14px; padding-left: 12px; border-left: 5px solid var(--yu-navy); font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-catlist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-catlist__items li { font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.6; padding: 8px 14px; background: var(--yu-tint); color: var(--yu-ink); }
@media (min-width: 900px) { .site-catlist { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.site-split__body .site-catlist { grid-template-columns: 1fr; }   /* 幅の狭い列内では1列（親幅で判定できないため） */

/* 対応エリア・受注形態（項目立て） */
.site-spec { margin: 0; display: grid; gap: 0; }
.site-spec dt { font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); padding-top: 16px; border-top: 1px solid var(--yu-line); }
.site-spec dd { margin: 6px 0 16px; font-family: var(--yu-font-gothic); line-height: 1.9; }
.site-spec dd:last-child { margin-bottom: 0; }
@media (min-width: 1100px) { .site-spec { grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); } .site-spec dt { grid-column: 1; } .site-spec dd { grid-column: 2; border-top: 1px solid var(--yu-line); padding-top: 16px; margin-top: 0; } }

/* 施工の幅（分類ごとの項目立て。表よりも読みやすい形） */
.site-scale { display: grid; gap: 0; }
.site-scale__group { display: grid; gap: 10px; padding: clamp(16px, 1.8vw, 22px) 0; border-top: 1px solid var(--yu-line); }
.site-scale__group:last-child { border-bottom: 1px solid var(--yu-line); }
.site-scale__head { margin: 0; padding-left: 12px; border-left: 5px solid var(--yu-accent); font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-scale__items { list-style: none; margin: 0; padding: 0 0 0 17px; display: flex; flex-wrap: wrap; gap: 8px; }
.site-scale__items li { font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.6; padding: 8px 14px; background: var(--yu-base); color: var(--yu-ink); }

/* 見出し・項目名は「・」の直後で折らず、行長を均さない（balance だと「・」ごとに折れる） */
.site-h1, .site-h2, .site-h3, .site-h4, .site-label, .site-quote { text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
/* 「・」つなぎの語が入る見出しは、狭い列では字送りを詰めて1行に収める */
.site-cta--split .site-h2, .site-split__head .site-h2 { letter-spacing: .02em; }
.site-spec dt, .site-spec dd, .site-dl dt, .site-catlist__head, .site-scale__head,
.site-structcards__name, .site-steps4__label, .site-timeline__when,
.site-gates__head, .site-chips li, .site-structs li, .site-cats strong { word-break: keep-all; overflow-wrap: anywhere; }

/* 狭い画面（〜360px）での収まり */
@media (max-width: 420px) {
  .site-logo { flex: 1 1 auto; min-width: 0; }
  .site-logo__img { height: auto; width: 100%; max-width: 190px; }
  .site-footer__logo { height: auto; width: 100%; max-width: 170px; }
  .site-header__in { gap: 8px; }
  /* 「・」つなぎの長い見出しは、収まらない場合だけ折り返しを許す */
  .site-h1, .site-h2, .site-h3, .site-h4 { overflow-wrap: anywhere; }
}

/* スマホは画面幅を使い切る（文節折り＝auto-phrase / 行長均しをやめる） */
@media (max-width: 767px) {
  body, p, li, dd, dt, .site-p, .site-note, .site-lead, .site-statement,
  .site-spec dd, .site-spec dt, .site-dl dd, .site-dl dt,
  .site-h1, .site-h2, .site-h3, .site-h4 { word-break: normal !important; text-wrap: auto; overflow-wrap: anywhere; }
  .site-table th, .site-table td { word-break: normal; text-wrap: auto; }
}

/* ============================================================
   施工の流れ（番号つき・順に現れる）
   ============================================================ */
.site-flowrow { display: grid; gap: clamp(24px, 3vw, 40px); align-items: stretch; }
@media (min-width: 900px) { .site-flowrow { grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 400px); } }
.site-flowphotos { display: grid; gap: clamp(14px, 1.8vw, 22px); }
@media (min-width: 900px) { .site-flowphotos { grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; } .site-flowphotos__item { grid-template-rows: minmax(0, 1fr) auto; min-height: 0; } .site-flowphotos__item .site-slot { aspect-ratio: auto; height: 100%; min-height: 0; } }
@media (max-width: 899px) { .site-flowphotos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .site-flowphotos { grid-template-columns: 1fr; } }
.site-flowphotos__item { margin: 0; display: grid; gap: 8px; }
.site-flowphotos__item .site-slot { width: 100%; aspect-ratio: 4 / 3; }
.site-flowphotos__item figcaption { font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); text-align: center; }
.site-flow { list-style: none; margin: 0; padding: 0; counter-reset: fl; display: grid; gap: clamp(18px, 2vw, 26px); }
.site-flow__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); align-items: center; background: var(--yu-base); border: 1px solid var(--yu-line); padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.6vw, 20px); }
.site-flow__no { font-family: var(--yu-font-en); font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; line-height: 1; color: var(--yu-accent-ink); min-width: 1.5em; }
.site-flow__body { min-width: 0; }
.site-flow__title { margin: 0 0 3px; font-family: var(--yu-font); font-size: clamp(17px, 1.4vw, 19px); font-weight: 700; color: var(--yu-navy); line-height: 1.5; }
.site-flow__text { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.75; color: var(--yu-ink); word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }
/* 画面に入ったら上から順に現れる（JS起動時のみ隠す） */
html.js-flow .site-flow[data-flow] .site-flow__item { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--yu-ease), transform .9s var(--yu-ease); }
html.js-flow .site-flow[data-flow].is-in .site-flow__item { opacity: 1; transform: none; }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(2) { transition-delay: 0.38s }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(3) { transition-delay: 0.76s }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(4) { transition-delay: 1.14s }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(5) { transition-delay: 1.52s }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(6) { transition-delay: 1.90s }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(7) { transition-delay: 2.28s }
html.js-flow .site-flow[data-flow].is-in .site-flow__item:nth-child(8) { transition-delay: 2.66s }
@media (prefers-reduced-motion: reduce) { html.js-flow .site-flow .site-flow__item { opacity: 1 !important; transform: none !important; } }

/* 施工実績カードの諸元（場所・工期・規模・ポイント） */
.site-workcard__spec { margin: 12px 0 0; display: grid; gap: 0; border-top: 1px solid var(--yu-line); }
.site-workcard__spec > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--yu-line); }
.site-workcard__spec dt { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); font-weight: 700; color: var(--yu-navy); }
.site-workcard__spec dd { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.7; color: var(--yu-ink); }

/* 強調文の下線（画面に入ると線が引かれる） */
.site-underline--bold { font-weight: 700; color: var(--yu-navy); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.7; }
.site-underline span { position: relative; display: inline; background-image: linear-gradient(color-mix(in oklch, var(--yu-accent) 42%, transparent), color-mix(in oklch, var(--yu-accent) 42%, transparent)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% .62em; padding-bottom: 2px; }
html.js-underline .site-underline[data-underline] span { background-size: 0 .62em; transition: background-size 1s var(--yu-ease); }
html.js-underline .site-underline[data-underline].is-in span { background-size: 100% .62em; }
@media (prefers-reduced-motion: reduce) { html.js-underline .site-underline span { background-size: 100% .62em !important; transition: none !important; } }

/* 見出しのアイコン（文章中心のセクションの目印） */
.site-h2--icon { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(10px, 1.2vw, 16px); align-items: center; }
.site-h2--icon::before { grid-column: 1 / -1; }   /* 英字ラベルは従来どおり上段に置く */
.site-h2--icon-center { justify-content: center; grid-template-columns: auto auto; justify-content: center; }
.site-icon { flex: none; display: grid; place-items: center; width: clamp(38px, 3.6vw, 48px); height: clamp(38px, 3.6vw, 48px); border-radius: 50%; background: var(--yu-tint); color: var(--yu-accent-ink); }
.site-icon svg { width: 55%; height: 55%; display: block; }
.site-icon--sm { width: clamp(30px, 2.6vw, 36px); height: clamp(30px, 2.6vw, 36px); }
.site-row--tint .site-icon { background: var(--yu-base); }
.site-split--panel .site-icon { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; }   /* 濃紺の面では白の線画 */

/* 福利厚生（3×3） */
.site-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 620px) { .site-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .site-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-benefits__item { background: var(--yu-base); border: 1px solid var(--yu-line); border-top: 3px solid var(--yu-accent); padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 22px); display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 10px; text-align: center; }
.site-row--tint .site-benefits__item { background: var(--yu-base); }
.site-benefits__title { margin: 0; font-family: var(--yu-font); font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; color: var(--yu-navy); line-height: 1.5; }
.site-benefits__text { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.8; color: var(--yu-ink); }

/* よくある質問 */
.site-faq { display: grid; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(20px, 2.4vw, 32px); }
.site-faq__item { background: var(--yu-base); border: 1px solid var(--yu-line); }
.site-row--tint .site-faq__item { background: var(--yu-base); }
.site-faq__q, .site-faq__a { position: relative; margin: 0; padding: clamp(18px, 2vw, 24px) clamp(46px, 4vw, 56px) clamp(18px, 2vw, 24px) calc(clamp(18px, 2vw, 26px) + 2.2em); }
.site-faq__q { cursor: pointer; list-style: none; }
.site-faq__q::-webkit-details-marker { display: none; }
.site-faq__a { padding-top: 0; padding-right: clamp(18px, 2vw, 26px); }
.site-faq__q:hover { background: var(--yu-tint); }
/* 開閉の目印（＋／−） */
.site-faq__q::after { content: ""; position: absolute; right: clamp(20px, 2vw, 26px); top: 50%; translate: 0 -50%; width: 16px; height: 16px; background: linear-gradient(var(--yu-accent-ink), var(--yu-accent-ink)) center/16px 2px no-repeat, linear-gradient(var(--yu-accent-ink), var(--yu-accent-ink)) center/2px 16px no-repeat; transition: rotate .3s var(--yu-ease); }
.site-faq__item[open] .site-faq__q::after { background: linear-gradient(var(--yu-accent-ink), var(--yu-accent-ink)) center/16px 2px no-repeat; }
.site-faq__q { font-family: var(--yu-font); font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; color: var(--yu-navy); line-height: 1.6; }
.site-faq__a { font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink); }
.site-faq__q::before, .site-faq__a::before { position: absolute; left: clamp(18px, 2vw, 26px); top: clamp(18px, 2vw, 24px); font-family: var(--yu-font-en); font-weight: 700; line-height: inherit; }
.site-faq__a::before { top: 0; }
.site-faq__q::before { content: "Q"; color: var(--yu-accent-ink); font-size: 1.1em; }
.site-faq__a::before { content: "A"; color: var(--yu-navy); font-size: 1.25em; }

/* 原稿の改行はPCのみ（スマホは画面幅で自然に折り返す） */
@media (max-width: 767px) {
  br.site-br-pc { display: none; }
  .site-issuecards p, .site-h2 .site-nobr { word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }
  .site-h2 .site-nobr { white-space: normal; }
}

/* 画面幅いっぱいで折り返す見出し（文字サイズは変えない） */
.site-h2--oneline { white-space: normal; word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }

/* スマホは見出しのアイコンを上段に置き、文は横幅いっぱいで折り返す */
@media (max-width: 767px) {
  .site-h2--icon { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .site-h2--icon .site-icon { grid-column: 1; }
  .site-h2--icon-center { justify-items: center; }
}

/* 施工実績カードの一言コメント */
.site-workcard__comment { margin: 8px 0 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.8; color: var(--yu-ink); word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }

/* 型枠解体工事：本文は左、リンクボタンはその右に並べる */
/* 紺パネルの中のリンクボタン（写真の下＝左側の空きに置く） */
.site-indent__btn { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 18px); margin: clamp(24px, 3vw, 36px) 0 0; }
@media (min-width: 1024px) {
  .site-stack--indent, .site-stack--indent-rev { position: relative; }
  /* リンクボタンは本文の下に置く */
  .site-indent__btn { position: static; margin-top: clamp(24px, 3vw, 36px); }
  /* 紺の面は必ず写真の下端より下まで伸ばす（写真と同じ高さで切れないように） */
  .site-stack--indent, .site-stack--indent-rev { min-height: calc(clamp(170px, 20vw, 320px) + 120px); }
  /* 型枠解体工事は本文を少し下げる */
  .site-stack--indent-cta > div { padding-top: clamp(16px, 2vw, 32px); }
}

/* PCでは紺面の本文を写真の横（空いている帯）に収め、パネルの高さを詰める */
@media (min-width: 1024px) {
  .site-row .site-stack--indent, .site-row .site-stack--indent-rev { padding-block: clamp(56px, 6vw, 96px) clamp(48px, 5vw, 80px); }
  /* 写真の右端＝版面右 − 写真の逃げ幅。その右側に本文を置く */
  .site-row .site-stack--indent { padding-left: calc(min(var(--yu-wrap), 100vw - 2 * var(--yu-gutter)) - clamp(120px, 28vw, 500px) + 40px); padding-right: var(--yu-gutter); }
  .site-row .site-stack--indent-rev { padding-left: var(--yu-gutter); padding-right: calc(min(var(--yu-wrap), 100vw - 2 * var(--yu-gutter)) - clamp(120px, 28vw, 500px) + 40px); }
  .site-stack--indent-cta__btn { position: static; margin-top: clamp(24px, 3vw, 36px); text-align: right; }
}

/* ============================================================
   28. 業務案内の背景デザイン（斜めの帯＋大きな輪郭数字）
   ============================================================ */
.site-row--numbered { position: relative; overflow: hidden; isolation: isolate; }
.site-row--numbered::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(200deg, rgba(215, 162, 60, .10), rgba(215, 162, 60, 0) 55%), var(--yu-tint);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 22% 100%);
}
.site-row--numbered.site-row--tint::before { background: linear-gradient(160deg, rgba(215, 162, 60, .10), rgba(215, 162, 60, 0) 55%), #fff; clip-path: polygon(0 0, 62% 0, 78% 100%, 0 100%); }
/* 斜めの境目に沿って細い黄色のライン（装飾のアクセント） */
.site-row--numbered::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--yu-accent), var(--yu-accent));
  background-repeat: no-repeat;
  clip-path: polygon(38% 0, 38.2% 0, 22.2% 100%, 22% 100%);
  opacity: .22;
}
.site-row--numbered.site-row--tint::after { clip-path: polygon(62% 0, 62.5% 0, 78.5% 100%, 78% 100%); }

/* ============================================================
   29. 対応エリア・受注形態（薄地パネルに番号付きの2列）
   ============================================================ */
.site-areagrid { list-style: none; margin: 0; padding: clamp(24px, 3vw, 40px); background: var(--yu-tint); display: grid; gap: clamp(20px, 2.6vw, 32px); }
@media (min-width: 760px) { .site-areagrid { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); } }
.site-areagrid__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.site-areagrid__no { font-family: var(--yu-font-en); font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.2; color: var(--yu-accent-deep); }
.site-areagrid__title { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--yu-accent); font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-areagrid__text { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-body); line-height: 1.9; }

/* 答えのパネル：左右に写真、中央に本文（薄地・黄の上罫） */
.site-answerpanel--flank { background: none; color: var(--yu-ink); border-radius: 0; overflow: visible; display: grid; gap: clamp(16px, 2vw, 26px); align-items: center; }
@media (min-width: 960px) { .site-answerpanel--flank { grid-template-columns: .8fr 1.4fr .8fr; } }
.site-answerpanel--flank .site-answerpanel__media { display: contents; }
.site-answerpanel--flank .site-answerpanel__media figure { position: relative; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
@media (min-width: 960px) { .site-answerpanel--flank .site-answerpanel__media figure { aspect-ratio: 3 / 4; } }
.site-answerpanel--flank .site-answerpanel__media figure:last-child { order: 1; }
.site-answerpanel--flank .site-answerpanel__media figcaption { position: absolute; left: 0; bottom: 0; background: var(--yu-navy); color: #fff; font-family: var(--yu-font); font-size: var(--yu-fs-cap); font-weight: 700; letter-spacing: .14em; padding: 8px 16px; }
.site-answerpanel--flank .site-answerpanel__text { background: var(--yu-tint); border-top: 4px solid var(--yu-accent); padding: clamp(24px, 3vw, 44px); display: grid; gap: 18px; }
.site-answerpanel--flank .site-answerpanel__text p:first-child { margin: 0; font-family: var(--yu-font); font-size: clamp(18px, 1.8vw, 25px); line-height: 2; color: var(--yu-navy); }
.site-answerpanel--flank .site-answerpanel__text p + p { margin: 0; padding-top: 18px; border-top: 1px solid var(--yu-line); font-family: var(--yu-font-gothic); font-size: var(--yu-fs-body); line-height: 2; color: var(--yu-ink); }

/* ============================================================
   30. 小規模な工事から、土木構造物まで（写真横並び＋小→大のバー）
   ============================================================ */
.site-scalesec { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.site-scalesec__top { display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 900px) { .site-scalesec__top { grid-template-columns: 1fr 1fr; align-items: center; } }
.site-scalesec__text { display: grid; gap: 8px; }
.site-scalesec__media { aspect-ratio: 4 / 3; overflow: hidden; }
.site-scalesec__media img, .site-scalesec__media .site-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-scalesec__bar { overflow: hidden; position: relative; margin: 0; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: linear-gradient(90deg, rgba(215, 162, 60, .22), var(--yu-accent)); font-family: var(--yu-font); font-size: var(--yu-fs-cap); font-weight: 700; color: var(--yu-navy); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.site-scalesec__cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; background: var(--yu-line); border: 1px solid var(--yu-line); }
@media (min-width: 820px) { .site-scalesec__cols { grid-template-columns: repeat(3, 1fr); } }
.site-scalesec__cols li { background: #fff; padding: clamp(18px, 2.2vw, 26px); display: grid; gap: 8px; align-content: start; }
.site-scalesec__cols h3 { margin: 0; font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-scalesec__cols p { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-body); line-height: 1.9; }

/* バーの上を光が左から右へ流れる */
.site-scalesec__bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 65%); transform: translateX(-100%); animation: yu-scalesweep 2.6s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes yu-scalesweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .site-scalesec__bar::after { animation: none; opacity: 0; } }

/* ============================================================
   31. 外注に頼らない分、費用を抑えられます（外注ありとの対比）
   ============================================================ */
.site-costsec { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.site-costsec__cmp { display: grid; gap: 2px; background: var(--yu-line); border: 1px solid var(--yu-line); }
@media (min-width: 820px) { .site-costsec__cmp { grid-template-columns: 1fr 1fr; } }
.site-costsec__col { background: #fff; padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 16px; align-content: start; }
.site-costsec__col h3 { margin: 0; font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-costsec__col { background: #F2F3F5; color: #4E5865; }   /* 外注側は沈ませる */
.site-costsec__col h3 { color: #5B6673; }
.site-costsec__cmp .site-costsec__col--yu { background: linear-gradient(180deg, #FFFDF6, #FFF6E2); box-shadow: inset 0 3px 0 var(--yu-accent); color: var(--yu-navy); }
.site-costsec__cmp .site-costsec__col--yu h3 { color: var(--yu-navy); }
.site-costsec__col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-costsec__col li { position: relative; padding: 12px 16px; background: var(--yu-tint); font-family: var(--yu-font-gothic); font-size: var(--yu-fs-body); }
.site-costsec__col li { background: #E7E9EC; color: #5B6673; }
.site-costsec__col--yu li { background: rgba(215, 162, 60, .16); color: var(--yu-navy); font-weight: 700; }
.site-costsec__col li + li::before { content: ""; position: absolute; left: 24px; top: -8px; width: 10px; height: 6px; background: #B9BFC7; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.site-costsec__col--yu li + li::before { background: var(--yu-accent); }
.site-costsec__tag { color: #4E5865; }
/* 流れの順次表示：左右とも同じ2.3秒で出し切るが、外注側は一手ずつ遅く進む */
@media (prefers-reduced-motion: no-preference) {
  .js-seq .site-costsec__flow li.is-in { animation: yu-costin 1.5s cubic-bezier(.4, .01, .3, 1) both; animation-delay: calc(var(--i) * 1.05s); }
  .js-seq .site-costsec__col--yu .site-costsec__flow li.is-in { animation: yu-costin .4s cubic-bezier(.2, .8, .26, 1) both; animation-delay: calc(2.75s + var(--i) * .7s); }
}
@keyframes yu-costin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.site-costsec__tag { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); color: var(--yu-ink-weak); }
.site-costsec__tag--on { color: #8A6417; font-weight: 700; }
.site-costsec__body { display: grid; gap: 8px; text-align: center; max-width: 56em; margin-inline: auto; }
@media (max-width: 767px) { .site-costsec__body { text-align: left; } }

/* 声かけセクションの写真は原寸比のまま全体を表示（人物を切らない） */
.site-voice__media img, .site-voice__ph, .site-voice__media .site-slot, .site-voice__media > .site-slot { height: auto; aspect-ratio: 1600 / 1132; }
@media (min-width: 900px) { .site-voice { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; } }

/* ============================================================
   32. 働く5つのポイント（番号付きの大きなリスト）
   ============================================================ */
.site-pointlist { list-style: none; margin: 0; padding: 0; display: grid; }
.site-pointlist__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: baseline; padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--yu-line); }
.site-pointlist__item:first-child { border-top: 1px solid var(--yu-line); }
.site-pointlist__no { font-family: var(--yu-font-en); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1; color: var(--yu-accent-deep); }
.site-pointlist__title { display: inline; background: linear-gradient(transparent 62%, rgba(215, 162, 60, .5) 62%); padding: 0 3px; margin: 0; font-family: var(--yu-font); font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; color: var(--yu-navy); line-height: 1.5; }
.site-pointlist__text { margin: 10px 0 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink-weak); }

/* 働く5つのポイント：写真は縦長・上下中央で右カラムを埋める */
@media (min-width: 900px) {
  .site-pointsrow { align-items: stretch; }
  .site-pointsrow .site-pointsmedia { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); }
  .site-pointsrow .site-pointsmedia .site-slot, .site-pointsrow .site-pointsmedia img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
}

/* ============================================================
   33. 年収モデル（横バーが伸びる・金額はカウントアップ）
   ============================================================ */
.site-salary { display: grid; gap: clamp(22px, 2.8vw, 38px); }
@media (min-width: 900px) { .site-salary { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); } }
.site-salary__group { background: #fff; padding: clamp(20px, 2.4vw, 30px); }
.site-salary__title { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--yu-navy); font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-salary__title--exp { border-bottom-color: var(--yu-accent); }
.site-salary__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.site-salary__item { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.site-salary__yr { font-family: var(--yu-font); font-weight: 700; color: var(--yu-navy); }
.site-salary__track { height: 14px; background: var(--yu-tint); }
.site-salary__fill { display: block; height: 100%; width: 0; background: var(--yu-navy); }
.site-salary__fill--exp { background: var(--yu-accent); }
.js-bars .site-salary__fill { width: 0; }
.js-bars .site-salary__group.is-in .site-salary__fill { animation: yu-salarygrow 1.4s cubic-bezier(.3, 0, .2, 1) forwards; }
.site-salary__fill { width: var(--w); }
@keyframes yu-salarygrow { to { width: var(--w); } }
.site-salary__val { font-family: var(--yu-font-en); font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; color: var(--yu-navy); white-space: nowrap; }
.site-salary__sub { grid-column: 2 / -1; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.8; color: var(--yu-ink-weak); }
@media (prefers-reduced-motion: reduce) { .site-salary__fill { animation: none; width: var(--w); } }

/* ============================================================
   34. こんな方と、一緒に働きたい（3つのカードに要約）
   ============================================================ */
.site-wanted { display: grid; gap: clamp(22px, 2.8vw, 38px); }
.site-wanted__top { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; }
@media (min-width: 900px) { .site-wanted__top { grid-template-columns: 1fr 1fr; } }
.site-wanted__lead { margin: 14px 0 0; font-family: var(--yu-font); font-size: clamp(19px, 2vw, 26px); line-height: 1.9; color: var(--yu-navy); }
.site-wanted__lead em { font-style: normal; background: linear-gradient(transparent 62%, rgba(215, 162, 60, .5) 62%); padding: 0 3px; }
.site-wanted__media { display: grid; grid-template-columns: minmax(0, 1fr); }
.site-wanted__media .site-slot, .site-wanted__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.site-wanted__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 820px) { .site-wanted__cards { grid-template-columns: repeat(3, 1fr); } }
.site-wanted__cards li { background: var(--yu-tint); border-top: 3px solid var(--yu-accent); padding: clamp(20px, 2.2vw, 28px); display: grid; gap: 10px; align-content: start; }
.site-wanted__cards h3 { margin: 0; font-family: var(--yu-font); font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; color: var(--yu-navy); line-height: 1.6; }
.site-wanted__cards p { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink-weak); }
.site-wanted__note { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink-weak); }

/* ============================================================
   35. 仕事紹介の導入（全幅写真に見出しを重ねる）
   ============================================================ */
.site-abouthero { position: relative; display: grid; margin-bottom: clamp(48px, 5vw, 80px); }
.site-abouthero__media { display: grid; grid-template-columns: minmax(0, 1fr); }
.site-abouthero__media .site-slot, .site-abouthero__media img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.site-abouthero__title { margin: 0; background: var(--yu-navy); color: #fff; padding: clamp(18px, 2.2vw, 30px) clamp(22px, 3vw, 44px); }
.site-abouthero__title::before { color: var(--yu-accent); }
@media (min-width: 820px) { .site-abouthero__title { position: absolute; left: 0; bottom: clamp(-24px, -1.6vw, -16px); max-width: min(72%, 720px); } }
.site-aboutbody { max-width: 64em; }
.site-aboutbody__key { margin: 18px 0 0; font-family: var(--yu-font); font-size: clamp(19px, 2vw, 26px); line-height: 1.9; color: var(--yu-navy); }
.site-aboutbody__key em { font-style: normal; background: linear-gradient(transparent 62%, rgba(215, 162, 60, .5) 62%); padding: 0 3px; }

/* ============================================================
   36. 未経験からの成長ステップ（番号付きの縦ステップ）
   ============================================================ */
.site-growsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.2vw, 30px); }
.site-growsteps__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: start; }
.site-growsteps__item:not(:last-child)::after { content: ""; position: absolute; left: 23px; bottom: calc(-1 * clamp(18px, 2.2vw, 30px)); width: 2px; height: clamp(18px, 2.2vw, 30px); background: var(--yu-line); }
.site-growsteps__no { display: grid; place-items: center; width: 48px; height: 48px; background: var(--yu-navy); color: #fff; font-family: var(--yu-font-en); font-size: 17px; font-weight: 700; }
.site-growsteps__card { background: var(--yu-tint); padding: clamp(18px, 2.2vw, 28px); display: grid; gap: 10px; }
.site-growsteps__when { justify-self: start; background: var(--yu-accent); color: var(--yu-navy); font-family: var(--yu-font); font-size: var(--yu-fs-cap); font-weight: 700; padding: 5px 14px; }
.site-growsteps__title { margin: 0; font-family: var(--yu-font); font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; color: var(--yu-navy); line-height: 1.5; }
.site-growsteps__card .site-p { margin: 0; }
@media (max-width: 599px) { .site-growsteps__no { width: 40px; height: 40px; font-size: 15px; } .site-growsteps__item:not(:last-child)::after { left: 19px; } }

/* 成長ステップ：画面に入ったら上から順に現れ、つなぎ線が下へ伸びる */
html.js-flow .site-growsteps[data-flow] .site-growsteps__item { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--yu-ease), transform .8s var(--yu-ease); }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item { opacity: 1; transform: none; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(2) { transition-delay: .32s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(3) { transition-delay: .64s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(4) { transition-delay: .96s; }
html.js-flow .site-growsteps[data-flow] .site-growsteps__item::after { transform-origin: top; transform: scaleY(0); transition: transform .4s var(--yu-ease); }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item::after { transform: scaleY(1); }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(1)::after { transition-delay: .24s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(2)::after { transition-delay: .56s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(3)::after { transition-delay: .88s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__no { animation: yu-stepno .5s var(--yu-ease) both; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(2) .site-growsteps__no { animation-delay: .32s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(3) .site-growsteps__no { animation-delay: .64s; }
html.js-flow .site-growsteps[data-flow].is-in .site-growsteps__item:nth-child(4) .site-growsteps__no { animation-delay: .96s; }
@keyframes yu-stepno { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.js-flow .site-growsteps .site-growsteps__item { opacity: 1 !important; transform: none !important; } html.js-flow .site-growsteps .site-growsteps__item::after { transform: none !important; } html.js-flow .site-growsteps .site-growsteps__no { animation: none !important; } }

/* ============================================================
   37. 一日の流れ（カード列・休憩は黄色で右にずらす）
   ============================================================ */
.site-daylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-daylist__item { background: var(--yu-base); border-left: 5px solid var(--yu-navy); padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px); display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.site-daylist__item--rest { background: rgba(215, 162, 60, .14); border-left-color: var(--yu-accent); margin-left: clamp(24px, 5vw, 80px); }
.site-daylist__time { grid-row: span 2; font-family: var(--yu-font-en); font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; color: var(--yu-navy); }
.site-daylist__title { font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-daylist__text { margin: 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink-weak); }
@media (max-width: 599px) { .site-daylist__item { grid-template-columns: minmax(0, 1fr); } .site-daylist__time { grid-row: auto; } .site-daylist__item--rest { margin-left: clamp(16px, 6vw, 40px); } }

/* ============================================================
   38. 社員アンケート（働きやすさ／きびしさを左右に）
   ============================================================ */
.site-voicepair { display: grid; gap: 2px; background: var(--yu-line); border: 1px solid var(--yu-line); }
@media (min-width: 860px) { .site-voicepair { grid-template-columns: 1fr 1fr; } }
.site-voicepair__col { background: var(--yu-base); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 16px; align-content: start; }
.site-voicepair__col--strict { background: var(--yu-tint); }
.site-voicepair__head { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--yu-navy); font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-voicepair__col--strict .site-voicepair__head { border-bottom-color: var(--yu-accent); }
.site-voicepair__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site-voicepair__list li { position: relative; padding-left: 22px; font-family: var(--yu-font); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.9; color: var(--yu-navy); }
.site-voicepair__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: var(--yu-navy); }
.site-voicepair__col--strict .site-voicepair__list li::before { background: var(--yu-accent); }
.site-voicepair__note { margin: 6px 0 0; font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-ink-weak); }

/* ============================================================
   39. 入口カード（写真に紺を重ねた大判3枚）
   ============================================================ */
.site-gates--photo { display: grid; gap: 2px; }
@media (min-width: 820px) { .site-gates--photo { grid-template-columns: repeat(3, 1fr); } }
.site-gates--photo .site-gates__item { position: relative; display: grid; min-height: clamp(260px, 26vw, 340px); padding: 0; border: 0; background: var(--yu-navy); color: #fff; text-decoration: none; overflow: hidden; }
.site-gates--photo .site-gates__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .6s var(--yu-ease); }
.site-gates--photo .site-gates__item:hover img { transform: scale(1.06); }
.site-gates--photo .site-gates__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 31, 51, 0) 0%, rgba(15, 31, 51, .1) 45%, rgba(15, 31, 51, .72) 100%); }
.site-gates__body { position: relative; z-index: 1; align-self: end; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 8px; }
.site-gates__en { font-family: var(--yu-font-en); font-size: var(--yu-fs-label); letter-spacing: .2em; color: var(--yu-accent); }
.site-gates--photo .site-gates__head { font-family: var(--yu-font); font-size: clamp(21px, 2.1vw, 28px); font-weight: 700; color: #fff; }
.site-gates__text { font-family: var(--yu-font-gothic); font-size: var(--yu-fs-cap); line-height: 1.9; color: var(--yu-onnavy-weak); }
@media (max-width: 767px) { .site-gates--photo .site-gates__item { min-height: 220px; } }

/* 成長ステップ：写真を添えるカード（01・04） */
.site-growsteps__item:has(.site-growsteps__media) { grid-template-columns: auto minmax(0, 1fr); }
@media (min-width: 900px) { .site-growsteps__item:has(.site-growsteps__media) { grid-template-columns: auto minmax(0, 1.35fr) minmax(0, .65fr); align-items: stretch; } }
.site-growsteps__media { display: grid; grid-template-columns: minmax(0, 1fr); }
.site-growsteps__media .site-slot, .site-growsteps__media img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
@media (max-width: 899px) { .site-growsteps__media { grid-column: 2; } .site-growsteps__media .site-slot, .site-growsteps__media img { aspect-ratio: 16 / 9; height: auto; min-height: 0; } }
@media (max-width: 599px) { .site-growsteps__media { grid-column: 1 / -1; } }

/* ============================================================
   40. 8名のチームです（写真に紺パネルを重ねる・人物は左に寄せる）
   ============================================================ */
.site-teamhero { position: relative; display: grid; gap: clamp(20px, 2.6vw, 34px); }
.site-teamhero__media { display: grid; grid-template-columns: minmax(0, 1fr); }
.site-teamhero__media .site-slot, .site-teamhero__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% center; display: block; }
.site-teamhero__panel { background: var(--yu-navy); color: #fff; padding: clamp(22px, 2.6vw, 38px); display: grid; gap: 10px; }
.site-teamhero__panel .site-p { color: var(--yu-onnavy-weak); margin: 0; }
.site-teamhero__panel .site-h2 { margin: 0 0 10px; }
.site-teamhero__dots { list-style: none; margin: 0 0 6px; padding: 0; display: flex; gap: 8px; }
.site-teamhero__dots li { width: 100%; height: 5px; background: var(--yu-accent); }
@media (min-width: 960px) {
  .site-teamhero__media .site-slot, .site-teamhero__media img { aspect-ratio: 21 / 9; object-position: 22% center; }
  .site-teamhero__panel { position: absolute; right: 0; top: clamp(24px, 3vw, 56px); width: min(52%, 560px); }
}

/* ============================================================
   41. 代表あいさつ（薄地パネル＋左に縦写真・抜き書き）
   ============================================================ */
.site-message { background: var(--yu-tint); border-top: 4px solid var(--yu-accent); padding: clamp(26px, 3.4vw, 60px); display: grid; gap: clamp(22px, 3vw, 52px); }
@media (min-width: 900px) { .site-message { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .site-message__side { position: sticky; top: calc(var(--yu-header-h) + 24px); } }
.site-message__media { display: grid; grid-template-columns: minmax(0, 1fr); }
.site-message__media .site-slot, .site-message__media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.site-message__sign { margin: 14px 0 0; font-family: var(--yu-font); font-size: var(--yu-fs-lead); font-weight: 700; color: var(--yu-navy); }
.site-message__body { display: grid; gap: 14px; }
.site-message__body .site-h2 { margin: 0 0 6px; }
.site-message__body .site-p { margin: 0; }
.site-message__pull { margin: 6px 0 10px; padding-left: 20px; border-left: 4px solid var(--yu-accent); font-family: var(--yu-font); font-size: clamp(21px, 2.3vw, 32px); line-height: 1.8; color: var(--yu-navy); }
@media (max-width: 767px) { .site-message__pull br { display: none; } }

/* 働く5つのポイント：一行ずつ下からフェードアップ＋マーカーが引かれる（スクロールのたびに再生） */

/* ============================================================
   43. 白・薄グレー背景セクションの背景装飾（浅い角度の帯／トップページは除く）
   ============================================================ */
.yu-main:not(.yu-top) > .site-row:not(.site-row--navy):not(.site-row--ctaphoto):not(.site-row--numbered):not(.site-pagehead) { position: relative; isolation: isolate; }   /* overflow は付けない（sticky が効かなくなる） */
.yu-main:not(.yu-top) > .site-row:not(.site-row--navy):not(.site-row--ctaphoto):not(.site-row--numbered):not(.site-pagehead)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(215, 162, 60, .09), rgba(215, 162, 60, 0) 70%), var(--yu-tint);
  clip-path: polygon(0 42%, 100% 12%, 100% 100%, 0 100%);
}
.yu-main:not(.yu-top) > .site-row:not(.site-row--navy):not(.site-row--ctaphoto):not(.site-row--numbered):not(.site-pagehead)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--yu-accent);
  clip-path: polygon(0 42%, 100% 12%, 100% 12.5%, 0 42.5%); opacity: .3;
}
/* 薄グレーRowは白い帯で反転（帯の向きも逆にして連続時に単調にならない） */
.yu-main:not(.yu-top) > .site-row--tint:not(.site-row--navy):not(.site-row--ctaphoto):not(.site-row--numbered):not(.site-pagehead)::before { background: linear-gradient(180deg, rgba(215, 162, 60, .09), rgba(215, 162, 60, 0) 70%), #fff; clip-path: polygon(0 12%, 100% 42%, 100% 100%, 0 100%); }
.yu-main:not(.yu-top) > .site-row--tint:not(.site-row--navy):not(.site-row--ctaphoto):not(.site-row--numbered):not(.site-pagehead)::after { clip-path: polygon(0 12%, 100% 42%, 100% 42.5%, 0 12.5%); }

/* ============================================================
   44. よくある質問の動き
   ★開始値で情報が消える作りにしない（トランジションが進まない環境でも
     回答・目印・枠色がそのまま成立するよう、最終値を即時適用する）
   ============================================================ */
.site-faq .site-faq__item:hover { border-color: var(--yu-accent); }
.site-faq .site-faq__item[open] { border-color: var(--yu-accent); box-shadow: 0 10px 28px rgba(15, 31, 51, .07); }
.site-faq__item { position: relative; }
/* 左端の黄色ライン：常に100%の高さで置き、開いたときだけ色を出す */
.site-faq__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.site-faq__item[open]::before { background: var(--yu-accent); }
.site-faq__item[open] .site-faq__q { background: var(--yu-tint); }

/* 働く5つのポイント：画面に入った行が下から順に立ち上がり、目印が左から伸びる
   ★キーフレーム方式（静的CSSでは隠さないので、JSが動かない環境でも全文が読める） */
@media (prefers-reduced-motion: no-preference) {
  .js-seq .site-pointlist__item.is-in { animation: yu-pointin .62s var(--yu-ease) both; animation-delay: calc(var(--i) * .1s); }
  .js-seq .site-pointlist__item.is-in .site-pointlist__title { animation: yu-pointmark .7s var(--yu-ease) both; animation-delay: calc(var(--i) * .1s + .18s); background-repeat: no-repeat; }
  .js-seq .site-pointlist__item.is-in .site-pointlist__no { animation: yu-pointno .6s var(--yu-ease) both; animation-delay: calc(var(--i) * .1s + .06s); }
}
@keyframes yu-pointin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes yu-pointmark { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@keyframes yu-pointno { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   45. トップページの背景装飾（ページ全体を横切る大きな斜めの帯）
   ★白・薄グレーのセクションの後ろに一本通す。写真・濃紺の面には乗せない。
   ============================================================ */
.yu-main.yu-top { position: relative; isolation: isolate; }
.yu-main.yu-top::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(193deg, transparent 0 34%, rgba(215, 162, 60, .065) 34% 69%, transparent 69%);
}
/* 帯の境目に極細の線を添えて、折り目のように見せる */
.yu-main.yu-top::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(193deg, transparent 0 33.9%, rgba(215, 162, 60, .22) 33.9% 34.1%, transparent 34.1% 68.9%, rgba(215, 162, 60, .22) 68.9% 69.1%, transparent 69.1%);
}
/* 白地のRowは背景を敷かず帯を透かす／薄グレー・濃紺・写真のRowはそのまま前面に */
.yu-main.yu-top > .site-row:not(.site-row--tint):not(.site-row--navy):not(.site-row--ctaphoto) { background: transparent; }
.yu-main.yu-top > .site-row--tint { background: color-mix(in srgb, var(--yu-tint) 88%, transparent); }

/* 縦書き見出しは列が縦に伸びるので、パネルの高さを行に追従させる
   （max-content だけではグリッド行に収まらず最終列がはみ出すことがある） */
.site-headtext .site-h2--vertical, .site-headtext--plain .site-h2--vertical { align-self: stretch; height: auto; min-height: max-content; }
@media (max-width: 1023px) { .site-headtext .site-h2--vertical, .site-headtext--plain .site-h2--vertical { align-self: stretch; } }

/* よくある質問の回答・質問は枠幅いっぱいで折り返す */
.site-faq__q, .site-faq__a { word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }

/* 本文は枠幅いっぱいで折り返す（文節折りで行が短くならないように） */
.site-p, .site-lead, .site-note, .site-statement p, .site-areagrid__text { word-break: normal; text-wrap: auto; overflow-wrap: anywhere; }

/* ============================================================
   受領HTMLのインラインstyleをクラスへ移したもの（R-7）。インラインと同じ強さにするため !important
   ============================================================ */
.yu-i1.yu-i1{margin-bottom: clamp(20px, 2.4vw, 32px) !important;}
.yu-i2.yu-i2{text-align: center !important;}
.yu-i3.yu-i3{margin-top:var(--yu-sec-gap) !important;}
.yu-i4.yu-i4{--i: 0;}
.yu-i5.yu-i5{--i: 1;}
.yu-i6.yu-i6{--i: 2;}
.yu-i7.yu-i7{--i: 3;}
.yu-i8.yu-i8{text-align: center !important;margin-bottom: clamp(24px, 3vw, 40px) !important;}
.yu-i9.yu-i9{--i: 4;}
.yu-i10.yu-i10{--w: 56%;}
.yu-i11.yu-i11{--w: 66%;}
.yu-i12.yu-i12{--w: 80%;}
.yu-i13.yu-i13{--w: 74%;}
.yu-i14.yu-i14{--w: 86%;}
.yu-i15.yu-i15{--w: 100%;}
.yu-i16.yu-i16{margin-top: clamp(16px, 2vw, 26px) !important;}
.yu-i17.yu-i17{margin-bottom: clamp(24px, 3vw, 40px) !important;}
.yu-i18.yu-i18{background: var(--yu-base) !important;}
.yu-i19.yu-i19{color: var(--yu-ink) !important;text-align: center !important;}
.yu-i20.yu-i20{color: var(--yu-ink) !important;}
.yu-i21.yu-i21{margin-top: clamp(28px, 3.4vw, 48px) !important;}
.yu-i22.yu-i22{color: var(--yu-ink) !important;text-align: center !important;margin-bottom: clamp(20px, 2.4vw, 32px) !important;}


/* ===== 16_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: #ffffff00 !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:0!important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; margin-left: 10px!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; }


/* ===== 17_override.css ===== */
/* ============================================================
   override.css — O01676 ユウ建設株式会社（skin の後に結合・R-30）
   ============================================================ */

/* ── 1. 写真（受領の ＜image-slot＞ を ＜img class="site-slot"> にした分）──
   既定値は受領 image-slot.js の :host{display:block;width:100%;height:100%;aspect-ratio:3/2} と同一＋中の写真は cover・中央。
   aspect-ratio を落とすと、高さ不定の親で写真の自然比まで伸びる（教訓 image-slot-to-img-loses-aspect-ratio-default）。
   個別の高さ・比率・位置は site.css の各ブロック側（受領のまま・.site-slot で 0,2,0 以上）が上書きする。
   ★object-position はここで指定しない（受領の img 向け指定を順序で潰さないため。既定の 50% 50% のまま）。 */
img.site-slot { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
img.site-slot.site-slot--contain { object-fit: contain; }
img.site-slot.site-slot--pos-bottom { object-position: 50% 100%; }   /* 受領 .image-slots.state.json の slot-kaitai（写真の下側を見せる） */

/* ── 2. 追従ヘッダー ──
   受領は position:sticky。CueZillaはヘッダーを高さぴったりのラッパーで包み、テーマが html,body{height:100%} を当てるため
   sticky は1ミリも追従しない（教訓 sticky-header-needs-containing-block-room / cuezilla-theme-html-body-height-100-kills-sticky）。
   ラッパーの構造に依存しない fixed ＋ 本文の押し下げで同じ見え方にする。高さは BODY内JS が実測して --yu-header-h へ入れる。 */
.site-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; }
body { padding-top: var(--yu-header-h); }
html, body { height: auto !important; }
body { overflow-x: clip !important; }

/* ── 3. パンくず ── ページ本文に BreadcrumbList 付きで内包しているため、CueZillaの自動パンくずは非表示（R-10a） */
.parts231_breadcrumb { display: none !important; }

/* ── 4. CMSパーツの前後で切った帯 ── 受領では1つの帯だった所を分けたので、パーツ側と二重に余白が付かないようにする */
.yu-row--afterpart { padding-top: 0 !important; }
.yu-row--beforepart { padding-bottom: clamp(24px, 3vw, 40px) !important; }
/* トップ NEWS 帯：仮記事（1行）を抜いたので「一覧」ボタンが左へ寄る。受領どおり右端に留める */
.site-news--oneline .site-news__more { margin-left: auto; }

/* ── 5. 会社概要の地図（受領の設置枠 .site-map-ph の min-height 260px を下限に、Googleマップを枠いっぱいに） */
.yu-map { height: clamp(260px, 34vw, 420px); border-radius: var(--yu-radius); overflow: hidden; }
.yu-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.site-btn--outline:hover,.site-btn--onnavy:hover{
        color: var(--yu-navy)!important;
    background: rgb(255, 255, 255)!important;
}
.parts213_section_form dl,.parts219_section_form dl{
        display: block!important;
}
.parts213_section_form dt,.parts219_section_form dt{
        justify-content: flex-start!important;
}
.parts213_section_form dd,.parts219_section_form dd{
        margin-left: 0px!important;
}
 .required{
        background: var(--yu-accent-ink) !important;
    color: var(--yu-navy) !important;
    font-weight: bold!important;
}
.parts131415_blog_4bPqEYM52C.bg-color{
        background-color: #ffffff00!important;
}
.parts213_section_form .contact_submit input,.parts219_section_form .contact_submit input{
    background: var(--yu-accent-ink) !important;
    color: var(--yu-navy) !important;
    font-weight: bold;
    border-radius: 0 !important;
}
.parts222_sidebar h3{
        margin: 0 0 14px!important;
    font-family: var(--yu-font)!important;
    font-size: var(--yu-fs-h3)!important;
    font-weight: 500!important;
    letter-spacing: .1em!important;
    color: var(--yu-navy) !important;
    border-bottom: 1px solid var(--yu-line) !important;
    padding-bottom: 10px!important;
}

/* button → a に変えた分：中央寄せ・下線なし（色・枠・余白は既存の .site-filter__btn がそのまま効く） */
a.site-filter__btn {
  display: flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none;
}
a.site-filter__btn:focus-visible { outline: 3px solid var(--yu-accent-ink); outline-offset: 2px; }
/* 選択中（is-on と同じ見た目を aria-current でも出す＝カテゴリ別ページで付け替えやすくする） */
a.site-filter__btn[aria-current="page"] { background: var(--yu-navy); border-color: var(--yu-navy); color: #fff; }
/* ── 6. ページ送り（施工実績・ブログ）：skin の枠線と height:40px を外す（2026-09-29 指示） */
.pagination_num, .pagination_prev, .pagination_next { border: none !important; height: auto !important; }