@charset "UTF-8";
/* ============================================================
   faq.css ― よくある質問
   開閉のJSは assets/js/site.js（[data-accordion-trigger]）。
   ここでは [aria-expanded] の値で見た目だけを切り替える。
   ============================================================ */

.p-faq {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* --- グループ見出し（英字ラベル＋h2）------------------------- */
.p-faq__grouphead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.p-faq__group-en {
  font-family: var(--f-latin);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--c-gold);   /* 装飾。直後のh2と同じ意味なので aria-hidden */
}
.p-faq__group-title {
  font-family: var(--f-mincho);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: var(--ls-mincho);
  color: var(--c-ink-strong);
}

/* --- 1問ぶんの箱 -------------------------------------------- */
.p-faq__list { display: flex; flex-direction: column; gap: 14px; }
.p-faq__item {
  background: var(--c-card);
  color: var(--c-ink);
  border: var(--border);
  border-radius: var(--radius);
  /* ⚠ overflow:hidden にすると、中のボタンの :focus-visible の枠
     （outline-offset 2px）が切り取られて見えなくなる。付けない。 */
}

/* --- 質問（ボタン）------------------------------------------ */
.p-faq__q { font-size: inherit; font-weight: inherit; }
.p-faq__btn {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 24px 28px;
  background: var(--c-card);
  color: var(--c-ink-strong);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color var(--t-out);
}
.p-faq__btn:hover {
  background: var(--c-base);
  color: var(--c-ink-strong);
  transition: background-color var(--t-in);
}
.p-faq__q-mark {
  flex-shrink: 0;
  font-family: var(--f-latin);
  font-size: 20px;
  color: var(--c-gold);   /* 装飾。aria-hidden */
}
.p-faq__q-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--c-ink-strong);
}
/* ＋／− は開閉状態から作る（JSで書き換えない）。装飾なので aria-hidden */
.p-faq__toggle {
  flex-shrink: 0;
  font-family: var(--f-latin);
  font-size: 18px;
  line-height: 1;
  color: var(--c-gold);
}
.p-faq__btn[aria-expanded="false"] .p-faq__toggle::before { content: "+"; }
.p-faq__btn[aria-expanded="true"]  .p-faq__toggle::before { content: "−"; }

/* --- 答え ---------------------------------------------------- */
.p-faq__a {
  display: flex;
  gap: 18px;
  padding: 0 28px 26px;
  border-top: 1px solid var(--c-base-alt);
  background: var(--c-card);
  color: var(--c-ink-mid);
}
/* ⚠ display:flex は [hidden] より強い。閉じたときを必ず打ち消す */
.p-faq__a[hidden] { display: none; }
.p-faq__a-mark {
  flex-shrink: 0;
  padding-top: 18px;
  font-family: var(--f-latin);
  font-size: 20px;
  color: var(--c-brand);
}
.p-faq__a-text {
  padding-top: 20px;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: var(--c-ink-mid);
}