:root{
  --g900:#0e2216; --g800:#152C1E; --g700:#1d4d2b; --g600:#2d7240;
  --cream:#F3EFE6; --paper:#F6F2E9; --gold:#C9B97A; --gold-deep:#9a8746;
  --font-head:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --font-en:"Cormorant Garamond","Times New Roman",serif;
  --wrap:1180px;
  --radius:4px;

  --bg:#152C1E; --bg2:#10251a; --surface:rgba(255,255,255,.045); --surface-line:rgba(201,185,122,.22);
  --text:#ECE6CF; --muted:rgba(236,230,207,.88); --accent:#C9B97A; --accent-ink:#152C1E;
  --head-bg:rgba(16,37,26,.9); --head-ink:#ECE6CF; --band-bg:#0e2216; --band-ink:#ECE6CF;
  --foot-bg:#0b1c12; --foot-ink:rgba(236,230,207,.88); --chip:rgba(201,185,122,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.9; letter-spacing:.03em;

}
body{
  background-image:
    radial-gradient(ellipse 80% 50% at 12% 0%, rgba(47,106,71,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(8,20,12,.9) 0%, transparent 60%);
  background-attachment:fixed;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ width:min(var(--wrap), 100% - 40px); margin-inline:auto; }

.site-head{
  position:sticky; top:0; z-index:50; background:var(--head-bg); color:var(--head-ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--surface-line);
}
.site-head .wrap{ display:flex; align-items:center; gap:18px; height:76px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand img{ height:30px; width:auto; }
.brand img{ filter:invert(1) sepia(.25) brightness(.95); }
.brand .name{ font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.14em; line-height:1.25; }
.brand .name small{ display:block; font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.2em; opacity:.88; }
.gnav{ display:flex; gap:14px; margin-left:auto; }
.gnav a{ text-decoration:none; font-size:13.5px; font-weight:500; letter-spacing:.06em; padding:6px 0; position:relative; white-space:nowrap; }
.gnav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .25s; }
.gnav a:hover::after, .gnav a[aria-current="page"]::after{ right:0; }
.head-tel{ display:flex; flex-direction:column; align-items:flex-end; text-decoration:none; line-height:1.2; flex:none; }
.head-tel .num{ font-family:var(--font-head); font-size:22px; font-weight:700; letter-spacing:.04em; }
.head-tel .num::before{ content:"TEL "; font-family:var(--font-en); font-style:italic; font-size:14px; color:var(--accent); }
.head-tel small{ font-size:13px; color:var(--muted); letter-spacing:.06em; }
.menu-btn{ display:none; margin-left:auto; background:none; border:1px solid var(--surface-line); color:inherit; border-radius:999px; padding:8px 16px; font:inherit; font-size:13px; letter-spacing:.12em; cursor:pointer; }

@media (max-width:1200px){
  .gnav, .head-tel{ display:none; }
  .menu-btn{ display:block; }
  .site-head.open .gnav{
    display:flex; flex-direction:column; gap:0; position:absolute; top:76px; left:0; right:0;
    background:var(--head-bg); padding:8px 20px 20px; border-bottom:1px solid var(--surface-line);
  }
  .site-head.open .gnav a{ padding:14px 4px; border-bottom:1px solid var(--surface-line); font-size:15px; }
}

.sec{ padding:112px 0; position:relative; }
.sec-head{ position:relative; padding:22px 0 0 26px; margin-bottom:48px; }
.sec-head::before{ 
  content:""; position:absolute; left:0; top:0; width:64px; height:64px;
  border-left:1.5px solid var(--gold); border-top:1.5px solid var(--gold);
}
.sec-head::after{ 
  content:""; position:absolute; left:6px; top:-1px; width:56px; height:7px;
  background:repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 8px);
  opacity:.8;
}
.sec-head .en{ font-family:var(--font-en); font-style:italic; font-size:19px; color:var(--accent); letter-spacing:.12em; display:block; line-height:1; }
.sec-head .en{ color:var(--gold); }
.sec-head h2{ font-family:var(--font-head); font-weight:700; font-size:clamp(26px, 3.2vw, 38px); letter-spacing:.12em; line-height:1.5; margin:12px 0 0; }
.sec-head p{ margin:14px 0 0; color:var(--muted); max-width:40em; }

.hero{ position:relative; padding:56px 0 96px; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns: 5fr 7fr; gap:56px; align-items:center; }
.hero-copy .kicker{ font-family:var(--font-en); font-style:italic; font-size:20px; color:var(--gold); letter-spacing:.16em; }

.hero-copy h1{
  font-family:var(--font-head); font-weight:700; font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.42; letter-spacing:.1em; margin:16px 0 0;
}
.hero-copy h1 em{ font-style:normal; background:linear-gradient(transparent 78%, rgba(201,185,122,.38) 78%, rgba(201,185,122,.38) 94%, transparent 94%); }

.ph{ display:inline-block; }
.hero-copy .lead{ margin:26px 0 0; font-size:16.5px; color:var(--muted); max-width:28em; }
.hero-copy .motto{ margin:22px 0 0; font-family:var(--font-head); font-size:17px; letter-spacing:.1em; }
.btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:.1em;
  padding:15px 28px; border-radius:999px; font-size:15px; transition:transform .2s, background .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-ghost{ border:1px solid var(--surface-line); }
.btn .arr{ font-family:var(--font-en); font-size:18px; }
.hero-visual{ position:relative; }
.hero-visual .after{
  aspect-ratio: 4 / 3; overflow:hidden; border-radius:var(--radius);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.hero-visual .after img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.hero-visual .before{
  position:absolute; left:-44px; bottom:-48px; width:38%;
  background:var(--cream); padding:8px 8px 30px; transform:rotate(-3deg);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
}
.hero-visual .before img{ aspect-ratio:4/3; object-fit:cover; width:100%; filter:saturate(.75); }
.hero-visual .before span{ position:absolute; left:0; right:0; bottom:6px; text-align:center; font-family:var(--font-en); font-style:italic; color:#5b665f; font-size:15px; letter-spacing:.2em; }
.hero-visual .tag-after{
  position:absolute; right:16px; top:16px; background:var(--g800); color:var(--gold);
  font-family:var(--font-en); font-style:italic; letter-spacing:.2em; padding:4px 14px; font-size:15px;
}
.hero-visual .cap{ margin-top:14px; text-align:right; font-size:15px; color:var(--muted); }

.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--surface-line); border:1px solid var(--surface-line); }
.svc{ background:var(--bg); padding:34px 30px 32px; position:relative; text-decoration:none; transition:background .25s; }

.svc:hover{ background:var(--bg2); }
.svc .no{ font-family:var(--font-en); font-style:italic; color:var(--gold); font-size:18px; }

.svc h3{ font-family:var(--font-head); font-size:21px; letter-spacing:.12em; margin:6px 0 10px; font-weight:700; }
.svc p{ margin:0; font-size:15px; color:var(--muted); line-height:1.85; }
.svc .ex{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
.svc .ex span{ font-size:13px; background:var(--chip); padding:2px 10px; border-radius:999px; letter-spacing:.04em; }

.works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px 40px; }
.work-card{ text-decoration:none; display:block; }
.work-card .pics{ position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius); }
.work-card .pics img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s, transform 1.2s; }
.work-card .pics .b{ opacity:0; filter:saturate(.8); }
.work-card:hover .pics .b{ opacity:1; }
.work-card:hover .pics .a{ transform:scale(1.03); }
.work-card .pics .lbl{
  position:absolute; left:14px; top:14px; z-index:2; background:rgba(14,34,22,.85); color:var(--gold);
  font-family:var(--font-en); font-style:italic; font-size:14px; letter-spacing:.18em; padding:3px 12px; transition:opacity .3s;
}
.work-card .pics .lbl.lb{ opacity:0; background:rgba(60,56,48,.85); color:#eee; }
.work-card:hover .pics .lbl.la{ opacity:0; }
.work-card:hover .pics .lbl.lb{ opacity:1; }
.work-card .meta{ display:flex; align-items:baseline; gap:16px; margin-top:18px; }
.work-card .meta .num{ font-family:var(--font-en); font-style:italic; font-size:34px; color:var(--gold); line-height:1; }

.work-card h3{ font-family:var(--font-head); font-size:21px; letter-spacing:.1em; margin:0; line-height:1.5; font-weight:700; }
.work-card .places{ margin:8px 0 0 52px; font-size:15px; color:var(--muted); }
.hint{ font-size:15px; color:var(--muted); margin-top:28px; }

.band{ background:var(--band-bg); color:var(--band-ink); }
.band .sec-head p{ color:rgba(236,230,207,.88); }
.band .sec-head .en{ color:var(--gold); }
.points{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; counter-reset:pt; }
.point{ border-top:1px solid rgba(201,185,122,.35); padding-top:26px; }
.point .big{ font-family:var(--font-head); font-size:46px; color:var(--gold); line-height:1; letter-spacing:.04em; }
.point .big small{ font-size:16px; margin-left:4px; letter-spacing:.1em; }
.point h3{ font-family:var(--font-head); font-size:20px; letter-spacing:.1em; margin:16px 0 8px; }
.point p{ margin:0; font-size:15px; color:rgba(236,230,207,.88); }

.flow{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; counter-reset:st; }
.flow li{ list-style:none; min-width:0; position:relative; padding:0 18px 0 0; }
.flow li::before{
  counter-increment:st; content:counter(st, decimal-leading-zero);
  font-family:var(--font-en); font-style:italic; font-size:30px; color:var(--gold); display:block; line-height:1;
}

.flow li::after{ content:""; position:absolute; left:52px; right:18px; top:15px; height:1px; background:var(--surface-line); }
.flow li:last-child::after{ display:none; }
.flow h3{ font-family:var(--font-head); font-size:17px; letter-spacing:.08em; margin:14px 0 6px; }
.flow p{ margin:0; font-size:15px; color:var(--muted); line-height:1.8; }
.flow-wrap{ padding:0; margin:0; }

.cta{ padding:84px 0; text-align:center; border-top:1px solid var(--surface-line); }
.cta .q{ font-family:var(--font-head); font-size:clamp(22px, 2.6vw, 30px); letter-spacing:.12em; margin:0; }
.cta .telbig{ display:inline-block; margin-top:18px; font-family:var(--font-head); font-weight:700; font-size:clamp(30px, 5vw, 64px); letter-spacing:.04em; text-decoration:none; line-height:1.1; }
.cta .telbig::before{ content:"TEL"; font-family:var(--font-en); font-style:italic; font-size:.4em; color:var(--gold); margin-right:12px; vertical-align:.35em; }

.cta .sub{ margin:10px 0 0; color:var(--muted); font-size:14px; }

.site-foot{ background:var(--foot-bg); color:var(--foot-ink); padding:64px 0 28px; font-size:13.5px; }
.site-foot .cols{ display:grid; grid-template-columns: 1.3fr 1fr; gap:40px; }
.site-foot .brand img{ filter:invert(1) sepia(.25) brightness(.95); }
.site-foot .brand .name{ color:#ECE6CF; }
.site-foot address{ font-style:normal; margin-top:18px; line-height:2; }
.site-foot .fnav{ display:grid; grid-template-columns:repeat(2, max-content); gap:6px 36px; align-content:start; }
.site-foot .fnav a{ text-decoration:none; }
.site-foot .fnav a:hover{ color:var(--gold); }
.site-foot .lic{ margin-top:36px; padding-top:20px; border-top:1px solid rgba(201,185,122,.2); display:flex; flex-direction:column; gap:6px; font-size:13px; opacity:1; }
.site-foot .copy{ margin-top:14px; font-size:12px; opacity:1; letter-spacing:.08em; }

.callbar{ display:none; }
@media (max-width:767px){
  .callbar{
    display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
    align-items:center; justify-content:center; gap:10px; text-decoration:none;
    background:var(--g700); color:#fff; border-radius:999px; padding:14px 18px; font-weight:700; letter-spacing:.08em;
    box-shadow:0 10px 24px -6px rgba(0,0,0,.45); border:1px solid rgba(201,185,122,.5);
  }
  .callbar small{ font-weight:500; font-size:13px; opacity:.88; }
  body{ padding-bottom:84px; }
}

.crumb{ font-size:13px; color:var(--muted); padding:22px 0 0; }
.crumb a{ text-decoration:none; }
.crumb span{ margin:0 8px; opacity:1; }
.case-head{ padding:44px 0 36px; display:grid; grid-template-columns:auto 1fr; gap:10px 28px; align-items:end; }
.case-head .num{ font-family:var(--font-en); font-style:italic; font-size:96px; line-height:.8; color:var(--gold); grid-row:span 2; }

.case-head .label{ font-size:13px; letter-spacing:.24em; color:var(--muted); }
.case-head h1{ font-family:var(--font-head); font-weight:700; font-size:clamp(26px, 3.6vw, 42px); letter-spacing:.1em; line-height:1.45; margin:0; }
.case-summary{ display:grid; grid-template-columns: 2fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid var(--surface-line); }
.case-summary p{ margin:0; }
.case-summary dl{ margin:0; display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; font-size:15px; }
.case-summary dt{ color:var(--muted); }
.case-summary dd{ margin:0; }

.ba-area{ padding:56px 0 24px; }
.rooms{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.rooms button{
  font:inherit; font-size:14px; letter-spacing:.08em; cursor:pointer; padding:8px 18px; border-radius:999px;
  background:transparent; color:var(--text); border:1px solid var(--surface-line); transition:all .2s;
}
.rooms button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.ba{
  --pos:50%;
  position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:ew-resize; background:#222;
  
  max-width:min(100%, calc((100vh - 200px) * 1.5)); margin-inline:auto;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba .ba-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba .ba-line{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--gold); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.ba .ba-knob{
  position:absolute; top:50%; left:var(--pos); width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:var(--g800); border:2px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:-.05em; box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.ba .ba-knob:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.ba .t{ position:absolute; top:14px; font-family:var(--font-en); font-style:italic; letter-spacing:.2em; font-size:15px; padding:3px 12px; z-index:2; }
.ba .t-b{ left:14px; background:rgba(60,56,48,.85); color:#eee; }
.ba .t-a{ right:14px; background:rgba(14,34,22,.88); color:var(--gold); }
.ba-ctrl{ display:flex; gap:10px; margin-top:14px; align-items:center; flex-wrap:wrap; }
.ba-ctrl button{ font:inherit; font-size:13px; cursor:pointer; padding:6px 14px; border-radius:999px; background:transparent; color:var(--text); border:1px solid var(--surface-line); }
.ba-ctrl .tip{ font-size:15px; color:var(--muted); margin-left:auto; }
.ba-text{ margin-top:22px; display:grid; grid-template-columns: 220px 1fr; gap:24px; align-items:start; }
.ba-text h3{ font-family:var(--font-head); font-size:22px; letter-spacing:.1em; margin:0; }
.ba-text p{ margin:0; color:var(--muted); }

.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.gallery figure{ margin:0; }
.gallery img{ aspect-ratio:3/2; object-fit:cover; width:100%; border-radius:var(--radius); }
.gallery figcaption{ font-size:15px; color:var(--muted); margin-top:8px; }
.pager{ display:flex; justify-content:space-between; gap:20px; padding:48px 0 0; border-top:1px solid var(--surface-line); margin-top:72px; }
.pager a{ text-decoration:none; font-family:var(--font-head); letter-spacing:.08em; }
.pager small{ display:block; font-family:var(--font-en); font-style:italic; color:var(--gold); font-size:15px; }

@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ order:-1; }
  .hero-visual .before{ left:auto; right:12px; bottom:-36px; width:40%; }
  .hero-visual .cap{ text-align:left; padding-right:46%; line-height:1.6; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .points{ grid-template-columns:1fr; gap:28px; }
  .flow{ grid-template-columns:1fr; gap:22px; }
  .flow li{ padding:0 0 0 64px; }
  .flow li::before{ position:absolute; left:0; top:0; }
  .flow li::after{ display:none; }
  .flow h3{ margin-top:0; }
  .case-summary{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:767px){
  body{ font-size:15px; }
  .sec{ padding:76px 0; }
  .sec-head h2{ letter-spacing:.06em; }
  .site-head .wrap{ height:64px; }
  .site-head.open .gnav{ top:64px; }
  .brand img{ height:24px; }
  .brand .name{ font-size:15px; }
  .hero{ padding:24px 0 72px; }
  .services{ grid-template-columns:1fr; }
  .works-grid{ grid-template-columns:1fr; gap:40px; }
  .work-card .places{ margin-left:0; }
  .case-head{ grid-template-columns:1fr; gap:8px; padding-top:28px; }
  .case-head .num{ font-size:56px; grid-row:auto; }
  .ba{ aspect-ratio:4/3; max-width:100%; }
  .ba-text{ grid-template-columns:1fr; gap:8px; }
  .ba-ctrl .tip{ margin-left:0; width:100%; }
  .gallery{ grid-template-columns:1fr; }
  .site-foot .cols{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
  .rise.d1{ animation-delay:.08s; } .rise.d2{ animation-delay:.2s; } .rise.d3{ animation-delay:.34s; } .rise.d4{ animation-delay:.5s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}

/* 共通の読みやすさとページ内移動 */
[hidden]{ display:none !important; }
img{ height:auto; }
button, a{ -webkit-tap-highlight-color:transparent; }
button{ touch-action:manipulation; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; }
[id]{ scroll-margin-top:100px; }
.wrap > *, .hero .wrap > *, .case-summary > *, .meta > *, .cols > *{ min-width:0; }
p, dd, address, figcaption{ overflow-wrap:anywhere; }
.ph{ white-space:nowrap; }
.nw{ white-space:nowrap; }
.skip-link{ position:fixed; top:8px; left:12px; z-index:200; padding:8px 16px; background:var(--gold); color:var(--g900); transform:translateY(-160%); }
.skip-link:focus{ transform:none; }
.btn{ max-width:100%; justify-content:center; text-align:center; }
.section-end{ margin-bottom:80px; }
.page-head{ margin:52px 0 64px; padding-top:24px; }
.page-head h1{ font-family:var(--font-head); font-size:clamp(26px,3.6vw,44px); line-height:1.5; letter-spacing:.1em; margin:12px 0 0; }
.page-head p{ max-width:52em; }
.crumb > span[aria-current]{ margin:0; opacity:1; }
figcaption{ color:var(--muted); font-size:15px; line-height:1.8; margin-top:10px; }
figure{ margin:0; }
.no{ color:var(--gold); font-family:var(--font-en); font-style:italic; font-size:21px; }
.ex{ display:flex; flex-wrap:wrap; gap:8px; }
.ex span{ font-size:13px; background:var(--chip); border-radius:999px; padding:3px 12px; }
.tag-label{ font-size:13px; color:var(--muted); margin:24px 0 8px; }

/* 工事の種類 */
.service-detail{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding:64px 0; border-top:1px solid var(--surface-line); }
.service-detail .sec-head{ margin-bottom:24px; }
.service-detail .sec-head h2{ font-size:clamp(22px,2.6vw,32px); }
.service-detail.reverse figure{ grid-column:1; grid-row:1; }
.service-detail.reverse .service-copy{ grid-column:2; grid-row:1; }
.service-detail figure img{ width:100%; max-height:540px; object-fit:cover; border-radius:var(--radius); }
.service-detail figure a{ text-decoration:none; }
.service-detail figure a:hover figcaption{ color:var(--gold); }
.service-detail#care figure img{ object-fit:contain; }
.service-detail .repair-list{ grid-template-columns:1fr; }
.repair-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; list-style:none; padding:0; margin:0; }
.repair-list li{ border-bottom:1px solid var(--surface-line); padding:16px 0 16px 22px; position:relative; }
.repair-list li::before{ content:""; position:absolute; width:6px; height:6px; left:2px; top:28px; background:var(--gold); }

/* 新築・増改築 */
.build-content{ padding-bottom:88px; }
.build-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.build-grid figure{ position:sticky; top:110px; }
.build-grid figure img{ width:100%; border-radius:var(--radius); }
.build-point{ padding:0 0 32px; }
.build-point h2{ font-family:var(--font-head); font-size:clamp(21px,2.2vw,28px); letter-spacing:.06em; line-height:1.65; margin:8px 0 16px; }
.build-point p{ margin:0; }
.extension{ margin:40px 0 64px; padding-top:64px; border-top:1px solid var(--surface-line); align-items:center; }
.extension figure{ position:static; }

/* 施工写真 */
.listing{ padding-bottom:96px; }
.room{ margin-bottom:56px; }
.room:last-child{ margin-bottom:0; }
.room h2{ font-family:var(--font-head); font-size:24px; margin:0 0 18px; letter-spacing:.08em; }
.room-description{ max-width:52em; margin:24px auto 0; color:var(--muted); }
.ba-portrait{ aspect-ratio:3/4; max-width:min(100%,calc((100svh - 200px) * .75)); }
.ba-knob{ z-index:3; }
.ba .ba-knob{ left:clamp(29px,var(--pos),calc(100% - 29px)); }
.ba:not(.is-ready){ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; aspect-ratio:auto; max-width:100%; background:transparent; cursor:default; touch-action:auto; }
.ba:not(.is-ready) img{ position:static; width:100%; height:auto; object-fit:contain; clip-path:none; align-self:start; }
.ba:not(.is-ready) .ba-before{ order:-1; }
.ba:not(.is-ready) .t, .ba:not(.is-ready) .ba-line{ display:none; }
.comparison-pair{ display:flex; gap:24px; align-items:flex-start; max-width:calc((100svh - 220px) * 2.0833333333 + 24px); margin-inline:auto; }
.comparison-pair figure{ margin:0; flex:var(--ar) 1 0; min-width:0; }
.comparison-pair img{ width:100%; height:auto; border-radius:var(--radius); }
.compare-tag{ font-family:var(--font-en); font-style:italic; color:var(--gold); font-size:18px; letter-spacing:.12em; margin-right:8px; }
.case-details{ padding:64px 0 0; }
.gallery-single{ grid-template-columns:1fr; max-width:860px; margin-inline:auto; }
.gallery-single img{ aspect-ratio:auto; }
.case-content{ padding-bottom:96px; }
.pager > a{ flex:1; min-width:0; font-size:16px; }
.pager > a:last-child{ text-align:right; }
.pager .ph{ white-space:normal; }
.work-card:focus-visible .pics .b{ opacity:1; }
.work-card:focus-visible .pics .lbl.la{ opacity:0; }
.work-card:focus-visible .pics .lbl.lb{ opacity:1; }

/* ご相談の流れ */
.flow-content{ max-width:900px; padding-bottom:96px; }
.flow-detail{ list-style:none; margin:0; padding:0; }
.flow-detail li{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:32px; position:relative; padding-bottom:48px; }
.flow-detail li::before{ content:""; position:absolute; top:64px; bottom:8px; left:35px; width:1px; background:var(--surface-line); }
.flow-detail li:last-child::before{ display:none; }
.step-num{ position:relative; width:72px; height:64px; display:grid; place-items:center; border:1px solid var(--surface-line); font-family:var(--font-en); font-style:italic; font-size:32px; color:var(--gold); }
.flow-detail h2{ font-family:var(--font-head); font-size:25px; margin:8px 0 12px; line-height:1.6; }
.flow-detail p{ margin:0; color:var(--muted); }

/* 会社情報と電話 */
.company-content{ padding-bottom:96px; }
.company-table{ display:grid; grid-template-columns:180px minmax(0,1fr); margin:0; border-top:1px solid var(--surface-line); }
.company-table dt, .company-table dd{ padding:22px 26px; border-bottom:1px solid var(--surface-line); margin:0; }
.company-table dt{ color:var(--gold); background:var(--surface); }
.access-map{ display:block; width:100%; height:360px; border:0; margin-top:28px; }
.contact-content{ padding-bottom:96px; }
.contact-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; }
.contact-box{ border:1px solid var(--surface-line); background:var(--surface); padding:32px; }
.contact-box h2{ font-family:var(--font-head); font-size:24px; margin:0 0 20px; }
.contact-box.phone{ border-color:var(--gold); }
.contact-box p{ margin:16px 0 0; }
.contact-number, .fax-number{ font-family:var(--font-head); font-weight:700; letter-spacing:.03em; line-height:1.3; }
.contact-number{ font-size:clamp(30px,3.5vw,48px); color:var(--gold); text-decoration:none; white-space:nowrap; }
.contact-box .fax-number{ font-size:32px; }
.contact-examples, .visit{ margin-top:88px; }

@media (max-width:1200px){
  .site-head.open .gnav{ max-height:calc(100svh - 160px); overflow-y:auto; }
  .site-head:not(.menu-ready) .wrap{ height:auto; min-height:76px; padding-block:12px; flex-wrap:wrap; }
  .site-head:not(.menu-ready) .gnav{ display:flex; flex-wrap:wrap; width:100%; margin:0; gap:8px 20px; }
}
@media (max-width:960px){
  .service-detail, .build-grid{ gap:32px; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  [id]{ scroll-margin-top:84px; }
  .brand{ gap:9px; }
  .menu-btn{ padding:8px 12px; letter-spacing:.04em; }
  .page-head{ margin:32px 0 40px; padding-left:20px; }
  .page-head h1{ font-size:26px; letter-spacing:.04em; }
  .sec-head{ padding-left:20px; }
  .sec-head h2{ font-size:26px; }
  .hero-copy h1{ font-size:clamp(32px,8.8vw,48px); }
  .hero-copy .lead{ font-size:15.5px; }
  .hero-visual .cap, .gallery figcaption, figcaption, .work-card .places, .hint, .svc p, .point p, .flow p, .ba-ctrl .tip{ font-size:14.5px; }
  .svc{ padding:28px 24px; }
  .svc h3, .work-card h3{ font-size:20px; letter-spacing:.06em; }
  .work-card .meta{ gap:12px; }
  .btn{ padding:14px 22px; font-size:14px; }
  .case-head h1{ font-size:26px; letter-spacing:.05em; }
  .case-head .label{ font-size:13px; letter-spacing:.1em; }
  .case-summary dl{ grid-template-columns:1fr; gap:4px; }
  .case-summary dd + dt{ margin-top:12px; }
  .ba-area{ padding-top:32px; }
  .rooms button{ padding:9px 14px; }
  .ba-portrait{ aspect-ratio:3/4; max-width:100%; }
  .comparison-pair{ flex-direction:column; max-width:none; }
  .comparison-pair figure{ flex:none; width:100%; }
  .ba:not(.is-ready){ grid-template-columns:1fr; }
  .ba-ctrl button{ min-height:44px; }
  .service-detail, .build-grid{ grid-template-columns:1fr; gap:28px; }
  .service-detail{ padding:40px 0; }
  .service-detail.reverse figure, .service-detail.reverse .service-copy{ grid-column:auto; grid-row:auto; }
  .build-grid figure{ position:static; }
  .build-point h2{ font-size:22px; }
  .repair-list{ grid-template-columns:1fr; }
  .flow-detail li{ grid-template-columns:48px minmax(0,1fr); gap:20px; }
  .step-num{ width:48px; height:52px; font-size:27px; }
  .flow-detail li::before{ top:52px; left:23px; }
  .flow-detail h2{ font-size:22px; margin-top:4px; }
  .company-table{ grid-template-columns:1fr; }
  .company-table dt{ padding:14px 18px 0; border-bottom:0; background:transparent; }
  .company-table dd{ padding:8px 18px 18px; }
  .contact-box{ padding:24px 18px; }
  .contact-number{ font-size:clamp(28px,8vw,42px); }
  .contact-box h2{ font-size:22px; }
  .contact-box .fax-number{ font-size:28px; }
  .cta{ padding:60px 0; }
  .cta .q{ font-size:22px; letter-spacing:.06em; }
  .cta .telbig{ font-size:clamp(30px,8.5vw,48px); letter-spacing:.01em; }
  .cta .telbig::before{ margin-right:7px; }
  .cta .sub{ font-size:13px; }
  .site-foot .fnav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
  .callbar{ gap:8px; font-size:14px; letter-spacing:0; padding:14px 10px; bottom:max(12px,env(safe-area-inset-bottom)); white-space:nowrap; }
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}