@charset "utf-8";
/* CSS Document */
.logo img{
  width: 100px;
}
main{
  padding: 0 10%;
}
.contact_box{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.contact_top{
  width: 100%;
  max-width: 1200px;
  margin-bottom: 5rem;
}


.contact_top h1{
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 5rem 0 4rem;
}

.contact_top p{
  font-size: 1.35rem;
  line-height: 2;
  padding-left: 3px;
}

.message{
  font-weight: 700;
}

.spacer{
  display: block;
  content: "";
  margin: 1.35rem 0;
}

.cf_item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  align-items: center;
	padding: 1.25em 0;
}

.cf_item:last-child {
	border-bottom: none;
}

.cf_item dt {
  width: 20%;
  font-size: 1.2rem;
  font-weight: 400;
	line-height:1.5;
}

.cf_item dd {
    flex: 1;
}

.cf_item input, .cf_item textarea {
  width: 100%;
  padding: 0.8em;
  border: none;
  border-radius: 5px;
  background-color: #eaeff1;
  /*フォント*/
  font-family: "dnp-shuei-nmincho-std", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  line-height: 2;
	resize: vertical;
}

.cf_item input:focus,.cf_item textarea:focus {
	outline: none;
	background: #dde2e9;
}

/*チェックボタン*/
.check_wrap{
	margin-left: 20%;
	width: 80%;
  padding: 0.3rem;
}
.check_wrap p{
  font-size: 1.15rem;
	line-height: 3;
}
.check_wrap a{
  color: #151515;
}

/*送信エリア*/
.cf_send{
  position: relative;
}


.arrow{
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #151515;
  transition-duration: 0.3s;
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 0 5px;
}

.arrow::after{
  content: "";
  position: absolute;
  top: 40%;
  right: 35%;
  width: 2rem;
  height: 0.6rem;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: skew(45deg);
  transition-duration: 0.7s;
  }

.arrow:hover::after{  
    /*border-color: #ffffff;*/
    opacity: 0.7;
    transition-duration: 0.7s;
  }



.cf_send input {
	display: block;
	background: #151515;
	height: auto;
  padding: 0 5rem;
  margin-top: 2rem;
	margin-left: -25%;
	border: none;
	border-radius: 10px;
	color: #ffffff;
  font-family: "dnp-shuei-nmincho-std", serif;
  font-weight: 400;
  font-style: normal;
	font-size: 1.3rem;
	transition: all .3s;
  &:hover{
    &:not([disabled]) {
      opacity: 0.7;
      padding: 0 5.5rem;
      letter-spacing: 0.15rem;
      }
  }
}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	/*background-color: #fce3e3;*/
	border: none;
	text-align: center;
	text-decoration-line: spelling-error;
}

.wpcf7 form.sent .wpcf7-response-output{
  border: 1px solid #151515;
  text-align: center;
}


.wpcf7 .wpcf7-submit:disabled {
  cursor: not-allowed;
  opacity: 0.1;
}

.wpcf7 .wpcf7-submit{
  cursor: pointer;
}

.wpcf7-spinner {
  position: absolute;
  left: -50%;
  top: 25%
}


@media screen and (max-width: 1200px) {
  html{
    font-size: 90%;
  }  
}

@media screen and (max-width: 1024px) {
  main{
    padding: 0 5%;
  }
  .cf_item {
		display: block;
	}

	.cf_item dt {
    width: 100%;
		margin-bottom: 5px;
    padding-right: 0;
    text-align: left;
		line-height:1.5;
	}
  .check_wrap{
    margin: 0 auto;
    width: 95%;
  }
  .arrow::after{
    right: 8%;
    }
  .cf_send input {
    margin: 1rem;
    width: 100%;
    /*width: 95%;*/
  }
}

@media screen and (max-width: 834px) {
  html{
    font-size: 80%;
  }
  .contact_top p{
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 600px) {
  html{
    font-size: 75%;
  }
  .arrow{
    left: -1.5rem;
  }
/*  .sp_br{
    display: block;
    margin-top: 1.2rem;
  }*/

}

@media screen and (max-width: 480px) {
  html{
    font-size: 60%;
  }

}