@charset "UTF-8";
/* CSS Document */
/* 基本設定 */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 初期設定 */
#contact {
  width: 100%;
  position: relative;
  margin-bottom: 30rem;
}
#contact .contxtBox {
  text-align: center;
  font-size: 2.3rem;
  line-height: 2;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
  margin-bottom: 8rem;
}
@media screen and (max-width: 840px) {
  #contact .contxtBox {
    font-size: 1.4rem;
  }
}
#contact .contxtBox .conttl {
  font-size: 135%;
  margin-bottom: 5rem;
}
#contact .contxtBox .contxt {
  margin-bottom: 3rem;
}

#contact .contxtBox .tel{
	position:relative;
	padding-left:1.6em;
}

#contact .contxtBox .tel::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1.1em;
	aspect-ratio: 1;
	background-image: url(../img/common/telbtn.svg);
	background-repeat: no-repeat;
}

#contact .contxtBox .line{
	position:relative;
	padding-left:1.6em;
	margin-left:2em;
}

#contact .contxtBox .line::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1.1em;
	aspect-ratio: 1;
	background-image: url(../img/common/linebtn.svg);
	background-repeat: no-repeat;
}

#contact .formBox {
  width: 100%;
  position: relative;
}
#contact .formBox form dl {
  margin-bottom: 6rem;
}
@media screen and (max-width: 840px) {
  #contact .formBox form dl {
    margin-bottom: 3rem;
  }
}
#contact .formBox form dl dt {
  margin-bottom: -1rem;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
}
@media screen and (max-width: 840px) {
  #contact .formBox form dl dt {
    font-size: 2rem;
  }
}
#contact .formBox form dl .hissu::after {
  content: "必 須";
  display: block;
  font-size: 84.2%;
  color: #db5331;
  padding: 0.2em 1em;
  width: fit-content;
  position: absolute;
  inset: 50% 0 auto auto;
  transform: translateY(-50%);
}
#contact .formBox form dl dd {
  height: 13rem;
  border-radius: 0.8rem;
  background-color: #f0f3f7;
  position: relative;
  padding: 2rem;
}
@media screen and (max-width: 840px) {
  #contact .formBox form dl dd {
    height: 8rem;
  }
}
#contact .formBox form dl dd input[type=text] {
  width: 100%;
  height: 100%;
}
#contact .formBox form dl dd.big {
  height: 42.5rem;
  position: relative;
}
#contact .formBox form dl dd.big textarea {
  width: 100%;
  height: 100%;
}
#contact .formBox form dl dd.check {
  width: fit-content;
  background: none;
  height: auto;
  padding: 1rem 0;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
}
@media screen and (max-width: 840px) {
  #contact .formBox form dl dd.check {
    font-size: 1.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 1em;
    padding: 0;
  }
}
#contact .formBox form dl dd.check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 4rem;
  aspect-ratio: 1;
  border: 1px solid #447776;
  margin-bottom: 0.2em;
  position: relative;
  cursor: pointer;
}
#contact .formBox form dl dd.check input[type=checkbox]:checked {
  background-color: #447776;
}
#contact .formBox form dl dd.check .horizontal-item + .horizontal-item {
  margin-left: 4rem;
}
@media screen and (max-width: 840px) {
  #contact .formBox form dl dd.check .horizontal-item + .horizontal-item {
    margin-left: 0;
  }
}
#contact .formBox form dl dd.center {
  margin: 0 auto;
  position: relative;
}
#contact .formBox form dl dd.center .error {
  bottom: -2rem;
}
#contact .formBox form dl dd .error {
  position: absolute;
  left: 0;
  bottom: -2em;
  color: #db5331;
}
#contact .formBox form dl .pp-box {
  margin-top: 4rem;
  display: block;
  padding: 2rem;
  height: 13rem;
  border: 1px solid #566167;
  overflow: auto;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.875;
  letter-spacing: 0.1em;
  font-weight: 400;
}
@media screen and (max-width: 840px) {
  #contact .formBox form dl .pp-box {
    margin-top: 3rem;
    font-size: 1.3rem;
  }
}
#contact .formBox form .contact-btn {
  width: fit-content;
  margin: 0 auto;
}
#contact .formBox form .contact-btn input[type=submit] {
  padding: 4rem 6rem;
  background: #447776;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 400;
  border-radius: 0.8rem;
}
@media screen and (max-width: 840px) {
  #contact .formBox form .contact-btn input[type=submit] {
    font-size: 1.8rem;
    padding: 2rem 3rem;
  }
}
#contact .topBtn {
  margin-top: 4rem;
  padding: 2rem 3rem;
  background: #447776;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 400;
  border-radius: 0.8rem;
  display: block;
  width: fit-content;
}
@media screen and (max-width: 840px) {
  #contact .topBtn {
    margin: 4rem auto 0;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 840px) {
  #contact .tytxtBox {
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.1em;
    font-weight: 400;
  }
}