@charset "UTF-8";
/* ============================================================
   faq — よくあるご質問（独立デザインページ）
   ------------------------------------------------------------
   PSD: 01_支給/260901/psd/wingclinic_faq.psd（1920px・1:1）
   数値はレイヤー実測値。ヒーロー（.p-hero）は lower.css 側。

   Q/A の丸アイコンはTOPの .faq と同じ見た目だが、
   TOPは開閉式・このページは常時展開なので別クラスにしてある。
============================================================ */

.p-faq {
  /* --- PSD実測色 --- */
  --fq-teal:     #51b8c8;  /* 導入部背景・Q・罫線 */
  --fq-bg:       #e6eef1;  /* Q&Aセクション背景（flat.png で要確認） */
  --fq-tab:      #abd9df;  /* カテゴリボタン */
  --fq-tab-text: #927957;
  --fq-title:    #595757;  /* セクション見出し */
  --fq-text:     #727171;  /* 質問・回答 */
  --fq-gold:     #d4bc8c;  /* A */

  /* --- レイアウト --- */
  --fq-list:     770px;

  color: var(--fq-text);
  font-family: var(--ff-serif);
}

/* ============================================================
   導入（ティール背景）＋カテゴリ切替
============================================================ */
/* 帯・リードの土台は lower.css の .p-band / .p-band__lead。差分だけ上書き */
.p-faq__lead {
  width: 740px;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 16px;
  opacity: .7;
}

/* --- カテゴリボタン：見た目は lower.css の .p-tab 共通。ここはレイアウトのみ --- */
/* 料金表と同じ「帯の中・リード下」に配置。余白は帯側のpaddingに任せる */
.p-faq__tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 32px;
    width: 800px;
    max-width: 100%;
    margin-top: 28px;
}
.p-faq__tab {
  width: 312px;
  height: 60px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

/* ============================================================
   カテゴリ別 Q&A
============================================================ */
.p-faq__section {
  padding: 60px 16px 60px;
  background: var(--fq-bg);
  scroll-margin-top: 100px;
}
/* PSD実測：カテゴリごとに背景が交互（1=#e6eef1 / 2=白 / 3=#e6eef1 …） */
.p-faq__section:nth-of-type(even) { background: var(--c-white); }
.p-faq__section-inner {
  width: var(--fq-list);
  max-width: 100%;
  margin: 0 auto;
}
.p-faq__section-title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--fq-title);
}
.p-faq__list {
  margin: 40px 0 0;
}

/* --- 1問 --- */
.p-faq__item {
  min-height: 172px;         /* PSD: 3行回答で 172px、ピッチ 228px */
}
.p-faq__item + .p-faq__item { margin-top: 48px; }   /* ピッチ 228 − 項目 180 */

.p-faq__q,
.p-faq__a {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding-left: 8px;
}
.p-faq__q {
  padding-bottom: 22px;
  border-bottom: 2px solid rgba(81, 184, 200, .5);   /* PSD: #51b8c8 50% / 2px */
}
.p-faq__a {
  align-items: flex-start;
  margin-top: 22px;
}
.p-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--c-white);
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;         /* 字間ぶん右に寄るのを戻す */
  line-height: 1;
}
.p-faq__icon--q { background: var(--fq-teal); }
.p-faq__icon--a { background: var(--fq-gold); }
.p-faq__q-text {
  font-size: 22px;
  line-height: 42px;
  letter-spacing: .1em;
}
.p-faq__a-text {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: .025em;
}
.p-faq__a-text a {
  color: var(--fq-teal);
  text-decoration: underline;
}

/* ============================================================
   タブレット・SP（暫定）
============================================================ */
@media (max-width: 1024px) {
  .p-faq__tabs { width: 100%; gap: 16px; }
  .p-faq__tab { width: calc(50% - 8px); }
}

@media (max-width: 768px) {
  .p-faq__lead br { display: none; }
  .p-faq__tabs { margin-top: 32px; gap: 12px; }
  .p-faq__tab { width: 100%; height: 52px; }

  .p-faq__section { padding: 40px 16px; }
  .p-faq__section-title { font-size: 22px; }
  .p-faq__list { margin-top: 28px; }
  .p-faq__item { min-height: 0; }
  .p-faq__item + .p-faq__item { margin-top: 36px; }
  .p-faq__q, .p-faq__a { gap: 14px; padding-left: 0; }
  .p-faq__q { padding-bottom: 14px; align-items: flex-start; }
  .p-faq__a { margin-top: 14px; }
  .p-faq__icon { width: 38px; height: 38px; font-size: 15px; }
  .p-faq__q-text { font-size: 17px; line-height: 28px; letter-spacing: .05em; padding-top: 4px; }
  .p-faq__a-text { font-size: 15px; line-height: 26px; padding-top: 8px; }
  .p-faq__a-text br { display: none; }
}