/* ============================================ ラボリ社内ポータル デザイントークン v3.0 civic/institutional トーンに刷新 使用法: 全ページので読み込む ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=BIZ+UDPGothic:wght@400;700&display=swap'); :root { /* ── Surface hierarchy (cool neutrals) ── */ --bg-page: #F1F6F9; --bg-subtle: #F8FBFC; --bg-card: #FFFFFF; --bg-inset: #EDF3F6; --bg-elevated: #FFFFFF; /* ── Ink ramp (10 step) ── */ --ink-900: #0E2A33; --ink-800: #1F3A44; --ink-700: #2E4954; --ink-600: #4B6572; --ink-500: #6B8592; --ink-400: #94A9B4; --ink-300: #B9C7CF; --ink-200: #D7E0E5; --ink-100: #E9EFF2; --ink-50: #F4F7F9; /* ── Primary — teal-blue ── */ --primary-900: #144552; --primary-800: #1E6071; --primary-700: #2A7F94; --primary-600: #3A9BB3; /* brand */ --primary-500: #4DB5CC; --primary-400: #7DCBDC; --primary-300: #ADDFEA; --primary-200: #D3ECF2; --primary-100: #E5F3F7; --primary-50: #F2F9FB; /* ── Semantic ── */ --ok-700: #046C4E; --ok-600: #047857; --ok-500: #059669; --ok-100: #D1FAE5; --ok-50: #ECFDF5; --warn-700: #92400E; --warn-600: #D97706; --warn-100: #FEF3C7; --warn-50: #FFFBEB; --err-700: #B91C1C; --err-600: #DC2626; --err-100: #FEE2E2; --err-50: #FEF2F2; --info-600: #2A7F94; --info-100: #D3ECF2; --info-50: #E5F3F7; /* ── Area colors (tag/dot のみ) ── */ --area-work: #3A8FB0; /* 就労 */ --area-child: #3AA08B; /* 児童 */ --area-life: #C0667F; /* 生活 */ --area-care: #9B6BA0; /* 介護 */ --area-consult: #B8932F; /* 相談 */ --area-visit: #C97045; /* 訪問 */ /* ── Radii ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ── Shadows (3 tier) ── */ --s-flat: 0 0 0 1px #E1E8EC inset; --s-1: 0 1px 2px rgba(14,42,51,.04), 0 0 0 1px rgba(14,42,51,.06); --s-2: 0 2px 8px rgba(14,42,51,.05), 0 0 0 1px rgba(14,42,51,.06); --s-3: 0 12px 32px rgba(14,42,51,.10), 0 0 0 1px rgba(14,42,51,.08); --s-focus: 0 0 0 3px rgba(58,155,179,.30); /* ── Typography ── */ --ff-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif; --ff-display: "BIZ UDPGothic", "Noto Sans JP", system-ui, sans-serif; --ff-num: "BIZ UDPGothic", "Noto Sans JP", "SF Pro Text", system-ui, sans-serif; --ff-mono: "JetBrains Mono", "Consolas", "SF Mono", ui-monospace, monospace; /* Type scale */ --t-display: 28px; --t-h1: 22px; --t-h2: 18px; --t-h3: 15px; --t-body: 14px; --t-sm: 13px; --t-xs: 12px; /* ── Spacing (4px base) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Layout ── */ --sidebar-width: 240px; --sidebar-width-collapsed: 60px; --header-height: 56px; --content-max-w: 1280px; --content-padding: 28px; /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* ============================================ 後方互換エイリアス (旧トークン名) 段階移行のため残す。新規コードでは --ink-*, --bg-* を使うこと ============================================ */ --gray-50: var(--ink-50); --gray-100: var(--ink-100); --gray-200: var(--ink-200); --gray-300: var(--ink-300); --gray-400: var(--ink-400); --gray-500: var(--ink-500); --gray-600: var(--ink-600); --gray-700: var(--ink-700); --gray-800: var(--ink-800); --gray-900: var(--ink-900); --success: var(--ok-500); --success-bg: var(--ok-50); --success-border: #A7F3D0; --warning: var(--warn-600); --warning-bg: var(--warn-50); --warning-border: #FDE68A; --error: var(--err-600); --error-bg: var(--err-50); --error-border: #FECACA; --info: var(--primary-600); --info-bg: var(--primary-50); --info-border: var(--primary-200); --cat-shuro: var(--area-work); --cat-jidou: var(--area-child); --cat-seikatsu: var(--area-life); --cat-kaigo: var(--area-care); --cat-soudan: var(--area-consult); --cat-houmon: var(--area-visit); --font-sans: var(--ff-sans); --font-mono: var(--ff-mono); --text-2xl: 24px; --text-xl: 20px; --text-lg: 17px; --text-base: 14px; --text-sm: 13px; --text-xs: 12px; --leading-normal: 1.55; --leading-relaxed: 1.7; --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-full: var(--r-pill); --shadow-sm: var(--s-1); --shadow-md: var(--s-2); --shadow-lg: var(--s-3); } /* ── ベースリセット ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--ff-sans); font-size: var(--t-body); line-height: 1.55; color: var(--ink-900); background: var(--bg-page); -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; } a { color: var(--primary-700); text-decoration: none; } a:hover { text-decoration: underline; } /* Focus */ :focus-visible { outline: none; box-shadow: var(--s-focus); border-radius: var(--r-sm); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: var(--r-pill); border: 2px solid var(--bg-page); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-300); } /* ── ユーティリティ ── */ .num { font-family: var(--ff-num); font-variant-numeric: tabular-nums; } .mono { font-family: var(--ff-mono); } .tabular-nums{ font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; } .text-right { text-align: right; } .text-center { text-align: center; } .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* アクセントバー (公開サイト由来の装飾) */ .accent-bar { display: block; width: 40px; height: 3px; background: var(--primary-500); border-radius: 2px; margin-bottom: var(--sp-4); } /* table scroll on mobile */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 820px) { :root { --content-padding: 14px; } }