/* ===============================================
   FAQ アコーディオン（HTMLは現状のまま）
   - JSが有効な時だけ閉じる（noscript対策）
   - dt をトグル、直後の dd を開閉（divで囲まれていてもOK）
================================================= */

/* tokens（軽め） */
:root{
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --bg:#fff; --soft:#f8fafc; --accent:#2563eb;
  --radius:12px; --shadow:0 2px 8px rgba(2,12,27,.06);
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e5e7eb; --muted:#9aa3b2; --line:#27324a; --bg:#0b1220; --soft:#0f172a; }
}

#faq{ color:var(--ink); }
#faq .mar-style{ max-width:1146px; margin-inline:auto; }

/* カテゴリボタン（既存クラスを活かして） */
#faq .faq_btn_wrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0 22px; }
@media (min-width:768px){ #faq .faq_btn_wrap{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; } }
#faq .faq_btn{ display:flex; align-items:center; justify-content:center; padding:10px 12px;
  background:var(--bg); border:1px solid var(--line); border-radius:999px; font-weight:700; text-decoration:none; }
#faq .faq_btn:hover{ background:var(--soft); }

/* 各セクション見出し */
#faq .title_01{ margin:28px 0 12px; font-weight:800; font-size:clamp(18px,2.2vw,24px); }

/* 質問(dt)・回答(dd)のベース */
#faq dl{ margin:0; }
#faq dl dt{
  position:relative; cursor:pointer; user-select:none;
  margin:16px 0 8px; padding:12px 16px 12px 44px;
  background:var(--soft); border:1px solid var(--line); border-radius:var(--radius);
  font-weight:800;
}
#faq dl dt:focus-visible{ outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }
#faq dl dt .q_icon_01{ /* 既存アイコンの左丸Q化（任意） */
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:999px; background:var(--accent);
}
#faq dl dt .q_icon_01::after{
  content:"Q"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:13px; font-weight:800;
}

/* プラス/マイナス（既存 .accordion_icon を活用） */
#faq dl dt .accordion_icon{ position:absolute; right:12px; top:25%; transform:translateY(-50%); width:18px; height:18px; }
#faq dl dt .accordion_icon span{
  position:absolute; left:0; right:0; top:50%; height:2px; background:currentColor; transform:translateY(-50%);
}
#faq dl dt .accordion_icon span:nth-child(2){ transform:translateY(-50%) rotate(90deg); transition:transform .2s ease; }
#faq dl dt.is-open .accordion_icon span:nth-child(2){ transform:translateY(-50%) rotate(0deg); }

/* 回答(dd)：JS有効時のみ閉じる。max-heightでスムース開閉 */
.js #faq dl dd{
  overflow:hidden; max-height:0; margin:0; padding:0 16px; /* 初期は詰める */
  border:1px solid transparent; border-radius:var(--radius); background:transparent;
  transition:max-height .28s ease, padding .2s ease, border-color .2s ease, background-color .2s ease;
}
#faq dl dd.is-open{
  background:var(--bg); border-color:var(--line); box-shadow:var(--shadow);
  padding:14px 16px; margin:0 0 16px;
}
#faq dl dd p:last-child{ margin-bottom:0; }

/* 画像等 */
#faq dl dd img, #faq dl dd video{ max-width:100%; height:auto; border-radius:10px; }

/* アンカー位置補正（ヘッダーかぶり対策） */
#faq [id^="faq_"]{ scroll-margin-top:92px; }
/* 質問行の高さ固定を無効化（旧インラインstyle対策） */
#faq dl dt,
#faq dl dt .title,
#faq dl dt .q_txt{
  height:auto !important;
  max-height:none !important;
  white-space:normal !important;
  overflow:visible !important;
  line-height:1.5;
}
/* 質問テキストの段落余白を適正化 */
#faq dl dt .q_txt{ display:block; margin:0; }