@charset "UTF-8"; /* =========================================================================== 株式会社LM「プライバシーポリシー」（固定ページID 478）専用CSS 2026-08-25 --------------------------------------------------------------------------- 正本デザインの正本は実装済みの ID472 TOP / ID474 ABOUT / ID476 CONTACT。 branch feature/swell-renewal-foundation-v1 / HEAD 371e7ec 時点の lm-home-renewal.css・lm-about.css・lm-contact.css で確立した Visual DNAを引き継ぐ。ただしこのページは「読ませる」でも「書かせる」でもなく、 **読み通す文書**のページ。だから3ページから引き継ぐのは - ラベルの語法（34pxの細い罫＋11pxの英字・字間.18em） - 色（白／薄いブルーグレー／Deep Navy／LM Blue） - 直線的な幾何・細い罫・余白のリズム - カードにしない／すべてを枠で囲わないだけにして、演出は持ち込まない。具体的には - 背景の大文字タイポは使わない（ABOUTのghost、CONTACTのラベル以外の装飾） - Visual Hero を作らない - 面を切り替えない（全面白。読み進める間に地の色が変わらない方が読みやすい） - 画像・アイコン・グラデーション・流線・発光は一切使わない --------------------------------------------------------------------------- 本文幅長文なので、内容幅は min(760px, 86vw) の中央1カラムに収める。 1440pxでは左右に約340pxずつ余白が残るが、これは「余った空白」ではなく 1行あたりの文字数を読みやすい範囲（16pxでおよそ47字）へ抑えるための意図的な組み方。CONTACT（860px）より更に狭くしている。 --------------------------------------------------------------------------- 見出し本文には元から h2 が14個あり、番号も文中に入っている。階層はそのまま使い、h3以下を新しく作っていない。セクションの切れ目は、カードや帯ではなく **h2の上の細い罫** で示す。 --------------------------------------------------------------------------- このファイルの独立性 lm-home-renewal.css・lm-about.css・lm-contact.css には一切追記していない。 PRIVACYのCSSはこの1ファイルに閉じており、読み込みは inc/lm-privacy.php が is_page(478) のときだけ行う。スコープは `.page-id-478.lm-privacy-page` の複合セレクタで統一する。 SWELLは body_class() をではなく div#body_wrap へ出力するため、 body要素セレクタでは一致しない（ID472実装時に実DOMで確認済み）。 `lm-privacy-page` は inc/lm-privacy.php の body_class フィルタで付与している。 JavaScriptは追加していない。Canvas・IntersectionObserverも使っていない。画像・アイコンフォント・url() は使っていない。 =========================================================================== */ /* --------------------------------------------------------------------------- 1. 変数 --------------------------------------------------------------------------- */ .page-id-478.lm-privacy-page { --lm-pv-bg: #FFFFFF; --lm-pv-soft: #F2F6F9; --lm-pv-navy: #0C1A38; --lm-pv-ink: #0C1A38; /* 見出し・強調 */ --lm-pv-body: #23304A; /* 本文。白地で AA 12.6 */ --lm-pv-muted: #5F6A7D; /* 日付・補助。白地で AA 5.62 */ --lm-pv-rule: rgba(12, 26, 56, .16); --lm-pv-rule-soft: rgba(12, 26, 56, .09); /* LM Blue。使うのはリンクとフォーカスリングだけに限定する */ --lm-pv-blue: #0B528D; --lm-pv-blue-tint: rgba(11, 82, 141, .14); /* 読み幅。長文を読み通すための値で、CONTACT（860px）より狭い */ --lm-pv-inner: min(760px, 86vw); --lm-pv-space: clamp(64px, 7vw, 108px); --lm-pv-ease: cubic-bezier(.22, .75, .2, 1); } /* --------------------------------------------------------------------------- 2. SWELL標準コンテナの幅制限を解除する ID472の8章・ID474の2章・ID476の2章と同じ考え方。 PHPやカスタマイザーには手を触れていない。 --------------------------------------------------------------------------- */ .page-id-478.lm-privacy-page #content.l-content { max-width: none; padding-top: 0; padding-inline: 0; margin-bottom: 0; } .page-id-478.lm-privacy-page #main_content.l-mainContent, .page-id-478.lm-privacy-page .l-mainContent__inner { max-width: none; } .page-id-478.lm-privacy-page .post_content { max-width: none; padding-inline: 0; margin-top: 0; } /* 2-1. 固定ページ標準タイトルとパンくずを隠す。タイトルは本文のページオープナーの h1 が担う（重複を避ける）。パンくずは #f7f7f7 の帯を持っており、静かな文書ページの頭に別の面ができてしまうため外している。戻す場合はこの1宣言を消せばよい。 */ .page-id-478.lm-privacy-page .c-pageTitle, .page-id-478.lm-privacy-page #breadcrumb { display: none; } /* --------------------------------------------------------------------------- 3. セクションの共通フレーム 3カラムgridの中央トラックへ内容を流す。DOMを増やさずに「背景は全幅・内容は中央 min(760px, 86vw)」を実現するための骨格。このページは全面が白なので背景は切り替えない。 --------------------------------------------------------------------------- */ .page-id-478.lm-privacy-page .post_content > .lm-privacy-sec { margin-block: 0; } .page-id-478.lm-privacy-page .lm-privacy-sec { position: relative; display: grid; grid-template-columns: 1fr var(--lm-pv-inner) 1fr; background-color: var(--lm-pv-bg); color: var(--lm-pv-body); overflow-x: clip; } /* ブロックエディタが差し込む入れ子コンテナを透過させ、実際の内容がgridの子になるようにする（構造に依存しない形にしておく）。 */ .page-id-478.lm-privacy-page .lm-privacy-sec > .wp-block-group__inner-container { display: contents; } .page-id-478.lm-privacy-page .lm-privacy-sec > *, .page-id-478.lm-privacy-page .lm-privacy-sec > .wp-block-group__inner-container > * { position: relative; z-index: 1; grid-column: 2; min-width: 0; } /* SWELL標準の見出し装飾（h2の塗り背景など）を打ち消す。 ID472の8-6・ID474の3章・ID476の3章と同じで、新しい装飾は足さず外すだけ。 */ .page-id-478.lm-privacy-page .post_content h1, .page-id-478.lm-privacy-page .post_content h2, .page-id-478.lm-privacy-page .post_content h3 { padding: 0; border: 0; background: none; } .page-id-478.lm-privacy-page .post_content h1::before, .page-id-478.lm-privacy-page .post_content h1::after, .page-id-478.lm-privacy-page .post_content h2::before, .page-id-478.lm-privacy-page .post_content h2::after, .page-id-478.lm-privacy-page .post_content h3::before, .page-id-478.lm-privacy-page .post_content h3::after { content: none; display: none; } /* --------------------------------------------------------------------------- 4. ページオープナー TOPのHERO・ABOUTの巨大INTRO・CONTACTのオープナーのいずれも再現しない。小さな英字ラベルと h1 だけ。文書の表紙ではなく、文書の書き出しにする。 --------------------------------------------------------------------------- */ .page-id-478.lm-privacy-page .lm-privacy-opener { padding-block: clamp(72px, 8vw, 116px) clamp(34px, 3.6vw, 52px); } /* セクションラベル。TOPの .lm-home-s345__kicker、ABOUTの .lm-about-label、 CONTACTの .lm-contact-label と同じ語法。細い罫を前置きする。 */ .page-id-478.lm-privacy-page .lm-privacy-label { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: var(--lm-pv-muted); font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .18em; } .page-id-478.lm-privacy-page .lm-privacy-label::before { content: ""; flex: 0 0 auto; width: 34px; height: 1px; background: currentColor; opacity: .62; } .page-id-478.lm-privacy-page .lm-privacy-opener h1 { margin: 0; color: var(--lm-pv-ink); font-size: 38px; font-weight: 720; line-height: 1.3; letter-spacing: -.04em; /* 日本語の語中改行を避ける。収まらないときだけ折る。 */ word-break: keep-all; overflow-wrap: anywhere; } /* --------------------------------------------------------------------------- 5. 本文（文書本体） --------------------------------------------------------------------------- */ .page-id-478.lm-privacy-page .lm-privacy-doc { padding-block: 0 var(--lm-pv-space); } /* 5-1. 段落長文を読み通すための行間。字は薄くしない。長いURL・メールアドレス・英数字が桁あふれしないよう保険をかける。文字サイズはビューポートに追従させず固定にしている。読み幅が 760px固定なので、幅に応じて字だけ縮むと1行の文字数が増えて読みにくくなる（clampにすると1280〜1440pxで15pxまで痩せた）。 760px / 16px でおよそ47字。 */ .page-id-478.lm-privacy-page .lm-privacy-doc p { margin: 0 0 1.55em; color: var(--lm-pv-body); font-size: 16px; line-height: 2.05; letter-spacing: .015em; overflow-wrap: anywhere; } .page-id-478.lm-privacy-page .lm-privacy-doc p:last-child { margin-bottom: 0; } /* 前文。本文の書き出しなので、h1のすぐ下に少しだけ間を取る。 */ .page-id-478.lm-privacy-page .lm-privacy-doc > *:first-child, .page-id-478.lm-privacy-page .lm-privacy-doc > .wp-block-group__inner-container > *:first-child { margin-top: 0; } /* 5-2. 見出し（14項目）セクションの切れ目は、カードや帯ではなく上の細い罫で示す。番号は本文側にすでに入っているので、counterは足していない。 */ .page-id-478.lm-privacy-page .lm-privacy-doc h2 { margin: 78px 0 24px; padding-top: 48px; border-top: 1px solid var(--lm-pv-rule-soft); color: var(--lm-pv-ink); font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: .005em; word-break: keep-all; overflow-wrap: anywhere; } .page-id-478.lm-privacy-page .lm-privacy-doc h3 { margin: 42px 0 16px; color: var(--lm-pv-ink); font-size: 16.5px; font-weight: 700; line-height: 1.7; letter-spacing: .01em; } /* 5-3. リスト SWELLが付ける独自のマーカーや余白を外し、素直な箇条書きに戻す。 2行目以降は記号の右側へそろう（list-item の既定の挙動）。 */ .page-id-478.lm-privacy-page .lm-privacy-doc ul, .page-id-478.lm-privacy-page .lm-privacy-doc ol { margin: 0 0 1.55em; padding-left: 1.5em; list-style-position: outside; } .page-id-478.lm-privacy-page .lm-privacy-doc ul { list-style-type: disc; } .page-id-478.lm-privacy-page .lm-privacy-doc ol { list-style-type: decimal; } .page-id-478.lm-privacy-page .lm-privacy-doc li { margin: 0 0 .6em; padding: 0; border: 0; background: none; color: var(--lm-pv-body); font-size: 16px; line-height: 1.95; letter-spacing: .015em; overflow-wrap: anywhere; } .page-id-478.lm-privacy-page .lm-privacy-doc li:last-child { margin-bottom: 0; } /* SWELLが li へ差し込む装飾（アイコン・角丸・罫）を消す。足すのではなく外すだけ。 */ .page-id-478.lm-privacy-page .lm-privacy-doc li::before, .page-id-478.lm-privacy-page .lm-privacy-doc li::after { content: none; display: none; } .page-id-478.lm-privacy-page .lm-privacy-doc li::marker { color: var(--lm-pv-muted); } /* 5-4. 強調とリンク */ .page-id-478.lm-privacy-page .lm-privacy-doc strong, .page-id-478.lm-privacy-page .lm-privacy-doc b { color: var(--lm-pv-ink); font-weight: 700; } /* 現在の本文にリンクは無いが、あとで追記されても浮かないようにしておく。色だけに頼らず下線でも識別できるようにしている。 */ .page-id-478.lm-privacy-page .lm-privacy-doc a { color: var(--lm-pv-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s var(--lm-pv-ease); } @media (hover: hover) { .page-id-478.lm-privacy-page .lm-privacy-doc a:hover { color: var(--lm-pv-navy); } } .page-id-478.lm-privacy-page .lm-privacy-doc a:focus-visible { outline: 2px solid var(--lm-pv-blue); outline-offset: 3px; border-radius: 1px; } /* --------------------------------------------------------------------------- 6. 制定日・最終改定日帯やカードにはしない。本文の最後に、細い罫のあと静かに置く。本文より少し小さいが、13.5pxで、色も白地でAA 5.62を確保している。 --------------------------------------------------------------------------- */ .page-id-478.lm-privacy-page .lm-privacy-dates { margin: clamp(56px, 5.6vw, 84px) 0 0; padding-top: clamp(26px, 2.6vw, 34px); border-top: 1px solid var(--lm-pv-rule-soft); color: var(--lm-pv-muted); font-size: 13.5px; line-height: 2.1; letter-spacing: .04em; } /* --------------------------------------------------------------------------- 7. レスポンシブ（切り替え位置はTOP／ABOUT／CONTACTと同じ 980 / 900 / 720） --------------------------------------------------------------------------- */ @media (max-width: 980px) { .page-id-478.lm-privacy-page { --lm-pv-inner: min(760px, 88vw); } } @media (max-width: 720px) { .page-id-478.lm-privacy-page { /* 左右の余白を22pxで固定する。vw基準にすると320pxで15pxまで痩せてしまい、長文が画面の縁に近づきすぎるため。 */ --lm-pv-inner: calc(100% - 44px); --lm-pv-space: clamp(52px, 11vw, 76px); } .page-id-478.lm-privacy-page .lm-privacy-opener { padding-block: clamp(56px, 14vw, 84px) clamp(26px, 6vw, 38px); } .page-id-478.lm-privacy-page .lm-privacy-label { margin-bottom: 20px; font-size: 10px; letter-spacing: .16em; } .page-id-478.lm-privacy-page .lm-privacy-label::before { width: 24px; } .page-id-478.lm-privacy-page .lm-privacy-opener h1 { font-size: clamp(24px, 7vw, 30px); } /* SPは1行が短くなるぶん、字と行間をわずかに詰めて読み進めやすくする */ .page-id-478.lm-privacy-page .lm-privacy-doc p, .page-id-478.lm-privacy-page .lm-privacy-doc li { font-size: 15.5px; line-height: 1.95; } .page-id-478.lm-privacy-page .lm-privacy-doc h2 { margin: 52px 0 18px; padding-top: 34px; font-size: 17px; } .page-id-478.lm-privacy-page .lm-privacy-doc h3 { margin: 32px 0 14px; font-size: 16px; } .page-id-478.lm-privacy-page .lm-privacy-dates { margin-top: 52px; padding-top: 26px; font-size: 13px; } .page-id-478.lm-privacy-page .lm-privacy-doc ul, .page-id-478.lm-privacy-page .lm-privacy-doc ol { padding-left: 1.35em; } } /* --------------------------------------------------------------------------- 8. モーションを減らす設定への配慮 --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page-id-478.lm-privacy-page .lm-privacy-doc a { transition: none; } } /* --------------------------------------------------------------------------- 9. 印刷法務文書なので、印刷して残す使い方がある。画面用の余白を詰め、色は黒へ寄せる。新しい要素は足していない。 --------------------------------------------------------------------------- */ @media print { .page-id-478.lm-privacy-page .lm-privacy-sec { display: block; padding-block: 0; } .page-id-478.lm-privacy-page .lm-privacy-doc p, .page-id-478.lm-privacy-page .lm-privacy-doc li { color: #000; font-size: 11pt; line-height: 1.8; } .page-id-478.lm-privacy-page .lm-privacy-doc h2 { color: #000; break-after: avoid; page-break-after: avoid; } }