/* 株式会社環境改善 — 共通スタイル
   世界観：こもる熱（だいだい）がめぐる空気（水色）に変わる色の雲 */

:root {
  --green: #113f27;        /* 企業色：線・見出し・大きな面・塗りボタン */
  --green-deep: #0a2618;
  --lime: #aacc00;         /* 装置 αESG の実物の色。装置とその数字・棒だけに使う */
  --tint: #eef3ef;         /* 淡い面（1種類だけ） */
  --ink: #1a1f1c;
  --ink-sub: #4a544e;
  --line: #d6ded8;
  --white: #ffffff;
  --wrap: 1120px;
  --gutter: 80px;
  --sec: 144px;            /* 区画の間 */
  --font: "Gen Interface JP", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
  position: relative;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
.tel, .stat, .glance .v, .table td.prod { white-space: nowrap; }
.h2 .l, .h2 .b, h1 .l, h1 .b { white-space: nowrap; }
.table td.num { white-space: nowrap; }
.b { display: inline-block; }          /* 文節のかたまり */
.l { display: block; }                 /* 意図した1行 */

.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }


/* ─── ヘッダー ─── */
.site-header { position: sticky; top: 0; z-index: 50; padding: 14px 0; }
.site-header .bar {
  display: flex; align-items: center; gap: 28px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 10px 10px 28px;
}
.logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.logo .name { font-weight: 700; font-size: 19px; letter-spacing: .04em; color: var(--green); }
.logo .sub { font-size: 12px; color: var(--ink-sub); letter-spacing: .06em; }
.gnav { display: flex; gap: 26px; }
.gnav a { text-decoration: none; font-size: 15px; font-weight: 500; }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 6px; }
.tel { text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.tel small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-sub); letter-spacing: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--green); color: var(--white); text-decoration: none;
  font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; transition: background .2s;
}
.btn:hover { background: var(--green-deep); }
.btn-line {
  display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 700;
  color: var(--green); border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.on-dark .btn-line { color: var(--white); }
.menu-btn { display: none; }

/* ─── 共通の区画 ─── */
.sec { padding: var(--sec) 0 0; position: relative; }
.sec:last-of-type { padding-bottom: var(--sec); }
.eyebrow { font-size: 14px; font-weight: 700; color: var(--green); letter-spacing: .12em; margin-bottom: 16px; }
.on-dark .eyebrow { color: var(--lime); }
.h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.25; font-weight: 700; letter-spacing: .02em; }
.lead { margin-top: 24px; max-width: 40em; color: var(--ink-sub); font-size: 17px; }
.on-dark { background: var(--green); color: var(--white); }
.on-dark .lead { color: rgba(255,255,255,.82); }
.note { font-size: 12px; color: var(--ink-sub); margin-top: 16px; }
.on-dark .note { color: rgba(255,255,255,.7); }

/* ─── ① 最初の画面 ─── */
.hero { padding: 72px 0 0; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.08; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.hero h1 .em { color: var(--green); }
.hero .lead { font-size: 18px; margin-top: 28px; }
.hero .cta { margin-top: 40px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-visual .unit { width: 100%; }
.hero-visual .device { position: absolute; width: 34px; left: 16%; bottom: -170px; z-index: 3; }
.hero-tag { position: absolute; left: calc(16% + 56px); bottom: -120px; font-size: 13px; color: var(--ink-sub); line-height: 1.4; z-index: 3; }
.hero-tag strong { color: var(--green); display: block; font-size: 14px; }

/* ─── ② 建物の図 ─── */
.building { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: center; margin-top: 56px; }
.building svg { width: 100%; height: auto; }
.building .part-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.part-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.part-list .num { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); font-weight: 700; display: grid; place-items: center; font-size: 17px; }
.part-list h3 { font-size: 20px; line-height: 1.3; }
.part-list p { font-size: 15px; color: var(--ink-sub); margin-top: 6px; }
.part-list a { font-size: 15px; }

/* ─── ③ 困りごとの入口 ─── */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.door {
  display: flex; flex-direction: column; text-decoration: none; background: var(--white);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  transition: border-color .2s;
}
.door:hover { border-color: var(--green); }
.door .txt { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.door h3 { font-size: 24px; line-height: 1.3; }
.door p { font-size: 15px; color: var(--ink-sub); margin-top: 12px; }
.door .goods { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 700; color: var(--green); }
.door .goods::after { content: " →"; }
.door .ph { background: var(--tint); aspect-ratio: 16 / 10; order: -1; }
.door .ph img { width: 100%; height: 100%; object-fit: cover; }
.door-any { grid-column: 1 / -1; display: flex; align-items: center; gap: 40px; background: var(--tint); border-radius: 20px; padding: 40px 48px; }
.door-any h3 { font-size: 24px; line-height: 1.3; }
.door-any p { font-size: 15px; color: var(--ink-sub); margin-top: 8px; max-width: 34em; }
.door-any .act { margin-left: auto; display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.door-any .tel { font-size: 24px; }

/* ─── ④ αESG（深緑の面） ─── */
.feature { margin-top: var(--sec); padding: 120px 0; }
.feature .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 4 / 3; }
.photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.feature .photos { margin-left: calc(-1 * max(24px, (100vw - var(--wrap)) / 2)); aspect-ratio: auto; height: 620px; }
.feature .photos > * { background: var(--green-deep); overflow: hidden; border-radius: 16px; }
.feature .photos > .big { border-radius: 0; }
.feature .photos img { border-radius: 0; mix-blend-mode: luminosity; opacity: .9; filter: contrast(1.1); }
.photos .big { grid-row: 1 / 3; }
.stat-label { font-size: 15px; color: rgba(255,255,255,.82); margin-top: 32px; }
.stat { font-size: clamp(64px, 7vw, 104px); font-weight: 700; line-height: 1; letter-spacing: -.01em; display: inline-block; border-bottom: 6px solid var(--lime); padding-bottom: 6px; margin-top: 8px; }
.stat small { font-size: .38em; margin-left: .1em; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.checks li { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 6px 16px; font-size: 14px; }
.feature .acts { margin-top: 36px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.btn-white { background: var(--white); color: var(--green); }
.btn-white:hover { background: var(--tint); }

/* ─── ⑤ 数字の一覧 ─── */
.glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); }
.glance-4 { grid-template-columns: repeat(4, 1fr); }
.glance > div { padding: 24px 20px 0 0; }
.glance .k { font-size: 14px; color: var(--ink-sub); }
.glance .v { font-size: 40px; font-weight: 700; color: var(--green); line-height: 1.1; margin-top: 8px; }
.glance .v small { font-size: 18px; }

/* ─── ⑥ 会社の顔 ─── */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 48px; }
.about p + p { margin-top: 1em; }
.about .body { font-size: 17px; max-width: 32em; }
.facts { margin: 0; display: grid; grid-template-columns: 7em 1fr; border-top: 1px solid var(--line); }
.facts dt, .facts dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--ink-sub); }

/* ─── ⑦ 相談の面 ─── */
.closing { margin-top: var(--sec); padding: 120px 0 112px; text-align: center; }
.closing .h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.15; }
.closing .lead { margin-left: auto; margin-right: auto; }
.closing .acts { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
.closing .tel { font-size: 28px; color: var(--white); }
.closing .tel small { color: rgba(255,255,255,.75); }

/* ─── フッター ─── */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,.82); padding: 56px 0 40px; font-size: 14px; position: relative; z-index: 2; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.site-footer .fname { font-size: 26px; font-weight: 700; color: var(--white); letter-spacing: .04em; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-left: auto; }
.site-footer nav a { text-decoration: none; }
.site-footer .copy { width: 100%; font-size: 12px; color: rgba(255,255,255,.6); }

/* ─── 下層ページ ─── */
.page-head { padding: 72px 0 0; }
.page-head .lead { max-width: 40em; }
.page-head h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.12; font-weight: 700; margin-top: 8px; }
.crumb { font-size: 13px; color: var(--ink-sub); }
.crumb a { color: var(--ink-sub); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 48px; }
.two.top { align-items: start; }
.rounded { border-radius: 16px; }
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { counter-increment: s; }
.steps img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.steps h3 { font-size: 18px; margin-top: 16px; }
.steps h3::before { content: counter(s, decimal-leading-zero) "  "; color: var(--green); }
.steps p { font-size: 14px; color: var(--ink-sub); margin-top: 6px; }
.flow { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--green); }
.flow li { padding: 20px 16px 0 0; }
.flow b { display: block; font-size: 13px; color: var(--green); letter-spacing: .1em; }
.flow h3 { font-size: 18px; margin-top: 6px; }
.flow p { font-size: 14px; color: var(--ink-sub); margin-top: 6px; }
.table { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15px; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.table th { font-size: 13px; color: var(--ink-sub); font-weight: 500; border-bottom: 2px solid var(--green); }
.table td.num { font-weight: 700; color: var(--green); font-size: 18px; }
.points { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.points h3 { font-size: 20px; line-height: 1.35; padding-top: 16px; border-top: 2px solid var(--green); }
.points p { font-size: 15px; color: var(--ink-sub); margin-top: 10px; }
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::before { content: "Q  "; color: var(--green); }
.faq p { margin-top: 12px; color: var(--ink-sub); font-size: 15px; max-width: 46em; }
.map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 16px; background: var(--tint); }
.prose { max-width: 46em; }
.prose h2 { font-size: 22px; margin: 40px 0 12px; }
.prose p, .prose li { font-size: 15px; color: var(--ink-sub); }

/* ─── フォーム ─── */
.form { display: grid; gap: 24px; max-width: 720px; margin-top: 48px; }
.form label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.form .req { font-size: 12px; color: var(--white); background: var(--green); border-radius: 4px; padding: 1px 6px; margin-left: 8px; font-weight: 500; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid #b9c4bd; border-radius: 10px; background: var(--white); color: var(--ink);
}
.form textarea { min-height: 180px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.form .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.form .chips label { font-weight: 500; border: 1px solid #b9c4bd; border-radius: 999px; padding: 10px 18px; margin: 0; cursor: pointer; }
.form .chips input { accent-color: var(--green); margin-right: 6px; }
.form .chips label:has(input:checked) { border-color: var(--green); background: var(--tint); }
.form .hp { position: absolute; left: -9999px; }
.form-msg { padding: 16px 20px; border-radius: 10px; font-size: 15px; }
.form-msg.ok { background: var(--tint); color: var(--green); }
.form-msg.err { background: #fdecec; color: #8a1c1c; }

/* ─── タブレット・スマホ ─── */
@media (max-width: 1100px) {
  :root { --sec: 128px; }
  .gnav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; content: ""; }
  .menu-btn span::before { position: absolute; top: -6px; }
  .menu-btn span::after { position: absolute; top: 6px; }
  .site-header.open .gnav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 76px; left: 24px; right: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 8px 24px; }
  .site-header.open .gnav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .site-header.open .gnav a:last-child { border-bottom: 0; }
  .site-header .wrap { position: relative; }
}
@media (max-width: 860px) {
  :root { --sec: 104px; }
  .wrap { padding: 0 20px; }
  .site-header .wrap { padding: 0 16px; }
  .site-header .bar { gap: 12px; padding: 8px 8px 8px 20px; }
  .site-header .tel { display: none; }
  .site-header .btn { padding: 12px 18px; font-size: 15px; }
  .hero { padding-top: 40px; }
  .hero .wrap, .building, .doors, .feature .grid, .about, .two { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; }
  .hero-visual { padding-bottom: 40px; }
  .hero-visual .device { display: none; }
  .hero-tag { display: none; }
  .door-any { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 20px; }
  .door-any .act { margin-left: 0; flex-wrap: wrap; }
  .feature { padding: 88px 0; }
  .feature .photos { margin-left: -20px; height: 360px; }
  .table .opt { display: none; }
  .glance, .glance-4 { grid-template-columns: 1fr 1fr; }
  .steps, .points { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--green); }
  .flow li { padding: 0 0 24px 20px; }
  .table { font-size: 14px; }
  .table th, .table td { padding: 12px 6px; }
}
@media (max-width: 520px) {
  .steps, .points { grid-template-columns: 1fr; }
  .site-header .btn { display: none; }
  .closing .tel { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.door .ph-draw { display: grid; place-items: center; padding: 24px; }
.door .ph-draw svg { width: 100%; max-width: 200px; height: auto; }
.door .ph { position: relative; overflow: hidden; }
.door .ph img { position: absolute; inset: 0; }

/* ─── 建築の要素：ヒーローの引き＋寄り ─── */
.hero-pair { position: relative; padding-bottom: 120px; }
.hero-pair figure { margin: 0; position: relative; }
.hero-pair img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.hero-pair figcaption { font-size: 12px; color: var(--ink-sub); margin-top: 8px; }
.hero-pair .wide { max-width: 680px; margin-left: auto; z-index: 2; }
.hero-pair .wide img { aspect-ratio: 4 / 3; }
.hero-pair .close { position: absolute; left: -8%; bottom: 0; width: 38%; z-index: 3; }
.hero-pair .close img { aspect-ratio: 4 / 5; border: 6px solid var(--white); border-radius: 20px; }
.hero-pair .close figcaption { position: absolute; left: calc(100% + 14px); bottom: 14px; white-space: nowrap; color: var(--green); font-weight: 700; font-size: 13px; }

/* 困りごとの入口：2段 */
.doors-label { margin-top: 56px; font-size: 15px; font-weight: 700; color: var(--green); padding-left: 14px; border-left: 4px solid var(--lime); }
.doors-label + .doors { margin-top: 20px; }
.doors-2 { grid-template-columns: repeat(2, 1fr); }
.doors-2 .door { display: grid; grid-template-columns: 1fr 1fr; }
.doors-2 .door .ph { order: 0; aspect-ratio: auto; min-height: 240px; }
.door-any { margin-top: 24px; }

/* 実績の壁（端まで出る・大きさの違うタイル） */
.wall { position: relative; z-index: 2; display: grid; gap: 10px; margin-top: 56px; padding: 0 10px;
  grid-template-columns: repeat(12, 1fr); grid-template-rows: 260px 260px 220px; }
.wall figure { margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: var(--tint); }
.wall img { width: 100%; height: 100%; object-fit: cover; }
.wall figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.wall .t1 { grid-column: 1 / 6; grid-row: 1 / 3; }
.wall .t2 { grid-column: 6 / 10; grid-row: 1 / 2; }
.wall .t3 { grid-column: 10 / 13; grid-row: 1 / 4; }
.wall .t4 { grid-column: 6 / 8; grid-row: 2 / 3; }
.wall .t5 { grid-column: 8 / 10; grid-row: 2 / 4; }
.wall .t6 { grid-column: 1 / 8; grid-row: 3 / 4; }
.works .note { margin-top: 20px; }

@media (max-width: 860px) {
  .hero-pair { padding-bottom: 72px; max-width: none; }
  .hero-pair .close { left: 0; width: 34%; }
  .hero-pair .close figcaption { display: none; }
  .doors-2 { grid-template-columns: 1fr; }
  .doors-2 .door { grid-template-columns: 1fr; }
  .doors-2 .door .ph { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .wall { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 160px; padding: 0; gap: 6px; }
  .wall figure { border-radius: 0; }
  .wall .t1 { grid-column: 1 / 3; grid-row: span 2; }
  .wall .t2, .wall .t3, .wall .t4, .wall .t5 { grid-column: auto; grid-row: auto; }
  .wall .t3, .wall .t5 { grid-row: span 2; }
  .wall .t6 { grid-column: 1 / 3; grid-row: auto; }
}

/* ─── 建築・リフォーム ─── */
.kinds { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kinds li { border-top: 2px solid var(--green); padding-top: 16px; }
.kinds h3 { font-size: 19px; line-height: 1.35; }
.kinds p { font-size: 14px; color: var(--ink-sub); margin-top: 8px; }
.case { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; margin-top: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.case-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 200px 200px; gap: 10px; }
.case-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.case-photos .big { grid-row: 1 / 3; }
.case-kind { font-size: 13px; font-weight: 700; color: var(--green); }
.case-txt h3 { font-size: 28px; margin-top: 4px; }
.case-txt p:last-child { margin-top: 12px; color: var(--ink-sub); font-size: 15px; }
.points .btn-line { margin-top: 14px; font-size: 15px; }
@media (max-width: 860px) {
  .kinds { grid-template-columns: 1fr 1fr; }
  .case { grid-template-columns: 1fr; gap: 20px; }
  .case-photos { grid-template-rows: 150px 150px; gap: 6px; }
}
.hero-pair .wide figcaption { text-align: right; }

/* 見直し：ヒーローは写真を主役の半分に */
.hero .wrap:has(.hero-pair) { grid-template-columns: 1fr 1.25fr; }
.hero:has(.hero-pair) h1 { font-size: clamp(36px, 3.8vw, 54px); }
.hero-pair { padding-bottom: 72px; }
.hero-pair .wide { max-width: none; margin-right: calc(-1 * max(24px, (100vw - var(--wrap)) / 2)); }
.hero-pair .wide img { border-radius: 16px 0 0 16px; }
.hero-pair .wide figcaption { padding-right: 24px; }
.lead a[href^="tel"] { white-space: nowrap; }
.page-head .two.head-photo { margin-top: 0; align-items: end; }
.page-head .head-photo img { border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 860px) {
  .hero .wrap:has(.hero-pair) { grid-template-columns: 1fr; }
  .hero-pair .wide { margin-right: -20px; }
  .wall .t5 { grid-column: 1 / 3; grid-row: span 2; }
}

/* ─── 案1：環境の窓口（サービス会社の作り） ─── */
.hero-env { position: relative; padding-bottom: 40px; overflow-x: clip; }
/* 暑さ（だいだい）と涼しさ（水色）の色の雲：熱と空気を色で見せる */
.hero-env::before, .hero-env::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; }
.hero-env::before { width: 760px; height: 620px; right: 12%; top: -160px; background: radial-gradient(closest-side, rgba(245,150,80,.62), rgba(245,150,80,0)); }
.hero-env::after { width: 820px; height: 680px; right: -12%; top: 40px; background: radial-gradient(closest-side, rgba(95,180,230,.58), rgba(95,180,230,0)); }
.hero-env .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero-env h1 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.12; }
.hero-env .cta .tel { font-size: 22px; }
.hero-index { background: rgba(255,255,255,.88); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 4px; }
.hero-index-title { font-size: 14px; font-weight: 700; color: var(--ink-sub); margin-bottom: 8px; }
.hero-index a { display: flex; gap: 16px; align-items: center; text-decoration: none; padding: 14px 12px; border-radius: 12px; transition: background .2s; }
.hero-index a:hover { background: var(--tint); }
.hero-index b { display: block; font-size: 18px; }
.hero-index small { display: block; font-size: 13px; color: var(--ink-sub); margin-top: 2px; }
.hero-index a::after { content: "→"; margin-left: auto; color: var(--green); font-weight: 700; }
.ic { flex: 0 0 44px; height: 44px; border-radius: 50%; display: block; }
.ic-energy { background: radial-gradient(circle at 50% 50%, var(--lime) 0 30%, #e6f0bf 31%); }
.ic-heat { background: radial-gradient(circle at 50% 50%, #f5a05a 0 30%, #fde3cd 31%); }
.ic-air { background: radial-gradient(circle at 50% 50%, #6ebee6 0 30%, #d8eef8 31%); }
.ic-space { background: radial-gradient(circle at 50% 50%, var(--green) 0 30%, var(--tint) 31%); }

.svc { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.svc:first-of-type { margin-top: 48px; }
.svc:nth-of-type(even) .svc-ph { order: -1; }
.svc-kind { font-size: 14px; font-weight: 700; color: var(--green); padding-left: 12px; border-left: 4px solid var(--lime); }
.svc h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; margin-top: 12px; }
.svc-body > p:not(.svc-kind) { margin-top: 14px; color: var(--ink-sub); }
.spec { margin: 24px 0 0; display: grid; grid-template-columns: 7.5em 1fr; border-top: 1px solid var(--line); }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { color: var(--ink-sub); font-weight: 700; }
.svc-acts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 24px; }
.svc-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.svc-ph p { font-size: 12px; color: var(--ink-sub); margin-top: 8px; }
.svc-draw { background: var(--tint); border-radius: 16px; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.svc-draw svg { width: 55%; height: auto; }
.band { margin-top: 24px; background: var(--tint); border-radius: 20px; padding: 32px 40px; display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: center; }
.band-h { font-size: 22px; font-weight: 700; color: var(--green); white-space: nowrap; }
.band p:not(.band-h) { font-size: 15px; color: var(--ink-sub); }

.reasons, .steps3 { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reasons li, .steps3 li { border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px; background: var(--white); }
.rn { font-size: 40px; font-weight: 700; color: var(--lime); line-height: 1; -webkit-text-stroke: 0; }
.reasons h3, .steps3 h3 { font-size: 21px; margin-top: 16px; line-height: 1.35; }
.reasons p:last-child, .steps3 p:last-child { margin-top: 10px; font-size: 15px; color: var(--ink-sub); }
.steps3 .rn { color: var(--green); }
.works-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; grid-auto-rows: 220px; gap: 10px; margin-top: 48px; }
.works-row figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.works-row img { width: 100%; height: 100%; object-fit: cover; }
.works-row figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.table.cost td:first-child { width: 14em; }

@media (max-width: 860px) {
  .hero-env .wrap, .svc { grid-template-columns: 1fr; gap: 28px; }
  .hero-env::before { width: 360px; height: 300px; right: -80px; top: -60px; }
  .hero-env::after { width: 380px; height: 320px; right: -160px; top: 300px; }
  .svc:nth-of-type(even) .svc-ph { order: 0; }
  .band { grid-template-columns: 1fr; padding: 28px 24px; }
  .band-h { white-space: normal; font-size: 19px; }
  .reasons, .steps3 { grid-template-columns: 1fr; }
  .works-row { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .works-row figure:first-child { grid-column: 1 / 3; grid-row: span 2; }
  .table.cost td:first-child { width: auto; }
}

.h2 .l:has(.b), h1 .l:has(.b) { white-space: normal; }

/* 色の雲をサイト全体で繰り返す：下層の頭・真ん中の山・最後の相談 */
.page-head { position: relative; overflow-x: clip; }
.page-head::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 720px; height: 520px; right: -8%; top: -180px; border-radius: 50%; filter: blur(60px);
  background: radial-gradient(closest-side, rgba(245,150,80,.32), rgba(245,150,80,0)), radial-gradient(closest-side at 70% 70%, rgba(95,180,230,.34), rgba(95,180,230,0)); }
.cloud-band { margin-top: var(--sec); padding: 120px 0 !important; position: relative; overflow-x: clip;
  background: radial-gradient(60% 70% at 85% 20%, rgba(245,150,80,.22), transparent 70%), radial-gradient(60% 80% at 10% 90%, rgba(95,180,230,.24), transparent 70%), #f6f8f6; }
.closing { position: relative; overflow-x: clip; }
.closing::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 70% at 12% 100%, rgba(245,150,80,.30), transparent 70%), radial-gradient(45% 70% at 92% 0%, rgba(95,180,230,.30), transparent 70%); }
.closing .wrap { position: relative; z-index: 2; }
.reasons-plain { margin-top: 48px; }
.reasons-plain h3 { font-size: 21px; }
/* 結果の写真：外観を2倍に、残りを小さく */
.works-row { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 190px; }
.works-row figure:first-child { grid-row: span 2; }
.works-row figure:last-child { grid-column: 2 / 4; }
#s-energy .svc-ph { max-width: 340px; justify-self: center; }
@media (max-width: 860px) {
  .hero-env::before { width: 420px; height: 380px; right: -60px; top: -60px; }
  .hero-env::after { width: 460px; height: 420px; right: -180px; top: 380px; }
  .cloud-band { padding: 88px 0 !important; }
  .works-row { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .works-row figure:first-child { grid-column: 1 / 3; grid-row: span 2; }
  .works-row figure:last-child { grid-column: auto; }
  .works-row figure:nth-child(2) { grid-column: 1 / 3; }
}

/* ─── 世界観のヒーロー：こもる熱（だいだい）がめぐる空気（水色）に変わる ─── */
.hero-world { position: relative; min-height: clamp(560px, calc(100svh - 80px), 880px); display: flex; align-items: flex-end; padding: 0 0 12vh; overflow-x: clip; }
.hero-world .cloud { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; will-change: transform; }
.hero-world .warm { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; left: -14vw; top: -26vw;
  background: radial-gradient(closest-side, rgba(245,150,80,.62), rgba(245,150,80,.28) 55%, rgba(245,150,80,0)); animation: drift-warm 47s ease-in-out infinite alternate; }
.hero-world .cool { width: 68vw; height: 68vw; max-width: 1080px; max-height: 1080px; right: -18vw; bottom: -30vw;
  background: radial-gradient(closest-side, rgba(95,180,230,.58), rgba(95,180,230,.26) 55%, rgba(95,180,230,0)); animation: drift-cool 59s ease-in-out infinite alternate; }
@keyframes drift-warm { from { transform: translate(0, 0) scale(1); } to { transform: translate(5%, 4%) scale(1.06); } }
@keyframes drift-cool { from { transform: translate(0, 0) scale(1.04); } to { transform: translate(-5%, -4%) scale(.96); } }
.hero-world.paused .cloud { animation-play-state: paused; }
.hero-world .grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-world .wrap { position: relative; z-index: 2; }
.hero-world h1 { font-size: clamp(44px, 6.2vw, 92px); font-weight: 700; line-height: 1.1; letter-spacing: .02em; color: var(--ink); }
.hero-world .hero-sub { margin-top: 32px; font-size: 17px; color: var(--ink-sub); }

/* ヒーロー直後：会社のひとこと＋困りごとの入口4つ */
.intro { padding-top: 120px; }
.intro-lead { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.7; font-weight: 500; max-width: 30em; }
.doors4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.doors4 a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px 22px; transition: border-color .2s; }
.doors4 a:hover { border-color: var(--green); }
.doors4 .ic { margin-bottom: 8px; width: 44px; flex: none; }
.doors4 b { font-size: 19px; line-height: 1.35; }
.doors4 small { font-size: 13px; color: var(--ink-sub); }
.doors4 a::after { content: "→"; color: var(--green); font-weight: 700; margin-top: auto; padding-top: 8px; }
.intro-more { margin-top: 28px; font-size: 15px; color: var(--ink-sub); }
.intro-more a { color: var(--green); font-weight: 700; margin-left: .5em; }

@media (max-width: 860px) {
  .hero-world { min-height: calc(100svh - 76px); padding-bottom: 10vh; }
  .hero-world .cloud { filter: blur(40px); }
  .hero-world .warm { width: 140vw; height: 140vw; left: -60vw; top: -50vw; }
  .hero-world .cool { width: 140vw; height: 140vw; right: -60vw; bottom: -20vw; }
  .hero-world .hero-sub { max-width: calc(100% - 32px); font-size: 15px; }
  .doors4 { grid-template-columns: 1fr 1fr; }
  .doors4 b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero-world .cloud { animation: none; } }

/* ─── 絵で語るトップ（2026-10-31）─── */
.tag { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.9); color: var(--ink-sub); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.hero-world { align-items: center; padding: 0; }
.hero-world .hero-txt { max-width: 46%; padding: 64px 0 120px; }
.hero-ph { position: absolute; z-index: 1; margin: 0; top: 96px; right: 0; bottom: 80px; width: 50%; border-radius: 24px 0 0 24px; overflow: hidden; }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.hero-inset { position: absolute; z-index: 3; margin: 0; right: calc(50% - 150px); bottom: 0; width: 260px; }
.hero-inset img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 16px; border: 6px solid #fff; }
.hero-inset figcaption { font-size: 12px; color: var(--ink-sub); margin-top: 6px; }
.doors4 a { padding: 0 0 8px; border: 0; border-radius: 0; background: transparent; }
.doors4 .ph { border-radius: 14px; overflow: hidden; }
.doors4 .ph { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 12px; }
.doors4 .ph img { width: 100%; height: 100%; object-fit: cover; }
.doors4 b, .doors4 small { padding: 0 2px; }
.doors4 a::after { padding: 4px 2px 0; }
.part-list .here { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--green); }
.part-list .here img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.result { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; margin-top: 48px; }
.result .k { font-size: 15px; color: var(--ink-sub); font-weight: 700; }
.result .big { font-size: clamp(72px, 9vw, 128px); font-weight: 700; color: var(--green); line-height: 1; margin: 8px 0; white-space: nowrap; }
.result .big small { font-size: .4em; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bars li { display: grid; grid-template-columns: 7em 1fr 4.5em; gap: 16px; align-items: center; font-size: 15px; }
.bars .bar { height: 22px; background: rgba(17,63,39,.06); border-radius: 0 6px 6px 0; }
.bars .bar i { display: block; height: 100%; background: #b9cfc0; border-radius: 0 6px 6px 0; }
.bars .top .bar i { background: var(--lime); }
.bars .v { white-space: nowrap; font-weight: 700; color: var(--green); font-size: 18px; text-align: right; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; }
.proof img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; }
.proof .device { margin: 0; height: 240px; background: var(--tint); border-radius: 12px; position: relative; display: grid; place-items: center; }
.proof .device img { position: absolute; inset: 0; margin: auto; width: auto; height: 85%; max-width: 90%; object-fit: contain; border-radius: 0; }
.proof .device figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 12px; font-weight: 700; color: var(--green); }
.zig { display: grid; gap: 96px; margin-top: 56px; }
.zrow { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.zrow.rev .zfig { order: 2; }
.ztxt b { font-size: 15px; color: var(--green); letter-spacing: .1em; }
.ztxt h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; margin: 0 0 16px; }
.ztxt p { color: var(--ink-sub); max-width: 26em; }
.ztxt .note { margin-top: 16px; font-size: 13px; }
.photos2 { position: relative; aspect-ratio: 6 / 4.6; }
.photos2 img { position: absolute; object-fit: cover; border-radius: 16px; }
.photos2 .p1 { left: 0; top: 0; width: 78%; height: 82%; }
.photos2 .p2 { right: 0; bottom: 0; width: 42%; height: 48%; border: 6px solid #fff; }
.kmap { background: var(--tint); border-radius: 20px; padding: 56px 48px; }
.kmap .kbase { font-size: clamp(48px, 5vw, 68px); font-weight: 700; color: var(--green); line-height: 1; }
.kmap .kbase span { display: block; font-size: 15px; letter-spacing: .1em; margin-bottom: 12px; }
.kmap .karea { font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin-top: 12px; }
.kmap .kpref { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-sub); letter-spacing: .05em; }
.steps4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.steps4 figure { margin: 0; }
.steps4 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.steps4 figcaption { font-size: 13px; font-weight: 700; margin-top: 6px; }
@media (max-width: 860px) {
  .hero-world { flex-direction: column; align-items: stretch; padding: 0 0 48px; min-height: 0; }
  .hero-world .hero-txt { max-width: none; padding: 140px 0 32px; }
  .hero-ph { position: relative; top: auto; bottom: auto; width: calc(100% - 16px); margin-left: 16px; aspect-ratio: 3 / 2; }
  .hero-inset { right: 16px; bottom: 8px; width: 42%; }
  .hero-inset figcaption { display: none; }
  .hero-ph .tag { right: auto; left: 10px; }
  .result, .zrow { grid-template-columns: 1fr; gap: 32px; }
  .zrow.rev .zfig { order: 0; }
  .zig { gap: 64px; }
  .bars li { grid-template-columns: 5.5em minmax(0,1fr) 4.5em; gap: 8px; font-size: 13px; }
  .bars .v { font-size: 16px; }
  .proof { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .proof img, .proof .device { height: 120px; }
  .proof .device img { height: 62%; bottom: 18%; }
  .proof .device figcaption { left: 8px; bottom: 6px; font-size: 11px; }
  .kmap { padding: 36px 28px; }
}

/* ─── 下層ページの絵（アタリ 2026-10-31）─── */
.ph-head { position: relative; overflow-x: clip; }
.ph-head .ph-txt { max-width: 44%; min-height: 470px; padding-top: 8px; }
.ph-head .ph-txt .lead { max-width: none; }
.ph-fig { position: absolute; z-index: 1; margin: 0; top: 72px; right: 0; width: 50%; height: 440px; border-radius: 24px 0 0 24px; overflow: hidden; }
.ph-fig > img { width: 100%; height: 100%; object-fit: cover; }
.ph-fig.dev { background: var(--tint); display: grid; place-items: center; }
.ph-fig.dev > img { position: absolute; inset: 0; margin: auto; width: auto; height: 82%; max-width: 80%; object-fit: contain; }
.ph-fig figcaption { position: absolute; right: 16px; bottom: 12px; font-size: 12px; font-weight: 700; color: var(--green); }
.ph-inset { position: absolute; z-index: 3; margin: 0; top: 268px; right: calc(50% - 110px); width: 170px; }
.ph-inset img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 14px; border: 6px solid #fff; }
.ph-inset figcaption { font-size: 12px; color: var(--ink-sub); margin-top: 4px; }
.head-points { margin-top: 24px; }
.head-points .points { margin-top: 0; }
.two.mech { grid-template-columns: 5fr 7fr; }
.share { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 14px; }
.share li { display: grid; grid-template-columns: 8em 1fr; gap: 16px; align-items: center; font-size: 15px; font-weight: 700; }
.share .bar { height: 40px; background: #e7ebe8; border-radius: 6px; overflow: hidden; }
.share .bar i { display: flex; align-items: center; height: 100%; background: var(--green); padding-left: 14px; }
.share .bar b { color: #fff; font-size: 14px; white-space: nowrap; }
.sub-h { font-size: 20px; margin-top: 64px; }
.sub-h + .table { margin-top: 16px; }
.flow-ph { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; margin-top: 48px; }
.flow-ph .ph-side { position: relative; margin: 0; border-radius: 20px; overflow: hidden; }
.flow-ph .ph-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.flow.v { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--green); margin-top: 0; }
.flow.v li { padding: 0 0 24px 24px; }
.faq-ph { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; margin-top: 40px; }
.dev-sm { margin: 0; background: var(--tint); border-radius: 20px; padding: 32px 24px 20px; }
.dev-sm img { width: 100%; height: 220px; object-fit: contain; }
.dev-sm figcaption { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 12px; }
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.cmp2 figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.cmp2 svg { width: 100%; height: auto; }
.cmp2 figcaption { font-size: 14px; color: var(--ink-sub); margin-top: 12px; }
.cmp2 figcaption b { display: block; font-size: 18px; color: var(--ink); }
.places { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.places .ph, .with-ph .ph, .steps3.with-ph .ph { position: relative; display: block; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.places .ph img, .with-ph .ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.places h3 { font-size: 20px; }
.places p { font-size: 15px; color: var(--ink-sub); margin-top: 8px; }
.points.with-ph h3 { border-top: 0; padding-top: 0; }
.steps3.with-ph li { padding: 16px 16px 28px; }
.steps3.with-ph .rn { margin-top: 4px; }
.two.rent { align-items: center; }
.buyrent { display: flex; align-items: center; justify-content: center; gap: 28px; background: var(--tint); border-radius: 20px; padding: 64px 32px; font-size: clamp(40px, 5vw, 64px); font-weight: 700; color: var(--green); }
.buyrent i { width: 2px; height: 1.4em; background: var(--green); transform: rotate(20deg); opacity: .5; }
.wait-pair { display: grid; grid-template-columns: 4fr 6fr; gap: 20px; margin-top: 40px; align-items: end; }
.wait { background: var(--tint); border: 1.5px dashed rgba(17,63,39,.3); border-radius: 20px; display: grid; place-items: center; }
.wait span { font-size: 13px; font-weight: 700; color: var(--green); background: #fff; padding: 4px 12px; border-radius: 999px; }
.w-rep { aspect-ratio: 4 / 5; }
.w-office { aspect-ratio: 3 / 2; }
.grp-ph { margin: 32px 0 0; }
.grp-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.grp-ph figcaption { font-size: 12px; color: var(--ink-sub); margin-top: 6px; }
.kmap.sm { padding: 32px 28px; margin-top: 24px; }
.kmap.sm .kbase { font-size: clamp(36px, 3.6vw, 48px); }
.kmap.sm .karea { font-size: 20px; }
.kmap.sm .kpref { margin-top: 18px; padding-top: 14px; font-size: 14px; }
.table .thumb { display: inline-block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; vertical-align: middle; margin-right: 14px; }
.table .thumb img { width: 100%; height: 100%; object-fit: cover; }
.table .thumb.dev { background: var(--tint); }
.table .thumb.dev img { object-fit: contain; padding: 4px; }
.table.cost td:first-child { width: 18em; }
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.contact-side { position: sticky; top: 120px; margin-top: 48px; }
.contact-side .k { font-size: 14px; color: var(--ink-sub); font-weight: 700; }
.big-tel { display: block; font-size: clamp(32px, 3.4vw, 44px); font-weight: 700; color: var(--green); text-decoration: none; margin: 4px 0; white-space: nowrap; }
@media (max-width: 860px) {
  .ph-head .ph-txt { max-width: none; min-height: 0; }
  .ph-fig { position: relative; top: auto; width: calc(100% - 16px); margin: 32px 0 0 16px; height: auto; aspect-ratio: 16 / 10; }
  .ph-inset { top: auto; right: 16px; margin-top: -90px; position: relative; margin-left: auto; width: 40%; }
  .ph-inset figcaption { display: none; }
  .ph-fig .tag { right: auto; left: 10px; }
  .two.mech, .flow-ph, .faq-ph, .cmp2, .places, .two.rent, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .flow-ph .ph-side img { aspect-ratio: 16 / 10; }
  .share li { grid-template-columns: 6em 1fr; gap: 10px; font-size: 14px; }
  .wait-pair { grid-template-columns: 1fr 1fr; gap: 10px; }
  .buyrent { padding: 40px 20px; }
  .table .thumb { width: 44px; height: 44px; margin-right: 8px; }
  .table.cost td:first-child { width: auto; }
  .contact-side { position: static; margin-top: 0; }
}

/* ─── トップ 新版（街→屋上→筒→数字 2026-11-01）─── */
.hero-town { position: relative; min-height: clamp(600px, calc(100svh - 0px), 920px); display: flex; align-items: flex-start; color: #fff; }
.hero-town .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-town .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,24,32,.55) 0%, rgba(10,24,32,.15) 45%, rgba(10,24,32,0) 70%); }
.hero-town .wrap { position: relative; z-index: 2; padding-top: clamp(140px, 18vh, 200px); width: 100%; }
.hero-town h1 { font-size: clamp(44px, 6vw, 88px); font-weight: 700; line-height: 1.08; letter-spacing: .02em; color: #fff; }
.hero-town .hero-sub { margin-top: 24px; font-size: 17px; color: rgba(255,255,255,.9); }
.hero-town .dev { position: absolute; z-index: 3; right: 12%; bottom: -22%; height: 82%; width: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.hero-town .tag { left: 16px; right: auto; z-index: 3; }
.closeup { padding-top: calc(var(--sec) + 40px); overflow-x: clip; }
.cu-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 56px; align-items: center; padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.cu-main { position: relative; margin: 0; }
.cu-main > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0 24px 24px 0; }
.cu-main > .tag { left: 16px; right: auto; }
.cu-inset { position: absolute; margin: 0; right: -40px; bottom: -64px; width: 30%; }
.cu-inset img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 14px; border: 6px solid #fff; }
.cu-inset figcaption { font-size: 12px; color: var(--ink-sub); margin-top: 4px; }
.cu-txt p { margin-top: 20px; color: var(--ink-sub); }
.cu-txt .btn-line { margin-top: 24px; display: inline-block; }
.bento { display: grid; grid-template-columns: 5fr 3fr 3fr; grid-template-rows: 260px 220px; gap: 14px; margin-top: 48px; }
.bento a { position: relative; display: block; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; }
.bento .ph { position: absolute; inset: 0; display: block; }
.bento .ph img { width: 100%; height: 100%; object-fit: cover; }
.bento .ph .tag { top: 12px; bottom: auto; }
.bento .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 22px 20px; background: linear-gradient(180deg, transparent, rgba(8,20,14,.72)); }
.bento b { display: block; font-size: 22px; line-height: 1.3; }
.bento small { display: block; font-size: 13px; margin-top: 4px; opacity: .9; }
.b-main { grid-row: 1 / 3; }
.b-main .dev-bg { background: var(--green); }
.b-main .dev-bg img { position: absolute; inset: 8% 0 26%; margin: auto; width: auto; height: 66%; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.b-main b { font-size: 30px; }
.b-build { grid-column: 2 / 4; }
.town-fig { position: relative; margin: 48px 0 0; }
.town-fig img { width: 100%; height: auto; display: block; background: var(--tint); }
.town-fig .pin { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 4px #fff; }
.town-fig .tag { right: 16px; bottom: 16px; }
.pins { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.pins li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; }
.pins .num { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.pins h3 { font-size: 17px; line-height: 1.35; }
.pins p { font-size: 14px; color: var(--ink-sub); margin-top: 4px; }
.result-band { margin-top: var(--sec); padding: 120px 0 0 !important; background: var(--green); }
.result-band .result .k { color: rgba(255,255,255,.75); }
.result-band .result .big { color: var(--lime); font-size: clamp(96px, 13vw, 200px); }
.result-band .bars li { color: #fff; }
.result-band .bars .bar { background: rgba(255,255,255,.1); }
.result-band .bars .bar i { background: rgba(170,204,0,.45); }
.result-band .bars .top .bar i { background: var(--lime); }
.result-band .bars .v { color: #fff; }
.proof.strip { margin: 56px calc(50% - 50vw) 0; grid-template-columns: repeat(3, 1fr); gap: 0; transform: translateY(80px); }
.proof.strip img, .proof.strip .device { height: 300px; border-radius: 0; }
.result-band + .sec { padding-top: calc(var(--sec) + 80px); }
.result-band .note:last-child { display: none; }
.kmap-wrap { display: grid; grid-template-columns: 2fr 3fr; gap: 14px; align-items: stretch; }
.w-rep2 { min-height: 280px; }
.film { grid-template-columns: repeat(4, 1fr); gap: 6px; background: #111; padding: 14px 8px; border-radius: 12px; }
.film figcaption { color: #fff; }
.film img { border-radius: 4px; }
.closing.with-dev { overflow: hidden; }
.closing-dev { position: absolute; z-index: 1; left: 8%; top: 50%; height: 120%; width: auto; transform: translateY(-50%) rotate(-8deg); opacity: .9; }
@media (max-width: 860px) {
  .hero-town { min-height: 640px; }
  .hero-town .wrap { padding-top: 120px; }
  .hero-town .dev { right: 6%; height: 60%; bottom: -16%; }
  .cu-grid { grid-template-columns: 1fr; padding: 0; gap: 72px; }
  .cu-main > img { border-radius: 0; }
  .cu-inset { right: 16px; bottom: -48px; width: 36%; }
  .cu-inset figcaption { display: none; }
  .cu-txt { padding: 0 var(--gutter); }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 180px 180px; }
  .b-main { grid-column: 1 / 3; grid-row: auto; }
  .b-build { grid-column: 1 / 3; }
  .bento b { font-size: 18px; }
  .b-main b { font-size: 24px; }
  .town-fig { overflow-x: auto; }
  .town-fig img { width: 900px; max-width: none; }
  .town-fig .pin { width: 32px; height: 32px; }
  .pins { grid-template-columns: 1fr; gap: 16px; }
  .result-band { padding-top: 88px !important; }
  .proof.strip img, .proof.strip .device { height: 140px; }
  .kmap-wrap { grid-template-columns: 1fr; }
  .w-rep2 { min-height: 200px; }
  .film { grid-template-columns: 1fr 1fr; }
  .closing-dev { left: -6%; height: 90%; opacity: .35; }
}
.kmap-wrap { grid-template-columns: 1fr 1fr; }
.kmap-wrap .kmap { padding: 32px 24px; }
.kmap-wrap .kbase { font-size: clamp(40px, 4vw, 56px); white-space: nowrap; }
.kmap-wrap .karea { font-size: 22px; white-space: nowrap; }
@media (max-width: 860px) { .kmap-wrap { grid-template-columns: 1fr 1fr; } .kmap-wrap .kbase { font-size: 36px; } .kmap-wrap .karea { font-size: 17px; } .kmap-wrap .kpref { font-size: 12px; } }
.hero-town .dev { height: 64%; bottom: -14%; right: 14%; }
@media (max-width: 860px) { .hero-town .dev { height: 46%; bottom: -12%; right: 8%; } }
/* 点検の直し（2026-11-01） */
.hero-town .shade { background: linear-gradient(180deg, rgba(10,24,32,.5) 0%, rgba(10,24,32,.45) 60%, rgba(10,24,32,.1) 85%, rgba(10,24,32,0) 100%); }
.hero-town .dev { filter: none; }
.closeup { padding-top: 56px; }
.closeup .cu-grid { position: relative; z-index: 4; }
.proof.strip img { height: 240px; }
.zrow:has(.film-row) { grid-template-columns: 7fr 4fr; margin-left: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2)); }
.film-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.film-row figure { margin: 0; }
.film-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; }
.film-row figure:last-child img { border-radius: 0 12px 12px 0; }
.film-row figcaption { font-size: 13px; font-weight: 700; margin-top: 8px; }
@media (max-width: 860px) {
  .closeup { padding-top: 40px; }
  .zrow:has(.film-row) { grid-template-columns: 1fr; margin-left: calc(-1 * var(--gutter)); }
  .film-row { grid-template-columns: 1fr 1fr; }
  .zrow:has(.film-row) .ztxt { padding-left: var(--gutter); }
}
.cu-grid { grid-template-columns: 4fr 8fr; padding-right: 0; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.cu-main { order: 2; }
.cu-main > img { border-radius: 24px 0 0 24px; }
.cu-main > .tag { left: auto; right: 16px; }
.cu-inset { right: auto; left: -40px; }
@media (max-width: 860px) {
  .cu-grid { padding-left: 0; }
  .cu-main { order: 0; }
  .cu-main > img { border-radius: 0; }
  .cu-inset { left: 16px; }
}
.film-row figcaption { padding-left: 4px; }
.film-row figure:first-child figcaption { padding-left: 20px; }
@media (max-width: 860px) { .cu-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .cu-grid, .zrow, .result, .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
.kmap-fig { position: relative; margin: 0; background: var(--tint); border-radius: 20px; padding: 24px 24px 24px; }
.kmap-fig svg { width: 100%; height: auto; display: block; max-height: 560px; }
.kmap-fig .w-rep3 { position: absolute; right: -24px; bottom: -32px; width: 34%; aspect-ratio: 4 / 5; background: #fff; }
.kmap-fig .w-rep3 span { font-size: 12px; text-align: center; }
@media (max-width: 860px) { .kmap-fig { padding: 16px; } .kmap-fig .w-rep3 { right: 8px; bottom: -24px; width: 36%; } }
.kmap-fig .w-rep3 { right: auto; left: -24px; bottom: -32px; width: 26%; }
@media (max-width: 860px) { .kmap-fig .w-rep3 { left: 8px; right: auto; bottom: -20px; width: 30%; } }

/* ─── 下層 新版（2026-11-01）─── */
.here-tag { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 16px 4px 4px; font-size: 14px; font-weight: 700; color: var(--green); }
.here-tag img { width: 64px; height: 40px; object-fit: cover; border-radius: 999px; }
.here-tag small { display: block; font-size: 11px; color: var(--ink-sub); font-weight: 500; }
/* 空調：頭の写真は大きく */
.ph-head .ph-fig { width: 56%; }
.cutaway { padding-top: var(--sec); }
.cut-fig { position: relative; margin: 0; }
.cut-fig > img { width: 100%; height: auto; display: block; }
.cut-txt { position: absolute; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); top: 50%; transform: translateY(-50%); width: min(30%, 400px); }
.cut-txt p { color: var(--ink-sub); margin-top: 16px; font-size: 15px; }
.lead-l { position: absolute; font-size: 14px; font-weight: 700; color: var(--green); background: #fff; border: 1px solid var(--green); border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.lead-l::before { content: ""; position: absolute; width: 2px; background: var(--green); }
.l-comp { left: 50%; top: 88%; }
.l-comp::before { left: 50%; bottom: 100%; height: 48px; }
.l-dev { left: 76%; top: 26%; }
.l-dev::before { left: -60px; top: 50%; width: 60px; height: 2px; }
.cut-fig > .tag { right: 16px; left: auto; }
.mech-sm { margin: 56px 0 0 auto; width: min(420px, 100%); }
.mech-sm img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.mech-sm figcaption { font-size: 12px; color: var(--ink-sub); margin-top: 6px; }
.steps.big1 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; }
.steps.big1 li:first-child { grid-row: 1 / 3; }
.steps.big1 li:first-child img { aspect-ratio: 4 / 4.2; }
.steps.big1 li:nth-child(4) { grid-column: 2 / 4; }
.steps.big1 li:nth-child(4) img { aspect-ratio: 16 / 7; }
.kyushu-flow { display: grid; grid-template-columns: 4fr 3fr 5fr; gap: 32px; align-items: start; margin-top: 48px; }
.kyushu-flow .ph-side { position: relative; margin: 0; border-radius: 20px; overflow: hidden; }
.kyushu-flow .ph-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.map-side { margin: 0; background: var(--tint); border-radius: 20px; padding: 16px; }
.mini-map { width: 100%; height: auto; display: block; }
.faq-wide { margin-top: 40px; }
.unit-wide { margin: 0; background: var(--tint); border-radius: 20px; padding: 32px 32px 72px; text-align: center; }
.unit-wide img { height: 260px; width: auto; margin: 0 auto; }
.unit-wide figcaption { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 12px; }
.faq-wide .faq { position: relative; margin: -48px 40px 0 !important; background: #fff; border-radius: 16px; padding: 8px 28px; box-shadow: 0 1px 0 var(--line); border: 1px solid var(--line); }
.faq-wide .faq details:last-child { border-bottom: 0; }
/* 塗装：全面写真の頭 */
.roof-head { position: relative; min-height: clamp(560px, 92svh, 860px); padding: 0; color: #fff; overflow: hidden; }
.roof-head .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.roof-head .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,24,32,.55) 0%, rgba(10,24,32,.25) 40%, rgba(10,24,32,0) 60%); }
.roof-head .wrap { position: relative; z-index: 2; padding-top: clamp(130px, 16vh, 180px); }
.roof-head .crumb, .roof-head .crumb a { color: rgba(255,255,255,.85); }
.roof-head h1 { color: #fff; }
.roof-head .ba { position: absolute; z-index: 2; background: #fff; color: var(--green); font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.ba-done { left: 36%; top: 52%; }
.ba-before { left: 66%; top: 74%; }
.roof-head > .tag { right: 16px; left: auto; z-index: 2; }
.roof-lead { padding-top: 64px; }
.roof-lead .lead { margin-top: 0; font-size: 19px; color: var(--ink); max-width: 36em; }
.cmp2.one { grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.cmp2.one figure { border: 0; border-radius: 0; }
.cmp2.one figure + figure { border-left: 1px solid var(--line); background: var(--tint); }
.table-ph { display: grid; grid-template-columns: 3fr 9fr; gap: 40px; align-items: stretch; margin-top: 40px; }
.table-ph .edge { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.table-ph .edge img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.table-ph .table { margin-top: 0; }
/* 空気：断面の帯 */
.band-head { padding-bottom: 0; }
.band-fig { position: relative; margin: 40px 0 0; }
.band-fig img { width: 100%; height: auto; display: block; }
.band-fig .tag { right: 16px; left: auto; }
.places.bento3 { grid-template-columns: 6fr 4fr; grid-template-rows: auto auto; align-items: start; }
.places.bento3 li:first-child { grid-row: 1 / 3; }
.places.bento3 li:first-child .ph img { aspect-ratio: 4 / 4; }
.places.bento3 li:nth-child(2) { margin-top: 48px; }
.places.bento3 li:nth-child(3) { margin-left: -24px; }
.buyrent2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--tint); border-radius: 20px; padding: 32px 32px 24px; }
.buyrent2 figure { margin: 0; text-align: center; }
.buyrent2 img { height: 200px; width: auto; margin: 0 auto; }
.buyrent2 figcaption { font-size: 28px; font-weight: 700; color: var(--green); margin-top: 12px; }
.buyrent2 .tag { right: 12px; bottom: 12px; }
/* 改修：実写の壁 */
.wall-head { padding-top: 0; }
.photo-wall { display: grid; grid-template-columns: 6fr 4fr; grid-template-rows: 280px 280px; gap: 6px; }
.photo-wall img { width: 100%; height: 100%; object-fit: cover; }
.photo-wall .w1 { grid-row: 1 / 3; }
.wall-txt { position: relative; z-index: 2; background: #fff; margin-top: -120px; padding: 32px 40px 0 0; max-width: 46em; }
.case.rev { grid-template-columns: 1fr 1.6fr; }
.case.rev .case-photos { order: 2; }
.case { border-bottom: 0; }
.build-fig .pin-link { position: absolute; transform: translate(-50%, -50%); background: var(--green); color: #fff; text-decoration: none; border-radius: 12px; padding: 8px 14px; box-shadow: 0 0 0 4px #fff; }
.build-fig .pin-link b { display: block; font-size: 14px; }
.build-fig .pin-link small { display: block; font-size: 11px; opacity: .85; }
.build-fig .pin-link small::before { content: "→ "; }
/* 会社概要 */
.town-head { padding-top: 0; }
.town-ph { position: relative; margin: 0; }
.town-ph img { width: 100%; height: clamp(360px, 56vh, 560px); object-fit: cover; display: block; }
.town-ph .tag { left: 16px; right: auto; }
.th-row { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: end; margin-top: -140px; position: relative; z-index: 2; }
.th-txt { background: #fff; padding: 28px 40px 8px 0; }
.th-rep { aspect-ratio: 4 / 5; background: #fff; }
.map-band { margin-top: var(--sec); padding: 120px 0 !important; }
.map-band .h2 { color: #fff; }
.map-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; margin-top: 48px; align-items: start; }
.big-map { margin: 0; }
.big-map svg { width: 100%; height: auto; }
.map-side2 .lead { color: rgba(255,255,255,.85); }
.map-side2 .map { margin-top: 24px; }
.map-side2 .wait { margin-top: 16px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
/* 流れ */
.steps3.with-ph .ph { position: relative; }
.who { position: absolute; left: 10px; top: 10px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.steps3.with-ph li:nth-child(2) { background: var(--tint); }
.table .thumb { width: 120px; height: 72px; }
.photo-band { position: relative; margin: var(--sec) 0 0; }
.photo-band img { width: 100%; height: 240px; object-fit: cover; display: block; }
.photo-band .tag { right: 16px; left: auto; }
/* お問い合わせ */
.side-map { margin: 24px 0 0; background: var(--tint); border-radius: 16px; padding: 12px; }
.side-h { font-size: 17px; margin-top: 32px; }
.after { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.after li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.after img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
.after b { display: block; font-size: 15px; }
.after small { font-size: 12px; color: var(--ink-sub); }
.after .now { color: #fff; background: var(--green); padding: 1px 8px; border-radius: 999px; }
/* 次のページ */
.next-sec { padding-bottom: 0 !important; }
.next-card { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: 28px; text-decoration: none; color: var(--ink); border-top: 2px solid var(--green); padding-top: 24px; }
.next-card .ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.next-card small { display: block; font-size: 13px; color: var(--ink-sub); font-weight: 700; }
.next-card b { display: block; font-size: clamp(22px, 2.4vw, 32px); margin-top: 4px; }
.next-card b::after { content: " →"; color: var(--green); }
/* 相談の帯にページの絵をまたがせる */
.closing.with-ph { overflow: visible; padding-top: 200px; }
.closing-ph { position: absolute; z-index: 1; left: 50%; top: -90px; transform: translateX(-50%); width: min(560px, 80vw); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; border: 6px solid #fff; }
@media (max-width: 860px) {
  .ph-head .ph-fig { width: calc(100% - 16px); }
  .cut-txt { position: static; transform: none; width: auto; padding: 24px var(--gutter) 0; }
  .lead-l { font-size: 11px; padding: 3px 6px; white-space: normal; max-width: 40%; }
  .l-comp { left: 40%; top: 82%; }
  .l-comp::before { height: 24px; }
  .l-dev { left: 58%; top: 4%; }
  .l-dev::before { display: none; }
  .steps.big1 { grid-template-columns: 1fr 1fr; }
  .steps.big1 li:first-child { grid-row: auto; grid-column: 1 / 3; }
  .steps.big1 li:nth-child(4) { grid-column: auto; }
  .steps.big1 li:nth-child(4) img, .steps.big1 li:first-child img { aspect-ratio: 4 / 3; }
  .kyushu-flow, .table-ph, .places.bento3, .map-grid, .th-row { grid-template-columns: minmax(0, 1fr); }
  .places.bento3 li:nth-child(2) { margin-top: 0; }
  .places.bento3 li:nth-child(3) { margin-left: 0; }
  .unit-wide img { height: 180px; }
  .faq-wide .faq { margin: -40px 12px 0 !important; padding: 4px 18px; }
  .roof-head { min-height: 600px; }
  .ba-done { left: 8%; top: 70%; }
  .ba-before { left: 52%; top: 86%; }
  .photo-wall { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px; }
  .photo-wall .w1 { grid-row: auto; grid-column: 1 / 3; }
  .wall-txt { margin-top: 0; padding: 24px 0 0; }
  .case.rev { grid-template-columns: 1fr; }
  .case.rev .case-photos { order: 0; }
  .build-fig { overflow-x: auto; }
  .build-fig img { width: 900px; max-width: none; }
  .th-row { margin-top: -60px; }
  .th-rep { width: 50%; justify-self: end; }
  .table .thumb { width: 64px; height: 48px; }
  .next-card { grid-template-columns: 120px 1fr; gap: 16px; }
  .closing.with-ph { padding-top: 140px; }
  .closing-ph { top: -60px; }
}
.ph-head .ph-fig { width: 50%; }
.ph-inset { top: 380px; right: 4%; width: 180px; }
.closing.with-ph { padding-top: 300px; }
@media (max-width: 860px) { .ph-head .ph-fig { width: calc(100% - 16px); } .ph-inset { top: auto; right: 16px; } .closing.with-ph { padding-top: 200px; } }
.ph-head .ph-inset { top: 420px; right: calc(50% - 70px); width: 170px; }
.ph-head .ph-inset figcaption { display: none; }
@media (max-width: 860px) { .ph-head .ph-inset { top: auto; right: 16px; } }
.ph-head .ph-inset { top: 470px; width: 150px; }
.ph-head .ph-inset img { aspect-ratio: 1 / 1; }
.ph-head .ph-inset { top: 420px; right: calc(50% - 50px); }
@media (max-width: 860px) { .ph-head .ph-inset { top: auto; right: 16px; } }
.ph-head .ph-inset { top: 380px; right: calc(50% - 100px); }
@media (max-width: 860px) { .ph-head .ph-inset { top: auto; right: 16px; } }
/* 点検の直し：スマホ（2026-11-01） */
.cut-pic { position: relative; }
.cut-pic > img { width: 100%; height: auto; display: block; }
.cut-pic > .tag { right: 16px; left: auto; }
.lead-list { display: none; }
.build-canvas { position: relative; }
.build-canvas > img { width: 100%; height: auto; display: block; }
.build-fig .pin-link b { white-space: nowrap; }
@media (max-width: 860px) {
  .cut-fig { display: flex; flex-direction: column; }
  .cut-txt { order: -1; padding: 0 var(--gutter) 24px; }
  .cut-pic .lead-l { display: none; }
  .lead-list { display: block; list-style: none; margin: 12px 0 0; padding: 0 var(--gutter); }
  .lead-list li { font-size: 14px; font-weight: 700; color: var(--green); padding: 6px 0; border-bottom: 1px solid var(--line); }
  .build-fig { overflow-x: auto; }
  .build-fig img { width: 100%; }
  .build-canvas { width: 900px; }
  .band-fig img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 15% 60%; }
  .cmp2.one { grid-template-columns: 1fr; }
  .cmp2.one figure + figure { border-left: 0; border-top: 1px solid var(--line); }
  .cmp2 svg text { display: none; }
  .th-rep { order: -1; justify-self: start; width: 46%; }
}
@media (max-width: 860px) { .cut-pic > img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 80% 50%; } }
@media (max-width: 860px) { .town-ph .tag { left: auto; right: 16px; } }
/* 浩平さんの直し（2026-11-01）：ヒーローの装置を外した */
.closeup { padding-top: var(--sec); }
@media (max-width: 860px) { .closeup { padding-top: var(--sec); } }
.closing-ph { margin: 0; overflow: hidden; padding: 0; }
.closing-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.closing-ph .tag { right: 10px; bottom: 10px; }
.cu-main > img[src*="pair-close"] { aspect-ratio: 1 / 1; }
.l-dev { left: 74%; top: 12%; }
.l-dev::before { left: 24px; top: 100%; width: 2px; height: 120px; }
@media (max-width: 860px) { .l-dev { left: 58%; top: 4%; } }
.l-dev::before { height: 170px; }
.cut-txt { width: min(24%, 330px); }
@media (max-width: 860px) { .cut-txt { width: auto; } }
.cut-txt .h2 { font-size: clamp(28px, 2.5vw, 36px); }
/* 数え上げの間に幅が揺れないよう、数字の幅を揃える */
.result .big, .bars .v { font-variant-numeric: tabular-nums; }