.form-wrapper {
  width: 100%;
  max-width: 600px; /* フォームの最大幅を設定 */
  margin: 0 auto; /* 中央揃え */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影の効果を追加 */
  background-color: #fff; /* 背景色 */
}

.form-wrapper .box {
  margin-bottom: 20px; /* 各ボックスの下マージン */
}

.form-wrapper label {
  display: block; /* ラベルをブロック要素として表示 */
  margin-bottom: 5px; /* ラベルと入力フィールドの間のマージン */
}

.form-wrapper input[type="text"],
.form-wrapper input[type="mail"],
.form-wrapper textarea {
  width: 100%; /* 入力フィールドを親要素の幅いっぱいに広げる */
  padding: 10px; /* パディング */
  border: 1px solid #ccc; /* 境界線 */
  border-radius: 5px; /* 角の丸み */
}

.form-wrapper .flex-box {
  display: flex; /* Flexboxを使用してラジオボタンとラベルを横並びにする */
  align-items: center; /* 中央揃え */
  margin-bottom: 5px; /* 下マージン */
}

.form-wrapper .flex-box p {
  margin-left: 10px; /* ラジオボタンとテキストの間隔 */
}

.form-wrapper .submit-btn {
  background-color: #007bff; /* ボタンの背景色 */
  color: #ffffff; /* ボタンの文字色 */
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer; /* マウスオーバー時のカーソルをポインターに */
  display: block; /* ブロック要素として表示 */
  width: 100%;
}

.form-wrapper .end-message,
.form-wrapper .false-message {
  text-align: center; /* 中央揃え */
  margin-top: 20px; /* 上マージン */
}

.end-message {
  display: none;
}

.false-message {
  display: none;
}