@charset "UTF-8";
/* ============================================================
   遠州いえなおし舎（仮称）／ 磐田市 住宅リフォーム
   モバイルファースト（基本320〜480px → 768px → 1024px）
   ------------------------------------------------------------
   目次
     01. デザイントークン
     02. リセット・ベース
     03. 公開前ドラフト告知バナー
     04. ヘッダー／ハンバーガー／ドロワー
     05. 共通パーツ（ボタン・見出し・注記）
     06. ヒーロー
     07. お困りごと
     08. ひとつの窓口（強み）
     09. サービス
     10. 料金
     11. 施工事例
     12. 仕事の進め方
     13. 職人紹介
     14. 対応エリア
     15. ご相談の流れ
     16. FAQ
     17. 問い合わせ
     18. フッター
     19. メディアクエリ（768px / 1024px）
   ============================================================ */

/* ===== 01. デザイントークン ============================== */
:root {
  --c-navy:      #1D3A57;
  --c-navy-deep: #16232E;
  --c-ink:       #16232E;
  --c-sub:       #5A6C77;
  --c-base:      #FFFFFF;
  --c-paper:     #F4F6F5;
  --c-line:      #DDE3E5;
  --c-accent:    #F2B807;
  --c-accent-dk: #C99700;

  /* イラストの生成り地。contain で余った帯を絵の地色と揃えるためのもので、
     --c-paper（淡色背景 #F4F6F5）とは別物。流用すると継ぎ目が出る。
     ★値は hero-main.webp の実測地色。他のイラストも #FBF8F0〜#F8F4EE の範囲で、
       画像を差し替えたら地色を測り直すこと（ズレると帯との境目が線になって見える） */
  --c-illust-bg: #FCF6ED;

  --c-ink-rgb:   22, 35, 46;
  --c-paper-rgb: 244, 246, 245;

  --font-base: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num:  "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;

  /* 1rem = 16px 基準・比率1.25 */
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;

  --space-sec: 4rem;
  --header-h: 60px;
  --notice-h: 44px;   /* 告知バナーの実高さ。main.js が実測値で上書きする */
  --radius: 4px;
  --radius-pill: 999px;
  --maxw: 1120px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ===== 02. リセット・ベース ============================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-base);
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* ===== 03. 公開前ドラフト告知バナー ======================
   統一仕様（指示書.md）のレイアウトを踏襲。
   本サイトは架空ではなく「公開前ドラフト」のため文言のみ変更。
   ======================================================== */
.portfolio-notice {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--c-navy-deep);
  color: var(--c-paper);
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.6;
  border-bottom: 1px solid var(--c-accent);
  font-family: var(--font-base);
}
.portfolio-notice strong {
  color: var(--c-accent);
  letter-spacing: 0.2em;
  margin-right: 0.6rem;
  font-weight: 500;
  font-family: var(--font-num);
}
.portfolio-notice .pn-close {
  background: transparent;
  border: 1px solid rgba(var(--c-paper-rgb), 0.4);
  color: var(--c-paper);
  font-size: 0.7rem;
  padding: 2px 8px;
  margin-left: 0.8rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  font-family: inherit;
}
.portfolio-notice .pn-close:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-navy-deep);
}

body.notice-visible { padding-top: var(--notice-h); }
body.notice-visible .site-header { top: var(--notice-h); }

@media (max-width: 720px) {
  :root { --notice-h: 84px; }   /* 折返し想定のフォールバック */
  .portfolio-notice { font-size: 0.7rem; padding: 0.5rem 0.8rem; }
}

/* ===== 04. ヘッダー／ハンバーガー／ドロワー ==============
   ⚠ .site-header に backdrop-filter / transform / filter を
     直接書かないこと（::before に逃がす）
   z-index: mask 210 < drawer 215 < hamburger 220 < notice 300
   ======================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 200;
  border-bottom: 1px solid var(--c-line);
  transition: top 0.3s;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
}
.header-inner {
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.logo-mark {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  background: var(--c-navy);
  color: var(--c-accent);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: var(--radius);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-ja { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; }
.logo-en {
  font-family: var(--font-num);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--c-sub);
}

.header-tel { display: none; }
.pc-nav { display: none; }

.hamburger {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 220;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.35s;
  transform-origin: center;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(var(--c-ink-rgb), 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  z-index: 210;
}
.drawer-mask.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 80vw;
  max-width: 340px;
  height: 100dvh;
  background: var(--c-base);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  z-index: 215;
  padding: calc(var(--header-h) + 1rem) 1.25rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer.is-open {
  transform: translateX(0);
  box-shadow: -8px 0 32px rgba(var(--c-ink-rgb), 0.18);
}
body.notice-visible .drawer { padding-top: calc(var(--header-h) + var(--notice-h) + 1rem); }

.drawer-list { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.drawer-list a {
  display: block;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--c-line);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s;
}
.drawer-list a:hover { color: var(--c-navy); }
.drawer-cta {
  margin-top: 1.25rem;
  background: var(--c-accent);
  color: var(--c-ink) !important;
  border-radius: var(--radius-pill);
  text-align: center;
  padding: 0.9rem 1rem !important;
  border: none !important;
  font-weight: 700 !important;
}
.drawer-footer { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.drawer-tel { display: flex; flex-direction: column; }
.drawer-tel-label { font-size: var(--fs-xs); color: var(--c-sub); }
.drawer-tel a {
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--c-navy);
}
.drawer-tel small { font-size: 0.7rem; color: var(--c-sub); line-height: 1.5; }

/* ===== 05. 共通パーツ ==================================== */
.section { padding: var(--space-sec) 0; }
.section-paper { background: var(--c-paper); }
.section-navy { background: var(--c-navy); color: var(--c-paper); }

.eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-navy);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--c-accent);
}
.eyebrow-light { color: var(--c-accent); }

.section-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.section-title-light { color: var(--c-paper); }
.section-lead { color: var(--c-sub); margin-bottom: 2rem; font-size: var(--fs-sm); }
.section-lead-light { color: rgba(var(--c-paper-rgb), 0.85); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-md);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.btn-primary { background: var(--c-accent); color: var(--c-ink); }
.btn-primary:hover { background: var(--c-accent-dk); transform: translateY(-2px); }
.btn-primary:disabled { background: var(--c-line); color: var(--c-sub); cursor: not-allowed; transform: none; }
.btn-ghost { border-color: currentColor; color: var(--c-navy); background: transparent; }
.btn-ghost:hover { background: var(--c-navy); color: var(--c-paper); }
.btn-block { width: 100%; }

.note-block {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--c-paper);
  border-left: 3px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-sub);
  line-height: 1.9;
}
.note-block-light {
  background: rgba(var(--c-paper-rgb), 0.08);
  border-left-color: var(--c-accent);
  color: rgba(var(--c-paper-rgb), 0.8);
}
.note-inline { font-size: var(--fs-xs); color: var(--c-sub); margin-top: 0.75rem; }

/* 未確定値のプレースホルダー表示 */
.tbd {
  display: inline-block;
  padding: 0.1em 0.6em;
  background: repeating-linear-gradient(
    -45deg, rgba(var(--c-ink-rgb), .06) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  color: var(--c-sub);
  font-size: 0.85em;
  letter-spacing: 0.06em;
}
.tbd-inline {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}
.tbd-inline::before { content: "※"; }

/* ===== 06. ヒーロー ====================================== */
/* ヒーローの絵は「左40%（568px）を空け、右に家を置いた」構図。
   その空白を見出しのコピースペースとして使う設計にしてある（1024px以上）。
   ★画像を差し替えるときは、この左の空きが無い絵だと文字が絵に被る。
     被る絵に替えるなら、@media (min-width:1024px) の重ね配置を削って2カラムに戻すこと

   1023px以下は重ねない。代わりに
   「名乗り＋見出し → 絵 → 説明・CTA」の順に縦積みする（DOM順のまま）。
   絵を先頭に置くと見出しが1画面目から押し出されて、何屋か分からないまま
   スクロールさせることになる。

   ★ヒーロー全体をイラストと同じ地色で塗るのが肝。画像だけ別の地色にすると
     境目が画面を横切って「素材をはめ込んだ枠」に見える。1枚の紙に見せる */
.hero {
  padding-top: var(--header-h);
  background: var(--c-illust-bg);
}
.hero-head { padding: 1.75rem 1.25rem 0; max-width: var(--maxw); margin: 0 auto; }
/* 絵は切らずに全部見せる。地色は .hero と同じなので縁が出ない。
   1:1 は hero-main-center.webp の比率ちょうど＝余白ゼロで家が一番大きく出る */
.hero-media, .hero-media picture { display: block; }
.hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
}
.hero-body { padding: 0.25rem 1.25rem 2.75rem; max-width: var(--maxw); margin: 0 auto; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin-bottom: 0.9rem;
}
.tag-region {
  background: var(--c-navy);
  color: var(--c-paper);
  padding: 0.2em 0.7em;
  border-radius: var(--radius);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.hero-title {
  /* 1行目「電気も、空調も、内装も。」は12字。--fs-2xl(31px) だと375px幅に収まらず
     「も。」だけ2行目に落ちるので、狭い画面では字送りを画面幅に追従させる */
  font-size: clamp(1.45rem, 6.6vw, var(--fs-2xl));
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.005em;
  margin-bottom: 1.1rem;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--c-accent) 62%);
  padding-right: 0.1em;
}
.hero-lead { color: var(--c-sub); font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.hero-points { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
.hero-points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 10px; height: 10px;
  background: var(--c-accent);
  border-radius: 2px;
}
.hero-cta { display: flex; flex-direction: column; gap: 0.75rem; }

/* ===== 07. お困りごと ==================================== */
.trouble-list { display: flex; flex-direction: column; gap: 0.6rem; }
.trouble-list li {
  background: var(--c-paper);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 0.9rem 2.6rem;
  position: relative;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.trouble-list li::before {
  content: "?";
  position: absolute;
  left: 0.9rem; top: 0.9rem;
  font-family: var(--font-num);
  font-weight: 600;
  color: var(--c-accent-dk);
  font-size: 1.1rem;
}
.trouble-note {
  margin-top: 1.5rem;
  font-size: var(--fs-sm);
  line-height: 1.9;
  padding: 1.1rem;
  border: 2px solid var(--c-navy);
  border-radius: var(--radius);
}
.trouble-note strong { background: linear-gradient(transparent 60%, var(--c-accent) 60%); }

/* ===== 08. ひとつの窓口 ================================== */
.funnel {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2.5rem;
  align-items: center;
}
.funnel-in {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.funnel-in li {
  border: 1px solid rgba(var(--c-paper-rgb), 0.35);
  border-radius: var(--radius);
  padding: 0.7rem 0.5rem;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.funnel-arrow {
  justify-self: center;
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid var(--c-accent);
}
.funnel-out {
  text-align: center;
  background: var(--c-accent);
  color: var(--c-ink);
  border-radius: var(--radius);
  padding: 1rem;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.funnel-out span { display: block; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; }

.strength-grid { display: grid; gap: 1rem; }
.strength-card {
  background: rgba(var(--c-paper-rgb), 0.08);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.strength-card h3 { font-size: var(--fs-md); margin-bottom: 0.5rem; }
.strength-card p { font-size: var(--fs-sm); color: rgba(var(--c-paper-rgb), 0.82); }

/* ===== 09. サービス ====================================== */
.service-grid { display: grid; gap: 1.25rem; }
.service-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-base);
}
/* サービスカードもイラスト。素材は 4:3 なので枠も 4:3 に合わせ、
   端の描き込みが切れないよう contain にする */
.service-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--c-illust-bg);
}
.service-body { padding: 1.25rem; }
.service-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.5rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--c-accent);
  line-height: 1.4;
}
.service-desc { font-size: var(--fs-sm); color: var(--c-sub); margin-bottom: 0.9rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.service-tags li {
  font-size: var(--fs-xs);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 0.25em 0.8em;
  letter-spacing: 0.02em;
}
.service-card-lead { border-color: var(--c-navy); border-width: 2px; }

/* ===== 10. 料金 ========================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--c-base);
  font-size: var(--fs-sm);
}
.price-table caption {
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  padding-bottom: 0.5rem;
}
.price-table th, .price-table td {
  border: 1px solid var(--c-line);
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.price-table thead th {
  background: var(--c-navy);
  color: var(--c-paper);
  font-weight: 500;
  white-space: nowrap;
}
.price-table tbody th { font-weight: 700; width: 12em; }
.price-cell { white-space: nowrap; font-family: var(--font-num); font-size: 1.05rem; }

.price-rules { margin-top: 2rem; background: var(--c-base); border-radius: var(--radius); padding: 1.25rem; }
.price-rules h3 { font-size: var(--fs-md); margin-bottom: 0.9rem; }
.price-rules dt {
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-top: 0.9rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--c-accent);
}
.price-rules dd { font-size: var(--fs-sm); color: var(--c-sub); padding-left: 0.6rem; }

/* ===== 11. 施工事例 ====================================== */
.works-grid { display: grid; gap: 1rem; }
.work-card { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
/* 事例は写真。トリミングして構図を揃えるほうが一覧として読みやすい */
.work-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-card h3 { font-size: var(--fs-md); padding: 0.9rem 1rem 0; }
.work-card p { font-size: var(--fs-xs); color: var(--c-sub); padding: 0 1rem 1rem; }

/* ===== 12. 仕事の進め方 ================================== */
.quality-grid { display: grid; gap: 1rem; }
.quality-item {
  background: rgba(var(--c-paper-rgb), 0.06);
  border-radius: var(--radius);
  overflow: hidden;
}
.quality-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quality-item h3 {
  font-size: var(--fs-md);
  padding: 0.9rem 1rem 0.3rem;
  color: var(--c-accent);
}
.quality-item p { font-size: var(--fs-sm); padding: 0 1rem 1.1rem; color: rgba(var(--c-paper-rgb), 0.82); }

/* ===== 13. 職人紹介 ====================================== */
.craftsman { display: grid; gap: 1.5rem; }
/* 全身の立ち姿イラスト。cover だと頭か足が切れるので contain */
.craftsman-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--c-illust-bg);
  border-radius: var(--radius);
}
.craftsman-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.9rem;
}
.craftsman-name small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-sub);
  letter-spacing: 0.08em;
}
.craftsman-body p { font-size: var(--fs-sm); margin-bottom: 0.9rem; }
.craftsman-sub {
  font-size: var(--fs-md);
  margin: 1.5rem 0 0.6rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--c-accent);
}
.license-list { display: flex; flex-direction: column; gap: 0.5rem; }
.license-list li {
  background: var(--c-paper);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ===== 14. 対応エリア ==================================== */
.area-grid { display: grid; gap: 1rem; }
.area-card {
  background: var(--c-base);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.area-card-main { border: 2px solid var(--c-navy); }
.area-label {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--c-navy);
  color: var(--c-paper);
  padding: 0.15em 0.8em;
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
}
.area-card-main .area-label { background: var(--c-accent); color: var(--c-ink); }
.area-card h3 { font-size: var(--fs-md); margin-bottom: 0.5rem; line-height: 1.5; }
.area-card p { font-size: var(--fs-sm); color: var(--c-sub); }

/* 地図は市町名ラベルが読めることが用途そのもの。トリミングしない */
.area-figure { margin-top: 1.5rem; }
.area-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-base);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.area-figure figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

/* ===== 15. ご相談の流れ ================================== */
.flow-list { counter-reset: flow; display: grid; gap: 0.9rem; }
.flow-list li {
  counter-increment: flow;
  padding: 1.5rem 1.1rem 1.3rem;
  background: var(--c-paper);
  border-radius: var(--radius);
  text-align: center;
}
/* 工程アイコンと連番。絵を主役にして中央へ縦積みし、連番はアイコンの右下へ重ねる。
   ★連番は li::before ではなくこの .flow-num が持つ（::before だと絶対配置になり、
     アイコンの角に重ねられない）
   ★アイコンの意味は見出しが担うので alt="" ＋ aria-hidden で読み上げから外してある */
.flow-figure {
  position: relative;
  width: 96px;
  margin: 0 auto 0.8rem;
}
.flow-icon {
  display: block;
  width: 96px; height: 96px;
  background: var(--c-illust-bg);
  border-radius: var(--radius);
}
.flow-figure::after {
  content: counter(flow);
  position: absolute;
  right: -6px; bottom: -6px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: var(--c-navy);
  color: var(--c-accent);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 0.85rem;
  border: 2px solid var(--c-base);
  border-radius: 50%;
}
.flow-list h3 { font-size: var(--fs-md); margin-bottom: 0.3rem; }
.flow-list p { font-size: var(--fs-sm); color: var(--c-sub); text-align: left; }

/* ===== 16. FAQ ========================================== */
.faq-list { display: grid; gap: 0.6rem; }
.faq-list details {
  background: var(--c-base);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.faq-list summary {
  cursor: pointer;
  padding: 1rem 2.8rem 1rem 1rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  position: relative;
  list-style: none;
  line-height: 1.6;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 1.1rem; top: 1.35rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.faq-list details[open] summary::after { transform: rotate(225deg); top: 1.6rem; }
.faq-list p { padding: 0 1rem 1.1rem; font-size: var(--fs-sm); color: var(--c-sub); }

/* ===== 17. 問い合わせ ==================================== */
.contact-grid { display: grid; gap: 0.75rem; margin-bottom: 2rem; }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(var(--c-paper-rgb), 0.08);
  border: 1px solid rgba(var(--c-paper-rgb), 0.3);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: background 0.2s;
}
.contact-card:hover { background: rgba(var(--c-paper-rgb), 0.16); }
.contact-label {
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
}
.contact-value { font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-num); letter-spacing: 0.04em; }
.contact-note { font-size: var(--fs-xs); color: rgba(var(--c-paper-rgb), 0.72); line-height: 1.6; }

.contact-form {
  background: var(--c-base);
  color: var(--c-ink);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.form-note {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  background: var(--c-paper);
  border-left: 3px solid var(--c-accent);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.25rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-row label { font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.req {
  font-size: 0.65rem;
  background: var(--c-navy);
  color: var(--c-paper);
  padding: 0.1em 0.5em;
  border-radius: var(--radius);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0.75rem 0.8rem;
  background: var(--c-paper);
  font-size: 1rem; /* iOSの自動ズーム防止のため16px以上 */
}
.form-row textarea { resize: vertical; }

/* ===== 18. フッター ====================================== */
.site-footer {
  background: var(--c-navy-deep);
  color: rgba(var(--c-paper-rgb), 0.8);
  padding: 2.5rem 0 2rem;
  font-size: var(--fs-sm);
}
.footer-inner { display: grid; gap: 1.5rem; }
.footer-name { font-size: var(--fs-lg); font-weight: 700; color: var(--c-paper); line-height: 1.4; }
.footer-name span { display: block; font-size: var(--fs-xs); font-weight: 400; color: rgba(var(--c-paper-rgb), 0.6); }
.footer-desc { font-size: var(--fs-xs); }
.footer-info dt {
  font-size: var(--fs-xs);
  color: var(--c-accent);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-top: 0.7rem;
}
.footer-info dd { font-size: var(--fs-sm); }
.footer-info dd small { font-size: var(--fs-xs); color: rgba(var(--c-paper-rgb), 0.6); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-nav a { font-size: var(--fs-xs); text-decoration: none; }
.footer-nav a:hover { color: var(--c-accent); }
.copyright {
  border-top: 1px solid rgba(var(--c-paper-rgb), 0.18);
  padding-top: 1.25rem;
  font-size: var(--fs-xs);
  color: rgba(var(--c-paper-rgb), 0.6);
  line-height: 1.8;
}

/* ===== 19. メディアクエリ ================================ */
@media (min-width: 768px) {
  :root { --space-sec: 5.5rem; --header-h: 72px; }

  .hamburger { display: none; }
  .pc-nav { display: block; }
  .pc-nav ul { display: flex; gap: 1.25rem; }
  .pc-nav a { font-size: 0.85rem; font-weight: 500; text-decoration: none; }
  .pc-nav a:hover { color: var(--c-navy); }

  .header-tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
    line-height: 1.2;
  }
  .header-tel-num {
    font-family: var(--font-num);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-navy);
  }
  .header-tel-note { font-size: 0.65rem; color: var(--c-sub); }

  .logo-ja { font-size: 1.05rem; }

  .section-title { font-size: var(--fs-2xl); }
  .section-lead { font-size: var(--fs-md); }

  /* 768〜1023px でも重ねない。この幅で重ねると本文が42%＝約340pxまで痩せて
     CTAボタン2つが折り返す。縦積みのまま、正方形だと絵が高くなりすぎるので横長の枠にする
     （中央寄せ版なので左右に出る余白は .hero の地色と同じ＝境目は見えない）。
     ★16/9 まで平たくすると contain が高さで頭打ちになり家が画面の44%まで縮む。
       3/2 が「高すぎない・小さすぎない」の折り合い */
  .hero-media img { aspect-ratio: 3 / 2; }
  .hero-head { padding: 2.5rem 1.5rem 0 2rem; }
  .hero-body { padding: 0.5rem 1.5rem 3rem 2rem; }
  .hero-title { font-size: var(--fs-3xl); }
  .hero-lead { font-size: var(--fs-md); }
  .hero-cta { flex-direction: row; }

  .trouble-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .trouble-note { font-size: var(--fs-md); padding: 1.5rem; }

  .funnel { grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
  .funnel-in { grid-template-columns: repeat(2, 1fr); }
  .funnel-arrow {
    border-left: 16px solid var(--c-accent);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 0;
  }
  .strength-grid { grid-template-columns: repeat(3, 1fr); }

  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .service-card-lead img { height: 100%; aspect-ratio: auto; }
  .service-card-lead .service-body { padding: 1.75rem; }

  .works-grid { grid-template-columns: repeat(3, 1fr); }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .craftsman { grid-template-columns: 320px 1fr; gap: 2.5rem; }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .flow-list { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-form { padding: 2rem; }
  .form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .copyright { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  :root { --space-sec: 6.5rem; }

  .pc-nav ul { gap: 1.75rem; }

  /* ---- ヒーロー：画像を全幅にして、絵の左余白の上に見出しを重ねる ----
     2カラムに分けると「器の左余白＋絵の中の左余白」が二重になり、家が右へ寄って見える。
     この絵は左40%を空けた構図なので、そこを本文の置き場として使う。

     行を 1fr auto auto 1fr にして、見出し（2行目）と本文（3行目）のかたまりを
     上下の 1fr で挟む＝2つ合わせて天地中央に来る */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    padding-right: 0;
  }
  .hero-media { grid-column: 1; grid-row: 1 / -1; }
  /* 全幅で 4:3 だと縦960pxになり画面に収まらない。先に高さを決めて右寄せの contain に
     すると、絵の地色（＝.hero の背景）がそのまま余白になり全幅の絵に見える */
  .hero-media img {
    aspect-ratio: auto;
    height: min(78vh, 660px);
    object-fit: contain;
    object-position: right center;
  }
  .hero-head, .hero-body {
    grid-column: 1;
    /* 重ね順を明示する。画像が上に乗ると文字が丸ごと消える */
    position: relative; z-index: 1;
    justify-self: start;
    /* ★上限は 580px。見出し1行目「電気も、空調も、内装も。」は12字で、
         最大字送り 2.6rem(41.6px) のとき約499px要る。上限500pxだと1px足りず
         「も。」だけ2行目に落ちていた。
       ★42% のほうは触らないこと。1024px 付近ではこの割合が家との間隔を決めていて、
         46% に広げると家の左端と文字が接触する */
    width: min(42%, 580px);
    margin-left: max(1.5rem, calc((100% - 1180px) / 2));
    padding: 0;
  }
  .hero-head { grid-row: 2; align-self: end; }
  .hero-body { grid-row: 3; align-self: start; }
  .hero-title { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
  .hero-lead { font-size: var(--fs-sm); }
  .quality-grid { grid-template-columns: repeat(4, 1fr); }
  .flow-list { grid-template-columns: repeat(5, 1fr); }
  /* 5列＝1列204px。96pxのアイコンは中央に置いたままで収まる */
  .flow-list li { padding: 1.7rem 1.1rem 1.4rem; }
  .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; }
}