/* ===========================================
 * FORM
 * ======================================== */

.form {
  padding: 6rem 5% 17.6rem; 
  background-color: var(--bg-gray);
  position: relative;
  .inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    max-width: 50rem;
    margin: 0 auto;
  }
  .list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .name {
    font-size: 1.4rem;
    font-weight: var(--text-bold);
  }
  .list input:not([type="checkbox"]),
  .list textarea {
    font-size: 1.8rem;
    border: 1px solid var(--border-grayDark);
    padding: 0.8rem;
    border-radius: 0.4rem;
    width: calc(100% - 1.6rem);
  }
  .checkbox {
    display: flex;
    gap: 0.2rem;
  }
  .checkbox label {
    font-size: 1.4rem;
  }
  .list input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    min-width: 1.6rem;
  }
  .list input::placeholder {
    color: #CACFD1;
  }
  .privacy__text {
    background-color: var(--bg-white);
    padding: 2rem;
    overflow-y: scroll;
    height: 10rem;
    border-radius: 4px;
    border: 1px solid var(--border-grayDark);
    margin-top: 0.4rem;
  }
  .list .form__btn_area .form__btn {
    background-color: var(--bg-accent);
    color: var(--text-white);
    font-weight: var(--text-bold);
    font-size: 2.4rem;
    width: 100%;
    padding: 1rem 0;
    margin-top: 3.2rem;
    border: none;
  }
  .caption {
    text-align: center;
    margin-top: 0.8rem;
  }
  .left__illust {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 11.8rem;
  }
  .right__illust {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12.6rem;
  }
}

@media screen and (min-width:600px) {
  .form {
    .checkbox {
      align-items: center;
    }  
  }
}

@media screen and (min-width:769px) {
  .form {
    .left__illust {
      width: 15.6rem;
    }
    .right__illust {
      width: 16.4rem;
    }
    .form__btn {
      transition: all 0.25s;
    }
    .form__btn:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }
}

@media screen and (min-width:960px) {
  .form {
    padding: 10rem 5%;
    .list {
      gap: 2rem;
    }
    .privacy__text {
      font-size: 1.2rem;
    }
    .left__illust {
      width: 19.2rem;
      left: 1vw;
    }
    .right__illust {
      right: 3vw;
    }
  }
}

@media screen and (min-width:1280px) {
  .form {
    padding: 15rem 5%;
    .left__illust {
      left: 4vw;
    }
    .right__illust {
      right: 5.2vw;
    }
  }
}