@charset "UTF-8";
/*===============================
scss 変数ファイル
================================*/
/*
カラー
================================*/
/*
メディアクエリ
================================*/
#contact .contact__back {
 position: relative;
 height: 200px;
 background: #1a1414;
 margin-top: 65.06px;
}
@media screen and (min-width: 640px) {
 #contact .contact__back {
  margin-top: 85.06px;
  height: 300px;
  background-size: 200% auto;
 }
}
@media screen and (min-width: 768px) {
 #contact .contact__back {
  height: 350px;
 }
}
@media screen and (min-width: 1024px) {
 #contact .contact__back {
  background-size: 150% auto;
 }
}
#contact .contact__back__inner {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 30px 0;
 background-color: #fff;
 width: 85%;
 margin: auto;
 text-align: center;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
  rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 border-radius: 5px;
 max-width: 500px;
}
@media screen and (min-width: 640px) {
 #contact .contact__back__inner {
  padding: 50px 0;
 }
}
#contact .contact__back__inner--heading {
 color: #1a1414;
 font-size: 2.4rem;
}
@media screen and (min-width: 640px) {
 #contact .contact__back__inner--heading {
  font-size: 2.8rem;
 }
}
@media screen and (min-width: 768px) {
 #contact .contact__back__inner--heading {
  font-size: 3.2rem;
 }
}
@media screen and (min-width: 1024px) {
 #contact .contact__back__inner--heading {
  font-size: 3.6rem;
 }
}
#contact .contact__back__inner--subHeading {
 font-weight: 900;
 margin-top: 5px;
 font-size: 2rem;
}
@media screen and (min-width: 640px) {
 #contact .contact__back__inner--subHeading {
  margin-top: 8px;
 }
}
@media screen and (min-width: 768px) {
 #contact .contact__back__inner--subHeading {
  font-size: 2.4rem;
 }
}
@media screen and (min-width: 1024px) {
 #contact .contact__back__inner--subHeading {
  margin-top: 10px;
  font-size: 2.8rem;
 }
}

#contact .p_contact__description {
 max-width: 640px;
 margin-left: auto;
 margin-right: auto;
}
#contact .p_contact__description .paragraphs p sup {
 display: inline-block;
 color: #cc0000;
 margin-right: 10px;
}
#contact .p_contact__form {
 max-width: 850px;
 margin-left: auto;
 margin-right: auto;
}
@media screen and (min-width: 640px) {
 #contact .p_contact__form dl {
  display: flex;
  align-items: center;
 }
}
#contact .p_contact__form dl:not(:first-child) {
 margin-top: 50px;
}
@media screen and (min-width: 768px) {
 #contact .p_contact__form dl:not(:first-child) {
  margin-top: 60px;
 }
}
#contact .p_contact__form dl dt {
 font-weight: bold;
}
@media screen and (min-width: 640px) {
 #contact .p_contact__form dl dt {
  width: 130px;
  margin-right: 50px;
 }
}
@media screen and (min-width: 768px) {
 #contact .p_contact__form dl dt {
  width: 150px;
  margin-right: 80px;
 }
}
@media screen and (min-width: 1024px) {
 #contact .p_contact__form dl dt {
  margin-right: 100px;
 }
}
#contact .p_contact__form dl dt sup {
 display: inline-block;
 margin-left: 10px;
 color: #cc0000;
}
#contact .p_contact__form dl dd {
 margin-top: 20px;
 padding-bottom: 10px;
 border-bottom: 1px solid #ccc;
}
@media screen and (min-width: 640px) {
 #contact .p_contact__form dl dd {
  margin-top: 0;
  flex: 1;
 }
}
#contact .p_contact__form dl dd .wpcf7-form-control-wrap input[type="text"],
#contact .p_contact__form dl dd .wpcf7-form-control-wrap input[type="email"],
#contact .p_contact__form dl dd .wpcf7-form-control-wrap select,
#contact .p_contact__form dl dd .wpcf7-form-control-wrap textarea {
 width: 100%;
 line-height: 1.6em;
}
#contact .p_contact__form dl dd .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
 position: absolute;
 left: 0;
 bottom: -35px;
 font-size: 1.4rem;
}
#contact .p_contact__form dl .select {
 position: relative;
}
#contact .p_contact__form dl .select:after {
 content: "";
 display: block;
 position: absolute;
 top: 7px;
 right: 0;
 background-image: url("../../images/page/contact/arrow.svg");
 background-repeat: no-repeat;
 background-position: top right;
 background-size: 100% auto;
 width: 16px;
 height: 8px;
}
#contact .p_contact .privacy {
 margin-top: 50px;
 font-size: 1.2rem;
 text-align: center;
 line-height: 2em;
}
@media screen and (min-width: 640px) {
 #contact .p_contact .privacy {
  font-size: 1.4rem;
 }
}
@media screen and (min-width: 768px) {
 #contact .p_contact .privacy {
  margin-top: 80px;
 }
}
#contact .p_contact .privacy a {
 font-weight: bold;
 text-decoration: underline;
}
#contact .p_contact .submit {
 margin-top: 30px;
 text-align: center;
}
@media screen and (min-width: 640px) {
 #contact .p_contact .submit {
  margin-top: 40px;
 }
}
#contact .p_contact .submit input {
 pointer-events: none;
 opacity: 0.8;
 width: 100%;
 padding: 20px 0 22px;
 background-color: #1a1414;
 color: #fff;
 font-weight: bold;
 max-width: 300px;
 transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
 #contact .p_contact .submit input {
  padding: 25px 0 27px;
 }
}
#contact .p_contact .submit .wpcf7-spinner {
 display: none;
}
#contact .p_contact .submitActive input {
 pointer-events: auto;
 opacity: 1;
}
@media screen and (min-width: 1024px) {
 #contact .p_contact .submitActive input:hover {
  opacity: 0.9;
 }
}
#contact .p_contact .wpcf7-response-output {
 text-align: center;
 margin: 0 auto 30px;
 padding: 15px 20px;
 line-height: 1.6em;
 font-size: 1.2rem;
 max-width: 400px;
}
@media screen and (min-width: 640px) {
 #contact .p_contact .wpcf7-response-output {
  font-size: 1.4rem;
  max-width: 450px;
 }
}
#contact .p_contact__rechaptcha {
 font-size: 1.2rem;
 line-height: 1.6em;
}
@media screen and (min-width: 640px) {
 #contact .p_contact__rechaptcha {
  text-align: center;
 }
}
@media screen and (min-width: 768px) {
 #contact .p_contact__rechaptcha {
  font-size: 1.4rem;
 }
}
#contact .p_contact__rechaptcha a {
 text-decoration: underline;
 font-weight: bold;
}
#contact {
} /* 画像をページ幅いっぱいに・下に余白 */
#contact .p_contact__kv img {
 width: 100%;
 height: auto;
 display: block;
}
#contact .p_contact__kv {
 margin-bottom: 3rem; /* 説明文との間隔 */
}