/* XOPアセットケア v2 — 仕上げ層（site.css の上に重ねる）
 * 方針：紙と夜の明暗はそのまま。12列の編集グリッド、文節で折る日本語、
 *       写真は比率を固定して「置く」、動きは一度だけ静かに。 */

:root{
  --grid-gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --t-display: clamp(2.3rem, 1.1rem + 4.6vw, 5rem);
  --t-h2: clamp(1.7rem, 1.15rem + 2.1vw, 3rem);
  --t-h3: clamp(1.15rem, 1.02rem + .5vw, 1.4rem);
  --t-idx: .78rem;
  --radius: 2px;
  --shadow-1: 0 1px 0 color-mix(in oklab,var(--ink) 8%,transparent);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 日本語の組版 ---------- */
/* BudouX が文節境界に <wbr> を入れる。keep-all と組み合わせて、語の途中で折らない */
h1,h2,h3,.lede,.t,summary,.hero p,.statement,.sec-lede,figcaption,.card__d,.d{
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
h1,h2,h3,.statement{text-wrap:balance}
p,li,dd{text-wrap:pretty}
body{font-feature-settings:"palt" 1;letter-spacing:.02em}
h1,h2,h3{font-feature-settings:"palt" 1;letter-spacing:.04em}
/* 見出しの明示改行は、文節で折れるようになったので狭い画面では外す */
@media (max-width:720px){ h1 br,h2 br,.hero p br{display:none} }

/* ---------- ナビ ---------- */
.nav{padding:.9rem clamp(1rem,.5rem + 2vw,2.5rem);
  background:color-mix(in oklab,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid color-mix(in oklab,var(--ink) 10%,transparent)}
.nav__links{align-items:center;gap:.2rem 1.6rem;font-size:.86rem;letter-spacing:.06em}
.nav__links a[href="./contact.html"]{border:1px solid var(--ink);padding:.45rem 1rem;
  background:var(--ink);color:var(--paper);background-image:none;border-radius:var(--radius)}
.nav__links a[href="./contact.html"]:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.nav__links a[href="./contact.html"][aria-current=page]{color:var(--paper)}
.mnav{display:none}
@media (max-width:900px){
  .nav{flex-direction:row;align-items:center;padding:.7rem 1rem}
  .nav__links{display:none}
  .mnav{display:block}
  .mnav > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;
    font-size:.84rem;letter-spacing:.08em;padding:.5rem .2rem}
  .mnav > summary::-webkit-details-marker{display:none}
  .mnav__icon{width:20px;height:10px;position:relative}
  .mnav__icon::before,.mnav__icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
    transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
  .mnav__icon::before{top:0}.mnav__icon::after{top:8px}
  .mnav[open] .mnav__icon::before{top:4px;transform:rotate(45deg)}
  .mnav[open] .mnav__icon::after{top:4px;transform:rotate(-45deg)}
  .mnav__panel{position:fixed;inset:var(--nav-h,56px) 0 0 0;background:var(--paper);
    padding:1.5rem 1.25rem 3rem;overflow:auto;display:flex;flex-direction:column;
    animation:fadein .28s var(--ease-out)}
  .mnav__panel a{display:flex;justify-content:space-between;align-items:baseline;
    padding:1rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
    font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:.06em}
  .mnav__panel a span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);font-weight:400}
  .mnav__panel a[aria-current=page]{color:var(--accent-strong)}
  .mnav__panel .cta-solid{margin-top:1.5rem;justify-content:center;font-family:var(--font-body);font-size:1rem}
  .mnav__tel{margin-top:1rem;font-size:.9rem;color:var(--ink-mute)}
}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- ボタン ---------- */
.cta-solid{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;font-weight:500;
  letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:1rem 1.6rem;border-radius:var(--radius);
  transition:background-color .25s var(--ease-out),gap .25s var(--ease-out)}
.cta-solid::after{content:"";width:1.4em;height:1px;background:currentColor;transition:width .25s var(--ease-out)}
.cta-solid:hover{background:var(--accent-strong);gap:1.1rem}
.cta-solid:hover::after{width:2em}
.band--deep .cta-solid,.close .cta-solid,.hero .cta-solid{background:var(--on-deep);color:var(--deep)}
.band--deep .cta-solid:hover,.close .cta-solid:hover,.hero .cta-solid:hover{background:var(--accent-on-deep)}
.link-arrow{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-size:.92rem;
  letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:.2rem}
.link-arrow::after{content:"→";transition:transform .25s var(--ease-out)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- 編集グリッド ---------- */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.wrap{max-width:84rem;padding-inline:clamp(1rem,.5rem + 2vw,2.5rem)}
.sec{padding:clamp(4.5rem,3rem + 6vw,9rem) 0}
.sec--tight{padding:clamp(3rem,2rem + 4vw,6rem) 0}
.sec--sink{background:var(--paper-sink)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);
  margin-bottom:clamp(2rem,1.4rem + 2.4vw,4rem);align-items:start}
.sec-head__meta{grid-column:1 / span 3;display:flex;gap:1rem;align-items:baseline;padding-top:.55rem}
.sec-head__body{grid-column:4 / span 9}
.idx{font-family:var(--font-mono);font-size:var(--t-idx);letter-spacing:.12em;color:var(--ink-mute);margin:0}
.sec-head .label{margin:0}
.sec-head h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);line-height:1.38;margin:0;max-width:18em}
.sec-lede{margin:1.2rem 0 0;max-width:34em;color:var(--ink-mute);font-size:1.02rem;line-height:2}
.band--deep .sec-lede,.band--deep .idx{color:var(--on-deep-mute)}
@media (max-width:900px){
  .sec-head__meta,.sec-head__body{grid-column:1 / -1}
  .sec-head__meta{padding-top:0}
}

/* ---------- HERO ---------- */
.hero{min-height:min(94svh,880px);align-items:end}
.hero__img{transform:scale(1.06);animation:settle 2.4s var(--ease-soft) .1s forwards}
@keyframes settle{to{transform:scale(1)}}
.hero::after{background:
  linear-gradient(to top,color-mix(in oklab,var(--deep) 92%,transparent) 0%,
    color-mix(in oklab,var(--deep) 55%,transparent) 38%,color-mix(in oklab,var(--deep) 8%,transparent) 72%,transparent 100%),
  linear-gradient(to right,color-mix(in oklab,var(--deep) 55%,transparent) 0%,transparent 60%)}
.hero__body{max-width:84rem;padding:0 clamp(1rem,.5rem + 2vw,2.5rem) clamp(2.5rem,2rem + 3vw,5rem);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end}
.hero__body > *{grid-column:1 / span 9}
.hero__body > h1{grid-column:1 / -1}
.hero h1{font-size:var(--t-display);line-height:1.22;letter-spacing:.04em;margin-top:1.2rem;width:auto}
.hero p.hero__sub{font-size:clamp(1rem,.95rem + .3vw,1.18rem);line-height:2.05;max-width:30em;margin-top:1.6rem;color:var(--on-deep)}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:2.2rem}
.hero__actions .link-arrow{color:var(--on-deep)}
.hero__v{position:absolute;right:clamp(1rem,.5rem + 2vw,2.5rem);top:clamp(5rem,4rem + 4vw,8rem);z-index:1;
  writing-mode:vertical-rl;font-family:var(--font-display);font-size:.95rem;letter-spacing:.5em;
  color:var(--on-deep-mute);margin:0;animation:rise var(--dur) var(--ease-out) .5s both}
.hero__scroll{position:absolute;right:clamp(1rem,.5rem + 2vw,2.5rem);bottom:clamp(2.5rem,2rem + 3vw,5rem);z-index:1;
  width:1px;height:64px;background:color-mix(in oklab,var(--on-deep) 30%,transparent);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;left:0;top:-30%;width:1px;height:30%;background:var(--on-deep);
  animation:drip 2.2s var(--ease-soft) infinite}
@keyframes drip{to{top:100%}}
@media (max-width:900px){
  .hero{min-height:min(88svh,720px)}
  .hero__body > *{grid-column:1 / -1}
  .hero__v,.hero__scroll{display:none}
}
/* 下層ページの小さめヒーロー */
.hero--page{min-height:min(64svh,560px)}
.hero--page h1{font-size:var(--t-huge)}

/* ---------- 困りごとカード ---------- */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,1rem + 2vw,3rem) var(--grid-gap)}
@media (max-width:900px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tcards{grid-template-columns:minmax(0,1fr)}}
.tcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tcard__fig{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--paper-sink);border-radius:var(--radius)}
.tcard__fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-soft)}
.tcard:hover .tcard__fig img{transform:scale(1.045)}
.tcard__n{font-family:var(--font-mono);font-size:var(--t-idx);letter-spacing:.12em;color:var(--ink-mute);margin:1.1rem 0 0}
.tcard__t{font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);line-height:1.5;margin:.35rem 0 0;
  display:flex;justify-content:space-between;gap:1rem}
.tcard__t::after{content:"→";font-family:var(--font-body);font-weight:400;color:var(--accent-strong);
  transition:transform .25s var(--ease-out);flex:none}
.tcard:hover .tcard__t::after{transform:translateX(4px)}
.tcard__d{margin:.5rem 0 0;font-size:.92rem;color:var(--ink-mute);line-height:1.9}

/* ---------- 3段（見極める・洗う・記録する） ---------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);counter-reset:f}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr);gap:3rem}}
.flow__item{margin:0}
.flow__fig{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}
.flow__fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.flow__fig{aspect-ratio:3/2}}
.flow__n{display:flex;align-items:baseline;gap:.9rem;margin:1.4rem 0 0}
.flow__n b{font-family:var(--font-display);font-weight:500;font-size:2.6rem;line-height:1;color:var(--accent-on-deep)}
.flow__n span{font-size:var(--t-label);letter-spacing:.14em;color:var(--on-deep-mute)}
.flow__t{font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);line-height:1.55;margin:.8rem 0 0;color:var(--on-deep)}
.flow__d{margin:.6rem 0 0;font-size:.94rem;color:var(--on-deep-mute);line-height:1.95}

/* ---------- 施工前・施工後の比較スライダー ---------- */
.ba{position:relative;max-width:46rem;aspect-ratio:601/431;overflow:hidden;border-radius:var(--radius);
  background:var(--paper-sink);user-select:none;touch-action:pan-y;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--paper-lift);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 20%,transparent)}
.ba__knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:var(--paper-lift);display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.25);
  font-size:.8rem;color:var(--ink);letter-spacing:-.1em}
.ba__tag{position:absolute;top:1rem;font-size:.74rem;letter-spacing:.14em;padding:.3rem .6rem;
  background:color-mix(in oklab,var(--deep) 72%,transparent);color:var(--on-deep);border-radius:var(--radius)}
.ba__tag--b{left:1rem}.ba__tag--a{right:1rem}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:focus-within .ba__knob{outline:2px solid var(--accent);outline-offset:3px}
.no-js .ba__after{clip-path:none;opacity:0}
.ba-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end}
.ba-wrap .ba,.ba-wrap .bap{grid-column:1 / span 8}
.ba-wrap__cap{grid-column:9 / span 4}
@media (max-width:900px){.ba-wrap .ba,.ba-wrap .bap,.ba-wrap__cap{grid-column:1 / -1}}
.ba-wrap__cap dl{margin:0;border-top:1px solid var(--rule-strong)}
.ba-wrap__cap dl div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.ba-wrap__cap dt{font-size:var(--t-label);color:var(--ink-mute);letter-spacing:.06em}
.ba-wrap__cap dd{margin:0;font-size:.95rem}

/* ---------- できること・できないこと ---------- */
.can{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-strong)}
@media (max-width:900px){.can{grid-template-columns:minmax(0,1fr)}}
.can > div{padding:2rem clamp(0rem,1vw,1.5rem) 2rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:901px){.can > div + div{padding-left:clamp(1rem,.5rem + 1.5vw,2rem);border-left:1px solid var(--rule)}}
.can__mark{font-family:var(--font-display);font-size:2.4rem;line-height:1;margin:0;color:var(--accent-strong)}
.can > div:nth-child(2) .can__mark,.can > div:nth-child(3) .can__mark{color:var(--ink-mute)}
.can__l{font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-mute);margin:1.1rem 0 0}
.can__t{font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);line-height:1.55;margin:.4rem 0 0}
.can__d{margin:.7rem 0 0;font-size:.94rem;color:var(--ink-mute);line-height:1.95}

/* ---------- 左右2分割（写真＋文） ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:center}
.split__fig{grid-column:1 / span 6;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.split__fig img{width:100%;height:100%;object-fit:cover}
.split__body{grid-column:8 / span 5}
.split--rev .split__fig{grid-column:7 / span 6;order:2}
.split--rev .split__body{grid-column:1 / span 5}
@media (max-width:900px){.split__fig,.split__body,.split--rev .split__fig,.split--rev .split__body{grid-column:1 / -1;order:0}}
.split__body h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);line-height:1.4;margin:.6rem 0 0}
.split__body p{margin:1.2rem 0 0;line-height:2.05}
.note{margin-top:1.6rem;padding:1.1rem 1.2rem;border-left:2px solid var(--accent-strong);background:var(--paper-lift);
  font-size:.92rem;line-height:1.95;color:var(--ink-mute)}

/* ---------- 入口カード（写真つき） ---------- */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:900px){.doors{grid-template-columns:minmax(0,1fr)}}
.door{position:relative;display:block;text-decoration:none;color:var(--on-deep);aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--deep)}
@media (max-width:900px){.door{aspect-ratio:16/10}}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-soft)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in oklab,var(--deep) 88%,transparent),color-mix(in oklab,var(--deep) 10%,transparent) 65%)}
.door:hover img{transform:scale(1.05)}
.door__b{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.6rem}
.door__l{font-size:var(--t-label);letter-spacing:.12em;color:var(--accent-on-deep);margin:0}
.door__t{font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);margin:.4rem 0 0;line-height:1.5}
.door__d{font-size:.9rem;margin:.4rem 0 0;color:var(--on-deep-mute);line-height:1.85}

/* ---------- FAQ（2カラム） ---------- */
.faq2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.faq2__head{grid-column:1 / span 5}
.faq2__list{grid-column:7 / span 6}
@media (max-width:900px){.faq2__head,.faq2__list{grid-column:1 / -1}}
.faq2__head h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);line-height:1.4;margin:.6rem 0 1.4rem}
.faq details{padding:1.3rem 0}
.faq summary{font-size:1.08rem;line-height:1.7;align-items:flex-start}
.faq summary::after{margin-top:.55em;align-self:flex-start}
.faq details p{font-size:.96rem;line-height:2;margin-top:.8rem;max-width:40em}
.faq details[open] summary{color:var(--accent-strong)}

/* ---------- 下層ページの見出し ---------- */
.phead{padding:clamp(3.5rem,2.5rem + 5vw,8rem) 0 clamp(2rem,1.5rem + 2vw,3.5rem)}
.phead .g12 > *{grid-column:1 / span 9}
@media (max-width:900px){.phead .g12 > *{grid-column:1 / -1}}
.crumb{font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-mute);margin:0}
.crumb a{color:var(--accent-strong);text-decoration:none}
.phead h1{font-family:var(--font-display);font-weight:600;font-size:var(--t-huge);line-height:1.35;margin:1rem 0 0;letter-spacing:.04em}
.phead .lede{margin:1.4rem 0 0;max-width:32em;color:var(--ink-mute);font-size:var(--t-lede)}

/* ---------- 困りごとページ ---------- */
.tfig{margin:0;aspect-ratio:21/9;overflow:hidden;border-radius:var(--radius);background:var(--paper-sink)}
.tfig img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.tfig{aspect-ratio:4/3}}
.tfig + .figcap{font-size:var(--t-small);color:var(--ink-mute);margin:.7rem 0 0}
.tlayout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
.taside{grid-column:1 / span 3;position:sticky;top:6rem}
.tmain{grid-column:5 / span 8}
@media (max-width:900px){.taside{position:static;grid-column:1 / -1;order:2}.tmain{grid-column:1 / -1}}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:flex;gap:.8rem;padding:.7rem 0;text-decoration:none;font-size:.9rem}
.toc a span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);padding-top:.2rem}
.taside .cta-solid{margin-top:1.6rem;width:100%;justify-content:space-between}
.taside .quiet{margin-top:.8rem}
@media (max-width:900px){.toc{display:none}}
.tsec{margin:0 0 clamp(3.5rem,2.5rem + 3vw,6rem);scroll-margin-top:6rem}
.tsec:last-child{border-bottom:0;margin-bottom:0}
.tsec__n{font-family:var(--font-mono);font-size:var(--t-idx);letter-spacing:.12em;color:var(--ink-mute);margin:0}
.tsec h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);margin:.5rem 0 1.2rem;line-height:1.45}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:.85rem 0 .85rem 1.8rem;border-top:1px solid var(--rule);line-height:1.9}
.ticks li:last-child{border-bottom:1px solid var(--rule)}
.ticks li::before{content:"";position:absolute;left:0;top:1.55em;width:.9rem;height:1px;background:var(--accent-strong)}
.ticks--x li::before{background:var(--ink-mute);width:.7rem;transform:rotate(45deg)}
.ticks--x li::after{content:"";position:absolute;left:0;top:1.55em;width:.7rem;height:1px;background:var(--ink-mute);transform:rotate(-45deg)}

/* ---------- FAQページ ---------- */
.qnav{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.qnav li{border-bottom:1px solid var(--rule)}
.qnav a{display:block;padding:.7rem 0;text-decoration:none;font-size:.92rem}
.qgroup{scroll-margin-top:6rem;margin-bottom:clamp(2.5rem,2rem + 2vw,4.5rem)}
.qgroup h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);margin:0 0 .6rem}

/* ---------- 既存ページの写真の暴れを止める ---------- */
.plate--narrow{max-width:84rem}
.plate--narrow img{width:100%;aspect-ratio:21/9;object-fit:cover;max-height:70vh}
@media (max-width:720px){.plate--narrow img{aspect-ratio:4/3}}
.pair{max-width:60rem}
.pair img{border-radius:var(--radius)}
.band{padding:clamp(4rem,2.8rem + 5vw,8rem) 0}
.band--tight{padding:clamp(3rem,2rem + 3.5vw,5.5rem) 0}
.cards{border:0;background:none;gap:var(--grid-gap)}
.cards > div{border:1px solid var(--rule);border-radius:var(--radius);padding:1.6rem}
.band h2{font-size:var(--t-h2);line-height:1.4}

/* ---------- フッター ---------- */
.close{padding:clamp(5rem,3.5rem + 6vw,10rem) 0 2.5rem}
.close .wrap.col{max-width:84rem}
.close__cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end;
  padding-bottom:clamp(3rem,2rem + 4vw,6rem);border-bottom:1px solid color-mix(in oklab,var(--on-deep) 16%,transparent)}
.close__cta .statement{grid-column:1 / span 8;font-size:var(--t-h2);max-width:none}
.close__cta .acts{grid-column:9 / span 4;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.close__cta .acts .tel{color:var(--on-deep-mute);font-size:.92rem}
.close__cta .acts .tel b{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--on-deep);font-weight:500;letter-spacing:.06em}
@media (max-width:900px){.close__cta .statement,.close__cta .acts{grid-column:1 / -1}}
.close__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);padding-top:3rem}
.close__grid .close__id{grid-column:1 / span 5;margin:0}
.close__nav{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 2rem;align-content:start}
.close__nav a{text-decoration:none;color:var(--on-deep-mute);font-size:.9rem;padding:.35rem 0;border-bottom:1px solid color-mix(in oklab,var(--on-deep) 10%,transparent)}
.close__nav a:hover{color:var(--on-deep)}
@media (max-width:900px){.close__grid .close__id,.close__nav{grid-column:1 / -1}}
.close__copy{margin-top:3rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--on-deep-mute)}

/* ---------- 一度だけ、静かに出る ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .hero__img{animation:none;transform:none}
  .hero__scroll::after{animation:none}
}

.nb{white-space:nowrap}
@media (max-width:560px){.nb{white-space:normal}}

/* 施工前・施工後（角度が違う写真は並べて見せる。原板 601px を超えて引き伸ばさない） */
.bap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);max-width:calc(601px * 2 + var(--grid-gap))}
.bap figure{margin:0}
.bap img{width:100%;aspect-ratio:601/431;object-fit:cover;border-radius:var(--radius)}
.bap figcaption{margin-top:.8rem;font-size:.9rem;color:var(--ink-mute);line-height:1.8}
.bap figcaption span{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:.08em}
@media (max-width:560px){.bap{grid-template-columns:minmax(0,1fr)}}

/* 困りごとページの頭：文と写真を左右に（原板が小さい写真を引き伸ばさない） */
.thead{padding:clamp(3rem,2rem + 4vw,6.5rem) 0 clamp(1rem,.5rem + 2vw,3rem)}
.thead__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:end}
.thead__b{grid-column:1 / span 6}
.thead__fig{grid-column:8 / span 5;margin:0}
.thead__fig img{width:100%;max-width:640px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.thead__fig figcaption{font-size:var(--t-small);color:var(--ink-mute);margin-top:.7rem}
.thead h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.3rem + 2.4vw,3.4rem);line-height:1.38;margin:1rem 0 0;letter-spacing:.04em}
.thead .lede{margin:1.4rem 0 0;color:var(--ink-mute);max-width:28em}
@media (max-width:900px){.thead__b,.thead__fig{grid-column:1 / -1}}

/* 既存ページの .wrap.col は左端に寄っていた。グリッドの左端にそろえ、行長だけ絞る */
.wrap.col{max-width:84rem;margin-inline:auto}
.wrap.col > p:not(.statement):not(.label),.wrap.col > ul,.wrap.col > ol,.wrap.col > .spec{max-width:38em}
.wrap.col > h2:not(.statement){max-width:20em;width:auto}
.wrap.col.faq > details,.wrap.col.faq > h2{max-width:52rem}
.head{max-width:84rem}
.head h2{max-width:20em}
.plate--narrow img,.pair img{margin-inline:0}
.plate--narrow img{width:auto;height:auto;aspect-ratio:auto;max-height:none}
.plate figcaption{max-width:84rem}
.wrap.col:has(> .statement){max-width:84rem}
.statement{max-width:18em}
.form{max-width:44rem}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{padding:.85rem 1rem;border-color:color-mix(in oklab,var(--ink) 30%,transparent);background:var(--paper-lift);transition:border-color .2s}
.form input:hover,.form textarea:hover{border-color:var(--ink-mute)}
.form button{padding:1rem 2rem;letter-spacing:.08em}
.form legend{font-size:1.2rem;margin-bottom:.4rem}
/* backdrop-filter は fixed の基準を作るので、モバイルメニューのある幅では外す */
@media (max-width:900px){ .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)} }
.flow__n b{font-family:var(--font-mono);font-weight:400;font-size:1rem;letter-spacing:.12em}
.flow__n{gap:1rem;padding-top:1rem;border-top:1px solid color-mix(in oklab,var(--on-deep) 18%,transparent)}
.flow__n span{font-size:.95rem;letter-spacing:.2em;color:var(--on-deep)}
@media (max-width:560px){
  .hero h1{font-size:2.05rem;line-height:1.35}
  .sec-head h2{font-size:1.65rem}
}
/* トップの見出しは改行位置を決めて組む（均等割りで3行に崩さない） */
.hero h1{text-wrap:wrap}
@media (max-width:720px){ .hero h1 br{display:inline} }
@media (max-width:560px){
  .hero h1{font-size:min(7.6vw,2.1rem);letter-spacing:.02em}
  .nb{white-space:nowrap}
}

/* ---------- 署名のモチーフ：定点撮影の四隅の印（同じ場所・同じ角度で毎年撮る） ---------- */
.tcard__fig,.flow__fig,.split__fig,.door{position:relative}
.tcard__fig::after,.flow__fig::after,.split__fig::after{
  content:"";position:absolute;inset:12px;pointer-events:none;z-index:1;
  --c:color-mix(in oklab,#fff 82%,transparent);--l:16px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/1px var(--l) no-repeat;
  transition:inset .6s var(--ease-soft),opacity .6s var(--ease-soft);opacity:.85}
.tcard:hover .tcard__fig::after{inset:20px;opacity:1}
.hero--leftdark::after{background:
  linear-gradient(to right,color-mix(in oklab,var(--deep) 86%,transparent) 0%,color-mix(in oklab,var(--deep) 62%,transparent) 38%,transparent 70%),
  linear-gradient(to top,color-mix(in oklab,var(--deep) 90%,transparent) 0%,transparent 70%)}

/* ---------- 言語切替（明るいナビの上）---------- */
.nav .langsw{margin:0 0 0 1rem;font-size:.8rem;position:relative}
.nav .langsw > summary{border-color:color-mix(in oklab,var(--ink) 22%,transparent);color:var(--ink-mute);padding:.4rem .7rem}
.nav .langsw > summary:hover{color:var(--ink);border-color:var(--ink-mute)}
.nav .langsw__menu{right:0;left:auto}
.mnav__panel .langsw{margin-top:1.5rem;width:100%}
.mnav__panel .langsw > summary{width:100%;justify-content:space-between;color:var(--ink-mute);border-color:var(--rule-strong)}
.mnav__panel .langsw__menu{position:static;margin-top:.4rem;box-shadow:none}
.mnav__panel .langsw__menu a{font-family:var(--font-body);font-size:.95rem;padding:.6rem .8rem;border-bottom:0;display:block}
@media (max-width:900px){ .nav > .langsw{display:none} }
/* 各言語：見出しの字間を詰めすぎない／欧文は palt を外す */
html:not([lang=ja]) body,html:not([lang=ja]) h1,html:not([lang=ja]) h2,html:not([lang=ja]) h3{font-feature-settings:normal;letter-spacing:0}
html:not([lang=ja]):not([lang^=zh]) h1,html:not([lang=ja]):not([lang^=zh]) h2{word-break:normal;overflow-wrap:break-word;hyphens:auto}
/* 外国語：見出しは単語の途中で切らない。ヒーローの見出しはやや小さく */
html:not([lang=ja]) h1,html:not([lang=ja]) h2,html:not([lang=ja]) h3{hyphens:manual}
html:not([lang=ja]):not([lang^=zh]) .hero h1{font-size:clamp(2.1rem,1.1rem + 3.6vw,4.2rem);line-height:1.15}
html:not([lang=ja]) .nb{white-space:normal}
/* 明朝（Shippori）に無い字形を混ぜない：言語ごとに見出しの書体を替える */
html[lang=vi]{--font-display:Georgia,"Times New Roman","Noto Serif",serif}
html[lang=ko]{--font-display:"AppleMyungjo","Nanum Myeongjo","Noto Serif KR",serif}
html[lang=th]{--font-display:"Thonburi","Noto Sans Thai",sans-serif}
html[lang=ms],html[lang=id],html[lang=en]{--font-display:"Shippori Mincho",Georgia,serif}
.mnav__panel .langsw{margin:1.5rem 0 0;width:100%}

/* 困りごとページの要点（検索やAIが冒頭の答えとして読む） */
.answer{margin-top:1.6rem;padding:1.1rem 1.3rem;background:var(--paper-lift);border-left:3px solid var(--accent-strong);border-radius:var(--radius)}
.answer__l{margin:0;font-size:var(--t-label);letter-spacing:.12em;color:var(--accent-strong)}
.answer p:last-child{margin:.4rem 0 0;line-height:2;font-size:.98rem}