@charset "UTF-8";

#article-333 input,
#article-333 input[type="text"] {
  width: auto;
  line-height: initial;
  font-weight: initial;
  background-color: initial;
  border: initial;
  border-radius: initial;
  padding: initial;
  vertical-align: initial;
  max-width: 600px;
  margin-inline: auto;
}
#article-333 input:focus,
#article-333 textarea:focus,
#article-333 select:focus {
  background-color: initial;
  border-color: initial;
  box-shadow: initial;
  outline: initial;
}

#article-333 input[type="radio"],
#article-333 input[type="checkbox"] {
  position: initial;
  opacity: initial;
}


#article-333 input.input01,
#article-333 input[type="text"].input01,
#article-333 input.input02,
#article-333 input[type="text"].input02,
#article-333 input.input03,
#article-333 input[type="text"].input03,
#article-333 input.input04,
#article-333 input[type="text"].input04,
#article-333 input.input05,
#article-333 input[type="text"].input05 {
  width: 100%;
  font-size: min(16px, calc(16 / 640 * 100vw));
  border: 1px solid #ccc;
  border-radius: 0.4em;
  padding: 0.5em 1em;
}

#article-333 input.input02:focus,
#article-333 input[type="text"].input02:focus,
#article-333 input.input03:focus,
#article-333 input[type="text"].input03:focus,
#article-333 input.input04:focus,
#article-333 input[type="text"].input04:focus,
#article-333 input.input05:focus,
#article-333 input[type="text"].input05:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

#article-333 input.input-error,
#article-333 input[type="text"].input-error {
  border-color: #e74c3c;
}
#article-333 .error-text {
  color: #e74c3c;
  font-size: min(14px, calc(14 / 640 * 100vw));
  margin-top: 0.5em;
}
#article-333 input.input03:focus + .error-text,
#article-333 input[type="text"].input03:focus + .error-text {
  opacity: 0;
}
#article-333 input.input04::placeholder,
#article-333 input[type="text"].input04::placeholder {
  color: #999;
  font-size: min(14px, calc(14 / 640 * 100vw));
}

#article-333 .custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
#article-333 .custom-checkbox input {
  display: none;
}
#article-333 .custom-checkbox span {
  width: 18px;
  height: 18px;
  border: 2px solid #3498db;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
}
#article-333 .custom-checkbox input:checked + span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #3498db;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#article-333 .form-group {
  position: relative;
  max-width: 600px;
  margin-inline: auto;
}
#article-333 .form-group input {
  width: 100%;
  max-width: none;
}
#article-333 .form-group label {
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 4px;
  color: #999;
  transition: 0.3s;
}
#article-333 .form-group input:focus + label,
#article-333 .form-group input:not(:placeholder-shown) + label {
  top: -1em;
  font-size: 12px;
  color: #3498db;
}