/* 継手建築設計室 v2 — 図面集型。各章＝1枚の図面シート。左に図面リスト、右下に表題欄 */
:root{
  --paper:#FCFCFA; --white:#fff; --blue:#2B4C7E; --blue-d:#1B3154; --ink:#1E1E1E; --cedar:#D9C7A8; --cedar-l:#F1EADC; --line:#C9CFD8; --grey:#6B7480;
  --jp:"Zen Kaku Gothic New",sans-serif; --latin:"Manrope",sans-serif; --hand:"Zen Kurenaido","Zen Kaku Gothic New",sans-serif;
  --rail:232px; --pad:max(clamp(20px,4.5vw,72px),calc((100vw - var(--rail) - 1560px) / 2)); --top:0px; /* 広い画面では中身を1560pxに収める */
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.9 var(--jp);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
figure{margin:0} p{margin:0} a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.4}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
.num{font-family:var(--latin);font-weight:500;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blue);color:#fff;padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}

/* 生成アイコン：白→透過のPNGを mask にして currentColor で塗る */
.ico{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico--arrow{--m:url(../img/icon-arrow.png)} .ico--x{--m:url(../img/icon-close.png)}
.ico--list{--m:url(../img/icon-list.png)} .ico--cal{--m:url(../img/icon-calendar.png)}

/* ===== 左の図面リスト ===== */
.rail{position:fixed;z-index:30;inset:0 auto 0 0;width:var(--rail);padding:28px 24px;display:flex;flex-direction:column;background:var(--paper);border-right:1px solid var(--line)}
.rail__mark{display:flex;gap:12px;align-items:flex-start;font-size:17px;font-weight:500;line-height:1.5;letter-spacing:.12em;text-decoration:none}
.rail__sym{flex:none;width:30px;height:18px;margin-top:5px;color:var(--blue);background:currentColor;-webkit-mask:url(../img/mark.png) center/contain no-repeat;mask:url(../img/mark.png) center/contain no-repeat}
.rail__h{margin-top:44px;font:600 12px var(--latin);letter-spacing:.18em;color:var(--blue)}
.rail__h span{display:block;font:400 12px var(--jp);letter-spacing:.1em;color:var(--grey);margin-top:2px}
.rail__nav{margin-top:12px;border-top:1px solid var(--line)}
.rail__nav a{display:grid;grid-template-columns:48px 1fr;align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-size:13px;text-decoration:none;color:var(--grey);transition:color .2s,padding .3s var(--ease)}
.rail__nav a .num{font-size:12px;color:var(--blue)}
.rail__nav a:hover{color:var(--ink)}
.rail__nav a.is-active{color:var(--ink);font-weight:500;padding-left:10px;box-shadow:inset 3px 0 0 var(--blue)}
.rail__foot{margin-top:auto;font-size:12px;line-height:1.8;color:var(--grey)}
.rail__close,.top{display:none}

main,.foot{margin-left:var(--rail)}

/* ===== 図面シートの共通（見出し＝表題） ===== */
.sh{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:8px 28px;padding-bottom:20px;border-bottom:1px solid currentColor;margin-bottom:clamp(36px,5vw,72px)}
.sh__no{font-size:14px;letter-spacing:.14em;color:var(--blue);border:1px solid currentColor;padding:4px 10px}
.sh h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:.12em}
.sh h2 span{display:block;font-size:14px;font-weight:400;letter-spacing:.08em;color:var(--grey);margin-top:8px}
section{position:relative}
.scale,.house,.works,.cost,.process,.people,.faq,.visit{padding:clamp(88px,10vw,150px) var(--pad)}

/* 写真：3:2の矩形＋写真番号。角に図面の目印 */
.ph{position:relative}
.ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ph::before{content:attr(data-p);position:absolute;z-index:2;left:0;top:0;padding:3px 9px;background:var(--paper);font:500 11px var(--latin);letter-spacing:.12em;color:var(--blue)}
.ph::after{content:"";position:absolute;right:-7px;bottom:-7px;width:22px;height:22px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue);pointer-events:none}
.ph figcaption{margin-top:12px;font-size:13px;color:var(--grey)}

/* 出現（監視する要素そのものに付ける） */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.is-in{opacity:1;transform:none}

/* ===== A-00 表紙：方眼の白紙 ===== */
.cover{min-height:100svh;padding:clamp(40px,6vh,72px) var(--pad) 96px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(rgba(201,207,216,.34) 1px,transparent 1px) 0 0/100% 40px,linear-gradient(90deg,rgba(201,207,216,.34) 1px,transparent 1px) 0 0/40px 100%,var(--paper)}
.cover__eyebrow{font-size:13px;letter-spacing:.16em;color:var(--blue)}
.cover h1{font-size:clamp(44px,7.4vw,112px);letter-spacing:.16em;margin-top:14px;white-space:nowrap}
.cover__rule{height:18px;margin-top:clamp(16px,2.4vw,32px);border-bottom:1.5px solid var(--blue);
  background:linear-gradient(90deg,var(--blue) 1.5px,transparent 1.5px) 0 100%/25% 18px repeat-x,linear-gradient(90deg,var(--blue) 1px,transparent 1px) 0 100%/5% 8px repeat-x;
  border-right:1.5px solid var(--blue);transform-origin:left}
.cover__ph{position:relative;margin:clamp(40px,4vw,56px) 44px 0 0}
.cover__ph img{width:100%;height:clamp(220px,35vh,460px);object-fit:cover;object-position:center 58%}
/* 寸法線（写真の上と右）。数字は data 属性から */
.dimmed::before{content:attr(data-w);position:absolute;left:0;right:0;top:-30px;height:22px;border-bottom:1px solid var(--blue);border-left:1px solid var(--blue);border-right:1px solid var(--blue);font:500 12px/12px var(--latin);letter-spacing:.1em;color:var(--blue);text-align:center}
.dimmed::after{content:attr(data-h);position:absolute;top:0;bottom:0;right:-30px;width:22px;border-left:1px solid var(--blue);border-top:1px solid var(--blue);border-bottom:1px solid var(--blue);font:500 12px/12px var(--latin);letter-spacing:.1em;color:var(--blue);writing-mode:vertical-rl;text-align:center;padding-left:8px}
.cover__foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-top:36px}
.cover__lede{max-width:30em}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.facts div{padding:12px 0 0;border-left:1px solid var(--line);padding-left:14px}
.facts div:first-child{border-left:0;padding-left:0}
.facts dt{font-size:12px;color:var(--grey)}
.facts dd{font-size:14px}
.facts .num{font-size:clamp(26px,2.6vw,38px);font-weight:300;margin-right:3px}
/* 入り：線が引かれる→見出し→写真 */
.js .cover__rule{transform:scaleX(0);transition:transform 1.6s var(--ease)}
.js .cover h1,.js .cover__eyebrow{opacity:0;transition:opacity 1s .5s}
.js .cover__ph,.js .cover__foot{opacity:0;transform:translateY(20px);transition:opacity 1s 1.1s,transform 1s 1.1s var(--ease)}
@keyframes failsafe{to{opacity:1;transform:none}}
.js .cover__rule,.js .cover h1,.js .cover__eyebrow,.js .cover__ph,.js .cover__foot{animation:failsafe .6s 4s forwards} /* JSが読めなくても4秒後には必ず見える */
.js .is-loaded .cover__rule{transform:none}
.js .is-loaded .cover h1,.js .is-loaded .cover__eyebrow{opacity:1}
.js .is-loaded .cover__ph,.js .is-loaded .cover__foot{opacity:1;transform:none}

/* ===== A-01 設計の順番（署名） ===== */
.scale__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}
.board{position:sticky;top:calc(var(--top) + 32px)}
.board__stage{position:relative;aspect-ratio:6/5;background:var(--white);border:1px solid var(--line);overflow:hidden}
.board__cap{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;letter-spacing:.14em;color:var(--blue)}
.board__step{font-family:var(--jp);letter-spacing:.2em}
/* 線の長さは pathLength=1。JSは --p（0〜1）だけを渡し、層ごとの進みはCSSで計算する */
.plan{position:absolute;inset:0;width:100%;height:100%;padding:3%}
.plan .ly{--lp:clamp(0,calc((var(--p) - var(--a)) / var(--w)),1)}
.plan [data-ly="0"]{--a:0;--w:.16} .plan [data-ly="1"]{--a:.16;--w:.14} .plan [data-ly="2"]{--a:.30;--w:.14}
.plan [data-ly="3"]{--a:.44;--w:.12} .plan [data-ly="4"]{--a:.56;--w:.10} .plan [data-ly="5"]{--a:.66;--w:.10}
.plan path{fill:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lp))}
.plan .dash{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:.004 .003;stroke-dashoffset:0;opacity:var(--lp)}
.plan .thin{stroke:var(--blue);stroke-width:1.5}
.plan .wall{stroke:var(--ink);stroke-width:9}
.plan .part{stroke:var(--ink);stroke-width:4}
.plan .open{stroke:var(--blue);stroke-width:2}
.plan .mask{fill:var(--white);stroke:none;stroke-dasharray:none;opacity:clamp(0,calc(var(--lp) * 20),1)}
.plan .furn{stroke:var(--grey);stroke-width:2}
.plan .dim{stroke:var(--blue);stroke-width:1.5}
.plan text{opacity:clamp(0,calc((var(--lp) - .6) * 10),1)}
.plan .lbl{fill:var(--blue);font:500 30px var(--latin);letter-spacing:.1em}
.plan .room{fill:var(--ink);font:400 34px var(--jp);text-anchor:middle;letter-spacing:.1em}
.plan .num{fill:var(--blue);font:500 34px var(--latin)}
.plan .num--v{writing-mode:vertical-rl}
.board__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:clamp(0,calc((var(--p,0) - .84) / .16),1)}
.board__stage{--p:0}
.chapters{display:grid;gap:clamp(96px,22vh,220px);padding-bottom:12vh}
.ch__scale{font-size:13px;letter-spacing:.16em;color:var(--blue)}
.ch h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:.14em;margin:8px 0 18px}
.ch .ph{margin-top:28px}
.spec{display:flex;gap:40px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.spec dt{font-size:12px;color:var(--grey)}
.spec dd{font-size:13px}.spec .num{font-size:30px;font-weight:300;margin-right:3px}

/* ===== 全幅写真 ===== */
.wide{height:min(86svh,820px);overflow:hidden;color:#fff}
.wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(20,24,30,.62))}
.wide p{position:absolute;z-index:2;left:var(--pad);bottom:clamp(40px,7vw,96px);font-size:clamp(24px,3vw,44px);font-weight:300;letter-spacing:.14em;line-height:1.6}

/* ===== A-02 一軒を読む（白い図面シート） ===== */
.house{background:var(--white)}
.house__lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px 72px;align-items:start}
.house__lead>p{font-size:17px;max-width:26em}
.table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.table div{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.table dt{font-size:12px;color:var(--grey)}
.table dd{font-size:15px}.table .num{font-size:26px;font-weight:300;margin-right:3px}
.draw{position:relative;display:grid;gap:24px clamp(24px,4vw,64px);margin-top:clamp(64px,8vw,120px)}
.draw__stage{position:relative;border:1px solid var(--line);background:var(--paper)}
.draw__stage img{width:100%}
.draw__name{font-size:12px;letter-spacing:.14em;color:var(--blue)}
.draw--section{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:start}
.pins li{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--blue);color:#fff;font:600 13px/26px var(--latin);text-align:center}
.notes{counter-reset:n;margin-top:14px;border-top:1px solid var(--ink)}
.notes li{counter-increment:n;position:relative;padding:13px 0 13px 40px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7}
.notes li::before{content:counter(n);position:absolute;left:0;top:14px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font:600 12px/24px var(--latin);text-align:center}
.draw--joint{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center}
.draw--joint .draw__stage{order:2}
.draw--joint h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:.12em;margin:10px 0 14px}
/* 余白の書き込み（住む人の言葉）。青鉛筆の手書き */
.memo{font:400 clamp(17px,1.5vw,21px)/1.7 var(--hand);color:var(--blue);transform:rotate(-2deg);max-width:17em}
.memo span{display:block;font-size:13px;margin-top:4px;opacity:.8}
.memo--a{grid-column:1;justify-self:end;margin:4px 4% 0 0}
.memo--c{margin-top:28px;transform:rotate(1.5deg)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(20px,3vw,44px);margin-top:clamp(72px,9vw,130px);align-items:start}
.gallery .ph--l{grid-column:span 7}.gallery .ph--s{grid-column:span 5}
.gallery .ph:nth-of-type(2){margin-top:clamp(40px,6vw,96px)}
.gallery .memo--b{grid-column:1/5;align-self:center;justify-self:center}
.gallery .ph:nth-of-type(3){grid-column:5/9}
.gallery .ph:nth-of-type(4){grid-column:1/-1}
.gallery .ph:nth-of-type(4) img{aspect-ratio:21/9}

/* ===== A-03 比べる（杉色） ===== */
.works{background:var(--cedar-l)}
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;min-width:940px;border-collapse:collapse;table-layout:fixed}
.cmp th,.cmp td{padding:14px 14px;border-bottom:1px solid rgba(30,30,30,.16);text-align:left;vertical-align:top;font-size:14px;font-weight:400;line-height:1.6}
.cmp thead th{padding:0 14px 16px;border-bottom:1px solid var(--ink)}
.cmp thead th:first-child,.cmp tbody th{width:84px;padding-left:0;font-size:12px;color:var(--grey);position:sticky;left:0;background:var(--cedar-l);z-index:2}
.cmp thead img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:12px}
.cmp thead b{display:block;font-size:16px;font-weight:500;letter-spacing:.06em}
.cmp small{display:block;font-size:12px;color:var(--grey)}
.cmp td .num{font-size:22px;font-weight:300;margin-right:2px}
.cmp td+td,.cmp thead th+th{border-left:1px solid rgba(30,30,30,.1)}
.works__note{margin-top:24px;font-size:14px;color:var(--grey)}
.works__note a,.faq details a{display:inline-block;color:var(--blue);padding:11px 6px;margin:-11px 0}

/* ===== A-04 費用（青焼き＝青地に白い線） ===== */
.cost{background:var(--blue);color:#F3F6FA;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:40px 40px}
.cost .sh__no,.cost .sh h2 span{color:#C9D6EA}
.cost__total{font-size:20px;letter-spacing:.1em}
.cost__total .num{font-size:clamp(72px,11vw,168px);font-weight:300;line-height:1;letter-spacing:-.01em;margin-right:10px}
.bar{display:flex;height:34px;margin-top:28px;border:1.5px solid #fff}
.bar span{flex:0 0 calc(var(--w) * 1%);border-right:1.5px solid #fff}
.bar span:last-child{border-right:0}
.bar span:nth-child(1){background:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 1.5px,transparent 1.5px 9px)}
.bar span:nth-child(2){background:repeating-linear-gradient(-45deg,rgba(255,255,255,.55) 0 1.5px,transparent 1.5px 6px)}
.bar span:nth-child(3){background:rgba(255,255,255,.28)}
.bd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px}
.bd div{position:relative;padding:0 0 0 30px;min-width:0}
.bd div::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border:1.5px solid #fff}
.bd div:nth-child(1)::before{background:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 1.5px,transparent 1.5px 9px)}
.bd div:nth-child(2)::before{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.55) 0 1.5px,transparent 1.5px 6px)}
.bd div:nth-child(3)::before{background:rgba(255,255,255,.28)}
.bd dt{font-size:13px;color:#C9D6EA}
.bd dd{font-size:13px}.bd dd>.num{font-size:clamp(20px,2.2vw,30px);font-weight:300;margin-right:2px}
.bd small{display:block;font-size:12px;line-height:1.6;color:#C9D6EA;margin-top:4px}
.cost__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 72px;margin-top:clamp(56px,7vw,96px)}
.cost__cols h3{font-size:14px;font-weight:500;letter-spacing:.14em;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.6)}
.cost__cols li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:15px}
.cost__cols ol{counter-reset:c}.cost__cols ol li{counter-increment:c;display:flex;gap:12px}
.cost__cols ol li::before{content:counter(c);font:500 13px/1.9 var(--latin);opacity:.7;padding-top:3px}
.cost__note{margin-top:36px;font-size:13px;color:#C9D6EA;max-width:44em}

/* ===== A-05 工程表 ===== */
.gantt{--c:13;position:relative;padding-left:170px}
.gantt__months{display:grid;grid-template-columns:repeat(12,1fr) 0;font-size:13px;color:var(--blue);border-bottom:1px solid var(--ink);padding-bottom:8px}
.gantt__months li{transform:translateX(-.3em)}
.gantt__rows{background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/calc(100% / 12) 100%;border-right:1px solid var(--line)}
.gantt__rows li{position:relative;height:52px;border-bottom:1px solid var(--line)}
.gantt__rows b{position:absolute;left:-170px;top:0;width:160px;line-height:52px;font-size:14px;font-weight:400}
.gantt__rows span{position:absolute;top:18px;height:16px;left:calc(var(--s) / 12 * 100%);width:calc((var(--e) - var(--s)) / 12 * 100%);background:var(--blue)}
.gantt__rows .is-point span{width:16px;margin-left:-8px;transform:rotate(45deg);background:var(--ink)}
.gantt__unit{margin-top:10px;font-size:12px;color:var(--grey);text-align:right}
.sites__h{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(64px,8vw,112px);padding-bottom:12px;border-bottom:1px solid var(--ink);font-size:20px;letter-spacing:.12em}
.sites__h .num{font-size:12px;color:var(--blue)}
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:36px}
.sites h4{font-size:18px;font-weight:500;letter-spacing:.08em;margin-top:18px}
.sites li>p{font-size:14px;color:var(--grey)}
.prog{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:14px}
.prog span{height:8px;border:1px solid var(--blue)}
.prog .on{background:var(--blue)}
.prog__l{display:flex;justify-content:space-between;margin-top:6px;font-size:13px!important;color:var(--ink)!important}
.prog__l .num{color:var(--blue)}

/* ===== A-06 人（墨地） ===== */
.people{background:var(--ink);color:#EDEBE6}
.people .sh__no{color:var(--cedar)}.people .sh h2 span{color:#A9A59C}
.people .ph::before{background:var(--ink);color:var(--cedar)}
.people .ph::after{border-color:var(--cedar)}
.people__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(20px,3vw,44px);align-items:center}
.pg-a{grid-column:1/8}.pg-b{grid-column:8/13}
.pg-c{grid-column:6/13;grid-row:2}.pg-d{grid-column:1/6;grid-row:2}
.pg-e{grid-column:1/7}.pg-f{grid-column:7/13;margin-top:clamp(40px,6vw,96px)}
.who__role{font-size:13px;letter-spacing:.14em;color:var(--cedar)}
.who h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:.16em;margin:8px 0 16px}
.who p:last-child{color:#CFCBC2}
.crew{margin-top:14px;border-top:1px solid rgba(255,255,255,.4)}
.crew li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.crew b{font-size:18px;font-weight:400;letter-spacing:.14em}
.crew span{font-size:13px;color:#A9A59C}.crew .num{color:#EDEBE6;margin:0 2px}

/* ===== A-07 FAQ ===== */
.faq__list{max-width:980px;margin-left:auto;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:12px 0;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:18px;height:18px;flex:none;background:linear-gradient(var(--blue),var(--blue)) center/100% 1.5px no-repeat,linear-gradient(var(--blue),var(--blue)) center/1.5px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 26px;max-width:38em;color:#3a3f47}

/* ===== A-08 見学・相談（杉色） ===== */
.visit{background:var(--cedar-l);padding-bottom:clamp(120px,14vw,200px)}
.visit__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(24px,3vw,48px);align-items:start}
.visit__a{grid-column:1/7}.visit__ph{grid-column:7/13}
.draw--site{grid-column:1/8;margin-top:0;display:block}
.draw--site figcaption{margin-top:10px;font-size:12px;letter-spacing:.14em;color:var(--blue)}
.visit__b{grid-column:8/13}
.visit h3{font-size:14px;font-weight:500;letter-spacing:.14em;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.dates li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid rgba(30,30,30,.16)}
.dates time{font-size:26px;font-weight:300;color:var(--blue);line-height:1.3}
.dates small{font:400 12px var(--jp);margin-left:6px}
.dates p{font-size:14px;color:#3a3f47}.dates b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:64px;margin-top:28px;padding:0 32px;background:var(--blue);color:#fff;font-size:17px;letter-spacing:.14em;transition:background .25s}
.btn:hover{background:var(--blue-d)}
.btn .ico{width:20px;height:20px}
.visit__msg{min-height:1.9em;margin-top:10px;font-weight:500;color:var(--blue)}
.visit__small{font-size:13px;color:var(--grey)}
.labels li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:2px 8px;background:var(--paper);border:1px solid var(--blue);font-size:12px;color:var(--blue);white-space:nowrap}
.drive{width:100%;border-collapse:collapse}
.drive th,.drive td{padding:13px 0;border-bottom:1px solid rgba(30,30,30,.16);font-size:15px;font-weight:400;text-align:left}
.drive td{text-align:right}.drive .num{font-size:24px;font-weight:300;margin:0 2px}
.info{margin-top:28px}
.info div{display:grid;grid-template-columns:4em 1fr;padding:9px 0;font-size:14px}
.info dt{color:var(--grey)}

/* ===== フッター（濃紺） ===== */
.foot{background:var(--blue-d);color:#DDE4EF;padding:clamp(72px,8vw,120px) var(--pad) 120px}
.foot__mark{display:flex;gap:14px;align-items:center;font-size:20px;font-weight:500;letter-spacing:.16em}
.foot .rail__sym{color:#fff;margin:0}
.foot__catch{font-size:clamp(30px,4.4vw,64px);font-weight:300;letter-spacing:.16em;margin-top:28px}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.3)}
.foot nav a{display:block;padding:10px 0;font-size:14px;text-decoration:none}
.foot nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.foot__cols p{font-size:14px;padding:3px 0}
.foot__note{margin-top:56px;max-width:52em;font-size:13px;color:#A9B6CB}
.foot__copy{margin-top:16px;font-size:12px;color:#A9B6CB;letter-spacing:.08em}

/* ===== 表題欄（右下に固定。CTAを兼ねる） ===== */
.tb{position:fixed;z-index:40;right:0;bottom:0;display:flex;background:var(--paper);border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink);transition:transform .5s var(--ease)}
.tb__c{display:flex;flex-direction:column;justify-content:center;min-width:92px;padding:8px 16px;border-right:1px solid var(--ink);font-size:14px;line-height:1.35;color:var(--ink)}
.tb__c small{font-size:12px;letter-spacing:.1em;color:var(--grey)}
.tb__c--name{min-width:168px}
.tb__cta{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 24px;background:var(--blue);color:#fff;font-size:15px;letter-spacing:.12em;text-decoration:none;transition:background .25s}
.tb__cta:hover{background:var(--blue-d)}
.tb__cta .ico{width:18px;height:18px}
.tb.is-hidden{transform:translateY(110%)}

/* ===== 1180px以下：図面リストは引き出しに、上の帯を出す ===== */
@media (max-width:1180px){
  :root{--rail:0px;--top:calc(60px + env(safe-area-inset-top,0px))}
  .top{display:flex;position:fixed;z-index:35;inset:0 0 auto;height:var(--top);padding-top:env(safe-area-inset-top,0px);align-items:center;gap:10px;padding:0 0 0 var(--pad);background:rgba(252,252,250,.94);border-bottom:1px solid var(--line)}
  .top__mark{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:.1em;text-decoration:none;margin-right:auto;min-height:44px}
  .top__mark .rail__sym{margin:0;width:26px;height:16px}
  .top__list{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line);font-size:13px;color:var(--blue)}
  .top__list .ico{width:18px;height:18px}
  .top__cta{display:flex;align-items:center;height:60px;padding:0 18px;background:var(--blue);color:#fff;font-size:14px;letter-spacing:.1em;text-decoration:none}
  .rail{width:min(340px,88vw);padding-top:calc(28px + env(safe-area-inset-top,0px));transform:translateX(-102%);transition:transform .45s var(--ease);z-index:50;box-shadow:0 0 0 100vmax rgba(20,24,30,0);overflow:auto}
  .rail.is-open{transform:none;box-shadow:0 0 0 100vmax rgba(20,24,30,.45)}
  .rail.is-open ~ .rail__close{display:grid;place-items:center;position:fixed;z-index:51;top:calc(10px + env(safe-area-inset-top,0px));left:min(352px,calc(88vw + 12px));width:44px;height:44px;border-radius:50%;background:var(--paper)}
  .rail__close .ico{width:16px;height:16px}
  .tb{display:none}
  .cover{padding-top:calc(var(--top) + 40px)}
}
@media (max-width:900px){
  .cover{min-height:0;padding-bottom:64px}
  .cover h1{font-size:clamp(34px,10.4vw,72px);letter-spacing:.1em}
  .cover__ph{margin-right:34px}
  .cover__ph img{height:auto;aspect-ratio:3/2}
  .cover__foot{grid-template-columns:1fr}
  .facts .num{font-size:26px}
  .sh{grid-template-columns:1fr}.sh__no{justify-self:start}
  /* 平面図は上に貼り付き、章が下を流れる */
  .scale__inner{grid-template-columns:1fr;gap:28px}
  .board{top:var(--top);z-index:5;background:var(--paper);padding:10px 0 8px;margin:0 calc(var(--pad) * -1);padding-inline:var(--pad);border-bottom:1px solid var(--line)}
  .board__stage{aspect-ratio:auto;height:36svh}
  .chapters{gap:72px;padding-bottom:0}
  .wide{height:68svh}
  .house__lead{grid-template-columns:1fr}
  .table{grid-template-columns:repeat(2,minmax(0,1fr))}
  .draw--section,.draw--joint{grid-template-columns:1fr}
  .draw--joint .draw__stage{order:0}
  .memo--a{justify-self:start;margin:0}
  .gallery{grid-template-columns:1fr;gap:36px}
  .gallery>*{grid-column:1/-1!important;margin-top:0!important}
  .gallery .ph:nth-of-type(4) img{aspect-ratio:3/2}
  .gallery .memo--b{justify-self:start}
  .bd{grid-template-columns:1fr 1fr;gap:8px 16px}
  .cost__cols{grid-template-columns:1fr}
  /* 工程表：縦の年表に差し替え */
  .gantt{padding-left:0}
  .gantt__months,.gantt__unit{display:none}
  .gantt__rows{background:none;border:0;border-left:1.5px solid var(--blue);margin-left:6px}
  .gantt__rows li{height:auto;padding:0 0 22px 22px;border:0}
  .gantt__rows li::before{content:"";position:absolute;left:-6px;top:9px;width:10px;height:10px;background:var(--blue)}
  .gantt__rows .is-point::before{background:var(--ink);transform:rotate(45deg)}
  .gantt__rows b{position:static;display:block;width:auto;line-height:1.6;font-size:16px}
  .gantt__rows span{position:static;display:block;width:auto!important;height:auto;background:none!important;transform:none!important;margin:0!important;font:500 13px var(--latin);color:var(--blue)}
  .gantt__rows span::after{content:var(--t)}
  .sites{grid-template-columns:1fr}
  .people__grid{grid-template-columns:1fr;gap:32px}
  .people__grid>*{grid-column:1/-1!important;grid-row:auto!important;margin-top:0!important}
  .visit__grid{grid-template-columns:1fr}
  .visit__grid>*{grid-column:1/-1!important}
  .foot__cols{grid-template-columns:1fr}
  .labels li{font-size:12px;padding:1px 5px}
  .pins li{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:12px;line-height:22px}
}
@media (max-width:560px){
  .top__mark{font-size:0;gap:0}.top__mark .rail__sym{width:32px;height:20px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .dates li{grid-template-columns:80px 1fr}
  .btn{width:100%;justify-content:center;padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .cover h1,.js .cover__eyebrow,.js .cover__ph,.js .cover__foot{opacity:1;transform:none}
  .js .cover__rule{transform:none}
  .board__stage{--p:1!important}
}