/* * はじめての方への区画で、テーマと写しがぶつかる箇所だけの調整（Bug #2316）。 * * このファイルは手で書く。写し（section.css ほか）は道具で作り直すので、 * 手で足した調整はここへ置く。 */ /* * ------------------------------------------------------------------ * 本文の器の柱を外す * ------------------------------------------------------------------ * 移行元は区画の囲みを画面の全幅へ広げ、その中で 1280px ／ 1268px の帯を中央に * 置く。テーマの本文の器は 1100px で固定されているため、写しただけでは帯が * 入りきらない。 * * その指定はここには無い。5 区画で中身が 1 文字も違わなかったため、 * `assets/css/section-fullwidth.css` の 1 本へまとめた（Task #2454）。この区画は * `inc/visitor-page-css.php` が `PA_VISITOR_PAGE_CSS_MEDIA` で その 1 本を配る。 * その定数はいま **`(min-width: 750px)`** である（Task #3197 で 1297px 以上から * 広げた。理由は同ファイルの注釈にある）。 */ /* * ================================================================== * 区画に閉じた、移行元のサイト共通 CSS の写し（Bug #2316） * ================================================================== * 大見出しと区画のメニューは、移行元では幅 1268px の帯として中央に置かれる。 * この 2 つの規則は移行元のサイト共通 CSS にあり、ページ専用 CSS の側には無い。 * 写し元では `#contents` で絞っているが、移し先にその器は無いので、区画の目印で * 読み替えている。 * * 🚨 **この節を「まるごと消す」ことはできない（2026-09-04 に注記を訂正した）。** * * 以前ここには「Issue #2363 が移行元のサイト共通 CSS の残りをテーマの共通側へ写した * ときに、まるごと消すこと」と書いてあった。**#2363 は 2026-08-28 に完了しているが、 * この節の 2 つはその範囲に入っていない。**指示のまま消すと、はじめての方への * 題名の帯と区画のメニューが崩れる。 * * #2363 の本文が明記している範囲（司令塔の裁定・2026-08-28 の 7 項目）: * * `#contents .main_ttl02` … 写した（`main.css` の `:is(…) .main_ttl02`） * `#contents .category_menu02` … 写した（**文字で組む新しい方**のメニュー） * `#contents .main_ttl` … **対象外**。「既に `.pa-company-band .main_ttl` として * テンプレート側へ写してある（Bug #1817）ため」と書かれて * いるが、あれは会社情報の帯で、**この区画には当たらない** * `#contents .category_menu`（絵で組む古い方）… **#2363 の 7 項目に無い** * * 🚨 **共通側へ移さないと決めた（Task #3328・2026-09-09 にクローズ）。この節は消さずに残す。** * * 【なぜ移さないか】**移行元では共通の値でも、移行先では区画ごとに別の値になっている。** * 2 本それぞれの事情は次のとおりである。 * * `.main_ttl` … **移行元は共通の値である。**サイト共通 `public/css/style.css` の * 1311〜1315 行が `#contents .main_ttl { margin: 0 auto; width: 1268px; height: 170px }` * で、区画別 CSS の生きた上書きは `public/css/page_branch.css` の 1 本だけ・値が * 完全に同じである（`page_guide.css` と `page_company.css` の上書きは * **注釈で囲まれていて無効**である）。**ところがテーマ側は、この当たり先へ値を当てる規則を共通側に * 1 本も持たず、区画ごとに別の値で実装している。** * * `css/main.css` の `.single-content--story .entry-content .main_ttl` * … `width: min(1268px, 100%)` / **`height` を宣言しない** / `margin-inline: auto` * 同 `.single-content--recruit .entry-content .main_ttl` * … `width: 1268px` / `height: 170px` / `margin-inline: calc((100% - 1268px) / 2)` * 同 `.pa-page--guide .page-content__body .main_ttl` * … **`width` を宣言しない** / `height: 170px` * この節（はじめての方へ）… `width: 1268px` / `height: 170px` / `margin: 0 auto` * * **共通側へ足すと、その区画が宣言していない項目だけが新しく当たる。**成婚ストーリーは * 高さが 170px に固定され（幅は `min()` で縮むので歪む・100 ページ）、入会案内は幅が * 新しく当たる。**#3328 の受入基準「ほかの区画で変わらないことを示す」は満たせない。** * * `.category_menu` … **共通側に既定が在り、入会案内がページ単位で上書きしている。** * サイト共通 `public/css/style.css` の 1323〜1329 行（注釈 `old menu class`）が * `#contents .category_menu { background: …bg_category_menu.gif; margin: 0 auto; * padding: 1px 0 0 82px; width: 1186px; height: 49px }` を持ち、`style.css` は * `import.css` 経由で全ページが読む。**つまり 1186px は共通の既定である。** * `public/css/page_company.css` 43〜48 行は**その既定と同じ値を書き直しただけ**で、 * `public/css/page_guide.css` 43〜53 行が **1268px・背景なし・`padding-left: 300px`・ * `top: -55px` へ上書きしている**（`style.css` より後に読まれ、当たり先の重みが * 同じ (0,1,1) なので勝つ）。**だから 1 つの共通値には寄せられない。** * 判断の記録は Task #4993 に置いた。 * * 🚨 **移行元は区画メニューを 2 世代持つ。**共通の `style.css` が注釈で分けている * （1323〜1342 行が `old menu class` = `.category_menu`、1343〜1379 行が * `new menu class` = `.category_menu02`）。**共通化するなら、どちらの世代に寄せるかを * 先に決める必要がある。** * * 🚨 **共通化の可否は「共通側に定義が在るか」では決まらない。**「**共通側の既定を、 * どのページがどう上書きしているか**」で決まる（この節を書いたとき、7 班は最初 * 「入会案内は `page_company.css` を読まないから移せない」と書いた。**それは理由に * なっていない。**8 班が共通側の既定を見つけて訂正した・2026-09-09）。 * * 【強さを下げると余白が別の規則に取られる】移す先を * `:is(.entry-content, .page-content__body) .main_ttl`（**(0,2,0)**）にすると、**絵だけの * 見出しを飾りから外す規則**（`css/main.css` の * `.page-content__body :is(h2〜h6):has(> :is(img, picture):only-child)`・**(0,2,2)**・ * `margin: 0 0 var(--pa-article-paragraph-gap)`）に `margin` を取られる。この節の * **(0,3,1)** が勝っているおかげで、いまは `margin: 0 auto`（中央そろえ・下の外余白 0）が * 効いている。**題名の帯は中身が画像 1 枚なので、その規則に当たる。** * * 【この課題は消えていない】**移行先を移行元と同じ構造（共通の 1 本）へ組み直すことは * できる。それは #3328 の範囲を超えるので、共通化設計のリファクタリング * （Epic #4979）で扱う。**申し送りは Feature #4984（型紙の共通化）へ書いた。 * * 🚨 **したがって「共通側へ移せたら消す」という読み方はしないこと。**移さない判断が * 済んでいる（取り決め 21: 注釈が指す Issue は state と実際に直した範囲を確かめる）。 */ body .pa-page--visitor .page-content__body .main_ttl { margin: 0 auto; width: 1268px; height: 170px; } /* * 文字で組む新しい方の題名（`.main_ttl02`）は、高さを内容なりへ戻す（Bug #3007）。 * * 【移行元】`public/css/style.css` は同じ帯を 2 段で組む。1311〜1315 行が * `#contents .main_ttl { margin: 0 auto; width: 1268px; height: 170px }`、 * **1317〜1320 行が `#contents .main_ttl02 { padding: 30px 0; height: auto; * line-height: 1 }`** である。`/visitor/parents/` の題名は * `

` なので、移行元では 2 本目が高さを内容なりへ * 戻し、内余白 30px を上下に持つ。 * * 【テーマの写しが詳細度で負けている】テーマはこの 2 本目を `main.css` の * `:is(.entry-content, .page-content__body) .main_ttl02` へ写してあるが、それは * **(0,2,0)** しかない。すぐ上の `.main_ttl`（この bridge.css の (0,3,1)）が勝ち、 * 高さ 170px を押し通していた。 * * 🚨 **行番号でなく選択子で指している。**この PR は同じ `main.css` の手前へ 27 行 * 足しており、行番号で書くと自分の変更でずれる（レビューで実際に指摘された）。 * * 【内余白も戻す】この題名は `

` で * 中身が画像 1 枚だけ（移行元 `public/visitor/parents/index.html` の 66 行）なので、 * `main.css` の 21064〜21070 行 * （`.page-content__body :is(h2, h3, h4, h5, h6):has(> img:only-child)`・ * **(0,2,2)**）に当たる。そこが `padding: 0` を置くため、写しの (0,2,0) では 30px が * 届かない。ここで高さと一緒に戻す。 * * 【実測（幅 1440px・移行元は本番を 2026-09-04 に実ブラウザで採取）】 * **この差は `/visitor/parents/` だけに出る。**ほかの 2 ページの題名は * `main_ttl02` を持たないので、両側 170px で一致している。 * * /visitor/parents/ h2.main_ttl.main_ttl02 移行元 1268×96px → dev 1268×170px * /visitor/questions/ h2.main_ttl 移行元 1268×170px → dev 同じ * /visitor/ h2.main_ttl 移行元 1268×170px → dev 同じ * * 【強さ】`body`（要素 1）＋ クラス 3（`.pa-page--visitor` / * `.page-content__body` / `.main_ttl02`）で **(0,3,1)** である。 * * 相手は 2 つあり、勝ち方が違う。 * * 画像だけの見出しの規則（`main.css` 21064〜21070 行・(0,2,2)）… クラスが 3 個 対 * 2 個なので**強さで勝つ** * すぐ上の `.main_ttl`（この同じファイル・**同じ (0,3,1)**）… 強さは並ぶので * **あとに読むことで勝つ** * * 🚨 **2 本目は強さで勝っていない。この規則を `.main_ttl` より前へ動かすと、高さ * 170px が復活して黙って効かなくなる。**並び替えるときは実測で確かめること。 * * 【前例】サービス紹介が同じ形の写しを持つ（`assets/service/css/article-reset.css` * の 539 行。Issue #2678）。あちらは bridge.css を持たず `.main_ttl` と競らないため、 * (0,3,0) で足りている. * * 【字の大きさも書く理由 — 残っていた 1px の正体】高さと内余白だけを戻すと * **96px にならず 97px になる**（2026-09-04 に dev の実ページへ手元の CSS を * 差し替えて実測した）。原因は行の高さである。中身の画像は指定を持たず行の中に * 置かれる（`inline`）ので、**この帯の高さは受け継いだ字の大きさで決まる**。 * * 移行元 字 13px / 行送り 13px → 中身の高さ 36px（画像 34px + 行の余り 2px） * 直す前 字 28px / 行送り 28px → 高さが 170px で固定されていた * 高さだけ戻すと 字 28px / 行送り 28px → 中身の高さ 37px（行の余りが 1px 増える） * * 移行元の 13px は、本文の器 `#contents` の `font-size: 13px` を受け継いだ値である * （移行元の見出しは共通 CSS の 95〜98 行で `font-size: 100%` = 受け継ぎへ戻される）。 * * **ここで `inherit` と書いても合わない。**dev の本文の器は 16px を渡すためである。 * この区画は器の基準を 13px へ落とさない方針で、その理由は * `assets/visitor/css/article-reset.css` の見出しの打ち消しの節に書いてある * （器を 13px にすると `dl { margin: 1em }` の実体が縮み、移行元と一致している * 「3 つの要点の枠の四方 16px」が壊れる）。**器は動かさず、この帯だけに解決後の値を * 直接書く。** * * 中身は画像 1 枚だけなので、この指定が見える文字を変えることはない。行の高さを * 移行元とそろえるためだけの指定である. * * 【行送りも書く理由】移行元の宣言は `padding` / `height` / **`line-height: 1`** の * 3 つで、3 つ目はテーマの `main.css` 側の写しから来ている。それでも同じ値になるので * 描画は変わらないが、**その写しは「Issue #2363 のときにまるごと消すこと」と書かれた * 暫定の節の中に置かれている**。節ごと消されると、`main.css` の画像 1 枚だけの見出しの * 規則（(0,2,2)）が `padding: 0` を通してしまい、上で戻した内余白 30px が黙って消える。 * **移行元の 3 宣言をここに揃えて、その依存を断つ**（レビューの指摘）。 */ body .pa-page--visitor .page-content__body .main_ttl02 { padding: 30px 0; height: auto; font-size: 13px; line-height: 1; } /* * 節の題名（`.sectionTitle01`）の飾りを、移行元から写す（Bug #3008）。 * * 【移行元】`/visitor/` 配下 6 ページは、ページ本体の CSS のほかに会社情報の CSS * （`public/css/page_company.css`）を読み込む（記録版 19f499fe3 の HTML 6 本 * すべてで確認した。6 本目は `public/visitor/method/index0613.html`）。その * 27〜40 行が節の題名を組む。 * * #contents .sectionTitle01 { margin-bottom: 100px; text-align: center; * color: #aa8546 } * #contents .sectionTitle01 span { display: inline-block; padding-bottom: 8px; * border-bottom: 4px solid #aa8546; * font-size: 24px; font-weight: bold; * line-height: 1 } * * 【この写しが無い】写しはページ本体の CSS だけを対象に生成するため、会社情報の * CSS は対象外である。実際に `grep -c sectionTitle01` が * `assets/visitor/css/` の写し 5 本（section / parents / questions / method / * experienced）すべてで 0 だった。 * * 【下線は見出しではなく中の `span` が持つ】移行元の本文は * `

親御さまへ

` である * （`public/visitor/parents/index.html` の 69 行。この飾りを使うのは * `/visitor/parents/` の 1 か所だけ）。下線は `span` の側へ書く。 * * 【`margin-bottom: 100px` をここに書かない理由】`assets/visitor/css/ * article-reset.css` の 251〜253 行が既に戻している（Bug #3008 の前に外余白だけを * 先に直したもの）。同じ値を 2 か所に書かない。 * * 【テーマの h3 の飾りを打ち消す】`main.css` の 21037〜21042 行が * `.entry-content h3, .page-content__body h3` へ左の縦棒 * （`border-left: 4px solid var(--pa-color-accent)`）・左の内余白 12px・ * `var(--pa-color-heading)` の金・`var(--pa-article-h3-size)` を当てている。 * 移行元の見出しはこの 4 つを持たないので打ち消す。字間は同 main.css の見出し共通の * 規則（`:is(.entry-content, .page-content__body) :is(h1, h2, h3, h4, h5, h6)`）が * `letter-spacing: 0.05em` を当てるので `normal` へ戻す。 * * 【実測（幅 1440px・`/visitor/parents/` の `h3.sectionTitle01` とその `span`）】 * * h3 字の大きさ 移行元 16px（親の `#parents` から受け継ぐ） → dev 22px * h3 行送り 移行元 32px（同じく受け継ぐ） → dev 33px * h3 字間 移行元 normal → dev 1.1px * h3 色 移行元 rgb(170, 133, 70) → dev rgb(163, 118, 43) * h3 左の罫線 移行元 無し → dev 4px 実線 rgb(163, 118, 43) * h3 左の内余白 移行元 0 → dev 12px * span 組み方 移行元 inline-block → dev inline * span 外形 移行元 120×36px → dev 115.5×22px * span 字の大きさ 移行元 24px → dev 22px * span 下の罫線 移行元 4px 実線 rgb(170, 133, 70) → dev 無し * span 下の内余白 移行元 8px → dev 0 * * 見え方の差は「移行元は文字の幅ぴったりの金色の下線／dev は下線が無く、行の左端に * 金色の縦棒が立つ」である（両側の要素だけを撮った画像で確かめた）。 * * 【`font-size: inherit` と書く理由】移行元のサイト共通 CSS * （`public/css/common.css` の 95〜98 行）が見出しを `font-size: 100%` へ戻して * おり、`100%` は `inherit` と同じ意味である。直値で 16px と書くと、別の字の * 大きさの器に置かれたときに移行元と食い違う。行送りも同じ理由で `inherit` に * する（dev の写しは `#parents { font-size: 16px; line-height: 200% }` を持つので * 移行元の 16px / 32px と一致する）。 * * 【強さ】`body`（要素 1）＋ クラス 3 で **(0,3,1)** である（`span` を足した 2 本目は * (0,3,2)）。テーマの h3 の規則 (0,1,1) に強さで勝つ。この区画の写しは前置きが * 同じなので同じ (0,3,1) から始まるが、上に書いたとおり**写しの側は * `.sectionTitle01` に何も書いていない**ので、奪う値は無い。 * * 【サービス紹介との違い】あちらは同じ写しを * `assets/service/css/article-reset.css` の 502〜516 行に持つ（Issue #2678）。 * 打ち消しの節（同 447〜455 行）が見出しの罫線・内余白・色・字の大きさ・行送り・ * 字間をまとめて戻しているため、写しの側に打ち消しを書いていない。**この区画の * 打ち消し（`article-reset.css` の見出しの節）は外余白だけ**なので、ここで 4 つを * 個別に打ち消す必要がある. */ body .pa-page--visitor .page-content__body .sectionTitle01 { padding-left: 0; border-left: 0; color: #aa8546; font-size: inherit; line-height: inherit; letter-spacing: normal; text-align: center; } body .pa-page--visitor .page-content__body .sectionTitle01 span { display: inline-block; padding-bottom: 8px; border-bottom: 4px solid #aa8546; font-size: 24px; font-weight: bold; line-height: 1; } /* * 「ご予約フォームへ」の字の大きさを、移行元と同じ 28px へ戻す（Bug #3028）。 * * 【実測（幅 1440px・移行元は本番を 2026-09-04 に実ブラウザで採取）】 * 字の大きさ 移行元 28px → dev 20px。ボタンの外形 移行元 331×62px → * dev 265×62px。高さ・地色・文字色・内余白・行送り・太さは一致する。 * * 【🚨 Issue #3028 の前提は原因を読み違えている】Issue は「テーマの注釈が根拠に * する写しの値 20px と、稼働中の移行元の実測 28px が食い違う」としているが、 * **移行元のクラスの値も 20px が正しい**（`public/css/style.css` の 143〜156 行 * `.txtBtn_black01 a { … font-size: 20px }`）。28px は**そのページの `a` に * 書かれた直の指定**である。 * *
ご予約フォームへ
* * （記録版 19f499fe3 の `public/visitor/parents/index.html` の 91 行） * * 【投入が直の指定を落としている】dev の HTML は * `` で `style` を持たない（2026-09-04 に dev の * HTML を取得して確認した）。CSS で補う。 * * 【範囲の全数確認】移行元のパソコン版で `.txtBtn_black01` を使う HTML は 3 本 * だけで、直の指定を持つのは `/visitor/parents/` の 1 本のみである * （`public/event/-index.html` は先頭に `-` が付く控えで、配られていない）。 * * visitor/parents/index.html 直の指定 28px * contents/include/cv.shtml 指定なし（クラスの 20px） * event/index.html 指定なし（クラスの 20px） * * したがって**共通の規則を 28px にしてはいけない**（残り 2 ページを移行元から * 遠ざける）。`#parents01` で絞る。 * * 【`#parents01` を鍵にする理由】このボタンは移行元でも dev でも * `
` の中にあり（移行元は同 HTML の 83〜102 行）、この * 目印は `/visitor/parents/` にしか無い。固定ページの番号（`page-id-7763`）は * 環境で変わるので使わない。 * * 【強さ】`body`（要素 1）＋ クラス 2 ＋ id 1 ＋ クラス 1 ＋ `a`（要素 1）で * **(1,3,2)** である。テーマの * `:is(.entry-content, .page-content__body) :is(.txtBtn, .txtBtn_black01) a` * （(0,3,1)）に勝つ. */ body .pa-page--visitor .page-content__body #parents01 .txtBtn_black01 a { font-size: 28px; } /* * 【並べ方を回り込みへ戻す理由】（Bug #2971） * * すぐ下の `li { float: left }` は、この節が最初に書かれたときから入っている。 * ところが `assets/css/main.css` の一般の規則 * （`:is(.entry-content, .page-content__body) .category_menu`）が同じ帯に * `display: flex` を当てているため、**親が flex になって回り込みが働かない**。 * flex の子は並べ方の指定を無視されるので、書いてあっても効かないまま * 「帯の外形は移行元と完全に一致するのに、中のつまみだけが中央へ寄る」という * 見え方になっていた（幅 1440px で最初のつまみが移行元 x=168 に対し dev x=555。 * ずれは 387px）。 * * 移行元 `public/css/style.css` の 1332〜1334 行は `#contents .category_menu li` * を `float: left` で並べる。帯そのものには並べ方の指定が無いので `block` である。 * ここでは移行元と同じ組みへ戻す。すぐ下にある回り込みの清算 * （`.clearfix::after`）も、この形を前提に置かれている。 * * 【字の大きさと行送りを書く理由】移行元はこの帯を `#contents` の中に置き、 * `#contents { font-size: 13px }`（同 1296〜1301 行）を受け継ぐ。行送りの指定は * 無いので `normal` である。dev の本文の器は 16px ／ 24px を渡すため、受け継ぐ値が * 食い違う。つまみの中身は画像だが、**画像は行の中に置かれるため、つまみ（`li`）の * 高さは受け継いだ字の大きさで決まる**（移行元 55px = 画像 49px + 行の下の余り 6px）。 * 字を 16px のままにすると 6px の余りが広がって 55px に揃わない。 * * 【画像を行の中へ戻す理由】移行元はこの画像に指定を持たないので `inline` である。 * `main.css` の一般の規則は `display: block` を当てており、そのままだとリンク * （`a`）の外形が移行元の 140×13px に対し 140×49px になる。押せる範囲が移行元より * 広がるので、行の中へ戻す。 * * 【Bug #2866 との重なり】会員紹介の担当が、`main.css` の一般の規則へ * `@media (min-width: 1285px)` の節を足し、`justify-content: flex-start` と * `gap: 0` で「左から詰める」見え方を作る直しを進めている。この区画では下の * `display: block` が勝つため、その 2 つの指定はこの 3 画面では働かなくなる * （他の画面では働く）。つまみの高さ・リンクの外形・字の大きさは * `flex` のままでは移行元に揃わないため、ここは回り込みへ戻す形を採る。 */ body .pa-page--visitor .page-content__body .category_menu { box-sizing: content-box; display: block; background: url(../images/bg_category_menu.gif?ver=a1247559d2f8) repeat-x; margin: 0 auto; padding: 1px 0 0 82px; width: 1186px; height: 49px; font-size: 13px; line-height: normal; } body .pa-page--visitor .page-content__body .category_menu li { float: left; } body .pa-page--visitor .page-content__body .category_menu img { display: inline; vertical-align: baseline; } body .pa-page--visitor .page-content__body .category_menu li a:hover img { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; } /* * Q&A の目次を、移行元と同じ「横に流す」並びへ戻す（Bug #2990）。 * * 移行元 `visitor/questions/css/style.css` の 54〜66 行は、器へ `text-align: center` * と `letter-spacing: -.40em` を置き、項目を `display: inline-block` で横に流して * `letter-spacing: normal` で字間を戻す。字間を負にするのは、項目の間に空く空白 * 文字ぶんの隙間を消すための古い手法である。 * * **この写しは `assets/visitor/css/questions.css` に 1 文字も違わず入っている。** * それでも並びが移行元と違うのは、`assets/css/main.css` の一般の規則 * （`:is(.entry-content, .page-content__body) .list_archives`）が器へ * `display: flex` を当てているためである。**器が flex になると、中の * `inline-block` は `block` へ読み替えられる**（flex の子は組み方を変換される）。 * その結果、幅 1,100px の器に 3 枚（302 + 左右の外余白 28 × 2 = 358px の 3 つ分 * = 1,074px）入るはずが 2 枚で折り返し、2 行が 3 行になって器が 169px 高くなって * いた（移行元 230px 対 dev 399px）。 * * ここで器を素の組みへ戻すと、写しの `inline-block` と負の字間がそのまま働く。 * 画像を行の中へ戻すのは、つまみの帯と同じ理由である（移行元の画像は `inline` で、 * リンクの外形が移行元 302×16px に対し dev 302×83px になっていた）。 * * 【`.category_menu` と別の規則にする理由】この 2 つは幅も器も違うため、値を * 共有していない。まとめると「どちらの移行元を写したのか」が読めなくなる。 */ body .pa-page--visitor .page-content__body .list_archives { display: block; } body .pa-page--visitor .page-content__body .list_archives img { display: inline; vertical-align: baseline; } /* * 「経験豊富」の理由の箱の幅を、移行元と同じ数え方へ戻す（Issue #2772）。 * * 写しは移行元と**同じ値**を持っており、写し漏れではない。 * * .reason dl { width: 710px; padding: 25px 32px; } * * 違うのは箱の数え方だけである。 * * 移行元 … `content-box`（既定）。外形 = 710 + 32*2 = 774px * dev … `border-box`。 外形 = 710px * * このテーマは main.css の 416〜420 行で `box-sizing: border-box` を全体に * 当てている。移行元は必要な箇所にだけ当てており、それ以外は既定のままである。 * この違いは既知で、箇所ごとに手当てされてきた（サービス紹介の * `article-reset.css` に同じ箱の手当てがある）。この要素はその手当てが * 漏れていた。 * * 【外形の値を書き直さない理由】`width: 774px` と書いても同じ外形になるが、 * 移行元と見比べたときに「なぜ違う数字なのか」が読み取れなくなる。箱の数え方を * 戻せば、写しの値をそのまま移行元と突き合わせられる。 * * 実測（幅 1440px・2026-09-02）: 幅 移行元 774px → dev 710px。高さも * 移行元 202px / dev 216px と違っていたが、折り返しの差なので幅を直すと * 連動して近づく。 */ :where(.pa-page--visitor) .page-content__body .reason dl { box-sizing: content-box; } /* * 回り込みの清算。移行元 `css/common.css` の 328 行目。区画のメニューを * 回り込みで並べるため、清算が無いと囲む器が潰れる。 */ body .pa-page--visitor .page-content__body .clearfix { zoom: 1; } body .pa-page--visitor .page-content__body .clearfix::after { display: block; clear: both; height: 0; visibility: hidden; line-height: 0; content: "."; } /* * ------------------------------------------------------------------ * 本文の器の下限を移行元にそろえる（Bug #3884） * ------------------------------------------------------------------ * ## 何を直すのか * * **移行元はどのパソコン幅でも本文の器を 1,100px 未満に縮めない。**dev は画面幅まで * 縮むため、幅 750〜1279px で**本文の柱が左へ寄る**。柱そのものの寸法は両側とも * 同じで、変わるのは位置だけである。 * * ## 移行元の指定（記録版 1fbfa9dda の public/css/page_top.css の 11〜15 行） * * #contents { margin: 0 auto; width: 100%; min-width: 1100px; } * * この写しは `/visitor/` の 6 ページすべてが読む（各ページの `` で確認）。 * * ## dev 側にこれが無い理由 * * テーマの柱は `assets/css/section-fullwidth.css` が外している。 * * body:is(…, .pa-page--visitor) .page-content__body { * max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); * } * * `width: 100vw` なので画面幅にぴったり付き従う。**移行元の `min-width` に当たる * ものが無い**ので、狭い幅で器ごと縮む。 * * ## 実測（両側を同じ手順で測定・2026-09-05 19:3x〜19:4x・成婚率へのこだわりの例） * * 幅 1440px 器 1,440 対 1,440 柱の左余白 一致 ずれ 0 * 幅 1280px 器 1,100 対 1,100 柱の左余白 100 対 100 ずれ 0 * 幅 1050px 器 1,100 対 1,050 柱の左余白 100 対 75 ずれ 25px * 幅 750px 器 1,100 対 750 柱の左余白 100 対 0 ずれ 100px * * 中身の器（h3.title・p.cach・div.ph・aside_area・box_gray p・div.btn）は * **750px でもすべて差なし**である。 * * 🚨 **新しいあふれは生まれない。**両側ともすでに同じだけ横にあふれている * （幅 750px で移行元 1,280 / dev 1,268〜1,280）。足すのは**下限**であって、 * あふれを**防ぐ**指定ではない。`inc/visitor-page-css.php` の注記にある * 2026-09-03 の裁定「移行元はどのパソコン幅でも同じ姿を出し、画面が狭ければ横に * 送らせるだけ」の趣旨へそろえる直しである。 * * 🚨 **携帯幅には掛からない。**この写しは `inc/visitor-page-css.php` が * `PA_VISITOR_PAGE_CSS_MEDIA`（`(min-width: 750px)`）で配るので、749px 以下では * 1 行も読まれない。CSS の側に `@media` を書く必要は無い（書くと二重になる）。 */ body .pa-page--visitor .page-content__body { min-width: 1100px; } /* * 幅 750〜1,279px で、柱からはみ出す部品を柱の中へ収める（Task #4067・裁定 223）。 * * ## なぜ変えるか * * ユーザーの判断（2026-09-06）である。 * * 「これはどこまで横幅をレスポンシブ対応範囲とするか、という話だと思います。 * 移行元は 1280px までとかなり対応範囲が狭いので、今回は 1280px を本サイトの * 基本対応幅としつつ一般的な Web サイトのレスポンシブにおける対応範囲で * 検討するのがよいのではないでしょうか？」 * * これを受けた対応幅の区分は次のとおりである（意図的変更の台帳 85 行）。 * * 375px（携帯幅） 移行元スマホ版に合わせる * 750〜1,279px 移行元の横スクロールを写さず、画面幅に収める * 1,280px 以上 移行元と同じ固定の姿を保つ（基本対応幅） * * 🚨 **この節は 2026-09-03 の裁定（移行元はどのパソコン幅でも同じ姿を出し、画面が * 狭ければ横に送らせるだけ）を、750〜1,279px の範囲でだけ上書きする。**すぐ上の * 器の下限 1,100px は、その裁定に沿って Bug #3884 で足したものである。**下限は * 残す**（理由は下の「器の下限を外さない理由」）。 * * ## 何を収めるか（dev の実ページで数えた・2026-09-06） * * 柱（1,100px）より広い部品を、6 画面 × 3 幅で全部数えた。**3 部品だけを決め打ち * せずに数えた**ところ、次の 3 つが 5 画面に共通して出た。 * * h2.main_ttl 1,268 × 170px width: 1268px * その中の img 1,268 × 169.7px 実寸の属性 1268×170 * ul.category_menu 1,268 × 50px width: 1186px + 左の内余白 82px * * `/visitor/parents/` は題名だけ（`main_ttl02` で高さ 96px）、メニューを持たない。 * * 🚨 **`/visitor/method/` にはこれとは別に幅 1,280px の部品が 3 つある** * （`div.box_gray` / `p.serif` / `div.btn`）。**この節では収まらない**ので別 Issue * で扱う。あの画面だけ広がりが 1,280px のまま残るのはそのためである。 * * ## 器の下限を外さない理由（実測で決めた） * * 「750〜1,279px で器の下限 1,100px も外す」案を実ページで試したところ、**器が * 750px まで縮んだ結果、中身の固定幅の部品が 21〜27 件あふれた**（入口 25・親御さま * 26・他社経験 27）。中身は移行元の固定幅の組みをそのまま写しているので、器だけを * 縮めても収まらない。**器の下限は中身を守る支えでもある。** * * しかも**ページの広がりは下限を外しても 1,200px のまま**である（共通ヘッダーの * `.site-header__top` が下限 1,200px を持つため）。**外す得が無く、あふれだけが * 増える。** * * ## 実測（幅 750px・柱より広い部品の数） * * 画面 直す前 この節を足した後 * 入口 3 0 * 親御さま 1 0 * よくある質問 3 0 * 他社経験 3 0 * 0613 3 0 * 方法 6 3 ← 残る 3 つは上に書いた別 Issue の分 * * ページの広がりは 1,268 → 1,200px になる（残りは共通ヘッダーの床）。 * * 🚨 **1,280px 以上は 1px も変えない。**Bug #3979 / PR #4001（8 班）が移行元に * そろえた姿をそのまま保つ。実測で 1,280 / 1,440px は直す前と完全に同じだった。 * * 🚨 **携帯幅にも掛からない。**このファイルは `inc/visitor-page-css.php` が * `(min-width: 750px)` で配るので 749px 以下では読まれないが、**読み手が範囲を * 取り違えないよう `min-width: 750px` を明示して書く**。 * * ## 書き方 * * `min(1268px, 100%)` は、器が 1,268px より広いときは移行元と同じ 1,268px を保ち、 * 狭いときだけ器に合わせる。**幅の境目をもう 1 つ増やさずに 2 通りの姿を出せる。** * * メニューは素の指定が `content-box` ＋ `width: 1186px` ＋ 内余白 82px で外形 * 1,268px なので、**中身の幅の側へ `min(1186px, 100% - 82px)` と書く**。外形は * 見出しの帯と同じ `min(1268px, 100%)` になる。**`box-sizing` は触らない** * （理由は下の注記）。 * * ## 高さは 1,280px 以上と食い違わせない（実測で 2 度直した） * * この直しは幅を変えるものだが、**書き方を誤ると高さが道連れで動く**。実測で * 見つけて直した 2 件を、下の注記に理由つきで残してある。 * * 見出しの帯 絵を段にしないと器が「絵 ＋ 10px」になる（1,279px で 179.72px） * 画面内ナビ `border-box` にすると上の内余白 1px を取り込み 50 → 49px * * 直した後の実測（6 画面 × 6 幅・配信中の写しの中身を差し替えて採取）: * * 幅 見出しの帯 画面内ナビ * 750 / 1050 1100 × 147.23 1100 × 50 * 1279 1268 × 169.72 1268 × 50 * 1280 / 1440 1268 × 170 1268 × 50 ← 直す前と 1 項目も変わらない */ @media (min-width: 750px) and (max-width: 1279px) { body .pa-page--visitor .page-content__body .main_ttl { width: min(1268px, 100%); /* 素の指定は高さ 170px の決め打ち。幅が縮むと絵だけが縮んで器に隙間が できるので、高さは中身なりへ戻す. */ height: auto; } /* * 絵は幅を書かない。`/visitor/parents/` の題名の絵は 201×34px と小さく、 * 幅を 100% にすると引き伸ばしてしまう。素の `max-width: 100%` に任せ、 * 高さだけ中身なりへ戻して縦横比を保つ。 * * 🚨 **絵を段の扱いにするのは、行の下の余り 10px を消すためである。**行の中の * 絵は下に書体の下端ぶんの余りを持つので、器の高さを中身なりへ戻すと * 「絵の高さ ＋ 10px」になり、**絵の下に 10px の空きが残る**（実測: 幅 750px で * 器 157.23 対 絵 147.23）。段にすると器の高さが絵の高さと一致する。 * * 🚨 **`.main_ttl02` は除く。**あちらは移行元 `#contents .main_ttl02` * （`padding: 30px 0; height: auto; line-height: 1`）で組む文字の題名で、絵は * 201×34px の飾りにすぎない。段にすると器が 96 → 94px と 2px 縮み、1,280px 以上 * （96px）と食い違う。**この除外は実測で決めた**（6 画面 × 6 幅）. */ body .pa-page--visitor .page-content__body .main_ttl:not(.main_ttl02) img { display: block; height: auto; } /* * 🚨 **`box-sizing` は触らない。**素の指定は `content-box` ＋ `width: 1186px` * ＋ 内余白 `1px 0 0 82px` で、外形が 1,268 × 50px になる。`border-box` へ変えると * **上の内余白 1px が高さ 49px に取り込まれ、器が 50 → 49px と 1px 縮む** * （実測）。中身の幅の側で書けば、外形は `min(1268px, 100%)` と同じになり、 * 高さは 50px のまま動かない. */ body .pa-page--visitor .page-content__body .category_menu { width: min(1186px, 100% - 82px); } } /* -------------------------------------------------------------- # 親御さまへのあいさつの見出しを、絵からテキストで組む（Task #5394） 移行元パソコン版は 1 枚の絵（`visitor/parents/images/copy.gif` 539x35）で出している。 全体原則（焼き込まれた文言はテキストで置く）に当てはめ、`inc/visitor-parents-copy-text.php` が本文の中身をテキストへ替える。**絵は白地に金の明朝が 1 行だけなので、背景の絵は要らない。** ## 値の出どころ（絵を画素で測った・2026-09-10） 色 `#a3762b` 不透明な 18,865 点のうち 1,476 点。縁は中間色。透過は 0 点 墨の広がり 横 535px 絵の中の 2〜536 列 墨の高さ 28px 絵の中の 4〜31 行 字の組み方 プロポーショナル 字の大きさ 32px ヒラギノ明朝 ProN W3 のとき墨の幅が 535.3px（絵は 535px） 🚨 **全角の送りでは合わない。**送り幅を積み上げて墨の出だしを突き合わせると、全角では 29px でずれ最大 10.0px・30px 以上で 23.9px 以上になる。`palt`（プロポーショナル）の 32px でずれ最大 7.7px・墨の幅の差 0.3px まで寄る。先例も同じ道具を使っている （`sp.css` の入口の題名の「（婚活未経験）」）。 🚨 **実際に描かれるのは並びの 4 番目 `Hiragino Mincho ProN` である**（ブラウザで実測・ 2026-09-10）。`--pa-font-family-serif` の並びのうち **1〜3 番目は 1 つも当たらない** （游明朝・`YuMincho`・`ヒラギノ明朝 ProN W3` の 3 つとも、等幅を控えに置いた送り幅が 等幅だけのときと同じ 608px になった）。`sp.css` の注釈が言う「2 番目の `YuMincho`」では ない。**`document.fonts.check()` では判らない**（6 つ全部 true を返した）。 🚨 **字送り 0.33px は実測で詰めた値である。**素の `normal` では墨の幅が 529px で、 絵の 535px より **6px（1.1%）縮む**。19 字なので 1 字あたり 6/18 = 0.33px を足すと 535px に合う。墨の塊は素の状態でも**絵と同じ 20 個**で、出だしのずれが端へ向かって 一方向に伸びていた（0 → −7px）。**形は合っていて縮尺だけがずれている**ので、字送りで 直せる。 🚨 **墨の高さは 28 → 30px と 2px 余る。**`Hiragino Mincho ProN` は絵の書体より字面が 大きい。幅を合わせるとこの 2px は残る。書体が違えば避けられない差である。 ## 🚨 見出しの外寸 45px を明示して持たせる 絵のときの `.message > h4` は **45px** で、移行元と一致していた（`parents.css` の 実測の注釈）。**45px は「絵 35px ＋ 行の基準線の下の空き」で決まっていた値**なので、 絵をテキストへ替えると行の組み方が変わって崩れる。段の扱いにして高さを 45px と書き、 器の高さを絵のときと同じに保つ。 🚨 **行送りは器の高さと同じ値にしない。**45px にすると字が箱の中央に来るので、 **墨が移行元より 4px 下がる**（実測: 移行元の墨は箱の上から 4〜31 行、行送り 45px の ときは 7〜36 行）。行送りを 8px 縮めると行の箱の中心が 4px 上がり、墨の位置が 移行元とそろう。**器の高さは 45px のまま動かない**（高さを直に書いてあるため）。 ## この節はパソコン幅にしか届かない（二重の歯止め） 1. この写し（`bridge.css`）は `inc/visitor-page-css.php` が `PA_VISITOR_PAGE_CSS_MEDIA`（**750px 以上**）で配る 2. 携帯幅では `sp.css` の第 23 節が**見出しごと隠す**（移行元スマホ版にこの見出しが 無い。裁定 372） 🚨 **携帯幅で文字が出ないことを陰性対照で見る**（Bug #5378 と同じ型の抜けを防ぐ）。 見張りは `tests-retired/pa-cms-visitor-parents-copy-text/`. -------------------------------------------------------------- */ body .pa-page--visitor .page-content__body #parents > .message > h4 .pa-parents-copy-text { display: block; height: 45px; color: #a3762b; font-family: var(--pa-font-family-serif); font-size: 32px; font-weight: normal; letter-spacing: 0.33px; line-height: 37px; font-feature-settings: "palt" 1; white-space: nowrap; } /* * ------------------------------------------------------------------ * サービスの案内と入会資格の器の字（Bug #10102） * ------------------------------------------------------------------ * 移行元はこの 3 つの器（`div.concept_list`・`section.sections.sec04`・その中の * `div.sec_inner.shikaku_area`）に字の指定を持たず、サイト共通の `body { font-size: 13px }` * （`css/common.css` の 28〜29 行）と既定の行送り `normal` を受け継ぐ。dev はテーマの本文の * 16px / 24px を受け継いでいた（2026-10-10 01:43 の実測・幅 1440・ * `pa-verify-assets/A2/W57-はじめての方への器の字の大きさ-1010/読み1/`）. * * 器が直の親になっている見える字は、両側とも 0 である。中の字は子の要素（見出し 30px・ * 本文 18px ほか）が自分の値を持つ。そのため、この直しで見た目は変わらない. * * 当て先は 2 つの器だけ。`shikaku_area` は `sec04` の中にあり、自分の値を持たないので受け継ぐ。 * 移行元でこの 2 つの類名を持つのは、はじめての方へのトップ（`visitor/index.html`）だけである. */ body .pa-page--visitor .page-content__body :is(.concept_list, .sections.sec04) { font-size: 13px; line-height: normal; }