@charset "utf-8";

.contact {
  padding: 0 0 95px;
  background: url(../images/common/hexa_gray.svg) -32px 1030px no-repeat, url(../images/common/hexa_gray.svg) calc(100% + 57px) 356px no-repeat;
  background-color: #eee;
  background-size: 637px 295px
}

.contact .main_ttl {
  margin-bottom: 58px;
  background: #f39800 url(../images/contact/main_ttl.jpg) center 0 no-repeat
}

.contact .des {
  margin-bottom: 45px;
  color: #000;
  font-size: 1.6rem;
  line-height: 26px;
  text-align: center
}

.contact .des .red {
  color: #d22f2f
}

.contact .contact_box {
  border-radius: 20px;
  background: #fff
}

.contact form {
  display: block;
  width: 100%;
  padding: 50px 59px 68px
}

.contact form input,
.contact form textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0 15px;
  border: 1px solid #bfbfbf;
  border-radius: 0;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #000;
  font-size: 16px
}

.contact form input:focus,
.contact form textarea:focus {
  outline: none;
  outline-offset: 0
}

.contact form input {
  height: 54px;
  line-height: 28px
}

.contact form textarea {
  height: 210px;
  padding: 15px;
  overflow: auto;
  resize: none
}

.contact .row_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

.contact .row_form:not(:first-of-type) {
  margin-top: 20px
}

.contact .row_form label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 216px;
  padding: 13px 0;
  color: #000;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.8rem
}

.contact .row_form label sup {
  display: inline-block;
  margin-left: 8px;
  color: #d22f2f;
  font-size: 1.6rem
}

.contact .row_form .wrap {
  width: calc(100% - 216px)
}

.contact .row_form .wrap p {
  padding-right: 15px;
  color: #000
}

.contact .row_form .wrap p.error {
  width: 100%;
  margin-top: 5px;
  color: #d22f2f;
  line-height: 26px
}

.contact .row_form .wrap .phone-fax {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.contact .row_form .wrap .phone-fax input {
  position: relative;
  width: 164px
}

.contact .row_form .wrap .phone-fax .space:after {
  display: block;
  width: 14px;
  height: 2px;
  margin: 26px 15px 0;
  background: #3e3a39;
  content: ''
}

.contact .row_form .wrap .content {
  line-height: 1
}

.contact_btn {
  margin-top: 50px
}

.contact_btn button {
  border: 0
}

.contact.confirm .main_ttl {
  margin-bottom: 47px
}

.contact.confirm .des {
  margin-bottom: 30px
}

.contact.confirm .contact_box {
  padding-top: 39px;
  padding-bottom: 76px
}

.contact.confirm .row_form {
  border-bottom: 1px solid #bfbfbf
}

.contact.confirm .row_form label {
  padding-left: 20px
}

.contact.confirm .row_form:not(:first-of-type) {
  margin-top: 7px
}

.contact.confirm .content {
  padding-bottom: 7px
}

.contact.confirm p {
  padding: 13px 0;
  line-height: 26px
}

.contact.complete .main_ttl {
  margin-bottom: 64px
}

.contact.complete .complete_box {
  padding: 79px 70px 82px;
  text-align: center
}

.contact.complete .complete_ttl {
  margin-bottom: 42px
}

.contact.complete .complete_ttl .complete_txt {
  display: inline;
  padding: 0 15px;
  background: -o-linear-gradient(bottom, #ffe57f 17px, transparent 0);
  background: linear-gradient(0deg, #ffe57f 17px, transparent 0);
  color: #000;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5
}

.contact.complete .complete_des {
  margin-bottom: 37px;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 30px
}

.contact.complete .contact_btn {
  margin-top: 75px
}