*{box-sizing:border-box}
:root{--ink:#20352d;--muted:#66716b;--paper:#fbfbf8;--line:#e2e6df;--green:#284d3e;--lime:#edf3e9;--ease:cubic-bezier(.22,1,.36,1)}
html{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
header{max-width:1180px;margin:auto;padding:19px 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-size:18px;font-weight:700;display:flex;gap:10px;align-items:center;letter-spacing:.02em}.brand span:last-child{font-size:12px;font-weight:500}.brand-icon{font-size:26px;font-weight:400}.test{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:2px 12px;border-radius:30px}
main{max-width:664px;margin:0 auto;min-height:76vh;padding:48px 28px 72px}main.is-home{max-width:1180px;padding:54px 36px 44px}.hero{display:flex;flex-direction:column;align-items:center;text-align:center}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--muted);margin:0 0 20px}.hero .eyebrow{order:0}.hero h1{order:1;font-size:clamp(36px,5.8vw,68px);letter-spacing:-.045em;line-height:1.3;margin:0 0 22px;color:#20352d}.hero h1 span{color:#4d6656}.hero-intro{order:2;font-size:17px;color:var(--muted);line-height:1.85;margin:0 0 26px}.hero>.primary{order:3;width:auto;min-width:228px;gap:36px;border-radius:40px;min-height:52px;padding:13px 25px}.hero>.micro{order:4;margin:13px 0 0}.entrance-visual{order:5;position:relative;width:100%;max-width:970px;margin:36px 0 0;overflow:hidden;border-radius:24px;background:#e7e8e2}.entrance-visual img{display:block;width:100%;height:auto;object-fit:cover}.entrance-visual figcaption{position:absolute;right:18px;bottom:14px;color:white;font-size:12px;text-shadow:0 1px 6px #000;padding:3px 10px;border-radius:20px;background:#0004}.hero>.footnote{order:6;margin:24px 0 0}h2{font-size:36px;line-height:1.45;letter-spacing:-.02em;font-weight:650;margin:0 0 20px}h3{font-size:20px;line-height:1.6;margin:0 0 14px;font-weight:600}p{margin:12px 0 22px}
button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #91704a;outline-offset:4px}h1:focus,h2:focus{outline:none}.primary{border:0;background:var(--green);color:#fff;padding:17px 24px;border-radius:16px;width:100%;font-weight:600;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 16px #2647330b}.primary>span{font-size:20px;font-weight:400}.micro,.footnote{font-size:12px;color:var(--muted);line-height:1.8}.micro{margin:12px 0}.footnote{margin-top:28px}.sub{color:var(--muted);font-size:16px}.progress{display:flex;align-items:center;gap:16px;margin-bottom:38px;color:var(--muted);font-size:12px}.track{height:3px;background:#e6e9e2;flex:1;border-radius:4px;overflow:hidden}.track i{display:block;height:100%;background:var(--green)}
.choices{display:grid;gap:12px;margin:26px 0 28px}.choice{width:100%;text-align:left;border:1px solid #dce2d9;border-radius:18px;background:#fff;padding:20px;display:flex;gap:16px;align-items:center;color:var(--ink);box-shadow:0 2px 6px #20352d02;line-height:1.65;font-weight:550}.choice:before{content:'';width:21px;height:21px;flex-shrink:0;border:1px solid #a8b4a7;border-radius:50%;background:#fff}.choice[aria-pressed=true]{background:#eff5ed;border-color:#45644b;box-shadow:0 0 0 1px #45644b}.choice[aria-pressed=true]:before{border:6px solid var(--green)}.choice small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:5px}.nav{display:flex;gap:18px;margin-top:30px}.back{border:0;background:none;color:var(--muted);padding:12px 6px;white-space:nowrap;font-size:14px}.hint{background:#f0f3ed;border-radius:16px;padding:18px 20px;font-size:14px;color:#526050;line-height:1.9}.group+.group{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}label{display:block;font-size:14px;margin:18px 0 8px}input[type=number],select{width:100%;min-width:0;margin-top:8px;padding:16px;border:1px solid #ccd5c9;background:#fff;border-radius:14px;color:var(--ink)}input[type=number]{font-size:25px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}input::placeholder{color:#98a093;font-size:19px}select{font-size:16px}.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.unit-note{font-size:14px;color:var(--muted);display:inline-block;margin:14px 0 0}.error{color:#a43a26;font-size:14px}.error:empty{display:none}.upload{border:1px dashed #b6c3b0;background:#f4f6ef;border-radius:16px;padding:22px;text-align:center}.upload input{width:100%;font-size:14px}.upload input::file-selector-button{font:inherit;border:0;border-radius:24px;background:white;color:var(--ink);padding:10px 18px;margin-right:12px;cursor:pointer}.photo{max-width:100%;max-height:330px;display:block;margin:18px auto;border-radius:12px}.smallbtn{border:1px solid #c8d2c3;background:transparent;padding:10px 16px;border-radius:12px;color:var(--ink);font-size:14px;min-height:44px;margin:8px 6px 8px 0}.guide{display:flex;gap:22px;background:#eef2e9;border-radius:20px;padding:22px;align-items:center;margin:28px 0}.guide svg{width:95px;height:130px;flex-shrink:0}.guide p{font-size:14px;margin:0}.measure-area{position:relative;margin-top:18px}.measure-area canvas{display:block;width:100%;height:auto;border-radius:14px;touch-action:manipulation;cursor:crosshair}.checkline{display:flex;gap:12px;align-items:flex-start;font-size:14px}.checkline input{margin-top:6px;width:20px;height:20px;flex-shrink:0;accent-color:var(--green)}.result-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:var(--lime);font-size:28px;margin-bottom:24px}.result-box{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;margin:26px 0;box-shadow:0 8px 28px #20352d03}.result-box p{margin:15px 0;font-size:16px}.result-box small{font-size:12px;color:var(--muted)}.result-box strong{font-size:22px;font-variant-numeric:tabular-nums}.result-box ul{padding-left:20px;font-size:15px}.result-box li+li{margin-top:16px}details{font-size:14px;margin-top:26px;color:var(--muted)}details a{color:var(--green)}summary{cursor:pointer;padding:8px 0}footer{max-width:1108px;border-top:1px solid var(--line);margin:auto;padding:24px 0;font-size:12px;letter-spacing:.05em;display:flex;justify-content:space-between;gap:18px;color:var(--muted)}
@media(min-width:850px){.hero h1 br{display:none}.entrance-visual{max-width:940px;max-height:560px}.entrance-visual img{margin-top:-18px}}
@media(max-width:600px){header{padding:15px 22px}.brand{font-size:16px;gap:7px}.brand span:last-child{font-size:12px}.test{padding:2px 9px}main{padding:32px 24px 46px}main.is-home{padding:34px 24px 28px}.hero h1{font-size:36px;line-height:1.38;letter-spacing:-.04em;margin-bottom:18px}.hero-intro{font-size:14px;margin-bottom:23px}.hero .eyebrow{margin-bottom:16px}.hero>.primary{min-width:218px}.entrance-visual{width:calc(100% + 16px);border-radius:20px;margin-top:26px;aspect-ratio:1.28}.entrance-visual img{width:100%;height:100%;object-fit:cover}.entrance-visual figcaption{bottom:8px;right:8px;font-size:12px}h2{font-size:30px}h3{font-size:19px}.progress{gap:12px;margin-bottom:30px}.choice{padding:18px 16px;gap:13px}.fields{gap:12px}.fields label{font-size:13px}input[type=number]{padding:14px;font-size:24px}.guide{gap:14px;padding:18px}.guide svg{width:76px;height:110px}.result-box{padding:22px}.nav{gap:14px}.nav .primary{padding:16px}.result-box strong{font-size:20px}footer{margin:0 24px;padding:22px 0;display:block}footer span{display:block;font-size:12px;margin-top:6px}}
@media(max-width:360px){.brand span:last-child{font-size:12px}.brand{gap:4px;font-size:14px}header{padding:14px 18px}main,main.is-home{padding-left:20px;padding-right:20px}.hero h1{font-size:32px}.fields{grid-template-columns:1fr}.nav{gap:8px}.nav .primary{font-size:14px}}
@media(hover:hover){.primary:not(:disabled):hover{background:#1c3f30;box-shadow:0 8px 24px #26473320;transform:translateY(-2px)}.choice:hover{border-color:#91a48d;transform:translateY(-2px);box-shadow:0 6px 22px #223e2d08}.smallbtn:hover{background:#edf2e8}.back:hover{color:var(--ink)}}
@media(prefers-reduced-motion:no-preference){button,input,select{transition:background .22s ease,border-color .22s ease,box-shadow .25s ease,transform .3s var(--ease),opacity .2s ease}.track i{transition:width .45s var(--ease)}.primary:active,.choice:active{transform:scale(.986)}.hero>h1,.hero-intro,.hero>.primary,.entrance-visual{animation:reveal .85s var(--ease) both}.hero-intro{animation-delay:.08s}.hero>.primary{animation-delay:.13s}.entrance-visual{animation-delay:.18s}@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}}

/* Official photograph: retain the complete composition and original colours. */
.entrance-visual{max-width:820px;max-height:none;aspect-ratio:auto;overflow:visible;border-radius:0;background:transparent;box-shadow:none}
.entrance-visual img{display:block;width:100%;height:auto;margin:0;object-fit:contain;border-radius:0}
.entrance-visual figcaption{position:static;background:transparent;padding:14px 0 0;color:var(--muted);text-align:right;font-size:12px;line-height:1.7}
.entrance-visual figcaption span{font-size:11px}
main[inert]{pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .choice{transition:background .3s,border-color .3s,box-shadow .3s,transform .4s var(--ease)}
 .choice:before{transition:border-width .25s var(--ease),border-color .25s}
 .result-icon{animation:result-arrive .8s var(--ease) both}
 @keyframes result-arrive{from{opacity:0;transform:scale(.72) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
}
@media(max-width:600px){.entrance-visual{width:100%;margin-top:30px}.entrance-visual figcaption{font-size:11px}}

.quote-builder{margin:34px 0;padding:30px;border-radius:24px;background:#edf3e9}.quote-builder h3{font-size:26px}.quote-builder summary{font-weight:600;color:var(--green);min-height:48px}.quote-builder input,.quote-builder textarea{display:block;width:100%;border:1px solid #cbd6cc;border-radius:12px;background:#fff;padding:14px;font:inherit;font-size:16px;color:var(--ink)}.quote-builder textarea{resize:vertical}.quote-builder .primary{margin-top:16px}
body.quote-open{overflow:hidden}#quote-preview{position:fixed;inset:0;z-index:1000;overflow:auto;background:#fff;overscroll-behavior:contain;color:#20352d}.quote-toolbar{max-width:800px;margin:auto;padding:20px 24px;background:#f5f7f3;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.quote-toolbar .primary{font-size:14px;min-height:44px;padding:10px 18px}.quote-toolbar p{width:100%;margin:0}.quote-toolbar .smallbtn{margin:0}
@media(max-width:600px){.quote-builder{padding:22px}.quote-toolbar{padding:16px}.quote-toolbar .primary{flex:1}}
@media print{body.quote-open{overflow:visible;background:#fff}body.quote-open> :not(#quote-preview){display:none!important}#quote-preview{position:static;overflow:visible;height:auto}.quote-toolbar{display:none!important}#quote-preview .quote-paper{padding:0;max-width:none}#quote-preview h2{font-size:17px}#quote-preview .quote-photos{break-before:page}}

.unit-note{font-size:20px;font-weight:700;color:var(--green);line-height:1.6;margin-top:18px}