/* ================================
   基本レイアウト
================================ */
.content-section__label {
  font-size: 1.11vw;
}
.content-section__title {
  font-size: 3.89vw;
}
.contact {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5vw;
  padding: 5vw 13.5vw;
  margin: auto;
  background-color: #fff; /* 背景色 */
  font-family: "Noto Sana JP";
}
.contact__intro {
  max-width: 26.25vw;
}
.contact__note {
  font-size: clamp(10px, 1.04vw, 18px);
  font-weight: 400;
  line-height: 2;
  margin-bottom: 1.67vw;
}
.contact__note--thin {
  font-size: 0.9vw;
  font-weight: 300;
  line-height: 2;
  color: #505050;
  margin-bottom: 1.67vw;
}
.contact__note--thin span {
  color: #41db44;
}

.form {
  width: 41.7vw;
  display: flex;
  flex-direction: column;
  gap: 2.78vw;
  margin-top: -0.3vw;
}

/* ================================
     フォーム共通スタイル
  ================================ */
.form__group {
  width: 41.7vw;
  display: flex;
  flex-direction: column;
}

.form__label {
  font-size: clamp(10px, 1.04vw, 18px);
  font-weight: 500;
  line-height: 1;
}

.form__required {
  color: #41db44;
  font-size: 0.83vw;
}

.form__fields--inline {
  display: flex;
  gap: 1.11vw;
}
.form__fields--inline p {
  display: flex;
  gap: 0.56vw;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.3vw 1.11vw;
  border: 1px solid #575757;
  border-radius: 0.28vw;
  font-size: 0.97vw;
  font-weight: 400;
  line-height: 2.8;
  background-color: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
  margin: 1.11vw 0 2.78vw;
}
input,
button,
select,
textarea,
.contact__note,
.contact__note--thin,
.form__label,
.breadcrumb,
.complete__title,
.complete__text {
  font-family: "Noto Sans JP";
  color: #101010;
}
.form__select {
  height: 3.75vw;
}
.form__select {
  /* ▼ デフォルト矢印を消す */
  appearance: none; /* 標準ブラウザ */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
}
.form__select-wrap {
  position: relative;
}
/* 疑似要素で三角形を作る */
.form__select-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none; /* 矢印がクリックを邪魔しないように */
  top: 35%;
  right: 0.8em;

  /* ▼ 三角形（黒色） */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000; /* 黒い下向き三角 */
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: #41db44;
  outline: none;
}

/* テキストエリア */
.form__textarea {
  height: 12.8vw;
  resize: vertical;
}

/* ボタン */
.form__actions {
  text-align: center;
}
.confirm .form__actions {
  margin-top: 3.33vw;
}
.form__actions input {
  justify-content: center;
}
.contact .btn__link {
  width: 100%;
}
.contact .btn__link:hover {
  background-color: #fff;
  border: 1px solid #18d91c;
  cursor: pointer;
}
.contact .btn__link-text {
  margin: 0 auto;
}
.contact .btn__link:hover .btn__link-text {
  color: #fff;
}
.wpcf7-form-control.wpcf7-submit.has-spinner.form__button.btn__link {
  color: #fff;
}
.wpcf7-form-control.wpcf7-submit.has-spinner.form__button.btn__link:hover {
  color: #fff;
  background-color: #41db44;
}

/* 3) 入力エラー時の枠・背景（任意） */
.form--contact .wpcf7-not-valid {
  border: 1px solid #ff3030;
  background-color: #f4d2d2;
}

.wpcf7-not-valid-tip {
  margin-top: -2vw;
}
/* ================================
     確認画面
  ================================ */
.content-section__title span {
  display: inline-block;
  margin-right: 1.11vw;
}
.content-section__title.smaller {
  font-size: 2.22vw;
}
.confirm {
  background: #fff;
  border-radius: 1.67vw;
  font-family: "Noto Sana JP";
}
.p-contact-confirm__header,
.c-form {
  width: 41.7vw;
  margin: 0 auto;
}
.p-contact-confirm__header {
  padding-top: 5vw;
  display: flex;
  flex-direction: column;
  gap: 1.39vw;
}
.c-lead {
  font-size: clamp(10px, 1.04vw, 18px);
  font-family: "Noto Sans JP";
  font-weight: 400;
  line-height: 2.08vw;
  color: #101010;
}
.c-note {
  font-size: 0.9vw;
  font-family: "Noto Sans JP";
  font-weight: 300;
  line-height: 1.67vw;
  color: #505050;
}
.c-form {
  margin-top: 3.89vw;
  display: flex;
  flex-direction: column;
  gap: 3.33vw;
}
.o-dl {
  display: flex;
  flex-direction: column;
  gap: 3.33vw;
}
.o-dl__row {
  display: flex;
  flex-direction: column;
  gap: 1.39vw;
}
.o-dl__term {
  font-size: 0.9vw;
  font-family: "Noto Sans JP";
  font-weight: 300;
  line-height: 0.69vw;
}
.o-dl__desc {
  font-size: 1.11vw;
  font-family: "Noto Sans JP";
  font-weight: 500;
  line-height: 1.94vw;
}
.confirm .btn__link {
  width: 100%;
  padding: 14px 0;
}
.confirm .form__actions p {
  display: flex;
  gap: 0.83vw;
  margin-bottom: 72px;
  text-align: center;
}
.confirm .btn__link-previous {
  background-color: #989898;
  color: #fff;
}
.confirm .wpcf7-spinner {
  display: none;
}
.confirm .btn__link-previous:hover {
  opacity: 0.75;
  cursor: pointer;
}
.confirm .btn__link-text {
  margin: 0 auto;
}
.confirm .btn__link:hover .btn__link-text {
  color: #fff;
  background-color: #41db44;
}
.confirm .wpcf7-form-control.wpcf7-submit.has-spinner.form__button.btn__link {
  margin-top: 0;
}
/* ================================
     完了画面
  ================================ */
.complete {
  padding: 7.08vw 5vw 5vw;
}
.complete__inner {
  margin: 0 auto;
  width: 41.7vw;
}
.complete__title {
  font-size: 1.67vw;
  font-weight: 700;
  line-height: 3;
  margin-bottom: 2.22vw;
}
.complete__text {
  font-size: clamp(10px, 1.04vw, 18px);
  font-weight: 400;
  line-height: 2;
  margin-bottom: 1.67vw;
}
.complete__notice {
  font-size: 0.9vw;
  font-weight: 300;
  line-height: 1.67vw;
  margin-bottom: 3.89vw;
  color: #181818;
}
.complete .btn__link {
  width: 100%;
}
.complete .btn__link:hover {
  background-color: #41db44;
  border: 1px solid #18d91c;
  cursor: pointer;
  opacity: 1;
}
.complete .btn__link-text {
  margin: 0 auto;
}
.complete .btn__link:hover .btn__link-text {
  color: #fff;
}

/* ================================
     レスポンシブ対応
  ================================ */

@media (max-width: 900px) {
  .wpcf7 form.invalid .wpcf7-response-output {
    bottom: 13vw;
  }
}
/* スマホ用 */
@media (max-width: 768px) {
  /* ================================
   基本レイアウト
================================ */
  .content-section__label {
    font-size: 3.73vw;
  }
  .content-section__title {
    font-size: 8.53vw;
  }
  .contact {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 14.2vw;
    padding: 8.53vw 6.4vw 14.9vw;
    margin: auto;
    background-color: #fff; /* 背景色 */
  }
  .contact__intro {
    max-width: 100%;
  }
  .contact__note {
    font-size: 4vw;
    font-weight: 400;
    line-height: 2;
    margin-bottom: 5.33vw;
  }
  .contact__note--thin {
    font-size: 3.47vw;
    font-weight: 300;
    line-height: 1.9;
    color: #505050;
    margin-bottom: 5.33vw;
  }
  .contact__note--thin:nth-child(3) {
    margin-bottom: 0;
  }

  .form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8.53vw;
    margin-top: -0.3vw;
  }

  /* ================================
     フォーム共通スタイル
  ================================ */
  .form__group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4.26vw;
    margin-bottom: 8.53vw;
  }

  .form__label {
    font-size: 4vw;
    font-weight: 500;
    line-height: 1;
  }

  .form__required {
    font-size: 3.2vw;
  }

  .form__fields--inline {
    display: flex;
    gap: 1.11vw;
  }

  .form__input,
  .form__select,
  .form__textarea {
    width: 100%;
    padding: 1.7vw 3.2vw;
    border: 1px solid #575757;
    border-radius: 1.07vw;
    font-size: 3.47vw;
    font-weight: 400;
    line-height: 2.8;
    background-color: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
  }
  .form__select {
    height: 14.4vw;
  }
  .form__select {
    /* ▼ デフォルト矢印を消す */
    appearance: none; /* 標準ブラウザ */
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
  }
  .form__select-wrap {
    position: relative;
  }
  /* 疑似要素で三角形を作る */
  .form__select-wrap::after {
    content: "";
    position: absolute;
    pointer-events: none; /* 矢印がクリックを邪魔しないように */
    top: 50%;
    right: 0.8em;
    transform: translateY(-50%);

    /* ▼ 三角形（黒色） */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid #000; /* 黒い下向き三角 */
  }

  /* テキストエリア */
  .form__textarea {
    height: 49.3vw;
    resize: vertical;
  }

  /* ボタン */
  .form__actions {
    text-align: center;
  }
  .confirm .form__actions {
    margin-top: 10.1vw;
  }
  .contact .btn__link {
    width: 100%;
  }
  .contact .btn__link-text {
    margin: 0 auto;
  }
  .form__fields--inline {
    flex-direction: column;
    gap: 4.27vw;
  }
  .form__fields--inline p {
    display: flex;
    flex-direction: column;
    gap: 1.6vw;
  }
  .form__fields--inline p br {
    display: none;
  }
  .form__button {
    width: 100%;
  }
  input[type="submit"].form__button {
    -webkit-appearance: none; /* Safari/iOSデフォルトを無効化 */
    appearance: none;
    text-align: center;
    display: inline-block;
  }
  .contact .form__button.btn__link {
    padding: 16px 14px 16px 32px;
  }
  .wpcf7-not-valid-tip {
    margin-top: 0;
  }
  /* ================================
     確認画面
  ================================ */
  .content-section__title.smaller {
    font-size: 5.33vw;
  }
  .p-contact-confirm__header,
  .c-form {
    width: 87.2vw;
    margin: 0 auto;
  }
  .p-contact-confirm__header {
    padding-top: 8.53vw;
    gap: 5.33vw;
  }
  .c-lead {
    font-size: 4vw;
    line-height: 8vw;
  }
  .c-note {
    font-size: 3.47vw;
    line-height: 6.4vw;
  }
  .c-form {
    margin-top: 14.9vw;
    gap: 10.7vw;
  }
  .o-dl {
    gap: 10.7vw;
  }
  .o-dl__row {
    gap: 5.33vw;
  }
  .o-dl__term {
    font-size: 3.47vw;
    line-height: 5.33vw;
  }
  .o-dl__desc {
    font-size: 3.73vw;
    line-height: 5.33vw;
  }
  .confirm .btn__link {
    width: 100%;
  }
  .confirm .btn__link-text {
    margin: 0 auto;
  }
  .confirm .wpcf7-form-control.wpcf7-submit.has-spinner.form__button.btn__link {
    margin-top: 0;
  }
  .confirm .form__actions p {
    flex-direction: column;
    gap: 1.14vw;
  }
  /* ================================
     完了画面
  ================================ */
  .complete {
    padding: 14.4vw 6.4vw 14.9vw;
  }
  .complete__inner {
    margin: 0 auto;
    width: 87.2vw;
  }
  .complete__title {
    font-size: 5.33vw;
    font-weight: 700;
    line-height: 3;
    margin-bottom: 6.4vw;
  }
  .complete__text {
    font-size: 4vw;
    font-weight: 400;
    line-height: 3;
    margin-bottom: 10.7vw;
  }
}