@font-face { font-family: "Noto Sans JP"; src: url("/fonts/NotoSansJP-subset.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --bg:#f6efe4; --ink:#2b2118; --mute:#6f6254; --line:#dccfbb; --card:#fffaf2; --accent:#8a3b21; --accent-ink:#fff; --ok:#2f6b3f; }
@media (prefers-color-scheme: dark) { :root { --bg:#1e1812; --ink:#f3e9db; --mute:#b5a794; --line:#3d3226; --card:#2a2118; --accent:#d98a62; --accent-ink:#1e1812; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.55; font-size:17px; }
.top { display:flex; align-items:center; gap:12px; padding:12px 16px; padding-top:max(12px,env(safe-area-inset-top)); }
.brand { font-weight:700; letter-spacing:.04em; font-size:15px; }
.progress { flex:1; height:4px; background:var(--line); border-radius:2px; overflow:hidden; }
.progress i { display:block; height:100%; width:0; background:var(--accent); transition:width .25s; }
main { max-width:560px; margin:0 auto; padding:8px 16px 40px; }
h1 { font-size:26px; line-height:1.25; margin:.4em 0 .3em; }
h2 { font-size:21px; margin:1.6em 0 .4em; }
h3 { font-size:17px; margin:1.2em 0 .2em; }
.q { font-size:23px; font-weight:700; margin:.6em 0 .2em; }
.sub, .small { color:var(--mute); font-size:14px; }
.opts { display:grid; gap:10px; margin:14px 0; }
.opt, button.primary, a.btn, button.ghost {
  display:block; width:100%; text-align:left; padding:15px 16px; min-height:52px; font:inherit; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:14px; cursor:pointer; text-decoration:none; }
.opt:active, .opt.on { border-color:var(--accent); }
.opt b { display:block; } .opt span { color:var(--mute); font-size:14px; }
button.primary, a.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); text-align:center; font-weight:700; }
button.primary[disabled], a.btn[aria-disabled=true] { opacity:.45; pointer-events:none; }
button.ghost { text-align:center; }
input[type=text], input[type=email], select { width:100%; font:inherit; padding:14px; min-height:50px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
label.chk { display:flex; gap:10px; align-items:flex-start; margin:10px 0; font-size:15px; }
label.chk input { width:22px; height:22px; margin-top:2px; flex:none; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:14px 0; }
.big { font-size:56px; line-height:1.1; font-weight:700; }
.kanji-row { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.parts { margin:6px 0; padding-left:0; list-style:none; } .parts li { margin:2px 0; }
.type { display:inline-block; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:4px 14px; font-weight:700; font-size:14px; }
.band { display:inline-block; border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:13px; color:var(--mute); }
.cardwrap canvas { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block; background:#ccc; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.err { color:#b3261e; font-size:14px; } .ok { color:var(--ok); }
.interstitial { min-height:50vh; display:grid; place-content:center; text-align:center; }
.run { font-weight:700; font-size:18px; }
.tier .price { font-weight:700; }
.foot { text-align:center; padding:20px; font-size:13px; color:var(--mute); } .foot a { color:inherit; }
.grid { display:flex; flex-wrap:wrap; gap:8px; } .grid .opt { width:auto; min-height:44px; padding:8px 14px; }
.lang-ja { font-family:"Noto Sans JP",sans-serif; }

/* 作品写真(結果画面)。かずしげさんの実際の作品。量産品の画面では使わない */
.work { margin:14px 0; text-align:center; }
.work img { width:100%; max-width:420px; height:auto; border-radius:14px; border:1px solid var(--line); display:block; margin:0 auto; background:#ccc; }
.work.small-fig img { max-width:260px; }
.work figcaption { font-size:14px; font-weight:700; margin-top:8px; } .work figcaption span { font-weight:400; font-size:13px; color:var(--mute); }
.art { width:180px; height:180px; margin:14px auto; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.art.small-fig { width:120px; height:120px; }