:root {
        --bg: #ffffff;
        --bg-soft: #eef7fd;
        --bg-softer: #f7fbfe;
        --card: #ffffff;
        --ink: #38302a;
        --ink-soft: #6b6156;
        --blue: #0d8fdd;
        --blue-deep: #0a6cb4;
        --blue-pale: #d9eefa;
        --orange: #f5a300;
        --orange-soft: #fdf3e0;
        --green: #06c755;
        --green-deep: #05a847;
        --border: #cfe7f5;
        --shadow: 0 10px 30px rgba(13, 110, 170, 0.12);
        --header-bg: rgba(255, 255, 255, 0.94);
      }
      
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: 17px;
        line-height: 1.85;
        color: var(--ink);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
      }
      img { max-width: 100%; display: block; }
      a { color: var(--blue-deep); }
      .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
      section { scroll-margin-top: 92px; }
      h1, h2, h3, .maru { font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif; }

      /* ---------- header ---------- */
      header.site {
        position: sticky; top: 0; z-index: 50;
        background: var(--header-bg);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
      }
      .header-in {
        display: flex; align-items: center; gap: 18px;
        max-width: 1120px; margin: 0 auto; padding: 10px 20px;
      }
      .header-in .logo, footer.site .logo {
        background: #fff; border-radius: 12px; padding: 5px 12px;
        display: inline-flex; align-items: center; line-height: 0;
        box-shadow: 0 2px 8px rgba(13, 110, 170, 0.10);
      }
      .header-in .logo img { height: 46px; width: auto; }
      nav.main { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
      nav.main a {
        color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
        padding: 10px 12px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center;
      }
      nav.main a:hover { background: var(--bg-soft); }
      .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        text-decoration: none; font-weight: 700; border-radius: 14px;
        padding: 12px 22px; min-height: 52px; font-size: 17px; line-height: 1.3;
        border: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
      }
      .btn:active { transform: translateY(1px); }
      .btn-tel { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(13, 143, 221, 0.35); }
      .btn-tel:hover { background: var(--blue-deep); }
      .btn-line { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(6, 199, 85, 0.3); }
      .btn-line:hover { background: var(--green-deep); }
      .btn-ghost { background: var(--card); color: var(--blue-deep); border: 2px solid var(--blue); box-shadow: none; }
      .header-tel { margin-left: 8px; white-space: nowrap; font-size: 19px; padding: 10px 20px; min-height: 48px; }
      .header-tel svg, .btn svg { flex: none; }

      /* ---------- hero ---------- */
      .hero { background: var(--bg-soft); overflow: hidden; }
      .hero-in {
        display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center;
        max-width: 1120px; margin: 0 auto; padding: 56px 20px 64px;
      }
      .hero .area-tag {
        display: inline-block; background: var(--card); color: var(--blue-deep);
        border: 1.5px solid var(--blue); border-radius: 999px;
        font-weight: 700; font-size: 14.5px; padding: 5px 16px; margin-bottom: 18px;
      }
      .hero h1 {
        font-size: clamp(32px, 5.2vw, 50px); line-height: 1.35; font-weight: 900;
        margin: 0 0 18px; letter-spacing: 0.01em;
      }
      .hero h1 .hl { color: var(--blue-deep); }
      .hero p.lead { font-size: 18px; margin: 0 0 26px; color: var(--ink); }
      .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
      .hero-cta .btn { font-size: 19px; padding: 14px 26px; min-height: 60px; border-radius: 16px; }
      .hero-cta .btn .sub { display: block; font-size: 12.5px; font-weight: 500; opacity: 0.92; }
      .hero-cta .btn .main-line { display: block; line-height: 1.25; text-align: left; }
      .hero-note { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
      .hero-photo { position: relative; }
      .hero-photo img.main {
        border-radius: 28px; box-shadow: var(--shadow); aspect-ratio: 1 / 0.94; object-fit: cover; width: 100%;
      }
      .hero-photo .badge {
        position: absolute; left: -14px; bottom: 22px;
        background: var(--orange); color: #fff; font-weight: 900;
        font-family: "Zen Maru Gothic", sans-serif;
        border-radius: 14px; padding: 10px 18px; font-size: 17px; line-height: 1.4;
        box-shadow: 0 8px 20px rgba(245, 163, 0, 0.4);
      }
      .hero-photo .badge small { display: block; font-size: 12.5px; font-weight: 700; }

      /* ---------- fact strip ---------- */
      .facts { border-bottom: 1px solid var(--border); background: var(--bg); }
      .facts-in {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
        max-width: 1120px; margin: 0 auto; padding: 0 20px;
      }
      .fact { padding: 22px 18px; text-align: center; }
      .fact + .fact { border-left: 1px dashed var(--border); }
      .fact .k { font-size: 14px; color: var(--ink-soft); font-weight: 700; }
      .fact .v { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 22px; color: var(--blue-deep); line-height: 1.4; }
      .fact .v small { font-size: 14px; }
      .fact-fare .v { font-size: 19px; line-height: 1.55; }
      .fact .note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 5px; }

      /* ---------- sections ---------- */
      .section { padding: 84px 0; }
      .section.alt { background: var(--bg-softer); }
      .sec-head { max-width: 760px; margin-bottom: 42px; }
      .sec-head .paw { color: var(--orange); margin-bottom: 6px; }
      .sec-head h2 { font-size: clamp(27px, 4vw, 36px); font-weight: 900; margin: 0 0 12px; line-height: 1.4; }
      .sec-head p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }

      /* reasons */
      .reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; }
      .reason { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 8px 0; }
      .reason .num {
        font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 30px;
        color: var(--blue); border-top: 4px solid var(--orange); padding-top: 8px; line-height: 1;
      }
      .reason h3 { margin: 4px 0 8px; font-size: 21px; font-weight: 900; }
      .reason p { margin: 0; font-size: 16px; }

      /* plans */
      .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 26px; }
      .plan {
        background: var(--card); border: 1.5px solid var(--border); border-radius: 22px;
        padding: 30px 30px 26px; box-shadow: var(--shadow);
      }
      .plan .plan-tag {
        display: inline-block; font-size: 13.5px; font-weight: 700; color: #fff;
        background: var(--blue); border-radius: 999px; padding: 3px 14px; margin-bottom: 12px;
      }
      .plan.accent .plan-tag { background: var(--orange); }
      .plan h3 { font-size: 24px; font-weight: 900; margin: 0 0 6px; }
      .plan .plan-desc { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 18px; }
      .price-rows { border-top: 1px solid var(--border); }
      .price-row {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        padding: 12px 2px; border-bottom: 1px solid var(--border);
      }
      .price-row .name { font-weight: 500; }
      .price-row .name small { display: block; color: var(--ink-soft); font-size: 13.5px; font-weight: 400; }
      .price-row .yen { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 24px; white-space: nowrap; }
      .price-row .yen small { font-size: 14px; font-weight: 700; }
      .price-row .yen .per { font-size: 14px; color: var(--ink-soft); font-family: "Noto Sans JP", sans-serif; font-weight: 500; }
      .plan .formula {
        background: var(--bg-soft); border-radius: 12px; padding: 12px 16px;
        font-weight: 700; font-size: 15.5px; margin: 18px 0 0; text-align: center;
      }
      .plan ul.notes { margin: 14px 0 0; padding-left: 1.15em; font-size: 14.5px; color: var(--ink-soft); }
      .plan ul.notes li { margin: 3px 0; }
      .use-cases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
      .use-cases span {
        background: var(--orange-soft); color: var(--ink); border-radius: 999px;
        font-size: 14px; font-weight: 700; padding: 5px 14px;
      }
      .new-price {
        display: inline-block; background: var(--orange); color: #fff; font-size: 12.5px; font-weight: 700;
        border-radius: 6px; padding: 1px 8px; margin-left: 8px; vertical-align: 3px;
      }
      .minis { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 40px; }
      .mini {
        background: var(--card); border: 1.5px solid var(--border); border-radius: 22px; padding: 26px 28px;
      }
      .mini h3 { font-size: 21px; font-weight: 900; margin: 0 0 6px; }
      .mini p { font-size: 15.5px; margin: 0 0 10px; color: var(--ink-soft); }
      .mini .price-rows { border-top: none; }
      .mini .price-row { padding: 8px 2px; }
      .mini .price-row:last-child { border-bottom: none; }

      /* tables */
      .tbl-wrap { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 18px; background: var(--card); }
      table.fare { border-collapse: collapse; width: 100%; min-width: 520px; }
      table.fare th, table.fare td { padding: 14px 18px; text-align: right; font-size: 16.5px; }
      table.fare th:first-child, table.fare td:first-child { text-align: left; }
      table.fare thead th { background: var(--bg-soft); font-weight: 700; font-size: 15px; color: var(--ink-soft); }
      table.fare tbody tr + tr td { border-top: 1px solid var(--border); }
      table.fare td.yen { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 20px; }
      .tbl-title { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 20px; margin: 34px 0 12px; }
      .tbl-title:first-of-type { margin-top: 0; }
      .fineprint { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
      .fineprint li { margin: 2px 0; }

      /* simulator */
      .sim {
        background: var(--card); border: 2px solid var(--blue); border-radius: 26px;
        box-shadow: var(--shadow); padding: 34px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px;
      }
      .sim-step { margin-bottom: 26px; }
      .sim-step:last-child { margin-bottom: 0; }
      .sim-step .step-label {
        font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 17px; margin-bottom: 10px;
        display: flex; align-items: center; gap: 10px;
      }
      .sim-step .step-label .n {
        background: var(--blue); color: #fff; width: 26px; height: 26px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
      }
      .chips { display: flex; flex-wrap: wrap; gap: 9px; }
      .chip {
        font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink);
        background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 999px;
        padding: 9px 18px; min-height: 46px; cursor: pointer;
      }
      .chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
      .chip small { font-weight: 500; font-size: 13px; }
      .toggle-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; min-height: 44px; }
      .toggle-row input { width: 22px; height: 22px; margin-top: 5px; accent-color: var(--blue); flex: none; }
      .toggle-row .t-main { font-weight: 700; }
      .toggle-row .t-sub { display: block; font-size: 13.5px; color: var(--ink-soft); font-weight: 400; }
      .sim-result {
        background: var(--bg-soft); border-radius: 20px; padding: 26px 26px 22px;
        display: flex; flex-direction: column;
      }
      .sim-result .r-title { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 17px; margin-bottom: 12px; }
      .sim-result .r-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 15.5px; border-bottom: 1px dashed var(--border); }
      .sim-result .r-row span:last-child { font-weight: 700; white-space: nowrap; }
      .sim-result .r-total {
        display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px;
      }
      .sim-result .r-total .lbl { font-weight: 700; }
      .sim-result .r-total .amt { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 40px; color: var(--blue-deep); line-height: 1.1; }
      .sim-result .r-total .amt small { font-size: 18px; }
      .sim-result .r-note { font-size: 13px; color: var(--ink-soft); margin: 10px 0 18px; }
      .sim-note { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.7; }
      .sim-result .btn { margin-top: auto; width: 100%; }

      /* flow */
      .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
      .step { position: relative; padding-top: 8px; }
      .step .s-num {
        font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; color: var(--blue);
        font-size: 15px; letter-spacing: 0.14em;
      }
      .step .s-circle {
        width: 58px; height: 58px; border-radius: 50%; background: var(--bg-soft);
        border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center;
        font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 24px; color: var(--blue-deep);
        margin: 8px 0 14px;
      }
      .step h3 { font-size: 19px; font-weight: 900; margin: 0 0 8px; }
      .step p { font-size: 15px; margin: 0; color: var(--ink-soft); }
      .step::after {
        content: ""; position: absolute; top: 44px; right: -14px; width: 10px; height: 10px;
        border-top: 3px solid var(--blue-pale); border-right: 3px solid var(--blue-pale); transform: rotate(45deg);
      }
      .step:last-child::after { display: none; }

      /* car & driver */
      .car-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
      .car-photo { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
      .car-photo img { width: 100%; height: 100%; object-fit: cover; }
      .car-photo figcaption {
        background: var(--card); padding: 14px 20px; font-weight: 700; font-size: 15.5px;
        border-top: 1px solid var(--border);
      }
      .spec-list { list-style: none; margin: 22px 0 0; padding: 0; }
      .spec-list li {
        padding: 13px 2px; border-bottom: 1px solid var(--border); font-size: 16px;
        display: flex; gap: 12px; align-items: flex-start;
      }
      .spec-list li svg { flex: none; margin-top: 5px; color: var(--blue); }
      .driver-grid { display: grid; grid-template-columns: 380px 1fr; gap: 44px; align-items: start; }
      .driver-grid figure { margin: 0; }
      .driver-grid figure img { border-radius: 24px; box-shadow: var(--shadow); aspect-ratio: 3 / 3.4; object-fit: cover; width: 100%; }
      .driver-grid figcaption { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; text-align: center; }
      .driver-name { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 28px; margin: 0 0 2px; }
      .driver-name small { font-size: 16px; color: var(--blue-deep); margin-left: 10px; }
      .career { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
      .career span { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 14.5px; font-weight: 700; }
      .driver-msg p { margin: 0 0 14px; font-size: 16.5px; }
      .driver-msg .strong { font-weight: 700; font-size: 19px; font-family: "Zen Maru Gothic", sans-serif; }

      /* faq */
      .faq-list { max-width: 860px; }
      details.faq {
        background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; margin-bottom: 14px;
      }
      details.faq summary {
        cursor: pointer; font-weight: 700; font-size: 17.5px; padding: 18px 52px 18px 22px;
        list-style: none; position: relative; min-height: 56px; display: flex; align-items: center;
      }
      details.faq summary::-webkit-details-marker { display: none; }
      details.faq summary::after {
        content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
        font-size: 26px; color: var(--blue); font-weight: 400; line-height: 1;
      }
      details.faq[open ] summary::after { content: "−"; }
      details.faq .a { padding: 0 22px 20px; font-size: 16px; }
      details.faq .a p { margin: 0 0 8px; }
      details.faq .a ul { margin: 6px 0; padding-left: 1.2em; }

      /* contact */
      .contact-panel {
        background: var(--blue); border-radius: 30px; color: #fff; padding: 52px 48px;
        display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
      }
      .contact-panel h2 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 900; margin: 0 0 12px; line-height: 1.45; }
      .contact-panel p { margin: 0; opacity: 0.95; }
      .contact-actions { display: flex; flex-direction: column; gap: 14px; }
      .contact-actions .btn { background: #fff; color: var(--ink); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); font-size: 19px; min-height: 64px; }
      .contact-actions .btn .small { font-size: 13px; font-weight: 500; display: block; }
      .contact-actions .btn-line-w { background: var(--green); color: #fff; }
      .contact-actions .btn-tel-w .num { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 25px; letter-spacing: 0.02em; }
      .contact-actions .ca-note { font-size: 13.5px; text-align: center; opacity: 0.92; margin: 0; }

      footer.site {
        border-top: 1px solid var(--border); padding: 44px 0 120px; background: var(--bg-softer);
      }
      .footer-in { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
      footer.site .logo img { height: 52px; width: auto; }
      footer.site nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
      footer.site nav a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 2px; min-height: 40px; display: inline-flex; align-items: center; }
      footer.site .addr { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; }
      .copyright { font-size: 13.5px; color: var(--ink-soft); margin-top: 26px; }

      /* mobile fixed bar */
      .mobile-bar {
        display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--header-bg); backdrop-filter: blur(8px);
        border-top: 1px solid var(--border); padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        gap: 10px;
      }
      .mobile-bar .btn { flex: 1; min-height: 54px; font-size: 17px; border-radius: 13px; }

      @media (max-width: 900px) {
        nav.main { display: none; }
        .header-tel { margin-left: auto; font-size: 16.5px; padding: 10px 14px; }
        .header-in .logo img { height: 38px; }
        .hero-in { grid-template-columns: 1fr; padding: 38px 20px 48px; gap: 30px; }
        .hero-photo .badge { left: 10px; }
        .facts-in { grid-template-columns: 1fr; padding: 8px 20px; }
        .fact { padding: 13px 6px; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
        .fact + .fact { border-left: none; border-top: 1px dashed var(--border); }
        .fact-fare { flex-wrap: wrap; column-gap: 16px; }
        .fact-fare .v { flex: 1 1 210px; text-align: right; font-size: 17.5px; }
        .fact-fare .note { width: 100%; text-align: right; margin-top: 2px; }
        .reasons, .plans, .minis, .car-grid { grid-template-columns: 1fr; }
        .sim { grid-template-columns: 1fr; padding: 26px 22px; gap: 28px; }
        .flow { grid-template-columns: 1fr; gap: 30px; }
        .step::after { display: none; }
        .driver-grid { grid-template-columns: 1fr; gap: 26px; }
        .driver-grid figure img { aspect-ratio: 4 / 3.4; }
        .contact-panel { grid-template-columns: 1fr; padding: 38px 26px; gap: 28px; }
        .section { padding: 62px 0; }
        .mobile-bar { display: flex; }
        footer.site { padding-bottom: 110px; }
      }
      @media (max-width: 640px) {
        table.fare { min-width: 0; }
        table.fare th, table.fare td { padding: 11px 9px; font-size: 14px; }
        table.fare thead th { font-size: 13px; }
        table.fare td.yen { font-size: 17px; white-space: nowrap; }
        table.fare td:not(:first-child) { white-space: nowrap; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .btn { transition: none; }
      }
    
      :root { color-scheme: light; }
      /* ---------- about ---------- */
      .about-lead { font-size: 19px; line-height: 2; margin: 0 0 18px; max-width: 820px; }
      .about-sub { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 22px; margin: 40px 0 14px; }
      .eligible { list-style: none; margin: 0; padding: 0; max-width: 820px; }
      .eligible li { padding: 10px 2px; border-bottom: 1px dashed var(--border); font-size: 16.5px; }
      /* ---------- hero more link ---------- */
      .hero-more { margin: 4px 0 0; }
      .hero-more a { font-weight: 700; color: var(--blue-deep); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
      /* ---------- other services (dashed) ---------- */
      .other-services { border: 2.5px dashed var(--blue); border-radius: 24px; padding: 36px 34px; background: var(--bg-softer); }
      .other-services h2 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 900; margin: 0 0 8px; font-family: "Zen Maru Gothic", sans-serif; }
      .other-services .os-label { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 24px; font-weight: 700; }
      .os-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
      .os-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; }
      .os-item h3 { margin: 0 0 6px; font-size: 20px; font-weight: 900; }
      .os-item p { margin: 0 0 8px; font-size: 15.5px; }
      .os-item .os-price { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 21px; color: var(--blue-deep); margin: 0; }
      .os-item .os-price small { font-size: 13.5px; color: var(--ink-soft); font-family: "Noto Sans JP", sans-serif; font-weight: 500; }
      @media (max-width: 900px) { .os-grid { grid-template-columns: 1fr; } }
      /* ---------- sub pages / articles ---------- */
      .page-wrap { max-width: 860px; margin: 0 auto; padding: 52px 20px 76px; }
      .page-head { margin-bottom: 34px; }
      .page-head h1 { font-size: clamp(27px, 4.4vw, 38px); font-weight: 900; line-height: 1.45; margin: 0 0 10px; }
      .page-date { color: var(--ink-soft); font-size: 15px; font-weight: 700; margin: 0; }
      .page-hero { margin: 0 0 34px; }
      .page-hero img { border-radius: 22px; box-shadow: var(--shadow); width: 100%; }
      .article-body { font-size: 16.5px; }
      .article-body p { margin: 0 0 1.1em; }
      .article-body img { border-radius: 14px; margin: 10px auto; height: auto; }
      .article-body h2 { font-size: 24px; font-weight: 900; margin: 1.6em 0 0.6em; line-height: 1.5; }
      .article-body h3 { font-size: 20px; font-weight: 900; margin: 1.4em 0 0.5em; line-height: 1.5; }
      .article-body ul, .article-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
      .article-body table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; margin: 0 0 1.2em; }
      .article-body th, .article-body td { border: 1px solid var(--border); padding: 9px 13px; font-size: 15.5px; }
      .article-body iframe { max-width: 100%; }
      .article-body blockquote { margin: 0 0 1.1em; padding: 6px 20px; border-left: 4px solid var(--blue-pale); color: var(--ink-soft); }
      .article-body .has-text-align-center { text-align: center; }
      .article-body .swell-block-faq { margin: 0 0 1.2em; }
      .article-body .swell-block-faq__item { border: 1.5px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
      .article-body .faq_q { background: var(--bg-soft); font-weight: 700; padding: 14px 18px; margin: 0; }
      .article-body .faq_a { padding: 14px 18px; margin: 0; }
      .article-cta { margin-top: 52px; background: var(--blue); border-radius: 26px; color: #fff; padding: 38px 34px; text-align: center; }
      .article-cta h2 { font-size: 24px; font-weight: 900; margin: 0 0 10px; line-height: 1.5; }
      .article-cta p { margin: 0 0 22px; opacity: 0.95; font-size: 15.5px; }
      .article-cta .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
      .article-cta .btn { background: #fff; color: var(--ink); font-size: 18px; min-height: 58px; }
      .article-cta .btn-line-w { background: var(--green); color: #fff; }
      /* ---------- blog list ---------- */
      .post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
      .post-list li { border: 1.5px solid var(--border); border-radius: 18px; background: var(--card); overflow: hidden; }
      .post-list a { display: grid; grid-template-columns: 200px 1fr; gap: 0; text-decoration: none; color: var(--ink); }
      .post-list .pl-img { height: 100%; min-height: 130px; background: var(--bg-soft); }
      .post-list .pl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .post-list .pl-body { padding: 18px 22px; }
      .post-list .pl-date { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; }
      .post-list .pl-title { font-weight: 700; font-size: 17.5px; line-height: 1.6; margin-top: 4px; }
      @media (max-width: 640px) { .post-list a { grid-template-columns: 110px 1fr; } .post-list .pl-body { padding: 13px 15px; } .post-list .pl-title { font-size: 15.5px; } }
      .sm-list { list-style: none; margin: 0 0 30px; padding: 0; }
      .sm-list li { padding: 7px 2px; border-bottom: 1px dashed var(--border); }