/* ============================================ デザイントークン - CSS カスタムプロパティ 株式会社PHOSS コーポレートサイト ============================================ */ :root { /* ---------------------------------------- カラーパレット ---------------------------------------- */ /* プライマリ（紺色系 - 信頼感・プロフェッショナル） */ --color-primary-900: #0a1628; --color-primary-800: #0d1f3c; --color-primary-700: #122752; --color-primary-600: #1a3668; --color-primary-500: #1e4080; /* メインブランドカラー */ --color-primary-400: #2a5299; --color-primary-300: #3d6db3; --color-primary-200: #6e97cc; --color-primary-100: #b3cce6; --color-primary-50: #e8f0f8; /* アクセント（ミントグリーン系 - ロゴのグリーンカラー） */ --color-accent-600: #28b085; --color-accent-500: #3ecda0; /* メインアクセントカラー */ --color-accent-400: #5dd6b0; --color-accent-300: #7de2c2; --color-accent-100: #c8f4e8; /* ニュートラル */ --color-gray-900: #111827; --color-gray-800: #1f2937; --color-gray-700: #374151; --color-gray-600: #4b5563; --color-gray-500: #6b7280; --color-gray-400: #9ca3af; --color-gray-300: #d1d5db; --color-gray-200: #e5e7eb; --color-gray-100: #f3f4f6; --color-gray-50: #f9fafb; /* セマンティックカラー */ --color-white: #ffffff; --color-black: #000000; --color-success: #16a34a; --color-error: #dc2626; --color-warning: #d97706; /* ---------------------------------------- テキストカラー ---------------------------------------- */ --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-600); --text-muted: var(--color-gray-500); /* WCAG AA準拠: #6b7280 on white = 4.6:1 */ --text-inverse: var(--color-white); --text-accent: var(--color-primary-500); --text-link: var(--color-primary-500); --text-link-hover:var(--color-accent-500); /* ---------------------------------------- 背景カラー ---------------------------------------- */ --bg-base: var(--color-white); --bg-subtle: var(--color-gray-50); --bg-muted: var(--color-gray-100); --bg-primary: var(--color-primary-500); --bg-primary-dark:var(--color-primary-800); --bg-accent: var(--color-accent-500); /* ---------------------------------------- フォント ---------------------------------------- */ --font-family-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; --font-family-heading: var(--font-family-base); --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* フォントサイズ（rem基準 - 1rem = 16px） */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 3rem; /* 48px */ --font-size-5xl: 3.75rem; /* 60px */ /* フォントウェイト */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --font-weight-black: 900; /* 行間 */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed:1.75; --line-height-loose: 2; /* 文字間隔 */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ---------------------------------------- スペーシング（4px ベースグリッド） ---------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------- 角丸（ボーダーラジウス） ---------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* 完全な楕円 */ /* ---------------------------------------- ボーダー ---------------------------------------- */ --border-width-thin: 1px; --border-width-normal: 2px; --border-width-thick: 4px; --border-color-base: var(--color-gray-200); --border-color-muted: var(--color-gray-100); --border-color-strong: var(--color-gray-300); /* ---------------------------------------- シャドウ ---------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ---------------------------------------- トランジション ---------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------- Z-index レイヤー ---------------------------------------- */ --z-base: 0; --z-above: 10; --z-dropdown:100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* ---------------------------------------- ブレークポイント（参照用 - メディアクエリ内で使用） sp: 〜767px / tab: 768px〜1023px / pc: 1024px〜 ---------------------------------------- */ /* ---------------------------------------- コンテナ幅 ---------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-padding: var(--space-6); /* 24px */ /* ---------------------------------------- ヘッダー ---------------------------------------- */ --header-height: 72px; --header-height-sp: 60px; --header-bg: rgba(255, 255, 255, 1); --header-bg-scrolled: rgba(255, 255, 255, 0.97); --header-backdrop-blur:12px; /* ---------------------------------------- アクセシビリティ ---------------------------------------- */ --focus-ring-color: var(--color-accent-500); --focus-ring-width: 3px; --focus-ring-offset: 2px; }