/* ============================================
   Membership Page Styles (会員（無料／有料）のご案内)
   - 共通レイアウトは plan-common.css（.plan-* クラス）に集約
   - 本ファイルは「会員プラン比較」固有のスタイルだけを担当
   - body クラス: "page-default page-plan page-membership"
   ============================================ */

/* ============================================
   Article wrapper
   ============================================ */
.page-article.membership {
  text-align: center;
}

/* ============================================
   比較テーブル固有の値セル
   - 料金行（0円 / 990円）は通常 value、それ以外は ○/× マークセル
   ============================================ */

/* ○ / × セル（24px Black） */
.page-article .plan-table__cell--mark {
  font-weight: 900;
  font-size: clamp(18px, calc(14px + 0.521vw), 24px);
  line-height: 1;
  color: var(--color-primary);
}

.page-article .plan-table__cell--mark.is-unavailable {
  color: #c8bba6;
}

/* ============================================
   CTA Buttons — 高さ 120px（plan-common の base width/border-radius は継承）
   ============================================ */
.page-article .plan-cta__btn {
  height: clamp(80px, calc(53px + 3.472vw), 120px);
}

/* ============================================
   Responsive — SP (≤ 767px)
   ============================================ */
@media (max-width: 767px) {
  .page-article .plan-table__cell--mark {
    font-size: 18px;
    line-height: 1;
  }

  .page-article .plan-cta__btn {
    height: 70px;
    font-size: 15px;
    border-radius: 40px;
  }

  .page-article .plan-cta__btn--outline {
    border-width: 2px;
  }
}