body {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden; /* 横スクロールを防止 */
}

/* サイドバー */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh; /* 画面の高さ100% */
    background: #343a40; /* Bootstrapのダークカラー */
    color: #fff;
    position: sticky; /* スクロールしても追従 */
    top: 0;
}

/* サイドバーのリンク */
#sidebar .nav-link {
    color: #adb5bd; /* やや薄い白 */
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* アクティブな（今いるページの）リンク */
#sidebar .nav-link.active {
    color: #fff;
    background-color: #007bff; /* Bootstrapのプライマリカラー */
}

#sidebar .nav-link:hover {
    color: #fff;
    background-color: #495057; /* ホバー時の背景色 */
}

/* メインコンテンツエリア */
#content {
    width: 100%; /* 残りの幅すべて */
    padding: 30px;
    background-color: #f8f9fa; /* Bootstrapのライトグレー */
    overflow-y: auto; /* コンテンツが多ければここだけスクロール */
}