#section3 {
  display: flex; /* フレックスボックスで横並びを設定 */
  flex-wrap: nowrap; /* 各要素を横並びに配置 */
  align-items: stretch; /* 各要素の高さを同じにする */
  gap: 50px; /* 各要素間に50pxのスペース */
  justify-content: center; /* コンテンツを中央揃え */
  background-color: #ffffff; /* 背景色を白に設定 */
padding: 150px 0px; /* 上下150px、左右0pxの余白 */
}

.company-info, .map-placeholder, .contact-form {
  flex: 1;
  max-width: 350px;
  min-width: 300px; /* 必要に応じて調整 */
  height: 100%;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0;
  text-align: left;
  width: 100%; /* 画面幅に依存しない設定 */
}

/* 横幅が1458px以下の場合に横スクロールを追加 */
@media (max-width: 1458px) {
  html, body {
    overflow-x: auto;
  }
}

/* 会社情報のスタイル */
.company-info h2:first-of-type {
  margin-top: 0; /* 余白を削除 */
  padding-top: 0; /* パディングがある場合も削除 */
}

.company-info h2 {
  font-size: 0.9em; /* 見出しフォントサイズを設定 */
  color: #333; /* 文字色を濃い灰色に設定 */
  margin-bottom: 5px; /* 見出し下に余白 */
  position: relative; /* 擬似要素のための位置指定 */
}

.company-info h2::after {
  content: ""; /* 擬似要素としてラインを追加 */
  display: block; /* ブロック表示 */
  width: 350px; /* ライン幅 */
  height: 1px; /* ライン高さ */
  background-color: #ccc; /* ラインの薄灰色 */
  margin-top: 5px; /* ラインと見出しの余白 */
}

.company-info p {
  font-size: 0.9em; /* 段落フォントサイズ */
  color: #555; /* 段落文字色 */
  line-height: 1.4; /* 行間の高さ */
  margin-bottom: 15px; /* 段落下に余白 */
}

/* 地図のスタイル */
.map-placeholder iframe {
  width: 100%; /* iframe幅を100%に設定 */
  height: 75%; /* iframe高さを75%に設定 */
  border: none; /* 枠線を削除 */
}

/* メールフォームのスタイル */
.form-description {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 5px;
  text-align: left;
}

.contact-form {
  max-width: 350px; /* 最大幅を350pxに統一 */
  padding: 0px; /* 内側余白 */
}

.contact-form h2 {
  font-size: 0.9em;
  color: #333;
  margin-top: 0; /* 上の余白を取り除く */
  margin-bottom: 5px; /* 下の余白を調整 */
}

.contact-form form {
  display: flex; /* フレックスボックス */
  flex-direction: column; /* 縦並び */
}

.contact-form label {
  font-size: 0.9em; /* ラベルのフォントサイズ */
  color: #333; /* ラベルの文字色 */
  margin-bottom: 5px; /* ラベル下に余白 */
}

.contact-form textarea {
  height: 275px; /* メッセージの高さを275pxに設定 */
}

.contact-form input, .contact-form textarea {
  width: 100%; /* 入力フィールド幅 */
  padding: 5px; /* 内側余白 */
  font-size: 0.9em; /* 通常のフォントサイズ */
  border: 1px solid #ccc; /* 境界線の色 */
  border-radius: 4px; /* 角丸 */
  margin-bottom: 15px; /* 各フィールド下に余白 */
  box-sizing: border-box; /* ボックスサイズ計算にパディングを含める */
}

input:focus, textarea:focus {
  background-color: #f5f5dc; /* フォーカス時にベージュの背景色 */
  border-color: #CCC; /* 枠線を薄灰色に設定 */
  outline: none; /* 青いアウトラインを削除 */
  box-shadow: none; /* 青い影を削除 */
}


button {
  padding: 12px 20px;
  font-size: 1em;
  background-color: #ffffff; /* ボタン背景を白 */
  color: #000000; /* ボタン文字色を黒 */
  border: 0.5px solid #ccc; /* 他の入力フィールドと同じ薄い灰色の線 */
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #f5f5dc; /* ホバー時に薄いベージュ */
  color: #000000;
}

/* メディアクエリでモバイル対応 */
@media (max-width: 768px) {
  #section3 {
    flex-direction: column; /* 幅が狭いときは縦並びに */
  }

  .company-info, .map-placeholder, .contact-form {
    max-width: 100%; /* 横幅を100%に広げる */
  }
}