:root{--gold:#d4af37;--gold2:#c9a428;--ink:#222;--muted:#555;--line:#d0d0d0;--err:#b00020;--bg:#f6f4ee;--focus:#0b57d0}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg)}
a{color:#0b4ea2}
.wrap{max-width:640px;margin:0 auto;background:#fff}
.hd{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#222;padding:12px 16px 10px;position:relative}
.hd__label{display:inline-block;background:#fff;color:#7a5d00;font-weight:700;font-size:14px;padding:2px 14px 2px 10px;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.hd__title{font-size:22px;font-weight:700;letter-spacing:2px;line-height:1.25;margin-top:4px}
.hd__sub{font-size:14px;letter-spacing:1px}
.sec{padding:20px 16px;border-bottom:1px solid #e3e3e3}
.sec h2,.sec .lbl{display:block;font-size:18px;font-weight:700;margin-bottom:6px}
.sec--dark{background:linear-gradient(135deg,#3a4f5f,#2c3e50);color:#fff}
.sec--brown{background:linear-gradient(135deg,#4a3933,#3d2f2a);color:#fff}
.sec--dark h2,.sec--brown h2{padding-bottom:8px;border-bottom:2px solid var(--gold);margin-bottom:14px}
.note{font-size:14px;color:var(--muted)}
.sec--dark .note,.sec--brown .note{color:#e6e6e6}
.fld{margin-bottom:16px}
.fld>label,.fld>.lbl{display:block;font-weight:700;margin-bottom:4px}
.req{font-size:12px;font-weight:700;color:#fff;background:#8a1c1c;border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.sec--dark .req,.sec--brown .req{background:#fff;color:#7a1010}
input[type=text],input[type=tel],input[type=email],input[type=date],textarea{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid #8a8a8a;border-radius:6px}
textarea{min-height:96px;resize:vertical}
input[readonly]{background:#ececec}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sec--dark :focus-visible,.sec--brown :focus-visible{outline-color:#ffe27a}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--err);border-width:3px}
.err{color:var(--err);font-weight:700;font-size:14px;min-height:0}
.err:not(:empty){margin-top:4px}
.sec--dark .err,.sec--brown .err{color:#ffc9c9}
.row2{display:flex;gap:10px}
.row2>*{flex:1;min-width:0}
.opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border:2px solid #8a8a8a;border-radius:8px;margin-bottom:8px;background:#fff;color:var(--ink);cursor:pointer}
.opt input{width:24px;height:24px;flex:none;accent-color:#8a6d00}
.opt:has(input:checked){border-color:#8a6d00;background:#fbf5df}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.date-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.date-line input[type=date]{width:auto;min-width:11em}
.postal{display:flex;align-items:center;gap:10px}
.postal input{max-width:11em}
.status{font-size:14px;font-weight:700}
.chk{display:flex;align-items:center;gap:10px;min-height:48px;margin-bottom:14px;color:inherit}
.chk input{width:24px;height:24px;accent-color:#d4af37}
.btn{display:block;width:100%;min-height:52px;padding:12px 18px;font:inherit;font-size:17px;font-weight:700;text-align:center;text-decoration:none;border-radius:8px;border:2px solid transparent;cursor:pointer}
.btn--primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#222;border-color:#8a6d00}
.btn--ghost{background:#fff;color:#222;border-color:#666}
.btn--link{display:inline-block;width:auto;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#222;border-color:#8a6d00;margin-top:8px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{padding:16px;display:grid;gap:12px}
.link-sec{background:#f9f9f9;text-align:center}
.cfm{padding:20px 16px}
.cfm h2{font-size:20px;margin-bottom:10px}
.cfm dl{margin-bottom:16px}
.cfm dt{font-weight:700;margin-top:10px;font-size:14px;color:var(--muted)}
.cfm dd{white-space:pre-wrap;word-break:break-word;border-bottom:1px solid #eee;padding-bottom:6px}
.cfm h3{font-size:17px;margin:18px 0 4px;padding-bottom:4px;border-bottom:2px solid var(--gold)}
.total{font-size:20px;font-weight:700;background:#fbf5df;border:2px solid #8a6d00;border-radius:8px;padding:10px 12px;margin:14px 0}
.msg{margin:12px 16px;padding:12px;border-radius:8px;border:2px solid #8a1c1c;background:#fde7ea;color:#6b0012;font-weight:700}
.closed{margin:16px;padding:16px;border:2px solid #8a1c1c;background:#fde7ea;color:#6b0012;font-weight:700;border-radius:8px}
.ft{background:#2c2c2c;color:#fff;padding:20px 16px;font-size:14px;line-height:1.8;max-width:640px;margin:0 auto}
.ft a{color:#ffe27a}
.hidden{display:none!important}
.result{padding-bottom:12px}
.result h1{font-size:20px;padding:20px 16px 4px}
.card{margin:12px 16px;padding:14px;border:1px solid var(--line);border-radius:8px}
.card h2{font-size:17px;margin-bottom:6px}
.card p{margin-bottom:6px}
.bank{margin:0 0 8px 1.2em}
.hd--slim{padding:10px 16px 8px}
@media (min-width:640px){.hd__title{font-size:26px}.actions{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:no-preference){.btn{transition:box-shadow .2s}}
/* CLS対策: 設定取得後に描画される領域の高さを予約 */
#productList{min-height:112px}
#payList{min-height:168px}
#colorList{min-height:168px}
#range-note{min-height:3.2em}