@charset "UTF-8";
/* ==========================================================================
   佐鳴工務店 style.css
   モバイルファースト / BP: 768px, 1024px
   色: navy #1F3A5F / accent #C8752E / wood #E8DCC8 / text #22272E
   ※ #C8752E は白背景だとコントラスト3.48。装飾・24px以上の太字にのみ使用し、
      本文リンクやボタン背景には --accent-strong (#A85E22 / 白文字で4.89) を使う。
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --navy: #1f3a5f;
  --navy-deep: #16293f;
  --navy-line: #33517a;
  --accent: #c8752e;          /* 装飾・大きい数字用 */
  --accent-strong: #a85e22;   /* ボタン背景・リンク文字用（4.5:1以上） */
  --accent-hover: #8f4e1b;
  --accent-on-navy: #e09a55;   /* 紺面に置くオレンジ文字（navyで4.88:1） */
  --wood: #e8dcc8;
  --wood-deep: #d8c7aa;
  --wood-tint: #f6f1e8;
  --bg: #ffffff;
  --text: #22272e;
  --muted: #5a6472;           /* 白背景で6.0:1 */
  --line: #dfe3e8;

  --radius: 6px;
  --radius-sm: 4px;

  --wrap: 1120px;
  --gap: 20px;

  --shadow: 0 1px 2px rgba(31, 58, 95, .08), 0 8px 24px rgba(31, 58, 95, .07);
  --shadow-lift: 0 2px 4px rgba(31, 58, 95, .1), 0 16px 36px rgba(31, 58, 95, .13);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;

  /* 日本語の改行ルール
     - anywhere は英字略語や単価まで割ってしまうので使わない
     - strict … 行頭に「っ」「ャ」「ー」が来るのを防ぐ（禁則）
     - break-word … はみ出す長い語だけを最後の手段で折る */
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;   /* 最終行が1文字だけ残る「孤立行」を減らす */
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }

/* 途中で割ってはいけない塊（電話番号・金額・工期） */
.nw { white-space: nowrap; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* 濃色背景の上のフォーカスリングは白に */
.site-header :focus-visible,
.footer :focus-visible,
.cta :focus-visible,
.hero :focus-visible { outline-color: #ffd9b0; }

/* ---------- utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mt-sm { margin-top: 14px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 32px; }
.mt-none { margin-top: 0; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .16s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- layout helpers ---------- */
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 56px, var(--wrap)); } }

.section { padding: 40px 0; }                                       /* スマホ：56 → 40 */
@media (min-width: 768px) { .section { padding: 56px 0; } }          /* 80 → 56 */
@media (min-width: 1024px) { .section { padding: 68px 0; } }         /* 96 → 68 */

.section--wood { background: var(--wood-tint); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .section-lead,
.section--navy .lead { color: #d6dfeb; }

/* 見出し */
.section-head { margin-bottom: 24px; }                                  /* 32 → 24 */
@media (min-width: 768px) { .section-head { margin-bottom: 32px; } }    /* 44 → 32 */
.section-head--center { text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent-strong);
  margin-bottom: 10px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .01em;
}
@media (min-width: 768px) { .section-title { font-size: 2rem; } }
.section-title .accent { color: var(--accent-strong); }
.section--navy .section-title .accent { color: var(--accent); }

.section-lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: .95rem;
}
@media (min-width: 768px) { .section-lead { font-size: 1rem; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 6px 18px rgba(168, 94, 34, .28);
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); color: #fff; }
.btn--ghost {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.btn--outline-light:hover { background: #fff; color: var(--navy); }
.btn--block { width: 100%; }
.btn--lg { min-height: 60px; font-size: 1.06rem; padding: 16px 32px; }

/* ボタン内の注記。flex の兄弟にしておくと、狭い画面でラベル側が縮んで
   「この内容で送信／する」と割れるため、注記だけを次の行に落とす。 */
.btn-note { flex-basis: 100%; text-align: center; font-size: .8rem; font-weight: 600; opacity: .9; }
.btn { flex-wrap: wrap; }

/* ==========================================================================
   header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--accent);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
@media (min-width: 1024px) { .header-inner { min-height: 78px; } }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.logo:hover { color: #fff; }
.logo-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  background: var(--accent-strong);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-name { font-size: 1.06rem; letter-spacing: .04em; }
@media (min-width: 768px) { .logo-name { font-size: 1.2rem; } }
.logo-sub {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #b9c7da;
}

/* --- hamburger --- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- nav (mobile: drawer) --- */
.site-nav {
  position: fixed;
  inset: 64px 0 0;
  background: var(--navy-deep);
  padding: 8px 16px 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  /* 開いた瞬間に visible にする（visibility を遷移させると focus() が効かない） */
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.site-nav[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.nav-list { display: flex; flex-direction: column; }
.nav-list a {
  display: block;
  padding: 16px 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.nav-list a:hover { color: var(--wood); }
.nav-list a[aria-current="page"] { color: var(--accent-on-navy); }
.nav-cta { margin-top: 24px; display: grid; gap: 12px; }
.nav-tel {
  display: block;
  padding: 12px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius);
  font-weight: 700;
}
.nav-tel:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* 「8:30-18:00／日祝休」が折り返して「／日祝休」だけの行になるのを防ぐ */
.nav-tel span { display: block; font-size: .72rem; color: #b9c7da; font-weight: 600; white-space: nowrap; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    inset: auto;
    padding: 0;
    background: transparent;
    overflow: visible;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .nav-list { flex-direction: row; align-items: center; gap: 4px; }
  .nav-list a {
    padding: 8px 12px;
    border-bottom: 0;
    font-size: .95rem;
    border-radius: var(--radius-sm);
    position: relative;
  }
  .nav-list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--accent);
  }
  .nav-cta { margin: 0; display: flex; align-items: center; gap: 12px; }
  .nav-tel {
    padding: 6px 14px;
    text-align: right;
    border: 0;
    line-height: 1.25;
    font-size: 1.06rem;
    letter-spacing: .02em;
  }
  .nav-tel:hover { background: transparent; text-decoration: underline; }
  .nav-cta .btn { min-height: 46px; padding: 10px 20px; font-size: .92rem; }
}

/* body scroll lock（ドロワー展開中） */
body.is-nav-open { overflow: hidden; }
@media (min-width: 1024px) { body.is-nav-open { overflow: auto; } }

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 41, 63, .86) 0%, rgba(22, 41, 63, .74) 45%, rgba(22, 41, 63, .92) 100%);
}
@media (min-width: 1024px) {
  .hero-media::after {
    background: linear-gradient(90deg, rgba(22, 41, 63, .95) 0%, rgba(22, 41, 63, .82) 52%, rgba(22, 41, 63, .55) 100%);
  }
}
.hero-inner {
  position: relative;
  padding: 48px 0 56px;
}
@media (min-width: 768px) { .hero-inner { padding: 60px 0 64px; } }                    /* 80/88 → 60/64 */
@media (min-width: 1024px) { .hero-inner { padding: 76px 0 80px; max-width: 660px; } }  /* 104/112 → 76/80 */

.hero-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent-strong);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: .01em;
}
@media (min-width: 768px) { .hero h1 { font-size: 2.6rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 2.9rem; } }
.hero h1 .line { display: block; }
.hero h1 .mark {
  color: var(--wood);
  border-bottom: 4px solid var(--accent);
  padding-bottom: 2px;
}
.hero-lead {
  margin-top: 20px;
  color: #d6dfeb;
  font-size: .96rem;
  max-width: 40em;
}
@media (min-width: 768px) { .hero-lead { font-size: 1.06rem; } }

.hero-actions {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
@media (min-width: 600px) {
  .hero-actions { grid-auto-flow: column; justify-content: start; gap: 14px; }
}
.hero-points {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.hero-points li {
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 100px;
  color: #e7edf5;
}

/* ==========================================================================
   数字（カウントアップ） ※ clip-path の斜め区切りはサイト内でここ1箇所のみ
   ========================================================================== */
.stats {
  background: var(--navy-deep);
  color: #fff;
  padding: 68px 0 56px;
  margin-top: -1px;
  clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
}
@media (min-width: 768px) {
  .stats {
    padding: 108px 0 80px;
    clip-path: polygon(0 0, 100% 72px, 100% 100%, 0 100%);
  }
}
.stats-head { text-align: center; margin-bottom: 32px; }
.stats-head .section-title { font-size: 1.35rem; }
@media (min-width: 768px) { .stats-head .section-title { font-size: 1.75rem; } }
.stats-head p { margin-top: 10px; color: #b9c7da; font-size: .9rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.stat {
  text-align: center;
  padding: 22px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
}
.stat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;   /* 「1,200件超」が「超」だけ次行に落ちるのを防ぐ */
  color: var(--accent-on-navy);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.stat-value {
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .stat-value { font-size: 3rem; } }
.stat-unit { font-size: 1rem; font-weight: 800;  color: var(--accent-on-navy); }
.stat-label { margin-top: 8px; font-size: .84rem; font-weight: 700; color: #fff; }
.stat-note { margin-top: 2px; font-size: .74rem; color: #b9c7da; line-height: 1.6; }

/* ==========================================================================
   選ばれる3つの理由
   ========================================================================== */
.reasons { display: grid; gap: 28px; }
@media (min-width: 768px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.reason {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.reason:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.reason-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.reason-body { padding: 22px 20px 26px; flex: 1; }
.reason-no {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  background: var(--navy);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.reason h3 {
  margin: 12px 0 10px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--navy);
}
.reason p { font-size: .93rem; color: #3a424c; }
.reason-fact {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--wood-tint);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.7;
}

/* ==========================================================================
   施工事例カード（グリッド）
   ========================================================================== */
.work-grid { display: grid; gap: 22px; }
@media (min-width: 600px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.work-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.work-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--wood-deep); }
.work-thumb { position: relative; }
.work-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.work-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--navy);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 0 var(--radius-sm) 0 0;
}
.work-tag--after { background: var(--accent-strong); }
.work-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--navy);
}
.work-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: .84rem;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.work-meta dt { color: var(--muted); font-weight: 700; }
.work-meta dd { margin: 0; font-weight: 700; }
.work-meta .price { color: var(--accent-strong); }
.work-desc { margin-top: 12px; font-size: .88rem; color: #3a424c; }
.work-voice {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--wood-tint);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  color: #3a424c;
  line-height: 1.7;
}
.work-voice b { color: var(--navy); font-weight: 800; }

/* Before/After 並列（スライダー以外の事例） */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba-pair figure { position: relative; margin: 0; }
.ba-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ba-pair figcaption {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(22, 41, 63, .9);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.ba-pair figure:last-child figcaption { background: rgba(168, 94, 34, .95); }

/* ==========================================================================
   Before/After 比較スライダー（input[type=range] + CSS）
   位置は --pos（%）。JSはrangeの値を--posへ渡すだけで、
   合成そのものはCSS。JSが動かない環境でも50%地点で正常に表示される。
   ========================================================================== */
.compare {
  --pos: 50%;
  margin: 0;
  background: var(--navy-deep);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.compare-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.compare-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上に重ねる before を --pos で切り取る */
.compare-before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 2;
}
/* 仕切り線 */
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(22, 41, 63, .35);
  z-index: 3;
  pointer-events: none;
}
.compare-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: var(--accent-strong);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.compare-label {
  position: absolute;
  top: 10px;
  z-index: 4;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.compare-label--before { left: 10px; background: rgba(22, 41, 63, .92); }
.compare-label--after { right: 10px; background: rgba(168, 94, 34, .95); }

/* range 本体（スライダー全面をドラッグ領域にする） */
.compare-range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}
.compare-range::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.compare-range::-moz-range-track { background: transparent; height: 100%; }
.compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 48px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.compare-range::-moz-range-thumb {
  width: 48px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.compare-range:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: -3px; }
.compare-caption {
  padding: 12px 16px;
  background: var(--navy-deep);
  color: #d6dfeb;
  font-size: .82rem;
  line-height: 1.7;
}
.compare-caption b { color: #fff; }

/* ==========================================================================
   リフォームメニュー
   ========================================================================== */
.menu-grid { display: grid; gap: 20px; }
@media (min-width: 600px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.menu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.menu-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.menu-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.menu-body { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.menu-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.5;
}
.menu-price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.menu-price .num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-strong);
  letter-spacing: -.01em;
}
.menu-price .unit { font-size: .84rem; font-weight: 700; color: var(--muted); }
.menu-term {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--wood);
  padding: 4px 10px;
  border-radius: 100px;
}
.menu-desc { margin-top: 14px; font-size: .9rem; color: #3a424c; flex: 1; }
.menu-list { margin-top: 14px; display: grid; gap: 6px; }
.menu-list li {
  position: relative;
  padding-left: 20px;
  font-size: .86rem;
  color: #3a424c;
  line-height: 1.7;
}
.menu-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 2px;
  background: var(--accent);
}

/* ==========================================================================
   お客様の声
   ========================================================================== */
.voice-grid { display: grid; gap: 18px; }
@media (min-width: 768px) { .voice-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1024px) { .voice-grid { grid-template-columns: repeat(3, 1fr); } }

.voice {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}
.voice-q {
  font-size: .82rem;
  font-weight: 800;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.voice-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.6;
}
.voice blockquote {
  margin: 12px 0 0;
  font-size: .9rem;
  color: #3a424c;
  line-height: 1.85;
  flex: 1;
}
.voice-who {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.cta-media { position: absolute; inset: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.cta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 58, 95, .9), rgba(22, 41, 63, .95));
}
.cta-inner { position: relative; padding: 56px 0; text-align: center; }
@media (min-width: 768px) { .cta-inner { padding: 76px 0; } }
.cta h2 {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.5;
}
@media (min-width: 768px) { .cta h2 { font-size: 1.95rem; } }
.cta p {
  margin: 16px auto 0;
  max-width: 46em;
  color: #d6dfeb;
  font-size: .93rem;
}
.cta-actions {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  justify-content: center;
}
@media (min-width: 600px) { .cta-actions { grid-auto-flow: column; } }
/* セクション下部に置くボタン列（白背景でも使う） */
.cta-actions--under { margin-top: 36px; }
.cta-tel {
  margin-top: 22px;
  font-size: .88rem;
  color: #d6dfeb;
}
.cta-tel a { color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; }
.cta-tel a:hover { color: var(--wood); }

/* ==========================================================================
   下層ページ共通：ページヘッダー / パンくず
   ========================================================================== */
.page-head {
  background: var(--navy);
  color: #fff;
  padding: 34px 0 30px;
}
@media (min-width: 768px) { .page-head { padding: 52px 0 46px; } }
.page-head h1 {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.4;
}
@media (min-width: 768px) { .page-head h1 { font-size: 2.2rem; } }
.page-head .en {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent-on-navy);
  margin-bottom: 8px;
}
.page-head p { margin-top: 14px; color: #d6dfeb; font-size: .93rem; max-width: 52em; }

.breadcrumb { background: var(--wood-tint); border-bottom: 1px solid var(--line); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  font-size: .78rem;
  color: var(--muted);
}
.breadcrumb li::after { content: "／"; margin-left: 6px; color: #a9b2bd; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-hover); }
.breadcrumb [aria-current="page"] { font-weight: 700; color: var(--navy); }

/* ==========================================================================
   works.html
   ========================================================================== */
.work-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.work-detail + .work-detail { margin-top: 28px; }
@media (min-width: 768px) { .work-detail + .work-detail { margin-top: 36px; } }
.work-detail-head {
  padding: 18px 20px;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.work-detail-head h2 { font-size: 1.15rem; font-weight: 800; line-height: 1.5; }
@media (min-width: 768px) { .work-detail-head h2 { font-size: 1.3rem; } }
.work-no {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  background: var(--accent-strong);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.work-detail-body { padding: 20px; }
@media (min-width: 1024px) {
  .work-detail-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    padding: 26px;
  }
}
.spec {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.spec dt, .spec dd {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.spec dt { font-weight: 800; color: var(--navy); background: var(--wood-tint); padding-left: 12px; }
.spec dd { font-weight: 600; padding-left: 14px; }
.spec .cost { color: var(--accent-strong); font-weight: 800; }
.work-detail .work-desc { margin-top: 16px; font-size: .92rem; }
.work-detail .work-voice { margin-top: 16px; }
.work-media { margin: 0 0 20px; }
@media (min-width: 1024px) { .work-media { margin-bottom: 0; } }

.filter-note {
  margin-bottom: 28px;
  padding: 16px 18px;
  background: var(--wood-tint);
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem;
  color: #3a424c;
}

/* ==========================================================================
   reform.html（費用表）
   ========================================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
.price-table { min-width: 640px; font-size: .9rem; background: #fff; }
.price-table th, .price-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.price-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.price-table tbody th { font-weight: 800; color: var(--navy); background: var(--wood-tint); white-space: nowrap; }
.price-table td.cost { font-weight: 800; color: var(--accent-strong); white-space: nowrap; }
.price-table td.term { font-weight: 700; white-space: nowrap; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }

.note-list { display: grid; gap: 8px; margin-top: 18px; }
.note-list li {
  position: relative;
  padding-left: 22px;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.75;
}
.note-list li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: var(--accent-strong);
  font-weight: 700;
}

/* ==========================================================================
   flow.html（7ステップ）
   ========================================================================== */
.flow-list { display: grid; gap: 18px; }
@media (min-width: 768px) { .flow-list { gap: 24px; } }

.flow-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}
@media (min-width: 768px) {
  .flow-step {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 24px;
    padding: 26px 28px;
  }
}
/* ステップ間の縦線 */
.flow-step::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 2px;
  height: 18px;
  background: var(--wood-deep);
}
@media (min-width: 768px) {
  .flow-step::after { left: 60px; bottom: -24px; height: 24px; }
}
.flow-list .flow-step:last-child::after { display: none; }

.flow-no {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .flow-no {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    padding-top: 2px;
  }
}
.flow-no .en {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--muted);
}
.flow-no .num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 1.35rem;
  font-weight: 800;
}
.flow-body h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.5;
}
@media (min-width: 768px) { .flow-body h2 { font-size: 1.3rem; } }
.flow-body > p { margin-top: 10px; font-size: .92rem; color: #3a424c; }
.flow-do { margin-top: 14px; display: grid; gap: 6px; }
.flow-do li {
  position: relative;
  padding-left: 22px;
  font-size: .88rem;
  line-height: 1.75;
}
.flow-do li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .52em;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}
.flow-money {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.7;
}
.flow-money--free {
  background: #eef4ea;
  border-left: 4px solid #3f7a34;
  color: #2c5325;
}
.flow-money--pay {
  background: #fdf1e4;
  border-left: 4px solid var(--accent-strong);
  color: #7c4415;
}
.flow-money .tag {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.flow-money--free .tag { background: #3f7a34; }
.flow-money--pay .tag { background: var(--accent-strong); }
.flow-term {
  margin-top: 10px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}

.money-summary {
  margin-top: 40px;
  padding: 24px 20px;
  background: var(--wood-tint);
  border: 1px solid var(--wood-deep);
  border-radius: var(--radius);
}
@media (min-width: 768px) { .money-summary { padding: 30px 32px; } }
.money-summary h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
}
.money-summary p { margin-top: 12px; font-size: .92rem; color: #3a424c; }

/* ==========================================================================
   company.html
   ========================================================================== */
.greeting { display: grid; gap: 24px; }
@media (min-width: 768px) {
  .greeting { grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
}
.greeting-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.greeting-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.greeting-name {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}
.greeting-name b { display: block; font-size: 1.15rem; color: var(--navy); font-weight: 800; }
.greeting-body h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.55;
}
@media (min-width: 768px) { .greeting-body h2 { font-size: 1.6rem; } }
.greeting-body p { margin-top: 16px; font-size: .95rem; line-height: 1.95; }
.greeting-sign {
  margin-top: 20px;
  text-align: right;
  font-weight: 700;
  color: var(--navy);
}

/* 沿革 */
.history { border-left: 3px solid var(--wood-deep); padding-left: 20px; display: grid; gap: 22px; }
@media (min-width: 768px) { .history { padding-left: 28px; } }
.history-item { position: relative; }
.history-item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: .55em;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--wood-deep);
}
@media (min-width: 768px) { .history-item::before { left: -36px; } }
.history-year {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--accent-strong);
}
.history-item h3 { font-size: 1.02rem; font-weight: 800; color: var(--navy); margin-top: 2px; }
.history-item p { margin-top: 6px; font-size: .89rem; color: #3a424c; }

/* 職人紹介 */
.staff-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .staff-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.staff {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.staff img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.staff-body { padding: 16px 14px 20px; }
.staff-role {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: var(--navy);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}
.staff-name { margin-top: 10px; font-size: 1.06rem; font-weight: 800; color: var(--navy); }
.staff-name span { font-size: .74rem; color: var(--muted); font-weight: 700; margin-left: 6px; }
.staff-body p { margin-top: 8px; font-size: .84rem; color: #3a424c; line-height: 1.75; }
.staff-cert {
  margin-top: 10px;
  font-size: .76rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  font-weight: 700;
}

/* 会社概要表 */
.info-table { font-size: .9rem; background: #fff; }
.info-table th, .info-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.info-table th {
  width: 30%;
  min-width: 7em;
  font-weight: 800;
  color: var(--navy);
  background: var(--wood-tint);
  white-space: nowrap;
}
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }

.cert-list { display: grid; gap: 10px; }
@media (min-width: 600px) { .cert-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cert-list { grid-template-columns: repeat(3, 1fr); } }
.cert-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 資格名（テキスト）が縮んで途中改行しないよう、人数側を固定にする */
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
}
.cert-list .count {
  flex: none;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ==========================================================================
   contact.html（フォーム）
   ========================================================================== */
.contact-layout { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
}
.demo-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 26px;
  background: #fdf1e4;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: .89rem;
  font-weight: 700;
  color: #7c4415;
  line-height: 1.75;
}
.demo-notice .icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 800;
}

.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field > label, .fieldset-legend {
  font-weight: 800;
  font-size: .93rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.req, .opt {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.req { background: var(--accent-strong); color: #fff; }
.opt { background: #eceff3; color: var(--muted); }
.hint { font-size: .82rem; color: var(--muted); font-weight: 600; line-height: 1.7; }

.input, .textarea, .select {
  width: 100%;
  padding: 14px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid #c3cad3;
  border-radius: var(--radius-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.8; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.35em), calc(100% - 14px) calc(1.35em);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--navy-line); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31, 58, 95, .14);
  outline: none;
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 1px;
}
.input::placeholder, .textarea::placeholder { color: #6b7480; }

fieldset { margin: 0; padding: 0; border: 0; }
.check-grid { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 600px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c3cad3;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.check:hover { border-color: var(--navy); background: var(--wood-tint); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy); flex: 0 0 auto; }
.check:has(input:checked) { border-color: var(--navy); background: var(--wood-tint); }
.check:has(input:focus-visible) { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

.form-privacy {
  padding: 16px 18px;
  background: var(--wood-tint);
  border-radius: var(--radius-sm);
  font-size: .86rem;
  color: #3a424c;
  line-height: 1.8;
}
.form-actions { display: grid; gap: 12px; }
.form-status {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  background: var(--navy);
  color: #fff;
  line-height: 1.7;
}
.form-status[hidden] { display: none; }

/* サイド情報 */
.contact-side { display: grid; gap: 20px; }
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.side-card h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
}
.side-tel {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .02em;
  text-decoration: none;
  line-height: 1.3;
}
.side-tel:hover { color: var(--accent-hover); }
.side-card dl {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 8px 12px;
  font-size: .88rem;
  margin-top: 12px;
}
.side-card dt { font-weight: 800; color: var(--muted); }
.side-card dd { margin: 0; }
.side-card img { border-radius: var(--radius-sm); margin-top: 12px; width: 100%; }
.side-card p { font-size: .88rem; color: #3a424c; line-height: 1.8; }
.area-list { margin-top: 12px; font-size: .86rem; color: #3a424c; line-height: 1.9; }

/* ==========================================================================
   footer
   ========================================================================== */
.footer {
  background: var(--navy-deep);
  color: #c5d0de;
  padding: 48px 0 0;
  font-size: .9rem;
}
.footer-top { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } }

.footer .logo { margin-bottom: 14px; }
.footer-addr { font-style: normal; line-height: 1.9; font-size: .88rem; }
.footer-addr a { color: #fff; font-weight: 700; }
.footer-tel {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
}
.footer-tel:hover { color: var(--wood); }
.footer-hours { font-size: .82rem; color: #9fb0c4; margin-top: 2px; }

.footer h2 {
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent-on-navy);
  margin-bottom: 14px;
}
.footer-nav { display: grid; gap: 10px; }
.footer-nav a { color: #c5d0de; text-decoration: none; font-weight: 600; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-nav a[aria-current="page"] { color: #fff; font-weight: 800; }

.footer-bottom {
  margin-top: 40px;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  gap: 6px;
}
.copyright { font-size: .8rem; color: #9fb0c4; }
.demo-disclaimer {
  font-size: .72rem;
  color: #7d8ea3;
  line-height: 1.7;
}

/* ==========================================================================
   ページ内リンク（アンカー）のヘッダー被り対策
   ========================================================================== */
[id] { scroll-margin-top: 80px; }

/* ==========================================================================
   カウントアップ用：JS未実行でも値は見える（HTMLに最終値を書いてある）
   ========================================================================== */
.is-counting { will-change: contents; }

/* 印刷 */
@media print {
  .site-header, .footer, .cta, .skip-link { display: none; }
  body { color: #000; }
}

/* ---------------------------------------------------------
   追従CTA（メインビジュアルを抜けてから出す）
   トップはヒーローが画面から完全に出たら、下層は少しスクロールしたら現れる。
   --------------------------------------------------------- */
.float-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--navy);
  box-shadow: 0 -4px 18px rgba(31, 58, 95, .12);

  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, visibility 0s linear .3s;
}
.float-cta.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, visibility 0s;
}
.float-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}
.float-cta .sub { font-size: .68rem; font-weight: 500; letter-spacing: .04em; opacity: .85; }
.float-cta__tel {
  color: var(--navy);
  border: 2px solid var(--navy);
  background: #fff;
  font-size: 1.02rem;
}
.float-cta__tel:hover { background: var(--wood-tint); }
.float-cta__btn {
  color: #fff;
  background: var(--accent-strong);
  font-size: 1rem;
}
.float-cta__btn:hover { background: var(--accent-hover); }

/* PCでは右下の縦積みカードにする（本文の邪魔をしない） */
@media (min-width: 1024px) {
  .float-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 230px;
    padding: 12px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(31, 58, 95, .22);
    transform: translateY(20px);
  }
  .float-cta.is-visible { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .float-cta { transition: opacity .01s, visibility 0s linear .01s; transform: none; }
  .float-cta.is-visible { transition: opacity .01s, visibility 0s; transform: none; }
}

@media print { .float-cta { display: none !important; } }


/* ---------------------------------------------------------
   日本語の改行：見出し・リード文は「文節」で折る
   auto-phrase … 「内訳を出す会／社」のような語中改行を防ぐ
   --------------------------------------------------------- */
@supports (word-break: auto-phrase) {
  /* 見出しだけでなく本文・リスト・キャプションまで文節改行にする
     （ヒーロー文で「京／都」と割れるなど、pタグ側でも語中改行が起きるため） */
  h1, h2, h3, h4, p, li, dd, dt, figcaption, blockquote, th, td, summary {
    word-break: auto-phrase;
  }
}


/* ---------------------------------------------------------
   Googleマップの埋め込み枠
   --------------------------------------------------------- */
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wood-tint);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 無料訴求などに添える注記（打消し表示は近接・同程度の視認性で置く） */
.note-inline { display: block; margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--muted); }

.footer-privacy { margin-bottom: 6px; font-size: .82rem; }
.footer-privacy a { color: #b9c7da; }

/* 個人情報の同意チェック */
.consent-field { margin-top: 8px; }
.check--consent { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.check--consent input { margin-top: 5px; flex: none; }

/* 追従CTAバー（fixed）がフッター末尾を覆っていたので、その高さ分だけ底上げする。
   1024px以上ではバーが右下の小さなカードに変わるため、余白は戻す。 */
body { padding-bottom: 80px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* ロゴマーク（切妻屋根＋下げ振り。旧「木」の文字マークから差し替え） */
.logo-mark { background: none !important; font-size: 0; width: 40px; height: 40px; }
.logo-mark .logo-img { width: 40px; height: 40px; display: block; }

/* ---------------------------------------------------------
   ホームへ戻るときのロード画面
   ロゴ（サイト名）を押したときだけ出す。0.6秒見せてから遷移する。
   --------------------------------------------------------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: #1f3a5f;
  opacity: 0;
  transition: opacity .28s ease;
}
.page-loader[hidden] { display: none; }
.page-loader.is-shown { opacity: 1; }
.page-loader__inner { display: grid; justify-items: center; gap: 16px; }
.page-loader__logo { width: 72px; height: 72px; display: block; animation: loaderPulse 1.4s ease-in-out infinite; }
.page-loader__name {
  color: #ffffff;
  font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  font-size: 1.05rem;
  letter-spacing: .16em;
}
.page-loader__bar {
  width: 160px; height: 2px;
  background: rgba(128,128,128,.25);
  overflow: hidden;
}
.page-loader__bar span {
  display: block;
  width: 40%; height: 100%;
  background: #c8752e;
  animation: loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes loaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

@media (prefers-reduced-motion: reduce) {
  .page-loader__logo, .page-loader__bar span { animation: none; }
  .page-loader { transition: none; }
}

.page-loader__text { font-size: .8rem; letter-spacing: .1em; color: #b9c7da; }

/* ウッド地（#f6f1e8）の上では --accent-strong が 4.35:1 で足りないため、もう一段濃く */
.section--wood .eyebrow { color: var(--accent-hover); }

/* ---------------------------------------------------------
   文末の改行（<br class="sb">）
   「。」ごとに改行して読みやすくする指定。
   ただし極端に狭い画面では、1文が数行に折り返したうえで
   さらに改行が入り、行が飛び飛びに見えるため無効にする。
   --------------------------------------------------------- */
br.sb { display: inline; }
@media (max-width: 359px) {
  br.sb { display: none; }
}

/* ---------------------------------------------------------
   法務ページ（個人情報の取り扱い）
   リセットで h2/p の margin を 0 にしているため、
   このページ専用に行間・段落間を戻す
   --------------------------------------------------------- */
.legal h2 { margin: 34px 0 10px; font-size: 1.12rem; line-height: 1.6; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 16px; line-height: 1.95; }
.legal .note { margin-top: 30px; font-size: .85rem; opacity: .8; }