@charset "utf-8";

.form_wrap {
  border: 2px solid #3c3c3c;
  border-radius: 5px;
  margin: 30px auto 40px;
  padding: 40px 60px 0;
}

.form_group {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 0 40px;
}

/*.form_group非表示*/
.form_group.-none{
  display: none;
}

.form_group-head {
  margin: 0 0 10px;
  width: 100%;
}

.form_group-head .ec-required {
  color: var(--strong-text);
  display: inline-block;
  font-size: 12px;
  margin: 0 0 0 5px;
}

.form_group-block {
  width: 350px;
}

.form_group-block + .form_group-block {
  margin: 0 0 0 20px;
}

.form_group-block.-large {
  width: 720px;
}

.form_group-block + .form_group-block.-large,
.form_group-block + .form_group-block.-max {
  margin: 20px 0 0;
}

.form_group-block.-max {
  width: 100%;
}

.form_group-block input,
.form_group-block select,
.form_group-block textarea {
  border: 1px solid #707070;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.3;
  padding: 14px;
  width: 100%;
}

.form_group_date select{
  width: 30% !important;
}

.address_description{
  color:darkgray;
}

.ec-label {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.ec-required {
  display: inline-block;
  margin-left: 0.8em;
  vertical-align: 2px;
  color: #DE5D50;
  font-size: 12px;
  font-weight: normal;
}

.ec-auto,
.ec-optional {
  display: inline-block;
  margin-left: 0.8em;
  vertical-align: 2px;
  color: #24407a;
  font-size: 12px;
  font-weight: normal;
}

.form_group-block select {
  background: url('../img/common/form/icon_select.svg') right 20px center/20px auto no-repeat;
  padding-right: 50px;
}


.form_group-label {
  margin: 0 0 10px;
}

.error input, .error select,
.error textarea {
  border-color: #EA9291;
  box-shadow: 0 0 5px #EA9291;
}

.ec-errorMessage {
  color: var(--strong-text);
  margin: 5px 0 0 0;
}

.form_notice {
  font-size: var(--sub-size);
}

/*birthday select*/
.form_group.-birthday {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
}

.form_group.-birthday .form_group-head {
    margin-right: 0;
    padding-top: 14px;
    width: 100px;
}

.form_group.-birthday .ec-birth label {
  width: 160px;
}

.form_group.-birthday .ec-birth span{
  padding: 0 15px;
}

@media screen and (max-width: 768px) {

  .ec-errorMessage{
    font-size: calc(12*100vw/375);
  }

  .form_wrap {
    border-radius: calc(3*100vw/375);
    margin: calc(20*100vw/375) auto calc(40*100vw/375);
    padding: calc(24*100vw/375) calc(20*100vw/375);
  }

  .form_group {
    gap: calc(8*100vw/375);
    padding: 0 0 calc(40*100vw/375);
  }

  .form_group-head {
    font-size: var(--sub-size);
    margin: 0;
  }

  .form_group-head .ec-required {
    font-size: calc(10*100vw/375);
  }

  .form_group-block + .form_group-block {
    margin: 0;
  }

  .form_group-label {
    font-size: var(--sub-size);
    margin: 0 0 calc(8*100vw/375);
  }

  .form_group-block.-sp_mini {
    width: calc(50% - (11/2*100vw/375));
  }

  .form_group-block.-large {
    width: 100%;
  }

  .form_group:last-of-type {
    padding: 0;
  }


  /*birthday select*/
  .form_group.-birthday {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: start;
  }

  .form_group.-birthday .ec-birth label {
    width: calc(60* 100vw / 375);
  }

  .form_group.-birthday .ec-birth label.year_wrap {
    width: calc(80* 100vw / 375);
  }

  .form_group.-birthday .ec-birth span {
    letter-spacing: -0.3em;
    padding: 0 calc(5* 100vw / 375);
  }

  .form_group-block .ec-birth select {
    font-size: calc(12*100vw/375);
    padding-right: 0;
    background-position: 90%;
  }

}

/*ラジオボタン / チェックボタン*/

.ec-radio {
    margin: 24px 0 48px;
}

input[type="radio"],
input[type="checkbox"] {
    display: none !important;
}

input[type="radio"] + *,
input[type="checkbox"] + * {
    position: relative;
    padding-left: 30px !important;
}

input[type="radio"] + *::before,
input[type="checkbox"] + *::before {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
}

input[type="radio"]:checked + *::after,
input[type="checkbox"]:checked + *::after {
    background: #111;
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    left: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
}

.ec-radio  input[type="radio"] + *::before {
    margin-top: 0;
}
.ec-radio  input[type="radio"]:checked + *::after {
    margin-top: 0;
}

input[type="radio"]:disabled + *::before {
    border-color: #ccc;
}

input[type="radio"]:disabled + *,
input[type="checkbox"]:disabled + * {
    color: #999;
}

.ec-radio label {
    display: flex;
    position: relative;
    line-height: 23px;
    margin: 0;
    width: fit-content;
}

.ec-radio label:nth-child(n+1) {
    margin-top: 10px;
}

.checkbox_wrap .checkbox_text {
    position: relative;
    padding-left: 30px;
    user-select: none;
}

.checkbox_wrap .checkbox_text::before {
    position: absolute;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d9d9d9;
    border: 1px solid #d9d9d9;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.checkbox_wrap input[type="checkbox"]:checked + *::after,
.checkbox_wrap .checkbox_text::after {
    content: "";
    border: 2px solid #fff;
    border-left: none;
    border-radius: 0;
    display: block;
    position: absolute;
    border-top: none;
    height: 10px;
    left: 7px;
    top: 50%;
    opacity: 1;
    transition: 0.3s;
    transform: translate(0, -65%) rotate(45deg);
    width: 6px;
}

.checkbox_wrap .checkbox_label input[type="checkbox"]:checked + .checkbox_text::before {
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
}


@media screen and (max-width: 768px) {
    .checkbox_wrap .checkbox_text::before {
        position: absolute;
        content: "";
        display: block;
        width: calc(20 / 375* 100vw);
        height: calc(20 / 375* 100vw);
        border-radius: 50%;
        background: #d9d9d9;
        border: 1px solid #d9d9d9;
        left: 0;
        top: 0;
        transform: none;
    }

    .checkbox_wrap input[type="checkbox"]:checked + *::after, .checkbox_wrap .checkbox_text::after {
      content: "";
      border: 2px solid #fff;
      border-left: none;
      border-radius: 0;
      display: block;
      position: absolute;
      border-top: none;
      height: calc(10 / 375* 100vw);
      left: calc(7 / 375* 100vw);
      top: 0;
      opacity: 1;
      transition: 0.3s;
      transform: translate(0, 25%) rotate(45deg);
      width: calc(6 / 375* 100vw);
  }
}