@charset "utf-8";


.contact_flow {
  width: 100%;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
.contact_flow ul {
  width: 80%;
  margin: 0 auto 40px;
  padding: 0;
}
.contact_flow ul li {
  position: relative;
  width: 150px;
  min-width: 150px;
  padding: 10px 20px;
  margin-right: 32px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #DB8989;
  border-radius: 10px;
}
.contact_flow ul li:last-child {
  margin-right: 0;
}
.contact_flow ul li.flow_now {
  background-color: #B71313;
  border: 1px solid #B71313;
  color: #fff;
}
.contact_flow ul li.flow_pass {
  background-color: #DB8989;
  border: 1px solid #DB8989;
  color: #fff;
}
.contact_flow ul li.flow_yet {
  background-color: #fff;
  color: #999;
}
.contact_flow ul li:before {
  position: absolute;
  content: "";
  top: 16px;
  left: -22px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #DB8989;
}
.contact_flow ul li:first-child:before {
  display: none;
}
.form_inner {
  color: #222;
}
.form_box {
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.form_name {
  width: 30%;
}
.form_text {
  width: 70%;
  margin: 40px 0;
}
.form_text input {
  width: 98%;
  height: 35px;
  padding: 5px;
  border: 2px solid #bbb;
  border-radius: 10px;
  color: #222;
}
.form_text input:focus {
  border:  2px solid #95B2F1;
  outline: none;
}
.form_text.budget input {
  width: 40%;
}
.form_text textarea {
  width: 98%;
  height: 180px;
  padding: 5px;
  border: 2px solid #bbb;
  border-radius: 10px;
  color: #222;
}
.form_text textarea:focus {
  border:  2px solid #95B2F1;
  outline: none;
}
.form_btn {
  margin: 50px auto;
  text-align: center;
}
.form_btn button {
  position: relative;
  width: 284px;
  height: 58px;
  padding: 5px 30px;
  font-size: 18px;
  font-weight: bold;
  background-color: #fff;
  color: #B71313;
  border: 2px solid  #B71313;
  overflow: hidden;
  transition: .5s;
}
.form_btn a {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 40px;
  padding-top: 14px;
  font-size: 18px;
  font-weight: bold;
  background-color: #fff;
  color: #B71313;
  border: 2px solid #B71313;
  overflow: hidden;
  transition: .5s;
}
.form_btn button:focus {
  outline: none;
}
.form_btn button:hover {
  position: relative;
  width: 284px;
  height: 58px;
  padding: 5px 30px;
  font-size: 18px;
  font-weight: bold;
  background-color: #B71313;
  color: #fff;
  border: 2px solid  #B71313;
  cursor: pointer;
  transition: .5s;
}
.form_btn a:hover {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 40px;
  padding-top: 14px;
  font-size: 18px;
  font-weight: bold;
  background-color: #B71313;
  color: #fff;
  border: 2px solid  #B71313;
  cursor: pointer;
  transition: .5s;
}
.form_btn button:before,
.form_btn a:before {
  content: "";
  position: absolute;
  top: -88px;
  left: -345px;
  width: 300px;
  height: 300px;
  background-color: #DB8989;
  border: 1px solid #B71313;
  transform: rotate(45deg);
  transition: .5s;
}
.form_btn button:hover:before,
.form_btn a:hover:before {
  position: absolute;
  top: -88px;
  left: -10px;
  width: 300px;
  height: 300px;
  background-color: transparent;
  border: 1px solid #B71313;
  transform: rotate(45deg);
  transition: .5s;
}
.form_btn button:after,
.form_btn a:after {
  content: "";
  position: absolute;
  top: -160px;
  right: -345px;
  width: 300px;
  height: 300px;
  background-color: #DB8989;
  border: 1px solid #B71313;
  transform: rotate(45deg);
  transition: .5s;
}
.form_btn button:hover:after,
.form_btn a:hover:after {
  position: absolute;
  top: -160px;
  right: -10px;
  width: 300px;
  height: 300px;
  background-color: transparent;
  border: 1px solid #B71313;
  transform: rotate(45deg);
  transition: .5s;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-message {
  color: #B71313;
  font-size: 12px!important;
  margin-bottom: 0;
}

/* confirm */
.contents_inner.confirm,
.contents_inner.finish {
  margin-top: 100px;
}
.contact_flow p {
  width: 80%;
  margin: 0 auto 40px;
  padding: 0;
  text-align: center;
}
.form_btn button.blue_btn {
  position: relative;
  width: 284px;
  height: 58px;
  padding: 5px 30px;
  font-size: 18px;
  font-weight: bold;
  background-color: #fff;
  color:#6992ED;
  border: 2px solid #6992ED;
  overflow: hidden;
  transition: .5s;
}
.form_btn button.blue_btn:hover {
  position: relative;
  width: 284px;
  height: 58px;
  padding: 5px 30px;
  font-size: 18px;
  font-weight: bold;
  background-color: #6992ED;
  color: #fff;
  border: 2px solid  #6992ED;
  cursor: pointer;
  transition: .5s;
}
.form_btn button.blue_btn:before {
  content: "";
  position: absolute;
  top: -88px;
  left: -345px;
  width: 300px;
  height: 300px;
  background-color: #95B2F1;
  border: 1px solid#6992ED;
  transform: rotate(45deg);
  transition: .5s;
}
.form_btn button.blue_btn:hover:before {
  position: absolute;
  top: -88px;
  left: -10px;
  width: 300px;
  height: 300px;
  background-color: transparent;
  border: 1px solid #6992ED;
  transform: rotate(45deg);
  transition: .5s;
}
.form_btn button.blue_btn:after {
  content: "";
  position: absolute;
  top: -160px;
  right: -345px;
  width: 300px;
  height: 300px;
  background-color: #95B2F1;
  border: 1px solid#6992ED;
  transform: rotate(45deg);
  transition: .5s;
}
.form_btn button.blue_btn:hover:after {
  position: absolute;
  top: -160px;
  right: -10px;
  width: 300px;
  height: 300px;
  background-color: transparent;
  border: 1px solid#6992ED;
  transform: rotate(45deg);
  transition: .5s;
}
p.anno {
  font-size: 12px;
  margin-bottom: 0;
}
.btn_anno {
  color: #b71313;
  text-align: center;
  font-size: 14px;
}
.checkbox_inner input {
  width: unset;
  height: unset;
}
.detail {
  margin-top: 10px;
}
.detail textarea {
  height: 110px;
}
/*/////////////////////////*/
/*  PC  */
/*/////////////////////////*/
@media screen and (min-width: 960px) {

  .contact_description_gray {
    width: 100%;
    background-color: #fbfbfb;
    border-bottom: 1px solid #ccc;
  }
  .contact_description_white {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .contact_description_title {
    font-size: 28px;
  }
  .mr_10 {
    margin-right: 10px;
  }
}

/*/////////////////////////*/
/*  tab  */
/*/////////////////////////*/
@media screen and (max-width: 959px) and (min-width: 751px) {

  .contact_description_gray {
    width: 100%;
    background-color: #fbfbfb;
    border-bottom: 1px solid #ccc;
  }
  .contact_description_white {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .contact_description_title {
    font-size: 28px;
    text-align: center;
  }

  .contact_description_box {
    width: 100%;
  }
  .form_name {
    width: 25%;
  }
  .form_text {
    width: 75%;
  }
  .mr_10 {
    margin-right: 10px;
  }
  .contact_flow ul li {
    width: 120px;
    min-width: 120px;
  }
  .mr_10 {
    margin-right: 10px;
  }
}

/*/////////////////////////*/
/*  SP  */
/*/////////////////////////*/
@media screen and (max-width: 750px) {

  .contact_description_gray {
    width: 100%;
    background-color: #fbfbfb;
    border-bottom: 1px solid #ccc;
  }
  .contact_description_white {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .contact_description_title {
    font-size: 22px;
    text-align: center;
  }

  .contact_description_box {
    width: 100%;
  }
  .contact_flow ul {
    width: 100%;
  }
  .contact_flow ul li {
    width: 20%;
    min-width: 20%;
    padding: 10px 3%;
    margin-right: 5%;
  }
  .contact_flow ul li:before {
    top: 19px;
    left: -15%;
    border-width: 5px 0 5px 9px;
  }
  .form_box.flex {
    display: block;
  }
  .form_name {
    width: 90%;
    margin: 5% auto 2%;
  }
  .form_text {
    width: 90%;
    margin: 0 auto 5%;
  }
  .form_text input,
  .form_text textarea {
    width: 94%;
  }
  .form_text .checkbox_inner input {
    width: unset;
  }
  .form_btn button,
  .form_btn a {
    display: block;
    max-width: 290px;
    width: 80%;
    margin: 0 auto;
  }
  .form_btn button:hover,
  .form_btn a:hover {
    width: 80%;
  }

  .btn_anno {
    color: #b71313;
    text-align: center;
    font-size: 12px;
  }

/* confirm */
  .contents_inner.confirm,
  .contents_inner.finish {
    margin-top: 40px;
  }
  .contact_flow p {
    width: 100%;
  }
  .form_btn button.blue_btn {
    width: 80%;
    margin-top: 20px;
  }
  .form_btn button.blue_btn:hover {
    width: 80%;
  }
  .form_text.confirm {
    width: 90%;
    margin: 0 auto 5%;
  }
}


/*/////////////////////////*/
/* animation */
/*/////////////////////////*/