:root { /* Layout */ --padding-layout: 0.6rem; --border-radii-layout: 5px; --border-thickness-layout: 1px; --border-type-layout: solid; --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default); --layout-max-width: 900px; --column-spacing: 46px; --page-display: flex; --padding-right: calc(env(safe-area-inset-right) + 96px); --padding-left: calc(env(safe-area-inset-left) + 96px); --padding-right-mobile: calc(env(safe-area-inset-right) + 24px); --padding-left-mobile: calc(env(safe-area-inset-left) + 24px); /* Header */ --header-cover-height: 30vh; --header-title-align: start; --header-icon-align: -112px auto auto auto; --header-display: block; /* Collection header */ --collection-header-border: var(--border-layout); /* Collection table */ --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem); /* Collection list */ --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem); --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px ); /* Collection card */ --collection-card-padding: 0px; --collection-card-title-padding: 0px; --collection-card-content-padding: var(--padding-layout); --collection-card-border-radii: var(--border-radii-layout); --collection-card-gap: 10px; --collection-card-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; --collection-card-title-size: 0.875rem; --collection-card-cover-height-small: 128px; --collection-card-cover-size-small: 172px; --collection-card-cover-height-medium: 200px; --collection-card-cover-size-medium: 260px; --collection-card-cover-height-large: 200px; --collection-card-cover-size-large: 320px; --collection-card-icon-display: inline-flex; /* Callout */ --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em); --callout-border-radii: calc(var(--border-radii-layout) - 2px); --callout-border: var(--border-layout); --callout-icon-display: block; --callout-shadow: none; /* File */ --file-border-radii: calc(var(--border-radii-layout) - 2px); /* Equation */ --equation-border-radii: calc(var(--border-radii-layout) - 2px); /* Divider */ --divider-border: var(--border-layout); /* Quote */ --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor; /* Code */ --code-padding: calc(var(--padding-layout) + 1.4rem); --code-border-radii: var(--border-radii-layout); /* Tweet */ --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem); --tweet-border-radii: var(--border-radii-layout); --tweet-border: var(--border-layout); /* Bookmark */ --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem); --bookmark-border-radii: var(--border-radii-layout); --bookmark-border: var(--border-layout); --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px; /* Embed */ --embed-border-radii: calc(var(--border-radii-layout) - 5px); /* Image */ --image-border-radii: calc(var(--border-radii-layout) - 5px); /* Typography */ --title-size: 2.5rem; --quote-size: 1.2rem; --quote-size-large: 1.4rem; --heading-size: 1rem; --primary-font: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif; --secondary-font: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif; --text-weight: 400; --heading-weight: 600; --heading1-size: calc(var(--heading-size) * 1.875); --heading2-size: calc(var(--heading-size) * 1.5); --heading3-size: calc(var(--heading-size) * 1.25); --heading4-size: calc(var(--heading-size) * 1); --heading5-size: calc(var(--heading-size) * 0.8125); /* Scrollbars */ --scrollbar-width: 15px; /* Navbar */ --navbar-height: 56px; --navbar-shadow: none; --navbar-button-border-radii: 50px; --navbar-list-width-single-column: 320px; --navbar-list-width: 620px; /*Sidebar*/ --sidebar-width: 280px; --sidebar-shadow: none; } html { scroll-padding-top: 62px; } body { font-family: var(--secondary-font); } :root { /* ============================================================ mundialkeigo.com — Global Design Tokens ============================================================ */ :root { /* --- Color Palette (Theme B: Cyber-Lounge / Warm Amber & Teal) --- */ --color-primary: #111827; /* 深い色味のダークグレー（黒より洗練された印象） */ --color-accent: #F59E0B; /* 画像のホログラムに合わせたウォーム・アンバー（琥珀色） */ --color-accent-hover:#D97706; /* ホバー時の濃いアンバー */ --color-bg: #FAFAFA; /* 背景色（少しだけ温かみのある白） */ --color-text: #374151; /* 本文テキスト（スミクロ） */ --color-text-muted: #6B7280; /* サブテキスト */ --color-border: #E5E7EB; /* ボーダー */ /* --- Typography --- */ /* 日本語: Noto Sans JP / スペイン語・英語: Inter / フォールバック: sans-serif */ --font-body: 'Noto Sans JP', 'Inter', sans-serif; --font-heading: 'Noto Sans JP', 'Inter', sans-serif; --font-mono: 'Fira Code', 'Courier New', monospace; --text-base: 1rem; /* 16px */ --text-sm: 0.875rem; /* 14px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ /* --- Spacing --- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; /* --- Border Radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* --- Shadows --- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.12); } /* ============================================================ Typography ============================================================ */ body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.75; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-primary); line-height: 1.3; font-weight: 700; } /* ============================================================ CTA Buttons (Cyber-Lounge Vibe - Holographic Neon) ============================================================ */ /* Super.soのテキストリンクを全て光るボタン化するコード */ .notion-text a { display: inline-flex; align-items: center; justify-content: center; background-color: transparent !important; /* 背景は透明にして洗練された印象に */ color: var(--color-accent) !important; /* 文字をアンバー（琥珀色）に */ padding: 10px 24px !important; border-radius: 999px !important; /* 丸角ピル型 */ font-weight: 600 !important; font-size: 1.1rem !important; text-decoration: none !important; margin-top: 10px; margin-bottom: 10px; border: 1.5px solid var(--color-accent) !important; /* アンバーのふちどり */ box-shadow: 0 0 10px rgba(245, 158, 11, 0.2), inset 0 0 8px rgba(245, 158, 11, 0.1) !important; /* ほんのりと内と外が光るエフェクト */ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; transform: translateY(0); } .notion-text a:hover { transform: translateY(-2px) !important; background: rgba(245, 158, 11, 0.08) !important; /* ホバー時にうっすら背景色がつく */ box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(245, 158, 11, 0.2) !important; /* 光が強くなる */ text-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important; /* 文字も光る */ } /* リンク横の不要なNotionアイコンを強制非表示（余計な丸を消す） */ .notion-text a .notion-page-icon { display: none !important; } /* ============================================================ Mobile First — Responsive ============================================================ */ /* スマートフォン (default: ~375px) */ .article-body { padding: var(--space-md); max-width: 680px; margin: 0 auto; } /* タブレット以上 */ @media (min-width: 768px) { .article-body { padding: var(--space-xl) var(--space-md); } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } } ``` ## 2. Head Scripts (SEO & Analytics) > **Status (2026-02-26)**: GA4タグのテンプレートを定義済み。`G-XXXXXXXXXX` を実際の Measurement ID に差し替えて Super.so の「Code」設定 > Head に貼り付ける。 > 実際の Measurement ID は `.env` の `GA4_MEASUREMENT_ID` に保管し、ドキュメントには記載しない。 ```html } :root { --primary-font: var(--font-body); --secondary-font: var(--font-body); }