/**
 * 調査レポートのCSS
 */

.survey-report-m-hero {
  height: 400px;
}

.radio_button {
  display: flex;
}

.m-input__form .radio_button label span {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  margin-right: 30px;
  display: inline-block;
}

.m-input__form .radio_button label span::before,
.m-input__form .radio_button label span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.m-input__form .radio_button label span::before {
  border: 1px solid #707070;
  width: 14px;
  height: 14px;
  left: 5px;
  border-radius: 0 !important;
  background: #fff;
}

.m-input__form .radio_button label span::after {
  border-radius: 0 !important;
  border-bottom: 3px solid #00bb30;
  border-left: 3px solid #00bb30;
  height: 4px;
  width: 8px;
  margin-top: -4px;
  left: 9px;
  transform: rotate(-45deg);
  background: none !important;
  opacity: 0;
}

.m-input__form .radio_button input:checked+span::after {
  opacity: 1;
}

.m-input__form .radio_button>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.m-input__form .radio_button label {
  margin-right: 30px;
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .m-input__form .radio_button label {
    margin-right: 5vw;
    margin-bottom: 2vw;
  }
}


.m-input__form .radio_button>div {
  flex-wrap: wrap;
}

.m-input__form .radio_button .error {
  width: 100%;
  display: block;
  margin-top: 5px;
  font-size: 0.8em;
}

.m-input__form dl .col {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.m-input__form dl .col input {
  width: 48% !important;
  order: 1;
  margin-right: 0 !important;
}

.m-input__form dl .col .error {
  width: 48% !important;
  order: 2;
  margin-top: 5px;
  display: block;
}

.m-input__form dl .col>span:not(.error) {
  display: none;
}