/* * デザイントークン（CSSカスタムプロパティ） * =========================================================================== * * ここに書いてある値は「テーマの好み」ではなく、**残すプラグインが参照する契約** です。 * * - Snow Monkey Blocks（残す）は --_padding1 / --_margin1 / --_lighter-color-gray / * --_global--border-radius などを直接 var() で参照している。 * 定義しないと全ページのブロック余白・枠線・角丸が一斉に崩れる。 * - カスタマイザーの追加CSS 32,077バイト（custom_css 投稿 = そのまま複製して使う）は * 色をほぼハードコードしているが、Snow Monkey Blocks 側が上記を必要とする。 * * 【変数名も値も変更しないこと】（CLAUDE.md §4 / §2-8） * * --------------------------------------------------------------------------- * 出典（すべて実測。推測値はゼロ） * --------------------------------------------------------------------------- * 本番 https://nextmatch.jp/ が読み込む Autoptimize 統合CSS * https://nextmatch.jp/wp-content/cache/autoptimize/css/autoptimize_b73b8e2a1088df6e1739b329b635fb46.css * から :root / html / body の宣言ブロックを **出現順のまま** 書き起こしたもの（2026-09-01 取得）。 * カスケード（後勝ち）に意味があるので、ブロックの順序を入れ替えないこと。 * * ブロック1 wp-basis foundation（Snow Monkey の土台。offset 88830） * ブロック2 Snow Monkey 既定値（offset 94885） * ブロック3 background-color の上書き（offset 108393） * ブロック4 カスタマイザー生成分（offset 268831）… accent-color #3f55db 等はここが正 * ブロック5 sm-container-margin='s' 由来の上書き（offset 388168 直前） * * ブレークポイント実測値: sm < 640px / md 640〜1023.9px / lg >= 1024px / xl >= 1280px * 出典: 同CSSの @media 集計（(min-width:640px) 23件 / (min-width:1024px) 33件 / * (min-width:1280px) 5件 / (min-width:640px) and (max-width:1023.9px) 4件） */ /* =========================================================================== * ブロック1: wp-basis foundation * =========================================================================== */ :root { --_global--background-color: #0000; --_global--border-radius: 3px; /* --- グレースケール --- */ --_color-black: #111; --_color-gray: #999; --_dark-color-gray: #666; --_darker-color-gray: #444; --_darkest-color-gray: #3b3b3b; --_light-color-gray: #ccc; --_lighter-color-gray: #eee; --_lightest-color-gray: #f7f7f7; /* --- テキスト --- */ --_color-text: #333; --_dark-color-text: #000; --_darker-color-text: #000; --_darkest-color-text: #000; --_light-color-text: #666; --_lighter-color-text: #888; --_lightest-color-text: #919191; --_color-white: #fff; --_color-red: #e74c3c; /* --- コンテナ --- */ --_global--container-margin: var(--_s1); --_global--container-max-width: 1280px; --_list-item-indent: 1.5em; /* --- フォームコントロール --- */ --_form-control-border-color: var(--_light-color-gray); --_form-control-border-color-hover: var(--_color-gray); --_form-control-border-color-focus: #85b7d9; /* --- トランジション --- */ --_global--transition-duration: 0.2s; --_global--transition-function-timing: ease-out; --_global--transition-delay: 0s; /* --- 行送り --- */ --_half-leading: 0.3; --_global--line-height: calc(1 + var(--_half-leading) * 2); /* --- フォント --- */ --_base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --_global--font-family: var(--_base-font-family); --_base-font-size-px: 16px; --_global--font-size-px: var(--_base-font-size-px); /* --- 見出しの上下マージン係数 --- */ --_margin-scale: 1; --_h1-margin-top: 0; --_h1-margin-bottom: 1; --_h2-margin-top: 2; --_h2-margin-bottom: 1; --_h3-margin-top: 1.5; --_h3-margin-bottom: 1; --_h4-margin-top: 1.25; --_h4-margin-bottom: 1; --_h5-margin-top: 1; --_h5-margin-bottom: 0.5; --_h6-margin-top: 1; --_h6-margin-bottom: 0.5; --_space-unitless: var(--_global--line-height); --_space: calc(var(--_global--line-height) * 1rem); --_page-effect-z-index: 1000000; /* --- 調和数列によるフルイドタイポグラフィ --- */ --_harmonic-sequence-base: 8; --_min-harmonic-sequence-base: 9; --_max-harmonic-sequence-base: var(--_harmonic-sequence-base); --_line-height-slope: -0.16666; --_font-size-level: 0; /* --- モジュラースケール（比率のみ） --- */ --_ms-2: calc(var(--_space-unitless) / 3 * 1); --_ms-1: calc(var(--_space-unitless) / 3 * 2); --_ms0: 0rem; --_ms1: calc(var(--_space-unitless) / 3 * 3); --_ms2: calc(var(--_space-unitless) / 3 * 5); --_ms3: calc(var(--_space-unitless) / 3 * 8); --_ms4: calc(var(--_space-unitless) / 3 * 13); --_ms5: calc(var(--_space-unitless) / 3 * 21); --_ms6: calc(var(--_space-unitless) / 3 * 34); --_ms7: calc(var(--_space-unitless) / 3 * 55); /* --- スペース（clamp で 375px〜1000px を線形補間する） --- */ --_s-2: calc(var(--_ms-2) * 1rem); --_s-1: calc(var(--_ms-1) * 1rem); --_s0: 0rem; --_s1: calc(var(--_ms1) * 1rem); --_s2: clamp(calc(var(--_ms1) + var(--_ms2) * 0.28125) * 1rem, calc(calc(-22.5 * calc((var(--_ms2) - calc(var(--_ms1) + var(--_ms2) * 0.28125)) / (57.5)) + calc(var(--_ms1) + var(--_ms2) * 0.28125)) * 1rem + calc((var(--_ms2) - calc(var(--_ms1) + var(--_ms2) * 0.28125)) / (57.5)) * 100vw), var(--_ms2) * 1rem); --_s3: clamp(calc(var(--_ms1) + var(--_ms3) * 0.28125) * 1rem, calc(calc(-22.5 * calc((var(--_ms3) - calc(var(--_ms1) + var(--_ms3) * 0.28125)) / (57.5)) + calc(var(--_ms1) + var(--_ms3) * 0.28125)) * 1rem + calc((var(--_ms3) - calc(var(--_ms1) + var(--_ms3) * 0.28125)) / (57.5)) * 100vw), var(--_ms3) * 1rem); --_s4: clamp(calc(var(--_ms1) + var(--_ms4) * 0.28125) * 1rem, calc(calc(-22.5 * calc((var(--_ms4) - calc(var(--_ms1) + var(--_ms4) * 0.28125)) / (57.5)) + calc(var(--_ms1) + var(--_ms4) * 0.28125)) * 1rem + calc((var(--_ms4) - calc(var(--_ms1) + var(--_ms4) * 0.28125)) / (57.5)) * 100vw), var(--_ms4) * 1rem); --_s5: clamp(calc(var(--_ms1) + var(--_ms5) * 0.28125) * 1rem, calc(calc(-22.5 * calc((var(--_ms5) - calc(var(--_ms1) + var(--_ms5) * 0.28125)) / (57.5)) + calc(var(--_ms1) + var(--_ms5) * 0.28125)) * 1rem + calc((var(--_ms5) - calc(var(--_ms1) + var(--_ms5) * 0.28125)) / (57.5)) * 100vw), var(--_ms5) * 1rem); --_s6: clamp(calc(var(--_ms1) + var(--_ms6) * 0.28125) * 1rem, calc(calc(-22.5 * calc((var(--_ms6) - calc(var(--_ms1) + var(--_ms6) * 0.28125)) / (57.5)) + calc(var(--_ms1) + var(--_ms6) * 0.28125)) * 1rem + calc((var(--_ms6) - calc(var(--_ms1) + var(--_ms6) * 0.28125)) / (57.5)) * 100vw), var(--_ms6) * 1rem); --_s7: clamp(calc(var(--_ms1) + var(--_ms7) * 0.28125) * 1rem, calc(calc(-22.5 * calc((var(--_ms7) - calc(var(--_ms1) + var(--_ms7) * 0.28125)) / (57.5)) + calc(var(--_ms1) + var(--_ms7) * 0.28125)) * 1rem + calc((var(--_ms7) - calc(var(--_ms1) + var(--_ms7) * 0.28125)) / (57.5)) * 100vw), var(--_ms7) * 1rem); /* --- マージン --- */ --_margin-2: calc(var(--_s-2) * var(--_margin-scale)); --_margin-1: calc(var(--_s-1) * var(--_margin-scale)); --_margin0: 0rem; --_margin1: calc(var(--_s1) * var(--_margin-scale)); --_margin2: calc(var(--_s2) * var(--_margin-scale)); --_margin3: calc(var(--_s3) * var(--_margin-scale)); --_margin4: calc(var(--_s4) * var(--_margin-scale)); --_margin5: calc(var(--_s5) * var(--_margin-scale)); --_margin6: calc(var(--_s6) * var(--_margin-scale)); --_margin7: calc(var(--_s7) * var(--_margin-scale)); /* --- パディング --- */ --_padding-2: var(--_s-2); --_padding-1: var(--_s-1); --_padding0: 0rem; --_padding1: var(--_s1); --_padding2: var(--_s2); --_padding3: var(--_s3); --_padding4: var(--_s4); --_padding5: var(--_s5); --_padding6: var(--_s6); --_padding7: var(--_s7); } /* =========================================================================== * ブロック2: Snow Monkey 既定値 * * accent 系はブロック4（カスタマイザー生成）で上書きされるため、 * ここでは上書きされない項目のみを書き起こす。 * Snow Monkey の生値にあった `_dark(#cd162c)` 等はプレースホルダ関数で * CSSとしては無効な記述だったので持ち込まない（本番でも効いていない）。 * =========================================================================== */ :root { --body-margin-left: 0px; --header-text-color: var(--_color-text); --overlay-header-text-color: var(--_color-white); --drop-nav-text-color: var(--_color-text); --scrollbar-width: 0px; --_global--border-radius: 6px; --_global--font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; --wp--style--gallery-gap-default: var(--_margin-2); /* 旧クラシックパレット。本文HTMLに has-*-color が残っている場合に効く */ --wp--preset--color--text-color: #333; --wp--preset--color--dark-gray: #999; --wp--preset--color--gray: #ccc; --wp--preset--color--very-light-gray: #eee; --wp--preset--color--lightest-grey: #f7f7f7; --wp--preset--color--lightest-gray: var(--wp--preset--color--lightest-grey); } /* =========================================================================== * ブロック3: 背景色 * =========================================================================== */ :root { --_global--background-color: #fff; } /* =========================================================================== * ブロック4: カスタマイザー生成分 * * theme_mods の accent-color(#3f55db) / sub-accent-color(#06c755) / * base-font(sans-serif) から Snow Monkey が動的生成していたもの。 * theme_mods は migrate-theme-settings で複製済みだが、 * 「theme_mods から CSS を生成する」処理までは移植していないため、 * 現在の実測値を静的に書き出している。 * カスタマイザーで色を変えてもここは追随しない（Phase 5 で要検討）。 * =========================================================================== */ :root { --_margin-scale: 1; --_space: 1.8rem; --_space-unitless: 1.8; --accent-color: #3f55db; --wp--preset--color--accent-color: var(--accent-color); --dark-accent-color: #1c2e98; --light-accent-color: #95a1eb; --lighter-accent-color: #cfd4f6; --lightest-accent-color: #dee2f9; --sub-accent-color: #06c755; --wp--preset--color--sub-accent-color: var(--sub-accent-color); --dark-sub-accent-color: #03642b; --light-sub-accent-color: #3af988; --lighter-sub-accent-color: #7dfbb0; --lightest-sub-accent-color: #8efcbb; --_half-leading: 0.4; --font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; --_global--font-family: var(--font-family); --_global--font-size-px: 16px; } /* =========================================================================== * ブロック5: sm-container-margin = 's' * * theme_mods は sm-container-margin='s' のみ設定され、 * lg-container-margin は未設定。 * * Snow Monkey 本体 assets/css/app/foundation/_body/_app.php:42-53 のロジック: * * $container_margin = $get_container_margin_var( get_theme_mod( 'lg-container-margin' ) ); // null * $container_margin_sm = $get_container_margin_var( get_theme_mod( 'sm-container-margin' ) ); // 'var(--_s-1)' * * if ( $container_margin && $container_margin_sm ) { * $root_variables_app[] = ...; // 無条件の :root（今回は通らない） * } elseif ( ! $container_margin && $container_margin_sm ) { * $root_variables_app_media_max_md[] = ...; // ← こちらが通る * } * * 同ファイル 165-170 行で $root_variables_app_media_max_md は * media_query '@media not all and (min-width: 1024px)' として出力される。 * * したがって --_s-1（19.2px）への上書きは **1024px 未満のときだけ**。 * 1024px 以上では本体 :root の既定値 var(--_s1)（28.8px）がそのまま効く。 * =========================================================================== */ @media not all and (min-width: 1024px) { :root { --_global--container-margin: var(--_s-1); } } /* =========================================================================== * theme.json の custom セクション（WP が --wp--custom--* を出力する） * * 定義そのものは theme.json 側が正。ここでは **本番と同じ「未定義」状態**に * 戻すためだけの宣言を置く。 * * 本番は Code Snippet #8 の wp_dequeue_style('global-styles') が * Cache Enabler の静的HTMLごと効いていて、--wp--custom--* が1つも出ていない * （make var-diff の「ローカルでは定義されているのに本番で未定義」に全部出る）。 * その結果、本番では * :where(.l-contents__container > *), :where(.l-contents__main > *) * { max-width: var(--wp--custom--content-width) } ← _layout.css * が「無効 → max-width:none」に落ちていて、.c-entry も .p-breadcrumbs-wrapper も * 親 .c-fluid-container の内幅いっぱい（pc 1440px で 1382.4px）に広がっている。 * * ローカルは theme.json があるぶん 1280px が「正しく」定義されてしまい、 * /category/column/ pc・/profile/ pc で幅が 102.4px（左右 51.2px ずつ）細くなり、 * カード幅・折返し位置まで連鎖してズレていた。 * * カスタムプロパティに `initial` を指定すると guaranteed-invalid になり、 * 「宣言が無い」のと同じ扱いになる（var() が無効になる）。 * これが本番の状態を再現する唯一の手段。値を書き換えているのではない。 * * global styles そのものは止めない（止めると --wp--preset--* まで消えて * かえって差が広がる。docs/findings/global-css-parity.md §B / decisions D-013）。 * * 個別に定義し直している次の2箇所は、本番にも同じ宣言があるので生きたまま: * [data-is-full-template="true"] { --wp--custom--content-width: none } * [data-has-sidebar=false][data-is-full-template=true] * .l-contents__main .p-section-front-page-content * { --wp--custom--content-width: var(--_global--container-max-width) } * =========================================================================== */ :root { --wp--custom--slim-width: initial; --wp--custom--content-width: initial; --wp--custom--content-wide-width: initial; --wp--custom--has-sidebar-main-basis: initial; --wp--custom--has-sidebar-sidebar-basis: initial; } /* =========================================================================== * 字送り（全ページに効く。抜けると全ページの行の折返し位置が変わる） * * 本番の統合CSSに `html{letter-spacing:.05rem}` が1行だけ入っている。 * https://nextmatch.jp/wp-content/cache/autoptimize/css/autoptimize_d0a138466fcc8d5e9442f8403dce723e.css * * 出所は Snow Monkey の assets/css/app/foundation/_body/_app.php 末尾: * 'letter-spacing: ' . get_theme_mod( 'base-letter-spacing' ) . 'rem' * `base-letter-spacing` は app/customizer/design/sections/base-design/controls/ * base-letter-spacing.php で **既定値 0.05** として登録されている。 * theme_mods_nextmatch にこのキーは無いので、本番も既定値のまま。 * * 実測（make var-diff）: 本番 html/body ともに 0.8px、ローカルは normal だった。 * 0.8px 詰まるだけで1行あたりの文字数が変わり、`/about/` sp では * 本文ブロックが1行分（-28.8px）短くなって以降の要素が全部ズレていた。 * → docs/findings/global-css-parity.md §A * =========================================================================== */ html { letter-spacing: 0.05rem; } /* =========================================================================== * --wp--preset--color--* も本番と同じ「未定義」に戻す（D-015 と同じ手口） * * 本番は theme.json 由来の global styles が出ていないため、 * `--wp--preset--color--*` を **1つも定義していない**（make var-diff で確認）。 * ローカルだけ定義されていると、本番では死んでいる宣言が生き返り、 * **本番に無いものが描画される**。実測した実害: * * .l-footer { border-top: 1px solid var(--wp--preset--color--sm-lighter-gray) } * 本番 : 変数が未定義 → 宣言ごと無効 → border-top-style が none → 高さ 0 * ローカル: #eee が定義されている → 1px の線が描画される * → フッタが 1px 高く、会社概要の上に**本番に無い横線**が出ていた。 * これが全ページ・全ビューポートの「Δh = +1」の正体。 * * .p-global-nav--current-underline .c-navbar__item[data-active-menu] > a::after * { background-color: var(--wp--preset--color--sm-accent) } * 本番はこれも無効 → 現在地の下線が見えていない * * カスタムプロパティへの `initial` は guaranteed-invalid を意味し、 * 「宣言が無い」のと同じ扱いになる。値の書き換えではない。 * Snow Monkey 自身も同じ手を使っている * （本番CSS: `.wp-block-post-template h2{--wp--preset--color--sm-text:initial}`）。 * * **色だけに限定する。** `--wp--preset--spacing--*` `--wp--style--block-gap` * `--wp--preset--font-size--*` まで消すと寸法が崩れる（D-013 の実測: +512px）。 * * テーマCSSでの参照は14箇所（sm-accent 7 / sm-lighter-gray 4 / sm-text 1 / * sm-light-gray 1 / lightest-grey 1）。本番の追加CSSでの参照は sm-accent 1箇所で、 * そちらも本番では死んでいる。 * =========================================================================== */ :root { --wp--preset--color--black: initial; --wp--preset--color--cyan-bluish-gray: initial; --wp--preset--color--white: initial; --wp--preset--color--pale-pink: initial; --wp--preset--color--vivid-red: initial; --wp--preset--color--luminous-vivid-orange: initial; --wp--preset--color--luminous-vivid-amber: initial; --wp--preset--color--light-green-cyan: initial; --wp--preset--color--vivid-green-cyan: initial; --wp--preset--color--pale-cyan-blue: initial; --wp--preset--color--vivid-cyan-blue: initial; --wp--preset--color--vivid-purple: initial; --wp--preset--color--sm-text: initial; --wp--preset--color--sm-text-alt: initial; --wp--preset--color--sm-accent: initial; --wp--preset--color--sm-sub-accent: initial; --wp--preset--color--sm-gray: initial; --wp--preset--color--sm-light-gray: initial; --wp--preset--color--sm-lighter-gray: initial; --wp--preset--color--sm-lightest-gray: initial; --wp--preset--color--sm-dark-gray: initial; --wp--preset--color--sm-darker-gray: initial; --wp--preset--color--sm-darkest-gray: initial; }