/*
 * 会員特典メニュー mezon のページ /option/mezon/ の、テーマとの境目の調整。
 *
 * このファイルだけは手で書く。写し（normalize / standard / mobile）は写し元を
 * scripts/pa-cms/transform-legacy-page-css.py に通して作り直すもので、手を
 * 入れない。
 *
 * ## なぜ調整が要るか
 *
 * 移行元の mezon は 1 枚で完結した静的ページで、**一番外側を画面いっぱいに
 * 使って組んでいる。**中の器（`.wrap`）だけがパソコン幅で 1,100px に絞られ、
 * 携帯幅では全幅へ戻る。
 *
 * dev の本文は柱（`.page-content__body`）の中にあり、**携帯幅では左右に
 * 15px の内余白が付いて 345px しかない。**そのため写しをそのまま配ると、
 * 移行元が全幅で見せている帯が両側 15px ぶん内側へ入る。
 *
 * 幅 375px で測った移行元の実測は次のとおりである（2026-08-31・移行元の
 * ファイルを直接開いて測定）。
 *
 *   #header ／ section.wrap   幅 375px（左端 0）
 *   #header-logo              幅 280px（左端 47.5px）
 *
 * ## 柱を外すやり方
 *
 * main.css の成婚ストーリーの節（Bug #2309）と同じ 3 つ組で効かせる。
 *
 *   1. 本文の器を画面の幅まで広げる（width: 100vw と margin-inline）
 *   2. 祖先に切り落としがあれば外す（この本文の器には無いので不要）
 *   3. body 側で横方向のはみ出しを切る（overflow-x: clip）
 *
 * `clip` を使い `hidden` を使わないのは、スクロールの器を作らずヘッダーの
 * 貼り付き（position: sticky）を保つためである。
 *
 * **パソコン幅の見え方は変わらない。**写し元は中の器（`.wrap`）を 1,100px に
 * 絞って中央へ置くので、柱を 1,440px へ広げても器は同じ位置（左端 170px）に
 * 来る。実測でも広げる前後で 1,100px / 左端 170px のまま変わらなかった。
 *
 * ## 幅の条件
 *
 * このページの写しは**全幅に配る**（携帯用の写しだけが 480px 以下）。移行元が
 * 自前の携帯用デザインを持ち、幅で組みが本当に切り替わるためである。柱を外す
 * 調整（下の 1 つ目の規則）にも幅の条件を付けない。判断の経緯は Task #2478 の
 * コメントにある。
 *
 * **切り落とし（下の 2 つ目の規則）だけは幅の条件を付ける。**中間幅
 * （481〜1116px）では、写しの固定幅（--main-width: 1100px）が画面より広い
 * ままである。この幅で body の横方向を切ると、はみ出した本文をスクロールで
 * 見る手段が無くなる（Codex 指摘・P1。body の切り落としはビューポートへ
 * 「hidden」として伝播し、スクロールバーごと消える）。移行元はこの幅で
 * 横スクロールで全体を見せているので、切らずに同じ挙動へ倒す。
 *
 * 切るのは次の 2 つの幅だけである。
 *
 *   480px 以下   携帯用の写し（mobile.css）が --main-width を 100% へ戻し、
 *                固定幅が画面に収まる
 *   1117px 以上  固定幅 1,100px + スクロールバー 17px が画面に収まる。境目に
 *                スクロールバーの幅を足すのは、メディアクエリの幅にはスクロール
 *                バーが含まれ、中身に使える幅がその分だけ狭いためである
 */

body .pa-page--option .page-content__body {
	/* 幅の上限を外す。テーマは `.page-content__body` へ `max-width` を置いており、
	   これを外さないと下の width がその上限で頭打ちになる. */
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);

	/* 柱の左右の内余白も外す。携帯幅では 15px 付いており、外さないと移行元が
	   全幅で見せている帯が両側 15px ぶん内側へ入る. */
	padding-inline: 0;
}

/* 広げた器のぶんの横方向のはみ出しを切る。ページの中身で見分け、他のページを
   巻き添えにしない。幅の条件を付ける理由は冒頭の「## 幅の条件」にある（中間幅で
   切ると、画面より広い固定幅の本文が閲覧不能になる）. */
@media (max-width: 480px), (min-width: 1117px) {
	body:has(.pa-page--option) {
		overflow-x: clip;
	}
}

/*
 * 呼びかけボタンの矢印の飾りを、移行元と同じ数え方へ戻す（Issue #2772）。
 *
 * 写しは移行元と**同じ値**を持っており、写し漏れではない。
 *
 *   a.btn-cta::after {
 *     width: 10px;
 *     height: 10px;
 *     border-top: 2px solid #fff;
 *     border-right: 2px solid #fff;
 *   }
 *
 * 違うのは箱の数え方だけである。
 *
 *   移行元 … `content-box`（既定）。外形 = 10 + 2 = 12px（縦横とも）
 *   dev    … `border-box`。        外形 = 10px（縦横とも）
 *
 * このテーマは main.css の 416〜420 行で `box-sizing: border-box` を全体に
 * 当てている。移行元は必要な箇所にだけ当てており、それ以外は既定のままである。
 * この違いは既知で、箇所ごとに手当てされてきた（サービス紹介の
 * `article-reset.css` に同じ箱の手当てがある）。この要素はその手当てが
 * 漏れていた。
 *
 * 【`*`（全要素）には当てない理由】写し元（standard.css）は自分で
 * `box-sizing: border-box` を書いている規則を持つので、全要素に当てると
 * それらまで戻してしまう。この要素だけを選ぶ。
 *
 * 【外形の値を書き直さない理由】`width: 12px` と書いても同じ外形になるが、
 * 移行元と見比べたときに「なぜ違う数字なのか」が読み取れなくなる。箱の数え方を
 * 戻せば、写しの値をそのまま移行元と突き合わせられる。
 *
 * 実測（幅 1440px・2026-09-02）: 外形 移行元 12×12px → dev 10×10px。
 * 45 度に回した矢印の飾り。
 */
:where(.pa-page--option) .page-content__body a.btn-cta::after {
	box-sizing: content-box;
}