/* * 移行元のページ専用のスタイルの写し（はじめての方へ 親御さまへ /visitor/parents/）。 * * 写し元: legacy/www.p-a.jp/public/visitor/parents/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 p { text-align:left; } body .pa-page--visitor .page-content__body #parents { margin: 0 auto; padding:65px 0 30px; width: 1100px; text-align:center; font-size:16px; line-height:200%; } body .pa-page--visitor .page-content__body #parents .title { margin-bottom:35px; } body .pa-page--visitor .page-content__body #parents .main_copy { margin-bottom:60px; font-size:24px; line-height:100%; text-align:center; } body .pa-page--visitor .page-content__body .message { width:798px; margin:0 auto 40px; text-align:center; } body .pa-page--visitor .page-content__body .message h4 { margin:0 0 20px; } body .pa-page--visitor .page-content__body .message p.photo { float:left; width:381px; } body .pa-page--visitor .page-content__body .message p.text { float:right; width:385px; font-size:16px; line-height:26px; text-align:left; } body .pa-page--visitor .page-content__body .box01 { margin:0 0 60px; } body .pa-page--visitor .page-content__body .box01 .photo { float:right; width:265px; } body .pa-page--visitor .page-content__body .box01 .text { float:left; width:800px; } body .pa-page--visitor .page-content__body .box02 { margin-left:160px; margin-bottom:60px; } body .pa-page--visitor .page-content__body .box02 dl dt { font-size:22px; text-align:left; margin:0 0 4px; } body .pa-page--visitor .page-content__body .box02 dl { width:365px; float:left; } body .pa-page--visitor .page-content__body #parents02 { margin:0 0 60px; } body .pa-page--visitor .page-content__body #parents02 h4 { margin:0 0 20px; } body .pa-page--visitor .page-content__body #parents03 { background:url(../images/bg_mv_body.jpg?ver=2a1da27b6a23) repeat 0px 0px; padding:39px 50px 30px; margin:0 0 90px; } body .pa-page--visitor .page-content__body #parents03 p.photo { float:left; width:324px; } body .pa-page--visitor .page-content__body #parents03 .text { float:right; width:640px; text-align:left; } body .pa-page--visitor .page-content__body #parents03 .text h4 { background:url(../images/column.gif?ver=dd1fc2394ed5) no-repeat 0px 2px; margin:0 0 20px; padding:0 0 0 104px; font-size:30px; font-weight:600; } body .pa-page--visitor .page-content__body .qa_box dl { margin:0 0 40px; padding:0 0 40px; border-bottom:1px solid #ccc; } body .pa-page--visitor .page-content__body .qa_box dl dt, body .pa-page--visitor .page-content__body .qa_box dl dd { text-align:left; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } body .pa-page--visitor .page-content__body .qa_box dl dt { /* * 移行元の `../images/q01.gif` は parents/images には無く、稼働中サイトでも * 404 になる。テーマでは画像を区画内へ平らに置くため questions 由来の * q01.gif に解決されるが、この既定規則が当たる描画済みの dl は無く、qa01〜 * qa03 の後続規則が上書きする。移行元の壊れた参照を直したものではない。 */ background:url(../images/q01.gif?ver=8f994cde9e37) no-repeat 0px 0px; font-size:24px; padding:0 0 0 55px; margin:0 0 14px; } body .pa-page--visitor .page-content__body .qa_box dl.qa01 dt { background:url(../images/q01.gif?ver=8f994cde9e37) no-repeat 0px 0px; } body .pa-page--visitor .page-content__body .qa_box dl.qa02 dt { background:url(../images/q02.gif?ver=e9b96ef7c4b0) no-repeat 0px 0px; } body .pa-page--visitor .page-content__body .qa_box dl.qa03 dt { background:url(../images/q03.gif?ver=7edc9f8a6c86) no-repeat 0px 0px; } body .pa-page--visitor .page-content__body .qa_box dl dd { font-size:16px; background:url(../images/a.gif?ver=7d4e4a705d49) no-repeat 0px 0px; padding:0 0 0 55px; } body .pa-page--visitor .page-content__body .contact_box p { text-align:center; } 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; } /* -------------------------------------------------------------- 行送りと字間を移行元へ戻す（Task #3492） 移行元は器で 1 回だけ宣言し、あとは受け継がせている。 body .pa-page--visitor .page-content__body #parents { font-size: 16px; line-height: 200%; } `%` で書いた行送りは**その要素で一度 px に確定してから**子へ伝わるので、子の字の 大きさが違っても 32px のままである。上の宣言は写せている。 🚨 **それでも子に届かない。**テーマの `assets/css/main.css` が `.page-content__body p { line-height: var(--pa-line-height-text) }` を**段落へ直に** 当てるためで、受け継いだ値は直接の指定に負ける。見出しも同じで、テーマの `letter-spacing: 0.05em` が直に当たる。**器へ書き足しても直らないので、子へ直に書く。** 【実測（移行元 www.p-a.jp を 2026-09-04 19:2x に幅 1440px で取得）】 節 1 の説明文 `.box01 .text` 行送り 移行元 32px → dev 24px（高さ 128 → 96） 節 3 の説明文 `#parents03 .text p` 行送り 移行元 32px → dev 24px（高さ 256 → 192） 節 3 の見出し `#parents03 .text h4` 行送り 移行元 32px → dev 45px（高さ 32 → 45） 字間 移行元 normal → dev 1.5px 文字の並びの幅 移行元 330px → dev 346.5px 区画ぜんたいでは移行元 2486px 対 dev 2422px（**−64px**）だった。 🚨 **`#parents p` のように広く当ててはいけない。**同じページの `.message p.text` は 移行元が `line-height: 26px` を持っており（上の 51〜55 行）、両側で一致している。 広い規則は id を持つぶん詳細度が高く、この 26px を壊す。 🚨 **字間の差は要素の箱では出ない。**見出しは器いっぱいに広がるので、箱の幅は両側とも 640px で同じである。`Range.selectNodeContents()` で文字の並びそのものを測る（Bug #3501）. -------------------------------------------------------------- */ body .pa-page--visitor .page-content__body .box01 .text { line-height: 32px; } body .pa-page--visitor .page-content__body #parents03 .text p { line-height: 32px; } body .pa-page--visitor .page-content__body #parents03 .text h4 { letter-spacing: normal; line-height: 32px; } /* -------------------------------------------------------------- 写真の器と、絵だけの見出し（Task #3492 の追加。dev で実測して確かめた） 絵は行の中に置かれるので、**行送りが縮むと絵の下の空きも縮む**。写真の器は 3 か所とも 4px 低かった。絵そのものの寸法は両側で完全に一致している。 【実測（移行元 2026-09-05 00:24 / dev 00:25。どちらも幅 1440px）】 あいさつの写真 `.message p.photo` 移行元 245px → dev 241px（絵は両側 235px） 節 1 の写真 `.box01 .photo` 移行元 183px → dev 179px（絵は両側 173px） 節 3 の写真 `#parents03 p.photo` 移行元 222px → dev 218px（絵は両側 212px） あいさつの見出し `.message > h4` 移行元 45px → dev 42px（絵は両側 35px） 節 1 の見出し `#parents01 > h4` 移行元 96px → dev 93px（絵は両側 86px） 節 2 の見出し `#parents02 > h4` 移行元 96px → dev 93px（絵は両側 86px） 🚨 **見出しは行送りだけでは 1px 合わない。**字の大きさも移行元へ戻す必要がある （移行元 16px・dev はテーマの 18px）。中身は絵だけだが、**行の基準線の位置が字の 大きさで決まる**ので、絵の下の空きが 1px ずれる。行送り 32px だけを当てると 95px 止まりで、字を 16px にして初めて 96px になる。 🚨 **字間は当てない。**中身が絵だけの見出しには文字の対が無く、当てても高さも幅も 変わらないことを dev で確かめた（当てた場合と当てない場合の両方で区画 2486px）。 この 2 つを足すと、区画ぜんたい `#parents` が **移行元と同じ 2486px** になる （足す前は 2483px）。節ごとの高さも 5 か所すべてが移行元と一致する. 🚨 **節 3 の見出しはここに含めない。**`#parents03 .text h4` は文字の見出しで、 字の大きさが 30px である（上の規則で別に扱う）。`#parents > section > h4` は `.text` の中まで届かないので、取り違えは起きない. -------------------------------------------------------------- */ body .pa-page--visitor .page-content__body #parents p.photo { line-height: 32px; } body .pa-page--visitor .page-content__body #parents > .message > h4, body .pa-page--visitor .page-content__body #parents > section > h4 { font-size: 16px; line-height: 32px; } /* -------------------------------------------------------------- 「ご予約フォームへ」の押しボタンの矢印（Bug #3009） 移行元は黒い押しボタンの右端に**白い矢印の絵**を敷いている。投入は本文の `` が指す絵だけを取り込み、**CSS の背景の絵は取り込まない**ので dev に 出ていなかった。 ## 移行元の宣言（記録版 1fbfa9dda の `public/css/style.css` の 143〜156 行） .txtBtn_black01 a { display: block; letter-spacing: 0.04em; background-color: #000; background-image: url(../images/btn_arrow_m.png?ver=bfb3b03390c9); background-repeat: no-repeat; background-position: right 10px center; color: #fff; text-decoration: none; padding: 15px 50px; font-size: 20px; margin-left: 15px; } ## 足すのは背景の絵の 3 行だけ ほかの宣言は **dev ですでに同じ値になっている**（2026-09-05 15:28 JST に両側を 実測。字 28px・字間 1.12px・色 #fff・地の色 #000・内余白 15px 50px・左の外余白 15px・下線なし・リンクの箱 331.28 x 62 がすべて一致）。**効いている値を書き足さない。** 🚨 **`display` と器の `flex` は写さない。**移行元は器が `flex` + `justify-content: center`・リンクが `block`、dev は器が `block`・リンクが `inline-block` である。 **置かれる場所は 1px も違わない**（両側ともリンクの左端 561.86 / 右端 893.14、 文字の塗りの左端 611.86 / 幅 231.28、器の寄せは両側 `center`）。見た目に出ない 差を直すと、確かめ直す範囲だけが増える。 ## 絵の置き場所 記録版から**テーマの資産**へ写した（`assets/visitor/images/btn_arrow_m.png`・ 26 x 38・白い矢印 110 画素・md5 165bd66e6f77f746dd43d7731c8e4768）。投入先の `uploads` へ置くと、投入のやり直しで消える。 🚨 **同じ押しボタンは `/event/` にもある**（移行元の写しで公開ページ 2 本を確認）。 あちらは 7 班の担当外なので、この写しはページの中に絞ってある. -------------------------------------------------------------- */ body .pa-page--visitor .page-content__body #parents .txtBtn_black01 a { background-image: url(../images/btn_arrow_m.png?ver=bfb3b03390c9); background-repeat: no-repeat; background-position: right 10px center; }