@charset "UTF-8";

/* ==========================================================================
   LIFE TENNIS - faq.css（よくあるご質問ページ専用）
   ========================================================================== */

/* --------------------------------------------------------------------------
   カテゴリ絞り込み
   -------------------------------------------------------------------------- */
.faq-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.faq-filter__btn {
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--line);
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: background-color .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease), transform .26s var(--ease);
}
.faq-filter__btn:hover { transform: translateY(-2px); border-color: var(--sky-pale); }
.faq-filter__btn.is-active {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   質問グループ
   -------------------------------------------------------------------------- */
.faq-group + .faq-group { margin-top: 56px; }
.faq-group[hidden] { display: none; }

.faq-group__title { margin-bottom: 20px; }
.faq-group__title .sec-label { font-size: 15px; }

.faq-group__list { display: grid; gap: 14px; }

.faq-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 15px;
}

.faq-note {
  margin-top: 56px;
  padding: 30px 34px;
  border-radius: var(--radius);
  background: var(--sky-mist);
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faq-filter { gap: 8px; }
  .faq-filter__btn { padding: 10px 16px; font-size: 13.5px; }
  .faq-group + .faq-group { margin-top: 40px; }
  .faq-note { margin-top: 40px; padding: 24px 20px; font-size: 14.5px; }
}