@charset "utf-8"; /* ============================================================== * しあわせレポートの一覧（/introduce/happyreport/）のページ専用の見た目 * （Bug #2822） * * ## 何を写したのか * * 移行元の一覧は、サイト共通の CSS のほかに 7 本の CSS を読み込んでいた。 * 本文と画像は移行できているが、この 7 本のうちページ専用の 3 本が * テーマへ写されておらず、dev では本文の既定の見た目がそのまま出ていた。 * * 1. /introduce/css/style_introduce.css … テーマに写しがある * 2. /introduce/happyreport/css/style_happyreport.css … テーマに写しがある * 3. /introduce/happyreport/assets/css/happyreport.css … **写しが無かった** * * このファイルは 3 番の未写し分である。**写す規則は、dev の一覧を実際に描画して * 1 規則ずつ差し込み、「見た目が変わるかどうか」で選んである**（幅 1440px と * 375px の 2 通りで判定）。すでにテーマが同じ見た目を出している規則は写していない。 * * ## 🚨 写さなかったもの: 移行元の「文書全体の初期化」 * * 写す候補のうち 10 は、クラスも id も持たない要素だけのセレクタだった。移行元が * 1 枚で完結した静的ページだったときの初期化（normalize）である。**そのまま * 器の下へ入れてはいけない。** * * - 68 要素へ `margin: 0; padding: 0; border: 0` を当てる塊は、**移行元が後から * 足し直している罫線や外余白まで巻き込んで消す**（判定の生データに * `border-bottom-width: 2px → 0px` が出ている） * - テーマは自前の初期化を持っているので、二重にもなる * * そこで 10 は機械の書き出しから外し、**1 つずつ人が判断して下の「土台」の塊へ * 手で書いた**。判断の内訳はその塊の中に書いてある。 * * ## なぜ器の下へ閉じ込めるのか * * すべてのセレクタに `:is(.entry-content, .page-content__body)` を前置してある。 * 写し元はページ 1 枚のための CSS で、根の要素（html / body）にも当てていた。 * そのまま写すとテーマのヘッダー・フッターまで巻き込む。前置きの形は、同じテーマの * /introduce/data/ の写し（inc/introduce-data.php が読み込む CSS）に合わせてある。 * * 🚨 `:is()` の詳細度は**中身の最大値**になる。ここでは引数がどちらもクラス 1 つ * なので、前置きは「クラス 1 つ分」だけ重くなる。写し元より 1 段重いので、 * 写し元では効いていなかった順序の勝ち負けが変わりうる。値を足すときは * 描画して確かめること。 * * ## なぜ rem を px へ直したのか * * 写し元は根の文字の大きさを幅で切り替え、寸法を rem で書いていた * （750px 以上 = 10px / 749px 以下 = 画面幅の 2.5445292621%）。このテーマの根の * 文字は 16px 固定で、全ページに関わるため変えられない。そこで rem を実寸へ * 換算してある。 * * - 幅の指定がある規則 … その幅の換算値 1 つに直す * - 幅の指定が無い規則で rem を含むもの … 換算値が 2 通り必要なので、 * 750px 以上と 749px 以下の 2 つのメディアクエリへ書き分ける * * **写し元の `html { font-size }` そのものは写していない**（rem の基準を決める * ためだけの指定で、換算で用済みのため）。 * * ## 画像の指し先 * * 投入は本文の `` が指す画像だけを取り込み、CSS の背景画像は 1 点も * 取り込まない。別に取り込んで ../img/ へ置き、ここで指し直してある。 * 写し元には根からの経路（/assets/img/...）と CSS からの相対経路（../img/...）の * 2 通りがあるが、**移行元で実際に届くのは根からの経路だけ**である（相対経路は * 移行元でも 404。2026-09-02 に実測）。届かない側を使う規則は写していない。 * * ## 札の意匠はここには無い（共有のまま） * * 体験談の札（.stories-list__item）の中身の意匠は、テーマの main.css が持つ * 「体験談の札の中身を移行元へ揃える（Task #1745）」の節が作っている。 * **ここへは引っ越していない。**移行元も店舗ページ（/branch/**.html）で同じ意匠を * 使っており（2026-09-02 に静岡・銀座・新宿の 3 ページを実測し、枠線・角丸・ * 帯の下地・書体がすべて一致。**違うのは札の幅だけで 340px 対 616px**）、 * 一覧だけに閉じ込めると店舗 3 ページが素の表示へ戻ってしまう。 * * このファイルが持つのは**一覧にしか無い分**である。 * * ## 生成のしかた * * このファイルは _c1-top-gap-tools/w4-2822-compose.mjs が組み立てている * （入力 = 判定の生データと移行元の CSS）。手で直すときは、次に生成し直したときに * 消えないよう、生成器の側も直すこと。 * * 🚨 **その生成器はこのリポジトリに入っていない**（2026-09-03 に確認。作業ツリー * にも主リポジトリにもディレクトリが無く、`git ls-files "*w4-2822*"` も 0 件）。 * したがって、いま手で直した分を生成器へ写すことはできない。生成器を持ち込んで * 組み直す人は、下の 2 か所にある**手で書いた塊を必ず引き継ぐこと**。 * * 1. 「画面の幅で出し分ける道具」（機械の書き出しの直前）… 規則 1 組 * 2. 「機械の書き出しでは届かなかった 6 件を手で直す」（ファイルの末尾）… 項目 6 つ * （うち 4 番は取り下げ済みで規則を持たない。実際に規則を持つのは 5 つ） * * どちらも「機械の判定が寸法の変化しか見ておらず、寸法を持たない `
` の * 出し分けや、テーマ側と詳細度で競り負ける値を拾えなかった」ぶんである。 * * 🚨 **手で書いた分をこの 2 か所の外に置かない。**機械の書き出しの中に置くと、 * 次に生成し直したときに黙って消える。末尾の 5 件目（写真カードの区画の上の * 内余白を打ち消す 1 本）は、実際に機械の書き出しの中に紛れていたものを * 2026-09-03 に末尾へ移した。置き場所は * tests-retired/pa-cms-happyreport-list-fidelity が見張っている. * ============================================================== */ /* ============================================================== * 土台（移行元の「文書全体の初期化」のうち、器の中で意味を持つものだけ） * * 写す候補 10 のうち、当てるのは 6 で、外したのは 4 である。判断の内訳: * * | 写し元の規則 | 判断 | 理由 | * |---|---|---| * | 68 要素へ margin/padding/border を 0 | **外した** | 移行元が後から足し直す罫線・外余白を巻き込んで消す。テーマの初期化と二重になる | * | a:hover img { opacity: 1 } | **外した** | 描画して測ると**変わる値が 0 件**。移行元では共通 CSS の opacity: .8 を打ち消すための指定で、テーマに打ち消す相手が無い | * | * { line-height: 1.5 } / p { line-height: 1.8 } | 当てる（下記） | 移行元の本文の行送りの 2 段構え。札の中は Task #1745 の節が実測値で上書きする（詳細度が上なので勝つ） | * | * { box-sizing: border-box } | 当てる | 写し元の寸法の計算の土台。外すと幅と内余白の足し算が変わる | * | a { text-decoration: none; color: inherit } | 当てる | 器の中のリンクの下線を外す（描画すると underline → none で 3 値変わる）。写し元は 3 つの規則に分けて同じことを書いており、ここでは 1 つにまとめた | * | section { position: relative } | 当てる | 写し元の作りに合わせる。絶対配置の子の基準になる | * | img { vertical-align: bottom; max-width: 100%; height: auto } | 当てる | 画像の下の隙間を消す（測ると middle → bottom の 1 値だけが変わる。max-width と height はテーマに既にある） | * | a { transition: all 0.5s }（750px 以上） | 当てる | 移行元の見た目の一部。害は無い | * ============================================================== */ :is(.entry-content, .page-content__body) * { box-sizing: border-box; line-height: 1.5; } :is(.entry-content, .page-content__body) p { line-height: 1.8; } :is(.entry-content, .page-content__body) a { color: inherit; text-decoration: none; } :is(.entry-content, .page-content__body) section { position: relative; } :is(.entry-content, .page-content__body) img { height: auto; max-width: 100%; vertical-align: bottom; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) a { transition: all 0.5s; } } /* ============================================================== * 画面の幅で出し分ける道具（.visible-lg / .visible-md / .visible-sm） * * 写し元 = 移行元 happyreport.css の 14〜36 行。移行元はこの 3 つのクラスで、 * 改行（`
`）や区画を画面の幅ごとに出し分けている。 * * 🚨 **機械の書き出しは「狭い画面で .visible-sm を出す」1 本しか拾えていなかった。** * 隠す側の 5 本が落ちている（すぐ下の機械の書き出しの先頭に、拾えた 1 本がある）。 * 落ちた理由は、写すかどうかの判定が「要素の寸法が変わるかどうか」で決まって * いたためである。この一覧が持つ .visible-sm は 4 つとも `
` で、`
` は * 寸法を持たない。そのため「変わらない」と判定され、写す候補から外れていた。 * 実際には広い画面で改行が 4 本余計に入り、大見出しが 1 行から 2 行へ、 * リード文が 2 行から 4 行へ増えていた（Bug #3065 の「連動して直るはずの値」）。 * * 🚨 **この塊は下の .pageNav の規則より前に置くこと。**移行元も出し分けの道具を * ファイルの先頭に置いている。同じ札（`ul.pageNav.visible-sm`）に対しては、 * あとから来る `.pageNav { display: flex }` が同じ詳細度で勝ち、広い画面でも * 出たままになる。順を入れ替えるとこの区画が消える（移行元・dev とも幅 1440px で * `display: flex` を実測。2026-09-03）. * ============================================================== */ @media screen and (min-width: 1024px) { :is(.entry-content, .page-content__body) .visible-md, :is(.entry-content, .page-content__body) .visible-sm { display: none; } :is(.entry-content, .page-content__body) .visible-lg { display: inherit; } } @media screen and (min-width: 750px) and (max-width: 1023px) { :is(.entry-content, .page-content__body) .visible-lg, :is(.entry-content, .page-content__body) .visible-sm { display: none; } :is(.entry-content, .page-content__body) .visible-md { display: inherit; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .visible-lg, :is(.entry-content, .page-content__body) .visible-md { display: none; } } /* ============================================================== * ここから下は機械で写した分である（w4-2822-compose.mjs が差し込む）。 * 写し元 = /introduce/happyreport/assets/css/happyreport.css * ============================================================== */ @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .visible-sm { display: inherit; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .l-inner-ex { width: 90%; max-width: 1120px; margin: 0 auto; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .l-inner-ex { padding: 0 3.8168vw; } } :is(.entry-content, .page-content__body) .btn-a { position: relative; font-weight: bold; display: block; margin: 0 auto; } :is(.entry-content, .page-content__body) .btn-a:after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .btn-a:after { width: 40px; height: 40px; right: 20px; transition: 0.3s all; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .btn-a:after { width: 6.1069vw; height: 6.1069vw; right: 5.0891vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .btn-a { font-size: 22px; padding: 21.5px 20px 21.5px 40px; border-radius: 40px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .btn-a { border-radius: 10.1781vw; font-size: 3.5623vw; padding: 5.0891vw 5.0891vw 5.0891vw 10.1781vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .btn-a.-lg { width: 419px; min-width: 419px; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .btn-a.-md { width: 367px; min-width: 367px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .btn-a.-md { width: 80%; max-width: 285px; } } /* 【ユーザー裁定 31（2026-09-03）】文字色 `#FD7B7D` を移行元どおり写す。 以前はここに「白地に対するコントラスト比が 2.53:1 なので写さない」という 注記を置き、共通側（main.css の「男性視点の水色と女性視点の桃色」の節）が 本文色を継がせるのに任せていた。読みやすさの合否は「移行元より悪化させない」 という相対の基準で見るため、移行元と同じ色に戻すことは違反にならない。 実測（幅 1440px・2026-09-03）: 移行元 rgb(253,123,125) / dev rgb(71,71,71). */ :is(.entry-content, .page-content__body) .btn-a.-wh { border: 2px solid #FD7B7D; background: #fff; color: #FD7B7D; } :is(.entry-content, .page-content__body) .btn-a.-wh:hover { background: #FD7B7D; color: #fff; } :is(.entry-content, .page-content__body) .btn-a.-orange:hover { background: #fff; color: #FFB660; } :is(.entry-content, .page-content__body) .heading-a { text-align: center; } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .heading-a { font-weight: 600; font-size: 5.598vw; margin-bottom: 7.6336vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .sec { padding: 80px 0 0; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .sec { padding: 10.1781vw 0 0; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .onlyPc { display: none; } } :is(.entry-content, .page-content__body) .pageNav { width: 90%; margin: 0 auto; display: flex; justify-content: space-between; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .pageNav { max-width: 750px; flex-wrap: wrap; margin-bottom: 50px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .pageNav { max-width: 312px; flex-wrap: wrap; margin-bottom: 7.6336vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .pageNav__item { width: calc(25% - 15px); } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .pageNav__item { width: 49%; margin-top: 2.5445vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .pageNav__item__link { display: block; width: 100%; background-color: #FFB660; color: #fff; font-family: "Noto Sans JP", sans-serif; text-align: center; font-size: 12px; border-radius: 30px; padding: 10px; position: relative; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .pageNav__item__link { display: block; width: 100%; background-color: #FFB660; color: #fff; font-family: "Noto Sans JP", sans-serif; text-align: center; font-size: 3.0534vw; border-radius: 7.6336vw; padding: 2.5445vw; position: relative; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .pageNav__item__link:after { position: absolute; content: ""; background: url(../img/arrow_right.svg?ver=bcf416153cc7) center/contain no-repeat; width: 6px; height: 18px; right: 10px; top: 50%; transform: translateY(-50%); } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .pageNav__item__link:after { position: absolute; content: ""; background: url(../img/arrow_right.svg?ver=bcf416153cc7) center/contain no-repeat; width: 6px; height: 18px; right: 2.5445vw; top: 50%; transform: translateY(-50%); } } :is(.entry-content, .page-content__body) .pageNav__item__link:hover { color: #FFB660; background-color: #fff; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .pageNav__item__link span { font-size: 26px; font-weight: bold; display: block; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .pageNav__item__link span { font-size: 6.6158vw; font-weight: bold; display: block; } } :is(.entry-content, .page-content__body) .btn-a.-wh:after { background: url(../img/arrow_pink.png?ver=f536dff9744e) center/contain no-repeat; } :is(.entry-content, .page-content__body) .btn-a.-wh:hover:after { background: url(../img/arrow_white.png?ver=1cc19d2b156f) center/contain no-repeat; } :is(.entry-content, .page-content__body) .btn-a.-orange:after { background: url(../img/arrow-orange.png?ver=368912b099ff) center/contain no-repeat; } :is(.entry-content, .page-content__body) .btn-a.-orange:hover:after { background: url(../img/arrow-right-orange.png?ver=824f0bbf9e09) center/contain no-repeat; } :is(.entry-content, .page-content__body) .hero { position: relative; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .hero { padding: 40px 17px 50px 17px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .hero { padding: 11.4504vw 3.3079vw 9.4148vw 3.3079vw; } } :is(.entry-content, .page-content__body) .experience__inner.bg-pink { background: #fff3f3; } :is(.entry-content, .page-content__body) .experience__inner.bg-blue { background: #eafafb; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience #age20s .sec__head, :is(.entry-content, .page-content__body) .experience #age30s .sec__head, :is(.entry-content, .page-content__body) .experience #age40s .sec__head, :is(.entry-content, .page-content__body) .experience #age50s .sec__head { width: 83.3333333333%; max-width: 1200px; margin: 0 auto; padding: 20px 0; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience #age20s .sec__head, :is(.entry-content, .page-content__body) .experience #age30s .sec__head, :is(.entry-content, .page-content__body) .experience #age40s .sec__head, :is(.entry-content, .page-content__body) .experience #age50s .sec__head { width: 90%; margin: 0 auto; padding: 2.5445vw 0; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience #age20s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age30s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age40s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age50s .sec__head .heading-a { position: absolute; left: 50%; transform: translateX(-50%); background: #F3F7F9; padding: 10px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience #age20s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age30s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age40s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age50s .sec__head .heading-a { position: absolute; left: 50%; transform: translateX(-50%); background: #F3F7F9; padding: 2.5445vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience #age20s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age30s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age40s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age50s .sec__head .heading-a { font-weight: bold; font-size: 26px; top: -28px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience #age20s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age30s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age40s .sec__head .heading-a, :is(.entry-content, .page-content__body) .experience #age50s .sec__head .heading-a { font-weight: 600; font-size: 4.5802vw; top: -5.3435vw; min-width: 58.5242vw; } } /* 【ユーザー裁定 31（2026-09-03）】文字色 `#58d2d6` を移行元どおり写す。 理由は上の `.btn-a.-wh` と同じである。実測（幅 1440px・2026-09-03）: 移行元 rgb(88,210,214) / dev rgb(71,71,71). */ :is(.entry-content, .page-content__body) .experience .btn-a.-blue { border: 2px solid #58d2d6; background: #fff; color: #58d2d6; } :is(.entry-content, .page-content__body) .experience .btn-a.-blue:after { background: url(../img/arrow-right-green.svg?ver=ddcd47b31f52) center/contain no-repeat; } :is(.entry-content, .page-content__body) .experience .btn-a.-blue:hover { background: #58d2d6; color: #fff; } :is(.entry-content, .page-content__body) .experience .btn-a.-blue:hover:after { background: url(../img/arrow-right-green.svg?ver=ddcd47b31f52) center/contain no-repeat; } /* 🚫 写さない規則: .flexBox--3col .flexBox__item の外余白（移行元 0 30px 30px）。 共通側（main.css の横送りの区画・Task #1700）が札と札の間 60px と札の下の帯 30px として同じ間隔を既に作っており、両方を当てると間隔が二重になる （広い画面で 30 + 60 + 30 = 120px）。main.css の同じ節に「ここでは当てない」と 明記がある. */ @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list { margin-top: 26px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list { margin-top: 6.6158vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list__item { vertical-align: top; font-size: 16px; line-height: 1.53; box-sizing: border-box; text-align: left; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list__item { vertical-align: top; font-size: 4.0712vw; line-height: 1.53; box-sizing: border-box; text-align: left; } } /* 🚫 写さない規則: .stories-list__item の外余白。上の .flexBox__item と同じ札を 指しており、同じ理由（間隔の二重）で外す。片方だけ外しても、もう片方から 同じ差が出る. */ @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list__inner { border: 1px solid #a29e9d; border-radius: 10px; position: relative; height: 100%; display: flex; flex-direction: column; background: #FFF; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list__inner { border: 1px solid #a29e9d; border-radius: 2.5445vw; position: relative; height: 100%; display: flex; flex-direction: column; background: #FFF; } } /* 🚫 写さない値: リンクの width（広い画面 340px・狭い画面 86.514vw）。 札の幅は共通側（main.css の横送りの区画）が札そのものへ当てており、 main.css の説明にも「移行元が指定する幅 34rem は横送りの区画が札の側へ 当てている」と書いてある。リンクへ幅を当てると、狭い画面で札とリンクの幅が 食い違う（共通側の札は 324px 固定、86.514vw は 749px で 648px まで広がり、 57px 間隔で並ぶ隣の札と重なる）。幅を書かなければ display: block のリンクが 札の幅いっぱいに広がり、どの幅でも札と一致する. */ :is(.entry-content, .page-content__body) .experience .stories-list a { height: 100%; overflow: visible; display: block; color: #000000; } /* * 🚨 **マウスを載せたときの薄まりは写さない（Codex の P2 指摘）。** * * 移行元は `.experience .stories-list a :hover` と**空白の入った子孫の指定**で書いて * おり（写しの `assets/css/page/introduce/happyreport.css` 1437 行）、指した要素と * その先祖が重なって薄まる。**共通側はこれを承知のうえで、札の全体へ 1 回だけ * 当てる形に整えている**（`main.css` の「マウスを載せたときの薄まり」の節に理由が * 書いてある）。 * * ここへ同じ子孫の指定を写すと、**共通側の 0.8 と重なって 0.64 まで薄くなる**。 * 共通側の判断へ合わせて、この画面では当てない. */ @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .post-date { color: #463d3c; position: absolute; right: 8px; top: 8px; text-align: right; font-size: 11px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .post-date { color: #463d3c; position: absolute; right: 8px; top: 8px; text-align: right; font-size: 2.799vw; } } :is(.entry-content, .page-content__body) .experience .stories-list .copy strong, :is(.entry-content, .page-content__body) .experience .stories-list .copy span { background: linear-gradient(transparent 50%, #fff2cf 0%); } :is(.entry-content, .page-content__body) .experience .stories-list__item--woman .copy { color: #e17777; font-weight: bold; } :is(.entry-content, .page-content__body) .experience .stories-list__item--man .copy { color: #208abb; font-weight: bold; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list { font-size: 13px; padding: 20px 0; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list { font-size: 3.0534vw; padding: 13px 0 10px; } } :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item { width: 33.33%; text-align: center; border-left: 1px dashed #463d3c; } /* 上の規則は共通側の「先頭だけ罫線を消す」指定（main.css の .stories-list .number-list .list_item:first-child）と詳細度が同じで、 このファイルが後から読まれるため先頭にも破線が戻ってしまう。 3 項目の「間」だけを区切るのが移行元の姿なので、ここでも先頭を 0 に戻す. */ :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item:first-child { border-left: 0; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item .number-list__cont { font-size: 14px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item .number-list__cont { font-size: 3.0534vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item .number-list__cont .lg { font-size: 25px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item .number-list__cont .lg { font-size: 5.0891vw; } } :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item .number-list__cont:before { content: ""; position: absolute; top: 9px; background-size: 100%; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--number .number-list__cont { margin-left: 30px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--number .number-list__cont { margin-left: 15px; } } :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--number .number-list__cont:before { background-image: url(../img/stories-list_icon_number01.png?ver=c928071e848b); } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--number .number-list__cont:before { left: -30px; width: 23px; height: 19px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--number .number-list__cont:before { left: -15px; width: 11.5px; height: 9.5px; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--contact .number-list__cont { margin-left: 27px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--contact .number-list__cont { margin-left: 14px; } } :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--contact .number-list__cont:before { background-image: url(../img/stories-list_icon_contact01.png?ver=50703ea6de64); } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--contact .number-list__cont:before { left: -27px; width: 22px; height: 17px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--contact .number-list__cont:before { left: -14px; width: 11px; height: 8.5px; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--period .number-list__cont { margin-left: 28px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--period .number-list__cont { margin-left: 14px; } } :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--period .number-list__cont:before { background-image: url(../img/stories-list_icon_period01.png?ver=397494ceef8d); } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--period .number-list__cont:before { left: -28px; width: 21px; height: 21px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .stories-list .number-list .list_item--period .number-list__cont:before { left: -14px; width: 10.5px; height: 10.5px; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .read-btn { text-align: center; background: #463d3c; color: #FFF; border: 1px solid #463d3c; border-radius: 0 0 9px 9px; font-family: Spinnaker, sans-serif; font-size: 10px; padding: 4px 0; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .read-btn { text-align: center; background: #463d3c; color: #FFF; border: 1px solid #463d3c; border-radius: 0 0 9px 9px; font-family: Spinnaker, sans-serif; font-size: 2.5445vw; padding: 4px 0; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile { padding: 0 20px 20px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile { padding: 0 3.8168vw 3.8168vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info { margin-top: 23px; min-height: 121px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info { margin-top: 5.0891vw; } } :is(.entry-content, .page-content__body) .experience .profile-info .img-area { width: 71px; } /* 右の余白は広い画面だけに当てる。共通側（main.css）は 749px 以下で移行元の 携帯向けの値 12px を当てているが、このセレクタは .profile-info を含むぶん 詳細度が高く、幅の場合分けなしに書くと携帯幅でも 20px で上書きしてしまう. */ @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info .img-area { margin-right: 20px; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info .txt-area { margin-top: 3px; font-size: 16px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info .txt-area { margin-top: 0; font-size: 3.5623vw; } } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type { font-weight: bold; color: #463d3c; position: relative; z-index: 1; } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type { font-size: 3.0534vw; } } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type:before { content: ""; position: absolute; z-index: -1; background-size: 134px 50px; width: 134px; height: 50px; top: -15px; left: -20px; } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type--tanki:before { background: url(../img/type_tanki_bg01.png?ver=a31a9529d5a5) no-repeat; } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type--app:before { background: url(../img/type_app_bg01.png?ver=6d881b52e830) no-repeat; } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type--inexperienced:before { background: url(../img/type_inexperienced_bg01.png?ver=2ff4e058c907) no-repeat; } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type--oyakoko:before { background: url(../img/type_oyakoko_bg01.png?ver=b679f1e2c87b) no-repeat; } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type--honki:before { background: url(../img/type_honki_bg01.png?ver=6d22fa90d8fa) no-repeat; } :is(.entry-content, .page-content__body) .experience .profile-info .txt-area .type--koso:before { background: url(../img/type_koso_bg01.png?ver=6365e0364646) no-repeat; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info__name, :is(.entry-content, .page-content__body) .experience .profile-info__age { display: inline-block; color: #463d3c; font-weight: bold; font-size: 14px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info__name, :is(.entry-content, .page-content__body) .experience .profile-info__age { display: inline-block; color: #463d3c; font-weight: bold; font-size: 3.5623vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info__name span { font-size: 23px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info__name span { font-size: 5.8524vw; } } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info__age span { font-size: 18px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info__age span { font-size: 4.5802vw; } } :is(.entry-content, .page-content__body) .experience .profile-info__other { color: #748c50; font-size: 0; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .experience .profile-info__other li { font-size: 12px; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .experience .profile-info__other li { font-size: 3.5623vw; } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .report__list__item a { margin: 0 2.5445vw; } } :is(.entry-content, .page-content__body) .report__list__item a:hover { opacity: 0.8; color: #fd7b7d; } @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .report__list__btn { margin-top: 20px; } } /* ⛳ 写す先を移した規則: .fadeUp { opacity: 0 }。**このファイルの末尾にある 「5. ふわっと現れる登場演出」の節へ写してある**（Bug #3083）。 ここに書かなかった当時の理由は「不透明度を戻す JavaScript がテーマに無く、 写すとページの中身が丸ごと見えなくなる」だった。Bug #3083 で assets/js/happyreport-list.js に戻す処理（setupReveal）を足したので、この 理由は無くなった。手で足した分は機械の書き出しより後ろに置く決まりなので、 規則そのものは末尾に置いてある. */ /* ============================================================== * 機械の書き出しでは届かなかった 6 件を手で直す * （Bug #3063 / #3064 / #3065 / #3066 と、写真カードの区画の上の内余白。 * **うち 4 番の Bug #3066 は 2026-09-03 に取り下げ済みで、規則を持たない**。 * 取り下げの経緯を残すため、番号と説明はその場所に置いたままにしてある） * * ここから下は機械の書き出しではなく、2026-09-03 に移行元 * （https://www.p-a.jp/introduce/happyreport/）と dev を同じ手順で測って * 手で書いた分である。**機械の書き出しより後ろに置く。**打ち消す相手（テーマ * 共通の main.css、および同じ 1 枚の中の機械の書き出し）と詳細度が並ぶ場面が * あり、そのときは後ろに来たほうが勝つ。 * この CSS は functions.php が `array( 'pa-main' )` を前提に読み込むので、 * main.css より後ろに来ることは保証されている。 * * 🚨 **手で書いた分をここ（と「画面の幅で出し分ける道具」）以外に置かない。** * 機械の書き出しの中に置くと、次に生成し直したときに黙って消える。5 件目は * 実際に機械の書き出しの中に紛れていたので、ここへ移した（2026-09-03）。 * * 🚨 **移行元の 1rem は 2 つある。**750px 以上は 10px、749px 以下は * 画面幅の 2.5445292621% である。狭い画面の値を 10px 基準で換算しない。 * ============================================================== */ /* -------------------------------------------------------------- * 1. 本文と見出しの文字色（Bug #3063） * * 移行元は見出しにも本文にも色を書いていない。文書全体の色（移行元 * happyreport.css の `body { color: #474747 }`）をそのまま継がせている。この * `body` の規則が移植の判断表から漏れており、dev では次の 2 つが無競争で * 当たっていた。 * * - 見出し … main.css の `.entry-content h2 / h3` の * `color: var(--pa-color-heading)`（金色 #a3762b） * - 本文 … main.css の * `body:not(.pa-profile-new) .entry-content` の `--pa-color-text`（黒 #000） * * 実測（幅 1440px・2026-09-03。左が移行元・右が dev）: * * | 対象 | 移行元 | dev | * |---|---|---| * | 大見出し h2.hero__title | rgb(71,71,71) | rgb(163,118,43) | * | 中見出し h2.heading-a.lg（3 本） | rgb(71,71,71) | rgb(163,118,43) | * | 小見出し h3.heading-a（4 本） | rgb(71,71,71) | rgb(163,118,43) | * | リード文 p.hero__text | rgb(71,71,71) | rgb(0,0,0) | * | 氏名 p.report__name | rgb(71,71,71) | rgb(0,0,0) | * * 直し方も移行元と同じ形にする。器へ #474747 を置き、見出しは色を書かずに * 継がせる。 * * 🚨 **`:has()` を 2 つ重ねているのには理由がある。**打ち消す相手 * （`body:not(.pa-profile-new) .entry-content`）はクラス 2 個 + 要素 1 個の重さを * 持つ。`:has()` が 1 つだけだとクラス 2 個 + 要素 0 個で、クラスの数が並ぶうえ * 要素の数で負ける。2 つ重ねるとクラス 3 個になり、確実に勝つ。目印は 2 つとも * このページにしか無いもので、main.css も同じ 2 つでこのページを見分けている * （`.report__list` = 写真カードの並び / `.experience__slider` = 体験談の横送り）. * -------------------------------------------------------------- */ :is(.entry-content, .page-content__body):has(.report__list):has(.experience__slider) { --pa-color-text: #474747; color: var(--pa-color-text); } /* 見出しは移行元と同じく色を持たず、器から継ぐ。`:has()` で一覧のページだけに 絞り、他のページの見出しの金色には触らない. */ :is(.entry-content, .page-content__body):has(.report__list) :is(h1, h2, h3, h4, h5, h6) { color: inherit; } /* 大見出しの罫線と字間（Bug #3063）。移行元の `.hero__title` は罫線を持たず、 字間も詰めていない。dev は本文の既定の見出し（main.css の `.entry-content h2` の下罫線 2px と内余白 10px、`.entry-content :is(h2〜h6)` の `letter-spacing: 0.05em`）を受けていた。中見出し・小見出しの罫線は main.css の `.heading-a` の節（`border: 0`）が既に外しているので、ここは大見出しだけを直す. 字間は罫線と同じ節の話ではないが、外さないと 1 行に収まる文字数が減り、 移行元 1 行の大見出しが 2 行になる（下の 3 の実測に効く）. */ :is(.entry-content, .page-content__body) .hero__title { padding-bottom: 0; border-bottom: 0; letter-spacing: normal; } /* -------------------------------------------------------------- * 2. 写真の器がつぶれ、写真が器の外へ出る（Bug #3064） * * 移行元は `

`（360.28×218px）が ``（352×218px）を * 抱えている。投入された dev の本文は同じクラスが `` で、行の中に置かれる * 要素のため中の写真の高さを持てない。実測（幅 1440px）で器は 313.95×20px しか * 無く、`` は器の外（y=796.58）へ出ていた。 * * **本文は入れ直さない**（入れ直しには承認が要る）。タグが違うだけでクラス名は * 両側同じなので、`display: block` を当てて移行元の `

` と同じ並び方に戻す. * -------------------------------------------------------------- */ :is(.entry-content, .page-content__body) .report__list__img { display: block; } /* 写真そのものの幅。移行元は広い画面で幅を指定せず、画像の実寸（352px）で出す。 狭い画面だけ `width: 100%` を当てる（移行元 happyreport.css の `.report__list__img img`）。main.css の `.entry-content:has(.report__list) .report__list__img img` は幅の切り替えを 持たず `width: 100%` を全幅で当てているため、上の `display: block` と合わせると 広い画面で 360.29px まで伸びて移行元と 8.29px ずれる。ここで広い画面だけ 実寸へ戻す。セレクタに `.report__list__item` を足しているのは、main.css の 相手（クラス 3 + 要素 1）より確実に重くするためである. */ :is(.entry-content, .page-content__body):has(.report__list) .report__list__item .report__list__img img { width: auto; } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body):has(.report__list) .report__list__item .report__list__img img { width: 100%; } } /* -------------------------------------------------------------- * 3. 本文の器が 139px 狭い（Bug #3065） * * 実測（幅 1440px・2026-09-03）: 移行元の `div.l-inner-ex` は x=160・幅 1120px、 * dev は x=229.5・幅 981px（2 か所とも同じ値）。 * * 【981px になる仕組み】981 ÷ 0.9 = 1090 で、親の器が 1090px に絞られている。 * 1090px を作っているのは main.css の次の 2 つである。 * * - 骨格段階の共通ブロック（672〜677 行）の * `.single-content { padding: 0 var(--pa-inner-gutter) }`（左右 15px ずつ） * - `.single-content:not(.single-content--branch) { max-width: var(--pa-inner-ex) }` * （19696〜19700 行。`--pa-inner-ex` は 336 行の 1120px） * * 1120 − 15 − 15 = 1090 が本文の器（`.entry-content`）の幅になり、その 90% が * 981px である（ブラウザで祖先をたどって実測。2026-09-03）。 * * 【直し方】移行元では `.l-inner-ex` の親が画面いっぱい（幅 1440px の画面で * 1440px）なので、幅は「画面の 90%・上限 1120px」で決まる。dev では親が * 1090px の柱なので、割合の基準がそもそも違う。そこで、テーマが既に使っている * 「柱の外へ出す」書き方（main.css の Bug #1816 / #1839 の節と同じ形）で、 * 画面の幅を基準に組み直す。 * * - 幅は `min(90vw, 1120px)`。移行元の `width: 90%; max-width: 1120px` と同じ意味になる * - 左右の外余白は `calc(50% - min(45vw, 560px))`。`50%` は親（柱）の半分で、 * 親は画面の中央に置かれているので、結果として画面の中央へそろう * * 検算（左が移行元・右がこの規則を当てた dev。どちらも実測）: * * | 画面幅 | 移行元 x / 幅 | dev x / 幅 | * |---|---|---| * | 1440px | 160 / 1120 | 160 / 1120 | * | 1000px | 50 / 900 | 50 / 900 | * | 375px | 0 / 375 | 0 / 375 | * * 器が柱より広くなるが、横スクロールは出ない。main.css が * `body:has(.entry-content .experience__slider) { overflow-x: clip }` を既に * 当てているためである（幅 1440px と 375px で、文書の幅が画面の幅と等しいことを実測）. * -------------------------------------------------------------- */ @media screen and (min-width: 750px) { :is(.entry-content, .page-content__body) .l-inner-ex { width: min(90vw, 1120px); margin-inline: calc(50% - min(45vw, 560px)); } } @media screen and (max-width: 749px) { :is(.entry-content, .page-content__body) .l-inner-ex { width: 100vw; margin-inline: calc(50% - 50vw); } } /* -------------------------------------------------------------- * 4. 狭い画面で中見出しが 36px のまま残る（Bug #3066）→ **この塊は空にした** * * 【2026-09-03 に取り下げた】ここには、狭い画面の中見出しを移行元へ戻す * 上書きを 1 本置いていた。 * * @media screen and (max-width: 749px) { * :is(.entry-content, .page-content__body):has(.experience__slider) * .experience .sec__head .heading-a.lg { * margin-bottom: 7.6336vw; font-size: 5.598vw; } * } * * 置いた当時の相手は main.css の * `.entry-content:has(.experience__slider) .experience .sec__head .heading-a.lg` * で、**36px を画面幅の切り替えなしに当てていた**。だから狭い画面だけ後ろから * 打ち消す必要があった。 * * その後、書体と携帯の物差しの直し（同じ Bug #3083 の中の別の作業）で、 * main.css の側が**自分で狭い画面の値を持つように**なった。 * * main.css `@media (max-width: 749px)` * … `.heading-a` → `margin: 0 0 calc(3 * var(--pa-hr-u))` = 7.6336vw * … `.heading-a.lg` → `font-size: calc(2.2 * var(--pa-hr-u))` = 5.598vw * （`--pa-hr-u` は 749px 以下で 2.5445292621vw。3 × と 2.2 × は上と同値） * * つまり**同じ値を 2 か所で指定した状態**になっていた。二重を残すと、片方だけ * 直したときに食い違う。相手が画面幅の切り替えを持つようになったので、こちらの * 上書きは要らない（この判断は tests-retired/pa-cms-happyreport-list-fidelity の 5 の節が * 見張っている）。 * * 外したあとに実測して、移行元と一致したままであることを確認した * （移行元 = 本番 www.p-a.jp を携帯の名乗り・幅 375px で 2026-09-03 06:31 UTC に * 取得。「年齢別の結婚相談所の体験談」20.9924px / 下の外余白 28.626px、 * 「20代の結婚相談所体験談」17.1756px / 同 28.626px）。 * * 🚨 **main.css の狭い画面の規則を消すと、この差が戻る。**消すときはここへ * 上書きを戻すか、main.css の側で移行元の値を保つこと. * -------------------------------------------------------------- */ /* -------------------------------------------------------------- * 5. 写真カードの区画の上に内余白 80px が残る * * 写し元 happyreport.css の 1827 行に `.report { padding-top: 0 }` がある。 * 写真カードの区画だけは、`.sec` が当てる上の内余白を打ち消す指定である。 * 機械の書き出しがこの 1 行を落としていたため、dev だけが上に内余白を持って * いた（実測・2026-09-03: 移行元 0px に対し dev は幅 1440px で 80px 0px 0px・ * 幅 375px で 38.1679px 0px 0px。区画の高さは 1440px で 723.19px 対 803.19px）。 * * 🚨 **この塊（ファイルの末尾）に置くのは、機械の書き出しの中に置くと次に * 生成し直したときに黙って消えるためである。**消えると区画の高さが 80px 戻る。 * * 打ち消す相手は同じ 1 枚の中にある `.sec` の 2 つの規則 * （`@media screen and (min-width: 750px)` の `padding: 80px 0 0` と * `@media screen and (max-width: 749px)` の `padding: 10.1781vw 0 0`）である。 * どちらも詳細度は (0, 2, 0) でこの規則と並ぶため、**後ろに書いたほうが勝つ**。 * この塊は機械の書き出しより後ろなので、打ち消しは効いたままである * （むしろ機械の書き出しの中にあったときより確実になる。この 1 枚の中に * `.report` を当てる規則はこの 1 本だけで、`.sec` を当てるのも上の 2 本だけで * あることを確認済み）. * -------------------------------------------------------------- */ :is(.entry-content, .page-content__body) .report { padding-top: 0; } /* -------------------------------------------------------------- * 6. ふわっと現れる登場演出が丸ごと無い（Bug #3083） * * 移行元は、区画が画面の下から入ってきたところで「透明のまま 40px 下に置いた * 状態」から「不透明で定位置」へ 0.7 秒かけて動かす。dev にはこの演出の CSS も * JavaScript も 1 つも無く、区画がいきなり出ていた。 * * 写し元は移行元 `assets/css/happyreport.css` の 1954〜2003 行である。 * * .fadeUp { opacity: 0 } * .fadeUp.js-scroll.is-active:not(.-delay) { * animation: fadeUp 700ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards } * @keyframes fadeUp { 0% { opacity: 0; transform: translateY(4rem) } * 100% { opacity: 1; transform: translateY(0) } } * * `is-active` を付けるのは assets/js/happyreport-list.js の setupReveal() で、 * 発火の条件（区画の上端 − 画面の高さ + 80px）まで移行元と同じ式にしてある。 * * 【移行元と揃えていない点は 3 つある】 * * 1. **隠す側を `.fadeUp.js-scroll` に絞る**（移行元は素の `.fadeUp`）。理由は * 下の規則の注記に書いてある * 2. `.-delay`（0.5 秒遅らせる版）は写さない。移行元のこのページで `-delay` が * 付いた要素は 0 個である（`legacy/www.p-a.jp/public/introduce/happyreport/index.html` * を数えて確認）。当たり先の無い規則を持ち込まない * 3. **動きを控える設定（`prefers-reduced-motion: reduce`）を尊重する。**移行元は * 尊重していないが、テーマの既存方針（main.css の `.front-page .pa-reveal` の節・ * assets/js/legacy-slider.js の自動送り）に合わせる。この設定のときは最初から * 不透明で定位置に置き、動かさない * * 🚨 **`4rem` をそのまま書かない。**移行元の 1rem は 750px 以上で 10px、749px 以下で * 画面幅の 2.5445292621% だが、**このテーマの根の文字は全ページ 16px 固定**である。 * `4rem` と書くと 64px になり、移行元の 40px より 24px 多く動く。距離は変数 * `--pa-hr-fade-up-distance` に持たせ、狭い画面だけ移行元の換算式へ差し替える. * * 🚨 **セレクタに `.entry-content` を前置しない。**演出が付く 6 区画のうち 3 つ * （成婚までの流れ・一度ご来店ください・店舗一覧）は本文の器の**外**（`