...> つまり body_class() の出力先はではなく div#body_wrap であり、にはクラスが一切付かない。本番トップページ（固定ページID 156）の実HTMLでも次のとおり確認した。

したがって `body.page-id-472 ...` と書くと**一致する要素が存在せず、CSSがまったく効かない**。要素セレクタを付けずに `.page-id-472 ...` とすることで、クラスが body でも div#body_wrap でも一致し、かつ page-id-472 は当該固定ページにしか出力されないためスコープの限定性も維持できる。なおSWELL側のCSSが `#body_wrap` を含むセレクタは5件のみで、詳細度の衝突はほぼ想定されない。万一SWELL側の指定が勝つ箇所が出た場合は、その1ルールだけ `#body_wrap.page-id-472 ...` へ引き上げる（全体を引き上げる必要はない）。 --------------------------------------------------------------------------- このファイルで「やらないこと」 - SWELL標準のヘッダー／フッター／グローバルメニューへの変更 - 固定ページタイトル・パンくず・サイドバーの非表示（SWELLのDOMクラスを推測しないため。実DOM確認後に追記する。それまではWordPress管理画面側の設定で対応する。README参照） - body / html への overflow 指定（SWELLのsticky（追従）ヘッダーを壊す可能性があるため使用しない） - ヒーローの再現・再生成（承認済みPCヒーローV8／レスポンシブV2の移植は次工程で行う）実装先行型（ブラウザ上でデザインを詰める方式）の土台であり、各セクションの完成デザインはこの時点では含まない。 =========================================================================== */ /* --------------------------------------------------------------------------- 1. 共通デザイン変数後からこのブロックの値を変えるだけで、ページ全体の余白・幅・文字サイズ・配色を一括調整できるようにしている。 :root ではなく .page-id-472 へ定義することで、他ページの既存CSSや SWELLのカスタムプロパティと競合させない。 --------------------------------------------------------------------------- */ .page-id-472 { /* --- ブランドカラー --- */ --lm-color-deep: #0B528D; /* Deep Blue … 見出し・引き締め */ --lm-color-middle: #006CAA; /* Middle Blue … 基準色・リンク */ --lm-color-bright: #0099E0; /* Bright Blue … CTA・強調・アクセント */ /* --- 文字・背景 --- */ --lm-color-text: #10222F; /* 本文（黒ではなく濃紺寄り） */ --lm-color-muted: #5A6B78; /* 補足・キャプション */ --lm-color-bg: #FFFFFF; /* 本文背景の基本 */ --lm-color-bg-soft: #F2F6F9; /* 淡いブルーグレー（セクション交互背景） */ --lm-color-border: rgba(11, 82, 141, 0.14); /* 意味のある細い線 */ /* --- 用途を限定する色 --- */ /* ヒーロー専用の深いネイビー。本文セクションの全面背景には使用しない。 */ --lm-color-hero-navy: #061422; /* LINEグリーン。LINEそのものを示す箇所（セクション5の中央要素）だけで使用。 */ --lm-color-line: #06C755; /* --- 幅 --- */ --lm-content-wide: 1200px; /* 広いコンテンツ幅 */ --lm-content: 1120px; /* 通常コンテンツ幅 */ --lm-reading-width: 740px; /* 文章の読みやすい幅（720〜760px） */ /* --- 余白 --- */ /* PC（1200px以上）で左右64px以上を確保し、モバイルでは24pxまで縮む */ --lm-gutter: clamp(24px, 5.4vw, 64px); /* セクション上下：1200pxで120px、1600px以上で160px */ --lm-section-space: clamp(80px, 10vw, 160px); /* 見出しと本文の間：24〜36px */ --lm-space-heading: clamp(24px, 2.2vw, 36px); /* 要素間：20〜32px */ --lm-space-item: clamp(20px, 1.8vw, 32px); /* --- タイポグラフィ --- */ /* セクション番号・英字ラベル：12〜14px */ --lm-fs-label: clamp(0.75rem, 0.68rem + 0.18vw, 0.875rem); /* 大見出し：PCで約40〜56px */ --lm-fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); /* 中見出し：PCで約28〜36px */ --lm-fs-h3: clamp(1.375rem, 1.05rem + 1.1vw, 2.25rem); /* 小見出し（項目名） */ --lm-fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 本文：17〜19px */ --lm-fs-body: clamp(1rem, 0.94rem + 0.25vw, 1.1875rem); /* 補足・キャプション：14〜16px */ --lm-fs-small: clamp(0.875rem, 0.84rem + 0.12vw, 1rem); --lm-lh-body: 1.8; --lm-lh-heading: 1.45; /* 英字ラベル用の字送り */ --lm-ls-label: 0.14em; /* --- モーション --- */ /* prefers-reduced-motion 対応のため、時間は必ずこの変数を経由させる。 */ --lm-motion-duration: 0.7s; --lm-motion-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* --------------------------------------------------------------------------- 2. セクションの外枠ブロックパターン側の各セクションは section.lm-home-section.lm-home-（全幅グループ） └ div.lm-home-section__inner（幅と左右余白を担当）という2階層になっている。幅の制御を内側の __inner に持たせているため、SWELL側の本文コンテナがどのような幅・余白であっても破綻しない（外枠が広ければ全幅に見え、狭ければその中に収まる）。100vw を使う全幅ハックは、Windows環境でスクロールバー幅ぶんの横スクロールを生むため使用しない。 --------------------------------------------------------------------------- */ .page-id-472 .lm-home-section { position: relative; padding-block: var(--lm-section-space); background-color: var(--lm-color-bg); color: var(--lm-color-text); } /* 淡いブルーグレー背景。セクションのAdditional CSS classへ付け足して使う */ .page-id-472 .lm-home-section.is-lm-bg-soft { background-color: var(--lm-color-bg-soft); } /* 内側コンテナ＝内容の幅を担当する。左右余白を padding ではなく「利用可能幅から差し引く」形にしているため、 --lm-content（1120px）が内容そのものの幅になり、画面が狭いときは左右に --lm-gutter を必ず残したまま縮む。例）1440px … 内容1120px ／左右160px 1200px … 内容1072px ／左右64px 375px … 内容 343px ／左右 16px 100vw を使わないため、スクロールバー幅による横はみ出しが原理的に起きない。 */ .page-id-472 .lm-home-section__inner { width: min(var(--lm-content), 100% - (var(--lm-gutter) * 2)); margin-inline: auto; } /* 図解・事例など、やや広く使いたいセクション用 */ .page-id-472 .lm-home-section__inner.is-lm-wide { width: min(var(--lm-content-wide), 100% - (var(--lm-gutter) * 2)); } /* 文章主体のブロック用（720〜760px） */ .page-id-472 .lm-home-reading { max-width: var(--lm-reading-width); } /* --------------------------------------------------------------------------- 3. タイポグラフィ SWELL標準の見出し装飾（下線・背景等）が付く可能性があるため、このページのセクション見出しは専用クラス側で明示的に指定する。 font-family はSWELLカスタマイザーの設定を尊重し、ここでは指定しない。 --------------------------------------------------------------------------- */ /* セクション番号／英字ラベル */ .page-id-472 .lm-home-label { margin: 0 0 var(--lm-space-item); color: var(--lm-color-middle); font-size: var(--lm-fs-label); font-weight: 700; line-height: 1.5; letter-spacing: var(--lm-ls-label); text-transform: uppercase; } /* 大見出し（各セクションのh2） */ .page-id-472 .lm-home-title { margin: 0 0 var(--lm-space-heading); color: var(--lm-color-deep); font-size: var(--lm-fs-h2); font-weight: 700; line-height: var(--lm-lh-heading); letter-spacing: 0.01em; /* 強制改行に依存せず、文章量が増えても崩れにくくする */ text-wrap: balance; } /* 中見出し（セクション内のh3） */ .page-id-472 .lm-home-subtitle { margin: 0 0 var(--lm-space-heading); color: var(--lm-color-deep); font-size: var(--lm-fs-h3); font-weight: 700; line-height: var(--lm-lh-heading); } /* 項目名（カード・ステップ内のh4） */ .page-id-472 .lm-home-itemtitle { margin: 0 0 0.6em; color: var(--lm-color-deep); font-size: var(--lm-fs-h4); font-weight: 700; line-height: var(--lm-lh-heading); } /* 本文 */ .page-id-472 .lm-home-section p { font-size: var(--lm-fs-body); line-height: var(--lm-lh-body); } .page-id-472 .lm-home-section p:not(:last-child) { margin-bottom: var(--lm-space-item); } /* 導入文（見出し直後のリード） */ .page-id-472 .lm-home-lead { max-width: var(--lm-reading-width); color: var(--lm-color-text); } /* 補足・キャプション */ .page-id-472 .lm-home-note { max-width: var(--lm-reading-width); color: var(--lm-color-muted); font-size: var(--lm-fs-small); line-height: 1.75; } /* 結論・言い切りの一文 */ .page-id-472 .lm-home-conclusion { max-width: var(--lm-reading-width); color: var(--lm-color-deep); font-size: var(--lm-fs-h4); font-weight: 700; line-height: 1.7; } /* --------------------------------------------------------------------------- 4. 並びの基本カラムブロック（core/columns）は狭い画面で自動的に縦積みになるが、子要素の min-width 由来の横スクロールを防ぐため保険をかける。 --------------------------------------------------------------------------- */ .page-id-472 .lm-home-section .wp-block-columns { gap: var(--lm-space-item); } .page-id-472 .lm-home-section .wp-block-column { min-width: 0; } .page-id-472 .lm-home-section img, .page-id-472 .lm-home-section figure, .page-id-472 .lm-home-section video, .page-id-472 .lm-home-section svg { max-width: 100%; height: auto; } /* 意味のある細い線で区切る項目枠。影や角丸を多用した量産カードにしない */ .page-id-472 .lm-home-item { padding: var(--lm-space-item); border-top: 1px solid var(--lm-color-border); background-color: transparent; } .page-id-472 .lm-home-item > *:last-child { margin-bottom: 0; } /* 番号付きの問い・ステップ用 */ .page-id-472 .lm-home-num { display: block; margin-bottom: 0.5em; color: var(--lm-color-bright); font-size: var(--lm-fs-label); font-weight: 700; letter-spacing: var(--lm-ls-label); } /* リスト（顧客側／企業側の流れ、図解の項目など） */ .page-id-472 .lm-home-section .wp-block-list { margin: 0; padding-left: 1.25em; font-size: var(--lm-fs-body); line-height: var(--lm-lh-body); } .page-id-472 .lm-home-section .wp-block-list li + li { margin-top: 0.4em; } /* CTAボタン。SWELLのボタン設定と競合させないため、専用クラス側だけを指定する。最終的な配色・形状はブラウザ上で詰める。 */ .page-id-472 .lm-home-cta { margin-top: var(--lm-space-heading); } .page-id-472 .lm-home-cta .wp-block-button__link { background-color: var(--lm-color-bright); color: #FFFFFF; font-size: var(--lm-fs-body); font-weight: 700; } /* --------------------------------------------------------------------------- 5. セクション個別の受け皿この時点では「後からCSS／JavaScriptを足すための位置」を用意するだけで、完成デザインは入れていない。 --------------------------------------------------------------------------- */ /* --- セクション1：ヒーロー --------------------------------------------------- 承認済みPCヒーローV8／レスポンシブV2の移植は「10. ヒーロー」で行っている。 SWELL標準ヘッダーをこの上へ重ねる指定は「11. SWELL標準ヘッダーの重ね方」。ヒーロー内部に独自ヘッダーは作らない。 */ /* --- セクション11：お客様の声 --- 公開可能な素材が揃うまでは非表示にできる構造にしておく。「準備中」表記は出さない。ブロックの「追加CSSクラス」へ is-lm-hidden を付けるか、ブロック自体を削除して運用する。 */ .page-id-472 .is-lm-hidden { display: none; } /* --------------------------------------------------------------------------- 6. モーション（prefers-reduced-motion への対応土台）アニメーションを追加するときは、必ず transition-duration / animation-duration: var(--lm-motion-duration) の形で書く。下の指定により、Reduced Motion環境では自動的に静止する。 --------------------------------------------------------------------------- */ .page-id-472 .lm-home-anim { transition-duration: var(--lm-motion-duration); transition-timing-function: var(--lm-motion-ease); } @media (prefers-reduced-motion: reduce) { .page-id-472 { --lm-motion-duration: 0.001s; } .page-id-472 .lm-home-anim { animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- 7. 横スクロール防止の保険 body / html へ overflow を指定するとSWELLの追従ヘッダー（sticky）を壊す可能性があるため使用しない。代わりに、はみ出す可能性のあるセクション内部だけを対象にする。 --------------------------------------------------------------------------- */ .page-id-472 .lm-home-section { /* clip は sticky を壊さず、はみ出しだけを切る */ overflow-x: clip; } .page-id-472 .lm-home-section * { /* 長い英数字URLなどによる横方向のはみ出しを防ぐ */ overflow-wrap: break-word; } /* =========================================================================== 8. 固定ページID 472のフル幅化 2026-08-06、固定ページID 472のプレビュー実DOM（ログイン状態）を確認して確定させた。以下は推測ではなく、すべて実測にもとづく。確認したDOM階層： div#content.l-content.l-container max-width:1296px / padding:64px 48px 0 / margin-bottom:96px └ main#main_content.l-mainContent max-width:900px ← SWELLの --article_size └ div.l-mainContent__inner └ div.post_content padding:0 16px / margin-top:64px ├ h1.c-pageTitle ← 固定ページ標準タイトル └ section.alignfull.lm-home-* ← SWELLの .alignfull で全幅化されている └ div.wp-block-group__inner-container max-width:900px ★内容幅の実際の制限 └ div.lm-home-section__inner div#breadcrumb.p-breadcrumb.-bg-on ← パンくず（背景 #f7f7f7）サイドバーは存在しない（#body_wrap に -sidebar-off が付与済み）外枠に白い箱・枠線・影・角丸は存在しなかった（#content / #main_content / .l-mainContent__inner / .post_content はいずれも背景透明・border 0・ radius 0・shadow none）ため、打ち消し用のCSSは書いていない。要点：セクションはSWELLの .alignfull で既に全幅になっていたが、その直下の .wp-block-group__inner-container が --article_size（900px）で絞られており、内容が1120pxまで広がれなかった。ここを解除するのが本質的な修正。 --------------------------------------------------------------------------- なぜ管理画面設定やPHPフックではなくCSSで行うか（優先順位の検討結果） 1) ページ単位設定：SWELLが持つページ単位メタは swell_meta_ttl_pos / swell_meta_show_sidebar / swell_meta_show_index / swell_meta_css / swell_meta_js などで、「タイトルを非表示にする」項目は存在しない（親テーマを全文検索して確認）。パンくずの表示位置はカスタマイザーのグローバル設定 pos_breadcrumb で、今回は変更禁止のため使えない。サイドバーは既にオフ（#body_wrap に -sidebar-off）で、対応不要だった。 2) PHPフック：タイトルは SWELL_Theme::pluggable_parts( 'page_title', ... ) → swl_parts__page_title() という「function_exists で差し替える」方式のため、子テーマで定義すると全ページのタイトル出力を自前で再実装することになり、他ページへ影響する。これは「既存処理を削除しない」条件に反するため採用しない。パンくずには表示可否を制御するフィルターが無い（あるのは一覧データを加工する swell_breadcrumb_list_data のみ）。 3) よって、ページ472限定のCSSが最も安全かつ確実。PHP側は変更していない。 =========================================================================== */ /* 8-1. 固定ページ標準タイトルとパンくずを非表示にする */ .page-id-472 .c-pageTitle, .page-id-472 #breadcrumb { display: none; } /* 8-2. SWELL標準コンテナの幅制限と、本文外側の不要な余白を解除する */ .page-id-472 #content.l-content { max-width: none; padding-top: 0; padding-inline: 0; margin-bottom: 0; } .page-id-472 #main_content.l-mainContent { max-width: none; } .page-id-472 .l-mainContent__inner { max-width: none; } .page-id-472 .post_content { max-width: none; padding-inline: 0; margin-top: 0; } /* 8-3. SWELLの .alignfull は left: calc(50% - 50vw); width: 100vw; max-width: 100vw !important; で全幅化している。上の 8-2 で親要素がすでに画面幅になっているため、 100vw方式は不要であり、環境によってはスクロールバー幅ぶんの横スクロールを生む。そこで position/left/width を素の状態へ戻し、「親の全幅をそのまま使う」通常のブロックとして敷く。 max-width は SWELL側が !important なので、こちらも !important で戻す。 */ .page-id-472 .post_content > .alignfull { position: static; left: auto; width: auto; max-width: none !important; margin-inline: 0; } /* 8-4. セクション間の余白をゼロにし、背景面を隙間なく隣接させる */ .page-id-472 .post_content > .lm-home-hero, .page-id-472 .post_content > .lm-home-section { margin-block: 0; } /* 8-5. ★本質的な修正 SWELLの .alignfull > .wp-block-group__inner-container { max-width: var(--article_size); } により内容幅が900pxで止まっていた。ページ472のセクション配下だけ解除する。 */ .page-id-472 .lm-home-hero > .wp-block-group__inner-container, .page-id-472 .lm-home-section > .wp-block-group__inner-container { max-width: none; margin-inline: 0; } /* SWELLの .alignfull > ... > * { margin-bottom: 2em; } を打ち消す */ .page-id-472 .lm-home-section > .wp-block-group__inner-container > * { margin-bottom: 0; } /* 8-6. SWELL標準の見出し装飾（h2の塗り背景・h3の下線）を打ち消す。カスタマイザー由来のインラインCSSで .post_content h2:where(...) { background: var(--color_htag); padding: .75em 1em; } .post_content h3:where(...)::before { 2pxのグラデーション下線 } が当たっている。:where() は詳細度0なので実効は .post_content h2 相当（0,1,1）であり、下の（0,3,0）で !important なしに上書きできる。新しい装飾は足さず、SWELLの装飾を外すだけに留めている。 */ .page-id-472 .post_content .lm-home-title, .page-id-472 .post_content .lm-home-subtitle, .page-id-472 .post_content .lm-home-itemtitle { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-title::before, .page-id-472 .post_content .lm-home-title::after, .page-id-472 .post_content .lm-home-subtitle::before, .page-id-472 .post_content .lm-home-subtitle::after, .page-id-472 .post_content .lm-home-itemtitle::before, .page-id-472 .post_content .lm-home-itemtitle::after { content: none; display: none; } /* --------------------------------------------------------------------------- 9. レスポンシブの土台左右余白（--lm-gutter）を段階的に縮める。内容幅は 8-2 の width: min(...) 計算により自動追従するため、固定幅は使っていない。実測（2026-08-06）：1905/1425/1265/1185/1009/753/585/465/375/305px のすべてで、セクション背景は画面幅いっぱい・横スクロールなしを確認済み。 --------------------------------------------------------------------------- */ @media (max-width: 768px) { .page-id-472 { --lm-gutter: clamp(20px, 4vw, 32px); } } @media (max-width: 480px) { .page-id-472 { --lm-gutter: 16px; } } /* =========================================================================== 10. ヒーロー（承認済み実装の移植）移植元（見た目・動き・数値は変更していない） PCヒーロー prototypes/hero-motion-v8/styles.css （コミット e517048）レスポンシブ版 prototypes/hero-responsive-v2/styles.css （コミット 483c7b1） responsive-v2 は「1200px以上ではv8と同一の見た目」であり、v8の値をそのまま含む（responsive-v2/README.md）。よって responsive-v2/styles.css を正本として移植した。ブレークポイントと判定値は assets/js/lm-home-renewal.js の DEVICE_RULE と同じ数値を使っている。どちらかを変えるときは必ずもう一方も合わせること。 --------------------------------------------------------------------------- 移植にあたって変えたこと（見た目に関わる変更は下の2点だけ） 1) 汎用セレクタの限定プロトタイプの :root / html / body / .hero / .brand / .header / .nav / .container / .button は一切持ち込まず、すべて .page-id-472 .lm-home-hero … 配下へ限定した。CSS変数もヒーロー（および必要な2つだけ .page-id-472）へ定義しており、他のSWELLページへ漏れない。クラス名は lm-home-hero__ / lm-home-header__ へ改名した。 2) 高さからヘッダー分の減算を外したプロトタイプは自前ヘッダーがヒーローの上に「並んで」いたため height: calc(100svh - var(--header-h)) だった。本番はSWELL標準ヘッダーをヒーローへ「重ねる」ため、ヒーロー自身は画面高いっぱいを使う（ヘッダー分の空白を作らない）。そのぶん、右上の日本語コピーだけはヘッダーの下へ来るように top: calc(var(--lm-hero-header-h) + （承認済みの値）) とし、ヘッダー下端からの見た目の距離を承認済みと同じに保っている。翼の配置はヒーローの実寸から計算されるため、構図は保たれる。移植しなかったもの：独自ヘッダー（.site-header）、独自グローバルナビ（.gnav / .gnav__list / .gnav__cta / .gnav__burger）、プロトタイプ用ロゴ領域（.brand）、検証用コントロール（.protobar とその配下）、固定プレビュー用の [data-preview]、Pause用の [data-anim]、プロトタイプ専用の body / html リセット。 =========================================================================== */ /* --- 10-1. ヘッダーと共有する変数 ------------------------------------------ ヘッダーはヒーローの外側（#header）にあるため、両方から参照する値だけを .page-id-472 側に置く。それ以外のヒーロー変数はヒーロー配下に閉じている。 */ .page-id-472 { /* SWELL標準ヘッダーの高さ。2026-08-07に本番実機で実測した値。 960px以上：72px（本体のみ。キャッチフレーズ帯22pxは 11-1b で非表示） 959px以下：48px（帯は元から .pc_ で非表示） JavaScript（syncHeaderHeight）が実測値で上書きするため、ここの値はJSが動かない場合のフォールバック。 */ --lm-hero-header-h: 72px; /* 承認済みPC版の左右余白。ヒーローのコピーとヘッダーのロゴ・メニューを同じ位置で揃えるため、ヘッダー側からも参照する。 */ --lm-hero-gutter: clamp(48px, 6.2vw, 116px); /* 管理バー（ログイン時のみ）の高さぶん、ヒーローの高さを詰める。未ログインの閲覧者は 0px なので影響しない。 */ --lm-hero-voffset: 0px; --lm-hero-ease-out: cubic-bezier(.16, 1, .3, 1); --lm-hero-ink: #ffffff; --lm-hero-ink-muted: rgba(255, 255, 255, .72); --lm-hero-ink-faint: rgba(255, 255, 255, .34); } /* 管理バーは 601px以上では position: fixed（高さ32px／782px以下は46px）、 600px以下では position: absolute でスクロールと一緒に流れるため 0 に戻す。 */ .page-id-472.admin-bar { --lm-hero-voffset: 32px; } @media screen and (max-width: 782px) { .page-id-472.admin-bar { --lm-hero-voffset: 46px; } } @media screen and (max-width: 600px) { .page-id-472.admin-bar { --lm-hero-voffset: 0px; } } @media (max-width: 959px) { .page-id-472 { --lm-hero-header-h: 48px; } } /* --- 10-2. ヒーロー本体 ---------------------------------------------------- */ .page-id-472 .lm-home-hero { /* プロトタイプの :root 変数を、ヒーロー配下だけへ移したもの。値は同一。 */ --lm-hero-blue-deep: #005090; /* ブランドの青：公式ロゴPNGの実ピクセル由来 */ --lm-hero-blue: #0080c0; --lm-hero-blue-bright: #0090e0; --lm-hero-navy-ink: #0a2337; --lm-hero-bg-core: #061422; /* 深いネイビー。真っ黒にはしない */ --lm-hero-bg-edge: #02070d; --lm-hero-line-soft: rgba(255, 255, 255, .11); --lm-hero-font-display: "Helvetica Neue", "Segoe UI Semibold", "Segoe UI", Arial, "Yu Gothic UI", sans-serif; --lm-hero-font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; position: relative; z-index: 0; margin: 0; padding: 0; /* 高さは3段階で指定する。後の指定を解釈できる環境ではそちらが勝つ。 100vh はアドレスバーの分だけ実際より高くなるため、 small viewport / dynamic viewport を優先する（承認済み実装と同じ）。 */ height: calc(100vh - var(--lm-hero-voffset)); height: calc(100svh - var(--lm-hero-voffset)); height: calc(100dvh - var(--lm-hero-voffset)); min-height: 620px; overflow: hidden; isolation: isolate; color: var(--lm-hero-ink); background: linear-gradient(155.4deg, rgba(16, 54, 88, 0) 38%, rgba(16, 54, 88, .24) 50%, rgba(16, 54, 88, 0) 62%), radial-gradient(145% 130% at 8% 102%, var(--lm-hero-bg-core) 0%, var(--lm-hero-bg-edge) 70%); } /* 8-3 の `.page-id-472 .post_content > .alignfull { position: static }` は詳細度(0,3,0)で、上の(0,2,0)より強い。ヒーローは配下の装飾・コピーを absolute で並べる基準になる必要があるため、同じ詳細度・より後ろの位置で position だけを relative へ戻す（left/width/max-width は 8-3 のまま使う）。これを入れないと装飾とコピーの基準が #content（position: relative）になり、ページ最下部へ飛んでしまう。2026-08-07に実機で確認した。 */ .page-id-472 .post_content > .lm-home-hero { position: relative; } /* ブロックエディタが出力する中間コンテナ。ヒーローの高さをそのまま通す。 */ .page-id-472 .lm-home-hero > .wp-block-group__inner-container { height: 100%; } /* 既存のカスタムHTMLブロックの器。ヒーロー全面へ広げ、承認済み実装の .hero と同じ「配置の基準」にする。これにより配下の装飾・コピーは、プロトタイプとまったく同じ座標系で並ぶ。（固定ページ本文のブロックは差し替えていない。is-lm-hero-placeholder の暫定表示指定は削除済みで、出力時にクラス自体も外している） */ .page-id-472 .lm-home-hero__mount { position: absolute; inset: 0; margin: 0; padding: 0; } /* 翼の進行方向（-24.6度）へ回転させた細長い光。中央の丸いぼかしは使わない */ .page-id-472 .lm-home-hero__spine { position: absolute; left: -14%; right: -14%; top: 4%; bottom: 4%; z-index: 1; background: radial-gradient(ellipse 40% 9% at 46% 52%, rgba(20, 68, 112, .38) 0%, rgba(18, 58, 96, .14) 48%, rgba(16, 50, 84, 0) 100%); transform: rotate(-24.6deg); pointer-events: none; } /* 正式ロゴ由来の翼シルエット。位置・大きさ・回転・不透明度は JavaScript が粒子と同じ配置計算で設定する。くっきりしたロゴに見せないため、強めにぼかしている。 */ .page-id-472 .lm-home-hero__silhouette { position: absolute; z-index: 2; display: block; max-width: none; /* 本文用の max-width: 100% を打ち消す */ opacity: 0; /* 初期状態では見せない */ filter: blur(11px); pointer-events: none; will-change: opacity; } /* 共通の根元。全ての羽根が同じ起点から出ていることを示す極薄い光。位置・大きさ・角度・不透明度は JavaScript が根元の座標から設定する。 */ .page-id-472 .lm-home-hero__rootlight { position: absolute; z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 144, 224, .50) 0%, rgba(0, 108, 178, .22) 42%, rgba(0, 80, 144, 0) 100%); opacity: 0; filter: blur(26px); pointer-events: none; will-change: opacity; } /* 粒子表現のcanvas。装飾のみ（aria-hidden="true" はPHP側で付与）。ヒーローのコピーはcanvas内へ描画しない。 */ .page-id-472 .lm-home-hero__canvas { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; } /* --- 10-3. 右上：第二のメッセージ ----------------------------------------- */ .page-id-472 .lm-home-hero__sub { position: absolute; z-index: 4; /* 承認済みの値は clamp(40px, 7.2vh, 78px)。ヘッダーを重ねたぶんだけ下げ、ヘッダー下端からの距離を同じに保つ。 */ top: calc(var(--lm-hero-header-h) + clamp(40px, 7.2vh, 78px)); right: var(--lm-hero-gutter); margin: 0; padding-right: 28px; text-align: right; font-size: clamp(23px, 1.86vw, 33px); font-weight: 500; line-height: 1.78; letter-spacing: .115em; color: var(--lm-hero-ink); text-shadow: 0 1px 26px rgba(2, 7, 13, .70); } .page-id-472 .lm-home-hero__sub::after { content: ""; position: absolute; top: .4em; bottom: .4em; right: 0; left: auto; width: 1px; background: linear-gradient(180deg, rgba(0, 144, 224, .85), rgba(255, 255, 255, .07)); } /* 承認済みコピーの改行を維持する */ .page-id-472 .lm-home-hero__sub-line { display: block; } /* --- 10-4. 画面下部：メインコピー（ページ内で唯一の表示されるh1） ---------- 2行の最終レイアウトは最初から固定。マスクはブロック全体に1枚だけ。行ごとには分けない（行ごとに分けると行の境目で横に切れて見えるため）。 */ .page-id-472 .lm-home-hero__headline { position: absolute; z-index: 4; left: var(--lm-hero-gutter); right: var(--lm-hero-gutter); bottom: clamp(74px, 10.5vh, 124px); margin: 0; padding: 0; border: 0; background: none; font-family: var(--lm-hero-font-display); font-weight: 800; font-size: clamp(60px, 9.4vw, 152px); line-height: .94; letter-spacing: .004em; color: var(--lm-hero-ink); text-shadow: 0 2px 40px rgba(2, 7, 13, .55); } /* SWELL標準の見出し装飾が付かないようにする（8-6と同じ考え方） */ .page-id-472 .lm-home-hero__headline::before, .page-id-472 .lm-home-hero__headline::after { content: none; display: none; } .page-id-472 .lm-home-hero__mask { display: block; overflow: hidden; /* 一枚のクリッピングマスク */ padding-bottom: .06em; } .page-id-472 .lm-home-hero__inner { display: block; } .page-id-472 .lm-home-hero__line { display: block; white-space: nowrap; /* 折り返しを構造的に禁止する */ } /* --- 10-5. スクロールの合図 ------------------------------------------------ */ .page-id-472 .lm-home-hero__scrollcue { position: absolute; z-index: 4; left: var(--lm-hero-gutter); bottom: 30px; display: flex; align-items: center; gap: 13px; pointer-events: none; } .page-id-472 .lm-home-hero__scrollcue-label { font-family: var(--lm-hero-font-mono); font-size: 10px; letter-spacing: .26em; color: var(--lm-hero-ink-faint); } .page-id-472 .lm-home-hero__scrollcue-track { position: relative; display: block; width: 56px; height: 1px; background: rgba(255, 255, 255, .14); overflow: hidden; } .page-id-472 .lm-home-hero__scrollcue-dot { position: absolute; left: 0; top: 0; width: 18px; height: 1px; background: var(--lm-hero-blue-bright); } /* --- 10-6. モーション（テキスト側） ---------------------------------------- 翼はcanvasとシルエットが担当。コピーは「受け止める側」なので動きは最小限。文字幅が変わる性質は一切アニメーションさせない。【JavaScriptが無い／失敗した場合の可読性】コピーを隠す指定は .is-lm-js 配下だけに書いている。このクラスは JavaScriptが初期化に成功したときにだけ、is-lm-playing と同時に付く。したがって - JSが読み込まれない - JSが例外で止まる（catch内で is-lm-js を外す）のいずれでも、コピーは最終状態（表示されたまま）で読める。 --------------------------------------------------------------------------- */ @keyframes lmHeroHeaderIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* 下からのマスク解除＋ごく軽いブラー解除。横方向に切る・ずらす・複製する演出は使わない。 */ @keyframes lmHeroCopyRise { from { transform: translateY(104%); opacity: 0; filter: blur(9px); } to { transform: translateY(0); opacity: 1; filter: blur(0); } } @keyframes lmHeroSubRise { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes lmHeroCueTravel { 0% { transform: translateX(-18px); opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(56px); opacity: 0; } } /* JavaScriptが動いたときだけ、コピーを承認済みの初期状態へ置く */ .page-id-472 .lm-home-hero.is-lm-js .lm-home-hero__inner { transform: translateY(104%); opacity: 0; filter: blur(9px); will-change: transform, filter; } .page-id-472 .lm-home-hero.is-lm-js .lm-home-hero__sub, .page-id-472 .lm-home-hero.is-lm-js .lm-home-hero__scrollcue { opacity: 0; } /* 1.40-2.50s：翼が開いたタイミングで、コピーが一枚のマスクから立ち上がる */ .page-id-472 .lm-home-hero.is-lm-playing .lm-home-hero__inner { animation: lmHeroCopyRise 1.10s var(--lm-hero-ease-out) 1.40s both; } /* 2.60-3.45s：右上コピーが静かに現れる */ .page-id-472 .lm-home-hero.is-lm-playing .lm-home-hero__sub { animation: lmHeroSubRise .85s var(--lm-hero-ease-out) 2.60s both; } .page-id-472 .lm-home-hero.is-lm-playing .lm-home-hero__scrollcue { animation: lmHeroSubRise .5s var(--lm-hero-ease-out) 3.70s both; } .page-id-472 .lm-home-hero.is-lm-playing .lm-home-hero__scrollcue-dot { animation: lmHeroCueTravel 2.9s ease-in-out 4.4s infinite; } /* --- 10-7. レスポンシブ ---------------------------------------------------- 1200px 以上は上の指定＝承認済みPC版 v8 のまま。以下では触れていない。 ── responsive-v2 の画面区分（JS側 DEVICE_RULE と同じ値） ── | 区分 | 条件 | |-----------------|---------------------------------------------------| | desktop | 幅 1200px 以上 | | tabletPortrait | portrait かつ幅 768〜1199px | | tabletLandscape | landscape かつ下記スマホ横向きに当てはまらない | | mobilePortrait | portrait かつ幅 767px 以下 | | mobileLandscape | landscape かつ高さ520px以下かつ幅960px以下 | --------------------------------------------------------------------------- */ /* PC以外に共通：768〜1199pxのタブレットと、それより小さい端末。 PC版の単純縮小にしない。翼はより強く切り取る（倍率はJS側が持つ）。 */ @media (max-width: 1199px) { .page-id-472 { --lm-hero-gutter: clamp(32px, 5.2vw, 64px); } .page-id-472 .lm-home-hero { min-height: 520px; } /* メインコピーは2行を維持。画面幅に対して素直に効く vw を主にする */ .page-id-472 .lm-home-hero__headline { bottom: clamp(56px, 8vh, 92px); font-size: clamp(46px, 8.6vw, 104px); } /* 日本語コピーは右上のまま。翼との重なりは JavaScript側のサブコピー保護ゾーン（SUBCALM）が受け持つ。 */ .page-id-472 .lm-home-hero__sub { top: calc(var(--lm-hero-header-h) + clamp(28px, 5vh, 56px)); font-size: clamp(19px, 2.5vw, 26px); line-height: 1.72; padding-right: 20px; } .page-id-472 .lm-home-hero__scrollcue { bottom: 22px; } } /* タブレット縦向き：高さに余裕があるぶん、コピーを下げて余白を取る。日本語コピーは翼と競合しやすいので、メインコピーの上へ移す。 */ @media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) { .page-id-472 .lm-home-hero__headline { bottom: clamp(88px, 13vh, 170px); } .page-id-472 .lm-home-hero__sub { top: auto; bottom: calc(clamp(88px, 13vh, 170px) + 26vh); left: var(--lm-hero-gutter); right: var(--lm-hero-gutter); text-align: left; padding-right: 0; padding-left: 20px; } /* 青い縦線は左側へ回す（意匠は継承する） */ .page-id-472 .lm-home-hero__sub::after { right: auto; left: 0; } } /* スマートフォン縦向き：幅 767px 以下。縦長前提で構図を組み替える。日本語コピーはメインコピーの上。 */ @media (max-width: 767px) { .page-id-472 { --lm-hero-gutter: clamp(18px, 5.6vw, 28px); } .page-id-472 .lm-home-hero { min-height: 460px; /* 下端はホームバーを避ける */ padding-bottom: env(safe-area-inset-bottom); } /* メインコピー：左揃えのまま下部に置く。 2行を基本にし、極端に小さくしないための下限を持たせる。 --lm-hero-copy-lift は「コピー群をまとめて上へ持ち上げる量」。既定は 0px で、承認済みの値のまま。スマートフォン縦向き（480px以下）でだけ値を入れる（下の 10-8 参照）。日本語コピーも同じ変数を足すので、 2つの相対関係（27vh）は変わらない。 */ .page-id-472 .lm-home-hero__headline { left: max(var(--lm-hero-gutter), env(safe-area-inset-left)); right: max(var(--lm-hero-gutter), env(safe-area-inset-right)); bottom: calc(clamp(52px, 9vh, 96px) + env(safe-area-inset-bottom) + var(--lm-hero-copy-lift, 0px)); font-size: clamp(34px, 11.2vw, 52px); line-height: .98; letter-spacing: .002em; } /* 日本語コピー：メインコピーより上。左揃えで青い縦線は左へ。 */ .page-id-472 .lm-home-hero__sub { top: auto; bottom: calc(clamp(52px, 9vh, 96px) + env(safe-area-inset-bottom) + 27vh + var(--lm-hero-copy-lift, 0px)); left: max(var(--lm-hero-gutter), env(safe-area-inset-left)); right: max(var(--lm-hero-gutter), env(safe-area-inset-right)); text-align: left; padding-right: 0; padding-left: 15px; font-size: clamp(16px, 4.5vw, 21px); line-height: 1.85; letter-spacing: .08em; } .page-id-472 .lm-home-hero__sub::after { right: auto; left: 0; } .page-id-472 .lm-home-hero__scrollcue { left: max(var(--lm-hero-gutter), env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); } .page-id-472 .lm-home-hero__scrollcue-track { width: 40px; } } /* --- 10-8. スマートフォン縦向きのコピー群の持ち上げ（2026-08-07）------------- ヘッダー下から日本語コピーまでの空間が広く見えたため、コピー群だけをまとめて上へ 40px 持ち上げる。ヒーローの高さ（100svh系）や翼・粒子の配置計算には一切触れていない（JavaScriptは無変更）。 `--lm-hero-copy-lift` を日本語コピーとh1の両方の bottom へ同じだけ足すので、 2つの相対関係（27vh）は変わらない。日本語コピーだけが動くことはない。適用条件（幅480px以下かつ縦向きのみ）：・横向きスマートフォンには適用しない → 下の landscape / max-height 系ブロックが bottom を上書きし、そちらの calc には --lm-hero-copy-lift を含めていない・タブレット（768px以上）とPCには適用しない → 幅条件で除外値の決め方（2026-08-07に実測。数値は390x844 / 375x812 の実測値）： | 持ち上げ量 | ヘッダー下端→日本語コピー | h1下端→画面下端 | h1下端→SCROLL | |---|---|---|---| | 0px（従来） | 425 / 407 px | 30 / 27 px | 32 / 29 px | | **40px（採用）** | **385 / 371 px** | **70 / 63 px** | **72 / 65 px** | | 44px | 381 / 363 px | 74 / 71 px | 76 / 73 px | | 50px | 375 / － px | 80 / － px | 82 / － px | 日本語コピーとh1の間隔は 40px / 44px / 50px のいずれでも 150px（390幅）・144px（375幅）で不変。h1の切れ・横スクロールも発生しない。指定範囲（40〜50px）のうち**承認済み構図を維持できる最小値の40px**を採用した。 SCROLLは画面下端の合図なので位置を変えていない。結果としてh1下の余白が 32→72pxへ広がり、「窮屈でない余白」の条件を満たす。 */ @media (max-width: 480px) and (orientation: portrait) { .page-id-472 .lm-home-hero { --lm-hero-copy-lift: 40px; } } /* 縦に短いビューポート全般：高さが足りないので、コピーの間隔を詰めて重なりを防ぐ。横向きスマートフォンに限らず、PCウィンドウを縦に潰した場合にも効く。 */ @media (max-height: 500px) { .page-id-472 .lm-home-hero { min-height: 0; } .page-id-472 .lm-home-hero__headline { bottom: calc(clamp(20px, 6vh, 44px) + env(safe-area-inset-bottom)); font-size: clamp(28px, 6.4vh, 60px); } .page-id-472 .lm-home-hero__sub { top: auto; bottom: calc(clamp(20px, 6vh, 44px) + env(safe-area-inset-bottom) + 30vh); font-size: clamp(14px, 3.4vh, 19px); line-height: 1.6; } .page-id-472 .lm-home-hero__scrollcue { display: none; } } /* 横向きで高さが極端に低い場合：日本語コピーを右上へ戻したほうが縦の取り合いが起きない。 */ @media (max-height: 460px) and (orientation: landscape) { .page-id-472 .lm-home-hero__sub { top: calc(var(--lm-hero-header-h) + clamp(10px, 3vh, 22px)); bottom: auto; left: auto; right: max(var(--lm-hero-gutter), env(safe-area-inset-right)); text-align: right; padding-left: 0; padding-right: 16px; } .page-id-472 .lm-home-hero__sub::after { left: auto; right: 0; } } /* スマートフォン横向き（区分としての明示定義）。条件はJS側 classifyViewport と同一。・orientation: landscape ・短辺（この向きでは高さ）が 520px 以下 … mobileMaxShort ・長辺（この向きでは幅）が 960px 以下 … mobileMaxLong 対象：812x375 / 844x390 / 932x430 / 896x414 / 915x412 など */ @media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) { .page-id-472 .lm-home-hero { min-height: 0; } .page-id-472 .lm-home-hero__headline { bottom: calc(clamp(20px, 6vh, 44px) + env(safe-area-inset-bottom)); font-size: clamp(28px, 6.4vh, 60px); /* 横向きではノッチ・カメラ穴が左右に来るため、左右のセーフエリアを効かせる。切り欠きの無い環境では env() が 0 になるので見た目は変わらない。 */ left: max(var(--lm-hero-gutter), env(safe-area-inset-left)); right: max(var(--lm-hero-gutter), env(safe-area-inset-right)); } /* 日本語コピーは右上。縦方向でメインコピーと取り合わない */ .page-id-472 .lm-home-hero__sub { top: calc(var(--lm-hero-header-h) + clamp(10px, 3vh, 22px)); bottom: auto; left: auto; right: max(var(--lm-hero-gutter), env(safe-area-inset-right)); text-align: right; padding-left: 0; padding-right: 16px; font-size: clamp(14px, 3.4vh, 19px); line-height: 1.6; } .page-id-472 .lm-home-hero__sub::after { left: auto; right: 0; } /* 高さが無いので SCROLL は出さない */ .page-id-472 .lm-home-hero__scrollcue { display: none; } } /* =========================================================================== 11. SWELL標準ヘッダーをヒーローへ重ねる 2026-08-07、固定ページID 472のプレビュー実DOMと親テーマSWELL v2.17.1のソースで確認した内容にもとづく。推測したクラス名は使っていない。確認したヘッダーDOM（ID 472・ログイン状態） div#body_wrap（position: relative / z-index: 1） └ header#header.l-header.-series.-series-right position:relative z-index:100 background:#FDFDFD 高さ94px ├ div.l-header__bar.pc_ background:#0D548C 高さ22px │ └ div.l-header__barInner.l-container ← 11-1b で非表示 │ ├ div.c-catchphrase （キャッチフレーズ・白文字） │ └ ul.c-iconList > li.-rss > a.c-iconList__link └ div.l-header__inner.l-container 高さ72px / padding 48px ├ div.l-header__logo > div.c-headLogo.-img > a.c-headLogo__link │ > img.c-headLogo__img ├ nav#gnav.l-header__gnav.c-gnavWrap > ul.c-gnav > li.menu-item > a > span.ttl ├ div.l-header__customBtn.sp_ > button.c-iconBtn（検索） └ div.l-header__menuBtn.sp_ > button.c-iconBtn.-menuBtn（ハンバーガー） div#fix_header.l-fixHeader（SWELLの追従ヘッダー）position:fixed z-index:101 ::before が background:#FDFDFD を持つ（本体のbackgroundは透明）ロゴとグローバルナビの独立したコピーを持つ div#sp_menu.p-spMenu.-left（ドロワー）position:fixed z-index:101 └ .p-spMenu__inner > .p-spMenu__closeBtn / .p-spMenu__body > ul.c-spnav.c-listMenu └ .p-spMenu__overlay.c-overlay --------------------------------------------------------------------------- 重ね方の考え方 1) 初期表示（ヒーロー上） #header を position: absolute; top: 0 にして流し込みから外す。配置の基準は既に position: relative の #body_wrap なので、新たに positioned な要素を作る必要がなく、管理バーの32px分も #body_wrap の起点に含まれるため位置が破綻しない。流し込みから外れることでヒーローが画面最上部から始まり、ヘッダー分の空白も白い余白も生まれない。背景・影を透明化し、文字・アイコンを白系にする。 2) スクロール後 SWELLの追従ヘッダー（#fix_header）が実際に機能していることを実機で確認した（設定 fix_header = true / fix_header_sp = true）。実際の追従状態は、SWELL本体のJavaScript（build/js/main.min.js）が body直下の div.l-scrollObserver（position: absolute / top: 100px / 高さ1px）を IntersectionObserver で監視し、画面から外れたら、戻ったら "false" を付与するという仕組みで表現されている（ソースと実機で確認）。CSSはこの html[data-scrolled] を見て #fix_header を表示する。つまり「実際の追従状態クラス」が存在するので、独自のスクロール監視 JavaScriptは一切追加していない。.l-scrollObserver は body直下にあり #header の position とは無関係なため、ヘッダーを absolute へ変えても追従の判定には影響しない（スクロール2000pxで data-scrolled="true"、 #fix_header が visible になることを実機で確認した）。 #fix_header は ::before に #FDFDFD の背景を持ち、ロゴ・メニューは濃色なので、ヒーロー上でも白背景の本文上でもそのまま読める。よって背景・境界・ぼかしの追加は不要で、変更していない。唯一の例外は 11-4 の無料相談CTAの見た目（濃い青の塗り）で、これは追従の仕組みには関与しない1項目分の装飾のみ。 3) 重なり順ヒーローは z-index: 0 かつ isolation: isolate で独立した重なり文脈を作るため、内部のcanvas（z-index: 3）はヒーローの外へ出ない。 #header（100）・#fix_header（101）・#sp_menu（101）はいずれもヒーローより前に描かれる。したがって翼・粒子がヘッダーやドロワーの前へ出ることはない。z-index の値はSWELL標準のまま変更していない。 SWELL全体のカスタマイザー、ロゴ設定（logo_id=43）、メニュー設定（header_menu / nav_sp_menu ＝メニューID 6）は変更していない。 =========================================================================== */ /* --- 11-1. ヒーロー上へ重ねる ---------------------------------------------- */ .page-id-472 #header { position: absolute; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; color: var(--lm-hero-ink); /* 0.0-0.4s：ヘッダーだけが静かに現れる（承認済みの動き） */ animation: lmHeroHeaderIn .42s var(--lm-hero-ease-out) .08s both; } /* 11-1b. ヘッダー上部のキャッチフレーズ帯を非表示にする（ID 472のみ）実DOM（2026-08-07）： div.l-header__bar.pc_（高さ22px・背景 #0D548C） └ div.l-header__barInner.l-container ├ div.c-catchphrase 「マーケティングで世の中をデザインする」 └ ul.c-iconList （RSSアイコン）キャッチフレーズは `phrase_pos = 'head_bar'` によりこの帯の中だけに出力され、追従ヘッダー（#fix_header）とSPドロワーには存在しない（実機で確認）。帯自体が `.pc_` なので959px以下では元から非表示。したがってこの1行で初期ヘッダー・追従状態・全画面幅にわたって表示されなくなる。・SWELLカスタマイザー（phrase_pos / show_icon_list）は変更していない・キャッチフレーズの文言・サイト全体の設定も削除していない・他ページでは従来どおり表示される（このCSSはID 472でしか読み込まれない）・#header は position: absolute で流し込みから外れているため、帯が消えてもヘッダーとヒーローの間に空白は生まれない帯の中のRSSアイコンも帯ごと非表示になる。 */ .page-id-472 #header .l-header__bar { display: none; } /* 11-1c. 検索アイコンを非表示にする（ID 472のみ）検索機能そのもの（#search_modal）とSWELL全体設定（search_pos / search_pos_sp）は変更せず、表示だけを止める。 PC（960px以上）：グローバルナビ末尾の li.c-gnav__s。初期ヘッダーと追従ヘッダーの両方に独立して存在する。 */ .page-id-472 #header .c-gnav > li.c-gnav__s, .page-id-472 #fix_header .c-gnav > li.c-gnav__s { display: none; } /* タブレット・スマートフォン（959px以下）：div.l-header__customBtn.sp_。ここは display: none にしてはいけない。SWELLのSPヘッダーは .l-header__inner { display: flex; justify-content: space-between; } .l-header__menuBtn（order 1・幅48px・左端） .l-header__logo （order 2・中央） .l-header__customBtn（order 3・幅48px・右端）という構成で、左右2つの48pxボタンが釣り合うことでロゴが中央に見えている（2026-08-07に375px幅で実測）。display: none にすると項目が2つになりロゴが右端へ寄ってしまう。そこで箱（48px）だけ残して見えなくする。 visibility: hidden はフォーカス順・読み上げからも外れる。 */ .page-id-472 #header .l-header__customBtn { visibility: hidden; pointer-events: none; } /* ロゴ・メニューの左右位置を、ヒーローのコピーと同じ余白へ揃える（承認済み完成画像でも、ロゴ左端とメインコピー左端が揃っている）。 SP（959px以下）はSWELLがロゴ中央・ボタン左右端の配置を使うため触らない。キャッチフレーズ帯（.l-header__barInner）は 11-1b で非表示にしたため、ここでは対象にしていない。 */ @media (min-width: 960px) { .page-id-472 #header .l-header__inner { max-width: none; padding-inline: var(--lm-hero-gutter); } } /* --- 11-2. ヘッダー上の文字・アイコンをヒーロー背景で読める色にする -------- 検索ボタン（.c-gnav__sBtn / .l-header__customBtn）は 11-1c で非表示にしたが、ハンバーガー（.c-iconBtn）は残るため色指定は必要。 */ .page-id-472 #header .c-gnav > li > a, .page-id-472 #header .c-iconBtn { color: var(--lm-hero-ink-muted); transition: color .25s ease; } .page-id-472 #header .c-gnav > li > a:hover, .page-id-472 #header .c-iconBtn:hover { color: var(--lm-hero-ink); } /* グローバルナビの字送り（承認済みプロトタイプの値） */ .page-id-472 #header .c-gnav > li > a { font-size: 12.5px; letter-spacing: .13em; } /* ハンバーガーは背景上でも見えるように白にする */ .page-id-472 #header .l-header__menuBtn .c-iconBtn { color: var(--lm-hero-ink); } /* --- 11-3. ロゴと会社名 ---------------------------------------------------- 現在のSWELLヘッダーのロゴは「LMarketing-logo-長方形-カラー.png」（1582x312・青い翼シンボル＋濃色の欧文社名）で、濃色部分がネイビーのヒーロー上では読めない。そのため、承認済みプロトタイプに含まれる正確なシンボル素材（assets/img/lm-home-hero/lm-symbol.png。 prototypes/hero-responsive-v2/assets/logo/lm-symbol.png とバイト一致を確認済み）＋サイト名の文字へ、 ID 472だけで差し替えている（PHP側 swell_parts_head_logo）。【2026-08-07】初期ヘッダー（#header）と追従ヘッダー（#fix_header）の両方を差し替えるようにした。以前は追従ヘッダーだけ元のロゴ（L & Marketing）が出ており、ID 472内でブランド表記が2種類になっていた。 HTMLは共通で、文字色だけ背景に合わせて出し分ける。 #header … ヒーロー（Deep Navy）の上 → 白 #fix_header … SWELL標準の #FDFDFD（::before）の上 → 濃いネイビー・サイト全体のロゴ画像設定（logo_id=43）は変更していない・SWELLカスタマイザーも変更していない・ロゴを新しく描き直していない（承認済み素材をそのまま使用）・a.c-headLogo__link（href / title / rel="home"）はSWELLの出力のまま・シンボルの形と会社名表記は初期・追従で統一（同一の img と span） --------------------------------------------------------------------------- */ .page-id-472 #header .c-headLogo__link, .page-id-472 #fix_header .c-headLogo__link { display: flex; align-items: center; gap: 12px; } .page-id-472 #fix_header .lm-home-header__symbol { display: block; width: auto; height: 22px; /* 追従ヘッダーは高さ64pxなので初期(24px)より少し小さく */ max-width: none; } /* 追従ヘッダーは明るい背景（#FDFDFD）なので濃いネイビーにする。コントラスト比は #0A2337 / #FDFDFD で約 14.9:1（WCAG AAA）。 */ .page-id-472 #fix_header .lm-home-header__name { font-size: 14px; font-weight: 700; letter-spacing: .09em; line-height: 1; color: var(--lm-hero-navy-ink, #0a2337); white-space: nowrap; } @media (max-width: 767px) { .page-id-472 #fix_header .c-headLogo__link { gap: 8px; } .page-id-472 #fix_header .lm-home-header__symbol { height: 19px; } .page-id-472 #fix_header .lm-home-header__name { font-size: 12.5px; letter-spacing: .04em; } } /* 初期ヘッダー側（ヒーロー上）。文字は白。 */ .page-id-472 #header .lm-home-header__symbol { display: block; width: auto; height: 24px; /* 承認済みプロトタイプ .brand__mark と同じ */ max-width: none; } .page-id-472 #header .lm-home-header__name { font-size: 15px; font-weight: 700; letter-spacing: .09em; line-height: 1; color: var(--lm-hero-ink); white-space: nowrap; } @media (max-width: 1199px) { .page-id-472 #header .lm-home-header__symbol { height: 22px; } .page-id-472 #header .lm-home-header__name { font-size: 14px; letter-spacing: .07em; } } @media (max-width: 767px) { .page-id-472 #header .c-headLogo__link { gap: 8px; } .page-id-472 #header .lm-home-header__symbol { height: 19px; } .page-id-472 #header .lm-home-header__name { font-size: 12.5px; letter-spacing: .04em; } } /* --- 11-4. 無料相談CTA ----------------------------------------------------- 2026-08-07時点のメニュー実測：グローバルナビ（メニューID 6）の項目は「ホーム」1件のみで、無料相談・お問い合わせに相当する項目は存在しない。そのため、ID 472の表示時だけ、実測したメニュー位置 header_menu（PCヘッダーと追従ヘッダー）／ nav_sp_menu（SPドロワー）へ get_permalink( 476 ) のリンクを1件追加している（PHP側）。データベース上のグローバルメニューは変更していない。既に無料相談・お問い合わせ項目が存在する場合は追加せず、その既存項目へ同じCTAクラスを付けて装飾する（PHP側で判定）。装飾はPC用（ul.c-gnav 内）とSP用（ul.c-spnav 内）で書き分ける。 */ /* SWELLは .c-gnav のリンクを height: 100% のフレックスにしているため、そのままではCTAの白いボタンがヘッダーの高さ（72px）まで伸びてしまう。 li側を中央揃えのフレックスにして、リンクの高さは内容に任せる。 */ .page-id-472 #header .c-gnav > li.lm-home-header__cta { display: flex; align-items: center; } .page-id-472 #header .c-gnav > li.lm-home-header__cta > a { display: inline-block; height: auto; line-height: 1.6; padding: 11px 26px; border: 1px solid rgba(255, 255, 255, .70); border-radius: 2px; background: rgba(255, 255, 255, .93); color: var(--lm-hero-navy-ink, #0a2337); font-size: 12.5px; font-weight: 700; letter-spacing: .13em; white-space: nowrap; transition: background-color .25s ease, color .25s ease; } .page-id-472 #header .c-gnav > li.lm-home-header__cta > a:hover { background: #fff; color: #005090; } /* SPドロワー内。ドロワーはSWELL標準の背景・文字色のまま読めるため、 CTAだけを最小限に強調する（ドロワーの機能・開閉には手を入れない）。 */ .page-id-472 .p-spMenu .c-spnav > li.lm-home-header__cta > a { font-weight: 700; color: #005090; } /* 追従ヘッダー（#fix_header）内のCTA。追従ヘッダーの背景は SWELL標準の #FDFDFD（::before）なので、ヒーロー上の白ボタンではなく濃い青の塗りにして可読性を確保する。追従の仕組み（html[data-scrolled] と .l-scrollObserver による IntersectionObserver）には一切手を触れていない。 */ .page-id-472 #fix_header .c-gnav > li.lm-home-header__cta { display: flex; align-items: center; } .page-id-472 #fix_header .c-gnav > li.lm-home-header__cta > a { display: inline-block; height: auto; padding: 8px 20px; border-radius: 2px; background: #005090; color: #FFFFFF; font-size: 12.5px; font-weight: 700; line-height: 1.6; letter-spacing: .1em; white-space: nowrap; transition: background-color .25s ease; } .page-id-472 #fix_header .c-gnav > li.lm-home-header__cta > a:hover { background: #0099E0; color: #FFFFFF; } /* =========================================================================== 12. 動きを抑える設定（prefers-reduced-motion: reduce）承認済み実装と同じ方針：アニメーションを止め、最終状態を静止表示する。翼・粒子・シルエット・根元の光は残す（JavaScript側で最終フレームを一度だけ描く）。空の紺色背景にはしない。 =========================================================================== */ @media (prefers-reduced-motion: reduce) { .page-id-472 #header, .page-id-472 .lm-home-hero, .page-id-472 .lm-home-hero * { animation: none !important; transition: none !important; } .page-id-472 #header { opacity: 1 !important; transform: none !important; } .page-id-472 .lm-home-hero.is-lm-js .lm-home-hero__inner { transform: none !important; opacity: 1 !important; filter: none !important; } .page-id-472 .lm-home-hero.is-lm-js .lm-home-hero__sub, .page-id-472 .lm-home-hero.is-lm-js .lm-home-hero__scrollcue { opacity: 1 !important; transform: none !important; } .page-id-472 .lm-home-hero__scrollcue-dot { opacity: .55 !important; transform: translateX(16px) !important; } } /* --------------------------------------------------------------------------- 15. セクション02 WHO WE ARE（正式版・2026-08-24）正本：Handoff v2 `07_SECTION_REFERENCES/SECTION_02_WHO_WE_ARE_REFERENCE.html` （SHA-256 7184fd80583815ae9a037bb4de64374d992eea1de60b6e91a7ac24c94574ca0a） --------------------------------------------------------------------------- スコープについて（I-1 / I-2 承認済み） Handoff v2 は `body.page-id-472 .lm-top-renewal` を指定しているが、SWELLは body_class() をではなく div#body_wrap へ出力するため、body 要素セレクタでは一致要素が存在せずCSSが完全に無効になる。 2026-08-24にID472プレビュー実DOMで再確認した実際の出力：

したがって `lm_home_renewal_body_class()` で同じ div#body_wrap へ `lm-top-renewal` を追加し、**同一要素上の複合セレクタ** `.page-id-472.lm-top-renewal` を正式スコープとする。「ID472限定」＋「LMトップページリニューアル限定」の二重隔離という Handoff v2 の安全思想はそのまま満たされる。 --------------------------------------------------------------------------- このセクションが置き換えるもの（ID472本文から削除する） - #lm-home-positioning … V1。内部に #lm-home-positioning-preview（V2）を誤ネストで含んでいるため、V1の削除でV2も外れる - #lm-home-positioning-v3 … V3 認定代理店の訴求は「S02から削除しS08へ集約」が正式決定のため、ここには置かない。上記2セクションはID472本文から削除済みで、対応していた13章（V1比較版）・ 14章（V3案）のCSSも2026-08-24のcleanup工程で削除した。そのため12章の次はこの15章になる。章番号は履歴の追跡性を保つため振り直していない。 --------------------------------------------------------------------------- Referenceからの意図的な差異（詳細は実装報告 F を参照） 1. 見出しは h1 → h2。HEROが既に唯一の h1 を持つため、文書構造上の重複を避ける。見た目（サイズ・字送り・行間）はReferenceを再現する。 2. 背景グラデーションの下端を Reference の `--next:#f5f7fa` ではなく、実ページで隣接するS03（#lm-home-problems）の実背景 `--lm-color-bg-soft:#F2F6F9` にする。 S02→S03の境界を継ぎ目なく接続するため。 3. ghost（背景の大文字装飾）はDOMを増やさず ::before で描画する。 `content: "WHO WE ARE" / ""` の代替テキスト空指定で支援技術には読ませない。 4. ghostの視差は、Referenceのグローバル scroll リスナではなく CSSスクロール駆動アニメーション（animation-timeline: view()）で行う。未対応環境では静止する（機能低下のみで表示は崩れない）。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-who-we-are { /* Reference の :root 変数を、このセクション配下だけへ移したもの。値は同一。 */ --lm-who-navy: #0c1a38; /* 見出し・kicker */ --lm-who-ink: #23304a; /* 本文 */ --lm-who-muted: #66738b; /* AXIS行 */ --lm-who-rule: #9ca7ba; /* AXIS行の罫 */ --lm-who-ghost: rgba(12, 26, 56, .034); --lm-who-ease: cubic-bezier(.22, .75, .2, 1); /* 下端の色。Referenceの --next:#f5f7fa 相当を、実ページのS03背景へ合わせる */ --lm-who-next: var(--lm-color-bg-soft); position: relative; min-height: 166vh; /* 共通の .lm-home-section が持つ padding-block を、Referenceの値で上書きする */ padding: 10vh 7vw 18vh; background: linear-gradient(180deg, var(--lm-color-bg) 0%, var(--lm-color-bg) 80%, var(--lm-who-next) 100%); } /* 15-1. 背景の大文字装飾（Referenceの div.ghost 相当）。 DOMを増やさず ::before で描く。1行目の content はスラッシュ構文を解釈しない環境向けのフォールバック。 */ .page-id-472.lm-top-renewal .lm-home-who-we-are::before { content: "WHO WE ARE"; content: "WHO WE ARE" / ""; position: absolute; z-index: 0; left: -1.5vw; top: 8.5vh; margin: 0; white-space: nowrap; pointer-events: none; color: var(--lm-who-ghost); font-family: Arial, Helvetica, sans-serif; font-size: clamp(150px, 22vw, 370px); font-weight: 900; line-height: .78; letter-spacing: -.075em; transform: translate3d(-16px, 0, 0); } /* ghostの視差。Referenceは window の scroll リスナで --ghost-shift を -16px → +26px へ動かしていた。グローバルリスナを撒かないため、スクロール駆動アニメーションで同じ範囲を再現する。 */ @supports (animation-timeline: view()) { .page-id-472.lm-top-renewal .lm-home-who-we-are::before { animation: lmWhoGhostShift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } @keyframes lmWhoGhostShift { from { transform: translate3d(-16px, 0, 0); } to { transform: translate3d(26px, 0, 0); } } /* 15-2. kicker「WHO WE ARE」 */ .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__kicker { position: relative; z-index: 2; display: inline-block; margin: 0 0 15vh; padding-bottom: 11px; border-bottom: 2px solid var(--lm-who-navy); color: var(--lm-who-navy); font-family: Arial, Helvetica, sans-serif; font-size: clamp(34px, 4.55vw, 72px); font-weight: 800; line-height: .94; letter-spacing: -.055em; } /* 15-3. メインコピー */ .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__statement { position: relative; z-index: 2; margin-left: 4.8vw; max-width: 1180px; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__title { margin: 0; color: var(--lm-who-navy); font-size: clamp(52px, 7.25vw, 112px); font-weight: 750; line-height: 1.13; letter-spacing: -.06em; line-break: strict; } /* SWELL標準のh2装飾（カスタマイザー由来インラインCSSの塗り背景）を打ち消す。既存 8-6 は .lm-home-title 等のみが対象なので、この見出し用に個別指定する。 */ .page-id-472 .post_content .lm-home-who-we-are__title { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-who-we-are__title::before, .page-id-472 .post_content .lm-home-who-we-are__title::after { content: none; display: none; } /* JavaScriptが見出しを1行ずつ span で包んだあとのマスク。包めなかった場合はこの指定が当たらず、通常の見出しとして読める。 */ .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__line { display: block; overflow: hidden; padding-bottom: .05em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__line > span { display: inline-block; } /* 15-4. AXIS「TOUCHPOINT / RELATIONSHIP / GROWTH」 */ .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__axis { display: flex; align-items: center; gap: 20px; margin: 4.3vh 0 0; color: var(--lm-who-muted); font-family: Arial, Helvetica, sans-serif; font-size: clamp(11px, .86vw, 14px); font-weight: 700; line-height: 1.4; letter-spacing: .19em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__axis::before { content: ""; width: 74px; height: 1px; flex: 0 0 74px; background: var(--lm-who-rule); } /* 15-5. 本文2段落 */ .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy { position: relative; z-index: 2; width: min(900px, 66vw); margin: 14vh 0 0 15.5vw; color: var(--lm-who-ink); font-size: clamp(23px, 1.74vw, 29px); font-weight: 500; line-height: 1.88; letter-spacing: -.015em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy p { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-wrap: pretty; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy p + p { margin-top: 3em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy strong { color: var(--lm-who-navy); font-weight: 630; } /* 15-6. 順次表示（sequential reveal）隠す指定は .is-lm-js が付いたときだけ効く。JSが読み込まれない・途中で例外が出た場合は、最終状態（表示されたまま）で読める。 */ .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-reveal-up, .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-reveal-fade, .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .lm-home-who-we-are__line > span { opacity: 0; transition-property: opacity, transform; transition-duration: .92s; transition-timing-function: var(--lm-who-ease); will-change: opacity, transform; } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-reveal-up { transform: translate3d(0, 20px, 0); } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-reveal-fade { transform: translate3d(0, 6px, 0); } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .lm-home-who-we-are__line > span { transform: translate3d(0, 112%, 0); } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-in-view.is-lm-reveal-up, .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-in-view.is-lm-reveal-fade { opacity: 1; transform: none; } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .lm-home-who-we-are__line.is-lm-in-view > span { opacity: 1; transform: none; } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-d1 { transition-delay: .14s; } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-d2 { transition-delay: .30s; } .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-d3 { transition-delay: .48s; } /* 15-7. レスポンシブ（Referenceの切り替え位置 900 / 720 / 390 をそのまま使う） */ @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-who-we-are { min-height: auto; padding: 9vh 6vw 14vh; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__kicker { margin-bottom: 11vh; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__statement { margin-left: 0; max-width: 100%; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy { width: min(820px, 88vw); margin-top: 10vh; margin-left: 6vw; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-who-we-are { min-height: auto; padding: 68px 22px 104px; background: linear-gradient(180deg, var(--lm-color-bg) 0%, var(--lm-color-bg) 84%, var(--lm-who-next) 100%); } .page-id-472.lm-top-renewal .lm-home-who-we-are::before { left: -18px; top: 82px; font-size: 31vw; line-height: .82; letter-spacing: -.08em; color: rgba(12, 26, 56, .028); } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__kicker { margin-bottom: 78px; padding-bottom: 8px; border-bottom-width: 1.5px; font-size: clamp(38px, 11.7vw, 52px); line-height: .92; letter-spacing: -.06em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__statement { margin-left: 0; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__title { font-size: clamp(42px, 11.6vw, 56px); font-weight: 750; line-height: 1.18; letter-spacing: -.055em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__line { padding-bottom: .08em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__axis { flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 30px; font-size: 10px; line-height: 1.65; letter-spacing: .14em; white-space: normal; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__axis::before { width: 44px; height: 1px; flex: 0 0 1px; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy { width: auto; margin: 76px 0 0; color: #26334c; font-size: clamp(19px, 5.15vw, 22px); font-weight: 500; line-height: 1.9; letter-spacing: -.012em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy p + p { margin-top: 2.45em; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy strong { font-weight: 650; } /* PC向けの意図的な改行はSPでは解除する。 Referenceの br.pc-break 相当。ブロックエディタでの編集後もクラスに依存せず効くよう、本文内の br をまとめて対象にしている。 */ .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy br { display: none; } } @media (max-width: 390px) { .page-id-472.lm-top-renewal .lm-home-who-we-are { padding-left: 20px; padding-right: 20px; } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__title { font-size: clamp(40px, 11.1vw, 47px); } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__copy { font-size: clamp(18px, 5vw, 20px); } .page-id-472.lm-top-renewal .lm-home-who-we-are .lm-home-who-we-are__axis { font-size: 9.5px; letter-spacing: .12em; } } /* 15-8. 動きを抑える設定 */ @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-reveal-up, .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .is-lm-reveal-fade, .page-id-472.lm-top-renewal .lm-home-who-we-are.is-lm-js .lm-home-who-we-are__line > span { opacity: 1; transform: none; transition: none; } .page-id-472.lm-top-renewal .lm-home-who-we-are::before { animation: none; transform: none; } } /* --------------------------------------------------------------------------- 16. セクション03〜05 共通の下地（2026-08-24）正本：Handoff v2 `07_SECTION_REFERENCES/SECTION_0{3,4,5}_*_REFERENCE.html` Referenceは1ページ丸ごとのプロトタイプCSSで、同じセレクタが版を重ねて何度も上書きされている。ここへは各セレクタの**最終有効値**だけを移し、打ち消し合っていた !important や、markupに存在しない要素（.conclusion small 等）の指定は持ち込んでいない。 Referenceの :root 変数は、他セクション・SWELLと衝突させないため --lm-ref-* / --lm-sec-h-* へ改名してこのページのスコープ配下に置く。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal { --lm-ref-ink: #15213a; --lm-ref-navy: #0c1a38; --lm-ref-blue: #2f59ff; --lm-ref-soft: #f5f7fa; --lm-ref-line: #dce2ea; --lm-ref-ease: cubic-bezier(.22, .75, .2, 1); /* Referenceの共通セクション見出しスケール */ --lm-sec-h-size: clamp(44px, 5.3vw, 82px); --lm-sec-h-lh: 1.08; --lm-sec-h-tracking: -.055em; --lm-sec-h-weight: 700; } @media (max-width: 900px) { .page-id-472.lm-top-renewal { --lm-sec-h-size: clamp(42px, 6.3vw, 58px); --lm-sec-h-lh: 1.10; --lm-sec-h-tracking: -.05em; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal { --lm-sec-h-size: clamp(38px, 10.7vw, 50px); --lm-sec-h-lh: 1.14; --lm-sec-h-tracking: -.045em; } } /* 16-1. 内容コンテナ（Referenceの .wrap 相当）。 S02と違い、S03〜S05は内容幅を持つ構成なのでこれを使う。 */ .page-id-472.lm-top-renewal .lm-home-s345__inner { position: relative; z-index: 2; width: min(1240px, 86vw); margin-inline: auto; } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-s345__inner { width: calc(100vw - 44px); } } /* 16-2. kicker（Referenceの .kicker 相当）。3セクション共通。 */ .page-id-472.lm-top-renewal .lm-home-s345__kicker { margin: 0 0 28px; /* 2026-08-25 C-1：WCAG AA（4.5:1）を満たすまで暗くした。白背景で 3.94、S10の #F5F7FA 背景で 3.67 と不足していた。両方の背景で満たす値にしている（白 5.07 / #F5F7FA 4.73）。 */ color: #646F82; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1; } .page-id-472.lm-top-renewal .lm-home-s345__kicker::before { content: ""; display: inline-block; width: 34px; height: 1px; margin-right: 12px; background: #9eabbc; vertical-align: middle; } /* 16-3. ブロックエディタが挟む .wp-block-group__inner-container を、グリッド／フレックスの親では透過させる。これで「内側コンテナが有る／無い」どちらの出力でも同じ配置になる。 */ .page-id-472.lm-top-renewal .lm-home-problem__row > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-problem__issue > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-problem__conclusion > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__interface > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__side > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__sidehead > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__items > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__item > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__end > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-approach__tplabel > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-connect__lines > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-connect__line > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-connect__field > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-connect__conclusion > .wp-block-group__inner-container { display: contents; } /* 16-4. SWELL標準の見出し装飾（カスタマイザー由来インラインCSSの塗り背景・ h3の下線）を、S03〜S05で使う見出しクラスに対して打ち消す。既存 8-6 は .lm-home-title 等しか対象にしていないため個別に足す。 */ .page-id-472 .post_content .lm-home-problem__title, .page-id-472 .post_content .lm-home-problem__rowtitle, .page-id-472 .post_content .lm-home-approach__title, .page-id-472 .post_content .lm-home-approach__sidetitle, .page-id-472 .post_content .lm-home-connect__title { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-problem__title::before, .page-id-472 .post_content .lm-home-problem__title::after, .page-id-472 .post_content .lm-home-problem__rowtitle::before, .page-id-472 .post_content .lm-home-problem__rowtitle::after, .page-id-472 .post_content .lm-home-approach__title::before, .page-id-472 .post_content .lm-home-approach__title::after, .page-id-472 .post_content .lm-home-approach__sidetitle::before, .page-id-472 .post_content .lm-home-approach__sidetitle::after, .page-id-472 .post_content .lm-home-connect__title::before, .page-id-472 .post_content .lm-home-connect__title::after { content: none; display: none; } /* --------------------------------------------------------------------------- 17. セクション03 PROBLEM（2026-08-24）正本：SECTION_03_PROBLEM_REFERENCE.html（section.problem） --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-problem { position: relative; isolation: isolate; overflow: hidden; padding: 14vh 0 16vh; background: linear-gradient(180deg, #f4f7fa 0%, #f7f9fb 58%, #f2f5f8 100%); } /* 背景の巨大な「03」。ReferenceはDOM無しの :before なのでそのまま踏襲する。 */ .page-id-472.lm-top-renewal .lm-home-problem::before { content: "03"; content: "03" / ""; position: absolute; z-index: 0; right: -.055em; top: .11em; pointer-events: none; color: rgba(12, 26, 56, .022); font-family: Arial, Helvetica, sans-serif; font-size: clamp(220px, 27vw, 430px); font-weight: 900; line-height: .8; letter-spacing: -.095em; } .page-id-472.lm-top-renewal .lm-home-problem__title { max-width: 1040px; margin: 0 0 11vh; color: var(--lm-ref-navy); font-size: clamp(52px, 6.35vw, 98px); font-weight: 760; line-height: 1.055; letter-spacing: -.06em; white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-problem__issue { position: relative; border-top: 1px solid rgba(12, 26, 56, .19); } .page-id-472.lm-top-renewal .lm-home-problem__issue::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; transform: translateX(-22px); background: linear-gradient(180deg, rgba(47, 89, 255, .42) 0%, rgba(47, 89, 255, .11) 31%, rgba(12, 26, 56, .08) 68%, rgba(12, 26, 56, 0) 100%); } .page-id-472.lm-top-renewal .lm-home-problem__row { position: relative; display: grid; grid-template-columns: 74px minmax(300px, .9fr) minmax(300px, 1.12fr); gap: 38px; align-items: start; padding: 38px 0 40px; border-bottom: 1px solid rgba(12, 26, 56, .14); } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(2) { padding-left: 4vw; } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(3) { padding-left: 1.5vw; } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(4) { padding-left: 6vw; } /* 右端へ伸びる細い線。長さを行ごとに変え、規則正しい表組みに見せない。 */ .page-id-472.lm-top-renewal .lm-home-problem__row::after { content: ""; position: absolute; right: 0; top: 50%; width: clamp(54px, 7vw, 115px); height: 1px; transform: translateY(-50%); pointer-events: none; background: linear-gradient(90deg, rgba(12, 26, 56, .18), rgba(12, 26, 56, 0)); } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(2)::after { width: clamp(88px, 10vw, 150px); } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(3)::after { width: clamp(42px, 5vw, 82px); } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(4)::after { width: clamp(110px, 12vw, 175px); } .page-id-472.lm-top-renewal .lm-home-problem__num { margin: 0; padding-top: 9px; color: rgba(12, 26, 56, .28); font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 900; line-height: 1; letter-spacing: .05em; } .page-id-472.lm-top-renewal .lm-home-problem__rowtitle { margin: 0; color: var(--lm-ref-ink); font-size: clamp(24px, 2.05vw, 34px); font-weight: 700; line-height: 1.42; letter-spacing: -.038em; } .page-id-472.lm-top-renewal .lm-home-problem__rowbody { max-width: 550px; margin: 0; color: #5b687d; font-size: 15px; line-height: 1.92; } /* 結論。CONTINUITY の面が動くため isolation を張る。 */ .page-id-472.lm-top-renewal .lm-home-problem__conclusion { position: relative; isolation: isolate; overflow: visible; display: flex; flex-direction: column; justify-content: center; width: min(940px, 74vw); min-height: 360px; margin: 10vh 0 0 auto; padding: 28px 0 34px; color: var(--lm-ref-navy); } /* CONTINUITY（Referenceの div.continuity-word 相当）。 DOMを増やさず ::before で描き、代替テキストを空にして読み上げさせない。 */ .page-id-472.lm-top-renewal .lm-home-problem__conclusion::before { content: "CONTINUITY"; content: "CONTINUITY" / ""; position: absolute; z-index: 0; left: -.10em; top: 68%; white-space: nowrap; pointer-events: none; user-select: none; color: var(--lm-ref-navy); opacity: 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(105px, 13.2vw, 215px); font-weight: 900; line-height: .76; letter-spacing: -.072em; filter: blur(.15px); transform: translate3d(-20vw, -50%, 0); transition: opacity 1.15s var(--lm-ref-ease), transform 1.9s var(--lm-ref-ease); will-change: opacity, transform; } .page-id-472.lm-top-renewal .lm-home-problem__conclusion.is-lm-continuity-in::before { opacity: .032; transform: translate3d(6vw, -50%, 0); } .page-id-472.lm-top-renewal .lm-home-problem__conclusion.is-lm-continuity-settle::before { opacity: .014; transform: translate3d(13vw, -50%, 0); transition: opacity 1.05s ease, transform 1.15s var(--lm-ref-ease); } .page-id-472.lm-top-renewal .lm-home-problem__lead { position: relative; z-index: 2; display: block; margin: 0 0 14px; color: var(--lm-ref-navy); font-size: clamp(32px, 3vw, 44px); font-weight: 670; line-height: 1.5; letter-spacing: -.042em; } .page-id-472.lm-top-renewal .lm-home-problem__resolution { position: relative; z-index: 2; margin: 0; } .page-id-472.lm-top-renewal .lm-home-problem__resolution strong { display: block; color: var(--lm-ref-navy); font-size: clamp(40px, 3.8vw, 56px); font-weight: 760; line-height: 1.38; letter-spacing: -.05em; } /* 順次表示。隠す指定は .is-lm-js が付いたときだけ効かせる。 */ .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__lead, .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__resolution { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .88s var(--lm-ref-ease), transform .88s var(--lm-ref-ease); } .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__conclusion.is-lm-message-in .lm-home-problem__lead, .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__conclusion.is-lm-message-in .lm-home-problem__resolution { opacity: 1; transform: none; } .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__conclusion.is-lm-message-in .lm-home-problem__resolution { transition-delay: .10s; } /* Referenceでは接頭辞なしの `.row` 側に置かれていた切り替え。 3カラムのままだと最小幅（74+38+300+38+300=750px）が内容幅を超えて 3列目が切れるため、900px以下で2カラムへ畳む。 */ @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-problem__row { grid-template-columns: 60px 1fr; } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(2), .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(3), .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(4) { padding-left: 0; } .page-id-472.lm-top-renewal .lm-home-problem__rowbody { grid-column: 2; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-problem { padding-top: 100px; padding-bottom: 116px; } .page-id-472.lm-top-renewal .lm-home-problem::before { right: -12vw; top: 66px; font-size: 73vw; color: rgba(12, 26, 56, .026); } .page-id-472.lm-top-renewal .lm-home-problem__title { max-width: 96%; margin-bottom: 72px; font-size: clamp(43px, 12.1vw, 57px); line-height: 1.12; white-space: normal; } .page-id-472.lm-top-renewal .lm-home-problem__issue::before { transform: translateX(-9px); opacity: .6; } .page-id-472.lm-top-renewal .lm-home-problem__row { grid-template-columns: 42px 1fr; gap: 12px 14px; padding: 30px 0 31px; } .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(2), .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(3), .page-id-472.lm-top-renewal .lm-home-problem__row:nth-child(4) { padding-left: 0; } .page-id-472.lm-top-renewal .lm-home-problem__row::after { display: none; } .page-id-472.lm-top-renewal .lm-home-problem__num { padding-top: 4px; color: rgba(12, 26, 56, .22); font-size: 24px; letter-spacing: -.04em; } .page-id-472.lm-top-renewal .lm-home-problem__rowtitle { font-size: clamp(21px, 6vw, 26px); line-height: 1.5; } .page-id-472.lm-top-renewal .lm-home-problem__rowbody { grid-column: 2; font-size: 14px; line-height: 1.88; } .page-id-472.lm-top-renewal .lm-home-problem__conclusion { width: auto; min-height: 350px; margin: 82px 0 0 8%; padding: 22px 0 28px; } .page-id-472.lm-top-renewal .lm-home-problem__conclusion::before { left: -.24em; top: 72%; font-size: 27vw; transform: translate3d(-38vw, -50%, 0); } .page-id-472.lm-top-renewal .lm-home-problem__conclusion.is-lm-continuity-in::before { opacity: .029; transform: translate3d(8vw, -50%, 0); } .page-id-472.lm-top-renewal .lm-home-problem__conclusion.is-lm-continuity-settle::before { opacity: .012; transform: translate3d(18vw, -50%, 0); } .page-id-472.lm-top-renewal .lm-home-problem__lead { margin-bottom: 12px; font-size: clamp(25px, 7vw, 31px); line-height: 1.58; } .page-id-472.lm-top-renewal .lm-home-problem__resolution strong { font-size: clamp(31px, 8.4vw, 39px); line-height: 1.48; } } @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-problem__conclusion::before, .page-id-472.lm-top-renewal .lm-home-problem__conclusion.is-lm-continuity-in::before, .page-id-472.lm-top-renewal .lm-home-problem__conclusion.is-lm-continuity-settle::before { opacity: .014; transform: translate3d(13vw, -50%, 0); transition: none; } .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__lead, .page-id-472.lm-top-renewal .lm-home-problem.is-lm-js .lm-home-problem__resolution { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------------------- 18. セクション04 OUR APPROACH（2026-08-24）正本：SECTION_04_OUR_APPROACH_REFERENCE.html（section.approach.approach-v47） v102のモバイル挙動（360/390で5ステップすべて可視）は必須要件。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-approach { position: relative; overflow: hidden; padding: 15vh 0; border-top: 1px solid rgba(21, 33, 58, .06); background-color: var(--lm-color-bg); } .page-id-472.lm-top-renewal .lm-home-approach__title { max-width: 1040px; margin: 0 0 8vh; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); } .page-id-472.lm-top-renewal .lm-home-approach__lead { width: min(660px, 58%); margin: 36px 0 78px 7%; color: #5a6678; font-size: clamp(16px, 1.15vw, 18px); font-weight: 450; line-height: 1.95; letter-spacing: -.012em; } .page-id-472.lm-top-renewal .lm-home-approach__interface { position: relative; margin: 0 0 13vh; padding: 8px 0; } .page-id-472.lm-top-renewal .lm-home-approach__side { position: relative; display: grid; grid-template-columns: 30% 70%; align-items: center; min-height: 235px; } .page-id-472.lm-top-renewal .lm-home-approach__sidehead { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start; /* Referenceは 34px。実測すると 1280px と 1600px で見出しの1行目が数pxだけ足りずに折り返し、Referenceが明示している
の位置と違う３行になってしまう（1440pxでは2行）。Referenceが意図した2行をどのPC幅でも保つため、右余白だけ 34px → 20px にしている。 */ padding-right: 20px; } /* 円の中のシンボル（Referenceの .side-symbol-v47 相当）。グリッドの1カラム目として ::before を置く。 */ .page-id-472.lm-top-renewal .lm-home-approach__sidehead::before { content: ""; width: 52px; height: 52px; border: 1px solid rgba(20, 42, 74, .18); border-radius: 50%; background-color: rgba(255, 255, 255, .76); background-repeat: no-repeat; background-position: center; background-size: 30px 30px; } .page-id-472.lm-top-renewal .lm-home-approach__en { margin: 2px 0 12px; color: #627086; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .16em; } .page-id-472.lm-top-renewal .lm-home-approach__sidetitle { /* Referenceは 255px。1600pxでは文字が23pxまで育つため255pxでは1行目が収まらず、Referenceが明示している
と違う3行になる。 1600pxでの利用可能幅は276pxなので、そこへ収まる275pxまで広げている。これより狭い幅ではカラム幅のほうが小さく、この値は効かない。 */ max-width: 275px; margin: 0; color: #17263f; font-size: clamp(19px, 1.5vw, 23px); font-weight: 650; line-height: 1.58; letter-spacing: -.035em; } .page-id-472.lm-top-renewal .lm-home-approach__items { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; } .page-id-472.lm-top-renewal .lm-home-approach__item { position: relative; min-width: 0; padding: 0 18px 0 22px; } .page-id-472.lm-top-renewal .lm-home-approach__item + .lm-home-approach__item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 12px; width: 1px; background: rgba(17, 37, 69, .075); } /* 上下の側へ伸びる短い縦線（接点であることの示唆） */ .page-id-472.lm-top-renewal .lm-home-approach__side--customer .lm-home-approach__item::after, .page-id-472.lm-top-renewal .lm-home-approach__side--internal .lm-home-approach__item::after { content: ""; position: absolute; left: 50%; width: 1px; height: 34px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(47, 89, 255, .12), rgba(47, 89, 255, 0)); } .page-id-472.lm-top-renewal .lm-home-approach__side--customer .lm-home-approach__item::after { top: 100%; } .page-id-472.lm-top-renewal .lm-home-approach__side--internal .lm-home-approach__item::after { bottom: 100%; transform: translateX(-50%) rotate(180deg); } .page-id-472.lm-top-renewal .lm-home-approach__no { display: block; margin: 0 0 17px; color: rgba(17, 40, 75, .38); font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: .12em; } .page-id-472.lm-top-renewal .lm-home-approach__label { display: block; margin: 0; color: #1a2941; font-size: clamp(15px, 1.12vw, 17px); font-weight: 650; line-height: 1.5; letter-spacing: -.025em; } /* アイコン（Referenceの .interface-icon-v47 相当）。ラベルの ::before として、番号とラベルの間に置く。 */ .page-id-472.lm-top-renewal .lm-home-approach__label::before { content: ""; display: block; width: 32px; height: 32px; margin-bottom: 17px; background-repeat: no-repeat; background-position: left center; background-size: contain; } /* 2つの側をつなぐ面（SHARED INTERFACE） */ .page-id-472.lm-top-renewal .lm-home-approach__touchpoint { position: relative; height: 76px; } .page-id-472.lm-top-renewal .lm-home-approach__touchpoint::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(47, 89, 255, .14) 11%, rgba(47, 89, 255, .36) 30%, rgba(47, 89, 255, .48) 54%, transparent 59%, transparent 72%, rgba(47, 89, 255, .48) 77%, rgba(47, 89, 255, .28) 90%, transparent 100%); } .page-id-472.lm-top-renewal .lm-home-approach__touchpoint::after { content: ""; position: absolute; left: 28%; right: 7%; top: 50%; height: 32px; transform: translateY(-50%); filter: blur(7px); background: radial-gradient(ellipse at center, rgba(47, 89, 255, .065) 0%, rgba(47, 89, 255, .025) 40%, rgba(47, 89, 255, 0) 74%); } .page-id-472.lm-top-renewal .lm-home-approach__tplabel { position: absolute; z-index: 4; left: 65%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 10px; margin: 0; white-space: nowrap; pointer-events: none; } .page-id-472.lm-top-renewal .lm-home-approach__tpsmall { margin: 0; /* 2026-08-25 C-1：3.83 → 4.77 */ color: #697387; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .20em; } .page-id-472.lm-top-renewal .lm-home-approach__tpstrong { margin: 0; color: #263f6a; font-family: Arial, Helvetica, sans-serif; font-size: clamp(16px, 1.35vw, 20px); font-weight: 650; line-height: 1; letter-spacing: .08em; } /* 結論（ONE） */ .page-id-472.lm-top-renewal .lm-home-approach__end { position: relative; isolation: isolate; overflow: visible; display: flex; flex-direction: column; justify-content: center; width: min(880px, 64vw); min-height: 250px; margin: 0 1vw 0 auto; padding: 0; text-align: left; } .page-id-472.lm-top-renewal .lm-home-approach__end::before { content: "ONE"; content: "ONE" / ""; position: absolute; z-index: 0; right: -.04em; top: 50%; white-space: nowrap; pointer-events: none; user-select: none; color: var(--lm-ref-navy); opacity: 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(190px, 20vw, 330px); font-weight: 900; line-height: .72; letter-spacing: -.085em; transform: translate3d(18vw, -50%, 0); transition: opacity 1.45s var(--lm-ref-ease), transform 1.45s var(--lm-ref-ease); will-change: opacity, transform; } .page-id-472.lm-top-renewal .lm-home-approach__end.is-lm-one-in::before { opacity: .075; transform: translate3d(0, -50%, 0); } /* 右端でONEを白へ溶かす */ .page-id-472.lm-top-renewal .lm-home-approach__end::after { content: ""; position: absolute; z-index: 1; right: -12vw; top: 0; bottom: 0; width: 8vw; opacity: .45; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94)); } .page-id-472.lm-top-renewal .lm-home-approach__endlead { position: relative; z-index: 2; display: block; margin: 0 0 28px; color: #26344d; font-size: clamp(30px, 2.7vw, 42px); font-weight: 620; line-height: 1.55; letter-spacing: -.038em; } .page-id-472.lm-top-renewal .lm-home-approach__endstrong { position: relative; z-index: 2; margin: 0; } .page-id-472.lm-top-renewal .lm-home-approach__endstrong strong { display: block; color: var(--lm-ref-navy); font-size: clamp(40px, 3.75vw, 58px); font-weight: 760; line-height: 1.28; letter-spacing: -.052em; white-space: nowrap; } @media (max-width: 980px) { .page-id-472.lm-top-renewal .lm-home-approach__side { grid-template-columns: 1fr; gap: 34px; } .page-id-472.lm-top-renewal .lm-home-approach__sidehead { grid-template-columns: 52px 1fr; padding-right: 0; } .page-id-472.lm-top-renewal .lm-home-approach__sidetitle { max-width: none; } .page-id-472.lm-top-renewal .lm-home-approach__items { grid-template-columns: repeat(5, minmax(140px, 1fr)); overflow-x: auto; scrollbar-width: none; } .page-id-472.lm-top-renewal .lm-home-approach__items::-webkit-scrollbar { display: none; } .page-id-472.lm-top-renewal .lm-home-approach__tplabel { left: 50%; } } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-approach__end { width: min(760px, 82vw); } .page-id-472.lm-top-renewal .lm-home-approach__endstrong strong { white-space: normal; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-approach { padding-top: 96px; padding-bottom: 104px; } /* SPだけに出る細い縦のアクセント */ .page-id-472.lm-top-renewal .lm-home-approach::before { content: ""; position: absolute; left: 0; top: 96px; width: 4px; height: 220px; opacity: .35; background: linear-gradient(var(--lm-ref-blue), rgba(47, 89, 255, 0)); } .page-id-472.lm-top-renewal .lm-home-approach__lead { width: 94%; margin: 30px 0 56px 6%; font-size: 15px; line-height: 1.9; } .page-id-472.lm-top-renewal .lm-home-approach__sidehead { grid-template-columns: 48px 1fr; gap: 15px; padding-left: 2vw; } .page-id-472.lm-top-renewal .lm-home-approach__sidetitle { font-size: 19px; } /* v102：横スクロールを使わず5ステップすべてを画面内に収める */ .page-id-472.lm-top-renewal .lm-home-approach__items { width: 100%; margin-right: 0; padding-left: 0; overflow: visible; grid-template-columns: repeat(5, minmax(0, 1fr)); } .page-id-472.lm-top-renewal .lm-home-approach__item { padding-left: 6px; padding-right: 6px; text-align: center; } .page-id-472.lm-top-renewal .lm-home-approach__item + .lm-home-approach__item::before { top: 12px; bottom: 8px; } .page-id-472.lm-top-renewal .lm-home-approach__no { margin-bottom: 12px; font-size: 9px; } .page-id-472.lm-top-renewal .lm-home-approach__label::before { width: 26px; height: 26px; margin: 0 auto 12px; background-position: center; } .page-id-472.lm-top-renewal .lm-home-approach__label { font-size: 12px; line-height: 1.45; letter-spacing: -.035em; } .page-id-472.lm-top-renewal .lm-home-approach__touchpoint { height: 70px; } .page-id-472.lm-top-renewal .lm-home-approach__tplabel { gap: 8px; } /* 2026-08-24 修正：S04実装時に SHARED INTERFACE のラベルを span / strong から 2つの段落（__tpsmall / __tpstrong）へ変えた際、この720px以下の上書きだけが旧セレクタのまま残っていた。基準側と同じ正式クラスへ張り替える。 PC側の指定は変更していない。 */ .page-id-472.lm-top-renewal .lm-home-approach__tpsmall { font-size: 8px; } .page-id-472.lm-top-renewal .lm-home-approach__tpstrong { font-size: 16px; } .page-id-472.lm-top-renewal .lm-home-approach__end { width: auto; min-height: 285px; margin: 0; padding: 14px 0; } .page-id-472.lm-top-renewal .lm-home-approach__end::before { right: -.1em; top: 53%; font-size: 55vw; transform: translate3d(34vw, -50%, 0); } .page-id-472.lm-top-renewal .lm-home-approach__end.is-lm-one-in::before { opacity: .07; transform: translate3d(0, -50%, 0); } .page-id-472.lm-top-renewal .lm-home-approach__end::after { right: -22px; width: 48px; } .page-id-472.lm-top-renewal .lm-home-approach__endlead { margin: 0 0 22px; font-size: clamp(24px, 6.8vw, 31px); line-height: 1.62; } .page-id-472.lm-top-renewal .lm-home-approach__endstrong strong { font-size: clamp(32px, 8.9vw, 42px); line-height: 1.36; } } @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-approach__end::before, .page-id-472.lm-top-renewal .lm-home-approach__end.is-lm-one-in::before { opacity: .075; transform: translate3d(0, -50%, 0); transition: none; } } /* --------------------------------------------------------------------------- 19. セクション05 CONNECTION（2026-08-24）正本：SECTION_05_CONNECTION_REFERENCE.html（section.connection.connection-v52b） LINEグリーン #06C755 は中央のLINE要素だけに使う。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-connect { position: relative; overflow: hidden; padding: 14vh 0 2vh; background: var(--lm-color-bg); } .page-id-472.lm-top-renewal .lm-home-connect__title { position: relative; z-index: 2; max-width: 780px; margin: 0 0 34px; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); } .page-id-472.lm-top-renewal .lm-home-connect__body { position: relative; z-index: 2; max-width: 760px; margin: 0 0 72px; color: #556273; font-size: 17px; line-height: 1.95; letter-spacing: -.01em; } .page-id-472.lm-top-renewal .lm-home-connect__field { position: relative; min-height: 330px; margin: 0 0 9vh; padding: 26px 0 28px; } .page-id-472.lm-top-renewal .lm-home-connect__lines { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 30px; padding-top: 20px; } .page-id-472.lm-top-renewal .lm-home-connect__line { display: grid; align-items: end; column-gap: clamp(20px, 2.6vw, 42px); row-gap: 18px; width: 100%; } .page-id-472.lm-top-renewal .lm-home-connect__line--top { grid-template-columns: 1.18fr .55fr .82fr 1.08fr; padding-right: 2.5%; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom { grid-template-columns: 1.02fr .84fr .88fr 1.18fr; padding-left: 6.5%; padding-right: 1%; } .page-id-472.lm-top-renewal .lm-home-connect__line p { display: block; min-width: 0; margin: 0; color: #243957; font-family: Arial, Helvetica, sans-serif; font-weight: 700; line-height: .88; letter-spacing: -.05em; white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(1) { font-size: clamp(50px, 5.6vw, 88px); } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(2) { font-size: clamp(26px, 2.7vw, 40px); color: #788494; letter-spacing: -.03em; } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(3) { font-size: clamp(36px, 3.9vw, 58px); } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(4) { font-size: clamp(39px, 4.3vw, 68px); color: #4f6178; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(1) { font-size: clamp(48px, 5.25vw, 82px); letter-spacing: -.055em; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(2) { font-size: clamp(28px, 2.9vw, 44px); color: #6f7c8d; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(3) { font-size: clamp(34px, 3.6vw, 55px); } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(4) { font-size: clamp(24px, 2.35vw, 35px); color: #7b8695; letter-spacing: .045em; } /* LINEだけをLINEグリーンにする */ .page-id-472.lm-top-renewal .lm-home-connect__line p.is-lm-line { color: #06C755; } .page-id-472.lm-top-renewal .lm-home-connect__conclusion { width: 100%; margin: 108px 0 138px; padding: 0 0 0 6%; } .page-id-472.lm-top-renewal .lm-home-connect__closing { max-width: 1120px; margin: 0; color: #14243d; font-size: clamp(28px, 2.55vw, 40px); font-weight: 620; line-height: 1.58; letter-spacing: -.04em; } .page-id-472.lm-top-renewal .lm-home-connect__closing p { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } /* Referenceは closing-main / closing-sub の2つの span で、subの中にさらに br と closing-thirdline の span が入る三層構造だった。ブロックエディタで壊れない形にするため3段落へ分解し、余白の出方（main→18px→sub、sub→thirdは改行のみ）は同じにしている。 */ .page-id-472.lm-top-renewal .lm-home-connect__main { white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-connect__sub, .page-id-472.lm-top-renewal .lm-home-connect__third { color: #263851; font-weight: 560; } .page-id-472.lm-top-renewal .lm-home-connect__sub { max-width: 1120px; margin-top: 18px; } /* Referenceは3行目を折り返させない（closing-thirdline-v59）。段落へ分解した今は改行が段落境界になるので、nowrapだけを引き継ぐ。 */ @media (min-width: 901px) { .page-id-472.lm-top-renewal .lm-home-connect__third { white-space: nowrap; } } @media (max-width: 1120px) { .page-id-472.lm-top-renewal .lm-home-connect__main { white-space: normal; } } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-connect__line--top, .page-id-472.lm-top-renewal .lm-home-connect__line--bottom { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 18px; padding-left: 0; padding-right: 0; } .page-id-472.lm-top-renewal .lm-home-connect__conclusion { padding: 0 3% 0 6%; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-connect { padding-top: 96px; } .page-id-472.lm-top-renewal .lm-home-connect__title { margin-bottom: 24px; } .page-id-472.lm-top-renewal .lm-home-connect__body { margin-bottom: 46px; font-size: 15.5px; line-height: 1.88; } .page-id-472.lm-top-renewal .lm-home-connect__field { min-height: 278px; margin-bottom: 7vh; padding-top: 8px; } .page-id-472.lm-top-renewal .lm-home-connect__lines { gap: 22px; padding-top: 12px; } .page-id-472.lm-top-renewal .lm-home-connect__line--top, .page-id-472.lm-top-renewal .lm-home-connect__line--bottom { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 14px 18px; padding: 0; } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(1) { font-size: 44px; } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(2) { font-size: 26px; } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(3) { font-size: 35px; } .page-id-472.lm-top-renewal .lm-home-connect__line--top p:nth-child(4) { font-size: 38px; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(1) { font-size: 46px; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(2) { font-size: 28px; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(3) { font-size: 33px; } .page-id-472.lm-top-renewal .lm-home-connect__line--bottom p:nth-child(4) { font-size: 24px; } .page-id-472.lm-top-renewal .lm-home-connect__conclusion { margin: 70px 0 92px; padding: 0 2% 0 6%; } .page-id-472.lm-top-renewal .lm-home-connect__closing { max-width: 94%; font-size: 25px; line-height: 1.62; } .page-id-472.lm-top-renewal .lm-home-connect__sub { margin-top: 14px; } .page-id-472.lm-top-renewal .lm-home-connect__sub { max-width: 94%; margin-top: 14px; } /* PC向けの意図的な改行はSPでは解除する */ .page-id-472.lm-top-renewal .lm-home-connect__sub br, .page-id-472.lm-top-renewal .lm-home-approach__lead br, .page-id-472.lm-top-renewal .lm-home-connect__body br, .page-id-472.lm-top-renewal .lm-home-approach__sidetitle br, .page-id-472.lm-top-renewal .lm-home-problem__rowtitle br { display: none; } } /* --------------------------------------------------------------------------- 20. セクション04 のアイコン（2026-08-24） Reference のインラインSVGを data URI 化して背景画像として当てている。 DOMへSVGを持たせないことで、ブロックエディタ上ではテキストだけが見え、管理画面から番号・ラベルを自由に編集してもアイコンが壊れない。・写真ではなく装飾用の線画なので、10_ASSETS／メディアライブラリの対象外。「base64画像を貼らない」規定は承認済み実写素材（S09/S12）に対するもの。・data URI では currentColor が効かないため、Reference のCSS上の色（アイコン #50627a ／円のシンボル #304a6a）を焼き込んでいる。・stroke-width 1.55 / linecap round / linejoin round も Reference と同一。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-approach__side--customer .lm-home-approach__sidehead::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22 fill=%22none%22 stroke=%22%23304a6a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2220%22 cy=%2213%22 r=%225.5%22%3E%3C/circle%3E %3Cpath d=%22M9 31c1.4-6.2 5.4-9.3 11-9.3S29.6 24.8 31 31%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-know::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 16s4.6-7 12-7 12 7 12 7-4.6 7-12 7S4 16 4 16Z%22%3E%3C/path%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%223.2%22%3E%3C/circle%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-interest::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 4l1.9 6.1L24 12l-6.1 1.9L16 20l-1.9-6.1L8 12l6.1-1.9L16 4Z%22%3E%3C/path%3E%3Cpath d=%22M24.5 19l1 3.5L29 23.5l-3.5 1-1 3.5-1-3.5-3.5-1 3.5-1 1-3.5Z%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-understand::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 7.5h7.4c1.4 0 2.6.9 2.6 2.1v15.1c0-1.2-1.2-2.1-2.6-2.1H6V7.5Z%22%3E%3C/path%3E%3Cpath d=%22M26 7.5h-7.4c-1.4 0-2.6.9-2.6 2.1v15.1c0-1.2 1.2-2.1 2.6-2.1H26V7.5Z%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-consult::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 7h20v13H14l-6 5v-5H6V7Z%22%3E%3C/path%3E%3Cpath d=%22M11 12h10M11 16h7%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-continue::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M23.5 10A9 9 0 0 0 8 13%22%3E%3C/path%3E%3Cpath d=%22M8 8v5h5%22%3E%3C/path%3E%3Cpath d=%22M8.5 22A9 9 0 0 0 24 19%22%3E%3C/path%3E%3Cpath d=%22M24 24v-5h-5%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__side--internal .lm-home-approach__sidehead::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22 fill=%22none%22 stroke=%22%23304a6a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect height=%2222%22 rx=%222%22 width=%2224%22 x=%228%22 y=%229%22%3E%3C/rect%3E %3Cpath d=%22M13 15h14M13 20h14M13 25h8%22%3E%3C/path%3E %3Ccircle cx=%2228%22 cy=%2225%22 r=%222.3%22%3E%3C/circle%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-gather::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2216%22 cy=%228%22 rx=%229%22 ry=%223.5%22%3E%3C/ellipse%3E%3Cpath d=%22M7 8v8c0 1.9 4 3.5 9 3.5s9-1.6 9-3.5V8%22%3E%3C/path%3E%3Cpath d=%22M7 16v8c0 1.9 4 3.5 9 3.5s9-1.6 9-3.5v-8%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-decide::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%2210%22%3E%3C/circle%3E%3Cpath d=%22M11 16l3 3 7-7%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-share::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%223%22%3E%3C/circle%3E%3Ccircle cx=%2223%22 cy=%229%22 r=%223%22%3E%3C/circle%3E%3Ccircle cx=%2223%22 cy=%2223%22 r=%223%22%3E%3C/circle%3E%3Cpath d=%22M11.7 14.7l8.6-4.4M11.7 17.3l8.6 4.4%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-execute::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%2210%22%3E%3C/circle%3E%3Cpath d=%22M13 11.5l7 4.5-7 4.5v-9Z%22%3E%3C/path%3E%3C/svg%3E"); } .page-id-472.lm-top-renewal .lm-home-approach__label.is-lm-i-improve::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%2350627a%22 stroke-width=%221.55%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 24l6-6 4 4 8-10%22%3E%3C/path%3E%3Cpath d=%22M20 12h5v5%22%3E%3C/path%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 21. セクション06 SERVICES（2026-08-24）正本：SECTION_06_SERVICES_REFERENCE.html（section.services / services-head-v16） Referenceの services-head-v14 / v15 は後段で display:none されており、有効なのは v16。ここへは各セレクタの最終有効値だけを移している。内容コンテナと kicker は S03〜05 で用意した .lm-home-s345__inner / .lm-home-s345__kicker（16章）をそのまま使う。Referenceの .wrap / .kicker と同値のため、セクションごとに作り直さない。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-service { position: relative; isolation: isolate; overflow: hidden; padding: 14vh 0 16vh; border-top: 1px solid rgba(21, 33, 58, .055); background: var(--lm-color-bg); } /* 背景の大文字「SERVICES」 */ .page-id-472.lm-top-renewal .lm-home-service::before { content: "SERVICES"; content: "SERVICES" / ""; position: absolute; z-index: 0; left: -.05em; top: .14em; white-space: nowrap; pointer-events: none; color: rgba(12, 26, 56, .022); font-family: Arial, Helvetica, sans-serif; font-size: clamp(125px, 16vw, 260px); font-weight: 900; line-height: .82; letter-spacing: -.075em; } .page-id-472.lm-top-renewal .lm-home-service__head { margin-bottom: 8.5vh; } .page-id-472.lm-top-renewal .lm-home-service__title { max-width: none; margin: 0; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-service__subcopy { width: min(470px, 38vw); margin: 44px 2.5vw 0 auto; } .page-id-472.lm-top-renewal .lm-home-service__subcopy p { margin: 0; color: #4d5b70; font-size: clamp(16px, 1.18vw, 18px); font-weight: 500; line-height: 1.95; letter-spacing: -.012em; } .page-id-472.lm-top-renewal .lm-home-service__index { border-top: 1px solid rgba(12, 26, 56, .18); } /* Referenceの行は n / 名称 / 内容 / 矢印の4カラム。矢印はリンクであることの合図だが、5つの支援領域それぞれの遷移先がまだWordPress上に存在しないため、この実装ではリンクにせず矢印も出さない（Handoff v2 のQAレポート「存在しないURLを作らない」に従う）。遷移先が決まったら .lm-home-service__row を a 要素へ変え、 4カラム目と矢印を戻す。 */ .page-id-472.lm-top-renewal .lm-home-service__row { display: grid; grid-template-columns: 68px minmax(310px, 1.08fr) minmax(290px, .92fr); gap: 28px; align-items: center; padding: 31px 0; border-bottom: 1px solid rgba(12, 26, 56, .13); } .page-id-472.lm-top-renewal .lm-home-service__n { margin: 0; color: rgba(12, 26, 56, .30); font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .03em; } .page-id-472.lm-top-renewal .lm-home-service__en { display: block; margin: 0 0 8px; /* 2026-08-25 C-1：3.65 → 4.74 */ color: #697484; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .16em; } .page-id-472.lm-top-renewal .lm-home-service__name { margin: 0; color: #243149; font-size: clamp(21px, 1.85vw, 29px); font-weight: 700; line-height: 1.35; letter-spacing: -.032em; } .page-id-472.lm-top-renewal .lm-home-service__desc { margin: 0; color: #5a677b; font-size: 14px; line-height: 1.82; } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-service__head { margin-bottom: 68px; } .page-id-472.lm-top-renewal .lm-home-service__subcopy { width: min(620px, 82%); margin: 32px 0 0 12%; } .page-id-472.lm-top-renewal .lm-home-service__subcopy p { font-size: 17px; } .page-id-472.lm-top-renewal .lm-home-service__row { grid-template-columns: 48px 1fr; } .page-id-472.lm-top-renewal .lm-home-service__desc { grid-column: 2; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-service { padding-top: 102px; padding-bottom: 112px; } .page-id-472.lm-top-renewal .lm-home-service::before { left: -18px; top: 76px; font-size: 31vw; color: rgba(12, 26, 56, .027); } .page-id-472.lm-top-renewal .lm-home-service__head { margin-bottom: 62px; } .page-id-472.lm-top-renewal .lm-home-service__title { white-space: normal; } .page-id-472.lm-top-renewal .lm-home-service__subcopy { width: 88%; margin: 28px 0 0 8%; } .page-id-472.lm-top-renewal .lm-home-service__subcopy p { font-size: 16px; line-height: 1.92; } .page-id-472.lm-top-renewal .lm-home-service__row { grid-template-columns: 40px 1fr; gap: 12px 14px; padding: 26px 0; } .page-id-472.lm-top-renewal .lm-home-service__name { font-size: 20px; } .page-id-472.lm-top-renewal .lm-home-service__desc { font-size: 13px; line-height: 1.78; } } @media (max-width: 390px) { .page-id-472.lm-top-renewal .lm-home-service::before { font-size: 33vw; } } /* --------------------------------------------------------------------------- 22. セクション07 HOW WE WORK（2026-08-24）正本：SECTION_07_HOW_WE_WORK_REFERENCE.html（section.how.how-v37）進捗線と現在地の表現はスクロール量に連動する。Handoff v2 実装仕様は「Custom progress JS acceptable / 上方向スクロールで 05→04→03→02→01 へ逆進すること」を必須要件としている。JS側の設計は lm-home-s0609.js を参照。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-how { position: relative; padding: 14vh 0 18vh; background: linear-gradient(180deg, var(--lm-color-bg) 0%, #f8fafc 100%); } .page-id-472.lm-top-renewal .lm-home-how__title { max-width: none; margin: 0 0 11vh; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); } .page-id-472.lm-top-renewal .lm-home-how__journey { position: relative; --how-progress: 0%; } /* 進捗線。::before が下地、::after が伸びる線。 */ .page-id-472.lm-top-renewal .lm-home-how__journey::before, .page-id-472.lm-top-renewal .lm-home-how__journey::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 0; width: 1px; transform: translateX(-50%); pointer-events: none; } .page-id-472.lm-top-renewal .lm-home-how__journey::before { bottom: 0; background: rgba(12, 26, 56, .14); } .page-id-472.lm-top-renewal .lm-home-how__journey::after { height: var(--how-progress); max-height: 100%; background: linear-gradient(180deg, rgba(47, 89, 255, .72), rgba(12, 26, 56, .62)); box-shadow: 0 0 12px rgba(47, 89, 255, .08); will-change: height; } .page-id-472.lm-top-renewal .lm-home-how__step { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: clamp(28px, 3.4vw, 52px); align-items: center; min-height: clamp(245px, 26vh, 330px); padding: 28px 0; overflow: visible; } .page-id-472.lm-top-renewal .lm-home-how__scopy { grid-column: 1; grid-row: 1; max-width: 520px; justify-self: end; text-align: left; } .page-id-472.lm-top-renewal .lm-home-how__visual { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 0; justify-self: start; text-align: left; color: #8490a2; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 750; line-height: 1.7; letter-spacing: .105em; } /* 偶数番の工程は左右を入れ替える */ .page-id-472.lm-top-renewal .lm-home-how__step:nth-of-type(even) .lm-home-how__scopy { grid-column: 3; justify-self: start; } .page-id-472.lm-top-renewal .lm-home-how__step:nth-of-type(even) .lm-home-how__visual { grid-column: 1; justify-self: end; text-align: right; flex-direction: row-reverse; } .page-id-472.lm-top-renewal .lm-home-how__dot { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: auto; border: 1px solid rgba(12, 26, 56, .26); border-radius: 50%; background: var(--lm-color-bg); color: rgba(12, 26, 56, .60); font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .02em; transition: background .6s var(--lm-ref-ease), color .6s var(--lm-ref-ease), border-color .6s var(--lm-ref-ease), transform .6s var(--lm-ref-ease), box-shadow .6s ease; } .page-id-472.lm-top-renewal .lm-home-how__chapter { display: block; margin: 0 0 10px; color: #8793a5; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .17em; } .page-id-472.lm-top-renewal .lm-home-how__stepname { margin: 0 0 15px; color: var(--lm-ref-navy); font-size: clamp(32px, 3.05vw, 48px); font-weight: 680; line-height: 1.22; letter-spacing: -.043em; } .page-id-472.lm-top-renewal .lm-home-how__stepbody { margin: 0; color: #58657a; font-size: clamp(14px, 1.08vw, 16px); line-height: 1.95; } /* 現在地の表現。JSが is-lm-seen / is-lm-current / is-lm-past を付け外しする。 */ .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__visual { opacity: .48; transform: translate3d(0, 12px, 0); transition: opacity .75s var(--lm-ref-ease), transform .75s var(--lm-ref-ease); } .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__step.is-lm-seen .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__step.is-lm-seen .lm-home-how__visual { opacity: .72; transform: none; } .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__step.is-lm-past .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__step.is-lm-past .lm-home-how__visual { opacity: .78; transform: none; } .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__step.is-lm-current .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__step.is-lm-current .lm-home-how__visual { opacity: 1; transform: none; } .page-id-472.lm-top-renewal .lm-home-how__step.is-lm-past .lm-home-how__dot, .page-id-472.lm-top-renewal .lm-home-how__step.is-lm-current .lm-home-how__dot { color: #fff; background: var(--lm-ref-navy); border-color: var(--lm-ref-navy); } .page-id-472.lm-top-renewal .lm-home-how__step.is-lm-current .lm-home-how__dot { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(12, 26, 56, .035); } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-how__step { grid-template-columns: 58px minmax(0, 1fr); gap: 22px; min-height: auto; padding: 50px 0; } .page-id-472.lm-top-renewal .lm-home-how__journey::before, .page-id-472.lm-top-renewal .lm-home-how__journey::after { left: 29px; transform: none; } .page-id-472.lm-top-renewal .lm-home-how__dot { grid-column: 1; width: 50px; height: 50px; } .page-id-472.lm-top-renewal .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how__step:nth-of-type(even) .lm-home-how__scopy { grid-column: 2; grid-row: 1; justify-self: stretch; max-width: none; } .page-id-472.lm-top-renewal .lm-home-how__visual, .page-id-472.lm-top-renewal .lm-home-how__step:nth-of-type(even) .lm-home-how__visual { grid-column: 2; grid-row: 2; justify-self: start; flex-direction: row; text-align: left; margin-top: -16px; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-how { padding-top: 104px; padding-bottom: 112px; } .page-id-472.lm-top-renewal .lm-home-how__title { margin-bottom: 58px; } .page-id-472.lm-top-renewal .lm-home-how__step { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 42px 0; } .page-id-472.lm-top-renewal .lm-home-how__journey::before, .page-id-472.lm-top-renewal .lm-home-how__journey::after { left: 23px; } .page-id-472.lm-top-renewal .lm-home-how__dot { width: 44px; height: 44px; font-size: 10px; } .page-id-472.lm-top-renewal .lm-home-how__stepname { font-size: clamp(29px, 8.2vw, 37px); } .page-id-472.lm-top-renewal .lm-home-how__stepbody { font-size: 14px; line-height: 1.9; } .page-id-472.lm-top-renewal .lm-home-how__visual { font-size: 8.5px; } } @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how__visual, .page-id-472.lm-top-renewal .lm-home-how__dot { transition: none; transform: none; } .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__scopy, .page-id-472.lm-top-renewal .lm-home-how.is-lm-js .lm-home-how__visual { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 23. セクション08 WHY LM / TRUST（2026-08-24）正本：SECTION_08_WHY_LM_REFERENCE.html（section.trust.trust-v18）認定情報はこのセクションにのみ置く（S02からの集約は正式決定）。文言はReferenceの本文と .certification-footnote-v21 のみを使用し、過去案の certification-v18 / v20（Reference上で display:none）は使わない。濃紺の面になるため、共通の kicker 色をこのセクション内だけで上書きする。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-trust { padding: 13vh 0 15vh; background: var(--lm-ref-navy); color: #fff; } .page-id-472.lm-top-renewal .lm-home-trust .lm-home-s345__kicker { color: rgba(255, 255, 255, .48); } .page-id-472.lm-top-renewal .lm-home-trust .lm-home-s345__kicker::before { background: rgba(255, 255, 255, .34); } .page-id-472.lm-top-renewal .lm-home-trust__title { max-width: 900px; margin: 0; color: #fff; font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); } .page-id-472.lm-top-renewal .lm-home-trust__rows { margin-top: 8vh; border-top: 1px solid rgba(255, 255, 255, .25); } .page-id-472.lm-top-renewal .lm-home-trust__row { display: grid; grid-template-columns: minmax(170px, .35fr) minmax(0, 1fr); gap: 7vw; padding: 50px 0 54px; border-bottom: 1px solid rgba(255, 255, 255, .18); } .page-id-472.lm-top-renewal .lm-home-trust__index { display: flex; align-items: baseline; gap: 20px; padding-top: 8px; } .page-id-472.lm-top-renewal .lm-home-trust__no { margin: 0; color: rgba(255, 255, 255, .80); font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.04em; } .page-id-472.lm-top-renewal .lm-home-trust__label { margin: 0; /* 2026-08-25 C-1：3.75 → 4.83 */ color: rgba(255, 255, 255, .48); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .18em; } .page-id-472.lm-top-renewal .lm-home-trust__copy { max-width: 900px; } .page-id-472.lm-top-renewal .lm-home-trust__rowtitle { margin: 0 0 24px; color: #fff; font-size: clamp(28px, 2.6vw, 42px); font-weight: 680; line-height: 1.36; letter-spacing: -.038em; } .page-id-472.lm-top-renewal .lm-home-trust__rowbody { width: min(760px, 100%); margin: 0; color: rgba(255, 255, 255, .68); font-size: clamp(15px, 1.22vw, 18px); line-height: 1.95; } /* 認定代理店の補足。Referenceの .certification-footnote-v21 相当。 */ .page-id-472.lm-top-renewal .lm-home-trust__footnote { max-width: 760px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .40); font-size: 12px; font-weight: 450; line-height: 1.85; } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-trust__rows { margin-top: 66px; } .page-id-472.lm-top-renewal .lm-home-trust__row { grid-template-columns: 130px minmax(0, 1fr); gap: 34px; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-trust { padding-top: 104px; padding-bottom: 116px; } .page-id-472.lm-top-renewal .lm-home-trust__rows { margin-top: 58px; } .page-id-472.lm-top-renewal .lm-home-trust__row { display: block; padding: 35px 0 39px; } .page-id-472.lm-top-renewal .lm-home-trust__index { margin-bottom: 24px; gap: 15px; } .page-id-472.lm-top-renewal .lm-home-trust__no { font-size: 17px; } .page-id-472.lm-top-renewal .lm-home-trust__rowtitle { margin-bottom: 18px; font-size: clamp(27px, 7.8vw, 34px); } .page-id-472.lm-top-renewal .lm-home-trust__rowbody { font-size: 15px; line-height: 1.9; } .page-id-472.lm-top-renewal .lm-home-trust__footnote { margin-top: 21px; padding-top: 17px; font-size: 11.5px; line-height: 1.82; } } /* --------------------------------------------------------------------------- 24. セクション09 CASE STUDIES（2026-08-24）正本：SECTION_09_CASE_STUDIES_REFERENCE.html（section.cases）事例ビジュアルは 10_ASSETS の承認済み実画像をWordPressメディアライブラリ経由で使う。base64・再生成・差し替えは行わない。 Referenceの :root は S09 専用の値なので --lm-case-* として閉じ込める。 Referenceは ISSUE / THINKING / DESIGN を dl/dt/dd で組んでいるが、ブロックエディタに定義リストのコアブロックが無いため、ラベル段落＋本文段落の2段組へ置き換えている（見た目は同一）。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-case { position: relative; overflow: hidden; padding: 118px 0 140px; background: var(--lm-color-bg); --lm-case-ink: #14243d; --lm-case-text: #37465c; --lm-case-muted: #6A7486; /* 2026-08-25 C-1：3.89 → 4.71 */ --lm-case-line: rgba(18, 39, 70, .09); --lm-case-blue: #2f59ff; } /* Referenceの .wrap は S09 だけ 1220px。共通の 1240px と分けて持つ。 */ .page-id-472.lm-top-renewal .lm-home-case__inner { position: relative; z-index: 2; width: min(1220px, 86vw); margin-inline: auto; } .page-id-472.lm-top-renewal .lm-home-case .lm-home-s345__kicker { margin-bottom: 34px; color: #657287; font-size: 10px; } .page-id-472.lm-top-renewal .lm-home-case .lm-home-s345__kicker::before { background: #9aa6b7; } .page-id-472.lm-top-renewal .lm-home-case__intro { display: grid; grid-template-columns: 1.18fr .82fr; gap: 8vw; align-items: end; margin-bottom: 112px; } .page-id-472.lm-top-renewal .lm-home-case__title { margin: 0; color: var(--lm-case-ink); font-size: clamp(44px, 5.3vw, 82px); font-weight: 650; line-height: 1.08; letter-spacing: -.055em; white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-case__lead { max-width: 520px; margin: 0 0 8px; color: #596779; font-size: 17px; line-height: 1.95; letter-spacing: -.012em; } .page-id-472.lm-top-renewal .lm-home-case__story { display: grid; grid-template-columns: 1.12fr .88fr; /* gutterに上限を設ける（2026-08-27）。 .lm-home-case__inner が1220pxで頭打ちになる一方 gap は 7vw で伸び続けるため、画面が広いほどコピー列が逆に狭くなっていた（1536px:490px → 1920px:478px）。 7vw が100pxに達する1429px以上でgutterを固定し、コピー列を約493pxで安定させる。 1428px以下は 7vw < 100px のため従来と同じ値になる。 */ gap: min(7vw, 100px); align-items: center; padding: 92px 0 104px; border-top: 1px solid var(--lm-case-line); } .page-id-472.lm-top-renewal .lm-home-case__story--reverse { grid-template-columns: .88fr 1.12fr; } .page-id-472.lm-top-renewal .lm-home-case__story:last-child { border-bottom: 1px solid var(--lm-case-line); } .page-id-472.lm-top-renewal .lm-home-case__visual { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; margin: 0; background: #f4f6f9; } .page-id-472.lm-top-renewal .lm-home-case__visual::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid rgba(20, 42, 74, .045); } .page-id-472.lm-top-renewal .lm-home-case__visual img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 2番目の事例だけ画像と本文を左右入れ替える */ .page-id-472.lm-top-renewal .lm-home-case__story--reverse .lm-home-case__visual { order: 2; } .page-id-472.lm-top-renewal .lm-home-case__story--reverse .lm-home-case__copy { order: 1; } .page-id-472.lm-top-renewal .lm-home-case__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .page-id-472.lm-top-renewal .lm-home-case__no { margin: 0; color: var(--lm-case-blue); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .17em; } .page-id-472.lm-top-renewal .lm-home-case__brand { margin: 0; color: var(--lm-case-muted); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .14em; } .page-id-472.lm-top-renewal .lm-home-case__name { margin: 0 0 48px; color: var(--lm-case-ink); font-size: clamp(31px, 3vw, 46px); font-weight: 650; line-height: 1.18; letter-spacing: -.04em; } /* 運営法人の補足（CASE 02 のみ）。主見出しの従属情報として、小さく・控えめに、ただしAA基準（--lm-case-muted は白地で4.71:1）で読める濃さにする。補足が続く見出しだけ下余白を詰め、見出しと補足を一つのまとまりとして見せる。 :has() 非対応環境では見出しの余白がそのまま48pxになるだけで、表示は崩れない。 */ .page-id-472.lm-top-renewal .lm-home-case__name:has(+ .lm-home-case__operator) { margin-bottom: 12px; } .page-id-472.lm-top-renewal .lm-home-case__operator { color: var(--lm-case-muted); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: .01em; } .page-id-472.lm-top-renewal .lm-home-case__item { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--lm-case-line); } .page-id-472.lm-top-renewal .lm-home-case__item:last-child { border-bottom: 1px solid var(--lm-case-line); } .page-id-472.lm-top-renewal .lm-home-case__dt { margin: 0; color: var(--lm-case-muted); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; } .page-id-472.lm-top-renewal .lm-home-case__dd { margin: 0; color: var(--lm-case-text); font-size: 15.5px; line-height: 1.82; letter-spacing: -.01em; } /* PCでは語のまとまりを崩さない（Referenceの .pc-keep-v94 相当） */ .page-id-472.lm-top-renewal .lm-home-case__dd .is-lm-keep { white-space: nowrap; } @media (max-width: 980px) { .page-id-472.lm-top-renewal .lm-home-case__intro { grid-template-columns: 1fr; gap: 30px; margin-bottom: 86px; } .page-id-472.lm-top-renewal .lm-home-case__story, .page-id-472.lm-top-renewal .lm-home-case__story--reverse { grid-template-columns: 1fr; gap: 52px; } .page-id-472.lm-top-renewal .lm-home-case__story--reverse .lm-home-case__visual { order: 1; } .page-id-472.lm-top-renewal .lm-home-case__story--reverse .lm-home-case__copy { order: 2; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-case { padding: 92px 0 110px; } .page-id-472.lm-top-renewal .lm-home-case__inner { width: calc(100vw - 44px); } .page-id-472.lm-top-renewal .lm-home-case__intro { margin-bottom: 62px; } .page-id-472.lm-top-renewal .lm-home-case__title { font-size: clamp(40px, 11vw, 54px); white-space: normal; } .page-id-472.lm-top-renewal .lm-home-case__lead { font-size: 15px; line-height: 1.9; } .page-id-472.lm-top-renewal .lm-home-case__story { gap: 38px; padding: 68px 0 76px; } .page-id-472.lm-top-renewal .lm-home-case__name { margin-bottom: 34px; font-size: 31px; } .page-id-472.lm-top-renewal .lm-home-case__name:has(+ .lm-home-case__operator) { margin-bottom: 10px; } .page-id-472.lm-top-renewal .lm-home-case__operator { font-size: 13.5px; } .page-id-472.lm-top-renewal .lm-home-case__item { grid-template-columns: 68px 1fr; gap: 14px; padding: 17px 0; } .page-id-472.lm-top-renewal .lm-home-case__dd { font-size: 14.5px; line-height: 1.78; } .page-id-472.lm-top-renewal .lm-home-case__dd .is-lm-keep { white-space: normal; } /* PC向けの意図的な改行はSPでは解除する */ .page-id-472.lm-top-renewal .lm-home-case__lead br, .page-id-472.lm-top-renewal .lm-home-service__subcopy br, .page-id-472.lm-top-renewal .lm-home-how__stepbody br, .page-id-472.lm-top-renewal .lm-home-trust__rowbody br, .page-id-472.lm-top-renewal .lm-home-trust__footnote br { display: none; } } /* 狭幅端末での長い社名の折り返し回避（2026-08-27）対象は CASE 01「ウィルポート株式会社様」のみ（--long 修飾子を付けた見出しだけ）。 CASE 02 / CASE 03 の見出しは 31px のまま一切変更しない。実測値（游ゴシック体・letter-spacing -.04em）テキスト幅 = font-size × 10.5 コピー列幅 = 100vw - 44px（.lm-home-case__inner の calc(100vw - 44px)）よって 31px が収まるのは 10.5 × 31 + 44 = 369.5px 以上。 360px端末では 325.5px > 316px となり「様」だけが2行目へ落ちていた。下の式は「列幅から6pxの余裕を引いた幅にちょうど収まるサイズ」を返し、 31pxを上限とする。31pxで収まる幅（約375px以上）では min() が31pxを選ぶため、 390 / 412 / 430px の表示は現行と完全に同一になる。 */ @media (max-width: 400px) { .page-id-472.lm-top-renewal .lm-home-case__name--long { font-size: min(31px, calc((100vw - 50px) / 10.5)); } } /* --------------------------------------------------------------------------- 25. S06〜S09 で入れ子コンテナを透過させる指定（2026-08-24） 16-3 と同じ考え方。ブロックエディタが挟む .wp-block-group__inner-container をグリッド／フレックスの親では display:contents にして、「内側コンテナが有る／無い」どちらの出力でも同じ配置になるようにする。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-service__index > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-service__row > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-how__journey > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-how__step > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-trust__rows > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-trust__row > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-trust__index > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-case__intro > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-case__story > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-case__meta > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-case__item > .wp-block-group__inner-container { display: contents; } /* SWELL標準の見出し装飾を、S06〜S09で使う見出しクラスに対して打ち消す */ .page-id-472 .post_content .lm-home-service__title, .page-id-472 .post_content .lm-home-service__name, .page-id-472 .post_content .lm-home-how__title, .page-id-472 .post_content .lm-home-how__stepname, .page-id-472 .post_content .lm-home-trust__title, .page-id-472 .post_content .lm-home-trust__rowtitle, .page-id-472 .post_content .lm-home-case__title, .page-id-472 .post_content .lm-home-case__name { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-service__title::before, .page-id-472 .post_content .lm-home-service__title::after, .page-id-472 .post_content .lm-home-service__name::before, .page-id-472 .post_content .lm-home-service__name::after, .page-id-472 .post_content .lm-home-how__title::before, .page-id-472 .post_content .lm-home-how__title::after, .page-id-472 .post_content .lm-home-how__stepname::before, .page-id-472 .post_content .lm-home-how__stepname::after, .page-id-472 .post_content .lm-home-trust__title::before, .page-id-472 .post_content .lm-home-trust__title::after, .page-id-472 .post_content .lm-home-trust__rowtitle::before, .page-id-472 .post_content .lm-home-trust__rowtitle::after, .page-id-472 .post_content .lm-home-case__title::before, .page-id-472 .post_content .lm-home-case__title::after, .page-id-472 .post_content .lm-home-case__name::before, .page-id-472 .post_content .lm-home-case__name::after { content: none; display: none; } /* --------------------------------------------------------------------------- 26. 段落の余白を意図どおりに戻す（2026-08-24）【なぜ必要か】既存の共通タイポグラフィ（3章）に .page-id-472 .lm-home-section p … 詳細度 (0,3,1) .page-id-472 .lm-home-section p:not(:last-child) … 詳細度 (0,3,1) があり、後者が段落の下余白として 32px を与えている。 S03以降で追加した各段落の余白指定は .page-id-472.lm-top-renewal .lm-home-xxx__yyy … 詳細度 (0,3,0) というクラスのみの形だったため、要素セレクタを1つ持つ既存側に負けて下余白が 32px に上書きされていた（実機のcomputed styleで確認）。ここでは同じ宣言を .page-id-472.lm-top-renewal .lm-home-section p.lm-home-xxx__yyy … (0,4,1) の形で置き直す。既存3章のルールにも、S03〜S09の各章にも手を触れず、末尾で確実に勝たせるための追加だけで解決する。影響していたのは Reference の余白値であり、文言・構造・色は無関係。 --------------------------------------------------------------------------- */ /* 26-1. S03〜S09 共通の kicker */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-s345__kicker { margin: 0 0 28px; } .page-id-472.lm-top-renewal .lm-home-section.lm-home-case p.lm-home-s345__kicker { margin-bottom: 34px; } /* 26-2. セクション03 PROBLEM */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-problem__num, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-problem__rowbody, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-problem__resolution { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-problem__lead { margin: 0 0 14px; } /* 26-3. セクション04 OUR APPROACH */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__lead { margin: 36px 0 78px 7%; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__en { margin: 2px 0 12px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__no { margin: 0 0 17px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__label, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__endstrong, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__tpsmall, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__tpstrong { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__endlead { margin: 0 0 28px; } /* 26-4. セクション05 CONNECTION */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-connect__body { margin: 0 0 72px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-connect__main, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-connect__third { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-connect__sub { margin: 18px 0 0; } /* 26-5. セクション06 SERVICES */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-service__n, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-service__desc { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-service__en { margin: 0 0 8px; } /* 26-6. セクション07 HOW WE WORK */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-how__chapter { margin: 0 0 10px; } /* 丸は90pxのカラム内で中央に置く。auto を確実に効かせる。 */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-how__dot { margin: auto; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-how__stepbody, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-how__visual { margin: 0; } /* 26-7. セクション08 WHY LM / TRUST */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-trust__no, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-trust__label, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-trust__rowbody { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-trust__footnote { margin: 24px 0 0; } /* 26-8. セクション09 CASE STUDIES */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__no, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__brand, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__dt, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__dd { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__lead { margin: 0 0 8px; } /* 補足は見出しが担っていた下余白（PC 48px / SP 34px）を引き継ぐ */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__operator { margin: 0 0 48px; } /* 26-9. 720px以下の値（各章のSP指定と同じ値を、同じ詳細度で置き直す） */ @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-section p.lm-home-problem__lead { margin-bottom: 12px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__lead { margin: 30px 0 56px 6%; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__no { margin-bottom: 12px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__endlead { margin: 0 0 22px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-connect__body { margin-bottom: 46px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-connect__sub { margin-top: 14px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-trust__footnote { margin-top: 21px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__operator { margin-bottom: 34px; } } /* 26-10. SWELLの first-child / last-child リセットに対する例外（2026-08-24） SWELLは .post_content 配下の最初／最後の子に対して .post_content div > :first-child { margin-top: 0 !important } .post_content div > :last-child { margin-bottom: 0 !important } を当てている。この2つだけは詳細度では覆せないため、 Referenceの値を成立させるのに必要な**1宣言ずつ**に限って !important を使う。スコープは他と同じく .page-id-472.lm-top-renewal 配下のままで、 ID472以外・他の余白には一切影響しない。 */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-approach__en { margin-top: 2px !important; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-case__lead { margin-bottom: 8px !important; } /* --------------------------------------------------------------------------- 27. セクション10 PRICE GUIDE（2026-08-24）正本：SECTION_10_PRICE_GUIDE_REFERENCE.html（section.price） Handoff v2 QA の必須要件「S10 v103 tablet fix: 721〜980px で右にはみ出さない」に対応する @media(min-width:721px) and (max-width:980px) を含む。金額は Reference では 30万円〜のような1段落内の入れ子だが、ブロックエディタで無属性spanが失われても壊れないよう、数字と単位を別々の段落ブロックへ分解している（見た目はベースライン揃えのflexで同一）。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-price { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 14vh, 160px) 0 clamp(120px, 15vh, 180px); background: #f5f7fa; --lm-price-ink: #15213a; --lm-price-navy: #0c1a38; --lm-price-blue: #2f59ff; --lm-price-green: #45795b; /* 2026-08-25 C-1：3.79 → 4.73（文字色にのみ使用） */ --lm-price-deep: #243653; --lm-price-line: #cfd7e2; --lm-price-linestrong: #aeb9c8; } /* 背景の大文字「PRICE」 */ .page-id-472.lm-top-renewal .lm-home-price::before { content: "PRICE"; content: "PRICE" / ""; position: absolute; z-index: -1; right: -.03em; top: .12em; pointer-events: none; color: rgba(12, 26, 56, .026); font-family: Arial, Helvetica, sans-serif; font-size: clamp(150px, 20vw, 310px); font-weight: 900; line-height: .8; letter-spacing: -.075em; } /* 27-1. 導入 */ .page-id-472.lm-top-renewal .lm-home-price__intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .75fr); gap: clamp(50px, 8vw, 120px); align-items: end; margin-bottom: clamp(90px, 11vh, 130px); } .page-id-472.lm-top-renewal .lm-home-price__title { max-width: none; margin: 0; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); } .page-id-472.lm-top-renewal .lm-home-price__introcopy { color: #5f6c80; font-size: 15px; line-height: 1.95; } /* 27-2. 小見出しブロック（構築／構築後の支援で共用） */ .page-id-472.lm-top-renewal .lm-home-price__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr); gap: clamp(40px, 6vw, 80px); align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--lm-price-linestrong); } .page-id-472.lm-top-renewal .lm-home-price__eyebrow { display: block; /* 2026-08-25 C-1：3.40 → 4.74 */ color: #656F7E; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: .16em; } .page-id-472.lm-top-renewal .lm-home-price__headtitle { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.3; letter-spacing: -.035em; } .page-id-472.lm-top-renewal .lm-home-price__headcopy { color: #657185; font-size: 14px; line-height: 1.85; } /* 27-3. 構築3プラン */ .page-id-472.lm-top-renewal .lm-home-price__buildindex { margin-bottom: clamp(120px, 14vh, 180px); } .page-id-472.lm-top-renewal .lm-home-price__buildrow { --lm-accent: var(--lm-price-deep); position: relative; display: grid; grid-template-columns: minmax(135px, .45fr) minmax(260px, .8fr) minmax(340px, 1.25fr); gap: clamp(24px, 3.5vw, 54px); align-items: center; padding: 34px 0 36px; border-bottom: 1px solid var(--lm-price-line); } .page-id-472.lm-top-renewal .lm-home-price__buildrow--start { --lm-accent: var(--lm-price-deep); } .page-id-472.lm-top-renewal .lm-home-price__buildrow--standard { --lm-accent: var(--lm-price-green); } .page-id-472.lm-top-renewal .lm-home-price__buildrow--advanced { --lm-accent: var(--lm-price-blue); } /* 金額（数字と単位を別段落に分けたうえでベースライン揃え） */ .page-id-472.lm-top-renewal .lm-home-price__amount { display: flex; align-items: baseline; gap: .12em; white-space: nowrap; color: var(--lm-price-ink); font-size: clamp(27px, 2.4vw, 36px); font-weight: 800; line-height: 1; letter-spacing: -.045em; } .page-id-472.lm-top-renewal .lm-home-price__num { font-size: 1.45em; font-weight: 820; } .page-id-472.lm-top-renewal .lm-home-price__unit { font-size: .72em; letter-spacing: -.02em; } .page-id-472.lm-top-renewal .lm-home-price__buildmeta .lm-home-price__eyebrow { color: var(--lm-accent); } .page-id-472.lm-top-renewal .lm-home-price__buildtitle { font-size: clamp(19px, 1.65vw, 25px); line-height: 1.4; letter-spacing: -.025em; } .page-id-472.lm-top-renewal .lm-home-price__buildcopy { color: #5c687b; font-size: 14px; line-height: 1.9; } /* 27-4. 構築後の支援4種 */ .page-id-472.lm-top-renewal .lm-home-price__supportindex { margin-top: 28px; border-top: 1px solid var(--lm-price-linestrong); } .page-id-472.lm-top-renewal .lm-home-price__supportrow { display: grid; grid-template-columns: 56px minmax(210px, .72fr) minmax(420px, 1.35fr) minmax(150px, .48fr); gap: clamp(22px, 3vw, 44px); align-items: center; padding: 30px 0; border-bottom: 1px solid var(--lm-price-line); } .page-id-472.lm-top-renewal .lm-home-price__supportno { color: #93a0b1; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .14em; } .page-id-472.lm-top-renewal .lm-home-price__supporttitle { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.4; letter-spacing: -.02em; } .page-id-472.lm-top-renewal .lm-home-price__supportcopy { color: #5f6b7f; font-size: 13.5px; line-height: 1.9; } .page-id-472.lm-top-renewal .lm-home-price__supportprice { display: flex; align-items: baseline; justify-content: flex-end; gap: .3em; justify-self: end; white-space: nowrap; color: var(--lm-price-ink); text-align: right; font-size: 15px; font-weight: 700; } .page-id-472.lm-top-renewal .lm-home-price__pricetiny { /* 2026-08-25 C-1：4.17 → 4.74。「月額」は価格の意味を決める情報のため対象に含めた。 */ color: #646f81; font-size: 12px; font-weight: 700; } .page-id-472.lm-top-renewal .lm-home-price__pricenum { font-size: clamp(27px, 2.2vw, 34px); letter-spacing: -.05em; } /* 27-5. 内製化研修 */ .page-id-472.lm-top-renewal .lm-home-price__training { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(430px, 1.25fr) minmax(170px, .42fr); gap: clamp(30px, 4.2vw, 62px); align-items: center; margin-bottom: 34px; padding: 38px 0 42px; border-top: 2px solid var(--lm-price-navy); border-bottom: 1px solid var(--lm-price-linestrong); } .page-id-472.lm-top-renewal .lm-home-price__trainingtitle { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.35; letter-spacing: -.035em; } .page-id-472.lm-top-renewal .lm-home-price__trainingcopy { color: #5c687b; font-size: 14px; line-height: 1.95; } .page-id-472.lm-top-renewal .lm-home-price__trainingprice { display: flex; align-items: baseline; gap: .1em; justify-self: end; white-space: nowrap; font-size: 16px; font-weight: 800; } .page-id-472.lm-top-renewal .lm-home-price__trainingnum { font-size: clamp(31px, 2.7vw, 42px); letter-spacing: -.055em; } /* 27-6. その他 */ .page-id-472.lm-top-renewal .lm-home-price__other { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr) minmax(170px, .42fr); gap: clamp(30px, 4.2vw, 62px); align-items: center; padding: 30px 0 34px; border-bottom: 1px solid var(--lm-price-line); } .page-id-472.lm-top-renewal .lm-home-price__othertitle { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.4; letter-spacing: -.028em; } .page-id-472.lm-top-renewal .lm-home-price__othercopy { color: #5f6b7f; font-size: 13.5px; line-height: 1.9; } .page-id-472.lm-top-renewal .lm-home-price__otherprice { justify-self: end; white-space: nowrap; font-size: 15px; font-weight: 800; } /* 27-7. 注記 */ .page-id-472.lm-top-renewal .lm-home-price__notes { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 26px; /* 2026-08-25 C-1：3.44 → 4.74 */ color: #656F7E; font-size: 11px; line-height: 1.7; } /* 27-8. h4のSWELL装飾打ち消し（S10で初めてh4を使うため） */ .page-id-472 .post_content .lm-home-price__headtitle, .page-id-472 .post_content .lm-home-price__buildtitle, .page-id-472 .post_content .lm-home-price__supporttitle, .page-id-472 .post_content .lm-home-price__trainingtitle, .page-id-472 .post_content .lm-home-price__othertitle, .page-id-472 .post_content .lm-home-price__title { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-price__headtitle::before, .page-id-472 .post_content .lm-home-price__headtitle::after, .page-id-472 .post_content .lm-home-price__buildtitle::before, .page-id-472 .post_content .lm-home-price__buildtitle::after, .page-id-472 .post_content .lm-home-price__supporttitle::before, .page-id-472 .post_content .lm-home-price__supporttitle::after, .page-id-472 .post_content .lm-home-price__trainingtitle::before, .page-id-472 .post_content .lm-home-price__trainingtitle::after, .page-id-472 .post_content .lm-home-price__othertitle::before, .page-id-472 .post_content .lm-home-price__othertitle::after, .page-id-472 .post_content .lm-home-price__title::before, .page-id-472 .post_content .lm-home-price__title::after { content: none; display: none; } /* 27-9. 段落・見出しの余白（既存 .lm-home-section p を上回る詳細度で宣言） */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__introcopy { margin: 0 0 6px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__eyebrow, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__headcopy, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__buildcopy, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__supportno, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__supportcopy, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__trainingcopy, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__othercopy, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__num, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__unit, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__pricetiny, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__pricenum, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__priceunit, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__trainingnum, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__trainingunit, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__otherprice, .page-id-472.lm-top-renewal .lm-home-section .lm-home-price__notes p { margin: 0; } /* 2026-08-25：注記のフォントサイズがSWELLと競合していた件の修正。 .lm-home-price__notes に font-size: 11px（設計値）を置いていたが、子の

には直接指定が無く、SWELLの .post_content p が直接当たるため継承が負けて実表示が19pxになっていた。設計値の未反映であり、見た目の調整ではない。 11px を子側へ重複して書かず、親の設計値をそのまま継承させる。 font-size の Single Source of Truth は .lm-home-price__notes 側のまま。直上の margin:0 のルールは16セレクタの共有ブロックのため、そちらへ font-size を足すと price__num / __pricenum など他15要素のサイズまで変わってしまう。よって注記専用のルールとして分けている。 line-height も同じ理由で、親の 1.7（設計値）が .post_content p の 1.8 に負けていた。こちらも子側へ数値を書かず継承させる。詳細度は共有ブロックと同じ (0,4,1) で、後に置くことで解決している。 */ .page-id-472.lm-top-renewal .lm-home-section .lm-home-price__notes p { font-size: inherit; line-height: inherit; } .page-id-472.lm-top-renewal .lm-home-section h3.lm-home-price__headtitle { margin: 11px 0 0; } .page-id-472.lm-top-renewal .lm-home-section h4.lm-home-price__buildtitle { margin: 9px 0 0; } .page-id-472.lm-top-renewal .lm-home-section h4.lm-home-price__supporttitle { margin: 0; } .page-id-472.lm-top-renewal .lm-home-section h3.lm-home-price__trainingtitle { margin: 10px 0 0; } .page-id-472.lm-top-renewal .lm-home-section h3.lm-home-price__othertitle { margin: 9px 0 0; } /* 27-10. レスポンシブ */ @media (max-width: 980px) { .page-id-472.lm-top-renewal .lm-home-price__intro, .page-id-472.lm-top-renewal .lm-home-price__head { grid-template-columns: 1fr; gap: 24px; } .page-id-472.lm-top-renewal .lm-home-price__buildrow { grid-template-columns: 150px minmax(210px, .85fr) 1fr; gap: 22px; } .page-id-472.lm-top-renewal .lm-home-price__supportrow { grid-template-columns: 42px minmax(180px, .7fr) 1fr minmax(135px, .4fr); gap: 20px; } } /* ★ v103 のタブレット修正。721〜980px では内容幅が 660px 前後まで狭まり、 3カラムのままだと最小幅（研修 860px / その他 870px）を超えて右へはみ出す。 2カラムへ畳み、金額を左下へ回す。 */ @media (min-width: 721px) and (max-width: 980px) { .page-id-472.lm-top-renewal .lm-home-price__training, .page-id-472.lm-top-renewal .lm-home-price__other { grid-template-columns: minmax(220px, .72fr) minmax(0, 1fr); gap: 18px 32px; align-items: start; } .page-id-472.lm-top-renewal .lm-home-price__trainingcopy, .page-id-472.lm-top-renewal .lm-home-price__othercopy { grid-column: 2; grid-row: 1 / span 2; } .page-id-472.lm-top-renewal .lm-home-price__trainingprice, .page-id-472.lm-top-renewal .lm-home-price__otherprice { grid-column: 1; justify-self: start; text-align: left; white-space: nowrap; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-price { padding: 96px 0 112px; } .page-id-472.lm-top-renewal .lm-home-price::before { top: 70px; right: -12vw; font-size: 46vw; } .page-id-472.lm-top-renewal .lm-home-price__intro { margin-bottom: 80px; } .page-id-472.lm-top-renewal .lm-home-price__introcopy { font-size: 14px; } .page-id-472.lm-top-renewal .lm-home-price__head { padding-bottom: 20px; } .page-id-472.lm-top-renewal .lm-home-price__headtitle { font-size: 27px; } .page-id-472.lm-top-renewal .lm-home-price__buildindex { margin-bottom: 96px; } .page-id-472.lm-top-renewal .lm-home-price__buildrow { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 29px 0 32px; } .page-id-472.lm-top-renewal .lm-home-price__amount { margin-bottom: 7px; font-size: 27px; } .page-id-472.lm-top-renewal .lm-home-price__buildtitle { font-size: 21px; } .page-id-472.lm-top-renewal .lm-home-price__buildcopy { font-size: 13.5px; } .page-id-472.lm-top-renewal .lm-home-price__supportrow { grid-template-columns: 42px 1fr; gap: 8px 12px; padding: 26px 0 30px; } .page-id-472.lm-top-renewal .lm-home-price__supporttitle, .page-id-472.lm-top-renewal .lm-home-price__supportcopy { grid-column: 2; } .page-id-472.lm-top-renewal .lm-home-price__supportprice { grid-column: 2; justify-self: start; justify-content: flex-start; margin-top: 7px; text-align: left; } .page-id-472.lm-top-renewal .lm-home-price__training, .page-id-472.lm-top-renewal .lm-home-price__other { grid-template-columns: 1fr; gap: 18px; } .page-id-472.lm-top-renewal .lm-home-price__trainingprice, .page-id-472.lm-top-renewal .lm-home-price__otherprice { justify-self: start; } .page-id-472.lm-top-renewal .lm-home-price__notes { display: block; } .page-id-472.lm-top-renewal .lm-home-section .lm-home-price__notes p + p { margin-top: 5px; } } /* --------------------------------------------------------------------------- 28. セクション11 FAQ（2026-08-24）正本：SECTION_11_FAQ_REFERENCE.html（section.faq.faq-v22） Reference は素の

を使っているため、 WordPressコアの details ブロックをそのまま採用する。JSは不要。 Reference の summary は 01質問＋の 3要素だが、ブロックエディタの summary はひとつのリッチテキストなので、番号は CSS カウンタ、＋アイコンは ::after で生成する。これで管理画面には質問文だけが見え、編集しても番号と記号が壊れない。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-faq { padding: 14vh 0 16vh; border-top: 1px solid rgba(21, 33, 58, .05); background: var(--lm-color-bg); } .page-id-472.lm-top-renewal .lm-home-faq__title { max-width: none; margin: 0; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-faq__list { width: 100%; margin: 8vh 0 0; border-top: 1px solid rgba(12, 26, 56, .22); counter-reset: lm-faq; } .page-id-472.lm-top-renewal .lm-home-faq__item { margin: 0; border-bottom: 1px solid rgba(12, 26, 56, .15); } .page-id-472.lm-top-renewal .lm-home-faq__item summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 22px; align-items: center; min-height: 96px; padding: 22px 0; cursor: pointer; list-style: none; color: #253249; font-size: clamp(17px, 1.35vw, 21px); font-weight: 620; line-height: 1.65; letter-spacing: -.018em; } /* 標準の三角マーカーを消す（Chrome系・その他の両方） */ .page-id-472.lm-top-renewal .lm-home-faq__item summary::-webkit-details-marker { display: none; } .page-id-472.lm-top-renewal .lm-home-faq__item summary::marker { content: ""; } /* 番号（Referenceの summary > span 相当）。カウンタで自動採番する。 */ .page-id-472.lm-top-renewal .lm-home-faq__item summary::before { counter-increment: lm-faq; content: counter(lm-faq, decimal-leading-zero); color: #8a95a6; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .08em; } /* ＋アイコン（Referenceの summary > i 相当）。開くと45度回って×になる。 */ .page-id-472.lm-top-renewal .lm-home-faq__item summary::after { content: "＋"; color: #7e8999; font-size: 24px; font-weight: 300; line-height: 1; text-align: right; transition: transform .22s ease; } .page-id-472.lm-top-renewal .lm-home-faq__item[open] summary::after { transform: rotate(45deg); } /* 回答。コアの details ブロックが持つ .wp-block-details > :not(summary) / > :last-child の余白を上書きする。 */ .page-id-472.lm-top-renewal .lm-home-section .lm-home-faq__item p.lm-home-faq__answer { max-width: 820px; margin: 0; padding: 0 42px 29px 74px; color: #5a687c; font-size: 15px; font-weight: 450; line-height: 1.95; } @media (hover: hover) { .page-id-472.lm-top-renewal .lm-home-faq__item summary { transition: color .2s ease; } .page-id-472.lm-top-renewal .lm-home-faq__item summary:hover { color: #2f59ff; } } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-faq__list { margin-top: 64px; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-faq { padding-top: 104px; padding-bottom: 116px; } .page-id-472.lm-top-renewal .lm-home-faq__list { margin-top: 54px; } .page-id-472.lm-top-renewal .lm-home-faq__item summary { grid-template-columns: 32px minmax(0, 1fr) 22px; gap: 11px; min-height: 84px; padding: 20px 0; font-size: 16px; line-height: 1.65; } .page-id-472.lm-top-renewal .lm-home-faq__item summary::after { font-size: 21px; } .page-id-472.lm-top-renewal .lm-home-section .lm-home-faq__item p.lm-home-faq__answer { max-width: none; padding: 0 22px 24px 43px; font-size: 14px; line-height: 1.9; } } @media (max-width: 390px) { .page-id-472.lm-top-renewal .lm-home-faq__title { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-faq__item summary::after { transition: none; } } /* SWELL標準の見出し装飾を打ち消す */ .page-id-472 .post_content .lm-home-faq__title { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-faq__title::before, .page-id-472 .post_content .lm-home-faq__title::after { content: none; display: none; } /* --------------------------------------------------------------------------- 29. S10〜S11 で入れ子コンテナを透過させる指定（2026-08-24） 16-3 / 25章と同じ考え方。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-price__intro > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__head > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__buildindex > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__buildrow > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__amount > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__ongoing > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__supportindex > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__supportrow > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__supportprice > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__training > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__trainingprice > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__other > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-price__notes > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-faq__list > .wp-block-group__inner-container { display: contents; } /* 30. SWELLの last-child リセットに対する例外・S10（2026-08-24） 26-10 と同じ理由。S10の導入文は親の最後の子にあたるため .post_content div > :last-child { margin-bottom: 0 !important } に負けて、Referenceの 6px（align-items:end のグリッド内で見出しとのベースラインを合わせるための微調整）が効かない。必要な1宣言だけ !important で成立させる。スコープは他と同じく .page-id-472.lm-top-renewal 配下のままで、ID472以外へは影響しない。 */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-price__introcopy { margin-bottom: 6px !important; } /* --------------------------------------------------------------------------- 31. セクション12 MESSAGE / COMPANY（2026-08-24）正本：SECTION_12_MESSAGE_COMPANY_REFERENCE.html（section.message.message-v42） Reference の v40 / v41 は後段で v42 に置き換えられているため、有効な v42 の値だけを移している。「COMPANY」は会社概要表を置かず、固定ページ「LMについて」（ID 474）へのリンクへ委ねる構成。Reference にも会社概要表は無い。代表写真は 10_ASSETS の承認済み実画像（メディアライブラリ ID 502）。枠は 5:4 で、正方形（1264×1264）の原本を object-fit: cover と object-position: center 42% で表示側だけ切り出す。**ファイル自体は無加工**。色調（filter）と重ねのトーンは Reference の指定をそのまま踏襲している。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-message { position: relative; overflow: hidden; padding: 15vh 0 16vh; background: linear-gradient(180deg, var(--lm-color-bg) 0%, #fbfcfd 100%); color: var(--lm-ref-navy); } .page-id-472.lm-top-renewal .lm-home-message__title { max-width: none; margin: 0; color: var(--lm-ref-navy); font-size: var(--lm-sec-h-size); font-weight: var(--lm-sec-h-weight); line-height: var(--lm-sec-h-lh); letter-spacing: var(--lm-sec-h-tracking); white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-message__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 9vw; align-items: end; margin-top: 10vh; } .page-id-472.lm-top-renewal .lm-home-message__copy { max-width: 720px; padding-left: 7%; } .page-id-472.lm-top-renewal .lm-home-message__para { color: #4f5d72; font-size: clamp(16px, 1.18vw, 18px); font-weight: 450; line-height: 2; letter-spacing: -.012em; } .page-id-472.lm-top-renewal .lm-home-message__conclusion { color: var(--lm-ref-navy); font-size: clamp(20px, 1.55vw, 24px); font-weight: 620; line-height: 1.72; letter-spacing: -.025em; } /* 「LMについて」への導線。Referenceの a.message-link-v42 相当。 */ .page-id-472.lm-top-renewal .lm-home-message__linkwrap a { display: inline-flex; align-items: center; gap: 22px; padding-bottom: 10px; border-bottom: 1px solid rgba(12, 26, 56, .42); color: #2f3e56; font-size: 15px; font-weight: 620; text-decoration: none; transition: border-color .2s ease, color .2s ease; } .page-id-472.lm-top-renewal .lm-home-message__linkwrap a::after { content: "↗"; font-size: 18px; font-style: normal; } @media (hover: hover) { .page-id-472.lm-top-renewal .lm-home-message__linkwrap a:hover { color: #2f59ff; border-color: #2f59ff; } } .page-id-472.lm-top-renewal .lm-home-message__linkwrap a:focus-visible { outline: 2px solid #2f59ff; outline-offset: 4px; } /* 代表ポートレート */ .page-id-472.lm-top-renewal .lm-home-message__portrait { width: 100%; max-width: 420px; justify-self: end; } .page-id-472.lm-top-renewal .lm-home-message__frame { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; margin: 0; background: #dfe5eb; } .page-id-472.lm-top-renewal .lm-home-message__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.88) contrast(.97) brightness(.96); } /* 写真に重ねる淡いトーン（Referenceの div.portrait-tone-v42 相当）。 DOMを増やさず ::after で描く。 */ .page-id-472.lm-top-renewal .lm-home-message__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(9, 23, 49, .01), rgba(9, 23, 49, .10)), rgba(30, 57, 91, .035); } .page-id-472.lm-top-renewal .lm-home-message__meta { margin-top: 17px; } .page-id-472.lm-top-renewal .lm-home-message__reptitle { display: block; color: #8490a2; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .17em; } .page-id-472.lm-top-renewal .lm-home-message__repname { display: block; color: #26344b; font-size: 18px; font-weight: 650; } /* 段落・リンクの余白（既存 .lm-home-section p を上回る詳細度で宣言） */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__para { margin: 0 0 24px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__conclusion { margin: 38px 0 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__linkwrap { margin: 48px 0 0; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__reptitle { margin: 0 0 8px; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__repname { margin: 0; } @media (max-width: 1000px) { .page-id-472.lm-top-renewal .lm-home-message__title { white-space: normal; } .page-id-472.lm-top-renewal .lm-home-message__content { grid-template-columns: 1fr; gap: 70px; } .page-id-472.lm-top-renewal .lm-home-message__copy { max-width: 760px; padding-left: 7%; } .page-id-472.lm-top-renewal .lm-home-message__portrait { width: min(420px, 62%); max-width: none; margin-left: auto; } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-message { padding-top: 104px; padding-bottom: 116px; } .page-id-472.lm-top-renewal .lm-home-message__content { margin-top: 60px; gap: 58px; } .page-id-472.lm-top-renewal .lm-home-message__copy { width: 94%; padding-left: 6%; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__para { margin-bottom: 21px; } .page-id-472.lm-top-renewal .lm-home-message__para { font-size: 15px; line-height: 1.94; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__conclusion { margin-top: 32px; } .page-id-472.lm-top-renewal .lm-home-message__conclusion { font-size: 20px; line-height: 1.72; } .page-id-472.lm-top-renewal .lm-home-section p.lm-home-message__linkwrap { margin-top: 38px; } .page-id-472.lm-top-renewal .lm-home-message__portrait { width: 76%; } .page-id-472.lm-top-renewal .lm-home-message__repname { font-size: 17px; } /* PC向けの意図的な改行はSPでは解除する */ .page-id-472.lm-top-renewal .lm-home-message__para br, .page-id-472.lm-top-renewal .lm-home-message__conclusion br { display: none; } } /* --------------------------------------------------------------------------- 32. セクション13 CONTACT（2026-08-24）正本：SECTION_13_CONTACT_REFERENCE.html（section.contact.contact-v26） S13の見出しは共通スケール（--lm-sec-h-*）ではなく、このセクション専用の大きさを持つ（Reference の contact-v26 が独自に指定しているため）。ページ末尾のセクションなので、S14グローバルフッターへの接続を想定して下端に余白を確保している。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-contact { position: relative; isolation: isolate; overflow: hidden; padding: 17vh 0 18vh; background: var(--lm-color-bg); } /* 背景の大文字「CONTACT」 */ .page-id-472.lm-top-renewal .lm-home-contact::before { content: "CONTACT"; content: "CONTACT" / ""; position: absolute; z-index: 0; right: -.035em; bottom: -.06em; white-space: nowrap; pointer-events: none; color: rgba(12, 26, 56, .022); font-family: Arial, Helvetica, sans-serif; font-size: clamp(180px, 24vw, 390px); font-weight: 900; line-height: .72; letter-spacing: -.08em; } .page-id-472.lm-top-renewal .lm-home-contact__inner { position: relative; z-index: 2; } .page-id-472.lm-top-renewal .lm-home-contact__title { max-width: none; margin: 0; color: var(--lm-ref-navy); font-size: clamp(58px, 6.4vw, 98px); font-weight: 700; line-height: 1.07; letter-spacing: -.06em; white-space: nowrap; } .page-id-472.lm-top-renewal .lm-home-contact__lower { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 8vw; align-items: end; margin-top: 8vh; } .page-id-472.lm-top-renewal .lm-home-contact__subcopy { width: min(680px, 100%); color: #536176; font-size: clamp(16px, 1.22vw, 18px); font-weight: 450; line-height: 1.95; } /* CTA「無料相談をする」。Referenceの a.contact-cta-v26 相当。 */ .page-id-472.lm-top-renewal .lm-home-contact__cta a { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 64px; padding: 0 0 14px; border-bottom: 1px solid rgba(12, 26, 56, .72); color: var(--lm-ref-navy); font-size: 17px; font-weight: 680; text-decoration: none; transition: border-color .22s ease, transform .22s ease; } .page-id-472.lm-top-renewal .lm-home-contact__cta a::after { content: "↗"; font-size: 19px; font-weight: 400; font-style: normal; } @media (hover: hover) { .page-id-472.lm-top-renewal .lm-home-contact__cta a:hover { border-color: #2f59ff; transform: translateX(5px); } } .page-id-472.lm-top-renewal .lm-home-contact__cta a:focus-visible { outline: 2px solid #2f59ff; outline-offset: 6px; } /* 段落の余白（既存 .lm-home-section p を上回る詳細度で宣言） */ .page-id-472.lm-top-renewal .lm-home-section p.lm-home-contact__subcopy, .page-id-472.lm-top-renewal .lm-home-section p.lm-home-contact__cta { margin: 0; } @media (max-width: 1100px) { .page-id-472.lm-top-renewal .lm-home-contact__title { font-size: clamp(54px, 6vw, 82px); } } @media (max-width: 900px) { .page-id-472.lm-top-renewal .lm-home-contact__title { font-size: clamp(46px, 7.2vw, 66px); white-space: normal; } .page-id-472.lm-top-renewal .lm-home-contact__lower { grid-template-columns: 1fr; gap: 38px; } .page-id-472.lm-top-renewal .lm-home-contact__cta a { width: min(360px, 100%); } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-contact { padding-top: 112px; padding-bottom: 124px; } .page-id-472.lm-top-renewal .lm-home-contact__title { font-size: clamp(40px, 11.2vw, 52px); line-height: 1.13; letter-spacing: -.048em; } /* PC向けの意図的な改行はSPでは解除する */ .page-id-472.lm-top-renewal .lm-home-contact__subcopy br { display: none; } } @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-contact__cta a, .page-id-472.lm-top-renewal .lm-home-message__linkwrap a { transition: none; } .page-id-472.lm-top-renewal .lm-home-contact__cta a:hover { transform: none; } } /* --------------------------------------------------------------------------- 33. S12〜S13 の下地（2026-08-24） 16-3 / 25章 / 29章と同じ考え方。あわせてSWELL標準の見出し装飾を打ち消す。 --------------------------------------------------------------------------- */ .page-id-472.lm-top-renewal .lm-home-message__content > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-contact__lower > .wp-block-group__inner-container { display: contents; } .page-id-472 .post_content .lm-home-message__title, .page-id-472 .post_content .lm-home-contact__title { padding: 0; border: 0; background: none; } .page-id-472 .post_content .lm-home-message__title::before, .page-id-472 .post_content .lm-home-message__title::after, .page-id-472 .post_content .lm-home-contact__title::before, .page-id-472 .post_content .lm-home-contact__title::after { content: none; display: none; } /* 34. S13 CTA と SWELL固定ボタンの重なり回避（2026-08-24） SWELLの「トップへ戻る」ボタン（.p-fixBtnWrap）は position:fixed で全幅共通に right:40px・幅52px。つまり画面右端から 92px の帯を常に占有する。実測すると 980px で CTA右端が右端から69px、1280pxで90pxとなり、この帯に入り込んで矢印付近のクリックが固定ボタンに奪われていた（elementFromPoint が c-fixBtn を返す状態）。下段グリッドに右余白を持たせ、280px のCTAトラックごと必要最小限だけ左へ逃がす。CTAの幅・高さ・文言・装飾は変えない。逃がす量は max(0px, 104px - 7vw)。内容幅が 86vw のあいだは右端までの距離が 7vw なので、合計で常に 104px 以上を確保でき、画面が広くなるほど自動的に 0 へ収束して本来の位置に戻る（1486px 以上では補正なし）。 1カラムになる 900px 以下は CTA が左寄せで固定ボタンから十分離れるため対象外にしている。SWELL側の設定・.p-fixBtnWrap には一切手を触れていない。 */ @media (min-width: 901px) { .page-id-472.lm-top-renewal .lm-home-contact__lower { padding-right: max(0px, 104px - 7vw); } } /* =========================================================================== 35. セクション14 FOOTER（2026-08-25）正本：Handoff v2 `07_SECTION_REFERENCES/SECTION_14_FOOTER_REFERENCE.html` （SHA-256 05bf639e6424e942fb6879afdc404126f7957faf1e23837e121f6c3d36cac5c5 ＝ 01_SOURCE_OF_TRUTH_MANIFEST.md の正式値と一致）対象セレクタ `footer.footer-v43` --------------------------------------------------------------------------- これは「ID472プレビュー用の page-local フッター」である Handoff v2 は3箇所で同じことを指示している。 03_SPEC §S14 「render a page-local S14 only inside .lm-top-renewal, and if necessary hide the current global footer only on body.page-id-472」 11_GATES Gate 3「Do not modify global SWELL footer while ID472 is still under review」 manifest 「footer_rule: Do not change global footer until separate final cutover approval」したがって今回は、 - SWELLのグローバルフッター（footer#footer.l-footer）は一切変更しない - カスタマイザー・フッターウィジェット・footer_menu も変更しない - 子テーマに footer.php を作らない／PHPフックも追加しないとし、ID472でだけ #footer を隠して、本文末尾に置いたこのフッターを見せる。グローバルフッターをS14へ置き換える最終cutoverは、公開判断時の別工程。 --------------------------------------------------------------------------- Referenceからの意図的な差異 1. クラス名を `footer-v43` 系から `lm-home-footer__*` へ改名する。 Referenceの `.wrap` `.footer` `.brand` `.fgrid` は総称名で、現時点の実DOM・実CSSでは衝突0件だったが、SWELL更新やプラグイン追加で衝突しうる。 2. 背景の大文字「LM」（Referenceの div.footer-brand-v43、aria-hidden）は DOMを増やさず ::before で描く。S02のghost・S13の背景「CONTACT」と同じやり方で、`content: "LM" / ""` の代替テキスト空指定により支援技術には読ませない。1行目の content はスラッシュ構文が未対応の環境向け。 Referenceと同じく position:absolute なので、flexアイテムにはならない。 3. `.lm-home-section` は付けない。付けると .page-id-472.lm-top-renewal .lm-home-section p:not(:last-child) など既存の共通ルール（26章）に巻き込まれるため、最初から外しておく。そのぶん8章がセクションに対して行っている全幅化の後処理を、このフッターにも同じ内容で用意する（35-1）。 4. Referenceの `.footer-bottom-v43 > span` は段落1つにまとめた。表示結果は同じで、ブロックエディタ上の編集単位が素直になる。 5. 色は Reference の #08142d をそのまま使う。S08 WHY LM の #0C1A38 とはわずかに異なるが、Reference指定値を優先して合わせにいかない。リンク先（実在ページ・実在アンカーのみ。href="#" と推測URLは使っていない）サービス → #services （S06。同一ページ内アンカー）支援事例 → #case-studies （S09。同一ページ内アンカー） LMについて → 固定ページ ID474（slug: about）お問い合わせ → 固定ページ ID476（slug: contact）プライバシーポリシー → 固定ページ ID478（slug: privacy-policy） Referenceの `` は、投稿が0件のため今回は出さない。記事公開後にEXPLORE列へ足す。使用アセット：なし（ロゴ・シンボル・アイコンの指定はReferenceに存在しない） JavaScript：なし =========================================================================== */ /* 35-1. 8章がセクションに対して行っている全幅化の後処理を、フッターにも同じ内容で用意する。8-3（.post_content > .alignfull）はクラス指定なのでフッターにもそのまま効くが、8-4（セクション間余白ゼロ）と 8-5（内側コンテナの max-width 解除）は .lm-home-section 限定のため、ここで同じことを行う。これが無いとS13との間に隙間ができ、内容幅が --article_size（900px）で止まる。 */ .page-id-472.lm-top-renewal .post_content > .lm-home-footer { margin-block: 0; } .page-id-472.lm-top-renewal .lm-home-footer > .wp-block-group__inner-container { max-width: none; margin-inline: 0; } .page-id-472.lm-top-renewal .lm-home-footer > .wp-block-group__inner-container > * { margin-bottom: 0; } /* 35-2. SWELLのグローバルフッターを、ID472でだけ隠す。 #body_wrap の子構成は … / div#content.l-content / footer#footer.l-footer / div.p-fixBtnWrap / … で、「トップへ戻る」ボタンは #footer の兄弟であるため、ここを隠してもボタンは消えない（実測で確認済み）。 ID156側は #body_wrap に .lm-top-renewal が付かないため到達しない。 */ .page-id-472.lm-top-renewal #footer { display: none; } /* 35-3. フッター本体 */ .page-id-472.lm-top-renewal .lm-home-footer { /* Reference の値をこのフッター配下だけへ移したもの。値は同一。 */ --lm-footer-bg: #08142d; --lm-footer-brand: rgba(255, 255, 255, .045); --lm-footer-rule: rgba(255, 255, 255, .17); --lm-footer-rule2: rgba(255, 255, 255, .10); --lm-footer-addr: rgba(255, 255, 255, .50); --lm-footer-desc: rgba(255, 255, 255, .49); /* 2026-08-25 C-1：3.53 → 5.08 */ --lm-footer-label: rgba(255, 255, 255, .48); /* 2026-08-25 C-1：3.07 → 4.92 */ --lm-footer-link: rgba(255, 255, 255, .70); --lm-footer-bottom: rgba(255, 255, 255, .47); /* 2026-08-25 C-1：2.66 → 4.77 */ position: relative; overflow: hidden; min-height: 66vh; padding: 12vh 0 6vh; background: var(--lm-footer-bg); color: #fff; } /* 35-4. 内側コンテナ。幅はS02〜S13の .lm-home-s345__inner と同値（Referenceの .wrap も同じ min(1240px, 86vw)）。 8幅すべてで左端・幅が本文セクションと1pxも違わないことを実測で確認した。 */ .page-id-472.lm-top-renewal .lm-home-footer__inner { position: relative; min-height: 52vh; width: min(1240px, 86vw); margin-inline: auto; display: flex; flex-direction: column; justify-content: space-between; } /* 35-5. 背景の大文字「LM」（Referenceの .footer-brand-v43 相当）。 position:absolute なので flex の並びには影響しない。 */ .page-id-472.lm-top-renewal .lm-home-footer__inner::before { content: "LM"; content: "LM" / ""; position: absolute; z-index: 0; left: -.055em; top: -.02em; margin: 0; pointer-events: none; color: var(--lm-footer-brand); font-family: Arial, Helvetica, sans-serif; font-size: clamp(120px, 18vw, 280px); font-weight: 900; line-height: .78; letter-spacing: -.085em; } /* 35-6. 会社情報とナビの2列 */ .page-id-472.lm-top-renewal .lm-home-footer__main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 1.25fr) minmax(520px, 1.75fr); gap: 8vw; align-items: start; padding-top: 42px; border-top: 1px solid var(--lm-footer-rule); } /* SWELLの .post_content div > :first-child { margin-top: 0 !important } が、この要素の margin-top（Reference の 15vh）を打ち消してしまう。 Referenceの値へ戻すためだけに !important を使う。 */ .page-id-472.lm-top-renewal .lm-home-footer__main { margin-top: 15vh !important; } /* 35-7. 会社情報 */ .page-id-472.lm-top-renewal .lm-home-footer__name { margin: 0 0 12px; color: #fff; font-size: clamp(24px, 2.1vw, 32px); font-weight: 650; letter-spacing: -.03em; line-height: 1.3; } .page-id-472.lm-top-renewal .lm-home-footer__descriptor { margin: 0 0 30px; color: var(--lm-footer-desc); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; line-height: 1.8; letter-spacing: .15em; } .page-id-472.lm-top-renewal .lm-home-footer__address { margin: 0; color: var(--lm-footer-addr); font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.9; letter-spacing: .015em; } /* 35-8. ナビゲーション */ .page-id-472.lm-top-renewal .lm-home-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; } .page-id-472.lm-top-renewal .lm-home-footer__nav small { display: block; margin-bottom: 18px; color: var(--lm-footer-label); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .17em; } .page-id-472.lm-top-renewal .lm-home-footer__nav a { display: block; width: max-content; max-width: 100%; color: var(--lm-footer-link); text-decoration: none; font-size: 13px; font-weight: 450; line-height: 2.15; border: 0; background: none; } @media (hover: hover) { .page-id-472.lm-top-renewal .lm-home-footer__nav a { transition: color .18s ease; } .page-id-472.lm-top-renewal .lm-home-footer__nav a:hover { color: #fff; } } /* 35-9. copyright */ .page-id-472.lm-top-renewal .lm-home-footer__bottom { position: relative; z-index: 1; margin: 72px 0 0; padding-top: 20px; border-top: 1px solid var(--lm-footer-rule2); color: var(--lm-footer-bottom); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .10em; } /* 35-10. 入れ子コンテナを透過させる（25章 / 29章 / 33章と同じ考え方）。 flex・grid の親と実際の子の間に .wp-block-group__inner-container が挟まると並びが崩れるため、構造に依存しない形にしておく。 */ .page-id-472.lm-top-renewal .lm-home-footer__inner > .wp-block-group__inner-container, .page-id-472.lm-top-renewal .lm-home-footer__main > .wp-block-group__inner-container { display: contents; } /* 35-11. SWELL標準の見出し装飾（h3の2pxグラデーション下線）を打ち消す。 8-6と同じ考え方で、新しい装飾は足さず外すだけ。 */ .page-id-472.lm-top-renewal .post_content .lm-home-footer__name { padding: 0; border: 0; background: none; } .page-id-472.lm-top-renewal .post_content .lm-home-footer__name::before, .page-id-472.lm-top-renewal .post_content .lm-home-footer__name::after { content: none; display: none; } /* 35-12. レスポンシブ Referenceの切り替え位置は 900 / 720 だが、1列化の側だけ 1025px まで広げている。 ReferenceのPC用グリッド grid-template-columns: minmax(280px, 1.25fr) minmax(520px, 1.75fr); gap: 8vw; は最小値の合計が 280 + 520 + 8vw で、内側コンテナの 86vw を上回る幅の帯がある。必要幅 280 + 520 + 0.08vw ＞利用可能幅 0.86vw → vw < 1025.6px 2列になるのは901px以上なので、901〜1025px でナビの列が内側コンテナと上下の罫線をはみ出す。実測（2026-08-25）： 901px → +97px（「プライバシーポリシー」が +83px 突出） 980px → +36px（同 +21px） 1024px → +1px 1026px → 0px ページ全体の横overflowは出ないため自動チェックでは拾えないが、 1024×768 のタブレット横向きなど実在する幅で崩れる。新しいレイアウトを作らず、**Reference自身の ≤900px の1列レイアウトを、 2列が物理的に成立する 1026px まで延長する**補正とした。 1026px以上のPC表示と、720px以下の指定は変更していない。 */ @media (max-width: 1025px) { .page-id-472.lm-top-renewal .lm-home-footer__main { grid-template-columns: 1fr; gap: 56px; margin-top: 13vh !important; } .page-id-472.lm-top-renewal .lm-home-footer__nav { width: min(660px, 100%); } } @media (max-width: 720px) { .page-id-472.lm-top-renewal .lm-home-footer { min-height: auto; padding: 96px 0 44px; } .page-id-472.lm-top-renewal .lm-home-footer__inner { min-height: auto; width: calc(100vw - 44px); } .page-id-472.lm-top-renewal .lm-home-footer__inner::before { left: -.08em; top: .04em; font-size: 43vw; color: rgba(255, 255, 255, .042); } .page-id-472.lm-top-renewal .lm-home-footer__main { margin-top: 120px !important; padding-top: 30px; gap: 50px; } .page-id-472.lm-top-renewal .lm-home-footer__nav { grid-template-columns: 1fr 1fr; gap: 38px 28px; } .page-id-472.lm-top-renewal .lm-home-footer__name { font-size: 25px; } .page-id-472.lm-top-renewal .lm-home-footer__address { font-size: 11.5px; line-height: 1.85; } .page-id-472.lm-top-renewal .lm-home-footer__bottom { margin-top: 58px; } } @media (prefers-reduced-motion: reduce) { .page-id-472.lm-top-renewal .lm-home-footer__nav a { transition: none; } }