/* ページ全体の共通設定（基本フォント・文字色）。
   FVや背景画像を画面幅いっぱいに表示したいので、ページ全体には max-width を付けない。
   コンテンツ幅の制限は各セクション内側の .rl-container（1080px）だけでおこなう */
.relyon-faq-page {
  --rl-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --rl-container: 1080px;
  /* セクション内容の幅 */
  --rl-ink: #222222;
  /* 本文の基本文字色 */
  --rl-ink-soft: #333333;
  /* 本文より少し薄いグレーの文字色 */


  width: 100%;

  font-family: var(--rl-sans-jp);
  color: var(--rl-ink);
  line-height: 1.9;
}

/* ---------- ヒーロー ---------- */
/* 構造（サイズ・背景・余白）は共通コンポーネント assets/css/components/rl-hero.css 側。
   ここではFAQページ固有のタイポグラフィのみ指定する。 */

/* ヒーロータイトル「FAQ」の文字（画面幅に応じて32px〜64pxで可変） */
.relyon-faq-page .rl-hero__title {
  font-family: "Baskerville", "Baskerville Old Face", "Libre Baskerville", "Times New Roman", serif;
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  margin: 0;
  line-height: 1;
}

/* ヒーローのサブテキスト「よくある質問」 */
.relyon-faq-page .rl-hero__sub {
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  color: #fff;
  font-size: 13px;
  letter-spacing: .18em;
  margin: 10px 0 0;
}

/* セクション内側の幅を中央寄せ */
.relyon-faq-page .rl-container {
  max-width: var(--rl-container);
  margin-inline: auto;
}

/* 画面幅が1180px以下になったらセクション幅を90%に縮める */
@media (max-width: 1180px) {
  .relyon-faq-page .rl-container {
    width: 90%;
  }
}

/* ===== FAQ一覧セクション ===== */
.relyon-faq-page .rl-faq {
  padding: 100px 0 160px;
}

/* カテゴリ1つ分（料金について／サポートについて／その他） */
.relyon-faq-page .rl-faq-category {
  margin-bottom: 56px;
}

.relyon-faq-page .rl-faq-category:last-child {
  margin-bottom: 0;
}

/* カテゴリ見出し（左→右で #00489D から #009DE6 に変化するグラデーション） */
.relyon-faq-page .rl-faq-category__title {
  margin: 0 0 24px;
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .06em;
  background: linear-gradient(90deg, #00489D 0%, #009DE6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 質問一覧（縦並び） */
.relyon-faq-page .rl-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 質問1件分（<details>。枠を付けて1つの箱に見えるようにする） */
.relyon-faq-page .rl-faq-item {
  background-color: #eef3f5;
  border: 1px solid #eef3f5;
  border-radius: 12px;
  overflow: hidden;
}

/* 質問行（<summary>。ネイティブの開閉マーカーは消して自作の＋／－アイコンを使う） */
.relyon-faq-page .rl-faq-item__question {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}

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

/* 「Q」マーク */
.relyon-faq-page .rl-faq-item__q {
  flex: none;
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: 20px;
  color: #1c9dd6;
}

/* 質問文（幅が狭くなったら折り返す） */
.relyon-faq-page .rl-faq-item__text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--rl-ink);
  word-break: break-word;
}

/* 開閉アイコン（＋ / ー） */
.relyon-faq-page .rl-faq-item__icon {
  flex: none;
  width: 20px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  color: #1c9dd6;
}

.relyon-faq-page .rl-faq-item__icon .icon-minus {
  display: none;
}

.relyon-faq-page .rl-faq-item[open] .rl-faq-item__icon .icon-plus {
  display: none;
}

.relyon-faq-page .rl-faq-item[open] .rl-faq-item__icon .icon-minus {
  display: inline;
}

/* 回答行（「A」＋本文の横並び・上に区切り線を入れて囲まれているように見せる。
   <details>が閉じている間はブラウザが自動で非表示にするので display は常にflexでよい） */
.relyon-faq-page .rl-faq-item__answer {
  display: flex;
  gap: 16px;
  padding: 18px 24px 22px 24px;
  background-color: #fff;
  border-top: 1px solid #eef3f5;
}

/* 「A」マーク */
.relyon-faq-page .rl-faq-item__a {
  flex: none;
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: 20px;
  color: #1c9dd6;
}

/* 回答文（幅が狭くなったら折り返す） */
.relyon-faq-page .rl-faq-item__a-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--rl-ink-soft);
  word-break: break-word;
}

/* 画面幅が768px以下になったらヒーローの文字サイズを縮める（余白は共通コンポーネント側） */
@media (max-width: 768px) {
  .relyon-faq-page .rl-hero__sub {
    font-size: 12px;
  }
}

/* 画面幅が540px以下になったらセクションの余白を縮める */
@media (max-width: 540px) {
  .relyon-faq-page .rl-faq {
    padding: 64px 0 100px;
  }

  .relyon-faq-page .rl-faq-item__question {
    padding: 16px;
  }

  .relyon-faq-page .rl-faq-item__answer {
    padding: 18px 16px 18px;
  }
}