/* ============================================ デザインリファクタ - v4 統合版（!important 最小化） フェーズ 1（見出し統一）+ フェーズ 2（配色統一）を統合。 `!important` は **Emanon のインライン style=""` または CSS 変数を上書きする場合のみ** 使用、 それ以外は higher-specificity で対応。各 !important にコメント付与。 参照: - designs/style-guide.md - designs/heading-proposals-2026-04-23/option-e-deep-dive.html 対象: `.l-content__main` 配下のみ（サイドバー・ヘッダー除外） 除外: voices ショートコード、otayori カスタム CSS（独立世界観） 作成: 2026-04-23 / 更新: 2026-05-15 (v4.0.0: FA CDN 廃止、SVG mask data URI 内蔵) --- アイコンライセンス --- このファイルに data URI で埋め込まれた SVG アイコンは Font Awesome Free 6.5.2 由来。 Icons: CC BY 4.0 (https://fontawesome.com/license/free) Code: MIT License Copyright 2024 Fonticons, Inc. オリジナル SVG は /assets/icons/ 配下に保管。アイコン追加手順は designs/icons.md 参照。 ============================================ */ /* ============================================================= Part A: 見出しスタイル（案 E-γ + δ-1） ============================================================= */ /* ---- Emanon wrapper の中央寄せマージン解除 ---- Emanon の `.epb-advance-headling__text-wrapper` は `margin: 0 auto; width: fit-content;` で中央寄せされる。 これを解除して親幅いっぱいに広げる。 higher-specificity（l-content__main プレフィックス）で !important 不要。 */ .l-content__main .epb-advance-headling__text-wrapper.is-style-epb-headling-default, .l-content__main .epb-advance-headling__text-wrapper.is-style-epb-headling-border-left-5, .l-content__main .epb-advanced-headling__inner:not(.is-style-epb-headling-lines-on) { margin-top: 2em; /* 縦余白は wrapper 側で管理（H2 が display:inline のため） */ margin-right: 0; margin-bottom: 1em; margin-left: 0; width: auto; text-align: left; } /* block 要素側の alignment クラス（epb-alignment-center 等）も打ち消し */ .l-content__main .wp-block-emanon-premium-blocks-headling:not(.is-style-epb-headling-lines-on) { text-align: left; } /* ---- 新ブロック epb-advanced-headling の flex → block 差し戻し ---- community 等で使われる新ブロック epb-advanced-headling は `.epb-advanced-headling { display: flex }` / `.epb-advanced-headling__inner { display: flex; flex-direction: column }` となっており、子の h2 は flex item として blockify され、`display: inline !important` を指定しても USED display が block になって padding-box が親幅いっぱい（viewport 幅）に広がる。 結果、linear-gradient マーカーが文字幅でなく viewport 幅まで伸びる（前セッションで未解決だった bug の正体）。 対象: epb-has-sub-text-bottom / epb-has-sub-text-top（flex-direction: column 系、block 化しても見た目は変わらない） 除外: epb-has-sub-text-left / right（flex-direction: row、block 化すると sub-text レイアウト崩壊）、 lines-on（装飾維持のため触らない） PC では text が 1 行に収まるため見た目は壊れないが、内部的には block 幅のマーカー。 SP では text が折返すので明確に viewport 幅になり、user が気付いた。 どちらの環境でも正しい見た目にするため flex → block に差し戻す。 */ .l-content__main .epb-advanced-headling:not(.is-style-epb-headling-lines-on), .l-content__main .epb-advanced-headling__inner.epb-has-sub-text-bottom:not(.is-style-epb-headling-lines-on), .l-content__main .epb-advanced-headling__inner.epb-has-sub-text-top:not(.is-style-epb-headling-lines-on) { display: block !important; /* flex → block、h2 を本来の inline 幅にする */ } /* ---- H2 本文内のベーススタイル ---- display: inline + box-decoration-break: clone で、改行時に各行ごと マーカーが文字幅にフィットする（inline-block だと行末まで伸びてしまう）。 縦 margin は inline には効かないため wrapper 側 (.epb-*-text-wrapper) に配置済。 font-size/color !important: Emanon H2 のインライン `style="color:#333333;line-height:1.6..."` を上書きするため */ .l-content__main h2.epb-advance-headling__text, .l-content__main h2.epb-advanced-headling__text { display: inline !important; /* テキスト行にフィット、改行時も文字幅 */ font-size: 26px !important; font-weight: 700; color: #333 !important; line-height: 1.8; /* マーカー領域の高さ確保 */ padding: 0.1em 4px; /* 縦 padding は clone で各行に適用 */ border-left: none !important; /* Emanon の is-style-epb-headling-border-left 由来の青棒を解除 */ /* 下 40% だけマーカーの見た目は linear-gradient で描画、各ページで色指定 */ box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* H2 アイコン ::before（共通属性、mask-image は各ページで指定） SVG mask 方式: フォント不要、background-color: currentColor で色は color から継承 */ .l-content__main h2.epb-advance-headling__text::before, .l-content__main h2.epb-advanced-headling__text::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 10px; vertical-align: -0.08em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ---- H3 本文内（δ-1: アイコンのみ、マーカーなし） ---- */ .l-content__main h3.epb-advance-headling__text, .l-content__main h3.epb-advanced-headling__text { display: block; text-align: left; font-size: 19px !important; /* inline --epb-font-pc 上書き */ font-weight: 700; color: #333 !important; /* inline color 上書き */ line-height: 1.5; margin: 1.5em 0 0.6em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* H3 の border-left は Emanon のまま（user 指定: そのまま） */ } /* H3 アイコン ::before（共通: SVG mask 方式、全 H3 で circle） */ .l-content__main h3.epb-advance-headling__text::before, .l-content__main h3.epb-advanced-headling__text::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 10px; vertical-align: 0.15em; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ---- H1 ページタイトル（article-title + archive-title） ---- */ .l-content__main h1.article-title, .l-content__main h1.archive-title { display: inline !important; /* テキスト行にフィット、改行時も文字幅 */ font-size: 30px; font-weight: 700; color: #333; line-height: 1.8; padding: 0.1em 4px; /* 下 40% だけマーカーの見た目は linear-gradient で描画、各ページで色指定 */ box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* H1 アイコン ::before（共通: SVG mask 方式） */ .l-content__main h1.article-title::before, .l-content__main h1.archive-title::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 12px; vertical-align: -0.08em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ---- ページ別アイコン + マーカー色（案 E-γ） ---- background !important: Emanon の wrapper に `--epb-headling-background-color` が設定される場合があるため color !important: 見出し要素のインライン color を上書き content: 別ルールで上書きされうるので !important あると安全 */ /* TOP (ID=16): house + ピーチ */ body.page-id-16 .l-content__main h2.epb-advance-headling__text, body.page-id-16 .l-content__main h2.epb-advanced-headling__text, body.page-id-16 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFD9C0 60%) !important; } body.page-id-16 .l-content__main h2.epb-advance-headling__text::before, body.page-id-16 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-16 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8956E; } body.page-id-16 .l-content__main h3.epb-advance-headling__text::before, body.page-id-16 .l-content__main h3.epb-advanced-headling__text::before { color: #E8956E; } /* 進化し続ける保育環境 (ID=27): tree + ミント */ body.page-id-27 .l-content__main h2.epb-advance-headling__text, body.page-id-27 .l-content__main h2.epb-advanced-headling__text, body.page-id-27 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #C8E6DE 60%) !important; } body.page-id-27 .l-content__main h2.epb-advance-headling__text::before, body.page-id-27 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-27 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #8BB874; } body.page-id-27 .l-content__main h3.epb-advance-headling__text::before, body.page-id-27 .l-content__main h3.epb-advanced-headling__text::before { color: #8BB874; } /* 園の生活 (ID=30): seedling + ピーチ */ body.page-id-30 .l-content__main h2.epb-advance-headling__text, body.page-id-30 .l-content__main h2.epb-advanced-headling__text, body.page-id-30 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFD9C0 60%) !important; } body.page-id-30 .l-content__main h2.epb-advance-headling__text::before, body.page-id-30 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-30 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8956E; } body.page-id-30 .l-content__main h3.epb-advance-headling__text::before, body.page-id-30 .l-content__main h3.epb-advanced-headling__text::before { color: #E8956E; } /* 子育て支援 (ID=33): heart + ピンク */ body.page-id-33 .l-content__main h2.epb-advance-headling__text, body.page-id-33 .l-content__main h2.epb-advanced-headling__text, body.page-id-33 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFD7E5 60%) !important; } body.page-id-33 .l-content__main h2.epb-advance-headling__text::before, body.page-id-33 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-33 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E48CA8; } body.page-id-33 .l-content__main h3.epb-advance-headling__text::before, body.page-id-33 .l-content__main h3.epb-advanced-headling__text::before { color: #E48CA8; } /* 入園案内 (ID=179): school + アプリコット */ body.page-id-179 .l-content__main h2.epb-advance-headling__text, body.page-id-179 .l-content__main h2.epb-advanced-headling__text, body.page-id-179 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFC27A 60%) !important; } body.page-id-179 .l-content__main h2.epb-advance-headling__text::before, body.page-id-179 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-179 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #F4A261; } body.page-id-179 .l-content__main h3.epb-advance-headling__text::before, body.page-id-179 .l-content__main h3.epb-advanced-headling__text::before { color: #F4A261; } /* サイトポリシー (ID=916): shield-halved + 薄黄 */ body.page-id-916 .l-content__main h2.epb-advance-headling__text, body.page-id-916 .l-content__main h2.epb-advanced-headling__text, body.page-id-916 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFE88C 60%) !important; } body.page-id-916 .l-content__main h2.epb-advance-headling__text::before, body.page-id-916 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-916 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8B530; } body.page-id-916 .l-content__main h3.epb-advance-headling__text::before, body.page-id-916 .l-content__main h3.epb-advanced-headling__text::before { color: #E8B530; } /* 公開情報 (ID=1030): book-open + アプリコット */ body.page-id-1030 .l-content__main h2.epb-advance-headling__text, body.page-id-1030 .l-content__main h2.epb-advanced-headling__text, body.page-id-1030 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFC27A 60%) !important; } body.page-id-1030 .l-content__main h2.epb-advance-headling__text::before, body.page-id-1030 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-1030 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #F4A261; } body.page-id-1030 .l-content__main h3.epb-advance-headling__text::before, body.page-id-1030 .l-content__main h3.epb-advanced-headling__text::before { color: #F4A261; } /* お問い合わせ (ID=1302): envelope + ピーチ */ body.page-id-1302 .l-content__main h2.epb-advance-headling__text, body.page-id-1302 .l-content__main h2.epb-advanced-headling__text, body.page-id-1302 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFD9C0 60%) !important; } body.page-id-1302 .l-content__main h2.epb-advance-headling__text::before, body.page-id-1302 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-1302 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8956E; } body.page-id-1302 .l-content__main h3.epb-advance-headling__text::before, body.page-id-1302 .l-content__main h3.epb-advanced-headling__text::before { color: #E8956E; } /* お知らせ一覧 (ID=1732): bell + 薄黄 */ body.page-id-1732 .l-content__main h2.epb-advance-headling__text, body.page-id-1732 .l-content__main h2.epb-advanced-headling__text, body.page-id-1732 .l-content__main h1.article-title, body.page-id-1732 .l-content__main h1.archive-title, body.blog .l-content__main h1.archive-title { background: linear-gradient(transparent 60%, #FFE88C 60%) !important; } body.page-id-1732 .l-content__main h2.epb-advance-headling__text::before, body.page-id-1732 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-1732 .l-content__main h1.article-title::before, body.page-id-1732 .l-content__main h1.archive-title::before, body.blog .l-content__main h1.archive-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8B530; } body.page-id-1732 .l-content__main h3.epb-advance-headling__text::before, body.page-id-1732 .l-content__main h3.epb-advanced-headling__text::before { color: #E8B530; } /* 保護者の声 (ID=2225): comment-dots + ミント */ body.page-id-2225 .l-content__main h2.epb-advance-headling__text, body.page-id-2225 .l-content__main h2.epb-advanced-headling__text, body.page-id-2225 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #C8E6DE 60%) !important; } body.page-id-2225 .l-content__main h2.epb-advance-headling__text::before, body.page-id-2225 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-2225 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #8BB874; } body.page-id-2225 .l-content__main h3.epb-advance-headling__text::before, body.page-id-2225 .l-content__main h3.epb-advanced-headling__text::before { color: #8BB874; } /* おたより (ID=2632): feather + ピンク */ body.page-id-2632 .l-content__main h2.epb-advance-headling__text, body.page-id-2632 .l-content__main h2.epb-advanced-headling__text, body.page-id-2632 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #FFD7E5 60%) !important; } body.page-id-2632 .l-content__main h2.epb-advance-headling__text::before, body.page-id-2632 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-2632 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E48CA8; } body.page-id-2632 .l-content__main h3.epb-advance-headling__text::before, body.page-id-2632 .l-content__main h3.epb-advanced-headling__text::before { color: #E48CA8; } /* 保護者の活動 (ID=2731): hands-holding-child + ミント */ body.page-id-2731 .l-content__main h2.epb-advance-headling__text, body.page-id-2731 .l-content__main h2.epb-advanced-headling__text, body.page-id-2731 .l-content__main h1.article-title { background: linear-gradient(transparent 60%, #C8E6DE 60%) !important; } body.page-id-2731 .l-content__main h2.epb-advance-headling__text::before, body.page-id-2731 .l-content__main h2.epb-advanced-headling__text::before, body.page-id-2731 .l-content__main h1.article-title::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #8BB874; } body.page-id-2731 .l-content__main h3.epb-advance-headling__text::before, body.page-id-2731 .l-content__main h3.epb-advanced-headling__text::before { color: #8BB874; } /* ---- lines-on スタイルは例外（policy の「サイトポリシー」等） ---- マーカー・アイコンを適用しない、lines-on 装飾を維持 */ .l-content__main .epb-advance-headling__text-wrapper.is-style-epb-headling-lines-on h2 { display: block; background: none; } .l-content__main .epb-advance-headling__text-wrapper.is-style-epb-headling-lines-on h2::before { content: none; } /* ============================================================= Part A-2: core/heading 対応 (Emanon 脱却 Pilot) 方針: - Emanon ブロック → core/heading への段階移行のため、core ブロック class (`.wp-block-heading`) に対しても同じ装飾セレクタを並列追加 - Emanon class セレクタ (epb-advance-headling__text 等) はそのまま残す → 移行未済ページとの両立 - h2 は `display: inline` で扱う: * 2 行以上に折り返したときに、各行のマーカーが文字幅にフィットする (`display: block + width: fit-content` だと最長行幅まで広がってしまう) * Emanon の advanced-headling 構造下で `display: inline` で解決していた のと同じ仕組み、core/heading は wrapper がないが直接 inline で動く - vertical margin は inline では効かないため、隣接 sibling 側 (`h2 + *` に margin-top) で間隔確保。h2 の上側余白は別 TODO ============================================================= */ .l-content__main h2.wp-block-heading { display: inline; font-size: 26px; font-weight: 700; color: #333; line-height: 1.8; /* マーカー領域の高さ確保 */ padding: 0.1em 4px; box-decoration-break: clone; /* 複数行に渡る場合、各行に padding/background を適用 */ -webkit-box-decoration-break: clone; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* h2 の下側余白を隣接 sibling 側で確保 (h2 inline 化で h2 自身の margin が効かないため) */ .l-content__main h2.wp-block-heading + * { margin-top: 1em; } /* core/h2 アイコン ::before（共通: SVG mask 方式） */ .l-content__main h2.wp-block-heading::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 10px; vertical-align: -0.08em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .l-content__main h3.wp-block-heading { display: block; text-align: left; font-size: 19px; font-weight: 700; color: #333; line-height: 1.5; margin: 1.5em 0 0.6em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* core/h3 アイコン ::before（共通: circle SVG mask） */ .l-content__main h3.wp-block-heading::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 10px; vertical-align: 0.15em; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ---- ページ別配色 (core/heading) ---- 既存の `body.page-id-XX h2.epb-advance-headling__text` ルールの隣に、 `h2.wp-block-heading` 用のページ別マーカー + アイコンを並列追加 */ /* TOP (ID=16): house + ピーチ */ body.page-id-16 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFD9C0 60%); } body.page-id-16 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8956E; } body.page-id-16 .l-content__main h3.wp-block-heading::before { color: #E8956E; } /* 進化し続ける保育環境 (ID=27): tree + ミント */ body.page-id-27 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #C8E6DE 60%); } body.page-id-27 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #8BB874; } body.page-id-27 .l-content__main h3.wp-block-heading::before { color: #8BB874; } /* 園の生活 (ID=30) と _test-about (ID=3435): seedling + ピーチ _test-about は Emanon 脱却プロジェクトのテスト用ページ。本番反映時 (= about への content.raw 移植時) は page-id-3435 セレクタは削除する。 */ body.page-id-30 .l-content__main h2.wp-block-heading, body.page-id-3435 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFD9C0 60%); } body.page-id-30 .l-content__main h2.wp-block-heading::before, body.page-id-3435 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8956E; } body.page-id-30 .l-content__main h3.wp-block-heading::before, body.page-id-3435 .l-content__main h3.wp-block-heading::before { color: #E8956E; } /* 子育て支援 (ID=33): heart + ピンク */ body.page-id-33 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFD7E5 60%); } body.page-id-33 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E48CA8; } body.page-id-33 .l-content__main h3.wp-block-heading::before { color: #E48CA8; } body.page-id-33 .l-content__main h3.wp-block-heading { border-bottom: 1px solid #E48CA8; /* T2 小円 + アクセント下線、supports デフォルト */ padding-bottom: 4px; } /* 入園案内 (ID=179): school + アプリコット */ body.page-id-179 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFC27A 60%); } body.page-id-179 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #F4A261; } body.page-id-179 .l-content__main h3.wp-block-heading::before { color: #F4A261; } /* サイトポリシー (ID=916): shield-halved + 薄黄 */ body.page-id-916 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFE88C 60%); } body.page-id-916 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8B530; } body.page-id-916 .l-content__main h3.wp-block-heading::before { color: #E8B530; } /* 公開情報 (ID=1030): book-open + アプリコット */ body.page-id-1030 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFC27A 60%); } body.page-id-1030 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #F4A261; } body.page-id-1030 .l-content__main h3.wp-block-heading::before { color: #F4A261; } /* お問い合わせ (ID=1302): envelope + ピーチ */ body.page-id-1302 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFD9C0 60%); } body.page-id-1302 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8956E; } body.page-id-1302 .l-content__main h3.wp-block-heading::before { color: #E8956E; } /* お知らせ一覧 (ID=1732): bell + 薄黄 */ body.page-id-1732 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFE88C 60%); } body.page-id-1732 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E8B530; } body.page-id-1732 .l-content__main h3.wp-block-heading::before { color: #E8B530; } /* 保護者の声 (ID=2225): comment-dots + ミント */ body.page-id-2225 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #C8E6DE 60%); } body.page-id-2225 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #8BB874; } body.page-id-2225 .l-content__main h3.wp-block-heading::before { color: #8BB874; } /* おたより (ID=2632): feather + ピンク */ body.page-id-2632 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #FFD7E5 60%); } body.page-id-2632 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #E48CA8; } body.page-id-2632 .l-content__main h3.wp-block-heading::before { color: #E48CA8; } /* 保護者の活動 (ID=2731): hands-holding-child + ミント */ body.page-id-2731 .l-content__main h2.wp-block-heading { background: linear-gradient(transparent 60%, #C8E6DE 60%); } body.page-id-2731 .l-content__main h2.wp-block-heading::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); color: #8BB874; } body.page-id-2731 .l-content__main h3.wp-block-heading::before { color: #8BB874; } /* ============================================================= Part I: is-style-seijuji-* Block Style Variation 用 CSS register_block_style() で登録した variation 装飾: - core/button + is-style-seijuji-pdf (PDF を開くボタン) - core/button + is-style-seijuji-tel (電話リンクボタン) - core/group + is-style-seijuji-box (カード装飾) + Emanon の accordion を core/details で代替したときの装飾 ============================================================= */ /* ---- core/group + is-style-seijuji-box (Emanon の box ブロック相当) ---- */ .l-content__main .wp-block-group.is-style-seijuji-box { background-color: #FFFBF0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); padding: 24px; margin: 1em 0; } /* ---- core/button + is-style-seijuji-pdf (Emanon の advanced-button PDF 用相当) ---- */ .l-content__main .wp-block-button.is-style-seijuji-pdf .wp-block-button__link { background: #7DC6BC; border: 2px solid #6BB5AB; border-radius: 100px; color: #fff !important; /* core button のデフォルト color を上書き */ font-weight: 700; padding: 0.6em 1.8em 0.6em 2.6em; position: relative; text-decoration: none; transition: background 0.2s ease; } .l-content__main .wp-block-button.is-style-seijuji-pdf .wp-block-button__link::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; position: absolute; left: 1em; top: 50%; transform: translateY(-50%); } .l-content__main .wp-block-button.is-style-seijuji-pdf .wp-block-button__link:hover { background: #6BB5AB; } /* ---- core/button + is-style-seijuji-tel (電話リンク用、Pilot 1+2 では未使用、お問い合わせページ移行時用) ---- */ .l-content__main .wp-block-button.is-style-seijuji-tel .wp-block-button__link { background: #FFD9C0; border: 2px solid #E8956E; border-radius: 100px; color: #333 !important; font-weight: 700; padding: 0.6em 1.8em 0.6em 2.6em; position: relative; text-decoration: none; transition: background 0.2s ease; } .l-content__main .wp-block-button.is-style-seijuji-tel .wp-block-button__link::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: #E8956E; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; position: absolute; left: 1em; top: 50%; transform: translateY(-50%); } .l-content__main .wp-block-button.is-style-seijuji-tel .wp-block-button__link:hover { background: #FFC2A2; } /* ---- core/details (Emanon の accordion 相当) ---- */ .l-content__main .wp-block-details { background: #fff; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px; padding: 0; } .l-content__main .wp-block-details > summary { background: #d1e3f6; padding: 14px 44px 14px 18px; /* 右側にアイコン用余白 */ cursor: pointer; font-weight: 600; border-radius: 8px 8px 0 0; position: relative; list-style: none; text-align: left; } .l-content__main .wp-block-details > summary::-webkit-details-marker { display: none; /* Webkit のデフォルト三角を消す */ } .l-content__main .wp-block-details > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4em; font-weight: 700; line-height: 1; } .l-content__main .wp-block-details[open] > summary::after { content: "−"; } .l-content__main .wp-block-details[open] > summary { border-radius: 8px 8px 0 0; /* 開いてる時も上だけ角丸 */ } .l-content__main .wp-block-details > :not(summary) { padding: 16px 18px; } /* ============================================================= Part B: カード統一（オフクリーム #FFFBF0 + シャドウ） 対象: `.wp-block-group.has-background`（policy / community / etc） background-color !important: Gutenberg がインライン `style="background-color:..."` を吐くため ============================================================= */ .l-content__main .wp-block-group.has-background { background-color: #FFFBF0 !important; /* inline style="background-color:..." 上書き */ border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); padding: 24px; } /* paragraph レベルの has-background（policy 冒頭の説明文など） */ .l-content__main p.has-background { background-color: #FFFBF0 !important; /* inline style 上書き */ padding: 16px; border-radius: 6px; } /* サイドバー widget 枠（カテゴリー / 最近の投稿 / アーカイブ / 目次） Emanon の inline style="background-color:#d0e2f57a" を上書き */ .sidebar .wp-block-group.has-background { background-color: #FFFBF0 !important; /* inline 上書き */ border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* ============================================================= Part E: 固定（スティッキー）ヘッダーの視認性改善 Emanon 既定は bg `rgba(255,255,255,0.85)` + text `#f2f2f2`（ほぼ白）で 白 on 白になって見づらい。bg をオフクリーム寄りで不透明化、text は濃色に。 ============================================================= */ .l-header-menu-drop, .l-header-menu-fixed, .l-header-menu-drop-logo, .l-header-menu-fixed-logo { background-color: rgba(255, 251, 240, 0.95) !important; /* オフクリーム 95% */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* 微かに浮かせる */ } /* 固定ヘッダー内のメニューテキストは濃色に */ .l-header-menu-drop .header-menu > .menu-item > a, .l-header-menu-fixed .header-menu > .menu-item > a, .l-header-menu-drop-logo .header-menu > .menu-item > a, .l-header-menu-fixed-logo .header-menu > .menu-item > a { color: #564646 !important; /* 既存サイトの茶色系を踏襲 */ } /* 固定ヘッダー内のロゴ（site-logo__img-common）は明色デザインで 薄い背景だと見えないので CSS フィルタで暗反転 */ .l-header-menu-drop .site-logo__img-common, .l-header-menu-fixed .site-logo__img-common, .l-header-menu-drop-logo .site-logo__img-common, .l-header-menu-fixed-logo .site-logo__img-common, .l-header-menu-drop .site-logo__img, .l-header-menu-fixed .site-logo__img, .l-header-menu-drop-logo .site-logo__img, .l-header-menu-fixed-logo .site-logo__img { filter: invert(0.85) brightness(0.4); } .l-header-menu-drop .header-menu > .menu-item:hover > a, .l-header-menu-fixed .header-menu > .menu-item:hover > a, .l-header-menu-drop-logo .header-menu > .menu-item:hover > a, .l-header-menu-fixed-logo .header-menu > .menu-item:hover > a, .l-header-menu-drop .header-menu .current-menu-item:not(.u-smooth-scroll) > a, .l-header-menu-fixed .header-menu .current-menu-item:not(.u-smooth-scroll) > a, .l-header-menu-drop-logo .header-menu .current-menu-item:not(.u-smooth-scroll) > a, .l-header-menu-fixed-logo .header-menu .current-menu-item:not(.u-smooth-scroll) > a { color: #E07856 !important; /* hover/現在ページはコーラル（ブランド色） */ } /* ============================================================= Part F: スクロール時の固定ヘッダー被り防止 + sticky 目次の位置調整 固定ヘッダー高は 64px + 余白 → 80px を CSS 変数で一元管理。 - scroll-padding-top: アンカーリンクで飛んだ時、固定ヘッダー下に隠れないように - .sidebar-sticky の top: Emanon 既定は `top: 8px`、固定ヘッダー出現時だけ `.sticky-menu` で `top: 72px` になる想定だが JS タイミング or クラス付与漏れで 適用されない。80px 固定で確実に固定ヘッダー下に位置 admin-bar 表示時（ログイン中ユーザー = 先生・管理者の閲覧用）は、 WP コアが inline で `.admin-bar .sidebar-sticky { top: 30px }` を 出力する。我々の `.l-container .sidebar-sticky`（specificity 0,2,0） と同点なので後勝ちで WP のインライン (30px) が勝ってしまい、 先生がログイン中に voices ページを見ると sticky が固定ヘッダーに被る。 → admin-bar 専用に specificity 0,3,0 のルールを追加して確実に勝つ。 オフセットは admin-bar 高 32px + 固定ヘッダー余白 80px = 112px。 ============================================================= */ :root { --fixed-header-offset: 80px; --admin-bar-height: 32px; } html { scroll-padding-top: var(--fixed-header-offset); } .l-container .sidebar-sticky { top: var(--fixed-header-offset); } /* admin-bar 表示時の補正（specificity 0,3,0 で WP インライン 0,2,0 に勝つ）*/ .admin-bar .l-container .sidebar-sticky { top: calc(var(--fixed-header-offset) + var(--admin-bar-height)); } /* ============================================================= Part C: ボタン配色（プライマリ・セカンダリ・ディセーブル） ============================================================= */ /* ---- プライマリ（CF7 submit: 「確認」「送信」ボタン） ---- CF7 のデフォルトボタンはテーマ・ブラウザ依存でスタイルが付くため !important が安全 */ .l-content__main .wpcf7-submit, .l-content__main form.wpcf7-form input[type="submit"] { background: #E07856 !important; /* ベタ塗りオレンジ。マーカー風 linear-gradient はテキストには合うがボタンだと文字が読めなくなるため不採用 */ border: none !important; color: #ffffff !important; padding: 12px 36px !important; border-radius: 6px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 2px 4px rgba(224, 120, 86, 0.25); } .l-content__main .wpcf7-submit:hover, .l-content__main form.wpcf7-form input[type="submit"]:hover { background: #D06146 !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(224, 120, 86, 0.35); } /* ---- セカンダリ（Tel リンク + PDF ダウンロードリンク）---- Emanon button block はインライン CSS 変数 `--epb-button-bg-color` で色指定、!important 必須 対象を限定: tel: リンク、.pdf/.PDF リンク */ .l-content__main .epb-btn[href^="tel:"], .l-content__main .epb-btn[href$=".pdf"], .l-content__main .epb-btn[href$=".PDF"] { --epb-button-bg-color: #7DC6BC !important; /* inline custom property 上書き */ --epb-button-border-color: #6BB5AB !important; color: #ffffff !important; } .l-content__main .epb-btn[href^="tel:"]:hover, .l-content__main .epb-btn[href$=".pdf"]:hover, .l-content__main .epb-btn[href$=".PDF"]:hover { --epb-button-bg-color: #6BB5AB !important; } /* ---- ディセーブル系（ファイル選択ボタン） ---- */ .l-content__main input[type="file"]::-webkit-file-upload-button, .l-content__main input[type="file"]::file-selector-button { background: #E8E8E8 !important; /* ベタ塗りグレー。submit と同じ理由でマーカー風 linear-gradient は不採用 */ color: #555 !important; border: 1px solid #C5C5C5 !important; padding: 8px 16px !important; border-radius: 4px !important; cursor: pointer; margin-right: 8px; transition: all 0.2s ease; } .l-content__main input[type="file"]::-webkit-file-upload-button:hover, .l-content__main input[type="file"]::file-selector-button:hover { background: #D6D6D6 !important; } /* ============================================================= Part D: フォーム入力欄のフォーカス（コーラルリング） CF7/WP 既定の focus 色を上書きするため !important ============================================================= */ .l-content__main .wpcf7-form input[type="text"], .l-content__main .wpcf7-form input[type="email"], .l-content__main .wpcf7-form input[type="tel"], .l-content__main .wpcf7-form select, .l-content__main .wpcf7-form textarea { transition: border-color 0.25s ease, box-shadow 0.25s ease; } .l-content__main .wpcf7-form input[type="text"]:focus, .l-content__main .wpcf7-form input[type="email"]:focus, .l-content__main .wpcf7-form input[type="tel"]:focus, .l-content__main .wpcf7-form select:focus, .l-content__main .wpcf7-form textarea:focus { border-color: #E07856 !important; /* ブラウザ既定の focus 色上書き */ box-shadow: 0 0 0 3px rgba(224, 120, 86, 0.15) !important; outline: none !important; } /* ============================================================= Part G: 画像角丸 / アーカイブサムネ aspect-ratio 統一 方針: - 本文内画像 (wp-block-image / gallery / media-text) は控えめ 角丸 8px をグローバル適用、先生が編集画面で何も意識しなくても 全画像が角丸になる - Emanon Premium Blocks の image block style variation (is-style-rounded 6px / is-style-image__shadow--rounded 等) は `border-radius: 6px !important` で当たるので variation 選択時はそちら優先 - mask-image 系 variation (is-style-image__circle / balloon / fluid--01〜08) は mask 側で形が決まるため border-radius は無効、除外不要 - archive 一覧のサムネは aspect-ratio 16/9 + object-fit: cover で 縦横比を揃えて見栄えを統一、border-radius は Emanon の sp-list 既定 (`3px 0 0 3px` 左サムネ右テキスト前提) を !important で上書きして 全周 8px に揃える試行版 - 影は付けない (写真は影で重く見える、カードと違って軽さ優先) ============================================================= */ /* 本文内画像 (wp-block-image / gallery / media-text) */ .l-content__main .wp-block-image img, .l-content__main .wp-block-gallery .wp-block-image img, .l-content__main .wp-block-media-text__media img { border-radius: 8px; } /* archive / blog 一覧のサムネ (お知らせ一覧 / カテゴリページ等) */ .l-content__main .post-thumbnail img { border-radius: 8px !important; /* Emanon sp-list 既定 3px 0 0 3px に勝たせる */ aspect-ratio: 16 / 9; /* 縦横比統一 */ object-fit: cover; /* トリミング前提 */ width: 100%; height: auto; } /* ============================================================= Part H: 旧「テーブル盛りデフォルト」 廃止 (2026-05-14) かつて variation 未指定の素テーブル全体に「濃ミントヘッダー + 内側 grid + 外周 outline + 角丸」のグローバル装飾を当てていた (admission の 3 表 / about / supports 等で使用)。 Emanon 脱却プロジェクト (理想形ベース) で各ページのテーブルをページ固有 class or block style variation で装飾する方針に転換、グローバル「盛り」 ルールは詳細度争いの原因 (新規 page-id 別装飾と衝突) になるため一旦削除。 復元が必要な場合は git log を辿る (削除コミットの直前まで line 966-1039)。 再度装飾を持たせるテーブルは、ページ固有 class または register_block_style 経由の `is-style-seijuji-table-*` variation 化で対応する。 ============================================================= */ /* SP 対応は別タスクで議論してから実装する。 v3.4.3 で `@media (max-width: 600px)` + `overflow-x: auto` + `min-width: 600px` を独断追加したが、figure が画面幅を超えてページ全体が水平スクロール (ヘッダー メニュー等が画面外に押し出される) する重大な regression を起こしたため撤回。 横スクロールを入れるなら figure に `max-width: 100%` を明示し、wrapper レイアウトの影響範囲を user と合意してからにする。 */ /* ============================================================= Part K: about ページ - おむつセクション 装飾列 ページ固有の装飾要素 (花瓶 gif) を 70:30 の右側列に配置する。 `is-style-*` variation は作らず、ページ固有 className で扱う (テンプレ昇格対象外、designs/ には記録しない)。 ============================================================= */ /* 花瓶 gif を中央配置 + PC 時の最大幅 180px */ .l-content__main .omutsu-deco-column img { max-width: 180px; width: 100%; height: auto; display: block; margin: 0 auto; } /* SP では装飾要素を隠す (狭い画面で浮く問題回避) WP core/Emanon 親テーマの `.wp-block-column { display: flex }` が後勝ちで残るため !important で強制的に上書き */ @media (max-width: 768px) { .l-content__main .omutsu-deco-column { display: none !important; } } /* おむつ A/B コース columns: PC で box-shadow / border が隣接で重なって見える問題対応 テーマ由来で columns gap がゼロになってる場合があるので、明示的に 24px gap を入れる */ .l-content__main .seijuji-omutsu-courses { gap: 24px; } /* 中サイズ viewport (ノート狭画面、≤900px) では 1 列縦積み (=安全マージン) */ @media (max-width: 900px) { .l-content__main .seijuji-omutsu-courses { display: block; } .l-content__main .seijuji-omutsu-courses > .wp-block-column { width: 100% !important; flex-basis: 100% !important; margin-bottom: 16px; } .l-content__main .seijuji-omutsu-courses > .wp-block-column:last-child { margin-bottom: 0; } } /* ============================================================= Part O: is-style-seijuji-alert (注意喚起アラート段落) 重要な注意事項を視覚的に強調する段落 variation。 赤系 pill 風 + ⚠️ アイコン + 角丸 16px + 中身に合わせた幅 + 中央寄せ。 横断パターン (ページ別配色には依存しない、共通の注意色)。 ============================================================= */ .l-content__main p.is-style-seijuji-alert { display: flex; align-items: center; gap: 8px; width: fit-content; /* 中身の幅にフィット */ max-width: 100%; /* viewport 超過防止 */ margin: 1em auto; /* 中央寄せ */ background: #D9591F; /* 赤系 (警告色) */ color: #fff; padding: 10px 24px; border-radius: 16px; /* やや角丸 */ font-weight: 700; line-height: 1.5; box-shadow: 0 2px 6px rgba(217, 89, 31, 0.35); } .l-content__main p.is-style-seijuji-alert::before { content: "⚠️"; font-size: 1.1em; flex-shrink: 0; } /* alert 直後の段落との隙間を詰める。 テーマ由来で隣接 p の margin-top が 32px (= 2em) になり margin-collapse で広くなるため、 alert の直後だけ override で 1em に圧縮。段落間余白の全体調整は別 TODO。 */ .l-content__main p.is-style-seijuji-alert + p { margin-top: 1em; } /* ============================================================= Part P: is-style-seijuji-badge-list (番号バッジリスト) アルファベット番号付きの list 装飾。「A コース：東町〜」のような 「ラベル + 説明」の対応関係を、視覚的なバッジで強調する。 現状の用途: 園バスのコース (about ページ)。横断パターンに昇格可能。 ============================================================= */ .l-content__main ul.is-style-seijuji-badge-list { list-style: none; padding: 0; counter-reset: bus-route; } .l-content__main ul.is-style-seijuji-badge-list li { counter-increment: bus-route; padding: 6px 0 6px 86px; position: relative; line-height: 1.6; margin-bottom: 4px; } .l-content__main ul.is-style-seijuji-badge-list li::before { content: counter(bus-route, upper-alpha) " コース"; position: absolute; left: 0; top: 4px; background: #E8956E; color: #fff; padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 0.88em; line-height: 1.4; } /* ============================================================= Part Q: is-style-seijuji-box 内の image サイズ抑制 box 内に大きな写真を入れると主張が強くなりすぎる (PC で画像本来サイズ いっぱいに広がる) ため、box 内の image は max-width 500px に制限。 SP では親列幅にフィットするので自然なサイズ。 横断パターン: 「カードの中の写真」テンプレ。 ============================================================= */ .l-content__main .is-style-seijuji-box .wp-block-image { max-width: 500px; /* PC で写真を主張させすぎない */ margin-left: auto; margin-right: auto; } .l-content__main .is-style-seijuji-box .wp-block-image img { width: 100%; height: auto; border-radius: 8px; /* box の角丸 8px と統一感 */ } /* ============================================================= Part R: seijuji-gallery-mosaic (こひつじ 園庭活動写真 gallery、採用) 写真 10 枚を CSS Grid で大小ミックスのモザイク配置。 各写真にキャプション (figcaption) を画像下に表示。 1 枚目を 2x2、4 枚目を 1x2、7 枚目を 2x1 で目を惹くリズム。 関連 TODO (`@claudable`): - クリックでオーバーレイ拡大表示 - モザイク右下 1 枠分の余白に追加写真 (現状 10 枚で枠は不規則、余白配慮) ============================================================= */ .l-content__main .seijuji-gallery-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 8px; } .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image { margin: 0; position: relative; overflow: hidden; /* caption はみ出し防止 */ border-radius: 8px; } .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image:nth-child(1) { grid-column: span 2; grid-row: span 2; } .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image:nth-child(4) { grid-column: span 2; } .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image:nth-child(7) { grid-row: span 2; } .l-content__main .seijuji-gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; } /* キャプション: 画像下部に半透明黒オーバーレイで重ねる */ .l-content__main .seijuji-gallery-mosaic figcaption.wp-element-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); color: #fff; font-size: 0.78em; line-height: 1.3; font-weight: 600; text-align: left; pointer-events: none; } @media (max-width: 768px) { .l-content__main .seijuji-gallery-mosaic { grid-template-columns: repeat(2, 1fr); } .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image:nth-child(1), .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image:nth-child(4), .l-content__main .seijuji-gallery-mosaic > figure.wp-block-image:nth-child(7) { grid-column: auto; grid-row: auto; } } /* ============================================================= Part AC: こひつじ section 構造 (確定: B-A 縦並び + 丸画像) - こひつじの時間 / クラス活動の時間 を縦に並べる (B-A ベース) - 各サブセクションの装飾画像 (二人でおきがえ / いす) は 150px 円形 (B-B の丸画像流用) - 順序: H3 → 円形画像 → 説明 → 続きコンテンツ - PC / SP 共に円形画像表示 (SP 非表示にしない、可愛さ重視) ============================================================= */ .l-content__main .seijuji-circle-deco { width: 150px; height: 150px; margin: 16px auto; /* H3 と説明文の間に居心地よく */ border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #FFF4E5, #FFE0CC); box-shadow: 0 4px 12px rgba(232, 149, 110, 0.15); display: flex; align-items: center; justify-content: center; } .l-content__main .seijuji-circle-deco img { width: 80%; height: auto; object-fit: contain; display: block; } /* _test-about (id=3435) のアイキャッチ画像非表示 auto-post-thumbnail プラグインが本文最初の画像 (花瓶 gif) を自動で featured_media にセットし、Emanon の header-standard テンプレが `.article-header__thumbnail` で出力する。 本番 about (id=30) は同様に featured_media が設定されてるのに HTML 出力 されない (理由未解明、別 TODO)。テストページではこの不整合が表面化 するため、_test-about 限定で出力を CSS で抑止。 本番反映時 (本番 about への移植時) はこの CSS は不要になる見込み。 */ .article-header__thumbnail { display: none !important; } /* ============================================================= Part L: is-style-seijuji-box 内 h3 強調 box 内のタイトル h3 (Aコース / Bコース 等のラベル) を強調する。 box 内 h3 限定スコープ。色は page-id 別の base 色を流用 (override)。 テンプレ昇格対象: 「box 内見出し」という横断パターン ============================================================= */ .l-content__main .is-style-seijuji-box h3.wp-block-heading { font-size: 1.25em; /* 通常 h3 より一回り大きく、ラベル感を強める */ font-weight: 700; color: #564646; /* デフォルト = サイトの文字色 (page-id 別で上書き) */ border-bottom: 2px solid currentColor; /* h3 の色と連動した下線 */ padding-bottom: 6px; margin-top: 0; /* box 上端ピッタリ配置 */ margin-bottom: 16px; } /* about (id=30) と _test-about (id=3435): アプリコット */ body.page-id-30 .l-content__main .is-style-seijuji-box h3.wp-block-heading, .l-content__main .is-style-seijuji-box h3.wp-block-heading { color: #E8956E; }/* SP では装飾画像列は非表示 (画面狭くて浮く問題回避) */ /* SP: PC の 50:50 → 縦積み (gap は core/columns デフォで縦間に変わる) */ /* SP: タブを縦積み (core/columns の SP デフォと協調) */ /* SP: パディング縮小、画像非表示 */ /* SP: 装飾過多のままだと窮屈、サイズ縮小 */ /* ============================================================= 案 H-B: 曜日別アコーディオン 核 core/details (T10) を 4 連続並べる group。details 同士の 隙間を視認しやすく 12px 開け、open 時に summary を アプリコットに寄せる。 ============================================================= */ .l-content__main .houkago-accordion-group > .wp-block-details { margin-top: 12px; /* details 間に隙間 */ } .l-content__main .houkago-accordion-group > .wp-block-details:first-child { margin-top: 0; /* 先頭だけ詰める */ } /* open 時の summary にアプリコット下線、視認性アップ */ .l-content__main .houkago-accordion-group .wp-block-details[open] > summary { border-bottom: 2px solid #E8956E; color: #7A4A2A; } /* ============================================================= 案 H-C: ジャンル別 3 カード並列 `houkago-genre-cards` columns 内の各 box は core/columns の デフォルト均等分配 + Part L で h3 ラベル装飾が当たる。 PC 3 列 / SP 1 列 (core/columns デフォルトで折り返す)。 ============================================================= */ /* カード間 gap を core デフォルトから少し詰める (3 列で広いと間延びする) */ .l-content__main .houkago-genre-cards.wp-block-columns { gap: 16px; } /* カード内テーブルは Part H 装飾を活かしつつ、box 内なので 外周 shadow は不要 (box 側に shadow がある) */ .l-content__main .houkago-genre-cards .is-style-seijuji-box .wp-block-table { box-shadow: none; margin-top: 8px; } /* ============================================================= 案 H-D: 全件 1 表 + 行ホバー `houkago-table-hover` クラスを figure に付与すると tbody の tr ホバーで薄いアプリコット背景。Part H の素テーブル装飾 が前提 (素テーブルにオプトインで hover を足す)。 ============================================================= */ .l-content__main .houkago-table-hover tbody tr { transition: background-color 0.2s ease; } .l-content__main .houkago-table-hover tbody tr:hover { background-color: #FFF4E5; /* 薄ピーチ (alert と同色、横断感) */ } /* ============================================================= 案 H-E: 9 枚タイル (3×3 グリッド) `houkago-tile-grid` を CSS Grid で PC 3 列 / タブレット 2 列 / SP 1 列。各 tile は `is-style-seijuji-box` の上に縦積み 3 段組 (名称・曜日時刻・場所) を構成する。 ============================================================= */ .l-content__main .houkago-tile-grid.wp-block-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } @media (max-width: 1024px) { .l-content__main .houkago-tile-grid.wp-block-group { grid-template-columns: repeat(2, 1fr); /* タブレット 2 列 */ } } @media (max-width: 600px) { .l-content__main .houkago-tile-grid.wp-block-group { grid-template-columns: 1fr; /* SP 1 列 */ } } /* tile 内の段組 (名称・曜日時刻・場所) のサイズ感 */ .l-content__main .houkago-tile { display: flex; flex-direction: column; gap: 4px; } .l-content__main .houkago-tile .houkago-tile__name { font-size: 1.1em; font-weight: 700; color: #564646; margin: 0; line-height: 1.4; } .l-content__main .houkago-tile .houkago-tile__when { font-size: 0.95em; color: #E8956E; /* アプリコット強調 */ font-weight: 600; margin: 0; } .l-content__main .houkago-tile .houkago-tile__where { font-size: 0.85em; color: #888; /* 場所はサブ情報、グレー */ margin: 0; } /* tile hover で軽く浮き上がり、tile であることを示唆 */ .l-content__main .houkago-tile { transition: transform 0.2s ease, box-shadow 0.2s ease; } .l-content__main .houkago-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10); } /* ============================================================= 案 H-F: 派手案 (グラデーション + カラフル + アニメーション) 他案と明確に違うテイスト。 - hero: アプリコット → ピンク → ミントの 3 色グラデ背景、 paragraph はネオン白文字 + text-shadow - grid: 9 カードを PC 3×3、各カードに 9 色違いの pastel グラデ背景 + ホバーで回転 + 上下 floating アニメ ============================================================= */ /* ---- hero (説明文 + 装飾画像) ---- */ .l-content__main .houkago-flashy-hero.wp-block-group { background: linear-gradient(135deg, #FFD9C0 0%, #FBC2EB 50%, #A6E3D7 100%); border-radius: 24px; padding: 32px; margin: 24px 0; box-shadow: 0 8px 24px rgba(232, 149, 110, 0.25); position: relative; overflow: hidden; } /* hero 背景にゆらゆら動く装飾 (擬似要素で円を float) */ .l-content__main .houkago-flashy-hero.wp-block-group::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%); border-radius: 50%; animation: houkago-flashy-float 6s ease-in-out infinite; pointer-events: none; } .l-content__main .houkago-flashy-hero.wp-block-group::after { content: ""; position: absolute; bottom: -30px; left: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%); border-radius: 50%; animation: houkago-flashy-float 8s ease-in-out 1.5s infinite reverse; pointer-events: none; } @keyframes houkago-flashy-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10px, -15px) scale(1.1); } } /* hero lead テキスト: 白 + ネオン風 text-shadow */ .l-content__main .houkago-flashy-lead { color: #FFFFFF; font-size: 1.05em; font-weight: 700; line-height: 1.8; text-shadow: 0 0 4px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(232, 149, 110, 0.4), 0 0 0 transparent; margin: 0; position: relative; z-index: 1; } /* hero 内の装飾画像 (むしをかんさつ.png) は ふわふわ揺れる */ .l-content__main .houkago-flashy-deco img { max-width: 220px; width: 100%; height: auto; display: block; margin: 0 auto; animation: houkago-flashy-bob 3.5s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(232, 149, 110, 0.35)); position: relative; z-index: 1; } @keyframes houkago-flashy-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } } @media (max-width: 768px) { .l-content__main .houkago-flashy-deco { display: block !important; /* 派手案では SP も表示 (主役) */ } .l-content__main .houkago-flashy-deco img { max-width: 160px; } } /* ---- grid (9 カード) ---- */ .l-content__main .houkago-flashy-grid.wp-block-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; } @media (max-width: 1024px) { .l-content__main .houkago-flashy-grid.wp-block-group { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .l-content__main .houkago-flashy-grid.wp-block-group { grid-template-columns: 1fr; } } /* カード共通 (色は flashy-c1〜c9 で個別) */ .l-content__main .houkago-flashy-card { border-radius: 20px; padding: 20px; color: #FFFFFF; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.35s ease; position: relative; overflow: hidden; } /* カード hover でわずかに浮き + 微回転 */ .l-content__main .houkago-flashy-card:hover { transform: translateY(-6px) rotate(-1deg) scale(1.02); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } /* カード内の擬似 sparkle */ .l-content__main .houkago-flashy-card::before { content: ""; position: absolute; top: -20px; right: -20px; width: 70px; height: 70px; background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* カード内テキスト */ .l-content__main .houkago-flashy-name { font-size: 1.05em; font-weight: 800; margin: 0; line-height: 1.4; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .l-content__main .houkago-flashy-when { font-size: 0.92em; margin: 0; font-weight: 600; opacity: 0.95; } .l-content__main .houkago-flashy-where { font-size: 0.85em; margin: 0; font-weight: 500; opacity: 0.9; padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, 0.5); } /* ---- 9 色グラデ (1 つずつ別配色、楽しさを出す) ---- */ .l-content__main .houkago-flashy-card.flashy-c1 { background: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 100%); /* coral */ } .l-content__main .houkago-flashy-card.flashy-c2 { background: linear-gradient(135deg, #FBC2EB 0%, #A18CD1 100%); /* pink-violet */ } .l-content__main .houkago-flashy-card.flashy-c3 { background: linear-gradient(135deg, #84FAB0 0%, #8FD3F4 100%); /* mint-cyan */ } .l-content__main .houkago-flashy-card.flashy-c4 { background: linear-gradient(135deg, #A6C0FE 0%, #F68084 100%); /* periwinkle-coral */ } .l-content__main .houkago-flashy-card.flashy-c5 { background: linear-gradient(135deg, #FDCB6E 0%, #E17055 100%); /* tangerine */ } .l-content__main .houkago-flashy-card.flashy-c6 { background: linear-gradient(135deg, #B721FF 0%, #21D4FD 100%); /* purple-cyan */ } .l-content__main .houkago-flashy-card.flashy-c7 { background: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%); /* green-teal */ } .l-content__main .houkago-flashy-card.flashy-c8 { background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%); /* sky-aqua (水泳らしさ) */ } .l-content__main .houkago-flashy-card.flashy-c9 { background: linear-gradient(135deg, #FA709A 0%, #FEE140 100%); /* pink-yellow (アトリエらしさ) */ } /* prefers-reduced-motion 対応 — アニメ過敏な user を保護 */ @media (prefers-reduced-motion: reduce) { .l-content__main .houkago-flashy-hero.wp-block-group::before, .l-content__main .houkago-flashy-hero.wp-block-group::after, .l-content__main .houkago-flashy-deco img { animation: none; } .l-content__main .houkago-flashy-card, .l-content__main .houkago-flashy-card:hover { transition: none; transform: none; } .l-content__main .houkago-tile { transition: none; } .l-content__main .houkago-tile:hover { transform: none; } }/* アコーディオン群: details を縦並びで隙間 8px、Part I の details 装飾を受け継ぐ */ .l-content__main .cost-accordion-list { margin-top: 1em; } .l-content__main .cost-accordion-list .wp-block-details { margin-bottom: 8px; } /* アコーディオン summary をアプリコット系に上書き (Part I の青デフォルトから) */ .l-content__main .cost-accordion-list .wp-block-details > summary { background: #FFE8D6; color: #564646; font-weight: 700; } .l-content__main .cost-accordion-list .wp-block-details[open] > summary { background: #FFD9C0; }/* 2 列カードグリッド: core/columns の上に重ねて gap を整える */ .l-content__main .cost-card-grid { margin-top: 12px; margin-bottom: 12px; } .l-content__main .cost-card-grid .wp-block-column { margin-bottom: 0; /* columns デフォルトの mb をリセット */ } /* cost-card は is-style-seijuji-box を継承、左ボーダーでアクセント */ .l-content__main .is-style-seijuji-box.cost-card { border-left: 4px solid #E8956E; padding: 18px 20px; margin: 0; /* 親 column 側で間隔制御 */ height: 100%; /* 同行カードの高さ揃え */ } .l-content__main .cost-card .cost-card__title { margin: 0 0 8px; font-weight: 700; color: #C76A3E; font-size: 1.05em; letter-spacing: 0.04em; } .l-content__main .cost-card p { margin: 0.5em 0 0; line-height: 1.7; } /* C-C 内の教育活動費の経緯 details はカード内で控えめに */ .l-content__main .cost-card .wp-block-details { margin-top: 10px; border: 1px solid #FFD9C0; background: #FFF8EE; } .l-content__main .cost-card .wp-block-details > summary { background: #FFF0E0; color: #C76A3E; font-size: 0.9em; padding: 8px 36px 8px 12px; }/* ---------------------------------------------------------------- 案 J-E: ハブ&スポーク風 (時間表中央 + 講師左右配置) - PC: 3 columns (左 spoke / 中央 ハブ / 右 spoke)、講師は 2-3 分割。 - SP: 縦積み (ハブ → 左 spoke → 右 spoke)。 ---------------------------------------------------------------- */ .l-content__main .seijuji-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* PC: 2 列 grid (5 spoke が 2x3 配置、5 番目は左下に単独) */ gap: 14px; margin: 2em 0; } /* .seijuji-card-grid__left / __right を「透過」して、子の spoke を直接 grid item に */ .l-content__main .seijuji-card-grid__left, .l-content__main .seijuji-card-grid__right { display: contents; } /* 接続点 ::after は grid 配置では意味がないので常時非表示 */ .l-content__main .seijuji-card-grid__left .seijuji-card-grid__card::after, .l-content__main .seijuji-card-grid__right .seijuji-card-grid__card::after { display: none; } /* SP では 1 列 */ @media (max-width: 480px) { .l-content__main .seijuji-card-grid { grid-template-columns: 1fr; } } /* 時間表ハブ (現状: .seijuji-card-grid の外で単独配置、講師リストの上に独立して表示) 枠線 + ラベル + shadow でラップした「時間表」コンテナ */ .l-content__main .seijuji-info-frame { background: #FFFAF5; border: 2px solid #E8956E; /* 強調枠 */ border-radius: 12px; padding: 16px; box-shadow: 0 6px 18px rgba(232, 149, 110, 0.2); text-align: center; position: relative; max-width: 700px; /* 単独配置時の幅制限 */ margin: 1.5em auto; /* 中央寄せ + 上下余白 */ } .l-content__main .seijuji-info-frame__label { color: #E8956E; font-weight: 700; letter-spacing: 0.06em; font-size: 0.92em; margin-bottom: 10px; } .l-content__main .seijuji-info-frame__img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); } /* spoke 群 (左右の講師ボックス) */ .l-content__main .seijuji-card-grid__left, .l-content__main .seijuji-card-grid__right { display: flex; flex-direction: column; gap: 14px; } .l-content__main .seijuji-card-grid__card { background: #fff; border: 1px solid #F5D9C5; border-radius: 10px; padding: 12px 14px; box-shadow: 0 2px 6px rgba(86, 70, 70, 0.06); position: relative; } /* spoke の中央側に小さな丸 = ハブとつながる「接続点」 */ .l-content__main .seijuji-card-grid__left .seijuji-card-grid__card::after { content: ""; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: #E8956E; box-shadow: 0 0 0 3px #FFF4E5; } .l-content__main .seijuji-card-grid__right .seijuji-card-grid__card::after { content: ""; position: absolute; top: 50%; left: -8px; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: #E8956E; box-shadow: 0 0 0 3px #FFF4E5; } .l-content__main .seijuji-card-grid__title { font-weight: 700; color: #E8956E; font-size: 1em; margin-bottom: 4px; } .l-content__main .seijuji-card-grid__desc { color: #564646; font-size: 0.88em; line-height: 1.55; } /* ============================================================= Part AD: _test-about (id=3435) 放課後のプログラム タイトル付け方 5 案 H-E (9 枚タイル 3×3 grid) 採用後の「タイトルをどう付けるか」を 検討する 5 案 (N-A〜N-E)。tmp/agent-houkago-titles/content.raw に対応する局所装飾。 採用案が決まったら、必要な部分だけ design-refactor.css へ 昇格させ、この Part AD は破棄する想定 (検討専用)。 案ラベル: - 案 N-A: タイル内分割表示 (カテゴリ名 大 + 対象年齢 小) - 案 N-B: カテゴリでグループ化 (カテゴリ h4 + 配下タイル群) - 案 N-C: アコーディオン (カテゴリごと core/details で折りたたみ) - 案 N-D: アイコン付きカテゴリタイル (Font Awesome、カテゴリ別アイコン) - 案 N-E: カラーフレーム (カテゴリ別の左ボーダー色) 配色: page-id-3435 はアプリコット系を継承 (#E8956E / #FFD9C0)。 SP 余白: 全案で PC padding 20px / gap 16px → SP padding 12px / gap 8px の方針で統一 (user 指摘「カードの余白が広すぎる」対応)。 ============================================================= */ /* ------------------------------------------------------------- 共通: 装飾画像列 (むしをかんさつ.png) — seijuji-deco-column tmp/agent-houkago/style.css と重複するが、独立検証できるよう こちらにも同等定義を置く。採用後にどちらか一方を残す。 ------------------------------------------------------------- */ .l-content__main .seijuji-deco-column img { max-width: 200px; /* むしをかんさつ.png は本番でも 200px */ width: 100%; height: auto; display: block; margin: 0 auto; } @media (max-width: 768px) { .l-content__main .seijuji-deco-column { display: none !important; /* 狭画面で浮くため非表示 */ } }/* ============================================================= 案 N-B: カテゴリでグループ化 (カテゴリ h4 + 配下タイル群) seijuji-category-group > seijuji-category-section (×6) の構成。 各 section は「h4 カテゴリ名 + seijuji-category-grid (タイル 1〜3 枚)」。 バルシューレ・ECC は複数タイル並列、他は 1 タイル。 ============================================================= */ .l-content__main .seijuji-category-group.wp-block-group { display: flex; flex-direction: column; gap: 24px; /* セクション間に余白 */ margin-top: 24px; } @media (max-width: 600px) { .l-content__main .seijuji-category-group.wp-block-group { gap: 10px; /* SP は section 間を詰める (user フィードバック) */ } } /* カテゴリ section: 区切りは h4 のみ、外枠なし 親 group が flex column のため、is-layout-constrained 由来の max-width: 768px + margin: auto が flex item として効いて中央寄せ + 細幅化する。width:100% / max-width:none / margin:0 で打ち消す。 */ .l-content__main .seijuji-category-section.wp-block-group { padding: 0; width: 100%; max-width: none; margin-left: 0; margin-right: 0; } /* h4 カテゴリ見出し: アプリコット下線 + 左にアクセントバー */ .l-content__main .seijuji-category-heading.wp-block-heading { font-size: 1.15em; font-weight: 700; color: #564646; padding: 4px 0 6px 14px; /* 左にバー分の余白 */ border-left: 4px solid #E8956E; /* アプリコット縦バー */ border-bottom: 1px dashed #E8B58F; /* 薄アプリコット破線 */ margin: 0 0 12px; /* 配下グリッドまでの間隔 */ } @media (max-width: 600px) { .l-content__main .seijuji-category-heading.wp-block-heading { font-size: 1.05em; padding-left: 10px; margin-bottom: 8px; } } /* 配下グリッド: タイル数に応じて 1〜3 列、SP で 1 列 */ .l-content__main .seijuji-category-grid.wp-block-group { display: grid; grid-template-columns: repeat(3, 1fr); /* 最大 3 列 (ECC 用) */ gap: 12px; } @media (max-width: 1024px) { .l-content__main .seijuji-category-grid.wp-block-group { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .l-content__main .seijuji-category-grid.wp-block-group { grid-template-columns: 1fr; gap: 4px; /* SP 縦積み時のタイル間余白詰める (user フィードバック) */ } } /* タイル: 対象年齢を一番上に強調 (カテゴリは外側 h4 が担当) grid item として grid cell いっぱいに広がるよう、constrained 由来の max-width: 768px + margin: auto を打ち消す。 */ .l-content__main .seijuji-category-tile.wp-block-group { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; width: 100%; max-width: none; margin-left: 0; margin-right: 0; } @media (max-width: 600px) { .l-content__main .seijuji-category-tile.wp-block-group { padding: 12px 14px; /* SP 余白詰める */ gap: 2px; } } /* 対象年齢: タイル内の主見出し的扱い (カテゴリは外で表示済み) */ .l-content__main .seijuji-category-tile .seijuji-category-tile__age { font-size: 1.05em; font-weight: 700; color: #564646; margin: 0; line-height: 1.4; } .l-content__main .seijuji-category-tile .seijuji-category-tile__when { font-size: 0.95em; color: #E8956E; font-weight: 600; margin: 0; } .l-content__main .seijuji-category-tile .seijuji-category-tile__where { font-size: 0.85em; margin: 0; }/* ============================================================= prefers-reduced-motion: アニメ過敏な user 保護 全案で hover transform を一律無効化。 ============================================================= */ /* SP: 3 列を縦積みに、padding を縮める */ /* SP: padding を縮める */ /* SP: 1 列化 + padding 縮小 */ /* ================================================ 案 P-D: アイコン + 金額強調カード (2 列グリッド) 各項目に SVG アイコン + ラベル + 金額 (太字数値強調) + 説明。 ================================================ */ /* 無料カード: アイコン (¥ 記号) を左に置く */ .l-content__main .cost-pd-free p { display: flex; align-items: center; gap: 12px; margin: 0; } .l-content__main .cost-pd-free__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #FFD9C0; /* アプリコット淡 */ color: #C76A3E; font-size: 1.4em; font-weight: 700; } /* グリッド本体 */ .l-content__main .seijuji-icon-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC: 2 列 */ gap: 16px; margin: 0.6em 0 1.2em; } /* カード */ .l-content__main .seijuji-icon-card { background: #FFFFFF; border: 1px solid #F5D9C5; border-radius: 10px; padding: 18px 20px 20px; transition: transform .2s ease, box-shadow .2s ease; } /* hover で軽く浮かせる (PC のみ実用、SP は不要なので media 非限定で OK) */ .l-content__main .seijuji-icon-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(86, 70, 70, 0.08); } /* アイコン円 */ .l-content__main .seijuji-icon-card__icon { width: 48px; height: 48px; margin: 0 0 10px; display: inline-flex; align-items: center; justify-content: center; background: #FFF4E5; /* 薄ピーチ */ border-radius: 50%; color: #C76A3E; /* SVG stroke="currentColor" */ } .l-content__main .seijuji-icon-card__label { margin: 0 0 4px; font-weight: 700; color: #564646; font-size: 1.02em; } /* 金額: 数値だけ巨大に */ .l-content__main .seijuji-icon-card__amount { margin: 0 0 8px; color: #564646; font-size: 0.95em; line-height: 1.3; } .l-content__main .seijuji-icon-card__amount strong { color: #C76A3E; font-size: 1.8em; /* 数字だけ巨大 */ font-weight: 800; letter-spacing: 0.02em; margin: 0 0.1em; } .l-content__main .seijuji-icon-card__sub { font-size: 0.9em; color: #8a7a7a; /* 副情報はトーンダウン */ } .l-content__main .seijuji-icon-card__amount--variable { color: #C76A3E; font-size: 1.05em; font-weight: 700; } .l-content__main .seijuji-icon-card__desc { margin: 0; color: #564646; font-size: 0.9em; line-height: 1.65; } /* カード内 details (教育活動費の長文) */ .l-content__main .seijuji-icon-card__more { margin: 4px 0 0; border-top: 1px dashed rgba(232, 149, 110, 0.35); padding-top: 6px; } .l-content__main .seijuji-icon-card__more > summary { cursor: pointer; color: #C76A3E; font-size: 0.88em; list-style: none; padding-left: 16px; position: relative; } .l-content__main .seijuji-icon-card__more > summary::-webkit-details-marker { display: none; } .l-content__main .seijuji-icon-card__more > summary::before { content: "＋"; position: absolute; left: 0; top: 0; color: #E8956E; font-weight: 700; } .l-content__main .seijuji-icon-card__more[open] > summary::before { content: "−"; } .l-content__main .seijuji-icon-card__more > p { margin: 6px 0 0; font-size: 0.85em; color: #564646; line-height: 1.7; } /* SP: 1 列化 + padding 縮小 */ @media (max-width: 768px) { .l-content__main .seijuji-icon-card-grid { grid-template-columns: 1fr; /* 1 列 */ gap: 10px; } .l-content__main .seijuji-icon-card { padding: 14px 14px 16px; } .l-content__main .seijuji-icon-card__icon { width: 40px; height: 40px; } .l-content__main .seijuji-icon-card__amount strong { font-size: 1.5em; /* 巨大数字を控えめに */ } .l-content__main .cost-pd-free p { gap: 8px; } .l-content__main .cost-pd-free__icon { width: 32px; height: 32px; flex: 0 0 32px; font-size: 1.1em; } }/* SP: 2 列 → 1 列、padding/gap 縮小 */ /* ============================================================ supports セクション 1「参加人数について」クラス一覧カード + 更新日バッジ PC: 3 列カードグリッド / SP: core/columns 自動 stack で 1 列縦カード ※ supports 専用、最終的にテンプレ昇格 (T??) 検討 ============================================================ */ /* 更新日表示 (右寄せ inline、page-id-33 ピンクアクセント、「更新日：YYYY/MM/DD」全体に下線) 構造: group:flex + paragraph 「更新日：」 + post-date 動的バインド group 自体を width:fit-content で縮ませ、margin-right:0 + margin-left:auto で右寄せ ※ margin: auto !important は is-layout-constrained の自動生成ルールが当たるため 明示的に !important で margin-right:0 を勝たせる必要あり (about 時の罠の派生) */ .l-content__main .seijuji-update-date { align-items: baseline; gap: 4px; margin-top: 0.5em !important; margin-bottom: 0.5em !important; margin-right: 0 !important; /* constrained の auto !important を打ち消し */ margin-left: auto !important; /* 右寄せ */ width: fit-content; border-bottom: 3px solid #E48CA8; /* 下線太め */ padding-bottom: 2px; color: #C66C8C; font-weight: 600; } .l-content__main .seijuji-update-date p { margin: 0; color: #C66C8C; } .l-content__main .seijuji-update-date .wp-block-post-date { margin: 0; color: #C66C8C !important; font-size: inherit !important; /* paragraph と同サイズ */ } .l-content__main .seijuji-update-date .wp-block-post-date a { color: #C66C8C !important; text-decoration: none; } .l-content__main .seijuji-class-cards { margin: 1em auto; gap: 16px; max-width: 900px; /* PC で広がりすぎ防止 */ } .l-content__main .seijuji-class-cards .seijuji-class-card { background: #FFF8FA; border: 1.5px solid #E48CA8; /* page-id-33 アクセントピンク枠 */ border-radius: 12px; padding: 18px 16px; text-align: center; box-shadow: 0 1px 3px rgba(228, 140, 168, 0.15); } .l-content__main .seijuji-class-cards .seijuji-class-card a { color: #C66C8C; /* アクセント濃いめ */ font-weight: 700; text-decoration: none; } .l-content__main .seijuji-class-cards .seijuji-class-card a:hover { text-decoration: underline; } .l-content__main .seijuji-class-cards .seijuji-class-card p { margin: 6px 0; line-height: 1.5; } .l-content__main .seijuji-class-cards .seijuji-class-card p:first-child { font-size: 1.05em; /* タイトル行少し大きく */ } /* SP: 縦カードらしく左寄せ + max-width 抑え */ @media (max-width: 768px) { .l-content__main .seijuji-class-cards { max-width: 480px; gap: 12px; } .l-content__main .seijuji-class-cards .seijuji-class-card { text-align: left; padding: 16px 18px; } } /* ============================================================ セクション 2 (親子あかちゃん広場) 説明 背景ブロック 今後の各セクション説明文も同じ class で共通化予定 ============================================================ */ .l-content__main .seijuji-section-desc { background: #FFF8FA; border-radius: 10px; padding: 16px 20px; margin: 1em 0; border: 1px solid #F4D4E0; } .l-content__main .seijuji-section-desc p { margin: 0.5em 0; } .l-content__main .seijuji-section-desc p:first-child { margin-top: 0; } .l-content__main .seijuji-section-desc p:last-child { margin-bottom: 0; } /* ============================================================ セクション概要 (項目 + 値の縦並びカード、左ピンクバー) PC: ラベル inline-block 幅 80px + 値が右に並ぶ SP: strong を block 化 → ラベル 1 行目、値 2 行目から ※ supports セクション 2 で初採用、今後 他セクションでも流用予定 ============================================================ */ .l-content__main .seijuji-summary { margin: 1em 0; } .l-content__main .seijuji-summary p { background: #FFF8FA; border-left: 4px solid #E48CA8; border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 0 0 8px 0 !important; line-height: 1.6; } .l-content__main .seijuji-summary p:last-child { margin-bottom: 0 !important; } .l-content__main .seijuji-summary p strong { color: #C66C8C; margin-right: 10px; display: inline-block; min-width: 80px; } /* SP: strong を block 化 (ラベル 1 行目、値 2 行目から、改行ヘンな所で起きないよう) */ @media (max-width: 768px) { .l-content__main .seijuji-summary p strong { display: block; margin-right: 0; margin-bottom: 4px; min-width: 0; } } /* 文中インラインアラートアイコン (Emanon `u-inline-icon icon-alert-triangle` の置き換え) 注意書きの頭に Font Awesome 警告三角 (色 #dc3545 赤) を付ける */ .l-content__main .seijuji-inline-alert { color: #dc3545; margin-right: 6px; font-size: 0.95em; } /* ============================================================ セクション anchor (不可視 div、ID 受け取り専用) `` 用 固定ヘッダ分の scroll offset を確保 ============================================================ */ .l-content__main .seijuji-anchor { scroll-margin-top: 80px; } /* ============================================================ セクション 3 (もこもこ広場) 1 日の流れ (T27 seijuji-timeline-d) PC: Grid 2 列 (左 5 行カード + 右 砂遊び画像 縦長スパン) SP: 1 列縦、画像非表示 ※ 2026-05-15 azuke クリーンアップで誤削除 → 復活 ============================================================ */ .l-content__main .seijuji-timeline-d { display: grid !important; grid-template-columns: 1fr 300px; gap: 12px 16px; margin: 1em 0; } .l-content__main .seijuji-timeline-d > p { background: #FFF8FA; border-radius: 10px; padding: 12px 16px; margin: 0 !important; display: flex; align-items: flex-start; gap: 14px; line-height: 1.6; } .l-content__main .seijuji-timeline-d > p > i:first-child { color: #E48CA8; font-size: 1.4em; flex: 0 0 28px; text-align: center; margin-top: 2px; } .l-content__main .seijuji-timeline-d > p strong { color: #C66C8C; display: block; margin-bottom: 2px; font-size: 1.05em; } .l-content__main .seijuji-timeline-d > .wp-block-image { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: stretch; } .l-content__main .seijuji-timeline-d > .wp-block-image img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 768px) { .l-content__main .seijuji-timeline-d { grid-template-columns: 1fr; } .l-content__main .seijuji-timeline-d > .wp-block-image { display: none; } } /* ============================================================ こども誰でも通園制度 (#azuke) セクション 案 2 のリボン/CTA + 案 5 のカード のハイブリッド (採用版集約) ============================================================ */ /* --- キャッチコピーリボン (ポスター上部の「はじめました!」感) --- */ .l-content__main .seijuji-pr-ribbon { background: linear-gradient(135deg, #FFF8FA 0%, #FCE0EA 100%); border: 3px dashed #E48CA8; border-radius: 24px; padding: 28px 24px; text-align: center; margin: 24px auto 32px; max-width: 760px; box-shadow: 0 4px 16px rgba(228, 140, 168, 0.18); } .l-content__main .seijuji-pr-ribbon__lead { display: inline-block; background: #C66C8C; color: #fff; font-size: 0.85em; font-weight: 700; border-radius: 100px; padding: 4px 16px; margin-bottom: 12px; letter-spacing: 0.08em; } .l-content__main .seijuji-pr-ribbon__catch { display: block; font-size: 1.6em; font-weight: 800; color: #564646; line-height: 1.4; letter-spacing: 0.04em; } .l-content__main .seijuji-pr-ribbon__catch--accent { display: inline-block; color: #C66C8C; background: linear-gradient(transparent 60%, #FFD9E5 60%); padding: 0 8px; font-size: 1.1em; } @media (max-width: 600px) { .l-content__main .seijuji-pr-ribbon { padding: 20px 16px; border-radius: 18px; } .l-content__main .seijuji-pr-ribbon__catch { font-size: 1.3em; } } /* --- 3 カード grid (対象 / ご利用時間 / お申込み) PC 3 列 / SP 1 列 --- */ .l-content__main .seijuji-feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 24px; } @media (max-width: 768px) { .l-content__main .seijuji-feature-cards { grid-template-columns: 1fr; gap: 16px; } } .l-content__main .seijuji-feature-card { position: relative; padding: 32px 20px 20px; background: linear-gradient(180deg, #ffffff 0%, #FFF8FA 100%); border: 2px solid #FFD9E2; border-radius: 16px; box-shadow: 0 6px 18px rgba(228, 140, 168, 0.15); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .l-content__main .seijuji-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(228, 140, 168, 0.28); } /* 装飾丸 (順序ではない、レジェンド的に使う、左右中央配置) */ .l-content__main .seijuji-feature-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; background: linear-gradient(135deg, #E48CA8 0%, #C66C8C 100%); border-radius: 50%; box-shadow: 0 3px 8px rgba(198, 108, 140, 0.4); } .l-content__main .seijuji-feature-card__icon { margin: 0 0 12px; font-size: 36px; color: #E48CA8; line-height: 1; } .l-content__main .seijuji-feature-card__label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #C66C8C; letter-spacing: 0.15em; text-transform: uppercase; } .l-content__main .seijuji-feature-card__value { margin: 0 0 12px; font-weight: 700; color: #564646; line-height: 1.2; } .l-content__main .seijuji-feature-card__big { font-size: 40px; font-weight: 800; color: #C66C8C; letter-spacing: 0.02em; } .l-content__main .seijuji-feature-card__unit { font-size: 16px; font-weight: 700; color: #564646; margin-left: 4px; } .l-content__main .seijuji-feature-card__sep { font-size: 28px; margin: 0 2px; color: #C66C8C; } .l-content__main .seijuji-feature-card__note { margin: 0; font-size: 12px; color: #7a6464; line-height: 1.6; } .l-content__main .seijuji-feature-card__days { display: flex; justify-content: center; gap: 8px; margin: 0 0 10px; } .l-content__main .seijuji-feature-card__day { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, #E48CA8 0%, #C66C8C 100%); color: #fff; font-size: 16px; font-weight: 800; border-radius: 50%; box-shadow: 0 3px 8px rgba(198, 108, 140, 0.35); } .l-content__main .seijuji-feature-card__pills { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; } .l-content__main .seijuji-feature-card__pill { display: inline-block; padding: 6px 14px; background: #fff; color: #C66C8C; border: 2px solid #E48CA8; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; } /* --- 大型 CTA ボタン (岩見沢市 HP へ誘導) --- */ .l-content__main .seijuji-cta-large { text-align: center; margin: 36px auto; max-width: 600px; } .l-content__main .seijuji-cta-large__btn { display: inline-grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 16px; row-gap: 2px; background: linear-gradient(135deg, #E48CA8 0%, #C66C8C 100%); color: #fff !important; padding: 20px 32px; border-radius: 16px; font-weight: 700; text-decoration: none !important; box-shadow: 0 6px 20px rgba(198, 108, 140, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; } .l-content__main .seijuji-cta-large__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(198, 108, 140, 0.5); } .l-content__main .seijuji-cta-large__btn-icon { grid-column: 1; grid-row: 1 / span 2; font-size: 1.8em; display: flex; align-items: center; justify-content: center; } .l-content__main .seijuji-cta-large__btn-main { grid-column: 2; grid-row: 1; font-size: 1.25em; text-align: left; letter-spacing: 0.04em; } .l-content__main .seijuji-cta-large__btn-sub { grid-column: 2; grid-row: 2; font-size: 0.85em; text-align: left; opacity: 0.92; } @media (max-width: 600px) { .l-content__main .seijuji-cta-large__btn { display: grid; width: 100%; padding: 18px 20px; } .l-content__main .seijuji-cta-large__btn-main { font-size: 1.1em; } } .l-content__main .seijuji-cta-large__hint { font-size: 0.85em; color: #6b5a5a; margin-top: 12px; line-height: 1.6; } /* ============================================================ T7 暫定: テーブル「盛りデフォルト」variation (is-style-seijuji-table-default) 2026-05-14 に廃止した旧 Part H グローバル table 装飾を variation 限定で復活。 admission / about など Emanon 脱却リファクタ未完の素テーブルが 本番反映時に「素」になるのを防ぐ目的の暫定措置。 Emanon 脱却プロジェクト完了で全表リファクタ済になったら廃止予定。 ============================================================ */ .l-content__main .wp-block-table.is-style-seijuji-table-default table { width: 100%; background-color: #ffffff; border-radius: 8px; outline: 1px solid #7DC6BC; outline-offset: -1px; border-collapse: separate; border-spacing: 0; overflow: hidden; } .l-content__main .wp-block-table.is-style-seijuji-table-default table th, .l-content__main .wp-block-table.is-style-seijuji-table-default table td { padding: 10px 14px; border: none; border-top: 1px solid rgba(125, 198, 188, 0.4); border-right: 1px solid rgba(125, 198, 188, 0.4); text-align: left; vertical-align: middle; line-height: 1.6; font-size: 0.95em; background-color: #ffffff; color: #564646; font-weight: normal; } .l-content__main .wp-block-table.is-style-seijuji-table-default table thead tr th, .l-content__main .wp-block-table.is-style-seijuji-table-default table thead tr td { background-color: #7DC6BC; color: #ffffff; font-weight: 700; border-top: none; border-right: 1px solid #C8E6DE; border-bottom: 3px solid #C8E6DE; letter-spacing: 0.06em; } /* ============================================================ T33. 月別スケジュール一覧 (seijuji-schedule-timeline) 旧 schedule-table.css を統合 + class rename (2026-05-15) ============================================================ */ /** * スケジュール表 縦タイムライン * * 子育て支援ページ (/supports/) の * - 親子あかちゃん広場 2026 年度スケジュール * - 親子クラス もこもこ広場 2026 年度スケジュール * の 2 表を縦タイムライン形式で表示。 * * カラー: コーラル (#ff8a65 / #ff7043) + ミント (#26c6da / #b2ebf2) * 共通パレット (design-refactor.css と揃える) * * 更新日: 2026-04-24 * バージョン: 1.0.0 */ .seijuji-schedule-timeline { list-style: none; padding: 0; margin: 1.5em 0; position: relative; } /* 左縦ライン（グラデ） */ .seijuji-schedule-timeline::before { content: ''; position: absolute; left: 80px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(to bottom, #26c6da, #b2ebf2); border-radius: 3px; } .seijuji-schedule-timeline__item { position: relative; padding: 10px 0 10px 110px; display: flex; align-items: center; gap: 12px; min-height: 44px; } /* 月の節目ドット（コーラル） */ .seijuji-schedule-timeline__item::before { content: ''; position: absolute; left: 74px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: #ff8a65; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #ff8a65; } .seijuji-schedule-timeline__month { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 64px; text-align: right; font-weight: 700; font-size: 18px; color: #ff7043; } .seijuji-schedule-timeline__dates { display: flex; flex-wrap: wrap; gap: 6px; } .seijuji-schedule-timeline__date { display: inline-block; background: #e0f7fa; color: #00695c; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; } .seijuji-schedule-timeline__empty { color: #b0b0b0; font-style: italic; font-size: 14px; } /* スマホ */ @media (max-width: 640px) { .seijuji-schedule-timeline::before { left: 60px; } .seijuji-schedule-timeline__item { padding-left: 84px; } .seijuji-schedule-timeline__item::before { left: 54px; } .seijuji-schedule-timeline__month { width: 48px; font-size: 15px; } .seijuji-schedule-timeline__date { font-size: 13px; padding: 3px 9px; } } /* ============================================================= Part J: 用 SVG mask セレクタ 方針: - content.raw に埋め込まれた Font Awesome の i タグを CSS のみで描画 - 共通設定 (i.fa-solid 等) で box 寸法 / mask 共通プロパティ - 個別アイコン (i.fa-XXX) で mask-image だけ指定 - 新規アイコン追加時は: SVG を assets/icons/ に保存 → ここに 1 行追加 既存テーマアイコン (page-id ごとの h2/h3 ::before) と独立、Part A / A-2 は不変。 ============================================================= */ /* 共通: i.fa-solid / i.fa-regular / i.fa-brands の表示形 */ i.fa-solid::before, i.fa-regular::before, i.fa-brands::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* 個別アイコン: 各 fa-XXX で mask-image だけ指定 */ i.fa-arrow-up-right-from-square::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-book::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-bus::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-calendar-days::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-child-reaching::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-clipboard-check::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-clock::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-cookie-bite::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-door-open::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-house::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-music::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-shopping-bag::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-tree::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-triangle-exclamation::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } i.fa-utensils::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ============================================================= Part K: Emanon パンくず icomoon アイコンの SVG mask 置換 経緯: - Emanon 親テーマのパンくずは / で icomoon webfont を参照する。 - icomoon フォント (assets/fonts/icomoon/fonts/icomoon.ttf) のロード待ちで FOIT (一瞬の空白) が発生 → 表示遅延の原因 - パンくず内に限定して SVG mask で上書き、即時表示にする - icomoon フォント自体の停止は TODO (各ページ完全チェック後) スコープ: .breadcrumb 配下に限定（voices 等の他 icomoon 利用には影響させない） ============================================================= */ .breadcrumb i.icon-home, .breadcrumb i.icon-chevron-right { /* font-family: icomoon の解除（::before の content も不要に） */ font-family: inherit !important; } .breadcrumb i.icon-home::before, .breadcrumb i.icon-chevron-right::before { content: "" !important; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .breadcrumb i.icon-home::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .breadcrumb i.icon-chevron-right::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }