/* * 会員プロフィールと活動実績のページ（/introduce/data/）で、テーマの共通の * 組みと移し込んだページ専用の組みがぶつかる箇所だけを調整する。 * * 読み込むのはこのページだけなので（inc/introduce-data.php）、ここでは * テーマ共通のクラス名をそのまま書いてよい。他のページには届かない。 * * 手で書くファイルである（data-style.css は写し元からの機械変換なので、 * こちらと混ぜない）。読み込みはこのページのファイルの中でいちばん後である。 */ /* -------------------------------------------------------------- * 1. 本文の柱の幅の制限を外す * * テーマは固定ページの本文を 1,100px の柱に載せる（main.css の * .page-content と .page-content__body）。移行元のこのページは節の下地を * 画面の端まで届かせる作りで、柱に載せると下地が中央の 1,100px で切れて * しまう。幅の制限と左右の内余白を打ち消す（節の中の幅は、移し込んだ * .l-inner が 940px で決める。移行元と同じ値である）. * -------------------------------------------------------------- */ .page-content { max-width: none; padding-left: 0; padding-right: 0; } .page-content .page-content__body { max-width: none; } /* -------------------------------------------------------------- * 2. 本文が受け継ぐ文字の大きさと色を、移行元と同じにする * * 移行元は 2 つの CSS を重ねて読んでいた。 * * - サイト共通（/css/import.css）… body の文字を 13px にする * - ページ専用（data-style.css）… 根の文字を 10px にして、寸法を rem で書く * * つまり移行元では「rem の基準は 10px・受け継ぐ文字は 13px」の 2 本立てだった。 * data-style.css の写しでは rem を実寸へ換算済みなので、ここでは受け継ぐ側の * 13px だけを当てる（実測: 移行元の .secBox と .pcMenu__item はどちらも 13px）。 * * 色は写し元 data-style.css の html > body が持つ #474747 である。テーマにも * 本文の色の指定があり（main.css の body:not(.pa-profile-new) .page-content__body * が旧デザイン向けの黒 #000 を当てる）、そちらが勝つと黒になるため当て直す。 * * **セレクタの先頭に body を付けているのは、強さをそろえるためである。** * テーマ側は「タグ 1 + クラス 2」の強さを持つ（body と :not(...) と * .page-content__body）。`.page-content .page-content__body` だけでは * 「タグ 0 + クラス 2」で負ける（クラスの数が同じとき、タグの数が多い側が * 勝つ）。body を足して同じ強さにし、後から読み込むこちらが勝つようにする。 * 実測で黒のままになる誤りを一度踏んだ箇所である. * * **携帯幅では受け継ぐ文字が 13px ではない（Bug #8812）。**携帯版の移行元 * `/sp/introduce/data/` は import.css を読まず、根の文字 2.66666vw をそのまま * 受け継ぐ（実測: 幅 375 で .secBox・.whiteBox・.s1c3__container が 9.99998px / * 行送り 15px。dev は 13px / 19.5px）。受け継ぐ文字は、行の中に置いた要素の * 下の行の下がりを決める。13px のままだと下がりが移行元より 1.5px 大きくなり、 * 「活動実績」の白い箱 4 つが 1.5px ずつ高くなっていた（2026-09-29 の読み * `pa-verify-assets/B/8812-携帯読み-0929/`・スクロールして演出を終えてから測った * 下見 `B/8812-下見4-0929/` で移行元と ±1 に収まることを確かめた）. * -------------------------------------------------------------- */ body .page-content .page-content__body { color: #474747; font-size: 13px; } @media screen and (max-width: 749px) { body .page-content .page-content__body { font-size: 2.66666vw; } } /* -------------------------------------------------------------- * 3. テーマの記事用の文字組みを、このページの本文へ入れない * * テーマは移行してきた記事の本文へ、タグそのものを名指しした文字組みを * 当てている（main.css の「本文（.entry-content と .page-content__body）の * 文字組み」の節。見出しの色と大きさ・見出しに敷く帯・段落の間隔など）。 * 移行元のこのページはそれらを持たないため、当たると見た目がずれる。 * 実測で次の 4 つがずれていた。 * * .whiteBox__title 色 移行元 #474747 → テーマの茶色 rgb(163,118,43) * .s1c1__title 色 移行元 #474747 → 黒 * .whiteBox__lead 色 移行元 #474747 → 黒 * .s3c2__title__text 色 移行元 #474747 → 黒 * * そこで、このページで実際に使うタグ（h2 / h3 / h4 / p / ul / li / small / * strong / span）について、テーマが足した文字まわりの指定を差し戻す。 * `revert` は「作者の指定を無かったことにして、ブラウザ標準へ戻す」働きで、 * 移行元がその指定を持っていなかった状態と同じになる。 * * **打ち消す範囲を「文字まわり」に絞る。** 余白（margin / padding）は写し元の * 初期化が同じ強さで当てているので、ここで差し戻すと写し元の指定を消して * しまう。同じ理由で `a` と `img` は対象から外す（写し元が色・下線・並びを * 自分で指定しており、差し戻すとその指定が消える）。 * * **行の高さ（line-height）も対象から外す。** 写し元は `* { line-height: 1.5 }` * で全要素に当てており、ここで差し戻すとそれを消してしまう。実測で「年収」の * 大きな数字の器が移行元の 108.8px に対して 87px（-21.8px）になる誤りを一度 * 踏んだ（`` の行の高さがブラウザ標準へ戻り、行の箱が縮んだため）。 * テーマ側の行の高さは、写し元の `*` の指定（クラス 2 つ）のほうが強いので * 打ち消す必要が無い. * * 強さの順は「テーマ（クラス 1 + タグ 1）＜ ここ（クラス 2 + タグ 1）＜ * 写し元の写し（クラス 3）」になっている。写し元がクラスで指定している箇所は * ここより強いので、そのまま残る. * -------------------------------------------------------------- */ .page-content .page-content__body h2, .page-content .page-content__body h3, .page-content .page-content__body h4, .page-content .page-content__body p, .page-content .page-content__body ul, .page-content .page-content__body li, .page-content .page-content__body small, .page-content .page-content__body strong, .page-content .page-content__body span { background-color: revert; background-image: revert; color: revert; font-family: revert; font-size: revert; font-weight: revert; letter-spacing: revert; text-align: revert; } /* -------------------------------------------------------------- * 3.5 本文の中のリンクの色と下線を、移行元と同じにする * * 移行元は 2 つの CSS が順に当たって、結果として「黒・下線あり」になっていた。 * * ページ専用（data-style.css）… a { color: inherit; text-decoration: none } * サイト共通（/css/style.css）… a { color: #000; text-decoration: underline } * * サイト共通の側が後に読み込まれるため、そちらが勝つ（実測: 本文の 4 本の * リンクはすべて黒・下線あり）。写しでは data-style.css の側だけを持って * いるので、ここでサイト共通の側を当て直す。 * * 色を自分で決めているリンク（.hero__btn は白）は「クラス 3 つ」の強さを * 持つので、この指定（タグ 2 + クラス 2）より強く、そのまま残る. * -------------------------------------------------------------- */ body .page-content .page-content__body a { color: #000; text-decoration: underline; } /* 🚨 **上の 1 本は、冒頭の 2 つの押しボタンに下線まで引いてしまっていた** （ユーザー目視 2026-09-03「会員プロフィール・活動実績のボタンに下線が入る」）。 上の説明のとおり、押しボタンは自分で色を決めているので**色は白のまま残る** （`data-style.css` の `.page-content .page-content__body .hero__btn` はクラス 3 つ で、上の 1 本のクラス 2 つ + タグ 2 つより強い）。ところが `text-decoration` は 押しボタン側が何も書いていないため、**競う相手がおらず上の 1 本がそのまま当たる**。 色だけを見て「押しボタンはそのまま残る」と読むと、この下線を見落とす。 移行元の携帯版の実測は下線なし（本番 https://www.p-a.jp/introduce/data/ を 2026-09-03 23:42 JST に携帯の名乗りで取得。転送先 `/sp/introduce/data/` の `text-decoration-line` は `none`）。ここで押しボタンだけ打ち消す. クラス 3 つなので上の 1 本より強い. */ body .page-content .page-content__body .hero__btn { text-decoration: none; } /* -------------------------------------------------------------- * 3.8 円グラフの図を、移行元の `` と同じ並び・同じ寸法にする * * 【並びをそろえる（`display: block`）】移行元の円グラフは Chart.js が * `` に描いており、Chart.js はその `` へ `display: block` を * 当てる。写しではインライン `` で描く（inc/introduce-data.php）。 * `` の既定は文字と同じ並び（inline）で、文字の下に伸びるぶんの隙間が * 下に付く。実測で器の高さが移行元の 230px に対して 235.5px（+5.5px）に * なったため、並びをそろえる. * * 【内余白で寸法をそろえる（Bug #3040）】移行元の Chart.js は、描画領域の上に * 10px を空けてから円を描く。この 10px は器が大きくなっても 10px のままである * （器の大きさに比例しない絶対値）。縁取りの太さも常に 1.5px である。 * * 写しの `` は `viewBox` を器いっぱいに拡大するので、絵の中に 10px を * 書いても器と一緒に拡大されてしまう。そこで絶対値の余白は CSS 側で持つ。 * `viewBox` を持つ一番外側の `` に内余白を与えると、`viewBox` は内余白を * 除いた内側の箱に当てはまる。つまりこの内余白が「絵の当てはめ先」を狭めて、 * 移行元の絶対値の余白を器の大きさに関係なく再現する. * * 3 つの数の意味は次のとおりである。 * * 上の 10.75px … 移行元が空ける 10px ＋ 縁取りの半分 0.75px * 左右下の 0.75px … 縁取りの半分 * * 絵の座標系は `viewBox="0 0 220 220"`（inc/introduce-data.php）で、円は * その 220 の箱に内接する。縁取りは `vector-effect="non-scaling-stroke"` で * 非拡大にしてあり、どの幅でも 1.5px のままなので、外側へ 0.75px はみ出す。 * 左右下の内余白はそのはみ出しを受け止める. * * 【`overflow: visible` が必要な理由】縁取りは絵の当てはめ先のちょうど縁を * またいで描かれる。既定の `overflow: hidden` のままだと、その外半分（0.75px） * が上下左右の 4 点で切り取られ、移行元には無い平らな部分ができる. * * 🚨 **この理由は、扇の絵に「見せる範囲」を決める仕掛けが無いことを前提にする。** * かつて扇の絵には覆い（mask）があり、縁取りのはみ出しが**この `overflow` に届く * 前に覆いの外へ落ちて**消えていた。そのため `overflow: hidden` に戻しても左右は * 1px も変わらず、この節の説明は実際には成り立っていなかった（Bug #3040 のセルフ * レビューで発見。当時は覆いを弧より外へ広げて直した）。覆いは Bug #3103 で廃止 * したので、いまは縁取りがまっすぐこの `overflow` まで届く。**扇の絵に切り取りの * 仕掛けを足すと、この 1 行が効かなくなる**（inc/introduce-data.php の * `pa_introduce_data_pie_svg()`）. * * 【前提】`box-sizing: border-box` が全体に効いている（assets/css/main.css の * `*` の規則と、data-style.css の `.page-content .page-content__body *` の * 規則）。だから器の外形 230px は内余白を含んだ値のままで、内余白を足しても * 器は大きくならない。器の外形を決めるのは data-style.css（230px / 61.33318vw） * であり、この節はその外形を変えない. * -------------------------------------------------------------- */ .page-content .page-content__body .s1c3__chart { display: block; padding: 10.75px 0.75px 0.75px; overflow: visible; } /* -------------------------------------------------------------- * 4. WordPress が出すページの題名を出さない * * テーマの固定ページのひな型（page.php）は本文の上に題名を出す。移行元の * このページは題名をその位置に持たず、本文の先頭にある主役の見出し * （.hero__title）が題名の役をしている。そのままだと題名が二重になるため、 * ひな型が出す側を隠す。 * * **見出しの階層は失われない。** 本文の主役の見出しは、投入時のサニタイズで * h1 から段落へ落ちていたものを inc/introduce-data.php が h1 へ戻している * （Bug #2180）。したがってページの h1 は 1 個のままである. * -------------------------------------------------------------- */ .page-content__header { display: none; } /* -------------------------------------------------------------- * 5. 右端の固定メニュー（.pcMenu）の打ち消しは外した（Bug #2618） * * ここには以前、指がメインの機器で .pcMenu を消す規則があった。テーマが * 版を「幅または指がメインの入力か」で切り替えていた頃（Issue #2158）、 * 幅 750px 以上のタブレットでは、テーマは携帯向けの組みに切り替わるのに、 * 写した .pcMenu は幅だけの条件で出てしまい、携帯向けの導線と PC 向けの * ページ内メニューが同時に出ていた。その食い違いを打ち消す規則だった。 * * Bug #2618 でテーマの切り替えを幅だけへ戻したので、写した .pcMenu の * 幅だけの条件と食い違わなくなった。打ち消しを残すと、移行元では出る * .pcMenu が dev のタブレットでだけ消えるため、規則ごと外している。 * -------------------------------------------------------------- */ /* -------------------------------------------------------------- * 6. 会社情報のページ向けの規則が `#profile` から漏れてくる分を戻す（Bug #2690） * * main.css は会社情報・採用のページ向けに、8 個の id を**素で**当てている。 * * :is(.entry-content, .page-content__body) * :is(#company, #profile, #missionstatement, #contribution, #interview_top, #photo) * :is(.entry-content, .page-content__body) :is(#profile, #news, #recruit, …) * :is(.entry-content, .page-content__body) :is(#company, #profile, …) :is(h2, h3, h4, h5, h6) * * **このページは「会員プロフィール」の節に同じ `id="profile"` を使っている** * （移行元と同じ組みで、ページ内の目次リンクの飛び先でもあるため変えない）。 * `:is()` の詳細度は中身の最大値なので上の 3 本は (1,1,0) になり、写し込みの * `data-style.css`（`.page-content .page-content__body …` の (0,3,0)）に勝ってしまう。 * * 実測（幅 1440px）: 見出しが 26px → **16px**、節とパネルが 940px → **1,100px**。 * 型紙で id を `profile-x` に変えるだけで移行元の値へ戻ることを確かめた。 * * ここでは `.data` を足して (1,3,0) 以上にし、**移行元の値へ戻す**。会社情報の * ページ側は触らない（検収済みの領域のため）。構造の是正（8 個の id を素で * 当てるのをやめる）は Bug #2780 が扱う。 * * 戻すのは、会社情報向けの規則が奪う項目だけである（幅・内余白・文字の大きさ・ * 行送り・揃え・外余白・罫線）。色は `inline-overrides.css` の * `#profile .secHead__title`（1,2,1）が既に勝っているので触らない. * -------------------------------------------------------------- */ /* 節そのもの。移行元の実測: 幅 940px・内余白 0・文字 13px・行送り 19.5px・揃え start. */ .page-content .page-content__body .data #profile { width: 940px; max-width: 100%; margin: 0 auto; padding: 0; font-size: inherit; line-height: inherit; text-align: inherit; } /* 節の中の絵の縦の揃え（Bug #8812）。**幅ごとに値が変わらないので、媒体条件の外に 1 本だけ置く。** 会社情報向けの main.css の :is(.entry-content, .page-content__body) :is(#company, #profile, …) img { vertical-align: baseline } （1,1,1）が、写し込み（data-style.css）の `.page-content .page-content__body img { vertical-align: bottom }`（0,2,1）に勝ち、この節の絵だけ `baseline` になっていた。 移行元はこのページの絵をすべて `bottom` にしており（`data-style.css` の `img`・個別の上書きは無い）、 `baseline` だと絵の下に行の下がりができる。 実測（2026-09-29・`pa-verify-assets/B/8812-読み-0929/`）: 見出しの絵 `img.secHead__icon` （s1-head.svg）の下端から h2「会員プロフィール」までが、移行元 25・dev 30.5（両幅）。同じ差が 節の中の絵ごとに足され、ページが 1440 で 18px・375 で 24px 高かった（`B/W58-読み-0929/`）。 ほかの節（活動実績）の見出しの絵は `bottom` のままで、差は無い. */ .page-content .page-content__body .data #profile img { vertical-align: bottom; } /* 節の中の見出し。会社情報向けの規則が大きさ・行送り・外余白・内余白・罫線を まとめて打ち消すため、写し込み（data-style.css）と同じ値をここで当て直す. */ /* 行送りの当て直し（Bug #3075）。**幅ごとに値が変わらないので、媒体条件の外に 1 本だけ置く。**下の 2 つの媒体条件の中には書かない（字の大きさや外余白と違い、 幅で変わる値ではないため。片方の塊にだけ書くと、もう片方の幅で直らない）。 会社概要の「画像だけの見出し」向けに書かれた main.css の :is(.entry-content, .page-content__body) #profile h4 { line-height: 0 } が、同じ `id="profile"` を使うこのページの**文字の見出し 2 件**へ巻き添えで 当たり、行送りを 0 にしていた。写し込み（data-style.css）は `.page-content .page-content__body * { line-height: 1.5 }` で字の大きさの 1.5 倍を配るが、(0,2,0) なので (1,1,1) のこの規則に負ける。 実測（両側を同じ測り方で・2026-09-03）。**移行元の行送りは、幅によらず字の 大きさのちょうど 1.5 倍である**。 見出し 幅 移行元の字 / 行送り dev の行送り h4.s1c3__title 1440px 15px / 22.5px 0px h4.s1c3__title 375px 17px / 25.5px 0px h4.s1c2__title 1440px 34px / 51px 0px h4.s1c2__title 375px 34px / 51px 0px h4.s1c3__title は移行元も dev も 2 行に折り返すが、dev は 2 行が同じ縦位置に 重なって字が読めない。h4.s1c2__title は 1 行だが、器の高さが移行元 51px に対し dev は 36px に縮み、以降の内容が上へずれる。 **勝つ理由。**当てる側は (id 1・クラス 4)、漏れてくる側は (id 1・クラス 1・ 要素 1) である。id の数が同じときはクラスの数が多い側が勝つので、この 1 本で 戻せる（`.data` を足してあるのは、上の節そのものの規則と同じ理由である）。 **単位を付けない 1.5 で書く。**写し込みが配る値そのものだからである。 **この節の注釈は前から打ち消しの対象に「行送り」を挙げていたのに、当て直しが 無かった。**なぜ無かったのかは分からない。Bug #2690 の直しで、行送りの当て直し だけが漏れたと見られる。 **h3.whiteBox__title には当て直しが要らない。**漏れてくる規則の当て先が `h4` だけだからである。会社情報向けの別の規則（`#profile :is(h2, h3, h4, h5, h6)`）は 見出し全体へ `line-height: inherit` を与えるが、この節が `#profile` へ `line-height: inherit` を当てているので、写し込みの 1.5 がそのまま受け継がれる. */ .page-content .page-content__body .data #profile .s1c2__title { line-height: 1.5; } .page-content .page-content__body .data #profile .s1c3__title { line-height: 1.5; } @media screen and (min-width: 750px) { /* 移行元の実測: 26px / 行送り 26px / 上外余白 25px. */ .page-content .page-content__body .data #profile .secHead__title { margin-top: 25px; font-size: 26px; line-height: 1; } /* 移行元の実測: 16px / 内余白 5px 35px / 1px の枠. */ .page-content .page-content__body .data #profile .whiteBox__title { border: 1px solid #474747; padding: 5px 35px; font-size: 16px; } /* 移行元の実測: 34px / 下外余白 20px. */ .page-content .page-content__body .data #profile .s1c2__title { margin-bottom: 20px; font-size: 34px; } /* 移行元の実測: 15px / 下外余白 20px. */ .page-content .page-content__body .data #profile .s1c3__title { margin-bottom: 20px; font-size: 15px; } } @media screen and (max-width: 749px) { .page-content .page-content__body .data #profile .secHead__title { margin-top: 6.66665vw; font-size: 7.99998vw; line-height: 1; } .page-content .page-content__body .data #profile .whiteBox__title { border: 1px solid #474747; padding: 1.33333vw 9.33331vw; font-size: 4.79999vw; } .page-content .page-content__body .data #profile .s1c2__title { margin-bottom: 5.33332vw; font-size: 9.06664vw; } .page-content .page-content__body .data #profile .s1c3__title { margin-bottom: 3.99999vw; font-size: 4.53332vw; } } /* -------------------------------------------------------------- * 7. パンくずの帯を、このページだけ移行元と同じ高さ・色・行送りにする（Bug #2920） * * 移行元のサイト共通 CSS は、パンくずの器をこう書いている。 * * #contents .path { width: 1268px; margin: 0 auto; padding: 15px 0 0; * height: 57px; font-size: 11px; } * * box-sizing が既定（content-box）のままなら、57px の中身に上の内余白 15px が * 足されて外形は 72px になる。テーマ共通側（main.css の .pa-breadcrumb__inner）は * この 72px を写しており、全下層ページでそのとおりに出ている。 * * ところがこのページだけは、移行元のページ専用 CSS（写し元は * assets/introduce-data/css/data-style.css）がページ全体へ次の初期化を当てる。 * * * { box-sizing: border-box; line-height: 1.5; } * body { color: #474747; } * a { color: inherit; } * * box-sizing が border-box になると、height: 57px に内余白が含まれて外形が * 57px になる。差の 15px は、ちょうど上の内余白ぶんである。文字と行送りも * 同じ初期化が出どころで、移行元のこのページは文字が #474747・行送り 16.5px * （11px × 1.5）になる。 * * テーマの写しは、この初期化を `.page-content .page-content__body` の下へ * 閉じ込めている。サイト全体へ初期化が届くのを防ぐための判断であり、それ自体は * 正しい。ただしパンくずはその器の外（本文より上）にあるため、閉じ込めた初期化が * 届かない。そこでこのファイルで当て直す。このファイルはこのページでしか * 読み込まないので（inc/introduce-data.php）、他のページには届かない。 * * 実測（幅 1440px・2026-09-03）: * * | 測ったもの | 外形の高さ | 文字色 | 行送り | * |---|---:|---|---:| * | 移行元 /introduce/data/ | 57px | rgb(71,71,71) | 16.5px | * | 移行元 /introduce/survey/ | 72px | rgb(0,0,0) | normal | * | 移行元 /company/profile.html | 72px | rgb(0,0,0) | normal | * | dev（11 ページとも） | 72px | rgb(0,0,0) | 17.6px | * * つまり 57px になるのは移行元でもこのページだけである。テーマ共通側の 72px は * 他のページでは正しいので、共通側は触らない。 * * 【この節はパソコン幅（750px 以上）だけに当てる】狭い画面では、テーマ共通側が * `.pa-breadcrumb { display: none }` でパンくずごと隠している（移行元の * スマートフォン版がパンくずをほぼ持たないため）。テーマ共通側は同じ幅に * `.pa-breadcrumb__inner { min-height: 0 }` も持っており、これは「パンくずを出す * 判断になったときのため」に残されたものである。幅で囲まないと、ここのクラス * 2 つの指定がそれに勝ってしまう。いまは隠れていて画面に出ないが、出す判断に * なった瞬間に狂うので、あらかじめパソコン幅へ閉じ込めておく。 * * 【段のリンクには触らない】移行元のページ専用 CSS は `a { color: inherit }` を * 持つので、リンクも器と同じ #474747 になりそうに見える。しかし移行元の共通 CSS * 側のリンクの色がそれに勝っており、段のリンクは移行元でも黒（rgb(0,0,0)） * だった（2026-09-03 に移行元を実測して確認）。テーマ共通側の * `.pa-breadcrumb__inner a { color: #000 }` とすでに一致しているため、ここでは * 当て直さない。色を変えるのは器だけである。リンクではない末尾の段 * （`.breadcrumb_last`）はテーマ側が色を持たないので、器から受け継いで * rgb(71,71,71) になる。 * * 詳細度: テーマ共通側は `.pa-breadcrumb__inner`（クラス 1 つ）。ここはクラス * 2 つなので勝つ。 * -------------------------------------------------------------- */ @media screen and (min-width: 750px) { .pa-breadcrumb .pa-breadcrumb__inner { min-height: 57px; line-height: 1.5; color: #474747; } } /* -------------------------------------------------------------- * 8. 携帯幅を移行元のスマホ版に合わせる（ユーザー裁定 46・Bug #3102） * * 【根拠】ユーザー裁定 46（2026-09-03）で「携帯幅は原則、移行元のスマホ版 * （/sp/introduce/data/）の表示に合わせる」と決まった。dev は 1 枚のページで * 両方の幅をまかなうため、写し込み（data-style.css）は移行元の**パソコン版**の * スタイルシートだけを写している。パソコン版とスマホ版で値が違う箇所は、この * ファイルで当て直す。 * * 【直す 4 か所】移行元の値は本番の https://www.p-a.jp/sp/introduce/data/ と、 * そのページが読む assets/css/data-style.css・css/style.css を 2026-09-03 * 16:35〜16:45 JST に読んで確かめたものである。dev の値は同時刻の実測である。 * * | 対象 | 移行元スマホ版 | dev（直す前） | 直したあと | * |---|---|---|---| * | 数字「192,000」（.s1c1__number）の字 | 6rem = 59.9999px | 18.66662vw = 69.9998px | 15.99996vw | * | 丸い囲み（.whiteBox__title）の縦位置 top | -3rem = -29.9999px | -5.33332vw = -19.9999px | -7.99998vw | * | 会員プロフィールの区画（#profile）の上下の内余白 | 25px | 0px | 25px | * | 右側の列（.s1c1__row__right）の上の外余白 | 3rem = 29.9999px | 指定なし（0px） | 7.99998vw | * * 【rem を vw へ換算する根拠】移行元のスマホ版は `html { font-size: 2.66666vw }` を * 敷いているので **1rem = 2.66666vw**（幅 375px で 9.99998px）である。dev は根の字を * 16px 固定にしたまま、移行元の rem を vw へ換算して写す方式を採っている * （data-style.css の冒頭の注釈にその理由がある）。だから移行元の 3rem は * 7.99998vw と書く。6rem は 15.99996vw、-3rem は -7.99998vw である。 * * 【区画の内余白 25px だけが rem でない理由】移行元のスマホ版でこの節に当たって * いるのは、ページ専用のスタイルシートではなく、**サイト共通の css/style.css に * ある `#profile` の規則**（`padding: 25px 0 25px`）である。この画面が会社情報の * ページと同じ `id="profile"` を使っているために巻き添えで当たっている（同じ * 巻き添えは dev 側でも起きていて、このファイルの 6 の節が扱っている）。共通の * 側は rem で書かれていないので、移行元の見た目をそのまま再現するために固定値の * 25px で写す。 * * 【`:not(.-sp2line)` を外してはいけない】2 行の見出し用の * * .page-content .page-content__body .whiteBox__title.-sp2line { top: -9.33331vw } * * も (0,4,0) の強さを持つ。このファイルは data-style.css より後から読まれるので、 * `:not()` が無いと**2 行の見出しの縦位置まで奪ってしまう**。移行元は両版とも * -3.5rem（= -9.33331vw）なので、そこは変えてはいけない。 * * 【勝つ理由】写し込み（data-style.css）の `.page-content .page-content__body …` は * (0,3,0) である。ここは `.data` を 1 つ足してクラス 4 つにしているので勝つ * （丸い囲みの 1 本だけは `:not(.-sp2line)` が中身のクラス 1 つぶんを足すので * (0,5,0) になる。`-sp2line` が付いた見出しには当たらないので、2 行の見出しとは * ぶつからない）。 * `#profile` については、このファイルの 6 の節が同じ * `.page-content .page-content__body .data #profile` で `padding: 0` を当てている。 * 詳細度は同じ (1,3,0) なので、**あとに書いてあるこちらが勝つ**。6 の節より前へ * 移すと効かなくなる。 * * 【この節が扱わないもの】同じ Bug #3102 の 1 番（上部の追従タブ `div.spMenu`）は、 * このファイルの 9 の節が扱う。ここでは触らない。 * -------------------------------------------------------------- */ @media screen and (max-width: 749px) { .page-content .page-content__body .data .s1c1__number { font-size: 15.99996vw; } .page-content .page-content__body .data .whiteBox__title:not(.-sp2line) { top: -7.99998vw; } .page-content .page-content__body .data .s1c1__row__right { margin-top: 7.99998vw; } .page-content .page-content__body .data #profile { padding: 25px 0; } } /* -------------------------------------------------------------- * 9. 携帯幅の上部の追従タブ（ユーザー裁定 46・Bug #3102 の 1 番） * * 【根拠】ユーザー裁定 46（2026-09-03）で「携帯幅は原則、移行元のスマホ版 * （/sp/introduce/data/）の表示に合わせる」と決まった。移行元のスマホ版は * 画面の上端に「会員プロフィール」「活動実績」の 2 つのタブを貼り付けて持つ。 * dev は 1 枚のページで両方の幅をまかなうため、組みは本文の組み立て * （inc/introduce-data.php の pa_introduce_data_insert_sp_tabs()）が足し、 * 出し分けと見た目はこの節が持つ。 * * 【移行元の値】本番 https://www.p-a.jp/sp/introduce/data/ と、そのページが読む * assets/css/data-style.css（519〜563 行）・assets/js/script.js・assets/js/common.js を * 2026-09-03 16:35〜17:10 JST に読んで確かめた。幅 375px での実測は次のとおりである。 * * | 対象 | 値 | * |---|---| * | 器 div.spMenu | 幅 375 × 高さ 59.98px・position: fixed・top: 0・z-index: 5 | * | 字 | 16px・太さ 700・白（rgb(255,255,255)） | * | 下の罫線 | 1px solid rgb(71,71,71) | * | 隠れているとき | opacity: 0 / visibility: hidden / transform: translateY(-59.9999px) | * | 出ているとき（.visible） | opacity: 1 / visibility: visible / transform: none | * | 移り変わり | all 0.3s | * | 左のタブ「会員プロフィール」 | x 0・幅 187・高さ 58.98px・地色 rgb(0,155,211) | * | 右のタブ「活動実績」 | x 187・幅 188・高さ 58.98px・地色 rgb(245,72,81)・左の罫線 1px | * * 【rem を vw へ換算する根拠】移行元のスマホ版は `html { font-size: 2.66666vw }` を * 敷いているので **1rem = 2.66666vw**（幅 375px で 9.99998px）である。dev は根の字を * 16px 固定にしたまま、移行元の rem を vw へ換算して写す方式を採っている（8 の節と * 同じ方式）。移行元の 1.6rem は 4.26666vw、6rem は 15.99996vw、-6rem は * -15.99996vw である。 * * 【地色が移行元の CSS の 2 行と違う理由】移行元の data-style.css は * `.spMenu__item.-profile { background: #58D2D6 }`・`.spMenu__item.-result * { background: #FD7B7D }` と書いているが、**画面に出ているのはページの中に * 書かれた `