/* 基本スタイル (375px基準) */
/* このセクションでは、画面幅375pxを基準とします */

/* 地図コンテナ */
#map {
  height: 300px; /* 小さい画面では高さを縮小 */
  border: 1px solid #ccc; /* 境界線を追加 */
  border-radius: 5px; /* 角を丸く */
  margin-bottom: 20px; /* 下に余白を追加 */
}

/* タブレットサイズ以上 */
@media (min-width: 768px) {
  body {
    font-size: 16px; /* 少し大きい文字サイズ */
  }

  #map {
    height: 400px; /* 地図の高さを拡大 */
  }

  button {
    font-size: 1.1rem; /* ボタン文字を大きく */
    padding: 12px 20px; /* ボタンの余白を増やす */
  }

  .container {
    max-width: 700px; /* コンテナ幅を広げる */
    margin: auto; /* 中央寄せ */
  }
}

/* デスクトップサイズ以上 */
@media (min-width: 1024px) {
  body {
    font-size: 18px; /* より大きな文字サイズ */
  }

  .container {
    max-width: 900px; /* コンテナ幅をさらに広げる */
    margin: auto; /* 中央寄せ */
  }

  #map {
    height: 500px; /* 地図の高さをさらに拡大 */
  }

  /* フォームのレスポンシブ対応 */
@media (max-width: 480px) {
  form {
      width: 90%; /* 小さな画面では幅を広げる */
  }

/* 幅320px用のスタイル (必要な場合に切り替え可能) */
/*
@media (max-width: 320px) {
  body {
    font-size: 12px; 
  }

  #map {
    height: 250px; 
  }

  header {
    font-size: 1.2rem; 
    padding: 8px; 
  }

  button {
    padding: 8px 12px; 
    font-size: 0.8rem; 
  }

  footer {
    font-size: 0.8rem; 
  }
}
*/

/* 横向きのデバイス (ランドスケープモード) */
@media (orientation: landscape) {
  body {
    display: flex; /* フレックスレイアウトに変更 */
    flex-direction: column; /* 縦方向に要素を配置 */
    align-items: center; /* 中央揃え */
    justify-content: center; /* 垂直方向の中央揃え */
  }

  .container {
    width: 80%; /* コンテナ幅を80%に設定 */
    margin: 20px auto; /* 上下中央揃え */
  }

  #map {
    width: 100%; /* 地図幅を全体に設定 */
    height: 60vh; /* 画面の60%の高さを設定 */
  }
}