/* トップページ（index.astro）。2026-10-26 に利用者が選んだデザイン案B「料金がすぐ分かる」が元。
   チラシの価格表を、写真つきの品書きのように整える。罫線と表で組み、数字は赤、見出しの帯はダークブラウン。
   問い合わせの第一は電話：赤い大きなボタンは電話だけに使い、フォームは文字のリンクで添える。
   商品の写真は白地に収める（給湯器は料金ページと同じ写真、ほかはメーカーの商品画像。施工事例の写真は使わない）。
   「ご相談の入口」「大家さん向け」の節は site-theme.css の共通部品（choice-*・owner-feature・care-map）。 */
.home-page { --home-gap:clamp(3.2rem, 6vw, 5.2rem); background:#fff; }
.home-title { margin:0 0 1.8rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); font-size:clamp(1.35rem, 2.4vw, 1.75rem); }

/* 冒頭 */
.home-hero { padding-block:clamp(2.2rem, 5vw, 4.2rem); background:var(--warm); border-bottom:1px solid var(--line); }
.home-hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(2rem, 4.5vw, 3.6rem); align-items:center; }
.home-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.3rem; padding:0; list-style:none; }
.home-tags li { padding:.25rem .75rem; border:1px solid var(--accent); border-radius:4px; background:#fff; color:var(--accent-dark); font-size:.82rem; font-weight:700; }
.home-hero h1 { margin:0; font-size:clamp(1.7rem, 3.4vw, 2.5rem); line-height:1.5; }
.home-h1-key { display:block; margin-bottom:.8rem; font-size:clamp(.92rem, 1.5vw, 1.05rem); letter-spacing:.1em; color:var(--muted); }
.home-price { white-space:nowrap; color:var(--accent-dark); }
.home-price b { margin:0 .1em; font-size:1.55em; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums; }

/* 電話（第一の窓口）。冒頭と締めで同じ部品を使う。 */
.home-call { margin-top:1.6rem; padding:1.2rem 1.3rem 1.3rem; background:#fff; border:1px solid var(--line); border-left:5px solid var(--accent); }
.home-call-catch { margin:0 0 .9rem; line-height:1.85; color:var(--ink-soft); }
.home-call-catch strong { display:block; margin-bottom:.15rem; font-family:var(--font-serif); font-size:1.3rem; font-weight:600; letter-spacing:.08em; color:var(--ink); }
.home-call-button { display:inline-flex; align-items:center; gap:.9rem; min-height:68px; padding:.65rem 1.6rem .65rem 1.2rem; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; box-shadow:0 10px 24px #b91c1c33; }
.home-call-button:hover { background:var(--accent-dark); color:#fff; }
.home-call-button svg { flex:none; width:30px; height:30px; }
.home-call-button small { display:block; font-size:.74rem; font-weight:500; opacity:.92; }
.home-call-button strong { display:block; font-family:var(--font-serif); font-size:1.75rem; font-weight:600; letter-spacing:.06em; line-height:1.25; font-variant-numeric:tabular-nums; }
.home-call-button.is-large strong { font-size:2.1rem; }
.home-sub-actions { display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:1.1rem 0 0; font-size:.9rem; font-weight:700; }
.home-sub-actions a { color:var(--accent-dark); }
.home-lead { margin:1rem 0 0; font-size:.86rem; line-height:1.85; color:var(--muted); }

/* 料金のめやす：写真つきの枠＋写真の無い設備の行 */
.home-board { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.home-board-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0; padding:1rem 1.3rem; background:var(--brown-deep); color:#fff; font-family:var(--font-serif); font-size:1.15rem; font-weight:600; letter-spacing:.1em; }
.home-board-head small { font-family:var(--font-family, inherit); font-size:.75rem; font-weight:500; letter-spacing:.04em; color:#d8d0c6; }
.home-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; margin:0; padding:0; list-style:none; background:var(--line); border-bottom:1px solid var(--line); }
.home-tiles a { display:grid; grid-template-rows:auto auto auto; height:100%; padding:.8rem .8rem .9rem; background:#fff; color:var(--ink); text-decoration:none; }
.home-tiles a:hover .home-tile-name { color:var(--accent-dark); }
.home-tile-photo { display:flex; align-items:center; justify-content:center; aspect-ratio:4 / 3; margin-bottom:.6rem; }
.home-tile-photo img { width:100%; height:100%; object-fit:contain; }
.home-tile-name { font-size:.88rem; font-weight:700; line-height:1.4; }
.home-tile-price { margin-top:.2rem; font-size:.78rem; color:var(--muted); }
.home-tile-price b { font-size:1.15rem; color:var(--accent-dark); font-variant-numeric:tabular-nums; }
.home-rows { margin:0; padding:.2rem 1.3rem; list-style:none; }
.home-rows li + li { border-top:1px dashed var(--line); }
.home-rows a { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem 0; color:var(--ink); font-weight:700; text-decoration:none; }
.home-rows a:hover span { color:var(--accent-dark); }
.home-row-price { font-size:.86rem; color:var(--accent-dark); white-space:nowrap; }
.home-row-price b { font-size:1.05rem; font-variant-numeric:tabular-nums; }
.home-board-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem; margin:0; padding:.8rem 1.3rem; border-top:1px solid var(--line); background:var(--warm); }
.home-board-foot small { font-size:.7rem; color:var(--muted); }
.home-board-foot a { font-size:.9rem; font-weight:700; color:var(--accent-dark); }

/* 節の共通 */
.home-section { padding-block:var(--home-gap); }
.home-more { margin:1.4rem 0 0; text-align:right; font-weight:700; }
.home-more a, .home-more-link { font-weight:700; color:var(--accent-dark); }

.home-steps-section { background:var(--warm); }
.home-steps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--line); background:#fff; }
.home-steps li { position:relative; padding:1.6rem 1.4rem; }
.home-steps li + li { border-left:1px solid var(--line); }
.home-step-num { display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-serif); font-weight:600; }
.home-steps h3 { margin:.9rem 0 .5rem; font-size:1.08rem; }
.home-steps p { margin:0; font-size:.88rem; line-height:1.85; color:var(--ink-soft); }

/* タフアップについて：代表の写真は冒頭ではなく、会社の説明に添える */
.home-about { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(1.6rem, 4vw, 3.5rem); align-items:start; }
.home-about-person { padding:1.4rem; background:var(--warm); border-top:4px solid var(--brown); }
.home-about-person img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:center 30%; }
.home-about-name { margin:1rem 0 .6rem; font-family:var(--font-serif); font-size:1.3rem; font-weight:600; letter-spacing:.12em; }
.home-about-name small { display:block; font-family:inherit; font-size:.72rem; letter-spacing:.1em; color:var(--muted); }
.home-about-text { margin:0 0 1rem; font-size:.9rem; line-height:1.9; color:var(--ink-soft); }
.home-sheet { margin:0; border-top:2px solid var(--ink); }
.home-sheet div { display:grid; grid-template-columns:8em minmax(0, 1fr); gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.home-sheet dt { font-weight:700; color:var(--brown); }
.home-sheet dd { margin:0; line-height:1.8; }
.home-sheet dd a { font-size:.86rem; font-weight:700; color:var(--accent-dark); white-space:nowrap; }

/* 締め：電話が第一、フォームは第二 */
.home-contact { padding-block:var(--home-gap); background:var(--warm); text-align:center; }
.home-contact h2 { margin:0 0 .7rem; font-size:clamp(1.4rem, 2.6vw, 1.85rem); }
.home-contact-catch { margin:0 0 1.6rem; font-size:1.02rem; color:var(--ink-soft); }
.home-contact-note { margin:1rem 0 0; font-size:.86rem; color:var(--muted); }
.home-contact-form { margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-soft); }
.home-contact-form a { font-weight:700; color:var(--accent-dark); }

.home-page .works-preview, .home-page .news-section { padding-block:var(--home-gap); }

@media (max-width:900px) {
  .home-hero-grid, .home-about { grid-template-columns:1fr; }
  .home-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-steps li:nth-child(3) { border-left:0; }
  .home-steps li:nth-child(n+3) { border-top:1px solid var(--line); }
}
@media (max-width:600px) {
  .home-call { padding:1rem; }
  .home-call-button { display:flex; width:100%; padding-inline:1rem; }
  .home-call-button strong { font-size:1.6rem; }
  .home-call-button.is-large strong { font-size:1.7rem; }
  .home-sub-actions { flex-direction:column; }
  .home-board-head, .home-rows, .home-board-foot { padding-left:1rem; padding-right:1rem; }
  .home-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-tiles a { padding:.7rem .7rem .8rem; }
  .home-steps { grid-template-columns:1fr; }
  .home-steps li + li { border-left:0; border-top:1px solid var(--line); }
  .home-sheet div { grid-template-columns:1fr; gap:.2rem; }
}