:root {
  --brand-bg: #f8f5f0;
  --brand-surface: #ffffff;
  --brand-ink: #171923;
  --brand-muted: #666b75;
  --brand-coral: #ff7468;
  --brand-coral-soft: #ffe4df;
  --brand-mint: #dff4ec;
  --brand-mint-dark: #348268;
  --brand-border: rgba(23, 25, 35, 0.14);
  --brand-border-strong: rgba(23, 25, 35, 0.24);
  --brand-shadow: 0 18px 42px rgba(23, 25, 35, 0.09);
  --brand-shadow-photo: 0 24px 48px rgba(23, 25, 35, 0.18);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-control: 12px;
  --radius-pill: 999px;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  color: var(--brand-ink);
  background: var(--brand-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--brand-bg); color: var(--brand-ink); }
body, button, input, select, textarea { font: inherit; }
button, input, select, textarea { color: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 0.22em; }
img { display: block; max-width: 100%; }
svg { max-width: 100%; }
button { border: 0; }

h1, h2, h3, p, ul, ol, dl, figure { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.045em; line-height: 1.25; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.3rem); }
h3 { font-size: 1.12rem; }
p, li { line-height: 1.8; }

main { width: 100%; }
.site-shell { width: min(100% - 48px, 1120px); margin: 0 auto; }
.surface-card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-md); }
.choice-card { position: relative; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-surface); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.choice-card:hover { transform: translateY(-2px); }
.choice-card.is-selected { border-color: var(--brand-coral); box-shadow: 0 0 0 3px var(--brand-coral-soft); }
.status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--brand-mint); color: var(--brand-mint-dark); font-size: .78rem; font-weight: 750; }
.status-pill.current { background: var(--brand-coral-soft); color: #b94f45; }
.status-pill.muted { background: #f0eee9; color: var(--brand-muted); }
.notice-box { padding: 16px 18px; border: 1px solid rgba(52, 130, 104, .2); border-radius: var(--radius-sm); background: var(--brand-mint); color: #2f5e4f; }
.error { color: #b4433b; }
.success { color: var(--brand-mint-dark); }
.muted { color: var(--brand-muted); }
.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; }

.button, button.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; gap: 10px; padding: 11px 18px; border-radius: 16px; background: var(--brand-ink); color: #fff; text-decoration: none; font-weight: 700; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.button:hover, button.button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(23, 25, 35, .12); }
.button:disabled, button:disabled { opacity: .56; cursor: not-allowed; transform: none; box-shadow: none; }
.button.coral, button.button.coral { background: var(--brand-coral); color: var(--brand-ink); }
.button.soft, button.button.soft { background: var(--brand-coral-soft); color: #9f463e; }
.button.outline, button.button.outline { border: 1px solid var(--brand-border-strong); background: transparent; color: var(--brand-ink); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, label:has(input:focus-visible) { outline: 3px solid var(--brand-coral); outline-offset: 3px; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--brand-border-strong); border-radius: var(--radius-control); background: var(--brand-surface); }
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9699a0; }
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; accent-color: var(--brand-coral); }
label { display: grid; gap: 8px; font-weight: 650; }
label small, .field-hint { color: var(--brand-muted); font-size: .82rem; font-weight: 400; line-height: 1.6; }

@media (max-width: 700px) {
  .site-shell { width: min(100% - 40px, 1120px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}