/* ============================================================
   qa.css — Q&Aページ固有スタイル
   共通（ヘッダー/フッター/トークン）は style.css 側。
   functions.php で Q&Aページのときだけ読み込む。
   数値は reference/qa_spec.json の bbox 座標から導出。
   ============================================================ */

/* セクション全体 — spec: Q&Aタイトル top y=169, header=72px → padding-top≈97px
   最終回答 bottom≈y1705, footer top≈y1800 → padding-bottom≈95px */
.qa-section{background:#fff;padding:70px 0 96px}

/* 見出しブロック */
.qa-head{text-align:center;margin-bottom:44px}


/* サブテキスト — spec: 15px DemiLight, #282828; gap to sub ≈ 31px */
.qa-intro{font-weight:400;font-size:15px;color:var(--color-text-dark);margin-top:18px}

/* リスト（中央750px） */
.qa-list{width:750px;max-width:calc(100% - 40px);margin:0 auto}

/* 各項目（JS不要の details アコーディオン・初期は開いた状態）
   spec: Q項目間の余白 ≈ 30px */
details.qa{margin-bottom:30px}
details.qa summary{
  list-style:none;cursor:pointer;
  background:var(--color-primary);color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;gap:14px;padding:12px 20px;border-radius:3px;
}
details.qa summary::-webkit-details-marker{display:none}

/* Qバッジ（金丸＋白Q）— spec: Q字 20px, Arial-Black */
.qa-badge{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--color-accent);color:#fff;
  font-family:var(--font-en);font-weight:900;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.qa-q{flex:1;line-height:1.4}

/* 右端のシェブロン（白）。開＝上向き(^) / 閉＝下向き(v） */
.qa-chev{
  flex:none;width:11px;height:11px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-135deg);transition:transform .2s;margin-left:6px;
}
details.qa:not([open]) .qa-chev{transform:rotate(45deg)}

/* 回答エリア — spec: 14px DemiLight, #282828, line-height 1.75 */
.qa-body{
  background:#fff;border:1px solid #e4e4e4;border-top:none;
  padding:18px 22px;font-size:14px;line-height:1.75;color:var(--color-text-dark);
  overflow:hidden;
  animation:qaOpen .3s ease;
}
@keyframes qaOpen{
  from{opacity:0;max-height:0;padding-top:0;padding-bottom:0}
  to{opacity:1;max-height:500px;padding-top:18px;padding-bottom:22px}
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .qa-section{padding:30px 0 10px}
  .qa-head{margin-bottom:32px}
  .qa-intro{padding:0 20px;text-align:center;font-size:17px}

  details.qa summary{padding:10px 16px;gap:10px;font-size:14px}
  .qa-badge{width:24px;height:24px;font-size:14px}
  .qa-body{padding:14px 16px;font-size:13px}
}