@charset "UTF-8";
:root{--char:#252521;--orange:#f05a24;--paper:#f3f0e7;--sand:#d8cdb6;--line:#716e63}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--char);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.7}a{color:inherit}img{display:block;max-width:100%}button,input{font:inherit}:focus-visible{outline:3px solid #1b56a7;outline-offset:4px}.skip{position:absolute;top:-100px;left:1rem;z-index:10;background:#fff;padding:.7rem}.skip:focus{top:1rem}.sample-alert{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 3vw;background:var(--orange);color:#fff;font:800 .65rem Arial,sans-serif;letter-spacing:.12em}.header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 3vw;min-height:92px;border-bottom:3px solid var(--char)}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-size:1.5rem;font-weight:900;letter-spacing:-.04em}.brand-roof{display:grid;place-items:center;width:52px;height:52px;background:var(--char);color:var(--orange);font:900 3rem/1 Impact,sans-serif;transform:skewX(-18deg)}.brand small{display:block;font:800 .43em Arial,sans-serif;letter-spacing:.16em}.header nav{display:flex;gap:2.5rem}.header nav a,.back-list{text-decoration:none;font-size:.74rem;font-weight:800}.header nav a:hover,.back-list:hover{color:var(--orange)}.hero{position:relative;display:grid;grid-template-columns:53% 47%;min-height:760px;overflow:hidden;background:var(--char);color:var(--paper)}.hero-copy{position:relative;z-index:2;padding:5rem 4vw 6rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.serial,.hero-bottom,.hero-photo>span,.cut-heading>span,.cut-caption>span,.notice-heading>span,.notice-image>span,.prepare-heading>span,.demo-side>span,.demo-side small,.closing>span,footer{font-family:Arial,sans-serif;letter-spacing:.13em}.serial{font-size:.72rem;color:var(--orange);border-top:2px solid var(--orange);padding-top:.7rem}.hero h1{font-family:Impact,"Arial Black","Hiragino Kaku Gothic ProN",sans-serif;font-size:clamp(5rem,10vw,12rem);font-weight:900;line-height:.95;letter-spacing:-.1em;margin:2.5rem 0 1.6rem}.hero h1 span{color:var(--orange)}.hero-statement{font-size:clamp(1.25rem,2vw,2rem);font-weight:900;margin:0}.hero-lead{max-width:33rem;line-height:1.85}.start-link{display:flex;justify-content:space-between;gap:4rem;min-width:250px;border:2px solid var(--orange);padding:1rem;margin-top:1.6rem;text-decoration:none;font-weight:900}.start-link:hover{background:var(--orange)}.hero-bottom{position:absolute;left:4vw;right:4vw;bottom:1.5rem;display:flex;justify-content:space-between;font-size:.65rem}.hero-photo{position:relative;overflow:hidden;clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);margin-left:-15%;width:115%}.hero-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(.7)}.hero-photo>span{position:absolute;right:2rem;bottom:2rem;background:var(--char);padding:.5rem;color:white;font-size:.6rem}.hero-diagonal{position:absolute;width:90px;height:120%;top:-10%;left:48%;z-index:1;transform:skewX(-16deg);border-left:10px solid var(--orange);pointer-events:none}.section-cut{background:var(--orange);color:var(--char);padding:7rem 4vw}.cut-heading{display:grid;grid-template-columns:20% 1fr 25%;gap:2rem;align-items:end;margin-bottom:4rem}.cut-heading>span{font-size:.7rem;font-weight:800}.cut-heading h2,.notice-heading h2,.prepare-heading h2,.closing h2{font-family:Impact,"Arial Black","Hiragino Kaku Gothic ProN",sans-serif;font-size:clamp(3.8rem,6vw,7rem);line-height:1.06;letter-spacing:-.07em;margin:0}.cut-heading p{font-size:.88rem;line-height:1.8}.cut-workbench{background:var(--paper);padding:clamp(1rem,3vw,3rem);border:4px solid var(--char);box-shadow:18px 18px 0 #9e3e1f}.cut-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.cut-tabs button{background:transparent;color:var(--char);border:2px solid var(--char);padding:.65rem 1.4rem;font-weight:900;cursor:pointer}.cut-tabs button[aria-pressed=true]{background:var(--char);color:var(--paper)}.roof-drawing{position:relative;height:480px;overflow:hidden;margin:2rem 0;background:repeating-linear-gradient(0deg,transparent 0 38px,#c9c7bd 39px 40px),repeating-linear-gradient(90deg,transparent 0 38px,#c9c7bd 39px 40px);border:1px solid var(--line);isolation:isolate}.roof-layer{position:absolute;left:10%;width:82%;height:130px;clip-path:polygon(0 80%,50% 0,100% 80%,100% 100%,50% 20%,0 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.8rem;transition:transform .7s,filter .7s,opacity .7s}.roof-layer span{font:800 .65rem Arial,sans-serif;letter-spacing:.14em;z-index:2}.roof-layer.surface{top:30px;background:var(--orange);color:white}.roof-layer.underlay{top:133px;background:#be9e69;color:var(--char)}.roof-layer.inside{top:236px;background:#434847;color:white}.roof-drawing[data-active=surface] .underlay,.roof-drawing[data-active=surface] .inside,.roof-drawing[data-active=underlay] .surface,.roof-drawing[data-active=underlay] .inside,.roof-drawing[data-active=inside] .surface,.roof-drawing[data-active=inside] .underlay{filter:grayscale(1);opacity:.46}.roof-drawing[data-active=underlay] .underlay,.roof-drawing[data-active=inside] .inside,.roof-drawing[data-active=surface] .surface{transform:translateY(-18px) scale(1.04)}.roof-axis{position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed #555;z-index:-1}.cut-caption{display:flex;justify-content:space-between;gap:2rem;border-top:2px solid var(--char);padding-top:1rem}.cut-caption>span{font-size:.65rem}.cut-caption p{max-width:36rem;margin:0}.notice-section{background:var(--paper);display:grid;grid-template-columns:41% 1fr;gap:0;overflow:hidden}.notice-heading{padding:6rem 4vw;background:#ded7c5}.notice-heading>span{font-size:.7rem;color:var(--orange)}.notice-heading h2{margin:2rem 0}.notice-heading h2 em{font-style:normal;color:var(--orange)}.notice-heading p{max-width:28rem}.notice-rows{padding:6rem 4vw}.notice-rows article{display:grid;grid-template-columns:60px 1fr;gap:.5rem 1rem;padding:1.5rem 0;border-bottom:2px solid var(--char)}.notice-rows article:first-child{border-top:2px solid var(--char)}.notice-rows b{grid-row:1/3;font:900 2rem Impact,sans-serif;color:var(--orange)}.notice-rows h3{margin:0;font-size:1.35rem}.notice-rows p{grid-column:2;margin:0;font-size:.88rem}.notice-image{grid-column:1/3;position:relative;height:540px;clip-path:polygon(0 0,100% 12%,100% 100%,0 88%);margin:0 0 4rem}.notice-image img{width:100%;height:100%;object-fit:cover}.notice-image>span{position:absolute;left:4vw;bottom:3rem;background:var(--orange);color:#fff;padding:.6rem;font-size:.65rem}.prepare{padding:7rem 4vw;background:#2c2e2b;color:var(--paper)}.prepare-heading{display:grid;grid-template-columns:20% 1fr 25%;gap:2rem;align-items:start;margin-bottom:4rem}.prepare-heading>span{font-size:.7rem;color:var(--orange)}.prepare-heading h2{max-width:760px}.prepare-heading p{font-size:.86rem;line-height:1.8}.prepare-heading .safety{grid-column:3;margin:0;color:#ffd1bd;border-top:2px solid var(--orange);padding-top:.7rem}.demo{display:grid;grid-template-columns:28% 1fr;max-width:1280px;margin:auto;background:var(--paper);color:var(--char);border:3px solid var(--orange)}.demo-side{display:flex;flex-direction:column;justify-content:space-between;min-height:600px;padding:3rem 2vw;background:var(--orange);color:#fff;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}.demo-side>span,.demo-side small{font-size:.7rem}.demo-side p{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2.5rem,3.7vw,5rem);line-height:1.15}.demo form{padding:clamp(1.5rem,3vw,3rem)}.progress{font:800 .73rem Arial,sans-serif;letter-spacing:.14em;border-bottom:2px solid var(--char);padding-bottom:1rem;margin-bottom:2rem}.progress span{font-size:2rem;color:var(--orange)}.step[hidden],.progress[hidden],#error[hidden],#back[hidden],#next[hidden]{display:none}.step fieldset{border:0;padding:0;margin:0}.step legend,.step h3{font-size:clamp(1.5rem,2.4vw,2.3rem);font-weight:900}.hint{font-size:.83rem}.step label{display:block;position:relative;margin:.7rem 0}.step label input{position:absolute;opacity:0}.step label span{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #9c9b92;padding:1rem;cursor:pointer;transition:background .2s,transform .2s}.step label b{font-weight:900}.step label small{font-size:.75rem}.step label input:checked+span{background:#f3b497;transform:translateX(6px)}.step label input:focus-visible+span{outline:3px solid #1b56a7}#summary div,#done-summary div{display:grid;grid-template-columns:120px 1fr;gap:1rem;border-bottom:1px solid #999;padding:.7rem 0}#summary dt,#done-summary dt{font-weight:900}#summary dd,#done-summary dd{margin:0}.guidance{padding:1rem;background:#e8d6c6}.error{color:#a41c11;font-weight:900}.controls{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}.controls button{border:2px solid var(--char);background:transparent;color:var(--char);padding:.75rem 1.1rem;cursor:pointer;font-weight:900}.controls .next{background:var(--orange);border-color:var(--orange);color:white}.controls .restart{border:0;text-decoration:underline}.controls button:hover{background:var(--char);color:white}.closing{background:var(--orange);padding:8rem 4vw;min-height:580px}.closing>span{font-size:.7rem}.closing h2{font-size:clamp(5rem,10vw,11rem);margin:2rem 0}.closing p{max-width:42rem;line-height:1.85}.closing a{display:inline-block;margin-top:2rem;border-bottom:2px solid var(--char);text-decoration:none;font-weight:900}footer{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem 3vw;font-size:.7rem}footer a{text-decoration:none}
@media(max-width:1000px){.header nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{min-height:650px}.hero-photo{height:480px;margin:0;width:100%;clip-path:polygon(0 0,100% 12%,100% 100%,0 88%)}.hero-diagonal{display:none}.cut-heading,.prepare-heading{grid-template-columns:1fr}.prepare-heading .safety{grid-column:1}.notice-section{grid-template-columns:1fr}.notice-image{grid-column:1}.demo{grid-template-columns:1fr}.demo-side{clip-path:none;min-height:auto;display:block;padding:1rem}.demo-side p,.demo-side small{display:none}}
@media(max-width:600px){.sample-alert{font-size:.53rem}.sample-alert span:last-child{display:none}.header{min-height:72px}.brand{font-size:1.05rem}.brand-roof{width:38px;height:38px;font-size:2rem}.back-list{font-size:.59rem}.hero-copy{min-height:620px;padding:4rem 5vw 5rem}.hero h1{font-size:clamp(5rem,22vw,8rem)}.hero-bottom{left:5vw;right:5vw}.hero-photo{height:350px}.section-cut,.prepare{padding:5rem 5vw}.cut-heading h2,.notice-heading h2,.prepare-heading h2{font-size:clamp(3.3rem,12vw,5rem)}.cut-workbench{box-shadow:8px 8px 0 #9e3e1f}.cut-tabs button{flex:1;padding:.65rem .3rem;font-size:.7rem}.roof-drawing{height:320px}.roof-layer{height:90px}.roof-layer.surface{top:25px}.roof-layer.underlay{top:100px}.roof-layer.inside{top:175px}.roof-layer span{font-size:.5rem}.cut-caption{display:block}.cut-caption p{margin-top:.8rem}.notice-heading,.notice-rows{padding:5rem 5vw}.notice-image{height:320px}.demo form{padding:1.2rem}.step label span{flex-direction:column;gap:.2rem}.closing{padding:6rem 5vw}.closing h2{font-size:clamp(4rem,15vw,7rem)}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.roof-layer,.step label span{transition:none}}

/* 日本語の行頭禁則と短い最終行を抑える */
h1,h2,h3{line-break:strict;text-wrap:balance}p{line-break:strict;text-wrap:pretty}

/* The repair scene fills the cover; the heading sits in a dark left-side field. */
.hero{display:flex;align-items:flex-end;min-height:700px}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#171814f2 0%,#171814d9 34%,#17181446 63%,transparent 100%);pointer-events:none}
.hero-copy{z-index:2;width:min(58%,750px);min-height:700px;padding:4rem 4vw 4.5rem;justify-content:flex-end}
.hero h1{font-size:clamp(5rem,9vw,9rem);margin:1rem 0}
.hero-statement{font-size:clamp(1.25rem,2vw,1.8rem)}
.hero-lead{max-width:31rem}
.hero-bottom{position:static;width:100%;margin-top:2.4rem}
.hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;clip-path:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:contrast(1.02) saturate(.88)}
.hero-photo>span{z-index:2;right:1.5rem;bottom:1.5rem}
.hero-diagonal{display:none}
@media(max-width:1000px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .hero:before{display:none}
  .hero-photo{position:relative;inset:auto;order:-1;height:clamp(320px,45vw,440px);width:100%;clip-path:none}
  .hero-copy{width:100%;min-height:0;justify-content:flex-start;padding:2.5rem 5vw 3rem;border-top:8px solid var(--orange)}
  .hero h1{font-size:clamp(4.7rem,10vw,7rem);margin:1rem 0}
  .hero-bottom{margin-top:2rem}
}
@media(max-width:600px){
  .hero-photo{height:305px}
  .hero-photo img{object-position:55% center}
  .hero-photo>span{right:.6rem;bottom:.6rem;font-size:.53rem}
  .hero-copy{padding:1.5rem 5vw 2.5rem}
  .hero h1{font-size:clamp(4.4rem,17vw,6rem);margin:.7rem 0}
  .hero-statement{font-size:1.2rem}
  .hero-lead{font-size:.88rem;line-height:1.65}
  .start-link{margin-top:1rem}
  .hero-bottom{margin-top:1.5rem}
}

/* Keep the repair work above a separate typographic base, unlike the photo-overlay covers. */
@media(min-width:1001px){
  .hero{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;min-height:calc(100svh - 120px);background:#22231e}
  .hero:before{display:none}
  .hero-photo{position:relative;grid-row:1;height:clamp(340px,49vh,540px);width:100%}
  .hero-photo img{object-position:center 47%}
  .hero-copy{grid-row:2;width:100%;min-height:0;display:grid;grid-template-columns:minmax(330px,.86fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:3vw;row-gap:.35rem;align-items:center;padding:1.2rem 4vw 1.6rem;background:#20211d;border-top:8px solid var(--orange)}
  .hero-copy .serial{grid-column:1;grid-row:1;margin:0}
  .hero-copy h1{grid-column:1;grid-row:2;font-size:clamp(4.8rem,7.7vw,8rem);line-height:1;margin:.1rem 0}
  .hero-copy .hero-statement{grid-column:2;grid-row:1;margin:0}
  .hero-copy .hero-lead{grid-column:2;grid-row:2;margin:0;max-width:42rem}
  .hero-copy .start-link{grid-column:2;grid-row:3;margin:.2rem 0 0;max-width:20rem}
  .hero-copy .hero-bottom{grid-column:1;grid-row:3;margin:.3rem 0 0}
}
@media(max-width:1000px){.hero h1{font-size:clamp(4rem,10vw,6.8rem);letter-spacing:-.07em}}
@media(max-width:600px){.hero h1{font-size:clamp(3.6rem,15vw,5.5rem);margin:.5rem 0}.hero-copy{padding-top:1.35rem}}