/* ================================================================== * フォームの外枠の「サイト共通ヘッダー」系の見た目（Bug #9159 で form-frame.css から切り出した） * ================================================================== * 読み込むのは 2 か所である（`inc/form-frame.php` の `pa_form_frame_enqueue()` と、 * `inc/introcmp-frame.php` の `pa_introcmp_enqueue()`）。 * * 🚨 **切り出した理由。**ご紹介プログラムの案内ページ 2 本（`/form/introcmp/`・`/form/introcmp-premium/`）は * Bug #9159 から同じサイト共通ヘッダーの部品を出し、body に `pa-form-frame--full-header` が付く。 * 移行元の案内ページもパソコン版は `header_form1`・帯・`header_form2` で、パソコン幅はロゴだけである。 * ところが案内ページはフォームではないので `form-frame.css` を読まず、パソコン幅でナビ・電話予約・ * 申し込みの導線が出てしまう（Greptile の指摘・PR #9166）。 * `form-frame.css` を丸ごと読ませると、本文の器（`.pa-form-frame__wrapper` の内余白 48px・最大幅 1100px）と * 足元（`.pa-form-frame__footer`）の規則まで案内ページに当たる。そこでヘッダーの規則だけをここへ移した. * * 🚨 **読み込む順は `form-frame.css` より前である**（`form-frame.css` がこのファイルを依存に持つ）。 * もとの位置（`form-frame.css` の中ほど）より前に置いても、`form-frame.css` の側で * `.site-header` 系に当たる規則はこの節より後ろにしか無いので、勝ち負けは変わらない. * ================================================================== */ /* ================================================================== * ヘッダー（eq・raiten・toiawase・houjin。パソコン幅はロゴだけ・スマートフォン * 幅はサイト共通ヘッダーの引き出しメニューと「差なし」） * ================================================================== * AC 違反の自己検出（2026-08-24）: この 4 種の移行元は、スマートフォン版も * サイト共通ヘッダーと「差なし」（引き出し式メニューを持つ）。header-form.php * はこの 4 種で `template-parts/site-header-nav.php`（サイト共通ヘッダーの * 引き出しメニュー部品。`header.php` と共有）をそのまま呼び出し、body に * `pa-form-frame--full-header` を付ける。二重管理を避けるための判断（HQ の * 判断・案 B。詳しい経緯は header-form.php のファイルコメントを参照）. * * パソコン幅（750px 以上）だけ、ナビ・電話予約・CTA（`.site-header__panel`）を * 隠し、ロゴだけを見せる。隠すのは display: none にし、visibility: hidden や * opacity: 0 にしない。後者は見た目だけ消えても要素が読み上げ・キーボード操作の * 対象に残ってしまい、隠れているはずのリンクへ迷い込む. * * ロゴの寸法・位置は、上の otocon 用（`.pa-form-frame__top--linked` / * `.pa-form-frame__logo--linked`）と同じ実測値（高さ 120px・左パディング * 41px→45px（1366px 以下）・ロゴ 280x49px→175x31px）をそのまま踏襲する。 * * 左パディングを当てる相手は `.site-header__inner` ではなく `.site-header__bar` * にすること（Codex レビュー・Bug #1983）。`main.css` のパソコン幅の節 * （750px 以上）が、ロゴの直接の親である `.site-header__bar` 側にすでに同じ * 41px/45px の左パディングを持っており（`.site-header__inner` 自身は同じ節で * `padding: 0` へ上書きされ左は 0 になる）、ここで `.site-header__inner` にも * 左パディングを足すと二重に積み上がって 82px/90px になり、ロゴが右へずれる * （実測して確認済み）。`.site-header__bar` を上書きすれば、幅に関わらず * 一貫した値になる。 * * `.site-header__inner` 自身の左パディングも 0 にしておくこと。パソコン幅の節が * 当たらない 749px 以下では、別の共通規則（`main.css` の骨格段階の仮ブロック）が * `padding: 0 var(--pa-inner-gutter)`（15px）を持たせたままだからである。 * かつては同じことが 750〜1099px でも起きて `.site-header__bar` の 45px に * 15px が足され 60px になっていたが、Issue #2823 でパソコン幅の節の下限を * 750px へ下げたので、その帯では起きなくなった. */ @media (min-width: 750px) { .pa-form-frame--full-header .site-header { border-bottom: 0; } .pa-form-frame--full-header .site-header__inner { padding-left: 0; min-height: 120px; } .pa-form-frame--full-header .site-header__bar { padding-left: 41px; } .pa-form-frame--full-header .site-header__logo-image { width: 280px; height: 49px; } .pa-form-frame--full-header .site-header__panel { display: none; } /* 下段の器（`main.css` の `.site-header__main`。Issue #2886 / #2823）は、 移行元の下段 #fixHeader2 と同じ最小幅 1100px を持つ。移行元でその幅を 決めていたのはグローバルナビと申し込みへの導線だが、この 4 種は `.site-header__panel` を隠してロゴだけを見せる。最小幅をそのまま 引き継ぐと、中身がロゴだけなのに器が 1100px へ広がり、幅 750〜1099px で 横スクロールが出てしまう。ここで最小幅を外す. */ .pa-form-frame--full-header .site-header__main { min-width: 0; } /* 補助リンク（電話予約・お問い合わせ等）は幅で置き場所が変わり、CSS の 当たり先が 2 か所ある（749px 以下は `.site-header__panel` の中、 750px 以上は `.site-header__top` の中の写し。`.site-header__top` 自体は 既定で display: none、main.css の `@media (min-width: 750px)` でだけ display: flex になる。Issue #2662。境目は Issue #2823 で 1100px から 750px へ下げた）。この 4 種はロゴだけを見せる仕様なので、幅に関わらず どちらも隠す。`.site-header__panel` だけを隠すと、750px 以上で `.site-header__top` 側の写しが代わりに出てしまう （外部レビュー・PR #2818 で指摘・実測して確認済み）。 🚨 **隠す相手を「上段の器」から「補助リンクの写しだけ」へ狭めた（Bug #2548）。** かつてここは `.pa-form-frame--full-header .site-header__top` を display: none にしていた。上段の器を丸ごと消すと、**中にあるページ名の帯 （`.site-header__page-name`）まで一緒に消える**。移行元のこの 4 種は 9 ページのうち 8 ページでその帯（`

`）を出しているため、 dev だけ帯が無い状態になっていた（Bug #2548 の 2026-08-31 の実測）。 狭めた当たり先は写しの器そのもの（`.site-header__sub`）で、移行元の フォーム用ヘッダー（`public/include/header_form2.shtml`）がロゴ 1 枚だけを 持ち補助リンクを持たないことに合わせている。 `.site-header__top` の寸法（main.css の 750px 以上の節が持つ min-width: 1200px・min-height: 40px）はそのまま活かす。移行元の `#header.form_header` も、上段 `#header` の min-width: 1200px を 打ち消していない（`public/css/style.css` の 435〜446 行）. */ .pa-form-frame--full-header .site-header__top .site-header__sub { display: none; } } /* この 4 種でも、共通ヘッダーの下端の罫線（`main.css` の `.site-header` が持つ `box-shadow: inset 0 -1px 0 #ccc`。Bug #2558）はそのまま出す。**消してはいけない。** 一度は「移行元のこの 4 種はロゴだけの外枠で罫線を持たない」と考えて `box-shadow: none` で消した。**その前提は誤りだった。**下の `.pa-form-frame__top--linked` の注釈にある「罫線を持たない」は、移行元の `#header.form_header`（`public/css/style.css` 444〜492 行）に `border` の指定が 無いことだけを見た判断である。**移行元の罫線は `border` ではなく背景画像で 描かれる**（Bug #2558 の調査で分かった落とし穴）。 移行元は `public/css/style.css` の 5〜9 行目で全ページの `body` に背景画像 `public/images/bg_header.gif` を横方向へ繰り返して敷いている。この画像は 20 × 120px で、**39 行目と 119 行目が `#CCCCCC`** である。`#header.form_header` の高さは 120px なので、119 行目がちょうどヘッダーの下端に来る。 配信中の移行元を画素で走査して裏を取った（幅 1440px・206 点すべてが `#CCCCCC`）。 - 罫線あり: `/form/eq/` `/form/reservation/` `/form/contact/` `/form/corporation/` （この 4 種。y=39 と y=119 の 2 本） - 罫線なし: `/form/request/`（`shiryo`）・`/form/mypageform/`（`shoukai`）・ `/form/otocon/`（`otocon`） 罫線なしの 3 種は `.site-header` ではなく `.pa-form-frame__top` 系の器を使うため、 `main.css` の影は元から当たらない。よってここで打ち消す必要は無い. */ @media (min-width: 750px) and (max-width: 1366px) { .pa-form-frame--full-header .site-header__bar { padding-left: 45px; } .pa-form-frame--full-header .site-header__logo-image { width: 175px; height: 31px; } } /* 🚨 **フォームの外枠では、ヘッダーを貼り付けずページと一緒に流す（Bug #9649・ユーザー決定 D770）。** `main.css` の `@media not all and (max-width: 768px)` の節は、全ページの `.site-header` を `position: sticky; top: 0; z-index: 50` で画面の上端に貼り付ける（Bug #1348・PR #1421）。 ところが移行元のフォームのパソコン版（`header_form1`・`header_form2`）は追従の帯 （`include/header_fix_navi_2.shtml`）を 1 枚も読まず、ヘッダーはページと一緒に流れる。 dev だけ貼り付いたままになり、資料請求の広告フォーム（`/lp/request_ad/`・`/lp/request_as/`）では 縦に 179px 送ると帯のリボンの結び目がヘッダーの裏へ隠れていた（2026-10-07 の実測）。 条件は `main.css` の貼り付きの節と同じ「768px より大きい」にそろえる。750〜768px は 元から貼り付かないので、ここで触る必要が無い. `top: auto` も持たせる。ログイン中は `main.css` の `body.admin-bar .site-header` が `top: 32px`（782px 以下は 46px）を与える。`position: relative` のままその値が残ると、 ヘッダーが管理バーの高さぶん下へずれて本文に重なる。セレクタに `body` を付けて 詳細度を管理バーの規則（0,2,1）とそろえ、後から読まれるこのファイルが勝つようにした. `position` を `static` ではなく `relative` にするのは、`z-index: 50` の重ね順を残すためである. `main.css` の `html { scroll-padding-top: 180px; }`（貼り付いたヘッダーの裏に見出しが隠れないための余白）は フォームの外枠でも変えない。ページ内アンカーへ移動したときに上へ 180px の隙間が空くだけで、 隠れは起きない. 1 段化（`main.js` の `setUpStickyHeaderCompact()`）は、`pa-form-frame--full-header` の body では 元から動かない（PR #2133）。 */ @media not all and (max-width: 768px) { body.pa-form-frame--full-header .site-header { position: relative; top: auto; } } /* オンライン資料請求 `request_online` の携帯幅は、MENU の開閉ボタンと引き出しを出さない（ユーザー決定 D812・Task #9712）. 移行元の `include/header_form_sp_online.shtml` は MENU の絵（`/sp/images/menu.gif`）を注釈の中に置き、ロゴだけを出す. JavaScript が動かないとき（引き出しの中身が開いたまま出る）も隠す。`main.css` の `.site-header--js .site-header__toggle`（(0,2,0)）と `.site-header--js.is-nav-open .site-header__panel`（(0,3,0)）に勝つよう、body と器の類名を足して (0,3,1) にする. */ @media (max-width: 749px) { body.pa-form-frame--online .site-header .site-header__toggle, body.pa-form-frame--online .site-header .site-header__panel { display: none; } }