/*
 * アニバーサリークラブのページ /ac/ の、テーマとの境目の調整（Bug #8395・#8396）。
 *
 * このファイルだけは手で書く。写し（style.css）は写し元の
 * legacy/www.p-a.jp/public/ac/css/style.css を scripts/pa-cms/transform-legacy-page-css.py に
 * 通して作り直すもので、手を入れない。
 *
 * ## 携帯幅で直すのは 3 点だけ
 *
 * 移行元は携帯へ別のページ（/sp/ac/）を返し、別の CSS（sp/ac/css/style.css）を持つ。
 * dev の本文はパソコン版の並びなので、スマホ版の CSS を丸ごと写しても当たり先が合わない。
 * ここでは事業部の指摘に当たる所だけを、スマホ版の値で直す。残りの差（見出しの組み・
 * カードの枠・区画の並び）は Bug #8457 に記録した。
 *
 *   1. ご利用方法の 3 枚のカードの見出し（p.list-ttl）を中央に寄せ、太字にする
 *      （スマホ版 209 行 `.inner ul.inner_list li { text-align: center }`・221 行）
 *   2. 問い合わせ窓口の字を青く太くし、電話とメールのアイコンを付ける
 *      （スマホ版 86 行 `.blue`・269〜305 行）。字の大きさは main.css が持つ
 *   3. 電話番号のリンク（inc/ac-tel-link.php が足す a.pa-ac-tel）を、スマホ版と同じく
 *      青い字のまま下線なしで見せる
 *
 * ## 携帯幅の組み（Bug #8457・2026-09-29）
 *
 * 上の 3 点のあとに残った組みの差を、スマホ版の値で直す（ユーザー決定 D451 の筋）。
 * 直す前の実測は `pa-verify-assets/A/8457-直す前-0929/走行1/`（幅 375・写し 68e3190cb）。
 *
 *   4. 見出し 3 本を、アイコンが字の左に並ぶ横並びにする（スマホ版 115〜146 行）
 *   5. 2 つ目の塊で、サイトの画面の絵を「新しいおトク…」の枠より前に並べ、枠に桃色の線を付ける
 *      （スマホ版 167〜194 行。並びは本文を書き換えず、`order` で入れ替える）
 *   6. ご利用方法の 3 枚のカードに、青い線と内余白 20px を付け、絵を幅 70% にする（スマホ版 203〜232 行）
 *   7. 先頭の主画像を画面いっぱいに広げる（スマホ版 21〜26・49〜52 行。dev の柱の左右 15px を打ち消す）
 *   8. 区切り線を、太さ 2px・青・幅 60%・上下 40px にする（スマホ版 94〜100 行。カードの中は 225〜228 行）
 *   9. 問い合わせ窓口の見出しの外余白を 0 にする（スマホ版 257〜262 行）
 *  10. 段落と並びの外余白を 0 にする（スマホ版 7〜10 行 `#ac p { margin: 0 }`。パソコン幅は下の節が同じ打ち消しを持つ）
 *  11. 見出しとカードの題の改行を、スマホ版の位置にする。本文はパソコン版の位置なので、
 *      `inc/ac-sp-text.php` がスマホ版だけの改行 `br.pa-ac-sp-br` を足し、パソコン版だけの改行に `br.pa-ac-pc-br` の印を付ける。
 *      携帯幅でパソコン版の改行を隠し、パソコン幅でスマホ版の改行を隠す
 *  12. 絵を行の中に置かず、幅いっぱいの塊にする（スマホ版が読む sp/css/common.css 11〜14 行）
 *
 * `.pink` と `.blue` は本文の冒頭の 1 文（「タメニーサービスのご利用者様」「月会費無料かつ
 * 無期限」）にも付いている。スマホ版は同じ色を付けているので、そのまま当てる。
 */

@media (max-width: 749px) {
	body .pa-page--ac .page-content__body .pink {
		color: #fc7397;
	}

	body .pa-page--ac .page-content__body .blue {
		color: #00adec;
	}

	/* 太字はスマホ版 221 行 `.inner ul.inner_list li p.list-ttl { font-weight: bold }`. */
	body .pa-page--ac .page-content__body .third_box ul li p.list-ttl {
		text-align: center;
		font-weight: bold;
	}

	body .pa-page--ac .page-content__body .ac_shop_box a {
		text-decoration: none;
	}

	body .pa-page--ac .page-content__body .info_box :is(.info_h1, .info_h2) {
		font-weight: bold;
		color: #00b8ee;
	}

	body .pa-page--ac .page-content__body .info_box .telmail :is(.tel, .mail) {
		font-weight: bold;
	}

	body .pa-page--ac .page-content__body .info_box .telmail .tel::before {
		content: url(../images/icon_tel_sp.gif?ver=4f03aa92a255);
		margin-right: 5px;
	}

	body .pa-page--ac .page-content__body .info_box .telmail .mail::before {
		content: url(../images/icon_mail_sp.gif?ver=85e336f7905e);
		margin-right: 5px;
	}

	/* 🚨 テーマの既定 `a { color: var(--pa-color-link) }` を打ち消す。字の色は `li.blue` が持つ. */
	body .pa-page--ac .page-content__body .info_box .telmail a.pa-ac-tel {
		color: inherit;
		text-decoration: none;
	}

	/* 4. 見出し 3 本（スマホ版 115〜146 行）。dev の本文はパソコン版なので、アイコンは
	   `<picture>`（D483 の差し替えで携帯版の icon_sp.gif を選ぶ）に包まれ、字は `p.h2-ttl` ではなく素の `p` である. */
	body .pa-page--ac .page-content__body :is(.first_box, .second_box, .third_box) h2 {
		display: flex;
		align-items: center;
		margin: 0 0 25px;
		padding: 0;
		line-height: normal;
		letter-spacing: normal;
	}

	body .pa-page--ac .page-content__body :is(.first_box, .second_box, .third_box) h2 > :is(picture, img) {
		flex: none;
		max-width: 13%;
		margin-right: 10px;
	}

	body .pa-page--ac .page-content__body :is(.first_box, .second_box, .third_box) h2 > picture img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	body .pa-page--ac .page-content__body :is(.first_box, .second_box, .third_box) h2 p {
		margin: 0;
		font-weight: bold;
	}

	/* 段落の行送り（スマホ版 67〜72 行 `.first_box p, .second_box p, .third_box p { font-size: 15px; line-height: 1.6 }`）。
	   スマホ版はこの規則を見出しの字 `p.h2-ttl` にも当てるので、見出しの 1 行も 20px × 1.6 = 32px になる. */
	body .pa-page--ac .page-content__body :is(.first_box, .second_box, .third_box) p {
		line-height: 1.6;
	}

	/* 紹介のロゴ（スマホ版 33〜36 行）。スマホ版は絵を行の中に置き、`.about` の中央寄せで真ん中に来る. */
	body .pa-page--ac .page-content__body .main_vidual .about img {
		width: 80%;
		margin: 0 auto 25px;
	}

	/* 1 つ目の塊の絵（スマホ版 148〜151 行 `img.first_fig`）。dev の本文はパソコン版で、絵に `first_fig` の類名が無い.
	   絵だけを持つ 2 つ目の器の中の絵で当てる.
	   🚨 **この絵は携帯幅で `<picture>` に包まれる**（`inc/sp-image-swap.php` の 10 組目・Greptile の指摘 2026-09-29）。
	   包みを塊にし、中の絵にも当てる。直の子の `img` だけに当てると、包まれた後は上の 30px が効かない.
	   🚨 `.inner_box > :is(img, picture > img)` と 1 本にまとめない。「`.inner_box` の直の子で、かつ `picture > img`」の意味になり、
	   包みの中の絵に当たらない（下見 6 で −30 と出て気づいた）. */
	body .pa-page--ac .page-content__body .first_box .inner_box > picture {
		display: block;
	}

	body .pa-page--ac .page-content__body .first_box .inner_box > img,
	body .pa-page--ac .page-content__body .first_box .inner_box > picture > img {
		width: auto;
		max-width: 100%;
		margin-top: 30px;
	}

	/* 5. 2 つ目の塊。パソコン版の本文は「見出し・携帯版だけの 1 文（inc/ac-sp-text.php）・枠」の器と
	   「画面の絵」の器に分かれている。器を `display: contents` で開き、スマホ版 94〜98 行の順
	   （見出し → 1 文 → 画面の絵 → 枠）に `order` で並べる. */
	body .pa-page--ac .page-content__body .second_box .inner {
		display: flex;
		flex-direction: column;
	}

	body .pa-page--ac .page-content__body .second_box .inner > .inner_box {
		display: contents;
	}

	body .pa-page--ac .page-content__body .second_box .inner_box > h2 {
		order: 1;
	}

	body .pa-page--ac .page-content__body .second_box .inner_box > .pa-ac-sp-text {
		order: 2;
		margin: 0;
	}

	body .pa-page--ac .page-content__body .second_box .inner_box > :is(img.capture, picture:has(> img.capture)) {
		order: 3;
		align-self: flex-start;
		margin: 30px 0 20px;
	}

	body .pa-page--ac .page-content__body .second_box img.capture {
		box-sizing: content-box;
		max-width: 100%;
		border: solid 1px #cbcbcb;
	}

	body .pa-page--ac .page-content__body .second_box picture:has(> img.capture) img.capture {
		display: block;
	}

	body .pa-page--ac .page-content__body .second_box .inner_box > .login_box {
		order: 4;
		border: solid 1px #fc7397;
	}

	body .pa-page--ac .page-content__body .second_box .login_box img {
		max-width: 100%;
	}

	/* スマホ版は字とログインの絵を `div.login_txt`（14px・内余白 15px 20px）で包み、字の `p` には
	   上の `.second_box p { font-size: 15px; line-height: 1.6 }` が当たる。dev は字が `p.login_txt` 自身で、
	   ログインの絵は投入で `<p><a><picture>` に包まれている。字の段落とログインの段落に、器の内余白を分けて持たせる. */
	body .pa-page--ac .page-content__body .second_box .login_box p.login_txt {
		margin: 0;
		padding: 15px 20px 0;
		font-size: 15px;
		text-align: left;
	}

	body .pa-page--ac .page-content__body .second_box .login_box .login > p:has(img.login_img) {
		margin: 0;
		padding: 0 20px 15px;
		text-align: left;
	}

	body .pa-page--ac .page-content__body .second_box .login_box img.login_img {
		margin-top: 15px;
	}

	/* 6. ご利用方法の 3 枚のカード（スマホ版 203〜232 行）. */
	body .pa-page--ac .page-content__body .third_box ul.inner_list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body .pa-page--ac .page-content__body .third_box ul.inner_list > li {
		border: solid 1px #00b8ee;
		text-align: center;
		margin: 0 0 15px;
		padding: 20px;
	}

	body .pa-page--ac .page-content__body .third_box ul.inner_list > li img {
		width: 70%;
		margin: 0 auto 15px;
	}

	body .pa-page--ac .page-content__body .third_box ul.inner_list > li p.list-txt {
		text-align: left;
	}

	/* 7. 先頭の主画像（スマホ版 21〜26・49〜52 行）。スマホ版は柱の余白を持たない器に絵を置くので、
	   dev の柱の左右の余白（`--pa-inner-gutter`・15px）を打ち消して画面いっぱいにする。
	   🚨 外余白を一括指定で書かない。左右だけを書く（落とし穴の索引「全幅の区画へ margin の一括指定を足すと右へはみ出す」）. */
	body .pa-page--ac .page-content__body .main_vidual h2 {
		margin-top: 0;
		margin-bottom: 20px;
		margin-inline: calc(-1 * var(--pa-inner-gutter, 15px));
		padding: 0;
	}

	body .pa-page--ac .page-content__body .main_vidual h2 img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* 8. 区切り線（スマホ版 94〜100 行・カードの中は 225〜228 行・窓口の見出しの下は 264〜267 行）. */
	body .pa-page--ac .page-content__body hr {
		height: 2px;
		background-color: #00adec;
		width: 60%;
		margin: 40px 0;
		border: none;
	}

	body .pa-page--ac .page-content__body .third_box ul.inner_list > li hr {
		width: 100%;
		margin: 20px auto;
	}

	body .pa-page--ac .page-content__body .ac_shop_box {
		margin: 40px auto;
	}

	body .pa-page--ac .page-content__body .ac_shop_box hr {
		width: 100%;
		margin: 5px 0 15px;
	}

	/* 9. 問い合わせ窓口の見出し（スマホ版 257〜262 行）. */
	body .pa-page--ac .page-content__body .ac_shop_box h2 {
		margin: 0;
	}

	/* 10. 段落と並びの外余白（スマホ版 7〜10 行）。パソコン幅の節と同じく `:where(#ac)` で絞り、
	   写しとこのファイルの類名 2 つ以上の規則（`.login_box .login_txt` など）が後から勝つようにする. */
	body .pa-page--ac .page-content__body :where(#ac) :is(p, ul) {
		margin: 0;
	}

	/* 窓口の電話とメール（スマホ版 283〜285 行 `.telmail { margin: 20px 0 }`）。上の 10. が並びの外余白を 0 にするので、ここで戻す. */
	body .pa-page--ac .page-content__body .info_box .telmail {
		margin: 20px 0;
	}

	/* 12. 絵を行の中に置かず、器の幅いっぱいの塊にする（スマホ版が読む sp/css/common.css 11〜14 行
	   `img { width: 100%; height: auto; display: block }`）。行の中に置くと、絵の下に行の余り（6px 前後）が出る.
	   `:where(#ac)` で絞り、上の類名つきの幅（アイコン 13%・ロゴ 80%・カードの絵 70%）が後から勝つようにする. */
	body .pa-page--ac .page-content__body :where(#ac) img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 11. パソコン版だけの改行を隠す（inc/ac-sp-text.php が印を付ける）. */
	body .pa-page--ac .page-content__body br.pa-ac-pc-br {
		display: none;
	}
}

@media (min-width: 750px) {
	/* 11. スマホ版だけの改行（inc/ac-sp-text.php が足す）を、パソコン幅で隠す。
	   移行元パソコン版は、この位置に改行を持たない（ac/index.html の見出し 5 つとカードの題 3 つ）. */
	body .pa-page--ac .page-content__body br.pa-ac-sp-br {
		display: none;
	}

	/* ## パソコン幅: テーマの既定を、移行元のサイト共通のリセットへ戻す
	   写し（style.css）は移行元のページ専用 CSS だけで、移行元がサイト共通の CSS で決めていた
	   既定値は持たない。そこへ dev のテーマの既定が入り、次の 4 点が移行元と食い違った
	   （2026-09-25 17:55 の下見・枝の写しを dev へ差し込んで幅 1440 で測った。
	   `pa-verify-assets/A/8395-8396-下見2/`）。

	   | 所 | 移行元 | dev（テーマの既定） |
	   |---|---|---|
	   | 本文の `p` と `ul` の外余白 | 0 | 下に 25px |
	   | 見出し `h2` の字間・行送り | normal・normal | 1px・30px |
	   | 箱の寸法の数え方 | content-box（カードは 345 + 内余白 30 + 枠 2 = 377px） | border-box（345px） |
	   | サイトの画面の絵 `.capture` | 素の幅（枠込み 381px） | `max-width: 100%` で 370px |

	   🚨 **外余白の打ち消しは `:where(#ac)` で絞る。**素の `#ac` にすると詳細度で id が勝ち、
	   写しの `.ac_shop_box .info_box p { margin: 0 0 5px }` まで 0 に潰す。`:where()` は詳細度を
	   足さないので、写しの規則（クラス 3 つ以上）が後から勝ち、テーマの既定（クラス 1 つ）には勝つ. */
	body .pa-page--ac .page-content__body :where(#ac) :is(p, ul) {
		margin: 0;
	}

	body .pa-page--ac .page-content__body :where(#ac) h2 {
		letter-spacing: normal;
		line-height: normal;
	}

	body .pa-page--ac .page-content__body :where(#ac),
	body .pa-page--ac .page-content__body :where(#ac) * {
		box-sizing: content-box;
	}

	body .pa-page--ac .page-content__body :where(#ac) .capture {
		max-width: none;
	}

	/* 🚨 **パソコン幅では電話番号を素の字に見せ、ポインターで押せなくする。**移行元のパソコン版は
	   番号をリンクにしない（支店紹介の店舗カードの電話番号と同じ扱い・Bug #8298）。
	   `pointer-events: none` はポインターにだけ効き、キーボードの Tab と Enter では起動する。
	   パソコンで電話のアプリが開いても害は無いので、先例と同じくそのままにした. */
	body .pa-page--ac .page-content__body .info_box .telmail a.pa-ac-tel {
		color: inherit;
		text-decoration: none;
		pointer-events: none;
	}
}