/* * L14 CONTACT-R: 各施設専用お問い合わせフォームの見た目（DESIGN-CONTACT-R.md。R1 = S2 の M-1〜M-5・m-5・m-7〜m-9・O-1・O-4 を反映。 * R2 = §15 の決定的な改行設計。auto-phrase・text-wrap:balance/pretty を削除し、句 .cf-nowrap・単位 .cf-u だけで改行を決める）。 * facility-contact.php でだけ読み込む（inc/contact-form.php の wp_enqueue_scripts。読み込み条件は CONTACT のまま）。 * 施設LPの部品（body.lp-facility 配下の .lp-container / .lp-heading / .lp-section / .lp-cta / .lp-tel）を再利用し、 * このファイルは .cf-* 接頭辞の規則と、再利用部品への .cf-* 付き上書きだけを持つ。style.css には触れない。 * * 🔴 style.css の LP 規則は「body.lp-facility .xxx」(0,2,1) で書かれている。ここで上書きするときは * 同じ接頭辞＋.cf-* を足して (0,3,1) にし、順序ではなく詳細度で勝つ（読み込み順に依存しない）。 * 🔴 寸法は rem（16px 基準）。html[data-fontsize] の % スケールに追従する（DESIGN-L5 D-2 と同じ規則）。 * 🔴 色はテーマトークン（--lp-green-deep / --lp-green / --lp-cream / --lp-ink）だけを使い、施設ごとの色 * （障がい7施設=青、こども2施設=橙、わっかふぇ=茶）に自動で追従する。固定色は灰色系と赤だけ。 * 🔴 淡色の帯（--lp9-pale）の上に deep 色の「小さい文字」を置かない（こども2施設 #A65600 on #F9DEBC = 4.10:1。S2 M-4）。 */ body.lp-facility { --cf-red: #D0261E; /* 白抜き 5.28:1、白地の文字 5.28:1（--c-red #F22C24 は 4.07 で AA に届かないため文字色には使わない） */ --cf-red-pale: #FDECEC; --cf-line: #949494; /* 入力欄の枠。白地 3.03:1（WCAG 1.4.11。S2 m-5。#CCC は 1.61 で届かない → W-9） */ --cf-line-soft: #E5E5E5; /* 区切り線（.lp-info-table と同じ値） */ --cf-muted: #6B6B6B; /* 補足文（白地 5.33:1） */ --cf-placeholder: #767676; /* placeholder（白地 4.54:1） */ --cf-ring: var(--lp-cream); /* focus リング・ステップ「今」の輪。color-mix が使える環境ではテーマ色の 25% に置き換える（下） */ --cf-hover-soft: #fff; /* 副ボタン hover。color-mix が使える環境では deep 色 8%（S2 M-4） */ --cf-body-w: 47.5rem; /* 760px。#11: フォーム本体は中央寄せ・最大幅 720〜760 */ --cf-btn-w: 20rem; /* 320px。#3: 主ボタンの固定幅（SPは100%） */ } @supports (color: color-mix(in srgb, red 50%, transparent)) { body.lp-facility { --cf-ring: color-mix(in srgb, var(--lp-green-deep) 25%, transparent); --cf-hover-soft: color-mix(in srgb, var(--lp-green-deep) 8%, #fff); } } /* ========== 1. 全体 ========== */ body.lp-facility .cf-main { padding-bottom: 3.125rem; } /* #13: 末尾要素→フッター = 50px。LP（よしだ）の最終節→フッター実測 50px と同じ */ body.lp-facility .cf-body { max-width: var(--cf-body-w); margin-inline: auto; padding-top: 2.5rem; /* CONTACT-R R2（CONTACT-R-D-38）: keep-all・strict・anywhere は保険として残すが、改行位置の根拠には しない（auto-phrase は削除。§15-1・§15-2）。本文中の改行してよい場所は、句（.cf-nowrap）の間に 置いた ／原文の空白だけ（facility-contact.php）。 */ word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } body.lp-facility .cf-section:last-child { margin-bottom: 0; } /* CONTACT-R R2（DESIGN-CONTACT-R.md §15-2。CONTACT-R-D-38・D-43）: word-break:auto-phrase と text-wrap:balance/pretty は「ブラウザの推測」に頼るため削除した（Safari/Firefox は auto-phrase 非対応、 Chromium でも辞書が施設名を誤って区切る＝独立S4 2回目 FAIL の原因）。keep-all・strict・anywhere は 保険として残すが、改行位置の根拠にはしない。改行してよい場所は facility-contact.php が句（.cf-nowrap） の間に置いた ／原文の空白だけ（下の .cf-nowrap・.cf-u）。 */ body.lp-facility .cf-hero { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } /* ========== 2. タイトル帯（#1 / #2） ========== .lp-header は PC で position:absolute (高さ 4.25rem)。LP はヒーローの padding で逃げているので、 このページでも同じだけ上に空ける。SP（767px 以下）は .lp-header が position:relative なので不要。 帯の中身（パンくず・タイトル）は本文と同じ 760 の列に揃える（S2 M-1: 画面の左端を 1 本にする）。 */ body.lp-facility .cf-hero { background: var(--lp9-pale, var(--lp-cream)); padding-top: calc(4.25rem + 2.5rem); padding-bottom: 2.25rem; } body.lp-facility .cf-hero .lp-container > * { max-width: var(--cf-body-w); margin-inline: auto; } body.lp-facility .cf-crumb { font-size: 0.8125rem; margin-block: 0 0.75rem; word-break: keep-all; overflow-wrap: anywhere; } body.lp-facility .cf-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.5rem; } body.lp-facility .cf-crumb li { display: inline-flex; align-items: baseline; } body.lp-facility .cf-crumb li + li::before { content: "›"; color: var(--cf-muted); margin-right: 0.5rem; } /* 「›」は次の li の先頭に付くので行頭に来ない（S2 M-2 (ii)） */ body.lp-facility .cf-crumb a { color: var(--lp-ink); text-decoration: underline; text-underline-offset: 0.2em; } body.lp-facility .cf-crumb a:hover { color: var(--lp-green-deep); } body.lp-facility .cf-crumb [aria-current="page"] { color: var(--lp-ink); font-weight: 700; } /* S2 M-4: 淡色の帯の上で deep 色の 13px は AA 未満 → ink（15:1） */ /* タイトル = <施設名>への<お問い合わせ>（S2 M-2）。 CONTACT-R R2（CONTACT-R-D-38・D-40）: 施設名は inc/contact-form.php の 17件の分割表 （fukushikai_contact_name_segments()）で句（.cf-nowrap）と単位（.cf-u）に組み立てる。keep-all・ strict・anywhere は保険として残すが、改行位置の根拠にはしない（auto-phrase は削除。「な／ごみの家」 のような辞書の誤区切りが独立S4 2回目 FAIL の原因だった。§15-1）。 */ body.lp-facility .cf-hero__title { font-family: var(--lp-font-serif); font-weight: 400; font-size: 2rem; line-height: 1.4; letter-spacing: 0.06em; color: var(--lp-ink); margin: 0; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } body.lp-facility .cf-hero__facility { display: inline; color: var(--lp-green-deep); font-weight: 700; } body.lp-facility .cf-hero__label { display: inline-block; white-space: nowrap; } /* R2: ruby の境目で折れないよう句として固定（§15-2） */ body.lp-facility .cf-nowrap { white-space: nowrap; } /* R2: 句。中では絶対に折れない（§15-2） */ body.lp-facility .cf-u { display: inline-block; } /* R2: 単位。1行に入るなら丸ごと次の行へ、入らないときだけ中の改行点で折れる（§15-2） */ /* ========== 3. 見出し（#4） ========== .lp-heading（LP の「● 見出し」）を h3 で使う。色・飾りは style.css のまま。 CONTACT-R 修正便（独立S4 MAJOR-2）: style.css の .lp-heading は display:flex（gap:0）で、テキストの塊と の1つずつが別々の flex item になる。1行に収まらないと item ごとに縦積みになり 「フォームでの／お」「問い合」「わ／せ」のようにばらばらに折れる（文字サイズ「大」の 360〜375 幅で全17施設）。 .cf-section 配下の h3.lp-heading だけ display:block にして通常のインライン折返しへ戻す（style.css 自体・ 他ページの .lp-heading は無変更 = R1 の約束を保つ）。::before（● の飾り）は inline-block + vertical-align で元の見た目のまま左に残す。 */ body.lp-facility h3.lp-heading { margin-bottom: 1.5rem; } body.lp-facility .cf-section h3.lp-heading { display: block; line-break: strict; } body.lp-facility .cf-section h3.lp-heading::before { display: inline-block; vertical-align: middle; } /* ========== 4. 電話カード（#5） ========== LP の CTA 帯 .lp-cta（濃緑・白文字・角丸16・影）をそのまま使い、ヒーロー重ね用の負の margin だけ外す。 */ body.lp-facility .lp-cta.cf-tel { margin: 0; justify-content: space-between; align-items: flex-start; gap: 1.5rem 2rem; } /* 独立S4 MINOR-2: center だと FAX 塊が縦中央に浮き電話側のラベル行と揃わない */ body.lp-facility .cf-tel .lp-cta__tel { margin-left: 0; text-align: left; min-width: 0; } body.lp-facility .cf-tel .lp-cta__tel-label { word-break: keep-all; overflow-wrap: anywhere; } body.lp-facility .cf-tel .lp-cta__tel-num { justify-content: flex-start; white-space: nowrap; } /* S2 M-5: 番号は折らない */ body.lp-facility .cf-tel .lp-cta__tel-num a { white-space: nowrap; } body.lp-facility .cf-tel__fax { text-align: left; } body.lp-facility .cf-tel__fax .lp-cta__tel-num { font-size: 1.5rem; } body.lp-facility .cf-tel__fax .lp-cta__tel-num svg { width: 1.5rem; height: 1.5rem; } /* ========== 5. ステップ表示（#6） ========== 3 状態を「形」で分ける（S2 M-3。色の濃淡だけでは、こども2施設とコントラスト配色で区別できない）: 済 = 白地・deep 色の 2px 枠・deep 色の数字 / 今 = deep 色の塗り＋外側の輪（--cf-ring） / 未来 = 白地・灰の枠・灰の数字。 つなぎ線は「済」と「今」まで deep 色、その先は灰。済の li には見えない「（完了）」がある（テンプレート）。 */ body.lp-facility .cf-steps { list-style: none; margin: 0 0 2rem; padding: 0.25rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } body.lp-facility .cf-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--cf-muted); text-align: center; } body.lp-facility .cf-steps__item::before { /* つなぎ線（左隣の丸から自分の丸まで） */ content: ""; position: absolute; top: 1rem; left: -50%; width: 100%; height: 2px; background: var(--cf-line-soft); } body.lp-facility .cf-steps__item:first-child::before { display: none; } body.lp-facility .cf-steps__num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border: 2px solid var(--cf-line); color: var(--cf-muted); font-family: var(--font-num); font-size: 1rem; font-weight: 700; line-height: 1; } body.lp-facility .cf-steps__item--done { color: var(--lp-ink); } body.lp-facility .cf-steps__item--done .cf-steps__num { background: #fff; border-color: var(--lp-green-deep); color: var(--lp-green-deep); } body.lp-facility .cf-steps__item--done::before { background: var(--lp-green-deep); } body.lp-facility .cf-steps__item[aria-current="step"] { color: var(--lp-green-deep); font-weight: 700; } body.lp-facility .cf-steps__item[aria-current="step"] .cf-steps__num { background: var(--lp-green-deep); border-color: var(--lp-green-deep); color: #fff; box-shadow: 0 0 0 4px var(--cf-ring); } body.lp-facility .cf-steps__item[aria-current="step"]::before { background: var(--lp-green-deep); } /* 独立S4 MINOR-2（S4レビューで指摘された、この注釈自体の誤りを訂正。CONTACT-R-D-37 と VERDICT-S3 が正）: 「STEP3 送信完了」が語の内部（「送信」「完了」の境目）で折れないようにする実際の直しは、 facility-contact.php 側で2つの を .cf-nowrap（句）で1つの不可分片に包んだこと（D-37）であって、 この overflow-wrap:normal 自体は「送信完了」を割らせない決め手ではない（.cf-body から継承する overflow-wrap:anywhere は幅が足りないと word-break の制限より優先されてしまうため、overflow-wrap:normal は その継承を断つための保険）。R2 では「STEPn」自体も別の句にしたので、STEPn とラベルの間の実スペースだけが 改行点になる（「STEP3／送信完了」は可。§15-5）。この宣言は削除しても .cf-nowrap で守られるが、保険として残す。 */ body.lp-facility .cf-steps__label { word-break: keep-all; overflow-wrap: normal; } /* ========== 6. フォーム（#7 / #8 / #9 / #10 / #11） ========== */ body.lp-facility .cf-form { display: grid; gap: 1.75rem; margin: 0; } body.lp-facility .cf-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } body.lp-facility .cf-label, body.lp-facility .cf-form legend { display: block; font-size: 1rem; font-weight: 700; color: var(--lp-ink); margin: 0 0 0.5rem; padding: 0; } body.lp-facility .cf-req, body.lp-facility .cf-opt { /* #9: バッジ。必須=赤地白文字、任意=灰地（今は必須のみ使用） */ display: inline-block; vertical-align: 0.1em; margin-left: 0.5rem; padding: 0.2em 0.65em; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; } body.lp-facility .cf-req { background: var(--cf-red); color: #fff; } body.lp-facility .cf-opt { background: #EDEDED; color: var(--cf-muted); } body.lp-facility .cf-req rt { font-size: 0.75em; } /* S2 m-9: ふりがな ON で rt が 7.2px になるのを防ぐ（下の data-ruby と合わせて 9.75px） */ html:not([data-ruby="off"]) body.lp-facility .cf-req { font-size: 0.8125rem; padding-top: 0.15em; } body.lp-facility .cf-note { font-size: 0.8125rem; color: var(--cf-muted); margin: 0.375rem 0 0; line-height: 1.6; } /* 入力欄（#8） */ body.lp-facility .cf-input { display: block; width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem; font-family: inherit; font-size: 1rem; line-height: 1.5; color: var(--lp-ink); background: #fff; border: 1px solid var(--cf-line); border-radius: 6px; box-shadow: none; } body.lp-facility textarea.cf-input { min-height: 10rem; resize: vertical; } body.lp-facility .cf-input::placeholder { color: var(--cf-placeholder); opacity: 1; } /* focus: outline は透明で残す（強制カラーモードで輪郭が消えないように。S2 m-5）。見える印は枠色＋リング */ body.lp-facility .cf-input:focus { outline: 2px solid transparent; outline-offset: 1px; border-color: var(--lp-green-deep); box-shadow: 0 0 0 3px var(--cf-ring); } body.lp-facility .cf-input[aria-invalid="true"] { border-color: var(--cf-red); } body.lp-facility .cf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--cf-red-pale); } /* ラジオ・チェック（#7 / #10） */ body.lp-facility .cf-choices { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; } body.lp-facility .cf-choice, body.lp-facility .cf-agree__label { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--lp-ink); cursor: pointer; margin: 0; } body.lp-facility .cf-agree__label { align-items: flex-start; } body.lp-facility .cf-choice input, body.lp-facility .cf-agree__label input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--lp-green-deep); cursor: pointer; } body.lp-facility .cf-agree__label input { margin-top: 0.4rem; } body.lp-facility .cf-choice input:focus-visible, body.lp-facility .cf-agree__label input:focus-visible { outline: 2px solid var(--lp-green-deep); outline-offset: 2px; } body.lp-facility .cf-agree { padding: 1rem 1.25rem; background: #FAFAFA; border: 1px solid var(--cf-line-soft); border-radius: 8px; } body.lp-facility .cf-agree a { color: var(--lp-green-deep); text-decoration: underline; text-underline-offset: 0.2em; } /* R2: 「プライバシーポリシーを」は facility-contact.php 側で1つの句（.cf-nowrap）に包んである（§15-5） */ /* ボタン（#3 / #12） */ body.lp-facility .cf-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 0.5rem; } body.lp-facility .cf-actions--confirm { flex-direction: row-reverse; } /* S2 O-1: PC は「戻る 左・送信 右」。DOM 順（送信が先）は変えない */ body.lp-facility .cf-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--cf-btn-w); max-width: 100%; min-height: 3.5rem; padding: 0.75rem 1.5rem; font-family: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; text-decoration: none; text-align: center; border-radius: 8px; border: 2px solid var(--lp-green-deep); cursor: pointer; transition: background-color 0.15s, color 0.15s; } body.lp-facility .cf-btn--primary { background: var(--lp-green-deep); color: #fff; } body.lp-facility .cf-btn--primary:hover { background: var(--lp-green); border-color: var(--lp-green); } body.lp-facility .cf-btn--secondary { background: #fff; color: var(--lp-green-deep); } body.lp-facility .cf-btn--secondary:hover { background: var(--cf-hover-soft); } /* S2 M-4: pale 地だと こども2施設で 4.10:1 → deep 8% 混色（白に近い） */ body.lp-facility .cf-btn:focus-visible { outline: 2px solid var(--lp-green-deep); outline-offset: 3px; } body.lp-facility .cf-btn[disabled] { background: #E6E6E6; border-color: #E6E6E6; color: var(--cf-muted); cursor: not-allowed; } body.lp-facility .cf-back { display: flex; justify-content: center; margin: 2.5rem 0 0; } /* ========== 7. 通知・エラー（入力画面） ========== */ body.lp-facility .cf-notice, body.lp-facility .cf-errors { background: var(--cf-red-pale); border: 1px solid var(--cf-red); border-radius: 8px; padding: 0.875rem 1.125rem; margin: 0 0 1.5rem; color: var(--cf-red); } body.lp-facility .cf-notice { font-weight: 700; } body.lp-facility .cf-errors p { font-weight: 700; margin: 0 0 0.5rem; } body.lp-facility .cf-errors ul { list-style: disc; margin: 0; padding-left: 1.25em; } /* S2 m-7: サイトの初期化 CSS が list-style を消すので明示 */ body.lp-facility .cf-errors li { margin: 0.125rem 0; } body.lp-facility .cf-errors a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } /* S2 O-4: 各行は該当欄へのリンク */ body.lp-facility .cf-error { color: var(--cf-red); font-size: 0.875rem; font-weight: 700; margin: 0.375rem 0 0; } /* ハニーポット: display:none ではなく画面外へ配置する (S2 O-6)。CONTACT のまま */ .cf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========== 8. 準備中 ========== */ body.lp-facility .cf-unavailable { background: #FAFAFA; border: 1px solid var(--cf-line-soft); border-radius: 8px; padding: 1rem 1.25rem; margin: 0; font-size: 1rem; line-height: 1.75; } /* ========== 9. 確認画面 ========== */ body.lp-facility .cf-confirm { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 0; margin: 0 0 2rem; border: 1px solid var(--cf-line-soft); border-radius: 12px; padding: 0 1.5rem; background: #fff; } body.lp-facility .cf-confirm dt, body.lp-facility .cf-confirm dd { margin: 0; padding: 1rem 0; border-top: 1px solid var(--cf-line-soft); line-height: 1.7; } body.lp-facility .cf-confirm dt { font-weight: 700; color: var(--lp-green-deep); padding-right: 1rem; } /* CONTACT-R R2 修正便（CONTACT-R-D-53。独立S4-3 MAJOR-1）: dd は .cf-body の keep-all を継承したまま overflow-wrap:anywhere の保険だけで折れるため、句点だけが行頭に来る禁則違反が起きた（利用者の入力は 句にしない対象のままだが、禁則は適用する。D-41 を上書きしない）。word-break:normal + line-break:strict で禁則を働かせ、anywhere は長い連続文字がはみ出さないための保険として残す。 */ body.lp-facility .cf-confirm dd { word-break: normal; line-break: strict; overflow-wrap: anywhere; } body.lp-facility .cf-confirm dt:first-of-type, body.lp-facility .cf-confirm dt:first-of-type + dd { border-top: 0; } body.lp-facility .cf-confirm-lead { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.75; } /* ========== 10. 完了画面 ========== */ body.lp-facility .cf-done-card { text-align: center; padding: 2.5rem 1.5rem; border: 1px solid var(--cf-line-soft); border-radius: 12px; background: #fff; } body.lp-facility .cf-done-card::before { /* チェック印。新規アセットを増やさず CSS で描く */ content: ""; display: block; width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--lp-green-deep) no-repeat center / 2rem 2rem url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); } body.lp-facility .cf-done-card__title { font-size: 1.25rem; font-weight: 700; color: var(--lp-green-deep); margin: 0 0 0.75rem; } /* S2 m-8: ✓ の意味を文字でも */ /* CONTACT-R R2（CONTACT-R-D-43。W-12）: text-wrap:balance/pretty を外した。改行点がすべて markup の ／空白で宣言済みなら、greedy（詰めるだけ）が Chrome/Safari/Firefox で同じ結果になる唯一の 組み方で、balance/pretty はブラウザごとに改行位置の選び方が違い決定性を壊す。完了文の施設名は facility-contact.php 側で inc/contact-form.php の分割表（句・単位）で組み立てる。 */ body.lp-facility .cf-done { font-size: 1.0625rem; line-height: 1.8; margin: 0 auto 0.75rem; max-width: 32em; } body.lp-facility .cf-done-note { font-size: 0.875rem; color: var(--cf-muted); margin: 0 auto; line-height: 1.7; max-width: 32em; } body.lp-facility .cf-done-note a { color: inherit; } body.lp-facility .cf-done-card .cf-actions { margin-top: 1.75rem; } /* ========== SP（767px 以下。LP と同じ境界） ========== */ @media (max-width: 767px) { body.lp-facility .cf-hero { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* SP の .lp-header は relative */ body.lp-facility .cf-hero__title { font-size: 1.375rem; } /* S2 M-2: 施設名と「お問い合わせ」は同じ大きさ（本文 16px 以上） */ body.lp-facility .cf-hero__facility { font-size: inherit; } body.lp-facility .cf-body { padding-top: 1.75rem; } body.lp-facility .lp-cta.cf-tel { flex-direction: column; align-items: stretch; gap: 1rem; } body.lp-facility .cf-tel .lp-cta__tel-num { font-size: min(2.25rem, 8vw); } /* S2 M-5: 文字サイズ「大」でも 1 行（390: 31.2px、360: 28.8px） */ /* CONTACT-R R2 修正便（独立S4-3 MINOR）: 320・文字サイズ「大」で固定 1.5rem だと FAX 番号（アイコン＋ ハイフン入り数字、折れない）の最小幅が内容ボックスを 8px 超える。上の主番号（S2 M-5）と同じ考え方で vw に応じて縮め、320 でも収める。390 以上ではほぼ 1.5rem のまま（見た目は変えない）。 */ body.lp-facility .cf-tel__fax .lp-cta__tel-num { font-size: min(1.5rem, 6.75vw); } body.lp-facility .cf-steps__item { font-size: 0.8125rem; } body.lp-facility .cf-form { gap: 1.5rem; } body.lp-facility .cf-choices { flex-direction: column; gap: 0; } /* #7: SP は縦1列 */ body.lp-facility .cf-actions, body.lp-facility .cf-actions--confirm { flex-direction: column; align-items: stretch; } /* SP は縦積み（送信が上） */ body.lp-facility .cf-btn { width: 100%; padding-inline: 1rem; } /* R2 §15-7-2: SPは幅100%なので左右1.5remの余白は不要。「施設のページへ戻る」9.2emが収まる */ body.lp-facility .cf-confirm { grid-template-columns: minmax(0, 1fr); padding: 0 1rem; } body.lp-facility .cf-confirm dt { padding-bottom: 0.25rem; } body.lp-facility .cf-confirm dd { padding-top: 0; border-top: 0; } body.lp-facility .cf-done-card { padding: 2rem 1rem; } } /* R2 §15-7-2: 320幅だけ同意カードの左右余白を狭める。「プライバシーポリシーを」「チェックしてください。」（11em）が収まる */ @media (max-width: 359px) { body.lp-facility .cf-agree { padding-inline: 0.75rem; } }