/* モバイルメニューの修正用CSS - !importantを使わずに高い優先度で対応 */

/* モバイル環境でのメニュー背景修正 */
@media (max-width: 768px) {
    /* より具体的なセレクターでnavの背景を指定 */
    body .header .nav.active {
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    
    body .header .nav.active .nav-list {
        background: transparent;
        padding: 20px;
    }
    
    /* モバイルメニューのX（バツ）ボタンを白色に */
    body .header .menu-toggle.active .bar {
        background-color: white;
    }
    
    /* モバイルメニューのリンクテキストを白色に */
    body .header .nav.active .nav-link {
        color: white;
    }
    
    body .header .nav.active .nav-link:hover {
        color: #f0f0f0;
    }
    
    body .header .nav.active .nav-link .nav-en,
    body .header .nav.active .nav-link .nav-jp {
        color: inherit;
    }

    /* サブメニューも白文字に */
    body .header .nav.active .submenu {
        background: rgba(0, 0, 0, 0.95);
    }
    
    body .header .nav.active .submenu-link {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    body .header .nav.active .submenu-link:hover {
        color: #f0f0f0;
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* モバイルバナーのグリッド調整 - navigation-integrated.cssで管理 */
    /*
    body .shipping-banner .container .shipping-banner-content {
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        gap: 3px;
        align-items: center;
        padding: 0 8px;
    }

    body .shipping-banner .container .shipping-banner-content .shipping-info-block {
        grid-column: 1;
        justify-self: start;
        text-align: left;
        overflow: hidden;
    }

    body .shipping-banner .container .shipping-banner-content .shipping-info-block .shipping-info {
        white-space: nowrap;
        font-size: 0.7rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body .shipping-banner .container .shipping-banner-content .mobile-sns-block.mobile-only {
        display: block;
        grid-column: 2;
        justify-self: end;
    }

    body .shipping-banner .container .shipping-banner-content .user-block {
        grid-column: 3;
        justify-self: end;
    }

    body .shipping-banner .container .shipping-banner-content .cart-block {
        grid-column: 4;
        justify-self: end;
    }
    */
}