/* ==========================================================================
   Pサポ — Base stylesheet
   Foundation only: design tokens, reset/base, page-scaffold layout.
   Component styling lives elsewhere. Tokens follow design-token.html.
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */

:root {
  /* Brand palette (design-token.html) */
  --color-navy:    #1B3A5C;   /* Primary   — 信頼 / ブランド */
  --color-blue:    #2E6AA8;   /* Secondary — 情報セクション */
  --color-orange:  #F77F2D;   /* Accent    — CTA / 強調 */
  --color-green:   #1F9D75;   /* Success   — 保険 / 安心 */
  --color-red:     #D63D3D;   /* Alert     — 解約 / 注意 */
  --color-surface: #F4F6FA;   /* Surface   — 背景 */

  /* Semantic roles */
  --color-bg:         #ffffff;
  --color-primary:    var(--color-orange);
  --color-link:       var(--color-blue);
  --color-danger:     var(--color-red);
  --color-success:    var(--color-green);

  /* Text */
  --color-text:       #333a42;   /* default body text — near-black gray */
  --color-ink:        #1B3A5C;   /* headings / brand navy */
  --color-ink-muted:  #6b7785;
  --color-ink-soft:   #94a0ac;
  --color-on-fill:    #ffffff;   /* text on a solid color */

  /* Lines & soft fills */
  --color-line:        #e3e8ef;
  --color-line-soft:   #eef2f6;
  --color-surface-green: #e7f5ee;
  --color-line-green:    #9ed8bb;

  /* Typography */
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', 'Consolas', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;

  /* Type scale (design-token.html) */
  --fs-heading-l: 22pt;   /* HEADING L */
  --fs-heading-m: 16pt;   /* HEADING M */
  --fs-title:     14pt;   /* TITLE */
  --fs-body:      11pt;   /* BODY */
  --fs-caption:    8pt;   /* CAPTION */

  --lh-tight: 1.3;
  --lh-base:  1.75;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;

  /* Shadow */
  --shadow-card: 0 2px 10px rgba(27, 58, 92, .07);
  --shadow-cta:  0 6px 16px rgba(247, 127, 45, .28);

  /* Layout */
  --content-narrow: 960px;
  --page-pad-x:     20px;
  --page-pad-y:     20px;
}

/* 2. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  font-feature-settings: "palt" 1;
}

img,
svg {
  vertical-align: top;
  max-width: 100%;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

h1, h2, h3, h4 {
  color: var(--color-ink);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-heading-l); }
h2 { font-size: var(--fs-heading-m); }

ul {
  list-style: none;
}

/* 3. Page layout (scaffold shared by every page)
   ========================================================================== */

/* Header — navy branding banner, clickable (returns to top) */
.site-header {
  background: linear-gradient(135deg, #294f76 0%, var(--color-navy) 55%, #14283d 100%);
  color: var(--color-on-fill);
  cursor: pointer;
}

.site-header__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-5) var(--page-pad-x);
}

/* Taglines (top & bottom) */
.site-header__tag {
  color: #9fb2c6;
  font-size: var(--fs-caption);
  line-height: 1.6;
}

/* Member view — show only the service title + by Pサポ */
.site-header--member .site-header__tag {
  display: none;
}

/* Service title — 近隣トラブルサポート */
.site-header__title {
  margin: 4px 0 2px;
  color: var(--color-on-fill);
  font-size: var(--fs-heading-l);
  font-weight: var(--fw-heavy);
  line-height: 1.2;
}

/* by Pサポ */
.site-header__sub {
  margin-bottom: 8px;
  color: var(--color-primary);
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-heavy);
  line-height: 1.25;
}

/* Main — centered content column, grows to push footer down */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--page-pad-y) var(--page-pad-x);
}

/* Footer — muted link bar, sits at the bottom */
.site-footer {
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--fs-caption);
  line-height: 2;
}

.site-footer__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-2) var(--page-pad-x);
  text-align: center;
}

.site-footer a {
  color: var(--color-ink-muted);
}

/* 4. Components
   ========================================================================== */

/* Guest page — intro (lead + check list) */
.intro__lead {
  margin-bottom: var(--space-4);
}

.intro__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.intro__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.intro__points svg {
  flex: none;
  margin-top: 4px;
}

/* Info card — service-attached insurance (green) */
.info-card {
  margin: var(--space-4) 0 var(--space-2) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-green);
  border: 1px solid var(--color-line-green);
  border-radius: var(--radius-md);
}

.info-card__label {
  color: var(--color-success);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.info-card__title {
  margin: var(--space-1) 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
}

.info-card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.info-card__body strong {
  color: var(--color-ink);
}

/* Notice variant — neutral gray background */
.info-card--notice {
  background: #F8FAFC;
  border-color: var(--color-line);
}
.info-card--notice .info-card__title {
  color: var(--color-ink);
  font-size: var(--fs-body);
}

.info-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.info-card__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.info-card__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-ink-muted);
}

/* Accordion — reusable collapsible card */
.accordion {
  margin: var(--space-2) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  interpolate-size: allow-keywords;
}

/* Animate the open/close. Falls back to an instant toggle where unsupported. */
.accordion::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .25s ease, content-visibility .25s allow-discrete;
}

.accordion[open]::details-content {
  block-size: auto;
}

.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #EEF2F7;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}

.accordion[open] .accordion__head {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.accordion__head::-webkit-details-marker {
  display: none;
}

.accordion__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.accordion__chevron {
  flex: none;
  color: var(--color-ink-muted);
  transition: transform .2s ease;
}

.accordion[open] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__lead {
  padding: var(--space-3) var(--space-4) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.accordion__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  list-style: none;
}

.accordion__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.accordion__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-ink-muted);
}

.accordion__list strong {
  color: var(--color-ink);
}

/* Guest CTA — navy banner + action buttons */
#guest-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner {
  padding: var(--space-4);
  background: var(--color-navy);
  color: var(--color-on-fill);
  border-radius: var(--radius-md);
}

.cta-banner__title {
  color: rgba(255, 255, 255, .8);
  line-height: var(--lh-tight);
}

.cta-banner__price {
  font-size: var(--fs-title);
}

.cta-banner__price strong {
  margin: 0 2px;
  font-size: var(--fs-heading-l);
  font-weight: var(--fw-heavy);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-fill);
}

.btn--outline {
  background: var(--color-bg);
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.cta-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.cta-notes li {
  position: relative;
  padding-left: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
}

.cta-notes li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* Member page — active subscription (会員ID + サポート窓口) */
#page-member {
  margin: 0 auto;
}

.member-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #EEF2FB;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-width: 400px;
  margin: 0 auto;
}

.member-card__avatar {
  flex: none;
  color: var(--color-navy);
}

.member-card__label {
  color: var(--color-ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-1)
}

.member-card__value {
  font-weight: var(--fw-heavy);
  color: var(--color-ink);
  line-height: var(--lh-tight);
  word-break: break-all;
}

.member-card__cta {
  max-width: 400px;
  margin: 0 auto;
  flex-direction: column;
  gap: var(--space-1);
  height: auto;
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.member-card__cta:hover {
  text-decoration: none;
}

.member-card__cta-note {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}

/* トラブル相談サポート overview */
.support {
  margin-top: var(--space-4);
}

.support__title {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.support__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}

.support__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.support-card {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.support-card__heading {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.support-card__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}

/* 置き配盗難保険・保険金請求 */
.claim {
  margin-top: var(--space-4);
}

.claim__title {
  margin-bottom: var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-success);
  line-height: var(--lh-tight);
}

.claim__amount {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
}

.claim__desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-base);
}

/* 保険金請求ステップ */
.stepper {
  display: flex;
  margin: var(--space-4) 0;
}

.stepper__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.stepper__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 0;
  border-top: 2px dashed var(--color-line-green);
  z-index: 0;
}

.stepper__node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-on-fill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.stepper__label {
  font-size: var(--fs-caption);
  color: var(--color-text);
  text-align: center;
  line-height: var(--lh-tight);
}

/* 保険金請求 関連書類リンク */
.doc-links {
  margin-top: var(--space-4);
}

.doc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.doc-link__label {
  position: relative;
  padding-left: var(--space-3);
}

.doc-link__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--color-success);
}

.doc-link:hover {
  text-decoration: none;
  background: var(--color-surface);
}

.doc-link__arrow {
  flex: none;
  color: var(--color-ink-soft);
}

.doc-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  line-height: var(--lh-base);
}

/* 事故連絡・相談窓口 notice */
.contact-notice__title {
  position: relative;
  padding-left: var(--space-4);
}

.contact-notice__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink);
}

.contact-notice__tel {
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
}

.contact-notice__hours {
  margin-left: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-ink-muted);
}

.contact-notice__company {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  line-height: var(--lh-base);
}

/* 保険金請求の手順 */
.procedure {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.procedure__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.procedure__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-5);
  list-style: decimal;
}

.procedure__list li {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bullet-list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.bullet-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-ink-muted);
}

.support-card__desc {
  margin-top: var(--space-1);
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.member-card__note {
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  text-align: center;
}

.member-card__tel {
  margin-top: var(--space-1);
  text-align: center;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.member-card__tel a {
  color: inherit;
}

/* Plain variant of the support component — no green dot markers */
.support--plain .support__title,
.support--plain .support-card__heading,
.support--plain .support-card__desc {
  padding-left: 0;
}

.support--plain .support__title::before,
.support--plain .support-card__heading::before {
  display: none;
}

.support--plain .support__title {
  padding-left: var(--space-3);
  border-left: 5px solid var(--color-primary);
}

/* Contact page — inquiry guide */
.contact-lead {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
}

.contact-note {
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.contact-hours__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-hours__title svg {
  flex: none;
}

.contact-hours__main {
  margin-top: var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.contact-hours__sub {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  line-height: var(--lh-tight);
}

.contact-submit {
  gap: var(--space-2);
  max-width: 400px;
  margin: var(--space-6) auto 0;
}

.contact-submit:hover {
  text-decoration: none;
}

/* Warning variant — alert tint + icon title */
.info-card--warning {
  background: #FEF1E7;
  border-color: #F8C79B;
}

.info-card--warning .info-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-orange);
  font-size: var(--fs-body);
}

.info-card--warning .info-card__title svg {
  flex: none;
}

.info-card--warning .info-card__list li,
.info-card--warning .info-card__list li::before {
  color: #B85410;
}

/* Unsubscribe page — cancel flow */
.btn--danger {
  background: var(--color-danger);
  color: var(--color-on-fill);
}

/* Inactive state — plain "解約" text shown when there is no active subscription */
.btn--disabled {
  background: var(--color-line-soft);
  color: var(--color-ink-soft);
  cursor: default;
}

.unsubscribe-main {
  max-width: 600px;
  margin: 0 auto;
}

.unsubscribe-main h2 {
  width: fit-content;
  padding-bottom: var(--space-1);
  border-bottom: 3px solid var(--color-red);
}

.plan-label {
  margin: var(--space-5) auto var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.plan-card {
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: 5px solid var(--color-navy);
  border-radius: var(--radius-sm);
}

.plan-card__title {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.plan-card__price {
  margin-top: var(--space-1);
  font-size: var(--fs-title);
}

.plan-card__price strong {
  margin: 0 2px;
  font-size: var(--fs-heading-l);
  color: var(--color-ink);
  font-weight: var(--fw-heavy);
}

.cancel-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  margin: var(--space-6) auto 0;
}

.cancel-note {
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
}

/* Legal page — 特定商取引法の表記 (plain two-level term/value list) */
.page-title {
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-line);
}

.legal {
  margin-top: var(--space-5);
}

/* Sub-level term — small square marker */
.legal__term {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
}

.legal__term::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--color-ink);
}

/* Main-level term — larger square + section spacing above */
.legal__term--main {
  margin-top: var(--space-6);
}

.legal__term--main::before {
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
}

.legal .legal__term--main:first-of-type {
  margin-top: 0;
}

.legal__desc {
  margin-bottom: var(--space-4);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-base);
}

/* Policy page — 個人情報の取り扱いについて (numbered clauses) */
.policy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
  list-style: none;
}

.policy__heading {
  margin-bottom: var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
}

.policy__num {
  margin-right: var(--space-1);
  color: var(--color-blue);
}

.policy__body {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.policy__body + .policy__body {
  margin-top: var(--space-2);
}

/* Terms page — 販売規約 (条文 + 附則: 保険ご利用条件・重要事項説明書) */

/* Article bodies sit indented under their 第N条 heading (matches the PDF) */
.policy--terms .policy__body {
  padding-left: 2em;
}

.terms-date {
  margin-top: var(--space-8);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.terms-supplement {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-line);
}

.terms-supplement__title {
  font-size: var(--fs-heading-m);
}

.terms-supplement__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-base);
}

/* Each 附則 document is enclosed in a bordered box (matches the PDF) */
.terms-doc {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--color-ink-soft);
  border-radius: var(--radius-sm);
}

.terms-doc__title {
  font-size: var(--fs-title);
  color: var(--color-ink);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  text-align: center;
}

.terms-doc__subtitle {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
  text-align: center;
}

.terms-clause {
  margin-top: var(--space-5);
}

.terms-clause__heading {
  margin-bottom: var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-base);
}

.terms-body {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.terms-body + .terms-body {
  margin-top: var(--space-2);
}

/* Hanging-indent levels for numbered / lettered sub-items (1. → (1) → (ア) → ①) */
.terms-l1 { padding-left: 1.8em; text-indent: -1.8em; }
.terms-l2 { padding-left: 3.6em; text-indent: -1.8em; }
.terms-l3 { padding-left: 5.4em; text-indent: -1.8em; }
.terms-l4 { padding-left: 7.2em; text-indent: -1.8em; }

/* Plain block indents for paragraphs without a leading marker */
.terms-p1 { padding-left: 1.8em; }
.terms-p2 { padding-left: 3.6em; }

.terms-left {
  text-align: left;
}

.terms-center {
  text-align: center;
}

.terms-right {
  text-align: right;
}

.terms-table {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.terms-table th,
.terms-table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-base);
}

.terms-table th {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: var(--fw-bold);
}

/* Payment success page */
.success-main {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: var(--space-4) auto var(--space-5);
  border-radius: 50%;
  background: var(--color-surface-green);
  color: var(--color-success);
}

.success__title {
  font-size: var(--fs-heading-m);
  color: var(--color-ink);
}

.success__message {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
  line-height: var(--lh-base);
}

.success__plan-label {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
  text-align: left;
}

.success__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* 5. Responsive
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --page-pad-x: 20px;
    --page-pad-y: 20px;

    /* Scale the type down on mobile to fit narrow screens */
    --fs-heading-l: 18pt;
    --fs-heading-m: 14pt;
    --fs-title:     12pt;
    --fs-body:      10pt;
    --fs-caption:    7pt;
  }
}