/* ===== Modern FAQ (details/summary) ===== */
:root{
  --faq-bg: #fff;
  --faq-border: #e6e8ec;
  --faq-text: #0f172a;
  --faq-muted: #475569;
  --faq-accent: #3297C9;
  --faq-accent-weak: #e8f3fb;
  --faq-radius: 12px;
}

/* Intro */
.faq-intro { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.faq-intro h2 { text-align:center; margin:0 0 12px; color:#01233B; }
.faq-intro p { text-align:center; margin:0 0 20px; }

/* External links list */
.links-list { text-align:center; margin: 8px 0 20px; }
.links-list a { color: var(--faq-accent); font-weight: 700; text-decoration: none; }
.links-list a:hover { color:#485db2; text-decoration: underline; }

/* Tabs (category switch) */
.faq-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin: 8px auto 20px; padding: 0 12px; }
.faq-tab{
  appearance:none; border:1px solid var(--faq-border); background:#fff; color:#0f172a;
  border-radius: 999px; padding:10px 14px; cursor:pointer; font-weight:600;
}
.faq-tab[aria-selected="true"]{ background: var(--faq-accent-weak); border-color: var(--faq-accent); }
.faq-section{ display:none; }
.faq-section[aria-hidden="false"]{ display:block; }

/* FAQ block */
.faq-modern{ max-width: 900px; margin: 0 auto 28px; padding: 0 16px; }
.faq-modern .faq-heading{
  font-size: clamp(18px, 2.4vw, 24px);
  margin: 0 0 12px;
  color: var(--faq-text);
  text-align: center;
}
.faq-modern .faq-item{
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  background: var(--faq-bg);
  overflow: clip;
  box-shadow: 0 1px 2px rgba(2,6,23,.04);
}
.faq-modern .faq-item + .faq-item{ margin-top: 12px; }

/* Clickable summary */
.faq-modern .faq-summary{
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-weight: 600;
  color: var(--faq-text);
}
.faq-modern .faq-summary::-webkit-details-marker{ display:none; }

/* Arrow icon */
.faq-modern .faq-summary::after{
  content:"";
  width: 18px; height: 18px;
  border: 2px solid var(--faq-muted);
  border-left: 0; border-top: 0;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-modern .faq-item[open] .faq-summary{ background: var(--faq-accent-weak); }
.faq-modern .faq-item[open] .faq-summary::after{ transform: rotate(225deg); }

/* Panel */
.faq-modern .faq-content{
  padding: 0 18px 16px;
  color: var(--faq-muted);
  line-height: 1.8;
}

/* Focus visible */
.faq-modern .faq-summary:focus-visible{
  outline:2px solid var(--faq-accent);
  outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq-modern .faq-summary::after{ transition:none; }
}

/* Mobile spacing */
@media (max-width: 480px){
  .faq-intro{ padding: 20px 12px; }
  .faq-modern{ padding: 0 12px; }
  .faq-modern .faq-summary{ padding: 14px; }
  .faq-modern .faq-content{ padding: 0 14px 14px; }
}

/* ===== QAテンプレ限定の16列グリッド最小実装 ===== */
/* bodyクラスは WP が自動で付ける: page-template-qa / page-template-qa-php / templates-qa など */
body[class*="page-template-qa"] .row::after{content:"";display:block;clear:both}
body[class*="page-template-qa"] .row > .col{float:left;box-sizing:border-box;min-width:0}

/* ガター（余白） */
body[class*="page-template-qa"] .row.gutters{margin-left:-8px;margin-right:-8px}
body[class*="page-template-qa"] .row.gutters > .col{padding-left:8px;padding-right:8px}

/* フッターではなく、QA本文/サイドバーで使う幅だけ定義 */
body[class*="page-template-qa"] .span_16{width:100%}
body[class*="page-template-qa"] .span_12{width:75%}  /* 本文 */
body[class*="page-template-qa"] .span_4 {width:25%}  /* サイドバー */

/* レスポンシブ：狭幅では縦積み */
@media (max-width:1024px){
  body[class*="page-template-qa"] .span_12,
  body[class*="page-template-qa"] .span_4{width:100%}
}