@charset "UTF-8";
/*============================================================


  contact.css


============================================================*/
/*========================================
  contact index
========================================*/
#contact-top .box-contact-index {
  text-align: center;
  padding: 3rem 3rem 1.6rem;
}

#contact-top .box-contact-index .title-bar {
  width: 12rem;
  margin-bottom: 2rem;
}

#contact-top .box-contact-index .block-headline {
  display: table;
  width: 100%;
  margin-bottom: 1.6rem;
}

#contact-top .box-contact-index .block-headline .title-index {
  display: table-cell;
  width: 100%;
  height: 2em;
  text-align: center;
  vertical-align: middle;
}

#contact-top .box-contact-index .block-headline .title-index > em {
  display: block;
  line-height: 1.4;
}

#contact-top .box-contact-index .text-summary {
  color: #444;
}

#contact-top .box-contact-index .list-contact {
  margin-top: 1.6rem;
}
#contact-top .box-contact-index .list-contact > li {
  padding: 1rem 0;
  border-top: 1px solid #eee;
}

#contact-top .box-contact-index .list-contact > li a.btn {
  margin-top: 1rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #contact-top .box-contact-index {
    padding: 1.6rem 2rem 0.8rem;
  }

  #contact-top .box-contact-index .title-bar {
    width: 10rem;
    margin-bottom: 1.2rem;
  }

  #contact-top .box-contact-index .block-headline {
    display: block;
    margin-bottom: 1rem;
  }

  #contact-top .box-contact-index .block-headline .title-index {
    display: block;
    height: auto;
  }

  #contact-top .box-contact-index .list-contact {
    margin-top: 0.8rem;
  }

  #contact-top .box-contact-index .list-contact > li {
    padding: 0.8rem 0;
  }

  #contact-top .box-contact-index .list-contact > li a.btn {
    margin-top: 0.4rem;
  }
}





/*========================================
  contact form
========================================*/
#contact-form .title-contact {
  line-height: 1.2;
}

#contact-form .g-recaptcha > div{
  margin: 20px auto 0;
}


#contact-form .form-contact {
  text-align: center;
  padding-bottom: 4rem;
}

#contact-form .form-contact .list-form > li {
  border-top: 1px solid #f2f2f2;
}

#contact-form .form-contact .list-form > li:last-of-type {
  border-bottom: 1px solid #f2f2f2;
}

#contact-form .form-contact .list-form > li > dl {
  display: table;
  width: 100%;
}

#contact-form .form-contact .list-form > li > dl > dt,
#contact-form .form-contact .list-form > li > dl > dd {
  display: table-cell;
  font-size: 1.56rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: left;
  vertical-align: middle;
  padding: 1.6rem 0;
  position: relative;
}

#contact-form .form-contact .list-form > li > dl > dt {
  width: 30%;
  font-weight: 400;
  padding-right: 10rem;
}

#contact-form .form-contact .list-form > li > dl > dd {
  width: 70%;
  font-weight: 300;
}

#contact-form .form-contact #contact_type br {
  display: none;
}

#contact-form .form-contact input[type="radio"] {
  vertical-align: 10%;
  margin-right: 0.8rem;
}

html.windows #contact-form .form-contact input[type="radio"] {
  vertical-align: -0.1em;
}

#contact-form .form-contact input[type="radio"]:nth-of-type(n+2) {
  margin-left: 3rem;
}

#contact-form .form-contact input[type="text"],
#contact-form .form-contact input[type="email"],
#contact-form .form-contact input[type="tel"] {
  width: 100%;
  font-size: inherit;
  letter-spacing: 0.04em;
  background-color: #f8f8f8;
  border-radius: 2px;
  padding: 1rem;
}

#contact-form .form-contact input#telephone,
#contact-form .form-contact input#postalcode {
  width: 50%;
}

#contact-form .form-contact textarea {
  width: 100%;
  font-size: inherit;
  letter-spacing: 0.04em;
  background-color: #f8f8f8;
  border-radius: 2px;
  padding: 1rem;
}

#contact-form .form-contact i.required {
  display: block;
  width: 4rem;
  height: 1rem;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  line-height: 1rem;
  background-color: rgba(37,38,90,0.9);
  border-radius: 1px;
  box-sizing: content-box;
  padding: 0.3em 0;
  margin: auto 0;
  position: absolute;
  right: 4rem;
  top: 0;
  bottom: 0;
}

#contact-form .form-contact button.btn.link {
  margin-top: 4rem;
}

#contact-form .form-contact .error {
  font-size: 93%;
  color: #B70000;
}


@media (max-width: 480px) and (orientation: portrait) {
  #contact-form .form-contact {
    padding-bottom: 2rem;
  }

  #contact-form .form-contact .list-form > li > dl {
    display: block;
    padding: 1.2rem 0;
  }

  #contact-form .form-contact .list-form > li > dl > dt,
  #contact-form .form-contact .list-form > li > dl > dd {
    display: block;
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.6;
    vertical-align: top;
    padding: 0;
  }

  #contact-form .form-contact .list-form > li > dl > dt {
    margin-bottom: 1rem;
  }

  #contact-form .form-contact #contact_type br {
    display: block;
  }

  #contact-form .form-contact input[type="radio"] {
    vertical-align: -4%;
    margin-right: 0.6rem;
  }

  #contact-form .form-contact input[type="radio"]:nth-of-type(n+1) {
    margin-left: 0.2em;
    margin-top: 1.6rem;
  }

  #contact-form .form-contact input#telephone {
    width: 100%;
  }

  #contact-form .form-contact i.required {
    display: block;
    margin-top: 0.4rem;
    position: static;
  }

  #contact-form .form-contact button.btn.link {
    margin-top: 2rem;
  }
}