/* ===================================================================== SocialBridge 共通トンマナ基盤 /_shared/sb-tonmana.css 方針: 骨格（フォント・余白・形・インタラクション）を統一し、各ページのブランドアクセント色は温存する。安全設計: font-family のみ !important で決定的に統一。色は原則ページ側を勝たせる（ダーク背景ページの文字消え防止）。読み込み: 各ページの末尾でする。 ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap'); :root{ /* Typography */ --sb-font: 'Inter','Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif; /* Neutrals / ink（明示利用向け。強制はしない） */ --sb-ink:#0F1E3D; --sb-body:#3D4350; --sb-muted:#7A828F; --sb-line:#E3E8EF; --sb-surface:#F7F8FA; --sb-white:#FFFFFF; /* Corporate primary */ --sb-primary:#146FB9; --sb-primary-ink:#0C4D80; /* Shape / rhythm */ --sb-radius:14px; --sb-radius-sm:10px; --sb-radius-pill:999px; --sb-shadow:0 6px 24px rgba(15,30,61,.08); --sb-shadow-lg:0 16px 48px rgba(15,30,61,.12); --sb-maxw:1120px; /* Accent（既定はコーポレート青。body[data-brand]で切替） */ --sb-accent:var(--sb-primary); --sb-accent-2:var(--sb-primary-ink); } /* ブランド別アクセント（で切替） */ body[data-brand="abukatsu"] { --sb-accent:#C8A400; --sb-accent-2:#E8B339; } body[data-brand="korea"] { --sb-accent:#FF8A93; --sb-accent-2:#F4A83C; } body[data-brand="traceability"] { --sb-accent:#C9A227; --sb-accent-2:#1A8754; } /* ---- フォント統一（骨格の要）------------------------------------------ font-family のみ !important。アイコンフォント（.material-icons / .fa 等のクラス指定）はここに含めないので影響しない。 */ body, h1,h2,h3,h4,h5,h6, p, a, li, ul, ol, span, small, strong, em, b, label, button, input, select, textarea, blockquote, th, td, dt, dd, figcaption, summary, caption { font-family: var(--sb-font) !important; } /* ---- ベース正規化（gentle: !important なし＝ページ側が勝つ）---------- */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* 見出しのリズムのみ統一（色は触らない＝ダーク/ライト両対応） */ h1,h2,h3,h4{ letter-spacing:-0.01em; line-height:1.25; } h1{ font-weight:900; } h2{ font-weight:800; } h3{ font-weight:700; } /* インタラクションのトーン（アクセント連動・背景色は変えない） */ ::selection{ background:var(--sb-accent); color:#fff; } :focus-visible{ outline:2px solid var(--sb-accent); outline-offset:2px; } /* ネイティブ button / フォーム部品の最低限の形（class指定があればそちらが勝つ） */ button{ font-weight:700; border-radius:var(--sb-radius-sm); cursor:pointer; } input,select,textarea{ border-radius:var(--sb-radius-sm); }