/* ページ全体の余白をリセットし、画面全体の高さを確保 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 画面の縦横ど真ん中に要素を配置する設定 */
body {
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center;     /* 縦方向の中央揃え */
  background-color: #f5f5f5; /* 背景色（任意） */
}

/* コンテンツを縦に並べるためのコンテナ */
.center-container {
  display: flex;
  flex-direction: column;  /* 上から下に並べる */
  align-items: center;     /* 子要素を横方向で中央に揃える */
  max-width: 90%;          /* スマホ画面からはみ出さないための対策 */
}

/* 画像を大きく表示する設定 */
.large-image {
  width: 100%;             /* コンテナの幅に合わせる */
  max-width: 600px;        /* 画像の最大横幅（お好みで調整してください） */
  height: auto;            /* 縦横比を維持 */
  border-radius: 8px;      /* 角を少し丸くする（任意） */
}

/* テキストを中央揃えにする設定 */
.center-text {
  font-family: sans-serif;
  text-align: center;      /* テキストを中央寄せ */
  margin-top: 20px;        /* 画像との間の余白 */
  font-size: 18px;         /* 文字の大きさ（任意） */
  color: #333333;          /* 文字の色（任意） */
}