@charset "UTF-8";
/* フォーム画面
====================================================================================================================================== */
form.assisted_form table td {
  position: relative;
}

form.assisted_form table td input[type="text"],
form.assisted_form table td input[type="email"],
form.assisted_form table td input[type="tel"],
form.assisted_form table td input[type="password"],
form.assisted_form table td input[type="url"],
form.assisted_form table td textarea {
  width: calc(100% - 2em);
}


form.assisted_form table.table_form tbody td .field_wrap { position: relative; }
form.assisted_form table td .input_alert {
  margin-bottom: 0;
  position: relative;
  background-color: #d00;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.3em 0.8em;
  border-radius: 5px;
  position: absolute;
  right: 2em;
  bottom: calc(100% + 14px / 2);
}
form.assisted_form table td .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 table td input[type="text"][id$="-zipcode"] {
  width: 315px;
}
form.assisted_form table td:has(input[type="text"][id$="-zipcode"]) .input_alert {
  right: calc(100% - 315px);
}

form.assisted_form .input_ok_icon {
  display: block;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 1.3em;
  height: 1.3em;
  background: url(images/icon_checked.png) no-repeat center center;
  background-size: contain;
}
form.assisted_form table td:has(select[required]) .input_ok_icon,
form.assisted_form table td:has(input[type="text"][id$="-zipcode"]) .input_ok_icon {
  position: static;
  translate: 0;
}

form.assisted_form .input_alert_area {
  width: min(850px, 100%);
  margin: 0 auto 2em;
  text-align: center;
}

form.assisted_form .input_alert_area .input_yet {
  margin-bottom: 1.5em;
  background: none;
  color: #d9111b;
  border: solid 2px #d9111b;
  font-weight: bold;
  padding: 1em 2em;
}

@media screen and (max-width: 768px) {
  form.assisted_form table td .input_alert {
    left: auto;
    right: 2em;
  }
  form.assisted_form table td input[type="text"][id$="-zipcode"] {
    width: 275px;
  }
  form.assisted_form table td:has(input[type="text"][id$="-zipcode"]) .input_alert {
    right: calc(100% - 275px);
  }
  
  form.assisted_form .input_ok_icon {
    width: 1.6em;
    height: 1.6em;
  }
}
@media screen and (max-width: 540px) {
  form.assisted_form table td .input_alert {
    font-size: 0.875rem;
  }
  form.assisted_form table td input[type="text"][id$="-zipcode"] {
    width: 240px;
  }
  form.assisted_form table td:has(input[type="text"][id$="-zipcode"]) .input_alert {
    right: calc(100% - 240px);
  }
}
