@charset "UTF-8";



/*-------------------------------------------------
.mv-under
------------------------------------------------*/
.contact .mv-under {
  background-image: url(../img/contact/mv-bg.webp);
}



/*-------------------------------------------------
.container
------------------------------------------------*/
.contact .container {
  inline-size: min(100% - (20px * 2), 1000px);
}


/*-------------------------------------------------
.contact-content
------------------------------------------------*/
.contact .contact-content {
  padding: 20px;
  background-color: #f9f9f9;
}

@media (width >= 520px) {
  .contact .contact-content {
    padding: 30px 30px calc(30px - 24px) 30px;
  }
}

@media (width >= 769px) {
  .contact .contact-content {
    padding: 40px 40px calc(40px - 24px) 40px;
  }
}

@media (width >= 960px) {
  .contact .contact-content {
    padding: 60px 60px calc(60px - 24px) 60px;
  }
}

@media (width >= 1200px) {
  .contact .contact-content {
    padding: 80px 80px calc(80px - 24px) 80px;
  }
}


/*-------------------------------------------------
.heading
------------------------------------------------*/
.contact .contact-content .heading p {
  line-height: 1.8;
}
.contact .contact-content .heading > p + p {
  margin-block-start: .8em;
}



/*-------------------------------------------------
.wpcf7
------------------------------------------------*/
.contact .contact-content .wpcf7 {
  margin-block-start: 50px;
}

.contact .contact-content .wpcf7 .parts + .parts {
  margin-block-start: 40px;
}

.contact .contact-content .wpcf7 .parts label span {
  display: inline-block;
  margin-inline-start: 1em;
  padding: 6px 10px;
  background-color: var(--clr-primary-black);
  color: #fff;
  font-size: clamp(12px, 0.67rem + 0.34vw, 14px);
}
.contact .contact-content .wpcf7 .parts .field {
  margin-block-start: 16px;
}

.contact .contact-content .wpcf7 input[type="text"],
.contact .contact-content .wpcf7 input[type="email"],
.contact .contact-content .wpcf7 input[type="tel"],
.contact .contact-content .wpcf7 textarea {
  inline-size: 100%;
  padding: .8em;
  border-radius: 4px;
  border: var(--clr-primary-black) 1px solid;
  background-color: #fff;
}
.contact .contact-content .wpcf7 textarea {
  resize: none;
  block-size: 130px;
}
.contact .contact-content .wpcf7 input:focus,
.contact .contact-content .wpcf7 textarea:focus {
  outline: none;
}

.contact .contact-content .wpcf7 .btn {
  margin-block-start: 50px;
  display: block;
  inline-size: 100%;
  max-inline-size: 160px;
  margin-inline: auto;
  padding-block: 16px;
  border: 3px solid var(--clr-primary-black);
  border-radius: 28px;
  background-color: #fff;
  text-align: center;
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
}


@media (width >= 520px) {
  .contact .contact-content .wpcf7 {
    margin-block-start: 60px;
  }
  .contact .contact-content .wpcf7 .parts + .parts {
    margin-block-start: 50px;
  }
  .contact .contact-content.wpcf7 textarea {
    block-size: 150px;
  }
  .contact .contact-content .wpcf7 .btn {
    margin-block-start: 60px;
  }
  /* .contact-complete .thanks-txt > * {
    text-align: center;
  } */
}

@media (width >= 768px) {
  .contact .contact-content .wpcf7 {
    margin-block-start: 70px;
  }
  .contact .contact-content .wpcf7 .parts + .parts {
    margin-block-start: 50px;
  }
  .contact .contact-content .wpcf7 textarea {
    block-size: 180px;
  }
  .contact .contact-content .wpcf7 .btn {
    margin-block-start: 60px;
  }
}

@media (width >= 960px) {
  .contact .contact-content .wpcf7 {
    margin-block-start: 80px;
  }
}





/*-------------------------------------------------
.メッセージ関連
------------------------------------------------*/
.contact .contact-content .wpcf7 .wpcf7-not-valid-tip {
  margin-block-start: 10px;
  font-size: clamp(15px, 0.897rem + 0.17vw, 16px);
}
.contact .contact-content .wpcf7 form .wpcf7-response-output {
  margin: 30px 0 0;
}
.contact .contact-content .wpcf7 form .wpcf7-response-output {
  padding: 1em;
  border: 3px solid var(--clr-primary-black);
  line-height: 1.8;
  color: var(--clr-primary-black);
}




/*-------------------------------------------------
footer
------------------------------------------------*/
.contact footer {
  margin-block-start: 100px;
}

@media (width >= 520px) {
  .contact footer {
    margin-block-start: 120px;
  }
}

@media (width >= 769px) {
  .contact footer {
    margin-block-start: 140px;
  }
}

@media (width >= 960px) {
  .contact footer {
    margin-block-start: 160px;
  }
}