/* 株式会社リブテック 共通スタイル（トップページ・工事メニュー個別ページ） */
/* ============================================================
   TOKENS — 明るい紙面に一本化。暗転はフッター等の帯だけ
   ============================================================ */
:root {
  --paper:   #FAFAF9;   /* 主となる紙面 */
  --band:    #EFF0EC;   /* 交互に沈める面。モルタルの色 */
  --band-2:  #E5E7E1;   /* さらに一段沈めた面 */
  --ink:     #14181C;   /* 墨。わずかに青を含む黒 */
  --ink-2:   #565D66;   /* 副次テキスト */
  --ink-3:   #7C838B;   /* 三次テキスト */
  --blue:    #0E43C8;   /* 深いウルトラマリン */
  --blue-2:  #D9E2F7;   /* 青の淡い面 */
  --volt:    #FFC825;   /* 通電しているものだけに使う黄 */
  --duct:    #ECE6D6;   /* 化粧カバーのアイボリー */
  --rule:    #D3D6CF;   /* 罫線 */
  --rule-2:  #E2E4DE;   /* 淡い罫線 */

  --dark:      #14181C; /* 反転帯 */
  --dark-fg:   #F2F3F0;
  --dark-mute: #99A1A9;
  --dark-rule: #2C333A;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;

  --gut: clamp(20px, 4.5vw, 56px);
  --shell: 1200px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, h4, p, figure, table, dl, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--volt); color: #14181C; }
img, svg { max-width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }

.frame { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
@media (min-width: 1000px) { .frame { border-inline: 1px solid var(--rule-2); } }

.code {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ============================================================
   HEADER
   ============================================================ */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead .frame {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 70px;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo svg { flex: none; display: block; }
.logo b { font-size: 15px; font-weight: 800; letter-spacing: .05em; line-height: 1.2; white-space: nowrap; }
.logo .code { display: block; font-size: 9.5px; letter-spacing: .2em; margin-top: 1px; }

.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav a.n {
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  padding: 6px 11px; position: relative; white-space: nowrap;
}
.mainnav a.n::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px;
  height: 2px; background: var(--volt);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.mainnav a.n:hover::after { transform: scaleX(1); }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap; background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  padding: 11px 20px; border: 1px solid var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cta:hover { background: var(--volt); color: #14181C; border-color: var(--volt); }
.cta svg { flex: none; }
.cta--lg { padding: 17px 30px; font-size: 15px; }
.cta--out { background: transparent; color: var(--ink); border-color: var(--rule); }
.cta--out:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 折りたたみメニュー（JSなしで動く details） */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  padding: 10px 14px; border: 1px solid var(--rule);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu .sheet {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--paper); border: 1px solid var(--ink); padding: 6px 0;
}
.menu .sheet a {
  display: block; padding: 12px 20px; font-size: 14px; font-weight: 700;
  border-bottom: 1px solid var(--rule-2);
}
.menu .sheet a:last-child { border-bottom: 0; }
.menu .sheet a:hover { background: var(--band); }
@media (max-width: 1080px) {
  .mainnav a.n { display: none; }
  .menu { display: block; }
}
@media (max-width: 720px) {
  .masthead .frame { height: 60px; gap: 10px; }
  .logo svg { width: 28px; height: 28px; }
  .logo b { font-size: 13.5px; letter-spacing: .01em; }
  .logo .code { display: none; }
  .menu > summary { padding: 9px 13px; }
  /* 画面下の固定CTAと重複するため、ヘッダーのボタンは隠す */
  .masthead .cta { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero .frame {
  display: grid; gap: clamp(28px, 4vw, 40px); grid-template-columns: 1fr;
  padding-block: clamp(40px, 6vw, 88px) clamp(44px, 6vw, 80px);
}
/* モバイル: 見出し → 実演図 → 説明。最初の一画面に図が収まるようにする */
.hero .lead-in   { order: 1; }
.hero .hero-fig  { order: 2; }
.hero .hero-rest { order: 3; }
@media (min-width: 940px) {
  .hero .frame {
    grid-template-columns: 1.02fr .98fr;
    grid-template-areas: "lead fig" "rest fig";
    column-gap: clamp(40px, 5vw, 68px);
    align-content: center;
  }
  .hero .lead-in  { grid-area: lead; }
  .hero .hero-rest{ grid-area: rest; }
  .hero .hero-fig { grid-area: fig; align-self: center; }
}
.hero .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero .eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--ink); }
.hero h1 {
  font-size: clamp(40px, 10.5vw, 76px); font-weight: 800;
  line-height: 1.24; letter-spacing: -.025em; text-wrap: balance;
}
.hero h1 .u {
  background-image: linear-gradient(transparent 76%, var(--volt) 76%, var(--volt) 92%, transparent 92%);
}
.hero .lede {
  max-width: 30em; color: var(--ink-2); font-size: 15px; line-height: 2.05;
  border-left: 2px solid var(--rule); padding-left: 20px;
}
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .tags { display: flex; flex-wrap: wrap; margin-top: 34px; border-top: 1px solid var(--rule); }
.hero .tags li {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  color: var(--ink-3); padding: 10px 16px 10px 0;
  border-right: 1px solid var(--rule-2); margin-right: 16px;
}
.hero .tags li:last-child { border-right: 0; margin-right: 0; }

/* 図面の共通スタイル */
.dw { width: 100%; height: auto; display: block; }
.dw .paper { fill: var(--band); stroke: var(--rule); stroke-width: 1; }
.dw .thin  { fill: none; stroke: var(--rule); stroke-width: 1; }
.dw .unit  { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.dw .pipe  { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dw .cover { fill: none; stroke: var(--blue); stroke-width: 9; stroke-linecap: square; opacity: .17; }
.dw .lead  { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.dw text   { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; fill: var(--ink-3); }
.dw text.jp{ font-family: var(--gothic); font-size: 11px; letter-spacing: .06em; font-weight: 700; fill: var(--ink); }
.dw .volt  { fill: var(--volt); }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* @@hero:start（_tools/build_hero.py が差し替える） */
/* ------------------------------------------------------------
   メインビジュアル: 「むき出しの配管が、化粧カバーで直線に整う」実演
   静止状態（JS無効・視差軽減）では完成形＝整った状態を表示する
   ------------------------------------------------------------ */
.hero-fig { margin: 0; position: relative; }
@media (max-width: 939px) {
  /* 画面いっぱいに広げて、最初の一画面で目に入るようにする */
  .hero-fig {
    margin-inline: calc(var(--gut) * -1);
    padding: 22px var(--gut) 18px;
    background: var(--band);
    border-block: 1px solid var(--rule);
  }
}
.hero-dw { width: 100%; height: auto; display: block; }
.hero-dw .eave  { fill: var(--ink); }
.hero-dw .ghost { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.hero-dw .strand2 { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; }
.hero-dw .foot  { fill: var(--ink-2); }
.hero-dw .dim   { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.hero-dw .pp    { transform-box: fill-box; transform-origin: center; }
/* スマホでは図が縮むので、図の中の文字を大きくして実寸で読める大きさに保つ */
@media (max-width: 939px) {
  .hero-fig .hero-dw text { font-size: 12.5px; }
  .hero-fig .hero-dw text.jp { font-size: 14px; }
  .hero-fig .hero-dw text.sub { font-size: 12.5px; letter-spacing: .06em; }
}

/* 既定（静止時）は完成形。BEFORE だけに出るものは隠す */
.hero-dw .hose-b, .hero-dw .water.puddle, .hero-dw .st-before { opacity: 0; }
.hero-dw .st-after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-fig.play [data-draw] { stroke-dasharray: var(--len) 9999px; stroke-dashoffset: var(--len); }
  /* 0.35秒〜 テープ巻きの配管が描かれる */
  .hero-fig.play .tape-o, .hero-fig.play .tape-i, .hero-fig.play .strand2 {
    animation: draw 1.1s cubic-bezier(.55,0,.25,1) .35s forwards;
  }
  .hero-fig.play .tape-wrap, .hero-fig.play .tape-worn { opacity: 0; animation: fade .5s ease 1.25s forwards; }
  /* ドレンホースが垂れ、水たまりができる。整いはじめで消える */
  .hero-fig.play .hose-b { opacity: 1; animation: draw .8s cubic-bezier(.5,0,.3,1) .9s forwards, gone .4s ease 2.3s forwards; }
  .hero-fig.play .water.puddle { animation: puddle 1.1s ease 1.6s both; }
  /* 2.3秒〜 配管が直線に整い、2.95秒〜 カバーが降りてくる */
  .hero-fig.play .after-duct { animation: draw .75s cubic-bezier(.4,0,.15,1) 2.95s forwards; }
  .hero-fig.play .after-fade { opacity: 0; animation: fade .4s ease 3.6s forwards; }
  /* 部材がひとつずつ収まる */
  .hero-fig.play .pp { animation: pop .38s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(3.45s + var(--i) * .09s); }
  .hero-fig.play .st-before { animation: beforeLbl 2.2s ease 1.1s both; }
  .hero-fig.play .st-after  { opacity: 0; animation: fade .6s ease 3.85s forwards; }
  .hero-fig.play .dim       { opacity: 0; animation: fade .6s ease 4s forwards; }
}
@keyframes gone { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes puddle { 0% { opacity: 0; } 30% { opacity: .25; } 64% { opacity: .25; } 100% { opacity: 0; } }
@keyframes beforeLbl {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  60%  { opacity: 1; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

/* もう一度見る */
.replay {
  display: none; margin-top: 14px; background: none; border: 0; padding: 6px 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; align-items: center; gap: 9px;
}
.hero-fig.play .replay { display: inline-flex; }
.replay:hover { color: var(--blue); }
.replay svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .hero-fig.play .replay { display: none; } }
/* @@hero:end */

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec { border-bottom: 1px solid var(--rule); }
.sec > .frame { padding-block: clamp(60px, 7.5vw, 100px); }
.sec--band { background: var(--band); }

.lay { display: grid; gap: clamp(30px, 4.5vw, 54px); grid-template-columns: 1fr; }
.lay > * { min-width: 0; }
@media (min-width: 1000px) { .lay { grid-template-columns: 92px 1fr; } }

.rail { display: none; }
@media (min-width: 1000px) {
  /* 左端をページの上から下まで一本の線が貫く。配管の立ち下がりに見立てた通し罫。
     セクションの余白ごと縦断させるため、罫は .rail ではなく .frame に引く */
  .sec > .frame { position: relative; }
  .sec > .frame::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: var(--gut); width: 1px; background: var(--rule);
  }

  .rail { display: block; position: relative; }

  /* 各セクションの起点に打つ継手のノード。罫の上に重ねて中心を合わせる */
  .rail::before {
    content: ""; position: absolute; top: 2px; left: -4px;
    width: 9px; height: 9px; background: var(--paper);
    border: 1px solid var(--ink);
  }
  .sec--band .rail::before { background: var(--band); }

  /* 縦書きのコピーは罫から離し、本文側の端に寄せる。
     背の高いセクションでも見出しと並んで見えるよう追従させる */
  .rail .vtxt {
    display: block; width: 1.25em; margin-left: auto;
    position: sticky; top: 112px;
    writing-mode: vertical-rl; font-family: var(--mincho);
    font-size: 16px; letter-spacing: .32em; line-height: 1;
    color: var(--ink); white-space: nowrap;
  }
}

.hd { margin-bottom: clamp(32px, 4vw, 50px); }
.hd .code { display: block; margin-bottom: 12px; color: var(--blue); }
.hd h2 { font-size: clamp(26px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.01em; line-height: 1.4; text-wrap: balance; }
.hd .sub { margin-top: 16px; color: var(--ink-2); font-size: 14.5px; max-width: 44em; }

.h3l { font-size: 19px; font-weight: 800; letter-spacing: .01em; line-height: 1.6; }

/* ============================================================
   仕事の流儀
   ============================================================ */
.crafts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px)  { .crafts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .crafts { grid-template-columns: repeat(4, 1fr); } }
.craft { background: var(--paper); padding: 30px 26px 34px; }
.sec--band .craft { background: var(--band); }
.craft .mark { width: 26px; height: 26px; margin-bottom: 20px; display: block; }
.craft h3 { font-size: 16.5px; font-weight: 800; line-height: 1.6; margin-bottom: 10px; }
.craft p { color: var(--ink-2); font-size: 13.5px; line-height: 1.95; }

/* ============================================================
   事業内容
   ============================================================ */
.svcs { border-top: 1px solid var(--ink); }
.svc {
  display: grid; gap: 6px 28px; grid-template-columns: 1fr;
  padding: 30px 0; border-bottom: 1px solid var(--rule);
  transition: padding-left .25s ease;
}
@media (min-width: 720px) { .svc { grid-template-columns: 116px 1fr 1.25fr; align-items: start; } }
.svc:hover { padding-left: 10px; }
.svc .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--blue); padding-top: 7px; }
.svc h3 { font-size: 20px; font-weight: 800; letter-spacing: .01em; line-height: 1.55; }
.svc p { color: var(--ink-2); font-size: 14px; line-height: 1.95; }

/* ============================================================
   工事メニュー
   ============================================================ */
.menugrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px)  { .menugrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .menugrid { grid-template-columns: repeat(4, 1fr); } }
.mcard { background: var(--paper); padding: 28px 24px 30px; display: flex; flex-direction: column; gap: 16px; }
.sec--band .mcard { background: var(--band); }
.mcard .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.mcard h3 { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.mcard .top .code { color: var(--blue); flex: none; }
.mcard ul { display: flex; flex-direction: column; gap: 9px; }
.mcard li { font-size: 13.5px; line-height: 1.7; display: flex; gap: 10px; align-items: baseline; color: var(--ink); }
.mcard li::before { content: ""; flex: none; width: 9px; height: 1px; background: var(--blue); transform: translateY(-4px); }
.mnote { margin-top: 26px; font-size: 13.5px; color: var(--ink-2); border-left: 2px solid var(--volt); padding-left: 16px; }

/* ============================================================
   化粧カバー解説
   ============================================================ */
/* 図の部材。外壁・地面・テープ・カバーはそれぞれ実物の色に寄せる */
.dw .wall    { fill: var(--band); }
.dw .siding  { fill: none; stroke: var(--rule); stroke-width: 1; opacity: .7; }
.dw .win     { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.dw .winl    { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.dw .ground  { stroke: var(--ink); stroke-width: 1.4; }
.dw .hatch   { fill: none; stroke: var(--ink-3); stroke-width: .9; }
.dw .putty   { fill: #D9D4C6; stroke: var(--ink-3); stroke-width: 1; }
.dw .tape-o  { fill: none; stroke: var(--ink-3); stroke-width: 12; stroke-linecap: round; }
.dw .tape-i  { fill: none; stroke: #F6F4EE; stroke-width: 9.4; stroke-linecap: round; }
.dw .tape-wrap { fill: none; stroke: #CFC9BA; stroke-width: 9.4; stroke-dasharray: 1.4 4.2; }
.dw .tape-worn { fill: none; stroke: #9C9380; stroke-width: 9.4; stroke-dasharray: 0 58 24 46 16 400; opacity: .85; }
.dw .hose    { fill: none; stroke: var(--ink-2); stroke-width: 2.6; stroke-linecap: round; }
.dw .water   { fill: var(--blue); opacity: .22; }
.dw .duct-o  { fill: none; stroke: var(--ink); stroke-width: 15; }
.dw .duct-i  { fill: none; stroke: var(--duct); stroke-width: 12.2; }
.dw .duct-o.sm { stroke-width: 11; }
.dw .duct-i.sm { stroke-width: 8.4; }
.dw .seam    { fill: none; stroke: #CDC6B3; stroke-width: 1; }
.dw .part    { fill: var(--duct); stroke: var(--ink); stroke-width: 1.3; }
.dw .part.base { stroke-width: 2; }
.dw .hollow  { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1; }
.dw .wallsec { fill: var(--band-2); stroke: var(--ink); stroke-width: 1.2; }
.dw .slab    { fill: var(--band-2); stroke: var(--ink-3); stroke-width: .8; }
.dw .screw   { fill: none; stroke: var(--ink); stroke-width: 2; }
.dw .lift    { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dw .ins     { fill: #F4F2EC; stroke: var(--ink-3); stroke-width: 1.2; }
.dw .cu      { fill: #C47A4C; stroke: var(--ink); stroke-width: 1; }
.dw .bore    { fill: var(--paper); }
.dw .drain   { fill: var(--paper); stroke: var(--ink-2); stroke-width: 3; }
.dw .drain-in{ fill: none; stroke: var(--ink-3); stroke-width: 1; }
.dw .cable   { fill: #8E949A; stroke: var(--ink); stroke-width: 1; }
.dw .wire    { fill: #F6F6F3; }
.dw .bracket { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.dw .lead2   { stroke: var(--ink-3); stroke-width: 1; }
.dw text.sub { font-family: var(--gothic); font-size: 10.5px; letter-spacing: .14em; fill: var(--ink-3); }
.dw .mk line { stroke: var(--blue); stroke-width: 1.2; }
.dw .mk circle { fill: var(--blue); }
.dw .mk text { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0; fill: #fff; text-anchor: middle; }

/* 比較 */
.compare { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 1px; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }
.cmp { margin: 0; background: var(--paper); padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.cmp .lbl {
  align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  padding: 5px 14px; border: 1px solid var(--rule); color: var(--ink-2);
}
.cmp--yes .lbl { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cmp h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; }

.legend { counter-reset: none; border-top: 1px solid var(--rule); }
.legend li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.legend li b { display: block; color: var(--ink); font-size: 14px; }
.legend .no {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: #fff; display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; transform: translateY(3px);
}

/* 断面図と中身の説明 */
.inside {
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
  border: 1px solid var(--rule); border-top: 0; background: var(--paper);
  padding: clamp(24px, 3.5vw, 40px);
}
@media (min-width: 900px) { .inside { grid-template-columns: 1fr 1fr; } }
.inside > * { min-width: 0; }
.inside-fig { margin: 0; }
.inside-fig figcaption { margin-top: 10px; text-align: center; }
.inside-txt > .code { display: block; color: var(--blue); margin-bottom: 10px; }
.inside-txt .lead-p { margin-top: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.95; }
.parts { margin-top: 18px; border-top: 1px solid var(--ink); }
.parts > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.parts dt { font-size: 14.5px; font-weight: 800; }
.parts dd { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }

/* メリット */
.merits { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: 0; }
@media (min-width: 760px) { .merits { grid-template-columns: repeat(3, 1fr); } }
.merit { background: var(--paper); padding: 24px 24px 26px; }
.merit h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.merit h3::before { content: ""; width: 14px; height: 4px; background: var(--volt); flex: none; }
.merit p { font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.merit .note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.swatches li { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.swatches span { width: 34px; height: 22px; border: 1px solid var(--ink-3); }

/* 設置パターン */
.subhd { margin: clamp(48px, 6vw, 72px) 0 22px; }
.subhd .code { display: block; color: var(--blue); margin-bottom: 10px; }
.subhd p { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.patterns { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .patterns { grid-template-columns: repeat(2, 1fr); } }
.pat { margin: 0; background: var(--paper); padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.pat .code { display: block; color: var(--blue); margin-bottom: 8px; }
.pat h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.pat p { font-size: 13px; color: var(--ink-2); line-height: 1.9; }
/* 断面図は縮小表示になるので、図中の文字を一段大きく */
.pat .dw text.jp { font-size: 12.5px; }
.pat .dw text.sub, .pat .dw text { font-size: 11.5px; }

/* 2列では図が大きくなりすぎるので幅を抑え、文字も標準に戻す */
@media (min-width: 640px) {
  .pat > svg { max-width: 380px; }
  .pat .dw text.jp { font-size: 11px; }
  .pat .dw text.sub, .pat .dw text { font-size: 10.5px; }
}

/* スマホ: 図をパネルの端まで広げ、縮小による文字の小ささを抑える */
@media (max-width: 759px) {
  .cmp { padding: 20px 16px 24px; }
  .cmp > svg { width: calc(100% + 32px); max-width: none; margin-inline: -16px; }
  .inside { padding: 26px 16px; }
  .inside-fig svg { width: calc(100% + 24px); max-width: none; margin-inline: -12px; }
  .merit { padding: 22px 16px 24px; }
  .pat { padding: 20px 16px 24px; }
}


/* ---------- 説明の目次 ---------- */
.cover-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(36px, 5vw, 52px); }
.cover-toc a {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px;
  border: 1px solid var(--rule); background: var(--paper); transition: color .18s ease, border-color .18s ease;
}
.cover-toc a:hover { border-color: var(--blue); color: var(--blue); }
.subhd--first { margin-top: 0; }
a.inline { color: var(--blue); border-bottom: 1px solid var(--blue); font-weight: 700; padding-bottom: 1px; white-space: nowrap; }
a.inline::after { content: " →"; font-family: var(--mono); }
.merit p a.inline { margin-left: 4px; }
.note-p { margin-top: 14px; font-size: 13px; color: var(--ink-2); line-height: 1.9; }

/* ---------- 室内の化粧カバー ---------- */
.indoor {
  display: grid; gap: clamp(22px, 4vw, 44px); align-items: center;
  border: 1px solid var(--rule); background: var(--paper); padding: clamp(22px, 3.5vw, 36px);
}
@media (min-width: 900px) { .indoor { grid-template-columns: 1.1fr 1fr; } }
.indoor > * { min-width: 0; }
.indoor-fig { margin: 0; }

/* ---------- 部材 ---------- */
.partsgrid { display: grid; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (min-width: 520px) { .partsgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .partsgrid { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  background: var(--paper); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px;
}
.pcard svg { width: 100%; max-width: 190px; height: auto; margin-bottom: 8px; }
.pcard .where { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--blue); border: 1px solid currentColor; padding: 1px 8px; }
.pcard b { font-size: 15.5px; font-weight: 800; }
.pcard .d { font-size: 13px; color: var(--ink-2); line-height: 1.85; }
.dw .part.hl { stroke: var(--blue); stroke-width: 2.2; }
.dw .dim path { fill: none; stroke: var(--ink-3); stroke-width: 1; }

/* 断面図は部材の一覧から少し離す */
.inside { border-top: 1px solid var(--rule); margin-top: clamp(40px, 5vw, 60px); }

/* ---------- 色見本 ---------- */
.colors {
  display: grid; gap: 20px 44px; border: 1px solid var(--rule); background: var(--paper);
  padding: clamp(22px, 3.5vw, 34px);
}
@media (min-width: 760px) { .colors { grid-template-columns: auto auto 1fr; align-items: end; } }
.cgroup > .code { display: block; color: var(--blue); margin-bottom: 12px; }
.cgroup ul { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.cgroup li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.cgroup svg { width: 76px; height: 60px; }
.colors > .note-p { margin: 0; }

/* ---------- 料金の決まり方 ---------- */
.formula { display: grid; gap: 10px; }
@media (min-width: 860px) { .formula { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.formula .term { border: 1px solid var(--ink); background: var(--paper); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.formula .term .code { color: var(--blue); }
.formula .term b { font-size: 18px; font-weight: 800; }
.formula .term span:last-child { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.formula .op { align-self: center; justify-self: center; font-size: 22px; font-weight: 800; color: var(--blue); line-height: 1; }
.countex {
  margin-top: 14px; display: grid; gap: clamp(22px, 4vw, 44px); align-items: center;
  border: 1px solid var(--rule); background: var(--paper); padding: clamp(22px, 3.5vw, 36px);
}
@media (min-width: 900px) { .countex { grid-template-columns: 1fr 1fr; } }
.countex > * { min-width: 0; }
.countex figure { margin: 0; }
.countex h4 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.countex .legend li b { display: inline; margin-right: 12px; }
.countex .sum { margin-top: 14px; font-size: 14.5px; line-height: 1.8; }
.countex .sum b { color: var(--blue); font-size: 16px; margin-right: 6px; }
.countex p:last-child { margin-top: 14px; font-size: 14px; }

/* スマホ: 図を枠の端まで広げる */
@media (max-width: 759px) {
  .indoor, .countex { padding: 22px 16px; }
  .indoor-fig svg, .countex figure svg { width: calc(100% + 32px); max-width: none; margin-inline: -16px; }
}
@media (prefers-reduced-motion: reduce) { .cover-toc a { transition: none; } }

/* ---------- 家全体のイメージ図 ---------- */
.house-wrap {
  display: grid; gap: clamp(22px, 4vw, 44px); align-items: center;
  border: 1px solid var(--rule); background: var(--paper); padding: clamp(18px, 3vw, 32px);
}
@media (min-width: 980px) { .house-wrap { grid-template-columns: 1.8fr 1fr; } }
.house-wrap > * { min-width: 0; }
.house-fig { margin: 0; }
.house { overflow: visible; }
.house .gnd    { fill: var(--band); }
.house .walk   { fill: #E3E1D9; }
.house .wall-f { fill: #F6F5F0; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.house .wall-s { fill: #E2E3DD; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.house .siding { stroke: rgba(20, 24, 28, .09); stroke-width: 1; }
.house .base   { fill: #C9CCC5; stroke: var(--ink); stroke-width: 1; }
.house .floorline { stroke: var(--ink-3); stroke-width: 1.4; }
.house .win    { fill: #D8E3EF; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.house .winl   { stroke: var(--ink); stroke-width: .9; }
.house .door   { fill: #8A7763; stroke: var(--ink); stroke-width: 1.1; }
.house .roof-b { fill: #3B4249; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.house .roof-f { fill: #535B64; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.house .roofl  { stroke: rgba(255, 255, 255, .13); stroke-width: 1; }
.house .barge  { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.house .ghost  { fill: rgba(255, 255, 255, .6); stroke: var(--ink-2); stroke-width: 1.1; stroke-dasharray: 4 3; }
.house .u-top  { fill: #F3F3F0; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.house .u-face { fill: #FCFCFA; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.house .u-side { fill: #DEDFDA; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.house .fan    { fill: none; stroke: var(--ink-2); stroke-width: 1.1; }
.house .vent   { stroke: var(--ink-3); stroke-width: .9; }
.house .bal    { fill: #D6D8D2; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.house .bal-e  { fill: #BCBFB8; stroke: var(--ink); stroke-width: 1; }
.house .bal-s  { fill: #AEB1AA; stroke: var(--ink); stroke-width: 1; }
.house .glass  { fill: rgba(150, 182, 214, .26); stroke: var(--ink-2); stroke-width: .9; }
.house .rail   { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; }
.house .rail-p { stroke: var(--ink-2); stroke-width: 1.2; }
.house .rack   { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.house .bracket{ stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }
.house .duct-o { fill: none; stroke: var(--ink); stroke-width: 8.5; stroke-linejoin: miter; }
.house .duct-i { fill: none; stroke: var(--duct); stroke-width: 6; stroke-linejoin: miter; }
.house .part   { fill: var(--duct); stroke: var(--ink); stroke-width: 1.1; }
.house .mk circle:not(.dot) { stroke: #fff; stroke-width: 2; }
.house .mk text { font-size: 14.5px; }
/* スマホ: 図を枠の端まで広げ、家をできるだけ大きく見せる */
@media (max-width: 759px) {
  .house-wrap { padding: 16px 12px 20px; }
  .house-fig svg { width: calc(100% + 24px); max-width: none; margin-inline: -12px; }
}

/* 凡例 */
.house-legend .hl-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }
.house-legend .k-ghost { width: 22px; height: 12px; border: 1.5px dashed var(--ink-2); background: #fff; }
.house-legend .k-duct { width: 26px; height: 8px; background: var(--duct); border: 1.5px solid var(--ink); margin-left: 10px; }
.house-legend ol { border-top: 1px solid var(--ink); }
.house-legend li { border-bottom: 1px solid var(--rule); }
.hk {
  width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: none; border: 0; padding: 14px 6px 14px 0; font: inherit; color: inherit; cursor: pointer;
  transition: background .18s ease;
}
.hk .no {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; margin-top: 1px;
}
.hk-t { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
.hk-t b { display: block; font-size: 15px; color: var(--ink); }
.hk-t em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--blue); border: 1px solid currentColor; padding: 0 8px; }
.hk:hover, .hk:focus { background: var(--band); outline: none; }
.hk:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.house-legend .hl-tip { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.9; }
.house-legend .hl-tip a.inline { margin-left: 4px; }

/* 項目を選ぶと、その取り付けだけを強調する */
.house [data-k] { transition: opacity .25s ease; }
/* JSがあるとき: assets/site.js が data-active に選んだ項目を入れる（スマホで押したときも効く） */
.house-wrap[data-active="a"] .house [data-k]:not([data-k="a"]) { opacity: .14; }
.house-wrap[data-active="b"] .house [data-k]:not([data-k="b"]) { opacity: .14; }
.house-wrap[data-active="c"] .house [data-k]:not([data-k="c"]) { opacity: .14; }
.house-wrap[data-active="d"] .house [data-k]:not([data-k="d"]) { opacity: .14; }
.hk[aria-pressed="true"] { background: var(--band); box-shadow: inset 3px 0 0 var(--volt); }
/* JSがないとき: マウスを乗せている間だけ */
.house-wrap:has(.hk[data-k="a"]:is(:hover, :focus)) .house [data-k]:not([data-k="a"]),
.house-wrap:has(.house [data-k="a"]:hover) .house [data-k]:not([data-k="a"]) { opacity: .14; }
.house-wrap:has(.hk[data-k="b"]:is(:hover, :focus)) .house [data-k]:not([data-k="b"]),
.house-wrap:has(.house [data-k="b"]:hover) .house [data-k]:not([data-k="b"]) { opacity: .14; }
.house-wrap:has(.hk[data-k="c"]:is(:hover, :focus)) .house [data-k]:not([data-k="c"]),
.house-wrap:has(.house [data-k="c"]:hover) .house [data-k]:not([data-k="c"]) { opacity: .14; }
.house-wrap:has(.hk[data-k="d"]:is(:hover, :focus)) .house [data-k]:not([data-k="d"]),
.house-wrap:has(.house [data-k="d"]:hover) .house [data-k]:not([data-k="d"]) { opacity: .14; }
@media (prefers-reduced-motion: reduce) { .house [data-k], .hk { transition: none; } }

/* ============================================================
   施工台帳
   ============================================================ */
.ledger-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.ledger { width: 100%; min-width: 640px; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; padding: 17px 18px 17px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ledger thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; padding-block: 12px;
}
.ledger tbody tr { transition: background .18s ease; }
.ledger tbody tr:hover { background: color-mix(in srgb, var(--volt) 22%, transparent); }
.ledger .kind { font-size: 13px; font-weight: 800; white-space: nowrap; }
.ledger .work { font-size: 14.5px; font-weight: 600; }
.ledger .qty  { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .qty small { font-family: var(--gothic); font-size: 11px; color: var(--ink-3); margin-left: 3px; }
.ledger .fin  { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ledger .fin::before {
  content: ""; display: inline-block; width: 16px; height: 4px;
  background: var(--blue); opacity: .34; margin-right: 8px; vertical-align: middle;
}
@media (max-width: 700px) {
  .ledger-wrap { overflow-x: visible; }
  .ledger { min-width: 0; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .ledger td { border: 0; padding: 0; }
  .ledger .kind { grid-area: 1 / 1; color: var(--blue); }
  .ledger .qty  { grid-area: 1 / 2; justify-self: end; font-size: 15px; }
  .ledger .work { grid-area: 2 / 1 / 3 / 3; font-size: 15.5px; }
  .ledger .fin  { grid-area: 3 / 1 / 4 / 3; }
}
.after-note { margin-top: 24px; font-size: 13.5px; color: var(--ink-2); }
.after-note a { color: var(--blue); border-bottom: 1px solid var(--blue); font-weight: 700; padding-bottom: 1px; }

/* ============================================================
   追加工事が必要になるケース
   ============================================================ */
.cases { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px)  { .cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { background: var(--paper); padding: 26px 24px 28px; }
.sec--band .case { background: var(--band); }
.case h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 9px; line-height: 1.6; display: flex; gap: 10px; align-items: baseline; }
.case h3::before { content: "＋"; color: var(--blue); font-size: 14px; flex: none; }
.case p { font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }

/* ============================================================
   流れ
   ============================================================ */
.flow { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px)  { .flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .flow { grid-template-columns: repeat(5, 1fr); } }
.step { background: var(--paper); padding: 26px 22px 30px; }
.sec--band .step { background: var(--band); }
.step .no {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--blue);
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.step .no::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.step h3 { font-size: 16px; font-weight: 800; margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: 13px; line-height: 1.9; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline;
  padding: 22px 40px 22px 0; font-size: 16px; font-weight: 800; line-height: 1.65;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--mono); font-size: 13px; color: var(--blue); flex: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 32px;
  width: 13px; height: 13px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translateY(-3px); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq summary:hover { color: var(--blue); }
.faq .ans {
  display: flex; gap: 16px; align-items: baseline;
  padding: 0 40px 26px 0; color: var(--ink-2); font-size: 14px; line-height: 2;
}
.faq .ans::before { content: "A"; font-family: var(--mono); font-size: 13px; color: var(--ink-3); flex: none; }

/* ============================================================
   対応エリア
   ============================================================ */
.area { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 880px) { .area { grid-template-columns: 1fr 1fr; } }
.area > * { min-width: 0; }
.arealist { border-top: 1px solid var(--ink); }
.arealist .row { display: grid; grid-template-columns: 7.5em 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.arealist .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--blue); }
.arealist .v { font-size: 14.5px; font-weight: 600; line-height: 1.8; }
.arealist .v small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); margin-top: 3px; }

/* ============================================================
   反転帯（協力会社募集）
   ============================================================ */
.partner {
  background: var(--dark); color: var(--dark-fg);
  padding: clamp(38px, 5vw, 56px) clamp(26px, 4vw, 52px);
  position: relative; overflow: hidden;
}
.partner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--volt) 0 26px, transparent 26px 46px);
}
.partner .code { color: var(--volt); }
.partner h2 { font-size: clamp(21px, 2.8vw, 30px); font-weight: 800; margin: 12px 0 12px; letter-spacing: .01em; }
.partner .intro { color: var(--dark-mute); font-size: 14px; max-width: 40em; line-height: 1.95; }
.partner .grid { display: grid; gap: 28px; margin-top: 34px; }
@media (min-width: 820px) { .partner .grid { grid-template-columns: 1fr 1fr auto; align-items: start; } }
.partner .col h3 { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--volt); margin-bottom: 14px; }
.partner .col li { font-size: 13.5px; color: var(--dark-fg); line-height: 1.8; padding: 9px 0; border-top: 1px solid var(--dark-rule); }
.partner .cta { background: var(--volt); color: #14181C; border-color: var(--volt); align-self: center; }
.partner .cta:hover { background: var(--dark-fg); border-color: var(--dark-fg); color: #14181C; }

/* ============================================================
   お問い合わせ
   ============================================================ */
.contact { display: grid; gap: clamp(32px, 5vw, 60px); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact > * { min-width: 0; }
.contact .acts { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.contact .acts .cta { width: 100%; }
.checklist { border-top: 1px solid var(--ink); }
.checklist > .code { display: block; padding: 14px 0; color: var(--blue); }
.checklist li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 15px 0; border-top: 1px solid var(--rule); font-size: 14.5px; font-weight: 700;
}
.checklist li .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }
.checklist li small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }

/* ============================================================
   会社概要
   ============================================================ */
.spec { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
.spec th, .spec td { text-align: left; padding: 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 14.5px; }
.spec th {
  width: 12em; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding-top: 22px;
}
.spec td { padding-right: 8px; }
.spec a { color: var(--blue); border-bottom: 1px solid var(--blue); font-weight: 700; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--dark); color: var(--dark-mute); padding-top: 54px; }
.foot .frame { border: 0; }
.foot .top { display: grid; gap: 34px; padding-bottom: 40px; }
@media (min-width: 820px) { .foot .top { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot .logo b { color: var(--dark-fg); }
.foot .logo .code { color: var(--dark-mute); }
.foot .about { margin-top: 18px; font-size: 13px; line-height: 1.95; max-width: 26em; }
.foot h3 { font-size: 11px; font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--volt); margin-bottom: 16px; }
.foot .sitemap li { padding: 7px 0; }
.foot .sitemap a { font-size: 13.5px; color: var(--dark-fg); font-weight: 600; }
.foot .sitemap a:hover { color: var(--volt); }
.foot .bottom {
  border-top: 1px solid var(--dark-rule); padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
}
.foot .bottom .code { color: var(--dark-mute); }

/* スマホ用の固定CTA */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--rule);
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  display: none;
}
.dock .cta { width: 100%; padding: 14px 20px; }
@media (max-width: 720px) {
  .dock { display: block; }
  body { padding-bottom: 76px; }
}

/* ---------- 出現アニメーション（JS有効時のみ隠す） ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .svc, .cta, .mainnav a.n::after, .ledger tbody tr, .faq summary::after { transition: none; }
}

/* @@menu-pages:start（_tools/build_menu_pages.py が差し替える） */
/* ============================================================
   工事メニュー: トップページの分類カード（カード全体が分類ページへのリンク）
   ============================================================ */
.mcard { position: relative; transition: background .2s ease; }
/* 番号を見出しの上に置き、見出しにカード幅いっぱいを使わせる（4列時に「エアコン販売・設置」が折り返さないように） */
.mcard .top { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 4px; }
.mcard .mlink { color: inherit; }
.mcard .mlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mcard .mlink:focus-visible { outline: none; }
.mcard:has(.mlink:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.mcard .more {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; font-weight: 800; color: var(--blue);
}
.mcard .more::after { content: "→"; font-family: var(--mono); transition: transform .2s ease; }
.mcard:hover { background: var(--paper); }
.mcard:hover h3 { color: var(--blue); }
.mcard:hover .more::after { transform: translateX(4px); }

/* ============================================================
   事業内容: 各行が分類ページへのリンク（行全体を押せる）
   ============================================================ */
.svc { position: relative; }
.svc .slink { color: inherit; transition: color .18s ease; }
.svc .slink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc .slink:focus-visible { outline: none; }
.svc:has(.slink:focus-visible) { outline: 2px solid var(--blue); outline-offset: 4px; }
.svc-body { display: grid; gap: 12px; justify-items: start; }
.svc .more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: var(--blue);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.svc .more::after { content: "→"; font-family: var(--mono); transition: transform .2s ease; }
.svc:hover .slink { color: var(--blue); }
.svc:hover .more::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .svc .slink, .svc .more::after { transition: none; } }

/* ============================================================
   工事メニュー: 分類ページ
   ============================================================ */
.mainnav a.n.is-here::after { transform: scaleX(1); }

.dhead { border-bottom: 1px solid var(--rule); }
.dhead .frame { padding-block: clamp(28px, 4vw, 48px) clamp(44px, 6vw, 72px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-3); margin-bottom: clamp(28px, 4vw, 44px); }
.crumbs li { display: flex; gap: 10px; align-items: center; }
.crumbs li + li::before { content: "／"; color: var(--rule); }
.crumbs a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.crumbs a:hover { color: var(--blue); border-color: var(--blue); }
.dhead .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dhead .eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--ink); }
.dhead h1 { font-size: clamp(36px, 7vw, 68px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.dhead .lede {
  margin-top: 22px; max-width: 36em; color: var(--ink-2); font-size: 15px; line-height: 2;
  border-left: 2px solid var(--volt); padding-left: 18px;
}
.dhead .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* 目次（ページ内の各工事へ） */
.toc { margin-top: clamp(36px, 5vw, 56px); }
.toc-h { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.toc ol { display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
@media (min-width: 640px)  { .toc ol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .toc ol { grid-template-columns: repeat(4, 1fr); } }
.toc a {
  display: flex; gap: 12px; align-items: baseline; height: 100%;
  padding: 14px 16px; font-size: 14px; font-weight: 700; line-height: 1.6;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper); transition: color .18s ease, background .18s ease;
}
.toc a .code { color: var(--blue); flex: none; }
.toc a::after { content: "↓"; font-family: var(--mono); color: var(--ink-3); margin-left: auto; padding-left: 8px; }
.toc a:hover { color: var(--blue); background: var(--band); }

/* 各工事 */
.work .hd { margin-bottom: clamp(24px, 3vw, 36px); }
.dgrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 900px) { .dgrid { grid-template-columns: 1fr 1fr; } }
.dblock { background: var(--paper); padding: 26px 24px 28px; }
.dblock > .code { display: block; color: var(--blue); margin-bottom: 8px; }
.dblock h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.ticks li {
  display: flex; gap: 12px; align-items: baseline; padding: 10px 0;
  border-top: 1px solid var(--rule-2); font-size: 14px; line-height: 1.8;
}
.ticks li::before { content: ""; flex: none; width: 10px; height: 2px; background: var(--blue); transform: translateY(-5px); }
.steps { counter-reset: st; }
.steps li {
  counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--rule-2); font-size: 14px; line-height: 1.8;
}
.steps li::before {
  content: counter(st, decimal-leading-zero); font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--blue); padding-top: 4px; font-variant-numeric: tabular-nums;
}
.notes li {
  position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--rule-2);
  font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
}
.notes li::before { content: ""; position: absolute; left: 0; top: 20px; width: 6px; height: 6px; background: var(--volt); }
.asklist li {
  display: flex; gap: 12px; align-items: baseline; padding: 10px 0;
  border-top: 1px solid var(--rule-2); font-size: 14px; font-weight: 700; line-height: 1.7;
}
.asklist li .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 500; flex: none; }
.asklist li small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.seealso { margin-top: 16px; font-size: 13.5px; }
.seealso a, .backlink a, .totop a { color: var(--blue); border-bottom: 1px solid var(--blue); font-weight: 700; padding-bottom: 1px; }
.seealso a::after, .backlink a::after { content: " →"; font-family: var(--mono); }
.totop { margin-top: 20px; font-size: 13px; text-align: right; }
.totop a::after { content: " ↑"; font-family: var(--mono); }

/* 料金 */
.price-pending {
  border: 1px dashed var(--ink-3); background: var(--paper);
  padding: clamp(24px, 4vw, 40px); display: grid; gap: 12px; justify-items: start;
}
.price-pending .ph { font-size: 18px; font-weight: 800; color: var(--ink); }
.price-pending p { font-size: 14px; color: var(--ink-2); line-height: 1.95; max-width: 40em; }
.price-pending .cta { margin-top: 8px; }
.price-table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); background: var(--paper); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td {
  text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--rule);
  vertical-align: baseline; font-size: 14.5px;
}
.price-table thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--ink-3);
  font-weight: 500; padding-block: 12px;
}
.price-table tr.group th {
  font-size: 13px; font-weight: 800; color: var(--blue); letter-spacing: .04em;
  padding: 20px 14px 8px; border-bottom: 1px solid var(--rule-2);
}
.price-table .num, .price-table td.yen { text-align: right; }
.price-table td.item { font-weight: 700; }
.price-table td.yen { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table td.yen small { font-family: var(--gothic); font-size: 12px; color: var(--ink-2); margin-left: 2px; }
.price-table td.note { font-size: 12.5px; color: var(--ink-2); }
.price-foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.9; }
/* スマホ: 3列は窮屈なので、項目と料金を1行目、備考を2行目に */
@media (max-width: 600px) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px; border-bottom: 1px solid var(--rule); }
  .price-table tr.group { display: block; padding: 0; border: 0; }
  .price-table tr.group th { display: block; }
  .price-table td { border: 0; padding: 0; }
  .price-table td.item { grid-area: 1 / 1; }
  .price-table td.yen  { grid-area: 1 / 2; font-size: 16px; }
  .price-table td.note { grid-area: 2 / 1 / 3 / 3; }
  .price-table td.note:empty { display: none; }
}

/* 相談への導線 */
.askcta { display: grid; gap: 22px; align-items: center; border: 1px solid var(--rule); background: var(--paper); padding: clamp(26px, 4vw, 44px); }
@media (min-width: 860px) { .askcta { grid-template-columns: 1fr auto; } }
.askcta .code { display: block; color: var(--blue); margin-bottom: 10px; }
.askcta h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; line-height: 1.5; }
.askcta p { margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.95; max-width: 40em; }

/* ほかの分類 */
/* 項目数が列数で割り切れなくても空き枠が塊に見えないよう、罫は各リンク側に引く */
.related { display: grid; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, 1fr); } }
.related a {
  background: var(--paper); padding: 20px 22px; display: flex; align-items: baseline; gap: 14px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 16px; font-weight: 800; transition: color .18s ease;
}
.related a .code { color: var(--blue); flex: none; }
.related a::after { content: "→"; font-family: var(--mono); color: var(--blue); margin-left: auto; transition: transform .2s ease; }
.related a:hover { color: var(--blue); }
.related a:hover::after { transform: translateX(4px); }
.backlink { margin-top: 26px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .mcard, .mcard .more::after, .toc a, .related a, .related a::after { transition: none; }
}
/* ============================================================
   グローバルメニュー: 工事メニューのドロップダウン・下層リンク
   ============================================================ */
.navdrop { position: relative; }
.navdrop > summary {
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  padding: 6px 11px; position: relative; white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary::before {
  content: ""; order: 2; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.navdrop[open] > summary::before { transform: translateY(1px) rotate(225deg); }
.navdrop > summary::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px;
  height: 2px; background: var(--volt); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.navdrop > summary:hover::after, .navdrop[open] > summary::after, .navdrop > summary.is-here::after { transform: scaleX(1); }
.navdrop .drop { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 14px; z-index: 80; }
.navdrop .drop-in { width: 300px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 18px 40px -24px rgba(20, 24, 28, .45); }
.navdrop .drop a {
  display: grid; grid-template-columns: 68px 1fr auto; align-items: baseline; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--rule-2); font-size: 14px; font-weight: 700;
}
.navdrop .drop a:last-child { border-bottom: 0; }
.navdrop .drop a .code { color: var(--blue); font-size: 9.5px; letter-spacing: .12em; }
.navdrop .drop a .c { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.navdrop .drop a:hover { background: var(--band); color: var(--blue); }
.navdrop .drop a[aria-current="page"] { background: var(--band); box-shadow: inset 3px 0 0 var(--volt); }
.navdrop .drop .drop-all { grid-template-columns: 1fr auto; background: var(--ink); color: var(--paper); }
.navdrop .drop .drop-all .c { color: var(--dark-mute); }
.navdrop .drop .drop-all:hover { background: var(--blue); color: #fff; }
@media (max-width: 1080px) { .navdrop { display: none; } }

/* スマホのMENU: 工事メニューの下に分類を一段下げて並べる */
.menu .sheet { max-height: calc(100vh - 90px); overflow-y: auto; }
/* 画面下の固定ボタンが出る幅では、その高さぶん短くして最後の項目が隠れないように */
@media (max-width: 720px) { .menu .sheet { max-height: calc(100vh - 170px); } }
.menu .sheet-sub { border-bottom: 1px solid var(--rule-2); padding: 2px 0 6px; }
.menu .sheet .sheet-sub a {
  border-bottom: 0; padding: 8px 20px 8px 36px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  position: relative;
}
.menu .sheet .sheet-sub a::before { content: ""; position: absolute; left: 22px; top: 50%; width: 7px; height: 1px; background: var(--blue); }
.menu .sheet .sheet-sub a[aria-current="page"] { color: var(--ink); font-weight: 800; }

/* フッター: 工事メニューの下層 */
.foot .sitemap .sub { margin: 6px 0 2px; padding-left: 14px; border-left: 1px solid var(--dark-rule); }
.foot .sitemap .sub li { padding: 4px 0; }
.foot .sitemap .sub a { font-size: 12.5px; font-weight: 500; color: var(--dark-mute); }
.foot .sitemap .sub a:hover { color: var(--volt); }
@media (prefers-reduced-motion: reduce) {
  .navdrop > summary::before, .navdrop > summary::after { transition: none; }
}
/* @@menu-pages:end */