/* ============================================
   Plan-Common Styles
   - 「会員（無料／有料）のご案内」「会員特典のご案内」など
     プラン／特典系ページが共通利用するレイアウト・タイポグラフィ
   - body クラス: "page-default page-plan ..." の前提
   - 数値は Figma (1920px 基準) → 768px に向けて clamp で線形スケール
   - 親詳細度を `.page-article .plan-*` で確保し、page.css の
     `.page-container * { all: revert; }` リセットに勝つ
   ============================================ */

/* ============================================
   Lead text blocks
   - 20px Bold / line-height 45px / letter-spacing 0.05em / center
   ============================================ */
.page-article .plan-lead {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  color: #333;
  font-size: clamp(14px, calc(10px + 0.521vw), 20px);
  line-height: clamp(30px, calc(20px + 1.302vw), 45px);
  letter-spacing: 0.05em;
  margin-bottom: clamp(18px, calc(12px + 0.938vw), 30px);
  text-align: left;
}

.page-article .plan-lead p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.page-article .plan-lead + .plan-lead {
  margin-top: 0;
}

.page-article .plan-lead:last-of-type {
  margin-bottom: clamp(54px, calc(36px + 2.813vw), 90px);
}

/* ============================================
   Section heading
   ============================================ */
.page-article .plan-heading {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  color: #333;
  text-align: center;
  font-size: clamp(22px, calc(15px + 0.886vw), 32px);
  line-height: clamp(40px, calc(27px + 1.736vw), 60px);
  letter-spacing: 0.05em;
  margin: 0 0 clamp(28px, calc(20px + 1.042vw), 40px);
  border-left: 0;
  padding-left: 0;
}

.page-article .plan-heading__sub {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  color: #333;
  text-align: center;
  font-size: clamp(14px, calc(10px + 0.521vw), 20px);
  line-height: clamp(30px, calc(20px + 1.302vw), 45px);
  letter-spacing: 0.05em;
  margin: 0 0 clamp(50px, calc(30px + 2.604vw), 80px);
}

/* 複数行段落バリアント（.plan-heading__sub--multi） — 子<p>を素通しでブロック化 */
.page-article .plan-heading__sub--multi p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ============================================
   Section （セクション間の縦余白）
   - 旧 .benefit-section も同等に扱う（後方互換）
   ============================================ */
.page-article .plan-section + .plan-section,
.page-article .benefit-section + .benefit-section {
  margin-top: clamp(80px, calc(50px + 3.906vw), 120px);
}

/* ============================================
   Note (オレンジ・小サイズ・テーブル下／CTA上の注釈)
   ============================================ */
.page-article .plan-note,
.page-article .benefit-note {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  font-size: clamp(13px, calc(10px + 0.313vw), 16px);
  line-height: clamp(24px, calc(18px + 0.886vw), 35px);
  letter-spacing: 0.05em;
  margin: clamp(20px, calc(14px + 0.781vw), 30px) 0 0;
}

/* ============================================
   CTA Block — 文章 + （注釈）+ ボタン を1セットでラップ
   ============================================ */
.page-article .plan-cta-block,
.page-article .benefit-cta-block {
  margin-top: clamp(45px, calc(30px + 2.604vw), 80px);
}

.page-article .plan-cta-block .plan-heading__sub,
.page-article .plan-cta-block .plan-heading__sub--multi,
.page-article .benefit-cta-block .plan-heading__sub,
.page-article .benefit-cta-block .plan-heading__sub--multi {
  margin-bottom: 0;
}

.page-article .plan-cta-block .plan-cta,
.page-article .benefit-cta-block .plan-cta {
  margin-top: clamp(28px, calc(20px + 1.042vw), 40px);
}

/* ============================================
   Divider between CTA blocks / sections
   ============================================ */
.page-article .plan-divider,
.page-article .benefit-divider {
  border: 0;
  height: 1px;
  background: #ece2d1;
  margin: clamp(45px, calc(30px + 2.604vw), 80px) 0 0;
  width: 100%;
}

/* ============================================
   Comparison Table
   - .plan-table--3col: 305 : 347 : 348（会員プラン比較・特典料金表）
   - .plan-table--2col: 305 : 695（特典：講座一覧）
   ============================================ */
.page-article .plan-table {
  width: 100%;
  margin: 0 auto;
}

/* Headers (上端のカード) */
.page-article .plan-table__headers {
  display: grid;
  align-items: end;
}

.page-article .plan-table__header {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, calc(10px + 0.434vw), 18px);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.page-article .plan-table__header--empty {
  background: transparent;
  height: 0;
}

.page-article .plan-table__header--secondary {
  background: #e8dccc;
  color: #333;
  height: clamp(50px, calc(38px + 1.563vw), 68px);
}

.page-article .plan-table__header--primary {
  background: var(--color-primary);
  color: #fff;
  height: clamp(65px, calc(50px + 1.997vw), 88px);
}

/* Body */
.page-article .plan-table__body {
  display: grid;
  background: #fff;
  border: 1px solid #e8dccc;
}

/* Headers が直前にある場合は body 上端のボーダーを抑止（ヘッダ底辺と重ならせる） */
.page-article .plan-table__headers + .plan-table__body {
  border-top: 0;
}

.page-article .plan-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: clamp(50px, calc(38px + 1.563vw), 68px);
  padding: 0 8px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #333;
  letter-spacing: 0.05em;
}

/* Label column (warm beige bg, full height) */
.page-article .plan-table__cell--label {
  background: #e8dccc;
  font-weight: 700;
  font-size: clamp(13px, calc(10px + 0.434vw), 18px);
  line-height: 1;
  color: #6b5742;
  border-bottom: 1px #fff solid;
}

/* Standard value cell (text/price) */
.page-article .plan-table__cell--value {
  font-weight: 700;
  font-size: clamp(13px, calc(10px + 0.434vw), 18px);
  line-height: 1;
}

/* ----- 3列レイアウト（会員プラン比較・特典料金表） ----- */
.page-article .plan-table--3col .plan-table__headers,
.page-article .plan-table--3col .plan-table__body {
  grid-template-columns: 305fr 347fr 348fr;
}

/* 3列: ヘッダ＋7行・6行いずれにも対応（4セル目以降の各行に上ボーダー、ラベル列除外） */
.page-article .plan-table--3col .plan-table__cell:nth-child(n+4):not(.plan-table__cell--label) {
  border-top: 1px solid #ece2d1;
}

/* 3列: 中央縦線（無料/有料 または 通常/クーポン の境） */
.page-article .plan-table--3col .plan-table__cell:nth-child(3n) {
  border-left: 1px solid #ece2d1;
}

/* ----- 2列レイアウト（特典：講座一覧、ヘッダなし） ----- */
.page-article .plan-table--2col .plan-table__headers,
.page-article .plan-table--2col .plan-table__body {
  grid-template-columns: 305fr 695fr;
}

/* 2列: 3セル目以降の各行に上ボーダー、ラベル列除外 */
.page-article .plan-table--2col .plan-table__cell:nth-child(n+3):not(.plan-table__cell--label) {
  border-top: 1px solid #ece2d1;
}

/* ----- 左寄せ用モディファイア（特典：講座一覧で使用） ----- */
.page-article .plan-table--align-left .plan-table__cell {
  justify-content: flex-start;
  padding-left: clamp(20px, calc(13px + 0.911vw), 35px);
  text-align: left;
}

/* ============================================
   CTA Buttons
   - 共通フォント・ボーダー半径・色。
   - 高さは各ページが上書き（会員プラン: 120px / 特典: 105px）
   ============================================ */
.page-article .plan-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, calc(14px + 1.094vw), 35px);
  margin-top: clamp(50px, calc(30px + 2.604vw), 80px);
}

.page-article .plan-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(320px, calc(200px + 15.625vw), 500px);
  border-radius: clamp(40px, calc(28px + 2.188vw), 70px);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, calc(12px + 0.521vw), 22px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.page-article .plan-cta__btn:hover {
  opacity: 0.85;
}

.page-article .plan-cta__btn--outline {
  background: #fff;
  color: var(--color-primary);
  border: 2.5px solid var(--color-primary);
}

.page-article .plan-cta__btn--solid {
  background: var(--color-primary);
  color: #fff;
}

/* ============================================
   Responsive — Tablet (≤ 1199px)
   ============================================ */
@media (max-width: 1199px) {
  .page-article .plan-cta__btn {
    width: 100%;
    max-width: 500px;
  }
}

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

  .page-article .plan-lead:last-of-type {
    margin-bottom: 50px;
  }

  .page-article .plan-heading {
    font-size: 18px;
    line-height: 30px;
  }

  .page-article .plan-heading__sub {
    font-size: 13px;
    line-height: 26px;
    margin-bottom: 40px;
  }

  /* Table — リスト風に圧縮 */
  .page-article .plan-table__header--secondary,
  .page-article .plan-table__header--primary {
    font-size: 12px;
  }

  .page-article .plan-table__header--secondary {
    height: 44px;
  }

  .page-article .plan-table__header--primary {
    height: 56px;
  }

  .page-article .plan-table__cell {
    min-height: 48px;
    height: auto;
    padding: 8px 4px;
    line-height: 1.3;
  }

  .page-article .plan-table__cell--label {
    font-size: 12px;
    line-height: 1.2;
  }

  .page-article .plan-table__cell--value {
    font-size: 12px;
    line-height: 1.2;
  }

  .page-article .plan-table--align-left .plan-table__cell {
    padding-left: 16px;
  }

  /* Section / CTA block / Divider / Note の SP 圧縮 */
  .page-article .plan-section + .plan-section,
  .page-article .benefit-section + .benefit-section {
    margin-top: 60px;
  }

  .page-article .plan-note,
  .page-article .benefit-note {
    font-size: 12px;
    line-height: 22px;
  }

  .page-article .plan-cta-block,
  .page-article .benefit-cta-block {
    margin-top: 30px;
  }

  .page-article .plan-divider,
  .page-article .benefit-divider {
    margin-top: 35px;
  }
}