@charset "UTF-8";

input[type='text'] {
  padding: 0 1rem;
  width: 100%;
  background-color: #FFFFFF;
  height: 50px;
}

input[type='submit'] {
  width: 100%;
  height: 58px;
}

textarea {
  padding: 1rem;
  width: 100%;
  background-color: #FFFFFF;
  height: 100px;
}

select {
  width: 46%;
  padding: 0 1rem;
  background-color: #FFFFFF;
  height: 50px;
}

.selectmenu {
  position: relative;

  & select {
    width: 300px;
    background-color: #fff;
    padding: 12px;
  }

  &::after {
    content: "▼";
    position: absolute;
    left: 270px;
    top: 15px;
  }
}


.form-txt {
  margin: 140px 0 100px;
}

.formarea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  & dt {
    margin-bottom: 60px;
    width: 130px;
  }

  & dt span {
    color: #E95504;
  }

  & dd {
    margin-bottom: 60px;
    width: 650px;
  }

  & dd.half {
    width: 36%;
    & div{width: 100%;}
  }
}

.sei, .mei {
  position: relative;
  display: flex;
  align-items: center;
}

.sei::before {
  content: "姓";
  position: absolute;
  left: -2em;
}

.mei::before {
  content: "名";
  position: absolute;
  left: -2em;
}

::placeholder {
  color: #CCCCCC;
}

.click {
  cursor: pointer;
}

.click:checked+select::after {
  color: red;

}

.g-base {
  position: relative;
}

.error {
  position: absolute;
  top: 70px;
  color: #E95504;
  text-align: center;
  width: 100%;
  font-weight: bold;
}

.att_txt {
  color: #E95504;
}


.btn2 {
  background-color: #707070;
  color: #fff;

  &::after {
    content: "\e5cb";
    left: 5px;
    right: auto;
    color: #fff;
  }

  &:hover {
    opacity: 0.8;
    transition: all 0.5s ease 0s;
    background-color: #838383;
    ;
  }
}

.btn_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 50px;
}


@media screen and (max-width: 829px) {
  .form-txt {
    margin: 60px 0 40px;
  }

  .formarea {
    & dd.half {
      width: 47%;

      &:nth-of-type(1), &:nth-of-type(2) {
        margin-top: 50px;
      }
    }

    & dt {
      width: 100%;
      margin-bottom: 10px;
    }

    & dd {
      margin-bottom: 30px;
    }

    .sei::before, .mei::before {
      left: 0;
      top: -30px;
    }
  }

  .selectmenu {
    & select {
      width: 100%;
    }

    &::after {
      left: auto;
      right: 10px;
    }
  }

  .txt22_g {
    font-size: 2.2rem;
    font-weight: 500;
  }
}