/* * フォームの外枠のフッター（土台の `.pa-form-frame__footer` と、関連キーワード・認証マーク・規程へのリンク・著作権の共通フッター * `.pa-form-frame__footer--full`）の見た目（Bug #10084）。 * * もとは `form-frame.css` の中にあった。ご紹介プログラムの案内ページ 2 本（`/form/introcmp/`・`/form/introcmp-premium/`）も * 共通フッターを出すが、案内ページは `form-frame.css` を読まない（本文の器と足元の規則まで当たるため。`inc/introcmp-frame.php`）。 * そこで、共通フッターの規則だけをこのファイルに分け、フォームの画面（`pa_form_frame_enqueue()`）と案内ページ * （`pa_introcmp_enqueue()`）の 2 か所から読む（`inc/form-frame.php` の `pa_form_frame_enqueue_footer_style()`）。 * ヘッダーの規則を `form-frame-header.css` に分けた Bug #9159 と同じ筋である. * * 🚨 **フォームの画面では、`form-frame.css` より前に読む。**移した規則は、もとは `form-frame.css` の 983 行と 1374〜1654 行に * あった。それより前の行に同じ要素へ当たる規則は無く（2026-10-09 に数えた）、識別子ごとのフッターの規則（ご紹介・広告・ * オンライン・旧版）は `form-frame.css` の後ろの行に残る。前に読めば、規則どうしの勝ち負けは移す前と同じになる. */ /* --- フッター（移行元 .form-footer）--- 移行元: text-align:center; margin:0; padding:2em 1em; border-top:1px solid #ddd 文字色は移行元の `body, html { color: var(--text-color) }`（#4a453d）にあたる。 このテーマの既定は #000 なので、ここで移行元の色へ戻す。 `font-size: 16px` をここだけ置く理由: フッターの中身は `small` 1 つだけで、その 文字の大きさは下の 0.75em で決まる。それでも親の文字の大きさは行の高さの土台 （strut）に効くため、このテーマの既定 13px のままだとフッターの高さが移行元より 4px 低くなる（実測。移行元 89px に対して 85px）。器の側に同じ指定を置かないのは、 そちらは中のフォームの寸法まで一緒に動かすからである（冒頭の説明を参照）。 */ .pa-form-frame__footer { text-align: center; margin: 0; padding: 32px 16px; /* 移行元の 2em 1em を 16px 基準で換算 */ border-top: 1px solid #ddd; color: #4a453d; font-size: 16px; /* 移行元の body, html { font-size: 16px } にあたる */ line-height: normal; } /* 移行元 .form-footer small: font-size:.75em（上の 16px の 0.75 倍 = 12px） */ .pa-form-frame__footer small { font-size: 0.75em; } /* ================================================================== * フッター（eq・raiten・toiawase・houjin。関連キーワード・認証マーク・規程への * リンク・著作権の共通フッター） * ================================================================== * `.site-footer__certs` / `.site-footer__policy` / `.site-footer__menu--policy` / * `.site-footer__copyright`（`footer.php` から再利用。`form-frame.css` の * 冒頭のファイルコメントを参照）は、`main.css` 側で `.site-footer { --pa-footer-*: … }` にスコープした * カスタムプロパティを前提にしている（`main.css` の 2757〜2825 行）。この器は * サイト共通フッターの外にあり、その変数が継承されないため、参照している値だけを * ここで持ち直す（値は `main.css` の同じ変数のコメントと同一の実測に基づく）. */ .pa-form-frame__footer--full { --pa-footer-band-space: 30px; --pa-footer-certs-space: 25px; --pa-footer-certs-after: 25px; --pa-footer-policy-width: 980px; --pa-footer-policy-space: 9px; --pa-footer-separator-color: #6e6c6c; --pa-footer-link-color: #595757; --pa-footer-copyright-size: 10px; --pa-footer-block-space: 20px; --pa-footer-font-size: 13px; --pa-footer-line-height: 1.84; /* 移行元 #footer: background:#F5F5F5; padding:0 0 24px（style.css 1980〜1986 * 行）。`shiryo` の既定（.pa-form-frame__footer）は罫線・16px 基準の文字を * 持つが、こちらは移行元が別物なのですべて上書きする. */ background-color: var(--pa-footer-bg, #f5f5f5); padding: 0 0 24px; border-top: 0; color: var(--pa-color-text); font-size: var(--pa-footer-font-size); line-height: var(--pa-footer-line-height); text-align: center; } @media (max-width: 749px) { .pa-form-frame__footer--full { --pa-footer-block-space: 15px; --pa-footer-certs-space: 30px; --pa-footer-certs-after: 15px; --pa-footer-policy-width: none; } /* * `.site-footer__copyright` の画面幅 749px 以下の規則（`main.css` の * 3504〜3514 行）は、画面下端に固定表示される申し込みの誘導バーと文字が * 重ならないよう、画面幅の 21.875% を下の余白として確保する仕組みである * （`main.css` の同じ箇所のコメントを参照）。申し込みフォームのページには * この固定バーが最初から出ない（`footer-form.php` のファイルコメントの * 「画面下端の固定の誘導について」を参照）ため、そのままではフッターの * 下に不要な大きな余白が付く。フォーム専用の器の中でだけ、余白を通常の * 値へ戻す（main.css の後に読み込むためこちらが勝つ. `inc/form-frame.php` * の `pa_form_frame_enqueue()` を参照）. */ .pa-form-frame__footer-inner .site-footer__copyright { width: auto; margin-left: 0; padding: 20px 0 0; border-top: 1px solid #cccccc; color: #000000; } /* * 🚨 **携帯幅の著作権の行は、移行元の `.copyright` の見た目にそろえる**（Task #8023）。 * 移行元の携帯版は、この器を使う画面（Task #8023 の時点では入力画面 4 種と完了画面 5 種。Bug #9553 の直す前の読みでは 54 画面）で * `include/footer_form_sp.shtml` の `

` を出し、`sp/css/form_footer.css` の * * .copyright { padding: 20px 0 100px; font-size: 10px; text-align: center; * border-top: 1px solid #cccccc; } * * で組む。地の色は持たず、罫線は画面の幅いっぱいに引く. * * dev は、上の規則で罫線を 0 にしていた（「罫線は 1 つ上の規程リンクの区画が引く」）が、 * この幅では規程リンクの区画を隠す（下の `display: none`）ので、罫線が 1 本も無かった。 * 地の色（`#f5f5f5`）と字の色も、パソコン幅の値のままだった（2026-09-26 の直す前の測定・ * `pa-verify-assets/B/8023-直す前-0926/`）. * * 🚨 **下の内余白 100px も移行元どおりに写す**（ユーザー判断 D773・Bug #9553・2026-10-06）。移行元の * 100px は、画面の下に貼り付く帯 `#footer`（`position: fixed`）に隠れないための逃げで、移行元はその帯の * 中身を `` で囲って使っておらず、帯は空である。Task #8023 はこれを移行元のバグとみて写さなかった * （案 B・器の下の内余白 24px）が、D773 で「フォームは原則移行元どおり（D770）・空の帯でも 100px を写す」と * 決まった。行の下に 100px を持たせ、器の下の内余白 24px を 0 にする（幅 375 で器 60px → 136px。 * 直す前の読み `pa-verify-assets/B/9553-直す前の読み-1006/走行1/`・`--full` の 49 画面で移行元 136・dev 60）. * * 資料請求の LP の完了画面 `/form/request_lp/thanks/` にも当てる（Bug #9580・2026-10-06）。#9553 はこの画面を * 「移行元は 100px を持たない（行の高さ 42）」として除いていたが、それは移行元を `/form/index.php?…&dv=sp` の形で * 開いたため、型紙の相対パス `../../../css/` がパソコン版の CSS を読んだ誤りだった。移行元が配る URL * `/sp/form/request_lp/thanks/` で開くと、`sp/css/form_footer.css` が読まれ、行は 136 になる（測り直し * `pa-verify-assets/B/9580-測り直し-1006/走行1/`）. */ .pa-form-frame__footer--full { padding-bottom: 0; background-color: transparent; } .pa-form-frame__footer--full .pa-form-frame__footer-inner .site-footer__copyright { padding-bottom: 100px; } .pa-form-frame__footer--full .pa-form-frame__footer-inner { padding-right: 0; padding-left: 0; } /* * スマートフォン幅（749px 以下）は著作権 1 行だけへ縮む（AC 違反の自己検出・ * 2026-08-24。`footer-form.php` のファイルコメントの「スマートフォン幅の * 縮め方」を参照）。移行元のスマートフォン版はこの 4 種もサイト共通ページと * 「差なし」で、関連キーワード・認証マーク・規程へのリンクを持たない。 * マークアップ自体は変えず、この幅でだけ 3 区画を隠す. */ .pa-form-frame__keywords, .pa-form-frame__footer-inner .site-footer__certs, .pa-form-frame__footer-inner .site-footer__policy { display: none; } } /* 内側の幅を絞る器。移行元 #footer_inner: width:1100px; margin:0 auto * （style.css 1988〜1993 行）. */ .pa-form-frame__footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 12px; } /* 関連キーワード帯。移行元 .service_keyword: margin:0 auto; padding:30px 12px; * font-size:10px; line-height:120%; letter-spacing:0.05em; border-top:1px solid * #DCDCDC（style.css 1995〜2003 行）。罫線の色は共通トークン * `--pa-color-border`（#d9d9d9）を使う。サイト共通フッターの FAQ キーワード帯 * （`.site-footer__faq`。40 語超・別のリンク集合）とは中身が違うため、専用の * クラス名で持つ（`footer-form.php` のファイルコメントを参照）. */ .pa-form-frame__keywords { border-top: 1px solid var(--pa-color-border); padding: var(--pa-footer-band-space) 0; font-size: 10px; line-height: 1.2; letter-spacing: 0.05em; text-align: center; } .pa-form-frame__keywords-list { list-style: none; margin: 0; padding: 0; } /* 移行元 .sttltxt li: display:inline-block; margin:0 4px; letter-spacing:normal * （style.css 2010〜2014 行）。見出し役の「関連キーワード：」もリンクの各項目も * 同じ並べ方である（移行元は h2 を使わず、どちらも plain な li）. * * 移行元は並びの `ul`（`.sttltxt`）に `letter-spacing: -.40em`（2005〜2008 行）を当てて * 語と語のあいだの空白を消し、語の中は `letter-spacing: normal` で帯の 0.05em を打ち消す。 * dev はこの 2 つを持たず、語の間隔が移行元より 3.36px 広く、語の幅も 1 字 0.5px 広かった * （Bug #8523・2026-09-26 の直す前の測定。携帯幅ではこの帯ごと隠すので、幅で分けない）. */ .pa-form-frame__keywords-list { letter-spacing: -0.4em; } .pa-form-frame__keywords-list li { display: inline-block; margin: 0 4px; letter-spacing: normal; } .pa-form-frame__keywords-list a { color: var(--pa-footer-link-color); text-decoration: none; } .pa-form-frame__keywords-list a:hover, .pa-form-frame__keywords-list a:focus-visible { text-decoration: underline; } /* * 🚨 **パソコン幅（750px 以上）の組みを移行元の `#footer` にそろえる**（Bug #8523・ * ユーザー決定 D598 のケース (1)）。2026-09-26 の直す前の測定で、入力画面 5 種と完了画面 * 4 種の幅 1440 と 1280 の全部で、フッターの高さが移行元 390.77 に対し 316.81 だった * （`pa-verify-assets/B/8523-直す前-0926/`）。差の出どころは次のとおり（両側を CDP で読んだ）. * * - 上の内余白 50px。移行元はフォームの画面だけ `css/page_inquiry.css` の * `#footer { padding: 50px 0 24px }`（347 行）が `style.css` の `padding: 0 0 24px` に勝つ * - 器の左右の内余白。移行元の `#footer_inner` は幅 1100px・内余白 0 で、左右の 12px は * 関連キーワードの帯（`.service_keyword { padding: 30px 12px }`）だけが持つ。dev は器に * 12px を持たせていたので、認証ロゴの並びと著作権の行が 1076px に狭まっていた * - 認証ロゴの縦の寄せ。移行元の `.pmarkList` は `align-items` を持たず、上場の説明の * 項目（高さ 53px）が上に付く。dev は `main.css` の `align-items: center` で 3.5px 下がる * - 規程のリンク。移行元の `.footer_menu` は幅 900px・`text-align: center` の中に * `li { display: inline-block; padding: 0 9px }` を並べ、6 番目と 10 番目の `li` だけ * 右の内余白と縦棒を持たない（`style.css` 2076〜2102 行）。語と語のあいだには、`ul` の字 * （12px）の空白 1 字が入る。dev は幅 980px の flex で並べていて空白が無く、6 番目と * 10 番目の右にも余白があったので、3 行が 2 行になり「特定商取引法に基づく表記」が * 2 行目の末尾に来ていた。携帯用の 2 項目（`.pa-footer-policy--sp-only`）は `main.css` * が PC 幅で隠すので、`inline-block` を当てない * - 認証ロゴの並びの中心。移行元の `.pmarkList` は `.clearfix` を持ち、`css/common.css` の * `.clearfix:after { content: "."; display: block; height: 0; visibility: hidden }` * （329 行）が flex の並びの末尾の項目になる。この見えない「.」の幅（12px の字 1 つ）の * ぶん、ロゴの並びが左へ寄る（下見の 1 回目で 1.56px） * - 上場の説明の項目。移行元は `li.code { display: table }` の中に、画像と説明文を * `display: table-cell; vertical-align: middle` で並べ、説明文だけが `padding-left: 5px` * を持つ（`style.css` 2059〜2074 行）。dev は flex の `gap: 5px` で並べていた。画像は * 移行元のフォームの画面では実寸の 41×53px で出る。dev の `main.css` の 19×25px は * 移行元のトップページの値である（`main.css` の【申し送り】を参照）。`main.css` の * `img { max-width: 100% }`（956 行）は、表の枠の中では画像を 19px 前後に縮めるので外す * （下見の 4 回目に CDP で読んだ）。`li.code` も `.clearfix` を持つので、末尾の見えない * 「.」が表の列を 1 つ取り、説明文の幅がそのぶん狭まる */ @media (min-width: 750px) { .pa-form-frame__footer--full { padding-top: 50px; } .pa-form-frame__footer--full .pa-form-frame__footer-inner { padding-right: 0; padding-left: 0; } .pa-form-frame__footer--full .pa-form-frame__keywords { padding-right: 12px; padding-left: 12px; } .pa-form-frame__footer--full .site-footer__certs { align-items: flex-start; } /* 移行元の `.clearfix:after`（`css/common.css` 329 行）と同じ見えない「.」. */ .pa-form-frame__footer--full .site-footer__certs::after, .pa-form-frame__footer--full .site-footer__certs-item--code::after { display: block; height: 0; visibility: hidden; font-size: 12px; line-height: 0; content: "."; } .pa-form-frame__footer--full .site-footer__certs-item--code { display: table; gap: 0; } .pa-form-frame__footer--full .site-footer__certs-item--code img, .pa-form-frame__footer--full .site-footer__certs-item--code p { display: table-cell; vertical-align: middle; text-align: left; } .pa-form-frame__footer--full .site-footer__certs-item--code img { width: 41px; max-width: none; height: 53px; } .pa-form-frame__footer--full .site-footer__certs-item--code p { padding-left: 5px; } .pa-form-frame__footer--full .site-footer__policy { max-width: 900px; } .pa-form-frame__footer--full .site-footer__menu--policy { display: block; font-size: 12px; text-align: center; } .pa-form-frame__footer--full .site-footer__menu--policy > li:not(.pa-footer-policy--sp-only) { display: inline-block; font-size: 13px; } .pa-form-frame__footer--full .site-footer__menu--policy > li:nth-child(6), .pa-form-frame__footer--full .site-footer__menu--policy > li:nth-child(10) { padding-right: 0; border-right: 0; } }