body {
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    /* すべての数字をRubikフォントに */
    @supports (font-variant-numeric: tabular-nums) {
        body {
            font-feature-settings: "pnum" on, "lnum" on;
        }
    }
    
    /* 数字を含む要素に自動的にRubikを適用 */
    body * {
        font-family: inherit;
    }
    
    /* 数字専用のクラス - 必要に応じて使用 */
    .numeric {
        font-family: 'Rubik', sans-serif !important;
    }
        /* PWA用カスタムスタイル */
        .pwa-install-banner {
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        /* オフライン表示 */
        .offline-indicator {
            background: linear-gradient(45deg, #ef4444, #dc2626);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
        
        /* スライダーのスタイル */
        .slider::-webkit-slider-thumb {
            appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .slider::-moz-range-thumb {
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        /* アイコン用 */
        .lucide {
            width: 1em;
            height: 1em;
            display: inline-block;
            vertical-align: middle;
        }