/* ハンコポン: 色トークン → 余白 → 部品の順。紙のプリントとハンコの世界観 */
:root{--bg:#fff8ef;--paper:#fff;--ink:#2a2540;--muted:#645f80;--line:#eadfce;--coral:#ff5a6e;--coral-d:#e0364f;--sun:#ffc233;--mint:#12a589;--grape:#7a5af8;--sky:#e3f1ff;--tint:#fff0e0;--shadow:0 6px 0 rgba(42,37,64,.12);
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;--f-hand:"Klee One","UD デジタル 教科書体 N-R","Kyokasho ICA","Hiragino Mincho ProN","Yu Mincho",serif}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1a1830;--paper:#25223f;--ink:#f5f1ff;--muted:#b0acd0;--line:#3b3762;--sky:#223052;--tint:#2d2848;--shadow:0 6px 0 rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1a1830;--paper:#25223f;--ink:#f5f1ff;--muted:#b0acd0;--line:#3b3762;--sky:#223052;--tint:#2d2848;--shadow:0 6px 0 rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:500 16px/1.85 var(--f-body);color:var(--ink);background:var(--bg)}
a{color:inherit}
h1,h2,h3{text-wrap:balance;word-break:auto-phrase;line-height:1.4}
.wrap{max-width:1080px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
:focus-visible{outline:3px solid var(--grape);outline-offset:2px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:13px 24px;font:inherit;font-weight:900;cursor:pointer;text-decoration:none;background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-d);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--coral-d)}
.btn.white{background:var(--paper);color:var(--ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.mint{background:var(--mint);box-shadow:0 4px 0 #0c7d68}
.btn.sm{padding:8px 16px;font-size:.88rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ヘッダー */
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:2px dashed var(--line)}
.top-row{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.4rem;text-decoration:none;color:var(--coral);margin-right:auto}
.logo svg{width:32px;height:32px}
.nav{display:flex;gap:4px}.nav a{padding:6px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.92rem}.nav a:hover{background:var(--tint)}
.badge{background:var(--mint);color:#fff;font-weight:900;font-size:.8rem;padding:3px 12px;border-radius:999px}
.badge.t{background:var(--sun);color:#3a2d00}

/* ヒーロー */
.hero{display:grid;gap:30px;grid-template-columns:1.1fr .9fr;align-items:center;padding:54px 0 34px}
.eyebrow{display:inline-block;background:var(--sky);color:var(--grape);font-weight:900;font-size:.85rem;padding:5px 14px;border-radius:999px}
.hero h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:.45em 0 .35em;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--coral);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--sun) 55%,transparent) 62%)}
.hero p{max-width:34em;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:3px 14px;font-weight:700;font-size:.88rem}
.chips li::before{content:"✓ ";color:var(--mint)}
.hero-art{position:relative;min-height:340px}
.paper{position:absolute;inset:8% 6% 6% 4%;background:var(--paper);border:2px solid var(--line);border-radius:18px;box-shadow:var(--shadow);transform:rotate(-3deg);padding:18px 20px;color:#2a2540;background-image:repeating-linear-gradient(transparent 0 31px,#f1e7d8 31px 32px)}
.paper .hd{display:flex;justify-content:space-between;font-weight:700;font-size:.82rem;color:#6d6a85;margin-bottom:12px}
.paper .row{display:flex;gap:6px;margin-bottom:10px}
.paper .cell{width:15%;aspect-ratio:1;border:1.5px solid #9aa;display:grid;place-items:center;font:400 clamp(1.4rem,4vw,2.4rem)/1 var(--f-hand);background:#fff}
.paper .cell.g{color:#cfd2dc}.paper .cell.m{color:#2a2540}
.paper .clock{width:68px;position:absolute;right:20px;bottom:18px}
.stamp{z-index:2;position:absolute;right:2%;top:2%;width:42%;aspect-ratio:1;border:7px solid var(--coral);border-radius:50%;color:var(--coral);display:grid;place-items:center;text-align:center;font-weight:900;font-size:clamp(1rem,2.6vw,1.5rem);line-height:1.3;transform:rotate(-14deg);background:color-mix(in srgb,var(--coral) 6%,transparent);animation:pon .5s .35s cubic-bezier(.3,1.8,.5,1) both}
.stamp::after{content:"";position:absolute;inset:8px;border:2px dashed var(--coral);border-radius:50%}
@keyframes pon{from{transform:rotate(-14deg) scale(1.8);opacity:0}to{transform:rotate(-14deg) scale(1);opacity:.92}}
@media(prefers-reduced-motion:reduce){.stamp{animation:none}html{scroll-behavior:auto}}

/* セクション */
section.sec{padding:40px 0}
.sec-h{margin-bottom:20px}.sec-h h2{font-size:clamp(1.5rem,3.6vw,2.1rem);margin:0 0 4px}.sec-h p{margin:0;color:var(--muted)}
.sec-h .tag{display:inline-block;font-size:.78rem;font-weight:900;letter-spacing:.1em;color:var(--coral);margin-bottom:4px}

/* プリント工房 */
.wtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.wtab{text-align:left;border:2px solid var(--line);background:var(--paper);border-radius:20px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.wtab b{display:block;font-size:1.1rem}.wtab span{font-size:.82rem;color:var(--muted)}
.wtab[aria-selected=true]{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 9%,var(--paper))}
.wtab[aria-selected=true] b{color:var(--coral)}
.panel[hidden]{display:none}
.gen{display:grid;gap:22px;grid-template-columns:270px minmax(0,1fr);background:var(--paper);border:2px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow)}
.fld{margin-bottom:14px}.fld label{display:block;font-weight:900;font-size:.88rem;margin-bottom:4px}
select,input{width:100%;padding:10px 12px;border-radius:12px;border:2px solid var(--line);font:inherit;background:var(--paper);color:var(--ink)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;padding:8px 10px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.seg button[aria-pressed=true]{border-color:var(--mint);background:var(--mint);color:#fff}
.ctl-btns{display:flex;flex-wrap:wrap;gap:8px}
.hint{font-size:.8rem;color:var(--muted);margin:10px 0 0}

/* プリント用紙（常に白地） */
.sheet{container-type:inline-size;background:#fff;color:#2a2540;border:2px dashed #d9cdbb;border-radius:12px;padding:20px;min-width:0}
.sheet h3{margin:0 0 4px;font-size:1.15rem}
.sheet .meta{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;margin-bottom:12px;border-bottom:2px solid #2a2540;padding-bottom:6px}
.qs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;list-style:none;padding:0;margin:0;font-size:1.25rem;font-variant-numeric:tabular-nums}
.qs li{display:flex;gap:8px;align-items:baseline}.qs .n{color:#999;font-size:.85rem;width:1.8em;flex:none}
.qs.wp{grid-template-columns:1fr;gap:16px;font-size:1.05rem;line-height:1.8}
.qs.wp li{display:block;border-bottom:1px dashed #ccd;padding-bottom:10px}
.wp .ln{display:block;margin-top:4px;font-size:.95rem}
.qs.hs{grid-template-columns:repeat(4,1fr);gap:20px 12px}
.qs.hs li{display:block;text-align:right}
.hs .v{display:inline-block;min-width:4.5em;font-size:1.3rem;line-height:1.5;border-bottom:2px solid #2a2540;font-variant-numeric:tabular-nums}
.hs .v i{font-style:normal;float:left}.hs .out{display:block;height:1.6em;margin-top:4px}
.a{color:#e0364f;font-weight:900}

/* なぞり書きのマス */
.tr{--n:7;display:grid;grid-template-columns:var(--lbw,4.2em) repeat(var(--n),1fr);margin-bottom:6px;align-items:center}
.tr .lb{font-size:.8rem;color:#666;line-height:1.3}
.tr .c{aspect-ratio:1;display:grid;place-items:center;font-style:normal;font-size:calc(64cqw/var(--n));line-height:1;border:1px solid #98a;margin-left:-1px;font-family:var(--f-hand);background:linear-gradient(#0000 calc(50% - .5px),#cbd 50%,#0000 calc(50% + .5px)),linear-gradient(90deg,#0000 calc(50% - .5px),#cbd 50%,#0000 calc(50% + .5px))}
.tr .m{color:#2a2540}.tr .g{color:#c9ccd6}
.tr.gap{margin-bottom:14px}
.qtest{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px}
.qtest .q{display:flex;align-items:center;gap:10px;border-bottom:1px dashed #ccd;padding:6px 0}
.qtest .num{color:#999;font-size:.85rem;width:1.8em}
.qtest .rd{font-size:1.25rem;min-width:4.5em}
.qtest .box{width:3.4em;aspect-ratio:1;border:1.5px solid #98a;display:grid;place-items:center;font:400 1.9rem/1 var(--f-hand);background:linear-gradient(#0000 calc(50% - .5px),#cbd 50%,#0000 calc(50% + .5px)),linear-gradient(90deg,#0000 calc(50% - .5px),#cbd 50%,#0000 calc(50% + .5px))}
.qtest .line{flex:1;border-bottom:2px solid #2a2540;min-height:2em;display:flex;align-items:flex-end;font-size:1.2rem}
.qtest .big{font:400 2rem/1 var(--f-hand)}

/* とけい・おかね・ぱずる */
.grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.item{position:relative;text-align:center}
.item .num{position:absolute;left:0;top:0;font-weight:900;font-size:.9rem}
.ans-line{margin-top:4px;font-size:1.05rem;font-weight:700}
.list .row{display:grid;grid-template-columns:2em 1fr auto;gap:10px;align-items:center;border-bottom:1px dashed #ccd;padding:10px 0;text-align:left}
.list .row .num{position:static;font-weight:900;font-size:.9rem}
.coins{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.coins svg{width:auto;height:auto;max-width:48px}
.change{font-size:1.05rem}
.cnt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 22px}
.cnt{display:grid;grid-template-columns:2em 1fr auto;gap:10px;align-items:center}
.cnt svg{width:100%;max-width:230px}
.sdk{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px}
.sdk table{border-collapse:collapse;margin:auto;font:400 1.7rem/1 var(--f-hand)}
.sdk td{width:2.3em;height:2.3em;text-align:center;border:1px solid #98a}
.sdk td.r{border-right:3px solid #2a2540}.sdk td.b{border-bottom:3px solid #2a2540}
.sdk table{border:3px solid #2a2540}

/* 使い方 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);position:relative}
.steps li::before{content:counter(s);position:absolute;top:-14px;left:16px;width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;font-weight:900;display:grid;place-items:center}
.steps b{display:block;font-size:1.1rem;margin-bottom:4px}.steps span{color:var(--muted);font-size:.92rem}

/* 料金 */
.plans{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;align-items:stretch}
.plan{background:var(--paper);border:2px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;position:relative}
.plan.single{max-width:640px}
.plan.main{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 7%,var(--paper))}
.plan .ribbon{position:absolute;top:-13px;right:18px;background:var(--sun);color:#3a2d00;font-weight:900;font-size:.8rem;padding:3px 14px;border-radius:999px}
.plan h3{margin:0;font-size:1.15rem}
.plan .amt{font-size:2rem;font-weight:900;line-height:1.2}.plan .amt small{font-size:.9rem;font-weight:700;color:var(--muted)}
.plan ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.92rem;flex:1}
.pay-note{margin-top:16px;font-size:.88rem;color:var(--muted)}
.paybox{min-height:48px}
.warn{background:#fff3d6;color:#6b4a00;border-radius:12px;padding:10px 14px;margin:0 0 14px;font-weight:700}
.recover{margin-top:16px;font-size:.92rem}.recover summary{cursor:pointer;font-weight:700}
.recover form{display:grid;gap:8px;margin:10px 0 18px;max-width:520px}
.recover label{font-size:.85rem}.recover input{margin-top:3px}

/* よくある質問 */
.faq details{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:4px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:900;padding:12px 0}
.faq p{margin:0 0 14px;color:var(--muted)}

footer{border-top:2px dashed var(--line);margin-top:30px;padding:28px 0 90px;color:var(--muted);font-size:.86rem}
footer p{margin:.3em 0}
.doc{max-width:780px;margin:0 auto;padding:30px max(16px,env(safe-area-inset-left,0px)) 60px;font-family:var(--f-body);color:var(--ink);line-height:1.85}
.doc h1{font-size:1.7rem}.doc h2{font-size:1.15rem;margin-top:1.8em}
.doc table{width:100%;border-collapse:collapse}.doc th,.doc td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}.doc th{width:30%;background:var(--sky)}

@media(max-width:820px){.hero,.gen,.plans,.steps{grid-template-columns:1fr}.hero-art{min-height:300px}.wtabs{grid-template-columns:1fr}.grid2{grid-template-columns:repeat(2,1fr)}.qs.hs{grid-template-columns:repeat(2,1fr)}.nav{display:none}.qtest,.cnt-grid,.sdk{grid-template-columns:1fr}.tr{--lbw:3em}}
@page{margin:12mm}
#printArea{display:none}
.opt{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-weight:700;font-size:.92rem;cursor:pointer}
.opt input{width:auto;accent-color:var(--coral)}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  body.printing #printArea{display:block}
  #printArea .sheet{border:0;padding:0;break-after:page}
  #printArea .sheet:last-child{break-after:auto}
}