@charset "UTF-8";

/* Contact
------------------------------------- */
.contact {
  width: 100vw;
  height: auto;
  background-color: #E8E8E8;
}

.contact_items {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  padding: 8vh 0;
}

/* Contact */
.contact_bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70vw;
  height: auto;
}

@media screen and (max-width: 1024px) {
  .contact_bg {
    width: 60vw;
  }
}

.contact_bg:hover {
  opacity: inherit;
}

.contact_parts {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact_sentence {
  font-size: 1vw;
  text-align: center;
  padding: 3vh 0;
}

@media screen and (max-width: 1024px) {
  .contact_sentence {
    font-size: 1.5vw;
    padding: 2vh 0;
  }
}

/* Form */
form {
  width: 50vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 1024px) {
  form {
    width: 55vw;
  }
}

@media screen and (max-width: 599px) {
  form {
    width: 45vw;
  }
}

form .field {
  width: 100%;
  position: relative;
  margin-bottom: 2vh;
}

form .field label {
  position: absolute;
  top: 0;
  left: 0;
  color: #FFFFFF;
  background: #313A3D;
  width: 100%;
  padding: 1.5vh 1vw;
  font-size: 1.3vw;
  letter-spacing: 0.075vw;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}

@media screen and (max-width: 1024px) {
  form .field label {
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 599px) {
  form .field label {
    font-size: 2vw;
  }
}

form .field label + span {
  opacity: 0;
  color: white;
  display: block;
  position: absolute;
  top: 1.5vh;
  left: 8.5%;
  font-size: 1.5vw;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}

@media screen and (max-width: 1024px) {
  form .field label + span {
    font-size: 2vw;
  }
}

@media screen and (max-width: 599px) {
  form .field label + span {
    font-size: 2.5vw;
    left: 13%;
  }
}

form .field input[type=text],
form .field input[type=tel],
form .field input[type=email],
form .field textarea {
  border: none;
  background: #E8E9EA;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1.5vh 0;
  padding-left: 27%;
  color: #313A3D;
  font-size: 1.3vw;
  letter-spacing: 0.05vw;
}

@media screen and (max-width: 1024px) {
  form .field input[type=text],
  form .field input[type=tel],
  form .field input[type=email],
  form .field textarea {
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 599px) {
  form .field input[type=text],
  form .field input[type=tel],
  form .field input[type=email],
  form .field textarea {
    font-size: 2vw;
    padding-left: 45%;
  }
}

form .field input[type=text]#form_msg,
form .field input[type=tel]#form_msg,
form .field input[type=email]#form_msg,
form .field textarea#form_msg {
  height: 7vh;
  resize: none;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}

@media screen and (max-width: 1024px) {
  form .field input[type=text]#form_msg,
  form .field input[type=tel]#form_msg,
  form .field input[type=email]#form_msg,
  form .field textarea#form_msg {
    height: 4.8vh;
  }
}

@media screen and (max-width: 599px) {
  form .field input[type=text]#form_msg,
  form .field input[type=tel]#form_msg,
  form .field input[type=email]#form_msg,
  form .field textarea#form_msg {
    height: 4.6vh;
  }
}

form .field input[type=text]:focus, form .field input[type=text].focused,
form .field input[type=tel]:focus, form .field input[type=tel].focused,
form .field input[type=email]:focus, form .field input[type=email].focused,
form .field textarea:focus,
form .field textarea.focused {
  outline: none;
}

form .field input[type=text]:focus#form_msg, form .field input[type=text].focused#form_msg,
form .field input[type=tel]:focus#form_msg, form .field input[type=tel].focused#form_msg,
form .field input[type=email]:focus#form_msg, form .field input[type=email].focused#form_msg,
form .field textarea:focus#form_msg,
form .field textarea.focused#form_msg {
  padding-bottom: 15vh;
}

form .field .wpcf7-form-control-wrap:focus + label, form .field .wpcf7-form-control-wrap.focused + label,
form .field .wpcf7-form-control-wrap:focus + label,
form .field .wpcf7-form-control-wrap.focused + label {
  width: 25%;
  background: #F44336;
  color: #FFFFFF;
}

@media screen and (max-width: 599px) {
  form .field .wpcf7-form-control-wrap:focus + label, form .field .wpcf7-form-control-wrap.focused + label,
  form .field .wpcf7-form-control-wrap:focus + label,
  form .field .wpcf7-form-control-wrap.focused + label {
    width: 40%;
  }
}

form .field .wpcf7-form-control-wrap.focused + label,
form .field .wpcf7-form-control-wrap.focused + label {
  color: #F44336;
}

form .field:hover label {
  width: 25%;
  background: #F44336;
  color: #FFFFFF;
}

@media screen and (max-width: 599px) {
  form .field:hover label {
    width: 40%;
  }
}

form input[type=submit] {
  display: inline-block;
  margin: 1vh;
  padding: 2vh 4vw;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  border-radius: 3vw;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 0.2vw 1vw rgba(0,0,0,0.5);
  border: none;
  font-size: 1vw;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  form input[type=submit] {
    padding: 2vh 7vw;
    border-radius: 5vw;
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 599px) {
  form input[type=submit] {
    padding: 1vh 9vw;
    border-radius: 5vw;
    font-size: 2vw;
  }
}

form input[type=submit]:hover {
  box-shadow: 0.1vw 0.4vw 2vw rgba(0,0,0,0.5);
}

form input[type=submit]:focus {
  outline: none;
  background: #F44336;
}

.contact_button {
  display: flex;
  align-items: center;
  text-align: center;
}

div.wpcf7 .wpcf7-spinner {
    display: none !important;
}

@media screen and (max-width: 599px) {
  .wpcf7-not-valid-tip {
    font-size: 2vw;
  }