/* ================================
   FAQ：導入リード
================================ */

.faq-intro__lead {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-left: auto;

  max-width: 40rem;

  text-align: center;
}
/* ================================
   FAQ：カテゴリ目次レイアウト
================================ */

/* SPでは1カラム縦並び */
@media (max-width: 767.98px) {

  /* 目次同士のスキマを半分くらいに */
  .page-faq
  .l-toc-3col {
    /* ボックス系 */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  /* 各目次ブロックの下マージンも少しだけに */
  .page-faq
  .c-toc {
    /* 位置系 */
    margin-bottom: 0.2rem;
  }

  /* ボタン自体の上下パディングを少し減らす */
  .page-faq
  .c-toc__title {
    /* ボックス系 */
    padding-top: 0.45rem;
    padding-right: 1rem;
    padding-bottom: 0.45rem;
    padding-left: 1rem;

    /* 位置系 */
    display: flex;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 767.98px) {

  /* 目次ブロック全体の余白を完全にリセット */
  .page-faq
  .c-toc {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0; /* ←ここ重要 */
    margin-left: 0;

    padding-top: 0;
    padding-bottom: 0;
  }

}

/* ================================
   FAQ：ブロック見出し
================================ */

/* 見出し（下線＋余白） */
.page-faq
.faq-block__title {
  /* 位置系 */
  margin-top: 3rem;
  margin-right: 0;
  margin-bottom: 1.6rem;
  margin-left: 0;

  /* ボックス系 */
  padding-bottom: 0.6rem;
  display: inline-block;

  /* タイポ系 */
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;

  /* 色・装飾系 */
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: var(--hero-orange);
}


/* ================================
   FAQ：アコーディオン（Q行＋＋/−）
================================ */

/* 1問の枠（下線で区切る） */
.page-faq
.faq-accordion {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e6e6e6;
}

/* クリックできるヘッダー行 */
.page-faq
.faq-accordion__head {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.4rem;
  padding-right: 0;
  padding-bottom: 1.4rem;
  padding-left: 0;

  /* タイポ系 */
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;

  /* 色・装飾系 */
  background-color: transparent;
  border-width: 0;
  border-style: none;
  cursor: pointer;
}

/* Q.（オレンジ） */
.page-faq
.faq-accordion__q {
  /* ボックス系 */
  flex: 0 0 auto;

  /* タイポ系 */
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;

  /* 色・装飾系 */
  color: var(--hero-orange);
}

/* 質問文（右端アイコン分だけ余白） */
.page-faq
.faq-accordion__question {
  /* ボックス系 */
  flex: 1 1 auto;

  /* タイポ系 */
  font-size: 1.25rem;
  font-weight: 800;
}

/* 右端の丸アイコン（＋/−） */
.page-faq
.faq-accordion__icon {
  /* ボックス系 */
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;

  /* 色・装飾系 */
  background-color: var(--hero-orange);
}

/* ＋記号（閉じている時） */
.page-faq
.faq-accordion__icon::before {
  /* ボックス系 */
  content: "+";
  display: block;

  /* タイポ系 */
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;

  /* 色・装飾系 */
  color: #ffffff;
}

/* 開いている時は「−」 */
.page-faq
.faq-accordion.is-open
.faq-accordion__icon::before {
  content: "−";
}

/* 回答エリア（余白だけFAQ用に整える） */
.page-faq
.faq-accordion__content {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.2rem;
  margin-left: 0;
}

/* 回答文 */
.page-faq
.faq-accordion__answer {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 3.1rem;

  /* タイポ系 */
  font-size: var(--hero-text-md);
  line-height: 1.8;

  /* 色・装飾系 */
  color: var(--hero-gray);
}


/* ================================
   FAQ：スクリーンリーダー専用
================================ */

/* 視覚的に隠す（JSが要求するラベルを残す） */
.page-faq
.u-sr-only {
  /* 位置系 */
  position: absolute;

  /* ボックス系 */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  /* 色・装飾系 */
  border-width: 0;
  border-style: none;
}