/* ボディ要素の基本スタイルリセット */
body {
  margin: 0;
  padding: 0;
}

/* アプリケーションのルートコンテナスタイル */
.app {
  display: flex;
  flex-direction: column; /* 子要素を縦方向に配置 */
  min-height: 100vh; /* ビューポートの高さいっぱいに広げる */
  background-color: #f5f5f5; /* 薄いグレーの背景色 */
}

/* メインコンテンツエリアのスタイル */
.main-content {
  flex: 1; /* 利用可能なスペースをすべて使用 */
  padding: 24px;
  width: 100%;
  max-width: 1200px; /* コンテンツの最大幅を制限 */
  margin: 0 auto; /* 中央揃え */
}

/* Material UIのコンテナコンポーネントのカスタマイズ */
.MuiContainer-root {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Material UIのペーパーコンポーネントのカスタマイズ */
.MuiPaper-root {
  background-color: white; /* 白背景を確保 */
}