@charset "UTF-8";
body:before {
  content: none;
}

section > :last-child {
  max-width: 600px;
  text-align: left;
}

h2 {
  text-align: center;
}

.error {
  color: red;
}

button {
  margin: auto;
  display: block;
  background-color: #007bff;
  /* 鮮やかな青 */
  color: #fff;
  /* 文字色を白に */
  font-size: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  /* 角丸 */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  /* 影を追加 */
}

button:hover {
  background-color: #0056b3;
  /* ホバー時に濃い青 */
  transform: translateY(-2px);
  /* 少し浮く感じ */
}

button:active {
  background-color: #004494;
  /* クリック時さらに濃い青 */
  transform: translateY(0);
}

.btnWrap {
  display: flex;
  gap: 10px;
  /* ボタン間の余白 */
  justify-content: center;
  /* 中央配置 */
}

.btnWrap button {
  width: 100%;
  font-size: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* 送信ボタン */
.btnWrap button[type="submit"] {
  background-color: #007bff;
  color: #fff;
}

.btnWrap button[type="submit"]:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.btnWrap button[type="submit"]:active {
  background-color: #004494;
  transform: translateY(0);
}

/* 戻るボタン */
.btnWrap button[type="button"] {
  background-color: #6c757d;
  /* グレー */
  color: #fff;
}

.btnWrap button[type="button"]:hover {
  background-color: #5a6268;
  transform: translateY(-2px);
}

.btnWrap button[type="button"]:active {
  background-color: #495057;
  transform: translateY(0);
}

@media (max-width: 736px) {
  h2 {
    font-size: 1.3rem;
  }
  form {
    font-size: 0.9rem;
  }
}