/* パンくず用CSS */
.breadcrumb-item + .breadcrumb-item::before {
    content: '>';
}
.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
/* パンくず用CSSここまで */

/* レスポンシブ対応 */
/* スマホ用（767px以下） */
@media (max-width: 767px) {
    /* サイドバーを上部に配置 */
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 70px !important;
        overflow: hidden !important;
        z-index: 1040 !important;
        margin: 0 !important;
        transition: max-height 0.3s ease !important;
    }
    
    /* スマホ時のヘッダーパディング調整 */
    #sidebar .sidebar-header {
        padding: 1rem !important;
        cursor: pointer;
    }
    
    /* サイドバーが開いた状態 */
    #sidebar.mobile-open {
        max-height: 100vh !important;
        height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* サイドバーのメニュー部分をスクロール可能に */
    #sidebar.mobile-open .sidebar-menu {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        max-height: calc(100vh - 70px) !important;
    }
    
    /* サイドバーが開いている時、ヘッダーを固定 */
    #sidebar.mobile-open .sidebar-header {
        flex-shrink: 0 !important;
    }
    
    /* タイトル部分にメニューアイコンを追加 */
    #sidebar .sidebar-header::after {
        content: '\f0c9';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        color: white;
        font-size: 1.2rem;
    }
    
    /* サイドバーが開いている時はアイコンを変更 */
    #sidebar.mobile-open .sidebar-header::after {
        content: '\f00d';
    }
    
    /* サイドバーのメニュー部分（カスタムクラス用） */
    #sidebar .sidebar-menu {
        display: none;
        overflow: hidden;
    }
    
    #sidebar.mobile-open .sidebar-menu {
        display: block !important;
        overflow-y: auto !important;
    }
    
    /* トグルボタンを非表示 */
    #sidebarToggle {
        display: none !important;
    }
    
    /* アプリコンテナを縦並びに */
    #app {
        display: block !important;
        padding-top: 70px !important;
    }
    
    /* メインコンテンツの幅 */
    #mainContent {
        width: 100%;
    }
}

/* PC用（768px以上） */
@media (min-width: 768px) {
    #sidebar {
        position: relative !important;
    }
}