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

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

.contact_wrap {
  margin-bottom: 20rem;
  @media screen and (max-width: 480px) {
    margin-bottom: 10rem;
  }
  .tel_wrap,
  .mail_wrap {
    padding: 0 2rem 9rem;
    @media screen and (max-width: 480px) {
      padding: 0 2rem 4rem;
    }
    h2 {
      background-color: var(--color-blue);
      color: #fff;
      max-width: 80rem;
      margin: 0 auto 2rem;
      text-align: center;
      padding: 0.7em 0 0.8em;
      span {
        display: inline-block;
        letter-spacing: 0.17em;
        padding-left: 0.17em;
        font-size: 2rem;
        font-weight: 500;
        @media screen and (max-width: 480px) {
          font-size: 1.6rem;
        }
      }
    }
    p.copy {
      font-size: 1.6rem;
      letter-spacing: 0.7;
      text-align: center;
      font-weight: 300;
      line-height: 1.625;
      strong {
        color: var(--color-blue);
      }
      @media screen and (max-width: 480px) {
        font-size: 1.4rem;
        text-align: left;
      }
    }
  }

  .tel_wrap {
    .tel {
      display: flex;
      justify-content: center;
      letter-spacing: 0.04em;
      font-size: 3rem;
      font-weight: 700;
      gap: 3rem;
      margin: 3.6rem 0;
      @media screen and (max-width: 480px) {
        margin: 2.4rem 0 2rem;
        font-size: 1.6rem;
        flex-direction: column;
        gap: 1.6rem;
        align-items: center;
      }
      li.telnumber {
        @media screen and (max-width: 480px) {
          width: 80%;
        }
        a {
          color: #000;
          @media screen and (max-width: 480px) {
            display: block;
            font-size: 2rem;
            background-color: var(--color-ex-light-blue);
            padding: 0.75em;
            text-align: center;
            color: var(--color-blue);
            border-radius: 1rem;
          }
        }
      }
    }
    .eigyo {
      text-align: center;
      font-size: 1.8rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      padding-left: 0.06em;
      line-height: 1.5;
      @media screen and (max-width: 480px) {
        font-size: 1.4rem;
      }
    }
  }

  .mail_wrap {
    background-color: var(--color-ex-light-blue);

    h2 {
      transform: translateY(-50%);
    }
    /* -------------------- */
    /* フォーム部分 */
    .form_wrap {
      margin: 4.6rem auto 0;
      font-size: 1.8rem;
      line-height: 1.5;
      max-width: 80rem;
      @media screen and (max-width: 480px) {
        font-size: 1.4rem;
      }
      /* -------------------- */
      /* リストで作成 */

      dl {
        margin: auto auto 5.8rem;
        display: flex;
        flex-wrap: wrap;

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

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

        dt {
          width: 28%;
          letter-spacing: 0.05em;
          padding-top: 1.15em;
          @media screen and (max-width: 480px) {
            width: 100%;
            margin: 0.5rem 0;
            padding-top: 0;
          }
        }

        dd {
          width: 70.5%;

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

      span.hissu {
        display: inline-block;
        font-size: 0.75em;
        color: #fff;
        background-color: var(--color-blue);
        padding: 0.125em 0.5em;
        margin-left: 1em;
      }

      input[type="text"],
      input[type="email"],
      input[type="tel"],
      textarea {
        width: 100%;
        font-size: 1.8rem;
        line-height: 1.5;
        padding: 0.9em 0.5em;
        box-sizing: border-box;
        margin: 0.6rem 0;
        border: none;
        @media screen and (max-width: 480px) {
          font-size: 1.4rem;
          margin: 0 0 0.5em;
        }
        &::placeholder {
          color: #999;
        }
      }

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

      textarea {
        height: 4em;
        &.textarea_s {
          height: 5em;
        }
        &.textarea_l {
          height: 9em;
        }
      }

      /* ラジオ */
      .wpcf7-radio {
        display: inline-block;
        padding-top: 0.5em;
        .wpcf7-list-item label {
          display: inline-block;
          padding: 0.5em 1em 0.5em 0;
          input {
            vertical-align: baseline;
          }
        }
      }

      /* プライバシーポリシー */
      h3 {
        font-size: 2rem;
        color: var(--color-blue);
        letter-spacing: 0.16em;
        text-align: center;
        padding-left: 0.16em;
        font-weight: 500;
        margin: 1em 0;
        @media screen and (max-width: 480px) {
          font-size: 1.6rem;
        }
      }
      .policy-copy {
        font-size: 1.4rem;
        letter-spacing: 0.04em;
        padding-left: 0.04em;
        line-height: 1.75;
        text-align: center;
        margin-bottom: 2em;
        @media screen and (max-width: 480px) {
          font-size: 1.2rem;
          text-align: left;
        }
      }
      .policy-text {
        background-color: #fff;
        height: 28rem;
        padding: 3em;
        overflow-y: auto;
        font-size: 1.4rem;
        line-height: 1.7;
        scrollbar-color: var(--color-blue) #fff;
        @media screen and (max-width: 480px) {
          font-size: 1.2rem;
          padding: 1em 1.5em;
        }
        /* スクロールバー全体 */
        &::-webkit-scrollbar {
          width: 1rem; /* 縦スクロールバーの幅 */
        }

        /* スクロールバーのトラック部分（背景） */
        &::-webkit-scrollbar-track {
          background: #ffff;
        }

        /* スクロールハンドル（つまみ）部分 */
        &::-webkit-scrollbar-thumb {
          background: var(--color-blue);
          border-radius: 9999px;
        }
        h4,
        h5 {
          font-size: 1.14em;
        }
        p {
          margin: 0 0 1em;
        }
      }
      .policy-acceptance {
        margin: 3.6rem auto 2rem;
        text-align: center;
        .wpcf7-list-item {
          margin: 0;
          label {
            display: inline-block;
            letter-spacing: 0.1em;
            padding: 1em;
          }
        }
      }

      .submit_wrap {
        text-align: center;

        button,
        input[type="submit"],
        input[type="button"] {
          appearance: none;
          border: none;
          background-color: var(--color-blue);
          box-sizing: border-box;
          color: #fff;
          font-size: 1.8rem;
          letter-spacing: 0.1em;
          text-align: center;
          padding: 0.78em 1.67em 0.88em;
          min-width: 10.889em;
          border-radius: 999px;
          margin: 0.5em;
          cursor: pointer;

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

          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
        }
        button {
          background-color: #a4a3a3;
          color: #fff;
        }

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

      /* エラーメッセージ */
      .wpcf7-validation-errors,
      .wpcf7-not-valid-tip,
      .wpcf7-mail-sent-ng {
        display: inline-block;
        background-color: #ffc7c7;
        padding: 0.5em;
        line-height: 1.5;
        border-radius: 0.5em;
        margin: 0.5em;
        border: none;
        font-size: 1.4rem;
        @media screen and (max-width: 480px) {
          font-size: 1.2rem;
        }
      }

      .wpcf7-response-output {
        box-sizing: border-box;
        border: none;
        margin: 0 auto 2rem !important;
        background-color: #ffc7c7;
        line-height: 1.5;
        text-align: center;
        border-radius: 0.5em;
        padding: 1em;
        font-size: 1.8rem;
        @media screen and (max-width: 480px) {
          font-size: 1.4rem;
        }
      }
      .wpcf7-mail-sent-ok {
        background-color: #fff;
        color: var(--color-blue);
      }
    }
  }

  .recapcha-text {
    font-size: 1.2rem;
    line-height: 2;
    text-align: center;
    margin: 1em auto;
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
  reCAPTCHA v3　表示 
  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.grecaptcha-badge {
  visibility: hidden;
}