/* ===== 20_site.css ===== */
/* ===== 受領 style.css（無改変） ===== */
@charset "utf-8";
/* ============================================================
   S01806 匠商会株式会社 — トップ草案 style.css
   草案段階のCSSは :root 変数で集中管理する（design_rules.md「HTML版草案生成時の追加ルール」KEEPブロック）。
   ★納品段階（30_コード生成/AI生成指示書_CueZilla.md）で具体値へベイクする。ここでは変数のままでよい。
   クラス接頭辞は site- / sh- / sf-（R-20: Bootstrap汎用名を自作要素へ流用しない）。
   ============================================================ */

:root{
  /* --- 配色（正本＝管理シートのデザイン指定。1_ディレクション/8_一次生成インプット.md「配色の食い違いの決着」）--- */
  --c-main:      #00A497;   /* メイン・淡い緑（シート指定）★面と装飾だけに使う。文字色には使えない（下記） */
  --c-main-tx:   #00786D;   /* ★文字・線・ボタン用のメイン色。
                               理由: シート指定の #00A497 は白地で 3.11:1・淡面(#E6F6F4)で 2.79:1 しかなく、
                               ⑤ライター向け引き継ぎメモ §9「コントラスト WCAG 2.1 AA（通常テキスト4.5:1以上）」を満たせない
                               （verify/contrast-pixels.mjs で実測・126件のAA割れ）。同系で暗くした値を文字用に分ける。
                               #00786D は白地 5.37:1 ／ 淡面 4.83:1 ／ 白文字を載せて 5.37:1 でいずれもAA可。
                               ★参考①も同じ作りで、ブランドの明るい寒色は「点の差し色」、文字と面は明度を落とした側で作っている。 */
  --c-sub:       #35C7F8;   /* サブ・水色（シート指定）＝★差し色。面積ではなく出現回数で効かせる（濃色面の上でのみ文字に使う） */
  --c-deep:      #05302B;   /* 濃色面。参考①の「ほぼ黒に近い寒色まで落とす」を #00A497 系へ翻訳 */
  --c-deeper:    #02201C;   /* 最暗面（フッター・スクリム） */
  --c-pale:      #E6F6F4;   /* ごく淡い面 */
  --c-ink:       #12211F;   /* 本文 */
  --c-mut:       #4C605C;   /* 補助文字 */
  --c-white:     #FFFFFF;
  --c-line:      #D4E6E3;

  /* --- 版面（参考①は 1100px / 1480px の2種を交互に使う）--- */
  /* ★文章帯は 960px（参考①の1100pxから狭めた）。1100pxだとガター48px×2を引いた1004pxに
     16pxの和文が62字入り、1行55字の上限を超える（measure-pages 5-4・実測 privacypolicy 62字）。
     ★本文だけを max-width でキャップするのではなく**帯そのものを狭める**＝見出しと本文の右端が
     揃ったままになる（教訓 read-width-must-be-derived-from-the-band-not-capped）。
     960−96=864px ≒ 54字で上限内。写真・カード帯は --wrap-wide のまま＝参考①の「版面2種を交互」を保つ。 */
  --wrap-text:   960px;     /* 文章を読ませる帯 */
  --wrap-wide:   1480px;    /* 写真・カード・見出しを見せる帯 */
  --gut:         clamp(20px, 4vw, 48px);

  /* --- タイポ（契約.md 確定値 / 量契約 に対応）--- */
  --f-body:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --f-en:        "Barlow Condensed", "Archivo Black", "Arial Narrow", Impact, sans-serif;
  --t-body:      16px;      /* 確定値 body:16（⑤§9「本文16px以上」）*/
  --t-lh:        1.9;
  /* 見出しの多段組み＝参考①の署名1。核だけを本文の約10倍へ上げる（確定値 jump-top:11.9）*/
  --t-h1-peak:   clamp(40px, 13.2vw, 190px);  /* 6字段「重機を操り、」 6×190=1140 ≦ 版面 */
  --t-h1-core:   clamp(27px, 9.0vw, 130px);   /* 9字段「次の土台をつくる。」 9×130=1170 ≦ 版面 */
  --t-en-giant:  clamp(38px, 10.4vw, 150px);  /* 「BUILT ON SKILL」欧文は字幅が狭いので大きく置ける */
  --t-ghost:     clamp(64px, 15vw, 216px);    /* 背面ゴースト＝参考①の署名2（本文比13.5倍級） */
  --t-h2-lead:   clamp(17px, 2.0vw, 26px);    /* セクション見出しの修飾句段 */
  /* セクション見出しの核段。★2026-09-03 採用案2b（塗り＋帯）に伴い 76px→50px へ縮小。
     76px は中抜き前提の値で、塗り＋帯にすると同じサイズでも面積が増え、本文・修飾句段との差が強すぎる。
     本文比 3.1倍（=50/16）。最長の核「気持ちよく続けるために」11字も文章帯（864px）に1行で収まる（11×50=550px）。 */
  --t-h2-core:   clamp(26px, 4.4vw, 50px);
  --t-h3:        clamp(18px, 1.6vw, 22px);
  --t-label:     13px;
  /* 字間: 参考①は**サイズごとに詰め量を変える**（150px段 -1.5px=-0.01em ／ 201.6px段 -4px=-0.02em ／ 216pxゴースト -6.9px=-0.03em）。
     大きいほど強く詰める＝この作法をそのまま写す（1つの値で済ませない）。量契約 heading-letter-spacing は参考の 150px段 に対応する -0.01 */
  --ls-giant-xl: -0.02em;   /* 190〜200px級 */
  --ls-giant-l:  -0.01em;   /* 130〜150px級 */
  --ls-giant-m:  -0.02em;   /* 96px級（参考① 128px の h2-big は -2.6px=-0.02em） */

  /* --- 余白（機構契約 spacing-steps:3以上／確定値 density:1.2）--- */
  --sp-s:        clamp(40px,  6vw,  72px);
  --sp-m:        clamp(64px, 10vw, 128px);
  --sp-l:        clamp(88px, 13vw, 176px);   /* 参考①の上下160px級＝1セクション1幕 */

  /* --- 形（確定値 roundness:0＝シャープ。参考①実測 radius 0 が150ノード中141）--- */
  --r-0:         0px;
  --r-pill:      999px;

  --z-ghost:     0;
  --z-body:      2;
  --z-head:      50;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:var(--t-lh);
  color:var(--c-ink);
  background:var(--c-white);
  /* ★body への overflow-x:hidden|clip は横スクロールを止めない
     （教訓 70_運用ルール/教訓メモリ/body-overflow-clip-does-not-propagate.md・rule-effect L001）。
     はみ出す当事者（背面ゴースト・英字マーキー・片側ブリード）を持つ**セクション側**で clip する（下記 .site-sec / .subpage-header）。 */
  /* アンカー着地が固定ヘッダーの裏に潜らないように（WCAG 2.2 / 2.4.11・R-18・a11y-audit の anchor-under-header） */
  scroll-padding-top:88px;
  /* 和文の禁則。既定(auto)だと「っ」「ー」等の小書き仮名・長音が行頭に来る
     （verify/responsive-audit.mjs の kinsoku・実測414px「っ」／600px「っ」／1600px「ー」）。 */
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
  /* 行末に1〜2文字だけ残るのを抑える（Chromium 117+）。非対応環境では無視されるだけで害はない。 */
  text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-main-tx);}
:focus-visible{outline:3px solid var(--c-sub);outline-offset:2px;}

/* ============================================================
   ★共通トランジション（1箇所に敷く）
   個別セレクタに足していくと必ず漏れる（実測: .site-mmenu a:hover が漏れて rule-effect L008 がNG）。
   教訓 70_運用ルール/デザイン教訓/global-hover-transition-base.md のとおり、状態が変わる要素へ
   共通の1本を敷き、入場演出（[data-reveal]）とは別レイヤーにする。
   ★出現演出の transition は .site-js [data-reveal] 側が上書きするので競合しない。
   ============================================================ */
a, button, .site-btn, .site-card, .site-step, .site-linkcard, .site-ph,
.sh__logo, .sh__nav a, .sh__tel, .sh__cta, .site-burger, .site-burger span,
.site-mmenu a, .site-mmenu__tel, .sf__nav a, .sf__nap a, .p-breadcrumb__item a, .site-skip{
  transition:color .3s ease, background-color .3s ease, border-color .3s ease,
             box-shadow .3s ease, opacity .3s ease, transform .3s ease, filter .3s ease;
}
@media (prefers-reduced-motion: reduce){
  a, button, .site-btn, .site-card, .site-step, .site-linkcard, .site-ph,
  .sh__logo, .sh__nav a, .sh__tel, .sh__cta, .site-burger, .site-burger span,
  .site-mmenu a, .site-mmenu__tel, .sf__nav a, .sf__nap a, .p-breadcrumb__item a, .site-skip{
    transition:none;
  }
}

/* ============================================================
   ★no-JS 安全網（design-top-draft 手順4-c の必須ブロック）
   演出は「JSが動いたときだけ隠す」方式にしてある（html.site-js が付いて初めて opacity:0）。
   これによりJSが動かない環境では最初から見えている＝白幕・透明本文にならない。
   @media(scripting:none) は二重の保険。
   ============================================================ */
@media (scripting: none){
  [data-reveal]{opacity:1 !important;transform:none !important;}
  [data-opening],.site-open,.splash,.opening{display:none !important;}
}

/* ------------------------------------------------------------ 版面 */
.site-wrap{width:100%;max-width:var(--wrap-text);margin-inline:auto;padding-inline:var(--gut);}
.site-wrap--wide{max-width:var(--wrap-wide);}

/* ------------------------------------------------------------ ヘッダー（sh-） */
.sh{position:sticky;top:0;z-index:var(--z-head);background:rgba(255,255,255,.96);border-bottom:1px solid var(--c-line);}
.sh__inner{display:flex;align-items:center;gap:16px;max-width:var(--wrap-wide);margin-inline:auto;padding:10px var(--gut);}
.sh__logo{font-weight:900;font-size:19px;letter-spacing:.02em;color:var(--c-deep);text-decoration:none;white-space:nowrap;}
.sh__nav{display:none;margin-left:auto;flex-wrap:wrap;}
.sh__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:16px;line-height:1.4;color:var(--c-ink);text-decoration:none;transition:color .2s;}
.sh__nav a:hover{color:var(--c-main-tx);}
.sh__tel{display:none;align-items:center;min-height:44px;padding:0 10px;font-weight:700;color:var(--c-deep);text-decoration:none;white-space:nowrap;}
.sh__cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:auto;padding:0 18px;background:var(--c-main-tx);color:var(--c-white);font-weight:700;text-decoration:none;border-radius:var(--r-0);white-space:nowrap;transition:background-color .2s;}
.sh__cta:hover{background:var(--c-deep);}
/* ★2026-09-03 子ページのプルダウン（採用案3b メガメニュー）
   ・パネルは .sh（position:sticky＝配置文脈）に対して absolute。親項目側を position:relative にしない
     ことで left:0/right:0 がヘッダー全幅に伸びる（.sh__inner / .sh__nav も非配置のまま保つ）。
   ・開くのは hover / focus-within / .is-open（JSの▼ボタン）の3経路＝マウス・キーボード・タッチを全て満たす。
   ・1024px未満はPCナビ自体が display:none なので、パネルも出さない（スマホはモバイルメニュー側の担当）。 */
.site-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.sh__has-sub{display:flex;align-items:center;}
.sh__subtoggle{display:inline-flex;align-items:center;justify-content:center;
  width:32px;min-height:44px;padding:0;background:transparent;border:0;cursor:pointer;color:var(--c-ink);}
.sh__subtoggle::after{content:"";width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;
  transition:transform .2s;}
.sh__has-sub:hover .sh__subtoggle,
.sh__has-sub:focus-within .sh__subtoggle,
.sh__has-sub.is-open .sh__subtoggle{color:var(--c-main-tx);}
.sh__has-sub.is-open .sh__subtoggle::after{transform:rotate(180deg);}
.sh__has-sub:hover > a,
.sh__has-sub.is-open > a{color:var(--c-main-tx);}
.sh__sub{display:none;}
@media (min-width:1024px){
  .sh__sub{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--c-deep);color:var(--c-white);box-shadow:0 14px 30px rgba(5,48,43,.2);
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity .18s,transform .18s,visibility .18s;}
  .sh__has-sub:hover .sh__sub,
  .sh__has-sub:focus-within .sh__sub,
  .sh__has-sub.is-open .sh__sub{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  /* ★ホバーの橋渡し。親項目の下端とパネル上端の間には .sh__inner の下padding(10px)＋境界線1px の
     空白があり、そこへカーソルが入った瞬間に :hover が切れてパネルが閉じ、子ページを押せなかった。
     パネル自身の擬似要素でその隙間を覆う（パネルは .sh__has-sub の子孫なので :hover が継続する）。 */
  .sh__sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
  .sh__sub-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
    max-width:var(--wrap-wide);margin-inline:auto;padding:1px var(--gut);background:rgba(255,255,255,.16);}
  /* .sh__nav a の指定（min-height:44px・padding・inkの文字色）を打ち消して縦積みのカードにする */
  .sh__nav .sh__sub a.sh__sub-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    min-height:0;padding:22px 20px;background:var(--c-deep);color:var(--c-white);text-decoration:none;
    transition:background .2s;}
  .sh__nav .sh__sub a.sh__sub-card:hover{background:var(--c-deeper);color:var(--c-white);}
  .sh__sub-en{font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-sub);}
  .sh__sub-title{font-size:18px;font-weight:900;line-height:1.4;}
  .sh__sub-text{font-size:13px;line-height:1.8;color:#D7E8E2;}
}
/* ★ハンバーガー＋モバイルメニュー（1024px未満）。
   これが無いと狭幅でグローバルナビが1本も出ない（PCナビを display:none にしただけの実装漏れ）。
   開閉は assets/js/site.js が document委譲で処理（.site-burger / #site-mmenu）。
   ★JS無効時は #site-mmenu の hidden が外れないので、代わりにフッターの全ページナビが導線を担う
     （フッターナビは13リンクを常時表示＝no-JSでも回遊できる）。 */
.site-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;margin-left:4px;
  background:transparent;border:1px solid var(--c-line);border-radius:var(--r-0);cursor:pointer;}
.site-burger span{display:block;height:2px;background:var(--c-deep);transition:transform .25s,opacity .25s;}
.site-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.site-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.site-mmenu{position:fixed;inset:0;z-index:900;overflow-y:auto;
  padding:88px var(--gut) 40px;background:var(--c-deep);color:var(--c-white);}
.site-mmenu[hidden]{display:none;}
.site-mmenu ul{margin:0;padding:0;list-style:none;}
.site-mmenu li + li{border-top:1px solid rgba(255,255,255,.16);}
.site-mmenu a{display:flex;align-items:center;min-height:56px;color:var(--c-white);
  font-weight:700;text-decoration:none;}
.site-mmenu a:hover{color:var(--c-sub);}
.site-mmenu__tel{display:inline-flex;align-items:center;min-height:48px;margin-top:24px;
  padding:0 20px;background:var(--c-sub);color:var(--c-deeper);font-weight:900;text-decoration:none;}
/* ★極狭幅（320px級）でヘッダーが溢れる対策。既定のままだと
   ロゴ＋CTA＋ハンバーガーで 28px はみ出す（responsive-audit の overflow・実測 320px）。
   ★CTAは隠さない（モバイルの主要なCV導線なので、詰めて残す）。 */
@media (max-width:479px){
  .sh__inner{gap:8px;}
  .sh__logo{font-size:15px;}
  .sh__cta{padding:0 10px;font-size:13px;}
  .site-burger{width:44px;padding:0 9px;margin-left:0;}
}
@media (min-width:1024px){
  .site-burger{display:none;}
  .site-mmenu{display:none !important;}
  .sh__nav{display:flex;}
  .sh__tel{display:inline-flex;}
  .sh__cta{margin-left:0;}
}

/* ============================================================
   FV — ⑤§9 の4層（事業ラベル → 極太2行キャッチ → 巨大英字 → 斜め写真コラージュ）
   ＋ 参考①の署名1（意味の重み順に段を分ける極大見出し）
   量契約: chroma-area 99±20 / top-chroma-area 47以上 → 濃色面で埋め切り白地の余白を作らない
   ============================================================ */
.site-fv{position:relative;background:var(--c-deep);color:var(--c-white);overflow:hidden;isolation:isolate;}
/* スクリム: 写真上の文字をAA(4.5:1)に保つ。斜辺の向きに合わせて左下を最も濃くする */
.site-fv__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(104deg,rgba(2,32,28,.94) 0%,rgba(3,40,36,.84) 52%,rgba(5,48,43,.66) 100%);}
.site-fv__body{position:relative;z-index:var(--z-body);
  max-width:var(--wrap-wide);margin-inline:auto;padding:clamp(56px,9vw,128px) var(--gut) clamp(24px,4vw,48px);}

/* 1層目: 事業ラベル。★16px＝この帯の本文サイズ基準（量契約の比率の分母を16pxに固定するため） */
.site-fv__label{margin:0 0 clamp(14px,2vw,26px);font-size:16px;font-weight:700;letter-spacing:.34em;color:var(--c-sub);}

/* 2層目: 極太2行キャッチ（②コンセプトシートの確定コピー・改変禁止。段のサイズ差だけを与える） */
/* ★h1 要素自身に核サイズを載せる。子spanにだけ載せると計測系が UA既定の 2em(=32px) を読み、
   ジャンプ率が 2倍として測られる（参考① taharakogyo も computed h1=40px で同じ罠があった）。 */
/* line-height は 1.12。★1.02 だと和文グリフのインク（ほぼ全em）＋中抜きの2pxストロークで
   段どうしが重なる（実測 375px: 極大段のグリフ下端229px と 核段の上端214px が15px重複）。
   参考①の極大段の実測も 201.6px/h229.8=1.14・150px/h168=1.12 で、1.0台まで詰めてはいない。 */
.site-fv__h1{margin:0;font-weight:900;line-height:1.22;font-size:var(--t-h1-peak);letter-spacing:var(--ls-giant-xl);}
.site-fv__h1 span{display:block;}
/* ★極大段を中抜きにするのが参考①の署名1の当て方（並置比較で確認・2026-09-02）。
   参考①は 3段のうち**極大段「現場の」201.6px を中抜き**にし、核段「プロ集団。」150px は塗り＋差し色。
   ＝中抜きは「意味の重みが軽い段」に当て、メッセージを担う段は塗りで残す。
   匠商会は「重機を操り、」（動作＝修飾側）を中抜き、「次の土台をつくる。」（結果＝メッセージ）を塗り＋差し色にする。 */
/* ★2026-09-03 採用案2b：FVの極大段は写真の上に載るため帯は使わず、中抜きをやめて白の塗りにする
   （帯は「読ませる行」＝下層タイトルと h2 核段の担当。FVは塗りの明度差だけで段差を作る）。 */
.site-fv__h1-peak{font-size:var(--t-h1-peak);letter-spacing:var(--ls-giant-xl);
  color:var(--c-white);}
.site-fv__h1-core{font-size:var(--t-h1-core);margin-top:.06em;letter-spacing:var(--ls-giant-l);}
.site-fv__h1-core em{font-style:normal;color:var(--c-sub);}   /* 核の中の核だけ差し色（参考① span.ac の翻訳） */

/* 3層目: 巨大英字。★中抜きは極大段（2層目）へ移したので、ここは参考①の背面ゴーストと同じ
   「低アルファの塗り」にする＝中抜きを2層重ねると輪郭線だけの画面になって濁るため。 */
.site-fv__en{margin:clamp(14px,2.4vw,34px) 0 0;font-family:var(--f-en);font-size:var(--t-en-giant);
  font-weight:900;line-height:1;letter-spacing:var(--ls-giant-l);
  color:rgba(255,255,255,.20);}

/* ★2026-09-04 FVの斜めコラージュ枠（.site-fv__ph 3枚）は削除。FVは濃色面＋スクリムのみ。 */
@media (max-width:1023px){
  .site-fv__scrim{background:linear-gradient(180deg,rgba(2,32,28,.94) 0%,rgba(5,48,43,.88) 58%,rgba(5,48,43,.74) 100%);}
}

/* ============================================================
   ★短い固定文の行分配（行末孤立つぶし）
   カード・ステップ・チェック箇条・表のセル・プライバシー定型文は**文言を変えられない**短文で、
   狭幅だと最終行に1〜2字だけ残る（measure-pages #14。実測 mobile:「…増やす」→「やす」／
   「…年末年始」→「年始」／定型文の「…するため」→「ため」）。
   text-wrap:pretty は最終行だけを見るので効きが弱く、balance で行数ごと均す。
   ★本文の長い散文（.site-sec__body 直下の .site-p）には掛けない＝長文にbalanceは不向き。
   ============================================================ */
.site-card .site-p,
.site-step .site-p,
.site-tick .site-p,
.site-linkcard .site-p,
.site-faq__item .site-p,
.site-table td,.site-table th,
.privacy li,.privacy dd{ text-wrap:balance; }

/* ★カード・ステップ内では原稿の ＜br＞ を常に無効化する（幅の閾値を設けない）。
   原稿の ＜br＞ は「本文帯（864px）で意味の切れ目に改行を置く」ための指定で、
   340〜460pxのカード内では**どの画面幅でも**強制改行が入って行末に2字だけ残る
   （実測 PC 1280px: recruit/environment の STEP 03「成長のスピードは人それぞれ。＜br＞…評価しています。」が4行・末尾「す。」）。
   ★文字は足さない・削らない（原稿が正本）＝改行の効かせ方だけをCSSで決める。 */
.site-card .site-p br,
.site-step .site-p br,
.site-tick .site-p br,
.site-linkcard .site-p br,
.site-faq__a br,
.site-spec dd br{ display:none; }

/* ★2026-09-04 FV写真の緩速ズーム（site-fvzoom）はコラージュ枠の削除に伴い不要になったため撤去。 */

/* ★2026-09-03 FVの英字マーキー（流れる英字）は削除。HTML側の .site-marquee も撤去済み。 */

/* ============================================================
   ★★濃色セクションの中に置く「白いカード」の文字色を戻す（2026-09-02 実測で発見）
   `.site-sec--deep{color:#fff}` を継承したまま `.site-card/.site-step/.site-linkcard` が
   白背景を持つと、**白地に白文字＝完全に読めない**（実測 recruit/beginner の DAY「一日の仕事の流れ」で
   5枚のカードが全部消えていた／`.site-sec--deep .site-h3{color:#fff}` も同時に効いて見出しまで白）。
   ★このバグは `verify/contrast-pixels.mjs` を通り抜けた（同ページを15幅×136要素測って **AA割れ0件**）。
     ＝コントラストゲートは「濃色面の上の白カード」を検出できない。目視と実測の両方が必要。
   ============================================================ */
.site-sec--deep .site-card,
.site-sec--deep .site-step,
.site-sec--deep .site-linkcard{ color:var(--c-ink); }
.site-sec--deep .site-card .site-h3,
.site-sec--deep .site-step .site-h3,
.site-sec--deep .site-linkcard .site-h3{ color:var(--c-deep); }
.site-sec--deep .site-card .site-p,
.site-sec--deep .site-step .site-p,
.site-sec--deep .site-linkcard .site-p{ color:var(--c-ink); }
/* ボタンも同じ型で消える（`.site-sec--deep .site-btn` が白枠・白文字のまま白カードに載る＝1:1）。
   実測 recruit/ の WORK STYLE「働く環境を見る」で発生。カード内では通常配色へ戻す。 */
.site-sec--deep .site-card .site-btn,
.site-sec--deep .site-step .site-btn,
.site-sec--deep .site-linkcard .site-btn{ border-color:var(--c-main-tx);color:var(--c-main-tx);background:transparent; }
.site-sec--deep .site-card .site-btn:hover,
.site-sec--deep .site-step .site-btn:hover,
.site-sec--deep .site-linkcard .site-btn:hover{ background:var(--c-main-tx);color:var(--c-white); }
.site-sec--deep .site-card .site-btn--primary,
.site-sec--deep .site-step .site-btn--primary,
.site-sec--deep .site-linkcard .site-btn--primary{ background:var(--c-main-tx);border-color:var(--c-main-tx);color:var(--c-white); }
.site-sec--deep .site-card .site-btn--primary:hover,
.site-sec--deep .site-step .site-btn--primary:hover,
.site-sec--deep .site-linkcard .site-btn--primary:hover{ background:var(--c-deep);border-color:var(--c-deep);color:var(--c-white); }
/* 濃色面の白カード内で strong の差し色（水色）は白地に載ると読めないので文字用の色へ */
.site-sec--deep .site-card strong,
.site-sec--deep .site-step strong,
.site-sec--deep .site-linkcard strong{ color:var(--c-main-tx); }
/* ★狭幅でも上の指定を外さない。狭幅の上書きは .site-cards/.site-steps の**器**の背景を
   transparent にするだけで、`.site-card`/`.site-step` 自身の白背景は残る＝
   ここで白文字に戻すと同じバグ（白地に白文字）を作り直すことになる。 */

/* ============================================================
   下層ヒーロー帯（ページタイトル帯）＋パンくず
   ★自作（パーツ素置き禁止）。トップの署名DNAを継承する:
     ①背面の巨大英字ゴースト（参考①の署名2）
     ②ページ名を核段＝中抜きで組む（参考①の署名1）
     ③濃色面で明度差をつける（彩度ではなく明度で強さを作る）
   ============================================================ */
.subpage-header{position:relative;overflow:hidden;isolation:isolate;
  background:var(--c-deep);color:var(--c-white);
  padding:clamp(48px,7vw,104px) 0 clamp(36px,5vw,72px);}
.subpage-header__ghost{position:absolute;left:0;top:clamp(-10px,-1.4vw,0px);z-index:var(--z-ghost);
  margin:0;font-family:var(--f-en);font-size:var(--t-ghost);font-weight:900;line-height:.86;
  letter-spacing:-0.03em;color:var(--c-sub);opacity:.13;pointer-events:none;user-select:none;white-space:nowrap;}
.subpage-header__inner{position:relative;z-index:var(--z-body);
  max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gut);}
.subpage-header__en{margin:0 0 clamp(8px,1.2vw,16px);font-family:var(--f-en);font-size:var(--t-label);
  font-weight:700;letter-spacing:.24em;color:var(--c-sub);}
/* ページ名＝核段。中抜き（参考①の .tk-outline の翻訳）。長いページ名（最長11字「重機オペレーターの魅力」）でも
   版面に収まるよう上限を抑える（11×72=792 ≦ 版面1480−ガター96） */
/* ★2026-09-03 デザイン変更（採用案2b「淡色ハイライト型」）：中抜き（-webkit-text-stroke）から
   塗り文字＋淡いミントのベタ塗り帯へ。理由: 中抜きは小サイズ・写真上で線が飛び可読性が落ちる。
   ★帯は必ず display:inline ＋ box-decoration-break:clone で作る（行ごとに文字幅ぴったり）。
   block＋width:fit-content にすると折り返した見出しで**帯が1枚の矩形になり右側に空きが出る**（実測 924px の h2）。
   行が2行以上重なるため line-height は上下padding分（.16em）を足した値まで開ける。 */
.subpage-header__title{margin:0;font-weight:900;line-height:1.5;
  font-size:clamp(26px,4.2vw,52px);letter-spacing:var(--ls-giant-m);
  display:inline;padding:.1em .3em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--c-pale);color:var(--c-deep);text-wrap:balance;}
/* パンくず（CueZilla parts231 のクラス名に合わせる＝納品時にCMS側の動的パンくずへ差し替わる） */
.p-breadcrumb{background:var(--c-pale);font-size:14px;}
.p-breadcrumb__inner{display:flex;flex-wrap:wrap;gap:0 8px;
  max-width:var(--wrap-wide);margin-inline:auto;padding:4px var(--gut);list-style:none;}
.p-breadcrumb__item{display:flex;align-items:center;gap:8px;color:var(--c-mut);}
.p-breadcrumb__item + .p-breadcrumb__item::before{content:"/";color:var(--c-line);}
.p-breadcrumb__item a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-main-tx);text-decoration:none;}
.p-breadcrumb__item a:hover{text-decoration:underline;}
/* 現在地（最後の項目）はリンクだが色を落として区別する */
.p-breadcrumb__item:last-child a{color:var(--c-mut);pointer-events:none;}

/* 本文へスキップ（page-new が全下層に入れる。フォーカス時だけ出す） */
.site-skip{position:absolute;left:-9999px;top:0;z-index:999;
  padding:12px 20px;background:var(--c-deep);color:var(--c-white);font-weight:700;text-decoration:none;}
.site-skip:focus{left:0;}

/* ============================================================
   セクション共通
   ============================================================ */
/* ★はみ出しの clip はここで行う（body ではなく当事者側。rule-effect L001）。
   overflow:clip は position:sticky を殺さないが、セクション内に sticky を置かないこと。
   非対応環境向けに overflow:hidden を先に書いて上書きする。 */
.site-sec{position:relative;padding-block:var(--sp-l);overflow:hidden;overflow:clip;}
/* 飛び先が固定ヘッダーの裏に潜らないように（scroll-padding-top と二重の保険） */
[id]{scroll-margin-top:88px;}
.site-sec--pale{background:var(--c-pale);}
.site-sec--deep{background:var(--c-deep);color:var(--c-white);}
.site-sec--tight{padding-block:var(--sp-m);}
.site-sec--slim{padding-block:var(--sp-s);}

/* 背面の巨大英字ゴースト＝参考①の署名2（z-index 0・字間 -6.5px相当を em で） */
.site-ghost{position:absolute;left:0;top:clamp(-8px,-1vw,0px);z-index:var(--z-ghost);
  margin:0;font-family:var(--f-en);font-size:var(--t-ghost);font-weight:900;line-height:.86;
  letter-spacing:-0.03em;color:var(--c-main);opacity:.10;pointer-events:none;user-select:none;white-space:nowrap;}
.site-sec--deep .site-ghost{color:var(--c-sub);opacity:.13;}
.site-sec__head,.site-sec__body{position:relative;z-index:var(--z-body);}

/* セクション見出し＝参考①の署名1（修飾句段を小さく置き、核段だけを極大＋中抜き） */
.site-eyebrow{margin:0 0 clamp(10px,1.4vw,18px);font-family:var(--f-en);font-size:var(--t-label);
  font-weight:700;letter-spacing:.24em;color:var(--c-main-tx);}
.site-sec--deep .site-eyebrow{color:var(--c-sub);}
/* ★h2 要素自身に核サイズを載せる（h1 と同じ理由）。子spanにだけ載せると計測系が
   UA既定の 1.5em(=24px) を読み、ジャンプ率が 1.5倍として測られる（extract-top-dna --dry-run で検出）。 */
.site-h2{margin:0 0 clamp(24px,3.4vw,52px);font-weight:900;line-height:1.16;font-size:var(--t-h2-core);}
.site-h2 span{display:block;}
.site-h2__lead{font-size:var(--t-h2-lead);letter-spacing:.02em;}
/* ★2026-09-03 採用案2b：h2 の核段も中抜き→塗り＋淡ミントの帯（上記 .subpage-header__title と同じ作り） */
/* ★セレクタは `.site-h2 span{display:block}`(0,1,1) を上回る強さにする。
   `.site-h2__core` 単体(0,1,0) では display:block に負けて帯が列幅いっぱいになる。 */
.site-h2 span.site-h2__core{font-size:var(--t-h2-core);letter-spacing:var(--ls-giant-m);
  display:inline;line-height:1.7;padding:.08em .28em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--c-pale);color:var(--c-deep);}
/* 淡面セクションでは帯が背景と同色になるため一段濃いミントにする（AA: #12211F on #C6E4DE = 11.6:1） */
.site-sec--pale .site-h2 span.site-h2__core{background:#C6E4DE;}
.site-sec--deep .site-h2 span.site-h2__core{background:var(--c-pale);color:var(--c-deep);}
/* ★2026-09-03 中抜きを廃止したため -webkit-text-stroke のフォールバック（@supports）は不要になった。
   常に塗り文字なので、対応環境に関わらず見出しが消えることはない。 */
.site-h3{margin:clamp(26px,3vw,44px) 0 10px;font-size:var(--t-h3);font-weight:900;line-height:1.5;color:var(--c-deep);
  padding-left:14px;border-left:5px solid var(--c-sub);
  /* 見出しは行数を均す。既定では「ほか重機オペレーター業務」がカード幅で 10字+2字 に折れて
     行末孤立になる（measure-pages #14・実測1280px）。balance なら 6字+6字 に分かれる。
     ★文字は足さない・削らない（原稿が正本）＝分配だけをCSSで直す。 */
  text-wrap:balance;}
.site-h2,.site-fv__h1{text-wrap:balance;}
.site-sec--deep .site-h3{color:var(--c-white);}
.site-p{margin:0 0 1.1em;}
.site-p:last-child{margin-bottom:0;}
.site-note{color:var(--c-mut);font-size:14px;}

/* ★原稿の ＜br＞ は「広い幅で意味の切れ目に改行を置く」ための指定。狭い幅でそのまま効かせると
   強制改行の直前の行が極端に短くなる（verify/responsive-audit.mjs の ragged / orphan。
   実測 375px:「自分が動かした分だけ…」の中間行が4字／414px で2字）。
   ★実装専念モードなので**文字を足さない・削らない**（原稿が本文の正本）。効かせる幅をCSSで絞るだけにする
     （design-top-draft「#14 改行位置は ＜wbr＞ / word-break / white-space ＝CSSと不可視タグで直す」）。
   本文の ＜br＞ だけが対象＝FVキャッチは ＜span＞ のブロック組みなのでここでは触らない（②コンセプトシートの確定コピー）。 */
@media (max-width:1023px){ .site-p br{display:none;} }
/* 2分割セクションの本文列は画面幅の約半分しかないので、無効化する幅の閾値を上げる */
@media (max-width:1439px){ .site-split__text .site-p br{display:none;} }

/* ボタン */
.site-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,40px);}
.site-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:44px;
  padding:0 26px;border:2px solid var(--c-main-tx);border-radius:var(--r-0);color:var(--c-main-tx);
  font-weight:700;text-decoration:none;background:transparent;transition:background-color .2s,color .2s,border-color .2s;}
.site-btn:hover{background:var(--c-main-tx);color:var(--c-white);}
.site-btn--primary{background:var(--c-main-tx);color:var(--c-white);}
.site-btn--primary:hover{background:var(--c-deep);border-color:var(--c-deep);}
.site-sec--deep .site-btn{border-color:var(--c-white);color:var(--c-white);}
.site-sec--deep .site-btn:hover{background:var(--c-white);color:var(--c-deep);}
.site-sec--deep .site-btn--primary{background:var(--c-sub);border-color:var(--c-sub);color:var(--c-deeper);}
.site-sec--deep .site-btn--primary:hover{background:var(--c-white);border-color:var(--c-white);}

/* 出現演出（JSが動いたときだけ隠す＝no-JSで白画面にならない） */
.site-js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out;}
.site-js [data-reveal="left"]{transform:translateX(-28px);}
.site-js [data-reveal="right"]{transform:translateX(28px);}
.site-js [data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .site-js [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   写真プレースホルダ（汎用）
   ★論点 unsupplied-assets =「代用せずプレースホルダのまま渡す」。器と用途名だけを置き、中身は空。
     ＜img＞ を持たせないのは tools/asset-slots.mjs に未実装スロットを正しく報告させるため。
   ============================================================ */
.site-ph{display:grid;place-content:center;text-align:center;padding:16px;
  background:var(--c-pale);border:2px dashed var(--c-main-tx);
  font-size:14px;font-weight:700;line-height:1.8;color:var(--c-deep);}
.site-sec--deep .site-ph{background:rgba(255,255,255,.07);border-color:rgba(53,199,248,.6);color:#EAFBFF;}

/* ------------------------------------------------------------ NEWSバー（FV直下の1行・参考画像）
   ★FVと同じ濃色面で、FVから途切れずに続く帯にする。日付はサブ色（#35C7F8）＝濃面で 8.6:1。
   ★バッジは面をサブ色にして文字は最暗面（#02201C on #35C7F8 = 10.4:1）。 */
.site-newsbar{background:var(--c-deep);}
.site-newsbar__inner{position:relative;max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gut);}
.site-newsbar__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;}
.site-newsbar__item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  min-height:76px;padding:12px 0;}
.site-newsbar__item + .site-newsbar__item{border-top:1px solid rgba(255,255,255,.14);}
/* JSが1件表示に切り替えたとき（2件以上ある場合）だけ効く */
.is-on .site-newsbar__item{display:none;}
.is-on .site-newsbar__item.is-current{display:flex;border-top:0;}
.site-newsbar__badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:82px;min-height:32px;padding:0 14px;background:var(--c-sub);color:var(--c-deeper);
  font-family:var(--f-en);font-size:13px;font-weight:700;letter-spacing:.18em;}
.site-newsbar__date{font-family:var(--f-en);font-size:16px;letter-spacing:.06em;color:var(--c-sub);white-space:nowrap;}
.site-newsbar__title{display:inline-flex;align-items:center;min-height:44px;
  color:var(--c-white);font-weight:700;line-height:1.7;text-decoration:none;text-wrap:pretty;}
.site-newsbar__title:hover{color:var(--c-sub);text-decoration:underline;}
/* 送り矢印（2件以上のときにJSが表示する） */
.site-newsbar .site-news__pager{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;}
.site-newsbar .site-news__arrow{display:inline-flex;align-items:center;justify-content:center;
  width:44px;min-height:44px;padding:0;background:transparent;border:0;cursor:pointer;
  font-size:18px;color:var(--c-white);}
.site-newsbar .site-news__arrow:hover{color:var(--c-sub);}
.site-newsbar .site-news__count{font-family:var(--f-en);font-size:16px;color:var(--c-white);white-space:nowrap;}

/* ------------------------------------------------------------ WORK: 4項目のカード（形式＝カードグリッド） */
/* minmax は 340px（.site-steps と同じ理由＝広幅で列が増えすぎるとセル内の行長が短くなりすぎる） */
.site-cards{display:grid;gap:1px;margin-top:clamp(28px,4vw,52px);background:var(--c-line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.site-card{background:var(--c-white);padding:clamp(22px,2.6vw,34px);}
/* ★2026-09-03 WORK（工事名4項目）だけは2×2の総当たり格子で見せる。
   auto-fit のままだと広幅で4列1段になり「工種の並び」に読めないため、この節だけ列数を固定する。
   740px 未満は1列へ（2列だと1セルの行長が20字未満になり読みにくい）。 */
#work .site-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
/* ★2026-09-04 業務案内「基礎工事全般」も2×2＋写真枠。--2x2 は明示クラスなので
   auto-fit を上書きする（#work と同じ理由＝4列1段だと工種の並びに読めない）。 */
.site-cards--2x2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:739px){
  .site-cards--2x2{grid-template-columns:minmax(0,1fr);}
}
.site-card--media{display:flex;flex-direction:column;padding:0;}
.site-card__thumb{aspect-ratio:16/10;background:var(--c-pale);}
/* ★セレクタは `.site-card .site-h3{margin-top:0}`(0,2,0・宣言が先) を上回る強さにする */
.site-card.site-card--media > .site-h3,
.site-card.site-card--media > .site-p{margin-inline:clamp(22px,2.6vw,34px);}
.site-card.site-card--media > .site-h3{margin-top:clamp(20px,2.2vw,26px);}
.site-card.site-card--media > .site-p{margin-bottom:clamp(22px,2.6vw,34px);}
@media (max-width:739px){
  #work .site-cards{grid-template-columns:minmax(0,1fr);}
}
.site-card .site-h3{margin-top:0;}

@media (max-width:679px){
  /* ★狭幅は縦積みになるので、1pxのヘアライン間隔では「カードどうし」が「見出し-本文」と同じ密度になる
     （spacing-audit: P_group 1px ≦ P_small 18px の逆転）。まとまりの階層を保つため間隔を段落間より広く取る。 */
  .site-cards{gap:24px;background:transparent;}
  .site-card{padding:24px 0 0;border-top:2px solid var(--c-main);}
}

/* ------------------------------------------------------------ お問い合わせ（contact.html・★2026-09-04）
   ★入力欄は font-size:16px 以上（iOSで16px未満だとフォーカス時に画面が自動ズームする）。
   ★タップ領域は min-height:48px。 */
.site-contact{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,44px);
  margin-top:clamp(28px,3.4vw,44px);align-items:start;}
@media (min-width:900px){
  .site-contact{grid-template-columns:minmax(0,1fr) 340px;}
}
.site-form{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,26px);}
.site-form__row{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;}
.site-form__label{font-size:15px;font-weight:900;color:var(--c-deep);}
.site-form__req{display:inline-flex;align-items:center;margin-left:10px;padding:2px 8px;
  background:var(--c-main-tx);color:var(--c-white);font-size:11px;font-weight:700;letter-spacing:.08em;}
.site-form__input{width:100%;min-height:52px;padding:12px 16px;
  background:var(--c-white);border:1px solid var(--c-line);border-radius:0;
  font-family:inherit;font-size:16px;line-height:1.7;color:var(--c-ink);}
.site-form__input:focus-visible{outline:2px solid var(--c-main-tx);outline-offset:2px;border-color:var(--c-main-tx);}
.site-form__textarea{min-height:180px;resize:vertical;}
.site-form__help{margin:0;font-size:13px;line-height:1.8;color:var(--c-mut);}
.site-form__radios{display:flex;flex-wrap:wrap;gap:10px 24px;}
.site-form__radio{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  font-size:16px;color:var(--c-ink);cursor:pointer;}
.site-form__radio input{width:20px;height:20px;accent-color:var(--c-main-tx);}
.site-form__row--check{padding-top:4px;}
/* 送信ボタンは ＜button＞。.site-btn の見た目を引き継ぐため既定の枠を消す */
.site-form button.site-btn{border:0;cursor:pointer;font-family:inherit;font-size:16px;}
/* 右側の連絡先 */
.site-contact__side{display:flex;flex-direction:column;gap:16px;}
.site-contact__box{padding:clamp(24px,2.8vw,28px);background:var(--c-pale);}
.site-contact__en{margin:0 0 10px;font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--c-main-tx);}
.site-contact__lead{margin:0 0 8px;font-size:17px;font-weight:900;color:var(--c-deep);}
.site-contact__tel{display:inline-flex;align-items:center;min-height:48px;
  font-family:var(--f-en);font-size:clamp(26px,3vw,32px);font-weight:900;letter-spacing:.02em;
  color:var(--c-deep);text-decoration:none;}
.site-contact__tel:hover{color:var(--c-main-tx);}
.site-contact__box .site-p{margin-top:10px;font-size:14px;}
/* 住所は要素を分けて並べるので、行間ぶんだけの詰めた余白にする */
.site-contact__box .site-p + .site-p{margin-top:2px;}

/* ------------------------------------------------------------ ブログ一覧（blog.html・★2026-09-04）
   カードはトップのBLOG節（.site-blog*）と同じ語彙。白面に置くので境界線を足す。 */
.site-blog--list{margin-top:clamp(28px,3.4vw,44px);}
.site-blog--list .site-blog__card{border:1px solid var(--c-line);}
.site-blog--list .site-blog__card:hover{border-color:var(--c-main-tx);}
.site-blog__text{display:block;font-size:15px;line-height:1.9;color:var(--c-ink);text-wrap:pretty;}
/* カテゴリ絞り込み */
.site-cats{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,2.4vw,26px) 0 0;padding:0;list-style:none;}
.site-cat{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border:1px solid var(--c-line);color:var(--c-ink);font-size:15px;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;}
.site-cat:hover{border-color:var(--c-main-tx);color:var(--c-main-tx);}
.site-cat.is-current{background:var(--c-deep);border-color:var(--c-deep);color:var(--c-white);font-weight:700;}
/* ページ送り */
.site-pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(28px,3.4vw,44px);}
.site-pager__item{display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;padding:0 16px;border:1px solid var(--c-line);
  color:var(--c-ink);font-family:var(--f-en);font-size:16px;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;}
.site-pager__item:hover{border-color:var(--c-main-tx);color:var(--c-main-tx);}
.site-pager__item.is-current{background:var(--c-deep);border-color:var(--c-deep);color:var(--c-white);}

/* ------------------------------------------------------------ 匠商会についての各型（採用案19-1〜19-5） */
/* VALUES: 番号付き3枚（濃色面） */
.site-values{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none;background:rgba(255,255,255,.2);}
@media (min-width:820px){ .site-values{grid-template-columns:repeat(3,minmax(0,1fr));} }
.site-value{margin:0;padding:clamp(26px,3vw,30px) clamp(24px,2.8vw,26px);background:rgba(255,255,255,.06);}
.site-value__num{display:block;margin-bottom:12px;font-family:var(--f-en);font-size:clamp(28px,3.4vw,34px);
  font-weight:900;line-height:1;color:var(--c-sub);}
.site-value .site-h3{margin-top:0;}
/* COMPANY: 囲みの1行帯（.site-nextband の派生） */
.site-nextband--boxed{padding:clamp(28px,3.2vw,36px);border:1px solid var(--c-line);}
.site-nextband--boxed .site-sec__head{margin-bottom:0;}
.site-meta{margin:14px 0 0;font-size:14px;line-height:1.9;color:var(--c-mut);text-wrap:pretty;}
/* CTA: 用件で分ける2列 */
.site-routes{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(28px,3.4vw,40px);background:rgba(255,255,255,.16);}
@media (min-width:760px){ .site-routes{grid-template-columns:repeat(2,minmax(0,1fr));} }
.site-route{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  padding:clamp(28px,3.2vw,32px) clamp(24px,3vw,30px);background:rgba(255,255,255,.06);}
.site-route__en{margin:0;font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-sub);}
.site-route__title{margin:0;font-size:clamp(21px,2.4vw,24px);font-weight:900;color:var(--c-white);}
.site-route .site-btn{margin-top:auto;}
.site-teltext{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:clamp(20px,2.4vw,26px) 0 0;font-size:16px;color:#CFE4E0;}
.site-teltext__no{font-family:var(--f-en);font-size:clamp(22px,2.6vw,26px);font-weight:900;
  color:var(--c-white);text-decoration:none;}
.site-teltext__no:hover{color:var(--c-sub);}

/* ------------------------------------------------------------ 経験者ページの各型（採用案18-1/2/3a/4b/5/6） */
/* 短い一文を並べるタイル（評価軸・求める力・建物3種） */
.site-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin:clamp(26px,3.2vw,36px) 0 0;padding:0;list-style:none;background:var(--c-line);}
@media (min-width:760px){
  .site-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.site-tiles > li{padding:clamp(22px,2.6vw,26px) clamp(20px,2.4vw,24px);background:var(--c-pale);
  font-size:clamp(17px,1.9vw,19px);font-weight:900;line-height:1.6;color:var(--c-deep);text-wrap:pretty;}
.site-tiles--tight > li{padding:18px 16px;text-align:center;font-size:clamp(18px,2vw,20px);}
.site-sec--deep .site-tiles{background:rgba(255,255,255,.2);}
.site-sec--deep .site-tiles > li{background:rgba(255,255,255,.06);color:var(--c-white);}
/* 2列（本文＋リスト／本文＋囲み） */
.site-two{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,40px);
  margin-top:clamp(26px,3.2vw,36px);align-items:start;}
@media (min-width:900px){ .site-two{grid-template-columns:repeat(2,minmax(0,1fr));} }
.site-two .site-sec__body{margin-top:0;}
.site-two__label{margin:0 0 14px;font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--c-main-tx);}
.site-listcards{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;}
.site-listcards > li{padding:18px 22px;background:var(--c-white);
  font-size:17px;font-weight:700;line-height:1.7;color:var(--c-deep);text-wrap:pretty;}
.site-boxed{padding:clamp(26px,3vw,30px);background:var(--c-white);}
.site-boxed .site-h3{margin-top:0;}
/* 締めの濃色帯 */
.site-band{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;
  margin-top:clamp(26px,3.2vw,36px);padding:clamp(26px,3vw,32px);background:var(--c-deep);}
.site-band__text{margin:0;font-size:clamp(20px,2.4vw,24px);font-weight:900;line-height:1.6;color:var(--c-white);}
.site-band__note{flex:1 1 260px;margin:0;font-size:15px;line-height:1.9;color:#D7E8E2;}
/* 数値カード（値→ラベルの順は原稿のまま） */
.site-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin:clamp(26px,3.2vw,36px) 0 0;background:var(--c-line);}
@media (min-width:900px){ .site-metrics{grid-template-columns:repeat(4,minmax(0,1fr));} }
.site-metrics__item{padding:clamp(20px,2.4vw,24px);background:var(--c-white);}
.site-metrics dt{margin:0;font-family:var(--f-en);font-size:clamp(20px,2.4vw,24px);font-weight:900;
  line-height:1.3;color:var(--c-deep);}
.site-metrics dd{margin:6px 0 0;font-size:13px;color:var(--c-mut);}
/* 実績カード（体制・元請） */
.site-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin:clamp(26px,3.2vw,36px) 0 0;background:rgba(255,255,255,.2);}
@media (min-width:900px){ .site-stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
.site-stats__item{padding:clamp(26px,3vw,30px);background:rgba(255,255,255,.06);}
.site-stats dt{margin:0 0 14px;}
.site-stats__label{display:block;font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--c-sub);}
.site-stats__value{display:block;margin-top:8px;font-size:clamp(24px,3vw,30px);font-weight:900;
  line-height:1.3;color:var(--c-white);}
.site-stats__value--sm{font-size:clamp(19px,2.2vw,22px);}
.site-stats dd{margin:0;}
.site-stats dd .site-p:first-child{margin-top:0;}
/* 募集概要の定義表（横スクロールしない） */
.site-deftable{margin:clamp(26px,3.2vw,36px) 0 0;border-top:2px solid var(--c-deep);}
.site-deftable__row{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;
  padding:16px 0;border-bottom:1px solid var(--c-line);}
@media (min-width:760px){
  .site-deftable__row{grid-template-columns:200px minmax(0,1fr);padding:0;}
  .site-deftable dt{padding:18px 0;}
  .site-deftable dd{padding:18px 0;}
}
.site-deftable dt{margin:0;font-size:15px;font-weight:900;color:var(--c-deep);}
.site-deftable dd{margin:0;font-size:16px;line-height:1.9;color:var(--c-ink);text-wrap:pretty;}
.site-deftable__big{display:block;margin-bottom:4px;font-size:clamp(20px,2.2vw,22px);color:var(--c-deep);}

/* ------------------------------------------------------------ 魅力ブロックの共通型（採用案17a・重機オペレーターの魅力）
   番号列＋見出し・本文の2列。番号は装飾的な大きさだが、ラベル「魅力」と対で意味が読める。 */
.site-charm{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,24px);align-items:flex-start;}
.site-charm__num{flex:none;}
.site-charm__en{margin:0 0 6px;font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--c-main-tx);}
.site-charm__no{margin:0;font-family:var(--f-en);font-size:clamp(46px,6vw,64px);font-weight:900;
  line-height:.9;color:var(--c-main);}
.site-charm__label{margin:6px 0 0;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--c-main-tx);}
.site-charm__main{flex:1 1 480px;min-width:0;}
.site-charm__title{margin:0 0 22px;font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1.4;
  letter-spacing:var(--ls-giant-m);color:var(--c-deep);text-wrap:balance;}
.site-sec--deep .site-charm__en,
.site-sec--deep .site-charm__label{color:var(--c-sub);}
.site-sec--deep .site-charm__no{color:var(--c-sub);}
.site-sec--deep .site-charm__title{color:var(--c-white);}
/* 小見出し＋定義リストのまとまり。魅力ブロックの下に1〜2個続く */
.site-sub{margin-top:clamp(32px,4vw,52px);padding-top:clamp(28px,3.4vw,36px);border-top:1px solid var(--c-line);}
.site-sec--deep .site-sub{border-top-color:rgba(255,255,255,.22);}
.site-sub .site-h3{margin-top:0;}
/* COLUMN は囲みにして本編と区別する */
.site-sub--column{margin-top:clamp(28px,3.4vw,40px);padding:clamp(26px,3vw,32px);border-top:0;
  background:rgba(255,255,255,.06);}
.site-sub__label{margin:0 0 12px;font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--c-sub);}
/* 定義リスト（小項目名｜説明）。行ごとに div で包んでグリッドの単位にする */
.site-defs{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin:clamp(20px,2.4vw,28px) 0 0;background:var(--c-line);}
@media (min-width:820px){
  .site-defs{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* 4項目の節（魅力05）は2×2にする（3列だと最後の1枚だけ next 行に残る） */
  .site-defs:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));}
}
.site-defs__item{padding:clamp(22px,2.6vw,26px) clamp(20px,2.4vw,24px);background:var(--c-white);}
.site-defs dt{margin:0 0 10px;font-size:clamp(17px,1.9vw,19px);font-weight:900;line-height:1.5;color:var(--c-deep);}
.site-defs dd{margin:0;font-size:15px;line-height:1.9;color:var(--c-ink);}
.site-sec--deep .site-defs{background:rgba(255,255,255,.22);}
.site-sec--deep .site-defs__item{background:var(--c-deep);}
.site-sec--deep .site-defs dt{color:var(--c-white);}
.site-sec--deep .site-defs dd{color:#D7E8E2;}
.site-defs + .site-p{margin-top:clamp(20px,2.4vw,26px);}
.site-sec--deep .site-p--lead{color:var(--c-white);}

/* ------------------------------------------------------------ 次ページへ渡す1行帯（採用案16b） */
.site-nextband{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:center;}
@media (min-width:900px){
  .site-nextband{grid-template-columns:minmax(0,1fr) 300px;}
}
.site-nextband__act{display:flex;flex-direction:column;gap:10px;}
/* 矢印を右端へ寄せるため、この帯のボタンだけ両端揃えにする */
.site-btn--wide{justify-content:space-between;width:100%;}
.site-btn__arrow{margin-left:16px;}

/* ------------------------------------------------------------ ON/OFF の対比2列（採用案15a・WORK STYLE節） */
.site-onoff{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(28px,3.4vw,44px);background:var(--c-line);}
@media (min-width:820px){
  .site-onoff{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.site-onoff__col{display:flex;flex-direction:column;gap:12px;
  padding:clamp(28px,3.2vw,34px) clamp(24px,3vw,30px);background:var(--c-white);}
.site-onoff__en{margin:0;font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-main-tx);}
.site-onoff__col .site-h3{margin:0;font-size:clamp(20px,2.2vw,24px);}
.site-onoff__col .site-p{margin:0;}
/* 補足2枚。1行に2つ並べ、狭ければ折り返す */
.site-notes{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,2.4vw,26px);}
.site-notes .site-p{flex:1 1 300px;margin:0;padding:clamp(20px,2.4vw,24px);background:var(--c-white);}
.site-notes + .site-sec__body{margin-top:clamp(24px,2.8vw,32px);}

/* ------------------------------------------------------------ 条件カード＋引用（採用案14a・HOLIDAY節）
   dl は行ごとに div で包んでグリッドの単位にする（dt/dd 直置きだと列が2つに割れる）。 */
/* ★列数は項目数で決める。4項目（働く環境）と3項目（匠商会について）で共有するクラスなので、
   固定4列だと3項目のとき右端に空セルが残り、区切り線の地色が帯として露出する。 */
.site-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin:clamp(28px,3.4vw,44px) 0 0;background:var(--c-line);}
@media (min-width:900px){
  .site-facts{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* 3項目版：760px以上で3列、未満は1列（2列だと下段が1枚だけ残る） */
.site-facts:not(:has(> :nth-child(4))){grid-template-columns:minmax(0,1fr);}
@media (min-width:760px){
  .site-facts:not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr));}
}
.site-facts__item{padding:clamp(22px,2.6vw,26px);background:var(--c-white);}
.site-facts dt{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--c-main-tx);}
.site-facts dd{margin:0;font-size:17px;font-weight:700;line-height:1.6;color:var(--c-deep);}
.site-facts__big{font-size:clamp(20px,2.2vw,22px);font-weight:900;}
.site-quote{margin-top:clamp(28px,3.4vw,40px);padding:clamp(26px,3vw,32px);
  background:var(--c-pale);border-left:5px solid var(--c-main-tx);}
.site-quote__label{margin:0 0 12px;font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--c-main-tx);}
.site-quote__text{margin:0;font-size:clamp(19px,2.2vw,22px);font-weight:900;line-height:1.7;
  color:var(--c-deep);text-wrap:pretty;}
.site-quote .site-p{margin:14px 0 0;}

/* ------------------------------------------------------------ 給与レンジ（採用案13b・SALARY節）
   金額は数字として立て、バーは装飾。3段階の説明はバーの下に等幅で並べる。 */
.site-range{margin-top:clamp(28px,3.4vw,44px);padding:clamp(28px,3.2vw,36px) clamp(24px,3vw,34px);
  background:var(--c-white);}
.site-range__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px;margin-bottom:16px;}
.site-range__amount{margin:0;font-size:16px;color:var(--c-ink);}
.site-range__amount b{font-family:var(--f-en);font-size:clamp(28px,3.4vw,36px);font-weight:900;color:var(--c-deep);}
.site-range__amount--max{margin-left:auto;}
.site-range__amount--max b{color:var(--c-main-tx);}
.site-range__unit{font-size:14px;color:var(--c-mut);}
.site-range__note{margin:0;font-size:14px;color:var(--c-mut);}
.site-range__bar{height:14px;background:linear-gradient(90deg,#C6E4DE,var(--c-main));}
.site-range__steps{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  margin:26px 0 0;padding:24px 0 0;list-style:none;border-top:1px solid var(--c-line);}
@media (min-width:820px){
  .site-range__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
}
.site-range__label{margin:0 0 8px;font-family:var(--f-en);font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--c-main-tx);}
.site-range__step .site-p{margin:0;font-size:15px;}
/* 条件（試用期間・手当・賞与）。dl は行ごとに div で包んでグリッドの単位にする */
.site-terms{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin:clamp(24px,3vw,36px) 0 0;background:var(--c-line);}
@media (min-width:700px){
  .site-terms{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.site-terms__item{padding:20px 22px;background:var(--c-white);}
.site-terms dt{margin:0 0 6px;font-size:13px;font-weight:900;color:var(--c-deep);}
.site-terms dd{margin:0;font-size:16px;color:var(--c-ink);}

/* ------------------------------------------------------------ 2本柱（採用案12a・働く環境の導入）
   白面セクションの中に置くので、柱は淡面にして本文から分離する。 */
.site-pillars{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(28px,3.4vw,44px);background:var(--c-line);}
@media (min-width:820px){
  .site-pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.site-pillar{display:flex;flex-direction:column;gap:12px;
  padding:clamp(28px,3.2vw,34px) clamp(24px,3vw,30px);background:var(--c-pale);}
.site-pillar__en{margin:0;font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-main-tx);}
.site-pillar .site-h3{margin:0;font-size:clamp(21px,2.4vw,26px);}
.site-pillar .site-p{margin:0;}
/* ★柱の下に続く締め文は隣接セレクタで余白を作る（.site-sec__body 側は margin-top:0 を持つため） */
.site-pillars + .site-sec__body{margin-top:clamp(28px,3.4vw,44px);}
/* 節を締める一文。本文より一段大きくして結論であることを示す */
.site-p--lead{font-size:clamp(17px,1.9vw,18px);font-weight:700;color:var(--c-deep);}

/* ------------------------------------------------------------ 最終CTA帯（採用案11a）
   左＝呼びかけ、右＝行動（電話・応募・問い合わせ）。番号は必ず tel: でリンクする（R-24）。 */
.site-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,48px);align-items:center;}
@media (min-width:900px){
  .site-cta{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
}
.site-cta__act{display:flex;flex-direction:column;gap:14px;
  padding:clamp(28px,3.2vw,34px) clamp(24px,3vw,30px);background:rgba(255,255,255,.06);}
.site-cta__label{margin:0;font-size:14px;color:#D7E8E2;}
.site-cta__tel{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-en);font-size:clamp(28px,3.2vw,34px);font-weight:900;letter-spacing:.02em;
  color:var(--c-white);text-decoration:none;}
.site-cta__tel:hover{color:var(--c-sub);}
.site-btns--stack{flex-direction:column;align-items:stretch;gap:10px;}
.site-btns--stack .site-btn{justify-content:center;}

/* ------------------------------------------------------------ LINKS: 同格のリンクカード2枚（採用案10a）
   ★2枚は必ず同サイズ。align-items:stretch（既定）＋ .site-linkcard__more の margin-top:auto で
   本文量が違っても「詳しくはこちら」の位置と高さが揃う。 */
.site-links{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(20px,2.6vw,32px);background:var(--c-line);}
@media (min-width:820px){
  .site-links{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.site-links .site-linkcard{display:flex;flex-direction:column;gap:14px;
  padding:clamp(30px,3.4vw,38px) clamp(26px,3vw,34px);
  background:var(--c-white);color:var(--c-ink);text-decoration:none;
  transition:background .25s,transform .25s;}
.site-links .site-linkcard:hover{background:var(--c-pale);transform:translateY(-3px);color:var(--c-ink);}
.site-linkcard__en{font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-main-tx);}
.site-linkcard__title{font-size:clamp(24px,2.8vw,30px);font-weight:900;line-height:1.45;color:var(--c-deep);}
.site-linkcard__text{font-size:15px;line-height:1.9;text-wrap:pretty;}
.site-linkcard__more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;
  min-height:44px;font-weight:700;color:var(--c-main-tx);}
.site-linkcard__arrow{transition:transform .25s;}
.site-links .site-linkcard:hover .site-linkcard__arrow{transform:translateX(4px);}

/* ------------------------------------------------------------ 代表メッセージ（採用案9c・MESSAGE節）
   本文＋名刺ブロックの2列。名刺は濃色面で本文から明確に分ける。 */
.site-message{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,40px);}
@media (min-width:900px){
  .site-message{grid-template-columns:minmax(0,1fr) 320px;align-items:start;}
}
.site-namecard{display:flex;flex-direction:column;gap:10px;
  padding:clamp(26px,3vw,32px) clamp(22px,2.6vw,28px);background:var(--c-deep);color:#D7E8E2;}
.site-namecard__en{margin:0;font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-sub);}
.site-namecard__co{margin:0;font-size:15px;}
.site-namecard__name{margin:0;font-size:clamp(21px,2.2vw,24px);font-weight:900;line-height:1.4;color:var(--c-white);}
/* 控えめ版（匠商会について）：面を張らず、罫線と小さめの文字で署名として置くだけ */
.site-namecard--plain{gap:6px;padding:0;background:none;
  padding-top:16px;border-top:1px solid var(--c-line);align-self:start;}
.site-namecard--plain .site-namecard__co{font-size:14px;color:var(--c-mut);}
.site-namecard--plain .site-namecard__name{font-size:17px;font-weight:700;color:var(--c-deep);}
/* 淡面セクションの .site-p--strong（5b では濃色面用に白指定）を、この節では濃色文字に戻す */
.site-sec--pale .site-message .site-p--strong{color:var(--c-deep);}

/* ------------------------------------------------------------ 役割ラベル付き3枚カード（採用案8a・WORK STYLE節）
   ★列数は明示（auto-fit だと3枚目の長文で列幅が変わり、役割の並びに読めなくなる）。 */
.site-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1023px){ .site-cards--3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:739px){ .site-cards--3{grid-template-columns:minmax(0,1fr);} }
.site-card__role{margin:0 0 12px;font-family:var(--f-en);font-size:var(--t-label);font-weight:700;
  letter-spacing:.2em;color:var(--c-main-tx);}
.site-sec--deep .site-card__role{color:var(--c-sub);}
/* 濃色面のカードは面をわずかに起こす（白カードだと濃色節の中で浮きすぎる） */
.site-sec--deep .site-cards--role{background:rgba(255,255,255,.16);}
.site-sec--deep .site-cards--role .site-card{background:rgba(255,255,255,.06);color:#D7E8E2;}
.site-sec--deep .site-cards--role .site-h3{color:var(--c-white);}
/* ★本文は白系に。`.site-card .site-p{color:var(--c-ink)}`(0,2,0) が効いたままだと
   濃色カード上で濃紺の文字＝ほぼ読めない。3クラスで確実に上書きする。 */
.site-sec--deep .site-cards--role .site-card .site-p{color:#D7E8E2;}
.site-cards--role .site-card .site-h3{margin-top:0;}

/* ------------------------------------------------------------ 番号付き2×2（採用案7a・PERSON節）
   番号は淡色の大きな数字＝装飾。見出しと本文の左に固定幅で並べる。 */
.site-ticks--2x2{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(28px,4vw,52px);padding:0;list-style:none;background:var(--c-line);}
@media (min-width:820px){
  .site-ticks--2x2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.site-ticks--2x2 .site-tick{display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;
  margin:0;padding:clamp(24px,2.8vw,34px) clamp(22px,2.6vw,32px);background:var(--c-white);}
/* ★縦積みリスト用の旧ルールを打ち消す。`.site-tick + .site-tick`(0,2,0) の余白が
   グリッドセルに残ると区切り線の地色が帯として露出し、::before の旧チェックが番号と二重になる。 */
.site-ticks--2x2 .site-tick + .site-tick{margin-top:0;}
.site-ticks--2x2 .site-tick::before{content:none;}
.site-tick__num{flex:none;font-family:var(--f-en);font-size:clamp(32px,3.6vw,44px);font-weight:900;
  line-height:1;color:var(--c-pale);}
.site-sec--pale .site-tick__num{color:#C6E4DE;}
.site-tick__body{min-width:0;}
.site-ticks--2x2 .site-tick .site-h3{margin-top:0;}

/* ------------------------------------------------------------ Q見出し＋写真つき交互レイアウト（採用案6b）
   ★交互は3回まで（⑤§9「左右交互を連続反復させない」）。ここは1節内で完結させる。 */
.site-qhead{display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,20px);}
.site-qhead__q{margin:0;font-family:var(--f-en);font-weight:700;line-height:1;
  font-size:clamp(40px,5vw,64px);color:var(--c-main-tx);}
/* ★行の高さは grid の行トラックで解く。flex column だと写真列（image-slot の
   aspect-ratio で後から高さが決まる）が flex アイテムからあふれて行同士が重なる。 */
.site-alt{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:1px;
  margin-top:clamp(28px,4vw,52px);background:var(--c-line);}
.site-alt__row{display:grid;grid-template-columns:minmax(0,1fr);background:var(--c-white);}
@media (min-width:900px){
  .site-alt__row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:stretch;}
  /* 逆順の行は写真を右へ。order でなく列指定で入れ替える（DOM順＝読み順は保つ） */
  .site-alt__row--rev{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
  .site-alt__row--rev .site-alt__media{grid-column:2;grid-row:1;}
  .site-alt__row--rev .site-alt__text{grid-column:1;grid-row:1;}
}
/* 写真列は行の高さ（本文列）に合わせて伸ばす。
   ★aspect-ratio は使わない：stretch されたグリッドアイテムに比率を与えると、
   行の高さから自動最小幅（min-width:auto）が逆算されて列トラックを越え、本文に被る。 */
.site-alt__media{min-width:0;background:var(--c-pale);}
.site-alt__media image-slot{display:block;width:100%;height:100%;}
/* 1列時は行の高さを本文しか持たないので、ここでだけ写真列の高さを明示する */
@media (max-width:899px){
  .site-alt__media{height:clamp(200px,52vw,320px);}
}
.site-alt__text{padding:clamp(26px,3vw,40px) clamp(24px,3vw,36px);}
.site-alt__text .site-h3{margin-top:0;}

/* ------------------------------------------------------------ ステートメント節（採用案5b）
   濃色面で「見出し＋本文」と「声」を2列に組む。声の列は面をわずかに起こして分離する。 */
.site-state{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.4vw,44px);}
@media (min-width:900px){
  .site-state{grid-template-columns:1.15fr 1fr;gap:clamp(36px,4vw,64px);align-items:start;}
}
.site-state .site-sec__body{margin-top:clamp(24px,3vw,38px);}
.site-p--strong{color:var(--c-white);font-weight:700;}
.site-voice{display:flex;flex-direction:column;gap:14px;margin:0;padding:clamp(24px,3vw,40px);
  list-style:none;background:rgba(255,255,255,.05);}
.site-voice__item{padding-left:16px;border-left:3px solid var(--c-sub);
  font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.7;color:var(--c-white);text-wrap:pretty;}

/* ------------------------------------------------------------ 片側ブリード（機構契約 bleed-one-side） */
.site-bleed{position:relative;z-index:var(--z-body);margin-top:clamp(32px,4.6vw,72px);}
@media (min-width:900px){
  /* 片端だけ画面端に接触させ、反対側に版面の余白を残す＝参考①の配置法則 */
  .site-bleed--right{margin-right:calc(50% - 50vw);}
  .site-bleed--left{margin-left:calc(50% - 50vw);}
}

/* ------------------------------------------------------------ 全幅2分割（機構契約 split-full・ガター0）
   ★⑤§9 禁止事項「写真とテキストの左右交互レイアウトを連続反復させない」に従い、連続させず2回だけ使う */
.site-split{display:grid;grid-template-columns:1fr;gap:0;width:100%;}
@media (min-width:900px){ .site-split{grid-template-columns:1fr 1fr;} }
.site-split__text{padding:clamp(32px,5vw,88px) var(--gut);}
/* 2分割の本文列は画面の約半分しかないので、核段は文章帯より小さいスケールに落とす
   （落とさないと「重機オペレーター募集中」11字が列幅に収まらず行末に「集中」だけ残る） */
.site-split__text .site-h2 span.site-h2__core{font-size:clamp(24px,3.0vw,38px);}
.site-split__media{min-height:clamp(240px,34vw,560px);}
/* ★2026-09-04 写真枠（.site-ph）を全ページから削除。2分割は本文のみになるため、
   媒体列が無い .site-split は1列に戻す（1fr 1fr のままだと右半分が空白で残る）。 */
@media (min-width:900px){
  .site-split:not(:has(.site-split__media)){grid-template-columns:1fr;}
}

/* ------------------------------------------------------------ 大小2枚組の重畳（機構契約 photo-duo・参考①の副署名） */
.site-duo{position:relative;z-index:var(--z-body);margin-top:clamp(32px,4.6vw,72px);
  padding-bottom:clamp(40px,7vw,120px);}
.site-duo__lg{height:clamp(220px,32vw,470px);}
.site-duo__sm{position:absolute;right:2%;bottom:0;width:min(46%,420px);height:clamp(140px,20vw,280px);
  box-shadow:0 10px 34px rgba(2,32,28,.28);}
@media (max-width:679px){
  .site-duo{padding-bottom:0;}
  /* ★段落間(P_small=18px)より広くする。12pxだと「写真2枚組」が本文と同じ密度に見える（spacing-audit の P_group 逆転） */
  .site-duo__sm{position:relative;right:auto;bottom:auto;width:100%;margin-top:28px;box-shadow:none;}
}

/* ------------------------------------------------------------ 仕様リスト（image-spec-list の技法）
   原稿の ＜strong＞ラベル＜/strong＞＜br＞値 の対を dt/dd で組む。
   ★段落として流すと2行目が短く折れて行末に2字だけ残る（measure-pages #14・実測「…年末年始」→「年始」）。
     対ごとにセルを持たせれば折り返しが起きない＝形式で解決している（文言は一字も変えていない）。
   ★原稿はページによって「ラベル→値」「値→ラベル」の順が違う（環境=休日→日曜日／経験者=120分→一日の休憩時間）。
     順序は原稿のまま dt→dd に写す（入れ替えない）。 */
.site-spec{display:grid;gap:1px;margin:clamp(24px,3vw,40px) 0 0;background:var(--c-line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.site-spec dt{margin:0;padding:18px 20px 6px;background:var(--c-white);font-weight:900;color:var(--c-deep);
  font-size:var(--t-h3);line-height:1.4;text-wrap:balance;}
.site-spec dd{margin:0;padding:0 20px 18px;background:var(--c-white);color:var(--c-mut);line-height:1.7;text-wrap:balance;}
.site-sec--deep .site-spec{background:rgba(255,255,255,.2);}
.site-sec--deep .site-spec dt{background:var(--c-deep);color:var(--c-white);}
.site-sec--deep .site-spec dd{background:var(--c-deep);color:#C9E3DF;}
@media (max-width:679px){
  .site-spec{gap:16px;background:transparent;grid-template-columns:1fr;}
  .site-spec dt{padding:16px 0 4px;border-top:2px solid var(--c-main);}
  .site-spec dd{padding:0;}
}

/* ------------------------------------------------------------ FAQ（qa-list の技法） */
.site-faq{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--c-line);}
.site-faq__item{padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--c-line);}
.site-faq__pair{padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--c-line);}
.site-faq__q{margin:0 0 .6em;font-weight:900;font-size:var(--t-h3);line-height:1.5;color:var(--c-deep);text-wrap:balance;}
.site-faq__a{margin:0;padding-left:1.2em;border-left:3px solid var(--c-sub);}
.site-sec--deep .site-faq__pair{border-color:rgba(255,255,255,.22);}
.site-sec--deep .site-faq__q{color:var(--c-white);}
.site-faq__item .site-h3{margin-top:0;}
.site-faq__item .site-p:last-child{margin-bottom:0;}
.site-sec--deep .site-faq,.site-sec--deep .site-faq__item{border-color:rgba(255,255,255,.22);}

/* ------------------------------------------------------------ 表（comparison-table の技法・募集概要／会社情報） */
.site-table{overflow-x:auto;margin:clamp(24px,3vw,40px) 0 0;
  -webkit-overflow-scrolling:touch;}
/* font-size は 16px（15pxだと body:16 を下回り measure #2 が警告を出す。⑤§9「本文16px以上」） */
.site-table table{border-collapse:collapse;width:100%;min-width:640px;background:var(--c-white);font-size:16px;}
.site-table th,.site-table td{border:1px solid var(--c-line);padding:14px 16px;text-align:left;vertical-align:top;line-height:1.85;
  text-wrap:pretty;}
.site-table thead th{background:var(--c-deep);color:var(--c-white);font-weight:700;white-space:nowrap;}
/* 見出し列は 9em（11emだと本文列が狭くなり「原則なし／夜勤」等の短いセルが2行に折れて
   行末に2字だけ残る＝measure-pages #14 の行末孤立。実測 2026-09-02） */
.site-table tbody th{background:var(--c-pale);color:var(--c-ink);font-weight:700;white-space:nowrap;width:9em;}
.site-table td strong{color:var(--c-main-tx);}
@media (min-width:768px){ .site-table table{min-width:0;} }

/* ------------------------------------------------------------ プライバシーポリシー（全クライアント共通の定型文）
   ★本文はテキスト改変禁止なので、読み幅はCSSだけで整える。
     版面指定が無いと1行80字になり（measure-pages 5-4 で実測）行末孤立も同時に出る。
     読み幅は「その段の版面から決める」（教訓 read-width-must-be-derived-from-the-band-not-capped）＝
     他セクションと同じ --wrap-text を使い、絶対値でキャップしない。 */
.privacy{max-width:var(--wrap-text);margin-inline:auto;padding-inline:var(--gut);}
.privacy__subtitle{margin:0 0 clamp(20px,2.6vw,36px);font-size:var(--t-h3);font-weight:900;color:var(--c-deep);
  padding-left:14px;border-left:5px solid var(--c-sub);}
.privacy h3,.privacy__item-title{margin:clamp(28px,3.2vw,44px) 0 10px;font-size:var(--t-h3);font-weight:900;
  line-height:1.5;color:var(--c-deep);text-wrap:balance;}
.privacy p{margin:0 0 1.1em;}
.privacy ol,.privacy ul{margin:0 0 1.1em;padding-left:1.4em;}
.privacy li{margin-bottom:.5em;}
.privacy dl{margin:0 0 1.1em;}
.privacy dt{font-weight:700;margin-top:.8em;}
.privacy dd{margin:0 0 .4em;}

/* ------------------------------------------------------------ ステップ（labeled-step-cards の技法・連番付き） */
/* minmax は 340px。280pxだと広幅で4〜5列に割れてセル内の行長が中央値14字まで落ちる
   （measure-pages 5-4「短すぎ」・実測 recruit/beginner）。340pxなら最大3列で28字前後に収まる。 */
.site-steps{display:grid;gap:1px;margin:clamp(28px,4vw,52px) 0 0;padding:0;list-style:none;background:var(--c-line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.site-step{position:relative;background:var(--c-white);padding:clamp(22px,2.6vw,34px);}
.site-step .site-h3{margin-top:0;}
@media (max-width:679px){
  /* 狭幅は縦積み＝カード間を段落間より広く取る（spacing-audit の P_group 逆転を防ぐ） */
  .site-steps{gap:24px;background:transparent;}
  .site-step{padding:24px 0 0;border-top:2px solid var(--c-main);}
}

/* ------------------------------------------------------------ チェック箇条（checkmark-list の技法） */
.site-ticks{margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none;}
.site-tick{position:relative;padding-left:38px;}
.site-tick + .site-tick{margin-top:clamp(28px,3.4vw,44px);}
.site-tick::before{content:"";position:absolute;left:0;top:.5em;width:22px;height:22px;
  background:var(--c-sub);
  clip-path:polygon(20% 48%,42% 70%,84% 22%,96% 34%,42% 92%,8% 58%);}
.site-tick .site-h3{margin-top:0;}
.site-sec--deep .site-tick strong{color:var(--c-sub);}

/* ------------------------------------------------------------ RECRUIT: リンクカード2枚（全幅2分割・ガター0） */
.site-linkcards{display:grid;grid-template-columns:1fr;gap:0;width:100%;}
@media (min-width:900px){ .site-linkcards{grid-template-columns:1fr 1fr;} }
.site-linkcard{padding:clamp(30px,4.4vw,72px) var(--gut);background:var(--c-white);}
.site-linkcard + .site-linkcard{background:var(--c-pale);}
.site-linkcard .site-h3{margin-top:0;}

/* ------------------------------------------------------------ BLOG: 写真背景＋カード3枚（参考画像）
   ★背景は写真の上にスクリム（rgba黒）を必ず重ねる。白文字を写真へ直置きするとコントラストが
     写真次第で崩れる（見出し=白/#000 .48 で 7:1 以上を確保）。 */
.site-sec--photo{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(56px,7vw,96px);color:var(--c-white);background:var(--c-deeper);}
.site-sec--photo__bg{position:absolute;inset:0;z-index:0;}
.site-sec--photo__bg::after{content:"";position:absolute;inset:0;background:rgba(2,32,28,.62);}
.site-sec--photo > .site-wrap{position:relative;z-index:var(--z-body);}
.site-sec__head--center{text-align:center;}
.site-blog__en{margin:0 0 clamp(28px,4vw,48px);font-family:var(--f-en);font-weight:700;
  font-size:clamp(38px,5.6vw,64px);letter-spacing:.06em;line-height:1.1;color:var(--c-white);}
.site-blog{display:grid;gap:clamp(20px,2.6vw,32px);margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.site-blog__item{display:flex;}
.site-blog__card{display:flex;flex-direction:column;gap:14px;width:100%;
  padding:clamp(14px,1.6vw,20px);background:var(--c-white);color:var(--c-ink);text-decoration:none;
  transition:transform .25s,box-shadow .25s;}
.site-blog__card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(2,32,28,.28);color:var(--c-ink);}
.site-blog__thumb{display:block;aspect-ratio:16/10;background:var(--c-pale);}
.site-blog__meta{display:flex;align-items:center;gap:12px;}
.site-blog__date{font-family:var(--f-en);font-size:16px;letter-spacing:.04em;color:var(--c-mut);}
.site-blog__tag{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;padding:0 10px;border:1px solid var(--c-line);font-size:12px;color:var(--c-mut);white-space:nowrap;}
.site-blog__title{display:block;font-size:16px;font-weight:700;line-height:1.75;color:var(--c-deep);text-wrap:pretty;}
/* NEW は行頭に文字と一緒に流す（float や absolute にすると2行目の字下げが崩れる） */
.site-blog__new{display:inline-flex;align-items:center;justify-content:center;
  margin-right:8px;padding:2px 8px;background:#C8102E;color:var(--c-white);
  font-family:var(--f-en);font-size:12px;font-weight:700;letter-spacing:.08em;vertical-align:2px;}

/* ------------------------------------------------------------ フッター（sf-）
   ★2026-09-03 採用案4a: 会社情報＋3グループのサイトマップを4カラムで並べる。
   子ページは左罫線のインデントでヘッダー（3b メガメニュー）の階層と一致させる。 */
.sf{background:var(--c-deeper);color:#CFE4E0;padding:var(--sp-m) 0 26px;font-size:15px;}
.sf__inner{max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gut);}
.sf__cols{display:grid;gap:32px;grid-template-columns:1fr;}
@media (min-width:900px){
  .sf__cols{grid-template-columns:1.3fr 2.7fr;gap:40px;}
}
.sf__nap b{display:block;color:var(--c-white);font-size:19px;}
.sf__addr{margin:14px 0 0;font-size:14px;line-height:1.95;}
.sf__nap a{color:var(--c-white);}
.sf__cta{display:flex;flex-direction:column;gap:8px;margin-top:18px;max-width:320px;}
.sf__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;
  border:1px solid rgba(255,255,255,.5);color:var(--c-white);font-weight:700;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;}
.sf__btn:hover{background:rgba(255,255,255,.12);color:var(--c-white);}
/* ★セレクタは `.sf__nap a{color:var(--c-white)}`(0,2,0) を上回る強さにする。
   --primary は淡い緑面なので文字は必ず濃色（#02201C on #00A497 = 6.4:1）。 */
.sf__nap a.sf__btn{color:var(--c-white);}
.sf__nap a.sf__btn--primary{background:var(--c-main);border-color:var(--c-main);color:var(--c-deeper);font-weight:900;}
.sf__nap a.sf__btn--primary:hover{background:var(--c-white);border-color:var(--c-white);color:var(--c-deeper);}
.sf__nav{display:grid;gap:28px;grid-template-columns:1fr;}
@media (min-width:600px){
  .sf__nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
}
.sf__group{display:flex;flex-direction:column;gap:10px;}
.sf__en{margin:0;font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-sub);}
.sf__nav ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;}
/* 子ページのインデント。罫線＝ヘッダーの階層表現と同じ手つき */
.sf__nav ul.sf__sub{padding-left:14px;border-left:1px solid rgba(255,255,255,.22);}
.sf__nav a{display:inline-flex;align-items:center;min-height:44px;color:#CFE4E0;text-decoration:none;transition:color .2s;}
.sf__nav a:hover{color:var(--c-sub);}
.sf__nav a.sf__lv1{color:var(--c-white);font-weight:700;}
.sf__nav a.sf__minor{font-size:13px;opacity:.8;}
.sf__legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:34px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);font-size:12px;opacity:.72;}
.sf__cp{margin-left:auto;}


/* ===== 受領 renew.css（無改変） ===== */
@charset "utf-8";
/* ============================================================
   S01806 匠商会株式会社 — リニューアル版 トップページ専用スタイル
   ★2026-09-05 全面リニューアル（コンセプト：力強い × かっこいい × さわやか）
   ・既存の下層ページは style.css のまま。混ざらないよう接頭辞は .tk-* に統一した。
   ・配色比率の目安 … 白70% / 濃紺〜チャコール20% / グリーン＆水色10%
     → 面（ベタ塗り）でグリーンを使うのは FVの1枚とCTAの1面だけに絞り、
       それ以外は罫・下線・矢印・小さなラベルなど「線と点」で使う。
   ・角丸は最大2px（シャープに保つ）。
============================================================ */

:root{
  --g1:#00A497;              /* メイン：淡いグリーン */
  --g2:#35C7F8;             /* サブ：明るい水色 */
  --grad:linear-gradient(100deg,#00A497 0%,#35C7F8 100%);   /* 装飾（罫・小さな面）用の明るいグラデーション */
  /* ★白文字を載せる面（ボタン等）用の深いグラデーション。
     明るい側（#35C7F8）に白文字は 1.97:1 しかなく本文サイズでAAを満たせないため、
     同じ色相の流れを保ったまま明度を落としたもの。白文字で 5.4:1〜5.7:1。 */
  --grad-d:linear-gradient(100deg,#00786D 0%,#0E6E93 100%);
  --ink:#0F1D26;            /* 補助：濃いネイビー〜チャコール（本文・背景） */
  --ink-2:#1B2C36;
  --tx:#16242D;             /* 本文文字 */
  --tx-m:#5C6E78;           /* 補助文字（白地で 5.3:1） */
  --line:#E2E8EB;
  --white:#fff;
  --wash:#F5F8F9;           /* ごく淡い面（白の変化用） */
  --g1-tx:#00786D;          /* 白地に置く文字用のグリーン（4.9:1） */
  --wrap:1240px;
  --wide:1560px;
  --gut:clamp(20px,4.4vw,64px);
  --f-jp:"Zen Kaku Gothic New","Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --f-en:"Oswald",var(--f-jp);
  --f-en2:"Montserrat",var(--f-jp);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
/* ★端末ごとに背景色が違って見える原因は、html に地色が無く、
   端末側の自動ダークモード（Android Chrome の強制ダーク等）が既定の白を暗く置き換えること。
   地色を html にも置き、配色を light に固定する。 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  background-color:#fff;color-scheme:light only;}
/* ★PCのダークモードでも白面が暗く反転しないよう、地色を実値で押さえる。
   color-scheme を無視して反転させる環境（拡張機能・強制ダーク）への保険。 */
@media (prefers-color-scheme:dark){
  html,body{background-color:#FFFFFF!important;color:var(--tx)!important;}
  .tk-sec,#concept,.site-sec{background-color:#FFFFFF;}
  .tk-sec--wash,.site-sec--pale{background-color:var(--wash);}
  .tk-sec--dark,.site-sec--deep,.tk-foot{background-color:var(--ink);}
}
@media (forced-colors:active){
  html,body{background-color:#FFFFFF;forced-color-adjust:none;}
}
body{margin:0;background:#FFFFFF;color:var(--tx);font-family:var(--f-jp);
  font-size:16px;font-weight:500;line-height:1.95;letter-spacing:.02em;
  overflow-x:hidden;text-wrap:pretty;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--g1-tx);text-decoration:none;}
a:hover{color:var(--ink);}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--g2);outline-offset:3px;}
.tk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;}
.tk-skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--ink);color:#fff;}
.tk-skip:focus{left:12px;top:12px;}

/* ------------------------------------------------------------ 共通パーツ */
.tk-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.tk-wrap--wide{max-width:var(--wide);}

/* セクション見出し（英字ラベル → 日本語見出し）。英字は小さく、字間を広く。 */
.tk-eyebrow{display:flex;align-items:center;gap:14px;
  font-family:var(--f-en2);font-size:12px;font-weight:600;letter-spacing:.28em;
  color:var(--g1-tx);text-transform:uppercase;}
.tk-eyebrow::before{content:"";width:clamp(28px,4vw,56px);height:2px;background:var(--grad);}
.tk-eyebrow--light{color:var(--g2);}
.tk-h2{margin-top:18px;font-size:clamp(28px,4.4vw,50px);font-weight:900;
  line-height:1.42;letter-spacing:.01em;color:var(--ink);}
/* ★inline-block：行をまたぐと下線が途中で切れて誤植のように見えるため */
.tk-h2 em{display:inline-block;font-style:normal;
  background:linear-gradient(transparent 62%,rgba(53,199,248,.32) 62%);}
.tk-h2--light{color:#fff;}
/* ★抜き文字（FVと同じ作り）。1行目だけに使い、核の行はベタのまま＝可読性の担保。
   狭い幅では画数の多い字が線で埋まるため 900px 以上のときだけ。 */
.tk-outline{display:block;}
@media (min-width:900px){
  @supports ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
    /* ★ストロークは字面の約3%（FVの 66.5px/2.03px と同じ比率）。
       h2 は FV の 2/3 のサイズなので、同じ太さを共用すると画数の多い字が埋まる。 */
    .tk-h2:not(.tk-h2--light) .tk-outline{-webkit-text-fill-color:transparent;
      -webkit-text-stroke:clamp(1.3px,.14vw,1.8px) var(--ink);paint-order:stroke fill;}
    /* 濃色面：線だけの白文字は面に沈むので、薄い塗りを足して面を持たせる */
    .tk-h2--light .tk-outline{-webkit-text-fill-color:rgba(255,255,255,.16);
      -webkit-text-stroke:clamp(1.3px,.14vw,1.8px) #fff;paint-order:stroke fill;}
  }
}
.tk-h3{font-size:clamp(19px,2vw,23px);font-weight:900;line-height:1.5;color:var(--ink);}
.tk-p{font-size:clamp(15px,1.15vw,17px);line-height:2.05;}
.tk-p + .tk-p{margin-top:1.5em;}
.tk-p--light{color:rgba(255,255,255,.92);}
.tk-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.95;font-weight:700;color:var(--ink);}

/* 巨大な英字（背面）。装飾なので読ませない＝ごく薄く。 */
.tk-ghost{position:absolute;font-family:var(--f-en);font-weight:600;
  font-size:clamp(72px,15vw,220px);line-height:.8;letter-spacing:.02em;
  color:var(--ink);opacity:.05;pointer-events:none;user-select:none;white-space:nowrap;}

/* ボタン：角はほぼ立てる。ホバーでグラデーションが左から広がり、矢印が進む。 */
.tk-btn{position:relative;display:inline-flex;align-items:center;gap:14px;
  min-height:60px;padding:0 30px;overflow:hidden;
  border:1px solid var(--ink);border-radius:2px;background:transparent;
  color:var(--ink);font-size:15px;font-weight:700;letter-spacing:.04em;
  transition:color .35s var(--ease),border-color .35s var(--ease);cursor:pointer;}
.tk-btn::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grad-d);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);}
.tk-btn > *{position:relative;z-index:1;}
.tk-btn__arrow{display:inline-block;font-family:var(--f-en2);font-size:15px;
  transition:transform .35s var(--ease);}
.tk-btn:hover{color:#fff;border-color:transparent;}
.tk-btn:hover::before{transform:scaleX(1);}
.tk-btn:hover .tk-btn__arrow{transform:translateX(7px);}
.tk-btn--fill{border-color:transparent;color:#fff;}
.tk-btn--fill::before{transform:scaleX(1);}
.tk-btn--fill:hover::before{background:linear-gradient(100deg,#0E6E93 0%,#00786D 100%);}
.tk-btn--light{border-color:rgba(255,255,255,.5);color:#fff;}
.tk-btn--light:hover{color:var(--ink);}
.tk-btn--light:hover::before{background:#fff;}
.tk-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,42px);}

/* スクロール連動の出現。JS不達でも読めるよう @media(scripting:none) で解除する。 */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-rv="right"]{transform:translateX(-30px);}
[data-rv="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s var(--ease);}
/* 背面の巨大英字：画面に入ったら横からゆっくり滑り込む（装飾なので長め・大きく動かす）
   ★不透明度は動かさない（[data-rv].is-in の opacity:1 が .tk-ghost の薄さを消してしまうため、
     .tk-ghost 側の値をここで固定して打ち消している）。 */
[data-rv="slide"]{transform:translateX(-16%);
  transition:transform 1.6s var(--ease);}
.tk-ghost[data-rv="slide"],
.tk-ghost[data-rv="slide"].is-in{opacity:.05;}
.tk-sec--dark .tk-ghost[data-rv="slide"],
.tk-sec--dark .tk-ghost[data-rv="slide"].is-in{opacity:.06;}
/* 右寄せの背景文字は右から入る */
[data-rv="slide-r"]{transform:translateX(16%);
  transition:transform 1.6s var(--ease);}
.tk-ghost[data-rv="slide-r"],
.tk-ghost[data-rv="slide-r"].is-in{opacity:.05;}
.tk-sec--dark .tk-ghost[data-rv="slide-r"],
.tk-sec--dark .tk-ghost[data-rv="slide-r"].is-in{opacity:.06;}
[data-rv].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);}
[data-rv][data-d="1"]{transition-delay:.12s;}
[data-rv][data-d="2"]{transition-delay:.24s;}
[data-rv][data-d="3"]{transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){
  .tk-fv__ph-in{transform:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;}
  .tk-fv__ph img{animation:none!important;}
  /* ★FVの見出しは .is-ready（JS付与）で立ち上がるので、ここでも必ず解除する */
  .tk-rise > *{transform:none!important;transition:none!important;}
  .tk-fv__fade{opacity:1!important;transform:none!important;transition:none!important;}
}
@media (scripting:none){
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;}
  /* ★JS無効でFVの見出しが消えないように（index.html の noscript と対）*/
  .tk-rise > *{transform:none!important;}
  .tk-fv__fade{opacity:1!important;transform:none!important;}
}

/* ------------------------------------------------------------ ヘッダー
   FV上は透明（白文字）→ スクロールで白背景＋濃色文字。 */
.tk-head{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;}
.tk-head__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  max-width:var(--wide);margin-inline:auto;padding:16px var(--gut);
  transition:padding .4s var(--ease);}
.tk-head.is-stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(15,29,38,.5);}
.tk-head.is-stuck .tk-head__in{padding-block:10px;}

.tk-logo{display:flex;flex-direction:column;gap:3px;margin-right:auto;color:#fff;}
.tk-logo__jp{font-size:clamp(17px,1.5vw,21px);font-weight:900;letter-spacing:.06em;line-height:1;}
.tk-logo__en{font-family:var(--f-en2);font-size:9px;font-weight:600;letter-spacing:.3em;
  line-height:1;opacity:.75;}
.tk-head.is-stuck .tk-logo{color:var(--ink);}
.tk-logo:hover{opacity:.75;}

.tk-nav{display:none;}
@media (min-width:1100px){
  .tk-nav{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,30px);}
}
.tk-nav__item{position:relative;display:flex;}
.tk-nav__link{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 2px;color:#fff;}
.tk-nav__jp{font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1;}
.tk-nav__en{font-family:var(--f-en2);font-size:9px;font-weight:600;letter-spacing:.2em;
  line-height:1;opacity:.6;}
.tk-head.is-stuck .tk-nav__link{color:var(--ink);}
/* 下線はグラデーションで左から */
.tk-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease);}
.tk-nav__item:hover .tk-nav__link::after,
.tk-nav__item:focus-within .tk-nav__link::after{transform:scaleX(1);}
/* ホバー時は文字色を薄いグレーへ（白ヘッダーのときは元の濃色のまま） */
.tk-nav__item:hover .tk-nav__link,
.tk-nav__item:focus-within .tk-nav__link{color:#f5f5f5;}
.tk-head.is-stuck .tk-nav__item:hover .tk-nav__link,
.tk-head.is-stuck .tk-nav__item:focus-within .tk-nav__link{color:var(--ink);}

/* 子ページのプルダウン。親リンクとパネルの間に隙間を作らない（マウスが外れないように）。 */
.tk-sub{position:absolute;top:100%;left:50%;z-index:5;
  width:min(760px,86vw);transform:translateX(-50%);
  padding-top:14px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility .3s var(--ease);}
.tk-nav__item:hover .tk-sub,.tk-nav__item:focus-within .tk-sub{
  opacity:1;visibility:visible;pointer-events:auto;}
.tk-sub__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  grid-auto-rows:1fr; /* ★説明文の行数が違っても4枠の高さを揃える */
  background:var(--line);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 30px 60px -34px rgba(15,29,38,.45);}
.tk-sub__card{display:flex;flex-direction:column;gap:6px;padding:22px 24px;
  background:#fff;color:var(--tx);transition:background .3s var(--ease);}
.tk-sub__card:hover{background:#F5F5F5;color:var(--tx);}
.tk-sub__en{font-family:var(--f-en2);font-size:10px;font-weight:600;letter-spacing:.22em;
  color:var(--g1-tx);}
.tk-sub__t{font-size:16px;font-weight:900;color:var(--ink);}
.tk-sub__d{font-size:13px;line-height:1.85;color:var(--tx-m);}

.tk-head__tel{display:none;}
@media (min-width:1280px){
  .tk-head__tel{display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:#fff;}
  .tk-head.is-stuck .tk-head__tel{color:var(--ink);}
  /* ホバー指定がなかったので追加。白背景（is-stuck）ではグリーン、写真の上では水色寄りに。 */
  .tk-head__tel{transition:color .3s var(--ease),opacity .3s var(--ease);}
  /* ★写真の上では水色が空や明るい面に同化するので、白のままアンダーラインで示す。 */
  .tk-head__tel:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;
    text-decoration-thickness:2px;text-decoration-color:var(--g2);}
  .tk-head.is-stuck .tk-head__tel:hover{color:var(--g1-tx);text-decoration-color:currentColor;}
  .tk-head__tel:hover span{opacity:1;}
  .tk-head__tel b{font-family:var(--f-en);font-size:20px;font-weight:600;letter-spacing:.04em;line-height:1;}
  .tk-head__tel span{font-family:var(--f-en2);font-size:9px;font-weight:600;letter-spacing:.2em;opacity:.7;}
}
.tk-head__cta{position:relative;display:none;overflow:hidden;
  align-items:center;gap:12px;min-height:52px;padding:0 24px;border-radius:2px;
  background:var(--grad-d);color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;}
@media (min-width:900px){ .tk-head__cta{display:inline-flex;} }
.tk-head__cta span{position:relative;z-index:1;}
.tk-head__cta::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#0E6E93,#00786D);opacity:0;transition:opacity .4s var(--ease);}
.tk-head__cta:hover{color:#fff;}
.tk-head__cta:hover::before{opacity:1;}
.tk-head__cta .tk-btn__arrow{transition:transform .35s var(--ease);}
.tk-head__cta:hover .tk-btn__arrow{transform:translateX(6px);}

/* ハンバーガー */
.tk-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:48px;height:48px;padding:0 10px;background:transparent;border:0;cursor:pointer;}
@media (min-width:1100px){ .tk-burger{display:none;} }
.tk-burger span{display:block;height:2px;background:#fff;
  transition:transform .35s var(--ease),opacity .25s var(--ease),background .4s var(--ease);}
.tk-head.is-stuck .tk-burger span{background:var(--ink);}
.tk-burger span:nth-child(2){width:76%;transition:transform .35s var(--ease),opacity .25s var(--ease),background .4s var(--ease),width .3s var(--ease);}
.tk-burger:hover span{background:var(--g2);}
.tk-burger:hover span:nth-child(2){width:100%;}
.tk-head.is-stuck .tk-burger:hover span{background:var(--g1-tx);}
.tk-burger[aria-expanded="true"] span{background:#fff;}
.tk-burger[aria-expanded="true"] span:nth-child(2){width:76%;}
.tk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.tk-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.tk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* モバイルメニュー（全画面） */
.tk-mmenu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  padding:96px var(--gut) 40px;overflow-y:auto;background:var(--ink);
  clip-path:circle(0% at calc(100% - 44px) 40px);
  transition:clip-path .6s var(--ease);}
.tk-mmenu[hidden]{display:none;}
.tk-mmenu.is-open{clip-path:circle(150% at calc(100% - 44px) 40px);}
.tk-mmenu__list{display:flex;flex-direction:column;}
.tk-mmenu__list > li{border-bottom:1px solid rgba(255,255,255,.14);}
.tk-mmenu__list a{display:flex;align-items:baseline;gap:12px;min-height:60px;padding:12px 0;
  color:#fff;font-size:18px;font-weight:700;}
.tk-mmenu__list a:hover{color:var(--g2);}
.tk-mmenu__list em{font-family:var(--f-en2);font-size:10px;font-weight:600;
  letter-spacing:.2em;font-style:normal;color:var(--g2);}
.tk-mmenu__sub{display:flex;flex-wrap:wrap;gap:0 22px;padding:0 0 12px 14px;}
.tk-mmenu__sub a{min-height:48px;font-size:15px;font-weight:500;color:rgba(255,255,255,.82);}
.tk-mmenu__foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.tk-mmenu__tel{display:flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--f-en);font-size:26px;font-weight:600;color:#fff;
  transition:color .3s var(--ease);}
/* 濃色の面なので水色では沈む。白のまま水色のアンダーラインで示す。 */
.tk-mmenu__tel:hover,.tk-mmenu__tel:active{color:#fff;text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--g2);}

/* ------------------------------------------------------------ FV（写真モザイク）
   左に大判、右上にグラデーション面、右下に人物。見出しは境目に重ねる。 */
.tk-fv{position:relative;display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  height:100svh;min-height:600px;max-height:1000px;background:var(--ink);}
.tk-fv__ph{position:relative;overflow:hidden;
  background-size:cover;background-position:center;}
.tk-fv__ph--main{grid-column:1;grid-row:1 / span 2;}
.tk-fv__ph--mid,.tk-fv__ph--side{display:none;}
/* KEEP: FVの低解像度プレビュー（写真が出るまでの繋ぎ）。R-7 で本文HTMLのインラインstyleから移設。消すとFVが一瞬黒い面になる。 */
.tk-fv__ph--main{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAADgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgADgAYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMABAQEBAQEBgQEBgkGBgYJDAkJCQkMDwwMDAwMDxIPDw8PDw8SEhISEhISEhUVFRUVFRkZGRkZHBwcHBwcHBwcHP/bAEMBBAUFBwcHDAcHDB0UEBQdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHf/dAAQAAv/aAAwDAQACEQMRAD8A6Pw5omn6leS/2i0L2NnL5Uts2HeaQ9FYLnMe0glBktna4UBka6kPiOTWLjWYtJ03S9EtYZ7NShe3ne0RDNbfuAqFAQ8YZJeDIvQLsrhfh/8AEObSPC6y6zbGaT7W8Mk0D4bdMzSgKpA+UIp/izu46MWqKf4g3mreArHw1NC1pb34ktkkgky6LBEk8ajKqAWQxq0g+6dxVOFruxeOoc/1us37TWTv3Wy0Wy6fjrc8vA4CtCl9TopKnsrdtbt3e7/rod3FphvdOj1CWTfFcx+WiQyzKEfJMgkC7EkKER7QwZc7iQflxn/8Iyv/AD0k/wC+Y/8A43SvfeJfCtreLouom4sNLZI2julTcfPuJo2clFyxaZG+QMipGcLliCmf/wALJ8X/ANzT/wDvzN/8frnwud4GUHPF03Oo3dt/or6JLQrFZJjYz5MHUUKaVkt/xfVvU//Z");}
.tk-fv__ph--mid{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAEAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAEAAYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMABAQEBAQEBgQEBgkGBgYJDAkJCQkMDwwMDAwMDxIPDw8PDw8SEhISEhISEhUVFRUVFRkZGRkZHBwcHBwcHBwcHP/bAEMBBAUFBwcHDAcHDB0UEBQdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHf/dAAQAAv/aAAwDAQACEQMRAD8A5rxra6dDqFzpUukzjVkX7VKs1zbC0S4nuFQqUK8Rs0wJbzCPObhVXc1QeH9Hl8QWkereHtNsY7l8NHC8KwlMOVBDuFWTON2UPyn5cE8jovEPj4ap4WfXNvneIhajR/s8asPtUtyXaKeI7HEjRD5xExAJLd1QHY1fxpc/D/RT4r1OzYzTXkUMVpNFBHHuVCY3YwuQmFiyFLyHI64AVccNjaUaNOM5WltZvVtaP/O5liMHVlWqSUbxet0tLPVP7tDofEuiN4f8L6VcatYGTTb17e31SJ5yoh+2zxmWSQJI3mCNnkEKp/qncyKS3zDJ/wCEQ/Z4/u/+TV//APHKb408XeHPEHhj7LeYka6Z0i3STwJuCXLQSN/rJHXckOxCrgvgjI2s3zd/Y83/AD2h/wC+7z/5Cr0IyTV2395zJPpb5n//2Q==");}
.tk-fv__ph--side{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAEAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAEAAYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMABAQEBAQEBgQEBgkGBgYJDAkJCQkMDwwMDAwMDxIPDw8PDw8SEhISEhISEhUVFRUVFRkZGRkZHBwcHBwcHBwcHP/bAEMBBAUFBwcHDAcHDB0UEBQdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHf/dAAQAAv/aAAwDAQACEQMRAD8A+l9Y1HSE8Pam1/p08duI2gdrhYRE/mBk6tJsZc8HnnI4ORnyX4UeM/Cvhf4Y+H4PEUrRuVuofMKKI820zAruJCggYA/nzk/KfhL4g6naSjSpbvzdMkeM3FrIGmtyqMnzmEZC8oNzKvTgkAsD6mdfmvJtX0jQxaLp8GhtJNb2cQx/pLrI0flpHGfmT77nIQEncC1duLo4ihL2yqKV7L0WrvY8/CzoVo+zlBxtd+Temhv61qWneIfjto+saYJJNOksZ47WX5ZYpJ40lDFQAy4x5bMhy2wgkAMK9j8vV/7lr/4BR/8Axqvi3QNMu/DvibSdY19ZJ7Kxt572OWJ0ZJI4kYoIJBI0TBJBvILA4OSK9X/4aC8Lf887/wD7+Wf/AMcrw8bh3Uqc0df+HZ6OHr+zhyvQ/9k=");}
/* /KEEP */
.tk-fv__ph-in{position:absolute;inset:0;}
.tk-fv__ph img{width:100%;height:100%;object-fit:cover;
  animation:tk-kb 22s var(--ease) forwards;}
@keyframes tk-kb{from{transform:scale(1.08);}to{transform:scale(1);}}
/* 見出し側だけを暗くする（写真全体を暗くしない＝清潔感を保つ） */
.tk-fv__ph--main::after{content:"";position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(15,29,38,.78) 0%,rgba(15,29,38,.42) 42%,rgba(15,29,38,0) 72%);}
.tk-fv__panel{position:relative;grid-column:2;grid-row:1;overflow:hidden;
  background:var(--grad);}
.tk-fv__panel::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.34),transparent 60%);}
/* ★明るいグラデーション面の上なので文字は濃色（白だと 1.9〜2.6:1 で足りない）。
   #00A497 上で 5.6:1、#35C7F8 上で 9:1。 */
.tk-fv__vert{position:absolute;right:clamp(18px,2vw,34px);top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--f-en);font-size:clamp(12px,1.1vw,15px);
  font-weight:600;letter-spacing:.34em;color:var(--ink);}
.tk-fv__panel-txt{position:absolute;left:clamp(18px,2vw,32px);bottom:clamp(20px,2.4vw,32px);
  max-width:17em;color:#fff;font-size:clamp(13px,1vw,15px);font-weight:700;line-height:1.9;
  word-break:keep-all;line-break:strict;overflow-wrap:anywhere;}

/* ★斜めの面割り（900px 以上）。
   3面を同じマスに重ね、clip-path で頂点を共有させて隙間なく割る。
   左の大判が右へ食い込み、右上／右下の境目も傾ける。 */
@media (min-width:900px){
  .tk-fv > .tk-fv__ph,
  .tk-fv > .tk-fv__panel{grid-area:1 / 1 / -1 / -1;}
  /* ★3面を斜めに割る。境界は同じ傾き（上辺→下辺で 10% 分ずれる）で共有し、
     隙間が出ないよう頂点を一致させる。 */
  .tk-fv__ph--mid,.tk-fv__ph--side{display:block;}
  .tk-fv__ph--main{clip-path:polygon(0 0,42% 0,32% 100%,0 100%);}
  .tk-fv__ph--mid{clip-path:polygon(42% 0,70% 0,60% 100%,32% 100%);}
  .tk-fv__ph--side{clip-path:polygon(70% 0,100% 0,100% 100%,60% 100%);}
  /* 面ごとに写真をずらして、斜めに切っても主題が残るようにする */
  .tk-fv__ph--mid img{object-position:58% 50%;}
  .tk-fv__ph--side img{object-position:60% 45%;}
  /* 交互の出現：左＝上から／中＝下から／右＝上から。
     clip-path を持つ親は動かさず、内側の面だけを動かす。 */
  /* ★止まり際を長く取るイージング（終端で速度が0に近づく）＋
     わずかな縮小を併走させ、面が滑り込んで静止するまでを一続きに見せる。
     will-change で合成レイヤーに乗せ、初動のカクつきを防ぐ。 */
  .tk-fv__ph-in{transform:translateY(-101%) scale(1.06);
    will-change:transform;backface-visibility:hidden;
    transition:transform 1.5s cubic-bezier(.16,.84,.3,1);}
  .tk-fv__ph--mid .tk-fv__ph-in{transform:translateY(101%) scale(1.06);}
  .tk-fv.is-ready .tk-fv__ph-in{transform:translateY(0) scale(1);}
  .tk-fv.is-ready .tk-fv__ph--mid .tk-fv__ph-in{transition-delay:.12s;}
  .tk-fv.is-ready .tk-fv__ph--side .tk-fv__ph-in{transition-delay:.24s;}
  .tk-fv__panel{background:none;box-shadow:none;}
  .tk-fv__vert{color:#fff;}
  /* 面が全面に広がるので、右上の面に載る文はその領域内へ寄せ直す。
     右端は縦組みの社名が占めるので、その帯（約2.6em）分だけ内側へ逃がす。 */
  .tk-fv__panel-txt{left:auto;bottom:auto;
    right:calc(clamp(18px,2vw,34px) + 2.8em);top:clamp(150px,20vh,240px);
    text-align:right;}
  /* ★見出しは面の境目をまたぐため、暗幕を main の中だけに置くと右側で消える。
     FV 全体に1枚敷き直し、写真より上・本文より下のレイヤーに置く。 */
  .tk-fv__ph--main::after{display:none;}
  .tk-fv::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(75deg,rgba(15,29,38,.78) 0%,rgba(15,29,38,.42) 42%,rgba(15,29,38,0) 72%);}
}

.tk-fv__body{position:absolute;left:0;bottom:clamp(74px,11vh,132px);z-index:3;
  width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);
  left:50%;transform:translateX(-50%);}
.tk-fv__label{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-en2);font-size:12px;font-weight:600;letter-spacing:.26em;color:#fff;}
.tk-fv__label::before{content:"";width:34px;height:2px;background:var(--g2);}
.tk-fv__h1{margin-top:20px;color:#fff;font-weight:900;letter-spacing:.01em;}
.tk-fv__h1 span{display:block;}
/* ★くり抜き（白抜きアウトライン）：1行目だけ。2行目はベタ白のまま＝可読性の担保。
   text-stroke 非対応時は通常の白文字にフォールバックする。 */
.tk-fv__h1-a{font-size:clamp(36px,7.2vw,94px);line-height:1.16;}
/* ★狭い幅（36px前後）では画数の多い字が線で埋まって読めないため、
   くり抜きは 900px 以上のときだけ。それ未満はベタ白。 */
@media (min-width:900px){
  @supports ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
    .tk-fv__h1-a{color:transparent;
      -webkit-text-stroke:clamp(2px,.24vw,2.8px) #fff;
      paint-order:stroke fill;}
  }
}
.tk-fv__h1-b{margin-top:.1em;font-size:clamp(40px,8.4vw,112px);line-height:1.1;}
.tk-fv__h1-b em{font-style:normal;position:relative;}
.tk-fv__h1-b em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  background:var(--grad);}
.tk-fv__en{margin-top:clamp(16px,2vw,26px);font-family:var(--f-en);
  font-size:clamp(14px,1.5vw,22px);font-weight:500;letter-spacing:.42em;
  color:var(--g2);}
/* ★BUILT ON SKILL：写真の上を流れる大きな背景英字。
   見出し（z:3）より下、写真より上に置き、抜き文字で写真を潰さない。 */
.tk-fv__marquee{position:absolute;left:0;right:0;bottom:clamp(34px,6vh,76px);z-index:2;
  overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.tk-fv__marquee-tr{display:flex;width:max-content;
  animation:tk-fvmq 26s linear infinite;}
.tk-fv__marquee span{flex:none;padding-right:.34em;
  font-family:var(--f-en);font-size:clamp(56px,9vw,124px);font-weight:800;
  line-height:1;letter-spacing:.06em;white-space:nowrap;
  color:rgba(255,255,255,.14);}
@supports ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
  .tk-fv__marquee span{color:transparent;
    -webkit-text-stroke:1.4px rgba(255,255,255,.42);}
}
@keyframes tk-fvmq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.tk-fv__marquee-tr{animation:none;}}
/* ★狭い幅でも必ず出す（変更禁止のFVキャッチ）。
   下段の帯（社名）と重ならないよう位置を上げ、線を細く・小さくして読めるようにする。 */
@media (max-width:899px){
  /* 社名の帯（.tk-fv__vert）の上に置き、見出しは帯の分だけ持ち上げる */
  .tk-fv__marquee{bottom:clamp(58px,9vh,86px);top:auto;}
  .tk-fv__marquee span{font-size:clamp(30px,7.6vw,58px);letter-spacing:.08em;
    color:rgba(255,255,255,.20);}
  .tk-fv__body{bottom:calc(clamp(58px,9vh,86px) + clamp(30px,7.6vw,58px) + clamp(14px,2vh,24px));}
}
@media (max-width:899px){
  @supports ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
    .tk-fv__marquee span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.62);}
  }
}
/* ★見出しと重ならないよう、帯の高さ分だけ見出しを持ち上げる */
@media (min-width:900px){
  .tk-fv__body{bottom:calc(clamp(34px,6vh,76px) + clamp(56px,9vw,124px) + clamp(18px,2.4vh,34px));}
}

/* 見出しの出現（1行ずつ下から） */
.tk-rise{display:block;overflow:hidden;}
.tk-rise > *{display:block;transform:translateY(105%);
  transition:transform 1s var(--ease);}
.tk-fv.is-ready .tk-rise > *{transform:translateY(0);}
.tk-fv .tk-rise:nth-of-type(2) > *{transition-delay:.14s;}
.tk-fv__fade{opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;}
.tk-fv.is-ready .tk-fv__fade{opacity:1;transform:none;}

.tk-fv__scroll{position:absolute;right:clamp(20px,4vw,52px);bottom:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--f-en2);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:#fff;writing-mode:vertical-rl;}
.tk-fv__scroll::after{content:"";width:1px;height:74px;background:rgba(255,255,255,.4);}
.tk-fv__scroll i{position:absolute;right:-1px;bottom:0;width:1px;height:74px;
  background:var(--g2);transform-origin:top center;animation:tk-sc 2.4s ease-in-out infinite;}
@keyframes tk-sc{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(0);transform-origin:bottom center;}}

@media (max-width:899px){
  .tk-fv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) clamp(110px,20vw,190px);height:100svh;min-height:540px;}
  .tk-fv__ph--main{grid-column:1 / span 2;grid-row:1;}
  .tk-fv__panel{grid-column:1;grid-row:2;}
  .tk-fv__ph--sub{grid-column:2;grid-row:2;}
  .tk-fv__ph--main::after{background:linear-gradient(180deg,rgba(15,29,38,.5) 0%,rgba(15,29,38,.15) 40%,rgba(15,29,38,.82) 100%);}
  .tk-fv__body{bottom:clamp(130px,23vw,215px);}
  .tk-fv__vert{writing-mode:horizontal-tb;right:auto;left:clamp(16px,4vw,24px);
    top:auto;bottom:14px;transform:none;letter-spacing:.28em;font-size:13px;}
  .tk-fv__panel-txt{display:none;}
  .tk-fv__scroll{display:none;}
}

/* ------------------------------------------------------------ NEWS（FV直下の1行） */
.tk-news{background:var(--ink);}
.tk-news__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  max-width:var(--wide);margin-inline:auto;padding:14px var(--gut);min-height:74px;}
.tk-news__badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:84px;min-height:30px;padding:0 12px;background:var(--grad);color:#062421;
  font-family:var(--f-en2);font-size:11px;font-weight:700;letter-spacing:.2em;}
.tk-news__date{font-family:var(--f-en);font-size:16px;font-weight:500;letter-spacing:.06em;
  color:var(--g2);white-space:nowrap;}
.tk-news__title{display:inline-flex;align-items:center;min-height:44px;
  color:#fff;font-weight:700;}
.tk-news__title:hover{color:var(--g2);}
.tk-news__more{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--f-en2);font-size:11px;font-weight:600;letter-spacing:.2em;color:#fff;}
.tk-news__more:hover{color:var(--g2);}
.tk-news__more span{transition:transform .35s var(--ease);}
.tk-news__more:hover span{transform:translateX(6px);}

/* ------------------------------------------------------------ セクションの器 */
.tk-sec{position:relative;padding-block:clamp(76px,10vw,150px);overflow:hidden;}
.tk-sec--wash{background:var(--wash);}
.tk-sec--dark{background:var(--ink);color:rgba(255,255,255,.9);}
.tk-sec--dark .tk-ghost{color:#fff;opacity:.06;}
.tk-sec--flush{padding-block:0;}

/* CONCEPT：左に見出し、右に本文。細い縦罫をグラデーションで。 */
.tk-two{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,72px);}
@media (min-width:900px){
  .tk-two{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
}
.tk-two__body{position:relative;}
@media (min-width:900px){
  .tk-two--rule .tk-two__body{padding-left:clamp(30px,4vw,64px);}
  .tk-two--rule .tk-two__body::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
    width:2px;background:linear-gradient(180deg,#00A497,rgba(53,199,248,0));}
}

/* CONCEPT の写真（下に細いグラデーション帯を敷く） */
.tk-shot{position:relative;margin-top:clamp(34px,4.4vw,64px);}
.tk-shot img{width:100%;aspect-ratio:16/6.4;object-fit:cover;border-radius:2px;}
.tk-shot::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--grad);}
.tk-shot__cap{margin-top:18px;font-family:var(--f-en2);font-size:11px;font-weight:600;
  letter-spacing:.2em;color:var(--tx-m);}

/* ------------------------------------------------------------ WORK：番号つき4枚 */
.tk-works{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(40px,5vw,72px);background:var(--line);}
@media (min-width:700px){ .tk-works{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1200px){ .tk-works{grid-template-columns:repeat(4,minmax(0,1fr));} }
.tk-work{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,34px) clamp(34px,3.4vw,46px);
  background:#fff;overflow:hidden;}
.tk-work__no{font-family:var(--f-en);font-size:13px;font-weight:600;letter-spacing:.2em;
  color:var(--g1-tx);}
.tk-work__t{font-size:clamp(19px,1.7vw,22px);font-weight:900;line-height:1.5;color:var(--ink);}
.tk-work__d{font-size:15px;line-height:1.95;color:var(--tx);}
.tk-work::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);}
.tk-work:hover::after{transform:scaleX(1);}

/* 数字（カウントアップ）：確認できる事実のみ。 */
.tk-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);margin-top:clamp(44px,5vw,76px);
  padding-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line);}
@media (min-width:760px){ .tk-facts{grid-template-columns:repeat(3,minmax(0,1fr));} }
.tk-fact{display:flex;flex-direction:column;gap:6px;}
.tk-fact__en{font-family:var(--f-en2);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:var(--tx-m);}
.tk-fact__n{display:flex;align-items:baseline;gap:8px;
  font-family:var(--f-en);font-size:clamp(44px,6vw,76px);font-weight:600;line-height:1;
  color:var(--ink);}
.tk-fact__n i{font-style:normal;font-family:var(--f-jp);font-size:clamp(15px,1.4vw,18px);
  font-weight:900;color:var(--g1-tx);}
.tk-fact__d{font-size:14px;line-height:1.85;color:var(--tx-m);}

/* ------------------------------------------------------------ SKILL：濃色＋全幅2分割 */
.tk-split{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;}
@media (min-width:900px){
  .tk-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .tk-split--rev .tk-split__ph{order:-1;}
}
.tk-split__ph{position:relative;min-height:clamp(300px,46vw,660px);overflow:hidden;}
.tk-split__ph img{width:100%;height:100%;object-fit:cover;}
.tk-split__txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,7vw,110px) var(--gut);}
@media (min-width:900px){
  .tk-split__txt{padding-inline:clamp(44px,5.4vw,96px);}
  .tk-split__txt--l{padding-left:max(var(--gut),calc((100vw - var(--wide)) / 2 + var(--gut)));}
  .tk-split__txt--r{padding-right:max(var(--gut),calc((100vw - var(--wide)) / 2 + var(--gut)));}
}

/* ------------------------------------------------------------ OPERATOR：朝夕2枚組 */
.tk-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(40px,5vw,70px);}
@media (min-width:760px){ .tk-duo{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tk-duo__cell{position:relative;overflow:hidden;border-radius:2px;background:var(--wash);}
.tk-duo__cell img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s var(--ease);}
.tk-duo__cell:hover img{transform:scale(1.04);}
.tk-duo__tag{position:absolute;left:0;top:0;padding:8px 16px;background:var(--ink);
  color:#fff;font-family:var(--f-en2);font-size:10px;font-weight:600;letter-spacing:.22em;}
.tk-duo__cell image-slot{display:block;width:100%;aspect-ratio:4/3;}

/* ------------------------------------------------------------ RECRUIT：2枚のリンクカード */
.tk-links{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  margin-top:clamp(40px,5vw,70px);background:var(--line);}
@media (min-width:840px){ .tk-links{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tk-link{position:relative;display:flex;flex-direction:column;gap:12px;
  padding:clamp(34px,4vw,56px) clamp(26px,3vw,44px);background:#fff;
  color:var(--tx);overflow:hidden;transition:color .4s var(--ease);}
.tk-link::before{content:"";position:absolute;inset:0;background:var(--grad-d);
  opacity:0;transition:opacity .45s var(--ease);}
.tk-link > *{position:relative;z-index:1;}
.tk-link:hover{color:#fff;}
.tk-link:hover::before{opacity:1;}
.tk-link:hover .tk-link__en,.tk-link:hover .tk-link__t,.tk-link:hover .tk-link__d{color:#fff;}
.tk-link__en{font-family:var(--f-en2);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:var(--g1-tx);transition:color .4s var(--ease);}
.tk-link__t{font-size:clamp(23px,2.6vw,32px);font-weight:900;line-height:1.45;color:var(--ink);
  transition:color .4s var(--ease);}
.tk-link__d{font-size:15px;line-height:1.95;color:var(--tx);transition:color .4s var(--ease);}
.tk-link__go{display:inline-flex;align-items:center;gap:12px;margin-top:8px;min-height:44px;
  font-family:var(--f-en2);font-size:12px;font-weight:600;letter-spacing:.18em;}
.tk-link__go span{transition:transform .35s var(--ease);}
.tk-link:hover .tk-link__go span{transform:translateX(7px);}

/* ------------------------------------------------------------ CTA：唯一のグラデーション面 */
.tk-cta{position:relative;overflow:hidden;background:var(--grad);color:#fff;
  padding-block:clamp(76px,9vw,132px);}
.tk-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 8% 0%,rgba(255,255,255,.3),transparent 55%);}
.tk-cta__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:end;}
@media (min-width:960px){ .tk-cta__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);} }
/* ★グラデーション面（明るい）に白文字を置くとコントラストが取れない（2.2〜2.5:1）ため、
   面は明るいまま文字を濃色（--ink）にする。#00A497 上で 5.6:1、#35C7F8 上で 9:1。 */
.tk-cta__h{font-size:clamp(28px,4.2vw,52px);font-weight:900;line-height:1.4;color:var(--ink);}
.tk-cta__p{margin-top:22px;font-size:clamp(15px,1.15vw,17px);line-height:2.05;color:var(--ink);}
.tk-cta .tk-eyebrow{color:var(--ink);}
.tk-cta .tk-eyebrow::before{background:var(--ink);}
.tk-cta__acts{display:flex;flex-direction:column;gap:14px;}
.tk-cta__btn{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:74px;padding:0 28px;border-radius:2px;overflow:hidden;
  background:var(--ink);color:#fff;font-size:17px;font-weight:900;letter-spacing:.02em;
  transition:color .4s var(--ease);}
.tk-cta__btn::before{content:"";position:absolute;inset:0;background:#fff;
  transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);}
.tk-cta__btn > *{position:relative;z-index:1;}
.tk-cta__btn:hover{color:var(--ink);}
.tk-cta__btn:hover::before{transform:scaleX(1);}
.tk-cta__btn em{font-style:normal;font-family:var(--f-en2);font-size:11px;font-weight:600;
  letter-spacing:.2em;display:block;color:var(--g2);}
.tk-cta__btn:hover em{color:var(--g1-tx);}
.tk-cta__tel{display:flex;flex-direction:column;gap:2px;color:var(--ink);
  transition:color .3s var(--ease);}
.tk-cta__tel:hover{color:var(--g1-tx);}
.tk-cta__tel b{font-family:var(--f-en);font-size:clamp(30px,4vw,42px);font-weight:600;
  letter-spacing:.03em;line-height:1.1;}
/* 透過で弱めない（アルファは面の色を拾ってコントラストが落ちる） */
.tk-cta__tel span{font-size:13px;letter-spacing:.14em;font-weight:700;}

/* ------------------------------------------------------------ BLOG */
.tk-blog{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(40px,5vw,70px);}
@media (min-width:760px){ .tk-blog{grid-template-columns:repeat(3,minmax(0,1fr));} }
.tk-blog__card{display:flex;flex-direction:column;gap:14px;color:var(--tx);}
.tk-blog__thumb{position:relative;overflow:hidden;background:var(--wash);border-radius:2px;}
.tk-blog__thumb image-slot{display:block;width:100%;aspect-ratio:16/10;}
.tk-blog__thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);}
.tk-blog__card:hover .tk-blog__thumb::after{transform:scaleX(1);}
.tk-blog__meta{display:flex;align-items:center;gap:14px;}
.tk-blog__date{font-family:var(--f-en);font-size:15px;font-weight:500;letter-spacing:.06em;
  color:var(--tx-m);}
.tk-blog__tag{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;
  border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--g1-tx);}
.tk-blog__t{font-size:17px;font-weight:900;line-height:1.75;color:var(--ink);}
.tk-blog__card:hover .tk-blog__t{color:var(--g1-tx);}

/* ------------------------------------------------------------ フッター */
.tk-foot{background:var(--ink);color:rgba(255,255,255,.82);
  padding-block:clamp(60px,7vw,96px) 0;}
.tk-foot__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,4vw,64px);}
@media (min-width:900px){
  .tk-foot__cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);}
}
.tk-foot__brand b{display:block;font-size:20px;font-weight:900;letter-spacing:.06em;color:#fff;}
.tk-foot__en{margin-top:6px;font-family:var(--f-en2);font-size:9px;font-weight:600;
  letter-spacing:.3em;color:var(--g2);}
.tk-foot__addr{margin-top:22px;font-size:14px;line-height:2;}
.tk-foot__addr a{color:#fff;}
.tk-foot__addr a:hover{color:var(--g2);}
.tk-foot__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px);}
@media (min-width:700px){ .tk-foot__nav{grid-template-columns:repeat(3,minmax(0,1fr));} }
.tk-foot__gr p{font-family:var(--f-en2);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:var(--g2);}
.tk-foot__gr ul{margin-top:14px;display:flex;flex-direction:column;}
.tk-foot__gr a{display:inline-flex;align-items:center;min-height:40px;
  color:rgba(255,255,255,.88);font-size:15px;font-weight:700;
  word-break:keep-all;line-break:strict;overflow-wrap:anywhere;}
.tk-foot__gr a:hover{color:var(--g2);}
.tk-foot__gr .tk-foot__min a{font-size:13px;font-weight:500;color:rgba(255,255,255,.6);}
/* ★スマホ：2列だと「求職者のみなさまへ」等の長い項目が半幅で折れ、
   さらに3グループが2列に入らず右下に空きが出る。1列に積み、罫線で区切る。 */
@media (max-width:639px){
  .tk-foot__nav{grid-template-columns:minmax(0,1fr);gap:0;}
  .tk-foot__gr{padding-block:16px;border-top:1px solid rgba(255,255,255,.12);}
  .tk-foot__gr:first-child{border-top:0;padding-top:0;}
  .tk-foot__gr ul{margin-top:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;}
  .tk-foot__gr a{min-height:44px;font-size:14px;}
  .tk-foot__gr .tk-foot__min{grid-column:1 / -1;}
}

@media (max-width:639px){
  .tk-foot__addr{margin-top:16px;font-size:13px;line-height:1.95;}
  .tk-foot__brand .tk-btns{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
  .tk-foot__brand .tk-btns .tk-btn{width:100%;justify-content:space-between;}
  .tk-foot__cols{gap:26px;}
}
.tk-foot__legal{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  margin-top:clamp(40px,5vw,70px);padding-block:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;line-height:1.9;color:rgba(255,255,255,.6);}
.tk-foot__cp{margin-left:auto;font-family:var(--f-en2);letter-spacing:.14em;}
@media (max-width:639px){
  .tk-foot__legal{margin-top:26px;font-size:11px;}
  .tk-foot__cp{margin-left:0;}
}

/* ページトップへ */
.tk-top{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:80;
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:2px;background:var(--ink);color:#fff;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;}
.tk-top.is-on{opacity:1;visibility:visible;transform:none;}
.tk-top:hover{background:var(--g1);color:#fff;}


/* ------------------------------------------------------------ CONCEPT の重なり写真
   写真を本文・ボタンの下から重ね上げる。写真の上端は白のグラデーションで抜き、
   重なった範囲の本文が読めるようにしている（本文は写真より上のレイヤー）。 */
#concept{background:#fff;}
#concept .tk-two{position:relative;z-index:1;}
/* ★重なり量 --ov を1か所で持ち、覆いの高さも「--ov ＋ 一定のぼかし幅」で決める。
   図の高さに対する % にすると、キャプション込みの高さや細幅で写真を食い尽くす。 */
/* ★下端と左右は画面いっぱいに出す（上端の白抜きはそのまま）。
   100vw は縦スクロールバー分だけ画面より広くなるため、
   親（.tk-wrap）の左右余白ぶんだけ広げる方式にする。 */
.tk-shot--overlap{--ov:clamp(90px,26vw,240px);--fade:clamp(150px,20vw,320px);
  position:relative;z-index:0;margin-top:calc(-1 * var(--ov));
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-bottom:calc(-1 * clamp(76px,10vw,150px));}
.tk-shot--overlap img{border-radius:0;display:block;}
.tk-shot--overlap::after{display:none;}
.tk-shot--overlap .tk-shot__cap{position:absolute;left:var(--gut);bottom:14px;z-index:3;
  margin:0;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);}
/* 重なる分だけ写真を背高にする（横長のままだと写真が帯のように潰れる） */
.tk-shot--overlap img{aspect-ratio:16/9;object-fit:cover;width:100%;}
@media (max-width:820px){.tk-shot--overlap img{aspect-ratio:4/3;}}
/* 本文が乗る --ov までは白ベタ、そこから --fade で写真へ抜ける */
.tk-shot--overlap::before{content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--ov) + var(--fade));z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#fff 0%,#fff calc(var(--ov) - 12px),
    rgba(255,255,255,.42) calc(var(--ov) + var(--fade) * .45),rgba(255,255,255,0) 100%);}


/* ------------------------------------------------------------ FV：土埃のリビール
   ・実装はフラクタルノイズ（SVGのfeTurbulence）を静止テクスチャとして焼き、
     それを transform で流す方式。毎フレームのフィルタ再計算がないのでスマホでも軽い。
   ・境界を直線にしないため、各層をノイズでマスク＋強めのぼかし。
   ・JSが無い／動きを控える設定では最初から表示（下の @media 参照）。 */
/* ★埃は0.5秒かけて立ち上げる。表示と同時に明るい砂色が全面へ出ると、
     写真が白く一瞬光ったように（フラッシュのように）見える。 */
.tk-dust{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;
  contain:paint;animation:tk-dust-in .5s ease-out both;}
@keyframes tk-dust-in{from{opacity:0;}to{opacity:1;}}
/* ★以前あった全面の土色の膜は廃止（消える瞬間が白い明滅に見えるため）。
   覆いは砂埃の層だけで作り、濃い所と薄い所の差で埃らしさを出す。 */
/* 流れる砂埃。3層で速度・向き・濃さを変えてムラをつくる。 */
/* ★ぼかしとマスクは動かない子（::before）側に置く。transform と同じ要素に filter を
   載せると毎フレームぼかしを再計算してカクつくため、合成だけで動くように分ける。 */
.tk-dust__l{position:absolute;inset:-18%;will-change:transform,opacity;
  transform:translate3d(0,0,0);backface-visibility:hidden;}
/* contrast() でノイズの濃淡を立てる（のっぺりした霧ではなく砂埃の粒感に近づく） */
.tk-dust__l::before{content:"";position:absolute;inset:0;
  background-repeat:no-repeat;filter:blur(16px) contrast(1.7);}
.tk-dust__l--1{animation:tk-dust-a 3.4s linear forwards;}
.tk-dust__l--1::before{background-image:radial-gradient(46% 60% at 30% 55%,rgba(226,216,200,.80),rgba(226,216,200,0) 70%),
    radial-gradient(38% 44% at 62% 38%,rgba(214,204,190,.70),rgba(214,204,190,0) 72%);
  -webkit-mask-image:var(--dust-n1);mask-image:var(--dust-n1);
  -webkit-mask-size:150% 150%;mask-size:150% 150%;}
.tk-dust__l--2{animation:tk-dust-b 3.8s linear forwards;}
.tk-dust__l--2::before{background-image:radial-gradient(52% 52% at 55% 62%,rgba(205,197,186,.78),rgba(205,197,186,0) 68%),
    radial-gradient(34% 38% at 22% 40%,rgba(224,215,202,.66),rgba(224,215,202,0) 70%);
  -webkit-mask-image:var(--dust-n2);mask-image:var(--dust-n2);
  -webkit-mask-size:210% 190%;mask-size:210% 190%;filter:blur(22px) contrast(1.5);}
.tk-dust__l--3{animation:tk-dust-c 3.1s linear forwards;}
.tk-dust__l--3::before{background-image:radial-gradient(60% 40% at 48% 78%,rgba(206,199,188,.7),rgba(206,199,188,0) 72%);
  -webkit-mask-image:var(--dust-n2);mask-image:var(--dust-n2);
  -webkit-mask-size:130% 260%;mask-size:130% 260%;filter:blur(12px) contrast(2);}
@keyframes tk-dust-a{
  0%{transform:translate3d(-14%,2%,0) scale(1.28);opacity:1;}
  40%{transform:translate3d(10%,0,0) scale(1.36);opacity:.9;}
  72%{transform:translate3d(36%,-2%,0) scale(1.46);opacity:.45;}
  100%{transform:translate3d(74%,-5%,0) scale(1.58);opacity:0;}}
@keyframes tk-dust-b{
  0%{transform:translate3d(14%,-3%,0) scale(1.25);opacity:.95;}
  55%{transform:translate3d(-16%,1%,0) scale(1.4);opacity:.55;}
  100%{transform:translate3d(-66%,4%,0) scale(1.55);opacity:0;}}
@keyframes tk-dust-c{
  0%{transform:translate3d(-6%,12%,0) scale(1.18);opacity:.95;}
  45%{transform:translate3d(14%,4%,0) scale(1.3);opacity:.6;}
  100%{transform:translate3d(48%,-8%,0) scale(1.48);opacity:0;}}
/* 埃が晴れるのに合わせて主写真が収まる。
   ★リビールのズームは「枠（.tk-fv__ph）」側に置く。img には元からゆっくりズーム（tk-kb）が
     走っており、同じ要素で animation を差し替えると tk-kb が 0%（scale 1.14）から
     再スタートして一瞬跳ねる。枠と画像で別々に持たせれば入れ替えが起きない。 */
/* ★リビール時の寄り（tk-dust-focus）は削除。埃が晴れる瞬間に枠が縮むため、
     写真が一度アップになってフラッシュのように見えていた。 */
@media (max-width:820px){
  .tk-dust__l--1::before{filter:blur(12px) contrast(1.7);}
  .tk-dust__l--2::before{filter:blur(16px) contrast(1.5);}
  .tk-dust__l--3::before{filter:blur(9px) contrast(2);}
}
@media (prefers-reduced-motion:reduce){
  .tk-fv__ph-in{transform:none!important;transition:none!important;}
  .tk-dust{display:none!important;}
}
@media (scripting:none){.tk-dust{display:none!important;}}


/* ------------------------------------------------------------ SKILL：スクロール連動の固定背景
   ・写真を position:sticky で貼り付け、本文パネルがその上を通り過ぎていく。
     background-attachment:fixed はモバイルで効かないため sticky で組む。
   ・写真は本文の下にあるので、可読性はパネルの面（半透明＋ぼかし）で担保する。 */
.tk-pin{position:relative;background:var(--ink);padding:0;overflow:clip;}
.tk-pin__bg{position:sticky;top:0;height:100svh;overflow:hidden;}
.tk-pin__bg img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);animation:tk-pin-zoom 24s var(--ease) both;}
@keyframes tk-pin-zoom{from{transform:scale(1.14);}to{transform:scale(1.02);}}
/* 上下の締めと、見出し側を落とす斜めのスクリム */
.tk-pin__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,22,20,.62),rgba(4,22,20,.18) 30%,rgba(4,22,20,.30) 62%,rgba(4,22,20,.78));}
/* 本文帯：sticky の写真に重ねる */
.tk-pin__in{position:relative;z-index:1;margin-top:-100svh;
  min-height:100svh;display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(96px,14vw,200px) var(--gut) clamp(120px,16vw,240px);}
.tk-pin__panel{width:min(640px,100%);position:relative;
  padding:clamp(30px,4vw,52px) clamp(24px,3.4vw,48px) clamp(34px,4vw,54px);
  background:rgba(5,24,22,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 30px 90px rgba(0,0,0,.35);}
.tk-pin__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(100deg,#00A497,#35C7F8);}
/* 縦組みの英字（写真側の余白に置く署名） */
.tk-pin__vert{position:absolute;left:var(--gut);top:clamp(96px,14vw,180px);z-index:1;
  margin:0;writing-mode:vertical-rl;font-family:var(--f-en2);font-size:12px;font-weight:600;
  letter-spacing:.42em;color:rgba(255,255,255,.62);pointer-events:none;}
@media (max-width:900px){
  .tk-pin__in{justify-content:center;padding-inline:clamp(16px,4vw,28px);}
  .tk-pin__vert{display:none;}
  .tk-pin__bg img{animation:none;transform:scale(1.04);}
}
@media (prefers-reduced-motion:reduce){
  .tk-fv__ph-in{transform:none!important;transition:none!important;}.tk-pin__bg img{animation:none!important;}}

/* ------------------------------------------------------------ 白面セクションの背景写真
   写真は下端に寄せ、上から白へ抜く。カードが乗る帯は白のままにして可読性を守る。 */
.tk-sec--bg{position:relative;overflow:hidden;}
.tk-sec--bg::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center 68%;
  opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 62%);
  mask-image:linear-gradient(180deg,transparent 6%,#000 62%);}
.tk-sec--bg > *{position:relative;z-index:1;}
@media (max-width:820px){.tk-sec--bg::before{opacity:.10;}}

/* ------------------------------------------------------------ 白面セクションの下半分に敷く背景写真
   写真は下半分だけ。上半分は白のグラデーションで抜き、見出しと本文の可読性を守る。 */
.site-sec--bghalf{position:relative;overflow:hidden;}
.site-sec--bghalf::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center 60%;
  opacity:.30;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  mask-image:linear-gradient(180deg,transparent,#000 55%);}
.site-sec--bghalf > *:not(.site-ghost){position:relative;z-index:1;}
.site-sec--bghalf > .site-wrap{position:relative;z-index:1;}
@media (max-width:820px){.site-sec--bghalf::before{opacity:.18;height:50%;}}
/* 淡色面に敷く場合、上端は面色（淡グリーン）へ抜く */
.site-sec--pale.site-sec--bghalf::before{opacity:.26;}

/* OPERATOR：本文を見出しの右ではなく真下に置く（読み幅は制限する） */
.tk-op__body{margin-top:clamp(26px,3.2vw,44px);max-width:70ch;}

/* OPERATOR：右側に運転席の写真を薄く敷く。
   本文が乗る左側と上端は白へ抜き、可読性を保つ（2枚のマスクを掛け合わせる）。 */
.tk-sec--opphoto{position:relative;overflow:hidden;}
.tk-sec--opphoto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1544/operator-cab-portrait.webp") right center / auto 100% no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 80%),linear-gradient(180deg,transparent 6%,#000 34%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 80%),linear-gradient(180deg,transparent 6%,#000 34%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
.tk-sec--opphoto > .tk-wrap{position:relative;z-index:1;}
@media (max-width:899px){.tk-sec--opphoto::before{opacity:.10;}}

/* ------------------------------------------------------------ FV：スマホは3枚を縦積み
   斜め分割は狭い幅だと主題が切れて乱れるため、等分の横帯3段にする。
   見出しは最下段に重なるので、FV全体に暗幕を1枚敷いてコントラストを確保する。 */
@media (max-width:899px){
  .tk-fv{grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(3,minmax(0,1fr));}
  /* ★3段の高さはそのまま（写真は拡大しない）。境目だけを交互の斜めに切る。
     切り込む分（--sl）だけ内側の面を上下へ伸ばし、隣り合う面と同じ線を共有させる。 */
  .tk-fv{--sl:2.4vh;}
  .tk-fv__ph{grid-column:1;overflow:visible;}
  .tk-fv__ph--main{grid-row:1;
    clip-path:polygon(0 0,100% 0,100% calc(100% + var(--sl)),0 calc(100% - var(--sl)));}
  .tk-fv__ph--main .tk-fv__ph-in{inset:0 0 calc(-1 * var(--sl)) 0;}
  .tk-fv__ph--mid{display:block;grid-row:2;
    clip-path:polygon(0 calc(-1 * var(--sl)),100% var(--sl),100% calc(100% - var(--sl)),0 calc(100% + var(--sl)));}
  .tk-fv__ph--mid .tk-fv__ph-in{inset:calc(-1 * var(--sl)) 0;}
  .tk-fv__ph--side{display:block;grid-row:3;
    clip-path:polygon(0 var(--sl),100% calc(-1 * var(--sl)),100% 100%,0 100%);}
  .tk-fv__ph--side .tk-fv__ph-in{inset:calc(-1 * var(--sl)) 0 0 0;}
  .tk-fv__ph--mid img{object-position:56% 50%;}
  .tk-fv__ph--side img{object-position:60% 45%;}
  /* 面としては使わないが、社名（.tk-fv__vert）を載せる器として残す。
     3段の写真の上に重ね、右端の縦組みだけを見せる。 */
  .tk-fv__panel{grid-column:1;grid-row:1 / -1;background:none;z-index:3;
    pointer-events:none;}
  .tk-fv__panel::after{display:none;}
  .tk-fv__vert{color:#fff;}
  /* main だけに敷いていた暗幕は1段目で終わってしまうので全面に敷き直す */
  .tk-fv__ph--main::after{display:none;}
  .tk-fv::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(15,29,38,.34) 0%,rgba(15,29,38,.18) 34%,rgba(15,29,38,.72) 74%,rgba(15,29,38,.86) 100%);}
  /* 上から順に滑り込む */
  .tk-fv__ph-in{transform:translateY(-101%) scale(1.06);
    will-change:transform;backface-visibility:hidden;
    transition:transform 1.4s cubic-bezier(.16,.84,.3,1);}
  .tk-fv__ph--mid .tk-fv__ph-in{transform:translateY(101%) scale(1.06);}
  .tk-fv.is-ready .tk-fv__ph-in{transform:translateY(0) scale(1);}
  .tk-fv.is-ready .tk-fv__ph--mid .tk-fv__ph-in{transition-delay:.10s;}
  .tk-fv.is-ready .tk-fv__ph--side .tk-fv__ph-in{transition-delay:.20s;}
}

/* ------------------------------------------------------------ CONCEPT：見出し直下の写真2枚
   スクロール直後に写真が入るよう、見出し列に主写真＋小さく重ねた1枚を置く。
   小さい方は右下へ食い込ませ、本文列との境界をまたいでリズムを作る。 */
.tk-cvis{position:relative;margin-top:clamp(26px,3vw,44px);}
.tk-cvis__fig{margin:0;overflow:hidden;background:var(--wash);}
.tk-cvis__fig img{display:block;width:100%;height:100%;object-fit:cover;}
.tk-cvis__fig--a img{aspect-ratio:4 / 3;}
.tk-cvis__fig--b{position:absolute;right:clamp(-64px,-5vw,-20px);bottom:clamp(-40px,-4vw,-18px);
  width:clamp(120px,32%,210px);box-shadow:0 18px 40px rgba(15,29,38,.18);
  border:6px solid #fff;}
.tk-cvis__fig--b img{aspect-ratio:1 / 1;}
@media (max-width:820px){
  .tk-cvis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .tk-cvis__fig--a img{aspect-ratio:1 / 1;}
  .tk-cvis__fig--b{position:static;width:auto;border:0;box-shadow:none;}
}

/* パネルを左に置く版（SKILLの右パネルと対にする）。縦組みの署名は右の余白へ。 */
.tk-pin--left .tk-pin__in{justify-content:flex-start;}
.tk-pin--left .tk-pin__vert{left:auto;right:var(--gut);}
.tk-pin--left .tk-pin__bg::after{
  background:linear-gradient(180deg,rgba(4,22,20,.62),rgba(4,22,20,.18) 30%,rgba(4,22,20,.30) 62%,rgba(4,22,20,.78));}
@media (max-width:900px){.tk-pin--left .tk-pin__in{justify-content:center;}}

/* 固定背景の節に置く背景英字。写真の上なので白の薄い抜きにする。 */
.tk-ghost--pin{position:absolute;left:calc(var(--gut) * -.2);top:clamp(24px,4vw,56px);z-index:1;
  color:rgba(255,255,255,.10);}
.tk-ghost--pin[data-rv="slide"],.tk-ghost--pin[data-rv="slide"].is-in{opacity:1;}

/* ------------------------------------------------------------ CONCEPT：白いパネル版
   SKILL（濃色のガラス面・右）との違いは面の扱いで作る。
   写真は下寄りに沈ませ、パネルは白ベタ＝サイト全体の「白7割」に沿わせる。 */
.tk-pin--paper{background:#fff;}
.tk-pin--paper .tk-pin__bg::after{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 34%,rgba(4,22,20,.24) 74%,rgba(4,22,20,.42));}
.tk-pin--paper .tk-pin__panel{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 40px 90px rgba(15,29,38,.22);}
.tk-pin--paper .tk-ghost--pin{color:rgba(15,29,38,.10);}
.tk-pin--paper .tk-pin__vert{color:rgba(255,255,255,.78);
  top:auto;bottom:clamp(96px,14vw,180px);}


/* ===== 受領 renew-theme.css（無改変） ===== */
@charset "utf-8";
/* ============================================================
   S01806 匠商会株式会社 — 下層ページ用テーマ（★2026-09-05）
   トップのリニューアル（renew.css）と同じ世界観を下層11ページへ適用する。
   読み込み順は  style.css → renew.css → renew-theme.css。
   ・style.css の構造・レイアウトはそのまま使い、ここでは
     「トークン（色・書体・版面）」と「見出し／ボタン／下層ヒーローの表情」だけを上書きする。
     → 各ページのマークアップは一切触っていない（原稿・構成は不変）。
   ・配色比率は白70% / 濃紺〜チャコール20% / グリーン＆水色10% を維持。
============================================================ */

:root{
  /* 色：濃色面をネイビー〜チャコールへ。淡面はごく淡いグレーへ（緑の面積を減らす） */
  --c-deep:      #0F1D26;
  --c-deeper:    #0A1620;
  --c-pale:      #F5F8F9;
  --c-ink:       #16242D;
  --c-mut:       #5C6E78;
  --c-line:      #E2E8EB;
  --c-main-tx:   #00786D;

  /* 版面：トップと同じ幅・ガター */
  --wrap-wide:   1560px;
  --wrap-text:   980px;
  --gut:         clamp(20px,4.4vw,64px);

  /* 書体：日本語 Zen Kaku Gothic New ／ 欧文 Oswald（見出し）・Montserrat（ラベル） */
  --f-body:      "Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --f-en:        "Oswald","Zen Kaku Gothic New",sans-serif;
  --f-en2:       "Montserrat","Zen Kaku Gothic New",sans-serif;

  --t-h2-core:   clamp(28px,4.4vw,50px);
  --t-h2-lead:   clamp(17px,1.9vw,24px);
  --t-ghost:     clamp(72px,15vw,220px);
  --ease-r:      cubic-bezier(.22,.61,.36,1);
}

body{font-family:var(--f-body);font-weight:500;line-height:1.95;color:var(--c-ink);
  background:#fff;letter-spacing:.02em;}

/* ------------------------------------------------------------ 下層ヒーロー帯
   固定ヘッダーの下に潜らないよう上余白を確保。ページ名は帯をやめて白文字＋グラデーション罫。 */
.subpage-header{background:var(--c-deep);
  padding:clamp(118px,15vw,196px) 0 clamp(44px,5.4vw,80px);}
/* ★2026-09-05 下層ヘッダーの背景英字は非表示（ページ名の英字ラベルと重複するため） */
.subpage-header__ghost{display:none;}
/* ★写真入りのページヘッダー。--sh-img に画像を渡すと薄く敷く。
   濃色の面（--c-deep）に重ねるので、白文字のコントラストは背景に依存しない。 */
.subpage-header--photo{position:relative;overflow:hidden;}
.subpage-header--photo::before{content:"";position:absolute;inset:0;
  background-image:var(--sh-img);background-size:cover;background-position:center 62%;
  opacity:.22;}
.subpage-header--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,164,151,.30),rgba(53,199,248,.14) 55%,transparent);}
/* ★子孫すべてに position を当てると、絶対配置のゴースト文字が流れに戻って帯が伸びる。
   本文ラッパだけを持ち上げ、ゴーストは元の absolute を保つ。 */
.subpage-header--photo::before,
.subpage-header--photo::after{z-index:0;}
.subpage-header--photo > .subpage-header__inner{position:relative;z-index:2;}
.subpage-header--photo > .subpage-header__ghost{z-index:1;}
.subpage-header__en{display:flex;align-items:center;gap:14px;
  font-family:var(--f-en2);font-size:12px;font-weight:600;letter-spacing:.28em;
  color:var(--c-sub);}
.subpage-header__en::before{content:"";width:clamp(28px,4vw,56px);height:2px;
  background:linear-gradient(100deg,#00A497,#35C7F8);}
.subpage-header .subpage-header__title{display:block;padding:0;background:none;
  color:#fff;font-size:clamp(30px,5vw,60px);line-height:1.35;letter-spacing:.01em;}
.subpage-header__inner{position:relative;}
.subpage-header__inner::after{content:"";display:block;width:clamp(64px,8vw,120px);height:3px;
  margin-top:clamp(20px,2.4vw,30px);background:linear-gradient(100deg,#00A497,#35C7F8);}

/* パンくず */
.p-breadcrumb__inner{max-width:var(--wrap-wide);margin-inline:auto;padding:16px var(--gut);
  display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--c-mut);}
.p-breadcrumb__item a{color:var(--c-mut);text-decoration:none;}
.p-breadcrumb__item a:hover{color:var(--c-main-tx);}

/* ------------------------------------------------------------ セクション */
.site-sec{padding-block:clamp(76px,10vw,150px);}
.site-sec--tight{padding-block:clamp(64px,8vw,120px);}
.site-sec--pale{background:var(--c-pale);}
.site-sec--deep{background:var(--c-deep);}
.site-ghost{font-family:var(--f-en);font-weight:600;letter-spacing:.02em;
  color:var(--c-deep);opacity:.05;}
.site-sec--deep .site-ghost{color:#fff;opacity:.06;}
/* ★背景英字のスライドイン。[data-rv].is-in の opacity:1 が薄さを消すので、
   .site-ghost 側の不透明度をここで固定して打ち消す（トップの .tk-ghost と同じ扱い）。 */
.site-ghost[data-rv="slide"],.site-ghost[data-rv="slide"].is-in,
.site-ghost[data-rv="slide-r"],.site-ghost[data-rv="slide-r"].is-in{opacity:.05;}
.site-sec--deep .site-ghost[data-rv="slide"],
.site-sec--deep .site-ghost[data-rv="slide"].is-in,
.site-sec--deep .site-ghost[data-rv="slide-r"],
.site-sec--deep .site-ghost[data-rv="slide-r"].is-in{opacity:.06;}
/* 右端に固定する背景英字 */
.site-ghost--right{left:auto;right:0;}
/* 流れ続ける背景英字（マーキー）。同じ文字列を2本並べ、-50% までずらして繰り返す。 */
.site-ghost--marquee{left:0;right:0;display:flex;width:100%;overflow:hidden;}
.site-ghost--marquee > span{flex:none;padding-right:.18em;
  animation:tk-ghost-marquee 34s linear infinite;}
@keyframes tk-ghost-marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (prefers-reduced-motion:reduce){.site-ghost--marquee > span{animation:none;}}

/* 英字ラベル：トップと同じ「短い罫＋Montserrat」 */
.site-eyebrow{display:flex;align-items:center;gap:14px;
  font-family:var(--f-en2);font-size:12px;font-weight:600;letter-spacing:.28em;
  color:var(--c-main-tx);text-transform:uppercase;}
.site-eyebrow::before{content:"";width:clamp(28px,4vw,56px);height:2px;
  background:linear-gradient(100deg,#00A497,#35C7F8);}
.site-sec--deep .site-eyebrow{color:var(--c-sub);}

/* 見出し：帯（面）をやめて、核段は濃色文字＋水色のマーカー罫 */
.site-h2{line-height:1.42;}
.site-h2__lead{font-weight:900;color:var(--c-deep);}
.site-sec--deep .site-h2__lead{color:#fff;}
.site-h2 span.site-h2__core{display:inline;padding:0;background:none;
  color:var(--c-deep);line-height:1.42;
  background-image:linear-gradient(transparent 62%,rgba(53,199,248,.32) 62%);}
.site-sec--pale .site-h2 span.site-h2__core{background:none;
  background-image:linear-gradient(transparent 62%,rgba(53,199,248,.32) 62%);}
.site-sec--deep .site-h2 span.site-h2__core{background:none;color:#fff;
  background-image:linear-gradient(transparent 62%,rgba(53,199,248,.4) 62%);}
/* ★トップと同じ抜き文字。修飾句段（17〜26px）は細くて潰れるので核段に施す。
   マーカー罫は残し、字だけを線に。狭幅は塗りのまま（画数の多い字が埋まる）。 */
@media (min-width:900px){
  @supports ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
    .site-h2 span.site-h2__core{-webkit-text-fill-color:transparent;
      -webkit-text-stroke:clamp(1.3px,.13vw,1.7px) var(--c-deep);paint-order:stroke fill;}
    /* ★濃色面の核段は抜き文字にしない。水色マーカーの上に白の細線＋薄い塗りだと
       約2:1しかなく、そのセクションで最も大きい字が最も読みにくくなる。ベタ白で置く。 */
    .site-sec--deep .site-h2 span.site-h2__core{-webkit-text-fill-color:#fff;
      -webkit-text-stroke:0;}
  }
}
.site-h3{color:var(--c-deep);}

/* ------------------------------------------------------------ ボタン
   1px罫＋左からグラデーションが広がり、矢印が進む（トップと同じ挙動）。
   矢印はマークアップを触らずに ::after で足す。 */
.site-btns{gap:14px;margin-top:clamp(28px,3vw,42px);}
.site-btn{position:relative;overflow:hidden;justify-content:flex-start;gap:14px;
  min-height:60px;padding:0 30px;border-width:1px;border-color:var(--c-deep);
  color:var(--c-deep);font-size:15px;letter-spacing:.04em;background:transparent;
  transition:color .35s var(--ease-r),border-color .35s var(--ease-r);z-index:0;}
/* ★白文字を載せる面は深いグラデーション（--grad-d 相当）。明るい側に白文字は 1.97:1 で不足。 */
.site-btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#00786D,#0E6E93);
  transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-r);}
.site-btn::after{content:"→";font-family:var(--f-en2);font-size:15px;
  transition:transform .35s var(--ease-r);}
.site-btn:hover{background:transparent;color:#fff;border-color:transparent;}
.site-btn:hover::before{transform:scaleX(1);}
.site-btn:hover::after{transform:translateX(7px);}
.site-btn--primary{border-color:transparent;color:#fff;background:transparent;}
.site-btn--primary::before{transform:scaleX(1);}
.site-btn--primary:hover{background:transparent;color:#fff;}
.site-btn--primary:hover::before{background:linear-gradient(100deg,#0E6E93,#00786D);}
.site-sec--deep .site-btn{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;}
.site-sec--deep .site-btn:hover{color:var(--c-deep);background:transparent;}
.site-sec--deep .site-btn:hover::before{background:#fff;transform:scaleX(1);}
.site-sec--deep .site-btn--primary{border-color:transparent;color:#fff;}
.site-sec--deep .site-btn--primary::before{background:linear-gradient(100deg,#00786D,#0E6E93);transform:scaleX(1);}
/* 濃色面の白カード内は通常配色へ（style.css の意図を保つ） */
.site-sec--deep .site-card .site-btn,
.site-sec--deep .site-step .site-btn,
.site-sec--deep .site-linkcard .site-btn{border-color:var(--c-deep);color:var(--c-deep);}
.site-sec--deep .site-card .site-btn:hover,
.site-sec--deep .site-step .site-btn:hover,
.site-sec--deep .site-linkcard .site-btn:hover{color:#fff;background:transparent;}
.site-sec--deep .site-card .site-btn:hover::before,
.site-sec--deep .site-step .site-btn:hover::before,
.site-sec--deep .site-linkcard .site-btn:hover::before{
  background:linear-gradient(100deg,#00786D,#0E6E93);transform:scaleX(1);}

/* ------------------------------------------------------------ カード・囲み
   角はほぼ立てる。ホバーで下辺にグラデーションが伸びる（トップの .tk-work と同じ）。 */
.site-card,.site-step,.site-linkcard,.site-tick{position:relative;border-radius:2px;}
.site-card,.site-linkcard{overflow:hidden;}
.site-card::after,.site-linkcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(100deg,#00A497,#35C7F8);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-r);}
.site-card:hover::after,.site-linkcard:hover::after{transform:scaleX(1);}

/* 定義リスト・表・数値カード：罫を淡いグレーへ */
.site-defs__item dt,.site-facts__n{color:var(--c-deep);}
.site-facts__n{font-family:var(--f-en);font-weight:600;}
.site-defs__item dt{font-weight:900;}

/* ブログ・お知らせのカード */
.site-blog__date{font-family:var(--f-en);font-weight:500;}
.site-blog__tag{border-radius:0;}
.site-blog__title,.site-blog__t{color:var(--c-deep);}

/* フォーム（お問い合わせ） */
.site-form__input{border-radius:2px;}
.site-form__req{background:linear-gradient(100deg,#00A497,#35C7F8);color:#062421;}
.site-contact__box{background:var(--c-pale);}
.site-contact__tel{font-family:var(--f-en);font-weight:600;}

/* ------------------------------------------------------------ 出現アニメーション
   site.js が付ける [data-reveal] の見え方をトップと揃える（イージングと距離だけ）。 */
[data-reveal]{transition-duration:.9s;transition-timing-function:var(--ease-r);}

/* ------------------------------------------------------------ 濃色面の右下に敷く透かし写真
   装飾なので aria から外し、本文より下のレイヤーに置く（本文は .site-sec__head/__body で z 上げ済み）。 */
.site-sec--wm{position:relative;overflow:hidden;}
.site-sec--wm__img{position:absolute;right:0;bottom:0;z-index:0;
  width:clamp(300px,44vw,660px);opacity:.16;pointer-events:none;user-select:none;
  mask-image:linear-gradient(120deg,transparent,#000 42%);
  -webkit-mask-image:linear-gradient(120deg,transparent,#000 42%);}
@media (max-width:820px){.site-sec--wm__img{opacity:.10;}}

/* ------------------------------------------------------------ セクション背景の透かし写真
   --bg-img に画像を渡す。白面に薄く敷き、上から白のグラデーションで本文の可読性を守る。 */
.site-sec--bgphoto{position:relative;overflow:hidden;}
/* ★全面に薄く敷くと本文の背後が一様に灰色になり、白いもやのように見えて読みにくい。
   写真は右側だけに置き、本文が乗る左側は白のまま抜く。 */
.site-sec--bgphoto::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:auto 96%;
  background-position:right -4% bottom;background-repeat:no-repeat;
  opacity:.20;
  /* 横（左を抜く）と縦（下端を抜く）の2枚を掛け合わせる。
     縦のフェードがないと、次の濃色セクションとの境目で写真が直線に切れる。 */
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 78%),linear-gradient(180deg,#000 52%,transparent 96%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 78%),linear-gradient(180deg,#000 52%,transparent 96%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
@media (max-width:900px){.site-sec--bgphoto::before{opacity:.10;background-size:auto 70%;}}
.site-sec--bgphoto > .site-wrap{position:relative;z-index:1;}

/* 番号（01〜04）：淡色すぎて読めないので、ブランドのグリーンを効かせた濃さに上げる */
.site-tick__num{color:#8FC9C2;}
.site-sec--pale .site-tick__num{color:#7BBDB5;}
.site-sec--deep .site-tick__num{color:rgba(255,255,255,.42);}

/* 2列組みの見出しは列幅が狭く、11字の句が中途で折れて2字だけの行が出る。
   その列だけ核段を一段小さくして、指定した位置（＜br＞）でだけ折れるようにする。 */
@media (max-width:1180px){
  .site-state__main .site-h2 span.site-h2__core{font-size:clamp(24px,3.6vw,40px);}
}

/* 濃色面の背景写真：暗く落として敷き、上から濃色のグラデーションで文字の下を守る */
.site-sec--bgdark{position:relative;overflow:hidden;}
.site-sec--bgdark::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center 55%;
  opacity:.22;filter:grayscale(.35);}
.site-sec--bgdark::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(11,32,41,.72),rgba(11,32,41,.42) 55%,rgba(11,32,41,.86));}
@media (max-width:820px){.site-sec--bgdark::before{opacity:.14;}}

/* 背景写真を敷いた濃色面では、既定の濃さだと背景英字が沈む。マーキーだけ濃さと速度を上げる */
.site-sec--bgdark .site-ghost--marquee{opacity:.20;z-index:0;}
.site-sec--bgdark .site-ghost--marquee > span{animation-duration:26s;}
@media (max-width:820px){.site-sec--bgdark .site-ghost--marquee{opacity:.16;}}
/* 文字色は元から白。読みにくさの原因は枠の地色が透明（5%）で、背後の写真の明暗が
   そのまま文字に重なっていたこと。枠自体を濃い面にして写真から切り離す。 */
.site-sec--bgdark .site-voice{margin-top:clamp(24px,4.5vw,80px);
  background:rgba(9,28,36,.96);backdrop-filter:blur(4px);
  border-left:3px solid var(--c-main);}
/* ★影を掛けると文字が暗くくすんで読みにくいので外し、
   代わりに枠の地色を濃くしてコントラストを取る（.site-voice 側で指定）。 */
.site-sec--bgdark .site-voice__item{color:#fff;-webkit-text-fill-color:#fff;opacity:1;
  text-shadow:none;font-weight:800;}
@media (max-width:900px){.site-sec--bgdark .site-voice{margin-top:0;}}

/* 電話番号：枠の中央に置き、スマホのアイコンを添える */
.site-cta__label{text-align:center;}
.site-cta__tel{display:flex;align-items:center;justify-content:center;gap:.4em;}
.site-cta__telicon{width:.72em;height:.72em;flex:none;}

/* 指定した語だけ抜き文字にする。濃色面では線を太めにし、薄い塗りで面を持たせて沈みを防ぐ */
.site-h2__hollow{display:inline;}
@media (min-width:900px){
  @supports (-webkit-text-stroke:1px #fff){
    .site-sec--deep .site-h2 .site-h2__hollow{-webkit-text-fill-color:rgba(255,255,255,.22);
      -webkit-text-stroke:clamp(1.6px,.18vw,2.4px) #fff;paint-order:stroke fill;}
  }
}

/* 淡色面の背景写真：下端に寄せ、上へ抜く。見出しと本文が乗る上半分は地色のまま。 */
.site-sec--bgpale{position:relative;overflow:hidden;}
.site-sec--bgpale::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center 62%;
  opacity:.15;
  -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 60%);
  mask-image:linear-gradient(180deg,transparent 8%,#000 60%);}
@media (max-width:820px){.site-sec--bgpale::before{opacity:.09;}}
.site-sec--bgpale > .site-wrap{position:relative;z-index:1;}

/* ------------------------------------------------------------ 背景写真のパララックス
   background-attachment:fixed で、スクロールに対して背景だけが遅れて動く。
   写真の上に面色の薄い膜を重ね、本文の可読性を確保する。
   ★iOS は fixed を無視するので、狭幅では scroll に戻す（拡大された背景が破綻するため）。 */
.site-sec--para{position:relative;overflow:hidden;}
.site-sec--para::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center;
  background-attachment:fixed;}
.site-sec--para::after{content:"";position:absolute;inset:0;z-index:0;
  background:rgba(240,250,249,.86);}
/* ★position は上書きしない。背景英字（.site-ghost）は absolute で位置を決めているため、
   relative に変えると left/right の指定が効かなくなる。 */
.site-sec--para > *{z-index:1;}
.site-sec--para > .site-wrap{position:relative;}
@media (max-width:900px){
  .site-sec--para::before{background-attachment:scroll;}
  .site-sec--para::after{background:rgba(240,250,249,.90);}
}

/* ------------------------------------------------------------ 縦長セクションの右下に置く人物写真
   .site-sec--bgphoto は背景高さがセクション高さ基準のため、縦長セクションでは
   写真が過剰に拡大される。こちらは下部に一定高さで置き、写真が収まる形にする。 */
.site-sec--bgfig{position:relative;overflow:hidden;}
.site-sec--bgfig::before{content:"";position:absolute;right:0;bottom:0;z-index:0;
  height:min(460px,42%);width:min(640px,58%);
  background-image:var(--bg-img);background-repeat:no-repeat;
  background-size:contain;background-position:right bottom;
  opacity:.22;
  -webkit-mask-image:linear-gradient(100deg,transparent,#000 42%);
  mask-image:linear-gradient(100deg,transparent,#000 42%);}
.site-sec--bgfig > *{position:relative;z-index:1;}
@media (max-width:900px){.site-sec--bgfig::before{display:none;}}

/* 白面に全面で薄く敷く背景写真（下半分に寄せず、白の膜で全体を落とす） */
.site-sec--bgsoft{position:relative;overflow:hidden;}
.site-sec--bgsoft::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center 62%;}
.site-sec--bgsoft::after{content:"";position:absolute;inset:0;z-index:0;
  background:rgba(255,255,255,.88);}
.site-sec--bgsoft > *{z-index:1;}
.site-sec--bgsoft > .site-wrap{position:relative;}
@media (max-width:900px){.site-sec--bgsoft::after{background:rgba(255,255,255,.91);}}
.site-sec--bgsoft > .site-wrap{z-index:1;}

/* 下層ページの背景英字は動きが分かるよう振り幅を大きめに（トップは .tk-ghost 側で -16%）。
   ★初期状態には transition を掛けない。CSS の適用が最初の描画より後になると、
     「中央→端へ滑って戻る」二度動きになるため（実測: 0〜800ms で左へ移動していた）。 */
.site-ghost[data-rv="slide"]{transform:translateX(-26%);transition:none;}
.site-ghost[data-rv="slide-r"]{transform:translateX(26%);transition:none;}
.site-ghost[data-rv="slide"].is-in,
.site-ghost[data-rv="slide-r"].is-in{transform:none;
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1);}

/* ------------------------------------------------------------ 給与レンジのバー：左から伸びる
   昇給の向きを動きで示す。JS が動かない場合は .site-js が付かないので全幅のまま。 */
.site-js .site-range[data-reveal] .site-range__bar{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.22,.61,.36,1);}
.site-js .site-range[data-reveal].is-in .site-range__bar{transform:scaleX(1);transition-delay:.25s;}
@media (prefers-reduced-motion:reduce){
  .site-js .site-range[data-reveal] .site-range__bar{transform:none;transition:none;}
}

/* ------------------------------------------------------------ 4項目が順に浮き上がる
   親（.site-sub[data-reveal]）が画面に入ったら、各枠を DOM 順に少し遅らせて浮かせる。
   ★初期状態に transition を掛けない（CSS適用が最初の描画より後だと二度動きになる）。 */
.site-js .site-defs--float > .site-defs__item{opacity:0;transform:translateY(22px);}
.site-js [data-reveal].is-in .site-defs--float > .site-defs__item{opacity:1;transform:none;
  transition:opacity .7s ease-out,transform .7s cubic-bezier(.22,.61,.36,1);}
.site-js [data-reveal].is-in .site-defs--float > .site-defs__item:nth-child(2){transition-delay:.12s;}
.site-js [data-reveal].is-in .site-defs--float > .site-defs__item:nth-child(3){transition-delay:.24s;}
.site-js [data-reveal].is-in .site-defs--float > .site-defs__item:nth-child(4){transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){
  .site-js .site-defs--float > .site-defs__item{opacity:1;transform:none;}
}

/* 6枠が順に浮き上がる（.site-defs--float と同じ考え方） */
.site-js .site-cards--float > .site-card{opacity:0;transform:translateY(22px);}
.site-js .site-cards--float.is-in > .site-card{opacity:1;transform:none;
  transition:opacity .7s ease-out,transform .7s cubic-bezier(.22,.61,.36,1);}
.site-js .site-cards--float.is-in > .site-card:nth-child(2){transition-delay:.10s;}
.site-js .site-cards--float.is-in > .site-card:nth-child(3){transition-delay:.20s;}
.site-js .site-cards--float.is-in > .site-card:nth-child(4){transition-delay:.30s;}
.site-js .site-cards--float.is-in > .site-card:nth-child(5){transition-delay:.40s;}
.site-js .site-cards--float.is-in > .site-card:nth-child(6){transition-delay:.50s;}
@media (prefers-reduced-motion:reduce){
  .site-js .site-cards--float > .site-card{opacity:1;transform:none;}
}

/* 一日の流れ：5枠が順に浮き上がる */
.site-js .site-steps--float > .site-step{opacity:0;transform:translateY(22px);}
.site-js .site-steps--float.is-in > .site-step{opacity:1;transform:none;
  transition:opacity .7s ease-out,transform .7s cubic-bezier(.22,.61,.36,1);}
.site-js .site-steps--float.is-in > .site-step:nth-child(2){transition-delay:.12s;}
.site-js .site-steps--float.is-in > .site-step:nth-child(3){transition-delay:.24s;}
.site-js .site-steps--float.is-in > .site-step:nth-child(4){transition-delay:.36s;}
.site-js .site-steps--float.is-in > .site-step:nth-child(5){transition-delay:.48s;}
@media (prefers-reduced-motion:reduce){
  .site-js .site-steps--float > .site-step{opacity:1;transform:none;}
}

/* 転職で見ていること：4枠が順に少し浮く */
.site-js .site-listcards--float > li{opacity:0;transform:translateY(18px);}
.site-js [data-reveal].is-in .site-listcards--float > li{opacity:1;transform:none;
  transition:opacity .6s ease-out,transform .6s cubic-bezier(.22,.61,.36,1);}
.site-js [data-reveal].is-in .site-listcards--float > li:nth-child(2){transition-delay:.10s;}
.site-js [data-reveal].is-in .site-listcards--float > li:nth-child(3){transition-delay:.20s;}
.site-js [data-reveal].is-in .site-listcards--float > li:nth-child(4){transition-delay:.30s;}
@media (prefers-reduced-motion:reduce){
  .site-js .site-listcards--float > li{opacity:1;transform:none;}
}

/* ABOUT US：背景英字の上に余白が空いて見えるので、この節だけ上を詰める */
.site-sec--ghosttight{padding-top:clamp(28px,4vw,56px);}
.site-sec--ghosttight .site-ghost{top:clamp(-22px,-2.2vw,-8px);}

/* 「重機を動かしてみたい」等の3項目：節に入ると順に少し浮く */
.site-js .site-voice > li{opacity:0;transform:translateY(18px);}
.site-js .site-voice.is-in > li{opacity:1;transform:none;
  transition:opacity .6s ease-out,transform .6s cubic-bezier(.22,.61,.36,1);}
.site-js .site-voice.is-in > li:nth-child(2){transition-delay:.12s;}
.site-js .site-voice.is-in > li:nth-child(3){transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){.site-js .site-voice > li{opacity:1;transform:none;}}

/* 背景英字が本文の枠と重なる節：英字を節の上端に置き、
   その字高（--t-ghost × line-height .86）分だけ本文を下げる。
   同じ値から導くので、幅が変わっても重ならない。 */
.site-sec--ghostclear{padding-top:calc(var(--t-ghost) * .86 + clamp(20px,2.4vw,40px));}
.site-sec--ghostclear .site-ghost{top:0;}

/* .site-btn は矢印を ＜span class="site-btn__arrow"> で持つ。::after の矢印と二重になるため消す。 */
.site-btn__arrow ~ *:empty{display:none;}
.site-btn:has(.site-btn__arrow)::after{content:none;}

/* VALUES：3項目が節に入ると順に少し浮く */
.site-js .site-values > li{opacity:0;transform:translateY(20px);}
.site-js .site-values.is-in > li{opacity:1;transform:none;
  transition:opacity .65s ease-out,transform .65s cubic-bezier(.22,.61,.36,1);}
.site-js .site-values.is-in > li:nth-child(2){transition-delay:.12s;}
.site-js .site-values.is-in > li:nth-child(3){transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){.site-js .site-values > li{opacity:1;transform:none;}}

/* OPERATOR（重機オペレーターの魅力）：右側に運転席の写真を薄く敷き、
   上部と本文が乗る左側は白へ抜く（トップの同名クラスとは別画像なのでここで上書き）。 */
.site-sec--opphoto{position:relative;overflow:hidden;}
.site-sec--opphoto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1544/story-cab-right.webp") right center / auto 100% no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 80%),linear-gradient(180deg,transparent 6%,#000 34%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 80%),linear-gradient(180deg,transparent 6%,#000 34%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
.site-sec--opphoto > .site-wrap{position:relative;z-index:1;}
@media (max-width:899px){.site-sec--opphoto::before{opacity:.10;}}

/* 背景英字を節の上端にぴたりと付ける。
   ★.site-ghost は流し込み（position:relative）なので、節の上パディングの分だけ下がる。
     絶対配置に切り替えて上端へ寄せ、抜けた分は節の上パディングで補う。 */
.site-sec--ghosttop{padding-top:calc(var(--t-ghost) * .86 + clamp(20px,2.4vw,40px));}
.site-sec--ghosttop .site-ghost{position:absolute;left:0;
  top:calc(var(--t-ghost) * -.14);}

/* ------------------------------------------------------------ 表：スマホは横スクロールをやめて縦積み
   min-width:640px のままだと画面幅に収まらず右が見切れる（横スクロールに気づきにくい）。
   2列（項目／内容）の表なので、1行を1ブロックにして項目を上・内容を下に置く。 */
@media (max-width:767px){
  .site-table{overflow-x:visible;}
  .site-table table{min-width:0;width:100%;display:block;border:1px solid var(--c-line);}
  .site-table thead{display:none;}
  .site-table tbody{display:block;}
  .site-table tbody tr{display:block;}
  .site-table tbody tr + tr{border-top:1px solid var(--c-line);}
  .site-table tbody th,
  .site-table tbody td{display:block;width:auto;border:0;padding:12px 16px;
    white-space:normal;overflow-wrap:anywhere;}
  .site-table tbody th,
  .site-table tbody td:first-child{background:var(--c-pale);padding-bottom:10px;}
  .site-table tbody td:first-child strong{color:var(--c-ink);}
  .site-table tbody td:last-child{padding-top:10px;}
}

/* スマホ：見出し直下の枠なし本文（一日の仕事の流れ 等）に余白を持たせる。
   段落が詰まって並ぶと、下のカード群との切れ目が分からず見栄えが悪い。 */
@media (max-width:767px){
  .site-sec__body{margin-top:18px;}
  .site-sec__body > .site-p{margin-top:0;margin-bottom:14px;line-height:2.0;}
  .site-sec__body > .site-p:last-child{margin-bottom:0;}
  .site-sec__body + .site-wrap,
  .site-wrap + .site-wrap--wide{margin-top:26px;}
}

/* カード内の最終段落の下に余白を少し（文章が枠の底に張り付いて見えるのを防ぐ） */
.site-card > .site-p:last-child,
.site-step > .site-p:last-child{padding-bottom:10px;}
@media (max-width:767px){
  .site-card > .site-p:last-child,
  .site-step > .site-p:last-child{padding-bottom:14px;}
}

/* STEP ラベル（入社後のステップ）。番号はカードの先頭に置く。 */
.site-steps__label{margin:clamp(24px,3vw,40px) 0 clamp(14px,1.6vw,20px);
  font-family:var(--f-en,inherit);font-size:14px;font-weight:700;letter-spacing:.16em;
  color:var(--c-main-tx);}
.site-sec--deep .site-steps__label{color:rgba(255,255,255,.86);}
.site-step__no{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--c-main-tx);}
.site-step__no strong{font-weight:700;}

/* 入社後のステップ：スマホのみ、文章だけ少し内側へ寄せる（見出しは動かさない）。
   狭幅では .site-step の左右パディングが 0 になり、文章が端の罫線に触れる。 */
@media (max-width:679px){
  .site-steps .site-step > .site-p,
  .site-cards .site-card > .site-p{padding-left:12px;padding-right:12px;}
}

/* ------------------------------------------------------------ 役割つき横組みの段（WORK STYLE）
   横3枚だと分量差（2段／2段／6段）で下端が大きくずれる。左＝役割＋見出し、右＝本文の
   横組みにすると段ごとに高さが決まり、長短の差が目立たない。 */
.site-rows--role{display:grid;gap:0;margin-top:clamp(26px,3vw,44px);}
.site-rows--role .site-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  grid-template-rows:min-content 1fr;
  column-gap:clamp(20px,3vw,52px);row-gap:0;align-items:start;
  padding:clamp(24px,3vw,40px) 0;border-top:1px solid rgba(255,255,255,.16);}
.site-rows--role .site-row:last-child{border-bottom:1px solid rgba(255,255,255,.16);}
/* ★役割ラベルと見出しを1列目に固定する（包まずに grid-column を明示）。
   自動配置のままだと見出しが右列、本文が左列の2行目へ落ちる。 */
.site-rows--role .site-card__role{grid-column:1;margin:0 0 10px;}
.site-rows--role .site-h3{grid-column:1;grid-row:2;margin:0;align-self:start;}
.site-rows--role .site-row__body{grid-column:2;grid-row:1 / span 2;}
.site-rows--role .site-row__body > .site-p{margin:0 0 12px;}
.site-rows--role .site-row__body > .site-p:last-child{margin-bottom:0;}
.site-js .site-rows--role .site-row{opacity:0;transform:translateY(20px);}
.site-js [data-reveal].is-in.site-rows--role .site-row{opacity:1;transform:none;
  transition:opacity .65s ease-out,transform .65s cubic-bezier(.22,.61,.36,1);}
.site-js [data-reveal].is-in.site-rows--role .site-row:nth-child(2){transition-delay:.12s;}
.site-js [data-reveal].is-in.site-rows--role .site-row:nth-child(3){transition-delay:.24s;}
@media (max-width:767px){
  .site-rows--role .site-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:14px;}
  .site-rows--role .site-card__role,
  .site-rows--role .site-h3,
  .site-rows--role .site-row__body{grid-column:1;grid-row:auto;}
}
@media (prefers-reduced-motion:reduce){
  .site-js .site-rows--role .site-row{opacity:1;transform:none;}
}

/* ------------------------------------------------------------ 一続きの文章＋写真（WORK STYLE）
   草案どおり文章を分断せず流し、右に写真2枚（大＋小）を添えて単調さを避ける。 */
.site-prose{margin-top:clamp(26px,3vw,44px);}
.site-prose__text > .site-p{margin:0 0 clamp(14px,1.6vw,20px);max-width:52ch;}
.site-prose__text > .site-p:last-child{margin-bottom:0;}
.site-prose__text > .site-p--lead{margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--c-line);}
.site-prose__media{position:sticky;top:clamp(90px,12vh,130px);}
.site-prose__fig{margin:0;overflow:hidden;}
/* 実寸 3:2 のまま出す（cover のトリミングで被写体が切れるのを避ける） */
.site-prose__fig img{display:block;width:100%;height:auto;}
@media (max-width:899px){
  .site-prose{grid-template-columns:minmax(0,1fr);}
  .site-prose__media{position:static;}
}

/* WORK STYLE：右側に写真を薄く敷き、上部と本文が乗る左側は白へ抜く */
.site-sec--wsphoto{position:relative;overflow:hidden;}
.site-sec--wsphoto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1544/workstyle-talk.webp") right bottom / auto 74% no-repeat;
  opacity:.42;
  /* 下端は節の縁に密着させる（抜かない）。
     ★写真の上辺は節の 26% 付近にあるため、そこで完全に透明になるよう
       26%→75% の長いグラデーションにしてラインを消す。 */
  -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 62%),linear-gradient(180deg,transparent 26%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.55) 58%,#000 78%);
  mask-image:linear-gradient(90deg,transparent 20%,#000 62%),linear-gradient(180deg,transparent 26%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.55) 58%,#000 78%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
.site-sec--wsphoto > .site-wrap{position:relative;z-index:1;}
@media (max-width:899px){.site-sec--wsphoto::before{opacity:.18;}}

/* ------------------------------------------------------------ 空セルのグレー面を出さない
   .site-cards/.site-steps は器の背景（--c-line）＋gap:1px で罫線を描くため、
   項目数が列数で割り切れないと空セルがグレーの面として残る。

   STEP（5段）＝横組みの段にする。行ごとに高さが決まるので空セルが構造上できない。 */
.site-steps--rows{grid-template-columns:minmax(0,1fr) !important;background:transparent;gap:0;}
.site-steps--rows .site-step{display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);
  grid-template-rows:min-content 1fr;
  column-gap:clamp(16px,2.6vw,44px);row-gap:0;align-items:start;
  padding:clamp(22px,2.6vw,34px) 0;background:transparent;
  border-top:1px solid var(--c-line);}
.site-steps--rows .site-step:last-child{border-bottom:1px solid var(--c-line);}
/* ★本文は .site-step__body でまとめ、左列（番号＋見出し）と2列に分ける。
   段落を直接置くと自動配置で行が増え、見出しの縦位置が段落数に引きずられる。 */
.site-steps--rows .site-step__no{grid-column:1;grid-row:1;margin:0 0 8px;align-self:start;}
.site-steps--rows .site-step .site-h3{grid-column:1;grid-row:2;margin:0;align-self:start;}
/* DAY のように番号がない段は、見出しを最上段へ */
.site-steps--rows .site-step:not(:has(.site-step__no)) .site-h3{grid-row:1;}
.site-steps--rows .site-step:not(:has(.site-step__no)) .site-step__body{grid-row:1 / span 1;}
/* ★本文は見出し（補助作業 など）の行から始める＝番号の行ではなく2行目に置く */
.site-steps--rows .site-step__body{grid-column:2;grid-row:2;}
.site-steps--rows .site-step__body > .site-p{margin:0 0 12px;}
.site-steps--rows .site-step__body > .site-p:last-child{margin-bottom:0;}
@media (max-width:767px){
  .site-steps--rows .site-step{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:10px;}
  /* ★:not(:has()) 側のほうが詳細度が高く、この打ち消しが効かずに
       見出しと本文が同じマスに重なっていた。同じ形で書いて上書きする。 */
  .site-steps--rows .site-step__no,
  .site-steps--rows .site-step .site-h3,
  .site-steps--rows .site-step__body,
  .site-steps--rows .site-step:not(:has(.site-step__no)) .site-h3,
  .site-steps--rows .site-step:not(:has(.site-step__no)) .site-step__body{
    grid-column:1;grid-row:auto;}
}

/* POINT（6枚）＝列数を明示（6は3・2・1で割り切れる） */
.site-cards--6{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1023px){.site-cards--6{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:739px){.site-cards--6{grid-template-columns:minmax(0,1fr);}}

/* ★横組みの段は枠の白背景をなくしたので、濃色セクション（DAY）では文字を白系にする */
.site-sec--deep .site-steps--rows .site-step{border-color:rgba(255,255,255,.16);}
.site-sec--deep .site-steps--rows .site-step:last-child{border-bottom-color:rgba(255,255,255,.16);}
.site-sec--deep .site-steps--rows .site-h3{color:#fff;}
.site-sec--deep .site-steps--rows .site-step__no{color:rgba(255,255,255,.72);}
.site-sec--deep .site-steps--rows .site-step__body .site-p{color:rgba(255,255,255,.9);}
.site-sec--deep .site-steps--rows .site-step__body .site-p strong{color:#fff;}

/* ============================================================
   テンプレート合わせ（★2026-09-11）
   ・ブログ一覧＝2列カード＋右サイドバー
   ・お問い合わせ＝帯見出し＋左ラベル／右入力の行組み
   ・応募フォーム＝ラベル上・入力下の縦組み
   ============================================================ */

/* ---- ブログ一覧：本文＋サイドバー ---- */
.site-bloglayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(24px,3vw,48px);align-items:start;}
.site-blog--2col{grid-template-columns:repeat(2,minmax(0,1fr));}
.site-side{display:grid;gap:clamp(20px,2.4vw,28px);margin-top:clamp(28px,3.4vw,44px);}
.site-side__block{border:1px solid var(--c-line);}
.site-side__head{margin:0;padding:12px 16px;background:var(--c-deep);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.04em;}
.site-side__list,.site-side__cats{margin:0;padding:0;list-style:none;}
.site-side__list li + li,.site-side__cats li + li{border-top:1px solid var(--c-line);}
.site-side__list a{display:grid;gap:4px;padding:14px 16px;text-decoration:none;color:var(--c-deep);}
.site-side__list time{font-family:var(--f-en);font-size:12px;letter-spacing:.06em;color:var(--c-ink);}
.site-side__list span{font-size:14px;font-weight:700;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.site-side__list a:hover span,.site-side__cats a:hover{color:var(--c-main-tx);}
.site-side__cats a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;text-decoration:none;color:var(--c-deep);font-size:14px;font-weight:700;}
.site-side__count{min-width:34px;padding:2px 0;background:var(--c-pale);
  font-family:var(--f-en);font-size:12px;text-align:center;color:var(--c-ink);}
@media (max-width:1023px){
  .site-bloglayout{grid-template-columns:minmax(0,1fr);}
  .site-side{margin-top:0;}
}
@media (max-width:599px){
  .site-blog--2col{grid-template-columns:minmax(0,1fr);}
}

/* ---- 帯見出し（電話／メール） ---- */
.site-band{margin-top:clamp(26px,3vw,40px);padding:14px 20px;
  background:linear-gradient(100deg,#00A497,#35C7F8);color:#062421;
  font-size:clamp(15px,1.5vw,17px);font-weight:700;letter-spacing:.06em;text-align:center;}
/* 帯の直下の一文。淡色の本文色だと読みづらいので濃色＋太字で出す。 */
.site-band__note{margin-top:14px;color:var(--c-deep);font-weight:700;}
.site-band__note a{color:var(--c-main-tx);font-family:var(--f-en);font-size:1.1em;
  text-decoration:underline;text-underline-offset:3px;}

/* ---- フォーム共通の補助 ---- */
.site-form__labelbox{display:grid;gap:6px;}
.site-form__note{margin:0;font-size:12px;line-height:1.8;color:#B3261E;}
.site-form__help{margin:6px 0 0;font-size:12px;line-height:1.8;color:var(--c-ink);}
.site-form__file{display:block;width:100%;padding:10px 12px;
  border:1px solid var(--c-line);background:#fff;font:inherit;font-size:14px;border-radius:2px;}
.site-form__addr{display:grid;grid-template-columns:auto 150px minmax(0,1fr);
  gap:10px;align-items:center;}
.site-form__mark{font-size:15px;color:var(--c-ink);}
.site-btns--center{justify-content:center;}
@media (max-width:599px){
  .site-form__addr{grid-template-columns:auto minmax(0,1fr);}
  .site-form__addr .site-form__input:last-child{grid-column:1 / -1;}
}

/* ---- お問い合わせ：左ラベル／右入力 ---- */
/* ★.site-contact の2列（フォーム＋右のTEL枠）の中なので、ラベル列は 1100px 以上でのみ横並びにする。
     768px で 220px を固定すると入力欄が潰れる。 */
@media (min-width:1100px){
  .site-form--table .site-form__row{display:grid;grid-template-columns:190px minmax(0,1fr);
    gap:clamp(16px,2vw,28px);align-items:start;}
  .site-form--table .site-form__row--check{grid-template-columns:minmax(0,1fr);}
  .site-form--table .site-form__label{padding-top:10px;}
  .site-form--table .site-form__labelbox .site-form__label{padding-top:0;}
}

/* ---- 応募フォーム：ラベル上・入力下 ---- */
.site-entry{max-width:760px;margin:clamp(28px,3.4vw,44px) auto 0;}
.site-form--stack .site-form__row{gap:10px;}

/* ---- お問い合わせ：テンプレート準拠の3列組み（ラベル／必須／入力） ---- */
.site-form--rows{gap:clamp(18px,2.2vw,26px);}
.site-form--rows .site-form__input{background:var(--c-pale);border-color:transparent;}
.site-form--rows .site-form__input:focus{background:#fff;}
.site-form__checks{display:flex;flex-wrap:wrap;gap:10px 22px;}
.site-band__caution{color:#B3261E;font-weight:700;}
@media (min-width:820px){
  .site-form--rows .site-form__row{display:grid;
    grid-template-columns:230px 56px minmax(0,1fr);
    gap:clamp(12px,1.4vw,20px);align-items:start;}
  .site-form--rows .site-form__row--check{grid-template-columns:minmax(0,1fr);}
  .site-form--rows .site-form__label{padding-top:10px;}
  .site-form--rows .site-form__labelbox .site-form__label{padding-top:0;}
  .site-form--rows .site-form__req{margin-left:0;align-self:start;margin-top:10px;
    justify-content:center;width:100%;}
}

/* ============================================================
   レスポンシブ調整（★2026-09-11 全ページ確認）
   ・背景英字（.site-ghost）が節の外へ出て横スクロールが生じていたので節側で切る
   ・FVの写真面も同様に切る
   ============================================================ */
/* ★詳細度の高い節クラス（--para/--deep/--bgphoto など）に負けるので、
     セレクタを重ねて必ず切る。clip なら sticky/parallax を壊さない。 */
.site-sec,
section.site-sec,
#site-main > .site-sec{overflow-x:clip;}
.tk-fv,.tk-fv__ph{overflow:hidden;}
@media (max-width:899px){
  /* 画面外へ逃がす余白をやめ、節の内側に収める */
  .site-ghost{left:0;}
  .site-ghost--right{left:auto;right:0;}
}

/* タップ領域：スマホ・タブレットでは 48px を確保する */
@media (max-width:1023px){
  .site-btn,.site-cat,.site-pager__item{min-height:48px;}
  .site-form__input,.site-form__file{min-height:48px;}
  .site-form__textarea{min-height:180px;}
  .site-side__list a,.site-side__cats a{min-height:48px;}
}


/* ============================================================
   ★コード化で追加（受領CSSは上で無改変。ここだけがコード化の差分）
   ============================================================ */

/* (1) FVの土埃ノイズ。受領はインラインstyleで持っていた（R-25対応でここへ移した）。
       値は受領のデータURIそのまま。 */
.tk-dust{--dust-n1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.017' numOctaves='4' seed='11'/%3E%3C/filter%3E%3Crect width='760' height='760' filter='url(%23n)'/%3E%3C/svg%3E");--dust-n2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.008' numOctaves='3' seed='29'/%3E%3C/filter%3E%3Crect width='760' height='760' filter='url(%23n)'/%3E%3C/svg%3E")}

/* (2) トップのFV写真面が、スマホ・タブレットで切り取られないようにする。
       受領のトップは renew.css しか読み込まないため renew-theme.css の
       「.tk-fv,.tk-fv__ph{overflow:hidden}」は当たっていなかったが、追加CSS欄では
       3本が1本に連結されるので、renew.css の
       「@media(max-width:899px){.tk-fv__ph{overflow:visible}}」より後ろに来て勝ってしまう。
       写真は各面の箱からわざと少しはみ出させて重なりを作る設計なので、受領どおりに戻す。
       ★親側の .tk-fv{overflow:hidden} はそのまま残す（打ち消さない）。
         これはデザイナーが「FVの写真面も節の外へ出さないよう切る」と書いた指定で、
         実測すると 768px/390px で FV の中身が 20px 横にはみ出しており、
         切らないと横スクロールが出る。切っても h1・マーキー・スクロール表示は
         すべて FV の内側にあるため欠けない（2026-09-15 実測）。 */
@media (max-width:899px){
  .tk-fv__ph{overflow:visible;}
}

/* (3) 固定ヘッダーの実高さ（R-18）。CueZillaが描画するシステムページ
       （ブログ/フォーム/送信完了/404/下層ヘッダーパーツ）が固定ヘッダーの下へ
       潜り込まないよう skin が calc() で足すための値。
       ★実測（2026-09-15 / playwright・受領 work.html の .tk-head の実高さ）:
         1440px=89px / 1024px=85px / 900px=85px / 768px=81px / 390px=81px
         .is-stuck（スクロール後）でも高さは変わらない。 */
:root{ --fixed-header-h: 89px; }
@media (max-width:1024px){ :root{ --fixed-header-h: 85px; } }
@media (max-width:768px){ :root{ --fixed-header-h: 81px; } }

/* (4) ブログ一覧ボタンだけの節（05c）の上下余白を詰める。
       CueZillaブログパーツの直後に置くため、通常の節の余白では空きすぎる。 */
.tk-sec--tightbtn{padding-block:clamp(24px,3vw,44px);}


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

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

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

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

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

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

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

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

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


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

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

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

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


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


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


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

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


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

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


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

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

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


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

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

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

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



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


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


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

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


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


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

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


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


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


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


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


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


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

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


/* ===== 29_override.css ===== */
/* 29_override.css … 案件の上書き専用（R-30）。
   結合順は site(20_site.css) → skin(cuezilla-skin.css) → override(このファイル)。
   skin は !important で当てているので、skin に勝たせたくない指定だけをここに書く。
   ★skin 本体は絶対に編集しない（共通資産から切り離されて以後の共通修正が届かなくなる）。
   ★動的パーツ（ブログ一覧・フォーム）の崩れ対策は、実機で harvestEW() を採って
     実DOMを見てから足すこと（R-28。受領HTMLから投機で書かない）。

   ★★★ このファイルは【フォーム】【ブログ一覧・記事詳細】【トップのブログ枠】の3系統が同居している。
        2026-09-16 に **2回**、古いコピーを土台にした上書きでブログ側が全部消えた（10:39 と 11:21）。
        実機ではカテゴリボタンのBladeだけが先に入っているため、**消えるとブログ一覧が崩れる**。
        編集前に必ず最新版を Read し、自分が触らない側の節を消さないこと（CLAUDE.md 共有ファイル編集ルール）。
        復旧用の控え: 2_Claude作業/_backup/29_override_最新.css */

/* パンくず … skin §1 が --dyn-* で地色と文字色を !important で当てる。
   受領デザインは薄い地色（--c-pale）＋補助文字色で組んでいるので、そちらへ戻す。
   受領 style.css の .p-breadcrumb / renew-theme.css の .p-breadcrumb__item a と同じ値。 */
/* ★CueZilla の自動パンくずパーツを消す（R-10a）。本文側に受領の埋め込みパンくず
   （schema.org BreadcrumbList 付き）を残しているので、消さないと2本出る。
   2026-09-15 実機採取の採番 = parts231。自前側は decompose がこのクラス名を外してあるため
   この指定では消えない（外し忘れると自前も一緒に消えるので、分解側の処理とセット）。 */
.parts231_breadcrumb{ display:none !important; }
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--c-pale) !important; }
.p-breadcrumb__item a{ color:var(--c-mut) !important; }
.p-breadcrumb__item a:hover{ color:var(--c-main-tx) !important; }
.p-breadcrumb__item:last-child{ color:var(--c-ink) !important; }

/* フォーム（parts213 お問い合わせ / parts219 応募）を受領デザインへ寄せる。
   2026-09-16 実機採取（R-28: 投機で書かない）:
     section.parts213_section_form ＞ div.parts213_form_wrap ＞ dl ＞ dt(span.required) ＋ dd ＞ 入力欄
   受領は独自構造（site-form の行グリッド）でDOMが別物なので、CSSだけで見た目を合わせる。
   受領実測: 行グリッド 230px+56px / 434px・行間26px・ラベル15px/900・必須バッジはグラデ地に
   #062421 の11px/700・入力欄は地色 --c-pale / 枠線透明 / 角丸2px / 最小高52px・本文欄は最小高180px。
   ★CueZilla の自動CSSは (0,3,0)+!important で当ててくるので !important が要る（R-28）。
   ★採番に依存しないよう接尾辞で拾う（parts213 も parts219 も同じ接尾辞）。 */
/* ★左右の余白を殺さないこと。実機の既定は padding:30px 25px 60px で、0 にすると
   スマホでフォームが画面端に貼り付く（2026-09-16 ディレクター指摘）。受領は版面 --gut（20px〜64px）。 */
[class*="_section_form"]{ background:transparent !important; padding:0 var(--gut) 60px !important; }
[class*="_form_wrap"]{ width:100% !important; max-width:760px !important; margin-inline:auto !important; }
/* ★寸法は受領に寄せるが、固定幅にはしない（長いラベル・狭い枠でも崩れないことを優先）。
   列は minmax で縮められるようにし、dt/dd に min-width:0 を入れて溢れを防ぐ。 */
[class*="_form_wrap"] dl{ display:grid !important;
  grid-template-columns:minmax(0,286px) minmax(0,434px) !important;
  gap:20px !important; align-items:start !important; margin:0 0 26px !important; }
[class*="_form_wrap"] dt{ display:flex !important; align-items:flex-start !important; gap:10px !important;
  flex-wrap:wrap !important; min-width:0 !important; width:auto !important; max-width:none !important;
  padding:10px 0 0 !important;
  font-size:15px !important; font-weight:900 !important; color:var(--c-deep) !important; }
[class*="_form_wrap"] dd{ min-width:0 !important; width:auto !important; max-width:none !important;
  margin:0 !important; }
[class*="_form_wrap"] .required{ background:var(--grad) !important; border-radius:0 !important;
  padding:2px 8px !important; font-size:11px !important; font-weight:700 !important;
  letter-spacing:.08em !important; color:#062421 !important; min-height:0 !important; }
/* ★入力欄は skin §7 が [class*="_form_wrap"] dd input:not(...):not(...) ＝(0,3,2) で当てている。
   同じ形にしないと詳細度で負ける（2026-09-16 モック計測で実証。地色・最小高・padding が skin のまま残った）。 */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd textarea, [class*="_form_wrap"] dd select{
  width:100% !important; padding:12px 16px !important; background:var(--c-pale) !important;
  border:1px solid transparent !important; border-radius:2px !important; min-height:52px !important;
  font-size:16px !important; font-weight:400 !important; color:var(--c-ink) !important; }
[class*="_form_wrap"] dd textarea{ min-height:180px !important; }
/* 送信ボタン。★.contact_submit は“囲い”で、ボタン本体ではない（skin も中の button/input に当てている）。
   囲いに地色を塗ると全幅のグラデ帯になるので、見た目は中の要素だけに当てる。
   受領実測: 囲いは中央寄せ・最終行から 46px あけている（囲いの margin-top 28px ＋ 行間 18px）。 */
/* ★左右マージンを明示的に0にすること。実機は .contact_submit に margin:46px 17px 0、
   ボタンに Bootstrap の .mx-2（左右8px）が付いていて、版面より34px内側に入る＝
   入力欄（335px）とボタン（301px）で幅が揃わない（2026-09-16 実機プレビューで実測）。 */
/* ★width:100% を必ず指定すること。実機は .contact_submit に width:301px が効いていて、
   親が760pxあるのに枠が301pxしかなく、200pxのボタン2つが折り返して縦2段になる
   （2026-09-16 実機プレビュー PC1920で実測）。 */
[class*="_form_wrap"] .contact_submit{ margin:46px 0 0 !important; width:100% !important;
  display:flex !important; justify-content:center !important; gap:16px !important;
  flex-wrap:wrap !important;
  background:none !important; border:0 !important; padding:0 !important; }
/* Googleマップ埋め込み（会社概要）。貼られる iframe は width="600" height="450" の固定寸法つきで、
   そのままだと版面からはみ出す／スマホで横スクロールが出る（2026-09-16 ディレクター報告）。
   ★aspect-ratio は height が auto のときだけ効く。iframe の height 属性は presentational hint として
     height プロパティに入るので、height:auto を併記しないと比率指定が無視される。
   ★min-height は保険。R-27 のサニタイズで aspect-ratio が落ちても地図が潰れないようにする。
   ★セレクタは src で拾うので、本文に素の iframe を直接貼った場合にも効く。
   ★上の余白は囲い（.site-map）ではなく iframe 自身に持たせる。本文へ素の iframe を直接
     貼った場合（実機 2026-09-16 は p.site-p の中に直貼り）にも効かせるため。
     実測では直前の会社概要テーブルに隙間0でくっついていた。 */
.site-map iframe, iframe[src*="google.com/maps"]{
  display:block !important; width:100% !important; max-width:100% !important;
  height:auto !important; aspect-ratio:16/9 !important; min-height:260px !important;
  border:0 !important; margin:clamp(20px,2.4vw,28px) 0 0 !important; }

/* reCAPTCHA。Google のウィジェットは固定幅304pxで、内側のdivが margin:0 auto で中央寄せになる。
   入力欄は左揃えなので中央寄せだけが浮いて見える（2026-09-16 実機プレビューで実測: 版面335pxの中で
   左右15.5pxずつ空いていた）。dl と同じ列組みに載せて、入力欄の左端に揃える。
   ★幅304pxは Google 側の固定でCSSでは変えられない。揃うのは「左端」まで。
   ★入力欄の列（2列目）へ揃えるのは試したが、PCで右に寄りすぎて浮いた（ディレクター指摘）。
     送信ボタンと同じ「中央」に置き、スマホだけ版面の左端に寄せる。 */
[class*="_form_wrap"] .g-recaptcha{ display:flex !important; justify-content:center !important;
  margin:0 0 26px !important; }
[class*="_form_wrap"] .g-recaptcha > div{ margin:0 !important; }

/* 注意書き（.attention）を赤にする（2026-09-16 ディレクター指示）。
   ・.attention は CueZilla 側のクラスで、受領デザインには存在しない（受領HTMLに出現0件）。
     skin §7 が var(--dyn-muted) のグレーにしているので、ここで上書きする。
   ・受領の配色に赤が無いため #C8382E は新規値。コントラストは白地 5.17:1 ／
     入力欄の地色 #F5F8F9 上 4.80:1 で、いずれも WCAG AA（4.5:1）を満たす。 */
.attention, [class*="_form_wrap"] .attention{ color:#C8382E !important; }

/* ★確認画面はボタンが2つ（戻る／送信）並ぶ。両方をグラデ地にすると同じ重みの塊が2つ重なって不格好。
   受領の作り（主＝グラデ地・副＝枠線のみ）に合わせ、name="back" を副ボタンとして分ける。
   skin §7 も back を副扱いにしているが、こちらが後に来るので明示的に除外＋指定し直す。
   幅は内容なりにして横並び（全幅の帯が縦に2本積まれるのを防ぐ）。 */
[class*="_form_wrap"] .contact_submit input, [class*="_form_wrap"] .contact_submit button{
  width:auto !important; min-width:200px !important; flex:0 1 auto !important;
  margin-left:0 !important; margin-right:0 !important; }
[class*="_form_wrap"] button[type="submit"]:not([name="back"]),
[class*="_form_wrap"] input[type="submit"]:not([name="back"]),
.contact_submit button:not([name="back"]), .contact_submit input[type="submit"]:not([name="back"]){
  min-height:60px !important; padding:0 30px !important;
  border:0 !important; border-radius:0 !important; background:var(--grad) !important;
  color:#fff !important; font-size:16px !important; font-weight:700 !important; }
.contact_submit input[name="back"], .contact_submit button[name="back"]{
  min-height:60px !important; padding:0 30px !important; border-radius:0 !important;
  background:none !important; color:var(--c-main-tx) !important;
  border:1px solid var(--c-main-tx) !important;
  font-size:16px !important; font-weight:700 !important; }
/* 囲いが無く、ボタンが枠の直下に置かれる型のときも同じだけあける。 */
[class*="_form_wrap"] > button[type="submit"], [class*="_form_wrap"] > input[type="submit"]{
  margin:46px auto 0 !important; display:block !important; }
/* 2列（286+20+434=740）が入りきらない幅では素直に縦積みへ。崩すより積む。
   受領のスマホ実測（375px）: 行間8px・行送り18px・入力欄とボタンの最小高は48px（PCの52/60より低い）。 */
@media (max-width:820px){
  [class*="_form_wrap"] dl{ grid-template-columns:minmax(0,1fr) !important; gap:8px !important;
    margin-bottom:18px !important; }
  [class*="_form_wrap"] dt{ padding-top:0 !important; align-items:center !important; }
  [class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
  [class*="_form_wrap"] dd select{ min-height:48px !important; }
  /* ★セレクタはPC側と同じ形にすること。:not([name="back"]) 付きは (0,3,0) なので、
     ここを (0,2,0) で書くと負けて「戻る48px / 送信60px」と高さがズレる（2026-09-16 モックで検出）。 */
  [class*="_form_wrap"] button[type="submit"]:not([name="back"]),
  [class*="_form_wrap"] input[type="submit"]:not([name="back"]),
  .contact_submit button:not([name="back"]), .contact_submit input[type="submit"]:not([name="back"]),
  .contact_submit input[name="back"], .contact_submit button[name="back"]{ min-height:48px !important; }
  [class*="_form_wrap"] .g-recaptcha{ justify-content:flex-start !important;
    margin-bottom:18px !important; }
  /* 横に2つ入らない幅では縦積み。そのときだけ全幅にして押しやすくする。 */
  [class*="_form_wrap"] .contact_submit{ flex-direction:column !important; gap:12px !important; }
  [class*="_form_wrap"] .contact_submit input, [class*="_form_wrap"] .contact_submit button{
    width:100% !important; min-width:0 !important; }
}

/* skin に奪われていた受領デザインの復旧（2026-09-15 実測12件・R-30 の逃げ道＝ここで書く）。
   結合順 site → skin → override のため、同名セレクタは skin が後勝ちしていた。
   ★!important は skin が !important の宣言だけに付けてある。付け過ぎると受領側の
     より詳細なルール（例: 写真帯の上の白見出し）まで潰すため。 */
.subpage-header__en{font-family:var(--f-en2);letter-spacing:.28em;color:var(--c-sub);margin:0 0 clamp(8px,1.2vw,16px);}
.subpage-header__title{line-height:1.5;font-size:clamp(26px,4.2vw,52px);color:var(--c-deep);font-family:inherit;}
.p-breadcrumb__item{color:var(--c-mut) !important;}
.privacy__subtitle{font-size:var(--t-h3);color:var(--c-deep);}
.subpage-header{background:var(--c-deep);padding:clamp(118px,15vw,196px) 0 clamp(44px,5.4vw,80px);text-align:start;}
.privacy{max-width:var(--wrap-text);}
.subpage-header__inner{z-index:var(--z-body);}
a:hover{color:var(--ink);}
/* ============================================================
   ブログ一覧（CueZillaパーツ）を受領デザインへ寄せる  ★2026-09-15
   ------------------------------------------------------------
   当て先の実DOM: verify/local-sandbox/blog/index.html（CueZilla parts222 の実出力）
     section[_section] > div[_wrap].mx-auto > main[_main] + aside[_sidebar]
       main  … div[_post_list] > div[_post_wrap] > a > (div[_post_img] / div[_post_status]
               （span[_post_date] + span[_post_category]） / div[_post_title-excerpt]（h3[_post_title]））
               ＋ div[_pagenation]（span.current / a）
       aside … div[_sidebar_wrap]（h3 + ul>li>a>（span[_sidebar_date] + p[_sidebar_post_title]））
               div[_sidebar_wrap].category_post_count（h3 + ul>li>a>（p[_sidebar_post_category]
               + span[_sidebar_post_category_count]））
     ★セレクタはすべて接尾辞の属性一致＝**番号非依存**（採番が parts222 以外でも当たる。
       50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §1「接尾辞は共通」）。
       採番を書いているのは上のパンくず（parts231・実機採取値）だけ。

   寄せる先の値: 受領 3_DESIGNER修正後/blog.html ＝ 20_site.css の
     .site-bloglayout / .site-blog--list / .site-blog__card / __thumb / __meta / __date /
     __tag / __title / .site-pager / .site-side* （値はすべてそこからの写し。推定色なし）
     トークン実値（renew-theme.css :root）: 濃色 #0F1D26 ／ 本文 #16242D ／ 補助 #5C6E78 ／
     罫 #E2E8EB ／ 淡面 #F5F8F9 ／ 主色 #00786D ／ 欧文 Oswald ／ 版面 1560px

   skin(§3/§4/§4-c/§5) を否定するのではなく、skin が当てた「共通の型」の上に
   **案件のデザイン判断（版面・段数・余白・色・書体）だけ**を重ねている（R-30）。
   skin 本体は編集していない。
   ★:has() 前提の2本（器と2カラム）は、非対応環境ではテーマの flex 段組みに落ちるだけで
     壊れない。段組み自体は下の _post_list 側で担保している。
   ============================================================ */

/* --- 器: 一覧パーツのセクション。上余白は 04a 側のセクションが持つので殺す --------- */
[class*="_section"]:has([class*="_post_list"]){
  padding:0 0 clamp(76px,10vw,150px) !important;   /* 下は .site-sec の padding-block と同値 */
}
/* 導入文（04a）のセクション下余白を詰める。受領は導入文と一覧が同一セクション内で、
   間隔は一覧側の margin-top（28〜44px）だけ。ここを詰めないと二重の節余白になる。
   body:has() で **ブログ一覧が在るページに限定**（他ページの section-1 には当たらない）。 */
body:has([class*="_post_list"]) .site-sec[data-section="section-1"]{ padding-bottom:0 !important; }

/* --- 2カラム: 本文 ＋ 右サイドバー300px（受領 .site-bloglayout） ------------------
   テーマは .parts222_wrap{display:flex;max-width:1180px} ＋ 子に max-width:%（_main 780px /
   _sidebar 28.179%）。版面を .site-wrap--wide（1560px＋--gut）へ替え、子の % 制約を外す。
   ★子の幅解除と grid 化は必ずセット（片方だけだと潰れる／伸びる＝skin §4-b と同じ罠）。 */
[class*="_wrap"]:has([class*="_post_list"]),
[class*="_wrap"].mx-auto:has([class*="_post_list"]){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 300px !important;
  gap:clamp(24px,3vw,48px) !important;
  align-items:start !important;
  max-width:1560px !important; width:100% !important;
  margin-inline:auto !important;
  padding-inline:var(--gut) !important;
}
[class*="_wrap"]:has([class*="_post_list"]) > *{
  max-width:none !important; width:auto !important; min-width:0 !important; margin:0 !important;
}
/* ★カテゴリ絞り込みページ（/blog/category/…）＝ サイドバーが出力されないページの扱い。
   2026-09-15 実機実測: `/blog/category/news` は採番が parts225 に変わり（接尾辞は同じなので
   上のCSSはそのまま当たる）、Blade の `@if(!$categoryId)` により **aside ごと出力されない**。

   ★**あえて「1カラムに広げない」**（2026-09-15 ディレクター判断）。
     1カラムにするとカードが 462px → 633px（実測・1440px幅）に広がり、一覧からカテゴリへ移った瞬間に
     **カードが急に大きくなって別ページのデザインに見える**。
     右の 300px は空くが、**カード寸法を一覧と揃えるほうを優先する**。
     ＝ 記事エリアの幅を一覧ページと同一にするため、列構成をそのまま保つ。

   ★サイドバーをカテゴリページにも出せば、この空きは無くなり寸法も揃う（＝いちばん素直）。
     Blade の `@if(!$categoryId)` … `@endif` を外すだけ。手順は
     `19_オプション_ブログのカテゴリボタン.md` の「カテゴリページにもサイドバーを出す」に書いてある。
     外した場合、この規則は `:not(:has(_sidebar))` が外れて**自動的に無効**になる（衝突しない）。

   ★1024px 未満は下のメディアクエリが両ページとも1カラムにするので、そちらに任せる
     （ここを全幅で効かせるとスマホで 300px の死に列ができる）。 */
@media (min-width:1024px){
  [class*="_wrap"]:has([class*="_post_list"]):not(:has([class*="_sidebar"])){
    grid-template-columns:minmax(0,1fr) 300px !important;
  }
}

/* --- 受領デザインのカテゴリ絞り込みボタン（.site-cats）を一覧パーツの中に置けるようにする ---
   ★チップの見た目（枠・44px高・現在地は濃色ベタ）は **20_site.css の .site-cats / .site-cat /
     .site-cat.is-current が既に持っている**ので、ここでは「置き場所」だけを決める。
   ★既定では何も起きない（パーツは .site-cats を出力しないため、この2本は空振りする）。
     出す方法は `19_オプション_ブログのカテゴリボタン.md`（Blade 5行 ＋ 使えない時のJS）。
   ★`_wrap` の直下（main の前）に置く前提。grid-column:1/-1 でサイドバー列の上まで跨がせると
     受領 blog.html（.site-wrap--wide 直下・.site-bloglayout の上）と同じ掛かり方になる。
   ★margin を上書きしているのは、すぐ上の `> *{ margin:0 !important }`（テーマの幅/余白を
     落とすための一括指定）に食われるため。詳細度 (0,2,0) で明示的に勝たせている。 */
[class*="_wrap"] > .site-cats{
  grid-column:1 / -1 !important;
  margin:clamp(20px,2.4vw,26px) 0 0 !important;
}

/* --- カードの段組み（受領 .site-blog--2col ＝ 2列固定・599px以下で1列） ------------- */
[class*="_post_list"]{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(20px,2.6vw,32px) !important;
  margin-top:clamp(28px,3.4vw,44px) !important;   /* 受領 .site-blog--list */
}

/* --- カード本体（受領 .site-blog__card ＋ .site-blog--list の枠） -------------------
   skin は面=--dyn-surface(#F5F8F9)・枠=--dyn-border(#0F1D26)・角丸6px。
   受領は「白面・淡い罫・角丸なし・内側に余白・ホバーで浮かせて影」。 */
[class*="_post_wrap"]{
  background:#FFFFFF !important;
  border:1px solid #E2E8EB !important;
  border-radius:0 !important;
  padding:clamp(14px,1.6vw,20px) !important;
  overflow:visible !important;                    /* ホバーの影を出す（角丸が無いので clip 不要） */
  transition:transform .25s, box-shadow .25s, border-color .25s !important;
}
[class*="_post_wrap"] > a{ gap:14px; }            /* 受領 .site-blog__card の縦ギャップ */
[class*="_post_wrap"]:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(2,32,28,.28);
  border-color:#00786D !important;
}

/* --- サムネ（受領 .site-blog__thumb ＝ 16:10・淡面・カード内余白の内側） ------------ */
[class*="_post_img"]{
  background:#F5F8F9 !important; border-radius:0 !important;
  margin-bottom:0 !important;                     /* テーマの 13px は上の gap:14px に置き換え */
}

/* --- メタ行（受領 .site-blog__meta ＝ 日付左・カテゴリを右端へ） -------------------- */
[class*="_post_status"]{
  margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important;
  justify-content:flex-start !important; gap:12px !important; flex-wrap:wrap;
}
[class*="_post_date"]{
  font-family:"Oswald","Zen Kaku Gothic New",sans-serif !important;
  font-size:16px !important; font-weight:500 !important;
  letter-spacing:.04em !important; color:#5C6E78 !important;
}
/* カテゴリ＝受領 .site-blog__tag（淡い罫・角なし・補助文字色・右端） */
[class*="_post_category"]:not([class*="_sidebar"]),
[class*="_post_status"] > span:last-child{
  margin-left:auto !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:26px; padding:0 10px !important;
  background:#FFFFFF !important; border:1px solid #E2E8EB !important; border-radius:0 !important;
  font-size:12px !important; color:#5C6E78 !important; white-space:nowrap;
}

/* --- タイトル・抜粋（受領 .site-blog__title / .site-blog__text） -------------------
   ★[class*="_post_title"] は `_post_title-excerpt`（包み）にも当たる。包み側は下で
     padding だけ落とし、文字の値は内側の h3 が持つ（inherit されても害が無い値にしてある）。 */
[class*="_post_title-excerpt"]{ padding:0 !important; }
[class*="_post_title"]:not([class*="_sidebar"]){
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:16px !important; font-weight:700 !important; line-height:1.75 !important;
  letter-spacing:.02em !important; color:#0F1D26 !important; margin:0 !important;
}
[class*="_post_excerpt"]{
  font-size:15px !important; font-weight:500 !important; line-height:1.9 !important;
  letter-spacing:.02em !important; color:#16242D !important; margin:8px 0 0 !important;
}

/* --- ページ送り（受領 .site-pager ＝ 中央寄せ・48px角・現在地は濃色ベタ） ---------- */
[class*="_pagenation"]{
  justify-content:center !important; align-items:center; flex-wrap:wrap;
  gap:10px !important; margin-top:clamp(28px,3.4vw,44px) !important;
}
/* ★外側の span を「箱」にしない（2026-09-15 実機 /blog/page/2 で二重箱を実測）。
   このサイトのページャは Blade が **2系統を混ぜて**出力している:
       ＜div class="parts222_pagenation">                ← 器は _pagenation（skin §3(B) の系統）
         ＜span class="pagination_prev">＜a＞…＜/a＞＜/span＞   ← 中身は pagination_*（skin §3(A) の系統）
         ＜span class="pagination_num d-none d-xl-block">＜a＞…＜/a＞＜/span＞
         ＜span class="pagination_num current …">2＜/span＞  ← 現在地だけ ＜a＞ が無く span が実体
         ＜span class="pagination_next">＜a＞…＜/a＞＜/span＞
         ＜span class="page-item disabled">＜a＞…＜/a＞＜/span＞ ← 最後へ。Bootstrap のクラス
   skin §3(A) は `.pagination_num/_prev/_next` を**それ自体がボタン**だと想定して
   40px・角丸6px・濃い枠の箱を付ける。一方このマークアップでは実体は内側の ＜a＞ なので、
   **40px の角丸箱の中から 48px の角箱がはみ出す**二重表示になっていた（実測 span 40px / a 48px）。
   → 外側 span は枠も高さも持たせず、実体（＜a＞）だけを受領デザインの箱にする。
   ★`:not(.current)` で現在地だけ除外する。現在地は ＜a＞ を持たず span 自身が実体なので、
     ここでリセットすると箱ごと消える（`min-width:0 !important` が下の 48px に勝ってしまう）。 */
[class*="_pagenation"] > span:not(.current){
  display:inline-flex !important; align-items:center;
  border:0 !important; border-radius:0 !important; background:transparent !important;
  min-width:0 !important; min-height:0 !important; height:auto !important;
  padding:0 !important; margin:0 !important;
}
[class*="_pagenation"] a,
[class*="_pagenation"] span.current{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:48px !important; min-height:48px !important; padding:0 16px !important;
  border:1px solid #E2E8EB !important; border-radius:0 !important;
  background:#FFFFFF !important; color:#16242D !important;
  font-family:"Oswald","Zen Kaku Gothic New",sans-serif !important; font-size:16px !important;
}
[class*="_pagenation"] span.current{
  background:#0F1D26 !important; border-color:#0F1D26 !important; color:#FFFFFF !important;
}
[class*="_pagenation"] a:hover{ border-color:#00786D !important; color:#00786D !important; }

/* --- サイドバー（受領 .site-side ＝ 枠で囲ったブロック＋濃色の見出し帯） ------------
   skin §5 は「帯を外して文字色だけ寄せる」方針（帯の色が案件ごとに読めないため）。
   受領はその帯を**意匠として使っている**ので、skin のコメントどおり案件側で戻す。 */
/* ★当て先は「サイドバーの器」だけ。`[class*="_sidebar"]` と素で書くと
   `_sidebar_wrap` / `_sidebar_date` / `_sidebar_post_title` / `_sidebar_post_category(_count)`
   にも当たり、日付やカテゴリ名まで grid 化＋44px の上余白が付いてカテゴリ行が3倍に伸びる
   （2026-09-15 サンドボックス実測: li 高さ 40px → 97px）。器だけを掴む2通りで限定する。 */
aside[class*="_sidebar"],
[class*="_sidebar"]:has(> [class*="_sidebar_wrap"]){
  display:grid !important; align-content:start;
  gap:clamp(20px,2.4vw,28px) !important;
  margin-top:clamp(28px,3.4vw,44px) !important;   /* 一覧の margin-top と頭を揃える */
}
[class*="_sidebar_wrap"]{
  border:1px solid #E2E8EB !important;
  max-width:none !important; width:auto !important; margin:0 !important;
}
[class*="_sidebar"] [class*="_sidebar_wrap"] h3{
  margin:0 !important; padding:12px 16px !important;
  background:#0F1D26 !important; color:#FFFFFF !important;
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:15px !important; font-weight:700 !important; letter-spacing:.04em !important;
}
[class*="_sidebar"] ul{ margin:0 !important; padding:0 !important; }
/* 区切りは li 間だけ（受領 .site-side__list li + li）。テーマの #666 下罫線・左右罫線は落とす。 */
[class*="_sidebar"] ul li{
  list-style:none; margin:0 !important; padding:0 !important;
  border:0 !important; border-top:1px solid #E2E8EB !important;
}
[class*="_sidebar"] ul li:first-child{ border-top:0 !important; }
/* 最近の投稿（日付を上・タイトルを下に積む） */
[class*="_sidebar_wrap"]:not(.category_post_count) ul li a{
  display:grid !important; gap:4px; padding:14px 16px !important;
  color:#0F1D26 !important; text-decoration:none;
}
[class*="_sidebar_date"]{
  font-family:"Oswald","Zen Kaku Gothic New",sans-serif !important;
  font-size:12px !important; letter-spacing:.06em !important;
  color:#16242D !important; margin:0 !important;
}
[class*="_sidebar_post_title"]{
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:14px !important; font-weight:700 !important; line-height:1.7 !important;
  color:#0F1D26 !important; margin:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
[class*="_sidebar_wrap"] a:hover [class*="_sidebar_post_title"]{ color:#00786D !important; }
/* カテゴリ（名前と件数を両端に） */
[class*="category_post_count"] ul li a{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px !important; text-decoration:none;
  color:#0F1D26 !important; font-size:14px !important; font-weight:700 !important;
}
[class*="category_post_count"] ul li a:hover{ color:#00786D !important; }
[class*="_sidebar_post_category"]:not([class*="_count"]){
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  margin:0 !important;
}
[class*="_sidebar_post_category_count"]{
  min-width:34px !important; width:auto !important; height:auto !important;
  padding:2px 6px !important; background:#F5F8F9 !important;
  border:0 !important; border-radius:0 !important;
  font-family:"Oswald","Zen Kaku Gothic New",sans-serif !important; font-size:12px !important;
  color:#16242D !important; justify-content:center; align-items:center;
}

/* --- 記事詳細ページの「最近の投稿」 ------------------------------------------------
   ★2026-09-15 実機 https://cuezilla-cms-test11.net/blog/107008 の実DOMを採って書いた（R-28）。
   一覧のサイドバーとは**別のクラス**で出る（`_sidebar_wrap` ではないので上のCSSは1行も届かない）:
     section.container-fluid.parts166_single_article > div.container > div.article_wrap
       └ div.recent_posts_wrap
            div.recent_post_title        … 見出し「最近の投稿」。★h3ではなく div
            ul > li > a > (span.recent_post_date + h3)   … 記事タイトルは**クラス無しの h3**
   実測した素の状態: 見出しは帯なしの太字テキスト（skin §5 が帯を外す方針のため）、
   li は下罫線 #0F1D26（テーマの #666 を skin がトークンへ寄せた結果）、リンク文字は緑 #00786D。
   → 受領 .site-side（囲み枠＋濃色の見出し帯＋淡い区切り罫）に揃える。一覧のサイドバーと同じ顔になる。
   ★クラスに採番が入らない（`recent_*` は共通）ので、ここは番号非依存のまま書ける。
   ★見出しに `div.` を足して (0,2,1) にしてある。上のカード用 `[class*="_post_title"]` が
     `.recent_post_title` にも当たる（(0,2,0)）ため、並び順に頼らず詳細度で確実に勝たせる。 */
.recent_posts_wrap{
  border:1px solid #E2E8EB !important;
  margin:clamp(40px,5vw,72px) 0 0 !important;
}
div.recent_posts_wrap > .recent_post_title{
  margin:0 !important; padding:12px 16px !important;
  background:#0F1D26 !important; color:#FFFFFF !important;
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:15px !important; font-weight:700 !important; letter-spacing:.04em !important;
}
.recent_posts_wrap ul{ margin:0 !important; padding:0 !important; }
.recent_posts_wrap ul li{
  list-style:none; margin:0 !important; padding:0 !important;
  border:0 !important; border-top:1px solid #E2E8EB !important;
}
.recent_posts_wrap ul li:first-child{ border-top:0 !important; }
.recent_posts_wrap ul li a{
  display:grid !important; gap:4px;
  padding:14px 16px !important; text-decoration:none;
  color:#0F1D26 !important;
}
.recent_posts_wrap .recent_post_date{
  font-family:"Oswald","Zen Kaku Gothic New",sans-serif !important;
  font-size:12px !important; letter-spacing:.06em !important;
  color:#16242D !important; margin:0 !important;
}
.recent_posts_wrap ul li h3{
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:14px !important; font-weight:700 !important; line-height:1.7 !important;
  color:#0F1D26 !important; margin:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.recent_posts_wrap ul li a:hover h3{ color:#00786D !important; }

/* --- 記事詳細ページの節余白（導入文と記事の間が空きすぎていた） ----------------------
   ★実機実測（2026-09-15）: 導入文（04a）の下 144px ＋ テーマの記事セクション上 100px ＝ **244pxの穴**が、
     導入文と記事タイトルの間に空いていた。CueZillaはブログの下層ヘッダーを
     一覧だけでなく**詳細ページにも出す**ため、一覧と同じ二重余白がここでも起きる。
   ★一覧側は「導入文の下も詰めて一覧の margin-top(28〜44px)に寄せる」直し方をしたが、
     詳細ページで同じことをすると**導入文と記事タイトルが接触した**（実測・下図で確認）。
     記事は導入文とは別のかたまりなので、**サイトの節リズム（.site-sec の 144px）をそのまま1つ分**
     残す＝テーマが足す 100px だけを殺す、の1本に留める。 */
[class*="_single_article"]{ padding-top:0 !important; }

/* --- レスポンシブ（受領 blog.html と同じ2点） -------------------------------------- */
@media (max-width:1023px){
  /* サイドバーを本文の下へ（受領 .site-bloglayout / .site-side の 1023px 分岐） */
  /* ★上の2本と同じセレクタを両方書く。`.mx-auto` 付きの方が詳細度(0,3,0)で高く、
     こちらを (0,2,0) だけで書くと **!important 同士でも詳細度で負けて効かない**
     （2026-09-15 サンドボックス実測: 900px でもサイドバーが右に残った）。 */
  [class*="_wrap"]:has([class*="_post_list"]),
  [class*="_wrap"].mx-auto:has([class*="_post_list"]){ grid-template-columns:minmax(0,1fr) !important; }
  aside[class*="_sidebar"],
  [class*="_sidebar"]:has(> [class*="_sidebar_wrap"]){ margin-top:0 !important; }
}
@media (max-width:599px){
  /* カード1列（受領 .site-blog--2col の 599px 分岐） */
  [class*="_post_list"]{ grid-template-columns:minmax(0,1fr) !important; }
}


/* ============================================================
   トップの「ブログ枠」パーツ（parts131415_blog 系）を受領デザインへ寄せる  ★2026-09-16
   ------------------------------------------------------------
   実DOM（2026-09-16 実機 https://cuezilla-cms-test11.net/ で採取・R-28）:
     section.parts131415_blog_<乱数>.parts131415_blog ＞ div.container-lg
       div.parts131415_blog_title_wrap（見出し欄・説明欄＝空にしてある）
       div.row.row-cols-1.row-cols-sm-2.row-cols-lg-3 ＞ div.col ＞ div.card ＞ div.card-body
         h5.card-title … カテゴリ名 ／ a ＞ (p.card-text … 記事タイトル ＋ div.parts131415_blog_thumbnail ＞ img)
   ★接尾辞の乱数はパーツを作り直すと変わるので [class*="parts131415_blog"] で拾う。
   ★**並び順が受領と逆**（実機: カテゴリ→タイトル→サムネ ／ 受領: サムネ→タグ→タイトル）。
     a を display:contents にして中の2つを card-body の子に昇格させ order で並べ替える。
     これをやらないとサムネが a の中に閉じ込められたままカテゴリとの間に割り込めない。
     display:contents でもリンクは生きる（実機で href 保持・クリック可を確認）。
   ★**日付はパーツが出力しない**（実機DOMに日付要素が無い）＝受領の .tk-blog__date は再現不可。 */
#blog{ padding-bottom:0 !important; }
[class*="parts131415_blog"]{ padding:clamp(40px,5vw,70px) 0 0 !important; background:transparent !important; }
/* 版面を見出しと合わせる。実測: 見出し 1560px＋--gut に対しパーツは 1280px＋50px で 126px 内側にズレていた。 */
[class*="parts131415_blog"] [class*="container"]{
  max-width:1560px !important; width:100% !important;
  margin-inline:auto !important; padding-inline:var(--gut) !important;
}
[class*="_blog_title_wrap"]{ margin:0 !important; }
[class*="parts131415_blog"] .row{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(20px,2.4vw,32px) !important; margin:0 !important;
}
@media (max-width:759px){
  [class*="parts131415_blog"] .row{ grid-template-columns:minmax(0,1fr) !important; }
}
/* カード本体：受領は面・枠・角丸・内側余白のどれも持たない（実機は地 #F5F8F9／角丸6px／padding 45px 30px 40px）。 */
[class*="parts131415_blog"] .card{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important;
}
[class*="parts131415_blog"] .card-body{
  display:flex !important; flex-direction:column !important; gap:14px !important; padding:0 !important;
}
[class*="parts131415_blog"] .card-body > a{ display:contents !important; }
[class*="parts131415_blog"] [class*="_blog_thumbnail"]{
  order:1 !important; position:relative; overflow:hidden;
  aspect-ratio:16/10; height:auto !important;
  background:#F5F8F9 !important; border-radius:2px !important; margin:0 !important;
}
[class*="parts131415_blog"] [class*="_blog_thumbnail"] img{
  width:100% !important; height:100% !important; max-height:none !important;
  object-fit:cover !important; display:block !important; border-radius:0 !important;
}
/* ホバーで下辺にグラデ罫（受領 .tk-blog__thumb::after）。R-27で content が落ちる環境では出ないだけで崩れない。 */
[class*="parts131415_blog"] [class*="_blog_thumbnail"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(100deg,#00A497 0%,#35C7F8 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
[class*="parts131415_blog"] .card:hover [class*="_blog_thumbnail"]::after{ transform:scaleX(1); }
/* カテゴリ（実機は中央寄せの見出し h5）→ 受領のタグチップへ。
   ★skin §4-b は .card-title に意図的に触らない方針なので、案件側で当てるのが正しい。 */
[class*="parts131415_blog"] .card-title{
  order:2 !important; align-self:flex-start !important;
  display:inline-flex !important; align-items:center !important;
  min-height:26px !important; padding:0 12px !important;
  border:1px solid #E2E8EB !important; border-radius:0 !important;
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:12px !important; font-weight:700 !important;
  color:#00786D !important; text-align:start !important; margin:0 !important;
}
[class*="parts131415_blog"] .card-text{
  order:3 !important;
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:17px !important; font-weight:900 !important; line-height:1.75 !important;
  color:#0F1D26 !important; margin:0 !important;
}
[class*="parts131415_blog"] .card:hover .card-text{ color:#00786D !important; }