/* ========================================================================= apollo11-fusion — テーマ層 Industry デザインシステム（styles.css）の上に重ねる。 ・和文フォントのフォールバック ・ナイトモード（）のトークン差し替え ・LP用の最小限のユーティリティ（グリッド地・スクロールバー等） ここに書くのはトークンと地の設定のみ。コンポーネントは styles.css を使う。 ====================================================================== */ :root { --font-heading: "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif; --font-body: "Barlow", "Noto Sans JP", system-ui, sans-serif; --a11-header-h: 62px; --a11-grid-line: color-mix(in srgb, var(--color-text) 7%, transparent); --a11-plate: color-mix(in srgb, var(--color-text) 3.5%, transparent); --a11-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* CTAの面はライト/ナイトで反転させない固定のスチール地（アクセント色相に追随） */ --a11-field: oklch(from var(--a11-accent-user, #5980a6) 0.28 calc(c * 0.65) h); --a11-field-ink: #f2f2f3; /* アクセントの一元管理: --a11-accent-user を書き換えると、ランプ・CTAの面・ホバー・ フッター等の派生色すべてが追随する（WPカスタマイザ / Tweaksから設定） */ --color-accent: var(--a11-accent-user, #5980a6); --color-accent-2: var(--color-accent); --color-accent-100: oklch(from var(--color-accent) 0.96 calc(c * 0.30) h); --color-accent-200: oklch(from var(--color-accent) 0.91 calc(c * 0.50) h); --color-accent-300: oklch(from var(--color-accent) 0.83 calc(c * 0.75) h); --color-accent-400: oklch(from var(--color-accent) 0.74 calc(c * 0.95) h); --color-accent-500: oklch(from var(--color-accent) 0.66 c h); --color-accent-600: oklch(from var(--color-accent) 0.575 c h); --color-accent-700: oklch(from var(--color-accent) 0.47 calc(c * 0.95) h); --color-accent-800: oklch(from var(--color-accent) 0.36 calc(c * 0.80) h); --color-accent-900: oklch(from var(--color-accent) 0.27 calc(c * 0.65) h); --color-accent-2-100: var(--color-accent-100); --color-accent-2-200: var(--color-accent-200); --color-accent-2-300: var(--color-accent-300); --color-accent-2-400: var(--color-accent-400); --color-accent-2-500: var(--color-accent-500); --color-accent-2-600: var(--color-accent-600); --color-accent-2-700: var(--color-accent-700); --color-accent-2-800: var(--color-accent-800); --color-accent-2-900: var(--color-accent-900); } html[data-a11-theme="dark"] { --color-bg: #14181c; --color-surface: #1c2126; --color-text: #e7ebef; --color-accent: oklch(from var(--a11-accent-user, #5980a6) 0.78 calc(c * 0.85) h); --color-divider: color-mix(in srgb, #e7ebef 18%, transparent); /* 明→暗でランプを反転（同じ役割の見た目の重さを保つ） */ --color-accent-100: oklch(from var(--a11-accent-user, #5980a6) 0.27 calc(c * 0.65) h); --color-accent-200: oklch(from var(--a11-accent-user, #5980a6) 0.36 calc(c * 0.80) h); --color-accent-300: oklch(from var(--a11-accent-user, #5980a6) 0.47 calc(c * 0.95) h); --color-accent-400: oklch(from var(--a11-accent-user, #5980a6) 0.575 c h); --color-accent-500: oklch(from var(--a11-accent-user, #5980a6) 0.66 c h); --color-accent-600: oklch(from var(--a11-accent-user, #5980a6) 0.85 calc(c * 0.70) h); --color-accent-700: oklch(from var(--a11-accent-user, #5980a6) 0.85 calc(c * 0.70) h); --color-accent-800: oklch(from var(--a11-accent-user, #5980a6) 0.91 calc(c * 0.50) h); --color-accent-900: oklch(from var(--a11-accent-user, #5980a6) 0.96 calc(c * 0.30) h); --color-neutral-100: #2b2b2d; --color-neutral-200: #424244; --color-neutral-800: #e7e7ea; --color-neutral-900: #05070a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 4px 14px rgba(0, 0, 0, .55); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6); color-scheme: dark; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--a11-header-h) + 20px); } body { background: var(--color-bg); color: var(--color-text); transition: background .2s ease, color .2s ease; overflow-wrap: break-word; } /* スクロールバー — 配色トークンに追随（scrollbar-colorは継承され全スクロール領域に効く） */ html { scrollbar-color: var(--color-accent-500) var(--color-bg); } .a11-table-scroll, pre, textarea { scrollbar-width: thin; } @supports not (scrollbar-color: auto) { ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-accent-500); border: 3px solid var(--color-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent-600); } } /* 方眼の地（ヒーロー・セクション見出しの背景に使用）— ゆっくり斜めに無限スクロール */ .a11-graph-ground { background-image: linear-gradient(var(--a11-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--a11-grid-line) 1px, transparent 1px); background-size: 34px 34px; animation: a11-grid-drift 4.3s linear infinite; } @keyframes a11-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: -34px 34px, -34px 34px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---- レイアウト骨格（メディアクエリが必要な最小限のみクラス化） ---- */ .a11-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; } .a11-wrap--narrow { max-width: 880px; } .a11-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .a11-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .a11-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 56px; align-items: center; } /* グリッドの子は縮められるように（コード例の長い行が列幅を押し広げるのを防ぐ） */ .a11-hero-grid > *, .a11-cols-2 > *, .a11-cols-3 > * { min-width: 0; } .a11-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .a11-nav-toggle { display: none; } .a11-login-mobile { display: none; } .btn { white-space: nowrap; } /* アイコンのテーマ切替 */ /* ブランドロゴ: 配色に合わせてライト/ダーク版を切替 */ .a11-logo-on-dark { display: none !important; } .a11-logo-on-light { display: block !important; } html[data-a11-theme="dark"] .a11-logo-on-light { display: none !important; } html[data-a11-theme="dark"] .a11-logo-on-dark { display: block !important; } .a11-icon-sun { display: none; } html[data-a11-theme="dark"] .a11-icon-sun { display: block; } html[data-a11-theme="dark"] .a11-icon-moon { display: none; } @media (max-width: 1000px) { .a11-hero-grid { grid-template-columns: 1fr; gap: 40px; } } .a11-nav-list > li > a { white-space: nowrap; } /* ログインボタンはコンテンツ幅の外＝ヘッダー右余白に置く。 メニュー右端（コンテンツ幅右端）は配色切替トグルになる。 余白が足りない幅ではインラインに戻す。 */ .a11-login-desktop { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } @media (max-width: 1400px) { .a11-login-desktop { position: static; transform: none; } } /* ナビ折りたたみ: ログインボタン追加で幅が足りなくなるため 1080px から */ @media (max-width: 1080px) { .a11-nav-list { display: none !important; } .a11-nav-toggle { display: grid; } .a11-login-desktop { display: none; } .a11-login-mobile { display: block; } nav.is-open .a11-nav-list { display: grid !important; position: absolute; top: var(--a11-header-h); left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); padding: 12px 28px 22px !important; gap: 0 !important; } nav.is-open .a11-nav-list > li { border-bottom: 1px solid var(--color-divider); } nav.is-open .a11-nav-list > li > a { display: block; padding: 14px 2px; white-space: normal; } } @media (max-width: 860px) { .a11-cols-3, .a11-cols-2 { grid-template-columns: 1fr; } .a11-wrap { padding: 0 20px; } header .a11-wrap { gap: 12px !important; } .a11-brand-text { font-size: 16px !important; } .a11-footer-top { grid-template-columns: 1fr !important; gap: 32px !important; } .a11-footer-nav { grid-template-columns: repeat(2, 1fr) !important; } .a11-kv { grid-template-columns: 1fr !important; gap: 2px !important; } .a11-stats-3 { grid-template-columns: 1fr !important; } .a11-stats-3 > div { border-right: 0 !important; border-bottom: 1px solid var(--color-divider); } .a11-stats-3 > div:last-child { border-bottom: 0; } .a11-nav-list { display: none; } .a11-nav-toggle { display: grid; } .a11-login-desktop { display: none; } .a11-login-mobile { display: block; } nav.is-open .a11-nav-list { display: grid !important; position: absolute; top: var(--a11-header-h); left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); padding: 12px 28px 22px !important; gap: 0 !important; } nav.is-open .a11-nav-list > li { border-bottom: 1px solid var(--color-divider); } nav.is-open .a11-nav-list > li > a { display: block; padding: 14px 2px; } }