@charset "UTF-8"; /* =========================================================================== 株式会社LM「お問い合わせ」（固定ページID 476）専用CSS 2026-08-25 --------------------------------------------------------------------------- 正本デザインの正本は実装済みのトップページ（ID472）と「LMについて」（ID474）。 branch feature/swell-renewal-foundation-v1 / HEAD aa64f64 時点の lm-home-renewal.css・lm-about.css で確立したVisual DNAを引き継ぐ。 - 静かで知的な Modern Corporate - 広い余白とタイポグラフィ主体 - 白／薄いブルーグレーを土台に、Deep Navy と LM Blue は要所だけ - 大きな見出しと静かな本文の対比 - 均一なカード列を作らない／すべてを枠で囲わない - 意味のない装飾図形・流線・発光・グラデーション装飾を足さないただしTOP・ABOUTの複製にはしない。この2ページは「読ませる」ページで、非対称・左寄せの編集的レイアウトを取っている。CONTACTは「書かせる」ページなので、構造をひとつ変えている。ページ全体を min(860px, 86vw) の中央1カラムに置く。入力中に視線が左右へ大きく動かないこと、PCで右側に意味のない空白が残らないことを同時に満たすための判断で、TOP/ABOUTの「広い面の中で内容を左に寄せる」構造とは意図的に変えている。ラベルの語法・字送り・罫の細さ・色・余白のリズムは共通なので、続けて見たとき同じブランドに見える。 --------------------------------------------------------------------------- このファイルの独立性 lm-home-renewal.css・lm-about.css には一切追記していない。CONTACTのCSSはこの1ファイルに閉じており、読み込みは inc/lm-contact.php が is_page(476) のときだけ行う。ID472・ID474・ID156の表示は変更していない。スコープは `.page-id-476.lm-contact-page` の複合セレクタで統一する。 SWELLは body_class() をではなく div#body_wrap へ出力するため、 body要素セレクタでは一致しない（ID472実装時に実DOMで確認済み）。 `lm-contact-page` は inc/lm-contact.php の body_class フィルタで付与している。 --------------------------------------------------------------------------- Contact Form 7 に対する姿勢フォームの機能設定（フィールド名・必須設定・メール・自動返信・Reply-To・選択肢・placeholder・submit文言・Turnstile）は完成済みで、**一切変更していない**。このファイルが触るのは見た目だけ。フォームテンプレートへの変更は1点だけある。各入力欄へ `id:` を付け、対応するに `for` を書いた（2026-08-25）。ラベルをタップしても入力欄にフォーカスが移らず、支援技術でも対応づけが弱かったため。アクセシビリティの修正で、送信の挙動には影響しない。実DOM（2026-08-25 実機確認） form.wpcf7-form fieldset.hidden-fields-container … CF7の隠しフィールド div.wpcf7-turnstile.cf-turnstile … Turnstile div.lm-contact-form div.lm-form-row × 6 … 各行は p > label[for] + br + span.wpcf7-form-control-wrap div.lm-form-privacy … label > input[type=checkbox] + span div.lm-form-submit … p > input[type=submit] + span.wpcf7-spinner div.wpcf7-response-output 1 会社名・屋号 company-name text 必須 id lm-company-name 2 お名前 your-name text 必須 id lm-your-name 3 メールアドレス your-email email 必須 id lm-your-email 4 電話番号 your-tel tel 任意 id lm-your-tel 5 ご相談内容の種類 inquiry-type select 必須 id lm-inquiry-type 6 ご相談内容 your-message textarea 必須 id lm-your-message 7 プライバシー同意 privacy-consent checkbox（labelに内包・変更なし） 8 送信入力内容を送信する（文言は現行のまま） 2列化は `.lm-contact-form` を display:contents にして form 自体をgridにすることで実現している。**レイアウトのためのテンプレート変更はしていない。** Turnstileがフォーム冒頭に出てしまう問題も、DOMを動かさず order だけで「同意 → Turnstile → 送信」の順に見せている。 JavaScriptは追加していない。Canvas・IntersectionObserverも使っていない。画像・アイコンフォント・url() は使っていない（矢印と▼はCSSで描いている）。 =========================================================================== */ /* --------------------------------------------------------------------------- 1. 変数 TOPの --lm-color-* / ABOUTの --lm-ab-* と同じ色域から、CONTACTで使う分だけ。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page { --lm-ct-bg: #FFFFFF; --lm-ct-soft: #F2F6F9; --lm-ct-navy: #0C1A38; --lm-ct-ink: #0C1A38; /* 見出し・入力値 */ --lm-ct-body: #23304A; /* 本文 */ --lm-ct-muted: #646F82; /* ラベル・補助。#F2F6F9 上で AA 4.67 */ --lm-ct-muted-2: #5A6475; /* 10px級のバッジ文字。#F2F6F9 上で AA 4.94 */ --lm-ct-rule: rgba(12, 26, 56, .16); --lm-ct-rule-soft: rgba(12, 26, 56, .08); /* LM Blue。使うのはフォーカスリングと送信ボタンのhoverだけに限定する */ --lm-ct-blue: #0B528D; --lm-ct-blue-tint: rgba(11, 82, 141, .14); /* エラー。赤一色で攻撃的に見せないため、彩度を落とした深い赤にしている */ --lm-ct-error: #A3271F; --lm-ct-error-ink: #8E2018; --lm-ct-error-bg: #FFF7F6; --lm-ct-field-bg: #FFFFFF; /* ページ全体の内容幅。フォーム本体の可読幅もこの値になる */ --lm-ct-inner: min(860px, 86vw); --lm-ct-space: clamp(72px, 8vw, 128px); --lm-ct-gap: clamp(20px, 2.4vw, 34px); /* 2列時の列間 */ --lm-ct-rowgap: clamp(22px, 2.2vw, 30px); /* 行間 */ --lm-ct-ease: cubic-bezier(.22, .75, .2, 1); } /* --------------------------------------------------------------------------- 2. SWELL標準コンテナの幅制限を解除する ID472の8章・ID474の2章と同じ考え方。セクション背景をビューポート全幅で扱うために、#content / #main_content / .l-mainContent__inner / .post_content の max-width と余白を、このページに限って外す。 PHPやカスタマイザーには手を触れていない。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page #content.l-content { max-width: none; padding-top: 0; padding-inline: 0; margin-bottom: 0; } .page-id-476.lm-contact-page #main_content.l-mainContent, .page-id-476.lm-contact-page .l-mainContent__inner { max-width: none; } .page-id-476.lm-contact-page .post_content { max-width: none; padding-inline: 0; margin-top: 0; } /* 2-1. 固定ページ標準タイトルとパンくずを隠す。タイトルは本文01 PAGE OPENERの h1 が担う（重複を避ける）。パンくずは #f7f7f7 の帯を持っており、全幅のページオープナーの上に別の面ができてしまうため外している。戻す場合はこの1宣言を消せばよい。 */ .page-id-476.lm-contact-page .c-pageTitle, .page-id-476.lm-contact-page #breadcrumb { display: none; } /* --------------------------------------------------------------------------- 3. セクションの共通フレーム 3カラムgridの中央トラックへ内容を流す。DOMを増やさずに「背景は全幅・内容は中央 min(860px, 86vw)」を実現するための骨格。面のリズムは白（01 OPENER）→ 薄いブルーグレー（02 FORM）→ グローバルFooter。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page .post_content > .lm-contact-sec { margin-block: 0; } .page-id-476.lm-contact-page .lm-contact-sec { position: relative; display: grid; grid-template-columns: 1fr var(--lm-ct-inner) 1fr; padding-block: var(--lm-ct-space); background-color: var(--lm-ct-bg); color: var(--lm-ct-body); overflow-x: clip; } /* ブロックエディタが差し込む入れ子コンテナを透過させ、実際の内容がgridの子になるようにする（構造に依存しない形にしておく）。 */ .page-id-476.lm-contact-page .lm-contact-sec > .wp-block-group__inner-container { display: contents; } .page-id-476.lm-contact-page .lm-contact-sec > *, .page-id-476.lm-contact-page .lm-contact-sec > .wp-block-group__inner-container > * { position: relative; z-index: 1; grid-column: 2; min-width: 0; } /* 3-1. 共通タイポグラフィ */ .page-id-476.lm-contact-page .lm-contact-sec p { margin: 0 0 1.5em; font-size: clamp(15px, 1.05vw, 16.5px); line-height: 2.0; letter-spacing: .015em; } .page-id-476.lm-contact-page .lm-contact-sec p:last-child { margin-bottom: 0; } .page-id-476.lm-contact-page .lm-contact-sec h1 { color: var(--lm-ct-ink); font-weight: 740; letter-spacing: -.05em; line-height: 1.25; } /* SWELL標準の見出し装飾（塗り背景・下線）を打ち消す。 ID472の8-6・ID474の3章と同じで、新しい装飾は足さず外すだけ。 */ .page-id-476.lm-contact-page .post_content h1 { padding: 0; border: 0; background: none; } .page-id-476.lm-contact-page .post_content h1::before, .page-id-476.lm-contact-page .post_content h1::after { content: none; display: none; } /* 3-2. セクションラベル（CONTACT） TOPの .lm-home-s345__kicker、ABOUTの .lm-about-label と同じ語法。細い罫を前置きする。 */ .page-id-476.lm-contact-page .lm-contact-label { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--lm-ct-muted); font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .18em; } .page-id-476.lm-contact-page .lm-contact-label::before { content: ""; flex: 0 0 auto; width: 34px; height: 1px; background: currentColor; opacity: .62; } /* --------------------------------------------------------------------------- 4. 01 PAGE OPENER 巨大なHEROは作らない。ABOUTのINTRO（背景の大文字・非対称な本文配置）も再現しない。小さなラベル・明確なh1・静かな本文だけで成立させる。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page .lm-contact-opener { padding-block: clamp(88px, 10vw, 152px) clamp(56px, 6vw, 88px); background-color: var(--lm-ct-bg); } .page-id-476.lm-contact-page .lm-contact-opener h1 { margin: 0 0 clamp(28px, 3vw, 44px); font-size: clamp(30px, 3.6vw, 56px); /* 日本語の語中改行を禁止する。ABOUTのh1と同じ扱い。 */ word-break: keep-all; } .page-id-476.lm-contact-page .lm-contact-opener p:not(.lm-contact-label) { max-width: min(680px, 100%); color: var(--lm-ct-body); } .page-id-476.lm-contact-page .lm-contact-opener p:not(.lm-contact-label) + p { margin-top: 1.6em; } /* --------------------------------------------------------------------------- 5. 02 CONTACT FORM — 面薄いブルーグレーの帯を全幅で敷き、その上に白い入力欄を置く。フォーム全体を1枚の大きなカードで囲まない（TOP/ABOUTの「すべてを枠で囲わない」方針を引き継ぐ）。囲まなくても、面が変わることで「ここが入力エリア」だと分かる。 --------------------------------------------------------------------------- */ /* 下側の余白は上側より厚くしている。このセクションの直後がグローバルフッターなので、送信ボタンとフッターが近づきすぎないようにするため。 */ .page-id-476.lm-contact-page .lm-contact-formsec { padding-block: clamp(56px, 6.4vw, 96px) clamp(96px, 10vw, 152px); background-color: var(--lm-ct-soft); } /* CF7が挿入するラッパー。余計な余白を持たせない。 */ .page-id-476.lm-contact-page .lm-contact-formsec .wpcf7 { margin: 0; } .page-id-476.lm-contact-page .lm-contact-formsec .screen-reader-response { /* CF7が支援技術向けに出す領域。視覚的には隠すが、読み上げは殺さない。 */ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 6. 02 CONTACT FORM — 骨格（2列化とTurnstileの位置） `.lm-contact-form` を display:contents にして、form 自体をgridにする。こうすると .lm-form-row / .lm-form-privacy / .lm-form-submit と .wpcf7-turnstile が同じgridの子になり、CF7テンプレートを書き換えずに - PCで相性のよい2項目を横並びにする - 「同意 → Turnstile → 送信」の順で見せるの両方ができる。display:contents を当てているのは role を持たない素の div なので、支援技術上の意味は変わらない（ABOUTと同じ手法）。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page form.wpcf7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lm-ct-gap); row-gap: var(--lm-ct-rowgap); align-items: start; } .page-id-476.lm-contact-page .lm-contact-form { display: contents; } /* CF7の隠しフィールド。gridのセルを1つ消費してしまわないよう畳む。 display:none でも input の値は送信される。 */ .page-id-476.lm-contact-page form.wpcf7-form > .hidden-fields-container { display: none; } /* 6-1. 横並びの組み合わせ 1 会社名・屋号｜ 2 お名前 3 メール｜ 4 電話番号 5 ご相談内容の種類（全幅） 6 ご相談内容（全幅） 1〜4は自動配置に任せる。5・6だけ全幅にすればよい。 nth-child は現行テンプレートの並び、:has() は中身で見ている。どちらか一方でも同じ結果になるよう二重に書いてある。 */ .page-id-476.lm-contact-page .lm-form-row:nth-child(5), .page-id-476.lm-contact-page .lm-form-row:nth-child(6), .page-id-476.lm-contact-page .lm-form-row:has(select), .page-id-476.lm-contact-page .lm-form-row:has(textarea), .page-id-476.lm-contact-page .lm-form-privacy, .page-id-476.lm-contact-page .lm-form-submit, .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-turnstile, .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; } /* 6-2. 並び順。DOMは動かさず order だけで「… 同意 → Turnstile → 送信 → 応答メッセージ」にする。指定していない要素は order:0 のままなので本来の順に並ぶ。 */ .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-turnstile { order: 1; } .page-id-476.lm-contact-page .lm-form-submit { order: 2; } .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-response-output { order: 3; } /* --------------------------------------------------------------------------- 7. 02 CONTACT FORM — ラベルと入力欄 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page .lm-form-row > p, .page-id-476.lm-contact-page .lm-form-privacy > p, .page-id-476.lm-contact-page .lm-form-submit > p { margin: 0; font-size: inherit; line-height: inherit; } /* CF7テンプレートがラベルと入力欄の間に置いている
。余白はCSSで作るので、改行そのものは畳む。 */ .page-id-476.lm-contact-page .lm-form-row br { display: none; } .page-id-476.lm-contact-page .lm-form-row label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--lm-ct-ink); font-size: 13.5px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; } /* 必須・任意。小さく端正に。色だけでなく文字で意味が読めるので、色覚特性による差は生じない。 */ .page-id-476.lm-contact-page .lm-form-row span.required, .page-id-476.lm-contact-page .lm-form-row span.optional { flex: 0 0 auto; padding: 5px 8px; border-radius: 2px; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .08em; } .page-id-476.lm-contact-page .lm-form-row span.required { color: var(--lm-ct-error-ink); background-color: rgba(163, 39, 31, .09); } .page-id-476.lm-contact-page .lm-form-row span.optional { color: var(--lm-ct-muted-2); background-color: rgba(12, 26, 56, .055); } .page-id-476.lm-contact-page .lm-form-row .wpcf7-form-control-wrap { display: block; } /* 7-1. input / select / textarea を1つの形にそろえる。 borderは細く、角はほぼ立てる（サイト全体の直線的な幾何に合わせる）。文字サイズは16px。iOSでフォーカス時に画面が拡大しないための下限でもある。 */ /* 対象は「文字を入力する欄」だけ。送信ボタンとチェックボックスは含めない。 :is() でまとめているのは、hover と focus を同じ形で書いて詳細度をそろえるため。個別に input:focus と書くと属性セレクタを持つこの規則に負けてしまい、フォーカス時に枠線色が変わらなくなる。 */ .page-id-476.lm-contact-page .lm-contact-form :is( input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) { width: 100%; max-width: 100%; padding: 15px 16px; border: 1px solid var(--lm-ct-rule); border-radius: 2px; background-color: var(--lm-ct-field-bg); background-image: none; box-shadow: none; color: var(--lm-ct-ink); font-family: inherit; font-size: 16px; line-height: 1.6; letter-spacing: .01em; transition: border-color .2s var(--lm-ct-ease), box-shadow .2s var(--lm-ct-ease); } .page-id-476.lm-contact-page .lm-contact-form textarea { min-height: clamp(190px, 21vw, 260px); line-height: 1.9; resize: vertical; } .page-id-476.lm-contact-page .lm-contact-form ::placeholder { color: var(--lm-ct-muted); opacity: 1; /* Firefoxの既定の薄まりを打ち消す */ } /* 7-2. hover / focus フォーカスはLM Blueで明確に。border色の変化だけに頼らず outline も出す（Windowsのハイコントラストモードでも消えないようにするため）。 */ @media (hover: hover) { .page-id-476.lm-contact-page .lm-contact-form :is( input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):hover { border-color: rgba(12, 26, 56, .30); } } /* :focus と :focus-visible の両方に当てている。テキスト入力欄はクリックで入っても :focus-visible になるが、ブラウザによって差があるため両方書いて、どちらでも同じ見え方になるようにしている。 */ .page-id-476.lm-contact-page .lm-contact-form :is( input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):focus, .page-id-476.lm-contact-page .lm-contact-form :is( input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):focus-visible { outline: 2px solid var(--lm-ct-blue); outline-offset: 2px; border-color: var(--lm-ct-blue); box-shadow: 0 0 0 3px var(--lm-ct-blue-tint); } /* 7-3. select ネイティブの▼を消して自前の細い山形に差し替える。画像は使わない。 :has() が使えない環境では appearance を触らず、ネイティブの▼を残す。 */ @supports selector(:has(*)) { .page-id-476.lm-contact-page .lm-form-row .wpcf7-form-control-wrap:has(select) { position: relative; } .page-id-476.lm-contact-page .lm-form-row .wpcf7-form-control-wrap:has(select)::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--lm-ct-muted); border-bottom: 1.5px solid var(--lm-ct-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .page-id-476.lm-contact-page .lm-contact-form select { -webkit-appearance: none; appearance: none; padding-right: 44px; } } /* selectだけは全幅にすると間延びするので、左カラムと同じ幅で止める。「余った空白」ではなく「グリッドに揃っている」形にするための指定。 */ .page-id-476.lm-contact-page .lm-form-row:has(select) .wpcf7-form-control-wrap { max-width: calc(50% - (var(--lm-ct-gap) / 2)); } /* --------------------------------------------------------------------------- 8. 02 CONTACT FORM — プライバシー同意本文と地続きに見えないよう、上に細い罫を置いて区切る。囲みは作らない。チェックボックスは押しやすい大きさにする。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page .lm-form-privacy { margin-top: clamp(10px, 1.4vw, 20px); padding-top: clamp(24px, 2.6vw, 34px); border-top: 1px solid var(--lm-ct-rule-soft); } .page-id-476.lm-contact-page .lm-form-privacy .wpcf7-list-item { margin: 0; } .page-id-476.lm-contact-page .lm-form-privacy label { display: flex; align-items: flex-start; gap: 12px; /* ラベル全体がクリック領域になる。1行のときでも縦42pxを確保して、指でも押しやすい大きさにしておく。 */ padding: 8px 0; cursor: pointer; color: var(--lm-ct-body); font-size: 14px; line-height: 1.85; letter-spacing: .015em; } /* チェックボックスはブラウザ標準の描画のままにして、大きさと色だけ整える。 appearance:none で自作すると、OSのハイコントラスト設定や支援技術での見え方を自前で担保しないといけなくなるため。（border / background は標準描画のチェックボックスには効かないので書かない） */ .page-id-476.lm-contact-page .lm-form-privacy input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--lm-ct-blue); cursor: pointer; } .page-id-476.lm-contact-page .lm-form-privacy input[type="checkbox"]:focus-visible { outline: 2px solid var(--lm-ct-blue); outline-offset: 3px; } .page-id-476.lm-contact-page .lm-form-privacy .wpcf7-list-item-label { flex: 1 1 auto; } .page-id-476.lm-contact-page .lm-form-privacy a { color: var(--lm-ct-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } @media (hover: hover) { .page-id-476.lm-contact-page .lm-form-privacy a:hover { color: var(--lm-ct-navy); } } /* --------------------------------------------------------------------------- 9. 02 CONTACT FORM — Turnstile DOM上はフォームの先頭にあるが、order で「同意」と「送信」の間へ置いている。幅は300px前後の固定なので、狭い画面でも溢れない。周囲の余白だけ整える。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-turnstile { margin: clamp(6px, 0.8vw, 12px) 0 0; max-width: 100%; } .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-turnstile iframe { max-width: 100%; } /* --------------------------------------------------------------------------- 10. 02 CONTACT FORM — 送信ボタン広告LPのような巨大CTAにはしない。幅は本文の一部として収まる大きさに留め、 TOP/ABOUTのCTAと同じ「細い線2本の矢印」を引き継ぐ。面はDeep Navy、hoverでLM Blueへ。文言はCF7側の現行値をそのまま使う。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page .lm-form-submit { margin-top: clamp(8px, 1vw, 16px); } .page-id-476.lm-contact-page .lm-form-submit > p { display: flex; align-items: center; gap: 16px; } .page-id-476.lm-contact-page .lm-contact-form input[type="submit"] { position: relative; width: min(340px, 100%); min-height: 62px; padding: 0 26px; border: 1px solid var(--lm-ct-navy); border-radius: 2px; background-color: var(--lm-ct-navy); background-image: none; box-shadow: none; color: #FFFFFF; font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-align: left; cursor: pointer; transition: background-color .22s var(--lm-ct-ease), border-color .22s var(--lm-ct-ease); } /* 右端の細い罫。input要素には ::after を作れないため背景で描いている（画像は使わない）。セクションラベルの前に置いている 34px の罫と同じ語法で、ボタンの中でも同じ線が出てくる形にしている。 */ .page-id-476.lm-contact-page .lm-contact-form input[type="submit"] { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: right 26px center; background-size: 26px 1px; } @media (hover: hover) { .page-id-476.lm-contact-page .lm-contact-form input[type="submit"]:hover { background-color: var(--lm-ct-blue); border-color: var(--lm-ct-blue); } } .page-id-476.lm-contact-page .lm-contact-form input[type="submit"]:focus-visible { outline: 2px solid var(--lm-ct-blue); outline-offset: 3px; } /* Turnstileの判定が終わるまで、CF7は送信ボタンを disabled にする。透明度を落とすと白文字のコントラストが落ちてしまうので、面の色を彩度の低いスレートへ差し替えて「まだ押せない」ことを示す。この色でも白文字は AA 7.5:1 を確保している。 */ .page-id-476.lm-contact-page .lm-contact-form input[type="submit"]:disabled { border-color: #4A5568; background-color: #4A5568; cursor: default; } .page-id-476.lm-contact-page .wpcf7-spinner { margin: 0; } /* --------------------------------------------------------------------------- 11. 02 CONTACT FORM — 検証・送信結果の表示文言はCF7が出すものをそのまま使い、見せ方だけ整える。エラーは赤一色で塗らず、細い罫と淡い面で示す。 --------------------------------------------------------------------------- */ .page-id-476.lm-contact-page .wpcf7-not-valid-tip { display: block; margin-top: 8px; color: var(--lm-ct-error); font-size: 12.5px; font-weight: 500; line-height: 1.7; letter-spacing: .01em; } .page-id-476.lm-contact-page .lm-contact-form input.wpcf7-not-valid, .page-id-476.lm-contact-page .lm-contact-form select.wpcf7-not-valid, .page-id-476.lm-contact-page .lm-contact-form textarea.wpcf7-not-valid { border-color: rgba(163, 39, 31, .55); background-color: var(--lm-ct-error-bg); } .page-id-476.lm-contact-page form.wpcf7-form > .wpcf7-response-output { margin: clamp(18px, 2vw, 28px) 0 0; padding: 16px 18px; border: 1px solid var(--lm-ct-rule); border-radius: 2px; background-color: var(--lm-ct-field-bg); color: var(--lm-ct-body); font-size: 14px; line-height: 1.85; letter-spacing: .01em; } .page-id-476.lm-contact-page form.wpcf7-form.invalid > .wpcf7-response-output, .page-id-476.lm-contact-page form.wpcf7-form.unaccepted > .wpcf7-response-output, .page-id-476.lm-contact-page form.wpcf7-form.payment-required > .wpcf7-response-output, .page-id-476.lm-contact-page form.wpcf7-form.spam > .wpcf7-response-output, .page-id-476.lm-contact-page form.wpcf7-form.failed > .wpcf7-response-output, .page-id-476.lm-contact-page form.wpcf7-form.aborted > .wpcf7-response-output { border-color: rgba(163, 39, 31, .38); background-color: var(--lm-ct-error-bg); color: var(--lm-ct-error); } .page-id-476.lm-contact-page form.wpcf7-form.sent > .wpcf7-response-output { border-color: rgba(11, 82, 141, .32); background-color: #F1F6FB; color: #0A4A80; } /* --------------------------------------------------------------------------- 12. ページの終わり方独自の終了セクションは置かない。最終確定済みの新S14 Footerに、すでに社名・所在地を含む会社情報がある。グローバルFooterをS14へ切り替えたとき、CONTACTだけ「会社情報 → 同じ会社情報を含むFooter」と重複してしまうため、このページは 01 OPENER → 02 FORM → グローバルFooter で終える。代わりに、フォーム面の下側に十分な余白を取って（11章の padding-block の下側の値）、静かにフッターへ渡す。ここに置く指定は無い。 --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 13. レスポンシブ（切り替え位置はTOP／ABOUTと同じ 980 / 900 / 720） --------------------------------------------------------------------------- */ @media (max-width: 980px) { .page-id-476.lm-contact-page { --lm-ct-inner: min(860px, 88vw); } } @media (max-width: 720px) { .page-id-476.lm-contact-page { /* 左右の余白を22pxで固定する。vw基準にすると320pxで15pxまで痩せてしまい、入力欄が画面の縁に近づきすぎるため。 */ --lm-ct-inner: calc(100% - 44px); --lm-ct-space: clamp(56px, 12vw, 84px); --lm-ct-rowgap: 20px; } /* SPは必ず1列 */ .page-id-476.lm-contact-page form.wpcf7-form { grid-template-columns: minmax(0, 1fr); } /* 1列になったらselectも全幅で構わない */ .page-id-476.lm-contact-page .lm-form-row:has(select) .wpcf7-form-control-wrap { max-width: 100%; } .page-id-476.lm-contact-page .lm-contact-opener { padding-block: clamp(64px, 16vw, 96px) clamp(40px, 9vw, 56px); } .page-id-476.lm-contact-page .lm-contact-label { margin-bottom: 22px; font-size: 10px; letter-spacing: .16em; } .page-id-476.lm-contact-page .lm-contact-label::before { width: 24px; } /* SPではCF7の rows="10" のままだと336pxになり、送信ボタンまでが遠くなる。高さだけ抑える（rows属性・テンプレートは変更していない）。 */ .page-id-476.lm-contact-page .lm-contact-form textarea { height: 240px; min-height: 0; } /* 送信ボタンは画面幅いっぱいまで許すが、高さは変えない */ .page-id-476.lm-contact-page .lm-contact-form input[type="submit"] { width: 100%; } .page-id-476.lm-contact-page .lm-form-submit > p { flex-wrap: wrap; gap: 12px; } } /* 320px級。文字を詰めるのではなく、余白と行間だけを詰める。 */ @media (max-width: 360px) { .page-id-476.lm-contact-page .lm-form-row label { gap: 8px; font-size: 13px; } .page-id-476.lm-contact-page .lm-contact-form input[type="text"], .page-id-476.lm-contact-page .lm-contact-form input[type="email"], .page-id-476.lm-contact-page .lm-contact-form input[type="tel"], .page-id-476.lm-contact-page .lm-contact-form select, .page-id-476.lm-contact-page .lm-contact-form textarea { padding: 14px 13px; } .page-id-476.lm-contact-page .lm-contact-form input[type="submit"] { padding: 0 20px; background-position: right 20px center, right 20px center; } } /* --------------------------------------------------------------------------- 14. モーションを減らす設定への配慮 --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page-id-476.lm-contact-page .lm-contact-form input, .page-id-476.lm-contact-page .lm-contact-form select, .page-id-476.lm-contact-page .lm-contact-form textarea { transition: none; } }