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

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

/* .form_wrap  クラス名にcontactを含むもの全部に適用
.contact,.contact_confirm */
body[class*="contact_"] {
  .form_wrap {
    font-size: var(--fsize_m);
    line-height: 1.5;

    /* -------------------- */
    /* リストで作成 */

    dl {
      max-width: 980px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      @media screen and (max-width: 480px) {
        flex-direction: column;
      }

      dt,
      dd {
        margin: 1rem 0;
        line-height: 1.5;
      }

      dt {
        width: 38%;
        font-weight: bold;

        @media screen and (max-width: 480px) {
          width: 100%;
          margin: 0.5rem 0;
        }
      }

      dd {
        width: 60%;

        @media screen and (max-width: 480px) {
          width: 100%;
          margin: 0 0 0.8em;
        }
      }
    }

    /* 背景の切り替え */
    .form_kirikae {
      padding: 3.2rem 1rem;

      @media screen and (max-width: 480px) {
        padding: 1rem 1rem;
      }

      &:nth-of-type(2n) {
        background-color: #eee;
      }
    }

    /* 必須 */
    .hissu_ano {
      text-align: center;
      font-weight: bold;
      margin: 2em auto;
      color: #c00;
    }

    sup.hissu {
      font-size: 0.75em;
      color: #c00;
    }

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

      &::placeholder {
        color: #999;
      }
    }

    input {
      &.size-ss {
        width: 6em;
        margin-right: 0.5rem;
      }

      &.size-s {
        width: 10em;
        margin-right: 0.5rem;
      }

      &.zipcord {
        width: 8em;
      }
    }

    textarea {
      height: 4em;

      &.textarea_l {
        height: 9em;
      }
    }
  }

  /* labelに囲まれたinputの縦方向揃え */
  .wpcf7-list-item label input {
    vertical-align: baseline;
  }

  .privacypolicy {
    width: 50%;
    background-color: #acf;
    margin: 6rem auto;
    text-align: center;
    padding: 1em 1em 1.5em;
    border-radius: 0.8rem;
    box-sizing: border-box;

    @media screen and (max-width: 480px) {
      width: 80%;
      margin: 4rem auto;
    }

    div.link {
      font-size: 0.75em;
      padding-top: 1.25em;

      a {
        text-decoration: underline;
      }
    }
  }

  .submit_wrap {
    text-align: center;

    @media screen and (max-width: 480px) {
      margin-top: 4rem;
    }

    input[type="submit"],
    input[type="button"] {
      appearance: none;
      border: none;
      background-color: #333;
      color: #fff;
      font-size: calc(var(--fsize_m) * 1.5);
      letter-spacing: 0.1em;
      width: 32rem;
      height: 9rem;
      border-radius: 4.5rem;
      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: 1.2rem;
  line-height: 2;
  text-align: center;
  margin: 1em auto;
}

/* <p class="recapcha-text">このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a> と<a href="https://policies.google.com/terms" target="_blank" rel="noopener">利用規約</a> が適用されます。</p> */