:root {
      --bg: #f8fafc;
      --card: #fff;
      --text: #0f172a;
      --muted: #64748b;
      --accent: #2e6b4e;
      --accent-2: #f3b44b;
      --radius: 16px;
    }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", Segoe UI, Roboto, sans-serif;
      color: var(--text);
      background: radial-gradient(1200px 800px at 10% 0%, #ecfeff 0, transparent 60%),
                  radial-gradient(1000px 800px at 100% 100%, #fef9c3 0, transparent 60%),
                  var(--bg);
    }
    .container {
      max-width: 720px;
      margin-inline: auto;
      padding: 32px 20px 60px;
    }
    .card {
      background: var(--card);
      padding: 28px;
      border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }
    h1 { font-size: clamp(20px, 2.8vw, 28px); margin: 0 0 6px; }
    p.lead { color: var(--muted); margin: 0 0 22px; }

    fieldset { border: none; padding: 0; margin: 0 0 10px; }
    legend { font-weight: 700; margin-bottom: 12px; }

    .option {
      display: grid;
      grid-template-columns: 24px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      margin-bottom: 10px;
      background: #fff;
    }
    .option:hover { border-color: #cbd5e1; }
    .option .meta { color: var(--muted); font-size: 12px; }

    .actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
    button {
      appearance: none; border: none; cursor: pointer; font-weight: 700;
      padding: 12px 18px; border-radius: 999px; background: var(--accent); color: #fff;
      transition: transform .06s ease, opacity .2s ease, box-shadow .2s ease;
      box-shadow: 0 8px 18px rgba(46, 107, 78, .25);
    }
    button[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
    button:active { transform: translateY(1px); }

    label.checkbox { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }

    .note { margin-top: 10px; font-size: 12px; color: var(--muted); }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; }

    /* 小さめ画面最適化 */
    @media (max-width: 768px) {
      h1 { font-size: 22px; }
      .card { padding: 20px; }
      .option { padding: 10px 12px; }
      button { padding: 10px 16px; }
    }

    /* 480px 以下のスマホ最適化 */
    @media (max-width: 480px) {
      .option { grid-template-columns: 22px 1fr; }
      .option a { display: none; }
    }


    /* ▼「開く」ボタンを中央寄せ＆大きく */
.actions {
  display: flex;
  flex-direction: column;   /* ← ボタンとチェックボックスを縦並びに */
  align-items: center;      /* ← 中央寄せ */
  gap: 14px;
  margin-top: 28px;
}

#goBtn {
  width: clamp(200px, 60%, 320px); /* 画面幅に応じて自然に伸縮 */
  padding: 14px 26px;
  font-size: 18px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 10px 20px rgba(46, 107, 78, .25);
}

/* 押してる感 */
#goBtn:active {
  transform: translateY(2px);
}

/* SP最適化 */
@media (max-width: 480px) {
  #goBtn {
    width: 90%;
    font-size: 17px;
    padding: 14px;
  }
}