/* =========================================================
   sections/question.css — よくある質問 / FAQ（Figma フレーム "question" / 1447×1027）
   【C-2：通常フロー・単色背景／2層構造＋レスポンシブ】
   - 元々ほぼ通常フロー（absolute は装飾 .question__deco のみ）。solution 型で 2層化。
   - 旧 .question が持っていた「max-width＋margin中央＋padding＋container-type」を
     外側（全幅背景＋上下padding）と内側 .question__inner（中央寄せ＋cqw基準）に分離。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media 条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー＋上下 padding ---- */
.question {
  background: var(--color-white);
  overflow: hidden;
  padding-block: var(--space-96) var(--space-72); /* 上≈98→96px／下70px */
}

/* ---- 内側：中央寄せコンテンツ（cqw の基準） ---- */
.question__inner {
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-max); /* 1440px */
  margin-inline: auto;
}

/* ---- タイトル群（中央） ---- */
.question__head {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-64);  /* カードとの間 ≈66.7px */
}
/* 装飾「FAQ」Arial Bold Italic / 薄黄 / 70px（重なり装飾） */
.question__deco {
  position: absolute;
  top: -3.2cqw;                    /* solution「Service」/ example「Cases」と同位置感（見出しとの重なり回避） */
  left: 50%;
  transform: translateX(-50%);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-4xl);       /* 70px */
  line-height: 1;
  color: rgba(252, 203, 12, 0.2);
  white-space: nowrap;
  pointer-events: none;
}
.question__title {
  position: relative;
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);        /* 42px */
  line-height: 1;
  color: var(--color-gray-dark);  /* rgb(53,53,53) */
  white-space: nowrap;
}

/* ---- カードリスト（left182.37/top217/w1082.63）gap34 ---- */
.question__list {
  width: 74.819%;                 /* 1082.63px */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);           /* 34px */
}

/* カード（padding17.869 / radius8.935 / shadow） */
.question__card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-16);           /* 17.869px 相当 */
  padding: var(--space-16);      /* 17.869px */
  border-radius: 0.618cqw;        /* 8.935px */
  background: var(--color-white);
  box-shadow: 0.154cqw 0.154cqw 0.309cqw 0 var(--color-gray-line); /* rgb(207,207,207) */
}
.question__card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);           /* 17.869px */
}

/* Q / A 行 */
.question__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);           /* 17.869px */
}
/* 円バッジ 42×42 */
.question__badge {
  flex-shrink: 0;
  width: 2.902cqw;                /* 42px */
  height: 2.902cqw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: var(--fs-base);      /* ≈24.5px */
  line-height: 1;
}
.question__badge--q {
  background: var(--color-primary);
  color: var(--color-white);
}
.question__badge--a {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 0.145cqw var(--color-primary); /* 2px 枠 */
}

/* 質問テキスト（17.869px / W700 / rgb23,23,22） */
.question__q {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-sm);        /* 17.869px */
  line-height: 1;
  color: var(--color-text);
}
/* 回答テキスト（17.869px / W700 / lineHeight28.591 / rgb95,95,95） */
.question__a {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-sm);        /* 17.869px */
  line-height: 1.6;              /* 28.591 / 17.869 */
  color: var(--color-gray-body); /* rgb(95,95,95) */
}

/* 点線区切り（1.117px dashed 黄） */
.question__divider {
  height: 0;
  border: none;
  border-top: 0.077cqw dashed var(--color-primary);
  margin: 0;
}

/* ▼ トグル（Arial Bold 14.296px 黄） */
.question__toggle {
  flex-shrink: 0;
  align-self: flex-start;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: var(--fs-sm);        /* 14.296px */
  line-height: 1.6;
  color: var(--color-primary);
}

/* =========================================================
   レスポンシブ（solution と同じ型）
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット以下（<1024＝--bp-tablet 未満）----
   バッジは幅/高さが cqw のため、狭幅だと固定pxのバッジ文字(--fs-base)より
   小さくなり文字が溢れる。円サイズをトークン固定にして破綻を防ぐ。 */
@media (max-width: 1023px) {
  .question__badge { width: var(--space-40); height: var(--space-40); } /* ≈42px 維持 */
}

/* ---- タブレット（768–1023）：リスト幅を広げるだけ（独自レイアウトなし） ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .question__list { width: 90%; }
}

/* ---- SP（≤767＝--bp-sp 未満）：リスト全幅・カード内は横並び維持 ---- */
@media (max-width: 767px) {
  .question__inner { padding-inline: var(--container-pad); } /* 画面端ガター16px */
  /* SP：上に余白を追加（上げたFAQ装飾のはみ出し分）。上96 / 下は全セクション統一の64を維持 */
  .question { padding-block: var(--space-96) var(--space-64); }

  /* SP標準セクションタイトル28px（旧42） */
  .question__title { font-size: var(--fs-28); }
  /* タイトル↔カード群の余白を圧縮（基底 head margin-bottom 64→32） */
  .question__head { margin-bottom: var(--space-32); }
  /* 「FAQ」を上へ。タイトルに少し重なる程度・上端で見切れない位置に（SP：deco70px、top -56px。実機で微調整可） */
  .question__deco  { top: calc(-1 * var(--space-56)); }

  .question__list  { width: 100%; }
  .question__card  { gap: var(--space-8); }   /* 本文↔▼トグルを詰める */
  /* Q/A の行間を揃えて読みやすく（Q:1 / A:1.6 → 両方1.7に統一） */
  .question__q,
  .question__a { line-height: 1.7; }
}

/* ---- 狭いPC（1024–1370）：question 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.question__inner=container-type:inline-size／inner padding-inline無し→W=1370px, 1cqw=13.70px, ÷13.70）に換算。
   1370で現行px一致（段差なし）→1024へ比例縮小。white-space未指定＝基底nowrap維持＝折返しゼロ。
   ★min-1024〜max-1370 のため ≥1371/タブレット/SP には非適用。既存cqw/%（list幅%・card radius/shadow・badge幅高cqw・divider・toggle等のcqw）は基底のまま比例追従。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .question__head      { margin-bottom: 4.672cqw; }          /* 64 */
  .question__deco      { font-size: 5.255cqw; }              /* 72 */
  .question__title     { font-size: 3.066cqw; }              /* 42 */
  .question__list      { gap: 2.336cqw; }                    /* 32 */
  .question__card      { gap: 1.168cqw; padding: 1.168cqw; } /* 16 / 16 */
  .question__card-body { gap: 1.168cqw; }                    /* 16 */
  .question__row       { gap: 1.168cqw; }                    /* 16 */
  .question__badge     { font-size: 1.752cqw; }              /* 24 */
  .question__q         { font-size: 1.168cqw; }              /* 16 */
  .question__a         { font-size: 1.168cqw; }              /* 16 */
  .question__toggle    { font-size: 1.168cqw; }              /* 16 */
}