/* PC版ではタブバーを非表示 */
.mobile-tabbar {
    display: none;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    /* スマホ用タブバー */
    .mobile-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--mobile-tabbar-bg);
        display: flex;
        z-index: 1000;
        box-shadow: var(--shadow-top-md);
    }
    
    .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px;
        text-decoration: none;
        color: var(--text01);
        font-size: 12px;
        transition: color 0.3s ease;
    }
    
    .tab-item i {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .tab-item.active {
        color: var(--text01);
    }
    
    .tab-item:hover {
        color: var(--hover01);
    }
    
    /* タブバーの下にコンテンツが隠れないように */
    body {
        padding-bottom: 80px;
    }
}