:root {
      --primary: #1e293b;
      --secondary: #475569;
      --background: #ffffff;
      --surface: #f8fafc;
      --accent: #15803d;
      --text: #0f172a;
      --border: #cbd5e1;
      --free-bg: #dcfce7;
      --free-text: #166534;
      --paid-bg: #fef3c7;
      --paid-text: #78350f;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-family:
        -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Noto Sans JP",
        "Helvetica Neue", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.8;
    }

    .container {
      max-width: 840px;
      margin: 0 auto;
      padding: 24px 20px 48px;
    }

    a {
      color: #1d4ed8;
      text-underline-offset: 3px;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid #2563eb;
      outline-offset: 4px;
    }

    .site-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
      color: var(--secondary);
    }

    .pr-label {
      color: #92400e;
      font-weight: 700;
    }

    .update-date {
      margin: 12px 0 28px;
      color: var(--secondary);
      font-size: 0.82rem;
      text-align: right;
    }

    h1, h2, h3 {
      color: var(--primary);
      line-height: 1.45;
    }

    h1 {
      margin: 0 0 20px;
      font-size: clamp(1.6rem, 4vw, 2rem);
    }

    h2 {
      margin: 52px 0 20px;
      padding-left: 14px;
      border-left: 4px solid var(--primary);
      font-size: 1.35rem;
    }

    h3 {
      font-size: 1.05rem;
    }

    p {
      margin: 0 0 18px;
    }

    .lead {
      color: var(--secondary);
      font-size: 1.05rem;
    }

    .notice {
      margin: 32px 0;
      padding: 20px;
      background: var(--surface);
      border-left: 4px solid var(--border);
      border-radius: 0 8px 8px 0;
      font-size: 0.94rem;
    }

    .notice p:last-child {
      margin-bottom: 0;
    }

    .table-scroll {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    table {
      width: 100%;
      min-width: 590px;
      border-collapse: collapse;
      font-size: 0.93rem;
    }

    th, td {
      padding: 14px 12px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: middle;
    }

    thead th {
      background: var(--primary);
      color: white;
      font-weight: 700;
    }

    tbody tr:nth-child(even) {
      background: var(--surface);
    }

    tbody tr:last-child th,
    tbody tr:last-child td {
      border-bottom: none;
    }

    .small-note {
      margin-top: 12px;
      color: var(--secondary);
      font-size: 0.85rem;
    }

    .quiz-section {
      padding: 30px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
    }

    .quiz-intro {
      margin-bottom: 26px;
      color: var(--secondary);
      font-size: 0.94rem;
    }

    fieldset {
      min-width: 0;
      margin: 0 0 28px;
      padding: 0 0 24px;
      border: 0;
      border-bottom: 1px solid var(--border);
    }

    legend {
      width: 100%;
      padding: 0 0 12px;
      font-weight: 700;
      font-size: 0.98rem;
      line-height: 1.7;
    }

    .quiz-options {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .quiz-options label {
      display: flex;
      align-items: center;
      gap: 9px;
      flex: 1 1 180px;
      padding: 13px 15px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      line-height: 1.5;
    }

    .quiz-options label:hover {
      border-color: #64748b;
    }

    input[type="radio"] {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--primary);
      flex-shrink: 0;
    }

    .quiz-help {
      margin-bottom: 16px;
      color: var(--secondary);
      font-size: 0.88rem;
    }

    .result-box {
      margin-top: 20px;
      padding: 22px;
      border-radius: 8px;
      font-weight: 700;
      line-height: 1.8;
      white-space: pre-line;
    }

    .result-box[hidden] {
      display: none;
    }

    .result-free {
      background: var(--free-bg);
      color: var(--free-text);
      border: 1px solid #86efac;
    }

    .result-paid {
      background: var(--paid-bg);
      color: var(--paid-text);
      border: 1px solid #fcd34d;
    }

    .reset-button {
      padding: 9px 14px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--secondary);
      font: inherit;
      font-size: 0.9rem;
      cursor: pointer;
    }

    .reset-button:hover {
      background: #e2e8f0;
    }

    .check-list {
      padding-left: 1.5em;
    }

    .check-list li {
      margin-bottom: 10px;
    }

    .cta-container {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 32px 0 42px;
    }

    .btn {
      display: block;
      padding: 17px 20px;
      border-radius: 8px;
      text-align: center;
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.5;
      transition: background-color 0.2s ease;
    }

    .btn-primary {
      background: var(--accent);
      color: white;
    }

    .btn-primary:hover {
      background: #166534;
    }

    .btn-secondary {
      background: #e2e8f0;
      color: var(--primary);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      background: #cbd5e1;
    }

    .faq-item {
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
    }

    .faq-item h3 {
      margin: 0 0 8px;
    }

    .faq-item p {
      margin: 0;
    }

    footer {
      margin-top: 60px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      color: var(--secondary);
      text-align: center;
      font-size: 0.82rem;
    }

    @media (max-width: 600px) {
      .container {
        padding: 18px 16px 36px;
      }

      .quiz-section {
        padding: 20px 16px;
      }

      .quiz-options {
        flex-direction: column;
      }

      .quiz-options label {
        flex: none;
        width: 100%;
      }

      .btn {
        font-size: 1rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .btn {
        transition: none;
      }
    }

    /* 追加スタイル：外部フォント・ライブラリを読み込まない構成 */
    :root { --primary: #183e36; --accent: #216b51; --surface: #f5f8f6; }
    body { background: #fcfdfb; }
    .container { max-width: 920px; padding-top: 28px; }
    .site-header { padding-bottom: 20px; font-weight: 700; }
    .site-name { color: var(--primary); text-decoration: none; }
    .brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; background: var(--primary); color: white; border-radius: 7px; font-family: Georgia, serif; font-size: 20px; }
    .pr-label { border: 1px solid #c8d6ce; padding: 3px 10px; border-radius: 4px; color: var(--primary); font-size: 12px; white-space: nowrap; }
    .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .13em; color: #467561; margin: 0 0 15px; }
    h1 { font-size: clamp(1.65rem, 3.7vw, 2.4rem); letter-spacing: -.035em; }
    .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin: 26px 0 30px; }
    .hero-actions .btn { font-size: .95rem; padding: 13px 24px; }
    .hero-actions span { font-size: .82rem; color: var(--secondary); }
    .page-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; border-block: 1px solid var(--border); padding: 16px 0; margin: 20px 0 32px; font-size: .85rem; }
    .page-nav a { color: var(--primary); text-decoration: none; }
    .page-nav a:hover { text-decoration: underline; }
    .notice { border-left-color: #92b49f; }
    h2 { scroll-margin-top: 24px; }
    .quiz-section { background: #f1f6f2; border-color: #c7d8cb; }
    .quiz-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: .85rem; color: var(--secondary); }
    progress { width: 100%; height: 8px; accent-color: var(--accent); }
    .quiz-progress span { white-space: nowrap; }
    progress::-webkit-progress-bar { background: #dce8df; border-radius: 8px; }
    progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; }
    .quiz-options label:has(input:checked) { background: #e4efe7; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
    .result-box { font-weight: 400; white-space: normal; }
    .result-box h3 { margin: 0 0 12px; color: inherit; font-size: 1.15rem; }
    .result-box p:last-child { margin-bottom: 0; }
    .result-box ul { padding-left: 1.3em; }
    .result-box li { margin-bottom: 10px; }
    .skip-link { position: absolute; left: 16px; top: -100px; padding: 10px; background: white; z-index: 10; }
    .skip-link:focus { top: 8px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .table-scroll { background: white; }
    caption { text-align: left; padding: 12px; font-size: .85rem; color: var(--secondary); }
    footer { color: var(--secondary); }
    @media (max-width: 600px) {
      .container { padding: 20px 16px 32px; }
      .site-header { gap: 10px; font-size: .75rem; }
      .site-name { max-width: calc(100% - 78px); }
      .brand-mark { width: 24px; height: 24px; font-size: 16px; margin-right: 4px; }
      .quiz-section { padding: 22px 16px; }
      .hero-actions { align-items: flex-start; flex-direction: column; }
      .hero-actions .btn { width: 100%; }
      .update-date { font-size: .75rem; }
      .result-box { padding: 18px; }
    }