@charset "utf-8";

@media screen and (max-width:767px) {
  .contact .hope_date {
    width: 30%;
  }
  .contact .hopetime label {
    margin-left: calc(5em + 3px);
  }
  .contact .hope_time01,
  .contact .hope_time02,
  .contact .hope_time03 {
    margin-top: 5px;
    margin-left: 0;
  }
  .contact select {
    width: calc(90% - 5em);
    -webkit-appearance: none;
  }
  .contact .contact_btn input[type="submit"]:hover {
    background: url(../img/sp/contact_btn.png);
    background-size: contain;
  }
  .contact .confirm_btn .confirm_go input[type="submit"]:hover {
    background: url(../img/sp/confirm_btn01.png) no-repeat;
    background-size: contain;
  }
  section.contact.confirm,
  section.contact.complete {
    padding: 0 0 20%;
  }
  .contact.confirm h2,
  .contact.complete h2 {
    margin: 30px 0;
  }
  .contact.confirm .confirm_go input[type="submit"] {
    width: 197px;
    height: 42px;
    margin: 0 auto;
    background: url(../img/sp/confirm_btn01.png);
    background-size: cover;
  }
  .contact.confirm .confirm_back input[type="submit"] {
    width: 150px;
    height: 35px;
    margin: 0 auto;
    background: url(../img/sp/confirm_btn02.png);
    background-size: cover;
  }
  .contact.complete {
    width: 100%;
    background: url(../img/sp/complete_bg.png) no-repeat;
    background-size: cover;
    background-position-y: 180px;
    padding-bottom: 50px;
  }
  .contact.complete .complete_key img {
    width: 100%;
    margin: 0 auto;
  }
  .contact.complete .complete_inner p {
    text-align: left;
  }
  .contact.complete .complete_btn {
    width: 150px;
    margin: 20px auto 0;
  }
  .contact.complete .complete_btn img {
    width: 100%;
  }
}