*{box-sizing:border-box}
body{margin:0;font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;background:#f6f4fb;color:#2b2840;line-height:1.7}
main{max-width:480px;margin:0 auto;padding:20px 16px 8px}
h1{font-size:1.8rem;line-height:1.3;margin:.2em 0 .5em}
h2{font-size:1.2rem;line-height:1.5}
.brand{color:#7a68c9;font-weight:700;margin:0}
.lead{margin-bottom:24px}.note,.small{font-size:.78rem;color:#777}
.btn{display:block;width:100%;padding:14px;border-radius:14px;border:0;font-size:1rem;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;margin:10px 0}
.primary{background:#7a68c9;color:#fff}.ghost{background:none;color:#7a68c9}
.xbtn{background:#111;color:#fff}.buy{background:#ff8a5c;color:#fff}
.progress{height:8px;background:#e2ddf3;border-radius:4px;overflow:hidden}#bar{height:100%;background:#7a68c9;width:0;transition:width .2s}
.qnum{color:#7a68c9;font-weight:700;margin:14px 0 0}
.opts button{display:block;width:100%;text-align:left;padding:14px 16px;margin:10px 0;border:2px solid #e2ddf3;background:#fff;border-radius:14px;font-size:1rem;color:inherit;cursor:pointer}
.opts button:active,.opts button.sel{border-color:#7a68c9;background:#efeafd}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 2px 10px #0000000d;margin-bottom:16px}
.code{display:inline-block;background:#efeafd;color:#7a68c9;font-weight:700;border-radius:8px;padding:2px 10px;font-size:.85rem}
.tname{font-size:2rem;margin:.2em 0}.catch{font-weight:700;color:#5c4db0}
.locked{position:relative}.locked .blur{filter:blur(6px);user-select:none;pointer-events:none}
.lockmsg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px;background:#ffffffb0;border-radius:18px}
.tbl{overflow-x:auto}table{border-collapse:collapse;font-size:.72rem}td,th{border:1px solid #e2ddf3;padding:3px 4px;text-align:center;white-space:nowrap}th{background:#f3f0fb}
footer{text-align:center;font-size:.85rem;padding:16px;color:#555}
.notice{background:#fff7e8;border:2px solid #ffcf8a}
.err{background:#fff0f0;border-color:#f3a5a5}
.draft{background:#fff3c4;border:2px dashed #e0b300;padding:8px 12px;border-radius:10px;font-weight:700}
.legal{font-size:.85rem;width:100%}.legal th,.legal td{white-space:normal;text-align:left;padding:8px}
.hero{display:block;margin:0 -4px 16px}.hero img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:18px;box-shadow:0 4px 16px #7a68c922;background:#ece6fd}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}