/* ============================================================
 * FAQ ページ専用のスタイル
 * ============================================================
 * 共通部分（色・ヘッダー・ボタン・フッター）は shared.css にある。
 * 質問は details / summary で開閉する。JavaScript を使わないので、
 * 動かない環境でも開ける（クローラーにも中身が読める）。
 * 絞り込みだけを JavaScript で足している。
 * ============================================================ */

/* ヒーローは shared.css の .shero を使う（CARE LIBRARY と高さ・書き出し位置をそろえるため） */


/* ---------- 絞り込み ---------- */
.tools{margin:0 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:800;
  cursor:pointer;font-family:inherit;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s,background-color .2s}
.chip::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--c)}
.chip:hover{transform:translateY(-2px);border-color:var(--c)}
.chip.is-on{background:var(--c);border-color:var(--c);color:#fff}
.chip.is-on::before{background:#fff}
.hits{margin:0 0 30px;font-size:13px;font-weight:800;color:var(--ink-mid)}

/* ---------- 質問のまとまり ---------- */
.qs{padding:30px 0;border-top:1px solid var(--line)}
.qs:first-of-type{border-top:0;padding-top:0}
.qs__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0 0 18px}
.qs__head h2{margin:0;font-size:19px;font-weight:900;padding-left:14px;
  border-left:5px solid var(--c);line-height:1.5;scroll-margin-top:96px}
.qs__n{margin:0;font-size:12px;font-weight:700;color:var(--ink-dim)}

/* 1問ぶん。details なので JavaScript なしで開閉できる */
.qa{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px;
  overflow:hidden}
.qa[open]{border-color:var(--c);box-shadow:0 10px 26px rgba(0,0,0,.06)}
.qa summary{list-style:none;cursor:pointer;padding:19px 56px 19px 22px;position:relative;
  font-size:15px;font-weight:800;line-height:1.7;transition:background-color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--bg-soft)}
/* 右端の＋。開くと −（横棒だけ）になる */
.qa summary::after,.qa summary::before{content:'';position:absolute;right:24px;top:50%;
  background:var(--c);transition:transform .25s,opacity .25s}
.qa summary::before{width:13px;height:2.5px;margin-top:-1.25px;border-radius:2px}
.qa summary::after{width:2.5px;height:13px;margin-top:-6.5px;margin-right:5.25px;border-radius:2px}
.qa[open] summary::after{transform:rotate(90deg);opacity:0}
.qa__a{padding:2px 22px 22px;font-size:14px;line-height:1.95;color:var(--ink-mid);
  border-top:1px solid var(--line);margin-top:0;padding-top:18px}
.qa__a p{margin:0 0 14px}
.qa__a p:last-child{margin:0}
.qa__a strong{color:var(--ink);font-weight:900}
.qa__a a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
.qa__a ul{margin:0 0 14px;padding-left:1.2em}
/* 絞り込みで外れた質問・まとまりは消す */
.qa[hidden],.qs[hidden]{display:none}
.none{margin:0;padding:28px;border-radius:18px;background:var(--bg-soft);
  border:1px dashed var(--line);text-align:center;font-size:14px;font-weight:700;
  color:var(--ink-mid)}