/* ===================================================================
 * faq.css — よくある質問(block/page/faq.php)
 *
 * ページヒーローのクリームから地を続け、最大 960px の列に目次(白い箱)とカテゴリごとの Q&A を並べる。
 * 目次のピルは事業所紹介の「拠点の一覧」と同じ形(カテゴリ色の丸は無い)。
 * Q&A は開閉パネル(.accordion--project)の帯に「Q」、本文に「A」の印を足す。
 * 帯は「文字 + 矢印」の両端揃えのため、Q の印を足すと質問文を伸ばさないと矢印が寄らない。
 * =================================================================== */

/* --- 目次 --------------------------------------------------------- */

.faq-index {
  padding-inline: 2.5rem;
}

.faq-index__title {
  font-size: 1.25rem;
}

.faq-index__link {
  min-height: 44px;
  padding-block: 6px;
  border: 1px solid color-mix(in srgb, var(--project-color-text) 20%, transparent);
  font-size: 0.9375rem;
}

.faq-index__link:hover {
  background: var(--project-color-bg-subtle);
}

/* --- カテゴリごとの Q&A --------------------------------------------- */

.faq-cat {
  margin-top: var(--space-4xl);
  scroll-margin-top: var(--space-lg); /* 目次から着いたときの上の余白(ヘッダーの高さはスクロールの JS が足す) */
}

.faq-cat__title {
  font-size: 1.5rem;
}

.faq-item__q,
.faq-item__a {
  flex: 1;
}

.faq-item__a p {
  margin: 0;
}

.faq-item__a p + p {
  margin-top: var(--space-sm);
}

.faq-item__mark {
  flex: none;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.faq-item__mark--a {
  color: var(--project-color-primary);
}

@media (max-width: 767.98px) {

  .faq-index {
    padding-inline: var(--space-lg);
  }

  .faq-index__title {
    font-size: 1.125rem;
  }

  .faq-index__link {
    font-size: 0.875rem;
  }

  .faq-cat {
    margin-top: 2.5rem;
  }

  .faq-cat__title {
    font-size: 1.125rem;
  }

  .faq-item__mark {
    font-size: 1.125rem;
  }
}