/* =====================================================================
   faq.css — TOP よくある質問（アコーディオン）
   開閉は header.js の [data-accordion] ハンドラを共用（aria-expanded を切替）
   ===================================================================== */
.p-faq {
  position: relative;
  isolation: isolate;
  overflow: visible;           /* 装飾ブロブの上へのはみ出し(縦)は見せる */
  overflow-x: clip;            /* 横方向だけクリップ（アクセントの左右はみ出しを止める。縦は visible 維持） */
  background: var(--container-white);
  padding-block: calc(var(--space-64) + 109px) var(--space-64);   /* 上173px / 下64px */
}
/* 上辺の波（クリーム地が白へ降りる） */
.p-faq__wave {
  position: absolute;
  top: -1px; left: 0; right: 0;
  z-index: 0;
  line-height: 0;
  background: var(--bg-default);
}
.p-faq__wave img { width: 100%; height: auto; }
/* 上部アクセント（SPのみ・左上/右上に絶対配置） */
.p-faq__accent { display: none; position: absolute; z-index: 0; height: auto; pointer-events: none; }
.p-faq__accent--left  { top: -30px; left: -40px; width: 144px; }
.p-faq__accent--right { top: 210px; right: -20px; width: 90px; }
@media (max-width: 599px) {
  .p-faq__accent { display: block; }
  .p-faq { padding-block: 70px; }   /* SP: 上辺をfaq-top.svgに差し替えたのに合わせて上下70pxに */
}

/* 装飾ブロブ（PCのみ・右上） */
.p-faq__blob { position: absolute; z-index: 0; pointer-events: none; display: none; }
/* 画面中央から inner の半分(=幅1056pxの半分 480+48=528px)右へ。要素中心をその位置に合わせる
   （中央寄せは margin-left で。transform は reveal.js のアニメーションが使うため使わない） */
.p-faq__blob--1 { top: -76px; left: calc(50% + 480px + var(--space-48)); margin-left: -75px; width: 150px; height: auto; }
.p-faq__blob--2 { top: 150px; left: calc(50% + 560px + var(--space-48)); margin-left: -40px; width: 80px; height: auto; }

.p-faq__inner {
  position: relative;
  z-index: 1;
  max-width: calc(960px + var(--space-48) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
}
/* SP: 左右余白を16→24pxに（ベース宣言より後に置いて上書き） */
@media (max-width: 599px) {
  .p-faq__inner { padding-inline: 24px; }
}

/* 見出し */
.p-faq__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.p-faq__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-faq__dots { width: 64px; height: auto; }
.p-faq__heading {
  margin-top: var(--space-12);
  font-size: clamp(32px, 6.4vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-align: center;
}

/* リスト */
.p-faq__list {
  list-style: none;
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-faq__item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-16);
  background: var(--container-white);
  transition: background-color .2s ease;
}
/* 開いている項目は薄ピーチ背景 */
.p-faq__item:has(.p-faq__q[aria-expanded="true"]) { background: #fcf5ea; }

/* 質問（トグルボタン） */
.p-faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  padding: var(--space-24);
  text-align: left;
}
.p-faq__qtext {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}

/* Q / A ラベル */
.p-faq__label {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
}
.p-faq__label--q { background: rgba(185, 223, 158, .24); color: var(--color-primary); }
.p-faq__label--a { background: rgba(235, 197, 145, .24); color: var(--text-orange); }

/* ＋ / − トグル */
.p-faq__toggle {
  position: relative;
  flex: none;
  width: 24px; height: 24px;
}
.p-faq__toggle::before,
.p-faq__toggle::after {
  content: "";
  position: absolute;
  left: 3px; top: 11px;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--icon-primary);   /* #39871f */
}
.p-faq__toggle::after { transform: rotate(90deg); transition: opacity .2s ease, transform .2s ease; }
.p-faq__q[aria-expanded="true"] .p-faq__toggle::after { opacity: 0; transform: rotate(0); }

/* 回答（開閉・高さ可変）
   よくある質問（p-fq）と同じ grid-template-rows 0fr↔1fr 方式に統一。
   max-height:固定値だと短い回答は速く・長い回答は途中で切れる不自然さが出るため、
   コンテンツ高さぴったりに滑らかに開閉する grid 方式へ揃える。 */
.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.p-faq__q[aria-expanded="true"] + .p-faq__a { grid-template-rows: 1fr; }
.p-faq__a-clip { overflow: hidden; }
.p-faq__a-inner {
  display: flex;
  gap: var(--space-24);
  padding: 0 var(--space-24) var(--space-24);
}
/* 回答本文＋リッチパーツ（テーブル/ボタン等）を縦積み */
.p-faq__abody {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-faq__atext {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* ---------- p-fq-fund : 出資金テーブル（よくある質問と共通デザイン） ---------- */
.p-fq-fund {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-8);
  overflow: hidden;
  table-layout: fixed;
}
.p-fq-fund th,
.p-fq-fund td {
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-12);
  vertical-align: middle;
}
.p-fq-fund tr > *:last-child { border-right: 0; }
.p-fq-fund tbody tr:last-child > * { border-bottom: 0; }
.p-fq-fund__th {
  background: #aba9a7;
  color: var(--text-white);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  text-align: center;
}
.p-fq-fund thead th:first-child { width: 50%; }
.p-fq-fund tbody td { background: var(--container-white); }
.p-fq-fund__region {
  width: 50%;
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-fq-fund__price {
  text-align: center;
  white-space: nowrap;
}
.p-fq-fund__price b {
  font-size: 28px;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-fq-fund__yen {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}

/* ---------- p-fq-fees : エリア別手数料リンクグリッド（よくある質問と共通） ---------- */
.p-fq-fees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
}
.p-fq-fees .c-btn { min-width: 0; width: 100%; }
@media (max-width: 1023px) {
  .p-fq-fees { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 回答内リンク（よくある質問と共通） ---------- */
.p-fq__link {
  align-self: flex-start;
  color: var(--text-link);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-fq__link:hover { text-decoration: none; }

/* ---------- p-fq-cta : CTAボタン（回答本文中・左寄せ固定幅） ---------- */
.p-fq-cta {
  align-self: flex-start;
  min-width: 280px;
}
@media (max-width: 599px) {
  .p-fq-cta { width: 100%; min-width: 0; }
}

/* ---------- p-fq-media : テキスト＋画像 横並び（よくある質問と共通） ---------- */
.p-fq-media {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
}
.p-fq-media__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-fq-media__img {
  flex: none;
  width: 180px; height: 180px;
  border-radius: var(--radius-16);
  overflow: hidden;
  background: var(--border-light);
}
.p-fq-media__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 画像プレースホルダ（本番画像未書き出し用） */
.p-fq-media__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  background:
    repeating-linear-gradient(45deg, #ece7df 0 10px, #f4f0ea 10px 20px);
}
@media (max-width: 599px) {
  .p-fq-media { flex-direction: column; }
  /* SP: 正方形写真を切り取らず全体表示（横長固定高さ→正方形枠に） */
  .p-fq-media__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

.p-faq__more { color: var(--text-primary); margin-top: var(--space-16); }   /* inner gap 48 + 16 = ボタン上64px */

@media (min-width: 1024px) {
  .p-faq__blob { display: block; }
}