body {
    font-family: sans-serif;
    padding-top: 56px; /* 固定ナビゲーションバーの高さ分だけpadding */
    background-color: #f8f9fa;
    display: flex; /* Flexboxレイアウトを適用 */
}

.bg-primary {
    background-color: #3498db !important; /* 画像の青色に近い色 */
}

.bg-light {
    background-color: #ecf0f1 !important; /* 画像の薄い灰色に近い色 */
}

.bg-secondary {
    background-color: #bdc3c7 !important; /* 画像の濃い灰色に近い色 */
}

.list-group-item {
    border-color: #ddd;
    cursor: pointer; /* クリックできることを示す */
}

.list-group-item.active {
    background-color: #3498db !important; /* クリック時の青色 */
    color: white !important;
}

.sidebar {
    display: block !important;
    position: fixed;
    top: 56px;
    left: 0;
    width: 20%; /* 幅を調整 */
    height: calc(100vh - 56px);
    padding: 15px;
    overflow-y: auto;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.main-content {
    flex-grow: 1; /* 残りのスペースを埋める */
    padding: 15px;
    margin-left: 20%; /* sidebarの幅だけ右にずらす */
    display: flex;
    justify-content: center; /* 中央寄せ */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.app-list {
    width: 80%; /* リストの幅を調整 */
}

.detail-panel {
    display: block !important;
    position: fixed;
    top: 56px;
    right: 0;
    width: 20%; /* 幅を調整 */
    height: calc(100vh - 56px);
    padding: 15px;
    overflow-y: auto;
    border-left: 1px solid #ccc; /* 左に区切り線 */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.row {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    flex-grow: 1; /* 親要素のflexに合わせて広がる */
}

.row > .col-md-3,
.row > .col-md-9 {
    flex: 0 0 auto;
    max-width: none;
}

/* スマホ向けのスタイル */
@media (max-width: 767.98px) {
    body {
        padding-top: 56px;
        display: block; /* Flexboxレイアウトを解除 */
    }

    .sidebar {
        position: fixed;
        top: 56px;
        left: -80%;
        width: 80%;
        height: calc(100% - 56px);
        background-color: #ecf0f1;
        z-index: 1002;
        padding: 15px;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .sidebar.open {
        left: 0;
    }

    .main-content {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0; /* sidebarのずれをなくす */
        display: block; /* Flexboxレイアウトを解除 */
    }

    .app-list {
        width: 100%;
    }

    .detail-panel {
        display: none !important;
    }

    .navbar-toggler {
        border: none;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }

    .overlay.active {
        display: block;
    }