/* 1. 画面全体の高さを基準にするための準備 */
html, body {
  height: 100%;
  margin: 0;
}

/* 2. body全体を縦並びのFlexboxにする */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 画面全体の高さを最低限確保する */
}

/* 3. メインコンテンツを自動で引き伸ばす */
.main-content {
  flex: 1; /* 残った余白をすべてこのエリアが埋めるため、フッターが最下部に押し出されます */
}