@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
お問い合わせ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/* .form_wrap  クラス名にcontactを含むもの全部に適用
.contact,.contact_confirm */
body[class*="contact_"] {
  .form_wrap {
    line-height: 1.5;
    letter-spacing: 0.05em;

    /* 必須 */
    sup.hissu {
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      width: 100%;
      border: 1px solid #666;
      font-size: var(--fsize_l);
      line-height: 1.5;
      padding: 0.5em;
      box-sizing: border-box;
      margin: 0.6rem 0;
      &::placeholder {
        color: #999;
      }
    }

    textarea {
      height: 12em;

      &.textarea_l {
        height: 8em;
      }
    }

    .wpcf7-form-control-wrap[data-name="toiawasenaiyo"] {
      .wpcf7-form-control {
        display: flex;
        flex-direction: column;
        gap: 1em;
        font-size: var(--fsize_l);
        .wpcf7-list-item {
          margin: 0;
          label {
            display: block;
            border: 1px solid #000;
            background-color: #fff;
            border: 1px solid #000;
            padding: 1em;
            border-radius: 0.8rem;
            box-sizing: border-box;
            cursor: pointer;
            color: #208dbf;
            transition: all 0.2s ease-out;
            &:hover {
              background-color: var(--color-ex-light-blue);
            }
            &:has(:checked) {
              background-color: var(--color-ex-light-blue);
            }
          }
        }
      }
    }

    .privacypolicy {
      text-align: center;
      margin: 4.8rem 0;
      @media screen and (max-width: 480px) {
        margin: 3.2rem 0;
      }
      .wpcf7-acceptance {
        label {
          font-size: var(--fsize_m);
          display: inline-block;
          background-color: #fff;
          border: 1px solid #000;
          text-align: center;
          padding: 1em 2em 1.5em;
          border-radius: 0.8rem;
          box-sizing: border-box;
          cursor: pointer;
          color: #208dbf;
          transition: all 0.2s ease-out;
          &:hover {
            background-color: var(--color-ex-light-blue);
          }
          &:has(:checked) {
            background-color: var(--color-ex-light-blue);
          }
        }
      }

      div.link {
        font-size: var(--fsize_ss);
        padding-top: 1em;

        a {
          text-decoration: underline;
        }
      }
    }

    .submit_wrap {
      text-align: center;

      input[type="submit"],
      input[type="button"] {
        appearance: none;
        border: none;
        background-color: #000;
        color: #fff;
        font-size: var(--fsize_l);
        letter-spacing: 0.1em;
        width: 32rem;
        height: 8rem;
        border-radius: 0.5em;
        margin: 1rem;
        cursor: pointer;

        @media screen and (max-width: 480px) {
          width: 80%;
          height: 6rem;
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }

      input[type="button"] {
        background-color: #000;
      }

      /* ボタン押した後の経過を表示するスピナー */
      span.wpcf7-spinner {
        display: block;
        margin: 1rem auto;
      }
    }

    /* エラーメッセージ */
    .wpcf7-validation-errors,
    .wpcf7-not-valid-tip,
    .wpcf7-mail-sent-ng {
      display: inline-block;
      background-color: #ffc7c7;
      font-size: var(--fsize_s);
      padding: 0.5em;
      line-height: 1.5;
      border-radius: 0.5em;
      margin: 0.5em;
      border: none;
    }

    .wpcf7-response-output {
      max-width: 80%;
      border: none;
      margin: 2rem auto !important;
      background-color: #ffc7c7;
      font-size: var(--fsize_m);
      line-height: 2;
      text-align: center;
      border-radius: 0.5em;

      @media screen and (max-width: 480px) {
        max-width: 90%;
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
  reCAPTCHA v3　表示 
  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/* .grecaptcha-badge {
  visibility: hidden;
}

.recapcha-text {
  font-size: var(--fsize_ss) !important;
  line-height: 2;
  text-align: center;
  margin: 1em auto;
  a {
    text-decoration: underline;
  }
}
 */

.wpcf7-turnstile {
  margin: 2rem auto;
  display: flex;
  justify-content: center;
}