/* ============================================================
   price.css — 料金案内ページ専用
   命名規則: p-price-*
   料金シミュレーター本体・料金表本体（psm-*）は
   assets/psm-price/psm-price.css を参照（このファイルは
   見出し・リード文・注記・エリアフリー・FAQ など、ページの
   余白とテキストだけを持つ）。
   ============================================================ */

/* ---------- 料金シミュレーター（セクション） ---------- */
.p-price-sim {
  margin-top: 97px; /* パンくず下端から見出しまで（会社案内・service.cssと同じ値） */
}
.p-price-sim__lead {
  margin-top: 28px; /* 見出しの罫線から本文まで（他ページの見出し直後と同じ値） */
  font: 400 16px/25px var(--font-sans, "Noto Sans JP", sans-serif);
  color: var(--c-text, #333);
}
.p-price-sim__body {
  margin-top: 50px;
}
.p-price-sim__noscript {
  margin-top: 50px;
  padding: 20px;
  background: var(--c-blue-pale, #eef4ff);
  border-radius: 5px;
  font: 400 14px/1.8 var(--font-sans, "Noto Sans JP", sans-serif);
  color: var(--c-text, #333);
  text-align: center;
}

/* ---------- 料金表（セクション） ---------- */
.p-price-table {
  margin-top: 100px;
}
.p-price-table__body {
  margin-top: 28px;
}
/* 料金表の下の注記（Figmaに無いが必須。TODO: 仮文案。中川様確認） */
.p-price-table__notes {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.p-price-table__notes li {
  font: 400 14px/25px var(--font-sans, "Noto Sans JP", sans-serif);
  color: #333;
}

/* ---------- エリアフリープラン（セクション） ---------- */
.p-price-areafree {
  margin-top: 70px;
}
.p-price-areafree__panel {
  box-sizing: border-box;
  background: var(--c-bg, #f9f9f9);
  padding: 40px 60px;
  display: flex;
  align-items: center;
  gap: 60px;
}
.p-price-areafree__illustration {
  flex: none;
  width: 335px;
  height: auto;
}
.p-price-areafree__body {
  flex: 1 1 auto;
  min-width: 0;
}
.p-price-areafree__body .c-blue-heading {
  margin: 0;
}
.p-price-areafree__text {
  margin-top: 24px;
  font: 400 16px/26px var(--font-sans, "Noto Sans JP", sans-serif);
  color: var(--c-text, #333);
}
.p-price-areafree__text p {
  margin: 0;
}
.p-price-areafree__text p + p {
  margin-top: 2px;
}

/* ---------- よくあるご質問（セクション） ---------- */
.p-price-faq {
  margin-top: 100px;
  padding-bottom: 120px;
}
.p-price-faq__list {
  margin: 28px 0 0;
}
.p-price-faq__item {
  border-bottom: 1px solid var(--c-line, #c8c8c8);
}
.p-price-faq__q,
.p-price-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 21px;
  margin: 0;
  padding: 12px 20px;
  font: 400 16px/1.6 var(--font-sans, "Noto Sans JP", sans-serif);
  color: var(--c-text, #333);
}
.p-price-faq__q {
  min-height: 22px;
  background: var(--c-blue-pale, #eef4ff);
  font-weight: 700;
}
.p-price-faq__a {
  background: #fff;
  padding-top: 16px;
  padding-bottom: 16px;
}
.p-price-faq__mark {
  flex: none;
  font: 700 22px/1 "Roboto", sans-serif;
}
.p-price-faq__q .p-price-faq__mark {
  color: var(--c-blue, #265ea8);
}
.p-price-faq__a .p-price-faq__mark {
  color: var(--c-red, #a94040);
}
.p-price-faq__a p {
  margin: 0;
}
.p-price-faq__a p + p {
  margin-top: 4px;
}

/* ============================================================
   スマホ（767px以下）
   ============================================================ */
@media (max-width: 767px) {
  /* スマホ版Figma：シミュレーターの灰色の面は画面の左右いっぱい（left0・幅440px）。
     中の入力欄・結果カードは左右20pxの位置のまま。テーマ側の余白に依存する調整なので、
     プラグイン用CSS（psm-price.css）ではなくページ用CSSに置く。 */
  .p-price-sim__body .psm-sim__panel {
    margin-left: calc(var(--container-pad) * -1);
    margin-right: calc(var(--container-pad) * -1);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .p-price-sim {
    margin-top: 30px;
  }
  .p-price-sim__lead {
    margin-top: 18px;
  }
  .p-price-sim__body {
    margin-top: 30px;
  }

  .p-price-table {
    margin-top: 60px;
  }
  .p-price-table__body {
    margin-top: 20px;
  }

  .p-price-areafree {
    margin-top: 50px;
  }
  .p-price-areafree__panel {
    flex-direction: column;
    padding: 30px 20px;
    gap: 20px;
    text-align: center;
  }
  .p-price-areafree__illustration {
    width: 180px;
  }
  .p-price-areafree__body {
    text-align: left;
  }

  .p-price-faq {
    margin-top: 60px;
    padding-bottom: 80px;
  }
  .p-price-faq__q,
  .p-price-faq__a {
    padding: 12px 16px;
    gap: 14px;
  }
}