/*! * Earth Return Helper v4 — static.css * 固定 CSS（プラグイン同梱・コードレビュー済み）。 * すべて var(--er-*) 経由で値を参照する。値は のインライン :root で上書きされる。 * * 命名規則: * --er-color- : 色 (#RRGGBB) * --er-heading-font : 見出しフォント * --er-body-font : 本文フォント * --er-font-size-base : 本文ベース px * --er-line-height-base : 行間 (unitless) * --er-section-padding-y : セクション縦余白 px * --er-section-padding-x : セクション横余白 px * --er-content-max-width : コンテンツ最大幅 px * --er-button-padding-y : ボタン縦余白 px * --er-button-padding-x : ボタン横余白 px * --er-button-border-radius : ボタン角丸 px * --er-button-min-height : ボタン最小高 px * --er-button-font-size : ボタンフォント px * --er-anim-enabled : 1 or 0 * --er-anim-duration : ms * --er-anim-respect-reduced-motion: 1 or 0 */ /* デフォルト値（プラグイン未設定時のフォールバック） */ :root { --er-color-primary: #4a6741; --er-color-secondary: #7a8b9c; --er-color-accent: #c9a063; --er-color-base: #fafaf8; --er-color-text1: #2c2c2c; --er-color-text2: #6b6b6b; --er-color-bg2: #f5f3ee; --er-heading-font: "Noto Serif JP", serif; --er-body-font: "Noto Sans JP", sans-serif; --er-font-size-base: 18px; --er-line-height-base: 1.9; --er-section-padding-y: 80px; --er-section-padding-x: 24px; --er-content-max-width: 720px; --er-button-padding-y: 16px; --er-button-padding-x: 32px; --er-button-border-radius: 6px; --er-button-min-height: 48px; --er-button-font-size: 17px; --er-anim-enabled: 1; --er-anim-duration: 600ms; --er-anim-respect-reduced-motion: 1; } /* 本体 */ .er-body, body.er-themed { background-color: var(--er-color-base); color: var(--er-color-text1); font-family: var(--er-body-font); font-size: var(--er-font-size-base); line-height: var(--er-line-height-base); } .er-themed h1, .er-themed h2, .er-themed h3, .er-themed h4, .er-themed h5, .er-themed h6, .er-heading { font-family: var(--er-heading-font); color: var(--er-color-text1); line-height: 1.4; } .er-text-muted { color: var(--er-color-text2); } .er-bg-secondary { background-color: var(--er-color-bg2); } .er-section { padding: var(--er-section-padding-y) var(--er-section-padding-x); } .er-container { max-width: var(--er-content-max-width); margin-left: auto; margin-right: auto; } .er-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--er-button-min-height); padding: var(--er-button-padding-y) var(--er-button-padding-x); border-radius: var(--er-button-border-radius); font-size: var(--er-button-font-size); font-family: var(--er-body-font); background-color: var(--er-color-primary); color: #ffffff; border: 0; cursor: pointer; transition: opacity var(--er-anim-duration) ease; } .er-button:hover, .er-button:focus { opacity: 0.9; } .er-button.is-secondary { background-color: var(--er-color-secondary); } .er-button.is-accent { background-color: var(--er-color-accent); color: var(--er-color-text1); } .er-link { color: var(--er-color-primary); text-decoration: underline; } /* prefers-reduced-motion 尊重: 設定が 1 のとき、OS設定があればアニメ無効化 */ @media (prefers-reduced-motion: reduce) { .er-themed * { animation-duration: 0ms !important; transition-duration: 0ms !important; } } /* ════════════════════════════════════════════════════ v4.1 既存テーマ統合（VK Blocks Pro + Lightning + WP Core） 既存サイト全体に CSS変数（プラグイン値）を反映するためのオーバーライド層。 !important は VK Blocks の has-vk-color-* クラスに勝つために最小限使用。 ════════════════════════════════════════════════════ */ /* === 全体タイポグラフィ === */ body { font-family: var(--er-body-font); font-size: var(--er-font-size-base); line-height: var(--er-line-height-base); color: var(--er-color-text1); } /* === 見出し（VK Blocks + Core）=== */ .wp-block-heading, h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading, h4.wp-block-heading, h5.wp-block-heading, h6.wp-block-heading, .is-style-vk-heading-plain { font-family: var(--er-heading-font); color: var(--er-color-text1); line-height: 1.5; } /* === ボタン: WP Core + VK Blocks === */ .wp-block-button__link, .wp-element-button, .vk_button .vk_button_link, .vk_button_link { border-radius: var(--er-button-border-radius); min-height: var(--er-button-min-height); font-size: var(--er-button-font-size); padding-top: var(--er-button-padding-y); padding-bottom: var(--er-button-padding-y); padding-left: var(--er-button-padding-x); padding-right: var(--er-button-padding-x); } /* === VK Color Preset 上書き（クラスベース） === */ .has-vk-color-primary-color { color: var(--er-color-primary) !important; } .has-vk-color-primary-background-color { background-color: var(--er-color-primary) !important; } .has-vk-color-text-1-color { color: var(--er-color-text1) !important; } .has-vk-color-text-2-color { color: var(--er-color-text2) !important; } .has-vk-color-bg-2-background-color { background-color: var(--er-color-bg2) !important; } /* === リンク === */ .entry-body a:not(.wp-block-button__link):not(.vk_button_link), .entry-content a:not(.wp-block-button__link):not(.vk_button_link), .site-body a:not(.wp-block-button__link):not(.vk_button_link) { color: var(--er-color-primary); } .entry-body a:not(.wp-block-button__link):not(.vk_button_link):hover, .entry-content a:not(.wp-block-button__link):not(.vk_button_link):hover, .site-body a:not(.wp-block-button__link):not(.vk_button_link):hover { color: var(--er-color-secondary); } /* === コンテンツ最大幅（投稿本文） === */ .entry-body > .wp-block-group, .entry-body > .alignwide, .entry-content > .wp-block-group, .entry-content > .alignwide { max-width: var(--er-content-max-width); margin-left: auto; margin-right: auto; } /* === 高齢者向け配慮: テーブルとフォーム要素の文字サイズ === */ .entry-body table, .entry-content table, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select { font-size: var(--er-font-size-base); line-height: var(--er-line-height-base); } /* === v4.1: モバイル固定ナビ 非表示 === */ /* VK ExUnit のモバイル固定ナビ（HOME/お問い合わせ/TEL）を停止 */ /* 電話番号がダミー「000-000-0000」で公開されていたため恒久的に非表示 */ .mobile-fix-nav-menu { display: none !important; } /* === v4.1.2: ページタイトル背景 デフォルト(featured_image無し時) === */ /* featured_image がある時は PHP の inline CSS (er-page-header-featured) で上書きされる。 */ /* このルールは「画像が無いページ」のフォールバックとして機能する。 */ :root { --vk-page-header-url: none !important; } .page-header, body .page-header { background: #f5f5f0; background-image: none; background-color: #f5f5f0; border-bottom: 1px solid #e8e8de; color: var(--er-color-text1); } .page-header::before { display: none; } .page-header .page-header-title, body .page-header .page-header-title { color: var(--er-color-text1); text-shadow: none; } /* === v4.1: CTA ボタン統一クラス === */ /* プライマリ（無料で相談する・お問い合わせ） */ .er-cta-btn-primary, a.er-cta-btn-primary, .wp-block-button__link.er-cta-btn-primary { background-color: var(--er-color-primary) !important; color: #ffffff !important; border: 1px solid var(--er-color-primary) !important; } .er-cta-btn-primary:hover, a.er-cta-btn-primary:hover { background-color: var(--er-color-secondary) !important; color: #ffffff !important; border-color: var(--er-color-secondary) !important; } /* セカンダリ（料金・流れ・FAQ・関連ページ） */ .er-cta-btn-outline, a.er-cta-btn-outline, .wp-block-button__link.er-cta-btn-outline { background-color: #ffffff !important; color: var(--er-color-primary) !important; border: 1.5px solid var(--er-color-primary) !important; } .er-cta-btn-outline:hover, a.er-cta-btn-outline:hover { background-color: var(--er-color-primary) !important; color: #ffffff !important; } /* ════════════════════════════════════════════════════ v4.1.6: SP/PC 軽微レスポンシブ修正 1. CTAボタン文字の折返し抑止（"詳しく見る" 等） 2. SP の見出し word-break で日本語の不自然な改行を抑止 3. /home/ 6ラベルブロックの縦余白圧縮 ════════════════════════════════════════════════════ */ /* === v4.2.1: SP/タブレット中間幅で 3ボタン以上が 2+1 段になる問題を解消 767px以下では .wp-block-buttons 内の CTA を全て縦並び（カラム）に統一 */ @media (max-width: 767px) { .wp-block-buttons.is-layout-flex:has(a.er-cta-btn-primary), .wp-block-buttons.is-layout-flex:has(a.er-cta-btn-outline) { flex-direction: column !important; align-items: center !important; } .wp-block-buttons.is-layout-flex:has(a.er-cta-btn-primary) > .wp-block-button, .wp-block-buttons.is-layout-flex:has(a.er-cta-btn-outline) > .wp-block-button { width: auto; max-width: 100%; } } /* === 1. CTAボタン 折返し抑止（れいやレビュー反映 v4.2.0） === - inline-flex + box-sizing + width:auto + max-width:100% で確実に内容幅に合わせる - word-break: normal で日本語強制改行を停止（keep-all は長文overflow懸念で normal 採用） - 親 .wp-block-button.has-custom-width.wp-block-button__width-* は :has() で width:auto */ a.er-cta-btn-primary, a.er-cta-btn-outline, .er-cta-btn-primary, .er-cta-btn-outline { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto !important; max-width: 100%; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .wp-block-button.has-custom-width:has(.er-cta-btn-primary), .wp-block-button.has-custom-width:has(.er-cta-btn-outline) { width: auto !important; max-width: 100%; } /* === 2. SP の見出し word-break (日本語の単語途中改行を抑止) === */ @media (max-width: 600px) { .entry-body h1.wp-block-heading, .entry-body h2.wp-block-heading, .entry-body h3.wp-block-heading, .entry-body h4.wp-block-heading, .entry-content h1.wp-block-heading, .entry-content h2.wp-block-heading, .entry-content h3.wp-block-heading, .entry-content h4.wp-block-heading, .page-header-title { word-break: keep-all; overflow-wrap: break-word; line-break: strict; } } /* === 3. /home/ 6ラベルブロック 縦余白圧縮（SPのみ）=== v4.1.7: VK アイコンブロック (.vk_icon) の margin-bottom: 72px が真因。これを縮める */ @media (max-width: 600px) { body.page-id-676 .wp-block-columns { gap: 12px !important; } body.page-id-676 .wp-block-columns > .wp-block-column { margin-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 0 !important; } body.page-id-676 .wp-block-columns > .wp-block-column.vk_block-margin-md--margin-bottom { margin-bottom: 0 !important; } /* VK アイコンブロックのデフォルト 72px → 12px に圧縮 */ body.page-id-676 .wp-block-columns .vk_icon { margin-bottom: 12px !important; margin-top: 0 !important; } /* column 内: アイコン → H3 → 説明 間の余白を詰める */ body.page-id-676 .wp-block-columns h3.wp-block-heading { margin-top: 4px !important; margin-bottom: 4px !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.page-id-676 .wp-block-columns h3.wp-block-heading + p, body.page-id-676 .wp-block-columns p { margin-top: 4px !important; margin-bottom: 0 !important; } } /* ════════════════════════════════════════════════════ v4.1.4: Sprint 07 /fee/ デザイン調整 高齢者UX + 自然葬ブランド整合 /fee/ ページ限定 (body.page-id-11) でスコープ ════════════════════════════════════════════════════ */ /* === v4.1.5-rev1: Lightning デフォルト H2 橙色線 全ページ除去 === サイト全体でブランド統一のため Lightning の H2 border-top/bottom を停止 */ .entry-body h2.wp-block-heading, .entry-content h2.wp-block-heading { border-top: none !important; border-bottom: none !important; } /* === /fee/ 本文H2 下線（ブランドプライマリ） === Lightning G3 Pro は .entry-body を使用。.entry-content と両対応 */ body.page-id-11 .entry-body h2.wp-block-heading, body.page-id-11 .entry-content h2.wp-block-heading { position: relative; padding-bottom: 12px; } body.page-id-11 .entry-body h2.wp-block-heading::after, body.page-id-11 .entry-content h2.wp-block-heading::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--er-color-primary); margin-top: 8px; } /* 中央寄せH2は下線も中央寄せ */ body.page-id-11 .entry-body h2.wp-block-heading.has-text-align-center::after, body.page-id-11 .entry-content h2.wp-block-heading.has-text-align-center::after { margin-left: auto; margin-right: auto; } /* === /fee/ 価格表示（er-price クラス） === v4.1.5: WCAG AA基準達成のため #c9a063 → #8a6a2f (深い金茶/ブロンズ) 5.02:1 */ .er-price { color: #8a6a2f; font-weight: bold; font-size: 24px; letter-spacing: 0.02em; } /* === /fee/ プラン比較表（er-plan-table-mobile） === */ .er-plan-table-mobile thead th { background-color: var(--er-color-primary) !important; color: #ffffff !important; font-weight: bold; padding: 12px 8px; } .er-plan-table-mobile tbody td { padding: 12px 8px; vertical-align: top; } .er-plan-table-mobile tbody tr:nth-child(odd) { background-color: rgba(245, 243, 238, 0.4); } /* === /fee/ プランカード（er-plan-card） === */ .er-plan-card { transition: box-shadow 0.2s ease; } .er-plan-card:hover { box-shadow: 0 4px 12px rgba(74, 103, 65, 0.12); } /* === /fee/ スマホ縦積み 768px以下 === */ @media (max-width: 768px) { /* プラン比較表: 表 → カード型に変形 */ .er-plan-table-mobile, .er-plan-table-mobile table, .er-plan-table-mobile tbody, .er-plan-table-mobile tr, .er-plan-table-mobile td { display: block; width: 100% !important; } .er-plan-table-mobile thead { display: none; } .er-plan-table-mobile tbody tr { margin-bottom: 16px; border: 1px solid #ddd; border-radius: 6px; padding: 12px; background-color: #ffffff; } .er-plan-table-mobile tbody td { border: none !important; padding: 6px 0 !important; text-align: left !important; } .er-plan-table-mobile tbody td:first-child { font-size: 1.1rem; border-bottom: 1px solid #eee !important; margin-bottom: 8px; padding-bottom: 8px !important; } /* tfoot は残す（注釈用） */ .er-plan-table-mobile tfoot { display: block; margin-top: 12px; font-size: 0.85rem; color: var(--er-color-text2); } .er-plan-table-mobile tfoot tr, .er-plan-table-mobile tfoot td { display: block; width: 100% !important; border: none !important; padding: 4px 0 !important; } /* プランカード3枚: 1カラム縦積み（VK columns既定の動作だが念のため） */ .er-plan-cards { flex-direction: column; } .er-plan-cards .wp-block-column { flex-basis: 100% !important; margin-bottom: 16px; } /* 価格はモバイルで少し小さく */ .er-price { font-size: 22px; } }