/* ==========================================================================
   料金ページ（pages/pricing.html）
   Figma PC 537:16044（pricing-detail_PC）/ SP 615:5749（pricing-detail-sp）
   SP を基準に書き、@media (min-width: 1025px) で PC に切り替える
   400〜1024px は SP の形のまま、中身を最大 560px で中央に寄せる

   目次
    1. 共通（金額の数字・SPの中身の最大幅）
    2. hero               .p-pricing-hero
    3. pricing-main       .p-pricing-main（カードと機能の2列）
    4. プランのカード     .p-pricing-plan
    5. 年払いの箱         .p-pricing-annual
    6. 含まれる機能       .p-pricing-features
    7. シミュレーション比較 .p-pricing-comparison / .p-pricing-sim（人数ごとのカード）
    8. お支払い方法       .p-pricing-payments
    9. よくある質問       .p-pricing-faq
   10. 近日公開予定の札   .p-pricing-soon
   ========================================================================== */

/* ---- 1. 共通 ---- */

/* オレンジのグラデーションで塗る金額の数字。
   Figma は Roboto SemiBold（600）。<head> の Google Fonts は 400・700 だけなので、今は 700 で表示される */
.p-pricing-num {
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
  color: var(--color-secondary); /* background-clip が効かない環境の代わりの色 */
  background: var(--color-brand-default);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SPの形のまま幅が広がったとき（400〜1024px）の中身の最大幅 */
.p-pricing-features__inner {
  max-width: 560px;
  margin-inline: auto;
}

.p-pricing-comparison__inner,
.p-pricing-payments__inner,
.p-pricing-faq__inner {
  max-width: 592px; /* 560px ＋ 左右16px */
}

@media (min-width: 1025px) {
  .p-pricing-features__inner {
    max-width: none;
    margin-inline: 0;
  }

  .p-pricing-comparison__inner,
  .p-pricing-payments__inner,
  .p-pricing-faq__inner {
    max-width: calc(var(--content-width) + 80px);
  }
}

/* ---- 2. hero（PC 537:16052 / SP 615:5776） ---- */
.p-pricing-hero {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-default);
}

.p-pricing-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 600px;
  margin-inline: auto;
  padding: var(--space-40) var(--space-20);
}

.p-pricing-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.p-pricing-hero__label {
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--color-text-primary);
  border-radius: 20px;
  font: 700 12px/1.4 var(--font-en);
  white-space: nowrap;
}

.p-pricing-hero__title {
  font: 700 24px/1.4 var(--font-jp);
  text-align: center;
}

.p-pricing-hero__lead {
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-sub);
  text-align: center;
}

@media (min-width: 1025px) {
  .p-pricing-hero__inner {
    gap: var(--space-24);
    max-width: calc(var(--content-width) + 80px);
    padding: var(--space-64) var(--space-40);
  }

  .p-pricing-hero__heading {
    gap: var(--space-24);
  }

  .p-pricing-hero__title {
    font-size: 40px; /* Figmaの実値（.type-* に無い大きさ） */
  }

  /* PCも中央寄せの2行（#33 で決めた値。Figmaは幅800pxの箱で左寄せ） */
  .p-pricing-hero__lead {
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text-secondary);
  }
}

/* ---- 3. pricing-main（PC 537:16058 / SP 615:5781 ＋ 615:5819） ---- */
.p-pricing-main__plan {
  /* 左右は16px。幅が広いときはカードが最大560pxになるように余白を増やす */
  padding: var(--space-20) max(var(--space-16), calc(50% - 280px));
  background: #f3f4f6; /* Figmaの実値（Background/lightgrey） */
}

@media (min-width: 1025px) {
  .p-pricing-main {
    padding-block: var(--space-80);
    background: var(--color-white);
  }

  .p-pricing-main__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-48);
    max-width: calc(var(--content-width) + 80px);
    margin-inline: auto;
    padding-inline: var(--space-40);
  }

  .p-pricing-main__plan {
    flex: 0 0 580px;
    padding: 0;
    background: none;
  }
}

/* ---- 4. プランのカード（PC 537:16060 / SP 615:5782） ----
   オレンジの枠は箱の外側に付く（SP 3px・PC 12px）。枠の分だけ負のマージンで外に出して、箱の位置を Figma に合わせている。
   枠のグラデーションは Figma のスクリーンショットから読み取った近似値（Figma のコードでは単色 #ff963f と返ってくる） */
.p-pricing-plan {
  --plan-border: 3px;
  display: flex;
  flex-direction: column;
  margin: calc(var(--plan-border) * -1);
  border: var(--plan-border) solid transparent;
  border-radius: calc(12px + var(--plan-border));
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(114deg, #ff963f 0%, #ffbe5c 18%, #ff673b 100%) border-box; /* Figmaの見た目からの近似値 */
  box-shadow: 0 0 1.62px 0 rgba(0, 0, 0, 0.18); /* Figmaの実値（--shadow-default の半分のぼかし） */
}

.p-pricing-plan__line {
  width: 100%;
}

/* 上段：ロゴ・バッジ・月額 */
.p-pricing-plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-20) 0;
}

.p-pricing-plan__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-pricing-plan__logo {
  width: 70px;
  height: 30px;
}

.p-pricing-plan__badge {
  padding: 6px 10px;
  border-radius: 6px 0; /* 左上と右下だけ丸める */
  font: 700 12px/1.6 var(--font-jp);
  color: var(--color-white);
  background: var(--color-secondary);
  white-space: nowrap;
}

.p-pricing-plan__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-strong);
}

.p-pricing-plan__type {
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

.p-pricing-plan__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* 「1社あたり」。文字の上に点が5つ乗る（点は飾りの画像を重ねている） */
.p-pricing-plan__per {
  position: relative;
  display: flex;
  align-items: baseline;
  padding: 9px 0 11px;
  font: 700 30px/1 var(--font-jp);
  white-space: nowrap;
}

.p-pricing-plan__per-dots {
  position: absolute;
  top: 0;
  left: 8px;
  width: 120px;
  max-width: none;
  height: 6px;
}

.p-pricing-plan__per-num {
  margin-right: 2px;
  font: 500 36px/1 var(--font-en);
}

.p-pricing-plan__per-text {
  letter-spacing: -0.02em; /* Figmaは1文字ずつ 0.6px・-0.3px・-1.8px・0。平均に近い値でまとめた */
}

.p-pricing-plan__monthly {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.p-pricing-plan__monthly-label {
  padding-bottom: var(--space-12);
  font: 400 22px/1 var(--font-jp);
  letter-spacing: 0.22px;
}

.p-pricing-plan__monthly-value {
  display: flex;
  align-items: flex-end;
}

.p-pricing-plan__monthly-num {
  margin-right: -2px;
  padding-right: 4px; /* 字詰めで最後の0の右端が切れないための余白 */
  font-size: 72px;
  letter-spacing: -0.05em; /* Figmaは1文字ずつ -4.32px・-3.6px・-2.16px。まとめた値 */
}

.p-pricing-plan__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  padding-bottom: 14px;
}

.p-pricing-plan__tax {
  margin-bottom: -2px;
  font: 500 10px/1.6 var(--font-jp);
  white-space: nowrap;
}

.p-pricing-plan__yen {
  font: 400 28px/1 var(--font-jp);
}

.p-pricing-plan__initial {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 12px/1.6 var(--font-jp);
  white-space: nowrap;
}

.p-pricing-plan__initial-num {
  margin-right: 2px; /* 「0」と「円」の間（#33 で決めた値） */
  font: 600 22px/1 var(--font-en);
}

/* 「10人でも1,000人でも、月3,000円のまま。」の箱（#33 で決めた値。Figmaの人数別の段の代わり） */
.p-pricing-plan__flat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border-radius: 8px;
  text-align: center;
  background: #fff1e9;
}

.p-pricing-plan__flat-main {
  font: 700 15px/1.5 var(--font-jp);
  color: var(--color-text-primary);
}

.p-pricing-plan__flat-em {
  font-size: 18px;
}

.p-pricing-plan__flat-em--price {
  color: var(--color-primary);
}

.p-pricing-plan__flat-sub {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

/* 下段：チェックの一覧と注記 */
.p-pricing-plan__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-16) var(--space-20);
}

.p-pricing-plan__check {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-primary);
}

.p-pricing-plan__check-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.p-pricing-plan__notes {
  padding: var(--space-12) var(--space-20) var(--space-20);
  font: 400 10px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
  .p-pricing-plan {
    --plan-border: 12px;
    gap: var(--space-24);
    padding: var(--space-40);
  }

  .p-pricing-plan__head {
    gap: var(--space-24);
    padding: 0;
  }

  .p-pricing-plan__logo {
    width: 100px;
    height: 42px;
  }

  .p-pricing-plan__badge {
    padding: 10px 14px;
    border-radius: 8px 0;
    font-size: 16px;
    line-height: 1;
  }

  .p-pricing-plan__price {
    align-items: flex-start;
    gap: 6px;
  }

  .p-pricing-plan__type {
    font-size: 16px;
  }

  .p-pricing-plan__amount {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-8);
  }

  .p-pricing-plan__initial {
    align-items: baseline;
    gap: 0;
    margin-top: 10px; /* 上の「月額3,000円」との間を16pxに（親の gap 6px ＋ 10px。#33 で決めた値） */
    font-size: 16px;
    line-height: 1;
  }

  .p-pricing-plan__initial-label {
    margin-right: var(--space-8);
  }

  .p-pricing-plan__initial-num {
    font-size: 32px;
    letter-spacing: -0.96px;
  }

  .p-pricing-plan__flat {
    padding: var(--space-16) var(--space-20);
  }

  .p-pricing-plan__flat-main {
    font-size: 17px; /* #33 で決めた値 */
  }

  .p-pricing-plan__flat-em {
    font-size: 20px; /* #33 で決めた値 */
  }

  .p-pricing-plan__flat-sub {
    font-size: 13px; /* #33 で決めた値 */
  }

  .p-pricing-plan__checks {
    gap: var(--space-8);
    padding: 0;
  }

  .p-pricing-plan__notes {
    padding: 0;
    font-size: 12px;
  }
}

/* ---- 5. 年払いの箱（PC 537:16128 / SP 616:1734） ----
   SP：カードの幅いっぱいの枠（下の角だけ丸い）。PC：カードの中の独立した箱（角丸12px・影つき） */
.p-pricing-annual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--space-16) var(--space-20);
  border: 1px solid var(--color-border-grey);
  border-radius: 0 0 8px 8px;
  color: var(--color-text-strong);
  background: var(--color-white);
}

.p-pricing-annual__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font: 700 16px/1.6 var(--font-jp);
  text-align: center;
}

.p-pricing-annual__slash {
  flex: none;
}

/* 左の斜線は同じ向きの画像を左右反転して使う（Figmaでも反転して置いてある） */
.p-pricing-annual__slash--left {
  transform: scaleX(-1);
}

.p-pricing-annual__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.p-pricing-annual__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
}

.p-pricing-annual__per {
  font: 400 12px/1.6 var(--font-jp);
}

.p-pricing-annual__amount {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.p-pricing-annual__num {
  font-size: 44px;
  letter-spacing: -0.44px;
}

.p-pricing-annual__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  padding-bottom: var(--space-8);
}

.p-pricing-annual__tax {
  margin-bottom: -1px;
  font: 500 10px/1.6 var(--font-jp);
}

.p-pricing-annual__yen {
  font: 400 22px/1 var(--font-jp);
}

.p-pricing-annual__yearly {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-4);
  font: 500 10px/1.6 var(--font-jp);
  color: var(--color-text-sub);
  white-space: nowrap;
}

.p-pricing-annual__yearly-num {
  font: 500 18px/1.4 var(--font-en);
}

@media (min-width: 1025px) {
  .p-pricing-annual {
    gap: var(--space-16);
    padding: var(--space-32);
    border-radius: 12px;
    box-shadow: 0 0 1.62px 0 rgba(0, 0, 0, 0.18); /* Figmaの実値 */
  }

  .p-pricing-annual__title {
    font-size: 24px;
    line-height: 1.4;
  }

  .p-pricing-annual__body {
    gap: var(--space-12);
  }

  .p-pricing-annual__price {
    flex-direction: row;
    align-items: flex-end;
    gap: 2.5px;
  }

  .p-pricing-annual__per {
    display: flex;
    align-items: baseline;
    padding-bottom: 6px;
    font-size: 30px;
    line-height: 1;
  }

  .p-pricing-annual__per-num {
    font: 500 44px/1 var(--font-en);
  }

  .p-pricing-annual__amount {
    gap: 0;
  }

  .p-pricing-annual__num {
    margin-right: -6px;
    padding-right: 4px;
    font-size: 62px;
    letter-spacing: -0.62px;
  }

  .p-pricing-annual__unit {
    width: 52px;
    padding-bottom: var(--space-12);
  }

  .p-pricing-annual__tax {
    margin-bottom: -2px;
    font-weight: 400;
    font-size: 12px;
  }

  .p-pricing-annual__yen {
    font-size: 30px;
  }

  .p-pricing-annual__yearly {
    font-size: 14px;
    line-height: 1;
  }

  .p-pricing-annual__yearly-num {
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.27px;
  }

  .p-pricing-annual__yearly-tax {
    margin-left: 2px;
    font-size: 10px;
  }
}

/* ---- 6. 含まれる機能（PC 537:16173 / SP 615:5819） ---- */
.p-pricing-features {
  padding: var(--space-40) var(--space-16);
  background: var(--color-white);
}

.p-pricing-features__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.p-pricing-features__title {
  font: 700 20px/1.4 var(--font-jp);
  color: var(--color-text-strong);
}

.p-pricing-features__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* 左にオレンジの縦線が付く小見出し */
.p-pricing-features__heading {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

.p-pricing-features__heading::before {
  content: "";
  flex: none;
  width: 2px;
  height: 16px;
  margin-inline: -1px; /* Figmaでは幅0の位置に2pxの線が乗っている */
  background: var(--color-primary);
}

.p-pricing-features__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-pricing-features__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-white);
}

.p-pricing-features__item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-strong);
}

.p-pricing-features__item-text {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
  .p-pricing-features {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
  }

  .p-pricing-features__title {
    font-size: 20px; /* #33 で決めた値（Figmaは24px） */
    color: var(--color-text-primary);
  }

  .p-pricing-features__group {
    gap: var(--space-24);
  }

  .p-pricing-features__heading {
    font-size: 16px;
  }

  .p-pricing-features__heading::before {
    height: 24px;
  }

  /* Figmaは「ご利用者向け」のカードの間が16px、「企業向け」は24px。16pxに揃えた */
  .p-pricing-features__list {
    gap: var(--space-16);
  }

  /* 項目の余白と文字の大きさは #33 で決めた値（Figmaは 20px・16px・14px）。7項目にしたので詰めている */
  .p-pricing-features__item {
    gap: var(--space-4);
    padding: 14px 18px;
  }

  .p-pricing-features__item-title {
    font-size: 15px;
    color: var(--color-text-primary);
  }

  .p-pricing-features__item-text {
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text-secondary);
  }
}

/* ---- 7. シミュレーション比較（PC 537:16188 / SP 615:5831 の上半分） ----
   #33 で決めた形（Figmaと違う）：人数ごとのカード4枚。幅1200px以上で4列、480〜1199px 2列、それより狭いと1列 */
.p-pricing-comparison {
  padding-top: var(--space-40);
  background: #f3f4f6; /* Figmaの実値（Background/lightgrey） */
}

.p-pricing-comparison__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.p-pricing-comparison__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-pricing-comparison__title {
  font: 700 20px/1.4 var(--font-jp);
  color: var(--color-text-strong);
}

.p-pricing-comparison__lead {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-tertiary);
}

.p-pricing-comparison__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.p-pricing-comparison__note {
  margin-top: var(--space-16);
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

/* 人数ごとのカード */
.p-pricing-sim {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  border: 1px solid var(--color-border-grey);
  border-radius: 8px;
  background: var(--color-white);
}

.p-pricing-sim__title {
  font: 700 16px/1.4 var(--font-jp);
  color: var(--color-text-primary);
}

.p-pricing-sim__count {
  margin-right: 2px;
  font: 700 24px/1 var(--font-en);
}

.p-pricing-sim__rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-12);
}

.p-pricing-sim__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-pricing-sim__row + .p-pricing-sim__row {
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-default);
}

.p-pricing-sim__label {
  font: 500 12px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

.p-pricing-sim__value {
  display: flex;
  flex-direction: column;
}

.p-pricing-sim__price {
  font: 700 18px/1.4 var(--font-en);
  color: var(--color-text-secondary);
}

.p-pricing-sim__row--next .p-pricing-sim__price {
  color: var(--color-text-primary);
}

.p-pricing-sim__detail {
  font: 400 11px/1.6 var(--font-jp);
  color: var(--color-text-tertiary);
}

/* 「1年目で ◯円おトク」の帯 */
.p-pricing-sim__saving {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px var(--space-12);
  border-radius: 6px;
  font: 700 13px/1.4 var(--font-jp);
  color: var(--color-text-primary);
  text-align: center;
  background: #fff1e9;
}

/* 金額が長い（1,000人）と幅が足りないので、「1年目で」を上の行に置いて4枚とも同じ形にする */
.p-pricing-sim__saving-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 2px;
}

.p-pricing-sim__saving-num {
  font: 700 24px/1.2 var(--font-en); /* #33 で決めた値 */
  color: var(--color-primary);
}

@media (min-width: 480px) {
  .p-pricing-comparison__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .p-pricing-comparison {
    padding-block: var(--space-80);
    background: var(--color-background-base);
  }

  .p-pricing-comparison__inner {
    align-items: center;
    gap: var(--space-48);
  }

  .p-pricing-comparison__head {
    align-items: center;
    text-align: center;
  }

  .p-pricing-comparison__title {
    font-size: 24px;
    color: var(--color-text-primary);
  }

  .p-pricing-comparison__lead {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
  }

  .p-pricing-comparison__body {
    width: 100%;
  }

  .p-pricing-comparison__list {
    gap: var(--space-16);
  }

  .p-pricing-sim {
    padding: var(--space-24) var(--space-20);
  }

  .p-pricing-sim__price {
    font-size: 20px;
  }

  .p-pricing-sim__detail {
    font-size: 12px;
  }
}

/* 4列は幅1200px以上だけ。それより狭いと金額が折り返すので2列のまま */
@media (min-width: 1200px) {
  .p-pricing-comparison__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- 8. お支払い方法（PC 537:16217 / SP 615:5831 の下半分） ----
   #33 で決めた形（Figmaと違う）：アイコン付きのカード2枚。色はサイトのオレンジ（Figmaは水色のタグ） */
.p-pricing-payments {
  padding-block: var(--space-28) var(--space-40);
  background: #f3f4f6; /* Figmaの実値（Background/lightgrey） */
}

.p-pricing-payments__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-pricing-payments__title {
  font: 700 16px/1.6 var(--font-jp);
  color: var(--color-text-strong);
  text-align: center;
}

.p-pricing-payments__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.p-pricing-payments__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-20);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-white);
}

/* 淡いオレンジの丸にオレンジの線のアイコン */
.p-pricing-payments__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff1e9;
}

.p-pricing-payments__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-pricing-payments__name {
  font: 700 16px/1.6 var(--font-jp);
  color: var(--color-text-primary);
}

.p-pricing-payments__desc {
  font: 400 13px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

.p-pricing-payments__note {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
  text-align: center;
}

@media (min-width: 1025px) {
  .p-pricing-payments {
    padding-block: var(--space-64);
    background: var(--color-white);
  }

  .p-pricing-payments__inner {
    align-items: center;
    gap: var(--space-24);
  }

  .p-pricing-payments__title {
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text-primary);
  }

  .p-pricing-payments__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
    width: 100%;
    max-width: 960px; /* カード2枚の幅。Figmaに指定なし */
  }

  .p-pricing-payments__item {
    padding: var(--space-24);
  }

  .p-pricing-payments__desc {
    font-size: 14px;
  }

  .p-pricing-payments__note {
    font-size: 14px;
  }
}

/* ---- 9. よくある質問（PC 537:16226 / SP 615:5889） ---- */
.p-pricing-faq {
  padding-block: var(--space-40);
  background: var(--color-white);
}

.p-pricing-faq__inner,
.p-pricing-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.p-pricing-faq__title {
  font: 700 20px/1.4 var(--font-jp);
  color: var(--color-text-strong);
  text-align: center;
}

.p-pricing-faq__item {
  padding: var(--space-24);
  border: 1px solid var(--color-border-grey);
  border-radius: 6px;
  background: var(--color-white);
}

.p-pricing-faq__question {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  list-style: none;
  cursor: pointer;
}

.p-pricing-faq__question::-webkit-details-marker {
  display: none;
}

.p-pricing-faq__q {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  font: 700 14px/1.4 var(--font-en);
  color: var(--color-white);
  background: var(--color-primary);
}

.p-pricing-faq__question-text {
  flex: 1;
  min-width: 0;
  font: 700 16px/1.6 var(--font-jp);
  color: var(--color-text-primary);
}

/* Figma には開いた状態しか無く、その矢印が下向き。閉じたときも同じ向きのままにしている。
   開閉で向きを変えるなら次を足す：
   .p-pricing-faq__item[open] .p-pricing-faq__chevron { transform: rotate(180deg); } */
.p-pricing-faq__chevron {
  flex: none;
  width: 16px;
  height: 16px;
}

.p-pricing-faq__answer {
  margin-top: var(--space-12);
  padding: var(--space-8) 0 0 var(--space-24);
  border-top: 1px solid var(--color-border-default);
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

@media (min-width: 1025px) {
  .p-pricing-faq {
    padding-block: var(--space-80);
    background: var(--color-background-base);
  }

  .p-pricing-faq__inner,
  .p-pricing-faq__list {
    gap: var(--space-32);
  }

  .p-pricing-faq__title {
    font-size: 24px;
    color: var(--color-text-primary);
  }
}

/* ---- 10. 近日公開予定の札（#33 で決めた値。Figmaに無い） ----
   見出しの横に置く。見出しの文字の上下の真ん中にそろえる（親を align-items: center にする） */
.p-pricing-soon {
  flex: none;
  padding: 2px var(--space-8);
  border-radius: 4px;
  font: 700 12px/1.5 var(--font-jp);
  color: var(--color-primary);
  background: #fff1e9;
  white-space: nowrap;
}