/* ヘッダーバーのスタイル */
.header-bar {
  background: linear-gradient(135deg, #FFA07A, #FF6347); /* オレンジ色のグラデーション */
  padding: 40px 0; /* 上下の余白を増やす */
  text-align: center;
  color: white;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 24px; /* テキストのサイズを大きく */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* シャドウの追加 */
}


/* 送信ボタンのカスタムスタイル */
.btn-primary {
  background-color: #FFA500; /* オレンジ色 */
  border: none; /* ボーダーを削除 */
  transition: all 0.3s; /* アニメーション効果の追加 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ちょっとした影を追加 */
}

/* ホバー時のエフェクト */
.btn-primary:hover {
  background-color: #FF4500; /* 暗いオレンジ色 */
  transform: translateY(-3px); /* 少し上に浮かせる */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 影を大きくする */
}

/* アクティブ（クリック）時のエフェクト */
.btn-primary:active {
  transform: translateY(0); /* 元の位置に戻す */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を小さくする */
}

/* フォームの背景とスタイル */
.form-container {
  background-color: #faf3e0; /* ベージュ色 */
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 40px auto;
}

/* インプットフィールドとドロップダウンのスタイル */
.form-control {
  border-radius: 5px;
  border: 1px solid #e0c9a1; /* より薄いベージュ色 */
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: #FFA500;
  box-shadow: 0 2px 4px rgba(240, 140, 40, 0.2); /* オレンジ色の薄いシャドウを追加 */
}

/* ラベルのスタイル */
.form-container label {
  font-size: 1.1em;
  color: #755c40; /* ダークベージュ色 */
  margin-bottom: 10px;
}

/* 送信ボタンの上のマージン */
.form-container button {
  margin-top: 20px;
}