/* ===== _css-1_site.css ===== */
/* R-18: 固定ヘッダーぶんの上余白。CueZillaが描画するシステムページ（ブログ/施工実績/フォーム/送信完了/404）が
   ヘッダーの下に潜り込むのを skin の calc() が吸収するための実測値。
   80px は納品プレビュー（2_Claude作業/preview）で .site-header の高さを実測した値。PC・SPとも同じ高さ。 */
:root{ --fixed-header-h: 80px; }

/* ================= global.css（受領データそのまま・読み込み順を保持） ================= */
/* ===================================================================
   株式会社NKSTYLE サイト — Global Styles
   実装ルール:
   - フォントサイズは最低 1rem(16px) 以上を厳守
   - サイズ/余白は clamp() による流動値（中間幅のズレを完全吸収）
   - ブレークポイントは 2 点のみ:
       1240px … ナビ→ハンバーガー（構造変化）
        640px … グリッド→1カラム（構造変化）
=================================================================== */

/* Webフォント実体（納品時はセルフホストのURLへ差し替える） */


:root {
  /* Color（配色トークン：黒基調 × ラプターオレンジ）
     --green      = メインアクセント（ラプターオレンジ）
     --green-dark = ダーク面（マットブラック）
     --accent     = サブアクセント（ライムグリーン／差し色1色のみ） */
  --green: #ff5c00;
  --green-dark: #121212;
  --accent: #c6ff00;
  /* 上記ブランド色の rgba() 派生用（影・グロー・罫線） */
  --green-rgb: 255, 92, 0; /* @kind color */
  --green-dark-rgb: 18, 18, 18; /* @kind color */
  --accent-rgb: 198, 255, 0; /* @kind color */
  --bg: #121212;
  --bg-light: #1a1a1a;
  --bg-soft: #2b2b2b;
  --surface: #1e1e1e;
  --surface-2: #262626;
  --head: #f5f5f5;
  --text: #f5f5f5;
  --muted: #b2b2b2;
  --line: #3a3a3a;
  --grad: linear-gradient(135deg, #ff5c00 0%, #c43f00 100%); /* @kind color */

  /* Typography */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-serif: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Anton", "Oswald", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 80px); /* @kind spacing */
  --radius: 8px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-jp);
  /* 本文基準 16px 厳守 / 細字の可読性確保のため medium(500) */
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  line-height: 1.9;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; height: 100vh; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--green); color: #fff; }

/* キーボードフォーカスの可視化 */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 日本語の改行制御：文節を割らない / PC・SPで改行位置を出し分け */
.nb { display: inline-block; }
.br-sp { display: none; }
.br-pc { display: inline; }
@media (max-width: 640px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
}
/* 文節単位での自動改行（対応ブラウザ） */
.hero-sub, .hero-position, .lead, .worry-item, .reason p,
.digest-body p, .contact p, .scene-card p, .statement-foot {
  word-break: auto-phrase;
  line-break: strict;
}

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

/* ---------- 共通パーツ ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 1rem;                 /* 16px 厳守 */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--green);
  display: inline-block;
}

.section {
  padding-block: clamp(72px, 11vh, 150px);
  position: relative;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vh, 70px);
}
.section-head .title {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color:var(--head);
}
.section-head .title .en {
  display: block;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 14px;
}
.section-head .lead {
  max-width: 42ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--muted);
}

/* ボタン: タップ対象 44px 以上 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 15px 32px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s, box-shadow 0.4s;
}
.btn svg { width: 20px; height: 20px; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 12px 30px rgba(var(--green-rgb), 0.28);
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-3px); }
.btn-ghost {
  background:var(--surface);
  color:var(--head);
  border: 2px solid var(--green);
}
.btn-ghost:hover { background: var(--green); color: #fff; transform: translateY(-3px); }

/* ===================================================================
   Loader
=================================================================== */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--grad); color: #fff;
  display: grid; place-items: center;
}
#loader .loader-inner { text-align: center; width: min(90vw, 560px); padding-inline: 24px; }
.loader-logo {
  display: block;
  width: clamp(154px, 36vw, 336px);
  height: auto;
  margin: 0 auto;
  /* 緑のローダー上では白く反転 */
  filter: brightness(0) invert(1);
}
.loader-progress { width: min(220px, 64%); margin: clamp(26px, 5vh, 44px) auto 0; }
#loader .loader-bar {
  height: 2px; width: 100%;
  background: rgba(255, 255, 255, 0.28);
  position: relative; overflow: hidden;
}
#loader .loader-bar i { position: absolute; inset: 0 100% 0 0; background:var(--surface); }
#loader .loader-count {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
}

/* ===================================================================
   Header
=================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease), box-shadow 0.5s;
}
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  height: clamp(20px, 2.3vw, 29px);
  width: auto;
  /* 緑ロゴ → 透過ヘッダー上では白く反転、solid時は緑のまま */
  filter: brightness(0) invert(1);
  transition: filter 0.5s;
}
.site-header.solid .brand-logo { filter: none; }
.site-header.solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 12px;
}
.site-header.solid .nav a { color: var(--text); }
.site-header.solid .nav-cta { border-color: var(--green); color: var(--green); }
/* 白背景ヒーロー用：透過状態でも暗色（ロゴ緑・ナビ黒） */
.site-header.on-light:not(.solid) .brand-logo { filter: none; }
.site-header.on-light:not(.solid) .nav a { color: var(--text); }
.site-header.on-light:not(.solid) .nav-cta { border-color: var(--green); color: var(--green); }
.site-header.on-light:not(.solid) .nav-toggle i { background: var(--text); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav a {
  position: relative;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #fff;
  padding-block: 4px;
  font-weight: 500;
}
.nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
/* 現在ページの強調（URLから自動判定・常時下線） */
.nav a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); transform-origin: left; }
.site-header .nav-sub a[aria-current="page"] { color: var(--green); }
.nav-cta {
  border: 2px solid #fff;
  padding: 10px 22px;
  border-radius: 100px;
  font-weight: 700;
  transition: background 0.4s var(--ease), color 0.4s;
}
.nav-cta:hover { background: var(--green); border-color: var(--green); color: #fff; }
/* hover時はどの状態でも白文字（通常ルールの詳細度に勝たせる） */
.site-header.on-light:not(.solid) .nav-cta:hover,
.site-header.solid .nav-cta:hover { color: #fff; }

/* ナビのプルダウン（孫ページ導線） */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.65;
}
.nav-sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 188px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background:var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 820;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* トリガーとパネルの隙間でカーソルが抜けて閉じるのを防ぐ透明のブリッジ */
.nav-item.has-sub { position: relative; }
.nav-item.has-sub::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 16px; z-index: 819; }
.site-header .nav-sub a { display: block; padding: 11px 16px; font-size: 1rem; font-weight: 500; color: var(--text); border-radius: 6px; white-space: nowrap; transition: background .34s var(--ease, cubic-bezier(.22,.61,.36,1)), color .34s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.site-header .nav-sub a::after { display: none; }
.site-header .nav-sub a:hover { background: var(--bg-light); color: var(--green); }

/* スマホ専用：下部固定の応募導線バー */
.mobile-cta { display: none; }
@media (max-width: 640px) {
  .mobile-cta {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .mcta-btn {
    flex: 1; min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 100px; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
  }
  .mcta-primary { background: var(--green); color: #fff; }
  .mcta-ghost { background:var(--surface); color:var(--head); border: 2px solid var(--green); }
  /* バー分の余白（最後のコンテンツが隠れないように） */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  z-index: 810;
}
.nav-toggle i {
  width: 28px; height: 2px; background:var(--surface); display: block;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.site-header.solid .nav-toggle i { background: var(--text); }

/* ---- 構造変化 #1 : 1240px でハンバーガーへ ---- */
@media (max-width: 1240px) {
  .nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 4vh, 40px);
    background: var(--grad);
    transform: translateY(-100%);
    visibility: hidden; opacity: 0; pointer-events: none;
    overflow-y: auto;
    transition: transform 0.6s var(--ease), opacity 0.4s var(--ease), visibility 0.4s;
    padding: var(--gutter);
  }
  .nav.open, .nav.is-open { transform: translateY(0); visibility: visible; opacity: 1; pointer-events: auto; }
  .nav a { color: #fff !important; font-size: 1.25rem; }
  .nav-cta { border-color: #fff; }
  .nav-toggle { display: flex; }
  .nav-open .nav-toggle i { background:var(--surface) !important; }
  .nav-open .nav-toggle i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-open .nav-toggle i:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* サブメニューはインライン展開（常時表示） */
  .nav-item { flex-direction: column; }
  .nav-caret { display: none; }
  .nav-item.has-sub::after { display: none; }
  .nav-sub {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; padding: 0; margin-top: 12px; gap: 12px;    background: transparent; border: none; box-shadow: none;
  }
  .site-header .nav-sub a { color: #fff; padding: 0; font-size: 1.0625rem; opacity: 0.82; text-align: center; }
}

/* ===================================================================
   Hero (FV)
=================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;   /* z-index を hero 内に閉じる */
  color: #fff;
  /* 白背景＋文字裏のみ緑ボックス。層：緑ボックス → 写真 → 文字 */
  background:var(--surface);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 25%, 25% 100%;
}
/* Figma配置を固定比率ステージとして再現し、右上にアンカー（全幅で一体スケール） */
.hero-collage {
  position: absolute;
  top: 8.9%; right: 3.7%;
  width: clamp(300px, 56.5vw, 1000px);
  aspect-ratio: 814 / 764;   /* Figmaクラスタの外接比 */
  z-index: 4;   /* 緑ベタ(.hero-inner z3)より前面 = 写真が緑の上に乗る */
  pointer-events: none;
}
.hp {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  will-change: transform;
}
.hp1 { left: 23.1%; top: 0%;    width: 73.7%; aspect-ratio: 4 / 3; }   /* 特大 */
.hp2 { left: 0%;    top: 0%;    width: 22.1%; aspect-ratio: 1 / 1; }   /* 小・左上 */
.hp5 { left: 5.9%;  top: 53.5%; width: 49.1%; aspect-ratio: 4 / 3; }   /* 大・左下 */
.hp3 { left: 56.0%; top: 59.9%; width: 28.3%; aspect-ratio: 230 / 306; } /* 中・右下 */
.hp4 { left: 85.3%; top: 59.9%; width: 14.7%; aspect-ratio: 1 / 1; }   /* 小・右下 */
/* 見出し可読性のための局所スクリム（左下を暗く・右上の写真は鮮明） */
.hero-scrim { display: none; }
.hero-glow {
  position: absolute; z-index: 1;
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  top: -20%; right: -10%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), transparent 65%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-bgword {
  position: absolute;
  right: -1%; bottom: -8%;
  z-index: 1;
  font-family: var(--font-en);
  font-size: clamp(9rem, 32vw, 30rem);
  line-height: 0.78;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.hero-title .line-mask { display: block; overflow: hidden; }
.hero-title .line { display: block; white-space: nowrap; will-change: transform; }
.hero-inner {
  position: relative;
  width: fit-content;
  max-width: calc(100% - clamp(32px, 8vw, 160px));
  margin: 0 0 clamp(48px, 8vh, 100px) clamp(20px, 5vw, 100px);
  padding: clamp(32px, 4vw, 56px) clamp(40px, 4.6vw, 76px) clamp(36px, 4.2vw, 60px);
}
/* 緑ボックス：文字裏だけ・写真より背面（z2 < 写真 z4 < 文字 z6） */
.hero-panel {
  position: absolute; inset: 0; z-index: 2;
  background: var(--green-dark);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}
.hero-text { position: relative; z-index: 6; }
.hero-eyebrow { color: #fff; margin-bottom: 22px; }
.hero-eyebrow::before { background:var(--surface); }
.hero-title {
  font-weight: 700;
  /* 折り返さないよう幅に応じて縮小（min は16px以上を確保） */
  font-size: clamp(1.5rem, 7.5vw, 6rem);
  line-height: 1.2;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 40px rgba(0, 0, 0, 0.25);
}
.hero-title .accent { color: var(--accent); }
/* 「鉄」のみ大きく明朝・グリッドからはみ出してOK */
.hero-title .line2.line-mask { overflow: visible; }
.hero-title .tetsu {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.9em;
  line-height: 0;
  color: var(--accent);
  display: inline-block;
  vertical-align: -0.16em;
  transform: translateY(4px);   /* 「鉄」だけ少し下げる */
  margin-left: -0.18em;   /* 左へはみ出す */
  margin-right: 0.02em;
}
.hero-sub {
  margin-top: 26px;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.95;
}
.hero-position {
  margin-top: 14px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.78);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(32px, 5vh, 52px); }
.hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.hero .btn-ghost:hover { background:var(--surface); color:var(--head); }
/* お問い合わせ：白地＋緑文字＋緑枠 */
.hero .btn-primary { background:var(--surface); color: var(--green); border: 2px solid var(--green); box-shadow: none; }
.hero .btn-primary:hover { background: var(--green); color: #fff; border-color: var(--green); }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 32px; z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.25em;
  color: var(--muted);
  display: flex; align-items: center; gap: 14px;
}
.scroll-cue .line { width: 1px; height: 60px; background: rgba(0, 0, 0, 0.28); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(-100%);
  animation: scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* 1240px 以下では縦書きスクロールキューは省略 */
@media (max-width: 1240px) { .scroll-cue { display: none; } }


/* ===================================================================
   Marquee
=================================================================== */
.marquee {
  background: var(--bg-light);
  color:var(--head);
  overflow: hidden;
  padding: 14px 0;
  border-block: 1px solid var(--line);
}
.marquee-track { display: flex; gap: 40px; width: max-content; white-space: nowrap; will-change: transform; }
.marquee-track span {
  font-family: var(--font-en);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: 0.06em;
}

/* ===================================================================
   Stats (数字で見る)
=================================================================== */
.stats { background: var(--bg-light); }
/* 縦書き見出しセクション共通：見出しを固定幅で左に、内容を右に整列 */
.vsec-layout { display: flex; align-items: flex-start; gap: clamp(28px, 4vw, 72px); }
.vsec-layout > .vhead-main { flex: 0 0 auto; }
.vsec-body { flex: 1 1 0; min-width: 0; }
.vsec-lead { margin-bottom: clamp(20px, 3vh, 34px); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
.stat {
  background:var(--surface);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(var(--green-dark-rgb), 0.05);
}
.stat .num {
  font-family: var(--font-en);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1;
  color:var(--head);
  display: flex; align-items: baseline; gap: 6px;
}
.stat .num em {
  font-style: normal;
  font-family: var(--font-jp);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--green);
}
.stat .label {
  margin-top: 14px;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.stat .num .pre { margin-right: 0.1em; }
.stat .num .num-sep { font-size: 0.42em; font-weight: 700; color: var(--green); align-self: center; margin: 0 0.12em; }
.stats-link { margin-top: clamp(32px, 4vh, 52px); display: flex; justify-content: flex-start; }

/* ===================================================================
   私たちと働くということ（数字×罫線グリッドで力強く・緑地）
=================================================================== */
.facts {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* 乗算をこのセクション内に閉じる */
  background: var(--grad);
  color: #fff;
  padding-block: clamp(72px, 11vh, 150px);
}
/* 緑の上に写真を乗算合成（緑を残すため opacity で調整） */
.facts-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: none /* 受領に実体が無い gaiheki-sanding.jpg を無効化（表示影響なし・00★申し送り★.md 参照） */;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 完全固定パララックス */
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.facts .wrap { position: relative; z-index: 1; }
.facts-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 72px);
}
.facts-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}
.facts-title {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);  /* .vtitle と統一 */
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: #fff;
}
.facts-main {
  flex: 0 0 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
}
.facts-img {
  display: block; width: auto; max-width: 100%;
  height: clamp(460px, 68vh, 880px);   /* 下層 NumberBand と統一 */
}
/* ===== 数字グリッド（HTML+CSS版：会社情報を差し替えるだけで再生成可） =====
   値や見出しは index.html の .factgrid 内テキストを書き換えるだけ。
   行・列・罫線の構成は固定（このレイアウトベース）。 */
.factgrid {
  width: min(620px, 100%);
  color: #fff;
  display: flex; flex-direction: column;
  --fgline: 1.5px solid rgba(255, 255, 255, 0.5); /* @kind other */
}
.factgrid .fg-lab {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(0.8rem, 1.4vw, 1.05rem);
  line-height: 1.25; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92); text-align: right;
}
.factgrid .fg-lab small { font-size: 0.78em; opacity: 0.82; font-weight: 700; }
.factgrid .fg-val {
  font-family: var(--font-jp); font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1;
  letter-spacing: 0.01em;
}
.factgrid .fg-big {
  font-family: var(--font-jp); font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.12;
  letter-spacing: 0.02em;
}
.factgrid .fg-suf {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9); align-self: flex-end; margin-bottom: 0.35em;
}
.factgrid .fg-box {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  border: 2px solid rgba(255, 255, 255, 0.85);
  padding: 0.18em 0.45em; align-self: center; line-height: 1;
}
.factgrid .fg-sub {
  flex-basis: 100%; width: 100%;
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  line-height: 1.5; color: rgba(255, 255, 255, 0.75); margin-top: 0.4em;
}
/* 行1：創業・設立（全幅） */
.factgrid .fg-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  padding: clamp(16px, 2.4vw, 30px) clamp(8px, 1.6vw, 20px);
  border-bottom: var(--fgline);
}
/* 中段：左2セル＋右1セル */
.factgrid .fg-mid { display: grid; grid-template-columns: 1fr 1fr; }
.factgrid .fg-midL { display: flex; flex-direction: column; border-right: var(--fgline); }
.factgrid .fg-midL .fg-item:first-child { border-bottom: var(--fgline); }
.factgrid .fg-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(8px, 1.3vw, 16px);
  padding: clamp(18px, 2.6vw, 34px) clamp(8px, 1.4vw, 18px);
}
.factgrid .fg-midR {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(18px, 2.6vw, 34px) clamp(16px, 2.6vw, 36px);
}
/* 下段：2セル */
.factgrid .fg-bot { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--fgline); }
.factgrid .fg-botL {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border-right: var(--fgline);
  padding: clamp(18px, 2.6vw, 34px) clamp(16px, 2.4vw, 30px);
}
.factgrid .fg-botR {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(8px, 1.3vw, 16px);
  padding: clamp(18px, 2.6vw, 34px) clamp(12px, 1.8vw, 22px);
}
.factgrid .fg-botR .fg-sub { text-align: center; }
.facts-link { display: flex; justify-content: center; margin-top: clamp(36px, 5vh, 64px); }
.facts-btn { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); }
.facts-btn:hover { background:var(--surface); color:var(--head); }
@media (max-width: 640px) {
  /* 他セクション（.vsec-layout）と同じく左始まりに揃える */
  .facts-layout { flex-direction: column; align-items: stretch; gap: clamp(24px, 4vh, 36px); }
  .facts-head { justify-content: flex-start; }
  .facts-title { writing-mode: horizontal-tb; letter-spacing: 0.06em; line-height: 1.4; }
  .facts-main { width: 100%; }
  .facts-img { width: 70%; height: auto; }   /* スマホは70%に縮小 */
  .factgrid { width: 100%; }
  .factgrid .fg-val { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .factgrid .fg-big { font-size: clamp(1.7rem, 8.5vw, 2.6rem); }
}

/* ===================================================================
   悩み (こんな不安、ありませんか？)
=================================================================== */
.worry { position: relative; overflow: hidden; background: #0d0d0d; padding-block: clamp(44px, 6.5vh, 84px); }
.worry-media {
  position: absolute; inset: 0; z-index: 0;
  background-image: none /* 受領に実体が無い roof-roller.jpg を無効化（表示影響なし・00★申し送り★.md 参照） */;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 完全固定パララックス */
}
.worry-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.84) 100%);
}
.worry .wrap { position: relative; z-index: 1; }
.worry .eyebrow { color: var(--accent); }
.worry .eyebrow::before { background: var(--accent); }
.worry-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #fff;
  margin: 14px 0 clamp(22px, 3.5vh, 36px);
}
.worry-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(24px, 3.5vh, 40px);
}
.worry-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: clamp(18px, 2vw, 24px);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}
.worry-item::before {
  content: "“";
  display: block;
  font-family: var(--font-en);
  font-size: 2em;
  line-height: 0.4;
  color: var(--accent);
  margin-bottom: 6px;
}
.worry-answer {
  text-align: center;
  font-family: var(--font-jp);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.worry-answer .accent { color: var(--accent); }
@media (max-width: 1240px) { .worry-list { grid-template-columns: repeat(2, 1fr); } }

/* ===================================================================
   選ばれる理由 (reasons)
=================================================================== */
.reasons { background: var(--bg); }
.reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}
.reason {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  background:var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px) clamp(26px, 3.4vw, 46px);
}
.reason .r-no {
  font-family: var(--font-en);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.9;
  color: var(--green);
}
.reason h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color:var(--head);
  margin: 0 0 8px;
  line-height: 1.45;
}
.reason p { font-size: 1.0625rem; font-weight: 500; color: var(--muted); }

/* ===================================================================
   分岐バナー (採用を知る / お問い合わせ)
=================================================================== */
.branch { background: var(--bg-light); }
.branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.branch-card {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(220px, 28vh, 300px);
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: var(--grad);
  transition: transform 0.5s var(--ease);
}
.branch-card.alt { background:var(--surface); color: var(--text); border: 2px solid var(--line); }
.branch-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.branch-card.has-media::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.8) 100%);
}
.branch-card.has-media > :not(.branch-media) { position: relative; z-index: 2; }
.branch-card:hover { transform: translateY(-6px); }
.branch-card.has-media:hover .branch-media { transform: scale(1.05); }
.branch-media { transition: transform 0.6s var(--ease); }
.branch-card .b-en { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.2em; opacity: 0.85; }
.branch-card h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.4; }
.branch-card.alt h3 { color:var(--head); }
.branch-card p { font-size: 1.0625rem; opacity: 0.92; }
.branch-card .b-arrow {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.0625rem;
}
.branch-card .b-arrow svg { width: 22px; height: 22px; }

/* ===================================================================
   ダイジェスト (業務 / カルチャー)
=================================================================== */
.digest { background: var(--bg); }
.digest-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.digest-row + .digest-row { margin-top: clamp(56px, 8vh, 110px); }
.digest-row.rev .digest-media { order: 2; }
.digest-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--green-dark-rgb), 0.16);
}
.digest-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.digest-body .eyebrow { margin-bottom: 16px; }
.digest-body h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color:var(--head);
  line-height: 1.4;
  margin-bottom: 16px;
}
.digest-body p { font-size: 1.0625rem; font-weight: 500; color: var(--muted); margin-bottom: 12px; }
.digest-body .note {
  display: inline-block;
  margin: 8px 0 20px;
  font-size: 1rem;
  color:var(--head);
  background: var(--bg-soft);
  padding: 8px 14px;
  border-radius: 6px;
}
.digest-body .btn { margin-top: 8px; }

/* ===================================================================
   ブログ新着
=================================================================== */
.blog { background: var(--bg-light); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.blog-card {
  background:var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(var(--green-dark-rgb), 0.06);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(var(--green-dark-rgb), 0.12); }
.blog-thumb {
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
  overflow: hidden;
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-body { padding: clamp(20px, 2.4vw, 28px); }
.blog-body time { font-family: var(--font-mono); font-size: 1rem; color: var(--green); letter-spacing: 0.08em; }
.blog-body .cat {
  display: inline-block; margin-left: 10px;
  font-size: 1rem; color: var(--muted);
  background: var(--bg-light); padding: 2px 10px; border-radius: 100px;
}
.blog-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--text); line-height: 1.6; margin-top: 12px; }
.blog-link { margin-top: clamp(36px, 5vh, 56px); display: flex; justify-content: center; }

/* ===================================================================
   横スライド (SCENES / 現場ギャラリー)
   - デスクトップ: GSAPで縦スクロール→横スライド（ピン留め）
   - 640px 以下: ネイティブ横スワイプ（scroll-snap）
=================================================================== */
.scenes { background: var(--bg); overflow-x: clip; }
.scenes-viewport {
  display: flex;
  align-items: center;
}
.scenes-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(48px, 7vh, 90px) var(--gutter);
}
.scenes-vhead { flex: 0 0 auto; }
.scenes-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 30px);
}
.scenes-nav { align-self: flex-end; display: inline-flex; align-items: center; gap: 14px; }
.scenes-hint {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.scenes-arrow {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background:var(--surface); color:var(--head);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.125rem; line-height: 1; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s;
}
.scenes-arrow:hover { background: var(--green); color: #fff; border-color: var(--green); }
.scenes-arrow:disabled { opacity: 0.3; cursor: default; }
.scenes-arrow:disabled:hover { background:var(--surface); color:var(--head); border-color: var(--line); }
.scenes-pin {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  /* ネイティブの横スクロールバーは非表示（矢印＋ドラッグ＋進捗バーで代替） */
  scrollbar-width: none;
  cursor: grab;
  /* 右端をデバイス端まで伸ばし、カードが見切れて「続きがある」ことを示す（左はそのまま） */
  margin-right: calc(-1 * (50vw - min(50vw, var(--maxw) / 2) + var(--gutter)));
}
.scenes-pin::-webkit-scrollbar { display: none; }
.scenes-pin.dragging { cursor: grabbing; scroll-snap-type: none; }
.scenes-pin.dragging .scene-card { pointer-events: none; }
.scenes-track {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  width: max-content;
  /* 終端の余白：最後のカードが画面右端に貼り付かず、内側で読める位置に収まる */
  padding-right: calc(50vw - min(50vw, var(--maxw) / 2) + var(--gutter));
}
.scene-card {
  flex: 0 0 auto;
  width: clamp(280px, 42vw, 440px);
  scroll-snap-align: start;
  background:var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(var(--green-dark-rgb), 0.06);
}
.scene-card .ph {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  display: grid; place-items: center;
}
.scene-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.scene-card .ph svg { width: 60px; height: 60px; color: var(--green); }
.scene-card .ph .tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255, 255, 255, 0.92);
  color:var(--head);
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.08em;
  padding: 4px 14px; border-radius: 100px; font-weight: 700;
}
.scene-card .body { padding: clamp(22px, 2.6vw, 30px); }
.scene-card .s-no { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.2em; color: var(--green); font-weight: 700; }
.scene-card h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 700; color:var(--head); line-height: 1.4; margin: 8px 0 10px; }
.scene-card p { font-size: 1.0625rem; font-weight: 500; color: var(--muted); }
.scenes-progress .bar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.scenes-progress .bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0.18); background: var(--grad); transition: transform 0.1s linear; }

/* ===================================================================
   CTA (お問い合わせ)
=================================================================== */
.contact {
  background: var(--grad);
  color: #fff;
  text-align: center;
  padding-block: clamp(90px, 14vh, 180px);
  position: relative;
  overflow: hidden;
}
.contact-media {
  position: absolute; inset: 0; z-index: 0;
  background-image: none /* 受領に実体が無い gaiheki-brick-wet.png を無効化（表示影響なし・00★申し送り★.md 参照） */;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 完全固定パララックス */
}
.contact-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.66) 0%, rgba(10, 10, 10, 0.85) 100%);
}
.contact .wrap { position: relative; z-index: 1; }
.contact .eyebrow { color: #fff; justify-content: center; }
.contact .eyebrow::before { background:var(--surface); }
.contact h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin: 22px 0 18px;
  position: relative;
}
.contact p {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 50ch; margin: 0 auto 16px; position: relative;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: clamp(28px, 4vh, 44px); position: relative; }
.contact .btn-primary { background:var(--surface); color:var(--head); }
.contact .btn-primary:hover { background: var(--accent); color: #fff; }
.contact .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.contact .btn-ghost:hover { background:var(--surface); color:var(--head); }
.contact .tel {
  margin-top: 26px; position: relative;
  font-family: var(--font-en); font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: 0.04em;
}
.contact .tel-note { font-size: 1rem; color: rgba(255, 255, 255, 0.78); margin-top: 4px; }

/* ===================================================================
   Footer
=================================================================== */
.site-footer {
  background:var(--surface);
  color: var(--muted);
  padding-block: clamp(56px, 8vh, 96px) 36px;
  border-top: 4px solid var(--green);
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vh, 56px);
  border-bottom: 1px solid var(--line);
}
/* 会社情報は折り返さず広めに確保 */
.footer-brand { flex: 0 1 auto; min-width: 0; }
.footer-brand img { height: clamp(26px, 2.8vw, 34px); width: auto; }
.footer-brand p { margin-top: 20px; font-size: 1rem; color: var(--muted); }
.footer-brand .addr { margin-top: 16px; font-size: 1rem; line-height: 2; white-space: nowrap; }
/* 密：メニューは右に寄せてまとめる */
.footer-menus { display: flex; gap: clamp(40px, 6vw, 84px); flex: 0 0 auto; }
.footer-col h4 {
  color:var(--head);
  font-size: 1rem;
  letter-spacing: 0.12em;
  font-family: var(--font-mono);
  margin-bottom: 14px;
}
.footer-col a { display: block; padding: 9px 0; font-size: 1rem; color: var(--muted); transition: color 0.3s, padding-left 0.3s; white-space: nowrap; }
.footer-col a:hover { color: var(--green); padding-left: 8px; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding-top: 28px;
  font-size: 1rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* ===================================================================
   構造変化 #2 : 640px で 1カラムへ
=================================================================== */
@media (max-width: 640px) {
  .stats-grid,
  .worry-list,
  .reasons-grid,
  .branch-grid,
  .blog-grid { grid-template-columns: 1fr; }
  .reason:last-child { grid-column: auto; }
  .digest-row { grid-template-columns: 1fr; }
  .digest-row.rev .digest-media { order: 0; }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-menus { gap: clamp(32px, 12vw, 64px); }
  /* 狭幅では住所の折り返しを許可（横溢れ防止） */
  .footer-brand .addr { white-space: normal; }
  /* スマホ：ポジション文のみ隠し、価値訴求のサブコピーは短縮表示で残す */
  .hero { align-items: flex-end; }
  /* 緑ボックスの左右余白を均一に（幅calc＋auto中央寄せ） */
  .hero-inner {
    width: calc(100% - clamp(36px, 10vw, 48px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-position { display: none; }
  .hero-sub { margin-top: 16px; font-size: 1rem; line-height: 1.8; max-width: none; }
  /* iOS Safari は background-attachment:fixed が破綻するため scroll に切替 */
  .worry-media, .contact-media, .facts-photo, .statement-media { background-attachment: scroll; }
  /* CTAボタンは縦並び時に同一幅へ */
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: clamp(24px, 4vh, 36px); }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* スマホ：縦書き見出しセクションは縦積み（本文は全幅に伸ばす） */
  .vsec-layout { flex-direction: column; align-items: stretch; gap: clamp(20px, 4vh, 32px); }
  .scenes-viewport { min-height: auto; }
  .scenes-inner { flex-direction: column; align-items: stretch; gap: clamp(20px, 4vh, 32px); padding-block: clamp(64px, 9vh, 100px); }
  .scenes-right { gap: 16px; }
  .scenes-pin { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-block: 6px 16px; }
  .scenes-track { transform: none !important; }
  .scene-card { width: 80vw; scroll-snap-align: start; }
  .anniv { gap: 16px; }
  .anniv-cap { display: none; }
}

/* ===================================================================
   PHILOSOPHY (ダーク・スクロール文字点灯)
=================================================================== */
.statement {
  position: relative;
  background: #0d0d0d;
  color: #fff;
  overflow: hidden;
}
.statement-media {
  position: absolute; inset: 0; z-index: 0;
  background-image: none /* 受領に実体が無い img-stroke.jpg を無効化（表示影響なし・00★申し送り★.md 参照） */;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 完全固定パララックス */
}
.statement-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.9) 100%);
}
.statement::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 20%, 12.5% 100%;
}
.statement .wrap {
  position: relative;
  z-index: 1;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(80px, 12vh, 160px);
}
.statement .eyebrow { color: var(--accent); margin-bottom: clamp(20px, 3vh, 36px); }
.statement .eyebrow::before { background: var(--accent); }
/* 縦書きレイアウト（、。で改行） */
.statement-body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(32px, 5vh, 56px);
}
.statement-text {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: 0.12em;
}
.statement-text .w { color: rgba(255, 255, 255, 0.16); transition: color 0.5s var(--ease); }
.statement-text .tcy {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  margin-bottom: 0.22em;    /* 「60」の下に余白 */
}
.statement-text .w.on { color: #fff; }
.statement-text .w.accent-w.on { color: var(--accent); }
.statement-foot {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
}
/* タブレット：補足文を隠し本文を大きく、背景の高さを適正化 */
@media (max-width: 1240px) {
  .statement .wrap { min-height: auto; padding-block: clamp(64px, 9vh, 120px); }
  .statement-foot { display: none; }
  .statement-text { font-size: clamp(1.9rem, 4.6vw, 3.2rem); }
}
/* スマホ：縦書きをやめ横書きに */
@media (max-width: 640px) {
  .statement-body { flex-direction: column; align-items: flex-start; gap: 20px; }
  .statement-text {
    writing-mode: horizontal-tb;
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
    line-height: 1.65;
    letter-spacing: 0.04em;
  }
}

/* ---------- ゴーストワード（背面の大型英字） ---------- */
.has-ghost { position: relative; overflow: hidden; }
.has-ghost > .wrap { position: relative; z-index: 1; }
.ghost-word {
  position: absolute;
  z-index: 0;
  top: clamp(-30px, -4vw, -10px);
  right: -2%;
  font-family: var(--font-en);
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: rgba(var(--green-rgb), 0.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---------- 縦書きレール（和アクセント・常設） ---------- */
.vrail {
  position: fixed;
  left: clamp(14px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.62em;
  color: var(--green);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}
.vrail::after {
  content: "";
  writing-mode: horizontal-tb;
  width: 1px; height: clamp(40px, 7vh, 80px);
  background: currentColor;
  opacity: 0.6;
}
/* 縦書きレールは構造変化点(1240px)以下で省略 */
@media (max-width: 1240px) { .vrail { display: none; } }

/* ---------- 周年ロックアップ（数字シンボル × 明朝縦書き） ---------- */
.anniv {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 40px);
  margin-bottom: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--line);
}
.anniv-meta { padding-bottom: 0.3em; }
.anniv-num {
  font-family: var(--font-en);
  font-size: clamp(5rem, 15vw, 11rem);
  line-height: 0.78;
  color:var(--head);
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.12em;
}
.anniv-unit {
  font-style: normal;
  font-family: var(--font-en);
  font-size: 0.26em;
  letter-spacing: 0.08em;
  color: var(--green);
}
.anniv-meta { display: flex; flex-direction: column; gap: 8px; }
.anniv-en { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.22em; color: var(--green); font-weight: 700; }
.anniv-cap { font-size: 1.0625rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
/* 720px以下：「YEARS」と「SINCE／創業からの歩み…」を縦並びに */
@media (max-width: 720px) {
  .anniv { flex-direction: column; align-items: flex-start; gap: clamp(10px, 2.5vw, 18px); }
  .anniv-meta { padding-bottom: 0; }
}

/* ---------- セクション・インデックス番号（数字シンボル） ---------- */
.sec-no {
  color: var(--accent);
  margin-right: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 縦書き小見出し + 積層ライン（明色セクション） ---------- */
.section-head.vhead, .scenes-head.vhead { align-items: flex-start; }
.vhead-main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2vh, 22px); }
.vhead-en {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--green);
  font-weight: 700;
}
.vtitle {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  letter-spacing: 0.14em;
  line-height: 1.5;
  color:var(--head);
}
/* 640px 以下では縦書き小見出しを横並びの簡易表示に */
@media (max-width: 640px) {
  .vtitle { writing-mode: horizontal-tb; letter-spacing: 0.04em; line-height: 1.35; }
  .hero-title .tetsu { font-size: 1.5em; }
}

/* ---------- パララックス（画像の奥行き） ---------- */
.digest-media { position: relative; aspect-ratio: 4 / 3; }
.digest-media img {
  position: absolute; inset: 0;
  width: 100%; height: 128%; top: -14%;
  object-fit: cover;
  will-change: transform;
}

/* ---------- reveal（JS有効時のみ隠す。無効/失敗時は常に表示） ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(46px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal-delay="1"].is-in { transition-delay: 0.12s; }
[data-reveal-delay="2"].is-in { transition-delay: 0.24s; }

/* no-JS フォールバック：ローダーを隠しスクロールロックを解除 */
.no-js #loader { display: none; }
.no-js body.is-loading { overflow: auto; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ================= components.css（受領データそのまま・読み込み順を保持） ================= */
/* ===================================================================
   共通コンポーネント CSS（各ページのインライン＜style＞を統合）
   ※ data-astro-cid 属性セレクタを除去し、全ページで共有できる形にした
=================================================================== */

/* from work/index.html */
.breadcrumb{margin-bottom:20px}.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;list-style:none;font-family:var(--font-mono);font-size:1rem;letter-spacing:0.04em}.breadcrumb li{display:inline-flex;align-items:center;gap:8px 10px;color:rgba(255,255,255,0.7)}.breadcrumb li:not(:last-child)::after{content:"/";color:rgba(255,255,255,0.45)}.breadcrumb a{color:rgba(255,255,255,0.82);transition:color 0.3s}.breadcrumb a:hover{color:#fff;text-decoration:underline}.breadcrumb [aria-current=page]{color:#fff}

/* from work/index.html */
.lhero{position:relative;margin-top:clamp(72px,9vh,104px);min-height:clamp(380px,52vh,540px);display:flex;align-items:center;overflow:hidden;isolation:isolate;color:#fff;background:var(--surface)}.lhero-en{position:absolute;left:var(--gutter);top:-6%;z-index:0;font-family:var(--font-en);font-size:clamp(5rem,15vw,12rem);line-height:0.78;letter-spacing:0.02em;color:rgba(255,92,0,0.10);pointer-events:none;user-select:none}.lhero-inner{position:relative;width:calc(100% - clamp(40px,10vw,160px));margin-inline:auto;min-height:clamp(220px,30vh,300px);padding:clamp(28px,3vw,46px) clamp(32px,4vw,60px);display:flex;align-items:center;overflow:visible}.lhero-panel{position:absolute;inset:0;z-index:1;background:var(--green-dark);box-shadow:0 26px 70px rgba(0, 0, 0,0.24)}.lhero-photos{position:absolute;top:0;bottom:0;right:0;width:52%;z-index:2;pointer-events:none}.lp{position:absolute;object-fit:cover;border-radius:4px;box-shadow:0 12px 30px rgba(0, 0, 0,0.2)}.lp1{right:30%;top:2%;width:60%;aspect-ratio:4 / 3}.lp2{right:5%;top:44%;width:38%;aspect-ratio:4 / 3}.lhero-text{position:relative;z-index:3;max-width:none}.lhero-eyebrow{color:#fff;margin-bottom:14px}.lhero-eyebrow::before{background:var(--accent)}.lhero-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.34;letter-spacing:0.04em;white-space:nowrap;text-shadow:0 2px 16px rgba(0, 0, 0,0.55)}.lhero-lead{margin-top:clamp(12px,1.8vh,20px);font-size:clamp(1rem,1.3vw,1.125rem);font-weight:500;line-height:1.9;color:rgba(255,255,255,0.95);white-space:nowrap;text-shadow:0 1px 12px rgba(0, 0, 0,0.55)}.lhero-crumb{position:absolute;z-index:5;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);bottom:clamp(16px,2.6vh,30px)}.lhero-crumb .breadcrumb{margin-bottom:0}.lhero-crumb .breadcrumb li{color:var(--muted)}.lhero-crumb .breadcrumb li:not(:last-child)::after{color:var(--line)}.lhero-crumb .breadcrumb a{color:var(--green)}.lhero-crumb .breadcrumb a:hover{color:var(--head)}.lhero-crumb .breadcrumb [aria-current="page"]{color:var(--text)}@media (max-width: 1240px){.lhero-title,.lhero-lead{white-space:normal}}@media (max-width: 640px){.lhero{min-height:clamp(300px,42vh,420px);align-items:flex-end}.lhero-photos{display:none}.lhero-inner{width:calc(100% - clamp(36px,10vw,48px));min-height:0;margin-block:0 clamp(28px,5vh,44px)}.lhero-title,.lhero-lead{text-shadow:none}.lhero-en{font-size:clamp(4rem,26vw,9rem)}}

/* from work/index.html */
.sechead{margin-bottom:clamp(32px,5vh,56px)}.sechead.is-center{text-align:center}.sechead.is-center .eyebrow{justify-content:center}.sechead-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.45;letter-spacing:0.04em;color:var(--head);margin-top:14px}.sechead-lead{margin-top:clamp(12px,2vh,18px);font-size:clamp(1.0625rem,1.4vw,1.2rem);font-weight:500;line-height:1.95;color:var(--muted)}.sechead.is-center .sechead-lead{margin-inline:auto}

/* from work/index.html */
.frows{display:flex;flex-direction:column;gap:clamp(48px,8vh,110px)}.frow{display:grid;grid-template-columns:1.05fr 0.95fr;align-items:center;gap:clamp(28px,5vw,72px)}.frow.rev{direction:rtl}.frow.rev>{direction:ltr}.frow-media{position:relative;aspect-ratio:4 / 3;overflow:hidden;border-radius:var(--radius);box-shadow:0 24px 60px rgba(0, 0, 0,0.14)}.frow-media img{width:100%;height:100%;object-fit:cover}.frow-tag{position:absolute;left:16px;top:16px;font-family:var(--font-mono);font-size:1rem;letter-spacing:0.14em;font-weight:700;color:#fff;background:var(--green);padding:5px 14px;border-radius:100px}.frow-no{font-family:var(--font-en);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--accent);line-height:1;display:block;margin-bottom:10px}.frow-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--head);line-height:1.45;margin-bottom:clamp(14px,2vh,20px)}.frow-text{font-size:1.0625rem;font-weight:500;line-height:2;color:var(--muted)}@media (max-width: 640px){.frow,.frow.rev{grid-template-columns:1fr;direction:ltr;gap:clamp(20px,4vh,28px)}}

/* from work/index.html */
.machinelist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px)}.machine-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.machine-ph{aspect-ratio:4 / 3;overflow:hidden;background:var(--bg-soft)}.machine-ph img{width:100%;height:100%;object-fit:cover}.machine-meta{display:flex;flex-direction:column;align-items:stretch;gap:clamp(12px,1.6vw,18px);padding:clamp(18px,2.2vw,26px)}.machine-name{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:700;color:var(--head);line-height:1.4}.machine-spec{display:flex;align-items:baseline;gap:0.6em;background:var(--bg-light);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:clamp(10px,1.4vw,14px) clamp(12px,1.6vw,18px);font-family:var(--font-mono);font-size:1rem;color:var(--muted);letter-spacing:0.04em;line-height:1.5}.machine-spec b{font-family:var(--font-jp);font-size:1.125rem;font-weight:800;color:var(--head);letter-spacing:0.02em}@media (max-width: 1240px){.machinelist{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.machinelist{grid-template-columns:1fr}}

/* from work/index.html */
.emband{position:relative;overflow:hidden;isolation:isolate;background:var(--green-dark);color:#fff;padding-block:clamp(72px,12vh,150px)}.emband-photo{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-attachment:fixed;opacity:0.28}.emband-inner{position:relative;z-index:1;text-align:center}.emband-eyebrow{color:var(--accent);justify-content:center;margin-bottom:clamp(18px,3vh,30px)}.emband-eyebrow::before{background:var(--accent)}.emband-text{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.7;letter-spacing:0.06em}.emband-lead{margin-top:clamp(20px,3vh,32px);max-width:60ch;margin-inline:auto;font-size:1rem;font-weight:500;line-height:2;color:rgba(255,255,255,0.82)}@media (max-width: 640px){.emband-photo{background-attachment:scroll}}

/* from work/index.html */
.ctaband{position:relative;overflow:hidden;isolation:isolate;background:var(--green-dark);color:#fff;padding-block:clamp(72px,12vh,150px);text-align:center}.ctaband-photo{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-attachment:fixed}.ctaband-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10, 10, 10,0.66) 0%,rgba(10, 10, 10,0.85) 100%)}.ctaband-inner{position:relative;z-index:1}.ctaband-eyebrow{color:var(--accent);justify-content:center;margin-bottom:clamp(16px,2.5vh,26px)}.ctaband-eyebrow::before{background:var(--accent)}.ctaband-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.5}.ctaband-body{margin-top:clamp(14px,2vh,22px);font-size:1.0625rem;font-weight:500;line-height:2;color:rgba(255,255,255,0.9)}.ctaband-actions{margin-top:clamp(28px,4vh,44px);display:flex;justify-content:center}.ctaband .btn-primary{background:var(--surface);color:var(--head);border:2px solid #fff}.ctaband .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}.ctaband-tel{display:inline-block;margin-top:clamp(22px,3vh,32px);font-family:var(--font-en);font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:0.04em;color:#fff}.ctaband-note{font-size:1rem;color:rgba(255,255,255,0.78);margin-top:4px}@media (max-width: 640px){.ctaband-photo{background-attachment:scroll}}

/* from about/index.html */
.philosophy-quote{position:relative;text-align:center;padding:clamp(28px,5vh,56px) clamp(16px,4vw,48px)}.pq-mark{display:block;font-family:var(--font-serif);font-weight:700;font-size:clamp(3.4rem,9vw,5.6rem);line-height:0.9;height:0.62em;color:var(--accent);margin-bottom:clamp(10px,2vh,20px)}.pq-text{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.6rem,4.6vw,3rem);line-height:1.7;letter-spacing:0.06em;color:var(--head)}.pq-lead{margin-top:clamp(20px,3vh,32px);max-width:60ch;margin-inline:auto;font-size:clamp(1.0625rem,1.5vw,1.2rem);font-weight:500;line-height:2;color:var(--muted)}

/* from about/index.html */
.numband{position:relative;overflow:hidden;isolation:isolate;background:var(--grad);color:#fff;padding-block:clamp(72px,11vh,150px)}.numband-photo{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-attachment:fixed;mix-blend-mode:multiply;opacity:0.55}.numband .wrap{position:relative;z-index:1}.numband-layout{display:flex;justify-content:center;align-items:flex-start;gap:clamp(28px,4vw,72px)}.numband-head{flex:0 0 auto}.numband-title{writing-mode:vertical-rl;font-family:var(--font-serif);font-weight:600;font-size:clamp(1.8rem,3.2vw,2.8rem);letter-spacing:0.14em;line-height:1.5;color:#fff}.numband-main{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;align-items:center}.numband-img{display:block;width:auto;max-width:100%;height:clamp(460px,68vh,880px)}.numband-link{display:flex;justify-content:center;margin-top:clamp(36px,5vh,64px)}.numband-btn{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.7)}.numband-btn:hover{background:var(--surface);color:var(--head)}@media (max-width: 640px){.numband-layout{flex-direction:column;align-items:stretch;gap:clamp(24px,4vh,36px)}.numband-title{writing-mode:horizontal-tb;letter-spacing:0.06em}.numband-img{width:70%;height:auto}.numband-photo{background-attachment:scroll}}

/* from about/index.html */
.hubcards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,36px)}.hubcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease)}.hubcard:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0, 0, 0,0.16)}.hubcard-media{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--bg-soft)}.hubcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--ease)}.hubcard:hover .hubcard-media img{transform:scale(1.06)}.hubcard-body{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:8px}.hubcard-en{font-family:var(--font-mono);font-size:1rem;letter-spacing:0.18em;color:var(--green);font-weight:700}.hubcard-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.85rem);color:var(--head);line-height:1.4}.hubcard-desc{font-size:1rem;font-weight:500;line-height:1.85;color:var(--muted)}.hubcard-arrow{margin-top:auto;align-self:flex-end;font-size:1.4rem;color:var(--green);transition:transform 0.4s var(--ease)}.hubcard:hover .hubcard-arrow{transform:translateX(6px)}@media (max-width: 640px){.hubcards{grid-template-columns:1fr}}

/* from about/faq/index.html */
.faq{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,1.6vw,18px);padding:clamp(18px,2.2vw,26px) clamp(4px,1vw,10px)}.faq-item summary::-webkit-details-marker{display:none}.faq-q-mark{font-family:var(--font-en);font-size:1.4rem;color:var(--accent);line-height:1}.faq-q{font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:700;color:var(--head);line-height:1.6}.faq-icon{position:relative;width:18px;height:18px;flex:0 0 auto}.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--green);transition:transform 0.3s var(--ease)}.faq-icon::before{top:8px;left:0;width:18px;height:2px}.faq-icon::after{left:8px;top:0;width:2px;height:18px}.faq-item[open] .faq-icon::after{transform:scaleY(0)}.faq-a{padding:0 clamp(4px,1vw,10px) clamp(20px,2.4vw,28px) clamp(34px,4vw,46px)}.faq-a p{font-size:1.0625rem;font-weight:500;line-height:1.95;color:var(--muted)}@media (prefers-reduced-motion: reduce){.faq-icon::before,.faq-icon::after{transition:none}}

/* from recruit/index.html */
.leadcopy-wrap{max-width:56rem}.leadcopy-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.5;letter-spacing:0.05em;color:var(--head)}.leadcopy-text{margin-top:clamp(20px,3vh,34px);font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:500;line-height:2.1;letter-spacing:0.02em;color:var(--muted)}

/* from recruit/index.html */
.salary-month{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-bottom:clamp(24px,3.5vh,40px);margin-bottom:clamp(24px,3.5vh,40px);border-bottom:1px solid var(--line)}.salary-label{font-family:var(--font-mono);font-size:1rem;letter-spacing:0.2em;color:var(--green);font-weight:700}.salary-amount{font-family:var(--font-en);font-size:clamp(2.9rem,7.5vw,5.2rem);color:var(--head);line-height:1}.salary-note{font-size:1rem;color:var(--muted)}.salary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}.salary-card{display:flex;flex-direction:column;gap:8px;justify-content:flex-end;background:var(--bg-light);border-radius:var(--radius);padding:clamp(22px,2.8vw,34px)}.sc-stage{font-size:1rem;font-weight:700;color:var(--head)}.sc-income{font-family:var(--font-en);font-size:clamp(2.2rem,4.5vw,3.2rem);color:var(--head);line-height:1;display:flex;align-items:baseline;gap:4px}.salary-card:nth-child(1) .sc-income{font-size:clamp(1.9rem,3.6vw,2.6rem)}.salary-card:nth-child(2) .sc-income{font-size:clamp(2.3rem,4.7vw,3.4rem)}.salary-card:nth-child(3) .sc-income{font-size:clamp(2.8rem,5.8vw,4.4rem)}.sc-income em{font-style:normal;font-family:var(--font-jp);font-size:1.125rem;font-weight:800;color:var(--green)}.sc-note{font-size:1rem;font-weight:500;color:var(--muted);line-height:1.8}@media (max-width: 640px){.salary-grid{grid-template-columns:1fr}}

/* from recruit/index.html */
.ifeat{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}.ifeat-item{background:var(--bg-light);border-radius:var(--radius);padding:clamp(24px,2.6vw,36px) clamp(16px,2vw,24px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.ifeat-icon{width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface);color:var(--green);box-shadow:0 8px 22px rgba(0, 0, 0,0.1)}.ifeat-icon svg{width:52%;height:52%}.ifeat-label{font-weight:700;font-size:1.0625rem;color:var(--head);line-height:1.5}.ifeat-desc{font-size:1rem;font-weight:500;line-height:1.7;color:var(--muted)}@media (max-width: 1240px){.ifeat{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.ifeat{grid-template-columns:1fr}}

/* from recruit/index.html */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}.rcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:12px;transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease)}.rcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0, 0, 0,0.12)}.rcard-no{font-family:var(--font-en);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--accent);letter-spacing:0.02em}.rcard-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--head);line-height:1.5}.rcard-body{font-size:1rem;font-weight:500;line-height:1.9;color:var(--muted)}.rcard-evi{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:1rem;font-weight:700;color:var(--green);line-height:1.7}@media (max-width: 1240px){.rgrid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.rgrid{grid-template-columns:1fr}}

/* from recruit/index.html */
.stepflow{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(16px,2vw,28px)}.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.6vw,32px)}.step:not(:last-child)::after{content:"→";position:absolute;top:50%;right:calc(clamp(16px,2vw,28px) / -2);transform:translate(50%,-50%);color:var(--green);font-size:1.4rem;font-weight:700}.step-no{font-family:var(--font-mono);font-size:1rem;letter-spacing:0.18em;color:var(--accent);font-weight:700}.step-title{font-size:clamp(1.125rem,1.8vw,1.4rem);font-weight:700;color:var(--head);line-height:1.45;margin:10px 0 8px}.step-desc{font-size:1.0625rem;font-weight:500;line-height:1.85;color:var(--muted)}@media (max-width: 1240px){.stepflow{grid-auto-flow:row;grid-auto-columns:auto}.step:not(:last-child)::after{content:"↓";top:auto;bottom:calc(clamp(16px,2vw,28px) / -2);right:50%;transform:translate(50%,50%)}}

/* from recruit/job/index.html */
.joblist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px)}.job-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 34px rgba(255,92,0,0.10)}.job-ph{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--bg-soft)}.job-ph img{width:100%;height:100%;object-fit:cover}.job-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.92);color:var(--head);font-family:var(--font-mono);font-size:1rem;letter-spacing:0.08em;padding:4px 12px;border-radius:100px;font-weight:700}.job-body{padding:clamp(22px,2.6vw,32px)}.job-no{font-family:var(--font-en);font-size:clamp(2rem,3.4vw,2.8rem);color:var(--accent);line-height:1}.job-name{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;color:var(--head);line-height:1.4;margin:8px 0 12px}.job-desc{font-size:1.0625rem;font-weight:500;line-height:1.9;color:var(--muted)}@media (max-width: 1240px){.joblist{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.joblist{grid-template-columns:1fr}}

/* from recruit/job/index.html */

.jobrows{display:flex;flex-direction:column;gap:clamp(36px,5.5vw,84px)}
.jobrow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,4.5vw,72px)}
.jobrow.rev .jobrow-ph{order:2}
.jobrow-ph{position:relative;aspect-ratio:4 / 3;overflow:hidden;border-radius:var(--radius);background:var(--bg-soft);box-shadow:0 20px 48px rgba(255,92,0,0.22)}
.jobrow-ph img{width:100%;height:100%;object-fit:cover}
.jobrow-tag{position:absolute;top:16px;left:16px;background:rgba(255,255,255,0.92);color:var(--head);font-family:var(--font-mono);font-size:1rem;letter-spacing:0.08em;padding:5px 14px;border-radius:100px;font-weight:700}
.jobrow-no{font-family:var(--font-en);font-size:clamp(2.6rem,5vw,3.8rem);color:var(--accent);line-height:1}
.jobrow-name{font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;color:var(--head);line-height:1.4;margin:6px 0 18px}
.jobrow-desc{font-size:clamp(1.0625rem,1.3vw,1.18rem);font-weight:500;line-height:2.05;color:var(--muted);text-wrap:pretty}
@media (max-width:760px){.jobrow{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}.jobrow.rev .jobrow-ph{order:0}}
.termgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.termcard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:clamp(22px,2.6vw,32px);box-shadow:0 12px 34px rgba(255,92,0,0.10)}
.termcard dt{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.term-word{font-size:clamp(1.2rem,2.1vw,1.5rem);font-weight:700;color:var(--head);line-height:1.3}
.term-read{font-family:var(--font-mono);font-size:0.95rem;letter-spacing:0.06em;color:var(--green);font-weight:700}
.termcard dd{margin:14px 0 0;font-size:1.0625rem;font-weight:500;line-height:1.95;color:var(--muted);text-wrap:pretty}
@media (max-width:760px){.termgrid{grid-template-columns:1fr}}


/* from recruit/style/index.html */
.day-timeline{list-style:none;position:relative}.day-row{position:relative;display:grid;grid-template-columns:clamp(64px,10vw,96px) 24px 1fr;align-items:start;gap:clamp(12px,2vw,24px);padding:clamp(14px,1.8vh,22px) 0}.day-row>{position:relative;z-index:1}.day-time{font-family:var(--font-mono);font-size:1.0625rem;font-weight:700;color:var(--head);letter-spacing:0.04em;padding-top:2px}.day-dot{position:relative;justify-self:center;width:14px;height:14px;margin-top:6px;border-radius:50%;background:var(--green)}.day-row:not(:last-child) .day-dot::after{content:"";position:absolute;left:50%;top:14px;transform:translateX(-50%);width:2px;height:calc(100% + clamp(28px,3.6vh,44px));background:var(--line)}.day-label{font-size:1.0625rem;font-weight:500;line-height:1.85;color:var(--text)}.day-badge{display:inline-block;margin-left:10px;vertical-align:2px;font-size:1rem;font-weight:700;color:#fff;background:var(--accent);padding:2px 12px;border-radius:100px}.day-row.is-break::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:clamp(-20px,-2vw,-12px);right:clamp(-20px,-2vw,-12px);background:var(--bg-soft);border-radius:var(--radius)}.day-row.is-break .day-dot{background:var(--accent)}.day-row.is-break .day-label{color:var(--head);font-weight:700}

/* from recruit/style/index.html */
.data-table{border-top:1px solid var(--line)}.data-row{display:grid;grid-template-columns:clamp(140px,22%,240px) 1fr;gap:clamp(12px,3vw,40px);padding:clamp(16px,2.2vw,26px) clamp(4px,1vw,12px);border-bottom:1px solid var(--line)}.data-row dt{font-weight:700;font-size:1rem;color:var(--head);letter-spacing:0.04em}.data-row dd{font-size:1.0625rem;font-weight:500;line-height:1.9;color:var(--text)}@media (max-width: 640px){.data-row{grid-template-columns:1fr;gap:4px;padding-block:16px}.data-row dt{color:var(--green)}}

/* from recruit/style/index.html */
.ifeat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}.ifeat-item{background:var(--bg-light);border-radius:var(--radius);padding:clamp(24px,2.6vw,36px) clamp(16px,2vw,24px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.ifeat-icon{width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface);color:var(--green);box-shadow:0 8px 22px rgba(0, 0, 0,0.1)}.ifeat-icon svg{width:52%;height:52%}.ifeat-label{font-weight:700;font-size:1.0625rem;color:var(--head);line-height:1.5}.ifeat-desc{font-size:1rem;font-weight:500;line-height:1.7;color:var(--muted)}@media (max-width: 1240px){.ifeat{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.ifeat{grid-template-columns:1fr}}

/* from recruit/people/index.html */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.5vw,36px)}.person-card{display:grid;grid-template-columns:clamp(120px,30%,220px) 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 34px rgba(255,92,0,0.10)}.person-ph{background:var(--bg-soft);display:grid;place-items:center}.person-ph img{width:100%;height:100%;object-fit:cover}.person-ph-empty{font-family:var(--font-mono);font-size:1rem;color:var(--accent);letter-spacing:0.1em}.person-body{position:relative;padding:clamp(22px,2.6vw,32px)}.person-quote{font-family:var(--font-en);font-size:2.6rem;line-height:0.6;color:var(--accent);display:block;margin-bottom:8px}.person-comment{font-size:1.0625rem;font-weight:500;line-height:1.95;color:var(--text)}.person-name{margin-top:16px;font-weight:700;color:var(--head)}.person-role{margin-left:10px;font-size:1rem;font-weight:500;color:var(--muted)}@media (max-width: 640px){.people{grid-template-columns:1fr}.person-card{grid-template-columns:1fr}.person-ph{aspect-ratio:16 / 10}}

/* from information/index.html */
.access{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.5vw,40px)}.access-map{aspect-ratio:16 / 10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}.access-map iframe{width:100%;height:100%;border:0;display:block}.access-map-ph{width:100%;height:100%;background:var(--bg-soft);display:grid;place-items:center;gap:6px}.access-map-ph span{font-family:var(--font-mono);font-size:1rem;letter-spacing:0.2em;color:var(--accent)}.access-map-ph small{font-size:1rem;color:var(--muted)}.access-name{margin-top:16px;font-size:clamp(1.125rem,1.8vw,1.4rem);font-weight:700;color:var(--head)}.access-addr{margin-top:8px;font-size:1.0625rem;font-weight:500;line-height:1.9;color:var(--muted)}@media (max-width: 640px){.access{grid-template-columns:1fr}}

/* from blog/index.html */
.bloglist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,36px)}.bl-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(255,92,0,0.10);transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease)}.bl-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(255,92,0,0.18)}.bl-thumb{aspect-ratio:16 / 10;overflow:hidden;background:var(--bg-soft);display:grid;place-items:center}.bl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease)}.bl-card:hover .bl-thumb img{transform:scale(1.05)}.bl-thumb span{font-family:var(--font-mono);color:var(--accent);letter-spacing:0.1em;font-size:1rem}.bl-body{padding:clamp(20px,2.4vw,28px)}.bl-body time{font-family:var(--font-mono);font-size:1rem;color:var(--green);letter-spacing:0.08em}.bl-cat{display:inline-block;margin-left:10px;font-size:1rem;color:var(--muted);background:var(--bg-light);padding:2px 10px;border-radius:100px}.bl-body h3{font-size:1.125rem;font-weight:700;color:var(--text);line-height:1.6;margin-top:12px}.bl-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(40px,5vh,64px)}.bl-page{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:1rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--head);transition:background 0.3s,color 0.3s,border-color 0.3s}.bl-page:hover{border-color:var(--green)}.bl-page.is-current{background:var(--green);color:#fff;border-color:var(--green)}@media (max-width: 1240px){.bloglist-grid{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.bloglist-grid{grid-template-columns:1fr}}

/* from form/inquiry/index.html */
.inquiry-form{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)}.field{display:flex;flex-direction:column;gap:8px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px)}.field label,.agree{font-size:1rem;font-weight:700;color:var(--head)}.req{font-size:1rem;font-weight:700;color:#fff;background:var(--accent);padding:1px 10px;border-radius:100px;margin-left:8px}.field input,.field textarea{font:inherit;font-size:1rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;width:100%;transition:border-color 0.25s,box-shadow 0.25s}.field input::placeholder,.field textarea::placeholder{color:#8c8c8c}.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(255,92,0,0.18)}.field input:user-invalid{border-color:#ff5c00}.agree{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--text)}.agree input{margin-top:4px;width:18px;height:18px;accent-color:var(--green)}.agree a{color:var(--green);text-decoration:underline}.form-action{margin-top:8px}.form-action .btn{width:100%;max-width:380px;justify-content:center}.form-note{font-size:1rem;color:var(--muted)}@media (max-width: 640px){.field-row{grid-template-columns:1fr}}

/* from form/inquiry/index.html */
.inquiry-wrap{max-width:760px}.inquiry-tel{margin-top:clamp(28px,4vh,44px);font-size:1.0625rem;font-weight:500;color:var(--muted)}.inquiry-tel a{font-family:var(--font-en);font-size:clamp(1.5rem,3vw,2rem);color:var(--head);letter-spacing:0.04em;margin-left:8px;vertical-align:-2px}

/* from privacypolicy/index.html */
.prose{max-width:76ch}.prose h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.5;color:var(--head);margin:clamp(36px,5vh,56px) 0 clamp(14px,2vh,20px);padding-bottom:12px;border-bottom:1px solid var(--line)}.prose h2:first-child{margin-top:0}.prose h3{font-weight:700;font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--head);line-height:1.6;margin:clamp(28px,4vh,40px) 0 10px}.prose p{font-size:1.0625rem;font-weight:500;line-height:2;color:var(--text);margin:0 0 1.2em}.prose a{color:var(--green);text-decoration:underline}.prose ul,.prose ol{margin:0 0 1.4em 1.4em}.prose li{font-size:1.0625rem;font-weight:500;line-height:1.95;color:var(--text);margin:0.3em 0}.prose ul li{list-style:none;position:relative;padding-left:1.2em}.prose ul li::before{content:"";position:absolute;left:0;top:0.82em;width:8px;height:8px;border-radius:50%;background:var(--accent)}.prose strong{color:var(--head);font-weight:700}.prose blockquote{margin:1.6em 0;padding:clamp(18px,2.4vw,28px);background:var(--bg-light);border-radius:var(--radius);font-weight:600;color:var(--head)}

/* ================= add.css（受領データそのまま・読み込み順を保持） ================= */
/* ===================================================================
   NKSTYLE — 追加スタイル（add.css）
   グラフィティ／コンクリート質感のシグネチャー要素と、
   テンプレに無い新規コンポーネントのみをここに追加する。
   ※ 配色は assets/global.css の :root トークンを参照（固有値は書かない）
=================================================================== */

/* ---------- 下地：コンクリート壁テクスチャ（全ページ共通） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-test2.site/images/1534/concrete.webp);
  background-size: 512px 512px;
  opacity: 0.55;
}
.section, .hero, .lhero { position: relative; }

/* 明色面だった箇所のダーク補正 */
.lhero { background: var(--bg); }
.site-header.solid { background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(8px); }
.btn-ghost { background: transparent; color: var(--head); border: 2px solid var(--line); }
.btn-ghost:hover { background: var(--green); border-color: var(--green); color: #fff; }
.nav-sub { background: var(--surface); }

/* ---------- ヘッダーの電話番号 ---------- */
.nav-tel {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  padding-inline: 4px;
  min-height: 44px;
}
.nav-tel small {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--green);
}
.nav-tel b {
  font-family: var(--font-en);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: var(--head);
}
.site-header:not(.solid) .nav-tel b { color: #fff; }
@media (max-width: 1240px) { .nav-tel { display: none; } }

/* ---------- スプレー缶のドリップ（見出し下・セクション区切り） ---------- */
.drip {
  display: block;
  width: 100%;
  height: 18px;
  color: var(--green);
}
.drip svg { display: block; width: 100%; height: 100%; }
.sechead-title .tagmark,
.vtitle .tagmark {
  display: inline-block;
  color: var(--green);
  font-family: var(--font-en);
  transform: rotate(-4deg);
  margin-inline: 0.1em;
}

/* 見出しに手書きタグ風の下線（差し色1色のみ） */
.u-tagline {
  background-image: linear-gradient(transparent 62%, rgba(var(--accent-rgb), 0.35) 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: 0.12em;
}

/* ---------- スクロール進行バー（演出④） ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
}
.scroll-progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--grad);
}

/* ---------- CTAボタンの光沢（演出③） ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  translate: -160% 0;
}
.btn:hover::after { animation: btn-shine 0.75s var(--ease) 1; }
.btn:active { scale: 0.98; }
@keyframes btn-shine { to { translate: 420% 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation: none; }
  .btn:active { scale: 1; }
}

/* ---------- Before / After ---------- */
.balist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.bacard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bapair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.bacol { position: relative; }
.bacol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.balabel {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  background: rgba(10, 10, 10, 0.82);
  color: #fff;
}
.bacol.is-after .balabel { background: var(--green); }
.baarrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  color: var(--green);
  font-size: 1.25rem;
  background: var(--surface-2);
}
.bacap {
  padding: clamp(12px, 1.6vw, 18px);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
.bacap b { color: var(--head); font-weight: 700; display: block; }
@media (max-width: 1240px) { .balist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .balist { grid-template-columns: 1fr; } }

/* ---------- 料金表 ---------- */
.ptable-wrap { overflow-x: auto; }
.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 620px;
}
.ptable th, .ptable td {
  padding: clamp(12px, 1.6vw, 18px);
  text-align: left;
  border-bottom: 1px solid var(--line);
  line-height: 1.7;
}
.ptable thead th {
  background: var(--green-dark);
  color: var(--head);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--green);
  white-space: nowrap;
}
.ptable tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.ptable td.price, .ptable .price {
  font-family: var(--font-en);
  font-size: 1.3rem;
  color: var(--green);
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-block;
}
.ptable-note {
  margin-top: 14px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
}

/* ---------- チェック条件グリッド ---------- */
.checkgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.checkcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px);
  text-align: center;
}
.checkcard .ck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  margin-bottom: 12px;
}
.checkcard h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--head);
  line-height: 1.5;
  margin-bottom: 6px;
}
.checkcard p { font-size: 1rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 1240px) { .checkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .checkgrid { grid-template-columns: 1fr; } }

/* ---------- お客様の声 ---------- */
.voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.voice {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px) clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 26px);
}
.voice::before {
  content: "“";
  position: absolute;
  top: 2px;
  left: 16px;
  font-family: var(--font-serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--green);
}
.voice p { font-size: 1rem; line-height: 1.95; color: var(--text); }
.voice cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--muted);
}
@media (max-width: 1240px) { .voices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .voices { grid-template-columns: 1fr; } }

/* ---------- 画像＋本文の2カラム ---------- */
.splitrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.splitrow .media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.splitrow .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.splitrow p { font-size: 1.0625rem; line-height: 2; color: var(--muted); }
.splitrow p + p { margin-top: 1.1em; }
@media (max-width: 640px) { .splitrow { grid-template-columns: 1fr; } }

/* ---------- 箇条書き（チェック） ---------- */
.checklist { display: grid; gap: 2px; }
.checklist li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.8;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 900;
}

/* ---------- 強調ボックス ---------- */
.hlbox {
  border: 2px solid var(--green);
  border-radius: var(--radius);
  background: rgba(var(--green-rgb), 0.08);
  padding: clamp(22px, 3vw, 34px);
}
.hlbox h3 {
  color: var(--green);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 10px;
}
.hlbox p { color: var(--text); line-height: 1.95; }
.hlbox .btn { margin-top: 18px; }

/* ---------- 数値バッジ列 ---------- */
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.statcell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px);
  text-align: center;
}
.statcell .num {
  font-family: var(--font-en);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--green);
}
.statcell .num small { font-size: 0.42em; margin-left: 0.25em; color: var(--head); }
.statcell .lab {
  display: block;
  margin-top: 10px;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}
@media (max-width: 640px) { .statrow { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ カテゴリチップ ---------- */
.faqnav { display: flex; flex-wrap: wrap; gap: 10px; }
.faqnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
}
.faqnav a:hover { border-color: var(--green); color: var(--green); }

/* ---------- モバイル固定バー（4アクション） ---------- */
.mobile-cta { display: none; }
@media (max-width: 1240px) {
  .mobile-cta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    padding: 8px;
    background: rgba(10, 10, 10, 0.94);
    border-top: 1px solid var(--line);
    translate: 0 120%;
    transition: translate 0.35s var(--ease);
  }
  .mobile-cta.is-shown { translate: 0 0; }
  .mcta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
  }
  body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}


/* ---------- タイポグラフィ：見出しはブロック体（スタンシル/グラフィティ寄り） ---------- */
.sechead-title, .lhero-title, .frow-title, .vtitle, .hero-title,
.ctaband-title, .emband-text, .statement-text, .facts-title,
.numband-title, .worry-title, .leadcopy-title, .pq-text {
  font-family: var(--font-jp);
  font-weight: 900;
  letter-spacing: 0.01em;
}
.lhero-en, .ghost-word, .hero-bgword { opacity: 0.9; }

/* ヒーロー/CTAの主ボタンは塗りつぶし（オレンジ） */
.hero .btn-primary,
.ctaband .btn-primary,
.contact .btn-primary { background: var(--grad); color: #fff; border: 2px solid var(--green); box-shadow: 0 14px 34px rgba(var(--green-rgb), 0.35); }
.hero .btn-primary:hover,
.ctaband .btn-primary:hover,
.contact .btn-primary:hover { background: var(--green); color: #fff; }
.hero .btn-ghost, .contact .btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.brand-logo { filter: none; }








/* フッター：3列メニューでも重ならないように折り返しを許可 */
.footer-top { flex-wrap: wrap; }
.footer-brand { flex: 1 1 320px; }
.footer-menus { flex: 1 1 520px; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 56px); justify-content: flex-start; }
.footer-col { min-width: 0; }
.footer-col a { display: block; white-space: normal; }
@media (max-width: 900px) { .footer-brand .addr { white-space: normal; } }












/* ---------- 下層ヒーロー：写真とテキストの重なりを防ぐ ---------- */
.lhero-title, .lhero-lead { white-space: normal; }
.lhero-text { max-width: 52%; }
.lhero-inner { min-height: clamp(260px, 34vh, 360px); }
.lhero-title { font-size: clamp(1.7rem, 3.6vw, 2.8rem); }
@media (max-width: 1024px) { .lhero-text { max-width: 100%; } .lhero-photos { opacity: 0.28; } }


/* CTA帯：白文字とのコントラスト確保（4.5:1以上） */
.ctaband-photo::after { background: linear-gradient(135deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.94) 100%) !important; }
.contact-media::after { background: rgba(10, 10, 10, 0.86) !important; }


/* ---------- 検証指摘の修正 ---------- */
/* 1) ヒーロー：白文字の背後に必ず暗幕を入れ、写真と分離する */
.hero-scrim {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.9) 42%, rgba(10, 10, 10, 0.55) 62%, rgba(10, 10, 10, 0.2) 100%);
}
.hero-inner { position: relative; z-index: 6; }
@media (min-width: 1241px) { .hero-text { max-width: 58% !important; } }
/* タブレット・スマホ：全面ベタ幕だと写真が完全に隠れるため、
   上=薄く写真を見せ／下=濃くして文字を読ませる縦グラデーションにする */
@media (max-width: 1240px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0.34) 0%,
      rgba(10, 10, 10, 0.30) 30%,
      rgba(10, 10, 10, 0.82) 54%,
      rgba(10, 10, 10, 0.96) 74%,
      rgba(10, 10, 10, 0.99) 100%);
  }
}

/* iPad（縦・横）：コラージュを画面上段いっぱいに置き、テキストは下段へ逃がす */
@media (min-width: 601px) and (max-width: 1240px) {
  .hero { align-items: flex-end; }
  .hero-collage {
    top: clamp(92px, 12vh, 132px);
    right: 3%;
    left: auto;
    width: min(94vw, 760px);
  }
  .hero .hero-inner {
    padding-top: min(58vh, calc(clamp(92px, 12vh, 132px) + min(94vw, 760px) * 0.938 - 4vh)) !important;
    padding-bottom: clamp(28px, 5vh, 48px);
  }
  .hero-text { max-width: 100%; }
  /* 折り返し前提に切り替えるとアクセント字の位置が破綻するので nowrap は維持し、
     代わりに字面を画面幅に収まるサイズまで落とす */
  .hero-title { font-size: clamp(1.75rem, 5.2vw, 3.5rem) !important; }
  .hero-sub { line-height: 1.8; margin-top: 18px; }
  .hero-position { margin-top: 10px; }
  .hero-actions { margin-top: clamp(20px, 3vh, 32px); }
}

/* スマホ：右上の小さなコラージュだと潰れるので、やや大きく上段に */
@media (max-width: 600px) {
  .hero-collage {
    top: clamp(78px, 11vh, 108px);
    right: 3%;
    left: auto;
    width: min(88vw, 460px);
  }
  .hero .hero-inner {
    padding-top: min(52vh, calc(clamp(78px, 11vh, 108px) + min(88vw, 460px) * 0.938 - 3vh)) !important;
  }
}

/* 2) CMS記事カード：インラインaを挟むためサムネイル高さが解決しない問題 */
[class*="parts131415_blog"] .card-body a { display: block !important; }

/* 3) ボタンラベルを折り返さない */
.btn { white-space: nowrap; }
.btn svg { flex: 0 0 auto; }
@media (max-width: 400px) { .btn { white-space: normal; } }


/* CMS記事カード：サムネイル画像を確実に枠いっぱいに（%高さ解決の保険） */
[class*="parts131415_blog"] .parts131415_blog_thumbnail { position: relative !important; }
[class*="parts131415_blog"] .parts131415_blog_thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ヒーロー：固定ヘッダー分のクリアランスを確保（eyebrowがヘッダー/CTAの下敷きになるのを防ぐ） */
.hero .hero-inner { padding-top: clamp(104px, 14vh, 148px) !important; }
@media (min-width: 1240px) {
  .hero .hero-inner { padding-top: clamp(116px, 15vh, 160px) !important; }
}


/* アクセント字「塗」：line-height:0 のせいで上の行に食い込み重なるため打ち消す */
.hero-title .tetsu {
  font-size: 1.42em !important;
  line-height: 1 !important;
  vertical-align: -0.1em !important;
  transform: none !important;
  margin-left: -0.1em !important;
}
@media (max-width: 640px) { .hero-title .tetsu { font-size: 1.3em !important; } }

/* ハンバーガー帯（〜1240px）ではタイトルが画面幅を食い潰さないよう上限を下げる */
@media (max-width: 1240px) {
  .hero-title { font-size: clamp(1.5rem, 5.2vw, 3.5rem); }
}

/* ================= nk-top.css（受領データそのまま・読み込み順を保持） ================= */
/* ===================================================================
   NKSTYLE トップ — 本案件向け上書き（assets/nk-top.css）
   参考ID（3bacc345…）のCSS一式に対する、この案件固有の差分のみ。
   ・オープニング＝オレンジ地／会社名＋0→100%
   ・写真は未支給のため薄いグレーのプレースホルダー面（点線・注釈なし）
   ・ロゴは画像ではなくテキストブランド
=================================================================== */

/* ---------- オープニング（オレンジ全面） ---------- */
#loader{background:#FF5C00}
.loader-brand{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff}
.loader-brand .pre{font-family:var(--font-jp);font-size:1rem;font-weight:700;letter-spacing:.42em;text-indent:.42em;opacity:.85}
.loader-brand .name{font-family:var(--font-en);font-size:clamp(2.6rem,11vw,7rem);line-height:.9;letter-spacing:.02em}
#loader .loader-count{align-items:baseline;color:rgba(255,255,255,.82)}
#loader .loader-count .pct{font-family:var(--font-en);font-size:1.5rem;letter-spacing:.04em;color:#fff}
#loader .loader-count .pct small{font-size:.6em;margin-left:.15em;letter-spacing:.08em}
#loader .loader-bar i{background:#fff}

/* ---------- 画像プレースホルダー（背景グレー・破線と注釈なし） ---------- */
.site-ph{background:#c9cec9;border:0;border-radius:0}
.site-ph::before,.site-ph::after{content:none;display:none}
image-slot{background:#c9cec9 !important;border:0 !important}
image-slot::part(ring){display:none !important}
image-slot::part(frame){background:transparent !important;border:0 !important}
image-slot::part(label),image-slot::part(placeholder),image-slot::part(hint){display:none !important}
.hero-collage .hp{background:#c9cec9;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.splitrow .media.site-ph{aspect-ratio:4/3}
.hubcard-media.site-ph,.blog-thumb.site-ph{background:#c9cec9}

/* ---------- FV：写真を 5px の目地でタイル状に組む（ステンドグラス状）
   ・影なし、右端・上端・下端はブリード
   ・コピーの黒パネルの右と下に写真が入り込む位置関係 ---------- */
.scroll-cue{display:none !important}
.hp{box-shadow:none !important}
.hero-collage{aspect-ratio:auto;display:grid;gap:0}
/* 境界は常に 10px に見えるよう、各写真に地色の枠を持たせ、その半分だけ外へ広げて重ねる
   （隣り合う場合も、写真が重なる場合も黒の境界は 10px で一定） */
.hero-collage .hp{border:10px solid var(--bg);margin:-5px;box-sizing:border-box}
.hero-collage .hp{position:static;width:auto;height:auto;min-width:0;min-height:0;aspect-ratio:auto !important;object-fit:cover}
@media (min-width:1241px){
  /* 画面全体を 12×14 の面として使う。セルは埋め尽くさず、
     右上の大判 → 中段の中判（重なり）→ 右端の縦 → 最下段の帯 で面を割る。
     黒パネルは左下。写真はその右と下に入り込む */
  .hero-collage{top:0;right:0;left:0;width:100%;height:100%;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(14,1fr)}
  .hero-collage .hp1{grid-area:1/6/9/14;margin-right:95px}
  .hero-collage .hp2{grid-area:2/4/7/7}
  .hero-collage .hp6{grid-area:6/6/13/11}
  .hero-collage .hp3{grid-area:7/10/15/14;margin-right:-15px;margin-bottom:45px}
  .hero-collage .hp4{grid-area:12/8/15/11}
  .hero-collage .hp5{grid-area:10/1/15/9;margin-left:-15px}
  .hero-title{font-size:clamp(1.7rem,4.6vw,4.6rem)}
  .hero-sub{font-size:clamp(1.0625rem,1.4vw,1.22rem);line-height:1.9}
  .hero-position{font-size:clamp(1rem,1.15vw,1.08rem)}
}
@media (min-width:861px) and (max-width:1240px){
  .hero-collage{top:0;right:0;left:0;width:100%;height:min(52vh,440px);grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr)}
  .hero-collage .hp1{grid-area:1/4/7/12}
  .hero-collage .hp2{grid-area:1/1/4/4}
  .hero-collage .hp5{grid-area:5/1/9/7}
  .hero-collage .hp3{grid-area:3/12/9/13}
  .hero-collage .hp4{grid-area:7/7/9/11}
  .hero-collage .hp6{display:none}
}
@media (max-width:860px){
  .hero-collage{top:0;right:0;left:0;width:100%;height:min(46vh,400px);grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr)}
  .hero-collage .hp2{grid-area:1/1/3/3}
  .hero-collage .hp1{grid-area:1/3/5/10}
  .hero-collage .hp5{grid-area:4/1/7/6}
  .hero-collage .hp3{grid-area:3/8/7/11}
  .hero-collage .hp4{display:none}
  .hero-collage .hp6{display:none}
}

/* ---------- 装飾：左端の縦書きレール（FVを抜けてから出現） ---------- */
.vrail{opacity:0;left:clamp(10px,1.2vw,22px);letter-spacing:.34em;font-weight:700;color:var(--green);transition:opacity .7s var(--ease)}
.vrail.is-shown{opacity:.8}
@media (prefers-reduced-motion:reduce){.vrail{transition:none}}

/* ---------- SERVICES：ラプターを主役カードに（1枚だけ横長・2カラム占有） ---------- */
.hubcards>.hubcard:first-child{grid-column:1/-1;flex-direction:row;align-items:stretch;border-color:rgba(var(--green-rgb),.45)}
.hubcards>.hubcard:first-child .hubcard-media{flex:0 0 46%;aspect-ratio:auto;min-height:clamp(240px,32vw,360px)}
.hubcards>.hubcard:first-child .hubcard-body{flex:1 1 auto;justify-content:center;padding:clamp(26px,3vw,48px)}
.hubcards>.hubcard:first-child .hubcard-title{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.hubcards>.hubcard:first-child .hubcard-desc{font-size:1.0625rem}
@media (max-width:640px){
  .hubcards>.hubcard:first-child{flex-direction:column}
  .hubcards>.hubcard:first-child .hubcard-media{flex:none;aspect-ratio:16/9;min-height:0}
}

/* ---------- SERVICES：矢印の落ち先を全カードで揃える ---------- */
.hubcard-body{flex:1 1 auto}
.hubcard-arrow{font-size:1.3rem;line-height:1;padding-top:10px}

/* ---------- ゴースト英字：見出しに重ならないよう背面へ引く ---------- */
.has-ghost .ghost-word{top:auto;bottom:-3%;right:-1%;color:rgba(var(--green-rgb),.035)}

/* ---------- CTA：注記2行に階層を付ける ---------- */
.contact .tel-note+.tel-note{margin-top:8px;opacity:.62}

/* ---------- フッター：ブランド行の下に余白 ---------- */
.site-footer .footer-brand .brand{display:block;margin-bottom:10px}
.site-footer .footer-brand .brand+p{margin-top:0}

/* ===================================================================
   スケール大胆化：余白・字を一段上げて窮屈さを解く
=================================================================== */
:root{--maxw:1360px;--gutter:clamp(24px,6vw,112px) /* @kind spacing */}
.section{padding-block:clamp(96px,15vh,210px)}
.sechead{margin-bottom:clamp(44px,7vh,86px)}
.sechead-title{font-size:clamp(2rem,5vw,3.6rem);line-height:1.35}
.sechead-lead{font-size:clamp(1.0625rem,1.6vw,1.32rem);max-width:44ch}
.statrow{gap:clamp(16px,2.2vw,32px)}
.statcell{padding:clamp(24px,3vw,40px)}
.statcell .num{font-size:clamp(2.6rem,5vw,4.2rem);white-space:nowrap;justify-content:center}
.statcell .lab{max-width:none}
@media (max-width:1040px){.statrow{grid-template-columns:repeat(2,1fr)}}
.hubcards{gap:clamp(24px,3.2vw,48px)}
.splitrow{gap:clamp(32px,6vw,110px)}
.blog-grid{gap:clamp(24px,3vw,44px)}
.marquee-track span{font-size:clamp(1.4rem,3vw,2.4rem)}
.contact{padding-block:clamp(110px,18vh,240px)}
.contact h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.hero-title{font-size:clamp(1.7rem,7.6vw,6.6rem)}
.hero-sub{font-size:clamp(1.125rem,1.9vw,1.5rem);line-height:1.85}
.hero-position{font-size:clamp(1.0625rem,1.5vw,1.28rem)}
.hero-eyebrow{font-size:1.0625rem}
@media (min-width:1241px){
  .hero .hero-inner{padding-inline:clamp(40px,4vw,84px)}
}

/* ---------- ZERO COST / MESSAGE：左右を広く使う（余白を詰める） ---------- */
.section:has(> .wrap > .splitrow) > .wrap,
.band-zero > .wrap,.band-msg > .wrap{max-width:1480px;padding-inline:clamp(20px,4vw,72px)}
body{overflow-x:clip}
@media (min-width:1241px){
  .section:has(> .wrap > .splitrow) .splitrow{gap:clamp(40px,5vw,96px)}
}

/* ---------- ① 数字カード：ラベルを語中で割らない ---------- */
.statcell .lab{word-break:auto-phrase;line-break:strict;text-wrap:pretty;letter-spacing:.02em;max-width:16em;margin-inline:auto}

/* ---------- ② ゴースト英字：カード列に重ねず、余白側に薄く置く ---------- */
.has-ghost .ghost-word{top:clamp(-24px,-3vw,-8px);bottom:auto;right:auto;left:clamp(20px,5vw,80px);font-size:clamp(5rem,16vw,13rem);color:rgba(var(--green-rgb),.028)}

/* ---------- ③ 記事カード：日付を落として見出しを立てる ---------- */
.blog-body time{font-size:.9375rem;letter-spacing:.06em;opacity:.85}
.blog-body h3{margin-top:8px;font-size:1.1875rem;line-height:1.55}

/* ---------- ④ MESSAGE：本文と写真を上端揃えの2カラムに固定 ---------- */
.splitrow{align-items:start}
.splitrow .media{align-self:start}
@media (max-width:640px){.splitrow .media{order:-1}}

/* ---------- ⑤ CTAボタン：グローを抑える ---------- */
.contact .btn-primary,.hero .btn-primary{box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* ---------- ⑥ フッター：3列を等幅で右端まで使う ---------- */
@media (min-width:641px){
  .site-footer .footer-menus{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
  .site-footer .footer-col{min-width:0}
}

/* ===================================================================
   セクション内のリンクは「版面いっぱいの行」型バナー（.btn-row）
   上下の細罫＋大きな和文＋小さな英字＋右のロングアロー。
   ホバーでオレンジが左から流れ、文字と矢印は前面に残る
=================================================================== */
.btn-row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;
  width:100%;margin-top:clamp(20px,2.4vw,32px);padding:clamp(22px,3vw,36px) clamp(14px,1.8vw,24px);
  border-top:1px solid var(--green);border-bottom:1px solid var(--green);
  color:var(--head);text-decoration:none;overflow:hidden;isolation:isolate
}
.btn-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .62s cubic-bezier(.2,.7,.2,1)}
.btn-row:hover::before,.btn-row:focus-visible::before{transform:scaleX(1)}
.btn-row:hover,.btn-row:focus-visible{color:#fff;border-color:var(--green)}
.btn-row__t{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px;
  font-size:clamp(1.3rem,2.6vw,2.15rem);font-weight:700;line-height:1.4;letter-spacing:.02em;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)
}
.btn-row__k{color:var(--accent);transition:color .35s var(--ease)}
.btn-row:hover .btn-row__k,.btn-row:focus-visible .btn-row__k{color:#fff}
.btn-row__t em{font-family:var(--font-mono);font-style:normal;font-size:1rem;font-weight:700;letter-spacing:.24em;opacity:.55;margin-bottom:.5em}
.btn-row__a{position:relative;display:block;width:clamp(72px,9vw,140px);height:2px;background:currentColor;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-row__a::after{content:"";position:absolute;right:0;top:50%;width:16px;height:16px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn-row:hover .btn-row__t,.btn-row:focus-visible .btn-row__t{transform:translateX(12px)}
.btn-row:hover .btn-row__a,.btn-row:focus-visible .btn-row__a{transform:translateX(10px)}
/* CTA：メールと電話の2本を縦に積む（隔ての罫は重ならせない） */
.cta-rows{display:grid;width:66.66%;margin:clamp(28px,4vh,48px) auto 0;text-align:left}
.cta-rows .btn-row{margin-top:0}
.cta-rows .btn-row+.btn-row{border-top:0}
.btn-row--cta .btn-row__t{font-size:clamp(1.3rem,2.9vw,2.4rem)}
.btn-row--cta .btn-row__t em{opacity:.75}
/* 電話番号は英数字用の書体で大きく。注記は同じ枠の中に収める */
.btn-row--tel .btn-row__k{font-family:var(--font-en);font-size:1.3em;letter-spacing:.03em;line-height:1}
.btn-row__note{flex-basis:100%;width:100%;margin-top:2px;font-size:1rem;font-weight:500;line-height:1.8;letter-spacing:.02em;color:var(--muted)}
.btn-row:hover .btn-row__note,.btn-row:focus-visible .btn-row__note{color:rgba(255,255,255,.92)}
.contact .tel-note:empty{display:none}
@media (max-width:900px){.cta-rows{width:100%}}

.blog-link,.stats-link{display:block !important}
/* 版面全幅の行は間延びするので 2/3 幅にして右寄せ（狭い画面では全幅に戻す） */
.blog-link .btn-row{width:66.66%;margin-left:auto}
@media (max-width:900px){.blog-link .btn-row{width:100%}}
@media (max-width:640px){.btn-row{gap:14px}.btn-row__a{width:56px}}

/* ---------- ヘッダー：透過状態で写真に乗っても読めるようにする ---------- */
.site-header{isolation:isolate}
.site-header:not(.solid)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.55) 62%,rgba(10,10,10,0) 100%)}
.site-header:not(.solid) .nav-tel small{color:var(--accent)}
.site-header:not(.solid) .nav-tel b{color:#fff}

/* ---------- SERVICES：ホバーを「押せる面」として見せる ---------- */
.hubcard{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.hubcard:hover{background:#242424;border-color:var(--green);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.hubcard:hover .hubcard-en{color:var(--accent)}
.hubcard:hover .hubcard-media{filter:brightness(1.06)}
.hubcard-media{transition:filter .4s var(--ease)}
/* 矢印を丸ボタンUIに（44px以上のタップ面） */
.hubcard-cta{display:inline-flex;align-items:center;gap:12px;margin-top:auto;align-self:flex-end}
.hubcard-cta-t{font-size:.85rem;letter-spacing:.02em;color:rgba(255,255,255,.75);transition:color .3s var(--ease)}
.hubcard:hover .hubcard-cta-t{color:#fff}
.hubcard-arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1.5px solid rgba(255,255,255,.26);border-radius:50%;font-size:1.15rem;color:#fff;background:transparent;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .4s var(--ease)}
.hubcard:hover .hubcard-arrow{background:var(--green);border-color:var(--green);color:#fff;transform:translateX(6px)}
.hubcard:focus-visible .hubcard-arrow{background:var(--green);border-color:var(--green)}

/* ---------- フッター：ホバーで列幅が変わり右2列がずれるのを止める ---------- */
.site-footer .footer-col a{transition:color .3s var(--ease),transform .3s var(--ease)}
.site-footer .footer-col a:hover{padding-left:0;transform:translateX(8px)}

/* ---------- テキストブランド（ロゴ画像の代替） ---------- */
.brand{display:inline-flex;align-items:baseline;gap:.55em;line-height:1}
.brand .brand-pre{font-family:var(--font-jp);font-size:1rem;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.72)}
.brand .brand-name{font-family:var(--font-en);font-size:clamp(1.35rem,2.3vw,1.9rem);letter-spacing:.05em;color:#fff}
.site-header.solid .brand .brand-pre{color:var(--muted)}
.site-header.solid .brand .brand-name{color:var(--head)}
.nav{gap:clamp(14px,1.5vw,26px)}
@media (max-width:1240px){.nav .brand{display:none}}

/* ---------- FV：未支給写真でも成立させる調整 ---------- */
/* 参考IDでは640px以下でポジション文を隠すが、本案件は本文として残す */
@media (max-width:640px){.hero-position{display:block}}
/* キャッチコピーが1行ずつ nowrap のため、パネル幅は本文ではなく見出しの
   実寸に合わせる（本文幅に引っ張られて「見えない一回を、」が切れるのを防ぐ） */
.hero-text{width:max-content;max-width:100%}
.hero-title{font-size:clamp(1.5rem,6.4vw,5.2rem)}
.hero-title .line2 .line{color:var(--accent)}
.hero-title .kuten{color:#fff}
.hero-sub{max-width:min(44ch,100%)}
/* 本文の折り返し幅（44ch）がパネル幅を決めてしまい、実際の改行位置より
   右側に余白が残る。文節（.nb）を行として扱い、パネル幅を見出しの実寸に合わせる */
@media (min-width:641px){
  .hero-sub,.hero-position{max-width:none}
  .hero-sub .nb,.hero-position .nb{display:block}
}
/* アイブロウ左の罫線が参考IDでは #1e1e1e で、黒パネル上では見えず
   半端な余白に見えるため、他セクションと同じオレンジで見せる */
.hero-eyebrow::before{background:var(--green);width:40px}
.contact .eyebrow::before{background:var(--green);width:40px}
/* 参考IDはヘッダー逃げのため黒パネル内側に 104〜160px の上余白を入れており、
   結果としてコピーがパネル下寄りになる。パネルの上下余白を均し、
   ヘッダーとの間隔はパネル自体の位置（下寄せ＋下マージン）で確保する */
@media (min-width:641px){
  .hero .hero-inner{padding-top:clamp(36px,3.4vw,56px) !important;padding-inline:clamp(28px,2.6vw,48px)}
}
@media (min-width:1241px){
  /* パネルは写真より前面（文字のさらに背面）に置き、最下段の写真帯にめり込ませる */
  .hero .hero-panel{z-index:5}
  .hero .hero-inner{padding-top:clamp(40px,3.4vw,60px) !important;padding-inline:clamp(44px,3.8vw,84px);max-width:calc(50vw - 10px);margin-bottom:6vh}
}
/* 中間幅・スマホ：コラージュを上段の帯にし、コピーのパネルはその下へ逃がす */
@media (min-width:861px) and (max-width:1240px){
  .hero .hero-inner{padding-top:calc(min(52vh,440px) + 24px) !important}
}
@media (max-width:860px){
  .hero .hero-inner{padding-top:calc(min(46vh,400px) + 20px) !important}
}
/* 参考IDの add.css が 1241px 以上で .hero-text を 58% に固定しており、
   nowrap の見出しがマスクで切れるため打ち消す */
@media (min-width:1241px){.hero-text{max-width:none !important;width:max-content}}
@media (max-width:640px){.hero-text{width:auto}}

/* ---------- NEWS帯（参考IDの新着情報帯の見え方に合わせる） ---------- */
.newsband{background:var(--bg-light);border-block:1px solid var(--line)}
.newsband .wrap{padding-block:0}
.newsband-inner{display:flex;flex-direction:column;border-inline:0}
.newsband-label{display:flex;align-items:center;justify-content:center;padding:10px 0;background:var(--green);color:#fff;font-family:var(--font-mono);font-size:1rem;font-weight:700;letter-spacing:.2em}
.newsband-item{display:flex;flex-direction:column;gap:4px 22px;min-height:60px;justify-content:center;padding:12px 0;color:var(--head)}
.newsband-item time{font-family:var(--font-mono);font-size:1rem;letter-spacing:.08em;color:var(--green)}
.newsband-cat{font-size:1rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:2px 12px;border-radius:100px;align-self:flex-start}
.newsband-title{font-size:1.0625rem;line-height:1.7}
.newsband-item:hover .newsband-title{text-decoration:underline}
.newsband-all{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:1rem;letter-spacing:.12em;color:var(--green)}
@media (min-width:992px){
  .newsband-inner{flex-direction:row;align-items:center;gap:30px}
  .newsband-label{flex:0 0 auto;padding:10px 30px;align-self:stretch}
  .newsband-item{flex:1 1 auto;flex-direction:row;align-items:center}
  .newsband-all{flex:0 0 auto}
}

/* ---------- サービスカード内の補足文（既存本文） ---------- */
.hubcard-note{font-size:1rem;line-height:1.85;color:var(--head);background:var(--bg-light);border-left:3px solid var(--accent);padding:10px 14px;border-radius:4px}

/* ---------- 代表メッセージの署名まわり ---------- */
.msg-sign{margin-top:22px;color:var(--head);font-weight:700}
.msg-qual{font-size:1rem;color:var(--muted)}

/* ---------- CTA下の注記 ---------- */
.contact .tel-note+.tel-note{margin-top:2px}

/* ===================================================================
   ライムの役割を整理（見出しの要語＝ライム／リンク文字は白／電話番号のみライム）
=================================================================== */
.sechead-title .lime,.hero-title .lime{color:var(--accent)}
.btn-row__k{color:inherit}
.btn-row--tel .btn-row__k{color:var(--accent)}
.btn-row:hover .btn-row--tel .btn-row__k{color:#fff}
/* 色替えの語と続く語の間にアキが出ないように（英字ラベルの前だけ間隔を残す） */
.btn-row__t{gap:0}
.btn-row__t em{margin-left:18px}
/* 矢印は行の中央に置く */
.btn-row{align-items:center}
.btn-row__a{margin-top:0}
/* 角丸をやめて直角に統一 */
:root{--radius:0}
.hubcard,.blog-card,.blog-thumb,.statcell,.splitrow .media,.hubcard-media,.site-ph,.card,.machine-card,.scene-card{border-radius:0}

/* ===================================================================
   ZERO COST / MESSAGE の配置を差別化（3カード並列・左右2分割の反復を避ける）
=================================================================== */
/* ZERO COST：写真を画面左端まで抜き、本文は右に寄せて下端で揃える */
.band-zero .splitrow{grid-template-columns:minmax(0,54%) minmax(0,1fr);align-items:start;gap:clamp(28px,4.5vw,84px)}
.band-zero .splitrow .media{margin-left:calc(-1 * (clamp(20px,4vw,72px) + (100vw - min(100vw,1480px)) / 2));margin-top:0;align-self:stretch}
.band-zero .splitrow .media.site-ph{aspect-ratio:auto;height:100%}
.band-zero .sechead-title{font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.25}
.band-zero{overflow:visible}
.band-zero .splitrow>div:last-child{padding-bottom:0}

/* MESSAGE：縦長写真を画面右端まで抜き、上の余白へ食い込ませる。本文は読み幅を絞る */
.band-msg{overflow:visible}
.band-msg .splitrow{grid-template-columns:minmax(0,1fr) minmax(0,54%);align-items:start;gap:clamp(28px,4.5vw,84px)}
.band-msg .splitrow .media{margin-right:calc(-1 * (clamp(20px,4vw,72px) + (100vw - min(100vw,1480px)) / 2));margin-top:0;align-self:stretch}
.band-msg .splitrow .media.site-ph{aspect-ratio:auto;height:100%}
.band-msg .sechead-title{font-size:clamp(2.4rem,6.4vw,5rem);line-height:1.2}
.band-msg .msg-sign{margin-top:clamp(24px,3vw,40px)}
@media (max-width:900px){
  .band-zero .splitrow,.band-msg .splitrow{grid-template-columns:1fr}
  .band-zero .splitrow .media{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));margin-bottom:0}
  .band-msg .splitrow .media{margin-right:calc(-1 * var(--gutter));margin-left:calc(-1 * var(--gutter));margin-top:0}
}

/* 食い込んだ写真は前セクションより前面に出す（上のセクションの背後に潜らせない） */
.band-zero .splitrow .media,.band-msg .splitrow .media{position:relative;z-index:2}

/* テキストカラム：バナーの下に少し余白を持たせる */
.band-zero .splitrow>div:last-child,.band-msg .splitrow>div:first-child{padding-bottom:10px}

/* FVの写真タイル：実写を背景として敷く（div運用のため cover 指定） */
.hero-collage .hp{background-size:cover;background-position:center;background-repeat:no-repeat}
/* パネル右辺と写真の縦目地が二重線に見えるのを避け、中央の写真を1マス右へ */
@media (min-width:1241px){
  .hero-collage .hp6{grid-area:6/7/13/11}
}

/* ---------- 数字カード：アイコンを添える ---------- */
.statcell .ico{display:grid;place-items:center;width:clamp(52px,4.6vw,68px);height:clamp(52px,4.6vw,68px);margin:0 auto clamp(10px,1.2vw,16px);color:var(--accent)}
.statcell .ico svg{width:100%;height:100%;display:block;stroke-width:1.3}

/* ---------- フッター：列見出しの下マージンを揃える ---------- */
.site-footer .footer-col h4{margin-bottom:18px;line-height:1.4}
.site-footer .footer-col a{padding-block:10px}

/* ---------- CONTACT：背景写真（fixed）。既存 .contact-media を実写に差し替え ---------- */
.contact-media{background-color:transparent!important;background-image:url(https://cdn.cuezilla-cms.com/enjoyworks-test2.site/images/1534/hold-72.webp)!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
.contact-media::after{background:linear-gradient(135deg,rgba(10,10,10,.76) 0%,rgba(10,10,10,.86) 100%)!important}
@media (max-width:640px){.contact-media{background-attachment:scroll!important}
  /* スマホの本文は左揃え（見出し・ボタンは中央のまま） */
  .contact .wrap>p{text-align:left}
}

/* ---------- ブログ：写真が無い記事の代替サムネイル（OGP画像） ---------- */
.blog-thumb.is-ogp{background-color:#1a1a1a!important;background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===================================================================
   FV：1240px 以下は「上に写真帯／下にコピーの面」の素直な縦積みに組み替える
   （絶対配置のコラージュ＋padding-top で逃がす方式は、帯と面が重なって崩れる）
   =================================================================== */
@media (max-width:1240px){
  .hero{display:block;min-height:0;align-items:stretch}
  .hero-collage{position:static !important;width:100% !important;top:auto !important;right:auto !important;left:auto !important;
    display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:3px;
    height:min(42vh,360px) !important;opacity:1 !important;transform:none !important}
  .hero-collage .hp{grid-area:auto !important;border:0 !important;margin:0 !important;width:auto;height:auto}
  .hero-collage .hp4,.hero-collage .hp5,.hero-collage .hp6{display:none !important}
  .hero .hero-inner{padding-top:clamp(30px,4.4vh,52px) !important;padding-bottom:clamp(34px,5vh,58px) !important}
  .hero-grid,.hero-bgword{display:none}
  .hero-scrim{display:none}
  .hero-text{width:auto;max-width:none}
  /* 面は全幅に。左だけ暗く残って切れて見えるのを防ぐ */
  .hero .hero-inner{width:100% !important;max-width:none !important;margin-inline:0 !important}
  .hero .hero-text{max-width:40em}
}
@media (max-width:640px){
  .hero-collage{grid-template-columns:repeat(2,1fr);height:min(34vh,300px) !important}
  .hero-collage .hp3{display:none !important}
  .hero .hero-inner{padding-inline:20px !important}
}

@media (max-width:1240px){
  .site-header .nav{gap:clamp(10px,1.8vh,22px);padding-block:clamp(16px,2.4vh,28px);justify-content:center}
  .site-header .nav>a{font-size:1.125rem !important;padding-block:6px}
  .site-header .nav-item>a{font-size:1.125rem !important}
  .site-header .nav-sub{margin-top:8px;gap:2px}
  .site-header .nav-sub a{font-size:1rem;padding-block:5px;opacity:.78}
  .site-header .nav-cta{padding:12px 26px}
  .site-header .nav-tel{display:none}
}
/* 縦の短い端末・タブレット横：さらに詰める */
@media (max-width:1240px) and (max-height:760px){
  .site-header .nav{gap:8px;padding-block:12px}
  .site-header .nav>a,.site-header .nav-item>a{font-size:1.0625rem !important;padding-block:4px}
  .site-header .nav-sub{margin-top:6px}
  .site-header .nav-sub a{font-size:.9375rem;padding-block:3px}
}


/* ---------- 数字で見るNKSTYLE：スマホで数字(nowrap)が1frを押し広げ右へはみ出すため、トラックを固定して詰める ---------- */
@media (max-width:640px){
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statcell{padding:clamp(18px,4.4vw,24px) clamp(12px,3.4vw,18px)}
  .statcell .num{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .statcell .lab{font-size:.9375rem}
}

/* ---------- 縦積み（タブレット縦・スマホ）：セクション間の余白を詰める ---------- */
@media (max-width:900px){
  .section{padding-block:clamp(56px,7.5vh,92px)}
  .contact{padding-block:clamp(72px,9.5vh,120px) !important}
  .statement .wrap{padding-block:clamp(56px,7.5vh,92px)}
  .site-footer{padding-block:clamp(44px,6vh,64px) 28px}
  .sechead{margin-bottom:clamp(26px,4.2vh,44px)}
}
@media (max-width:640px){
  .section{padding-block:clamp(48px,6.5vh,68px)}
  .contact{padding-block:clamp(60px,8vh,88px) !important}
  .statement .wrap{padding-block:clamp(48px,6.5vh,68px)}
  .site-footer{padding-block:clamp(38px,5vh,52px) 24px}
  .sechead{margin-bottom:clamp(22px,3.6vh,32px)}
}

/* ---------- MESSAGE：写真を左に寄せ、左端の縦書きレールが本文にめり込むのを避ける ---------- */
.band-msg .splitrow{grid-template-columns:minmax(0,54%) minmax(0,1fr)}
.band-msg .splitrow .media{order:-1;margin-left:calc(-1 * (clamp(20px,4vw,72px) + (100vw - min(100vw,1480px)) / 2));margin-right:0}
.band-msg .splitrow>div:first-child{padding-bottom:0}
.band-msg .splitrow>div:last-child{padding-bottom:10px}
@media (max-width:900px){
  /* 縦積み：1カラムに戻し、写真は高さ100%（=0になって消える）をやめて比率で置く */
  .band-msg .splitrow,.band-zero .splitrow{grid-template-columns:1fr !important}
  /* 全幅抜きは .wrap の実パディング（4vw）に合わせる。--gutter だと 18px 行き過ぎて横スクロールが出る */
  .band-msg .splitrow .media,.band-zero .splitrow .media{margin-left:calc(-1 * clamp(20px,4vw,72px));margin-right:calc(-1 * clamp(20px,4vw,72px));order:-1}
  .band-msg .splitrow .media.site-ph,.band-zero .splitrow .media.site-ph{aspect-ratio:16/9 !important;height:auto}
}

/* ---------- FV（1240px以下）：面の下の余分な余白と、横向きタブレットでの見切れを解消 ---------- */
@media (max-width:1240px){
  .hero .hero-inner{margin-bottom:0 !important}
  .hero-eyebrow .nb-sp{display:inline}
}
@media (max-width:1240px) and (max-height:820px){
  .hero-collage{height:min(30vh,240px) !important}
  .hero .hero-inner{padding-top:clamp(22px,3vh,34px) !important;padding-bottom:clamp(26px,3.6vh,42px) !important}
  .hero-sub{margin-top:14px}
}
@media (max-width:640px){
  /* ボタンがFVの下端に貼り付くのを避ける */
  .hero .hero-inner{padding-bottom:clamp(44px,7vh,66px) !important}
  .hero-eyebrow .nb-sp{display:none}
}

/* ---------- CTA（縦積み機種）：電話番号を主役に、注記は控えめに ---------- */
@media (max-width:900px){
  .contact .btn-row--tel .btn-row__k{font-size:1.62em;letter-spacing:.02em}
  .contact .btn-row__note{margin-top:6px;font-size:.8125rem;line-height:1.7;opacity:.72}
}
@media (max-width:640px){
  .contact .btn-row--tel .btn-row__k{font-size:1.78em}
  .contact .btn-row__note{font-size:.75rem;line-height:1.65;opacity:.7}
}

/* ===================================================================
   ハンバーガー：ボタンの視認性と、開いたメニューの見え方をブランドに合わせる
   =================================================================== */
@media (max-width:1240px){
  /* 写真の上でも必ず見えるボタン */
  .site-header .nav-toggle{display:flex;width:44px;height:44px;gap:5px;background:rgba(12,12,12,.55);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)}
  .site-header .nav-toggle i{width:22px;height:2px;background:#fff !important}
  .site-header.solid .nav-toggle{background:rgba(12,12,12,.06);border-color:rgba(0,0,0,.2);backdrop-filter:none}
  .site-header.solid .nav-toggle i{background:var(--text) !important}
  body.nav-open .site-header .nav-toggle{background:transparent;border-color:rgba(255,255,255,.4)}
  body.nav-open .site-header .nav-toggle i{background:#fff !important}

  /* 開いた面：オレンジのグラデーションをやめ、サイトのダーク＋ライムに揃える */
  .site-header .nav{background:#101010 !important;background-image:none !important;gap:clamp(10px,1.8vh,20px)}
  .site-header .nav::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--green)}
  .site-header .nav>a,.site-header .nav-item>a{color:#fff !important;font-weight:700;letter-spacing:.04em}
  .site-header .nav-item>a{position:relative;padding-bottom:8px}

  /* サブメニュー：PC用のドロップダウン面（黒箱・枠・影）を完全に解除して並びだけ残す */
  .site-header .nav-sub{position:static !important;display:flex;flex-direction:column;align-items:center;
    background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-width:0 !important;
    transform:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;margin-top:6px;gap:0}
  .site-header .nav-sub a{color:rgba(255,255,255,.72) !important;font-weight:500;padding-block:6px}
  .site-header .nav-sub a:hover{color:var(--green) !important}
  .site-header .nav-cta{border-color:var(--green) !important;color:var(--green) !important;background:transparent}
}

/* ×の交点がずれないよう、バー間隔（gap 5px + 太さ 2px）と同じ量だけ寄せる */
@media (max-width:1240px){
  body.nav-open .site-header .nav-toggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .site-header .nav-toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- 大バナー：英字ラベルの位置を確定させる ---------- */
/* ・折り返した時は左端に揃える（margin-left ではなく column-gap で間隔を取る）
   ・1行の時は和文と同じベースラインに乗せる（宙に浮いた位置をやめる） */
.btn-row__t{align-items:baseline;gap:6px 18px}
.btn-row__t em{margin-left:0;margin-bottom:0;line-height:1}
.btn-row__note{margin-top:6px}

/* ---------- 横スクロール領域のスクロールバーをオレンジに（TOP側） ---------- */
.scenes-pin,.tablewrap{scrollbar-color:var(--accent-2,var(--accent)) rgba(255,255,255,.08);scrollbar-width:thin}
.scenes-pin::-webkit-scrollbar,.tablewrap::-webkit-scrollbar{height:8px}
.scenes-pin::-webkit-scrollbar-track,.tablewrap::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.scenes-pin::-webkit-scrollbar-thumb,.tablewrap::-webkit-scrollbar-thumb{background:var(--accent-2,var(--accent));border-radius:0}

/* ---------- FV（1240px以下）：3枚（スマホは2枚）を並べ、各枠が別々のタイミングで入れ替わる ---------- */
@media (max-width:1240px){
  .hero-collage{display:grid !important;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:10px;overflow:hidden;background:#0d0d0d}
  .hero-collage .hp{position:static !important;inset:auto !important;display:block !important;width:auto;height:auto;grid-row:1 !important;transform:none !important}
  .hero-collage .hp1{grid-column:1 !important}
  .hero-collage .hp2{grid-column:2 !important}
  .hero-collage .hp3{grid-column:3 !important}
  /* 重ねる側：同じセルに置いて交互にフェード */
  .hero-collage .hp4{grid-column:1 !important;animation:nkTileFade 9s ease-in-out -1s infinite both}
  .hero-collage .hp5{grid-column:2 !important;animation:nkTileFade 11s ease-in-out -6s infinite both}
  .hero-collage .hp6{grid-column:3 !important;animation:nkTileFade 13s ease-in-out -3.5s infinite both}
}
@keyframes nkTileFade{
  0%,38%{opacity:0}
  46%,88%{opacity:1}
  96%,100%{opacity:0}
}
@media (max-width:640px){
  .hero-collage{grid-template-columns:repeat(2,1fr)}
  .hero-collage .hp3,.hero-collage .hp6{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .hero-collage .hp4,.hero-collage .hp5,.hero-collage .hp6{animation:none !important;opacity:0 !important}
}

/* ---------- FV（タブレット縦・スマホ）：メインコピーを大きく、サブを控えめに。FV内に収める ---------- */
@media (max-width:900px){
  .hero-title{font-size:clamp(2rem,5.8vw,3rem) !important;line-height:1.28}
  .hero-sub{font-size:1rem !important;line-height:1.8}
  .hero-position{font-size:.9375rem !important;line-height:1.8}
  .hero-eyebrow{font-size:.8125rem !important;letter-spacing:.1em}
}
@media (max-width:640px){
  .hero-collage{height:min(28vh,240px) !important}
  .hero-title{font-size:clamp(1.8rem,9vw,2.3rem) !important;line-height:1.3}
  .hero-sub{font-size:.9375rem !important;margin-top:14px}
  .hero-position{font-size:.875rem !important;margin-top:12px}
  .hero-eyebrow{font-size:.75rem !important;letter-spacing:.08em}
  .hero .hero-inner{padding-top:clamp(22px,3.2vh,32px) !important;padding-bottom:clamp(28px,4.4vh,42px) !important}
  .hero-actions{margin-top:clamp(18px,3vh,26px) !important;gap:10px}
  .hero-actions .btn{min-height:52px;padding-block:14px}
}

/* ---------- FV（1240px以下）：装飾グローが版面外に出て横スクロールを生むため内側で切る ---------- */
@media (max-width:1240px){
  .hero{overflow:hidden}
}

/* 端数で1〜2px溢れても横スクロールにしない */
@media (max-width:900px){
  .band-msg,.band-zero{overflow-x:clip}
}

/* ---------- FV：901〜1240px 帯の文字サイズを 900px 側と連続させる（境目での急な変化を防ぐ） ---------- */
@media (min-width:901px) and (max-width:1240px){
  .hero-eyebrow{font-size:clamp(.8125rem,1.15vw,.9375rem) !important;letter-spacing:.1em}
  .hero-sub{font-size:clamp(1rem,1.55vw,1.28rem) !important}
  .hero-position{font-size:clamp(.9375rem,1.4vw,1.15rem) !important}
}

/* ================= style.css（受領データそのまま・読み込み順を保持） ================= */
@charset "utf-8";
/* Noto Sans JP / Oswald の @font-face 実体。フォントファイル支給後はセルフホストのURLへ差し替える */

/* ===================================================================
   株式会社NKSTYLE（S01324）トップ草案 — 共通スタイル1ファイル集中管理
   ・草案段階はトンマナを :root のCSS変数で持つ（design_rules.md「HTML版草案生成時の追加ルール」）
     ★CueZilla納品コード化の段階で AI生成指示書_CueZilla.md に従い具体値へベイクする
   ・クラス接頭辞は site-/sh-/sf-/xw-（R-20：Bootstrap汎用名を自作要素に流用しない）
   ・配色はディレクター指定（8_一次生成インプット.md）＋③HTML版草案.html の実値
   =================================================================== */

/* KEEP: 配色は 8_一次生成インプット.md（ディレクター指定）と ③HTML版草案.html の実値。勝手に変えない */
:root{
  /* 地（黒の4段）── 面の緩急は明色面を作らず黒の段と写真で作る（契約.md 論点 dark-surface-count） */
  --c-bg:        #1A1A1A;
  --c-bg-deep:   #0F0F0F;
  --c-bg-2:      #141414;
  --c-panel:     #161616;
  --c-line:      #2E2E2E;
  /* 主：ラプターオレンジ（文字・罫線は E8541F ／ 白文字を載せるボタン地は C2410C＝AA確保） */
  --c-orange:    #E8541F;
  --c-orange-btn:#C2410C;
  --c-orange-hot:#FF5C00;
  /* 副：ライム（数字・強調） ／ 緑（現金負担0円まわりの可否表示） */
  --c-lime:      #C8F02A;
  --c-green:     #34C77B;
  /* 文字 */
  --c-text:      #E6E6E6;
  --c-muted:     #A8A8A8;
  --c-white:     #FFFFFF;

  /* タイポ（契約.md 確定値: body 17 / jump 3.2 / jump-top 5.5 / font-size-kinds 12） */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Oswald", "Arial Narrow", sans-serif;
  --fs-caption: 13px;   /* キャプション・注記・法的最小表記のみ */
  --fs-small:   16px;   /* ナビ・小カード本文（本文の下限） */
  --fs-body:    17px;
  --fs-lead:    19px;
  --fs-h3:      22px;
  --fs-h3-lg:   28px;
  --fs-h2:      clamp(1.75rem, 3.6vw, 3.2rem);   /* @kind font */ /* 28 → 54px（54/17 ≒ 3.2） */
  --fs-h1:      clamp(2.3rem, 7.3vw, 5.5rem);    /* @kind font */ /* 37 → 93px（契約 jump-top 5.5＝93/17。1280px幅で 93px に届く係数） */
  --fs-num:     clamp(2.6rem, 5.4vw, 3.9rem);    /* @kind font */ /* 数字 */

  /* 余白（design_rules.md「セクション間の余白は背景色で機械的に決める」）
     守るのは P_large > P_medium > P_small の大小関係 */
  --row-pad: clamp(72px, 9vw, 120px);   /* P_large：Row の上下端＝背景の切り替わり */
  --sec-gap: clamp(48px, 6vw, 72px);    /* P_medium：同一 Row 内のセクション間 */
  --el-gap:  24px;                      /* P_small：セクション内の要素間 */
  --gutter:  clamp(20px, 5vw, 56px);   /* @kind spacing */
  --maxw:    1200px;                    /* 機構契約 wrap:1200 */

  /* 形・動き（契約.md 確定値: roundness 0.6 / motionScale 1.1） */
  --radius:  4px;
  --radius-pill: 999px;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur:     1s;   /* @kind other */
}
/* /KEEP */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:clamp(76px,10vw,104px); }
body{
  font-family:var(--font-jp);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:2.05;
  letter-spacing:.012em;
  color:var(--c-text);
  background:var(--c-bg);
  /* ★body の overflow-x:hidden は横スクロールを止めない（教訓 body-overflow-clip-does-not-propagate）。
     はみ出しは各セクション側（.site-ghost / .site-subhero / .site-fv の overflow:hidden）で閉じる */
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--c-orange); color:var(--c-white); }
:where(a,button,[tabindex]):focus-visible{ outline:3px solid var(--c-lime); outline-offset:3px; }
/* 和文の折り返し：文節で折り、行末に1〜2文字だけ残さない（スコアカード#14／教訓 jp-text-linebreak-control） */
p, li, dd, td, h1, h2, h3, .site-lead, .site-fv-sub, .site-stat-label, .site-svc-note{
  word-break:auto-phrase;   /* 文節で折る（対応ブラウザ） */
  text-wrap:pretty;         /* 行末の孤立を避ける */
}
/* ★この2つだけ auto-phrase を外す：行長の不揃い（responsive-audit の ragged）が出るため */
.site-fv-sub, .site-svc-note{
  word-break:normal;
}
/* 折り返し位置の制御：意味の切れ目でだけ折る（文字は足さない・削らない） */
.xw-nb{ display:inline-block; white-space:nowrap; }
@media (max-width:400px){ .site-fv-sub .xw-nb{ white-space:normal; } }
.sh-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Row / Section（余白の正本）── 1 Row = 1 section 構成のため Row の器は section 自身が持つ ── */
.site-row{ padding-block:var(--row-pad); }
.site-row > * + *{ margin-top:var(--sec-gap); }
.site-row--deep{ background:var(--c-bg-deep); }
.site-row--tint{ background:var(--c-bg-2); }
.xw-wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ── 見出しシステム ─────────────────────────────────────── */
.site-eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-en); font-size:var(--fs-caption); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c-orange);
}
.site-eyebrow::before{ content:""; width:32px; height:2px; background:var(--c-orange); }
.site-eyebrow--jp{ font-family:var(--font-jp); letter-spacing:.18em; }
.site-h2{ margin-top:14px; font-size:var(--fs-h2); font-weight:700; line-height:1.35; letter-spacing:.01em; color:var(--c-white); }
.site-lead{ margin-top:var(--el-gap); font-size:var(--fs-lead); line-height:2.05; color:var(--c-text); max-width:44em; }
.site-note{ font-size:var(--fs-caption); line-height:1.8; color:var(--c-muted); }

/* 背面の巨大英字（参考署名①：版面の外へはみ出させ、黒地の余白を語らせる） */
.site-ghost{ position:relative; overflow:hidden; }
.site-ghost > .xw-wrap{ position:relative; z-index:1; }
.site-ghost-word{
  position:absolute; z-index:0; top:-.14em; right:-2%;
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(6rem, 21vw, 17rem); line-height:.8; letter-spacing:.02em;
  color:rgba(232,84,31,.07);
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* ── ボタン ───────────────────────────────────────────── */
.site-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:15px 32px;
  font-size:var(--fs-body); font-weight:700; letter-spacing:.04em;
  border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.site-btn::after{ content:"→"; font-family:var(--font-en); }
.site-btn--primary{ background:var(--c-orange-btn); color:var(--c-white); }
.site-btn--primary:hover{ background:var(--c-orange); transform:translateY(-3px); }
.site-btn--ghost{ background:transparent; color:var(--c-text); border-color:var(--c-text); }
.site-btn--ghost:hover{ background:var(--c-text); color:var(--c-bg-deep); transform:translateY(-3px); }
.site-textlink{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:var(--fs-small); font-weight:700; color:var(--c-orange); }
.site-textlink::after{ content:"→"; font-family:var(--font-en); transition:transform .4s var(--ease); }
.site-textlink:hover::after{ transform:translateX(5px); }

/* ── 画像プレースホルダ（撮影・支給待ち。data-ph は申し送りの正本として属性に保持し、表示はしない）
   CueZilla組み込み時に点線が本番へ残るため、破線ガイド・ハッチ・注釈は最初から出さない ── */
.site-ph{
  position:relative; display:block;
  background:#c9cec9;
  border:0; border-radius:var(--radius);
  padding:0; font-size:0; line-height:0;
}
.site-ph::before, .site-ph::after{ content:none; display:none; }
.site-ph--21x9{ aspect-ratio:21/9; }
.site-ph--16x9{ aspect-ratio:16/9; }
.site-ph--4x3{  aspect-ratio:4/3; }
.site-ph--3x2{  aspect-ratio:3/2; }
/* スマホでは帯を浅くする（縦に積んだとき、写真枠がRowの境目より大きな「間」に見えるのを防ぐ） */
@media (max-width:640px){
  .site-ph--16x9{ aspect-ratio:21/9; }
  .site-ph--4x3{  aspect-ratio:16/9; }
}
.site-ph--3x4{  aspect-ratio:3/4; }

/* ===================================================================
   Header（パターンC：主要5項目＋メガメニュー／全ページ共通・上端固定）
   =================================================================== */
.sh-header{
  position:fixed; inset:0 0 auto 0; z-index:800;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,32px);
  padding:14px var(--gutter);
  background:rgba(15,15,15,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line);
  /* 全ページ共通でスクロール中も上端に留まる。スクロール後は地色を締め、帯を浅くする */
  transition:padding-block .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  will-change:padding-block, background;
}
.sh-header.is-stuck{ padding-block:8px; background:rgba(15,15,15,.96); box-shadow:0 10px 30px rgba(0,0,0,.45); }
@media (prefers-reduced-motion:reduce){ .sh-header{ transition:none; } }
.sh-brand{ display:inline-flex; flex-direction:column; line-height:1.2; }
.sh-brand-pre{ font-size:var(--fs-caption); letter-spacing:.2em; color:var(--c-muted); }
.sh-brand-name{ white-space:nowrap; font-family:var(--font-en); font-size:var(--fs-h3); font-weight:700; letter-spacing:.1em; color:var(--c-white); }

.sh-nav{ display:flex; align-items:center; gap:clamp(14px,1.5vw,26px); }
.sh-nav a{ position:relative; font-size:var(--fs-small); padding-block:6px; white-space:nowrap; }
.sh-nav a:hover{ color:var(--c-orange); }
.sh-nav-item{ position:relative; display:inline-flex; align-items:center; }
/* ★トリガーとパネルの間にヘッダーの余白があり、カーソルが抜けて閉じてしまうのを防ぐ透明のブリッジ */
.sh-nav-item > a, .sh-nav-item > .sh-more{ position:relative; }
.sh-nav-item > a::before, .sh-nav-item > .sh-more::before{ content:""; position:absolute; left:-14px; right:-14px; top:100%; height:34px; }
.sh-caret{ display:inline-block; width:6px; height:6px; margin-left:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7; }
/* MENU（残りの項目をまとめる受け皿） */
.sh-more{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--c-line); border-radius:var(--radius-pill); font-family:var(--font-en); font-size:var(--fs-small); letter-spacing:.14em; color:var(--c-text); cursor:pointer; white-space:nowrap; transition:border-color .3s var(--ease), color .3s var(--ease); }
.sh-nav-item--more:hover .sh-more, .sh-nav-item--more:focus-within .sh-more{ border-color:var(--c-orange); color:var(--c-orange); }
.sh-plus{ position:relative; width:9px; height:9px; }
.sh-plus::before, .sh-plus::after{ content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor; transform:translateY(-50%); }
.sh-plus::after{ transform:translateY(-50%) rotate(90deg); transition:transform .3s var(--ease); }
.sh-nav-item--more:hover .sh-plus::after, .sh-nav-item--more:focus-within .sh-plus::after{ transform:translateY(-50%) rotate(0deg); }
.sh-sub{
  position:absolute; top:100%; right:0; transform:translateY(10px);
  min-width:210px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.sh-nav-item:hover .sh-sub, .sh-nav-item:focus-within .sh-sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.sh-sub a{ display:block; padding:10px 14px; font-size:var(--fs-small); border-radius:var(--radius); white-space:nowrap; }
.sh-sub a:hover{ background:var(--c-panel); color:var(--c-orange); }

/* メガメニュー（業務案内）＝ヘッダー全幅の面。位置の基準はヘッダー自身 */
.sh-nav-item--mega{ position:static; }
.sh-mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--c-bg); border-top:1px solid var(--c-orange); border-bottom:1px solid var(--c-line);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.sh-nav-item--mega:hover .sh-mega, .sh-nav-item--mega:focus-within .sh-mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.sh-mega-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(24px,3vw,36px) var(--gutter);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px);
}
.sh-mega-col h2{ font-family:var(--font-en); font-size:var(--fs-caption); font-weight:600; letter-spacing:.18em; color:var(--c-orange); }
.sh-mega-col a{ display:block; padding:11px 0; font-size:var(--fs-small); border-bottom:1px solid var(--c-line); }
.sh-mega-card{ background:var(--c-bg-deep); border:1px solid var(--c-line); border-radius:var(--radius); padding:clamp(18px,2vw,24px); }
.sh-mega-card p{ margin-top:10px; font-size:var(--fs-caption); line-height:1.95; color:var(--c-muted); }
.sh-mega-card .site-textlink{ margin-top:8px; }

.sh-contact{ display:flex; align-items:center; gap:16px; }
.sh-tel-label{ display:block; font-size:var(--fs-caption); letter-spacing:.1em; color:var(--c-orange); font-weight:700; white-space:nowrap; }
.sh-tel-num{ font-family:var(--font-en); font-size:var(--fs-h3); font-weight:600; letter-spacing:.04em; color:var(--c-white); white-space:nowrap; }
.sh-toggle{ display:none; flex-direction:column; gap:6px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.sh-toggle i{ display:block; width:26px; height:2px; background:var(--c-white); transition:transform .4s var(--ease), opacity .3s; }

/* ★項目を5つに絞ったため、横1行で収まる下限は1160px（旧1560px）まで下げられる */
@media (max-width:1160px){
  .sh-nav{
    position:fixed; inset:0; width:100vw; height:100dvh;
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:clamp(10px,2vh,18px);
    background:var(--c-bg-deep); overflow-y:auto; padding:96px var(--gutter) 48px;
    transform:translateY(-100%); visibility:hidden; pointer-events:none;
    transition:transform .6s var(--ease), visibility .6s var(--ease);
  }
  .sh-nav.is-open{ transform:translateY(0); visibility:visible; pointer-events:auto; }
  .sh-nav > a{ font-size:var(--fs-lead); font-weight:700; color:var(--c-white); padding:12px 0; border-bottom:1px solid var(--c-line); }
  .sh-nav-item{ flex-direction:column; align-items:stretch; }
  .sh-nav-item > a{ font-size:var(--fs-lead); font-weight:700; color:var(--c-white); padding:12px 0; border-bottom:1px solid var(--c-line); }
  .sh-caret{ display:none; }
  /* メガメニュー・MENUはスマホでは常時展開のリスト（ホバー前提をやめる） */
  .sh-nav-item > a::before, .sh-nav-item > .sh-more::before{ display:none; }
  .sh-mega, .sh-sub{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; background:transparent; border:0; min-width:0; padding:0; }
  .sh-mega-inner{ display:block; padding:6px 0 10px; max-width:none; }
  .sh-mega-col + .sh-mega-col{ margin-top:10px; }
  .sh-mega-col a, .sh-sub a{ padding:11px 0 11px 16px; color:var(--c-muted); border-bottom:1px solid var(--c-line); border-radius:0; }
  .sh-mega-card{ display:none; }
  .sh-more{ justify-content:flex-start; border:0; border-radius:0; padding:12px 0; border-bottom:1px solid var(--c-line); font-size:var(--fs-lead); color:var(--c-white); cursor:default; }
  .sh-plus{ display:none; }
  .sh-toggle{ display:flex; z-index:810; }
  .sh-header.is-navopen .sh-toggle i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .sh-header.is-navopen .sh-toggle i:nth-child(2){ opacity:0; }
  .sh-header.is-navopen .sh-toggle i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}
@media (max-width:900px){
  .sh-tel{ display:none; }
}
@media (max-width:640px){
  .sh-contact .site-btn{ min-height:44px; padding:10px 18px; font-size:var(--fs-small); }
}
/* 320px級：ロゴ＋CTA＋ハンバーガーが1行に収まるまで詰める（横はみ出し防止） */
@media (max-width:400px){
  .sh-header{ gap:10px; padding-inline:16px; }
  .sh-brand-name{ font-size:var(--fs-small); }
  .sh-contact{ gap:8px; }
  .sh-contact .site-btn{ padding:10px 12px; }
}

/* ===================================================================
   FV
   =================================================================== */
.site-fv{
  position:relative; isolation:isolate;
  min-height:100svh; display:flex; align-items:flex-end;
  padding:128px 0 clamp(48px,8vh,96px);
  overflow:hidden;
  background:var(--c-bg-deep);
}
/* 背景＝施工現場の写真を大きく（③HTML版草案 FV注記）。支給までプレースホルダ面 */
.site-fv-media{ position:absolute; inset:0; z-index:0; border:0; border-radius:0; }
.site-fv-media::after{
  content:""; display:block; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.82) 60%, rgba(15,15,15,.94) 100%);
}
.site-fv-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:100% 25%, 25% 100%;
}
.site-fv-bgword{
  position:absolute; z-index:1; right:-1.5%; bottom:-.1em;
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(7rem, 27vw, 24rem); line-height:.78; letter-spacing:.02em;
  color:rgba(255,255,255,.055); pointer-events:none; user-select:none;
}
.site-fv-inner{ position:relative; z-index:2; }
.site-fv-title{
  /* Webフォント差し替え時に高さが動かないよう2行ぶんの箱を先に確保（CLS対策） */
  min-height:calc(2 * 1.24em);
  margin-top:22px;
  font-size:var(--fs-h1); font-weight:700; line-height:1.24; letter-spacing:.01em; color:var(--c-white);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.site-fv-sub{ margin-top:26px; font-size:var(--fs-lead); line-height:2.05; max-width:40em; }
.site-fv-sub + .site-fv-sub{ margin-top:6px; }
.site-fv-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:clamp(32px,5vh,48px); }
.site-fv-scroll{
  position:absolute; right:var(--gutter); bottom:28px; z-index:2;
  writing-mode:vertical-rl; font-family:var(--font-en); font-size:var(--fs-caption);
  letter-spacing:.3em; color:var(--c-muted); display:flex; align-items:center; gap:12px;
}
.site-fv-scroll i{ display:block; width:1px; height:56px; background:var(--c-line); position:relative; overflow:hidden; }
.site-fv-scroll i::after{ content:""; position:absolute; inset:0; background:var(--c-lime); transform:translateY(-100%); animation:xwScroll 2.2s var(--ease) infinite; }
@keyframes xwScroll{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }
@media (max-width:1240px){ .site-fv-scroll{ display:none; } }
@media (max-width:760px){
  .site-fv-actions{ flex-direction:column; align-items:stretch; }
  .site-fv-actions .site-btn{ width:100%; }
  /* 長いラベルだけ折り返す。折るときは文節で折り、行末に1文字だけ残さない */
  .site-btn{ white-space:normal; text-align:center; padding-inline:16px; gap:8px; word-break:auto-phrase; text-wrap:pretty; }
  .sh-contact .site-btn{ white-space:nowrap; }
}

/* ── NEWS 1行バー（FV直下。帯を薄く保ち、最新1件だけ流す） ── */
.site-newsbar{ background:var(--c-bg-deep); border-bottom:1px solid var(--c-line); }
.site-newsbar-inner{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); min-height:64px; padding-block:8px; }
.site-newsbar-label{ flex:none; font-family:var(--font-en); font-size:var(--fs-caption); font-weight:600; letter-spacing:.22em; color:var(--c-orange); }
.site-newsbar-item{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); }
.site-newsbar-item:hover{ color:var(--c-orange); }
.site-newsbar-item time{ flex:none; font-family:var(--font-en); font-size:var(--fs-small); letter-spacing:.08em; color:var(--c-lime); }
.site-newsbar-item .site-feed-cat{ flex:none; }
.site-newsbar-title{ flex:1 1 auto; min-width:0; font-size:var(--fs-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-newsbar-all{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-en); font-size:var(--fs-caption); letter-spacing:.16em; color:var(--c-muted); }
.site-newsbar-all::after{ content:"→"; font-family:var(--font-en); transition:transform .4s var(--ease); }
.site-newsbar-all:hover{ color:var(--c-orange); }
.site-newsbar-all:hover::after{ transform:translateX(5px); }
@media (max-width:640px){
  .site-newsbar-inner{ flex-wrap:wrap; gap:8px 14px; padding-block:12px; }
  .site-newsbar-item{ flex:1 1 100%; order:3; }
  .site-newsbar-all{ margin-left:auto; }
}

/* ===================================================================
   NEWS / BLOG（CueZilla 動的パーツに差し替わる枠）
   =================================================================== */
.site-feedhead{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--el-gap); }
.site-feed{ margin-top:var(--el-gap); border-top:1px solid var(--c-line); }
.site-feed li{ border-bottom:1px solid var(--c-line); }
.site-feed a{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; padding:20px 4px; transition:color .3s; }
.site-feed a:hover{ color:var(--c-orange); }
.site-feed time{ font-family:var(--font-en); font-size:var(--fs-small); letter-spacing:.08em; color:var(--c-lime); }
.site-feed-cat{ font-size:var(--fs-caption); color:var(--c-muted); border:1px solid var(--c-line); border-radius:var(--radius-pill); padding:2px 12px; }
.site-feed-title{ flex:1 1 260px; font-size:var(--fs-small); }
.site-feedfoot{ margin-top:var(--el-gap); display:flex; justify-content:flex-start; }

/* ブログ＝カード3列（動的差し替え枠） */
.site-cards3{ margin-top:var(--el-gap); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.site-blogcard{ min-width:0; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; transition:transform .5s var(--ease), border-color .5s; }
.site-blogcard:hover{ transform:translateY(-6px); border-color:var(--c-orange); }
.site-blogcard .site-ph{ border-radius:0; }
.site-blogcard-body{ padding:20px; }
.site-blogcard-body time{ font-family:var(--font-en); font-size:var(--fs-small); letter-spacing:.08em; color:var(--c-lime); }
.site-blogcard-body h3{ margin-top:10px; font-size:var(--fs-small); font-weight:700; line-height:1.7; }
@media (max-width:900px){ .site-cards3{ grid-template-columns:1fr; } }

/* ===================================================================
   数字で見る
   =================================================================== */
.site-stats{ margin-top:var(--el-gap); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); }
.site-stat{ min-width:0; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius); padding:clamp(24px,3vw,36px) 20px; text-align:center; }
.site-stat-num{ font-family:var(--font-en); font-size:var(--fs-num); font-weight:600; line-height:1.05; color:var(--c-lime); display:flex; align-items:baseline; justify-content:center; gap:4px; }
.site-stat-num span{ font-family:var(--font-jp); font-size:var(--fs-h3); font-weight:700; }
.site-stat-label{ margin-top:12px; font-size:var(--fs-small); color:var(--c-text); }
@media (max-width:900px){ .site-stats{ grid-template-columns:repeat(2,1fr); } }

/* ===================================================================
   SERVICES
   =================================================================== */
.site-svc-band{ margin-top:var(--el-gap); }
.site-svc-lead{ margin-top:var(--el-gap); font-size:var(--fs-body); max-width:46em; }
.site-svc-main{ margin-top:var(--sec-gap); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); }
.site-svc-card{
  min-width:0;
  display:flex; flex-direction:column;
  background:var(--c-bg); border:1px solid var(--c-orange); border-radius:var(--radius);
  padding:clamp(26px,3vw,36px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.site-svc-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.site-svc-en{ font-family:var(--font-en); font-size:var(--fs-caption); font-weight:600; letter-spacing:.2em; color:var(--c-orange); }
.site-svc-card h3{ margin-top:10px; font-size:var(--fs-h3-lg); font-weight:700; line-height:1.4; color:var(--c-white); }
.site-svc-card .site-ph{ margin-top:var(--el-gap); }
.site-svc-card p{ margin-top:16px; }
.site-svc-note{ font-size:var(--fs-body); color:var(--c-muted); }
.site-svc-card .site-btn{ margin-top:var(--el-gap); align-self:flex-start; }
.site-svc-accent{ color:var(--c-lime); }

.site-svc-sub{ margin-top:clamp(16px,2vw,24px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); }
.site-svc-mini{ min-width:0; display:flex; flex-direction:column; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius); padding:22px 20px; transition:border-color .4s var(--ease); }
.site-svc-mini:hover{ border-color:var(--c-orange); }
.site-svc-mini h3{ margin-top:8px; font-size:var(--fs-h3); font-weight:700; line-height:1.5; color:var(--c-white); }
.site-svc-mini .site-ph{ margin-top:16px; }
.site-svc-mini p{ margin-top:14px; font-size:var(--fs-body); flex:1 1 auto; }
.site-svc-mini .site-textlink{ margin-top:12px; }
@media (max-width:1100px){ .site-svc-sub{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .site-svc-main{ grid-template-columns:1fr; } .site-svc-sub{ grid-template-columns:1fr; } }

/* ===================================================================
   MESSAGE（代表）
   =================================================================== */
.site-msg{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(28px,4vw,64px); align-items:start; }
.site-msg-body p{ margin-top:var(--el-gap); }
.site-msg-sign{ margin-top:var(--sec-gap); font-size:var(--fs-lead); font-weight:700; color:var(--c-white); }
.site-msg-qual{ margin-top:4px; font-size:var(--fs-small); color:var(--c-muted); }
.site-msg .site-btn{ margin-top:var(--el-gap); }
/* ★狭幅の縦積み順＝テキスト→画像（契約.md 論点 narrow-stack-order） */
@media (max-width:900px){
  .site-msg{ grid-template-columns:1fr; }
  .site-msg-media{ order:2; }
  .site-msg-body{ order:1; }
}

/* ===================================================================
   CTA
   =================================================================== */
.site-cta{ position:relative; isolation:isolate; overflow:hidden; text-align:center; }
.site-cta-media{ position:absolute; inset:0; z-index:0; border:0; border-radius:0; }
.site-cta-media::after{ content:""; display:block; position:absolute; inset:0; background:linear-gradient(135deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.88) 100%); }
.site-cta .xw-wrap{ position:relative; z-index:1; }
.site-cta .site-eyebrow{ justify-content:center; }
.site-cta .site-lead{ margin-inline:auto; }
.site-cta-actions{ margin-top:clamp(28px,4vh,40px); display:flex; justify-content:center; }
.site-cta-tel{ display:inline-block; margin-top:28px; font-family:var(--font-en); font-size:clamp(2rem,4.6vw,3.2rem); font-weight:600; letter-spacing:.04em; color:var(--c-white); }
.site-cta-telnote{ margin-top:4px; }

/* ===================================================================
   Footer
   =================================================================== */
.sf-footer{ background:var(--c-bg-deep); border-top:4px solid var(--c-orange); padding-block:var(--row-pad) 32px; }
.sf-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:clamp(28px,5vw,72px); padding-bottom:var(--sec-gap); border-bottom:1px solid var(--c-line); }
.sf-brand{ max-width:34em; }
.sf-brand-name{ font-family:var(--font-en); font-size:var(--fs-h3-lg); font-weight:700; letter-spacing:.1em; color:var(--c-white); }
.sf-brand p{ margin-top:16px; font-size:var(--fs-body); }
.sf-addr{ margin-top:16px; font-size:var(--fs-body); line-height:2.05; color:var(--c-muted); }
.sf-menus{ display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,72px); }
.sf-col h2{ font-family:var(--font-en); font-size:var(--fs-caption); font-weight:600; letter-spacing:.2em; color:var(--c-orange); }
.sf-col a{ display:block; padding:8px 0; font-size:var(--fs-small); color:var(--c-text); transition:color .3s, padding-left .3s; }
.sf-col a:hover{ color:var(--c-orange); padding-left:8px; }
.sf-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:24px; font-size:var(--fs-caption); color:var(--c-muted); }
.sf-bottom a{ text-decoration:underline; }

/* ===================================================================
   Motion（reveal）— JSが動かないときは必ず見える（design-top-draft 手順4-c）
   =================================================================== */
.js [data-reveal]{ opacity:0; transform:translateY(46px); }
.js [data-reveal].is-in{ opacity:1; transform:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal-delay="1"].is-in{ transition-delay:.12s; }
[data-reveal-delay="2"].is-in{ transition-delay:.24s; }

@media (scripting: none){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-opening], .site-open, .splash, .opening{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
}

/* ── 片側ブリード（右端まで届かせて「続き／広がり」を示す）機構契約 bleed-one-side ── */
.site-bleed-right{
  margin-right:calc(-1 * (50vw - min(50vw, var(--maxw) / 2) + var(--gutter)));
}
@media (max-width:640px){
  .site-bleed-right{ margin-right:calc(-1 * var(--gutter)); }
}

/* ===================================================================
   ここから下層ページ用（design-buildout 手順2）
   ・顔＝下層ヒーロー帯は自作（署名DNAで描き下ろす）
   ・機能領域は MISSION パーツを採用し、契約トークンでベイクして馴染ませる
     採用: qa-accordion（MISSION/parts/qa-accordion・bake.mjs で具体値化）
   =================================================================== */

/* ── 下層ヒーロー帯（顔・パンくず内包） ───────────────────── */
.site-subhero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--c-bg-deep);
  padding:calc(96px + var(--row-pad)) 0 var(--row-pad);
}
.site-subhero-media{ position:absolute; inset:0; z-index:0; border:0; border-radius:0; }
.site-subhero-media::after{
  content:""; display:block; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,15,.62) 0%, rgba(15,15,15,.88) 100%);
}
.site-subhero-word{
  position:absolute; z-index:1; right:-1.5%; bottom:-.14em;
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(5rem, 17vw, 15rem); line-height:.78; letter-spacing:.02em;
  color:rgba(255,255,255,.05); pointer-events:none; user-select:none;
}
.site-subhero .xw-wrap{ position:relative; z-index:2; }
.site-subhero-title{
  margin-top:18px; font-size:var(--fs-h2); font-weight:700; line-height:1.3;
  letter-spacing:.01em; color:var(--c-white);
}
.site-subhero-lead{ margin-top:22px; font-size:var(--fs-lead); line-height:2.05; max-width:44em; }
.site-subhero-lead + .site-subhero-lead{ margin-top:8px; }

/* パンくず（CueZilla動的パーツ parts231 に置き換わる枠） */
.site-crumb{
  margin-top:clamp(24px,4vh,40px);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:var(--fs-caption); color:var(--c-muted);
}
.site-crumb a{ display:inline-flex; align-items:center; min-height:44px; }
.site-crumb a:hover{ color:var(--c-orange); }
.site-crumb span[aria-current]{ color:var(--c-text); }

/* ── セクション見出し（下層共通） ─────────────────────────── */
.site-sechead + *{ margin-top:var(--el-gap); }
.site-h3{ font-size:var(--fs-h3-lg); font-weight:700; line-height:1.45; color:var(--c-white); }
.site-body + .site-body{ margin-top:1.1em; }
.site-body{ font-size:var(--fs-body); }

/* ── 片側ブリードの帯（主力の1枠格上げ） ───────────────────── */
.site-band{
  position:relative; isolation:isolate; overflow:hidden;
  border-block:1px solid var(--c-line);
}
/* ★主力の格上げのブリードは .xw-wrap の直下に置いた .site-bleed-right で作る（トップと同じ型）。
   グリッド子で 50vw 式のブリードを使わない＝教訓 fullbleed-50vw-formula-breaks-inside-grid-item */
/* ★aspect-ratio を持つ枠に min-height を足さない（高さから幅が逆算されて版面を突き破る） */
.site-band-media--wide{ margin-top:var(--el-gap); }
.site-band-inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px); align-items:center;
}
.site-band-media{ align-self:stretch; }
.site-band-media.site-ph:not([class*="site-ph--"]){ min-height:clamp(220px,30vh,340px); }
@media (max-width:900px){
  .site-band-inner{ grid-template-columns:1fr; }
  .site-band-media{ order:2; }
  .site-band-body{ order:1; }
}

/* ── 連番ステップ（工程・仕組み） ─────────────────────────── */
.site-steps{ margin-top:var(--el-gap); counter-reset:xwstep; border-top:1px solid var(--c-line); }
.site-steps > li{
  counter-increment:xwstep;
  display:grid; grid-template-columns:2.6em minmax(0,1fr); gap:clamp(16px,2.4vw,32px);
  padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid var(--c-line);
}
.site-steps > li::before{
  content:counter(xwstep,decimal-leading-zero);
  justify-self:start; white-space:nowrap;
  font-family:var(--font-en); font-size:var(--fs-h3-lg); font-weight:600; line-height:1;
  color:var(--c-orange); letter-spacing:.04em;
}
/* ★li の子は必ず2列目へ（::before が1列目。3要素目が1列目の狭いトラックに落ちて極端に折り返すのを防ぐ） */
.site-steps > li > *{ grid-column:2; }
.site-step-title{ display:block; font-size:var(--fs-lead); font-weight:700; color:var(--c-white); }
.site-step-title + p{ margin-top:6px; }

/* ── 箇条書き（条件・対象） ───────────────────────────────── */
.site-bullets{ margin-top:var(--el-gap); display:grid; gap:2px; }
.site-bullets > li{
  position:relative; padding:12px 0 12px 30px; border-bottom:1px solid var(--c-line);
  font-size:var(--fs-body); line-height:1.95;
}
.site-bullets > li::before{
  content:"／"; position:absolute; left:0; color:var(--c-orange); font-weight:700;
}
.site-bullets strong{ color:var(--c-white); }

/* ── カード列（悩み・対象・その他工事） ───────────────────── */
.site-grid{ margin-top:var(--el-gap); display:grid; gap:clamp(12px,1.6vw,20px); }
.site-grid--2{ grid-template-columns:repeat(2,1fr); }
.site-grid--3{ grid-template-columns:repeat(3,1fr); }
.site-grid--4{ grid-template-columns:repeat(4,1fr); }
.site-card{
  min-width:0; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,30px);
}
.site-card--accent{ border-color:var(--c-orange); }
.site-card h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.5; color:var(--c-white); }
.site-card h3 + p{ margin-top:12px; }
.site-card .site-svc-en + h3{ margin-top:8px; }
.site-card .site-textlink{ margin-top:14px; }
@media (max-width:1100px){ .site-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .site-grid--3{ grid-template-columns:1fr; } }
@media (max-width:760px){ .site-grid--2, .site-grid--4{ grid-template-columns:1fr; } }

/* 連番付きカード（放置リスク・メリット） */
.site-card--no{ position:relative; padding-top:clamp(28px,3vw,38px); }
.site-card-no{
  position:absolute; top:14px; right:18px;
  font-family:var(--font-en); font-size:var(--fs-h3-lg); font-weight:600; line-height:1;
  color:rgba(232,84,31,.35);
}

/* ── 表（料金の目安・塗料グレード・募集要項） ───────────────── */
.site-tablewrap{ margin-top:var(--el-gap); overflow-x:auto; }
.site-table{ width:100%; border-collapse:collapse; font-size:var(--fs-body); min-width:560px; }
.site-table caption{ text-align:left; font-size:var(--fs-caption); color:var(--c-muted); padding-bottom:10px; }
.site-table th, .site-table td{
  padding:clamp(12px,1.6vw,18px); text-align:left; line-height:1.8;
  border-bottom:1px solid var(--c-line); vertical-align:top;
}
.site-table thead th{
  background:var(--c-bg-deep); color:var(--c-white);
  font-family:var(--font-en); font-size:var(--fs-small); letter-spacing:.08em; font-weight:600;
  border-bottom:2px solid var(--c-orange); white-space:nowrap;
}
.site-table tbody th{ color:var(--c-white); font-weight:700; white-space:nowrap; width:1%; }
.site-table .site-price{ font-family:var(--font-en); font-size:var(--fs-h3); color:var(--c-lime); white-space:nowrap; }
.site-tablenote{ margin-top:14px; }

/* 募集要項など縦2列の定義表 */
.site-table--def{ min-width:0; }
.site-table--def th{ width:26%; background:var(--c-bg-deep); }
@media (max-width:640px){
  .site-table--def, .site-table--def tbody, .site-table--def tr, .site-table--def th, .site-table--def td{ display:block; width:auto; }
  .site-table--def th{ border-bottom:0; padding-bottom:0; }
}

/* ── アンカーチップ（FAQのカテゴリナビ） ───────────────────── */
.site-chips{ margin-top:var(--el-gap); display:flex; flex-wrap:wrap; gap:10px; }
.site-chips a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--c-line); border-radius:var(--radius-pill);
  font-size:var(--fs-small); color:var(--c-text); background:var(--c-bg);
}
.site-chips a:hover{ border-color:var(--c-orange); color:var(--c-orange); }

/* ── 3点組の写真（対応範囲） ─────────────────────────────── */
.site-trio{ margin-top:var(--el-gap); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
@media (max-width:760px){ .site-trio{ grid-template-columns:1fr; } }

/* ── 引用（コンセプトの一言） ───────────────────────────── */
.site-quote{
  margin-top:var(--sec-gap); padding:clamp(20px,3vw,32px) 0 clamp(20px,3vw,32px) clamp(20px,3vw,36px);
  border-left:3px solid var(--c-orange);
}
.site-quote p{
  font-size:clamp(1.375rem,3vw,2.2rem); font-weight:700; line-height:1.6;
  letter-spacing:.02em; color:var(--c-white);
}

/* ── 強調枠（0円リフォームの可否・注記） ───────────────────── */
.site-callout{
  margin-top:var(--el-gap); padding:clamp(20px,2.6vw,30px);
  border:2px solid var(--c-orange); border-radius:var(--radius); background:var(--c-bg);
}
.site-callout h3{ font-size:var(--fs-h3); font-weight:700; color:var(--c-orange); }
.site-callout h3 + p{ margin-top:10px; }
.site-callout--go{ border-color:var(--c-green); }
.site-callout--go h3{ color:var(--c-green); }
.site-em-go{ color:var(--c-green); font-weight:700; }

/* ===================================================================
   MISSION パーツ採用: qa-accordion
   MISSION/parts/qa-accordion/style.css を
   node MISSION/tools/bake.mjs … --theme 2_Claude作業/config/theme.css で具体値化したもの。
   ★変更点は2つだけ（採用時の馴染ませ）:
     ・セクション余白と地色は Row が持つ設計なので .qa-accordion 側を無効化
     ・A バッジは #E6E6E6 地に白文字でコントラストが出ないため、ライム地＋黒文字にした
   =================================================================== */
.qa-accordion{
  container-type: inline-size;
  padding-block: 0;      /* 採用時の変更: 余白は Row（.site-row）が持つ */
  padding-inline: 0;     /* 同上 */
  background: transparent;
}
.qa-accordion__list{ list-style:none; margin:var(--el-gap) 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.qa-accordion__item{ margin:0; }
.qa-accordion__details{ border:1px solid #2E2E2E; border-radius:4px; padding:16px 24px; background:#141414; }
.qa-accordion__question{
  list-style:none; display:flex; align-items:center; gap:16px; cursor:pointer;
  font-weight:700; color:#E8541F; line-height:1.6;
}
.qa-accordion__question::-webkit-details-marker{ display:none; }
.qa-accordion__badge{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  inline-size:1.875rem; block-size:1.875rem; border-radius:999px;
  background:#E8541F; color:#FFFFFF; font-weight:700;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.qa-accordion__badge--a{ background:#C8F02A; color:#1A1A1A; }   /* 採用時の変更: コントラスト確保 */
.qa-accordion__question-text{ flex:1 1 auto; }
.qa-accordion__icon{ flex:none; position:relative; inline-size:1em; block-size:1em; }
.qa-accordion__icon-bar{
  position:absolute; inset-inline-start:0; inset-block-start:50%;
  inline-size:100%; block-size:2px; background:#E6E6E6;
  transform:translateY(-50%); transition:transform .28s cubic-bezier(0.16,1,0.3,1);
}
.qa-accordion__icon-bar--v{ transform:translateY(-50%) rotate(90deg); }
.qa-accordion__details[open] .qa-accordion__icon-bar--v{ transform:translateY(-50%) rotate(0deg); }
/* ★採用時の変更3: 回答に display を当てると details の閉じた状態が上書きされ、
   全回答が開いたまま重なる（responsive-audit の overlap で検出）。閉じているときは隠す */
.qa-accordion__details:not([open]) .qa-accordion__answer{ display:none; }
.qa-accordion__answer{
  display:flex; align-items:flex-start; gap:16px;
  margin-block-start:16px; padding-block-start:16px; border-block-start:1px solid #2E2E2E;
}
.qa-accordion__answer-text{ margin:0; color:#E6E6E6; line-height:2.05; }
@container (max-width: 32rem){
  .qa-accordion__details{ padding:10px 16px; }
  .qa-accordion__list{ gap:10px; }
}

/* ── 条件チェックリスト（現金負担0円リフォームの対象条件） ───────── */
.site-check{ margin-top:var(--el-gap); display:grid; gap:clamp(10px,1.4vw,14px); }
.site-check > li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
  background:var(--c-bg); border:1px solid var(--c-line); border-left:3px solid var(--c-green);
  border-radius:var(--radius); padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
}
.site-check > li::before{
  content:"✓"; color:var(--c-green); font-weight:700; font-size:var(--fs-h3); line-height:1.4;
}
.site-check > li > *{ grid-column:2; }
.site-check-main{ display:block; font-size:var(--fs-lead); font-weight:700; color:var(--c-white); }
.site-check-sub{ display:block; margin-top:4px; font-size:var(--fs-small); color:var(--c-muted); }

/* ── 図解（借換え前後の棒。★金額は入れない） ─────────────────── */
.site-diagram{
  margin-top:var(--el-gap); padding:clamp(20px,2.6vw,30px);
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius); text-align:center;
}
.site-diagram-cap{ font-size:var(--fs-small); color:var(--c-text); }
.site-diagram-bars{
  margin:var(--el-gap) auto 0; display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(24px,5vw,64px); max-width:34em;
}
.site-diagram-col{ flex:1 1 0; min-width:0; }
.site-diagram-bar{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:var(--radius); font-size:var(--fs-caption); font-weight:700; line-height:1.5;
}
.site-diagram-bar--before{ height:210px; background:var(--c-bg-deep); border:1px solid var(--c-line); color:var(--c-text); }
.site-diagram-bar--after{ height:150px; background:var(--c-bg-deep); border:1px solid var(--c-line); color:var(--c-text); }
.site-diagram-bar--zero{ height:60px; background:rgba(52,199,123,.16); border:1px solid var(--c-green); color:var(--c-green); }
.site-diagram-label{ display:block; margin-top:10px; font-size:var(--fs-caption); color:var(--c-muted); }
.site-diagram-foot{ margin-top:var(--el-gap); font-size:var(--fs-body); font-weight:700; color:var(--c-green); }
@media (max-width:640px){
  .site-diagram-bar--before{ height:150px; }
  .site-diagram-bar--after{ height:104px; }
  .site-diagram-bar--zero{ height:46px; }
}

/* ===================================================================
   フォーム（お問い合わせ／CueZilla の form 機構に差し替わる枠）
   =================================================================== */
.site-form{ margin-top:var(--el-gap); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.site-field{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.site-field--wide{ grid-column:1 / -1; }
.site-label{ display:flex; align-items:center; gap:10px; font-size:var(--fs-small); font-weight:700; color:var(--c-white); }
.site-req{ font-size:var(--fs-caption); font-weight:700; color:var(--c-white); background:var(--c-orange-btn); border-radius:var(--radius-pill); padding:1px 10px; }
.site-input{
  width:100%; min-height:56px; padding:14px 18px;
  font-family:inherit; font-size:var(--fs-body); line-height:1.8; color:var(--c-text);
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius);
  transition:border-color .3s var(--ease);
}
.site-input:hover{ border-color:var(--c-muted); }
.site-input:focus{ outline:3px solid var(--c-lime); outline-offset:2px; border-color:var(--c-orange); }
.site-textarea{ min-height:180px; resize:vertical; }
select.site-input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--c-muted) 50%),linear-gradient(135deg,var(--c-muted) 50%,transparent 50%); background-position:calc(100% - 22px) center, calc(100% - 15px) center; background-size:7px 7px, 7px 7px; background-repeat:no-repeat; padding-right:48px; }
.site-consent{ margin-top:4px; }
.site-check-inline{ display:flex; align-items:center; gap:12px; min-height:44px; font-size:var(--fs-small); }
.site-check-inline input{ width:22px; height:22px; accent-color:var(--c-orange); }
.site-formfoot{ grid-column:1 / -1; display:flex; justify-content:flex-start; }
@media (max-width:760px){ .site-form{ grid-template-columns:1fr; } }

/* ===================================================================
   業務案内ページ（work.html）：画像の主張を一段下げる
   カード内は横幅を抑え、単独の帯は縦を浅くして本文の比重を上げる
   =================================================================== */
.page-work .site-ph--16x9, .page-work .site-ph--4x3{ max-width:520px; }
.page-work .site-svc .site-ph{ max-width:260px; }
.page-work .site-card .site-ph{ max-width:340px; }
.page-work .site-ph--21x9{ aspect-ratio:21/9; }
@media (max-width:900px){
  .page-work .site-ph--16x9, .page-work .site-ph--4x3, .page-work .site-svc .site-ph, .page-work .site-card .site-ph{ max-width:none; }
}

/* ラプター塗装とは？直下の帯：正方形で小さく置く */
.site-band-media--sm{ max-width:420px; aspect-ratio:1/1; }
@media (max-width:900px){ .site-band-media--sm{ max-width:none; aspect-ratio:1/1; } }

/* ===================================================================
   現金負担0円リフォーム：仕組みの計算式＋3フェーズ（パターンC）
   =================================================================== */
.site-eq{ display:flex; align-items:stretch; gap:clamp(10px,1.4vw,18px); flex-wrap:wrap; margin-bottom:clamp(24px,3vw,40px); }
.site-eq-term{ flex:1 1 180px; min-width:0; padding:clamp(18px,2.2vw,28px); background:var(--c-bg-deep); border:1px solid var(--c-line); border-radius:var(--radius); }
.site-eq-term span{ font-family:var(--font-en); font-size:var(--fs-caption); letter-spacing:.16em; color:var(--c-muted); }
.site-eq-term strong{ display:block; margin-top:10px; font-size:var(--fs-h3); line-height:1.4; color:var(--c-white); }
.site-eq-term--result{ background:var(--c-orange); border-color:var(--c-orange); }
.site-eq-term--result span, .site-eq-term--result strong{ color:var(--c-white); }
.site-eq-op{ flex:none; width:28px; display:grid; place-items:center; font-family:var(--font-en); font-size:var(--fs-h3); color:var(--c-lime); }
.site-phase3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(24px,3vw,40px); }
.site-phase{ padding:clamp(20px,2.4vw,32px); border-top:2px solid var(--c-lime); }
.site-phase em{ font-family:var(--font-en); font-style:normal; font-size:var(--fs-caption); letter-spacing:.16em; color:var(--c-lime); }
.site-phase h3{ margin-top:10px; font-size:var(--fs-h3); color:var(--c-white); }
.site-phase ul{ margin-top:12px; display:grid; gap:8px; }
.site-phase li{ position:relative; padding-left:16px; font-size:var(--fs-small); color:var(--c-muted); }
.site-phase li::before{ content:""; position:absolute; left:0; top:.7em; width:6px; height:1px; background:var(--c-orange); }
@media (max-width:900px){
  .site-phase3{ grid-template-columns:1fr; }
  .site-eq-op{ width:auto; justify-self:start; }
}

/* トップ SERVICES：カード内画像の主張を抑える（本文とボタンの比重を上げる） */
/* 全幅ブリードをやめて幅自体を絞る（アスペクト比だけでは高さが下がらないため） */
.page-top .site-svc-band{ max-width:560px; margin-right:0; aspect-ratio:21/9; }
.page-top .site-svc-card .site-ph{ max-width:300px; }
.page-top .site-svc-mini .site-ph{ max-width:220px; }
@media (max-width:900px){
  .page-top .site-svc-band{ max-width:none; }
  .page-top .site-svc-card .site-ph, .page-top .site-svc-mini .site-ph{ max-width:none; }
}

/* ===================================================================
   画像プレースホルダー共通ルール（サイト全体一括・以降追加分にも自動適用）
   ・背景は薄いグレー #c9cec9 のベタ
   ・外周の破線／点線ガイドは出さない（CueZilla組み込み時に本番へ残るため）
   ・注釈テキストも出さない
   =================================================================== */
image-slot{ background:#c9cec9 !important; border:0 !important; }
image-slot::part(ring){ display:none !important; }
image-slot::part(frame){ background:transparent !important; border:0 !important; }
image-slot::part(label),
image-slot::part(placeholder),
image-slot::part(hint){ display:none !important; }

/* ================= nk-common.css（受領データそのまま・読み込み順を保持） ================= */
@charset "utf-8";
/* ===================================================================
   nk-common.css ── 下層ページ共通の上書き（デザイン横展開の正本）
   ・TOP（index.html）で確立したデザインルールを .site-/.sh-/.sf- 系へ適用する
   ・テキストは一切変更しない。見た目のみを揃える
   ・調整はこのファイル1枚で行う（ページ側に個別CSSを書かない）
   読み込み順：style.css → nk-common.css
=================================================================== */

/* ---------- ① トークン：TOPと同じ書体・階調・直角に揃える ---------- */
:root{
  --font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --font-en:"Anton","Oswald",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  /* 黒の段（TOP＝global.css の値に統一） */
  --c-bg:#121212;
  --c-bg-deep:#0f0f0f;
  --c-bg-2:#1a1a1a;
  --c-panel:#1e1e1e;
  --c-line:#3a3a3a;
  --c-text:#f5f5f5;
  --c-muted:#b2b2b2;
  --c-lime:#c6ff00;
  --c-orange:#ff5c00;
  --c-orange-btn:#ff5c00;
  /* 角丸は廃止（TOPで直角に統一済み） */
  --radius:0px;
  --radius-pill:0px;
  --maxw:1360px;
  --gutter:clamp(24px,6vw,112px);
}
body{font-weight:500}
/* style.css が上書きし返す基本値をHOME側へ戻す（読み込み順の最後がこのファイル） */
body{font-size:1rem;line-height:1.9;letter-spacing:.01em;color:var(--text,#f5f5f5);background:var(--bg,#121212)}

/* ---------- ② 見出し：オレンジの短罫＋英字。和文見出しのジャンプ率をTOPへ寄せる ---------- */
.site-eyebrow{letter-spacing:.24em}
.site-eyebrow::before{width:40px;height:2px}
.site-h2{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.3;letter-spacing:.005em}
.site-lead{max-width:46em;line-height:1.95}


/* ---------- ③ セクション背面の巨大英字は全ページ撤去（ヘッド帯の英字だけ残す） ---------- */
.site-ghost-word{display:none!important}

/* ---------- ④ ボタン：直角。塗りはヘッダーのみ、本文中は罫線バナー型 ---------- */
.site-btn{border-radius:0;letter-spacing:.04em;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.site-btn--primary{background:var(--c-orange);color:#fff}
.site-btn--primary:hover{background:#fff;color:#121212;transform:none}
.site-btn--ghost:hover{transform:none}
.site-textlink{color:var(--c-orange)}

/* 本文中の主要導線は、上下オレンジ罫の横長バナー（TOPの .btn-row と同じ型） */
.site-cta-actions .site-btn,
.site-svc-card .site-btn,
.site-msg .site-btn{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  width:100%;min-height:0;padding:clamp(20px,2.6vw,32px) clamp(14px,1.8vw,24px);
  background:transparent;color:var(--c-text);
  border:0;border-top:1px solid var(--c-orange);border-bottom:1px solid var(--c-orange);
  font-size:clamp(1.2rem,2.4vw,1.9rem);font-weight:700;line-height:1.4;text-align:left;
  overflow:hidden;isolation:isolate;white-space:normal;
  justify-content:normal;justify-items:stretch
}
.site-cta-actions .site-btn::before,
.site-svc-card .site-btn::before,
.site-msg .site-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c-orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .62s cubic-bezier(.2,.7,.2,1)
}
.site-cta-actions .site-btn:hover::before,.site-cta-actions .site-btn:focus-visible::before,
.site-svc-card .site-btn:hover::before,.site-svc-card .site-btn:focus-visible::before,
.site-msg .site-btn:hover::before,.site-msg .site-btn:focus-visible::before{transform:scaleX(1)}
.site-cta-actions .site-btn:hover,.site-svc-card .site-btn:hover,.site-msg .site-btn:hover{background:transparent;color:#fff}
/* 矢印はロングアロー（罫＋山形）に差し替え */
.site-cta-actions .site-btn::after,
.site-svc-card .site-btn::after,
.site-msg .site-btn::after{
  content:"";position:relative;display:block;margin-left:auto;flex:none;
  width:clamp(72px,9vw,140px);height:24px;background:currentColor;
  -webkit-mask:linear-gradient(#000,#000) left center/100% 2px no-repeat,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M1 1L11 12 1 23' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") right center/12px 24px no-repeat;
  mask:linear-gradient(#000,#000) left center/100% 2px no-repeat,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M1 1L11 12 1 23' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") right center/12px 24px no-repeat;
  -webkit-mask-composite:source-over;mask-composite:add;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)
}
.site-cta-actions .site-btn:hover::after,.site-svc-card .site-btn:hover::after,.site-msg .site-btn:hover::after{transform:translateX(10px)}
/* 幅が足りない枠（MESSAGEなど）で矢印が2行目に落ち、上下中央から外れるのを防ぐ */
.site-cta-actions .site-btn,.site-svc-card .site-btn,.site-msg .site-btn{flex-wrap:nowrap}
.site-cta-actions .site-btn__t,.site-svc-card .site-btn__t,.site-msg .site-btn__t{min-width:0;flex:1 1 auto}
.site-cta-actions .site-btn::after,.site-svc-card .site-btn::after,.site-msg .site-btn::after{flex:0 1 auto;min-width:44px}

/* ---------- ⑤ CTA：TOPと同じ固定背景写真＋濃度、バナーは版面の2/3で中央 ---------- */
.site-cta-media{
  background-image:url(https://cdn.cuezilla-cms.com/enjoyworks-test2.site/images/1534/hold-72.webp)!important;
  background-size:cover!important;background-position:center!important;
  background-repeat:no-repeat!important;background-attachment:fixed!important;
  background-color:transparent!important
}
.site-cta-media::after{background:linear-gradient(135deg,rgba(10,10,10,.76) 0%,rgba(10,10,10,.86) 100%)!important}
@media (max-width:640px){.site-cta-media{background-attachment:scroll!important}}
.site-cta-actions{display:grid;width:66.66%;margin-inline:auto;margin-top:clamp(28px,4vh,48px);text-align:left;justify-content:stretch;justify-items:stretch}
.site-cta-actions .site-btn+.site-btn{border-top:0}
@media (max-width:900px){.site-cta-actions{width:100%}}

/* ---------- ⑥ 下層ヒーロー帯：TOPのFVと同じ黒の締まり方に ---------- */
.site-subhero{background:var(--c-bg-deep)}
.site-subhero-word{color:rgba(198,255,0,.04)}

/* ---------- ⑦ カード・パネル：直角＋TOPと同じ面の作り方 ---------- */
.site-svc-card,.site-panel,.site-price-card,.rcard,.job-card,.person-card,
.site-step,.site-menu-card,.site-flow-item{border-radius:0}

/* ---------- ⑧ セクションの余白リズム：TOPに合わせて深く取る ---------- */
.site-row{padding-block:clamp(52px,7vh,96px)}
.site-sechead{margin-bottom:clamp(26px,3.6vh,44px)}
.site-row--tint{background:var(--c-bg-2)}
.site-row--deep{background:var(--c-bg-deep)}

/* ---------- ⑨ ヘッダー・フッターはHOMEのCSS（global.css / nk-top.css）に完全委譲 ----------
   マークアップもHOMEと同一にしたため、このファイルでは一切上書きしない。
   固定ヘッダー分の余白だけ、下層の先頭セクションに確保する */
main>section:first-child{margin-top:clamp(72px,9vh,104px)}

/* ---------- ⑪ 数字・英字のあしらいはTOPと同じ書体で ---------- */
.site-stat-num,.site-price-num,.site-step-no,.site-num{font-family:var(--font-en);letter-spacing:.02em}

/* ---------- ⑫ リンク色の既定（編集で追加されたリンクが青くならないように） ---------- */
main a{color:inherit}
main p a:not([class]){color:var(--c-orange);text-decoration:underline;text-underline-offset:.2em}
main p a:not([class]):hover{color:var(--c-lime)}

/* ---------- ⑬ 書体変更にともなう追従（Zen Kaku は字幅が広く、狭い枠で文節改行が暴れる） ---------- */
/* 狭いカラム（カード・パネル・リスト）内の本文は文節改行を切り、通常の行組みに戻す */
.site-card p,.site-card li,.site-phase li,.site-phase p,
.site-svc-card p,.site-panel p,.site-price-card p,.site-step p,
.site-check-sub,.rcard p,.job-card p,.person-card p,
.site-grid p,.site-col p,.site-flow-item p{word-break:normal;text-wrap:pretty}
.site-card p,.site-phase li{line-height:1.9}

/* ---------- ⑭ 3列グリッド：中間幅は2列に落として1行の文字数を確保する ---------- */
@media (max-width:1180px){
  .site-grid--3,.site-phase3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .site-grid--3,.site-phase3{grid-template-columns:1fr}
}

/* ---------- ⑮ 連番カード：番号を右上に固定し、見出しと重ねない ---------- */
.site-card--no{position:relative;padding-top:clamp(26px,3vw,38px)}
.site-card--no .site-card-no{
  position:absolute;top:clamp(16px,1.8vw,22px);right:clamp(16px,1.8vw,22px);
  font-family:var(--font-en);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;
  color:rgba(255,92,0,.5);pointer-events:none
}
.site-card--no h3{padding-right:3.2em}
/* カード内は上から詰め、下端の余白を揃える */
.site-grid--3>.site-card{display:flex;flex-direction:column;gap:12px}
.site-grid--3>.site-card>p:last-child{margin-bottom:0}

/* ---------- ⑯ 可否表示の緑：面で使わず、文字と小面積のアクセントだけライムにする ---------- */
:root{--c-green:#c6ff00}
.site-callout--go{border-color:var(--c-orange)}
.site-diagram-bar--zero{background:rgba(198,255,0,.12)!important}
.site-diagram-foot{color:var(--c-lime)}

/* ---------- ⑰ 余白：ブロックの切り替わりに必ず間隔を入れる ---------- */
.site-row>.xw-wrap>*+*{margin-top:clamp(30px,3.6vw,52px)}
.site-row>.xw-wrap>.site-sechead+*{margin-top:0}
.site-h3{margin-bottom:12px}
/* ボタンの上余白：本文からの離れを必ず確保する */
.site-feedfoot,.site-formfoot{margin-top:clamp(32px,4vw,52px)}
.site-callout .site-feedfoot{margin-top:clamp(24px,3vw,36px)}
.site-row>.xw-wrap>.site-cta-actions{margin-top:clamp(36px,4.5vw,60px)}

/* ---------- ⑱ CTA：写真の上でも見出しが確実に読める濃度に ---------- */
.site-cta-media::after{background:linear-gradient(135deg,rgba(10,10,10,.76) 0%,rgba(10,10,10,.86) 100%)!important}

/* Anton は字間が詰まるため、小さな英字ラベルは字間を開けて読ませる */
.site-eyebrow,.site-newsbar-all,.site-stat-label,.site-tag,.site-badge{letter-spacing:.16em}

/* 下層ヒーローの背面英字：切れて濃く見えないよう位置と濃度を整える */
.site-subhero-word{right:auto;left:clamp(20px,5vw,80px);top:auto;bottom:-.1em;color:rgba(198,255,0,.035)}

/* ---------- ⑲ CTA下端の余白（フッターに詰まらせない）／上下を同値にして内容を帯の中央に置く ---------- */
.site-cta.site-row{padding-block:clamp(112px,14vh,192px)}
/* ヘッダー帯（下層ヒーロー）直下の最初のセクションだけ、上を広く取って始まりを作る */
.site-subhero+.site-row{padding-top:clamp(104px,13.5vh,190px)}
.site-cta>.xw-wrap{margin-top:0}
.site-cta>.xw-wrap>.site-h2:first-child{margin-top:0}

/* ---------- ⑳ 強調枠（.site-callout）：内側の余白とボタンの離れを揃える ---------- */
.site-callout{padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px)}
.site-callout>p+.site-btn,.site-callout>p+.site-feedfoot{margin-top:clamp(24px,2.8vw,36px)}
.site-callout .site-btn{min-height:58px;padding:16px 30px}
.site-callout .site-btn--ghost{border-color:rgba(255,255,255,.5)}
.site-callout .site-btn--ghost:hover{background:#fff;color:#121212}

/* ---------- ㉑ 片側ブリードを廃止：画像は版面内で止める（かっちりした配置） ---------- */
.site-bleed-right{margin-right:0!important}

/* ---------- ㉒ カード内の余白ルール（全カード共通・個別指定をしない） ----------
   隣り合う要素のあいだに必ず間隔を入れる。画像の上下はとくに広く取る */
.site-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,40px)}
.site-card>*+*{margin-top:clamp(14px,1.6vw,20px)}
.site-card>.site-svc-en+h3{margin-top:6px}
.site-card>h3+.site-ph{margin-top:clamp(20px,2.4vw,30px)}
.site-card>.site-ph+p{margin-top:clamp(20px,2.4vw,30px)}
.site-card>p+.site-textlink,.site-card>*+.site-textlink{margin-top:clamp(20px,2.4vw,28px)}
/* カード内の画像はカード幅いっぱいに */
.site-card>.site-ph{width:100%}
/* 最後の要素は下端に寄せてカード高さを揃える */
.site-card>.site-textlink:last-child{margin-top:auto;padding-top:clamp(20px,2.4vw,28px)}

/* ---------- ㉓ カード末尾の画像は下端揃え（本文の行数差で画像がバラけないように） ---------- */
.site-card>.site-ph:last-child{margin-top:auto;padding-top:0}
.site-grid>.site-card{height:100%}

/* ---------- ㉔ 「見出し→画像」の帯は全ページ共通で版面いっぱいの横長（32:9） ---------- */
.site-row>.xw-wrap>.site-ph{aspect-ratio:32/9!important;max-width:none!important;width:100%}
.site-band-media--sm{max-width:none!important;aspect-ratio:32/9!important}
.site-band-media--wide{margin-top:clamp(28px,3.4vw,48px);margin-bottom:clamp(28px,3.4vw,48px)}

/* ---------- ㉕ 条件チェックリストは2列（5項目＝3+2。最後は左寄せで揃える） ---------- */
@media (min-width:721px){
  .site-check{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
}

/* ---------- ㉖ 借換えの図解：同じ全長の横バーを2本並べ、差分＝0円枠をライムで見せる ---------- */
.site-diagram--h{margin-top:clamp(26px,3vw,40px);padding:clamp(22px,2.6vw,34px);background:#121212;border:1px solid var(--c-line)}
.site-diagram--h .site-diagram-cap{margin:0 0 clamp(18px,2.2vw,26px);font-size:15px;letter-spacing:.04em;color:var(--c-muted)}
.site-diagram-rows{display:grid;gap:clamp(12px,1.4vw,18px)}
.site-diagram-row{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:center;gap:clamp(12px,1.6vw,20px)}
.site-diagram--h .site-diagram-label{margin:0;font-size:15px;font-weight:700;color:#f5f5f5;white-space:nowrap}
.site-diagram-track{display:flex;height:clamp(52px,5.4vw,68px)}
.site-diagram-seg{display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.site-diagram-seg--before{flex:1 1 100%;background:#3d3d3d;border:1px solid #4f4f4f;color:#f2f2f2}
.site-diagram-seg--after{flex:1 1 76%;background:#3d3d3d;border:1px solid #4f4f4f;color:#f2f2f2}
.site-diagram-seg--zero{flex:1 1 24%;margin-left:-1px;background:var(--c-lime);color:#121212}
.site-diagram--h .site-diagram-foot{margin-top:clamp(18px,2.2vw,26px);padding-left:calc(5.5em + clamp(12px,1.6vw,20px));font-size:17px;font-weight:700;color:var(--c-lime)}
@media (max-width:720px){
  .site-diagram-row{grid-template-columns:1fr;gap:8px}
  .site-diagram-seg{font-size:13px}
  .site-diagram--h .site-diagram-foot{padding-left:0}
}

/* ---------- ㉗ カード背景に写真を敷く（黒のヴェールを重ねて文字を守る） ---------- */
.site-card--bgph{position:relative;isolation:isolate;overflow:hidden;background-color:#161616;background-size:cover;background-position:center;background-repeat:no-repeat}
.site-card--bgph::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.8) 100%)
}
.site-card--bgph h3,.site-card--bgph p{position:relative}

/* ---------- ㉘ 下層ヘッダー帯：写真は文字が乗る前提の濃度で敷く ---------- */
.site-subhero-media{background-size:cover!important;background-position:center 40%!important;background-repeat:no-repeat!important;background-color:#121212!important}
.site-subhero-media::after{content:"";display:block;position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.62) 45%,rgba(10,10,10,.88) 100%)}

/* ---------- ㉛ 定義表（会社概要・募集要項）：スマホでは見出しセルを1行分の帯として全幅に ---------- */
@media (max-width:640px){
  .site-table--def th{display:block;width:100% !important;white-space:normal;box-sizing:border-box}
  .site-table--def td{display:block;width:100% !important;box-sizing:border-box}
}

/* ---------- ㉙ カード内の画像は必ずカード幅いっぱい（旧max-width指定を解除） ---------- */
.site-card>.site-ph,
.page-work .site-card .site-ph,
.page-work .site-ph--16x9,
.page-work .site-ph--4x3,
.page-work .site-svc .site-ph{max-width:none!important;width:100%}

/* ===================================================================
   ㉚ 崩れ止め（全ページ共通）
   ページ個別に付いていた幅・比率の上書きを一掃し、
   画像は「置かれた器の幅いっぱい」「比率は役割ごとに1種類」に統一する
=================================================================== */
/* 1. 画像枠の幅キャップを全解除（.page-top / .page-work の個別指定を含む） */
.site-ph{max-width:none!important}
.site-svc-band,.site-svc-card .site-ph,.site-svc-mini .site-ph,
.page-work .site-ph--16x9,.page-work .site-ph--4x3,
.page-work .site-svc .site-ph,.page-work .site-card .site-ph,
.site-band-media--sm{max-width:none!important;width:100%}

/* 2. 比率は役割ごとに1種類だけ（混在をやめる） */
.site-row>.xw-wrap>.site-ph{aspect-ratio:32/9!important}   /* セクション直下の帯 */
.site-card>.site-ph{aspect-ratio:16/9!important}            /* カード内の写真 */
.site-blogcard>.site-ph,.site-cards3 .site-ph{aspect-ratio:4/3!important} /* 一覧のサムネイル */
.site-trio .site-ph{aspect-ratio:4/3!important}
@media (max-width:640px){
  .site-row>.xw-wrap>.site-ph{aspect-ratio:21/9!important}
  .site-card>.site-ph{aspect-ratio:16/9!important}
}

/* 3. 版面からの飛び出しを止める（片側ブリードは廃止済み） */
.site-bleed-right{margin-right:0!important}
.site-band-media--wide{margin-inline:0!important}

/* 4. 3列・2列グリッドの折り返しを全ページで同じ段階に揃える */
.site-grid--3,.site-phase3,.site-cards3,.site-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.site-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){
  .site-grid--3,.site-phase3,.site-cards3,.site-trio,.site-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .site-grid--3,.site-phase3,.site-cards3,.site-trio,.site-grid--4,.site-grid--2{grid-template-columns:1fr}
}

/* ---------- ㉛ バナーの英字あしらい（CTA・本文中の大バナー共通） ---------- */
/* 和文＝伸びる列／英字＝和文のすぐ右／矢印＝右端。3者を1行に固定して崩さない */
.site-btn__t{flex:0 1 auto;min-width:0}

.site-btn__en{font-family:var(--font-mono);font-style:normal;font-size:1rem;font-weight:700;letter-spacing:.24em;opacity:.6;flex:none;white-space:nowrap}
.site-btn:hover .site-btn__en{opacity:.9}
@media (max-width:640px){.site-btn__en{font-size:13px}}

/* ---------- ㉜ 縦積み（タブレット縦・スマホ）のセクション余白を詰める ---------- */
@media (max-width:900px){
  .site-row{padding-block:clamp(44px,5.6vh,68px)}
  .site-subhero+.site-row{padding-top:clamp(76px,9.5vh,118px)}
  .site-cta.site-row{padding-block:clamp(96px,12vh,148px)}
  .site-sechead{margin-bottom:clamp(22px,3.2vh,34px)}
  :root{--el-gap:clamp(20px,3vh,30px)}
}
@media (max-width:640px){
  .site-row{padding-block:clamp(38px,4.6vh,54px)}
  .site-subhero+.site-row{padding-top:clamp(62px,7.6vh,90px)}
  .site-cta.site-row{padding-block:clamp(84px,10.4vh,120px)}
  .site-sechead{margin-bottom:clamp(18px,2.8vh,28px)}
}

/* ---------- ㉝ スマホのCTA：見出しと本文は左揃え（ボタンは全幅のまま） ---------- */
@media (max-width:640px){
  .site-cta{text-align:left}
  .site-cta .site-eyebrow{justify-content:flex-start}
  .site-cta .site-h2,.site-cta .site-lead,.site-cta .site-body,.site-cta p{text-align:left;margin-inline:0}
  .site-cta-actions{justify-content:stretch}
}

/* ---------- ㉞ 横スクロール（表など）のスクロールバーをオレンジに ---------- */
.site-tablewrap,.scenes-pin,.site-scrollx{scrollbar-color:var(--c-orange) rgba(255,255,255,.08);scrollbar-width:thin}
.site-tablewrap::-webkit-scrollbar,.scenes-pin::-webkit-scrollbar,.site-scrollx::-webkit-scrollbar{height:8px}
.site-tablewrap::-webkit-scrollbar-track,.scenes-pin::-webkit-scrollbar-track,.site-scrollx::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.site-tablewrap::-webkit-scrollbar-thumb,.scenes-pin::-webkit-scrollbar-thumb,.site-scrollx::-webkit-scrollbar-thumb{background:var(--c-orange);border-radius:0}
.site-tablewrap::-webkit-scrollbar-thumb:hover,.scenes-pin::-webkit-scrollbar-thumb:hover,.site-scrollx::-webkit-scrollbar-thumb:hover{background:var(--c-orange-btn,var(--c-orange))}

/* ---------- ㉟ スマホ：本文中のボタンは全幅に（英字ラベル込みで nowrap のため枠から溢れる） ---------- */
@media (max-width:640px){
  /* ボタン型リンク：和文は左揃えで折り返し、英字は下の行に置く（横並びだと枠から溢れる） */
  .site-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box;
    gap:6px;padding:16px 52px 16px 20px;text-align:left;white-space:normal;justify-content:flex-start}
  .site-btn .site-btn__t{width:100%;min-width:0;text-align:left}
  .site-btn .site-btn__en{order:3;flex:none;max-width:none;white-space:nowrap;text-align:left;opacity:.62}
  /* 矢印は行の右端に固定（縦積みの3行目に落とさない） */
  .site-btn::after{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
  .site-cta-actions .site-btn,.site-svc-card .site-btn,.site-msg .site-btn{
    flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:6px;padding-right:52px}
  .site-cta-actions .site-btn .site-btn__en,.site-svc-card .site-btn .site-btn__en,.site-msg .site-btn .site-btn__en{order:3}
  .site-cta-actions .site-btn::after,.site-svc-card .site-btn::after,.site-msg .site-btn::after{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0;min-width:0}
}

/* ================= nk-lower.css（受領データそのまま・読み込み順を保持） ================= */
/* ===================================================================
   nk-lower.css ── 下層ページ 装飾レイヤー（v1 / 2026-09-03）
   目的：文字だけで単調な下層ページに、線画アイコン・図解・写真枠の
   リズムを足す。既存トーン（直角・ダーク・ライム1点アクセント）を踏襲。
   ※本文テキストは一切変更しない。ここで足すのは装飾と枠のみ。
   =================================================================== */

/* ---------- ① 線画アイコン（白1色＋ライムのアクセント1点） ---------- */
.nk-ico{display:block;width:clamp(36px,3.6vw,46px);height:auto;flex:none;color:#f5f5f5}
.nk-ico path,.nk-ico circle,.nk-ico rect,.nk-ico line,.nk-ico polyline{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.nk-ico .ac{stroke:var(--c-lime);stroke-width:2.4}
.nk-ico .acf{fill:var(--c-lime);stroke:none}
.nk-card-ico{display:block;line-height:0}
.site-card>.nk-card-ico+h3{margin-top:clamp(14px,1.6vw,18px)}

/* ---------- ② セクション直下の写真帯：上下の離れを固定 ---------- */
.site-row>.xw-wrap>.site-ph.nk-band{margin-top:clamp(30px,3.6vw,48px);margin-bottom:0}

/* ---------- ③ テキスト＋縦写真の2分割（OUR WAY など） ---------- */
.nk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%);gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(26px,3vw,40px)}
.nk-split-body>*+*{margin-top:clamp(14px,1.6vw,20px)}
.nk-split-body .site-quote{margin-top:clamp(26px,3vw,40px)}
.nk-split-media{aspect-ratio:3/4!important;width:100%}
@media (max-width:900px){
  .nk-split{grid-template-columns:1fr;gap:clamp(24px,3vw,32px)}
  /* 縦積みは画像→テキストの順で統一 */
  .nk-split-media{order:-1}
  .nk-split-media{aspect-ratio:16/9!important}
}

/* ---------- ④ 3回塗りの断面図（層が1枚ずつ積まれていくのを見せる） ---------- */
.nk-coat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(30px,3.6vw,48px)}
.nk-coat-item{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,28px);background:var(--c-bg-deep);border:1px solid var(--c-line);border-top:2px solid var(--c-line)}
.nk-coat-item:last-child{border-top-color:var(--c-lime)}
.nk-coat-item em{font-family:var(--font-en);font-style:normal;font-size:var(--fs-caption);letter-spacing:.16em;color:var(--c-muted)}
.nk-coat-item h4{margin:8px 0 0;font-size:var(--fs-h3);font-weight:700;line-height:1.4;color:var(--c-white)}
.nk-coat-stack{margin-top:auto;padding-top:clamp(20px,2.4vw,30px);display:flex;flex-direction:column-reverse;gap:2px;min-height:154px;justify-content:flex-start}
.nk-coat-l{display:grid;place-items:center;height:28px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#e6e6e6;background:#242424;border:1px solid var(--c-line)}
.nk-coat-l--base{height:38px;background:#181818;color:var(--c-muted)}
/* 前工程で塗り終えた層：ライムを薄く敷いて「積み上がってきた」ことを示す */
.nk-coat-l--done{background:rgba(198,255,0,.14);border-color:rgba(198,255,0,.4);color:#eaffb0}
.nk-coat-l--new{background:var(--c-lime);border-color:var(--c-lime);color:#121212}
@media (max-width:720px){
  .nk-coat{grid-template-columns:1fr}
  .nk-coat-stack{min-height:0}
}

/* ---------- ⑤ 塗料グレード：カード＋耐久バー（表を横スクロールさせない） ---------- */
.nk-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:var(--el-gap)}
.nk-grade-card{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,26px);background:var(--c-bg-deep);border:1px solid var(--c-line)}
.nk-grade-card--pick{border-color:var(--c-lime)}
.nk-grade-name{font-size:var(--fs-h3);font-weight:700;line-height:1.4;color:var(--c-white)}
.nk-grade-years{margin-top:6px;font-family:var(--font-en);font-size:var(--fs-lead);color:var(--c-lime);letter-spacing:.02em}
.nk-grade-meter{margin-top:14px;height:4px;background:#242424;position:relative}
.nk-grade-meter i{position:absolute;inset:0 auto 0 0;width:var(--w);background:#6a6a6a;display:block}
.nk-grade-card--pick .nk-grade-meter i{background:var(--c-lime)}
.nk-grade-dl{margin-top:clamp(18px,2.2vw,24px);display:grid;gap:14px}
.nk-grade-dl>div{display:grid;gap:5px}
.nk-grade-dl dt{font-family:var(--font-en);font-size:var(--fs-caption);letter-spacing:.1em;color:var(--c-muted)}
.nk-grade-dl dd{margin:0;font-size:var(--fs-small);line-height:1.85;color:#e6e6e6;word-break:normal;text-wrap:pretty}
@media (max-width:1180px){.nk-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.nk-grade{grid-template-columns:1fr}}

/* ---------- ⑥ 料金表：工期セルに相対バーを添える ---------- */
.nk-dur{display:grid;gap:9px;min-width:6.5em}
.nk-dur i{display:block;height:3px;background:#2b2b2b;position:relative}
.nk-dur i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--c-lime)}
.nk-dur--tbd i::before{width:100%;background:repeating-linear-gradient(90deg,#5a5a5a 0 4px,transparent 4px 8px)}

/* ---------- ⑦ BEFORE / AFTER の見せ場 ---------- */
.nk-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-bottom:clamp(30px,3.6vw,48px)}
.nk-ba figure{margin:0}
.nk-ba .site-ph{aspect-ratio:4/3!important;width:100%}
.nk-ba figcaption{margin-top:12px;display:flex;align-items:center;gap:12px;font-family:var(--font-en);font-size:var(--fs-caption);letter-spacing:.18em;color:var(--c-muted)}
.nk-ba figcaption::after{content:"";flex:1;height:1px;background:var(--c-line)}
.nk-ba figure+figure figcaption{color:var(--c-lime)}
.nk-ba figure+figure figcaption::after{background:var(--c-lime);opacity:.4}
@media (max-width:640px){.nk-ba{grid-template-columns:1fr}}

/* ===================================================================
   現金負担０円リフォーム：図解の精度を上げる
   =================================================================== */

/* ---------- ⑧ 借換え前後の横バー：比率を控えめにし、差分に補助線とブラケット ---------- */
.nk-dia .site-diagram-rows{position:relative}
.nk-dia .site-diagram-seg--after{flex:1 1 82%!important}
.nk-dia .site-diagram-seg--zero{flex:1 1 18%!important;font-size:13px}
.nk-dia .site-diagram-seg--before{position:relative}
.nk-dia .site-diagram-seg--before::after{content:"";position:absolute;left:82%;top:0;height:calc(100% + clamp(12px,1.4vw,18px));border-left:1px dashed var(--c-lime);opacity:.6}
.nk-dia .site-diagram-seg--zero{position:relative}
.nk-dia .site-diagram-seg--zero::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:6px;border:1px solid var(--c-lime);border-top:0;opacity:.85}
.nk-dia .site-diagram-foot{text-align:left;margin-left:calc(5.5em + clamp(12px,1.6vw,20px));margin-top:clamp(24px,2.8vw,34px)!important;padding-left:14px!important;border-left:2px solid var(--c-lime)}
@media (max-width:720px){
  .nk-dia .site-diagram-seg--before::after{display:none}
  .nk-dia .site-diagram-foot{margin-left:0}
  /* 0円枠のラベルが枠内に収まらないため、幅を確保して2行で組む */
  .nk-dia .site-diagram-seg--after{flex:1 1 62%!important}
  .nk-dia .site-diagram-seg--zero{flex:1 1 38%!important;white-space:normal;line-height:1.35;font-size:11px;padding-inline:6px;text-align:center}
}

/* ---------- ⑬ 「〜とは？」の強調枠：枠が大きいので中身のジャンプ率も上げる ---------- */
.site-callout--go>h3{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.45}
.site-callout--go>.site-body{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.95}
.site-callout--go .site-diagram-cap{font-size:clamp(15px,1.1vw,17px)}
.site-callout--go .site-diagram--h .site-diagram-label{font-size:clamp(15px,1.15vw,18px)}
.site-callout--go .site-diagram-seg{font-size:clamp(14px,1.05vw,16px)}
.site-callout--go .nk-dia .site-diagram-seg--zero{font-size:clamp(13px,1vw,15px)}
.site-callout--go .site-diagram-foot{font-size:clamp(1.0625rem,1.5vw,1.35rem)}

.nk-check>li{position:relative;padding-left:clamp(52px,5vw,64px);align-items:center;transition:border-color .35s var(--ease),background .35s var(--ease)}
.nk-check>li::before{position:absolute;left:clamp(18px,2.2vw,26px);top:50%;transform:translateY(-50%);font-size:var(--fs-lead);line-height:1}
.nk-check>li>*{grid-column:1}
.nk-check .site-check-main{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.45}
.nk-check>li{row-gap:0}
.nk-check .site-check-sub{margin-top:2px}
/* リンクではない要素のホバー効果は付けない（サイト全体の方針） */
:is(article,div).site-blogcard:hover{transform:none;border-color:var(--c-line)}
.nk-check-num{position:absolute;right:clamp(16px,2vw,22px);top:50%;transform:translateY(-50%);font-family:var(--font-en);font-size:var(--fs-caption);letter-spacing:.14em;color:#4d4d4d}

/* ---------- ⑩ 式（NOW − AFTER ＝ 0円枠）：桁を揃え、結果だけライムで受ける ---------- */
.nk-eq{align-items:center}
.nk-eq .site-eq-term{border-top:2px solid var(--c-line)}
.nk-eq .site-eq-term--result{background:transparent;border:1px solid var(--c-lime);border-top:2px solid var(--c-lime)}
.nk-eq .site-eq-term--result span{color:var(--c-lime)}
.nk-eq .site-eq-term--result strong{color:var(--c-white)}
.nk-eq .site-eq-op{flex:none;width:clamp(42px,3.6vw,54px);aspect-ratio:1;align-self:center;position:relative;font-size:0;color:transparent;border:1px solid var(--c-white);background:var(--c-bg-deep)}
.nk-eq .site-eq-op::before,.nk-eq .site-eq-op::after{content:"";position:absolute;left:26%;right:26%;height:2px;background:var(--c-white)}
.nk-eq .site-eq-op::before{top:calc(50% - 1px)}
.nk-eq .site-eq-op::after{display:none}
.nk-eq .site-eq-op--eq{border-color:rgba(198,255,0,.5)}
.nk-eq .site-eq-op--eq::before{top:calc(50% - 5px);background:var(--c-lime)}
.nk-eq .site-eq-op--eq::after{display:block;top:calc(50% + 3px);background:var(--c-lime)}
@media (max-width:900px){
  /* タブレット縦までは NOW − AFTER ＝ の横並びを保つ */
  .nk-eq{flex-wrap:nowrap;align-items:stretch}
  .nk-eq .site-eq-term{flex:1 1 0;padding:clamp(14px,2vw,20px)}
  .nk-eq .site-eq-term strong{font-size:clamp(1rem,2.1vw,1.2rem)}
  .nk-eq .site-eq-op{width:clamp(34px,4.4vw,44px)}
}
@media (max-width:640px){
  /* スマホは縦積み。flex-basis(180px) が高さになって下が間延びするので解除 */
  .nk-eq{flex-direction:column;flex-wrap:wrap;align-items:stretch}
  .nk-eq .site-eq-term{flex:0 0 auto;padding:clamp(16px,4.4vw,20px);text-align:center}
  .nk-eq .site-eq-op{flex:0 0 auto;margin:0 auto}
}

/* ---------- ⑪ 3段フェーズ：ゴースト連番＋アイコンで工程の進みを見せる ---------- */
.nk-phase3 .site-phase{position:relative;overflow:hidden;padding-top:clamp(24px,2.8vw,34px);background:var(--c-bg-deep)}
.nk-phase-num{position:absolute;right:-4px;top:-14px;font-family:var(--font-en);font-size:clamp(4.2rem,7vw,6.4rem);line-height:1;font-weight:700;color:#fff;opacity:.05;pointer-events:none}
.nk-phase3 .nk-ico{margin-bottom:clamp(16px,1.8vw,22px)}
.nk-phase3 .site-phase h3{margin-top:8px}

/* ---------- ⑳ 工程ステップ：連番をタイトルの字面中央に合わせ、タイトルと注釈を1組にする ---------- */
/* タイトルと注釈は別のグリッド行に落ちるため、行間の gap（最大32px）が効いてしまう */
.site-steps>li{align-items:start;row-gap:0}
.site-steps>li::before{align-self:start;margin-top:.06em}
.site-steps .site-step-title{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.4}
.site-steps .site-step-title+p{margin-top:4px;line-height:1.8}

/* ---------- ⑱ 本文中の小見出し：本文と続けて置かれるので、前を大きく空けてライムで受ける ---------- */
.site-h3{color:var(--c-lime)}
.site-body+.site-h3,.site-lead+.site-h3,ul+.site-h3,ol+.site-h3,.site-quote+.site-h3{margin-top:clamp(52px,5.5vw,88px)}

/* ---------- ⑰ 診断への誘導文：ボタン直前の一段なのでジャンプ率を上げる ---------- */
.nk-diaglead>.site-body{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.75;color:var(--c-white)}
.nk-diaglead>.site-body+.site-body{margin-top:6px}

/* ---------- ⑫ 対象工事：スラッシュ区切りをタイルに組み替える ---------- */
.nk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.nk-chips>span:not(.nk-chips-sep){padding:12px clamp(16px,2vw,22px);background:var(--c-bg-deep);border:1px solid var(--c-line);border-left:3px solid var(--c-lime);font-size:var(--fs-small);font-weight:700;color:var(--c-white)}
.nk-chips-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- ⑭ 箇条書き：全角スラッシュの記号を短い罫のマーカーに ---------- */
.site-bullets>li{padding-left:36px}
.site-bullets>li::before{content:"";top:calc(12px + .975em);transform:translateY(-50%);left:0;width:20px;height:2px;background:var(--c-orange)}

/* ---------- ⑮ 強調枠（0円ページ以外）：見出しと本文のジャンプ率を全ページで揃える ---------- */
.site-callout:not(.site-callout--go)>h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.45}
.site-callout:not(.site-callout--go)>.site-body{font-size:clamp(1.0625rem,1.25vw,1.175rem);line-height:1.95}

/* ---------- ⑥ 工程フロー：右に縦写真を添え、リストの長さを図で受ける ---------- */
.nk-flowsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32%);gap:clamp(28px,4vw,72px);align-items:start}
.nk-flowsplit>.site-steps{margin-top:0}
/* 写真の下端はリスト最終行（07）の下罫に合わせる */
.nk-flowsplit-media{align-self:stretch;display:flex}
.nk-flowsplit-media>.site-ph{aspect-ratio:auto!important;width:100%;height:100%}
@media (max-width:900px){
  .nk-flowsplit{grid-template-columns:1fr;gap:clamp(24px,3vw,32px)}
  .nk-flowsplit-media{display:block}
  .nk-flowsplit-media>.site-ph{aspect-ratio:1/1!important;height:auto}
}

/* ---------- 借換え図解：中間幅ではライム枠の文字が窮屈なので幅と余白を確保 ---------- */
@media (max-width:1024px){
  .nk-dia .site-diagram-track{height:clamp(62px,8vw,74px)}
  /* 破線はライム枠の左端（＝借換え後バーの右端）に合わせる */
  .nk-dia .site-diagram-seg--before::after{left:70%}
  .nk-dia .site-diagram-seg--after{flex:1 1 70%!important}
  .nk-dia .site-diagram-seg--zero{flex:1 1 30%!important;white-space:normal;line-height:1.35;padding-inline:10px;text-align:center}
}

/* ---------- スマホ：横バーは細く読みにくいので、2本の縦バーに組み替える ---------- */
@media (max-width:640px){
  .nk-dia .site-diagram-rows{grid-template-columns:1fr 1fr;gap:14px;align-items:end}
  .nk-dia .site-diagram-row{display:flex;flex-direction:column-reverse;gap:10px}
  .nk-dia .site-diagram-track{flex-direction:column;height:clamp(190px,52vw,240px)}
  .nk-dia .site-diagram-seg{white-space:normal;line-height:1.4;font-size:12px;padding:8px;text-align:center}
  .nk-dia .site-diagram-seg--before{flex:1 1 100%!important}
  .nk-dia .site-diagram-seg--after{flex:1 1 62%!important}
  /* 上に空いた分（ライム）＝リフォームに充てられる枠 */
  .nk-dia .site-diagram-seg--zero{flex:1 1 38%!important;margin:0 0 -1px}
  .nk-dia .site-diagram-track:has(.site-diagram-seg--zero){flex-direction:column-reverse}
  .nk-dia .site-diagram--h .site-diagram-label,.nk-dia .site-diagram-label{text-align:center;white-space:normal}
  .nk-dia .site-diagram-seg--before::after,.nk-dia .site-diagram-seg--zero::after{display:none!important}
  .nk-dia .site-diagram-foot{margin-left:0;margin-top:clamp(18px,3vw,24px)!important}
}

/* ---------- 3点組の写真は全機種で横1列（縦積みにすると帯が3つ続いて間延びする） ---------- */
.site-trio{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(6px,1.4vw,20px)}
@media (max-width:640px){
  .site-trio .site-ph{aspect-ratio:1/1!important}
}

/* ---------- 借換え図解：装飾（破線・ブラケット）が overflow:hidden で消える／ラベル2行目が切れるのを解消 ---------- */
.nk-dia .site-diagram-track{height:auto;min-height:clamp(56px,6vw,72px)}
.nk-dia .site-diagram-seg{overflow:visible;padding-block:10px;line-height:1.4}
@media (max-width:640px){
  .nk-dia .site-diagram-track{min-height:0}
}


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

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

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

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

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

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

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

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

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


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

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

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

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


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


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


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

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


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

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


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

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

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


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


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


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

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


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


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

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


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


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


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


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


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


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

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


/* ===== _css-3_override.css ===== */
/* CueZilla 動的パーツ向けの上書き（skin より後に結合される唯一の場所／R-30）
   中身は 受領データ/assets/add.css の「add.css 貼り付け」ブロック5本をそのまま移したもの。
   site.css 側に置くと skin の !important に順序で負けて1行も効かない（教訓 received-data-ships-ready-made-addcss-*）。 */
/* ---- 分割ブロックの余白（当ファイル管轄＝自前HTML） ----
   CueZillaパーツを挟むために1セクションを2ブロックへ割った箇所。
   見出し側は下の余白を、続き側は上の余白を落として、パーツと地続きに見せる。 */
[data-cz-part="lead"]{ padding-bottom:0 !important; }
[data-cz-part="foot"]{ padding-top:0 !important; }

/* ---- パンくず（R-10 / 動的ページCSS_実セレクタ参考 §6）----
   システム描画ページでは CueZilla が parts231 を自動で出す。BODY内JSが parts231 を
   下層ヒーローの中へ移し、その時だけ手書きの .site-crumb を隠す（JSが動かない場合は手書きが残る）。
   ★配色・区切り記号は実機の parts231 を harvestEW() で採ってから詰める（R-28）。ここは配置だけ。 */
.site-subhero [class*="_breadcrumb"]{ margin:0 !important; padding:0 !important; background:transparent !important; }
.site-subhero [class*="_breadcrumb"] ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
html.nk-crumb-moved .site-crumb{ display:none !important; }

/* ===== 受領 add.css 貼り付けブロック 1／詳細度を (0,3,x) へ引き上げ済み ===== */
/* === add.css 貼り付け ここから（CMS動的セクション：新着情報帯 design-parts-52 系） === */
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"]{
  background: #1a1a1a !important;
  padding-block: 0 !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .container{
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 80px) !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .content{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-top: 1px solid #3a3a3a !important;
  border-bottom: 1px solid #3a3a3a !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .banner-area{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  background: #ff5c00 !important;
  color: #fff !important;
  font-family: "Space Mono", ui-monospace, monospace !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] li{ border-top: 1px solid #3a3a3a !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] li:first-child{ border-top: 0 !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] li a{
  display: flex !important;
  align-items: center !important;
  min-height: 60px !important;
  padding: 10px 0 !important;
  color: #f5f5f5 !important;
  text-decoration: none !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .parts-52-textarea{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px 22px !important;
  width: 100% !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .date{
  font-family: "Space Mono", ui-monospace, monospace !important;
  font-size: 1rem !important;
  color: #ff5c00 !important;
  letter-spacing: 0.08em !important;
  flex: 0 0 auto !important;
}
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .d-inline-block{ font-size: 1.0625rem !important; line-height: 1.7 !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] li a:hover .d-inline-block{ text-decoration: underline !important; }
@media (min-width: 992px) {
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .content{ flex-direction: row !important; align-items: center !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .banner-area{ flex: 0 0 auto !important; padding: 10px 30px !important; align-self: stretch !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] ul{ flex: 1 1 auto !important; padding-left: 30px !important; }
[class*="design-parts-52"][class*="design-parts-52"][class*="design-parts-52"] .parts-52-textarea{ flex-direction: row !important; align-items: baseline !important; }
}
/* === add.css 貼り付け ここまで === */

/* ===== 受領 add.css 貼り付けブロック 2／詳細度を (0,3,x) へ引き上げ済み ===== */
/* === add.css 貼り付け ここから（CMS動的セクション：記事カード parts131415_blog 系） === */
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"]{
 /* background: #121212 !important;
  background-image: none !important;
  padding-block: clamp(72px, 11vh, 150px) !important;*/
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .container-lg{
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 80px) !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_title_wrap{ margin-bottom: clamp(32px, 5vh, 56px) !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_title_wrap h2{
  color: #f5f5f5 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_title_wrap p{ color: #b2b2b2 !important; margin: 8px 0 0 !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .row{
 /* display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(20px, 2.5vw, 36px) !important;
  margin: 0 !important;*/
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .col{ width: auto !important; padding: 0 !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .card{
  height: 100% !important;
  background: #1e1e1e !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .card-body{ padding: clamp(18px, 2.2vw, 26px) !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .card-title{
  font-family: "Space Mono", ui-monospace, monospace !important;
  font-size: 1rem !important;
  letter-spacing: 0.14em !important;
  color: #ff5c00 !important;
  text-align: left !important;
  margin: 0 0 10px !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .card-text{
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  color: #f5f5f5 !important;
  margin: 0 0 14px !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] a{ text-decoration: none !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] a:hover .card-text{ color: #ff5c00 !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_thumbnail{
  height: 240px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #2b2b2b !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_thumbnail img{
  width: 100% !important;
  height: 100% !important;
 /* object-fit: cover !important;*/
  display: block !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] a:hover .parts131415_blog_thumbnail img{ transform: scale(1.05) !important; }
@media (max-width: 1240px) {
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .row{ grid-template-columns: repeat(2, 1fr) !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_thumbnail{ height: 215px !important; }
}
@media (max-width: 640px) {
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .row{ grid-template-columns: 1fr !important; }
[class*="parts131415_blog"][class*="parts131415_blog"][class*="parts131415_blog"] .parts131415_blog_thumbnail{ height: 205px !important; }
}
/* === add.css 貼り付け ここまで === */

/* ===== 受領 add.css 貼り付けブロック 3／詳細度を (0,3,x) へ引き上げ済み ===== */
/* === add.css 貼り付け ここから（施工実績 parts228 系） === */
[class*="parts228_section"][class*="parts228_section"][class*="parts228_section"]{
 /* padding-block: clamp(48px, 7vh, 90px) clamp(72px, 11vh, 150px) !important;*/
}
[class*="parts228_wrap"][class*="parts228_wrap"][class*="parts228_wrap"]{
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 80px) !important;
}
[class*="parts228_post_list"][class*="parts228_post_list"][class*="parts228_post_list"]{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(20px, 2.5vw, 36px) !important;
}
[class*="parts228_post_wrap"][class*="parts228_post_wrap"][class*="parts228_post_wrap"]{
  display: flex !important;
  flex-direction: column !important;
  background: #1e1e1e !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
[class*="parts228_post_img"][class*="parts228_post_img"][class*="parts228_post_img"]{ aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: #2b2b2b !important; }
[class*="parts228_post_img"][class*="parts228_post_img"][class*="parts228_post_img"] a{ display: block !important; height: 100% !important; }
[class*="parts228_post_img"][class*="parts228_post_img"][class*="parts228_post_img"] img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; }
[class*="parts228_post_wrap"][class*="parts228_post_wrap"][class*="parts228_post_wrap"]:hover [class*="parts228_post_img"] img{ transform: scale(1.05) !important; }
[class*="parts228_post_status"][class*="parts228_post_status"][class*="parts228_post_status"]{ padding: 18px 20px 0 !important; }
[class*="parts228_post_date"][class*="parts228_post_date"][class*="parts228_post_date"]{ font-family: "Space Mono", ui-monospace, monospace !important; font-size: 1rem !important; color: #ff5c00 !important; letter-spacing: 0.08em !important; }
[class*="parts-blog-ex-tag_wrap"][class*="parts-blog-ex-tag_wrap"][class*="parts-blog-ex-tag_wrap"]{ display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 10px 2px 0 !important; }
[class*="parts-blog-ex_tag"][class*="parts-blog-ex_tag"][class*="parts-blog-ex_tag"]{ display: inline-block !important; font-size: 1rem !important; color: #b2b2b2 !important; background: #262626 !important; border: 1px solid #3a3a3a !important; padding: 2px 12px !important; border-radius: 100px !important; }
[class*="parts228_post_title-excerpt"][class*="parts228_post_title-excerpt"][class*="parts228_post_title-excerpt"]{ padding: 12px 20px 22px !important; }
[class*="parts228_post_title"][class*="parts228_post_title"][class*="parts228_post_title"]{ font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.6 !important; margin: 0 !important; }
[class*="parts228_post_title"][class*="parts228_post_title"][class*="parts228_post_title"] a{ color: #f5f5f5 !important; text-decoration: none !important; }
[class*="parts228_post_title"][class*="parts228_post_title"][class*="parts228_post_title"] a:hover{ color: #ff5c00 !important; }
[class*="parts228_post_excerpt"][class*="parts228_post_excerpt"][class*="parts228_post_excerpt"]{ padding: 0 20px 22px !important; font-size: 1rem !important; color: #b2b2b2 !important; line-height: 1.8 !important; }
[class*="parts228_pagenation"][class*="parts228_pagenation"][class*="parts228_pagenation"]{ display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; margin-top: clamp(40px, 5vh, 64px) !important; }
[class*="parts228_pagenation"][class*="parts228_pagenation"][class*="parts228_pagenation"] a{ min-width: 48px !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: "Space Mono", ui-monospace, monospace !important; font-size: 1rem !important; border: 1px solid #3a3a3a !important; border-radius: 8px !important; color: #f5f5f5 !important; text-decoration: none !important; padding-inline: 12px !important; }
[class*="parts228_pagenation"][class*="parts228_pagenation"][class*="parts228_pagenation"] a:hover{ border-color: #ff5c00 !important; color: #ff5c00 !important; }
[class*="parts228_pagenation"][class*="parts228_pagenation"][class*="parts228_pagenation"] .current{ background: #ff5c00 !important; border-color: #ff5c00 !important; color: #fff !important; }
@media (max-width: 1240px) {[class*="parts228_post_list"][class*="parts228_post_list"][class*="parts228_post_list"]{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) {[class*="parts228_post_list"][class*="parts228_post_list"][class*="parts228_post_list"]{ grid-template-columns: 1fr !important; } }
/* === add.css 貼り付け ここまで === */

/* ===== 受領 add.css 貼り付けブロック 4／詳細度を (0,3,x) へ引き上げ済み ===== */
/* === add.css 貼り付け ここから（ブログ parts222 系） === */
[class*="parts222_section"][class*="parts222_section"][class*="parts222_section"]{
  padding-block: clamp(48px, 7vh, 90px) clamp(72px, 11vh, 150px) !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 80px) !important;
}
[class*="parts222_section"][class*="parts222_section"][class*="parts222_section"] > h2{
  font-family: "Space Mono", ui-monospace, monospace !important;
  font-size: 1rem !important;
  letter-spacing: 0.2em !important;
  color: #ff5c00 !important;
  margin: 0 0 clamp(24px, 4vh, 40px) !important;
}
[class*="parts222_wrap"][class*="parts222_wrap"][class*="parts222_wrap"]{ display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; gap: clamp(28px, 4vw, 56px) !important; align-items: start !important; }
[class*="parts222_post_list"][class*="parts222_post_list"][class*="parts222_post_list"]{ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: clamp(20px, 2.5vw, 32px) !important; }
[class*="parts222_post_wrap"][class*="parts222_post_wrap"][class*="parts222_post_wrap"]{ display: flex !important; flex-direction: column !important; background: #1e1e1e !important; border: 1px solid #3a3a3a !important; border-radius: 8px !important; overflow: hidden !important; text-decoration: none !important; }
[class*="parts222_post_img"][class*="parts222_post_img"][class*="parts222_post_img"]{ aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: #2b2b2b !important; }
[class*="parts222_post_img"][class*="parts222_post_img"][class*="parts222_post_img"] img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; }
[class*="parts222_post_wrap"][class*="parts222_post_wrap"][class*="parts222_post_wrap"]:hover [class*="parts222_post_img"] img{ transform: scale(1.05) !important; }
[class*="parts222_post_status"][class*="parts222_post_status"][class*="parts222_post_status"]{ display: flex !important; align-items: center !important; gap: 12px !important; padding: 18px 20px 0 !important; }
[class*="parts222_post_date"][class*="parts222_post_date"][class*="parts222_post_date"]{ font-family: "Space Mono", ui-monospace, monospace !important; font-size: 1rem !important; color: #ff5c00 !important; letter-spacing: 0.08em !important; }
[class*="parts222_post_category"][class*="parts222_post_category"][class*="parts222_post_category"]{ font-size: 1rem !important; color: #b2b2b2 !important; background: #262626 !important; border: 1px solid #3a3a3a !important; padding: 2px 12px !important; border-radius: 100px !important; }
[class*="parts222_post_title-excerpt"][class*="parts222_post_title-excerpt"][class*="parts222_post_title-excerpt"]{ padding: 12px 20px 22px !important; }
[class*="parts222_post_title"][class*="parts222_post_title"][class*="parts222_post_title"]{ font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.6 !important; color: #f5f5f5 !important; margin: 0 !important; }
[class*="parts222_post_wrap"][class*="parts222_post_wrap"][class*="parts222_post_wrap"]:hover [class*="parts222_post_title"]{ color: #ff5c00 !important; }
[class*="parts222_pagenation"][class*="parts222_pagenation"][class*="parts222_pagenation"]{ display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; margin-top: clamp(40px, 5vh, 64px) !important; }
[class*="parts222_pagenation"][class*="parts222_pagenation"][class*="parts222_pagenation"] a{ min-width: 48px !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: "Space Mono", ui-monospace, monospace !important; font-size: 1rem !important; border: 1px solid #3a3a3a !important; border-radius: 8px !important; color: #f5f5f5 !important; text-decoration: none !important; padding-inline: 12px !important; }
[class*="parts222_pagenation"][class*="parts222_pagenation"][class*="parts222_pagenation"] a:hover{ border-color: #ff5c00 !important; color: #ff5c00 !important; }
[class*="parts222_pagenation"][class*="parts222_pagenation"][class*="parts222_pagenation"] .current{ background: #ff5c00 !important; border-color: #ff5c00 !important; color: #fff !important; }
[class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"] + [class*="parts222_sidebar_wrap"]{ margin-top: clamp(28px, 4vh, 40px) !important; }
[class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"] h3{ font-size: 1rem !important; font-family: "Space Mono", ui-monospace, monospace !important; letter-spacing: 0.14em !important; background: #262626 !important; border-left: 3px solid #ff5c00 !important; color: #f5f5f5 !important; padding: 12px 16px !important; margin: 0 0 8px !important; }
[class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"] ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
[class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"] li{ border-bottom: 1px solid #3a3a3a !important; }
[class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"] li a{ display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 14px 4px !important; min-height: 44px !important; color: #f5f5f5 !important; text-decoration: none !important; }
[class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"][class*="parts222_sidebar_wrap"] li a:hover{ color: #ff5c00 !important; }
[class*="parts222_sidebar_date"][class*="parts222_sidebar_date"][class*="parts222_sidebar_date"]{ font-family: "Space Mono", ui-monospace, monospace !important; font-size: 1rem !important; color: #ff5c00 !important; }
[class*="parts222_sidebar_post_title"][class*="parts222_sidebar_post_title"][class*="parts222_sidebar_post_title"]{ font-size: 1rem !important; line-height: 1.7 !important; margin: 0 !important; }
[class*="category_post_count"][class*="category_post_count"][class*="category_post_count"] li a{ flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
[class*="parts222_sidebar_post_category"][class*="parts222_sidebar_post_category"][class*="parts222_sidebar_post_category"]{ margin: 0 !important; font-size: 1rem !important; }
[class*="parts222_sidebar_post_category_count"][class*="parts222_sidebar_post_category_count"][class*="parts222_sidebar_post_category_count"]{ font-family: "Space Mono", ui-monospace, monospace !important; font-size: 1rem !important; border: 1px solid #3a3a3a !important; border-radius: 4px !important; padding: 0 10px !important; color: #b2b2b2 !important; }
@media (max-width: 1240px) {
[class*="parts222_wrap"][class*="parts222_wrap"][class*="parts222_wrap"]{ grid-template-columns: 1fr !important; }
[class*="parts222_pagenation"][class*="parts222_pagenation"][class*="parts222_pagenation"] .d-none{ display: none !important; }
}
@media (max-width: 640px) {[class*="parts222_post_list"][class*="parts222_post_list"][class*="parts222_post_list"]{ grid-template-columns: 1fr !important; } }
/* === add.css 貼り付け ここまで === */

/* ===== 受領 add.css 貼り付けブロック 5／詳細度を (0,3,x) へ引き上げ済み ===== */
/* === add.css 貼り付け ここから（フォーム parts213 / parts219 系 ＋ 導入文 parts210 系） === */
[class*="parts210_section_content"][class*="parts210_section_content"][class*="parts210_section_content"]{ padding-block: clamp(48px, 7vh, 80px) 0 !important; }
[class*="parts210_content_wrap"][class*="parts210_content_wrap"][class*="parts210_content_wrap"]{ width: 100% !important; max-width: 1200px !important; margin-inline: auto !important; padding-inline: clamp(20px, 5vw, 80px) !important; }
[class*="parts210_content"][class*="parts210_content"][class*="parts210_content"] p{ font-size: 1.0625rem !important; line-height: 2 !important; color: #b2b2b2 !important; max-width: 70ch !important; }
[class*="parts210_content"][class*="parts210_content"][class*="parts210_content"] p + p{ margin-top: 1.2em !important; }
[class*="parts210_content"][class*="parts210_content"][class*="parts210_content"] a{ color: #ff5c00 !important; }

.contact_section.contact_section.contact_section{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-block: clamp(48px, 7vh, 80px) clamp(72px, 11vh, 150px) !important;
}
.contact_section.contact_section.contact_section [class*="_form_wrap"]{
  width: 100% !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 80px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.contact_section.contact_section.contact_section dl{ display: block !important; /*grid-template-columns: clamp(160px, 26%, 260px) 1fr !important; gap: clamp(10px, 2vw, 28px) !important; align-items: start !important; padding-block: clamp(14px, 2vh, 20px) !important; margin: 0 !important; */}
.contact_section.contact_section.contact_section dt{ font-size: 1.0625rem !important; font-weight: 700 !important; color: #f5f5f5 !important; line-height: 1.7 !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 8px !important; padding-top: 10px !important;    margin-bottom: 10px!important; }
.contact_section.contact_section.contact_section dd{ margin: 0 !important; }
.contact_section.contact_section.contact_section .required{ font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; background: #ff5c00 !important; padding: 1px 10px !important; border-radius: 2px !important; }
.contact_section.contact_section.contact_section .attention{ display: block !important; width: 100% !important; font-size: 1rem !important; font-weight: 500 !important; color: #ff5c00 !important; line-height: 1.7 !important; }
.contact_section.contact_section.contact_section input[type="text"], .contact_section.contact_section.contact_section input[type="email"], .contact_section.contact_section.contact_section input[type="tel"], .contact_section.contact_section.contact_section textarea{
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  font: inherit !important;
  font-size: 1.0625rem !important;
  color: #f5f5f5 !important;
  background: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 4px !important;
}
.contact_section.contact_section.contact_section textarea{ min-height: 190px !important; line-height: 1.9 !important; resize: vertical !important; }
.contact_section.contact_section.contact_section input::placeholder, .contact_section.contact_section.contact_section textarea::placeholder{ color: #777 !important; }
.contact_section.contact_section.contact_section input:focus, .contact_section.contact_section.contact_section textarea:focus{ outline: 3px solid #c6ff00 !important; outline-offset: 2px !important; border-color: #ff5c00 !important; }
.contact_section.contact_section.contact_section input[type="file"]{ font: inherit !important; font-size: 1rem !important; color: #b2b2b2 !important; min-height: 44px !important; }
.contact_section.contact_section.contact_section .form_address dd{ display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; color: #b2b2b2 !important; }
.contact_section.contact_section.contact_section .form_address .zip{ max-width: 180px !important; }
.contact_section.contact_section.contact_section .form_address input[name="address"]{ flex: 1 1 260px !important; }
.contact_section.contact_section.contact_section dd label{ display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; margin-right: 20px !important; font-size: 1.0625rem !important; color: #f5f5f5 !important; cursor: pointer !important; }
.contact_section.contact_section.contact_section dd input[type="checkbox"]{ width: 20px !important; height: 20px !important; accent-color: #ff5c00 !important; }
.contact_section.contact_section.contact_section .error{ margin: 6px 0 0 !important; font-size: 1rem !important; color: #ff5c00 !important; }
.contact_section.contact_section.contact_section .error:empty{ display: none !important; }
.contact_section.contact_section.contact_section .contact_submit{ display: flex !important; justify-content: center !important; margin-top: clamp(28px, 4vh, 44px) !important; }
.contact_section.contact_section.contact_section .contact_submit input[type="submit"]{
  font: inherit !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  min-height: 56px !important;
  padding: 0 48px !important;
  color: #f5f5f5 !important;
 /* background: transparent !important;*/
  border: 2px solid #ff5c00 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.3s, color 0.3s !important;
}
.contact_section.contact_section.contact_section .contact_submit input[type="submit"]:hover{ background: #ff5c00 !important; color: #fff !important; }
@media (max-width: 640px) {
.contact_section.contact_section.contact_section dl{ grid-template-columns: 1fr !important; gap: 8px !important; }
.contact_section.contact_section.contact_section dt{ padding-top: 0 !important; }
}
/* === add.css 貼り付け ここまで === */
.parts222_section{
        background-color: #12121200!important;
}
.parts213_section_form{
        background-color: #12121200!important;
            padding-bottom: 1px !important;
}
.parts228_section{
     background-color: #12121200!important;
            padding-bottom: 1px !important;
                padding-top: 1px!important;
}

/* ヘッダー：1241〜1529px はナビが1行に収まらないため、余白・字間・字面を詰める */
@media (min-width: 1241px) and (max-width: 1529.98px) {
  header#siteHeader.site-header { --gutter: clamp(20px, 2.2vw, 44px); gap: clamp(12px, 1.2vw, 26px); }
  header#siteHeader .brand { flex: 0 0 auto; }
  header#siteHeader .brand-pre { white-space: nowrap; }
  header#siteHeader .nav { flex-wrap: nowrap; gap: clamp(10px, 1vw, 22px); font-size: clamp(14px, 1.05vw, 16px); }
  header#siteHeader .nav > a,
  header#siteHeader .nav .nav-item > a { white-space: nowrap; font-size: inherit; }
  header#siteHeader .nav-cta { white-space: nowrap; padding-inline: clamp(12px, 1vw, 18px); }
  header#siteHeader .nav-tel { white-space: nowrap; }
}
.parts131415_blog_eTLhm6FLsD.bg-color,
.parts131415_blog_WsgyOGuTZC.bg-color,
.parts131415_blog_MnbCNVSaSD.bg-color,
.parts131415_blog_Y5HjUdhFIp.bg-color,
.parts131415_blog_nKiqv3KgrN.bg-color,
.parts131415_blog_0ayNqGdC9D.bg-color{
     background-color: #12121200!important;
}
.article_prevnext_wrap > div > a{
        background: #262626 !important;
    border: 1px solid #3a3a3a !important;
}
.article_prevnext_wrap .article_next a::after{
    border-top-color: #ffffff!important;
    border-right-color: #ffffff!important;
}
.article_prevnext_wrap .article_prev a::before{
        border-top-color: #ffffff!important;
    border-right-color: #ffffff!important;
}
.article_category_wrap{
        background: rgb(255 255 255 / 30%)!important;
}
.parts222_sidebar{
        max-width: 100%!important;
}
.parts131415_blog_NeJEjhmXA0.bg-color{
            background-color: #12121200!important;
            padding-bottom: 1px !important;
             padding-top: 1px !important;
}
.parts131415_blog_ES7ZcYhAzu.bg-color{
    /* background-color: #121212!important;*/
            padding-bottom: 1px !important;
             padding-top: 1px !important;
}
.parts131415_blog_ES7ZcYhAzu .card img{
        object-fit: contain!important;
}

.parts231_breadcrumb.p-breadcrumb{
        display: none!important;
}
.contact_section.contact_section.contact_section .required{
         margin-left: 50px!important;
}