/* PCサイズ(1024px以上)でのスタイル調整 */
        @media (min-width: 1024px) {
            /* メニュー展開時、メインコンテンツの右側に余白を作って重なりを防ぐ */
            body.menu-open main {
                margin-right: 320px;
                transition: margin-right 0.3s ease-in-out;
            }
            /* PCではサイドメニューの背景オーバーレイを非表示にする */
            body.menu-open #sideMenuOverlay {
                display: none !important;
            }
        }
        /* Google Fontsの読み込み */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&display=swap');
        /* フォントの適用とスムーズスクロール設定 */
        body { font-family: 'Inter', 'Noto Sans JP', sans-serif; scroll-behavior: smooth; }
        
        /* 期限に余裕がある時のカードの左端ボーダー設定 */
        .status-safe { border-left: 4px solid #64748b; } 
        /* 金額確認が必要な時の警告色設定 */
        .status-needs-confirm { border-left: 4px solid #f59e0b; background-color: #fffbeb; } 
        /* 期限間近(14日以内)の危険色とアニメーション設定 */
        .status-danger { border-left: 4px solid #ea580c; background-color: #fff7ed; animation: pulse-border 2s infinite; } 
        /* 期限切れの赤色設定 */
        .status-expired { border-left: 4px solid #dc2626; background-color: #fef2f2; }

        /* ダークモード時の各ステータス背景色設定 */
        .dark .status-needs-confirm { background-color: #2d1616; background-color: #2d2a1e; }
        .dark .status-danger { background-color: #2d1d16; }
        .dark .status-expired { background-color: #2d1616; }

        /* 期限間近カードのボーダーが明滅するアニメーション定義 */
        @keyframes pulse-border {
            0% { border-left-color: #ea580c; }
            50% { border-left-color: #fb923c; }
            100% { border-left-color: #ea580c; }
        }

        /* ナビゲーションバーの透過・ぼかし（グラスモーフィズム）設定 */
        .glass-nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
        }
        /* ダークモード時のナビゲーションバー設定 */
        .dark .glass-nav {
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid rgba(51, 65, 85, 0.8);
        }

        /* カードホバー時の浮き上がりアニメーション */
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
        }

        /* モーダル表示時のふわっとした登場アニメーション */
        .modal-enter { animation: modal-in 0.3s ease-out forwards; }
        @keyframes modal-in {
            from { opacity: 0; transform: scale(0.95) translateY(-10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* サイドメニューのスライドイン設定 */
        #sideMenu {
            transition: transform 0.3s ease-in-out;
            transform: translateX(100%);
        }
        /* サイドメニューが開いている状態 */
        #sideMenu.open {
            transform: translateX(0);
        }
        
        /* 履歴項目の境界線設定 */
        .history-item {
            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
        }
        .dark .history-item {
            border-bottom: 1px solid rgba(51, 65, 85, 0.5);
        }