/* ============================================================
   キャンペーン枠（ショートコード）PC表示の縦圧縮
   ------------------------------------------------------------
   ショートコード .price-section を使う「全ページ」に効く。
   トップページ・/price/・症状ページなどが対象。

   ■ 重要: このファイルのコメント内に、コメント終端の記号を
     文字として書いてはいけない。書くとそこでコメントが終わり、
     続く日本語がCSSとして解釈されて「ファイル全体が無効」になる。
     実際に一度これで CSSOM のルール数が 0 になった。

   ■ なぜ custom-style.css に追記しないのか
     custom-style.css の末尾には、閉じられていないコメント開始記号が
     4つ並んでいる（装飾用の区切り線だけ書かれて終端が無い）。
     終端を補って追記してもブラウザがその先を解析しない。
     105KBのレガシーファイルを触るリスクも大きいため、独立ファイルにして
     functions.php から読み込む方式にした。
     切り戻しは enqueue の1行を消すだけでよい。

   ■ 導入手順
     1. このファイルをテーマフォルダ（wp-content/themes/seitai-theme/）へ置く
     2. functions.php の custom-style を読み込んでいる行の直後に追記する

        wp_enqueue_style( 'campaign-pc', get_stylesheet_directory_uri() . '/campaign-pc.css', array( 'custom-style' ), filemtime( get_stylesheet_directory() . '/campaign-pc.css' ) );

        第4引数の filemtime は必須。省略するとCSSを更新しても
        ブラウザが古いファイルを掴み続ける。

   ■ 何を直しているか
     1. .price-section の font-size:4vw に PC用の上書きが無い。
        1280pxでは 4vw = 51.2px、行間1.5で76.8pxになる。
        子要素（.price-num / .limit-tag など）は個別に 768px以上の
        px指定があるため無事だが、font-size を持たないコンテナ
        （.campaign-body / .price-display / .limit-banner / .btn-wrap）と、
        ショートコード内に多数ある空の br 要素がこれを継承し、
        br 1つあたり約58pxの空白を生んでいた。

     2. 縦の余白がスマホ（幅390px）の値のまま。PCはカラムが686pxと
        1.76倍になるので、相対的に余白が過剰になり間延びして見える。
        実測で枠1300pxのうち余白が503px、つまり39%を占めていた。

   ■ 触っていないもの
     - スマホ表示（767px以下）は1pxも変えない
     - ボタン（.btn / .innercta_btn_ 系）… 下のサブラベルの位置決めに
       padding を使っており、変えると重なる
     - 文字サイズ（.price-num 56px など）… すべて据え置き

   ■ スコープについて
     course-name と price-note は custom-style.css 側で
     .home と .page-template-page-seitai-02 .entry-content に限定して
     書かれている（詳細度 0,3,1）。素の p.course-name（0,1,1）では
     負けるので、こちらも同じスコープで書いたうえ、このファイルが
     custom-style.css より後に読み込まれることで後勝ちにする。
   ============================================================ */
@media (min-width:768px){

  /* コンテナが 4vw を継承するのを止める。これだけで約100px縮む。 */
  .price-section{ font-size:16px; }

  /* 縦の余白を約6割に詰める */
  .campaign-header{ padding-top:12px; padding-bottom:12px; }
  .campaign-body{ padding-top:32px; }
  .price-display{ padding-bottom:32px; }
  .limit-banner{ padding-top:28px; padding-bottom:28px; margin-bottom:20px; }
  .limit-tag{ margin-bottom:18px; }
  .limit-main{ margin-bottom:16px; }

  .home p.course-name,
  .page-template-page-seitai-02 .entry-content p.course-name,
  .page-template-symptom-article .entry-content p.course-name{ padding-bottom:22px; }

  .home p.price-note,
  .page-template-page-seitai-02 .entry-content p.price-note,
  .page-template-symptom-article .entry-content p.price-note{ margin-top:16px; }


  /* ----- 「なぜ初回2,800円なのか？」から「ご体験ください」までの区間 -----
     ここは vw 指定にPC用の上書きが無く、1280pxで文字が巨大になっていた。
     実測（PC 1280px）:
       .why-body        4vw   = 51.2px … 中の br が1つ57pxの空白を作る
       .closing p       3.8vw = 48.64px … 本文がそのまま巨大
       p.guarantee-title 5vw  = 64px

     guarantee-title には 768px以上の上書きが custom-style.css に書かれて
     いるが、セレクタが
       .page-template-page-seitai-02 .entry-content p.guarantee-title.home p.guarantee-title
     となっており **カンマが抜けている**。1つの複合セレクタとして解釈され、
     どの要素にもマッチしないため効いていない。ここで正しく書き直す。

     スマホ（390px）での実測値に合わせる:
       4vw=15.6px / 3.8vw=14.82px / 5vw=19.5px
     PCは他の要素と同じ 16px / 16px / 24px に揃える。 */
  .home .why-body,
  .page-template-page-seitai-02 .entry-content .why-body,
  .page-template-symptom-article .entry-content .why-body{ font-size:16px; }

  .home .closing p,
  .page-template-page-seitai-02 .entry-content .closing p,
  .page-template-symptom-article .entry-content .closing p{ font-size:16px; }

  .home p.guarantee-title,
  .page-template-page-seitai-02 .entry-content p.guarantee-title,
  .page-template-symptom-article .entry-content p.guarantee-title{ font-size:24px; }
}