@charset "UTF-8";
/* ==========================================================================
   よくあるご質問ページ専用スタイル / faq.html
   （.faq-list / .faq-item のベーススタイルは common.css 側に定義）
   ========================================================================== */

/* --------------------------------------------------------------- 目次 */
.faq-nav {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 28px;
}

.faq-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
}

.faq-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy);
}
.faq-nav__list a::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-right: 1.8px solid var(--gold);
  border-bottom: 1.8px solid var(--gold);
  transform: rotate(45deg);
  margin-top: -3px;
}

/* --------------------------------------------------------------- すべて開く */
.faq-tools { display: flex; justify-content: flex-end; margin-bottom: 22px; }

.faq-tools__btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 22px;
  font-family: var(--font-jp);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.faq-tools__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --------------------------------------------------------------- カテゴリ */
.faq-group { scroll-margin-top: calc(var(--header-h) + 28px); }
.faq-group + .faq-group { margin-top: 60px; }

/* --------------------------------------------------------------- レスポンシブ */
@media (max-width: 768px) {
  .faq-nav { padding: 18px 20px; }
  .faq-nav__list { justify-content: flex-start; gap: 10px 20px; }
  .faq-nav__list a { font-size: 1.35rem; }
  .faq-group + .faq-group { margin-top: 44px; }
}