/*
 * 移行元のページ専用のスタイルの写し（はじめての方への区画共通 /visitor/）。
 *
 * 写し元: legacy/www.p-a.jp/public/visitor/css/style.css
 * このファイルは手で書かない。写し元を
 * scripts/pa-cms/transform-legacy-page-css.py に通して作り直す。
 *
 * 写し元をそのまま置けない理由が 2 つある。
 *
 *   1. 写し元は 1 枚で完結した静的ページ用で、根の要素（html / body / *）へ
 *      余白の初期化と文字の指定を当てている。テーマのヘッダー・フッターへ
 *      その初期化が波及すると崩れるため、すべてのセレクタの前に
 *      `body .pa-page--visitor .page-content__body` を足して本文の中へ閉じ込めている。
 *   2. 写し元は根の文字（`html { font-size }`）を触らない。移行元でも
 *      ブラウザ既定の 16px で読まれており、このテーマの根の文字も 16px
 *      固定である。**両側の基準が同じなので、rem は換算せずそのまま
 *      書き出している。**換算すると、移行元より寸法が小さくなる。
 */
body .pa-page--visitor .page-content__body #visitor {
	margin: 0 auto;
	padding:65px 0 30px;
	width:1008px;
	text-align:center;
	font-size:16px;
	line-height:200%;
}
body .pa-page--visitor .page-content__body #visitor .title {
	margin-bottom:40px;
}
body .pa-page--visitor .page-content__body #visitor .main_copy {
	margin-top:10px;
	margin-bottom:70px;
	color:#a3762b;
	font-size:30px;
	line-height:160%;
}
body .pa-page--visitor .page-content__body #visitor dl.visitor_point dt {
	text-align:left;
}
body .pa-page--visitor .page-content__body #visitor dl.visitor_point dd {
	text-align:left;
	position:relative;
	width:1008px;
	margin-bottom:60px;
}
body .pa-page--visitor .page-content__body #visitor dl.visitor_point dd p {
	width:820px;
}
body .pa-page--visitor .page-content__body #visitor dl.visitor_point dd img {
	position:absolute;
	bottom:-10px;
	right:0;
}
body .pa-page--visitor .page-content__body #visitor h4 {
	margin-bottom:30px !important;
}
body .pa-page--visitor .page-content__body #visitor p {
	font-size:16px;
	line-height:150%;
}
body .pa-page--visitor .page-content__body #visitor .method_btn {
	margin:0 auto;
}
body .pa-page--visitor .page-content__body #visitor p.arrow {
	margin:75px 0 45px;
}
body .pa-page--visitor .page-content__body #visitor .method_btn p {
	margin-bottom:20px;
	font-size:18px;
	color:#a3762b;
	line-height:160%;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
body .pa-page--visitor .page-content__body .concept_list {
	background:url(../images/bg_list.gif?ver=882b13c3e39e) repeat;
	margin-bottom:80px;
	padding:40px 0 45px;
	text-align:left;
}
body .pa-page--visitor .page-content__body .concept_list .list_inner {
	margin:0 auto;
	width:800px;
	font-size:16px;
	line-height:160%;
}
body .pa-page--visitor .page-content__body .concept_list .list_inner .inner_ttl {
	margin-bottom:30px;
	color:#000000;
	font-size:30px;
	line-height:100%;
	letter-spacing:0.1em;
	text-align:center;
}
body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li {
	width:365px;
	float:left;
	margin-bottom:20px;
}
body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li p {
	margin-bottom:10px;
	font-size:18px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li.fr {
	float:right;
}
body .pa-page--visitor .page-content__body .contact_box a img {
	margin:0 10px;
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
}
body .pa-page--visitor .page-content__body .btn_area {
	width:1100px;
	margin:0 auto;
}
body .pa-page--visitor .page-content__body .btn_area2 {
	width:1100px;
	margin:-30px auto 0;
}
body .pa-page--visitor .page-content__body .sections.sec04 {
	margin: 0 auto 60px;
}
body .pa-page--visitor .page-content__body .sec04 .shikaku_area {
	padding: 0 75px 65px !important;
	box-sizing: border-box;
}
body .pa-page--visitor .page-content__body .sec04 .sec_inner {
	width: 1100px;
	margin: 0 auto;
}
body .pa-page--visitor .page-content__body .sub_title {
	font-size: 23px;
	color: #9f8046;
	margin-bottom: 30px;
	letter-spacing: 0.05em;
	text-align: center;
	line-height: 1.2em;
}
body .pa-page--visitor .page-content__body .sec04 p {
	letter-spacing: 0.05em;
	line-height: 2;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
	color: #9f8046;
}
body .pa-page--visitor .page-content__body .sec04 h4 + p {
	padding: 0 0 0;
	font-weight: bold;
}

/* --------------------------------------------------------------
   サービスの案内の 4 つの導線を移行元の高さへ戻す（Task #3492）

   移行元は器で 1 回だけ宣言し、あとは受け継がせている（上の 80〜85 行）。

     .concept_list .list_inner { font-size: 16px; line-height: 160%; }   → 25.6px

   この宣言は写せているが、**差が 2 つの原因で出る**。

   ## 原因 1: テーマの規則が受け継ぎを断つ

   `assets/css/main.css` の `.page-content__body :is(p, li)` が直に当たるため、
   受け継いだ 25.6px が届かない。

     `li`    行送り 移行元 25.6px → dev 24px
     `li p`  行送り 移行元 25.6px → dev 27px（字が 18px なので倍率が計算し直される）

   ## 原因 2: dev だけが絵を `<p>` で包む

   移行元の組みは `li > p`（説明文）＋ `li > a > img`（絵）である。投入の自動整形（wpautop）が
   裸のリンクを段落で包むので、dev は `li > p > a > img` になる。上の 99〜103 行の
   `li p { margin-bottom: 10px }` が**その包みにも当たり**、1 つの導線につき 10px 余分に
   高くなる。

   🚨 **絵は `<a>` に包まれている。**当たり先を `p:has(> img:only-child)` と書くと、
   段落の直下の子は `a` なので**1 件も一致しない**（dev の実ページで 0 件と確かめた）。
   規則が丸ごと空振りしても、CSS はエラーを出さないので気づけない。**当たり先は実ページの
   入れ子で数えて決める**（dev の 4 つとも `p > a > img` で、包み無しは 0 件だった）。

   🚨 **テーマの `inc/orphan-paragraph-tags.php` はこの形を扱わない。**あちらが消すのは
   「対にならないタグ」だけで、ここは開始と終了がそろった段落である。

   🚨 **外余白を 0 にするのではなく、箱ごと消す。**移行元は絵が `li` の直下にあり、絵の下の
   空きは `li` の行送りで決まる。段落の箱を残したまま外余白だけ 0 にすると、**段落の行送り
   （27px）が絵の下に残る**ので合わない。`display: contents` なら箱が無くなり、絵が `li` の
   直下にあるのと同じ流れに戻る。

   🚨 **`<picture>` で包まれた絵も「絵 1 枚だけ」として扱う**（Bug #4134）。携帯幅で
   絵を差し替える仕組み（`inc/sp-image-swap.php`）は、対象の `<img>` を `<picture>` で
   包む。**包みは幅にかかわらず HTML に入る**ので、`> a:only-child > img:only-child` は
   当たらなくなり、この打ち消しが丸ごと空振りする。

   Bug #4134 でこの 4 枚を差し替えの表へ足したとき、実測でその症状が出た
   （幅 1440px で `li` が 108.19 → 117.19px・`.concept_list` が 401.38 → 419.38px。
   パソコン幅の陰性対照が 268 件の差として拾った）。**同じ型はテーマの記事用の見出しで
   先に踏んでおり**（Bug #3975・`main.css` の `:is(img, picture):only-child`）、
   ここも同じ書き方でそろえる。

   **詳細度は変わらない。**`:is(img, picture)` は中身の最大値（要素 1 つぶん）を取り、
   `:only-child` と合わせて `img:only-child` と同じ (0, 1, 1) である。

   【実測（移行元 www.p-a.jp を幅 1440px で取得）】

     `li`             移行元 108px → dev 119px（4 つとも）
     `ul.menu_concept` 移行元 256px → dev 278px
     `.list_inner`    移行元 316px → dev 338px
     `.concept_list`  移行元 401px → dev 423px（**+22px**）
   -------------------------------------------------------------- */

body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li,
body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li p {
	line-height: inherit;
}

body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li > p:has(> a:only-child > :is(img, picture):only-child) {
	display: contents;
}

/* --------------------------------------------------------------
   絵のリンクの字の大きさを、移行元と同じ `li` の値へ戻す（Bug #7828）

   ## 何を直すのか

   4 つのリンク（`.menu_concept li a`）の外形が、移行元より **2px 高い**。

     `.menu_concept a`   移行元 365 × 16   →   dev 365 × 18

   ## なぜ起きるか

   すぐ上の `display: contents` は段落の**箱**を消すが、**`font-size` の継承までは消せない**。

     移行元  li > a > img          … `a` は `li` の 16px を継承する
     dev     li > p > a > img      … `a` は `p` の 18px を継承する

   `a` はインライン要素なので、継承した字の大きさが**行ボックスの高さ**に効き、外形が高くなる。

   ## 🚨 親には影響していない。それでも直す

   幅 1440 の実測（2026-09-19 22:12）で、`li`（365 × 108）・`ul`（800 × 256）・
   `.concept_list`（1440 × 401）はすべて移行元と一致していた。**両側に在る器 37 件のうち
   36 件が一致し、食い違うのはこの `a` の 1 件だけ**である。画面の中で位置が動いている
   要素は無いが、見た目は移行元の完全再現が原則（2026-08-31 のユーザー裁定）なので直す。

   🚨 **`p` の 18px は変えない。**あれは説明文の字の大きさで、移行元の
   `.concept_list .list_inner ul.menu_concept li p { font-size: 18px }` と同じ値である.
   -------------------------------------------------------------- */

body .pa-page--visitor .page-content__body .concept_list .list_inner ul.menu_concept li a {
	font-size: 16px;
}

/* --------------------------------------------------------------
   はじめての方への区画の見出しの行の高さ（Bug #3808）

   ## 何を直すのか

   見出し（`h3.title`）の箱が移行元より **2px 低い**。中身は絵 1 枚だけで、絵の描画は
   両側とも 438x73 で一致しているのに、箱だけが 81px 対 83px になる。

   🚨 **中身が絵だけでも、箱の高さは行の「字の大きさ」と「行送り」で決まる。**絵は行の
   中に置かれ、下に文字の下がり分の空きができるためである。

   ## 移行元は「継承」でこの値になっている

   移行元には、この見出しの字の大きさ・行送りを決める規則が **1 本も当たっていない**
   （読み込まれている全規則を照合して 0 件）。すぐ上の 19〜26 行に写した器の規則
   `#visitor { font-size: 16px; line-height: 200% }` から受け継いでいる。

   dev では、テーマが見出しを**直に指す**ので継承が負ける。当たっているのは次の 2 本で
   ある（ブラウザに聞いて確かめた。CSS を grep すると効いていない規則を犯人にする）。

     assets/css/main.css  .page-content__body :is(h2…h6) { line-height: var(--pa-line-height-heading) }
     assets/css/main.css  .page-content__body h3         { font-size: var(--pa-article-h3-size) }

   ## 実測（幅 1440px・2026-09-05 17:40 JST・移行元は本番）

   | 見るところ | 移行元 | dev |
   |---|---|---|
   | 見出しの箱 | **1008 x 83** | 1008 x 81 |
   | 字の大きさ | **16px** | 22px |
   | 行送り | **32px** | 33px |
   | 字間 | **normal** | 1.1px |
   | 色 | **rgb(0, 0, 0)** | rgb(163, 118, 43) |
   | 中の絵の描画 | 438 x 73 | 438 x 73（一致） |
   | 下の外余白 | 40px | 40px（一致） |

   ## 🚨 当たり先を本体の目印と器で絞る理由

   この写しは経験者以外の **5 ページ**へ配られる（`inc/visitor-page-css.php`）。よくある
   質問と親御さまへの見出しは**すでに移行元と一致している**ので、広く書くと合っている
   ものを動かす。はじめての方へだけが持つ目印 `pa-visitor--top` と、見出しが器の直下に
   ある形（`#visitor > h3.title`）の両方で絞る。

   🚨 成婚率へのこだわりの見出しは `#visitor > div.sec_inner > h3.title` と器が 1 段
   深いので、この当たり先では拾わない（あちらは `method.css` で別に直す）.
   -------------------------------------------------------------- */

body.pa-visitor--top .page-content__body #visitor > h3.title {
	color: #000;
	font-size: 16px;
	letter-spacing: normal;
	line-height: 32px;
}