/* ページ固有: アンカーカード4枚の統一（影=共通var(--card-sh)・padding 28px 20px・中身縦中央） */
.acards .acard { padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--card-sh); }
/* ヒーローリードの孤立行解消 */
.ph .ph-lead { max-width: 36em; }

/* v23（2026-08-09 恒久方針適用） */
/* FAQ本体: 最大幅 860px → 900px */
.faq { max-width: 900px; }
/* 質問（summary）を20pxに拡大。qmark円の縦位置を新しい行高（20px×1.9=38px）に追従 */
.faq summary { font-size: 20px; }
.faq .qmark { margin-top: 3px; }
/* 開いた回答: 薄青ボックス（--kg-t2・角丸12px）。左端は質問文の頭（qmark 40px＋gap 18px = 58px）に揃える */
.faq .ans { background: var(--kg-t2); border-radius: 12px; padding: 20px 26px; margin: 0 0 26px 58px; }
@media (max-width: 749px) {
  .faq summary { font-size: 17px; }
  /* SPは回答ボックスをインデントせず全幅で（可読幅の確保） */
  .faq .ans { margin-left: 0; margin-bottom: 22px; padding: 18px 20px; }
}

/* v25（2026-08-10 さき指示）: タブレット帯（750〜1023px） */
@media (min-width: 750px) and (max-width: 1023px) {
  /* FAQ: 質問20px・回答の左インデント58px（＝質問文の頭）はタブレットでも維持し、
     セクション見出し→FAQ本体の間隔だけ mono.css のタブレット律動（sec 80px / mt-lg 44px）に寄せる */
  .faq { margin-top: 48px; }
}
/* アンカーカード4枚（.acards--4）の2列化は mono.css のタブレット帯が担当。
   ここで重複させると gap・margin が二重管理になるため、p-qa.css では触らない */


/* ============================================================
   v31（2026-08-11 第2次レビュー対応・Q&Aページ）
   ① SPのアンカーカードを2列×2行＋上下paddingを圧縮
   ② カテゴリ見出し前後の余白を圧縮（HTML側の inline padding を .qa-sec へ移設）
   ③ リズム付け: カテゴリ見出しに薄い横ライン／Qアイコン強化／開閉アイコンの位置・寸法を統一
   ※ p-qa.css は qa.astro だけが読み込む（Mono.astro の pageCss）。
     さらに .acards--4 は qa.html のみ・.faq は ryokin.html でも使うため、
     mono.css の共通定義を壊さないよう .ph / .qa-sec 配下に限定して上書きする。
   ※ v25 の `.faq { margin-top: 48px }`（タブレット）は下の .qa-sec .faq に上書きされ無効化。
     削除せず残置（既存行の温存指示による）
   ============================================================ */

/* --- ① SP: アンカーカード 1列 → 2列×2行 --- */
@media (max-width: 749px) {
  .ph .acards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
  .ph .acards--4 .acard { padding: 16px 12px; font-size: 15px; line-height: 1.6; border-radius: 14px; }
  .ph .acards--4 .acard span { margin-top: 6px; font-size: 13px; line-height: 1.6; }
}

/* --- ② 章の呼吸: セクション間の余白を 97px → 72px（SPは56px）へ ---
   scroll-margin-top はヘッダー実測（.gh .inner = 88px＋境界1px / SPは70px）に合わせて更新。
   旧inlineの66pxはヘッダーが66px時代の値で、アンカー着地が帯の下に潜っていた */
.qa-sec { padding: 36px 0; scroll-margin-top: 88px; }
/* 1章目だけ上余白が広い（ヒーローとの章間）ので、アンカー着地位置が他章と揃うよう相殺する */
.qa-sec--first { padding-top: 80px; scroll-margin-top: 44px; }
.qa-sec--last { padding-bottom: 96px; }
@media (max-width: 749px) {
  .qa-sec { padding: 28px 0; scroll-margin-top: 76px; }
  .qa-sec--first { padding-top: 56px; scroll-margin-top: 48px; }
  .qa-sec--last { padding-bottom: 76px; }
}

/* --- ②③ カテゴリ見出し: 本文・質問との階層差をつけ、薄い横ラインで一覧の頭を作る --- */
.qa-sec .eyebrow { margin-bottom: 10px; }
.qa-cat {
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--kg-ink);
  max-width: 900px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kg-line);
}
/* 見出しの横ラインが一覧の上辺を兼ねるので、1件目の罫線は消して二重線を避ける */
.qa-sec .faq { margin-top: 14px; }
.qa-sec .faq details:first-child { border-top: none; }

/* --- ③ Qアイコンをやや強める＋開閉アイコンを正方形化して行の中心に揃える --- */
.qa-sec .faq .qmark { width: 34px; height: 34px; font-size: 17px; font-weight: 700; margin-top: 2px; }
.qa-sec .faq .plus {
  width: 30px; height: 30px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
}
/* 開いている質問は見出し色を一段濃く（スクロール中の現在地が分かる） */
.qa-sec .faq details[open] > summary { color: var(--kg-deep); }
@media (max-width: 749px) {
  .qa-sec .faq .qmark { width: 30px; height: 30px; font-size: 15px; margin-top: 1px; }
  .qa-sec .faq .plus { width: 24px; height: 24px; margin-top: 4px; font-size: 18px; }
}