@charset "UTF-8";

/*
 * 広告 LP `/ad/as2/` の押しボタンの地色を戻す（Bug #6122）。
 *
 * ## なぜ要るのか
 *
 * 移行元は押しボタン 1 つずつに行内の `style="--button-color: #d61111;"` を書き、
 * 意匠の写し `assets/ad-as2/static/css/custom.css` がその変数を**地色と枠線の両方**に
 * 使う。
 *
 *   .cta-button        { background: var(--button-color); color: #fff; }
 *   @media(hover:hover){ .cta-button { border: 1px solid var(--button-color); } }
 *
 * 🚨 **投入の消毒は行内の `style` を落とす。**変数が未定義になると、その変数を使う
 * 宣言は「計算のときに無効」になり、**丸ごと初期値へ戻る**。地色は透明・枠線は 0px に
 * なるが、`color: #fff` は残るので**白い文字が透明な背景に乗る**。
 *
 * 実測（2026-09-14 03:49・実ブラウザ・幅 1440・移行元の本番と dev・読み込み 4 回）。
 * 🚨 **測定の台本と控えはこのリポジトリに無い**（版を管理しない `pa-verify-assets/` に
 * 置く決まり）。**値はここに書き写してある。**
 *
 * | 見たもの | 移行元 | dev（この直しの前） |
 * |---|---|---|
 * | 地色 | `#d61111` ×12・`#b6830c` ×12・透明 ×8 | 透明 ×32 |
 * | 上の枠線 | 1px ×24・2px ×8 | 0px ×24・2px ×8 |
 * | 文字色 | 白 ×32 | 白 ×32 |
 * | 高さ | 65 ×24 | 63 ×24 |
 *
 * ## どの押しボタンがどの色か
 *
 * 移行元の写しは、囲みの中に**必ず 2 本を同じ順で並べる**（例外は 0 件）。
 *
 *     <div class="cta-area__body">
 *       <p class="cta-area__body--top">…</p>
 *       <a class="cta-button" style="--button-color: #d61111;">…来店予約をする</a>
 *       <a class="cta-button" style="--button-color: #b6830c;">…資料請求をする</a>
 *     </div>
 *
 * `.cta-area__body` は 12 か所あり、**12 × 2 = 24** で、地色を失った 24 個と数が合う。
 * そこで**囲みの中の何本目か**で色を決める。
 *
 * 🚨 **`:nth-of-type()` は `a` の中で数える。**先頭の `<p class="cta-area__body--top">` は
 * `p` なので数に入らない。1 本目の `a` が来店予約、2 本目の `a` が資料請求である。
 *
 * 🚨 **変数を戻すだけにする。**`background` や `border` を直に書かない。意匠の写しが
 * `:hover` で `background: #fff; color: var(--button-color)` に切り替えるので、変数を
 * 戻せば**押したときの見た目も移行元と同じ**になる。直に書くと `:hover` が崩れる。
 *
 * ## 触ってはいけないもの
 *
 * 🚨 **`.cta-area__body` の外の押しボタン 8 個には当てない。**あちらは移行元でも
 * 地色が透明・枠線 2px で、**dev と差が 0**である（上の実測の「透明 ×8」「2px ×8」）。
 *
 * 🚨 **`/ad/as3/` には当てない。**あちらは押しボタン 8 個とも移行元と**差が 0** である
 * （地色 透明・枠線 2px・高さも同じ）。行内の変数は落ちているが、その変数を使う宣言が
 * 当たっていないため見た目が動かない。`.cta-area__body` を持たないので、この当たり先
 * では最初から当たらない。
 *
 * 意匠の写し（`assets/ad-as2/`）は移行元の本番とバイト単位で一致するもので、md5 を
 * `tests-retired/pa-cms-ad-lp-assets9/` が見張っている。**写しは編集しない。**
 *
 * ## 幅で分けない
 *
 * 移行元は幅で色を変えない。`@media` で囲まないので、携帯幅でも同じ 24 個に効く。
 */

/* 1 本目は来店予約（移行元の行内の値 `#d61111`）. */
.cta-area__body > .cta-button:nth-of-type(1) {
	--button-color: #d61111;
}

/* 2 本目は資料請求（移行元の行内の値 `#b6830c`）. */
.cta-area__body > .cta-button:nth-of-type(2) {
	--button-color: #b6830c;
}

/*
 * 🚨 **来店予約の対が入ると、上の 2 つが 1 つずつ後ろへずれる（Bug #7060）。**
 *
 * `inc/reg18-body-links.php`（Bug #6022・ユーザー決定 D163）が、本文の中の来店予約
 * フォーム（reg18）のリンクを**パソコン版と携帯版の 2 本へ組み替える**。
 * **`display: none` の片割れも `nth-of-type` は数える。**
 *
 * 投入した本文へ本物の `pa_reg18_expand_body()` を流して数えた（2026-09-18・手元で実行）。
 *
 * | | 組み替えの前 | 組み替えの後 |
 * |---|---|---|
 * | `.cta-area__body` の囲み | 12 | 12 |
 * | 1 囲みの `a` の数 | **2 本** | **3 本** |
 * | 並び | 来店予約 / 資料請求 | **reg18 `--pc` / reg18 `--sp` / 資料請求** |
 *
 * ずれると、**見える来店予約（`--sp`）が金**になり、**資料請求はどの規則にも当たらない**。
 * `assets/ad-as2/static/css/custom.css:98` の `background: var(--button-color)` には
 * **予備の値が無い**ので、地色が透明になって白い文字が透明な地に乗る（Bug #6122 と同じ姿）。
 *
 * ## 直し方
 *
 * **位置で選ぶ上の 2 つは残す。**対が入らない形（ほかの広告 LP・投入し直しの前）では
 * あちらが正しいからである。ここでは**印で選ぶ規則**を足して、対が入ったときだけ上書きする。
 *
 * 🚨 **「印を持たない `.cta-button`」で資料請求を選ぶ書き方は採らない。**対が入らない
 * ページでは 1 本目（来店予約）も印を持たないので、来店予約まで金になる。
 * **伏せる片割れの次に来る**という並びで選ぶ（`inc/../ad-lp-man2-btn-order.css` と同じ型）。
 *
 * ## 詳細度
 *
 * 上の `.cta-area__body > .cta-button:nth-of-type(1)` は （0,3,0）。
 * 下は印を 2 つ重ねて （0,4,0）と、隣どうしの組み合わせで （0,3,1）で、**どちらも勝つ**。
 * 読み込む順に頼らない。
 *
 * ## 幅で分けない
 *
 * 上の 2 つと同じ理由である。移行元は幅で色を変えない。**どちらの片割れが伏せられていても
 * 来店予約は赤**なので、2 本とも赤にしておけば幅を見なくてよい.
 */

/* 来店予約は、パソコン版も携帯版も移行元と同じ赤. */
.cta-area__body > .cta-button.pa-reg18-link--pc.pa-reg18-link--pc,
.cta-area__body > .cta-button.pa-reg18-link--sp.pa-reg18-link--sp {
	--button-color: #d61111;
}

/* 資料請求は、伏せる片割れの次に来る押しボタン. */
.cta-area__body > a.pa-reg18-link--sp + .cta-button {
	--button-color: #b6830c;
}