@charset "UTF-8";
/* ==========================================================================
   faq.css — よくあるご質問 ページ個別スタイル
   design/12_よくあるご質問.psb（2x・キャンバス3000px）から実測 → 1/2 実寸 px で直書き。
   PC固定1320px / SPは @media (max-width:768px) のみ可変。
   ========================================================================== */


/* コンテンツ幅は共通トークン（--w-inner = 1102px）に揃える */
.p-faq .c-breadcrumb,
.p-faq .p-faq__cats,
.p-faq .p-faq__sec { width: var(--w-inner); margin-inline: auto; }

/* ---- ページタイトル（罫は common.css に共通化済み） -------------------- */
.p-faq .p-lower__ttl {
  width: var(--w-inner);
  margin: 0 auto;
}

/* ==========================================================================
   カテゴリへのジャンプ（3ボタン）: 本体は共通クラス .c-anchor-nav（common.css）。
   このページ固有なのは上マージンのみ。
   ========================================================================== */
.p-faq__cats { margin-top: 73px; }

/* ==========================================================================
   セクション（売却について / 仲介について / 買取について）
   ========================================================================== */
.p-faq__sec { margin-top: 66px; scroll-margin-top: 20px; }
.p-faq__sec-ttl {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 66px;
}

/* ==========================================================================
   Q&A アコーディオン
   PSB: 質問バー 2200x114 → 1100x57 / バー間 44 → 22px / 背景 #f2f4f6
   ========================================================================== */
.p-faq__item + .p-faq__item { margin-top: 22px; }

.p-faq__q { margin: 0; }
.p-faq__q-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 57px;
  box-sizing: border-box;
  padding: 10px 82px 10px 21px;   /* 右はアイコン分（31px + 20px + 余白） */
  background: var(--c-bg);
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .2s ease;
}
.p-faq__q-btn:hover { background: var(--c-gray); }
.p-faq__q-btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.p-faq__q-mark {
  flex: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
  margin-right: 6px;              /* PSB: Q.右端489 → 質問文左500（11/2≒6） */
}
.p-faq__q-txt {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-black);
}

/* ＋／− アイコン（PSB: 39x9 → 20x4px、バー右端から31px） */
.p-faq__icon {
  position: absolute;
  top: 50%;
  right: 31px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}
.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: var(--c-blue);
}
/* 縦棒（閉じているときだけ表示 ＝ ＋） */
.p-faq__icon::after { transform: rotate(90deg); transition: transform .25s ease, opacity .25s ease; }
.p-faq__q-btn[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;
  background: var(--c-white);
  transition: grid-template-rows .3s ease;
}
.p-faq__a.is-open { grid-template-rows: 1fr; }
.p-faq__a-inner {
  min-height: 0;
  overflow: hidden;
}
.p-faq__a-txt {
  padding: 12px 51px;              /* 左は PSB: バー左400 → 本文502（102/2=51） */
  font-size: 17px;
  font-weight: 400;
  line-height: 2;                 /* PSB: Leading 68 / FontSize 34 */
  color: var(--c-black);
}
/* 管理画面のリッチエディタは <p> で入ってくる。ベタ書き時（<p class="p-faq__a-txt">）と
   余白が変わらないよう、内側の段落のマージンを打ち消す。段落を分けたときだけ間を空ける。 */
.p-faq__a-txt > p { margin: 0; }
.p-faq__a-txt > p + p { margin-top: 1em; }

/* 原稿未入稿のプレースホルダ（原稿受領後に p-faq__a-txt--todo は消える） */
.p-faq__a-txt--todo { color: #6b747c; }

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 768px) {
  .p-faq .c-breadcrumb,
  .p-faq .p-lower__ttl,
  .p-faq .p-faq__cats,
  .p-faq .p-faq__sec { width: 100%; }

  .p-faq__cats {
    gap: 12px;
    margin-top: 32px;
  }
  .p-faq__cat { width: 100%; height: 56px; font-size: 16px; }

  .p-faq__sec { margin-top: 44px; }
  .p-faq__sec-ttl { font-size: 22px; margin-bottom: 24px; }

  .p-faq__item + .p-faq__item { margin-top: 12px; }
  .p-faq__q-btn { min-height: 0; padding: 12px 44px 12px 12px; align-items: flex-start; }
  .p-faq__q-mark { font-size: 16px; line-height: 1.6; margin-right: 5px; }
  .p-faq__q-txt { font-size: 16px; line-height: 1.6; }
  .p-faq__icon { top: 18px; right: 14px; width: 16px; height: 16px; margin-top: 0; }
  .p-faq__icon::before,
  .p-faq__icon::after { width: 16px; height: 3px; margin-top: -1.5px; }

  .p-faq__a-txt { padding: 10px 12px; font-size: 15px; line-height: 1.9; }
}