@charset "utf-8";

/*============================
フォーム
============================*/
#form {
  padding-bottom: 0.80rem;
  @media screen and (max-width: 640px) {
    padding-bottom: 0.50rem;
  }
}

.lead {
  text-align: center;
  font-size: 0.16rem;
  line-height: 2;
  padding-bottom: 0.50rem;
  @media screen and (max-width: 640px) {
    font-size: 0.15rem;
    letter-spacing: 0;
    line-height: 1.75;
    text-align: justify;
    padding-bottom: 0.30rem;
  }
}

.form_wrap {
  max-width: 10.00rem;
  margin: auto;
  border-top: 1px solid #CCC;
  .list {
    border-bottom: 1px solid #CCC;
    display: flex;
    flex-wrap: wrap;
    padding: 0.15rem 0;
    .ttl {
      font-size: 0.16rem;
      font-weight: 500;
      width: 24.5%;
      padding-top: 0.10rem;
      padding-bottom: 0.10rem;
      @media screen and (max-width: 640px) {
        font-size: 0.15rem;
        font-weight: 600;
        width: 100%;
        padding-bottom: 0.20rem;
        padding-top: 0.05rem;
      }
    }
    .txt_box {
      width: calc(100% - 24.5%);
      @media screen and (max-width: 640px) {
        width: 100%;
      }
      input[type="text"],input[type="email"],input[type="tel"], textarea {
        border: 1px solid #CCC;
        padding: 0.08rem;
        background-color: #FFF;
        border-radius: 0.04rem;
        box-sizing: border-box;
        font-size: 0.16rem;
        &.w100 {
          width: 100%;
        }
        &.w40 {
          width: 40%;
          @media screen and (max-width: 640px) {
            width: 100%;
          }
        }
        &.w20 {
          width: 30%;
          @media screen and (max-width: 640px) {
            width: 100%;
          }
        }
      }
      textarea {
        line-height: 1.75;
        min-height: 3.00rem;
        width: 100%;
        &.middle {
          min-height: 1.00rem;
        }
      }
      .caption {
        padding-top: 0.10rem;
        font-size: 0.14rem;
        line-height: 1.65;
        @media screen and (max-width: 640px) {
          font-size: 0.13rem;
        }
      }
    }
    &.required {
      .ttl {
        position: relative;
        &::after {
          content: "必須";
          font-size: 0.13rem;
          font-weight: 500;
          color: #FFF;
          background-color: #F27163;
          padding: 0.03rem 0.06rem;
          border-radius: 0.03rem;
          display: inline-block;
          position: absolute;
          right: 0.15rem;
          top: 0.09rem;
          @media screen and (max-width: 640px) {
            font-size: 0.12rem;
            top: 0.03rem;
            right: 0;
          }
        }
        .sub_ttl {
          display: block;
          padding-top: 0.10rem;
          font-size: 0.14rem;
          @media screen and (max-width: 640px) {
            display: inline;
            padding-top: 0;
          }
        }
      }
    }
    .horizontal_list {
      font-size: 0.16rem;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 0.10rem;
      gap: 0 0.50rem;
      @media screen and (max-width: 640px) {
        padding-top: 0;
        padding-bottom: 0.10rem;
      }
      input[type="radio"] {
        position: relative;
        top: -0.02rem;
      }
    }
    .date_time_wrap {
      display: flex;
      flex-wrap: wrap;
      gap:  0.20rem 0;
      .date_time_box {
        width: 100%;
        display: flex;
        gap: 0 0.20rem;
        align-items: center;
        font-size: 0.16rem;
        @media screen and (max-width: 640px) {
          font-size: 0.14rem;
          gap: 0.15rem 0;
          flex-wrap: wrap;
        }
        .sub_ttl {
          width: 0.80rem;
          @media screen and (max-width: 640px) {
            width: 100%;
            font-weight: 700;
            background-color: #F2F2F2;
            padding: 0.10rem;
            box-sizing: border-box;
          }
        }
        input {
          font-size: 0.16rem;
          border: 1px solid #CCC;
          padding: 0.08rem;
          background-color: #FFF;
          border-radius: 0.04rem;
          box-sizing: border-box;
          @media screen and (max-width: 640px) {
            width: 100%;
          }
        }
        select {
          font-size: 0.16rem;
          border: 1px solid #CCC;
          padding: 0.08rem;
          background-color: #FFF;
          border-radius: 0.04rem;
          box-sizing: border-box;
        }
      }
    }
    .vertical_list {
      display: flex;
      flex-wrap: wrap;
      padding-top: 0.10rem;
      padding-bottom: 0.10rem;
      gap: 0.20rem 0;
      font-size: 0.16rem;
      @media screen and (max-width: 640px) {
        font-size: 0.15rem;
      }
      .detail {
        width: 100%;
        input[type="radio"] {
          position: relative;
          margin-right: 0.10rem;
          top: -0.02rem;
        }
        .caption {
          font-size: 0.13rem;
          display: block;
          padding-left: 0.20rem;
          @media screen and (max-width: 640px) {
            font-size: 0.12rem;
            letter-spacing: 0;
            padding-top: 0;
          }
        }
      }
    }
  }
}

.privacy_wrap {
  padding: 0.60rem 0;
  max-width: 10.00rem;
  margin: auto;
  @media screen and (max-width: 640px) {
    padding: 0.30rem 0 0.50rem;
  }
  .ttl {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 0.22rem;
    font-weight: 700;
    padding: 0.15rem;
    border-radius: 0.10rem;
    background-color: #E6F7F6;
    @media screen and (max-width: 640px) {
      font-size: 0.18rem;
      border-radius: 0.06rem;
    }
  }
  .txt {
    font-size: 0.16rem;
    line-height: 2;
    padding-top: 0.20rem;
    @media screen and (max-width: 640px) {
      font-size: 0.14rem;
    }
  }
}

.btn_wrap {
  max-width: 2.80rem;
  margin: auto;
  position: relative;
  border-radius: 0.50rem;
  .btn {
    width: 100%;
    background-color: #6ECCC4;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 0.20rem;
    font-weight: 700;
    color: #FFF;
    text-align: center;
    border: 1px solid #6ECCC4;
    padding: 0.16rem 0 0.18rem;
    display: block;
    border-radius: 0.50rem;
    margin: auto;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    @media screen and (max-width: 640px) {
      font-size: 0.18rem;
    }
    &:hover {
      background-color: #FFF;
      color: #6ECCC4;
    }
  }
  &::after {
    /* content: "";
    width: 0.05rem;
    height: 0.05rem;
    background-color: #FFF;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0.20rem;
    transform: translateY(-50%);
    z-index: 1; */
  }
  &:hover {
    &::after {
      background-color: #6ECCC4;
    }
  }
}

.mod_insta {
  @media screen and (max-width: 640px) {
		border-top: 1px solid #CCC;
	}
}

/* コンタクトフォーム７ */
.wpcf7-not-valid-tip {
  padding-top: 0.06rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: #F27163;
  @media screen and (max-width: 640px) {
    font-size: 0.12rem;
  }
}

.wpcf7-response-output {
  text-align: center;
  padding: 0.15rem;
  font-size: 0.20rem;
  font-weight: 700;
  line-height: 1.5;
  border: 0;
  background-color: rgba(110, 204, 196, 0.3);
  border-radius: 0.40rem;
  @media screen and (max-width: 640px) {
    font-size: 0.16rem;
  }
}

.wpcf7 form.invalid .wpcf7-response-output {
  border: 0.03rem solid #F27163;
  background-color: rgba(242, 113, 99, 0.3);
}


.wpcf7-list-item-label {
  font-size: 0.14rem;
  font-weight: 500;
  line-height: 1.75;
  display: inline-block;
  margin-bottom: 0.10rem;
  @media screen and (max-width: 640px) {
    font-size: 0.15rem;
  }
}

.wpcf7-checkbox {
  .wpcf7-list-item {
    display: block;
  }
}