@charset "utf-8";
h2 {
  background-color: #1d5d9b;
  color: #fff;
  padding: 1rem 0rem 1rem 1rem;
  font-weight: bold;
}

dl {
  display: flex;
  margin-bottom: 0;
}

dd {
  margin-bottom: 0;
}

dt {
  margin-right: 1rem;
  font-weight: normal;
}

button {
  width: 100%;
  color: #fff;
  cursor: pointer;
  border: none;
  background: #4682a9;
  border-radius: 0.3125rem; /*丸みを出す*/
  display: block;
  font-size: 1.25rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 2rem;
  margin-top: 3rem;
}

button:hover {
  background-color: #1d5d9b;
  color: #f4d160;
}

/*お知らせ通知*/
.form-switch {
  display: none; /*Web版はお知らせ通知は必要ないので一旦非表示にしている*/
}

.form-switch dd {
  font-size: large;
}

.form-switch .form-check-input {
  height: 2rem;
  width: 3.5rem;
}

.form-check-label {
  padding-left: 2rem;
  padding-top: 0.5rem;
}

/* ウェブサイト版 */
@media screen and (min-width: 1024px) {
  main {
    margin: 0 auto 0;
  }

  button {
    width: 32rem;
  }

  form {
    margin-top: 3rem;
    margin-left: 15rem;
  }

  dl,
  dd,
  p {
    font-size: x-large;
  }

  /*お知らせ通知、自動ログインの大きさ変更*/
  .form-check {
    padding-top: 1rem;
  }

  .form-check-label {
    padding-left: 1rem;
    padding-top: 0.4rem;
  }

  .form-switch .form-check-input {
    height: 2rem;
    width: 3.5rem;
  }
}