@charset "UTF-8";
:root {
  --text-color-main: #333;
  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --color-black-01: #222;
  --color-black-01-rgb: 34, 34, 34;
  --color-black-02: #000;
  --color-black-03: #525252;
  --color-gray-01: #f0f0f0;
  --color-gray-02: #cecece;
  --color-gray-03: #ddd;
}

/*===================================
 page --- CONTACT
===================================*/
/*----------------------------------
 メインヴィジュアル
----------------------------------*/
.l-lower-mv {
  margin-bottom: 170px;
}
@media screen and (min-width: 600px) {
  .l-lower-mv {
    margin-bottom: 220px;
  }
}
@media screen and (min-width: 1025px) {
  .l-lower-mv {
    margin-bottom: 184px;
  }
}

.l-lower-mv__visual {
  background-image: url("../../../assets/img/contact/mv_sp.jpg");
  background-image: -webkit-image-set(url("../../../assets/img/contact/mv_sp.jpg") 1x, url("../../../assets/img/contact/mv_sp@2x.jpg") 2x);
  background-image: image-set(url("../../../assets/img/contact/mv_sp.jpg") 1x, url("../../../assets/img/contact/mv_sp@2x.jpg") 2x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 270px;
}
@media screen and (min-width: 600px) {
  .l-lower-mv__visual {
    background-image: url("../../../assets/img/contact/mv_tab.jpg");
    background-image: -webkit-image-set(url("../../../assets/img/contact/mv_tab.jpg") 1x, url("../../../assets/img/contact/mv_tab@2x.jpg") 2x);
    background-image: image-set(url("../../../assets/img/contact/mv_tab.jpg") 1x, url("../../../assets/img/contact/mv_tab@2x.jpg") 2x);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 529px;
  }
}
@media screen and (min-width: 1025px) {
  .l-lower-mv__visual {
    background-image: url("../../../assets/img/contact/mv.jpg");
    background-image: -webkit-image-set(url("../../../assets/img/contact/mv.jpg") 1x, url("../../../assets/img/contact/mv@2x.jpg") 2x);
    background-image: image-set(url("../../../assets/img/contact/mv.jpg") 1x, url("../../../assets/img/contact/mv@2x.jpg") 2x);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 387px;
  }
}

.l-lower-mv__title-bg {
  height: 365px;
}
@media screen and (min-width: 600px) {
  .l-lower-mv__title-bg {
    height: 615px;
  }
}
@media screen and (min-width: 1025px) {
  .l-lower-mv__title-bg {
    height: 451px;
  }
}

.l-lower-mv__title {
  top: 66%;
}
@media screen and (min-width: 600px) {
  .l-lower-mv__title {
    top: 34%;
    right: calc(-133px - 30px);
  }
}
@media screen and (min-width: 1025px) {
  .l-lower-mv__title {
    top: 56%;
    right: calc(-195px - 30px);
  }
}

.l-lower-mv__title--jp {
  text-align: right;
}
@media screen and (min-width: 600px) {
  .l-lower-mv__title--jp {
    text-align: left;
  }
}

/*----------------------------------
 フォーム
----------------------------------*/
.contact {
  padding-bottom: 80px;
}
@media screen and (min-width: 1025px) {
  .contact {
    padding-bottom: 120px;
  }
}
@media screen and (min-width: 600px) {
  .contact .l-inner {
    max-width: calc(668px + 30px * 2);
  }
}
@media screen and (min-width: 1025px) {
  .contact .l-inner {
    max-width: calc(700px + 30px * 2);
  }
}

.contact__intro {
  letter-spacing: 0.004em;
  line-height: 1.7142857143;
}
@media screen and (min-width: 600px) {
  .contact__intro {
    line-height: 1.5;
  }
}

.form {
  margin-top: 30px;
}

.form__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form__item:nth-of-type(n + 2) {
  margin-top: 35px;
}
@media screen and (min-width: 600px) {
  .form__item:nth-of-type(n + 2) {
    margin-top: 37px;
  }
}
@media screen and (min-width: 1025px) {
  .form__item:nth-of-type(n + 2) {
    margin-top: 40px;
  }
}
.form__item label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form__item input:not([type=radio], [type=checkbox]),
.form__item textarea,
.form__item .form__privacy {
  border: 1px solid var(--text-color-main);
  width: 100%;
  padding: 20px;
}
.form__item .form__privacy {
  color: var(--color-black-03);
}
.form__item textarea {
  resize: none;
  height: 210px;
}
@media screen and (min-width: 600px) {
  .form__item textarea {
    height: 180px;
  }
}
@media screen and (min-width: 1025px) {
  .form__item textarea {
    height: 212px;
  }
}
.form__item {
  /* ------ ラジオボタン ------ */
}
.form__item input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: none;
  position: absolute;
}
.form__item input[type=radio] + span {
  position: relative;
  display: inline-block;
  padding-left: 40px;
  cursor: pointer;
}
.form__item input[type=radio] + span::before, .form__item input[type=radio] + span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  content: "";
  border-radius: 50%;
  margin: auto 10px auto 0;
}
.form__item input[type=radio] {
  /* 外側の円 */
}
.form__item input[type=radio] + span::before {
  left: 9px;
  background: var(--color-white);
  border: 1px solid var(--text-color-main);
  width: 20px;
  height: 20px;
}
.form__item input[type=radio] {
  /* 内側の円 */
}
.form__item input[type=radio] + span::after {
  left: 13px;
  width: 12px;
  height: 12px;
  opacity: 0;
}
.form__item input[type=radio] {
  /* チェック時の外側の円 */
}
.form__item input[type=radio]:checked + span::before {
  border: 1px solid var(--text-color-main);
}
.form__item input[type=radio] {
  /* チェック時の内側の円 */
}
.form__item input[type=radio]:checked + span::after {
  background: var(--text-color-main);
  opacity: 1;
}
.form__item {
  /* 必須 */
}
.form__item .form__required {
  display: inline-block;
  background-color: var(--text-color-main);
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.004em;
  line-height: 1;
  text-align: center;
  margin-left: 10px;
  padding: 5px;
}

.form__item--center {
  place-items: center;
}

.form__label {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.004em;
  margin-bottom: 7px;
}

/* 入力欄などのform関連タグを囲むclass */
.form__control {
  width: 100%;
}

.form__head {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.004em;
}

/* ------ PRIVACY POLICY ------ */
.form__privacy {
  overflow-y: scroll;
  height: 226px;
}
@media screen and (min-width: 1025px) {
  .form__privacy {
    height: 252px;
  }
}

.form__privacy-item {
  font-size: 1.4rem;
  line-height: 1.7142857143;
  letter-spacing: 0.004em;
}
@media screen and (min-width: 600px) {
  .form__privacy-item {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}
.form__privacy-item:nth-child(n+2) {
  margin-top: 20px;
}

/* ------ 同意チェック ------ */
.form__acceptance {
  display: -ms-grid;
  display: grid;
  place-items: center;
  gap: 10px;
  margin-block: 20px;
  font-size: 1.4rem;
  line-height: 1.7142857143;
  letter-spacing: 0.004em;
}
@media screen and (min-width: 600px) {
  .form__acceptance {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}
.form__acceptance .wpcf7-list-item {
  position: relative;
  margin: 0;
}

/* ------ Cloudflare Turnstile ------ */
.form__turnstile {
  margin-block: 20px;
}

.form__notes {
  display: block;
  text-align: center;
  margin: 20px 0;
}

/* ------ 送信ボタン ------ */
.form__submit {
  margin-top: 40px;
}
.form__submit .c-btn-base {
  margin: 0 auto;
}
.form__submit .wpcf7-submit {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 2.2857142857;
}

/*----------------------------------
 Contact Form 7
----------------------------------*/
/* ------ ラジオボタン ------ */
.wpcf7-radio {
  display: inline-block;
  margin-top: 12px;
}
@media screen and (min-width: 600px) {
  .wpcf7-radio {
    margin-top: 0;
  }
}
.wpcf7-radio .wpcf7-list-item {
  display: block;
  margin-left: 0;
}
@media screen and (min-width: 600px) {
  .wpcf7-radio .wpcf7-list-item {
    display: inline-block;
  }
}
.wpcf7-radio .wpcf7-list-item:nth-child(n+2) {
  margin-top: 10px;
}
@media screen and (min-width: 600px) {
  .wpcf7-radio .wpcf7-list-item:nth-child(n+2) {
    margin-top: 0;
    margin-left: 40px;
  }
}
.wpcf7-radio .wpcf7-list-item.first {
  margin-left: 0;
}

/* ------ チェックボックス ------ */
input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.wpcf7-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.wpcf7-list-item-label {
  font-size: 1.4rem;
  letter-spacing: 0.004em;
  line-height: 1.7142857143;
  cursor: pointer;
}
@media screen and (min-width: 600px) {
  .wpcf7-list-item-label {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.wpcf7-list-item-label {
  /* チェックボックスの枠 */
}
.wpcf7-list-item-label::before {
  position: relative;
  top: -2px;
  display: inline-block;
  content: "";
  border: 1px solid var(--text-color-main);
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  cursor: pointer;
}
@media screen and (min-width: 600px) {
  .wpcf7-list-item-label::before {
    width: 20px;
    height: 20px;
  }
}

input[type=checkbox] {
  /* チェック時 */
}
input[type=checkbox]:checked + .wpcf7-list-item-label {
  /* チェックアイコン */
}
input[type=checkbox]:checked + .wpcf7-list-item-label::after {
  position: absolute;
  top: 3px;
  left: 3px;
  display: block;
  content: "";
  border-bottom: 3px solid var(--text-color-main);
  border-left: 3px solid var(--text-color-main);
  width: 20px;
  height: 10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* ------ ローディングアイコン ------ */
.wpcf7-spinner {
  display: none;
}

/*----------------------------------
 送信完了ページ
----------------------------------*/
.contact--thanks .c-btn-base {
  margin-top: 120px;
}