:root {
    /* カラーパレット */
    --primary-color: #00A4B3;
    --primary-light: #B4E0E3;
    --primary-dark: #007A85;
    --accent-color: #00A4B3;
    
    /* テキストカラー */
    --text-color: #333333;
    --text-light: #6c757d;
    --text-muted: #999999;
    
    /* 背景色 */
    --bg-light: #f9f9f9;
    --bg-white: #ffffff;
    --bg-dark: #333333;
    
    /* ユーティリティカラー */
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    
    /* エフェクト */
    --shadow: 0 5px 15px rgba(0,0,0,0.05);
    --shadow-hover: 0 8px 20px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
    
    /* フォントサイズ変数 */
    --font-xl: 2.5rem;
    --font-lg: 2rem;
    --font-md: 1.5rem;
    --font-sm: 1.2rem;
    --font-xs: 1rem;
    --font-xxs: 0.9rem;
    
    /* スペーシング変数 */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --spacing-section: 80px;
    
    /* ブレイクポイント */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}