/*
 * 写した携帯用 CSS（`sp.css`）と dev の本文の作りの食い違いを埋める（Bug #4687）。
 *
 * このファイルは**手で書く**。写し（`sp.css`）は作り直すたびに上書きされるため、
 * 手で決めた値はこちらへ置く。
 */

/*
 * 体験談の本文を、携帯幅でも読めるようにする（Greptile 指摘・2026-09-08）。
 *
 * 🚨 **移行元スマホ版と dev で本文の置き場が違う。**
 *
 *   移行元スマホ版 … 開閉式。本文は各項目（`li`）の**中**にあり、開いている項目
 *                    （`li.active`）の本文だけを見せる
 *   dev（移行元パソコン版の作り） … 切り替え式。本文は項目の並び（`ul`）の**外**に
 *                    1 つあり、押した段の本文へ差し替える
 *
 * 写した CSS の「隠す指定」は本文を高さ 0 にし、`li.active` の本文だけを開く。
 * **dev の本文は項目の中に無いので、開く指定が永久に当たらず、中身へたどり着けない。**
 * 幅 375px の実測（2026-09-08）: 本文 2 つとも高さ 0（写しを当てる前は 1,341px）。
 *
 * **項目の並びの外にある本文（= dev の作り）には隠す指定を当てない。**
 * 組み方の違いそのものは承認済みの差として台帳に記録している（司令塔の裁定 685）。
 */
body .pa-page--concierge .page-content__body .my-list > .my-list__list-body {
	overflow: visible;
	max-height: none;
	opacity: 1;
	padding: 15px 0 10px;
}

/*
 * 目次を 2 列 3 段に折り返す（Bug #4826）。
 *
 * 移行元スマホ版は目次を 2 項目ずつ 3 つの並びに分けて書き、`display: table` と
 * `width: 50%` で 2 列にしている。dev は移行元パソコン版と同じ 1 つの並びに 5 項目
 * なので、写した CSS が当たると 1 段に 5 つ詰まり、3 つが幅 13px までつぶれていた。
 *
 * 🚨 **段の区切り線を項目に付けない。**付けると項目の高さが 92px から 93px になり、
 * 5 項目とも新しい差になる。**1px の空きを空けて親の色を見せる**形にしてある。
 */
body .pa-page--concierge .page-content__body .navigation-list ul {
	display: flex;
	flex-wrap: wrap;
	border-bottom: none;
	background: #D1BB95;
}
body .pa-page--concierge .page-content__body .navigation-list ul li {
	display: block;
	box-sizing: border-box;
	width: 50%;
	margin-bottom: 1px;
	background-color: #A3762B;
}
body .pa-page--concierge .page-content__body .navigation-list ul::after {
	content: "";
	display: block;
	width: 50%;
	margin-bottom: 1px;
	background-color: #A3762B;
}

/*
 * 🚨 移行元スマホ版の目次は `<ul>` 3 本 × `<li>` 2 個で、最後の 1 個は空の穴埋めである。
 * dev は `<ul>` 1 本 × `<li>` 5 個なので、写した携帯用 CSS の
 * `.navigation-list ul:last-child li:nth-child(2) { background: none; }`
 * が、移行元では空の穴埋めだけに当たるのに、dev では 2 番目の項目
 * 「私が出会った成婚コンシェルジュ」に当たってしまう。
 *
 * 幅 375px の実測（2026-09-08）: この打ち消しが無いと、2 番目の項目だけ背景が
 * rgba(0, 0, 0, 0) になり、上の規則で並びに付けた薄い色（#D1BB95）が透けて
 * 1 枚だけ色違いの札になる。矢印の絵も消える。
 * 目次の高さは 279px で移行元と一致するため、寸法だけを測ると見逃す。
 *
 * 打ち消しの強さは、写しの規則（クラス 5 ＋ タグ 2）に勝つ必要がある。
 * ここは `body` を足してクラス 5 ＋ タグ 3 にしている。
 */
body .pa-page--concierge .page-content__body .navigation-list ul:last-child li:nth-child(2) {
	background: url(../images/icon_arrow_wh.png?ver=1ebd40fc5216) no-repeat left 50% bottom 20px/auto 6px;
	background-color: #A3762B;
}

/*
 * 段の区切りの縦線。移行元は `<ul>` ごとの左の升目（`li:first-child`）に付けている。
 * dev は 1 本の並びを折り返すので、左の列に来る奇数番目へ付け替える。
 */
body .pa-page--concierge .page-content__body .navigation-list ul li:nth-child(odd)::after {
	position: absolute;
	content: "";
	display: block;
	right: 0;
	top: 16px;
	width: 1px;
	height: 68px;
	background: #D1BB95;
}

/*
 * 冒頭を 題 → 絵 → 説明文 の順にし、白い札を題と絵だけに掛ける（Bug #4827）。
 *
 * 🚨 **移行元スマホ版と dev で、説明文の置き場が違う。**
 *
 *   移行元スマホ版 … 説明文（`.mainvisual-text__sub`）は白い札（`.mainvisual-inner`）の
 *                    **外**にあり、`.mainvisual` の薄い地の上に直に乗る
 *   dev（移行元パソコン版の作り） … 説明文は札の**中**（`.mainvisual-text` の中）にある
 *
 * そのままだと説明文まで白地に乗り、並ぶ順も 題 → 説明文 → 絵 になる。
 * 器を格子で組み、段を 題（1）→ 絵（2）→ 説明文（3）と割り当てて移行元の姿へ戻す。
 * **白い札と飾りの枠は 1〜2 段目だけに掛ける**ので、説明文は薄い地の上に出る。
 */
body .pa-page--concierge .page-content__body .mainvisual-inner {
	display: grid;
	grid-template-columns: 100%;
	background: none;
}
/* 包みの箱を消し、中の 2 つを格子の升目にする。`padding` は消えるので下で足し直す */
body .pa-page--concierge .page-content__body .mainvisual-text {
	display: contents;
}
body .pa-page--concierge .page-content__body .mainvisual-text__copy {
	grid-row: 1;
	grid-column: 1;
	z-index: 1;
	margin-top: 35px;
	margin-bottom: 0;
}
body .pa-page--concierge .page-content__body .mainvisual-img {
	grid-row: 2;
	grid-column: 1;
	z-index: 10;
}
body .pa-page--concierge .page-content__body .mainvisual-text__sub {
	grid-row: 3;
	grid-column: 1;
	z-index: 1;
	text-align: left;
	text-align: start;
}
/* 白い札。移行元は題と絵にだけ掛かる */
body .pa-page--concierge .page-content__body .mainvisual-inner::after {
	content: "";
	display: block;
	grid-row: 1 / 3;
	grid-column: 1;
	z-index: 0;
	background: #FFF;
}
/* 飾りの枠。写しは絶対配置なので、格子の升目に置き直す */
body .pa-page--concierge .page-content__body .mainvisual-inner::before {
	position: static;
	grid-row: 1 / 3;
	grid-column: 1;
	z-index: 0;
	margin: 2px;
	width: auto;
	height: auto;
}

/* 移行元スマホ版の説明文には改行が無い。パソコン版から来た 5 つの改行を携帯幅で止める */
body .pa-page--concierge .page-content__body .mainvisual-text__sub br {
	display: none;
}

/*
 * 題の 2 行目（大きい字の span）の行送りが、テーマの指定で normal に落ちている。
 * 移行元は 1.3 を受け継ぎ 42.9px になる（33px × 1.3）。題の箱が 7px 高くなる原因
 */
body .pa-page--concierge .page-content__body .mainvisual-text__copy span {
	line-height: 1.3;
}

/* 格子の升目では上下の余白が親と重ならない。移行元は重なって消えるぶんを打ち消す */
body .pa-page--concierge .page-content__body .mainvisual-text__sub > p:first-child {
	margin-top: 0;
}
body .pa-page--concierge .page-content__body .mainvisual-text__sub > p:last-child {
	margin-bottom: 0;
}

/*
 * 移行元の携帯用の共通 CSS は本文の絵を器いっぱいに広げ、塊として置く。
 * dev は文字と同じ行に置くため、器に文字の足の分の空きが 5px 付く
 */
body .pa-page--concierge .page-content__body .mainvisual-img img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * 流れの区画を 本文 → 絵 の順にし、説明の表の幅と罫線をそろえる（Bug #4828）。
 *
 * 移行元スマホ版は **本文 → 絵**の順、dev は移行元パソコン版と同じ **絵 → 本文**の順。
 * 段を縦に積む器にして、絵だけを後ろへ回す。
 */
body .pa-page--concierge .page-content__body .flow-list > li {
	display: flex;
	flex-direction: column;
	margin-top: 60px;
}
body .pa-page--concierge .page-content__body .flow-list__img {
	display: block;
	order: 1;
	/* Step.06 だけ絵を段落で包んでおり、テーマの下の余白 18px が付く（移行元は 0）*/
	margin-bottom: 0;
}
body .pa-page--concierge .page-content__body .flow-list__text dl {
	margin: 0;
}

/*
 * 🚨 説明の表の罫線。移行元は 1 段につき `<dl>` 1 本（dt/dd/dt/dd の 4 つ）だが、
 * dev は `<dl>` 2 本（それぞれ dt/dd）に割れている。写した携帯用 CSS は
 *   .flow-list dl            上下に 1px の茶（#A3762B）
 *   .flow-list dd            下に 1px の薄い灰色（#DEDEDE）
 *   .flow-list dd:last-child 下の線を消す
 * なので、移行元は「外枠が茶 2 本・中の区切りが薄い灰色 1 本」になる。
 * dev は表が 2 本に割れるため、**茶の線が 4 本**になり、**薄い灰色の区切りが消える**。
 * どの dd も自分の表の最後の子になり、`dd:last-child` に当たってしまうためである。
 *
 * 幅 375px の実測（2026-09-08）: 1 段目の高さが移行元 628.03px に対し dev は 629.03px。
 * **これが「Step.01〜05 が各 +1px」の正体**である（茶 2 本が増え、灰色 1 本が減る）。
 * 直したあとは 628.03px で一致した。
 *
 * 直し方は、割れた表を 1 本に見せること。中の境目では茶を消し、
 * 代わりに移行元と同じ薄い灰色を 1 本だけ引く。
 */
body .pa-page--concierge .page-content__body .flow-list__box dl:not(:last-child) {
	border-bottom: none;
}
body .pa-page--concierge .page-content__body .flow-list__box dl:not(:first-child) {
	border-top: none;
}
body .pa-page--concierge .page-content__body .flow-list__box dl:not(:last-child) dd {
	border-bottom: 1px solid #DEDEDE;
}

/*
 * テーマが足す余白を、移行元の値へ 1 つずつ戻す（Bug #4829）。
 *
 * dev はテーマの見出しの余白（上 30px・下 15〜20px）と一覧の下の余白 18px が残るため、
 * 区画の題が 30px 下がり、札の中の小見出しが 50px 分ふくらむ。
 *
 * 🚨 **まとめて 0 にしてはいけない。**`:is(h1〜h6)` で一括に外すと、移行元が余白を
 * 持たせている見出しまで消えて「私が出会った成婚コンシェルジュ」の塊が 500px 縮んだ。
 * 🚨 **上と下を同じに扱ってもいけない。**区画の題の下の余白（25px）は移行元と同じで、
 * 0 にすると題と説明文がくっつく。段の題（`h5`）だけは移行元も上下ともに 0 である。
 * 移行元の値を 1 つずつ読んで書き分ける（取り決め 47）。実際に 3 回間違えた。
 */

/* 上だけ 0 にする（移行元は下に余白を持つ）*/
body .pa-page--concierge .page-content__body .navigation-copy,
body .pa-page--concierge .page-content__body .flow-title,
body .pa-page--concierge .page-content__body .flow-sub,
body .pa-page--concierge .page-content__body .my-title,
body .pa-page--concierge .page-content__body .introduction-title,
body .pa-page--concierge .page-content__body .value-title,
body .pa-page--concierge .page-content__body .movie-inside__title {
	margin-top: 0;
}

/* 上下ともに 0 にする（移行元も 0）*/
body .pa-page--concierge .page-content__body .flow-list__text-title,
body .pa-page--concierge .page-content__body .my-list__header-title {
	margin-top: 0;
	margin-bottom: 0;
}

/* 一覧の下に付くテーマの余白 18px を外す（移行元は 0）*/
body .pa-page--concierge .page-content__body .navigation-list,
body .pa-page--concierge .page-content__body .flow-list,
body .pa-page--concierge .page-content__body .introduction-list {
	margin-bottom: 0;
}

/*
 * ご紹介の札。絵が文字と同じ行に置かれ、文字の足の分の空きが 6px 付く。
 * 移行元は塊として置く。押しボタンの下にはテーマの余白 18px が付いている（移行元は 0）
 */
body .pa-page--concierge .page-content__body .introduction-list__img {
	display: block;
	/* 🚨 幅 749px では札（344px）が絵の元の幅（204px）より広い。移行元は器いっぱいに
	   広げるが、dev は元の幅のままで、札が 167px 低くなる。`max-width` だけでは足りない */
	width: 100%;
	height: auto;
}
/* 札の丸い絵も文字と同じ行に置かれ、足の分の空きが 6px 付く（移行元は塊）*/
body .pa-page--concierge .page-content__body .my-list__header-icon img {
	display: block;
}
body .pa-page--concierge .page-content__body .introduction-list__btn {
	margin-bottom: 0;
}

/*
 * 目次の中の並びの下の余白 18px が親の外へ抜けて、流れの区画が 18px 下がる。
 * ご紹介の区画には器じしんに上の余白 20px が付いている（移行元はどちらも 0）
 */
body .pa-page--concierge .page-content__body .navigation-list ul {
	margin-bottom: 0;
}
body .pa-page--concierge .page-content__body .introduction {
	margin-top: 0;
}

/*
 * 会員様の評価。移行元は箇条書き 6 つを直に並べるが、dev は 3 つずつ 2 つに分けている。
 * そのため ①並びの下にテーマの余白 18px が付く ②「最初の札だけ上の詰めを 0 にする」
 * 指定が 4 つめの札にも当たり、30px 低くなる。どちらも移行元の姿へ戻す。
 * 幅 375px の実測（2026-09-08）: 打ち消しを入れると一覧の高さが両側とも 999.56px で
 * 一致し、6 枚とも同じ詰め・同じ高さになった。
 */
body .pa-page--concierge .page-content__body .value-list ul {
	margin-bottom: 0;
}
body .pa-page--concierge .page-content__body .value-list ul:not(:first-child) li:first-child {
	padding-top: 30px;
}

/*
 * 携帯幅で、体験談の見出しを押したら本文が入れ替わるようにする（Bug #4904）。
 *
 * ## いま何が起きているか（幅 375px の実測・2026-09-09）
 *
 * 押すと**動きの台本は働いており**、中身の入れ物（`.my-list__list-body__inner`）へ
 * `left: -356px` が書かれる。**ページの再読込も起きない。**それでも見た目が 1 つも
 * 変わらないのは、器も入れ物も `position: static` のままで **`left` が効かない**ためである。
 * 結果として 5 つの本文が縦に積まれて全部見えている。
 *
 * ## なぜ「横送り」を携帯幅へ持ってこないか
 *
 * パソコン幅（`style.css` の 439〜472 行）は、器に `overflow: hidden` と **`height: 300px`**、
 * 本文を `position: absolute` で 100% ずつ横へ並べ、入れ物の `left` で送る作りである。
 * **この作りは器の高さを固定しないと成り立たない**（本文が絶対配置なので器の高さが 0 になる）。
 *
 * 🚨 **携帯幅で高さを固定すると本文が切れる。**幅 375px の実測で、5 つの本文の高さは
 * 207 / 161 / 207 / 207 / **299px** とばらついている。固定した高さより長い本文は
 * 読めなくなり、**いまより悪くなる。**
 *
 * 🚨 **送り幅は台本が `inner.offsetWidth` から取る。**入れ物を横に広げる作り（`display: flex`
 * で 5 枚ぶんの幅にする等）にすると、この値が 5 倍になって送りが壊れる。
 *
 * ## 選んだ作り: 選ばれた 1 枚だけを見せる
 *
 * 移行元スマホ版も**一度に 1 件だけ**を見せる（開閉式）ので、見え方はそちらへ近づく。
 * 高さを固定しないので本文が切れず、入れ物の幅も変わらないので送り幅の計算も壊さない。
 *
 * **どの見出しが選ばれているかは `li.active` にしか出ない**（本文の側には印が付かない）。
 * そこで `:has()` で「何番目の見出しに印が付いているか」を読み、隣り合う器の同じ番号の
 * 本文だけを見せる。`:has()` はこのテーマで既に使っている（`assets/css/section-fullwidth.css`）。
 *
 * 🚨 **見出しの並びと器は隣り合う兄弟である**（`.my-list__list` の次が `.my-list__list-body`）。
 * `.my-list` の中には**組が 2 つ**あるので、`.my-list` を起点にすると 2 組が混ざる。
 * 必ず**組ごとに**隣り合わせで結ぶこと。
 *
 * 入れ物へ書かれる `left` は、この作りでは何もしない（`position: static` のままにしてある）。
 */
body .pa-page--concierge .page-content__body .my-list__list-body__item {
	display: none;
}
body .pa-page--concierge .page-content__body .my-list__list:has(> li:nth-child(1).active) + .my-list__list-body .my-list__list-body__item:nth-child(1),
body .pa-page--concierge .page-content__body .my-list__list:has(> li:nth-child(2).active) + .my-list__list-body .my-list__list-body__item:nth-child(2),
body .pa-page--concierge .page-content__body .my-list__list:has(> li:nth-child(3).active) + .my-list__list-body .my-list__list-body__item:nth-child(3),
body .pa-page--concierge .page-content__body .my-list__list:has(> li:nth-child(4).active) + .my-list__list-body .my-list__list-body__item:nth-child(4),
body .pa-page--concierge .page-content__body .my-list__list:has(> li:nth-child(5).active) + .my-list__list-body .my-list__list-body__item:nth-child(5) {
	display: block;
}

/*
 * 移行元パソコン版にだけ在る規則が携帯幅へ漏れている 4 か所を戻す（Bug #4761）。
 *
 * 🚨 **この 4 つは同じ型である。**移行元は**パソコン版とスマホ版で別の CSS を読む**。
 * dev は移行元パソコン版を投入したうえでテーマの共通 CSS を全幅に当てているので、
 * **パソコン版にだけ在る規則が携帯幅にも効いてしまう。**写しが親に置いた値は、
 * テーマが子へ直接当てた値に負けるため届かない（Issue #2391 と同じ）。
 * そこで携帯幅だけ、移行元スマホ版の値へ当て直す。
 *
 * 実測（2026-09-09 14:57 JST・幅 375px・移行元は写しを共有の配り手で配り、dev は実ページ）:
 *
 *   見るところ                    移行元    dev 直す前   dev 直した後
 *   冒頭の区画の高さ              723.41     761.09        723.41
 *   冒頭の説明文の高さ               214     251.69           214
 *   目次の項目の寄せ              center       left        center
 *   体験談の見出しの太さ             400        700           400
 *   体験談の本文の行送り            27px     normal          27px
 *
 * 🚨 **「流れの本文の行の高さ 14 対 13」は直さない。差ではないと確かめた。**
 * 字 14px・行送り normal・**実際に描いた書体（YuMincho）まで両側で一致**する
 * （CDP の `CSS.getPlatformFontsForNode` で確認）。違うのは突き合わせの道具が数える
 * 矩形の個数だけで（移行元 1 個・dev 3 個）、`Range.getClientRects()` は行内要素ごとに
 * 箱を返すため、中身の組み方が違えば個数が変わる。**見た目の差ではない。**
 */

/*
 * ① 冒頭の説明文の行送り（Bug #4761・移行元スマホ版は指定なし）
 *
 * すぐ上の `bridge.css` は、写し元（**移行元パソコン版**）の `line-height: 1.8` を
 * 段落へ直接当てている。**移行元スマホ版にその指定は無く、`normal` のまま**である。
 * 携帯幅では `normal` へ戻す。**21px と直書きしない**（`normal` の実効値は書体で
 * 変わるため、移行元と同じ書き方でそろえる。司令塔の指示・2026-09-09）.
 */
body .pa-page--concierge .page-content__body .mainvisual-text__sub p {
	line-height: normal;
}

/*
 * ② 目次の項目の寄せ（Bug #4761・移行元スマホ版は中央）
 *
 * 移行元の区画別 CSS は `.navigation-list { text-align: center }` を持ち、**dev の写しにも
 * 入っている**（写し漏れではない）。ところが `assets/css/main.css` が
 * `:is(.entry-content, .page-content__body) :is(ol, ul, …) { text-align: left }` で
 * **`ul` へ直接**当てるため、親の `center` が `li` まで届かない。
 *
 * 🚨 **あの規則の出どころは移行元パソコン版である。**注釈にも「移行元
 * `public/css/common.css` の 266〜269 行が『ol, ul は左寄せ』と決めている」と書いてある。
 * **その規則はパソコン版にだけ在り、スマホ版（`sp/css/` の 3 本）には 1 つも無い**
 * （2026-09-09 に全数で確認）。だから携帯幅では中央寄せが正しい。
 *
 * `ul` と `li` の両方へ当てるのは、`ul` だけだと `main.css` と同じ強さで当たり先が
 * 深い分こちらが勝つが、**`li` へ直接当てる規則が将来足されたときに負ける**ためである.
 */
body .pa-page--concierge .page-content__body .navigation-list ul,
body .pa-page--concierge .page-content__body .navigation-list ul li {
	text-align: center;
}

/*
 * ③ 体験談の見出しの太さ（Bug #4761・移行元スマホ版は 400）
 *
 * 移行元は**パソコン版とスマホ版で見出しの太さが違う**。
 *
 *   パソコン版（`css/common.css`）… 初期化で `h1〜h6 { font-weight: normal }` を置いた
 *                                   あと、`--HEADLINE--` と書かれた節で `bold` へ戻す
 *   スマホ版（`sp/css/basic.css`）… 初期化で `normal` を置くだけで、**戻す規則が無い**
 *                                   （`common.css` `style.css` `concierge/css/style.css` を
 *                                   全数で確認・2026-09-09）
 *
 * dev はパソコン版に合わせて 700 になっているので、携帯幅では 400 へ戻す.
 */
body .pa-page--concierge .page-content__body .my-list__header-title {
	font-weight: 400;
}

/*
 * ④ 体験談の本文の行送り（Bug #4761・移行元スマホ版は 1.8）
 *
 * 写しは `.my-list__list-body { line-height: 1.8 }` を器へ置いている。倍率なので本来は
 * 中の段落へ受け継がれるが、**同じ写しの中の
 * `:is(p, li, dt, dd, …) { line-height: normal }` が段落へ直接当たって勝つ。**
 * 実測では移行元の段落が 27px（15px × 1.8）、dev が `normal` だった。段落へ当て直す.
 */
body .pa-page--concierge .page-content__body .my-list__list-body p {
	line-height: 1.8;
}