/* ============================================
   BJ 2.0 — FAQ Page Styles
   ============================================ */

/* ============================
   FAQ Accordion (.bj-faq)
   ============================ */
.bj-faq { background: var(--color-bg); }
.bj-faq__inner { max-width: var(--content-w); margin: 0 auto; }

.bj-faq__category {
  margin-bottom: clamp(48px, 8vw, 80px);
}
.bj-faq__category:last-child { margin-bottom: 0; }

.bj-faq__category-label {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-text);
  letter-spacing: var(--ls-heading);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.bj-faq__list { list-style: none !important; }
.bj-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.bj-faq__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif-jp);
  font-weight: 300;
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}
.bj-faq__toggle:hover { color: var(--color-accent); }

.bj-faq__icon {
  flex-shrink: 0;
  font-family: var(--serif-en);
  font-size: 20px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.4;
  transition: transform 0.3s ease;
}
.bj-faq__toggle[aria-expanded="true"] .bj-faq__icon {
  transform: rotate(45deg);
}

.bj-faq__answer {
  overflow: hidden;
}
.bj-faq__answer[hidden] { display: none; }

.bj-faq__answer-inner {
  padding: 0 0 28px;
}
.bj-faq__answer-inner p {
  font-size: var(--fs-body-sm);
  line-height: 2.2;
  color: var(--color-text-sub);
}
.bj-faq__answer-inner p + p { margin-top: 16px; }

@media (max-width: 767px) {
  .bj-faq__toggle { font-size: var(--fs-body-sm); padding: 20px 0; }
}