/*===================================================
CONTACT - 問い合わせページ -
===================================================*/
/*確認画面と完了画面を非表示*/
.confirm_area,
.thanks_area {
  display: none;
}

/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output {
  display: none;
}

/* 共通パーツ */
.page-contact::before {
  content: "";
  display: block;
  background: url(../../img/common/bg_blur.png) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  translate: -23% -25%;
  --min-size: 300;
  --max-size: 600;
  width: var(--clamp-size);
  height: var(--clamp-size);
  z-index: -1;
}

/* KVをリセット */
.kv {
  height: unset;
  padding-bottom: 0;
}

.kv__title {
  position: static;
}

.kv__title--en,
.kv__title--ja {
  color: unset;
  width: fit-content;
  /* グラデーション文字 */
  background: var(--gradient-reverse);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: unset;
}

.kv__title--en::after {
  background: var(--gradient-reverse);
}




/* ------------------------------------------------
SNOW MONKEY FORMS
------------------------------------------------ */

.contact {

  /* ステップトラッカー ------ */
  .smf-progress-tracker {
    max-width: 475px;
    margin: 0 auto var(--space-lg);
  }

  .smf-progress-text {
    text-align: center;
  }

  .smf-progress-tracker__item__number {
    --min-size: 50;
    --max-size: 60;
    width: var(--clamp-size);
    height: auto;
    aspect-ratio: 1;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2em;

    color: #777;
    line-height: var(--lineHeight-1);
    border: 1px solid #ddd;
    border-radius: 999px;
    background-color: var(--color-white);
  }

  .smf-progress-tracker__item:after,
  .smf-progress-tracker__item:before {
    top: 50%;
  }

  /* ステップテキスト ------ */
  .smf-progress-tracker__item__number::after {
    content: "入力";
    display: block;
    font-weight: var(--fontWeight-regular);
    color: #777;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
  }

  .smf-progress-tracker__item:nth-child(2) .smf-progress-tracker__item__number::after {
    content: "確認";
  }

  .smf-progress-tracker__item:nth-child(3) .smf-progress-tracker__item__number::after {
    content: "完了";
  }

  /* アクティブステップ ------ */
  .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
    color: var(--color-white);
    border: 1px solid #ddd;
    background-color: var(--color-sky);
  }

  .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number::after {
    color: #fff;
  }

  .smf-progress-tracker__item[aria-current="false"] .smf-progress-tracker__item__number::after {
    color: #888;
  }

  .smf-progress-tracker__item__text {
    display: none;
  }

  /* フォームレイアウト ------ */
  .smf-form.smf-form--letter {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-4xl) var(--space-6xl) 0;
    background-color: #FAFAFA;
    --min-size: 38;
    --max-size: 50;
    margin-top: var(--clamp-size);
  }


  .smf-form--letter .smf-item {
    padding: 0;
  }

  /* 項目ラベル ------ */
  span.smf-item__label__text {
    display: flex;
    align-items: center;
  }

  /* 必須マーク ------ */
  .smf-item:has([data-validations*="required"]) .smf-item__label__text::before {
    content: "必須";
    display: inline-block;
    font-size: 10px;
    color: var(--color-white);
    padding: 0.3em 0.8em;
    background-color: #CD4343;
    margin-right: 0.5em;
  }

  /* 入力フィールド ------ */
  input[type=text],
  input[type=tel],
  input[type=email],
  textarea {
    border-radius: 0 !important;
    border: 1px solid #b3b3b3 !important;
    padding: 0.75em !important;
    background-color: var(--color-white);
    line-height: var(--lineHeight-150);
    color: var(--color-base);
  }

  /* チェックボックス ------ */
  .smf-checkbox-control__control {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.2em;
    margin-right: 0.5em;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 0.2em;
    vertical-align: -0.2em;
    appearance: none;
    background-color: var(--color-white);
    cursor: pointer;
  }

  /* チェック状態 */
  .smf-checkbox-control__control:checked {
    background-color: var(--color-sky, #007cba);
    border-color: var(--color-sky, #007cba);
  }

  /* チェックマーク */
  .smf-checkbox-control__control:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%) rotate(45deg);
    width: 0.3em;
    height: 0.6em;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
  }

  /* ラベルクリック */
  .smf-checkbox-control,
  .smf-checkbox-control__label {
    cursor: pointer;
  }

  .smf-label label {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }

  /* 水平レイアウト */
  .smf-checkboxes-control--horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg, 1rem);
  }

  .smf-checkboxes-control--horizontal .smf-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }

  /* チェックボックスラベル */
  span.smf-checkbox-control__label {
    line-height: var(--lineHeight-150);
  }

  .checkbox-center .smf-checkbox-control {
    align-items: center;
    margin-top: 0;
  }

  /* プライバシーポリシー ------ */
  .contact__privacy {
    margin-top: 1em;
  }

  .contact__privacy .smf-label label {
    justify-content: center;
  }

  .contact__privacy .smf-item__col--label {
    display: none;
  }

  .contact__privacy .smf-checkbox-control__label {
    font-size: var(--fontSize-sm);
  }

  .contact__privacy .smf-item__label__text:empty::before {
    content: "";
    display: none;
  }

  .contact__privacy .smf-checkbox-control__control {
    width: 1.1em;
    height: 1.1em;
    border-radius: 0;
  }

  /* 送信ボタン ------ */
  .smf-action {
    margin: 0 auto;

    padding: var(--space-4xl) var(--space-6xl) var(--space-6xl);
    background-color: #FAFAFA;
  }

  button.smf-button-control__control {
    background: var(--color-sky);
    color: var(--color-white);
    border-radius: 999px;
    border: 1px solid var(--color-sky);
    padding: 1em 2em;
    line-height: var(--lineHeight-150);
    text-align: center;
    transition: all 0.3s ease;
  }

  /* ホバーとフォーカス */
  button.smf-button-control__control:hover,
  button.smf-button-control__control:focus {
    background: var(--color-white);
    border: 1px solid var(--color-sky);
    color: var(--color-sky);
    transition: all 0.3s ease;
  }

  /* 送信完了 ------ */
  .smf-complete-content {
    line-height: var(--lineHeight-180);
  }

  .smf-action:empty {
    padding-bottom: 0;
  }

  @media (width < 768px) {
    .smf-form.smf-form--letter {
      padding: var(--space-xl) var(--padding-container) 0;
      background-color: #FAFAFA;
      --min-size: 38;
      --max-size: 50;
      margin-top: var(--clamp-size);
    }

    .smf-checkboxes-control__control {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }

    .smf-action {
        margin: 0 auto;
        padding: var(--space-xl) var(--padding-container) var(--space-2xl);
        background-color: #FAFAFA;
    }
  }
}