@charset "UTF-8";

/* 永野塗装店 公式サイト — TOPページ
 *
 * デザインの出所: ../../../nagano-tosou-ops/design/generated/top-claude-design-260816.dc.html
 *   （Claude Design「永野塗装店LP.dc.html」/ props: theme=深緑基調, headingSerif=true, standalone=true）
 * ブランド定義の正本: ../../../nagano-tosou-ops/context/brand.md
 *
 * 本番化にあたっての変更点:
 *   - インラインstyleをトークン化してここに集約（下層7ページ展開時の共通土台にするため）
 *   - コンテナクエリ(@container / cqw)をメディアクエリ(@media / vw)へ変換。
 *     ページ最外周のコンテナ幅＝ビューポート幅なので値は等価。iOS 15 以前でも崩れないようにする狙い
 *     （主要顧客層が50〜80代＝端末が古い可能性を考慮）
 *   - FVの見出しを clamp() 化。元は 24px 固定＋nowrap で、320px幅の端末で横溢れしていた
 */

/* ============================================================
   1. デザイントークン
   ============================================================ */
:root {
  /* ブランドカラー（正本: context/brand.md）*/
  --brand: #006036;         /* 深緑・メイン */
  --brand-dark: #00341f;    /* フッター用の暗い深緑 */
  --sage: #c8d6cd;          /* 淡いセージグリーン・補助 */
  --line-green: #06C755;    /* LINE公式カラー */

  /* 面 */
  --page-bg: #eef3ef;       /* ページ地（深緑基調テーマ）*/
  --alt-bg: var(--sage);    /* 交互に敷くセクション地 */
  --contact-bg: var(--sage);
  --surface: #ffffff;       /* カード地 */
  --hero-fallback: #0a3520; /* FV画像の読み込み前・欠落時の地色 */

  /* 文字 */
  --text: #1f2a24;
  --text-body: #39463f;
  --text-sub: #5c6a62;
  --text-note: #4a5750;
  --text-ph: #58685f;       /* 写真プレースホルダーのラベル */
  --amber: #8a5a00;         /* 注記の強調（※見積依頼＝契約ではありません 等）*/

  /* 罫線 */
  --border-card: #dde5df;
  --border-rule: #e7ede9;
  --border-soft: #e0e8e2;

  /* CTA */
  --cta-bg: var(--brand);   /* 深緑基調テーマ。白基調テーマでは #d97706 */

  /* フォント */
  --font-body: 'Noto Sans JP', system-ui, sans-serif;
  --font-heading: 'Noto Serif JP', serif;

  /* 角丸 */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* 影 */
  --shadow-card: 0 2px 10px rgba(15, 40, 28, .08);
  --shadow-cta: 0 3px 10px rgba(0, 40, 20, .2);

  /* セクション余白 */
  --sec-pad: clamp(56px, 8vw, 96px);
  --sec-pad-lg: clamp(64px, 9vw, 110px);
}

/* ============================================================
   2. ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* 固定ヘッダーに隠れないようにアンカー位置を下げる */
[id] { scroll-margin-top: 84px; }

/* キーボード操作時のフォーカスを明示（高齢のお客様の拡大表示・キーボード操作を考慮）
   白リング＋アンバーの外周の二重にしてある。アンバー単色だと深緑のヘッダー（1.30:1）・
   フッター（2.34:1）・LINE緑（2.63:1）の上で見えず、そこにあるリンクの到達位置が分からなくなるため。
   白は深緑上で 12.6:1、アンバーは白地上で 5.93:1 なので、どちらの地色でも輪郭が残る */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amber);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 共通: 中央寄せコンテナ */
.wrap { max-width: 1080px; margin: 0 auto; }
.wrap--wide { max-width: 1200px; }
.wrap--hero { max-width: 1160px; }
.wrap--narrow { max-width: 980px; }
.wrap--faq { max-width: 800px; }

/* 共通: セクション見出し */
.sec { padding: var(--sec-pad) 20px; }
.sec--alt { background: var(--alt-bg); }

.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head--tight { margin-bottom: 28px; }

.sec-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.5;
}

.sec-head .rule {
  width: 52px;
  height: 4px;
  background: var(--brand);
  margin: 16px auto 0;
  border-radius: 2px;
}

/* 共通: 写真プレースホルダー（実写真が入り次第 <img> に差し替える）*/
.ph {
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg, #dfe8e2, #dfe8e2 12px, #d2ded6 12px, #d2ded6 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 12px;
  color: var(--text-ph);
  text-align: center;
}
.ph--gray {
  background: repeating-linear-gradient(45deg, #e3e3e0, #e3e3e0 12px, #d6d6d2 12px, #d6d6d2 24px);
  color: #68685f;
}

/* 写真スロット: .ph が実写真に置き換わったあとの受け皿。
   縦が固定・横が可変（最大 421px / 519px）で縦横比が 2.0:1〜3.8:1 の間で動くため、
   事前トリミングでは収まらない。cover で切る前提にしている。 */
.card-photo {
  display: block;
  width: 100%;
  border-radius: var(--r-sm);
  object-fit: cover;
}
.nayami-card .card-photo { height: 110px; }
.tsuyomi-card .card-photo { height: 150px; }
.daihyo-photo { object-fit: cover; }   /* 既存の寸法定義（250x310）はそのまま使う */

/* ============================================================
   3. ヘッダー
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--brand);
  box-shadow: 0 2px 10px rgba(0, 20, 10, .25);
}

.header-inner {
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.header-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}
.header-logo img { height: 44px; width: auto; display: block; }

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.header-tel-link {
  color: #fff;
  text-decoration: none;
  text-align: right;
  line-height: 1.3;
}
.header-tel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-weight: 900;
  font-size: clamp(21px, 4vw, 30px);
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-tel .icon { font-size: .85em; }
/* 13.5px → 16px（2026-08-19 D-1 対応）。「今かけていい時間か」を確かめる文字が
   ページ内で最小、は導線①が電話のサイトとして順序が逆だった。
   数字との階層は opacity と字間で保つ */
.header-hours { display: block; font-size: 16px; opacity: .92; margin-top: 2px; }

.btn-line {
  background: var(--line-green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.btn-line:hover { filter: brightness(1.07); }

/* ============================================================
   4. ファーストビュー
   ============================================================ */
.hero { background: #fff; }

.hero-photo {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--hero-fallback);
}

/* PC/SPの出し分けは <picture> の <source media> で行う。
   2枚の <img> を display:none で切り替える形だと、ブラウザは両方を取得してしまい、
   スマホで 171KB + 115KB を読むことになるため */
.hero-photo picture { position: absolute; inset: 0; }

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(4, 30, 18, .88) 0%,
    rgba(4, 30, 18, .7) 28%,
    rgba(4, 30, 18, .2) 55%,
    rgba(4, 30, 18, 0) 75%);
}

.hero-content {
  position: relative;
  height: 100%;
  margin: 0 auto;
  padding: 112px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  /* 元デザインは 44px 固定＋nowrap。狭幅で溢れるため clamp 化（320px端末でも収まる係数）*/
  font-size: clamp(20px, 6.4vw, 44px);
  line-height: 1.6;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0, 20, 10, .45);
}

.hero-sub {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 19px;
  font-weight: 500;
  line-height: 2;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 10px rgba(0, 20, 10, .5);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  max-width: 640px;
}
.hero-badge {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(4, 30, 18, .35);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 700;
}

/* FV直下のCTA3本 */
.cta-band {
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  padding: 20px 16px;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}

.cta {
  text-decoration: none;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.cta--phone {
  background: var(--cta-bg);
  color: #fff;
  padding: 15px 12px;
  box-shadow: var(--shadow-cta);
}
.cta--phone:hover { filter: brightness(1.1); }
.cta--phone .label { font-size: 13.5px; font-weight: 700; opacity: .95; }
.cta--phone .number { font-size: 25px; font-weight: 900; letter-spacing: .02em; }

.cta--line {
  background: var(--line-green);
  color: #fff;
  padding: 14px 8px;
  box-shadow: 0 3px 10px rgba(0, 40, 20, .15);
}
.cta--line:hover { filter: brightness(1.07); }

.cta--form {
  background: #fff;
  color: var(--brand);
  border: 2px solid var(--brand);
  padding: 14px 8px;
}
.cta--form:hover { background: var(--page-bg); }

/* align-items:center だと子要素が max-content 幅のままカードから溢れるため上限を切る
   （375px幅で3本目のCTAの見出しが見切れていた）*/
.cta > span { max-width: 100%; }

/* CTA帯の補足。LINEボタンは公式カラー（白文字 on #06C755 = 2.26:1）でコントラスト基準を
   満たさないため、同じ情報を白地＋濃色でも読める形にしておくための行。
   緑のボタン単体に情報を依存させないのが目的（docs/quality-checklist.md D-3）*/
.cta-note {
  max-width: 1080px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
}

.cta .title { font-size: 17px; font-weight: 900; }
.cta .note { font-size: 13.5px; opacity: .95; }
.cta--form .note { opacity: .85; }

/* ============================================================
   5. 共感セクション
   ============================================================ */
.nayami-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.nayami-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nayami-card .ph { height: 110px; }
.nayami-label { display: flex; align-items: center; gap: 10px; }
.check {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
}
.nayami-label span:last-child { font-size: 18px; font-weight: 700; }

.nayami-close {
  text-align: center;
  margin: 36px auto 0;
  max-width: 680px;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 2;
}

/* ============================================================
   6. 強み3本柱
   ============================================================ */
.tsuyomi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.tsuyomi-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
}
.tsuyomi-card .ph { height: 150px; }
.tsuyomi-label { color: var(--brand); font-weight: 900; font-size: 14px; letter-spacing: .12em; }
.tsuyomi-card h3 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.6; }
.tsuyomi-card p { margin: 0; font-size: 16px; line-height: 1.9; color: var(--text-body); }

/* ============================================================
   7. 安心宣言（ページ内で最も強調するブロック）
   ============================================================ */
.anshin {
  background: var(--brand);
  color: #fff;
  padding: var(--sec-pad-lg) 20px;
  text-align: center;
}
.anshin-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.anshin-tag {
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-pill);
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
}
.anshin-lead {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(23px, 4.2vw, 42px);
  line-height: 1.7;
  text-wrap: balance;
}
.anshin-body {
  margin: 0;
  max-width: 720px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 2.1;
  color: rgba(255, 255, 255, .92);
}

/* ============================================================
   8. 施工の流れ
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.step {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
}
.step-title { font-weight: 700; font-size: 16px; line-height: 1.5; }
.step-note { font-size: 14.5px; font-weight: 700; color: var(--amber); line-height: 1.5; }

/* ============================================================
   9. 料金の考え方
   ============================================================ */
/* セクションのリード文。中央揃えをやめた（2026-08-16）。
   375pxでは60〜70字のリードが3〜4行になり、行頭も行末も揃わないうえ、
   最後の行が「ん。」1文字だけで残ることがある。中央揃えが成立するのは
   見出しやボタンのような1〜2行の短い文字列まで。
   ブロックは margin:auto で中央に置いたまま、本文だけ左揃えにする。
   max-width を 760 → 640px に絞ったのは、左揃えにすると1行が長いほど
   次の行の頭を目で探しにくくなるため（主要顧客層が50〜80代）*/
.price-lead {
  text-align: left;
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 2.1;
}
.price-grid {
  display: grid;
  /* 320px幅では内幅280pxしかない。290pxだとページごと横スクロールするため他のグリッドに揃える */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.price-card {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.price-card h3 {
  margin: 0;
  background: var(--brand);
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: 19px;
  padding: 14px;
}
.price-rows { padding: 8px 20px 16px; }
/* 1行目=塗料名/㎡単価、2行目=耐用年数/坪単価 の2×2グリッド。
   横1列に4つ並べると、320px（カード内容幅240px）で塗料名が押し出されて
   .price-card の overflow:hidden に切られる。縦に逃がすことで、1行目の必要幅は
   むしろ 298.4px → 229.3px に減る（＝坪単価を足す前から375pxで折り返していた
   「屋根シリコン樹脂」の行も同時に直る）。
   2列目を auto、1列目を minmax(0,1fr) にしてあるので、列幅の下限を決めるのは
   .price の white-space:nowrap。どれだけ狭くても金額は欠けず、先に縮むのは塗料名だけ。
   視覚順（名前→㎡単価→年数→坪単価）とDOM順（名前→年数→㎡単価→坪単価）が
   一致しないのは意図的。どちらの順でも意味が通るため WCAG 1.3.2 は満たす */
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-rule);
}
.price-row .name { grid-area: 1 / 1; font-weight: 700; font-size: 17px; }
.price-row .price { grid-area: 1 / 2; text-align: right; font-weight: 900; font-size: 19px; color: var(--brand); white-space: nowrap; }
/* 14px → 16px（2026-08-19 D-1 対応）。耐用年数は価格と並ぶ意思決定情報 */
.price-row .years { grid-area: 2 / 1; font-size: 16px; color: var(--text-sub); }
/* 坪単価を㎡単価の真下に一段落として置くのは、延床坪数と読み違えたときに
   大きい数字のほうが先に目に入るのを避けるため。
   nowrap は付けない（ブラウザの文字サイズ拡大時、切れるより折り返すほうが安全） */
.price-row .tsubo { grid-area: 2 / 2; text-align: right; font-weight: 900; font-size: 16px; color: var(--text-body); }

/* 金額に直結する但し書き。価格が19px/900で出るのに注記が14pxだと読み飛ばされる。
   中央揃えをやめた（2026-08-16）。坪単価の併記で ※ が5項目に増え、
   中央揃えだと項目ごとに行頭がずれて、どこから次の但し書きか分からなくなっていた。
   ブロック自体は margin:auto で中央に置いたまま、本文だけ左揃えにする。
   ※ は擬似要素ではなく本文に置き、ぶら下げインデントで2行目以降を字下げする */
.price-note {
  text-align: left;
  font-size: 15.5px;
  color: var(--text-body);
  margin: 24px auto 0;
  max-width: 640px;
  line-height: 1.9;
  list-style: none;
  padding: 0;
}
.price-note li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.price-note li + li { margin-top: 10px; }

/* ============================================================
   10. 施工事例
   ============================================================ */
.jirei-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.jirei-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jirei-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jirei-photos .ph { position: relative; height: 130px; font-size: 11px; }
.jirei-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--text-sub);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
}
.jirei-tag--after { background: var(--brand); }
.jirei-card h3 { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.6; }
.jirei-card p { margin: 0; font-size: 15px; color: var(--text-body); line-height: 1.8; }

/* ============================================================
   11. 代表者紹介
   ============================================================ */
.daihyo {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: center;
}
.daihyo-photo {
  flex: 0 1 250px;
  min-width: 220px;
  height: 310px;
  border-radius: var(--r-lg);
}
.daihyo-body {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* --text-sub だとセージ地（TOPの代表紹介）で 3.78:1 になり不合格。--text-note で 5.04:1 */
.daihyo-role { font-size: 14px; color: var(--text-note); font-weight: 700; }
.daihyo-name { font-family: var(--font-heading); font-size: 28px; font-weight: 900; }
.daihyo-body p { margin: 0; font-size: 16px; line-height: 2; }
.daihyo-quote {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2.4vw, 20px) !important;
  font-weight: 700;
  line-height: 2;
  color: var(--brand);
  border-left: 4px solid var(--brand);
  padding-left: 16px;
}
.daihyo-facts {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 資格・加盟・保険は最も検証可能な信頼情報なので、補足サイズまで落とさない */
  font-size: 15px;
  color: var(--text-note);
}

/* ============================================================
   12. よくある質問（アコーディオン）
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }

/* overflow:hidden を使わない。子の .faq-q のフォーカスリング（外側に6px描かれる）を
   切り落としてしまい、サイト上の全ボタン19個でキーボードの現在位置が見えなくなるため。
   角丸は子側に持たせる */
.faq-item {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
}
/* 設問は見出しとしても辿れるようにする（スクリーンリーダーの見出しジャンプ）。
   見た目は変えないので、h3 の既定スタイルは打ち消す */
.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.faq-q {
  /* button要素の既定スタイルを打ち消してデザインどおりの行に */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  border-radius: var(--r-lg);
}
.faq-q:hover { background: var(--page-bg); }

.faq-q-text { font-weight: 700; font-size: 17px; line-height: 1.6; }
.faq-q-text .mark { color: var(--brand); font-weight: 900; margin-right: 10px; }

.faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--page-bg);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 900;
}
.faq-icon::before { content: "＋"; }
.faq-item.is-open .faq-icon::before { content: "−"; }

.faq-a {
  display: none;
  padding: 0 20px 18px;
  font-size: 16px;
  line-height: 2;
  color: var(--text-body);
}
.faq-item.is-open .faq-a { display: block; }
.faq-a .mark { color: var(--amber); font-weight: 900; margin-right: 10px; }

/* JS が動かない環境では全問開いた状態で読めるようにする */
.no-js .faq-a { display: block; }
.no-js .faq-icon { display: none; }

/* ============================================================
   13. 問い合わせCTA
   ============================================================ */
/* --contact-bg と --alt-bg はどちらも --sage。下層では直前が .sec--alt になることが多く、
   境目が消えて最後のCTAが前のセクションの続きに見える。上端に帯を入れて切れ目を作る */
.contact {
  padding: var(--sec-pad-lg) 20px;
  background: var(--contact-bg);
  border-top: 4px solid var(--brand);
}

.contact .sec-head h2 { font-size: clamp(23px, 3.6vw, 36px); line-height: 1.7; text-wrap: balance; }

/* 中間幅で 2枚＋1枚 に割れて3枚目だけ半端に残るのを防ぐため、
   auto-fit ではなく 1列 / 3列 の2段階にする */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-phone {
  background: var(--cta-bg);
  color: #fff;
  text-decoration: none;
  border-radius: var(--r-xl);
  padding: 26px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.contact-phone:hover { filter: brightness(1.08); }
.contact-phone .label { font-size: 15px; font-weight: 700; }
.contact-phone .number { font-size: clamp(26px, 4vw, 34px); font-weight: 900; letter-spacing: .02em; }
/* 13.5px → 16px（2026-08-19 D-1 対応）。main 配下で最小の文字だった */
.contact-phone .hours { font-size: 16px; opacity: .92; }

.contact-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 40, 28, .1);
}
/* QRコードはスマホでは読めない（自分の画面に出ているため）。
   場所を食ってLINEカードだけ背が高くなり、電話①＞LINE② の優先順位が見た目で崩れるので隠す */
.contact-card .ph { display: none; width: 110px; height: 110px; font-size: 11px; }
@media (min-width: 768px) {
  .contact-card .ph { display: flex; }
}
.contact-card .lead { font-size: 15px; color: var(--text-body); line-height: 1.8; }
/* LINEボタン（緑地白文字 2.26:1）の内容を白地の濃色で担保する行。
   D-3 の例外はこの補足があることを前提にしているので、小さくしすぎない */
.contact-card .note { font-size: 15px; color: var(--text-sub); line-height: 1.7; }

.btn-line-round {
  background: var(--line-green);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 17px;
  border-radius: var(--r-pill);
  padding: 13px 30px;
}
.btn-line-round:hover { filter: brightness(1.07); }

.btn-form {
  border: 2px solid var(--brand);
  color: var(--brand);
  text-decoration: none;
  font-weight: 900;
  font-size: 17px;
  border-radius: var(--r-pill);
  padding: 12px 30px;
}
.btn-form:hover { background: var(--brand); color: #fff; }

/* ============================================================
   14. フッター
   ============================================================ */
.site-footer {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .88);
  padding: 40px 20px 32px;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
.footer-inner img { height: 52px; width: auto; display: block; }
.footer-info { font-size: 14.5px; line-height: 2; }
.footer-info a { color: rgba(255, 255, 255, .88); }
.footer-copy { font-size: 13px; color: rgba(255, 255, 255, .6); }

/* ============================================================
   15. スマホ固定バー（電話・LINE）
   ============================================================ */
.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, .25);
  /* iPhone のホームインジケータ領域を避ける */
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  color: #fff;
  text-decoration: none;
  padding: 16px 8px;
  text-align: center;
  font-weight: 900;
  font-size: 17px;
}
.mobile-bar .tel { background: var(--cta-bg); }
.mobile-bar .line { background: var(--line-green); }

/* 固定バーに最後のコンテンツが隠れないための余白 */
.mobile-bar-spacer { height: 64px; }

/* PCでは固定バーを出さない */
@media (min-width: 768px) {
  .mobile-bar,
  .mobile-bar-spacer { display: none !important; }
}

/* ============================================================
   16. 下層ページ共通パーツ
   グローバルナビ / パンくず / ページ見出し / 本文 / 表 / 注記
   主要顧客層が50〜80代のため、ナビは隠さず常に見える形にする
   （ハンバーガーメニューは「押せば出る」ことに気づけない層がいる）
   ============================================================ */

/* --- グローバルナビ ---
   SPは2列×4行のグリッド。1項目52px以上でタップ領域を確保する。
   TOPではFV直下のCTA帯より後ろに置く（FVを押し下げないため）*/
.site-nav { background: #fff; border-bottom: 1px solid var(--border-soft); }
/* 「ここから下はメニュー」と分かる手がかり。TOPではナビがFVの下にあり、
   スマホの初期画面に他ページの存在を示すものが無くなるため、見出しを明示する */
.site-nav-title {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-note);
  text-align: center;
}
.site-nav ul {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 10px;
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-rule);
}
.site-nav li:nth-child(odd) a { border-right: 1px solid var(--border-rule); }
.site-nav a:hover { background: var(--page-bg); }
/* 現在地は色だけに頼らず、下線の帯でも示す */
.site-nav a[aria-current="page"] {
  color: var(--brand);
  background: var(--page-bg);
  box-shadow: inset 0 -4px 0 var(--brand);
}

@media (min-width: 768px) {
  .site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .site-nav a { min-height: 58px; padding: 8px 20px; font-size: 16px; border-bottom: 0; }
  .site-nav li:nth-child(odd) a { border-right: 0; }
}

/* --- パンくず --- */
.breadcrumb { background: var(--page-bg); }
.breadcrumb ol {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-note);
}
/* タップ領域44pxを確保する。ol の縦paddingを a/li の min-height に振り替えているので
   帯の見た目の高さは変わらない */
.breadcrumb li { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text-note);
}
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--text-sub); }

/* --- ページ見出し帯 --- */
.page-hero {
  background: var(--brand);
  color: #fff;
  padding: clamp(36px, 6vw, 64px) 20px;
  text-align: center;
}
.page-hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(25px, 4.4vw, 40px);
  line-height: 1.6;
}
.page-hero .lead {
  margin: 18px auto 0;
  max-width: 760px;
  /* 下限は16px。2vw が 15.5px に届くのは775px幅からで、スマホでは常に下限に張り付く */
  font-size: clamp(16px, 2vw, 17px);
  line-height: 2;
  color: rgba(255, 255, 255, .93);
}

/* --- 本文ブロック --- */
.prose { max-width: 820px; margin: 0 auto; }
.prose > *:first-child { margin-top: 0; }
.prose h3 {
  margin: 40px 0 14px;
  font-size: clamp(19px, 2.6vw, 22px);
  font-weight: 900;
  line-height: 1.6;
  padding-left: 14px;
  border-left: 5px solid var(--brand);
}
.prose p { margin: 0 0 1.3em; font-size: 17px; line-height: 2.05; color: var(--text-body); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.prose li { margin-bottom: .7em; font-size: 16.5px; line-height: 1.95; color: var(--text-body); }
.prose strong { color: var(--text); }
.prose a { color: var(--brand); }

/* --- 定義表（会社概要・プライバシーポリシーの項目）--- */
.info-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border-card);
}
.info-table th,
.info-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-rule);
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.9;
}
.info-table th { width: 32%; background: var(--page-bg); font-weight: 700; color: var(--text); }
.info-table td { color: var(--text-body); }
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: 0; }
/* 表の中の tel: / mailto: / 地図リンクもタップ領域44pxを確保する。
   td の padding があるので行の見た目はほぼ変わらない */
.info-table td a { display: inline-flex; align-items: center; min-height: 44px; }

/* 狭い画面では縦積みにする（横スクロールを出さない）*/
@media (max-width: 599px) {
  .info-table th,
  .info-table td { display: block; width: auto; }
  .info-table th { border-bottom: 0; padding-bottom: 4px; }
}

/* 単価表は専用のテーブルを起こさず、TOPと同じ .price-card / .price-row を使う。
   3列のテーブルは 320px で㎡単価の桁が切れて横スクロールになり、
   いちばん見たい数字が読めなくなるため（quality-checklist D-5）。
   2026-08-16 に坪単価を併記したときも、4列テーブルに戻さず .price-row を
   2×2グリッドにして縦へ逃がした。320px のカード内容幅は240pxで、
   1行目（塗料名＋㎡単価）229.3px / 2行目（耐用年数＋坪単価）177.6px。
   実装の根拠は .price-row のコメント（「9. 料金の考え方」）*/

/* --- 注記ボックス（準備中・確認待ちの明示）--- */
.notice {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border-card);
  border-left: 5px solid var(--amber);
  border-radius: var(--r-md);
  padding: 18px 22px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-body);
}
.notice p { margin: 0 0 .9em; }
.notice p:last-child { margin-bottom: 0; }
.notice-title { display: block; font-weight: 900; color: var(--text); margin-bottom: 6px; }

/* --- 施工の流れ（下層の詳細版）--- */
.flow-steps {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flow-step {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.flow-step .num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
}
/* 沿革では番号ではなく年に意味がある。丸バッジを年表示のピルに変える */
.flow-step--year .num { width: auto; height: auto; border-radius: var(--r-pill); padding: 6px 14px; font-size: 14.5px; }
.flow-step h3 { margin: 0 0 6px; font-size: 18px; font-weight: 900; line-height: 1.6; }
.flow-step p { margin: 0; font-size: 16px; line-height: 1.95; color: var(--text-body); }
.flow-step .caution { margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--amber); }

/* --- セクション末尾の「詳しく見る」リンク --- */
.sec-more {
  text-align: center;
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.sec-more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 30px;
  border: 2px solid var(--brand);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--brand);
  font-weight: 900;
  font-size: 16.5px;
  text-decoration: none;
}
.sec-more a::after { content: "→"; }
.sec-more a:hover { background: var(--brand); color: #fff; }

/* --- フッターのサイトマップ --- */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  font-size: 15px;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }

/* --- 404 --- */
/* ページ一覧は本文リンクではなく .site-nav を流用する（他ページと導線が揃い、
   タップ領域54pxも自動的に満たせる）*/
.notfound { padding: var(--sec-pad) 20px; text-align: center; }
.notfound .prose { text-align: left; }

/* ============================================================
   17. スマホ（〜767px）
   主要顧客層が50〜80代のため、電話番号とCTAの視認性を最優先
   ============================================================ */
@media (max-width: 767px) {
  /* SP画像は縦長。人物が左寄りに写っているため見切れないように寄せる */
  .hero-img { object-position: 32% 28%; }

  .hero-photo { height: 520px; }

  /* SPは画像の下側に文字を重ねるため、縦方向グラデーションへ差し替え */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(4, 30, 18, .06) 0%,
      rgba(4, 30, 18, .14) 24%,
      rgba(4, 30, 18, .78) 46%,
      rgba(4, 30, 18, .9) 100%);
  }

  .hero-content { justify-content: center; padding: 126px 20px 0; }
  .hero-title { line-height: 1.65; }
  .hero-sub { font-size: 15.5px; line-height: 1.95; margin-top: 12px; }
  .hero-badges { gap: 7px; margin-top: 16px; }
  .hero-badge { font-size: 13.5px; padding: 5px 12px; }

  /* 電話CTAは横幅いっぱいで最優先表示 */
  .cta-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cta--phone { grid-column: 1 / -1; }

  /* ヘッダーはロゴのみ。電話導線は固定バーが担う */
  .header-inner { flex-wrap: nowrap; justify-content: center; padding: 6px 12px; }
  .header-right { display: none; }
}