/* 600px以下になっても横幅を固定し、はみ出す場合はスクロールさせる */
.container {
  min-width: 600px; 
  overflow-x: auto; /* はみ出した時に横スクロールを出す */
}

/* 画面全体を固定してスクロールさせない */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* 全体のスクロールを禁止 */
}

/* 全体を囲むコンテナを縦に並べる設定 */
.main-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 画面いっぱいの高さ */
}

/* 上部メニューエリア（高さ固定） */
.top-menu {
    flex-shrink: 0; /* 縮まないように固定 */
    z-index: 1000;
    background-color: white; /* 下が透けないように背景色を指定 */
    border-bottom: 1px solid #ddd;
}

/* コンテンツ表示エリア（ここだけスクロール） */
.scrollable-content {
    flex-grow: 1; /* 残りのスペースをすべて使う */
    overflow-y: auto; /* 縦方向にスクロールを許可 */
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかに */
    padding: 15px;
}