@charset "UTF-8";

/* =========================================================
   JP よくあるご質問  -  page-faq.php
   namespace: .p-faq

   デザイントークンは JP トップ刷新版（css/jp-top-renewal.css の .p-jptop）と
   同じ値を使う。トップのCSSはFV/スライダー等このページで不要な指定を多く含むため
   読み込まず、必要なトークンだけをこのファイルの名前空間に持たせている。
   ========================================================= */

.p-faq {
  --color-text: #1a1a1a;
  --color-text-sub: #555;
  /* accent red（このページのメインカラー） */
  --color-accent: #e63312;
  /* brand red（hover等。--color-accent とは別トーン） */
  --color-brand: #cf0616;
  --color-mark: #a5a5a5;
  --color-bg-gray: #f2f2f2;
  --color-border: #e2e2e2;
  --container: 1000px;
  --radius: 12px;

  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding: 8px 0 96px;
}

.p-faq *,
.p-faq *::before,
.p-faq *::after {
  box-sizing: border-box;
}

.p-faq__inner {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------
   ページ見出し
   --------------------------------------------------------- */
.p-faq__head {
  margin: 0 0 40px;
  text-align: center;
}

/* このページのh1/h2は既存の共通スタイル（黄色の縦線・枠線）を使わない */
.inner .p-faq__h1,
.inner .p-faq__h2 {
  border: none;
  background: none;
  padding: 0;
  letter-spacing: 0;
  color: var(--color-text);
}

/* h1（ページタイトル）は、グロナビ下層ページで見た目を揃える方針により
   ご利用案内ページのタイトル（.p-guide__h1）と同じ 32px / 700 / 1.4 にする。
   上余白はパンくずとタイトルの間隔。入れ物側に既に8pxあるので、
   合計が他の下層ページと同じ23pxになるよう15pxにしている。 */
.inner .p-faq__h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  /* 色は料金ページのタイトルと同じ #212121 */
  color: #212121;
  margin: 15px 0 20px;
  text-align: center;
}

.p-faq__lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

/* ---------------------------------------------------------
   カテゴリナビ（ページ内アンカー）
   --------------------------------------------------------- */
.p-faq__nav {
  margin: 0 0 56px;
}

.p-faq__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-faq__nav-item {
  margin: 0;
  padding: 0;
}

.p-faq__nav-item::before {
  content: none;
}

.inner .p-faq__nav-link {
  display: block;
  padding: 10px 22px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.inner .p-faq__nav-link:hover,
.inner .p-faq__nav-link:focus-visible {
  color: #fff;
  background: var(--color-brand);
  border-color: var(--color-brand);
}

/* スクロール連動のアクティブ表示（js/jp-faq.js が付与） */
.inner .p-faq__nav-link.is-current {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: #fff;
}

/* ---------------------------------------------------------
   カテゴリセクション
   --------------------------------------------------------- */
.p-faq__section {
  margin: 0 0 64px;
  /* 固定ヘッダー分のスクロール位置オフセット
     （--el-header-h は header.php が実測して同期する） */
  scroll-margin-top: calc(var(--el-header-h, 217px) + 16px);
}

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

.inner .p-faq__h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 24px;
}

.p-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  margin: 0 0 12px;
  transition: border-color 0.2s ease;
}

.p-faq__item::before {
  content: none;
}

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

.p-faq__item:hover {
  border-color: #cfcfcf;
}

.p-faq__item.is-open {
  border-color: var(--color-border);
}

/* ---- 質問（開閉ボタン） ---- */
.p-faq__q {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.p-faq__q-btn {
  width: 100%;
  display: flex;
  /* 質問文が折り返しても「Q」が1行目に揃うようにする */
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
}

/* Q / A のマーカーは擬似要素で出す。
   h3 のテキストを質問文だけに保ち、AIクローラーや読み上げに
   「Q」が混ざらないようにするため、DOMには持たせない */
.p-faq__q-btn::before,
.p-faq__a-inner::before {
  content: "Q";
  flex-shrink: 0;
  width: 22px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-mark);
  text-align: center;
}

.p-faq__a-inner::before {
  content: "A";
  color: var(--color-accent);
}

.p-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---- ＋ / − トグル ---- */
.p-faq__toggle {
  flex-shrink: 0;
  /* 質問文が複数行になっても、ボタンはカードの高さの中央に置く */
  align-self: center;
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.p-faq__toggle-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 2本目を縦にして「＋」にする。開いているときは消して「−」にする */
.p-faq__toggle-bar:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}

.p-faq__q-btn[aria-expanded="true"] .p-faq__toggle-bar:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* ---- 回答 ---- */
/* max-height での開閉。display:none を使わないことで、
   閉じている状態でも回答テキストがHTML内に残りクローラーから読める */
.p-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* JSが動く前でも初期表示の1問目が開いて見えるようにするフォールバック。
   JSは開いた時点で実寸の max-height をインラインで上書きする */
.p-faq__item.is-open .p-faq__a {
  max-height: 4000px;
}

.p-faq__a-inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 28px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--color-border);
}

.p-faq__a-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.95;
  color: #333;
}

.p-faq__a-body a {
  color: var(--color-accent);
  text-decoration: underline;
}

.p-faq__a-body a:hover {
  opacity: 0.7;
}

/* ---------------------------------------------------------
   SP
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .p-faq {
    padding: 0 0 56px;
  }

  .p-faq__inner {
    padding: 0 16px;
  }

  .p-faq__head {
    margin-bottom: 28px;
  }

  .inner .p-faq__h1 {
    /* SPもご利用案内ページのタイトルと同じ24px。
       SPは入れ物側の上余白8pxが無くなるので、ここで23pxを持つ */
    font-size: 24px;
    margin-top: 23px;
    margin-bottom: 14px;
  }

  .p-faq__lead {
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
  }

  .p-faq__br-pc {
    display: none;
  }

  /* ナビは折り返さず横スクロール。左右の余白いっぱいまで使う */
  .p-faq__nav {
    margin: 0 -16px 36px;
  }

  .p-faq__nav-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 16px;
    gap: 8px;
  }

  .p-faq__nav-list::-webkit-scrollbar {
    display: none;
  }

  .inner .p-faq__nav-link {
    padding: 9px 16px;
    font-size: 14px;
  }

  .p-faq__section {
    margin-bottom: 44px;
  }

  .inner .p-faq__h2 {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .p-faq__q-btn {
    gap: 10px;
    padding: 18px 16px;
  }

  .p-faq__q-btn::before,
  .p-faq__a-inner::before {
    width: 16px;
    font-size: 17px;
  }

  .p-faq__q-text {
    font-size: 15px;
  }

  .p-faq__toggle {
    width: 36px;
    height: 22px;
  }

  .p-faq__toggle-bar {
    width: 10px;
  }

  .p-faq__a-inner {
    gap: 10px;
    margin: 0 16px;
    padding: 16px 0 20px;
  }

  .p-faq__a-body {
    font-size: 14px;
    line-height: 1.9;
  }
}

@media (prefers-reduced-motion: reduce) {

  .p-faq__a,
  .p-faq__toggle-bar,
  .inner .p-faq__nav-link {
    transition: none;
  }
}