/* Mobile header customizations */

/* spnav_bottom のフォントサイズ統一と余白調整 (競合解決) */
@media (max-width: 768px) {
    .spnav_bottom a,
    .spnav_bottom .nav_menu {
        font-size: 12px !important;
        padding: 7px 2px !important;
    }

    .spnav_bottom {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}

@media (max-width: 767px) {
    /* 1. モバイルヘッダーボタンを縦型レイアウトに変更 */
    .mobile-header-btn {
        background: none !important;
        border: none !important;
        padding: 0 8px !important;
        margin: 0 !important;
        text-decoration: none !important;
        color: #333 !important;
        font-size: 12px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        text-align: center !important;
    }

    .mobile-header-btn:hover {
        text-decoration: none !important;
        background: none !important;
        transform: none !important;
        color: #e91e63 !important;
    }

    .mobile-header-btn .fa {
        display: block !important;
        font-size: 16px !important;
        margin: 0 0 2px 0 !important;
    }

    .mobile-header-btn .small {
        font-size: 10px !important;
        font-weight: normal !important;
        display: block !important;
        line-height: 1 !important;
    }

    /* ヘッダートップの余白調整 */
    .header-top {
        padding: 5px 0 !important;
    }

    /* 2. ロゴの上下余白を削除 */
    .logo-section {
        margin: 0 !important;
        padding: 0 !important;
    }

    .logo-section h1 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .logo-section img {
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 3. ピンクメニューの文字サイズ調整 */
    .mobile-menu-item-unique .menu-text {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .mobile-menu-item-unique i {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    .mobile-menu-item-unique .menu-subtext {
        font-size: 11px !important;
    }

    /* 4. ピンクメニューの余白を最適化 */
    .mobile-menu-item-unique {
        padding: 10px 2px !important;
        text-align: center !important;
    }

    .mobile-menu-grid-unique {
        gap: 1px !important;
        padding: 3px !important;
    }

    /* モバイルフルスクリーンメニューの余白調整 */
    .mobile-fullscreen-menu-unique {
        padding: 40px 5px 10px 5px !important;
    }

    /* ボディのパディング調整 - メニューの高さに合わせて増加 */
    body {
        padding-top: 100px !important;
    }

    /* メインコンテンツの追加余白 */
    .main {
        padding-top: 6px !important;
    }

    /* ヘッダーコンテナの高さ調整 */
    .header-container {
        padding: 0 !important;
    }

    /* ナビゲーションバーの調整 */
    .navbar-custom {
        min-height: auto !important;
        padding: 0 !important;
    }
}