:root {
  --navy:#123963;
  --navy-deep:#082846;
  --blue:#179ac8;
  --sky:#eaf8fc;
  --sky-strong:#cceefa;
  --gold:#e8aa35;
  --gold-soft:#fff4db;
  --green:#31a96b;
  --ink:#1e2c38;
  --muted:#3c4c58;
  --white:#fff;
  --cream:#fffdf7;
  --line:#d9e8ee;
  --shadow:0 20px 55px rgba(8,40,70,.1);
  --max:1180px;
}

* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto }
a { color:inherit }
button,input,textarea,select { font:inherit }
.skip-link { position:fixed; left:12px; top:-80px; z-index:1000; background:#fff; padding:10px 16px }
.skip-link:focus { top:12px }

.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(18,57,99,.1);
  backdrop-filter:blur(12px);
}
.header-inner {
  max-width:var(--max);
  min-height:82px;
  margin:auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  gap:26px;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); font-size:13px; font-weight:800; white-space:nowrap }
.brand img { width:58px; height:48px; object-fit:contain }
.global-nav { margin-left:auto; display:flex; align-items:center; gap:22px }
.global-nav a { position:relative; text-decoration:none; color:#354857; font-size:14px; font-weight:700; white-space:nowrap }
.global-nav a:not(.nav-home)::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--blue); transition:.25s }
.global-nav a:hover::after { right:0 }
.global-nav .nav-home { color:var(--blue); padding:9px 14px; border-radius:999px; background:var(--sky) }
.header-direct { display:flex; flex-direction:column; text-align:right; text-decoration:none; color:var(--navy); line-height:1.1; white-space:nowrap }
.header-direct small { color:var(--gold); font-weight:900 }
.header-direct strong { margin-top:4px; font-size:19px; letter-spacing:.02em }
.header-direct span { margin-top:4px; color:var(--muted); font-size:10px }
.menu-button { display:none; margin-left:auto; padding:8px 12px; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:999px; font-weight:700 }

.hero {
  position:relative;
  min-height:720px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:#dff3f8;
}
.hero-media { position:absolute; inset:0; background:url("../img/site/hero-home.webp") center/cover no-repeat }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 35%,rgba(255,255,255,.36) 58%,rgba(255,255,255,.05) 100%) }
.hero-inner { position:relative; z-index:2; width:100%; max-width:var(--max); margin:auto; padding:90px 24px 110px }
.hero-label { width:max-content; margin:0 0 20px; padding:7px 14px; color:#087ca8; background:#e3f6fb; border-radius:999px; font-size:13px; font-weight:900; letter-spacing:.08em }
.hero h1 { max-width:720px; margin:0; color:var(--navy-deep); font-size:clamp(38px,5.2vw,68px); line-height:1.25; letter-spacing:-.04em }
.hero h1 em { color:var(--blue); font-style:normal }
.hero-copy { max-width:640px; margin:28px 0 0; color:#33465a; font-size:18px; font-weight:600; line-height:2 }
.hero-actions { max-width:640px; margin-top:34px; display:flex; gap:14px; flex-wrap:wrap }
.button { min-height:58px; padding:16px 24px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; text-decoration:none; text-align:center; font-weight:900; transition:.2s }
.button:hover { transform:translateY(-2px) }
.button-primary { color:#fff; background:linear-gradient(135deg,var(--blue),#1477b8); box-shadow:0 14px 30px rgba(23,154,200,.25) }
.button-light { color:var(--navy); background:#fff; border:1px solid rgba(18,57,99,.18) }
.hero-note { margin-top:24px; display:flex; gap:22px; flex-wrap:wrap; color:var(--navy); font-size:13px; font-weight:800 }
.hero-note span { display:flex; align-items:center; gap:8px }
.hero-note span::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--gold) }
.image-caption { position:absolute; z-index:2; right:16px; bottom:10px; margin:0; padding:3px 8px; color:#fff; background:rgba(0,0,0,.34); font-size:10px }

.trust-band {
  position:relative;
  z-index:3;
  max-width:var(--max);
  margin:-48px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.trust-band div { min-height:122px; padding:26px 30px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line) }
.trust-band div:last-child { border-right:0 }
.trust-band strong { color:var(--navy); font-size:18px }
.trust-band span { margin-top:5px; color:var(--muted); font-size:13px }

.section { padding:110px 24px }
.section-inner { max-width:var(--max); margin:auto }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:76px }
.split-copy-first .copy-block { order:1 }
.split-copy-first figure { order:2 }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:12px; font-weight:900; letter-spacing:.18em }
h2 { margin:0; color:var(--navy-deep); font-size:clamp(32px,4vw,50px); line-height:1.38; letter-spacing:-.035em }
.section-lead { margin:24px 0 0; color:#30404c; font-size:17px; line-height:2 }
.section-heading { max-width:820px; margin:0 auto 58px; text-align:center }
.section-heading > p:last-child { margin:18px 0 0; color:var(--muted); font-size:17px }
.section-heading.align-left { margin-left:0; text-align:left }
.photo-card { position:relative; margin:0 }
.photo-card img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:18px; box-shadow:var(--shadow) }
.photo-card figcaption { margin-top:10px; color:#70818d; font-size:11px }
.quote { margin-top:32px; padding:28px 30px; background:var(--gold-soft); border-left:4px solid var(--gold) }
.quote p { margin:0; color:var(--navy); font-size:17px; font-weight:700; line-height:2 }
.quote strong { display:block; margin-top:15px; color:#6b5930; font-size:12px }
.text-link { display:inline-flex; margin-top:25px; color:var(--blue); font-weight:900; text-underline-offset:5px }

.promise-section { padding-top:140px; background:var(--cream) }
.roof-section { background:#edf8fb }
.check-list { margin:30px 0 0; padding:0; list-style:none }
.check-list li { padding:17px 0; display:grid; grid-template-columns:160px 1fr; gap:20px; border-bottom:1px solid #cce3ea }
.check-list strong { color:var(--navy) }
.check-list span { color:var(--muted); font-size:14px }
.caution { margin:20px 0 0; color:#6f7d87; font-size:12px }

.choose-section { background:#fff }
.path-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px }
.path {
  position:relative;
  min-height:280px;
  padding:28px;
  display:flex;
  flex-direction:column;
  color:var(--navy);
  background:#f5fbfd;
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  transition:.22s;
}
.path:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#adddec }
.path-main { grid-row:span 2; color:#fff; background:linear-gradient(160deg,#1ca6cf,#1575b4); border:0 }
.path-no { color:var(--gold); font-size:12px; font-weight:900; letter-spacing:.14em }
.path small { margin-top:22px; opacity:.8; font-weight:700 }
.path strong { margin-top:8px; font-size:25px; line-height:1.45 }
.path-main strong { font-size:34px }
.path p { margin:18px 0 24px; color:#617583; font-size:13px }
.path-main p { color:rgba(255,255,255,.85); font-size:15px }
.path b { margin-top:auto; font-size:13px; text-decoration:underline; text-underline-offset:5px }

.equipment-section { background:var(--cream) }
.energy-flow { margin:34px 0 0; padding:0; display:flex; align-items:center; gap:12px; list-style:none }
.energy-flow li { flex:1; min-width:0; padding:16px 10px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:12px }
.energy-flow strong,.energy-flow span { display:block }
.energy-flow strong { color:var(--blue) }
.energy-flow span { margin-top:4px; color:var(--muted); font-size:11px }
.energy-flow .energy-connector { width:24px; height:2px; min-width:24px; padding:0; flex:0 0 24px; border:0; border-radius:0; background:var(--gold) }

.estimate-section { color:#fff; background:var(--navy-deep) }
.estimate-section h2,.estimate-section .section-heading p,.estimate-section .eyebrow { color:#fff }
.estimate-section .eyebrow { color:#79d5f1 }
.estimate-section .section-heading > p:last-child { color:rgba(255,255,255,.72) }
.estimate-layout { display:grid; grid-template-columns:1.35fr .85fr; gap:24px }
.estimate-factors { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(255,255,255,.18) }
.estimate-factors span { min-height:82px; padding:20px; display:flex; align-items:center; background:rgba(255,255,255,.08); font-weight:800 }
.estimate-copy { padding:34px; background:#fff; border-radius:16px; color:var(--ink) }
.estimate-copy strong { color:var(--navy); font-size:25px }
.estimate-copy p { margin:14px 0 25px; color:var(--muted) }

.maker-section { background:#fff }
.maker-points { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.maker-points div { padding:30px 24px; border-right:1px solid var(--line) }
.maker-points div:last-child { border-right:0 }
.maker-points span { color:var(--gold); font-size:12px; font-weight:900 }
.maker-points strong { display:block; margin-top:12px; color:var(--navy); font-size:17px }
.maker-points p { margin:8px 0 0; color:var(--muted); font-size:13px }
.legal-note { margin:22px 0 0; color:#6c7b86; text-align:center; font-size:12px }

.video-section { background:#edf8fb }
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
.video-card { padding:18px 18px 25px; background:#fff; border-radius:16px; box-shadow:0 12px 34px rgba(8,40,70,.07) }
.video-frame,.coming-screen { aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:var(--navy) }
.video-frame iframe { width:100%; height:100%; border:0 }
.video-card small { display:block; margin-top:18px; color:var(--blue); font-weight:900 }
.video-card h3 { margin:6px 0 0; color:var(--navy); font-size:22px; line-height:1.55 }
.video-card p { margin:8px 0 0; color:var(--muted); font-size:13px }
.coming-screen { padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; background:linear-gradient(145deg,#177db8,#123963) }
.coming-screen span { margin-bottom:15px; padding:5px 12px; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px; font-size:11px; font-weight:900 }
.coming-screen b { font-size:24px; line-height:1.6 }

.flow-section { background:#fff }
.flow-list { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.flow-list li { padding:28px 24px; border-right:1px solid var(--line) }
.flow-list li:last-child { border-right:0 }
.flow-list > li > span { color:var(--gold); font-size:12px; font-weight:900 }
.flow-list strong { display:block; margin-top:12px; color:var(--navy); font-size:18px }
.flow-list p { margin:8px 0 0; color:var(--muted); font-size:13px }

.contact-section { color:#fff; background:linear-gradient(135deg,#158ab9,#123963) }
.contact-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center }
.contact-section h2,.contact-section .eyebrow { color:#fff }
.contact-person > p:not(.eyebrow) { margin-top:22px; color:rgba(255,255,255,.82) }
.direct-name { margin-top:35px; padding-top:24px; border-top:1px solid rgba(255,255,255,.3) }
.direct-name span,.direct-name small { display:block; opacity:.72 }
.direct-name strong { display:block; margin:4px 0; font-size:28px }
.contact-actions { display:grid; gap:12px }
.contact-button { padding:20px 24px; display:grid; grid-template-columns:1fr auto; align-items:center; text-decoration:none; border-radius:14px; transition:.2s }
.contact-button:hover { transform:translateX(3px) }
.contact-button span { grid-row:1; font-size:11px; font-weight:900; opacity:.8 }
.contact-button strong { grid-row:2; font-size:22px }
.contact-button small { grid-column:2; grid-row:1/3; align-self:center; font-size:11px }
.contact-button.phone { color:var(--navy); background:#fff }
.contact-button.line { color:#fff; background:#24a866 }
.contact-button.form { color:var(--navy); background:#f8d875 }

.faq-section { background:var(--cream) }
.faq-inner { max-width:900px }
details { border-top:1px solid var(--line) }
details:last-child { border-bottom:1px solid var(--line) }
summary { padding:22px 44px 22px 0; position:relative; cursor:pointer; list-style:none; color:var(--navy); font-weight:900 }
summary::-webkit-details-marker { display:none }
summary::after { content:"＋"; position:absolute; right:10px; color:var(--blue); font-size:22px }
details[open] summary::after { content:"−" }
details p { margin:-5px 0 22px; padding-right:44px; color:var(--muted); font-size:14px }

.site-footer { padding:54px 24px 130px; color:#d9e6ed; background:#082846 }
.footer-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1fr 1.5fr; gap:36px }
.footer-inner strong { color:#fff; font-size:18px }
.footer-inner p { margin:4px 0; font-size:12px }
.footer-inner nav { display:flex; justify-content:flex-end; align-items:flex-start; gap:16px; flex-wrap:wrap }
.footer-inner nav a { color:#d9e6ed; font-size:12px; text-underline-offset:4px }
.footer-inner > small { grid-column:1/-1; padding-top:26px; border-top:1px solid rgba(255,255,255,.15) }

.mobile-cta { display:none }

@media (max-width:1050px) {
  .global-nav { display:none; position:absolute; left:16px; right:16px; top:74px; padding:18px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow) }
  .global-nav.is-open { display:flex }
  .global-nav a { padding:8px 4px }
  .menu-button { display:block }
  .header-direct { margin-left:0 }
  .split { gap:42px }
}

@media (max-width:760px) {
  body { padding-bottom:72px }
  .header-inner { min-height:68px; padding:8px 14px; gap:10px }
  .brand img { width:42px; height:40px }
  .brand span { display:none }
  .header-direct small { font-size:9px }
  .header-direct strong { font-size:15px }
  .header-direct span { display:none }
  .menu-button { font-size:12px }
  .hero { min-height:720px; align-items:flex-end }
  .hero-media { background-position:64% center }
  .hero-shade { background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.78) 39%,rgba(255,255,255,.99) 66%) }
  .hero-inner { padding:285px 18px 58px }
  .hero-label { margin-bottom:14px; font-size:11px }
  .hero h1 { font-size:36px }
  .hero-copy { margin-top:18px; font-size:14px; line-height:1.85 }
  .hero-actions { margin-top:24px; display:grid }
  .button { width:100%; min-height:55px; font-size:14px }
  .hero-note { gap:8px 16px; font-size:11px }
  .image-caption { top:250px; right:8px; bottom:auto }
  .trust-band { margin:0; grid-template-columns:1fr; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line) }
  .trust-band div { min-height:auto; padding:18px 22px; border-right:0; border-bottom:1px solid var(--line) }
  .trust-band div:last-child { border-bottom:0 }
  .trust-band strong { font-size:15px }
  .section { padding:76px 18px }
  .split { grid-template-columns:1fr; gap:36px }
  .split-copy-first .copy-block,.split-copy-first figure { order:initial }
  h2 { font-size:31px }
  .section-lead { font-size:14px }
  .section-heading { margin-bottom:38px; text-align:left }
  .section-heading > p:last-child { font-size:14px }
  .quote { padding:22px }
  .quote p { font-size:14px }
  .photo-card img { border-radius:13px }
  .check-list li { grid-template-columns:1fr; gap:4px; padding:14px 0 }
  .path-grid { grid-template-columns:1fr }
  .path,.path-main { min-height:235px; grid-row:auto }
  .path-main strong,.path strong { font-size:26px }
  .energy-flow { flex-direction:column }
  .energy-flow li { width:100% }
  .energy-flow .energy-connector { width:2px; height:20px; min-width:2px; flex-basis:20px }
  .estimate-layout { grid-template-columns:1fr }
  .estimate-factors { grid-template-columns:1fr }
  .estimate-copy { padding:26px 22px }
  .maker-points { grid-template-columns:1fr 1fr }
  .maker-points div { border-bottom:1px solid var(--line) }
  .maker-points div:nth-child(2) { border-right:0 }
  .maker-points div:nth-child(3),.maker-points div:nth-child(4) { border-bottom:0 }
  .video-grid { grid-template-columns:1fr }
  .video-card h3 { font-size:19px }
  .flow-list { grid-template-columns:1fr }
  .flow-list li { padding:20px 4px; display:grid; grid-template-columns:44px 1fr; border-right:0; border-bottom:1px solid var(--line) }
  .flow-list li:last-child { border-bottom:0 }
  .flow-list strong { margin-top:0 }
  .contact-inner { grid-template-columns:1fr; gap:38px }
  .contact-button { grid-template-columns:1fr; padding:17px 20px }
  .contact-button small { grid-column:1; grid-row:3; margin-top:4px }
  .footer-inner { grid-template-columns:1fr }
  .footer-inner nav { justify-content:flex-start }
  .mobile-cta { position:fixed; z-index:200; left:0; right:0; bottom:0; min-height:70px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -10px 25px rgba(8,40,70,.08) }
  .mobile-cta a { min-width:0; padding:7px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:9px; text-decoration:none; line-height:1.25 }
  .mobile-cta span { font-size:8px; font-weight:700 }
  .mobile-cta strong { margin-top:2px; font-size:12px }
  .mobile-phone { color:#fff; background:var(--navy) }
  .mobile-line { color:#fff; background:#24a866 }
  .mobile-form { color:#533b00; background:#f8d875 }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  * { transition:none !important }
}

/* 字余り改行（行末に1〜2文字だけ残る孤立）を避ける */
p, li, figcaption, .section-lead, .hero-copy, .quote p, details p { text-wrap:pretty }
h2, h3, .path strong, .path p, .maker-points p, .flow-list p, .video-card h3, .check-list span, .estimate-copy p { text-wrap:balance }