:root{
  --red:#c8202f; --red-dark:#9e1622; --red-soft:#fdecee;
  --gold:#c9a24a; --cream:#fbf6ee; --ink:#2b2420; --muted:#7a6f66;
  --line:#e7dccd; --white:#fff; --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--cream); line-height:1.6;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
}
img{display:block;max-width:100%}
button{font:inherit}
[hidden]{display:none !important}

.hero{
  text-align:center; color:var(--white); padding:28px 16px 22px;
  background:
    radial-gradient(circle at 12% 30%,rgba(255,255,255,.14) 0 22px,transparent 23px),
    radial-gradient(circle at 88% 70%,rgba(255,255,255,.12) 0 30px,transparent 31px),
    linear-gradient(160deg,var(--red),var(--red-dark));
  border-bottom:4px solid var(--gold);
}
.hero-sub{margin:0;font-size:.85rem;letter-spacing:.3em;color:#ffe9b8;min-height:1em}
.hero h1{margin:4px 0 6px;font-size:1.55rem;letter-spacing:.06em}
.hero-note{margin:0;font-size:.85rem;opacity:.92}

main{max-width:560px;margin:0 auto;padding:16px 16px 8px}
.loading{text-align:center;color:var(--muted);padding:40px 0}

.step{
  background:var(--white); border-radius:var(--radius); padding:18px 16px 16px;
  margin-bottom:14px; box-shadow:0 1px 3px rgba(60,30,10,.06); scroll-margin-top:16px;
}
.step h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:1.08rem}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:var(--white);font-size:.9rem;flex:none}
.hint{margin:-6px 0 12px;font-size:.85rem;color:var(--muted)}
.hint.small{margin:8px 0 0;font-size:.8rem}

/* 商品 */
.products{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sr{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.card{
  display:block;height:100%;position:relative;cursor:pointer;
  border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);
  transition:border-color .15s,box-shadow .15s;
}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f2ebe0}
.info{display:block;padding:8px 10px 10px}
.name{display:block;font-weight:700}
.price{display:block;font-size:1.2rem;font-weight:700;color:var(--red)}
.price small{font-size:.7rem;color:var(--muted);font-weight:400;margin-left:2px}
.tax{display:block;font-size:.8rem;color:var(--muted)}
.badge{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--gold);color:var(--white)}
.sr:checked + .card{border-color:var(--red);box-shadow:0 0 0 3px rgba(200,32,47,.18)}
.sr:checked + .card::after{
  content:"✓";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--red);color:var(--white);font-weight:700;
}
.sr:disabled + .card{cursor:not-allowed}
.sr:disabled + .card img{filter:grayscale(1) opacity(.5)}
.sr:disabled + .card .badge{background:var(--muted)}
.sr:focus-visible + .card,.sr:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

.qty-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.qty-label{font-weight:700}
.stepper{display:flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.stepper button{width:46px;height:42px;border:0;background:var(--cream);font-size:1.2rem;color:var(--red);cursor:pointer}
.stepper button:disabled{color:#ccc}
.stepper output{width:48px;text-align:center;font-size:1.1rem;font-weight:700}

/* 店舗 */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.chips span{
  display:block;text-align:center;padding:14px 4px;border:2px solid var(--line);
  border-radius:12px;font-weight:700;cursor:pointer;transition:all .15s;
}
.chips .sr:checked + span{background:var(--red);border-color:var(--red);color:var(--white)}

/* カレンダー */
.cal-month + .cal-month{margin-top:16px}
.cal-title{text-align:center;font-weight:700;margin:0 0 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-wd{font-size:.75rem;color:var(--muted);padding:2px 0}
.cal-wd.sun{color:#c0392b}.cal-wd.sat{color:#2d6cb5}
.cal-day{
  aspect-ratio:1/1;display:grid;place-items:center;border-radius:10px;
  font-size:.95rem;color:#c9bfb3;border:0;background:none;padding:0;
}
button.cal-day{
  color:var(--ink);font-weight:700;background:var(--red-soft);cursor:pointer;
  border:2px solid transparent;
}
button.cal-day[aria-pressed="true"]{background:var(--red);color:var(--white)}
button.cal-day:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.picked{margin:12px 0 0;text-align:center;font-weight:700;color:var(--red)}

/* 名前 */
#name{
  width:100%;padding:14px;font-size:16px;border:2px solid var(--line);border-radius:12px;background:var(--white);
}
#name:focus{outline:none;border-color:var(--red)}

/* 同意 */
.terms{margin:0 0 14px;padding-left:1.2em;font-size:.85rem;color:#4d443d}
.terms li + li{margin-top:6px}
.agree{
  display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;
  background:var(--cream);cursor:pointer;font-size:.92rem;
}
.agree input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--red);flex:none}
.agree a{color:var(--red)}

.turnstile{display:flex;justify-content:center;min-height:65px;margin:4px 0}

/* エラー */
.err{display:none;margin:10px 0 0;color:var(--red);font-size:.85rem;font-weight:700}
.err.show{display:block}
.err.center{text-align:center}
.step.invalid{box-shadow:0 0 0 2px var(--red)}

.summary{display:flex;justify-content:space-between;align-items:baseline;padding:12px 4px;margin:4px 0 8px;border-top:1px dashed var(--line)}
.summary span{font-size:.9rem}
.summary strong{font-size:1.45rem;color:var(--red)}
.primary{
  width:100%;padding:16px;border:0;border-radius:999px;background:var(--red);color:var(--white);
  font-size:1.05rem;font-weight:700;letter-spacing:.05em;cursor:pointer;box-shadow:0 4px 0 var(--red-dark);
}
.primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--red-dark)}
.primary:disabled{opacity:.6}
.ghost{padding:16px;border-radius:999px;border:2px solid var(--line);background:var(--white);font-size:1rem;font-weight:700;cursor:pointer;color:var(--ink)}

/* 確認 */
.modal{position:fixed;inset:0;z-index:10;background:rgba(30,15,10,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;background:var(--white);border-radius:20px 20px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom))}
.sheet h3{margin:0 0 12px;text-align:center}
dl{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px}
dt{color:var(--muted);font-size:.9rem}
dd{margin:0;font-weight:700;text-align:right;word-break:break-all}
.sheet-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* 完了 */
.done{max-width:560px;margin:0 auto;padding:28px 16px;text-align:center}
.done-mark{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:var(--red);color:var(--white)}
.done h2{margin:0 0 16px;font-size:1.25rem}
.code-label{margin:0;color:var(--muted);font-size:.85rem}
.code{
  margin:4px auto 14px;display:inline-block;padding:10px 22px;border-radius:12px;
  background:var(--white);border:3px solid var(--red);
  font-size:2.2rem;font-weight:800;letter-spacing:.12em;color:var(--red);
  font-family:"SF Mono",Menlo,Consolas,monospace;
}
.done-note{font-size:.9rem;margin:0 0 16px}
.done dl{background:var(--white);border-radius:var(--radius);padding:16px;text-align:left}
.done-cancel{font-size:.8rem;color:var(--muted);text-align:left}

footer{text-align:center;font-size:.85rem;color:var(--muted);padding:20px 16px 32px}
footer p{margin:2px 0}
footer .co{font-weight:700;color:var(--ink)}
footer a{color:var(--red)}