:root{--ink:#111;--muted:#777;--hair:#dededb;--paper:#fff;--ground:#f6f6f3;--ui:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--latin:"Manrope","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);font-synthesis:none;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit}
.site-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px clamp(18px,4vw,54px);border-bottom:1px solid rgba(17,17,17,.06);background:rgba(246,246,243,.91);backdrop-filter:blur(14px)}
.wordmark{font:750 11px/1 var(--latin);letter-spacing:.14em;text-decoration:none}
.head-actions{display:flex;align-items:center;gap:22px}
.back-link{color:#777;font-size:11px;text-underline-offset:4px;text-decoration-color:#bbb}
.lang{display:flex;gap:5px;color:#aaa;font:700 9px/1 var(--latin);letter-spacing:.06em}
.lang a{text-decoration:none}.lang a[aria-current="page"]{color:#111}
main{overflow:hidden}
.hero{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:clamp(68px,9vw,116px) 0 clamp(58px,7vw,88px)}
.hero-copy{max-width:760px;margin:0 auto;text-align:center}
.eyebrow,.section-kicker{margin:0 0 20px;color:#898989;font:650 10px/1.4 var(--latin);letter-spacing:.13em}
.spec-logo{display:block;width:min(100%,490px);height:auto;margin:0 auto 30px}
h1{margin:0 0 25px;font-size:clamp(29px,4vw,54px);font-weight:500;line-height:1.28;letter-spacing:-.045em;font-feature-settings:"palt" 1;text-wrap:balance}
.lead{max-width:650px;margin:0 auto;color:#666;font-size:clamp(14px,1.35vw,17px);line-height:2;text-wrap:balance}
.sample-section{background:#fff;border-top:1px solid #ececea;border-bottom:1px solid #ececea;padding:clamp(66px,8vw,112px) 20px}
.sample-wrap{width:min(1120px,100%);margin:0 auto}
.sample-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:46px}
.sample-head h2,.contents h2,.make h2{margin:0;font-size:clamp(28px,3.7vw,50px);font-weight:500;line-height:1.15;letter-spacing:-.04em}
.sample-note{margin:0;color:#777;font-size:13px;line-height:1.8;white-space:pre-line}
.sample-workspace{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(480px,1.18fr);gap:30px;align-items:start;min-width:0}
.sheet-panel,.sample-board{min-width:0;border:1px solid #dedede;background:#fff}.sample-board{overflow:hidden}
.sheet-label{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #dedede;color:#858585;font:650 9px/1.4 var(--latin);letter-spacing:.1em}
.sheet-slot{display:grid;place-items:center;aspect-ratio:1/1;padding:18px;background:#fff}.sheet-slot svg{display:block;width:100%;height:100%}
.fallback-sheet{position:relative;width:100%;height:100%;border:1px solid #e1e1e1;background-image:linear-gradient(#e4e6e7 1px,transparent 1px),linear-gradient(90deg,#e4e6e7 1px,transparent 1px);background-size:12.5% 12.5%;overflow:hidden}.fallback-sheet:before{content:"SUKI SHEET";position:absolute;left:6%;top:43%;font:750 clamp(22px,3vw,40px)/1 var(--latin);letter-spacing:-.04em}.fallback-sheet:after{content:"SAMPLE";position:absolute;right:7%;bottom:7%;font:700 9px/1 var(--latin);letter-spacing:.12em;color:#888}
.sample-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-bottom:1px solid #dedede;color:#777;font:650 9px/1.4 var(--latin);letter-spacing:.11em}
.sample-bar strong{color:#111;font-weight:700}
.category-nav{display:flex;gap:8px;overflow:auto;padding:15px 18px;border-bottom:1px solid #e6e6e6;scrollbar-width:none}.category-nav::-webkit-scrollbar{display:none}
.category-nav button{appearance:none;flex:0 0 auto;border:1px solid #d7d7d7;background:#fff;border-radius:999px;padding:8px 12px;color:#696969;font:650 8px/1 var(--latin);letter-spacing:.07em;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.category-nav button:hover{border-color:#929292;background:#fafafa;color:#111}.category-nav button[aria-selected="true"]{border-color:#111;background:#111;color:#fff}.category-nav button:focus-visible{outline:2px solid #111;outline-offset:2px}
.sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.value-row{position:relative;min-height:126px;padding:25px 24px 21px;border-bottom:1px solid #e5e5e5}
.value-row:nth-child(odd){border-right:1px solid #e5e5e5}
.value-row small{display:block;color:#858585;font-size:11px;margin-bottom:12px}
.value-row strong{display:block;font:500 clamp(20px,2.6vw,31px)/1.2 var(--latin);letter-spacing:-.025em}
.value-row em{display:block;margin-top:9px;color:#aaa;font:400 10px/1.5 var(--latin);font-style:normal}
.value-row.color{padding-left:46px}.value-row.color:before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:var(--sample-color,#0b0606)}.value-row.color strong{font-size:24px}.value-row.color span{display:block;margin-top:5px;font:450 12px/1.5 var(--latin)}
.contents{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:clamp(78px,9vw,126px) 0}
.contents-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;margin-bottom:56px}.contents-intro p{max-width:550px;margin:0;color:#6f6f6f;font-size:14px;line-height:1.9}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #dcdcdc;border-left:1px solid #dcdcdc}
.category{min-height:140px;padding:23px 20px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}
.category b{display:block;font:700 10px/1 var(--latin);letter-spacing:.1em}.category span{display:block;margin-top:26px;color:#777;font-size:12px;line-height:1.65}
.make{background:#111;color:#fff;padding:clamp(82px,10vw,136px) 20px;text-align:center}
.make-inner{width:min(720px,100%);margin:0 auto}.make .section-kicker{color:#919191}.make h2{font-size:clamp(32px,5vw,60px)}
.make-copy{margin:25px auto 0;max-width:560px;color:#b7b7b7;font-size:14px;line-height:1.85}
.price{margin:38px 0 0;font:500 clamp(32px,4vw,48px)/1 var(--latin);letter-spacing:-.035em}.price small{font-size:11px;color:#aaa;letter-spacing:.04em;margin-left:5px}
.buy,.start-sheet{display:inline-flex;align-items:center;justify-content:center;min-height:58px;margin-top:25px;border-radius:999px;padding:16px 34px;font-size:14px;font-weight:650;letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .18s,box-shadow .18s}
.buy{border:0;background:#fff;color:#111;box-shadow:0 16px 38px rgba(0,0,0,.28)}.buy:hover,.start-sheet:hover{transform:translateY(-2px)}
.start-sheet{border:1px solid #555;background:transparent;color:#fff}
.terms{margin:16px 0 0;color:#898989;font:500 10px/1.6 var(--latin);letter-spacing:.035em}
.payment-note{max-width:520px;margin:20px auto 0;color:#858585;font-size:11px;line-height:1.75}.checkout-message{min-height:1.6em;margin:12px 0 0;color:#b7b7b7;font-size:12px}.buy:disabled{cursor:wait;opacity:.62;transform:none}.paid-only{display:none}
.legal-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:15px 0 0;color:#a5a5a5;font-size:11px;line-height:1.7}.legal-links a{text-underline-offset:4px;text-decoration-color:#666}.legal-links a:hover{color:#fff}
.result-only,.no-result-only{display:none}.has-result .result-only,.no-result .no-result-only{display:block}.has-result .paid-only{display:none}.has-result.is-paid .unpaid-only{display:none}.has-result.is-paid .paid-only{display:block}
.site-foot{display:flex;justify-content:space-between;gap:20px;padding:25px clamp(18px,4vw,54px);color:#888;font:600 9px/1.4 var(--latin);letter-spacing:.08em}.site-foot span:last-child{display:flex;gap:12px;flex-wrap:wrap}.site-foot a{text-underline-offset:4px;text-decoration-color:#bbb}
dialog{width:min(480px,calc(100% - 34px));border:0;border-radius:14px;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(0,0,0,.38);backdrop-filter:blur(3px)}
.dialog-inner{padding:32px}.dialog-inner h2{margin:0 0 14px;font-size:21px;font-weight:600}.dialog-inner p{margin:0;color:#666;font-size:13px;line-height:1.8}.dialog-close{width:100%;margin-top:24px;border:1px solid #ddd;border-radius:999px;background:#fff;padding:12px;cursor:pointer}
@media(max-width:900px){.sample-workspace{grid-template-columns:1fr}.sheet-panel{width:min(620px,100%);margin:0 auto}.sample-head,.contents-intro{grid-template-columns:1fr;gap:22px}.category-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.site-head{padding:14px 16px}.back-link{display:none}.hero{width:min(100% - 32px,620px);padding-top:48px}.sample-section{padding-left:16px;padding-right:16px}.sample-grid{grid-template-columns:1fr}.value-row:nth-child(odd){border-right:0}.sample-bar{align-items:flex-start;flex-direction:column;gap:6px}.sheet-slot{padding:10px}.category-grid{grid-template-columns:1fr 1fr}.category{min-height:126px;padding:20px 16px}.contents{width:min(100% - 32px,620px)}.site-foot{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.buy,.start-sheet{transition:none}}