/* ============================================================
   よくあるご質問（faq.html）専用
   読み込み順: style.css → sub.css → faq.css
============================================================ */

/* ===============================
   よくあるご質問（faq.html）
                カテゴリ26px 白文字 背景#C4C4C4 / 質問24px Bold / 回答24px 行間1.5
   ※文字サイズ・高さは約0.75倍に調整
=============================== */
.p-faq {
  padding: 64px 0;
  background: #FFFFFF;
  font-family: var(--sub-font);
  color: #3C4043;
}

.p-faq__group + .p-faq__group {
  margin-top: 56px;
}

/* カテゴリ見出し（グレーの帯） */
.p-faq__category {
  margin: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 10px 24px;
  background: #9A7CB6;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
}

.p-faq__list {
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 質問1件：背景色は付けず、下の線で区切る */
.p-faq__item {
  border-bottom: 1px solid #848484;
}

.p-faq__q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 質問の行（クリックで開閉するボタン） */
.p-faq__button {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 22px 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #3C4043;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.2s;
}
.p-faq__button:hover {
  opacity: 0.7;
}

.p-faq__q-mark,
.p-faq__a-mark {
  flex-shrink: 0;
  width: 1.4em;
  font-weight: 700;
}
.p-faq__q-text {
  flex: 1;
  min-width: 0;
}

/* ＋／− アイコン（CSSで描画。開くと縦線が消えて−になる） */
.p-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 16px;
}
.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  margin-top: -1.5px;
  background: #533E67;
  transition: transform 0.25s, opacity 0.25s;
}
.p-faq__icon::after {
  transform: rotate(90deg);
}
.p-faq__button[aria-expanded="true"] .p-faq__icon::after {
  transform: rotate(0deg);
  opacity: 0;
}

/* 回答（開閉アニメーション：grid-template-rows 0fr → 1fr） */
.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.p-faq__a.is-open {
  grid-template-rows: 1fr;
}
.p-faq__a-clip {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0.3s;
}
.p-faq__a.is-open .p-faq__a-clip {
  visibility: visible;
}
.p-faq__a-inner {
  display: flex;
  align-items: flex-start;
  padding: 0 40px 26px 8px;
  font-size: 16px;
  line-height: 1.7;
}
.p-faq__a-text {
  flex: 1;
  min-width: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .p-faq__a,
  .p-faq__a-clip,
  .p-faq__icon::before,
  .p-faq__icon::after {
    transition: none;
  }
}