/* * 成婚コンシェルジュの区画で、テーマと写しがぶつかる箇所だけの調整（Issue #2395）。 * * このファイルは手で書く。写し（style.css）は道具で作り直すので、手で足した * 調整はここへ置く。 * * ------------------------------------------------------------------ * ここに置いた指定が写しへ勝たない理由（強さの数え方） * ------------------------------------------------------------------ * 写しはすべてのセレクタの先頭に `body .pa-page--concierge .page-content__body` * （タグ 1 ＋ クラス 2）を持ち、そのうしろに必ず 1 つ以上のクラスが続く。 * つまり写しの規則は**クラス 3 つ以上**である。 * * 下の初期化はタグだけを指す（クラス 2 ＋ タグ 1）ので、**写しの値を消さない。** * テーマ本体の指定（`.page-content__body :is(ul, ol)` などクラス 1 ＋ タグ 1） * より強いので、そちらだけを上書きする。 */ /* * ================================================================== * 本文の器の柱を外す * ================================================================== * 移行元の成婚コンシェルジュは、`#contents` を画面の全幅（`width: 100%`・ * `css/page_company.css` の 9〜12 行目）に置き、その中の `.page-concierge` に * `min-width: 1280px` を当てている。**大見出しの下地（`.mainvisual` の * #F4F1EC）と区画メニューの帯（`.navigation-list` の #A3762B）は、この全幅に * 広がる。**帯の中身だけが 1100px で中央に置かれる。 * * **テーマの本文の器は 800px（`--pa-inner-xs`）で固定されているため、写した * だけでは 1100px の中身が入りきらず、帯も広がらない。** * * マンガ（Bug #2313）・サービス紹介（Bug #2366）・入会案内（Bug #2316）と * 同じやり方で、この区画に限って器を画面の全幅へ広げる。 */ body .pa-page--concierge .page-content__body { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); } /* * 全幅化には横のはみ出しの切り落としが必ず要る。**100vw には縦スクロールバーの * 幅も含まれるため**、スクロールバーが場所を取る環境（Windows などのクラシック * スクロールバー）では、上の器が置ける幅より約 17px 広くなり、切らないと横 * スクロールバーが出る（テーマの同じ組み合わせの注記: `assets/css/main.css` の * 10613〜10614 行「1 つでも欠けると…100vw には縦スクロールバーの幅も含まれる * ため、3 番目は必ず要る」）。 * * **移行元は全幅を `#contents { width: 100% }`（`css/page_company.css` の * 9〜12 行）で組んでおり、そもそもはみ出さない。**はみ出しは写しの全幅化の * やり方（100vw）が生んだものなので、この切り落としは移行元の見え方（横 * スクロールなし）へそろえる直しである。 * * 置き場と書き方はテーマの既存の型（`main.css` の * `body.pa-profile-legacy-compat:has(...) { overflow-x: clip }`）に揃える。 * body に置くのは、途中の祖先で切るとその要素がはみ出しの基準になって別の * 崩れを生むためで、`:has()` でこの区画を持つページだけに絞る。`hidden` では * なく `clip` なのは、スクロールの器を作らずヘッダーの貼り付き * （`position: sticky`）を保つため（これも既存の型に従う）。 */ body:has(.pa-page--concierge) { overflow-x: clip; } /* * ================================================================== * 🔴 暫定: 移行元のサイト共通 CSS の初期化の写し（Issue #2395） * ================================================================== * **この節は、移行元のサイト共通 CSS をテーマの共通側へ写す Issue #2363 が * 片付いたときに、まるごと消すこと。**区画に閉じた暫定であり、共通側が正しい * 置き場である。ご成婚報告（`assets/report/css/legacy-reset.css`）と * サービス紹介（`assets/service/css/bridge.css`）にも同じ形の暫定がある。 * * ## なぜ要るのか * * 移行元の成婚コンシェルジュは `css/import.css`（サイト共通）を読んでおり、 * **写し元のページ専用 CSS は、その初期化を前提に組まれている。**投入は本文の * HTML と `` の画像だけを取り込むため、共通の初期化は移し先に 1 バイトも * 入らない。 * * 移行元 `css/common.css` の該当箇所は 4 つである。 * * 76〜79 行 … `blockquote, dd, div, dl, dt, h1〜h6, li, ol, p, pre, span, * td, th, ul { margin: 0; padding: 0 }` * 100〜102 行 … `ol, ul { list-style: none }` * 266〜273 行 … `ol, ul { margin: 0; text-align: left }` と `dl { margin: 1em }` * 275〜281 行 … `ol li` と `ul li` に `list-style: none` * * この初期化が無いと、テーマ本体の `:is(ul, ol) { padding-left: 1.6em }` と * ブラウザ既定の行頭記号（・）が、移行元に無い字下げと点を足す。区画メニュー * （`.navigation-list ul`）・進め方の一覧（`.flow-list`）・紹介の一覧 * （`.introduction-list`）・評価の一覧（`.value-list`）・段の見出しの一覧 * （`.my-list__list`）の 5 箇所が対象である。 * * ## 🔴 段落（p）を初期化するかは、区画ごとに数えてから決める * * **写す手順の既定は「p を初期化から外す」である。**投入が本文を WordPress の * 作法で段落へ組み直す区画があり、そこでは移行元と段落の並びが別物になる。 * ご成婚報告（`/report/r20121021/`）では段落が 7 個 → 12 個へ組み直され、`br` が * 20 個 → 10 個へ減っていた。そういう区画で `p { margin: 0 }` を当てると、 * dev の本文が 1 かたまりに詰まる（`assets/report/css/legacy-reset.css` の説明）。 * * **ただし外すかどうかは、区画ごとに段落と `br` の数を両側で数えてから決める。** * 既定のまま外すと、組み直されていない区画では移行元に無い下余白が残る。 * * **この区画は組み直されていないので、p も初期化する。**実測（2026-08-27・ * 幅 1440px・dev の実機）: * * 中身のある段落 … 移行元 73 個 / dev 73 個（一致） * `br` … 移行元 74 個 / dev 74 個（一致） * 段落の総数 … 移行元 84 個 / dev 80 個（差は空の段落 4 個だけ） * * 外していたことで、段落の下余白が移行元 0px に対し dev 25px になり、切られる * 中身の量がずれていた（「続きを読む」6 箇所の合計 577px に対し 727px、タブ * 2 箇所の合計 37px に対し 87px）。p を初期化に含めると dev の 25px の段落 * 32 個が 0px になり、移行元の 0px の段落 43 個と対応する。**他の値（80px / * 24px / 48px / 4px / 10px / 70px / 15px）は写した CSS が当てているぶんで、 * 両側で一致しているため影響しない。** */ /* * 受け継ぐ文字の大きさを 13px へ戻す。移行元 `css/common.css` の 28〜30 行の * `body { font-size: 13px }` である。**写したのはページ専用の 1 本だけなので、 * この 13px が入っていない。**dev はテーマの 16px を受け継ぐ。 * * 実測（2026-08-27・幅 1440px・dev の実機）: * * .value-list__text … 移行元 13px（行の高さ 23.4px） / dev 16px（28.8px） * .my-list__list-body … 移行元 13px / dev 16px * * **切られる中身の量にも効く。**「続きを読む」を切る高さは写しの * `max-height: 4.2em` で、受け継ぐ文字の大きさを基準に決まる（13px なら * 54.6px ／ 16px なら 67.2px）。**写した CSS の中で受け継ぐ文字の大きさに * 依存するのは、この 1 件だけである**（`em` を使う宣言は 1 件しかない）。 * * **文字の大きさは器へ置けば段落まで届く。**テーマは段落へ行の高さは直接 * 当てているが（下の「段落の行の高さ」の節）、文字の大きさは当てておらず、 * `.page-content__body` 自身に置いているだけである。 */ body .pa-page--concierge .page-content__body { font-size: 13px; } body .pa-page--concierge .page-content__body :is(blockquote, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, pre, span, td, th, ul) { margin: 0; padding: 0; } /* ============================================================== * 来店・資料請求の帯（Bug #2986） * ============================================================== * 🚨 **すぐ上の初期化が、共通の帯の余白を 3 か所で 0 にしている。**帯は * `assets/css/support-band.css` が 4,849 ページぶんを写した共通の部品で、 * この画面でも配られている（配信中の `support-band.css?ver=dcb808f59f6a` に * `.box_support { padding: 75px 0 }` が在ることを確かめた）。しかし * 初期化の当たり先が `body .pa-page--concierge .page-content__body :is(… div … ul …)` * で詳細度 (0,2,2) を持ち、`.box_support`（0,1,0）に勝つ。 * * ## 打ち消されている 3 か所（実測・2026-09-09 05:5x JST・幅 1440px） * * 打ち消しの無いページ（はじめての方へ `/visitor/`）と並べて測った。 * * | 当たり先 | 打ち消しなし | この画面 | * |---|---:|---:| * | `.box_support` の上下の内余白 | **75px / 75px** | **0px / 0px** | * | `.box_support` の左の外余白 | 80px | 0px | * | `.box_support_inner` の左の外余白 | 90px | 0px | * | **`.box_menu2` の上の内余白** | **75px** | **0px** | * | `.box_menu2` の高さ | 111 | 36 | * | **帯の高さ** | **623** | **398** | * * **623 − 398 = 225px。**内訳は帯の上下 75 + 75 と、押しボタンの並びの上 75 である。 * Issue が挙げていた −225px と一致する。 * * ## 直し方（落とし穴に沿う） * * **移行元の共通 CSS は初期化の後に同じ当たり先へ置き直す。**初期化そのものを * 狭めない（`:not()` で帯を除くと初期化の詳細度が上がり、いま初期化に勝っている * ほかの規則が負けうる）。 * * 🚨 **値は 1 つずつ書き分ける。**`margin: 0` を一括で打ち消すと、初期化が意図して * 0 にしている上下の外余白まで戻ってしまう。**足りないのは下の 3 つだけである。** * * 🚨 **幅の条件も写す。**初期化は幅の条件を持たないので全幅に効く。帯の側は * 携帯幅で値が変わる（`support-band.css` の `@media (max-width: 749px)`）。 * そこを写さないと携帯幅が崩れる。 * ============================================================== */ body .pa-page--concierge .page-content__body .box_support { /* `support-band.css` の 97〜98 行と同じ値。`padding: 75px 0` のうち、 初期化が消しているのは上下だけなので `padding-block` で戻す. */ margin-inline: calc(50% - min(640px, 50vw)); padding-block: 75px; } body .pa-page--concierge .page-content__body :is(.box_support_inner, .box_support .box_menu2) { /* `support-band.css` の中身の器（1,100px を中央へ寄せる）. */ margin-inline: auto; } body .pa-page--concierge .page-content__body .box_support .box_menu2 { /* 押しボタンの並びの上の空き。`support-band.css` の 234〜236 行. */ padding-top: 75px; } @media (max-width: 749px) { body .pa-page--concierge .page-content__body :is(.box_support_inner, .box_support .box_menu2) { padding-inline: var(--pa-inner-gutter, 15px); } body .pa-page--concierge .page-content__body .box_support .box_menu2 { padding-top: 40px; } } body .pa-page--concierge .page-content__body :is(ol, ul) { list-style: none; margin: 0; text-align: left; } body .pa-page--concierge .page-content__body dl { margin: 1em; } /* * ------------------------------------------------------------------ * 🔴 初期化のあとに「先頭へ戻る」の中央寄せと内余白を取り戻す * ------------------------------------------------------------------ * **上の初期化は `div` と `p` を含むため、テーマが「先頭へ戻る」へ当てている * 中央寄せと内余白を外してしまう。**本文の末尾の「先頭へ戻る」は * `

…

` という * 作りで（移行元 `include/box_support.shtml`）、囲みが `div`・中のボタンが `p` * である。**どちらも初期化の対象に入る。** * * 実測（2026-08-27・幅 1440px・dev の実機）: 移行元は左端 x=170px（中の * ボタンの右端 1270px）、dev は x=0px（同 1100px）。器が中央ではなく左端に * 寄り、170px ずれていた。 * * 強さの差でこうなる。テーマの `:is(.entry-content, .page-content__body) * .page_topArea` と同 `.page_top` はクラス 2 つだけ（`:is()` は中の最も強いものを * 数えるのでクラス 1 つぶん）で、上の初期化はクラス 2 つ ＋ タグ 2 つである。 * **あとに読み込まれるかどうかに関係なく、初期化が勝つ。** * * 取り戻す値はテーマが移行元から写した値そのものである（`assets/css/main.css` * の 17907〜17922 行）。囲みは `margin: 0 auto`、中のボタンは * `padding: 40px 0 0` である。**内余白のほうは p を初期化に含めたことで新たに * 外れるため、この直しで一緒に取り戻す。** * * ## なぜ移行元では崩れないのか * * 1. 移行元は同じ初期化のあとに `.page_topArea { width: 1100px; margin: 0 auto }` * と `.page_top { float: right; padding: 40px 0 0; clear: both }` * （`css/style.css` の 1874〜1883 行）で置き直している。読み込みは * `css/import.css` が `common.css` → `style.css` の順なので、置き直しが * 初期化に勝つ * 2. **その規則はサイト共通 CSS の側にあり、Issue #2363 の範囲なので本 PR では * 写していない。**移行元のページ専用 CSS 1 本には入っていない * 3. **したがってこの寄せ直しは暫定である。#2363 が共通側へ写したときに消して * よい**（このファイルの他の暫定と同じ扱い） * * ## この型は他の区画へ写すときも点検する * * **移行元の初期化を写すと、テーマが移行元から写して当てている余白や寄せが * 外れる。**テーマの側も「移行元の初期化のあとの置き直し」を写しているので、 * 初期化だけを強い形で写すと置き直しのほうが負ける。写しの検収では物差しで * 全要素の左端と縦の位置を突き合わせて見つける。この区画では「先頭へ戻る」の * 囲みとボタンの 2 件だけだった。 */ body .pa-page--concierge .page-content__body .page_topArea { margin: 0 auto; } body .pa-page--concierge .page-content__body .page_top { padding: 40px 0 0; } /* * 画像を文字の基準線に載せ直す。移行元の共通 CSS は `img` の縦の揃えを触らず、 * ブラウザ既定の `baseline` のままである（`css/common.css` の 63 行目は * `border: 0` だけ）。**テーマは本文の画像へ `vertical-align: middle` を当てて * いるため**、写しただけでは画像の下に出る隙間の分だけ縦の位置がずれる。 */ body .pa-page--concierge .page-content__body img { vertical-align: baseline; } /* * ================================================================== * 箱の数え方を content-box へ戻す * ================================================================== * **移行元は、この本文の中をブラウザ既定の content-box で組んでいる。** * 幅の指定に余白と枠線が足された外形になる。 * * 移行元の共通 CSS のうち `css/common.css` と `css/page_company.css` には * `box-sizing` が 1 件も無い。`css/style.css` の 6 件と `css/page_top.css` の * 10 件は、ヘッダーとトップページ専用のクラス（`.circleTitle` `.header-tel` * `#contents .category_menu02` `.movie` `.news_box` `.pickup_menu_inner` * `.join .text_area` ほか）に付いており、**このページの本文には 1 件も * 当たらない**（移行元の HTML で出現 0 件）。 * * **一方このテーマは `*, *::before, *::after` へ border-box を当てている** * （`assets/css/main.css` の 351〜355 行）。同じ指定でも外形が余白のぶん * 縮む。 * * 実測（2026-08-27・幅 1440px・dev の実機）: * * .mainvisual-inner … 移行元 1140px（左端 x=150） / dev 1100px（x=170） * 写し元は `width: 1100px; padding: 0 20px` なので、 * content-box では 1100 + 20 + 20 = 1140px になる * * **写し元が自分で border-box を書いている 8 つの規則は、そのまま残る。** * 移行元でもその 8 つだけは border-box で組まれている。残る理由は強さの差で、 * 写しの側はクラス 3 つ（`.concierge-list` `.concierge-list__inner` * `.flow-list dl` `.flow-list__box` `.mainvisual-text:before` * `.my-list__list li` `.my-list__list-body__item` `.my-list__list-header`）、 * この規則はクラス 2 つだからである。**あとに読み込んでも勝てない。** */ body .pa-page--concierge .page-content__body, body .pa-page--concierge .page-content__body *, body .pa-page--concierge .page-content__body *::before, body .pa-page--concierge .page-content__body *::after { box-sizing: content-box; } /* * ================================================================== * 段落の行の高さを、移行元が先祖に置いた値へ戻す * ================================================================== * **テーマは `.page-content__body p` へ行の高さ（1.5）を直接当てている。** * そのため、写しが段落の**先祖**に置いた行の高さは段落に届かない（受け継ぐ値は * 直接の指定に負ける。Issue #2391 で判明）。 * * 写し元で先祖に行の高さを置き、その中の段落に何も置いていないのは次の 2 箇所 * である。どちらも 1.8 で、段落へ直接当て直す。 * * .mainvisual-text__sub … 大見出しの下の 2 段落（写し元 `line-height: 1.8`） * .value-list__text … 会員様の評価の本文（同 `line-height: 1.8`） * * 段落に直接の指定がある箇所（`.flow-copy` `.my-list__list-body p` など）は、 * 写しの側がクラス 3 つ以上で強いため、ここに書かなくても効く。 */ body .pa-page--concierge .page-content__body .mainvisual-text__sub p { line-height: 1.8; } body .pa-page--concierge .page-content__body .value-list__text p { line-height: 1.8; } /* * ================================================================== * 🔴 見出しにテーマが足した飾りを、移行元の状態へ戻す * ================================================================== * **移行元の共通 CSS は、見出しタグへ 3 つしか置いていない。** * `css/common.css` の 95〜98 行と 259〜263 行で `font-size: 100%` ・ * `font-weight: bold` ・ `margin: 0` だけである。**色・字送り・罫線は 1 件も * 置いていない。** * * **一方このテーマは、本文の見出しへ直接それらを当てている** * （`assets/css/main.css` の 17009〜17033 行）。 * * `.page-content__body :is(h2, h3, h4, h5, h6)` … `letter-spacing: 0.05em` * `.page-content__body h2` … `color`（金色）・`border-bottom: 2px`・`padding-bottom` * `.page-content__body h3` … `color`（金色）・`border-left: 4px`・`padding-left` * * **写した CSS が指定していない性質は、テーマの値のまま残る。**内余白は上の * 初期化が落としているが、色・字送り・罫線は初期化の対象ではないため残る。 * * この区画の見出しは 5 種である（移行元 `concierge/index.html`）。 * * .navigation-copy h2 … 写しは色を置いていない → 金色になっていた * .flow-title h3 … 写しが #A3762B を置いている → 色は一致 * .flow-sub h4 … 写しが #A3762B を置いている → 色は一致 * .flow-list__text-title h5 … テーマは h5 に色を置かない → 色は一致 * .my-title h3 … 写しが #A3762B を置いている → 色は一致 * * 実測（2026-08-27・幅 1440px・dev の実機。画面を撮って並べて発見）: * * .navigation-copy … 移行元 黒・字送りなし / dev 金色 #A3762B・字送り 0.9px * .flow-title … 移行元 字送りなし / dev 1.6px * .flow-sub … 移行元 字送りなし / dev 1px * .flow-list__text-title … 移行元 字送りなし / dev 1.6px * .my-title … 移行元 字送りなし / dev 1.6px * * **字送りは写し元に 1 件も無い。**移行元のページ専用 CSS の `letter-spacing` * 3 箇所はすべて `.conv-banner__*`（写しから落とした 29 規則）の中にあり、 * 写した 138 規則には 1 件も入っていない。したがってこの区画の見出しに限らず、 * 字送りは既定（`normal`）で正しい。 * * 色は `.navigation-copy` だけを戻す。移行元は指定していない = 親から受け継ぐ * ので `inherit` を置く。テーマは `.page-content__body` へ移行元の黒 * （`--pa-palette-ink-legacy` = #000。`main.css` の 16792〜16799 行）を置いて * いるため、受け継ぐと移行元と同じ黒になる。**この規則はクラス 3 つで写しと * 同じ強さだが、写しは色を置いていないのでぶつからない**（同じ強さのときは * あとに読む bridge.css が勝つ）。 */ body .pa-page--concierge .page-content__body :is(h2, h3, h4, h5, h6) { letter-spacing: normal; } body .pa-page--concierge .page-content__body .navigation-copy { color: inherit; } /* * ------------------------------------------------------------------ * 🔴 罫線も外す（ご指示に無い 1 件。要らなければこの規則ごと消せる） * ------------------------------------------------------------------ * **上のテーマの規則は、色と字送りに加えて罫線も足している。**h2 に下罫線 * 2px、h3 に左罫線 4px で、どちらも金色（`--pa-color-accent`）である。 * **移行元の共通 CSS にもページ専用 CSS にも、見出しへの罫線は 1 件も無い。** * * 写した 138 規則が罫線を置いているのは `.flow-list__box` `.value-list li` * などの器で、**見出しの 5 種には 1 件も置いていない**（写しを全走査して確認）。 * したがってテーマの罫線がそのまま残る。該当は `.navigation-copy`（h2）・ * `.flow-title`（h3）・`.my-title`（h3）の 3 件である。 * * **これは物差しでも検出できない。**寸法の物差しは幅・左端・揃え・組み方を、 * 文字組みの物差しは色・大きさ・書体・太さ・字送り・行の高さを見るだけで、 * どちらも罫線を見ない。写し元と移行元の CSS を読んで見つけた差である。 * **実機で測って確かめていないので、dev に出ていなければこの規則は不要である。** */ body .pa-page--concierge .page-content__body :is(h2, h3, h4, h5, h6) { border: 0; } /* * 移行元スマートフォン版だけにある 2 つの字を、素で隠す（Task #7453・ユーザー決定 D451）。 * * 🚨 **この 2 つは素で隠しておかないとパソコン幅でも出る。**`style.css`（750px 以上へ * 配る）に `.introduction-copy .ast` と `.introduction-copy .note` の規則が写されて * いるためである。移行元のパソコン版はこの markup を持たないのに、CSS の規則だけが * 在る。落とし穴の索引「携帯幅のため足した札はパソコン幅で隠す指定も要る」の型である。 * * 出す側は `sp.css`（749px 以下へ配る）が持つ。markup を足すのは * `inc/concierge-sp-text.php` である。 */ /* * 🚨 **頭の `body` を落とさない**（Bug #7461）。`style.css`（750px 以上へ配る）の * `body .pa-page--concierge … .introduction-copy .note { display: block }` は * **頭に `body` が付いていて詳細度が高い。**こちらに `body` が無いと、 * パソコン幅で注記が出てしまう（2026-09-19 03:14 の実測で踏んだ）。 * * 「139名」の側（`.ast`）はあちらの規則が `font-size` しか持たないので `body` 無しでも * 隠れていた。**同じ書き方で片方だけ通ったので、詳細度の差に気づけなかった。** */ body .pa-page--concierge .page-content__body .introduction-copy .pa-concierge-sp-count, body .pa-page--concierge .page-content__body .introduction-copy .pa-concierge-sp-note { display: none; }