/* ==========================================================
   STILLIFES LP  faq.css（よくある質問ページ専用）
   ----------------------------------------------------------
   色や文字の変数は style.css の :root を使っています。
   共通の部品（.faq__item の開閉、ボタン、フッター等）も style.css にあります。
   ========================================================== */

/* ---------- ページ上部のバー ---------- */
.subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--side);
  background: var(--color-ink);
  color: var(--color-paper);
}
.subhead__logo {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3px;
  text-decoration: none;
}
.subhead__back { font-size: 13px; color: var(--color-accent); }

/* ---------- タイトル ---------- */
.faq-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px var(--side) 40px;
  text-align: center;
}
.faq-hero h1 { font-size: 26px; font-weight: 700; line-height: 1.5; }
.faq-hero__lead { font-size: 13px; line-height: 1.9; color: var(--color-text-muted); }

/* ---------- カテゴリへのジャンプ ---------- */
.faq-nav { padding: 0 var(--side) 48px; }
.faq-nav__list { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav__list a {
  display: block;
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: 99px;
  background: var(--color-white);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.faq-nav__list a:hover { border-color: var(--color-accent); }

/* ---------- カテゴリごとのブロック ---------- */
.faq-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--side) 56px;
  scroll-margin-top: 16px;
}
.faq-block__num { font-family: var(--font-en); font-size: 13px; font-weight: 500; letter-spacing: 3px; color: var(--color-accent-text); }
.faq-block h2 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.faq-block .faq__list { margin-top: 4px; }
.faq-block .faq__item p { padding-right: 4px; }

/* ---------- 下部の誘導 ---------- */
.faq-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 8px 16px 72px;
  padding: 36px 20px 28px;
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  background: var(--color-white);
  text-align: center;
}
.faq-bottom h2 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.faq-bottom p { font-size: 13px; line-height: 1.9; color: var(--color-text-sub); }
.faq-bottom__back { font-size: 14px; font-weight: 700; }