/* 採用09｜T17 探し方で替わるFAQ（shimairoパターン sp-09）
   書き方の決まり：library/shimairo-patterns/README.md「3.」。すべて .sp-09 の中だけに効く。
   .sp-js（script.js が箱に付ける）がないとき：カテゴリの見出しつきで、全部の質問と答えを開いたまま並べる。

   Noppo camera テーマ 1.7.0 で入れたとき（型の保管庫 claude/shimairo-patterns 0700ba6 から。mock/patterns/README.md「司令塔が決めたこと」）
   - 色：--sp09-* と中の色を、テーマの :root の変数（--paper・--white・--ink・--muted・--accent・--wash・--line）に替えた
   - タブの高さ：38px → 44px 以上（min-height。会社の決まり）
   - 1.7.1：375〜430px でタブが1段に収まるように、左右の余白 16px → 12px・タブの内側 16px → 12px。JS がないときはタブを出さない */
/* テーマの要素の書き方を、型の中ではブラウザの標準に戻す（README.md「3-2.」。いちばん上に置く） */
.sp-09 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, figcaption, table, caption, th, td, hr, img, a, button, input, select, textarea, label, fieldset, legend, small, strong, em, details, summary):where(:not([data-slot] *)) { all: revert; }
.sp-09 {
  --sp09-paper: var(--paper); --sp09-panel: var(--white); --sp09-ink: var(--ink); --sp09-muted: var(--muted);
  --sp09-accent: var(--accent); --sp09-accent-soft: var(--wash); --sp09-dark: var(--ink); --sp09-dark2: var(--ink);
  --sp09-line: var(--line); --sp09-radius: 18px;
  --sp09-serif: var(--serif);
  --sp09-sans: var(--sans);
  font-family: var(--sp09-sans);
  color: var(--sp09-ink);
  line-height: 1.75;
  /* 文字のもとの値（元はブラウザの標準のまま。テーマの値を受け継がないように。README.md「3-2.」） */
  font-size: 16px; font-weight: 400; font-style: normal; letter-spacing: normal; text-align: start; text-transform: none;
}
.sp-09, .sp-09 * { box-sizing: border-box; }
.sp-09 .fq-wrap { padding: 22px 12px 24px; }
.sp-09 .fq-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* JS が動かないときは、押しても何もしないタブを出さない（カテゴリは見出しつきで全部並ぶ。1.7.1） */
.sp-09:not(.sp-js) .fq-tabs { display: none; }
.sp-09 .fq-tab { min-height: 44px; border: 1px solid var(--sp09-line); background: var(--sp09-panel); border-radius: 999px; padding: 9px 12px; font-size: 13.5px; cursor: pointer; font-family: var(--sp09-sans); color: var(--sp09-muted); line-height: normal; letter-spacing: normal; text-transform: none; }
.sp-09 .fq-tab[aria-selected="true"] { background: var(--y-btn); color: var(--sp09-ink); border-color: var(--y-line); font-weight: 700; } /* 1.14.0：選んでいるタブの地を黒から --y-btn に（CEO ボードQ79 A） */
.sp-09 .fq-ph { font-family: var(--sp09-serif); font-size: 16px; margin: 20px 0 4px; font-weight: 600; }
.sp-09.sp-js .fq-ph { display: none; }
.sp-09 .fq-panel { border-top: 1px solid var(--sp09-line); margin-top: 12px; }
.sp-09.sp-js .fq-panel { margin-top: 14px; }
.sp-09 .fq-item { border-bottom: 1px solid var(--sp09-line); }
.sp-09 .fq-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 15px 2px; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; font-family: var(--sp09-sans); color: var(--sp09-ink); line-height: normal; letter-spacing: normal; text-transform: none; }
.sp-09 .fq-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sp09-accent); color: var(--sp09-accent); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform .3s; line-height: 1; }
.sp-09 .fq-q[aria-expanded="true"] .fq-ic { transform: rotate(45deg); }
.sp-09 .fq-a { overflow: hidden; }
.sp-09.sp-js .fq-a { max-height: 0; transition: max-height .35s ease; }
.sp-09 .fq-a p { margin: 0; padding: 0 2px 16px; font-size: 13.5px; color: var(--sp09-muted); }

/* 動きを控えめにする設定：開け閉めと「＋」の回転を、その場で切り替える */
@media (prefers-reduced-motion: reduce) {
  .sp-09 .fq-ic, .sp-09.sp-js .fq-a { transition: none; }
}