/* FAQ Page Styles
   - PC: 左カテゴリインデックス（sticky）／右 Q&A 縦並び
   - SP（案A）: 上にインデックス（縦並び・sticky なし）、下に Q&A
   - カテゴリ見出し（.content-block__heading 流用）
   - Q/A アコーディオン（details/summary）
   Breakpoint: PC 768px+ / SP 767px-
 */

.faq-section {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-12xl);
}

.faq-section__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-inner-padding-inline);
}

/* SP: 1カラム（上＝インデックス、下＝Q&A） */
.faq-sidebar {
  background: var(--color-bg);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.faq-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.faq-nav__item {
  margin: 0;
  border-bottom: 1px solid var(--color-sub3);
}

.faq-nav__item:last-child {
  border-bottom: none;
}

.faq-nav__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--color-corporate);
  background: transparent;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.faq-nav__link:hover {
  color: var(--color-corporate);
  background: var(--color-sub3);
}

.faq-content {
  min-width: 0;
}

/* PC: 2カラム（左 sticky インデックス、右 Q&A） */
@media (min-width: 768px) {
  .faq-section__inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .faq-sidebar {
    position: sticky;
    top: 6rem;
    align-self: start;
    margin-bottom: 0;
  }

  .faq-content {
    min-width: 0;
  }
}

/* カテゴリセクション（アンカー飛び先で固定ヘッダーに隠れないように） */
.faq-category {
  scroll-margin-top: 6rem;
  margin-top: var(--space-6xl);
}

.faq-category:first-of-type {
  margin-top: 0;
}

.faq-category__heading {
  margin-bottom: var(--space-2xl);
}

/* FAQ リスト */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 1件の FAQ（details/summary） */
.faq-item {
  border: 1px solid var(--color-sub3);
  border-bottom: none;
}

.faq-list .faq-item:last-child {
  border-bottom: 1px solid var(--color-sub3);
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--color-text);
  background: var(--color-bg);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

/* Firefox: ネイティブマーカーを非表示（WebKit 以外で二重アイコンにならないように） */
.faq-item__question::-moz-list-bullet {
  display: none;
}

.faq-item__question::after {
  content: '';
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  margin-left: auto;
  border-right: 2px solid var(--color-corporate);
  border-bottom: 2px solid var(--color-corporate);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.faq-item[open] .faq-item__question::after {
  transform: rotate(-135deg);
}

.faq-item__question:hover {
  background: var(--color-bg-gray);
}

.faq-item__q-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  background: var(--color-sub1);
  border-radius: var(--radius-sm);
}

.faq-item__q-badge-icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  display: block;
}

.faq-item__question-text {
  flex: 1;
  line-height: var(--lh-normal);
}

.faq-item__answer {
  padding: var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 1.75em + var(--space-sm));
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-text);
  background: var(--color-bg);
  border-top: 1px solid var(--color-bg-gray);
}

.faq-item__answer p {
  margin: 0 0 var(--space-sm);
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

.faq-item__answer ul,
.faq-item__answer ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.5em;
}

.faq-item__answer a {
  color: var(--color-corporate);
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.faq-item__answer a:hover {
  color: var(--color-sub1);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .faq-item__question {
    padding: var(--space-sm) var(--space-md);
  }

  .faq-item__answer {
    padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 1.75em + var(--space-xs));
  }
}