/** * CSS Variables - Design System * 深みのあるダークグリーン基調の洗練されたデザインシステム * Inspired by premium editorial design */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700&display=swap'); :root { /* ============================================ カラーパレット - Deep Forest Premium & Professional ============================================ */ /* === Primary Colors === */ --forest-900: #0d1f17; /* 最も深いグリーン */ --forest-800: #132b1e; /* ダークフォレスト */ --forest-700: #1a3d2a; /* プライマリダーク */ --forest-600: #234e38; /* プライマリ */ --forest-500: #2d6047; /* アクセント */ --forest-400: #3d7a5c; /* ミディアム */ --forest-300: #5a9976; /* ライト */ --forest-200: #89c4a3; /* ソフト */ --forest-100: #c4e3d2; /* ペール */ --forest-50: #e8f4ed; /* 最も薄い */ /* === Neutral Colors === */ --neutral-950: #0a0c0b; /* ほぼ黒 */ --neutral-900: #141816; /* 深いダーク */ --neutral-800: #1e2422; /* ダーク */ --neutral-700: #2d3632; /* チャコール */ --neutral-600: #3d4843; /* グレー濃 */ --neutral-500: #5a655f; /* ミディアムグレー */ --neutral-400: #7a857f; /* グレー */ --neutral-300: #a8b0ab; /* ライトグレー */ --neutral-200: #d4d9d6; /* ペールグレー */ --neutral-100: #eef0ef; /* オフホワイト */ --neutral-50: #f8f9f8; /* ほぼ白 */ --white: #ffffff; /* === Accent Colors === */ --gold-400: #c9a959; /* ゴールドアクセント */ --gold-500: #b8943f; /* ゴールドダーク */ /* === Category Accent Tones === */ --cat-tone-1: #1a3d2a; /* 最も深い緑 */ --cat-tone-2: #234e38; /* ダークモス */ --cat-tone-3: #2d6047; /* フォレスト */ --cat-tone-4: #3d7a5c; /* ジェイド */ --cat-tone-5: #4a8d6b; /* ミディアムグリーン */ --cat-tone-6: #5a9976; /* セージ */ /* ============================================ セマンティックカラー ============================================ */ /* 背景 */ --bg-main: var(--white); --bg-sub: var(--neutral-50); --bg-soft: var(--neutral-100); --bg-dark: var(--forest-800); --bg-darker: var(--forest-900); /* テキスト */ --text-main: var(--neutral-800); --text-sub: var(--neutral-600); --text-muted: var(--neutral-500); --text-invert: var(--white); --text-accent: var(--forest-600); /* アクセント */ --accent-main: var(--forest-600); --accent-strong: var(--forest-700); --accent-light: var(--forest-400); --accent-soft: rgba(35, 78, 56, 0.06); --accent-softer: rgba(35, 78, 56, 0.03); /* ボーダー */ --border-main: rgba(30, 43, 30, 0.12); --border-soft: rgba(30, 43, 30, 0.06); --border-strong: rgba(30, 43, 30, 0.18); --border-accent: var(--forest-500); /* 状態カラー */ --state-info: #2563eb; --state-success: var(--forest-500); --state-warning: var(--gold-500); --state-danger: #b91c1c; /* === レガシー互換マッピング === */ --color-base-bg: var(--bg-main); --color-sub-bg: var(--bg-sub); --color-bg-soft: var(--bg-soft); --color-main: var(--text-main); --color-accent: var(--accent-main); --color-accent-strong: var(--accent-strong); --color-accent-soft: var(--accent-soft); --color-text-primary: var(--text-main); --color-text-secondary: var(--text-sub); --color-text-light: var(--text-muted); --color-border: var(--border-soft); --color-border-strong: var(--border-main); /* ============================================ スペーシングシステム ============================================ */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-xxl: 4.5rem; /* 72px */ --space-xxxl: 6rem; /* 96px */ --space-section: 8rem; /* 128px - 大きなセクション間 */ /* コンテナ幅 */ --container-width: 1440px; --container-narrow: 800px; --container-content: 720px; /* ============================================ タイポグラフィ ============================================ */ --font-family-display: 'Cormorant Garamond', 'Yu Mincho', 'Hiragino Mincho ProN', serif; --font-family-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-heading: var(--font-family-display); --font-family-body: var(--font-family-base); /* フォントサイズ */ --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-xxl: 2rem; /* 32px */ --font-size-xxxl: 2.75rem; /* 44px */ --font-size-display: 3.5rem; /* 56px */ --font-size-hero: 4.5rem; /* 72px */ /* 行送り */ --line-height-tight: 1.25; --line-height-snug: 1.4; --line-height-base: 1.7; --line-height-relaxed: 1.85; --line-height-loose: 2; /* フォントウェイト */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* レタースペーシング */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.12em; /* ============================================ 角丸・シャドウ ============================================ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* シャドウ - より洗練された影 */ --shadow-xs: 0 1px 2px rgba(13, 31, 23, 0.04); --shadow-sm: 0 2px 4px rgba(13, 31, 23, 0.04), 0 1px 2px rgba(13, 31, 23, 0.02); --shadow-md: 0 4px 16px rgba(13, 31, 23, 0.06), 0 2px 4px rgba(13, 31, 23, 0.03); --shadow-lg: 0 12px 40px rgba(13, 31, 23, 0.08), 0 4px 12px rgba(13, 31, 23, 0.04); --shadow-xl: 0 20px 60px rgba(13, 31, 23, 0.12), 0 8px 24px rgba(13, 31, 23, 0.06); --shadow-hover: 0 16px 48px rgba(35, 78, 56, 0.12), 0 6px 16px rgba(35, 78, 56, 0.06); --shadow-card: 0 1px 3px rgba(13, 31, 23, 0.04), 0 0 0 1px rgba(13, 31, 23, 0.02); --shadow-card-hover: 0 8px 32px rgba(35, 78, 56, 0.1), 0 4px 12px rgba(35, 78, 56, 0.05); /* グラデーション */ --gradient-hero: linear-gradient(135deg, var(--forest-700) 0%, var(--forest-900) 100%); --gradient-hero-soft: linear-gradient(135deg, var(--forest-600) 0%, var(--forest-800) 100%); --gradient-subtle: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-sub) 100%); --gradient-dark: linear-gradient(180deg, var(--forest-800) 0%, var(--forest-900) 100%); --gradient-radial: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%); --gradient-text: linear-gradient(135deg, var(--forest-500) 0%, var(--forest-700) 100%); /* ============================================ アニメーション ============================================ */ --transition-instant: 0.1s ease-out; --transition-fast: 0.2s ease-out; --transition-base: 0.3s ease-out; --transition-slow: 0.5s ease-out; --transition-slower: 0.7s ease-out; --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============================================ z-index レイヤー ============================================ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* ============================================ アスペクト比 ============================================ */ --aspect-video: 16 / 9; --aspect-square: 1 / 1; --aspect-portrait: 3 / 4; } /* ============================================ レスポンシブ調整 ============================================ */ @media (max-width: 1024px) { :root { --font-size-hero: 3.5rem; --font-size-display: 2.75rem; --font-size-xxxl: 2.25rem; --space-section: 6rem; } } @media (max-width: 768px) { :root { --font-size-hero: 2.5rem; --font-size-display: 2rem; --font-size-xxxl: 1.875rem; --font-size-xxl: 1.5rem; --font-size-xl: 1.25rem; --space-section: 4rem; --space-xxxl: 4rem; --space-xxl: 3rem; } } @media (max-width: 480px) { :root { --font-size-hero: 2rem; --font-size-display: 1.75rem; --space-section: 3rem; } }