/* advisory.html ページ固有スタイル
   ads.css（clinic.css を継承）+ pricing.css の料金カード を流用する。
   新規クラスは最小限に留める。 */
@import url('./clinic.css');
@import url('./ads.css');
@import url('../../css/pricing.css');

/* ========== HERO: clinic-hero-title の text-indent を打ち消す ========== */
/* clinic.css で text-indent: -0.5em が設定されているが、このページの見出しは
   カギ括弧を含まないため字下げ不要。 */
.advisory-page .clinic-hero-title {
  text-indent: 0;
}

/* ========== HERO: CTAボタン横の添え書き ========== */
.advisory-page .hero-cta-note {
  font-size: 0.9rem;
  color: var(--text-light);
  margin: 0;
}

/* ========== HERO: サブ見出し ========== */
.clinic-hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--text-light);
  line-height: 1.7;
  margin-top: -12px;
  margin-bottom: 0;
}

/* ========== S1 WHY: 問いの列挙リスト ========== */
/* ads-calc-example-steps を流用しつつ、余白を広めに取る */
.advisory-why-list {
  max-width: 760px;
  margin: 0 auto 28px;
}

.advisory-why-list li {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.75;
}

/* ========== S3 DELIVERABLES: 見せてもらうリスト ========== */
.advisory-show-list {
  max-width: 760px;
  margin: 0 auto 24px;
}

.advisory-show-list li {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text);
}

/* ========== S4 CONSULTATION: 計算分解ブロックを本文(760px)に揃える ========== */
/* ads.css の .ads-calc-block は 820px。本ページは本文基準760pxに統一する。
   このページ限定の上書き（ads.html の820pxには影響しない）。 */
.ads-calc-block {
  max-width: 760px;
}

/* ========== S4 CONSULTATION: カードブロックの枠・背景・余白をすべて除去 ========== */
/* 見出し「ひとつの問いも…」直下のブロック（ads-calc-block）を
   グレーセクション内の本文として自然に流す。
   ads.css の border / background / padding / box-shadow をすべて打ち消す。
   advisory-page スコープで他ページ（ads.html等）には影響しない。 */
.advisory-page .ads-calc-block {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* ========== S4 CONSULTATION: 計算分解ブロックの導入テキスト ========== */
/* カード枠を除去したため、本文の流れと自然につながる見出し的スタイルに変更 */
.advisory-calc-note {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  line-height: 1.75;
}

/* ========== S3 section-header サブ見出し ========== */
.section-header--sub {
  margin-top: 40px;
  margin-bottom: 24px;
}

.section-title--sm {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

/* ========== S7 PRICE: 単一カード用の幅調整 ========== */
.advisory-pricing {
  max-width: 680px;
}

/* ========== CLOSING セクション ========== */
.advisory-closing {
  text-align: center;
}

.advisory-closing-inner {
  max-width: 760px;
  margin: 0 auto;
}

.advisory-closing-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 32px;
}

.advisory-closing .ads-prose {
  text-align: left;
}

/* ========== CLOSING: 画像マージン上書き ========== */
/* clinic.css の .clinic-closing-image は margin: -28px auto 32px（ネガティブマージン）。
   advisory ページは画像の上（h2 margin-bottom:32px）と下（ads-prose margin-top:0）の
   余白を揃えるため、上下とも 32px に統一する。 */
.advisory-page .clinic-closing-image {
  margin: 32px auto 32px;
}

/* ========== テキストアクセント強調 ========== */
/* POLICY セクションの強調一文に使用。サイトの水色（--primary）で太字表示。 */
.text-accent {
  color: var(--primary);
  font-weight: 700;
}

/* pricing.css の pricing-hero, pricing-accordion など
   advisory.html では不使用のスタイルが入るが、副作用はない（セレクタが一致しない） */

/* ========== CTA バナー：内側を青に戻す（外側 section-gray はHTML側で付与） ========== */
/* style.css の .cta-section はデフォルト var(--primary)（青）のため、advisory-page の上書きは不要。
   前回追加したグレー化ルールはすべて削除し、青基調（白文字）に戻す。
   外側 cta-outer には section-gray クラスを HTML 側で付与し、来月セクション（advisory-closing）と
   同じ var(--bg-light) で揃える。 */

/* CTA 外枠の背景をグレーに確定する
   style.css の .cta-outer { background: var(--white) } は .section-gray より後に記述されており、
   同一 specificity (0,1,0) で後勝ちするため section-gray が白に潰される。
   advisory-page スコープで specificity を (0,2,0) に上げ、確実にグレーを適用する。 */
.advisory-page .cta-outer {
  background: var(--bg-light);
}

/* ========== テーブル（⑤DELIVERABLES・⑧CONSULTATION 共通） ========== */
.advisory-table-wrap {
  max-width: 760px;
  margin: 0 auto 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.advisory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.75;
}

.advisory-table th,
.advisory-table td {
  padding: 12px 16px;
  border: 1px solid #d9e1e8;
  vertical-align: top;
  text-align: left;
}

.advisory-table th[scope="row"] {
  width: 38%;
  font-weight: 700;
  color: var(--navy);
  background-color: #e8eef3;
  white-space: nowrap;
}

.advisory-table td {
  background-color: #fff;
  color: var(--text);
}

@media (max-width: 768px) {
  .advisory-pricing {
    max-width: 100%;
  }

  .section-header--sub {
    margin-top: 28px;
  }

  .advisory-table th[scope="row"] {
    white-space: normal;
  }
}