@charset "UTF-8";
/**
 * 移行元スマートフォン版だけが持つフッターのメニュー 2 塊の見た目（Task #7991）。
 *
 * 🚨 **幅 1440 は 1px も動かさない。**移行元のパソコン版はこの部品を持たないので、
 * 既定（パソコン幅）で囲みごと伏せ、`@media (max-width: 749px)` の中だけで出す。
 *
 * 🚨 **`.pa-conv-band-host` を使い回さない。**あれは来店予約の帯の受け口で、
 * 片方の CSS を直すともう片方が動く（S2 の助言・2026-09-20）。この部品は
 * `.pa-other-menu-host` を持ち、CSS も `support-band.css` に足さず別ファイルにした。
 *
 * この CSS は表の 88 本にだけ配られる（`inc/other-menu-sp.php` の
 * `pa_other_menu_sp_enqueue()`）。配る側と差し込む側は同じ判定関数を呼ぶ。
 *
 * 値は移行元を幅 375px で測った実測である（2026-09-20 10:1x・標本
 * `/sp/research/report_100.html`・台本 `measure-props-0920.mjs`）。
 *
 *   ul.other_menu        375.00 x 146.59
 *   ul.other_menu > li   185.73 x 70.30（4 つとも同じ）・外余白 0 0 3px
 *   ul.other_menu img    185.73 x 70.30（`li` と同じ＝絵が器いっぱい）
 *   ul.official_menu     375.00 x 150.00・内余白 20px 0 25px・字間 -5.2px・字 13px・行送り normal
 *   ul.official_menu li  179.09 x 13.00（1 つめ）・99.00 x 13.00（2 つめ）・10 本が 5 行
 *                        inline-block・内余白 0 5px・外余白 0 0 5px
 *                        **字 13px・行送り 13px（`line-height: 100%`）・右の罫 1px solid #000**
 *   ul.official_menu li a  **字 11px**・色 #000・下線なし
 *
 * 🚨 **リンクの字は 11px である。**上の `li` の 13px は親から継承した値であって、
 *    リンクの字ではない。2026-09-20 の最初の実装ではこれを読み違えて 13px にしており、
 *    項目が 29.57px 広がって 10 本が 6 行に折り返していた（Bug #8055）。
 *    値は 2026-09-20 13:2x に移行元の写しを実ブラウザで測り直したもの
 *    （記録 `pa-verify-assets/D7/8055-移行元の字-0920/`・標本 `/sp/research/report_100.html`
 *    と `/sp/senryu/backnumber/senryu2013/index03.html`。2 本とも同じ値）.
 *   p.link_pc            375.00 x 20.00（🚨 **出さない**。統括の判断・2026-09-20 11:1x）
 */

.pa-other-menu-host {
	display: none;
}

@media (max-width: 749px) {
	/*
	 * 🚨 **本文の器を突き抜けて画面いっぱいに広げる**（Bug #8024）。
	 *
	 * 差し込み先の器 `div.page-content__body` は幅 375px の画面で **345.00** しかない
	 * （左右の内余白 15px x 2）。そのまま入れると移行元の 375.00 に 30px 足りず、
	 * 絵も 185.73 -> 170.88 へ縮み、規程のリンクは折り返しが増えて高さが伸びる
	 * （185.73 x 345 / 375 = 170.87 が実測の 170.88 と合う）。
	 *
	 * 同じ器の中にある来店予約・資料請求の帯（`.pa-conv-band`）は
	 * `assets/css/support-band.css` で同じ 3 宣言を当てて画面いっぱいにしている。
	 *
	 * 🚨 **`margin` の一括指定にしない。**全幅の区画へ一括指定を足すと、器が持つ
	 * 左右の逃げを打ち消して右へはみ出す（落とし穴の索引）。`margin-inline` だけを使う.
	 */
	.pa-other-menu-host {
		display: block;
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	/* 絵の押しボタン 4 つ。移行元は 2 列 x 2 行で、右に 3px の間を置く. */
	.pa-other-menu-host .other_menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pa-other-menu-host .other_menu > li {
		float: left;
		margin: 0 0 3px;
		width: 49.531%;
	}

	/*
	 * 🚨 **偶数番目は右へ寄せる**（Bug #2230）。移行元は `sp/css/style.css` 1356〜1358 行の
	 * `#other_contents .other_menu li:nth-child(2n+0) { float: right }` で、右の列を画面の右端に付ける。
	 * 左へ詰めると右の列の左端が 185.73 になり、右端に 3.6px の空きが出る（移行元は 189.27）.
	 */
	.pa-other-menu-host .other_menu > li:nth-child(2n) {
		float: right;
	}

	.pa-other-menu-host .other_menu > li a,
	.pa-other-menu-host .other_menu > li img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 浮きを器の中へ収める。移行元は `clearfix` で同じことをしている. */
	.pa-other-menu-host .other_menu::after {
		content: "";
		display: block;
		clear: both;
	}

	/*
	 * 規程への字のリンク 10 本。移行元は項目を `inline-block` で横に流し込み、
	 * 器の字間を詰めて項目の間の空白を消す。
	 *
	 * 🚨 **器の字間 -0.4em を写さないと横幅が合わない**（実測 -5.2px）。
	 * 項目の側で `normal` に戻す.
	 */
	/*
	 * 🚨 **中央寄せは本文の器ごと名指しする**（Bug #2230）。テーマの `main.css` の
	 * `:is(.entry-content, .page-content__body) :is(ol, ul, …, .story_inner .archive_ttl) { text-align: left }` は、
	 * `:is()` の中に類名 2 つを持つので詳細度が (0,3,0) になり、素の `.pa-other-menu-host .official_menu`（(0,2,0)）に
	 * 勝って行を左へ寄せる。器と `ul` を前に足して (0,3,1) にする.
	 */
	.pa-other-menu-host .official_menu,
	:is(.entry-content, .page-content__body) .pa-other-menu-host ul.official_menu {
		margin: 0;
		padding: 20px 0 25px;
		clear: both;
		list-style: none;
		text-align: center;
		letter-spacing: -0.4em;
	}

	/*
	 * 🚨 **当たり先を本文の器ごと名指しする**（Bug #8055）。
	 *
	 * 婚活川柳の `assets/senryu/css/bridge.css` が
	 * `body .pa-page--senryu .page-content__body li { line-height: inherit }` を持つ。
	 * 詳細度が (0,2,2) で、素の `.pa-other-menu-host .official_menu > li`（(0,2,1)）に勝ち、
	 * しかも読み込みがこの CSS より後ろなので、**婚活川柳の 80 ページで行送りが
	 * 親ゆずり（19.2px）になっていた**。本文の器を前に足して (0,3,1) にする。
	 *
	 * 素の当たり先も残す。部品が本文の器の外へ差し込まれる場合に備える.
	 */
	.pa-other-menu-host .official_menu > li,
	:is(.entry-content, .page-content__body) .pa-other-menu-host .official_menu > li {
		display: inline-block;
		margin: 0 0 5px;
		padding: 0 5px;
		letter-spacing: normal;
		/*
		 * 🚨 **`li` の字の大きさを明示する。**移行元は `line-height: 100%` を使っており、
		 * これは `li` 自身の字に対する相対値である。dev は本文の器の字を継承するので、
		 * ページによって 13px と 12px に割れ、器の高さが 171.00 と 190.22 の 2 通りに
		 * なっていた（移行元は 150.00）。移行元の `li` は親から 13px を継承している.
		 */
		font-size: 13px;
		line-height: 100%;
		/* 項目のあいだの区切りの縦線。移行元の実測は 1px solid rgb(0, 0, 0). */
		border-right: 1px solid #000;
	}

	/*
	 * 🚨 **リンクの字は 11px である**（移行元の実測）。
	 *
	 * `共通F-フッタのメニュー-0920/まとめ.md` に書いた「13px」は `li` が親から継承した値で、
	 * リンクの字ではなかった。実装のときに読み違えて 13px にしていたため、項目が
	 * 移行元より 29.57px 広がり、10 本が 5 行ではなく 6 行に折り返していた
	 * （移行元の `li` 1 つめ 179.09 に対し dev は 208.66）.
	 */
	.pa-other-menu-host .official_menu > li a,
	:is(.entry-content, .page-content__body) .pa-other-menu-host .official_menu > li a {
		color: #000;
		font-size: 11px;
		text-decoration: none;
	}
}