@media (max-width: 1920px) {
    /* 1. コンテナのレイアウト調整 */
    .container {
        flex-direction: column;
        padding: 20px;
    }

    /* 2. メニューボタンを表示 */
    .menu-btn {
        display: block;
        z-index: 200;
    }

    /* 3. サイドバーを「ドロワーメニュー」化 */
    .sidebar {
        position: fixed;      /* 画面に固定 */
        top: 0;
        left: 0;
        width: 80%;           /* 画面の8割くらいの幅 */
        max-width: 300px;
        height: 100vh;        /* 画面の高さ一杯 */
        padding: 80px 20px 20px; /* 上部はヘッダーの分あける */
        
        background-color: var(--color-sidebar-bg); 
        backdrop-filter: blur(1px); /* すりガラス効果 */
        
        z-index: 150; /* ヘッダーより上、ボタンより下 */
        
        /* アニメーション設定 */
        transform: translateX(-100%); /* 画面の左外へ隠す */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* "にゅっ"と出る動き */
        
        /* 影をつけて浮いている感を出す */
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
        border-right: 1px solid var(--color-accent-vivid1); /* 右端にアクセント線 */
    }

    /* クラスがついたら表示（スライドイン） */
    .sidebar.active {
        transform: translateX(0);
    }

    /* 4. メインコンテンツの調整 */
    .main-content {
        padding: 0;
        width: 100%;
    }
    
    /* 画像等の調整（既存） */
    .float-right, .image-stack {
        float: none;
        display: block;
        margin: 20px auto;
        width: 100%;
        align-items: center;
    }
    .article-img.is-expanded {
        max-width: 100%;
    }
}