/* ========================================================================= SEOROBO — デザイントークン ⚠️ 色の実体（hex）を定義してよいのはこのファイルだけ。 style.css / editor.css には生の hex を書かず、必ず var() で参照すること。 ⚠️ 6色を if 文や配列でハードコードしないこと。テンプレート側は term_meta の color_slot(1-6) を読み、seorobo_accent_style() が var(--brand-N) を --c-accent に流し込む。 ⚠️ brand パレットと「別系統」の色（順位・お知らせ帯・SNS）は、brand を参照せず 独立した意味づけ変数として定義する。カテゴリ色の切り替えに巻き込まれないため。 値はすべて design/comps/ のカンプ（XD書き出しPNG）から Pillow でピクセル実測した 確定値。ただし行間・字送りのみ実測不能のため日本語組版の一般値を採用している。 ⚠️ 参照禁止: XD を Figma Make で再構成した Figma データがあるが、実装には使わない。 幅1129pxのブラウザキャプチャで XD の 1440px と不一致、文言が書き換わっている、 色が #5b2fcc / #101828 で確定値と異なる、フォントが Inter で日本語グリフを 持たない、という4点のため。design/comps/ の XD カンプ PNG が唯一の正本。 ========================================================================= */ :root { /* --- ブランド6色（XD実測確定値） --------------------------------------- 1 purple ECのSEO基礎編 / 考える 2 teal 商品ページSEO / 守る 3 blue カテゴリページSEO / 直す 4 orange テクニカルSEO / 測る 5 pink コンテンツSEO / 作る 6 gray SEO分析・運用 / 学ぶ -------------------------------------------------------------------- */ --brand-1: #5525D8; --brand-2: #2FC4B6; --brand-3: #00B1E6; --brand-4: #FF9D00; --brand-5: #F72CA1; --brand-6: #707070; /* slot 6 の面用。--brand-6 (#707070) はタグバッジ等の小面積のみに使う。 ✅ 2026-08-07 実測確定（旧仮値 #4C4560 から差し替え）。 front-page-pc / archive-cat06-pc / single-pc のカテゴリカード面、 および全ページのフッター帯から一致して #59506C を検出。 差し替えはこの1行のみで全体に反映される（設計方針は維持）。 */ --brand-6-deep: #59506C; /* --- ランタイム上書き用アクセント ------------------------------------- seorobo_accent_style() が要素の style 属性で上書きする。 CSS 内のアクセント参照は必ず var(--c-accent) / var(--c-accent-deep) を使う。 -------------------------------------------------------------------- */ --c-accent: var(--brand-1); --c-accent-deep: var(--brand-1); /* --- 中立色（実測） ---------------------------------------------------- */ --c-text: #111111; --c-text-muted: #888888; --c-text-inverse: #FFFFFF; --c-bg: #FFFFFF; --c-bg-subtle: #F5F5F5; /* もっと読む / 目次 / セクション帯 */ --c-bg-mute: #F0EFF2; /* 関連記事セクション */ --c-border: #DDDDDD; --c-border-subtle: #E9E9E9; /* 目次の行間・ページャ上辺 */ --c-border-strong: #111111; /* グローバルナビの項目区切り「|」。カンプ実測 front-page-pc: 1px 幅・高さ13px。 */ --c-nav-sep: #727272; /* ヒーローに重なるヘッダーでは白の半透明。 カンプ実測 archive-cat01-pc: 帯 #5525D8 上で rgb(179,157,238) = 白 55%。 ⚠️ 6色すべてで同じ見え方にするため、色ではなく透明度で持つ。 */ --c-nav-sep-on-hero: rgba(255, 255, 255, 0.55); --c-shadow: rgba(17, 17, 17, 0.08); --c-focus: #005FCC; --c-placeholder: #C1C1C1; /* サムネ未設定時のプレースホルダ */ /* 本文図解の枠。カンプ実測 single-pc.png（#F5F5F5 の --c-bg-subtle とは別の色）。 */ --c-figure-bg: #FAFAFA; /* カルーセルのドット。 ⚠️ brand パレットにも --c-accent にも連動させない。ref-archive-sp-1〜6 （6色すべて）で実測したところ、ヒーローが橙でもピンクでも アクティブドットは紫のまま固定だった。--c-accent 経由にすると カテゴリ色に追従してしまい実測と食い違う。 */ --c-dot-active: #5525D8; /* アクティブ（中空リング）。6色すべてで固定 */ --c-dot-idle: #E5E5E5; /* 非アクティブ */ /* --- サイト共通の固定色（brand とは別系統） ----------------------------- ⚠️ いずれも「カテゴリ色に追従しない」ことをカンプ実測で確認済み。 var(--c-accent) / var(--c-accent-deep) を使うとページのカテゴリ色に 追従してしまい、カンプと食い違う。 フッター帯 : 8画面すべて #58506C（cat01紫のページでも紫にならない） ブランド主色 : ニュースレター送信ボタン / ヘッダーCTA。 6色すべてのページで #5525D8 のまま -------------------------------------------------------------------- */ --c-footer-bg: #58506C; --c-brand-primary: #5525D8; /* --- 順位（brand とは別系統） ----------------------------------------- ⚠️ ランキングの 1位 / 2-3位 / 4位以降 は「順位」という独立した軸であり、 color_slot とは無関係。ここで var(--brand-N) を参照すると、記事の カテゴリ色が変わったときに順位表示まで巻き込まれて壊れる。 見た目がブランド色と一致していても、値は独立して持つこと。 -------------------------------------------------------------------- */ --c-rank-1: #5525D8; /* 1位のメダルアイコン */ --c-rank-2: #2FC4B6; /* 2-3位の数字＋下線 */ --c-rank-rest: #999999; /* 4位以降の数字 */ /* --- ヘッダー下の罫線 --------------------------------------------------- ⚠️ brand パレットも --c-accent も参照しない。半透明グレー1指定で、 白背景でもヒーローの色帯の上でもカンプ実測どおりの色になる。 カンプ9画面から逆算した結果、rgba(221,221,221,.5) で全色が完全一致した （平均誤差 0.2 / 最大 1）。当初「半透明の白」と見立てたが、それでは cat05(#F72CA1) で R が下がる実測を説明できなかった。 白背景 #FFFFFF → #EEEEEE cat01 #5525D8 → #9981DA（実測 #9981DB） cat05 #F72CA1 → #EA85BF（実測 #EA85BF） tool #221648 → #807A92（実測 #7F7992） -------------------------------------------------------------------- */ --c-header-rule: rgba(221, 221, 221, 0.5); /* --- お知らせ帯（brand とは別系統） ------------------------------------ */ --c-notice-bg: #4B4B4B; --c-notice-text: #FFFFFF; /* --- ヒーロー（ツール一覧のダークネイビー） ---------------------------- */ --c-hero-dark: #221648; /* --- SNS ブランド色（外部サービス由来。brand とは別系統） -------------- */ --c-sns-facebook: #334C8C; --c-sns-x: #000000; --c-sns-linkedin: #0B69C7; --c-sns-line: #3CD600; --c-sns-copy: #59506C; /* --- タイポグラフィ ---------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-tagline: 0.625rem; /* 10。ヘッダーのタグライン専用（カンプ実測グリフ高10px） */ --fs-xs: 0.75rem; /* 12 バッジ・注釈 */ --fs-sm: 0.8125rem; /* 13 ランキング本文 */ --fs-meta: 0.875rem; /* 14 日付・メタ */ --fs-base: 1rem; /* 16 本文 */ --fs-lg: 1.125rem; /* 18 カードタイトル */ --fs-xl: 1.5rem; /* 24 セクション見出し */ --fs-2xl: 2.125rem; /* 34 記事 h1 */ --fs-3xl: 3.75rem; /* 60 アーカイブヒーロー（実グリフ高 55px に一致） */ /* 行間・字送り ⚠️ XD カンプからは日本語のタイポグラフィ情報を実測できなかったため、 日本語組版の一般値を採用している（2026-08-08 確定）。 Figma データは参照禁止（下記「参照禁止」を見よ）。 */ --lh-tight: 1.4; /* 見出し */ --lh-card: 1.55; /* カードタイトル（カード内は行数が増えるため詰める） */ --lh-base: 1.8; /* 本文 */ --ls-base: 0.02em; /* 本文 */ --ls-heading: 0; /* 見出しは字送りを入れない */ /* --- スペーシング ------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* --- レイアウト（実測） ------------------------------------------------ トップ / アーカイブ: 1100px（1440 幅で x=170..1270） 記事詳細: 1040px（1440 幅で x=200..1240） -------------------------------------------------------------------- */ /* ⚠️ ヘッダーと本文でコンテナが違う（カンプ実測）。 ヘッダー・ヒーロー内パンくず : 左右 40px パディングの全幅（1440幅で 40〜1399） 本文セクション : 1100px センタリング（1440幅で 170〜1269） 一律のセンタリングにするとロゴが x=170 になり、カンプの x=40 と 130px ずれる。 */ --container-max: 1100px; --container-edge-pad: 2.5rem; /* 40px。全幅コンテナの左右パディング */ --container-article: 1040px; --container-pad: 1.25rem; /* 20px。SP カンプ実測（PC は max-width が効くため影響なし） */ --gap-grid: 2rem; /* 32px。記事カードの3カラム/4カラム */ --gap-grid-tight: 1.25rem; /* 20px 列 / 16px 行。カテゴリカードの2カラム（実測） */ --gap-grid-tight-row: 1rem; --header-h: 60px; /* SP 実測。PC は 70px（下の md 以上で上書き） */ --tap-min: 44px; /* タップターゲットの最小寸法 */ --breadcrumb-pad: 1.25rem; /* SP 20px。PC は 40px（下の lg 以上で上書き）*/ /* SP のヒーロー見出し。PC の --fs-3xl(60px) に対しカンプ実測 32px。 */ --fs-hero-sp: 2rem; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; --shadow-card: 0 1px 3px var(--c-shadow); /* ドロワー（brand とは別系統の固定色。カンプ menu-sp 実測）。 */ --c-drawer-panel: #222222; --duration-drawer: 240ms; } /* PC ではヘッダーが 70px（カンプ実測）。 */ @media (min-width: 1024px) { :root { --header-h: 70px; --breadcrumb-pad: 2.5rem; /* 40px。ヘッダーと同じ全幅コンテナの左右パディング */ } }