/* ============================================
   FAQ & Contact Page Styles (よくある質問 ＆ お問い合わせ)
   - 共通レイアウトは plan-common.css（.plan-* クラス）に集約
   - 本ファイルは「FAQ＆お問い合わせ」固有のスタイルだけを担当
   - body クラス: "page-default page-plan page-faq-contact"
   ============================================ */

/* ============================================
   Anchor Navigation (4 links / 2x2 grid)
   - リード文の直下、4リンクを2行2列に配置
   - 列間に縦線、各リンク右に↓矢印
   ============================================ */
.page-article .faq-contact-anchors {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  align-items: center;
  column-gap: clamp(20px, calc(13px + 1.146vw), 35px);
  row-gap: clamp(20px, calc(12px + 1.458vw), 40px);
  margin: 0 auto clamp(70px, calc(46px + 3.854vw), 120px);
}

.page-article .faq-contact-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;
  text-align: center;
}

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

/* ↓矢印（リンク右端） */
.page-article .faq-contact-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;
}

/* 縦線：右列セルの左側に表示（grid 各行の2番目に当たるリンク） */
.page-article .faq-contact-anchors__link:nth-child(2n) {
  position: relative;
  padding-left: clamp(20px, calc(13px + 1.146vw), 35px);
}

.page-article .faq-contact-anchors__link:nth-child(2n)::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);
}

/* ============================================
   FAQ-Contact 固有のオーバーライド
   - plan-common.css のデフォルト値を本ページ用に上書き
   - 他のページ（会員プラン・特典）には影響しない
   ============================================ */

/* リード文最終行とアンカーナビの間: 70px (Figma) */
.page-faq-contact .page-article .plan-lead:last-of-type {
  margin-bottom: clamp(42px, calc(28px + 2.188vw), 70px);
}

/* セクション間（divider→次セクション先頭）: 60px (Figma) */
.page-faq-contact .page-article .plan-section + .plan-section {
  margin-top: clamp(40px, calc(28px + 1.667vw), 60px);
}

/* CTA-block 内のサブ→CTA間: 50px (Figma) */
.page-faq-contact .page-article .plan-cta-block .plan-cta {
  margin-top: clamp(35px, calc(24px + 1.302vw), 50px);
}

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

/* ============================================
   FAQ / 使い方 セクションのボタンのみ反転配色
   - #section-faq / #section-usage 配下のみ対象（Fujisan・編集部は無変更）
   - 配色・ボーダーのみ上書き（サイズ・フォント等は plan-common を継承）
   ============================================ */
.page-faq-contact #section-faq .plan-cta__btn,
.page-faq-contact #section-usage .plan-cta__btn {
  background: #fff;
  color: var(--color-primary);
  border: 2.5px solid var(--color-primary);
}

/* ============================================
   Responsive — Tablet (≤ 1199px)
   - アンカーナビは 1列縦並び（縦線非表示）
   ============================================ */
@media (max-width: 1199px) {
  .page-article .faq-contact-anchors {
    grid-template-columns: 1fr;
    row-gap: 12px;
    margin-bottom: 60px;
  }

  .page-article .faq-contact-anchors__link {
    justify-self: center;
  }

  .page-article .faq-contact-anchors__link:nth-child(2n) {
    padding-left: 0;
  }

  .page-article .faq-contact-anchors__link:nth-child(2n)::before {
    display: none;
  }
}

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

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