* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* コンタクトフォームのスタイル */
input[type="text"],
input[type="email"],
select[type="text"],
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 15px; /* 下部のマージンを追加 */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* 半角英数字をArialで表示 */
}

textarea#message {
  height: 150px; /* 高さを調整 */
}

body.contact-page, body.contact-confirm  {
  /* body自体は全幅・flex前提（sticky footer用）に保つ */
  margin: 0;
  max-width: none;
  padding: 0;
  padding-top: 60px; /* navbarの高さ分のパディング（他のページと統一） */
}

/* お問い合わせページの内容コンテナ */
.contact-container {
  margin: 40px auto;
  max-width: 800px;
  width: calc(100% - 40px); /* 左右20pxずつ確保 */
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
}

/* 確認画面のフォームに枠を追加 */
form.contact-confirm {
  border: 1.5px solid #aaa;
  padding: 20px; /* パディングも追加して見た目を整える */
}

h1.contact-page, h1.contact-confirm {
  text-align: center; /* タイトルを中央揃えに設定 */
  margin-top: 10px !important; /* navbarからの距離を他のページと統一 */
  margin-bottom: 60px !important; /* タイトルの下に余白を設定 */
  color: #b7282e; /* 文字色を設定 */
  font-size: clamp(22.4px, calc(18.04px + 0.7273vw), 32px);
  line-height: 1.2;
}

form.contact-page {
  padding: 20px; /* フォーム内のパディングを設定 */
  border-radius: 8px; /* フォームの角を丸める */
  margin-bottom: 100px; /* フォームの下にマージンを設定 */
}

.form-group {
  margin-bottom: 15px; /* 各フォームグループの下部に余白を設定 */
}

.form-group label {
  font-weight: bold; /* ラベルを太字に設定 */
  display: block; /* ラベルをブロック要素にして改行させる */
}

.form-group div {
  margin-left: 20px; /* 内容のインデントを設定 */
}

.button-container {
  display: flex;
  justify-content: center; /* コンテナ内のアイテムを中央揃えにする */
  gap: 100px;  /* ボタン間の隙間を広げる */
  margin-top: 20px; /* ボタンの上の余白 */
}

#confirmButton, #submitButton, #backButton {
  display: inline-block; /* ブロックレベル要素に設定 */
  background-color: #b7282e; /* 背景色を設定 */
  color: white; /* 文字色を設定 */
  border: 1px solid #ccc; /* ボーダー色 */
  padding: 5px 20px; /* パディング */
  font-size: 16px; /* フォントサイズ */
  cursor: pointer; /* カーソルをポインターに設定 */
  transition: background-color 0.3s, color 0.3s; /* 色の変化にアニメーションを設定 */
  border-radius: 5px;
}

#backButton {
  background-color: #999; /* デフォルトの背景色を明るい色に設定 */
  color: #222; /* 文字色をダークグレーに設定 */
}

/* ボタンがホバーされたときのスタイル */
#confirmButton:hover, #submitButton:hover {
  background-color: #e2e2e2; /* ホバー時の背景色を少し暗く設定 */
}

/* ボタンが無効化されているときのスタイル */
#submitButton:disabled {
  background-color: #ccc; /* 背景色をグレーに設定 */
  color: #666; /* 文字色を薄いグレーに設定 */
  cursor: not-allowed; /* カーソルを禁止マークに設定 */
  pointer-events: none; /* ポインターイベントを無効にしてホバー効果を解除 */
  opacity: 0.7; /* 半透明に設定して無効化を強調 */
}