@charset "UTF-8"; /* =========================================================================== 株式会社LM「LMについて」（固定ページID 474）専用CSS 2026-08-25 --------------------------------------------------------------------------- 正本デザインの正本は別資料ではなく、実装済みのトップページ（ID 472）そのもの。 branch feature/swell-renewal-foundation-v1 / HEAD ff451fd 時点の assets/css/lm-home-renewal.css で確立したVisual DNAを継承する。 - 静かで知的な Modern Corporate - 広い余白とタイポグラフィ主体 - 白／薄いブルーグレーを土台に、Deep Navy を必要な箇所だけ強く使う - 非対称・編集的なレイアウト - 大きなメッセージと静かな本文の対比 - 均一なカード列を作らない／すべてを枠で囲わない - セクションごとに構造を変える（同じ形を7回繰り返さない） - 意味のない装飾図形・流線・発光・グラデーション装飾を足さないトップの複製ではなく「同じブランド・同じ制作文化で、ABOUT専用に再設計されたページ」を目指している。 --------------------------------------------------------------------------- このファイルの独立性 lm-home-renewal.css には一切追記していない。ABOUTのCSSはこの1ファイルに閉じており、読み込みは inc/lm-about.php が is_page(474) のときだけ行う。 ID472 の既存CSS/JSの挙動は変更していない。スコープは `.page-id-474.lm-about-page` の複合セレクタで統一する。 SWELLは body_class() をではなく div#body_wrap へ出力するため、 body要素セレクタでは一致しない（ID472実装時に実DOMで確認済み）。 `lm-about-page` は inc/lm-about.php の body_class フィルタで付与している。 --------------------------------------------------------------------------- 面のリズム（同じ背景を連続させない） 01 INTRO 白 → 下端で薄いブルーグレーへ 02 PHILOSOPHY Deep Navy #0C1A38 ← ページ唯一の濃い面。Visual Hero 03 WHAT WE DO 白 04 APPROACH 薄いブルーグレー #F2F6F9 05 MESSAGE 白 06 COMPANY 薄いブルーグレー #F2F6F9 07 CONTACT 白（この下にSWELL標準フッター #fdfdfd が続く） --------------------------------------------------------------------------- 構造（DOMは増やしていない）本文は会社PC側で投入済みの7つの div.lm-about-sec をそのまま使う。セクションごとに3カラムのgridを敷き、中央トラックへ内容を流すことで、背景はビューポート全幅・内容は min(1240px, 86vw) に収める。ラッパーの追加は行っていないため、ブロックエディタでの編集性は保たれる。 JavaScriptは追加していない。動きはCSSのhover/transitionのみ。画像は使用していない（本文の画像0件を維持）。 =========================================================================== */ /* --------------------------------------------------------------------------- 1. 変数トップの --lm-color-* と同じ色域から、ABOUTで使う分だけを取り出したもの。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page { --lm-ab-bg: #FFFFFF; --lm-ab-soft: #F2F6F9; --lm-ab-navy: #0C1A38; --lm-ab-ink: #0C1A38; /* 見出し */ --lm-ab-body: #23304A; /* 本文 */ --lm-ab-muted: #646F82; /* ラベル・補助（白地でAA 5.07） */ --lm-ab-rule: rgba(12, 26, 56, .14); --lm-ab-rule-soft: rgba(12, 26, 56, .08); --lm-ab-ghost: rgba(12, 26, 56, .030); /* Deep Navy 面の上で使う色。いずれもAA 4.5:1以上を実測で確認している */ --lm-ab-on-navy: rgba(255, 255, 255, .80); --lm-ab-on-navy-muted: rgba(255, 255, 255, .52); --lm-ab-on-navy-rule: rgba(255, 255, 255, .16); --lm-ab-on-navy-ghost: rgba(255, 255, 255, .035); /* 内容幅。トップの .lm-home-s345__inner と同値 */ --lm-ab-inner: min(1240px, 86vw); /* 読みやすい本文幅 */ --lm-ab-read: min(720px, 100%); /* セクション上下 */ --lm-ab-space: clamp(88px, 9.4vw, 152px); --lm-ab-ease: cubic-bezier(.22, .75, .2, 1); } /* --------------------------------------------------------------------------- 2. SWELL標準コンテナの幅制限を解除する ID472の8章と同じ考え方。セクション背景をビューポート全幅で扱うために、 #content / #main_content / .l-mainContent__inner / .post_content にかかっている max-width と余白を、このページに限って外す。 PHPやカスタマイザーには手を触れていない。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page #content.l-content { max-width: none; padding-top: 0; padding-inline: 0; margin-bottom: 0; } .page-id-474.lm-about-page #main_content.l-mainContent, .page-id-474.lm-about-page .l-mainContent__inner { max-width: none; } .page-id-474.lm-about-page .post_content { max-width: none; padding-inline: 0; margin-top: 0; } /* 2-1. 固定ページ標準タイトルとパンくずを隠す。タイトルは本文01 INTROの h1 が担う（重複を避ける）。パンくずは #f7f7f7 の帯を持っており、全幅のページオープナーの上に別の面ができてしまうため外している。戻す場合はこの1宣言を消せばよい。 */ .page-id-474.lm-about-page .c-pageTitle, .page-id-474.lm-about-page #breadcrumb { display: none; } /* --------------------------------------------------------------------------- 3. セクションの共通フレーム 3カラムgridの中央トラックへ内容を流す。DOMを増やさずに「背景は全幅・内容は内側コンテナ幅」を実現するための骨格。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .post_content > .lm-about-sec { margin-block: 0; } .page-id-474.lm-about-page .lm-about-sec { position: relative; display: grid; grid-template-columns: 1fr var(--lm-ab-inner) 1fr; padding-block: var(--lm-ab-space); background-color: var(--lm-ab-bg); color: var(--lm-ab-body); overflow-x: clip; } /* ブロックエディタが差し込む入れ子コンテナを透過させ、実際の内容がgridの子になるようにする（構造に依存しない形にしておく）。 */ .page-id-474.lm-about-page .lm-about-sec > .wp-block-group__inner-container, .page-id-474.lm-about-page .lm-about-point > .wp-block-group__inner-container { display: contents; } .page-id-474.lm-about-page .lm-about-sec > *, .page-id-474.lm-about-page .lm-about-sec > .wp-block-group__inner-container > * { position: relative; z-index: 1; grid-column: 2; min-width: 0; } /* 3-1. 共通タイポグラフィ */ .page-id-474.lm-about-page .lm-about-sec p { margin: 0 0 1.5em; max-width: var(--lm-ab-read); font-size: clamp(15px, 1.05vw, 16.5px); line-height: 2.0; letter-spacing: .015em; } .page-id-474.lm-about-page .lm-about-sec p:last-child { margin-bottom: 0; } .page-id-474.lm-about-page .lm-about-sec h2, .page-id-474.lm-about-page .lm-about-sec h1 { color: var(--lm-ab-ink); font-weight: 720; letter-spacing: -.045em; line-height: 1.32; } /* SWELL標準の見出し装飾（h2の塗り背景・h3の下線）を打ち消す。 ID472の8-6と同じで、新しい装飾は足さず外すだけ。 */ .page-id-474.lm-about-page .post_content h1, .page-id-474.lm-about-page .post_content h2, .page-id-474.lm-about-page .post_content h3 { padding: 0; border: 0; background: none; } .page-id-474.lm-about-page .post_content h1::before, .page-id-474.lm-about-page .post_content h1::after, .page-id-474.lm-about-page .post_content h2::before, .page-id-474.lm-about-page .post_content h2::after, .page-id-474.lm-about-page .post_content h3::before, .page-id-474.lm-about-page .post_content h3::after { content: none; display: none; } /* 3-2. セクションラベル（ABOUT LM / 01 / OUR PHILOSOPHY …）トップの .lm-home-s345__kicker と同じ語法。細い罫を前置きする。 */ .page-id-474.lm-about-page .lm-about-label { display: flex; align-items: center; gap: 12px; margin: 0 0 30px; max-width: none; color: var(--lm-ab-muted); font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .18em; } .page-id-474.lm-about-page .lm-about-label::before { content: ""; flex: 0 0 auto; width: 34px; height: 1px; background: currentColor; opacity: .62; } /* --------------------------------------------------------------------------- 4. 01 INTRO — ページオープナートップのHEROは再現しない。巨大アニメーションも作らない。大きなh1と短い本文を、余白と非対称な配置だけで成立させる。背景の大文字「ABOUT」はDOMを増やさず ::before で描き、 content の代替テキスト空指定で支援技術には読ませない。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-intro { padding-block: clamp(104px, 13vw, 208px) clamp(96px, 11vw, 176px); background: linear-gradient(180deg, var(--lm-ab-bg) 0%, var(--lm-ab-bg) 74%, var(--lm-ab-soft) 100%); } .page-id-474.lm-about-page .lm-about-intro::before { content: "ABOUT"; content: "ABOUT" / ""; position: absolute; z-index: 0; left: -.045em; bottom: -.18em; white-space: nowrap; pointer-events: none; color: var(--lm-ab-ghost); font-family: Arial, Helvetica, sans-serif; font-size: clamp(140px, 21vw, 330px); font-weight: 900; line-height: .78; letter-spacing: -.075em; } .page-id-474.lm-about-page .lm-about-intro h1 { margin: 0 0 clamp(40px, 4.6vw, 72px); max-width: 15em; font-size: clamp(34px, 5.0vw, 78px); font-weight: 740; letter-spacing: -.055em; line-height: 1.18; /* 2026-08-25：ページ最重要見出しが「現場で動く仕｜組みに。」のように意味の途中で折り返していたため、日本語の語中改行を禁止する。読点・句点での改行は残るので、全幅でマーケティングを、現場で動く仕組みに。の2行に落ち着く（320〜1920pxで実測）。文字サイズは変えていない。 */ word-break: keep-all; } /* 本文は右へ寄せて非対称にする。h1の大きな塊と静かな本文の対比。 */ .page-id-474.lm-about-page .lm-about-intro p:not(.lm-about-label) { margin-left: auto; margin-right: 0; max-width: min(620px, 100%); width: min(620px, 100%); color: var(--lm-ab-body); } .page-id-474.lm-about-page .lm-about-intro p:not(.lm-about-label) + p { margin-top: 1.9em; } @media (max-width: 900px) { .page-id-474.lm-about-page .lm-about-intro p:not(.lm-about-label) { margin-left: 0; max-width: 100%; width: auto; } } /* --------------------------------------------------------------------------- 5. 02 OUR PHILOSOPHY — Visual Hero TOUCHPOINT / RELATIONSHIP / GROWTH を3枚のカードにしない。細い縦のレールを一本通し、3つの語を段差をつけて下へ流すことで「価値が届くまでをひとつの流れとして考える」構造そのものを見せる。装飾のための図形は使っていない（線は流れの実体）。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-philosophy { padding-block: clamp(104px, 11.5vw, 184px); background-color: var(--lm-ab-navy); color: var(--lm-ab-on-navy); } .page-id-474.lm-about-page .lm-about-philosophy::before { content: "PHILOSOPHY"; content: "PHILOSOPHY" / ""; position: absolute; z-index: 0; right: -.03em; top: .1em; white-space: nowrap; pointer-events: none; color: var(--lm-ab-on-navy-ghost); font-family: Arial, Helvetica, sans-serif; font-size: clamp(110px, 15vw, 250px); font-weight: 900; line-height: .78; letter-spacing: -.07em; } .page-id-474.lm-about-page .lm-about-philosophy .lm-about-label { color: var(--lm-ab-on-navy-muted); } .page-id-474.lm-about-page .lm-about-philosophy h2 { margin: 0 0 clamp(36px, 3.8vw, 60px); max-width: 17em; color: #fff; font-size: clamp(27px, 3.5vw, 54px); font-weight: 700; letter-spacing: -.05em; } .page-id-474.lm-about-page .lm-about-philosophy p { color: var(--lm-ab-on-navy); } /* 導入3段落のあとに、流れの起点となる余白を置く */ .page-id-474.lm-about-page .lm-about-philosophy > .wp-block-group__inner-container > p:last-of-type, .page-id-474.lm-about-page .lm-about-philosophy > p:last-of-type { margin-bottom: clamp(56px, 6vw, 96px); } /* 5-1. 3つの語＝流れの各段。カードにせず、レール＋段差で表現する。 */ .page-id-474.lm-about-page .lm-about-point { position: relative; display: grid; grid-template-columns: minmax(0, 24em) minmax(0, 1fr); gap: 8px clamp(28px, 4vw, 72px); align-items: start; padding: clamp(26px, 2.6vw, 40px) 0 clamp(26px, 2.6vw, 40px) clamp(26px, 3vw, 48px); border-top: 1px solid var(--lm-ab-on-navy-rule); max-width: none; } /* レール：3段を貫く1本の縦線 */ .page-id-474.lm-about-page .lm-about-point::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--lm-ab-on-navy-rule); } /* 段差。下へ行くほど内側へ入れて「進んでいる」ことを示す */ .page-id-474.lm-about-page .lm-about-point:nth-of-type(2) { margin-left: clamp(0px, 3.2vw, 52px); } .page-id-474.lm-about-page .lm-about-point:nth-of-type(3) { margin-left: clamp(0px, 6.4vw, 104px); } /* 最後の段の下端で線を閉じる */ .page-id-474.lm-about-page .lm-about-point:last-of-type { border-bottom: 1px solid var(--lm-ab-on-navy-rule); } .page-id-474.lm-about-page .lm-about-point h3 { grid-column: 1; grid-row: 1; margin: 0; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(19px, 2.1vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: .01em; } .page-id-474.lm-about-page .lm-about-point-lead { grid-column: 1; grid-row: 2; margin: 10px 0 0; max-width: none; color: var(--lm-ab-on-navy-muted); font-size: clamp(13px, .95vw, 15px); line-height: 1.7; letter-spacing: .04em; } .page-id-474.lm-about-page .lm-about-point p:not(.lm-about-point-lead) { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 34em; color: var(--lm-ab-on-navy); font-size: clamp(14px, .98vw, 15.5px); line-height: 1.95; } @media (max-width: 900px) { .page-id-474.lm-about-page .lm-about-point { grid-template-columns: 1fr; padding-left: 22px; } .page-id-474.lm-about-page .lm-about-point h3, .page-id-474.lm-about-page .lm-about-point-lead, .page-id-474.lm-about-page .lm-about-point p:not(.lm-about-point-lead) { grid-column: 1; grid-row: auto; } .page-id-474.lm-about-page .lm-about-point p:not(.lm-about-point-lead) { margin-top: 16px; max-width: 100%; } .page-id-474.lm-about-page .lm-about-point:nth-of-type(2) { margin-left: 16px; } .page-id-474.lm-about-page .lm-about-point:nth-of-type(3) { margin-left: 32px; } } /* --------------------------------------------------------------------------- 6. 03 WHAT WE DO — ポジショニング「LINEだけで終わらせない。」が主役。均等なサービスカード列は作らない。本文中の4つの問い（.lm-about-questions）を、本文とは別の階層として左罫つきのブロックで見せ、「LINEの前後にある工程」を読ませる。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-whatwedo { background-color: var(--lm-ab-bg); } .page-id-474.lm-about-page .lm-about-whatwedo h2 { margin: 0 0 clamp(34px, 3.6vw, 56px); max-width: 13em; font-size: clamp(30px, 4.2vw, 64px); font-weight: 730; letter-spacing: -.05em; line-height: 1.2; } .page-id-474.lm-about-page .lm-about-whatwedo p { max-width: min(740px, 100%); } /* 6-1. 4つの問い。本文から一段外へ出し、思考の途中であることを示す。 */ .page-id-474.lm-about-page .lm-about-questions { margin: clamp(34px, 3.6vw, 56px) 0 clamp(34px, 3.6vw, 56px) clamp(0px, 4vw, 64px); padding: 4px 0 4px clamp(20px, 2.2vw, 34px); max-width: min(660px, 100%); border-left: 1px solid var(--lm-ab-rule); color: var(--lm-ab-ink); font-size: clamp(15px, 1.15vw, 18px); font-weight: 560; line-height: 2.15; letter-spacing: .01em; } /* 最後の1段落＝提供範囲の説明。ここだけ静かに閉じる。 */ .page-id-474.lm-about-page .lm-about-whatwedo p:last-of-type { padding-top: clamp(22px, 2.2vw, 34px); border-top: 1px solid var(--lm-ab-rule-soft); color: var(--lm-ab-muted); font-size: clamp(13.5px, .95vw, 15px); line-height: 1.95; } @media (max-width: 720px) { .page-id-474.lm-about-page .lm-about-questions { margin-left: 0; } } /* --------------------------------------------------------------------------- 7. 04 OUR APPROACH — 姿勢 PHILOSOPHYとは別の構造にする。見出しを左に置いたままにし、本文を右の細い読み幅へ流す2カラムの編集レイアウト。工程名は本文に無いものを足さず、最後の一文だけを結語として強くする。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-approach { background-color: var(--lm-ab-soft); } .page-id-474.lm-about-page .lm-about-approach > *, .page-id-474.lm-about-page .lm-about-approach > .wp-block-group__inner-container > * { grid-column: 2; } @media (min-width: 981px) { /* 中央トラックをさらに2分割して、見出しと本文を左右に置く */ .page-id-474.lm-about-page .lm-about-approach { grid-template-columns: 1fr minmax(0, calc(var(--lm-ab-inner) * .38)) minmax(0, calc(var(--lm-ab-inner) * .62)) 1fr; column-gap: clamp(32px, 4vw, 88px); } /* 2026-08-25 構造修正以前は見出しがgridの2行目を1つだけ占めていたため、その行の高さが見出し（116px＋下余白）で決まり、同じ行にある右カラム1つ目の本文が引き伸ばされて、本文1→2の間に約120pxの空白が生まれていた。直したのは次の2点だけで、2カラム構成・sticky見出し・本文コピー・結語の強調はそのまま。 - ラベルを2列ぶんに広げ、1行目の右セルを埋める。こうしないと自動配置が本文2つ目を1行目へ入れてしまう。 - 見出しを複数行にまたがらせ、どの1行の高さも決めないようにする。結果、右カラムの各段落は自分の内容だけで高さが決まり、段落間は他セクションと同じ 22px に揃う。 */ .page-id-474.lm-about-page .lm-about-approach > .wp-block-group__inner-container > .lm-about-label, .page-id-474.lm-about-page .lm-about-approach > .lm-about-label { grid-column: 2 / span 2; grid-row: 1; } .page-id-474.lm-about-page .lm-about-approach > .wp-block-group__inner-container > h2, .page-id-474.lm-about-page .lm-about-approach > h2 { grid-column: 2; grid-row: 2 / span 20; position: sticky; top: clamp(96px, 12vh, 160px); align-self: start; } .page-id-474.lm-about-page .lm-about-approach > .wp-block-group__inner-container > p:not(.lm-about-label), .page-id-474.lm-about-page .lm-about-approach > p:not(.lm-about-label) { grid-column: 3; align-self: start; } } .page-id-474.lm-about-page .lm-about-approach h2 { margin: 0 0 clamp(30px, 3vw, 44px); max-width: 11em; font-size: clamp(27px, 3.2vw, 48px); font-weight: 720; letter-spacing: -.05em; line-height: 1.26; } .page-id-474.lm-about-page .lm-about-approach p:not(.lm-about-label) { max-width: min(660px, 100%); } /* 結語「それがLMの支援スタイルです。」 */ .page-id-474.lm-about-page .lm-about-approach p:last-of-type { margin-top: clamp(28px, 2.8vw, 44px); padding-top: clamp(24px, 2.4vw, 36px); border-top: 1px solid var(--lm-ab-rule); color: var(--lm-ab-ink); font-size: clamp(17px, 1.5vw, 24px); font-weight: 640; line-height: 1.75; letter-spacing: -.02em; } /* --------------------------------------------------------------------------- 8. 05 MESSAGE — 代表メッセージページ内でここだけ呼吸を変える。本文の読み幅を中央へ寄せ、文字を一段大きくし、上下の余白を広く取る。画像は使わず、本文と署名だけで成立させる。冒頭の一文は引きの強い大きさにする。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-message { padding-block: clamp(104px, 12vw, 192px); background-color: var(--lm-ab-bg); } .page-id-474.lm-about-page .lm-about-message::before { content: "MESSAGE"; content: "MESSAGE" / ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; color: rgba(12, 26, 56, .022); font-family: Arial, Helvetica, sans-serif; font-size: clamp(120px, 17vw, 280px); font-weight: 900; line-height: .8; letter-spacing: -.07em; } .page-id-474.lm-about-page .lm-about-message > *, .page-id-474.lm-about-page .lm-about-message > .wp-block-group__inner-container > * { width: min(760px, 100%); margin-inline: auto; } .page-id-474.lm-about-page .lm-about-message .lm-about-label { justify-content: flex-start; } .page-id-474.lm-about-page .lm-about-message h2 { margin: 0 0 clamp(40px, 4.4vw, 68px); font-size: clamp(25px, 2.9vw, 44px); font-weight: 700; letter-spacing: -.045em; line-height: 1.42; } .page-id-474.lm-about-page .lm-about-message p:not(.lm-about-label):not(.lm-about-signature) { max-width: 100%; font-size: clamp(15px, 1.12vw, 17.5px); line-height: 2.15; } /* 冒頭の一文だけ大きく置いて、語りの入口をつくる。直前の p:not(.lm-about-label):not(.lm-about-signature) が (0,5,1) のため、同じ :not() を重ねて (0,6,1) にしてから上書きしている。 */ .page-id-474.lm-about-page .lm-about-message p:not(.lm-about-label):not(.lm-about-signature):nth-of-type(2) { margin-bottom: 1.9em; color: var(--lm-ab-ink); font-size: clamp(16.5px, 1.35vw, 21px); font-weight: 580; line-height: 1.95; letter-spacing: -.005em; } /* 8-1. 署名 */ .page-id-474.lm-about-page .lm-about-signature { margin-top: clamp(44px, 4.6vw, 72px); padding-top: clamp(24px, 2.4vw, 34px); max-width: 100%; border-top: 1px solid var(--lm-ab-rule); color: var(--lm-ab-ink); font-size: 14px; font-weight: 640; line-height: 1.9; letter-spacing: .02em; text-align: right; } /* --------------------------------------------------------------------------- 9. 06 COMPANY — 会社概要ここは演出を抑える。カード化せず、罫線だけの定義表として端正に見せる。 SWELL標準の表（枠線・ストライプ）に見えないよう、外枠と塗りを外し、行間の細い罫だけを残している。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-company { background-color: var(--lm-ab-soft); } .page-id-474.lm-about-page .lm-about-company h2 { margin: 0 0 clamp(30px, 3vw, 44px); font-size: clamp(23px, 2.2vw, 34px); font-weight: 700; letter-spacing: -.035em; } .page-id-474.lm-about-page .lm-about-company-table { margin: 0; max-width: min(880px, 100%); } .page-id-474.lm-about-page .lm-about-company-table table { width: 100%; border: 0; border-collapse: collapse; background: none; font-size: 15px; } .page-id-474.lm-about-page .lm-about-company-table tr { background: none; } .page-id-474.lm-about-page .lm-about-company-table th, .page-id-474.lm-about-page .lm-about-company-table td { padding: 20px 0; border: 0; border-top: 1px solid var(--lm-ab-rule); background: none; vertical-align: top; text-align: left; } .page-id-474.lm-about-page .lm-about-company-table tr:last-child th, .page-id-474.lm-about-page .lm-about-company-table tr:last-child td { border-bottom: 1px solid var(--lm-ab-rule); } .page-id-474.lm-about-page .lm-about-company-table th { width: 11em; padding-right: 24px; color: var(--lm-ab-muted); font-size: 12.5px; font-weight: 700; line-height: 2.0; letter-spacing: .07em; white-space: nowrap; } .page-id-474.lm-about-page .lm-about-company-table td { color: var(--lm-ab-body); line-height: 2.0; letter-spacing: .01em; } @media (max-width: 720px) { .page-id-474.lm-about-page .lm-about-company-table table, .page-id-474.lm-about-page .lm-about-company-table tbody, .page-id-474.lm-about-page .lm-about-company-table tr, .page-id-474.lm-about-page .lm-about-company-table th, .page-id-474.lm-about-page .lm-about-company-table td { display: block; width: auto; } .page-id-474.lm-about-page .lm-about-company-table th { padding: 18px 0 0; white-space: normal; } .page-id-474.lm-about-page .lm-about-company-table td { padding: 4px 0 18px; border-top: 0; } .page-id-474.lm-about-page .lm-about-company-table tr:last-child td { padding-bottom: 0; border-bottom: 0; } } /* --------------------------------------------------------------------------- 10. 07 CONTACT — 終わり方トップの最終CTAとブランドとしてはつながるが、同じデザインの複製にしない。見出しを主役に置き、本文とCTAは静かに添える。「整理してから問い合わせなければならない」と思わせないよう、囲みボタンではなく、下線と矢印だけのテキストリンクにしている。 --------------------------------------------------------------------------- */ .page-id-474.lm-about-page .lm-about-contact { padding-block: clamp(96px, 10.5vw, 168px); background-color: var(--lm-ab-bg); } .page-id-474.lm-about-page .lm-about-contact::before { content: "CONTACT"; content: "CONTACT" / ""; position: absolute; z-index: 0; right: -.03em; bottom: -.1em; white-space: nowrap; pointer-events: none; color: rgba(12, 26, 56, .024); font-family: Arial, Helvetica, sans-serif; font-size: clamp(110px, 16vw, 260px); font-weight: 900; line-height: .8; letter-spacing: -.07em; } .page-id-474.lm-about-page .lm-about-contact h2 { margin: 0 0 clamp(30px, 3.2vw, 48px); max-width: 15em; font-size: clamp(26px, 3.3vw, 50px); font-weight: 720; letter-spacing: -.05em; line-height: 1.34; } .page-id-474.lm-about-page .lm-about-contact p { max-width: min(620px, 100%); color: var(--lm-ab-body); } /* 10-1. CTA。SWELL標準ボタンの塗り・角丸・影を外し、トップのCTAと同じ「下線＋矢印」の語法へ寄せる。 */ .page-id-474.lm-about-page .lm-about-contact .wp-block-buttons { margin-top: clamp(38px, 4vw, 60px); max-width: none; } /* .wp-block-buttons は flex のため、子の .wp-block-button は内容幅まで縮む。リンク側に width:100% を書いても縮んだ親を基準にしてしまうので、幅は flex アイテムである .wp-block-button 側で決める。 */ .page-id-474.lm-about-page .lm-about-contact .wp-block-button { width: min(320px, 100%); } .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link, .page-id-474.lm-about-page .lm-about-contact .wp-element-button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; padding: 0 4px 18px 0; border: 0; border-bottom: 1px solid var(--lm-ab-ink); border-radius: 0; background: none; box-shadow: none; color: var(--lm-ab-ink); font-size: clamp(15px, 1.1vw, 17px); font-weight: 680; line-height: 1.4; letter-spacing: .02em; text-decoration: none; transition: color .22s var(--lm-ab-ease), border-color .22s var(--lm-ab-ease); } /* 矢印。画像を使わず、細い線2本で描く。 */ .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link::after { content: ""; flex: 0 0 auto; width: 26px; height: 8px; background: linear-gradient(currentColor, currentColor) left 50% / 26px 1px no-repeat, linear-gradient(currentColor, currentColor) right 50% / 9px 1px no-repeat; transform: none; transition: transform .26s var(--lm-ab-ease); } .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link::after { -webkit-mask: none; } @media (hover: hover) { .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link:hover { color: var(--lm-ab-navy); border-bottom-color: var(--lm-ab-navy); } .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link:hover::after { transform: translateX(7px); } } /* --------------------------------------------------------------------------- 11. レスポンシブ（切り替え位置はトップと同じ 980 / 900 / 720） --------------------------------------------------------------------------- */ @media (max-width: 980px) { .page-id-474.lm-about-page { --lm-ab-space: clamp(76px, 9vw, 112px); } } @media (max-width: 720px) { .page-id-474.lm-about-page { --lm-ab-inner: calc(100vw - 44px); --lm-ab-space: 76px; } .page-id-474.lm-about-page .lm-about-intro { padding-block: 96px 84px; } .page-id-474.lm-about-page .lm-about-intro h1 { max-width: 100%; font-size: clamp(28px, 8.6vw, 40px); letter-spacing: -.045em; line-height: 1.28; } .page-id-474.lm-about-page .lm-about-intro::before { font-size: 40vw; bottom: -.14em; } .page-id-474.lm-about-page .lm-about-philosophy, .page-id-474.lm-about-page .lm-about-message { padding-block: 88px; } /* 2026-08-25：SPではPC用の clamp 下限（110px）が効いて語幅がビューポートの約1.9倍になり、右寄せのため左側が切れて「SOPHY」という意味のない断片に見えていた。画面幅に追従する値へ変えて、語全体が収まるようにする。 PC（721px以上）の指定は変更していない。 */ .page-id-474.lm-about-page .lm-about-philosophy::before { font-size: 14vw; } .page-id-474.lm-about-page .lm-about-label { margin-bottom: 24px; gap: 10px; font-size: 10px; letter-spacing: .16em; } .page-id-474.lm-about-page .lm-about-label::before { width: 24px; } .page-id-474.lm-about-page .lm-about-signature { text-align: left; } .page-id-474.lm-about-page .lm-about-contact .wp-block-button { width: 100%; } } /* --------------------------------------------------------------------------- 12. reduced motion --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link, .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link::after { transition: none; } .page-id-474.lm-about-page .lm-about-contact .wp-block-button__link:hover::after { transform: none; } .page-id-474.lm-about-page .lm-about-approach > .wp-block-group__inner-container > h2, .page-id-474.lm-about-page .lm-about-approach > h2 { position: static; } }