/* ============================================================
   QA.css — FAQ 共通デザイン（完全リライト・外観変更なし）
   Completed: 2025-08-18 06:41 UTC / 15:41 JST (UTC+9)
   Last Update: 2025-08-18 (clean up duplicate selectors / a11y & print)
   対象:
     - FAQ セクション（共通トーン＆半径/フォーカスは common.css に準拠）
     - <details>/<summary> アコーディオン
     - モバイル最適化・低モーション・印刷
   依存:
     - 共通: common.css（--radius, --fs-base, --fs-title, --focus-ring ほか）
   注意:
     - scroll に関する style は common.css で管理
   ============================================================ */

/* ------------------------------------------------------------
   0) Page tokens（common 未定義時の保険も含めたフォールバック）
   ------------------------------------------------------------ */
:root {
  --qa-radius: var(--radius, 0.5rem);
  --qa-fs-base: var(--fs-base, clamp(1.6rem, 1.5rem + 0.3vw, 1.8rem));
  --qa-fs-title: var(--fs-title, clamp(2.2rem, 1.8rem + 1vw, 2.8rem));
  --qa-focus: var(--focus-ring, 3px solid rgba(0, 117, 201, 0.6));
  --qa-border: #c2e2c7; /* カード枠（緑系） */
  --qa-sum-bg: #d4e7d8; /* summary 背景（緑系） */
  --qa-ans-bg: #fff;    /* 回答エリア背景 */
}

/* ------------------------------------------------------------
   1) セクションラッパ（.eq-section と同一ポリシー）
   ------------------------------------------------------------ */
.faq-section {
  padding: 2rem 0;
  margin-block-start: 0;
  background: var(--clr-bg-section, var(--flow-bg, #fff));
}
.faq-section .container {
  margin-inline: auto;
  margin-block-end: 1rem;
}
.faq-section .section-title {
  margin-top: 0;
}

/* タイトル */
.faq-title {
  margin: 0 0 2rem;
  font-size: var(--qa-fs-title);
  line-height: 1.2;
  white-space: normal; /* balance は使わない */
}

/* ------------------------------------------------------------
   2) リスト
   ------------------------------------------------------------ */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.2rem;
}
.faq-item {
  margin: 0;
}

/* ------------------------------------------------------------
   3) details / summary（アコーディオン）
   ------------------------------------------------------------ */
.faq-item details {
  width: 100%;
  border: 2px solid var(--qa-border);
  border-radius: var(--qa-radius);
  overflow: hidden;
  background: #fff; /* カード土台 */
}

/* summary 行（質問） */
.faq-item summary {
  background: var(--qa-sum-bg);
  padding: 1.6rem 2rem;
  font: 600 var(--qa-fs-base) / 1.3 "Noto Sans JP", "Roboto", "Meiryo", sans-serif;
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: background-color 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* 開閉アイコン（＋／－） */
.faq-item summary::after {
  content: "＋";
  margin-left: auto;
  font-weight: 700;
}
.faq-item details[open] summary::after {
  content: "－";
}

/* 回答部分（summary 以外の直下要素全て） */
.faq-item details > *:not(summary) {
  margin: 0;
  padding: 1.6rem 2rem 1.8rem;
  border-top: 1px solid var(--qa-border);
  background: var(--qa-ans-bg);
}

/* フォーカスリング（KB 操作可視） */
.faq-item summary:focus-visible {
  outline: var(--qa-focus);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

/* summary ホバーの僅かな反応（低モーション環境では無効化） */
.faq-item summary:hover {
  filter: brightness(0.98);
}

/* 回答内の段落・リンク・リストの既定 */
.faq-item p {
  margin: 0;
  font-size: var(--qa-fs-base);
  line-height: 1.7;
  white-space: normal;
}
.faq-item p + p {
  margin-top: 0.8rem;
}
.faq-item ul,
.faq-item ol {
  margin: 0.4rem 0 0 1.6em;
  padding: 0;
  font-size: var(--qa-fs-base);
  line-height: 1.7;
}
.faq-item a:focus-visible {
  outline: var(--qa-focus);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

/* 画像の共通（遅延読込想定） */
img[loading="lazy"] {
  height: auto;
  max-width: 100%;
  display: block;
  border: none;
}

/* ------------------------------------------------------------
   4) :target ハイライト（各QにIDリンクされた場合の可視）
   ------------------------------------------------------------ */
.faq-item:target details {
  box-shadow: 0 0 0 3px rgba(0, 117, 201, 0.25);
}

/* ------------------------------------------------------------
   5) モバイル微調整
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .faq-title {
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.4rem);
  }
  .faq-item summary {
    padding: 1.4rem 1.6rem;
  }
  .faq-item details > *:not(summary) {
    padding: 1.4rem 1.6rem 1.6rem;
  }
}

/* ------------------------------------------------------------
   6) 高コントラスト / 強制色
   ------------------------------------------------------------ */
@media (prefers-contrast: more) {
  .faq-item details { border-color: #000; }
  .faq-item summary { background: #fff; }
  .faq-item details > *:not(summary) { background: #fff; }
}
@media (forced-colors: active) {
  .faq-item details { border-color: CanvasText; }
  .faq-item summary { background: Canvas; }
  .faq-item details >openDetailsIfHash *:not(summary) { background: Canvas; }
}

/* ------------------------------------------------------------
   7) 低モーション環境のアニメ抑制
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   8) 印刷
   ------------------------------------------------------------ */
@media print {
  .faq-item details {
    border-color: #999;
    box-shadow: none;
  }
  .faq-item summary {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* 補完ルール（既存の .faq-item:target に追加） */
.faq-item:has(> details > summary:target) details {
  box-shadow: 0 0 0 3px rgba(0,117,201,.25);
}