/*
 * Section CSS: よくある質問（メニュー関連抜粋）
 * Page: Menu / Order: 5
 * Scope: menu-s05__* selectors only.
 *
 * 設計方針：モバイルファースト
 *   - ベーススタイル = モバイル（375px 基準）
 *   - @media (width >= 768px) でデスクトップへ上書き
 */

/* ============================================================
  DESIGN TOKENS — section-scoped CSS custom properties
  ============================================================ */
:root {
  /* --- Colors --- */
  --menu-s05-color-bg:              #FDF2F8;
  --menu-s05-color-separator:       #F9A8D4;
  --menu-s05-color-q-prefix:        #F9A8D4;
  --menu-s05-color-headline:        #831843;
  --menu-s05-color-question:        #831843;
  --menu-s05-color-answer-standard: #64748B;
  --menu-s05-color-answer-emphasis: #831843;
  --menu-s05-color-subheadline:     #64748B;
  --menu-s05-color-closing:         #64748B;
  --menu-s05-color-focus:           #8B5CF6;

  /* --- Typography: font families --- */
  --menu-s05-font-display: 'Playfair Display', Georgia, serif;
  --menu-s05-font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                            'Segoe UI', sans-serif;

  /*
   * フォントサイズトークンはモバイル値・デスクトップ値を分けて定義する。
   * clamp() はデスクトップ用トークンにのみ使用し、
   * モバイル用トークンは固定値で定義する。
   * これにより :root トークンと実装の乖離を防ぐ。
   */

  /* --- Typography: sizes — mobile base --- */
  --menu-s05-size-headline-mobile:  clamp(1.75rem, 5vw, 2.5rem);
  --menu-s05-size-q-prefix-mobile:  1.125rem;
  --menu-s05-size-question-mobile:  1.125rem;
  --menu-s05-size-subheadline:      1rem;
  --menu-s05-size-answer:           1rem;
  --menu-s05-size-closing:          1rem;

  /* --- Typography: sizes — desktop override --- */
  --menu-s05-size-headline-desktop: clamp(2.5rem, 5vw, 4rem);
  --menu-s05-size-q-prefix-desktop: clamp(1.5rem, 3vw, 2.25rem);
  --menu-s05-size-question-desktop: clamp(1.5rem, 3vw, 2.25rem);

  /* --- Typography: line heights --- */
  --menu-s05-lh-headline:    1.2;
  --menu-s05-lh-subheadline: 1.75;
  --menu-s05-lh-question:    1.4;
  --menu-s05-lh-answer:      1.75;
  --menu-s05-lh-closing:     1.75;

  /* --- Typography: weights --- */
  --menu-s05-fw-headline:        600;
  --menu-s05-fw-subheadline:     300;
  --menu-s05-fw-q-prefix:        400;
  --menu-s05-fw-question:        500;
  --menu-s05-fw-answer-standard: 300;
  --menu-s05-fw-answer-emphasis: 400;
  --menu-s05-fw-closing:         300;

  /* --- Spacing --- */
  --menu-s05-padding-top-mobile:          64px;
  --menu-s05-padding-bottom-mobile:       64px;
  --menu-s05-padding-top-desktop:         64px;
  --menu-s05-padding-bottom-desktop:      96px;
  --menu-s05-padding-inline-mobile:       24px;
  --menu-s05-padding-inline-desktop:      64px;
  --menu-s05-gap-headline-to-list:        64px;
  --menu-s05-gap-qa-item-bottom-mobile:   32px;
  --menu-s05-gap-qa-item-bottom-desktop:  48px;
  --menu-s05-gap-q-prefix-to-question:    16px;
  --menu-s05-gap-question-to-answer:      16px;
  --menu-s05-margin-closing-top:          32px;

  /* --- Grid --- */
  --menu-s05-max-width:          1200px;
  --menu-s05-headline-max-width: 680px;
  --menu-s05-qa-max-width:       680px;
  --menu-s05-qa-max-width-pc:    900px;
}

/* ============================================================
  SECTION WRAPPER
  ベース = モバイルのパディング
  ============================================================ */
.men-s05__section {
  background-color: var(--menu-s05-color-bg);
  padding-top:      var(--menu-s05-padding-top-mobile);
  padding-bottom:   var(--menu-s05-padding-bottom-mobile);
}

/* ============================================================
  INNER CONTAINER
  ベース = モバイルの左右パディング
  ============================================================ */
.men-s05__inner {
  max-width:      var(--menu-s05-max-width);
  margin-inline:  auto;
  padding-inline: var(--menu-s05-padding-inline-mobile);
}

/* ============================================================
  HEADLINE AREA
  モバイルでは col 1 オフセットなし、max-width のみ適用
  ============================================================ */
.men-s05__headline-area {
  max-width:     var(--menu-s05-headline-max-width);
  margin-bottom: var(--menu-s05-gap-headline-to-list);
}

.men-s05__headline {
  font-family:    var(--menu-s05-font-display);
  font-weight:    var(--menu-s05-fw-headline);
  font-size:      var(--menu-s05-size-headline-mobile); /* モバイル基準 */
  line-height:    var(--menu-s05-lh-headline);
  letter-spacing: 0;
  color:          var(--menu-s05-color-headline);
  text-align:     left;
  margin-bottom:  0.5rem;
}

.men-s05__subheadline {
  font-family:    var(--menu-s05-font-body);
  font-weight:    var(--menu-s05-fw-subheadline);
  font-size:      var(--menu-s05-size-subheadline);
  line-height:    var(--menu-s05-lh-subheadline);
  letter-spacing: 0;
  color:          var(--menu-s05-color-subheadline);
  text-align:     left;
  margin-top:     0.5rem;
}

/* ============================================================
  Q&A LIST
  モバイルでは左オフセットなし（col 2 インデントはデスクトップのみ）
  ============================================================ */
.men-s05__qa-list {
  max-width: var(--menu-s05-qa-max-width);
}

/* ============================================================
  Q&A ITEM WRAPPER
  ベース = モバイルの下パディング
  ============================================================ */
.men-s05__qa-item {
  border-top:     1px solid var(--menu-s05-color-separator);
  padding-bottom: var(--menu-s05-gap-qa-item-bottom-mobile); /* モバイル基準 */
}

/* ============================================================
  QUESTION (dt)
  ベース = モバイルのフォントサイズ・パディング
  ============================================================ */
.men-s05__question {
  display:        flex;
  align-items:    baseline;
  gap:            var(--menu-s05-gap-q-prefix-to-question);
  font-family:    var(--menu-s05-font-display);
  font-weight:    var(--menu-s05-fw-question);
  font-size:      var(--menu-s05-size-question-mobile); /* モバイル基準 */
  line-height:    var(--menu-s05-lh-question);
  letter-spacing: 0;
  color:          var(--menu-s05-color-question);
  text-align:     left;
  padding-top:    var(--menu-s05-gap-qa-item-bottom-mobile); /* モバイル基準 */
  margin-bottom:  var(--menu-s05-gap-question-to-answer);
}

/* ============================================================
  Q PREFIX DECORATION CHARACTER
  ベース = モバイルサイズ（1.125rem 固定）
  ============================================================ */
.men-s05__q-prefix {
  font-family:    var(--menu-s05-font-display);
  font-weight:    var(--menu-s05-fw-q-prefix);
  font-size:      var(--menu-s05-size-q-prefix-mobile); /* モバイル基準 */
  line-height:    var(--menu-s05-lh-question);
  letter-spacing: 0;
  color:          var(--menu-s05-color-q-prefix);
  flex-shrink:    0;
}

/* ============================================================
  ANSWER (dd) — STANDARD VARIANT
  padding-left でQ接頭辞の右端と回答テキストの左端を揃える。
  モバイルは prefix が 1.125rem のため固定値で計算する。
  ============================================================ */
.men-s05__answer {
  font-family:    var(--menu-s05-font-body);
  font-weight:    var(--menu-s05-fw-answer-standard);
  font-size:      var(--menu-s05-size-answer);
  line-height:    var(--menu-s05-lh-answer);
  letter-spacing: 0;
  color:          var(--menu-s05-color-answer-standard);
  text-align:     left;
  /* モバイル: 1.125rem（Q prefix） + 16px（gap） */
  padding-left:   calc(
    var(--menu-s05-size-q-prefix-mobile) +
    var(--menu-s05-gap-q-prefix-to-question)
  );
}

/* ============================================================
  ANSWER — EMPHASIS VARIANT (Q1 only)
  color と font-weight のみで差異を表現する。
  ============================================================ */
.men-s05__answer--emphasis {
  color:       var(--menu-s05-color-answer-emphasis);
  font-weight: var(--menu-s05-fw-answer-emphasis);
}

/* ============================================================
  SECTION-CLOSING SUPPLEMENTARY TEXT
  A4 対応: 0.875rem から 1rem に引き上げ済み
  ============================================================ */
.men-s05__closing-text {
  font-family:    var(--menu-s05-font-body);
  font-weight:    var(--menu-s05-fw-closing);
  font-size:      var(--menu-s05-size-closing); /* 1rem: A4 compliance */
  line-height:    var(--menu-s05-lh-closing);
  letter-spacing: 0;
  color:          var(--menu-s05-color-closing);
  text-align:     left;
  /* margin-top:     var(--menu-s05-margin-closing-top); */
  max-width:      var(--menu-s05-qa-max-width);
}

/* ============================================================
  FOCUS INDICATOR — A6 compliance
  ============================================================ */
.men-s05__section a:focus-visible,
.men-s05__section button:focus-visible {
  outline:        2px solid var(--menu-s05-color-focus);
  outline-offset: 3px;
}

/* ============================================================
  DESKTOP BREAKPOINT (width >= 768px)
  ============================================================ */
@media (width >= 768px) {

  /* セクション上下パディングをデスクトップ値に拡大 */
  .men-s05__section {
    padding-top:    var(--menu-s05-padding-top-desktop);
    padding-bottom: var(--menu-s05-padding-bottom-desktop);
  }

  /* 左右パディングをデスクトップ値に拡大 */
  .men-s05__inner {
    padding-inline: var(--menu-s05-padding-inline-desktop);
  }

  /* 見出しフォントサイズをデスクトップ用 clamp に切り替え */
  .men-s05__headline {
    font-size: var(--menu-s05-size-headline-desktop);
  }

  /* Q prefix フォントサイズをデスクトップ用 clamp に切り替え */
  .men-s05__q-prefix {
    font-size: var(--menu-s05-size-q-prefix-desktop);
  }

  /* 質問テキストフォントサイズをデスクトップ用 clamp に切り替え */
  .men-s05__question {
    font-size:   var(--menu-s05-size-question-desktop);
    padding-top: var(--menu-s05-gap-qa-item-bottom-desktop);
  }

  /* Q&A アイテムの下パディングをデスクトップ値に拡大 */
  .men-s05__qa-item {
    padding-bottom: var(--menu-s05-gap-qa-item-bottom-desktop);
  }

  /*
   * Q&A リストを col 2 へオフセット。
   * headline（col 1–8）と Q&A（col 2–9）の非対称レイアウトを表現する。
   * 計算式: (コンテンツ幅) / 12 = 1カラム分の幅
   */
  .men-s05__qa-list {
    max-width: var(--menu-s05-qa-max-width-pc);
    margin-left: calc(
      (var(--menu-s05-max-width) - var(--menu-s05-padding-inline-desktop) * 2)
      / 12
    );
  }

  /*
   * 回答テキストの左インデントをデスクトップ用 Q prefix サイズで再計算。
   * clamp() の最大値（2.25rem）を基準とする。
   */
  .men-s05__answer {
    padding-left: calc(
      var(--menu-s05-size-q-prefix-desktop) +
      var(--menu-s05-gap-q-prefix-to-question)
    );
  }

  /* クロージングテキストも Q&A リストと左端を揃える */
  .men-s05__closing-text {
    max-width: var(--menu-s05-qa-max-width-pc);
    margin-left: calc(
      (var(--menu-s05-max-width) - var(--menu-s05-padding-inline-desktop) * 2)
      / 12
    );
  }
}

/* ============================================================
  REDUCED MOTION
  ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
  }
}