@font-face {
  font-family: "ERVFontFamilyDINBold";
  src: url("/assets/2021_fonts/din1451altG.ttf");
}
@font-face {
  font-family: "ERVFontFamilyDIN";
  src: url("/assets/2021_fonts/din1451alt.ttf");
}
.formWrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.mainForm {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .mainForm {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .mainForm {
    width: 70%;
  }
}
.mainForm .infoBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.mainForm .infoBox p {
  width: 100%;
  color: #4F857B;
  font-weight: bold;
}
.mainForm .infoBox h2 {
  color: #8CB808;
}
.mainForm h3 {
  width: 100%;
  margin-bottom: 8px;
  margin-top: 32px;
  display: flex;
  align-items: center;
}
.mainForm h3.firstH3 {
  margin-top: 0;
}
.mainForm h3.fixMargin {
  margin-top: 16px;
}
.mainForm h3 span {
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 8px;
  font-size: 1.4rem;
  border-radius: calc(8px / 2);
}
.mainForm h3 span.requiredLabel {
  background-color: #4F857B;
  color: #FFFFFF;
}
.mainForm h3 span.optionalLabel {
  background-color: #C1F5EC;
  color: #4F857B;
}
.mainForm .explanation {
  width: 100%;
  color: #4F857B;
  font-size: 1rem;
  margin-bottom: 4px;
}
.mainForm .typeBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.mainForm .typeBox #styleType1, .mainForm .typeBox #styleType2, .mainForm .typeBox #styleType3, .mainForm .typeBox #styleType4, .mainForm .typeBox #styleType5 {
  margin-bottom: 16px;
  width: 100%;
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .mainForm .typeBox #styleType1, .mainForm .typeBox #styleType2, .mainForm .typeBox #styleType3, .mainForm .typeBox #styleType4, .mainForm .typeBox #styleType5 {
    width: 80%;
  }
}
@media screen and (min-width: 1024px) {
  .mainForm .typeBox #styleType1, .mainForm .typeBox #styleType2, .mainForm .typeBox #styleType3, .mainForm .typeBox #styleType4, .mainForm .typeBox #styleType5 {
    width: 60%;
  }
}
.mainForm .typeBox #styleType5 {
  margin-bottom: 0;
}
.mainForm .borderBox {
  width: 100%;
  height: 1px;
  border-top: solid 1px #4F857B;
}
.mainForm .borderBox.marginTop {
  margin-top: 32px;
}
.mainForm .subBox {
  width: 100%;
}
.mainForm .subBox#typeBox2 {
  visibility: hidden;
  display: none;
}
.mainForm .subBox#typeBox3 {
  visibility: hidden;
  display: none;
}
.mainForm #contentsBox {
  width: 100%;
}
.mainForm #email, .mainForm #errorEmail,
.mainForm #name, .mainForm #errorName,
.mainForm #tel, .mainForm #errorTel,
.mainForm #selectCurrentCollege, .mainForm #errorStudentUniversity,
.mainForm #selectGrade, .mainForm #errorStudentGrade,
.mainForm #type2_license, .mainForm #errorResidentLicense,
.mainForm #type2_hospital, .mainForm #errorResidentHospial,
.mainForm #type3_hospital, .mainForm #errorHospial,
.mainForm #type3_department,
.mainForm #password,
.mainForm #password_confirmation {
  width: 100%;
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .mainForm #email, .mainForm #errorEmail,
  .mainForm #name, .mainForm #errorName,
  .mainForm #tel, .mainForm #errorTel,
  .mainForm #selectCurrentCollege, .mainForm #errorStudentUniversity,
  .mainForm #selectGrade, .mainForm #errorStudentGrade,
  .mainForm #type2_license, .mainForm #errorResidentLicense,
  .mainForm #type2_hospital, .mainForm #errorResidentHospial,
  .mainForm #type3_hospital, .mainForm #errorHospial,
  .mainForm #type3_department,
  .mainForm #password,
  .mainForm #password_confirmation {
    width: 60%;
  }
}
@media screen and (min-width: 1024px) {
  .mainForm #email, .mainForm #errorEmail,
  .mainForm #name, .mainForm #errorName,
  .mainForm #tel, .mainForm #errorTel,
  .mainForm #selectCurrentCollege, .mainForm #errorStudentUniversity,
  .mainForm #selectGrade, .mainForm #errorStudentGrade,
  .mainForm #type2_license, .mainForm #errorResidentLicense,
  .mainForm #type2_hospital, .mainForm #errorResidentHospial,
  .mainForm #type3_hospital, .mainForm #errorHospial,
  .mainForm #type3_department,
  .mainForm #password,
  .mainForm #password_confirmation {
    width: 60%;
  }
}
.mainForm .ERCButtonBox {
  margin-top: 32px;
  margin-bottom: 32px;
  width: 100%;
  flex-wrap: wrap;
}
.mainForm .ERCButtonBox button {
  width: 100%;
}
.mainForm .ERCButtonBox button#search_submit {
  margin-bottom: 16px;
  order: 1;
}
.mainForm .ERCButtonBox button#cancel {
  order: 2;
  margin-right: 0;
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .mainForm .ERCButtonBox button {
    width: calc(50% - 16px / 2);
  }
  .mainForm .ERCButtonBox button#search_submit {
    margin-bottom: 0;
    order: 2;
  }
  .mainForm .ERCButtonBox button#cancel {
    order: 1;
    margin-right: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .mainForm .ERCButtonBox button {
    width: calc(50% - 16px / 2);
  }
  .mainForm .ERCButtonBox button#search_submit {
    margin-bottom: 0;
    order: 2;
  }
  .mainForm .ERCButtonBox button#cancel {
    order: 1;
    margin-right: 16px;
  }
}