@charset "UTF-8";

/* フォーム画面
====================================================================================================================================== */
form.assisted_form {
  position: relative;
}

form.assisted_form .field_wrap {
  position: relative;
}

form.assisted_form .input_alert {
  margin-bottom: 0;
  position: relative;
  background-color: #d00;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.3em 0.8em;
  border-radius: 5px;
  position: absolute;
  right: 2em;
  bottom: calc(100% + 14px / 2);
}

form.assisted_form .input_alert:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 20%;
  background-color: #d54040;
  height: calc(14px / 2);
  width: 14px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

form.assisted_form :has(input[type="text"][id$="-zipcode"]) .input_alert {
  right: calc(100% - 315px);
}

form.assisted_form :has(select[required]) .input_ok_icon,
form.assisted_form :has(input[type="text"][id$="-zipcode"]) .input_ok_icon {
  position: static;
  translate: 0;
}

@media screen and (max-width: 960px) {
  form.assisted_form .input_alert {
    left: auto;
    right: 2em;
  }

  form.assisted_form :has(input[type="text"][id$="-zipcode"]) .input_alert {
    right: calc(100% - 275px);
  }

}

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

  form.assisted_form :has(input[type="text"][id$="-zipcode"]) .input_alert {
    right: calc(100% - 240px);
  }
}