/* ===== site.css ===== */
/* ============================================================
   株式会社田原工業 — サイト共通CSS（フリーコーディング設計）
   ------------------------------------------------------------
   ・自作接頭辞 .tk-* ／ 具体値 ／ 独自変数 --tk-* で構成
     → CueZilla テーマ変数(--main-color 等)・skin(--dyn-*)に非依存＝構造的に非衝突（安全契約）
   ・固定ヘッダー(100px)採用 → :root{--fixed-header-h} を宣言（skin §11/§12 が下層ヘッダー等の
     上余白に加算＝固定ヘッダーへのめり込み防止・R-18）
   ・演出JS（reveal/カウント/メニュー開閉/FVスライダー等）は 01_サイト情報.md「BODY内」へ集約（R-16）。
     本CSSは JSが付与する .is-visible / .is-open 等の状態クラスに対応する見た目のみ定義。
   ============================================================ */
:root{
  /* 固定ヘッダー高（skinが下層ヘッダー/404/thanks の上余白に加算・R-18） */
  --fixed-header-h: 100px;

  /* ブランドカラー（正本） */
  --tk-navy:      #04121f;   /* FV等ダーク地 */
  --tk-navy-2:    #06141f;   /* フッター/モバイルメニュー地 */
  --tk-navy-3:    #0e2438;   /* ダークカード */
  --tk-ink:       #02324f;   /* 本文・見出し（インクネイビー） */
  --tk-accent:    #00B4ED;   /* 明アクセント */
  --tk-accent-2:  #0096c7;   /* 深アクセント/リンク */
  --tk-accent-3:  #33c4f2;   /* ホバー明 */
  --tk-muted:     #5b6b80;   /* 補助テキスト */
  --tk-muted-d:   #9fb0bd;   /* ダーク地上の補助テキスト */
  --tk-line:      rgba(2,50,79,.12);
  --tk-bg:        #ffffff;
  --tk-bg-soft:   #F4FAFD;   /* 淡い面 */
  --tk-bg-tint:   #DAF4FC;   /* 淡青セクション地 */

  /* フォント */
  --tk-sans:   "Zen Kaku Gothic New","Noto Sans JP",sans-serif;  /* 見出し・強調 */
  --tk-body:   "Noto Sans JP",sans-serif;                        /* 本文 */
  --tk-en:     "Space Grotesk",sans-serif;                       /* 英字ラベル */
  --tk-anton:  "Anton",sans-serif;                               /* 特大ディスプレイ */
  --tk-script: "Allura",cursive;                                 /* 筆記体アクセント */

  --tk-wrap:  1200px;   /* 本文コンテンツ幅 */
  --tk-wrap-w: 1480px;  /* ワイド幅（ヘッダー/フッター/フルブリード） */
}

/* ---------- リセット・ベース（パーツ内限定にせずサイト設計の素タグに当てる） ---------- */
.tk-scope{ color:var(--tk-ink); font-family:var(--tk-body); line-height:1.85; -webkit-font-smoothing:antialiased; }
.tk-scope *{ box-sizing:border-box; }
.tk-scope img{ max-width:100%; height:auto; display:block; }
:where(.tk-scope) a{ color:inherit; }
.tk-scope h1,.tk-scope h2,.tk-scope h3,.tk-scope h4{ margin:0; font-family:var(--tk-sans); font-weight:900; line-height:1.35; }
/* 見出しの既定色は :where で詳細度0に＝暗背景セクションの部品クラス(.tk-hero__h1 等)が確実に勝つ（R-21/色潰れ対策） */
:where(.tk-scope h1,.tk-scope h2,.tk-scope h3,.tk-scope h4){ color:var(--tk-ink); }
.tk-scope p{ margin:0; }

/* ---------- レイアウト ---------- */
.tk-container{ max-width:var(--tk-wrap); margin:0 auto; padding-left:clamp(20px,5vw,32px); padding-right:clamp(20px,5vw,32px); }
.tk-container--wide{ max-width:var(--tk-wrap-w); margin-left:auto; margin-right:auto; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
.tk-section{ padding:clamp(64px,9vw,120px) 0; }

/* 英字＋日本語の2段見出し（ABOUT / 〜） */
.tk-eyebrow{ display:inline-flex; align-items:center; gap:12px; font:700 12px var(--tk-en); letter-spacing:.22em; color:var(--tk-accent-2); text-transform:uppercase; margin-bottom:18px; }
.tk-eyebrow::before{ content:""; width:34px; height:1px; background:var(--tk-accent); }
.tk-eyebrow--light{ color:var(--tk-accent); }
.tk-title{ font:900 clamp(1.7rem,4.2vw,2.9rem)/1.32 var(--tk-sans); color:var(--tk-ink); }
.tk-title span{ color:var(--tk-accent-2); }
.tk-title--light{ color:#fff; }
.tk-title--light span{ color:var(--tk-accent); }
.tk-lead{ margin-top:22px; font-size:clamp(15px,1.7vw,17px); line-height:2; color:var(--tk-ink); }
.tk-lead--muted{ color:var(--tk-muted); }

/* ---------- ボタン ---------- */
.tk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:15px 32px; font:700 15px var(--tk-body); text-decoration:none; border-radius:999px; border:1px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; cursor:pointer; }
.tk-btn__arw{ font-family:var(--tk-en); }
.tk-btn--primary{ background:var(--tk-accent); color:#fff; }
.tk-btn--primary:hover{ background:var(--tk-accent-3); color:#fff; transform:translateY(-2px); } /* KEEP: hoverでcolor明示。a:hover{color:inherit}が勝って文字色が親を継承するのを防ぐ */
.tk-btn--ghost{ background:#fff; color:var(--tk-ink); border-color:var(--tk-line); }
.tk-btn--ghost:hover{ background:#eaf6fb; color:var(--tk-ink); border-color:var(--tk-accent); transform:translateY(-2px); } /* KEEP: hoverでcolor明示（a:hover継承対策） */
.tk-btn--onnavy{ background:#fff; color:var(--tk-ink); }
.tk-btn--onnavy:hover{ color:var(--tk-ink); transform:translateY(-2px); } /* KEEP: 白ボタン。hoverでcolor明示しないとa:hover{color:inherit}でナビー親の白を継承し白×白で文字が消える */
.tk-btnrow{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* インラインの「○○を見る →」テキストリンク */
.tk-textlink{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--tk-accent-2); text-decoration:none; }
.tk-textlink .tk-textlink__arw{ font-family:var(--tk-en); color:var(--tk-accent); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.tk-textlink:hover .tk-textlink__arw{ transform:translateX(6px); }

/* ============================================================
   共通ヘッダー（02_header.html）
   ============================================================ */
.tk-header{ position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(255,255,255,.9); border-bottom:1px solid var(--tk-line);
  backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
  box-shadow:0 6px 22px rgba(2,50,79,.07); transition:background .4s ease, box-shadow .4s ease; }
.tk-header__inner{ max-width:var(--tk-wrap-w); margin:0 auto; padding:0 clamp(18px,3.5vw,52px); height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.tk-header__logo{ display:flex; align-items:center; flex:none; transition:opacity .2s; text-decoration:none; }
.tk-header__logo:hover{ opacity:.82; }
.tk-header__logo img{ height:clamp(46px,4.4vw,62px); width:auto; }
.tk-gnav{ display:flex; align-items:center; gap:clamp(6px,1.1vw,20px); }
.tk-gnav__item{ position:relative; }
.tk-gnav__link{ text-decoration:none; display:inline-flex; align-items:center; gap:5px; font:500 13px var(--tk-body); color:var(--tk-ink); white-space:nowrap; transition:color .2s; }
.tk-gnav__link:hover{ color:var(--tk-accent); }
.tk-gnav__caret{ font-size:9px; color:var(--tk-accent); }
/* ドロップダウン（ホバー/フォーカスで開く・CSSのみ） */
.tk-dd{ position:absolute; top:100%; left:0; padding-top:16px; z-index:30; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .26s ease, transform .26s ease, visibility .26s; }
.tk-gnav__item:hover .tk-dd, .tk-gnav__item:focus-within .tk-dd{ opacity:1; visibility:visible; transform:translateY(0); }
.tk-dd__panel{ min-width:210px; background:#fff; border:1px solid rgba(2,50,79,.12); padding:8px; box-shadow:0 20px 44px rgba(2,50,79,.16); }
.tk-dd__parent{ display:block; padding:11px 14px; font:600 13px var(--tk-body); color:var(--tk-ink); text-decoration:none; transition:background .2s; }
.tk-dd__child{ display:flex; align-items:center; gap:8px; padding:11px 14px; font:500 13px var(--tk-body); color:var(--tk-muted); text-decoration:none; transition:background .2s; }
.tk-dd__parent:hover, .tk-dd__child:hover{ background:rgba(0,180,237,.12); }
.tk-dd__child::before{ content:""; width:12px; height:1px; background:var(--tk-accent); flex:none; }
.tk-gnav__cta{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:var(--tk-accent); border-radius:999px; font:700 13px var(--tk-body); color:#fff; white-space:nowrap; text-decoration:none; transition:transform .2s, background .2s; }
.tk-gnav__cta:hover{ background:var(--tk-accent-3); transform:translateY(-1px); }
/* ハンバーガー */
.tk-burger{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; align-items:center; justify-content:center; background:rgba(2,50,79,.05); border:1px solid rgba(2,50,79,.16); cursor:pointer; transition:background .2s,border-color .2s; }
.tk-burger:hover{ background:rgba(2,50,79,.10); border-color:rgba(0,180,237,.55); }
.tk-burger span{ display:block; width:18px; height:2px; background:var(--tk-ink); }

/* モバイル全画面メニュー（JS: .is-open で表示） */
.tk-drawer{ position:fixed; inset:0; z-index:950; background:var(--tk-navy-2); display:flex; flex-direction:column; padding:20px clamp(20px,6vw,40px) 40px; overflow-y:auto; visibility:hidden; opacity:0; transition:opacity .3s ease, visibility .3s; }
.tk-drawer.is-open{ visibility:visible; opacity:1; }
.tk-drawer__bar{ display:flex; align-items:center; justify-content:space-between; height:52px; flex:none; }
.tk-drawer__logo{ height:36px; width:auto; filter:brightness(0) invert(1); }
.tk-drawer__close{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); cursor:pointer; color:#fff; font:300 28px var(--tk-en); line-height:1; transition:background .2s,border-color .2s; }
.tk-drawer__close:hover{ background:rgba(255,255,255,.13); border-color:rgba(0,180,237,.55); }
.tk-drawer__nav{ display:flex; flex-direction:column; margin-top:24px; }
.tk-drawer__link{ text-decoration:none; transition:transform .25s; display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.tk-drawer__link:hover{ transform:translateX(7px); }
.tk-drawer__num{ font:600 11px var(--tk-en); color:var(--tk-accent); width:30px; }
.tk-drawer__label{ font:700 20px var(--tk-sans); color:#fff; }
.tk-drawer__link--parent{ padding-bottom:6px; border-bottom:none; }
.tk-drawer__link--child{ align-items:center; gap:10px; padding:8px 0 14px 44px; border-bottom:1px solid rgba(255,255,255,.08); }
.tk-drawer__link--child::before{ content:""; width:14px; height:1px; background:var(--tk-accent); flex:none; }
.tk-drawer__label--child{ font:500 16px/1.6 var(--tk-body); color:#aeb9c4; }
.tk-drawer__cta{ text-decoration:none; margin-top:22px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:18px; background:var(--tk-accent); font:700 16px var(--tk-body); color:#fff; transition:background .2s,transform .2s; }
.tk-drawer__cta:hover{ background:var(--tk-accent-3); transform:translateY(-1px); }

/* ============================================================
   共通フッター（03_footer.html）
   ============================================================ */
.tk-footer{ background:var(--tk-navy-2); color:#fff; border-top:1px solid rgba(255,255,255,.08); }
.tk-footer__inner{ max-width:var(--tk-wrap-w); margin:0 auto; padding:clamp(56px,7vw,90px) clamp(20px,4vw,56px) 36px; }
.tk-footer__grid{ display:grid; gap:clamp(40px,6vw,72px); grid-template-columns:0.85fr 1.15fr; }
.tk-footer__logo{ height:clamp(48px,5.5vw,62px); width:auto; filter:brightness(0) invert(1); }
.tk-footer__tagline{ margin:20px 0 0; max-width:400px; font:400 16px/1.95 var(--tk-body); color:#8a99a8; }
.tk-footer__area{ margin-top:30px; display:flex; flex-direction:column; gap:6px; background:rgba(0,180,237,.08); border:1px solid rgba(0,180,237,.25); padding:22px 26px; }
.tk-footer__area-en{ font:700 11px var(--tk-en); letter-spacing:.24em; color:var(--tk-accent); }
.tk-footer__area-main{ font:900 clamp(24px,3.4vw,34px) var(--tk-sans); color:#fff; line-height:1.1; }
.tk-footer__area-sub{ font:400 16px/1.6 var(--tk-body); color:var(--tk-muted-d); }
.tk-footer__contact{ margin-top:26px; display:flex; flex-direction:column; gap:8px; }
.tk-footer__tel{ text-decoration:none; font:700 26px var(--tk-en); color:#fff; letter-spacing:.02em; }
.tk-footer__tel:hover{ color:var(--tk-accent); }
.tk-footer__addr{ font:400 16px/1.7 var(--tk-body); color:#8a99a8; }
.tk-footer__maphead{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.tk-footer__maphead span:first-child{ font:700 12px var(--tk-en); letter-spacing:.24em; color:var(--tk-accent); }
.tk-footer__maphead span:last-child{ flex:1; height:1px; background:rgba(255,255,255,.1); }
.tk-footer__map{ display:grid; gap:clamp(22px,3vw,30px) clamp(28px,4vw,56px); grid-template-columns:1fr 1fr; }
.tk-footer__navlink{ text-decoration:none; display:inline-flex; align-items:baseline; gap:10px; font:700 16px var(--tk-sans); color:#fff; align-self:start; }
.tk-footer__navlink:hover{ color:var(--tk-accent); }
.tk-footer__navlink--cta{ color:var(--tk-accent); }
.tk-footer__navlink--cta:hover{ color:#fff; }
.tk-footer__navlink .en{ font:500 10px var(--tk-en); letter-spacing:.18em; color:#5f7180; }
.tk-footer__sub{ margin-top:11px; padding-left:14px; border-left:1px solid rgba(0,180,237,.3); display:flex; flex-direction:column; gap:9px; }
.tk-footer__sublink{ text-decoration:none; display:flex; align-items:center; gap:9px; font:500 15px var(--tk-body); color:var(--tk-muted-d); }
.tk-footer__sublink:hover{ color:#fff; }
.tk-footer__sublink::before{ content:""; width:10px; height:1px; background:var(--tk-accent); flex:none; }
.tk-footer__bottom{ margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.tk-footer__copy{ font:400 16px/1.6 var(--tk-body); color:#5f6e7d; }
.tk-footer__copy a{ color:#5f6e7d; text-decoration:none; transition:color .2s; }
.tk-footer__copy a:hover{ color:var(--tk-accent); }
.tk-footer__license{ font:500 11px var(--tk-en); letter-spacing:.16em; color:#3a4b59; }

/* ============================================================
   スクロール演出（JSが .is-visible を付与・R-16）
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .tk-hero__cell img,.tk-concept,.tk-proof,.tk-menu,.tk-record{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   ユーティリティ
   ============================================================ */
.tk-center{ text-align:center; }
.tk-jc-center{ justify-content:center; }
.br-sp{ display:none; }

/* ============================================================
   レスポンシブ（共通）
   ============================================================ */
@media (max-width:1000px){
  .tk-gnav{ display:none; }
  .tk-burger{ display:flex; }
  .tk-footer__grid{ grid-template-columns:1fr; }
  .tk-footer__map{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  :root{ --fixed-header-h:74px; }
  .tk-header__inner{ height:74px; }
  .tk-footer__map{ grid-template-columns:1fr; }
  .br-sp{ display:inline; }
}

/* ============================================================
   TOP本文（05_page-index.html）
   ============================================================ */
/* 装飾テキスト共通 */
.tk-script{ font-family:var(--tk-script); font-size:clamp(34px,5vw,56px); color:var(--tk-accent); line-height:1; }
.tk-script--light{ color:var(--tk-accent); }
.tk-outline{ color:var(--tk-ink); -webkit-text-stroke:2px var(--tk-ink); -webkit-text-fill-color:transparent; letter-spacing:-.02em; }
.tk-outline--light{ color:#fff; -webkit-text-stroke-color:#fff; }
.tk-eyebrow--deep{ color:var(--tk-accent-2); }
/* 背景の巨大ゴースト英字 */
.tk-concept__ghost,.tk-proof__ghost,.tk-menu__ghost,.tk-record__ghost{
  position:absolute; font:700 clamp(54px,15vw,240px) var(--tk-en); line-height:.8; letter-spacing:-.03em;
  color:rgba(0,180,237,.1); white-space:nowrap; pointer-events:none; z-index:0; }

/* --- HERO --- */
.tk-hero{ position:relative; min-height:100svh; background:var(--tk-navy); overflow:hidden; display:flex; flex-direction:column; }
.tk-hero__bg{ position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:1.18fr .82fr; grid-template-rows:1fr 1fr; }
.tk-hero__cell{ position:relative; overflow:hidden; background:linear-gradient(150deg,#0e2438,#071a2c); }
.tk-hero__cell--main{ grid-column:1; grid-row:1 / span 2; }
.tk-hero__cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:tk-herozoom 24s ease-in-out infinite; will-change:transform; }
.tk-hero__cell:nth-child(2) img{ animation-duration:20s; }
.tk-hero__cell:nth-child(3) img{ animation-duration:28s; }
.tk-hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(56deg,rgba(3,14,28,.86) 0%,rgba(3,14,28,.58) 32%,rgba(3,14,28,.16) 58%,transparent 76%); }
.tk-hero__marquee{ position:absolute; left:0; right:0; bottom:clamp(44px,10vh,120px); z-index:3; overflow:hidden; white-space:nowrap; pointer-events:none; }
.tk-hero__marquee-track{ display:flex; align-items:center; gap:.85em; width:max-content; animation:tk-marquee 56s linear infinite;
  font-family:var(--tk-anton); font-size:clamp(46px,9vw,150px); line-height:1; letter-spacing:.02em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.18); }
.tk-hero__marquee-track i{ font-style:normal; font-size:.58em; color:rgba(255,255,255,.22); -webkit-text-stroke:0; }
.tk-hero__body{ position:relative; margin-top:auto; width:100%; padding:clamp(112px,15vh,150px) clamp(18px,5vw,90px) clamp(50px,10vh,130px); z-index:4; }
.tk-hero__eyebrow{ display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; }
.tk-hero__eyebrow-bar{ display:inline-block; width:44px; height:8px; background:var(--tk-accent); }
.tk-hero__eyebrow-txt{ font:700 12px var(--tk-en); letter-spacing:.26em; color:var(--tk-accent); text-shadow:0 1px 10px rgba(3,14,28,.65); }
.tk-hero__h1{ margin:0; font-family:var(--tk-sans); color:#fff; line-height:.92; }
.tk-hero__h1-1{ display:block; font-weight:900; font-size:clamp(26px,5vw,62px); letter-spacing:.01em; }
.tk-hero__h1-2{ display:block; margin:.02em 0 0; font-weight:900; font-size:clamp(56px,14vw,210px); line-height:1.04; padding-bottom:.1em; color:transparent; -webkit-text-stroke:2px #fff; -webkit-text-fill-color:transparent; letter-spacing:-.02em; }
.tk-hero__h1-3{ display:block; margin:-.14em 0 0 -.06em; font-weight:900; font-size:clamp(48px,10.5vw,150px); line-height:1.04; padding-bottom:.08em; letter-spacing:-.01em; }
.tk-hero__h1-3 .ac{ color:var(--tk-accent); }
.tk-hero__sub{ margin:24px 0 0; max-width:440px; font:500 clamp(16px,1.6vw,18px)/1.85 var(--tk-body); color:#cdd6df; }
.tk-hero__sub-em{ color:var(--tk-accent); font-weight:700; }
.tk-hero__scrollcue{ position:absolute; right:clamp(18px,4vw,40px); bottom:30px; display:flex; align-items:center; gap:12px; z-index:4; }
.tk-hero__scrollcue span:first-child{ font:500 10px var(--tk-en); letter-spacing:.24em; color:#6b7585; }
.tk-hero__scrollcue-line{ position:relative; width:46px; height:1px; background:rgba(255,255,255,.14); overflow:hidden; }
.tk-hero__scrollcue-line::after{ content:""; position:absolute; inset:0; background:var(--tk-accent); animation:tk-scrollcue 1.8s ease-in-out infinite; }

/* --- NEWS --- */
.tk-news{ background:#fff; color:var(--tk-ink); margin-bottom:-1px; }
.tk-news__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,3vw,40px); padding-top:clamp(28px,3.5vw,44px); padding-bottom:clamp(28px,4vw,44px); }
.tk-news__head{ display:flex; align-items:baseline; gap:12px; flex:none; }
.tk-news__en{ font:700 15px var(--tk-en); letter-spacing:.22em; color:var(--tk-accent); }
.tk-news__jp{ font:500 12px var(--tk-body); color:var(--tk-muted); }
.tk-news__list{ list-style:none; margin:0; padding:0; flex:1; min-width:min(100%,260px); display:flex; flex-direction:column; gap:10px; }
.tk-news__item{ text-decoration:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; color:var(--tk-ink); transition:color .2s,transform .2s; }
.tk-news__item:hover{ color:var(--tk-accent-2); transform:translateX(5px); }
.tk-news__date{ font:600 13px var(--tk-en); color:var(--tk-accent-2); flex:none; }
.tk-news__tag{ flex:none; font:600 11px var(--tk-body); color:var(--tk-ink); background:var(--tk-bg-tint); border-radius:999px; padding:3px 12px; }
.tk-news__tag--fill{ color:#fff; background:var(--tk-accent); }
.tk-news__txt{ font:500 16px/1.6 var(--tk-body); }
.tk-news__more{ text-decoration:none; flex:none; display:inline-flex; align-items:center; gap:8px; font:700 13px var(--tk-body); color:var(--tk-ink); transition:color .2s,transform .2s; }
.tk-news__more:hover{ color:var(--tk-accent-2); transform:translateX(5px); }

/* --- CONCEPT --- */
.tk-concept{ position:relative; background:var(--tk-bg-tint); background-image:linear-gradient(142deg,rgba(255,255,255,.6) 0 30%,transparent 30%),linear-gradient(-84deg,rgba(0,180,237,.10) 0 34%,transparent 34%); background-repeat:no-repeat; background-size:300% 300%; background-position:0% 0%,100% 100%; animation:tk-bgdrift 80s ease-in-out infinite alternate; color:var(--tk-ink); overflow:hidden; clip-path:polygon(0 0,100% 0,100% calc(100% - 7vw),0 100%); z-index:2; }
.tk-concept__ghost{ right:clamp(20px,4vw,56px); top:clamp(18px,3vw,48px); font-size:clamp(56px,16vw,240px); color:rgba(0,180,237,.12); }
.tk-concept__inner{ position:relative; max-width:1100px; margin:0 auto; padding:clamp(80px,12vw,160px) clamp(20px,4vw,56px); }
.tk-concept__intro{ margin:18px 0 22px; font:500 16px/1.8 var(--tk-body); color:#3c5d70; }
.tk-concept__h2{ margin:0 0 28px; font-family:var(--tk-sans); font-weight:900; line-height:.98; }
.tk-concept__h2 span{ display:block; }
.tk-concept__h2 span:first-child{ font-size:clamp(28px,5.6vw,66px); }
.tk-concept__h2-big{ margin-top:.02em; line-height:1.06; padding-bottom:.1em; }
.tk-concept__h2-big .tk-outline{ font-size:clamp(40px,9.4vw,150px); }
.tk-concept__h2-big{ font-size:clamp(24px,5vw,72px); }
.tk-concept__body{ margin:0; max-width:620px; font:400 clamp(16px,1.7vw,18px)/2.1 var(--tk-body); color:#48515f; }

/* --- 画像帯 --- */
.tk-imgband{ position:relative; z-index:1; height:clamp(280px,34vw,520px); margin:-7vw 0; background-size:cover; background-position:center; background-attachment:fixed; }
/* スマホ/タッチ端末は background-attachment:fixed 非対応で背景が拡大・ズレるため scroll に切替（パララックスはPC限定に）。2026-07-14 */
@media (hover:none) and (pointer:coarse){ .tk-imgband{ background-attachment:scroll; } }

/* --- PROOF / NUMBERS --- */
.tk-proof{ position:relative; background:var(--tk-bg-tint); background-image:linear-gradient(96deg,rgba(255,255,255,.55) 0 27%,transparent 27%),linear-gradient(-158deg,rgba(2,58,92,.07) 0 36%,transparent 36%); background-repeat:no-repeat; background-size:300% 300%; background-position:0% 0%,100% 100%; animation:tk-bgdrift 104s ease-in-out infinite alternate; color:var(--tk-ink); clip-path:polygon(0 0,100% 7vw,100% 100%,0 100%); margin-top:-7vw; z-index:3; }
.tk-proof__ghost{ left:clamp(20px,4vw,56px); bottom:clamp(18px,3vw,48px); }
.tk-proof__inner{ padding-top:clamp(84px,11vw,150px); padding-bottom:clamp(72px,10vw,140px); position:relative; z-index:1; }
.tk-proof__head{ display:grid; gap:8px; margin-bottom:clamp(36px,5vw,60px); }
.tk-proof__h2{ margin:6px 0 0; font-family:var(--tk-sans); font-weight:900; line-height:1.04; }
.tk-proof__h2 span{ display:block; }
.tk-proof__h2 span:first-child{ font-size:clamp(22px,3.4vw,40px); }
.tk-proof__h2-big{ margin-top:.02em; font-size:clamp(40px,9vw,128px); padding-bottom:.1em; }
.tk-proof__lead{ margin:6px 0 0; font:400 17px/1.7 var(--tk-body); color:#3c5d70; }
.tk-proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tk-stat{ background:#fff; padding:30px 24px; display:flex; flex-direction:column; }
.tk-stat--wide{ grid-column:span 2; justify-content:center; padding:34px 30px; }
.tk-stat--wide2{ grid-column:span 2; grid-row:span 2; }
.tk-stat--dark{ background:var(--tk-ink); color:#fff; }
.tk-stat__bar{ width:34px; height:4px; background:var(--tk-accent); margin-bottom:18px; }
.tk-stat__k{ font:700 clamp(15px,1.5vw,19px) var(--tk-sans); color:#3c5d70; line-height:1.25; }
.tk-stat__k b{ font-size:clamp(28px,3.8vw,46px); font-weight:900; color:var(--tk-ink); }
.tk-stat__k--lg{ font-size:clamp(28px,3.8vw,46px); font-weight:700; color:#fff; }
.tk-stat--dark .tk-stat__k{ color:#aebfcb; }
.tk-stat--dark .tk-stat__k b{ color:#fff; } /* KEEP: ダークカードでは<b>を白に。var(--tk-ink)のままだと背景#02324Fと同色で文字が消える（例:離職率） */
.tk-stat__v{ font:700 clamp(15px,1.5vw,19px) var(--tk-sans); color:#3c5d70; line-height:1.15; margin-top:6px; }
.tk-stat--dark .tk-stat__v{ color:#aebfcb; }
.tk-stat__v--sm .tk-stat__num{ font-size:clamp(28px,3.8vw,46px); }
.tk-stat__num{ font-family:"Space Grotesk",var(--tk-sans); font-weight:900; font-size:clamp(34px,4.6vw,58px); color:var(--tk-accent); }
.tk-stat__t{ margin-top:12px; font:700 17px var(--tk-sans); color:var(--tk-ink); }
.tk-stat--dark .tk-stat__t{ color:#fff; }
.tk-stat__d{ margin:6px 0 0; font:400 16px/1.7 var(--tk-body); color:var(--tk-muted); }
.tk-stat__d--light{ color:#aebfcb; }
.tk-stat__photo{ position:relative; min-height:clamp(240px,30vw,420px); overflow:hidden; background:#0e2438; }
.tk-stat__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --- MENU / EXPLORE --- */
.tk-menu{ position:relative; background:#fff; background-image:linear-gradient(-62deg,rgba(64,84,104,.12) 0 33%,transparent 33%),linear-gradient(168deg,rgba(0,180,237,.11) 0 32%,transparent 32%); background-repeat:no-repeat; background-size:300% 300%; background-position:0% 0%,100% 100%; animation:tk-bgdrift 92s ease-in-out infinite alternate; color:var(--tk-ink); clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 7vw)); margin-top:-1px; z-index:4; }
.tk-menu__ghost{ right:clamp(20px,4vw,56px); top:clamp(18px,3vw,48px); }
.tk-menu__inner{ padding-top:clamp(72px,10vw,140px); padding-bottom:clamp(122px,15vw,210px); position:relative; z-index:1; }
.tk-menu__head{ margin-bottom:clamp(36px,5vw,56px); }
.tk-menu__h2{ margin:10px 0 0; font-family:var(--tk-sans); font-weight:900; line-height:1.04; }
.tk-menu__h2 span{ display:block; }
.tk-menu__h2 span:first-child{ font-size:clamp(22px,3.4vw,40px); }
.tk-menu__h2-big{ margin-top:.02em; font-size:clamp(40px,9vw,128px); padding-bottom:.1em; }
.tk-menu__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tk-mcard{ position:relative; text-decoration:none; color:var(--tk-ink); background:var(--tk-bg-soft); padding:34px 28px; display:flex; flex-direction:column; min-height:230px; border:1px solid rgba(2,58,92,.05); transition:transform .25s, box-shadow .25s; overflow:hidden; }
.tk-mcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,58,92,.12); }
.tk-mcard--w2{ grid-column:span 2; }
.tk-mcard--w3{ grid-column:span 3; }
.tk-mcard--feature{ color:#fff; background:var(--tk-ink); min-height:clamp(240px,26vw,320px); }
.tk-mcard__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.tk-mcard__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,58,92,.5),rgba(2,58,92,.82)); }
.tk-mcard__ghost{ position:absolute; right:20px; bottom:14px; font:700 clamp(34px,6vw,66px) var(--tk-en); color:rgba(0,180,237,.2); line-height:.8; letter-spacing:-.02em; }
.tk-mcard__en{ position:relative; font:700 12px var(--tk-en); letter-spacing:.18em; color:var(--tk-accent); }
.tk-mcard__h3{ position:relative; margin:14px 0 8px; font:700 22px var(--tk-sans); }
.tk-mcard__h3--light{ color:#fff; }
.tk-mcard__d{ position:relative; margin:0; font:400 16px/1.8 var(--tk-body); color:var(--tk-muted); flex:1; }
.tk-mcard__d--light{ color:#bccbd6; }
.tk-mcard__foot{ position:relative; margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tk-mcard__label{ font:700 13px var(--tk-body); color:var(--tk-accent-2); }
.tk-mcard__label--light{ color:var(--tk-accent); }
.tk-mcard__arw{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--tk-accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--tk-en); font-size:19px; line-height:1; transition:transform .25s, background .25s; }
.tk-mcard:hover .tk-mcard__arw{ transform:translateX(4px); background:var(--tk-accent-2); }
.tk-mcard__deco{ position:relative; min-height:clamp(220px,24vw,320px); overflow:hidden; background:#0e2438; }
.tk-mcard__deco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --- RECORD / WORKS --- */
.tk-record{ position:relative; background:var(--tk-bg-soft); background-image:linear-gradient(74deg,rgba(0,180,237,.10) 0 31%,transparent 31%),linear-gradient(-150deg,rgba(2,58,92,.07) 0 38%,transparent 38%); background-repeat:no-repeat; background-size:300% 300%; background-position:0% 0%,100% 100%; animation:tk-bgdrift 116s ease-in-out infinite alternate; color:var(--tk-ink); clip-path:polygon(0 7vw,100% 0,100% 100%,0 100%); margin-top:-7vw; z-index:5; }
.tk-record__ghost{ right:clamp(20px,4vw,56px); top:clamp(18px,3vw,48px); }
.tk-record__inner{ padding-top:clamp(122px,15vw,210px); padding-bottom:clamp(72px,10vw,140px); position:relative; z-index:1; }
.tk-record__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(36px,5vw,56px); }
.tk-record__label{ display:flex; align-items:baseline; gap:14px; margin:6px 0 0; }
.tk-record__en{ font:700 13px var(--tk-en); letter-spacing:.24em; color:var(--tk-ink); }
.tk-record__jp{ font:500 13px var(--tk-body); color:var(--tk-muted); }
.tk-record__h2{ margin:12px 0 0; font-family:var(--tk-sans); font-weight:900; line-height:1.04; }
.tk-record__h2 span{ display:block; }
.tk-record__h2 span:first-child{ font-size:clamp(22px,3.4vw,40px); }
.tk-record__h2-big{ margin-top:.02em; font-size:clamp(40px,9vw,128px); padding-bottom:.1em; }
.tk-record__all{ text-decoration:none; flex:none; display:inline-flex; align-items:center; gap:9px; padding:14px 26px; background:var(--tk-ink); border-radius:999px; font:700 16px var(--tk-body); color:#fff; transition:transform .2s; }
.tk-record__all:hover{ transform:translateY(-2px); }
.tk-record__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tk-wcard{ text-decoration:none; color:var(--tk-ink); background:#fff; overflow:hidden; border:1px solid rgba(2,58,92,.05); transition:transform .25s; }
.tk-wcard:hover{ transform:translateY(-4px); }
.tk-wcard__img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#0e2438; }
.tk-wcard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-wcard__body{ padding:24px 22px; }
.tk-wcard__meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tk-wcard__date{ font:600 11px var(--tk-en); color:var(--tk-accent-2); }
.tk-wcard__tag{ font:600 10px var(--tk-body); color:var(--tk-ink); background:var(--tk-bg-tint); border-radius:999px; padding:3px 10px; }
.tk-wcard__tag--fill{ color:#fff; background:var(--tk-accent); }
.tk-wcard__h3{ margin:0; font:700 16px/1.6 var(--tk-sans); }

/* --- CTA --- */
.tk-cta{ position:relative; background:var(--tk-navy); color:#fff; overflow:hidden; z-index:6; }
.tk-cta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-cta__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,20,38,.8),rgba(2,20,38,.9)); }
.tk-cta__scrim::after{ content:""; position:absolute; inset:0; background:radial-gradient(100% 100% at 50% 0%,rgba(0,180,237,.16),transparent 60%); }
.tk-cta__inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; padding:clamp(72px,10vw,130px) clamp(20px,4vw,56px); text-align:center; }
.tk-cta__h2{ margin:14px 0 32px; font-family:var(--tk-sans); font-weight:900; line-height:1.02; color:#fff; }
.tk-cta__h2 span{ display:block; }
.tk-cta__h2 span:first-child{ font-size:clamp(24px,4.4vw,50px); }
.tk-cta__h2-big{ margin-top:.04em; font-size:clamp(36px,8vw,118px); line-height:1.08; padding-bottom:.08em; }

/* --- keyframes --- */
@keyframes tk-marquee{ to{ transform:translateX(-50%); } }
@keyframes tk-scrollcue{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(280%); } }
/* セクション斜めグラデ帯の“うねうね”ドリフト（受領デザイン bgDrift 再現） */
@keyframes tk-bgdrift{ 0%{ background-position:0% 0%,100% 100%; } 100%{ background-position:100% 65%,15% 10%; } }
/* ヒーロー写真のゆっくりズーム（Ken Burns風・受領デザイン heroZoom 再現） */
@keyframes tk-herozoom{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }

/* ============================================================
   下層ヘッダー／ページヘッダー帯（04_下層ヘッダー.html・各下層ページ共用）
   固定ヘッダー分の上余白を確保（R-18）
   ============================================================ */
.tk-pagehead{ position:relative; overflow:hidden; background:var(--tk-navy); color:#fff;
  padding:calc(var(--fixed-header-h) + clamp(48px,7vw,88px)) clamp(20px,5vw,32px) clamp(48px,7vw,80px); }
.tk-pagehead__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; z-index:0; }
.tk-pagehead::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(90% 80% at 78% 20%,rgba(0,180,237,.20),transparent 60%); }
.tk-pagehead__inner{ position:relative; z-index:2; max-width:var(--tk-wrap); margin:0 auto; }
.tk-pagehead__en{ font:700 13px var(--tk-en); letter-spacing:.24em; color:var(--tk-accent); text-transform:uppercase; }
.tk-pagehead__title{ margin:10px 0 0; font:900 clamp(2rem,6vw,3.4rem)/1.25 var(--tk-sans); color:#fff; }
.tk-pagehead__title .ac{ color:var(--tk-accent); }
.tk-pagehead__lead{ margin:18px 0 0; max-width:760px; font:400 clamp(15px,1.6vw,16px)/1.95 var(--tk-body); color:#aebfcb; }

/* ============================================================
   下層ページ 共通部品（06〜15 で共用）
   ============================================================ */
/* --- サブヒーロー（各下層ページ先頭のダーク帯） --- */
.tk-subhero{ position:relative; min-height:clamp(480px,58vh,580px); display:flex; align-items:flex-end; overflow:hidden;
  background:linear-gradient(140deg,#0e2438,#071a2c); }
.tk-subhero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-subhero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,22,40,.9) 0%,rgba(2,22,40,.6) 48%,rgba(2,22,40,.34) 100%); }
.tk-subhero__inner{ position:relative; z-index:1; width:100%; max-width:var(--tk-wrap-w); margin:0 auto; padding:calc(var(--fixed-header-h) + clamp(24px,3vw,44px)) clamp(20px,4vw,56px) clamp(40px,5vw,72px); }
.tk-subhero__script{ font-family:var(--tk-script); font-size:clamp(32px,5vw,52px); color:var(--tk-accent); line-height:1; }
.tk-subhero__label{ display:flex; align-items:baseline; gap:14px; margin:4px 0 14px; }
.tk-subhero__en{ font:700 13px var(--tk-en); letter-spacing:.24em; color:#fff; }
.tk-subhero__jp{ font:500 13px var(--tk-body); color:var(--tk-muted-d); }
/* h1 は .tk-scope h1(0,1,1) に色を奪われるため .tk-subhero を足して (0,2,0) で白を勝たせる（!important不使用） */
.tk-subhero .tk-subhero__h1{ margin:0; font:900 clamp(26px,4.4vw,52px)/1.24 var(--tk-sans); color:#fff; }

/* ============================================================
   下層ページヘッダー page-hero（デザイナー提供＝正本）
   ・grid質感＋scrim＋eyebrow(Allura)＋title＋lead。単体完結（.tk-scope配下に置かない
     ＝.tk-scope h1 に色を奪われないため）。eyebrow/title/lead のタイポは確認用に合わせ補完。
   ============================================================ */
.page-hero{ position:relative; display:flex; align-items:flex-end; min-height:clamp(480px,58vh,580px); overflow:hidden; background:linear-gradient(140deg,#0e2438,#071a2c); color:#fff; }
.page-hero *{ box-sizing:border-box; }
.page-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(0,180,237,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,237,.06) 1px,transparent 1px); background-size:54px 54px; }
.page-hero__scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,22,40,.9) 0%,rgba(2,22,40,.6) 48%,rgba(2,22,40,.34) 100%); }
.page-hero__inner{ position:relative; width:100%; max-width:1480px; margin:0 auto; padding:clamp(40px,6vw,80px) clamp(20px,4vw,56px); }
.page-hero__eyebrow{ margin:0; font-family:"Allura",cursive; font-size:clamp(32px,5vw,52px); line-height:1; color:#00B4ED; }
.page-hero__title{ margin:12px 0 0; font:900 clamp(26px,4.4vw,52px)/1.24 "Zen Kaku Gothic New",sans-serif; color:#fff; }
.page-hero__lead{ margin:18px 0 0; font:400 clamp(15px,1.7vw,17px)/1.9 "Noto Sans JP",sans-serif; color:rgba(255,255,255,.82); }
/* ヒーロー内ラベル（Allura「Blog」の下：BLOG／ブログ） */
.page-hero__label{ display:flex; align-items:baseline; gap:14px; margin:6px 0 14px; }
.page-hero__en{ font:700 13px "Space Grotesk",sans-serif; letter-spacing:.24em; color:#fff; }
.page-hero__jp{ font:500 13px "Noto Sans JP",sans-serif; color:#9fb0bd; }
/* 導入リード（デザイン：ヒーロー外・白地・ダーク文字。下層ヘッダー直下に置く） */
.page-intro{ background:#F4FAFD; }  /* 確認用 #blog セクション地に合わせる（下のカード部と連続） */
.page-intro__inner{ max-width:1480px; margin:0 auto; padding:clamp(48px,7vw,96px) clamp(20px,4vw,56px); }
.page-intro__lead{ margin:0; font:400 clamp(15px,1.7vw,17px)/1.9 "Noto Sans JP",sans-serif; color:#48515f; }

/* --- セクションバンド（白/淡青/ネイビー） --- */
.tk-band{ position:relative; overflow:hidden; }
.tk-band--white{ background:#fff; color:var(--tk-ink); }
.tk-band--soft{ background:var(--tk-bg-soft); color:var(--tk-ink); }
.tk-band--tint{ background:var(--tk-bg-tint); color:var(--tk-ink); }
.tk-band--navy{ background:var(--tk-ink); color:#fff; }
.tk-band__inner{ position:relative; z-index:1; max-width:var(--tk-wrap-w); margin:0 auto; padding:clamp(64px,9vw,120px) clamp(20px,4vw,56px); }
.tk-band__inner--narrow{ max-width:980px; }
.tk-band__inner--mid{ max-width:1200px; }

/* --- 見出しグループ（EN eyebrow + アウトライン見出し） --- */
.tk-hgroup__en{ font:700 13px var(--tk-en); letter-spacing:.24em; color:var(--tk-accent-2); text-transform:uppercase; }
.tk-band--navy .tk-hgroup__en{ color:var(--tk-accent); }
.tk-hgroup__h2{ margin:12px 0 20px; font-family:var(--tk-sans); font-weight:900; line-height:1.05; }
.tk-hgroup__h2 span{ display:block; }
.tk-hgroup__lg{ font-size:clamp(22px,3.4vw,40px); }
.tk-hgroup__xl{ font-size:clamp(38px,8vw,110px); padding-bottom:.08em; }

/* --- 本文プロース --- */
.tk-prose{ font:400 clamp(16px,1.7vw,18px)/2.1 var(--tk-body); color:#48515f; max-width:640px; }
.tk-band--navy .tk-prose{ color:#bccbd6; }
.tk-band--tint .tk-prose{ color:#3c5d70; }
.tk-prose p{ margin:0 0 16px; }
.tk-prose p:last-child{ margin-bottom:0; }
.tk-prose strong{ color:var(--tk-ink); font-weight:700; }

/* --- 2カラム（テキスト＋画像） --- */
.tk-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,68px); align-items:center; }
.tk-split--rev{ direction:rtl; }
.tk-split--rev > *{ direction:ltr; }
.tk-figure{ position:relative; overflow:hidden; background:#0e2438; aspect-ratio:5/4; }
.tk-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* === 田原工業 追補（2枚重ね系スキン。再生成で消えたら貼り直す）=== */
/* 現場の一日：メイン写真＋右下オーバーラップ（受領 A DAY 意匠。枠色=セクション地色）*/
.tk-figover{ position:relative; padding:0 clamp(24px,3vw,48px) clamp(64px,8vw,110px) 0; }
.tk-figover__main{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0e2438; box-shadow:0 20px 44px rgba(2,58,92,.22); }
.tk-figover__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-figover__inset{ position:absolute; right:0; bottom:clamp(-32px,-2vw,-12px); width:56%; aspect-ratio:4/3; overflow:hidden; background:#0e2438; border:5px solid var(--tk-bg-soft); box-shadow:0 18px 40px rgba(2,58,92,.28); }
.tk-figover__inset img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* STRENGTH：大小2枚オーバーラップ＋テクニカルグリッド（受領 STRENGTH 意匠）*/
.tk-figduo{ position:relative; padding:0 clamp(24px,4vw,52px) clamp(40px,5vw,64px) 0; }
.tk-figduo__main{ position:relative; aspect-ratio:5/4; overflow:hidden; background:linear-gradient(150deg,#0e2438,#071a2c); }
.tk-figduo__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-figduo__inset{ position:absolute; right:0; bottom:0; width:48%; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(150deg,#12222e,#0a141c); border:5px solid #fff; box-shadow:0 18px 44px rgba(2,58,92,.28); }
.tk-figduo__inset img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-figduo__grid{ position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(0,180,237,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,237,.08) 1px,transparent 1px); background-size:42px 42px; }
.tk-figduo__inset .tk-figduo__grid{ background-image:linear-gradient(rgba(0,180,237,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,237,.1) 1px,transparent 1px); background-size:34px 34px; }
.tk-stack{ display:flex; flex-direction:column; gap:14px; }

/* 汎用カードグリッド */
.tk-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tk-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.tk-infocard{ background:var(--tk-bg-soft); padding:30px 26px; border:1px solid rgba(2,58,92,.05); }
.tk-infocard--dark{ background:var(--tk-ink); color:#fff; border:none; }
.tk-infocard__n{ font:700 13px var(--tk-en); color:var(--tk-accent); }
.tk-infocard h3{ margin:12px 0 10px; font:700 18px var(--tk-sans); color:var(--tk-ink); }
.tk-infocard--dark h3{ color:#fff; }
.tk-infocard p{ margin:0; font:400 16px/1.9 var(--tk-body); color:var(--tk-muted); }
.tk-infocard--dark p{ color:#aebfcb; }
.tk-btn--navy{ background:var(--tk-ink); color:#fff; }
.tk-btn--navy:hover{ transform:translateY(-2px); }

/* 業務の大ブロック（service 01-03） */
.tk-worknum{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tk-worknum__n{ font:700 28px var(--tk-en); color:var(--tk-accent); }
.tk-worknum__en{ font:700 13px var(--tk-en); letter-spacing:.16em; color:var(--tk-muted-d); }
.tk-workrow__h3{ margin:0 0 14px; font:700 clamp(20px,2.6vw,30px) var(--tk-sans); color:var(--tk-ink); }
.tk-workrow__body{ font:400 17px/2 var(--tk-body); color:#48515f; }
.tk-workrow__body p{ margin:0 0 12px; } .tk-workrow__body p:last-child{ margin-bottom:0; }

/* 大型ディスプレイ文字（technology PRECISE / DYNAMIC） */
.tk-bigtype{ font:900 clamp(48px,11vw,150px) var(--tk-en); color:var(--tk-accent); line-height:.86; letter-spacing:-.02em; }
.tk-bigtype--outline{ color:transparent; -webkit-text-stroke:2px var(--tk-accent); -webkit-text-fill-color:transparent; }
.tk-bigtype-cap{ margin:18px 0 0; max-width:460px; font:600 clamp(18px,2.1vw,23px)/1.85 var(--tk-body); color:#f0f6fa; }
.tk-tech-lead{ max-width:620px; font:400 clamp(16px,1.7vw,18px)/2.1 var(--tk-body); color:#cdd6df; }
.tk-tech-lead p{ margin:0 0 16px; } .tk-tech-lead p:last-child{ margin-bottom:0; }
.tk-tech-closing{ margin:28px 0 0; font:700 clamp(17px,2.2vw,24px) var(--tk-sans); color:#fff; text-align:center; }
.tk-tech-closing .ac{ color:var(--tk-accent); }

/* 資格一覧グリッド（technology） */
.tk-qualgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tk-qual{ background:var(--tk-bg-tint); padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.tk-qual__head{ display:flex; align-items:center; gap:14px; }
.tk-qual__n{ flex:none; font:700 13px var(--tk-en); color:var(--tk-accent-2); }
.tk-qual__name{ font:700 16px/1.5 var(--tk-body); color:var(--tk-ink); }
.tk-qual__d{ margin:0; font:400 13.5px/1.7 var(--tk-body); color:#48627a; }

/* 対応エリアボックス / メトリクス */
.tk-areabox{ background:var(--tk-bg-tint); padding:34px 30px; }
.tk-areabox h3{ margin:0 0 16px; font:700 clamp(19px,2.4vw,26px) var(--tk-sans); color:var(--tk-ink); }
.tk-areabox__big{ font:700 clamp(28px,4vw,44px)/1.1 var(--tk-en); color:var(--tk-accent-2); }
.tk-areabox p{ margin:18px 0 0; font:400 16px/1.9 var(--tk-body); color:#3c5d70; }
.tk-metric{ background:rgba(0,180,237,.08); padding:22px 24px; }
.tk-metric__v{ font:900 clamp(22px,3vw,34px) var(--tk-sans); color:var(--tk-accent); line-height:1; }
.tk-metric__l{ margin-top:8px; font:500 16px/1.7 var(--tk-body); color:#e6f7fe; }
.tk-support{ background:var(--tk-ink); color:#fff; padding:clamp(36px,5vw,56px); }
.tk-support__script{ font-family:var(--tk-script); font-size:clamp(28px,4vw,44px); color:var(--tk-accent); }
.tk-support h3{ margin:8px 0 16px; font:700 clamp(20px,2.6vw,30px) var(--tk-sans); color:#fff; }
.tk-support p{ margin:0; font:400 17px/2 var(--tk-body); color:#cdd6df; }

@media (max-width:860px){
  .tk-grid3{ grid-template-columns:1fr !important; }
  .tk-grid2{ grid-template-columns:1fr !important; }
  .tk-qualgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .tk-qualgrid{ grid-template-columns:1fr; } }

/* ============================================================
   採用情報（10_recruit）／数字（11_numbers）専用
   ============================================================ */
.tk-subhero__tagline{ margin:18px 0 0; font:700 clamp(16px,2vw,24px) var(--tk-body); color:var(--tk-accent); }
.tk-workstack{ display:flex; flex-direction:column; gap:clamp(28px,4vw,56px); }

/* 給与モデル */
.tk-salgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tk-salcard{ background:rgba(255,255,255,.04); border:1px solid rgba(0,180,237,.2); padding:32px 28px; }
.tk-salcard--accent{ background:var(--tk-accent); border:none; }
.tk-salcard__k{ font:700 18px var(--tk-body); color:#cfe0ec; }
.tk-salcard--accent .tk-salcard__k{ color:#e0f7ff; }
.tk-salcard__v{ margin-top:10px; font:700 clamp(38px,5vw,56px)/1.05 var(--tk-en); color:#fff; }
.tk-salcard__v .u{ font-size:20px; color:var(--tk-accent); margin-left:2px; }
.tk-salcard--accent .tk-salcard__v .u{ color:#fff; }
.tk-salcard__v .sm{ font-size:.46em; color:#aebfcb; }
.tk-salcard__note{ margin:12px 0 0; font:400 16px/1.6 var(--tk-body); color:#aebfcb; }
.tk-salcard--accent .tk-salcard__note{ color:#e0f7ff; }
.tk-inlinecta{ margin-top:clamp(28px,4vw,44px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; background:rgba(255,255,255,.05); border:1px solid rgba(0,180,237,.28); padding:clamp(28px,4vw,40px) clamp(26px,4vw,44px); }
.tk-inlinecta__en{ font:700 13px var(--tk-en); letter-spacing:.2em; color:var(--tk-accent); }
.tk-inlinecta__t{ margin:8px 0 0; font:700 clamp(18px,2.2vw,25px)/1.5 var(--tk-sans); color:#fff; }

/* 環境（社用車等） */
.tk-envgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tk-envcard{ background:#fff; padding:24px 22px; }
.tk-envcard__en{ font:700 13px var(--tk-en); color:var(--tk-accent); }
.tk-envcard p{ margin:10px 0 0; font:500 16px/1.7 var(--tk-body); color:var(--tk-ink); }

/* こんな方にオススメ */
.tk-fitgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tk-fitcard{ display:flex; flex-direction:column; background:var(--tk-bg-soft); border:1px solid rgba(2,58,92,.05); overflow:hidden; }
.tk-fitcard__img{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.tk-fitcard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-fitcard__row{ display:flex; align-items:center; gap:16px; padding:24px 26px; }
.tk-fitcard__check{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--tk-accent); display:flex; align-items:center; justify-content:center; color:#fff; font:700 16px var(--tk-en); }
.tk-fitcard__txt{ font:500 17px/1.6 var(--tk-body); color:var(--tk-ink); }

/* 現場の一日タイムライン */
.tk-timeline{ position:relative; padding-left:24px; border-left:2px solid rgba(2,58,92,.12); display:flex; flex-direction:column; gap:4px; }
.tk-tl{ position:relative; padding:14px 0; }
.tk-tl--break{ padding:14px 18px; background:var(--tk-bg-tint); margin:4px 0; }
.tk-tl::before{ content:""; position:absolute; left:-31px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--tk-ink); border:3px solid var(--tk-bg-soft); }
.tk-tl--break::before{ background:var(--tk-accent); top:22px; }
.tk-tl__row{ display:flex; align-items:baseline; gap:14px; }
.tk-tl__time{ font:700 16px var(--tk-en); color:var(--tk-ink); width:96px; flex:none; }
.tk-tl--break .tk-tl__time{ color:var(--tk-accent-2); }
.tk-tl__label{ font:600 17px var(--tk-sans); }
.tk-tl--break .tk-tl__label{ color:var(--tk-accent-2); }

/* 募集要項 */
.tk-req{ margin:0; border-top:2px solid var(--tk-ink); }
.tk-req__row{ display:grid; grid-template-columns:clamp(110px,24vw,180px) 1fr; gap:16px; padding:20px 4px; border-bottom:1px solid rgba(2,58,92,.1); }
.tk-req__row dt{ font:700 16px var(--tk-sans); color:var(--tk-ink); }
.tk-req__row dd{ margin:0; font:400 17px/1.8 var(--tk-body); color:#48515f; }

/* 数字ページ：TOPの .tk-stat を流用。補足ノート */
.tk-note{ background:#fff; border:1px solid rgba(0,180,237,.25); padding:30px 28px; }
.tk-note h3{ margin:0 0 10px; font:700 17px var(--tk-sans); color:var(--tk-ink); }
.tk-note p{ margin:0; font:400 17px/2 var(--tk-body); color:#3c5d70; }

@media (max-width:860px){
  .tk-salgrid{ grid-template-columns:1fr; }
  .tk-envgrid{ grid-template-columns:1fr; }
  .tk-fitgrid{ grid-template-columns:1fr; }
}

/* ============================================================
   スタッフ紹介・代表メッセージ（12）／会社概要（13）／お問い合わせ（15）
   ============================================================ */
/* スタッフカード */
.tk-staff{ background:var(--tk-bg-soft); overflow:hidden; border:1px solid rgba(2,58,92,.05); display:grid; grid-template-columns:0.85fr 1.15fr; align-items:stretch; }
.tk-staff__img{ position:relative; overflow:hidden; background:linear-gradient(150deg,#0e2438,#071a2c); min-height:clamp(220px,26vw,320px); }
.tk-staff__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-staff__body{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; justify-content:center; }
.tk-staff__body h3{ margin:0 0 10px; font:700 clamp(18px,2vw,22px) var(--tk-sans); color:var(--tk-ink); }
.tk-staff__body p{ margin:0 0 12px; font:400 16px/1.9 var(--tk-body); color:#48515f; }
.tk-staff__note{ margin:0; font:400 16px/1.6 var(--tk-body); color:#9aa7b8; }

/* 代表メッセージ */
.tk-message{ position:relative; background:var(--tk-navy); color:#fff; overflow:hidden; }
.tk-message__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:clamp(70px,9vw,140px) clamp(20px,4vw,56px); display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(36px,5vw,80px); align-items:start; }
.tk-message__portrait{ position:relative; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(150deg,#0e2438,#071a2c); } /* 代表枠:横写真ytp02662で社名ロゴ+顔+口を両立させるため 3/4→4/5 に微調整。2026-07-13 */
.tk-message__portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:8% center; /* 代表 ytp02662=4:5枠で㈱田原工業ロゴ+横顔+口を収める左寄り(8%)。2026-07-13 */ }
.tk-message__script{ font-family:var(--tk-script); font-size:clamp(32px,4.6vw,52px); color:var(--tk-accent); line-height:1; }
.tk-message__h2{ margin:10px 0 30px; font:900 clamp(24px,3.6vw,42px)/1.5 var(--tk-sans); letter-spacing:.02em; color:#fff; }
.tk-message__body{ font:400 clamp(16px,1.5vw,18px)/2.1 var(--tk-body); color:#d7dee6; }
.tk-message__body p{ margin:0 0 22px; } .tk-message__body p:last-child{ margin:0; }
.tk-message__quote{ margin-top:34px; padding:24px 28px; border-left:4px solid var(--tk-accent); background:rgba(0,180,237,.06); }
.tk-message__quote-lead{ margin:0; font:900 clamp(18px,2.4vw,26px)/1.45 var(--tk-sans); color:#fff; }
.tk-message__quote-lead .ac{ color:var(--tk-accent); }
.tk-message__sign{ display:flex; align-items:baseline; gap:12px; margin-top:16px; }
.tk-message__sign-role{ font:400 16px/1.6 var(--tk-body); color:var(--tk-muted-d); }
.tk-message__sign-name{ font:700 20px "Shippori Mincho",serif; color:#fff; }

/* 会社概要：地図・小見出し */
.tk-subheading{ margin:0 0 18px; font:700 20px var(--tk-sans); color:var(--tk-ink); display:flex; align-items:center; gap:12px; }
.tk-subheading::before{ content:""; width:24px; height:1px; background:var(--tk-accent); }
.tk-map{ position:relative; aspect-ratio:21/9; overflow:hidden; background:var(--tk-bg-tint); border:1px solid rgba(2,58,92,.06); }
.tk-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* お問い合わせ：導入カード */
.tk-contactgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.tk-contactcard{ background:#fff; padding:30px 28px; border:1px solid rgba(2,58,92,.05); }
.tk-contactcard h2{ margin:0 0 16px; font:700 17px var(--tk-sans); color:var(--tk-ink); }
.tk-contactcard p{ margin:0; font:400 16px/1.95 var(--tk-body); color:#48515f; }
.tk-telrow{ text-decoration:none; display:block; margin-bottom:14px; transition:transform .2s; }
.tk-telrow:hover{ transform:translateX(5px); }
.tk-telrow__k{ display:block; font:400 16px/1.6 var(--tk-body); color:var(--tk-muted); }
.tk-telrow__v{ font:700 26px var(--tk-en); color:var(--tk-accent-2); }

/* 自由ページの固定ヘッダー分の上余白（privacy等・skin .privacy はヘッダー分を持たないため） */
.tk-freetop{ padding-top:var(--fixed-header-h); background:#fff; }

@media (max-width:860px){
  .tk-staff{ grid-template-columns:1fr; }
  .tk-message__inner{ grid-template-columns:1fr; }
  .tk-message__portrait{ max-width:420px; }
  .tk-contactgrid{ grid-template-columns:1fr; }
}

/* --- 社員ファースト循環図（about） --- */
.tk-cycle{ position:relative; display:grid; grid-template-columns:1fr 1.1fr 1fr;
  grid-template-areas:'c1 n01 c2' 'n04 hub n02' 'c3 n03 c4'; gap:clamp(8px,1.4vw,18px); align-items:center; justify-items:center; }
.tk-cycle__hub{ grid-area:hub; width:min(100%,210px); aspect-ratio:1; border-radius:50%; background:#0a3a52; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.tk-cycle__hub-script{ font-family:var(--tk-script); font-size:clamp(20px,3vw,34px); color:var(--tk-accent); line-height:1; }
.tk-cycle__hub-jp{ font:900 clamp(14px,1.8vw,21px) var(--tk-sans); color:#fff; margin-top:3px; }
.tk-cycle__hub-en{ font:700 9px var(--tk-en); letter-spacing:.3em; color:#6a8294; margin-top:7px; }
.tk-cycle__node{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,180,237,.28); padding:16px 14px; text-align:center; }
.tk-cycle__node--hi{ background:rgba(0,180,237,.16); border-color:rgba(0,180,237,.6); }
.tk-cycle__num{ font:900 clamp(26px,4vw,48px) var(--tk-en); color:transparent; -webkit-text-stroke:1.5px var(--tk-accent); line-height:1; }
.tk-cycle__node--hi .tk-cycle__num{ color:var(--tk-accent); -webkit-text-stroke:0; }
.tk-cycle__node h3{ margin:4px 0; font:700 clamp(14px,1.7vw,18px) var(--tk-sans); color:#fff; }
.tk-cycle__node p{ margin:0; font:400 clamp(13px,1.4vw,15px)/1.6 var(--tk-body); color:#aebfcb; }
.tk-cycle__n01{ grid-area:n01; } .tk-cycle__n02{ grid-area:n02; } .tk-cycle__n03{ grid-area:n03; } .tk-cycle__n04{ grid-area:n04; }
.tk-cycle__arw{ font:700 clamp(16px,2.4vw,28px) var(--tk-en); color:var(--tk-accent); }
.tk-cycle__arw--c1{ grid-area:c1; transform:rotate(315deg); } .tk-cycle__arw--c2{ grid-area:c2; transform:rotate(45deg); }
.tk-cycle__arw--c3{ grid-area:c3; transform:rotate(225deg); } .tk-cycle__arw--c4{ grid-area:c4; transform:rotate(135deg); }
.tk-cycle-closing{ margin:clamp(30px,4vw,52px) 0 0; text-align:center; font:700 clamp(20px,3vw,34px) var(--tk-sans); color:#fff; }

/* --- ステップ/理由カード（安全01-03・汎用） --- */
.tk-stepcard{ background:var(--tk-bg-soft); border:1px solid rgba(2,58,92,.08); padding:28px 26px; }
.tk-band--navy .tk-stepcard{ background:rgba(255,255,255,.05); border-color:rgba(0,180,237,.28); }
.tk-stepcard__n{ font:700 13px var(--tk-en); color:var(--tk-accent); }
.tk-stepcard h3{ margin:10px 0 8px; font:700 18px var(--tk-sans); color:var(--tk-ink); }
.tk-band--navy .tk-stepcard h3{ color:#fff; }
.tk-stepcard p{ margin:0; font:400 16px/1.9 var(--tk-body); color:var(--tk-muted); }
.tk-callout{ background:linear-gradient(120deg,#02324f,#00405f); border:1px solid rgba(0,180,237,.3); padding:30px 28px; color:#fff; }
.tk-callout__big{ font:700 clamp(34px,4.4vw,54px)/1.02 var(--tk-en); color:var(--tk-accent); }
.tk-callout p{ margin:12px 0 0; font:700 16px var(--tk-sans); color:#fff; }

/* --- 次ページ送り（NEXT） --- */
.tk-next{ position:relative; overflow:hidden; background:var(--tk-ink); color:#fff; border-top:1px solid rgba(0,180,237,.18); }
.tk-next__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.tk-next::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,58,92,.6),rgba(2,58,92,.32)); }
.tk-next__inner{ position:relative; z-index:1; max-width:var(--tk-wrap-w); margin:0 auto; padding:clamp(54px,8vw,104px) clamp(20px,4vw,56px); }
.tk-next__label{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vw,34px); }
.tk-next__label span:first-child{ width:46px; height:8px; background:var(--tk-accent); }
.tk-next__label-en{ font:700 12px var(--tk-en); letter-spacing:.32em; color:var(--tk-accent); }
.tk-next__label-jp{ font:500 12px var(--tk-body); color:#7c93a3; }
.tk-next__link{ text-decoration:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px; color:#fff; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:clamp(20px,3vw,32px); transition:border-color .3s; }
.tk-next__link:hover{ border-bottom-color:rgba(0,180,237,.55); }
.tk-next__title{ font:900 clamp(32px,6vw,72px)/1.06 var(--tk-sans); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.tk-next__link:hover .tk-next__title{ transform:translateX(8px); }
.tk-next__arw{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:clamp(60px,7.5vw,92px); height:clamp(60px,7.5vw,92px); border-radius:50%; background:var(--tk-accent); font:300 clamp(26px,3.6vw,38px) var(--tk-en); color:#fff; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.tk-next__link:hover .tk-next__arw{ transform:translateX(8px); }
.tk-next__sub{ text-decoration:none; display:inline-flex; align-items:center; gap:10px; margin-top:clamp(18px,2.5vw,28px); font:600 16px var(--tk-body); color:#aebfcb; transition:color .2s; }
.tk-next__sub:hover{ color:#fff; }
.tk-next__sub-arw{ font-family:var(--tk-en); color:var(--tk-accent); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.tk-next__sub:hover .tk-next__sub-arw{ transform:translateX(6px); }

/* --- 下層ページ レスポンシブ --- */
@media (max-width:860px){
  .tk-split{ grid-template-columns:1fr !important; }
  .tk-split--rev{ direction:ltr; }
  .tk-cycle{ grid-template-columns:1fr 1fr; grid-template-areas:'n01 n02' 'n04 n03' 'hub hub'; }
  .tk-cycle__arw{ display:none; }
  .tk-cycle__hub{ margin:0 auto; }
}

/* --- TOP レスポンシブ --- */
@media (max-width:900px){
  .tk-proof__grid{ grid-template-columns:repeat(2,1fr); }
  .tk-menu__grid{ grid-template-columns:repeat(2,1fr); }
  .tk-mcard--w3{ grid-column:span 2; }
  .tk-record__grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .tk-hero__bg{ grid-template-columns:1fr; grid-template-rows:1fr; }
  .tk-hero__cell:not(.tk-hero__cell--main){ display:none; }
  .tk-hero__cell--main{ grid-row:1; }
  .tk-proof__grid{ grid-template-columns:1fr; }
  .tk-stat--wide,.tk-stat--wide2{ grid-column:span 1; grid-row:auto; }
  .tk-menu__grid{ grid-template-columns:1fr; }
  .tk-mcard--w2,.tk-mcard--w3{ grid-column:span 1; }
}


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

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

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

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


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

  /* --- フォント（site.css の :root に定義があればそれを使用） --- */
  --dyn-font-display: var(--font-display, "Noto Serif JP","Yu Mincho",serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Yu Gothic",sans-serif);
  --dyn-font-numeric: var(--font-numeric, "EB Garamond","Noto Serif JP",serif);

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

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


/* ============================================================
   §1  パンくず（CueZilla parts###_breadcrumb / p-breadcrumb）
   実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb
             > ul.p-breadcrumb__inner(BreadcrumbList) > li.p-breadcrumb__item(ListItem)
   CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与
   ============================================================ */
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; }
.p-breadcrumb__inner{
  list-style:none; margin:0 auto; padding:14px 24px;
  max-width:1200px; display:flex; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb__item{
  display:inline-flex; align-items:center;
  color:var(--dyn-muted) !important; font-family:var(--dyn-font-body);
  font-size:.78rem; letter-spacing:.04em;
}
.p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; }
.p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; }
.p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; }   /* 現在地 */
/* 区切り（2件目以降の前に "›"） */
.p-breadcrumb__item + .p-breadcrumb__item::before{
  content:"\203A"; margin:0 .6em; color:var(--dyn-border) !important; font-size:.95em;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の <meta itemprop="position"> は非表示 */


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


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

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


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  display:block !important; 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_img"]{ width:100%; display:block; border-radius:0; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; gap:10px; align-items:center; }
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; }
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[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"], [class*="_post_status"] > span:last-child{
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

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


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !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; }


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


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


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


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

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


/* ===== dynamic-overrides.css ===== */
/* ============================================================
   dynamic-overrides.css  ─ ブログ(parts222)／施工実績(parts228) 一覧の案件追補
   ------------------------------------------------------------
   ★編集はこのファイル（_作業/ai-output/）で行う。site.combined.css は
     tools/convert.mjs が再生成する出力なので直接編集しても消える。
     本ファイル名に "override" が含まれるため convert が優先度3＝skinの後ろに
     連結する（＝theme_default／skin に後勝ち・R-27）。
   目的：CueZilla動的一覧の見た目を、確認用デザイン
         （受領データ/田原工業_採用サイト_確認用.html の #blog / #works カード）に忠実化。
   カスケード実機：BS① → theme_default②(共有・!important無し) → 色7値 → site+skin+本ファイル⑤。
   theme_default は !important 不使用なので、本ファイルの !important は全プロパティで勝つ。
   ただし theme が指定して本ファイルが指定しないプロパティは漏れるため、下記で明示的に打ち消す
   （height:240px / margin-bottom:55px / max-height:240px / max-width:47.7%等）。
   判定：カテゴリを持つ=ブログ／タグ(.parts-blog-ex_tag)を持つ=施工実績（番号非依存・:has）。
   フォント：Zen Kaku Gothic New / Space Grotesk（01_サイト情報.md のHEAD linkで読込済み）。
   ============================================================ */

/* --- 一覧セクション：地色＋余白（確認用 #blog=#F4FAFD / #works=#fff） --- */
[class*="_section"]:has([class*="_post_list"]){
  padding:clamp(70px,9vw,130px) clamp(20px,4vw,56px) !important;
}
[class*="_section"]:has([class*="_post_category"]){ background:#F4FAFD !important; }  /* ブログ */
[class*="_section"]:has(.parts-blog-ex_tag){       background:#fff !important; }     /* 施工実績 */
/* 一覧ラッパー幅：theme の max-width:1180px を確認用の 1480px に広げる */
[class*="_wrap"]:has([class*="_post_list"]){ max-width:1480px !important; }
/* ブログもサイドバー無しの全幅3列（確認用に合わせる）。
   ★「最近の投稿/カテゴリ」を出す場合は次の2行を削除（skin既定の2カラムに戻る）。 */
[class*="_sidebar"]{ display:none !important; }
[class*="_main"]:has([class*="_post_list"]){ width:100% !important; max-width:none !important; flex:1 1 100% !important; }

/* --- カード段組：確認用と同じ 3列固定・gap18px（レスポンシブに 2列/1列） --- */
[class*="_post_list"]{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
  max-width:1480px; margin-inline:auto;
}
@media(max-width:1080px){ [class*="_post_list"]{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:680px){  [class*="_post_list"]{ grid-template-columns:1fr !important; } }
[class*="_post_list"]::after{ content:none !important; display:none !important; }  /* theme の flex用ゴースト列を除去 */

/* --- カード本体：角なし・極細ネイビー枠・ホバー浮上（確認用）。
       ブログ＝白面/枠.05/影なし ・ 施工実績＝淡青面/枠.06/影あり。 --- */
[class*="_post_wrap"]{
  border-radius:0 !important; overflow:hidden;
  margin:0 !important;                                   /* theme margin-bottom:55px を打ち消し gap18pxのみに */
  width:auto !important; max-width:none !important;      /* theme max-width:47.7%/32.4% を解除 */
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s !important;
}
[class*="_post_wrap"]:has([class*="_post_category"]){ background:#fff !important;    border:1px solid rgba(2,58,92,.05) !important; }  /* ブログ */
[class*="_post_wrap"]:has(.parts-blog-ex_tag){       background:#F4FAFD !important; border:1px solid rgba(2,58,92,.06) !important; }  /* 施工実績 */
[class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:rgba(0,180,237,.5) !important; }
[class*="_post_wrap"]:has(.parts-blog-ex_tag):hover{ box-shadow:0 18px 40px rgba(2,58,92,.12) !important; }  /* 施工実績のみ影 */

/* --- サムネ：16:10・ネイビー地・cover（theme の height:240px / margin-bottom:13px / max-height:240px を打ち消す） --- */
[class*="_post_img"]{ aspect-ratio:16/10 !important; height:auto !important; margin:0 !important; overflow:hidden; background:#0e2438; border-radius:0 !important; }
[class*="_post_img"] img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover; display:block; }

/* --- メタ行：ブログ=横並び / 施工実績=縦積み（:has で判定） --- */
[class*="_post_status"]:not(:has([class*="_post_title-excerpt"])){   /* ブログ */
  display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:10px !important; margin:24px 22px 0 !important; padding:0 !important;
}
[class*="_post_wrap"] [class*="_post_title-excerpt"]{ padding:10px 22px 24px !important; }
[class*="_post_status"]:has([class*="_post_title-excerpt"]){        /* 施工実績 */
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:8px !important; margin:0 !important; padding:24px 22px !important;
}
[class*="_post_status"] > [class*="_post_title-excerpt"]{ padding:0 !important; }

/* --- 施工実績（parts228）新マークアップ対応（確認用デザイン準拠）------------------
   カード全体を <a>／本文は _post_meta（日付＋タグ横並び）→ タイトル下、という並びに変更。
   旧 _post_title-excerpt を廃止したため、施工実績は .parts-blog-ex_tag で判定（(0,3,0)で
   上のブログ横並び分岐(0,2,0)に勝つ）。ブログ(parts222)はタグを持たない＝影響なし。 --- */
[class*="_post_wrap"]:has(.parts-blog-ex_tag){ text-decoration:none !important; color:#02324f !important; display:block !important; }
[class*="_post_wrap"]:has(.parts-blog-ex_tag) [class*="_post_status"]{ display:block !important; padding:24px 22px !important; margin:0 !important; }
[class*="_post_wrap"]:has(.parts-blog-ex_tag) [class*="_post_meta"]{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; margin:0 0 10px !important; padding:0 !important; }

/* --- 日付：Space Grotesk・深アクセント（skinの last-child チップ化に勝つ (0,2,0)+!important） --- */
[class*="_post_status"] [class*="_post_date"]{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:0 !important; width:auto !important; max-width:none !important;
  font:600 11px/1 "Space Grotesk",sans-serif !important; color:#0096c7 !important; letter-spacing:.02em;
}
/* --- カテゴリ（ブログ）：塗りチップ 明アクセント×白（skinの > span:last-child(0,2,1) に勝つよう :last-child で (0,3,0)） --- */
[class*="_post_status"] [class*="_post_category"]:last-child{
  width:auto; max-width:none !important;
  background:#00B4ED !important; border:0 !important; border-radius:999px !important;
  padding:3px 10px !important; color:#fff !important;
  font:600 10px/1.6 "Noto Sans JP",sans-serif !important;
}
/* --- タグ（施工実績）：淡青チップ tint×ネイビー --- */
.parts-blog-ex-tag_wrap{ padding:0 !important; margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.parts-blog-ex_tag{
  background:#DAF4FC !important; border:0 !important; border-radius:999px !important;
  padding:3px 10px !important; color:#02324f !important;
  font:600 10px/1.6 "Noto Sans JP",sans-serif !important;
}
/* --- タイトル：Zen Kaku Gothic New（skinのserifを上書き）。ブログ16px／施工実績17px --- */
[class*="_post_title"]{ font:700 16px/1.6 "Zen Kaku Gothic New",sans-serif !important; color:#02324f !important; margin:0 !important; }
[class*="_post_wrap"]:has(.parts-blog-ex_tag) [class*="_post_title"]{ font-size:17px !important; }

/* --- ページネーション：ブランドのピル（theme の #000/#fff 箱を"打ち消して"再構築） -----
   ★2重リング対策（入れ子非依存の総リセット方式）:
     theme(parts222/225/228)は各ボタンに border:1px #000。ライブのボタンはラベルを
     内側要素で包む構造（<a><span>次へ</span></a> 等）があり、外側と内側の両方に枠が乗ると
     "同心の2重リング" に見える。个々の入れ子構造は不定なので、
       (1) コンテナは gap 付き中央 flex で密着解消
       (2) 子孫要素の枠/地/角丸/影/余白を"全部"リセット＝二重リングの元を殲滅
       (3) 「押せる直接の子」= a / span だけに単線ピルを1枚だけ描く
     こうすると入れ子が何段でも border は必ず1要素・1本に収束する。 */
[class*="_pagenation"]{
  display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px !important; margin:clamp(36px,5vw,56px) auto 0 !important; padding:0 22px 4px !important;
}
/* (2) 子孫を総リセット：ここが2重リングを断つ肝。枠・地・角丸・影・余白を全部落とす */
[class*="_pagenation"] *{
  border:0 !important; background:none !important; border-radius:0 !important;
  box-shadow:none !important; margin:0 !important; padding:0 !important; min-width:0 !important;
}
/* (3) 直接の子（a／素span／current）だけをピル化。border は必ず"単線"＝重なり不可 */
[class*="_pagenation"] > a, [class*="_pagenation"] > span,
.pagination_num, .pagination_prev, .pagination_next{
  box-sizing:border-box !important;
  min-width:46px !important; height:46px !important; margin:0 !important; padding:0 14px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  border-radius:999px !important; text-decoration:none;
  font:600 14px "Space Grotesk",sans-serif !important;
  background:#fff !important; color:#02324f !important;
  border:1px solid rgba(2,58,92,.14) !important;
  transition:transform .2s, border-color .2s, color .2s, background .2s;
}
/* ラッパ（span/li 等）の中に a がある場合、クリック範囲をピル全体へ広げる（枠は付けない） */
[class*="_pagenation"] > * > a{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:100% !important; color:inherit !important; text-decoration:none;
}
[class*="_pagenation"] > a:hover, [class*="_pagenation"] > span:hover,
.pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{
  border-color:#00B4ED !important; color:#0096c7 !important; transform:translateY(-2px);
}
[class*="_pagenation"] > span.current, [class*="_pagenation"] .current, .pagination_num.current{
  background:#00B4ED !important; border-color:#00B4ED !important; color:#fff !important;
}

/* --- ブログ詳細（parts166_single_article）---------------------------------
   theme_default は .parts166_single_article の background-color をコメントアウト
   （＝地なし→body白が出る）。一覧と同じ淡青 #F4FAFD に寄せる。番号非依存。 */
[class*="_single_article"]{ background:#F4FAFD !important; }

/* ============================================================
   § お問い合わせフォーム（parts213）── 確認用デザイン準拠の“上乗せ”
   ------------------------------------------------------------
   skin §7 が theme 7値（accent#00B4ED / surface#f4fafd / text#02324f 等）で
   入力欄・必須バッジ・送信ボタンの“土台”を既に作っている（＝色は二重管理しない・cz-judgment§3）。
   ここは skin に無い「確認用デザイン固有の演出」だけを足す：
     ① 入力欄フォーカスの光彩   ② お問い合わせ項目のピル化   ③ 送信ボタン全幅・ホバー
     ④ フォームカード枠＋2カラム段組
   ※②④は実フォームの DOM（dl/label 構造）に依存。公開前に verify/local-sandbox/form と
     実機（R-28/R-29）で崩れが無いことを必ず確認する。崩れる場合はこのブロックを外せば
     skin §7 の単カラム版に安全フォールバックする。
   ============================================================ */
/* フォームカード（白地・極細枠）＋横幅を確認用（~900px）へ */
.parts213_section_form .parts213_form_wrap{
  max-width:900px; margin:0 auto;
  background:#fff; border:1px solid rgba(2,58,92,.06);
  padding:clamp(30px,4vw,48px);
}
/* 2カラム段組：短い項目は2列、項目チェック・内容・送信は全幅
   （form が dl 群を包む前提。live DOM が異なる場合は上記フォールバック） */
/* 2カラム段組：実機（CueZilla parts213）は section.parts213_section_form > div.parts213_form_wrap > dl…
   の構造で <form> を持たない（実機DOM確認済み）。よって form_wrap を素直にグリッド親にする
   （:has / :not / form 分岐は使わない＝AddCssInfo のサニタイズや構造差に左右されない素の指定）。
   全幅は form_textarea(内容)・contact_submit(送信)・種別(checkbox) の3つだけ。
   name|furigana / email|email確認用 / tel… は自動フローで2列に並ぶ。 */
.parts213_form_wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; }
/* テーマ既定は dl が display:flex（dt｜dd 横並び）＝グリッドセル内で dt・dd が半幅になり
   ラベルが枠内で折り返し／入力欄も半幅になる。dl を縦積み(block)にしてラベル全幅・入力全幅へ。 */
.parts213_form_wrap > dl{ margin:0; display:block !important; }
.parts213_form_wrap > dl > dd{ width:auto !important; }
.parts213_form_wrap > dl.form_textarea,
.parts213_form_wrap > .contact_submit,
.parts213_form_wrap > dl:has(input[type="checkbox"]){ grid-column:1 / -1; }
@media (max-width:640px){ .parts213_form_wrap{ grid-template-columns:1fr; } }
/* ① 入力欄フォーカス光彩（skin §7 の border !important (0,3,2) に勝つよう :not()鎖＋:focus で (0,4,2)） */
.parts213_form_wrap dd input:not([type="checkbox"]):not([type="radio"]):focus,
.parts213_form_wrap dd textarea:focus{
  border-color:#00B4ED !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(0,180,237,.16) !important; outline:none;
}
/* ② お問い合わせ項目：見えるチェックボックス＋テキスト（ピル廃止）。ネイティブ枠を隠さずiOSで確実に押せる形 */
.parts213_section_form dd:has(input[type="checkbox"]){ display:flex; flex-wrap:wrap; gap:10px 22px; }
.parts213_section_form dd label{
  display:inline-flex; align-items:center; margin:0; padding:4px 2px;
  background:none; border:0; border-radius:0;                 /* KEEP: 灰色ピル背景・丸枠は廃止（チェックボックス自体を見せる方針） */
  color:var(--dyn-text) !important;                            /* skin §7 の label{color:var(--dyn-text)!important} と同値で明示 */
  font:600 14px/1.4 var(--tk-sans, 'Noto Sans JP', sans-serif);
  cursor:pointer; touch-action:manipulation;                  /* KEEP: iOSのダブルタップズーム検出を無効化（タップ遅延/誤ズーム防止） */
}
/* KEEP: チェックボックスは「見えるカスタム箱」。opacity:0/1px/absoluteで隠す旧方式（iOSで押せない不具合）を廃止。
   選択時＝accent塗り＋白レ点(SVG)。skinの input[type=checkbox]{width:18px!important…} に勝つため !important で上書き。
   var(--dyn-accent)/(--dyn-text) は本ファイル776-807で定義済み＝実機で解決する。 */
.parts213_section_form dd label input[type="checkbox"]{
  flex:none !important; margin:0 8px 0 0 !important; padding:0 !important;
  width:20px !important; height:20px !important; min-height:0 !important;
  opacity:1 !important; -webkit-appearance:none !important; appearance:none !important;
  border:2px solid rgba(2,58,92,.35) !important; border-radius:5px !important; background:#fff !important;
  cursor:pointer; touch-action:manipulation;
}
.parts213_section_form dd label input[type="checkbox"]:checked{
  background:var(--dyn-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 L9.5 17 L19 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
  border-color:var(--dyn-accent) !important;
}
/* KEEP: ピル廃止に伴い hover/選択の背景塗り・青文字も廃止（青文字が不評だったため文字色は据え置き＝dyn-text） */
.parts213_section_form dd label:hover,
.parts213_section_form dd label:has(input[type="checkbox"]:checked){ color:var(--dyn-text) !important; }
/* ③ 送信ボタン：タップ高・フォント・ホバー（色地は skin §7 の accent／戻る=outline を踏襲、幅/高/ホバーだけ上乗せ）
   共通：全ボタンにタップ高とフォント */
/* skin §7 は .contact_submit（ボタンを囲む div）にも accent(青) を付与するため、
   ボタン間のgapや余白に青地が出る。コンテナ div の背景だけ透明化（ボタン自身の色は維持）。 */
.parts213_section_form .contact_submit{ margin-top:6px; background:transparent !important; }
.parts213_section_form .contact_submit input[type="submit"]{
  min-height:56px; cursor:pointer;
  font:700 16px var(--tk-sans, 'Noto Sans JP', sans-serif);
  transition:background .2s, color .2s, border-color .2s;
}
/* 入力フォーム＝単一ボタン（確認画面へ）は全幅。確認画面の d-flex（戻る｜送信）は除外 */
.parts213_section_form .contact_submit:not(.d-flex) input[type="submit"]{ width:100% !important; }
/* 確認画面＝戻る｜送信 の2ボタンを横並び＋間隔（送信=accent／戻る=outline は skin §7）。
   theme の d-flex(gap:0) や mx-2 に依存せず、gap で確実に離す。 */
.parts213_section_form .contact_submit.d-flex{ display:flex; gap:20px !important; }
.parts213_section_form .contact_submit.d-flex input[type="submit"]{ flex:1 1 0; width:auto !important; margin:0 !important; }
/* ホバーの accent 化は「戻る」以外だけ（戻る＝outline を潰さない） */
.parts213_section_form .contact_submit input[type="submit"]:not([name="back"]):hover{ background:#33c4f2 !important; }
/* reCAPTCHA ウィジェット（確認画面）：全幅セルの中で “ど真ん中” に */
.parts213_form_wrap > .g-recaptcha{ grid-column:1 / -1; display:flex; justify-content:center; }
/* エラー行 <p class="error">：空でも高さを持たないよう余白最小化 */
.parts213_section_form .error{ margin:6px 0 0; }
/* 注意書き（2000文字…）：ラベル＋必須バッジの“下”へブロック落とし（色地は skin §7 の muted を踏襲）。
   テーマ既定だと 18px と大きく、内容行が全幅でないと折り返す。helper 相当（13px・行間詰め）に縮小し、
   内容行(form_textarea)は全幅（上のグリッド指定）＝1行に収まる。 */
.parts213_section_form .form_text_dt .attention{ display:block; margin-top:8px; font-weight:400; font-size:13px !important; line-height:1.5; }
/* 必須バッジ：ラベル文字と密着しないよう間隔。テーマ既定が .required の margin を
   リセットしてくると 10px(非!important) が負けて「また詰まる」ため !important で固定。 */
.parts213_section_form dt .required{ margin-left:12px !important; }

/* 技術力(/service/technology)：閉め段落直後の .tk-imgband が汎用の margin:-7vw で
   ネイビー帯へ食い込み、.tk-tech-closing の最終行に覆いかぶさって崩れていた
   （実機 1920幅で約134px 重なり）。確認用デザインの技術力画像帯は負マージン無し＝
   重ねない意匠。index の画像帯（直前=.tk-concept/.tk-menu）は -7vw ブリードが意図的なので
   触らず、ネイビー帯直後＝技術力ページのみ隣接セレクタで狙い撃ち通常フローへ戻す。
   詳細度(0,2,0) が base .tk-imgband(0,1,0) に勝つため !important 不要。 */
.tk-band--navy + .tk-imgband{ margin:0; }

.card-text.fw-bold {
  text-align: center;
}

/* セクションの上下paddingを縮小（元は150px 0px） */
.parts131415_blog_hVnxNaC7NQ.bg-color {
  padding: 60px 0px;
}

/* 「配管」「プラント」見出しをボタン風に */
.card-title.text-center.fw-bold {
  display: inline-block;
  background-color: rgb(0, 180, 237);
  color: #ffffff !important;
  border-radius: 999px;
  padding: 6px 24px;
}

/* ---------- イントロローダー（TOP限定・受領「確認用」の演出を忠実移植・R-16のJSが制御） ----------
   初期は display:none。BODY内JSが初回訪問時のみ flex 表示→最低2s→fade+blur 退場。
   JS不動時・2回目以降（sessionStorage tahara_intro）・prefers-reduced-motion 時は非表示のまま＝サイトを塞がない。
   マークアップはTOP本文(05)のみに設置＝サブページ直着地ではイントロを出さない。装飾は子div（AddCssInfoの ::before 除去・R-27 を回避）。 */
.tk-loader{ position:fixed; inset:0; z-index:1200; display:none; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:linear-gradient(150deg,#01426a 0%,#0a6296 52%,#128ec9 100%); overflow:hidden; will-change:opacity,transform,filter; }
.tk-loader__glow{ position:absolute; inset:0; background:radial-gradient(95% 75% at 50% 28%,rgba(120,225,255,.30),transparent 64%); }
.tk-loader__grid{ position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 60% at 50% 42%,#000,transparent 82%); mask-image:radial-gradient(72% 60% at 50% 42%,#000,transparent 82%); }
.tk-loader__anim{ position:relative; display:flex; flex-direction:column; align-items:center; gap:22px; }
.tk-loader__mark{ font:700 clamp(30px,6vw,58px) var(--tk-en); letter-spacing:.18em; color:#fff; text-shadow:0 2px 20px rgba(1,40,66,.5); animation:markIn 1s cubic-bezier(.16,1,.3,1) .1s both; }
.tk-loader__mark .ac{ color:#b8f0ff; }
.tk-loader__bar{ position:relative; width:min(230px,56vw); height:2px; background:rgba(255,255,255,.22); overflow:hidden; }
.tk-loader__bar-fill{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:#fff; }
.tk-loader__label{ font:500 10px var(--tk-en); letter-spacing:.34em; color:#d3ecf8; }
@keyframes markIn{ 0%{ opacity:0; transform:translateY(14px); letter-spacing:.5em; } 100%{ opacity:1; transform:none; letter-spacing:.18em; } }
@media (prefers-reduced-motion: reduce){ .tk-loader{ display:none !important; } }

/*フォーム必須ボタン間隔*/
@media screen and (max-width:1024px){
  .parts213_section_form dt .required{
    width:auto !important; height:auto !important; padding:6px 12px !important; margin-left:12px !important;
  }
}
.parts243-245_complete_form .contact_submit {
  background: none !important;
}