@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;
    padding: 0 var(--fsize_m) 10rem;
    @media screen and (max-width: 480px) {
      padding: 0 0 2rem;
    }

    h2 {
      font-size: var(--fsize_xl);
      text-align: center;
      word-break: keep-all;
      margin-bottom: 1em;
      font-weight: 600;
      color: var(--color-deep-blue);
      @media screen and (max-width: 480px) {
        font-size: var(--fsize_l);
      }
    }
    .hissukoumoku {
      text-align: center;
      margin-bottom: 1em;
      span {
        color: #c00;
      }
      @media screen and (max-width: 480px) {
        font-size: var(--fsize_s);
        padding: 0 var(--fsize_m);
      }
    }
    .leadcopy {
      max-width: 860px;
      margin: 0 auto 4em;
      @media screen and (max-width: 480px) {
        font-size: var(--fsize_s);
        padding: 0 var(--fsize_m);
      }
    }

    /* -------------------- */

    table {
      max-width: 860px;
      width: 100%;
      margin: auto;
      flex-wrap: wrap;
      justify-content: space-between;
      border-top: 2px solid #000;

      @media screen and (max-width: 480px) {
        display: block;
      }
      tbody {
        @media screen and (max-width: 480px) {
          display: block;
          width: 100%;
        }
        tr {
          border-bottom: 1px dotted #999;
          @media screen and (max-width: 480px) {
            display: block;
            padding: 0.5em 1em;
            box-sizing: border-box;
            width: 100%;
            &:nth-child(2n + 1) {
              background-color: #ddd;
            }
          }
          &:nth-child(2),
          &:nth-child(5),
          &:nth-child(8),
          &:nth-child(10),
          &:nth-child(12),
          &:nth-child(13) {
            border-bottom: 2px solid #000;
            @media screen and (max-width: 480px) {
              padding-bottom: 0.75em;
            }
            td,
            th {
              padding-bottom: 1.5em;
              @media screen and (max-width: 480px) {
                padding-bottom: 0;
              }
            }
          }
          &:nth-child(1),
          &:nth-child(3),
          &:nth-child(6),
          &:nth-child(9),
          &:nth-child(11),
          &:nth-child(13) {
            @media screen and (max-width: 480px) {
              padding-top: 0.75em;
            }
            td,
            th {
              padding-top: 1.5em;
              @media screen and (max-width: 480px) {
                padding: 0;
              }
            }
          }

          th,
          td {
            padding: 0.5em 1em;
            box-sizing: border-box;
            @media screen and (max-width: 480px) {
              padding: 0;
            }
          }
          th {
            width: 38%;
            font-weight: 400;
            background-color: #ddd;
            @media screen and (max-width: 480px) {
              display: block;
              width: 100%;
              background-color: transparent;
            }
          }

          td {
            width: 62%;

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

    /* 必須 */

    span.hissu {
      &::after {
        content: "※";
        color: #c00;
        font-size: var(--fsize_ss);
        vertical-align: text-top;
        display: inline-block;
        padding-left: 0.5em;
      }
    }

    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: 12em;
      &.two-line {
        height: 4.1em;
      }
    }
  }
  .check_wrap {
    /* labelに囲まれたinputの縦方向揃え */
    text-align: center;
    margin: 6rem 0;
    @media screen and (max-width: 480px) {
      padding: 0 var(--fsize_m);
      margin: 3rem 0;
    }
    .wpcf7-acceptance {
      .wpcf7-list-item {
        margin: 0;
        label {
          display: inline-block;
          width: 42rem;
          border: 1px solid #ccc;
          background-color: #fff;
          padding: 1em;
          border-radius: 0.8rem;
          box-sizing: border-box;
          cursor: pointer;
          &:has(input:checked) {
            background-color: #ffc;
          }

          @media screen and (max-width: 480px) {
            width: 86vw;
          }

          input {
            vertical-align: baseline;
          }
        }
      }
    }
    p {
      margin: 1em 0 1em !important;
      word-break: keep-all;
      @media screen and (max-width: 480px) {
        font-size: var(--fsize_s);
      }
    }
  }
  /* エラーメッセージ */

  .submit_wrap {
    text-align: center;
    margin-top: 4rem;
    @media screen and (max-width: 480px) {
      margin-top: 3rem;
    }

    input[type="submit"],
    input[type="button"] {
      appearance: none;
      border: none;
      background-color: var(--color-deep-blue);
      color: #fff;
      font-size: var(--fsize_l);
      letter-spacing: 0.1em;
      width: 86%;
      max-width: 32rem;
      height: 9rem;
      border-radius: 0.5em;
      cursor: pointer;

      @media screen and (max-width: 480px) {
        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: 860px;
    border: none;
    margin: 1rem auto !important;
    background-color: #ffc7c7;
    font-size: var(--fsize_m);
    line-height: 2;
    text-align: center;
    border-radius: 0.5em;
    padding: 1em;
    box-sizing: border-box;

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

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
  よくある質問 
  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

section#faq {
  background-color: #fff;

  dl {
    dt,
    dd {
      position: relative;
      padding-left: 4rem;
      &::before {
        font-family: "Figtree", sans-serif;
        font-weight: 700;
        font-size: var(--fsize_xl);
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0.05em;
        line-height: 1;
      }
      @media screen and (max-width: 480px) {
        padding-left: 3rem;
      }
    }
    dt {
      line-height: 1.5;
      font-size: var(--fsize_l);
      font-weight: 500;
      padding-bottom: 0.5em;
      margin-bottom: 0.5em;
      color: #333;
      border-bottom: 1px solid #000;
      &::before {
        content: "Q. ";
        color: #c00;
      }
    }
    dd {
      font-size: var(--fsize_m);
      line-height: 1.75;
      margin-bottom: 3em;
      &::before {
        content: "A. ";
        color: var(--color-deep-blue);
      }
      @media screen and (max-width: 480px) {
        margin-bottom: 1.5em;
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
  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> */