#map {
    width: 80%; /* Full width of the page or container */
    height: 500px; /* Fixed height for the map area */
    margin: 20px auto; /* Center the map with margins */
    border: 1px solid #ddd; /* Optional border for visual clarity */
  }
  .mapboxgl-popup-content {
    max-width: 400px; /* 幅を指定 */
    padding: 10px; /* 内側の余白を減らす */
    font-size: 12px; /* テキストサイズを調整 */
  }

  .mapboxgl-popup-content h3 {
    margin: 5px 0; /* 見出しの上下の余白を減らす */
    font-size: 14px; /* 見出しの文字サイズを調整 */
  }
  
  .mapboxgl-popup-tip {
    border-width: 10px; /* ポップアップの矢印のサイズを調整 */
  }