/* ============================================
   Benefit Page Styles (会員特典のご案内)
   - 共通レイアウトは plan-common.css（.plan-* クラス）に集約
   - 本ファイルは「特典ページ」固有のスタイルだけを担当
   - body クラス: "page-default page-plan page-benefit"
   ============================================ */

/* ============================================
   Anchor Navigation
   - リード文の直下、左右に2つのリンクを並列配置
   - 中央に縦線区切り、各リンクに ↓ 矢印
   ============================================ */
.page-article .benefit-anchors {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, calc(13px + 1.146vw), 35px);
  margin: 0 auto clamp(60px, calc(40px + 2.604vw), 100px);
}

.page-article .benefit-anchors__link {
  position: relative;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, calc(10px + 0.521vw), 20px);
  line-height: clamp(28px, calc(20px + 1.042vw), 40px);
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-decoration: none;
  padding-right: 22px;
  transition: opacity 0.2s ease;
}

.page-article .benefit-anchors__link:hover {
  opacity: 0.7;
}

.page-article .benefit-anchors__link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='0,0 5,6 10,0' fill='none' stroke='black' stroke-width='1.2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='0,0 5,6 10,0' fill='none' stroke='black' stroke-width='1.2'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* リンク間の縦線区切り */
.page-article .benefit-anchors__link + .benefit-anchors__link {
  position: relative;
  padding-left: clamp(20px, calc(13px + 1.146vw), 35px);
}

.page-article .benefit-anchors__link + .benefit-anchors__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(24px, calc(18px + 1.146vw), 40px);
  background: var(--color-primary);
}

/* ============================================
   セクション間余白 / 注釈 / CTAブロック / 区切り線は plan-common.css に集約済み
   （.benefit-* と .plan-* の両セレクタで共通ルールが適用される）
   ============================================ */

/* ============================================
   ページ内アンカーで固定ヘッダーに見出しが隠れないようオフセット
   - ヘッダー高さ clamp(70px,…,100px) + 20px バッファ
   ============================================ */
.page-benefit .benefit-section {
  scroll-margin-top: clamp(90px, calc(70px + 2.604vw), 120px);
}

/* ============================================
   リード文を中央揃え（benefit ページのみ）
   ============================================ */
.page-benefit .page-article .plan-lead {
  text-align: center;
}

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

/* ============================================
   Responsive — Tablet (≤ 1199px)
   ============================================ */
@media (max-width: 1199px) {
  .page-article .benefit-anchors {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 60px;
  }

  .page-article .benefit-anchors__link + .benefit-anchors__link {
    padding-left: 0;
  }

  .page-article .benefit-anchors__link + .benefit-anchors__link::before {
    display: none;
  }
}

/* ============================================
   Responsive — SP (≤ 767px)
   ============================================ */
@media (max-width: 767px) {
  .page-article .benefit-anchors__link {
    font-size: 14px;
    line-height: 26px;
    padding-right: 18px;
  }

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