@charset "utf-8";
/* ↓↓↓ formbox ↓↓↓ */
.formbox {
  margin: calc(var(--vw) * 120) auto;
  @media (max-width: 768px) {
    margin-block: 64px;
  }

  .inner {
    width: calc(var(--vw) * 992);
    margin: 0 auto;
    @media (max-width: 768px) {
      width: calc(100% - 10px*2);
    }
  }

  .head_txt {
    font-size: calc(var(--vw) * 24);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    color: #28A676;
    @media (max-width: 768px) {
      font-size: 2.4rem;
    }
  }

  .lead {
    font-size: max(calc(var(--vw) * 16),1rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.08em;
    @media (max-width: 768px) {
      font-size: 1.6rem;
      padding-inline: 14px;
    }
  }
  .form {
    border-radius: calc(var(--vw) * 8);
    background-color: #F5F5F5;
    padding: calc(var(--vw) * 72);
    margin-top: calc(var(--vw) * 48);
    scroll-margin-top: calc(var(--vw) * 60);
    @media (max-width: 768px) {
      border-radius: 8px;
      padding: 56px 24px;
      margin-top: 24px;
      scroll-margin-top: 40px;
    }
  
    .list {
      display: flex;
      flex-direction: column;
      gap: calc(var(--vw) * 32);
      @media (max-width: 768px) {
        gap: 24px;
      }
  
      .item {
        display: flex;
        gap: 8px calc(var(--vw) * 23);
        @media (max-width: 768px) {
          flex-direction: column;
        }

        &.error {
          .error_block {
            display: block;
          }
        }
  
        .head_group {
          width: calc(var(--vw) * 265);
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 8px;
          flex-shrink: 0;
          @media (max-width: 768px) {
            width: 100%;
            justify-content: flex-start;
          }
  
          .title {
            font-size: max(calc(var(--vw) * 16),1rem);
            font-weight: 400;
            letter-spacing: 0.08em;
            @media (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
  
          .inq {
            font-size: max(calc(var(--vw) * 12),1rem);
            font-weight: 700;
            letter-spacing: 0.08em;
            color: #fff;
            border-radius: 999px;
            background-color: #28A676;
            padding: calc(var(--vw) * 3) calc(var(--vw) * 12) calc(var(--vw) * 4);
            @media (max-width: 768px) {
              font-size: 1.2rem;
              padding: 3px 12px 4px;
            }
          }
        }
        .conts_group {
          flex: 1;
  
          input,textarea {
            width: 100%;
            font-size: max(calc(var(--vw) * 14),1rem);
            font-family: var(--notoSansJP);
            font-weight: 400;
            line-height: 2;
            letter-spacing: 0.08em;
            background-color: #fff;
            border-radius: calc(var(--vw) * 8);
            border: 1px solid #D8D8D8;
            padding: calc(var(--vw) * 13) calc(var(--vw) * 24);
            @media (max-width: 768px) {
              font-size: 1.4rem;
              border-radius: 8px;
              padding: 9px 16px;
            }
  
            &::placeholder {
              color: #A7A7A7;
            }
          }
  
          textarea {
            min-height: calc(var(--vw) * 200);
            @media (max-width: 768px) {
              min-height: 240px;
            }
          }
  
          .confTxt {
            font-size: max(calc(var(--vw) * 16),1rem);
            font-weight: 400;
            line-height: 1.75;
            letter-spacing: 0.08em;
            overflow-wrap: anywhere;
            word-break: normal;
            line-break: strict;
            @media (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
        }
  
        .error_block {
          display: none;
          margin-top: calc(var(--vw) * 8);
          @media (max-width: 768px) {
            margin-top: 8px;
          }

          .text {
            font-size: max(calc(var(--vw) * 14),1rem);
            font-weight: 600;
            letter-spacing: 0.08em;
            color: #FF0000;
            @media (max-width: 768px) {
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  
    .privacy_item {
      border-block: 1px solid #D8D8D8;
      padding-block: calc(var(--vw) * 32);
      margin: calc(var(--vw) * 48) auto 0;
      @media (max-width: 768px) {
        padding-top: 32px;
        margin-top: 32px;
      }
  
      label {
        width: fit-content;
        font-size: max(calc(var(--vw) * 16),1rem);
        font-weight: 500;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: calc(var(--vw) * 16);
        cursor: pointer;
        margin: calc(var(--vw) * 24) auto 0;
        @media (max-width: 768px) {
          font-size: 1.6rem;
          gap: 16px;
          margin-top: 24px;
        }
  
        input[type="checkbox"] {
          position: relative;
          appearance: none;
          width: calc(var(--vw) * 32);
          height: fit-content;
          aspect-ratio: 1/1;
          background-color: #fff;
          border-radius: calc(var(--vw) * 8);
          border: 1px solid #D8D8D8;
          cursor: pointer;
          @media (max-width: 768px) {
            width: 32px;
            border-radius: 8px;
          }
  
          &::before {
            content: '';
            position: absolute;
            width: calc(100% + 2px);
            height: calc(100% + 2px);
            border-radius: calc(var(--vw) * 8);
            overflow: clip;
            background-image: url(../img/icon_check.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 0;
            top: -1px;
            left: -1px;
            @media (max-width: 768px) {
              border-radius: 8px;
            }
          }
          &:checked::before {
            opacity: 1;
          }
  
        }
        .link_txt {
          text-decoration: underline;
          color: #28A676;
          transition: opacity ease .3s;
  
          @media (min-width: 769px) {
            &:hover {
              opacity: .6;
            }
          }
        }
      }
    }
  }
  
  .btn_group {
    display: flex;
    gap: 16px calc(var(--vw) * 16);
    justify-content: center;
    margin: calc(var(--vw) * 48) auto 0;
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      margin-top: 32px;
    }

    button {
      cursor: pointer;
    }
    
    .formBTN {
      width: fit-content;
      font-size: max(calc(var(--vw) * 16),1rem);
      font-weight: 600;
      letter-spacing: 0.08em;
      border-radius: calc(var(--vw) * 4);
      border: unset;
      gap: calc(var(--vw) * 39);
      padding: calc(var(--vw) * 12) calc(var(--vw) * 12);
      padding-left: calc(var(--vw) * 24);
      @media (max-width: 768px) {
        width: min(100%,307px);
        font-size: 1.6rem;
        border-radius: 4px;
        gap: 42px;
        padding: 12px;
        padding-left: 24px;
      }

      &.lock {
        pointer-events: none;
        filter: grayscale(1);
        transform: translateZ(0px);
      }
    }
  }
  &.-input .form {
    .list .item .head_group {
      padding-top: calc(var(--vw) * 16);
      @media (max-width: 768px) {
        padding-top: unset;
      }
    }
  }
  &.-conf .form {
    .list .item {
      border-bottom: 1px solid #D8D8D8;
      padding-bottom: calc(var(--vw) * 32);
      @media (max-width: 768px) {
        padding-bottom: 24px;
      }
      
      .head_group {
        padding-top: calc(var(--vw) * 4);
        @media (max-width: 768px) {
          padding-top: unset;
        }
      }
    } 
    .btn_group {
      button {
        width: calc(var(--vw) * 248);
        justify-content: center;
        padding: calc(var(--vw) * 20) calc(var(--vw) * 12);
        @media (max-width: 768px) {
          width: min(100%,307px);
          padding: 20px 12px;
        }
        
        .slide_arrow {
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: calc(var(--vw) * 12);
          @media (max-width: 768px) {
            right: 12px;
          }
        }
      }

      .back_btn {
        position: relative;
        font-size: max(calc(var(--vw) * 16),1rem);
        font-weight: 600;
        letter-spacing: 0.08em;
        color: #fff;
        border-radius: calc(var(--vw) * 4);
        background-color: #3F3F3F;
        border: 1px solid #3F3F3F;
        transition: background-color ease .3s, color ease .3s;
        @media (min-width: 769px) {
          &:hover {
            color: #3F3F3F;
            background-color: #fff;

            .slide_arrow {
              background-color: #3F3F3F;

              .arrow {
                background-color: #fff;
              }
            }
          }
        }
        @media (max-width: 768px) {
          font-size: 1.6rem;
          border-radius: 4px;
        }

        &::before {
          content: unset;
        }

        .slide_arrow {
          background-color: #fff;
          rotate: Y 180deg;
          right: unset;
          left: calc(var(--vw) * 12);
          transition: background-color ease .3s;
          @media (max-width: 768px) {
            left: 12px;
          }
          
          .arrow {
            background-color: #3F3F3F;
            transition: background-color ease .3s;
          }
        }
      }
    }
  }
  &.-thanks {
    .lead {
      text-align: center;
      margin-top: calc(var(--vw) * 40);
      @media (max-width: 768px) {
        margin-top: 32px;
      }
    }
  }
}

.grecaptcha-badge {
  pointer-events: none!important;
}
/* ↑↑↑ formbox ↑↑↑ */