/* React form state and accessibility additions to the official form/login CSS. */
.kokubo-form-page .kokubo-form-stage { outline: none; }
.kokubo-form-page .kokubo-field-control { flex: 1; min-width: 0; width: 100%; }
.kokubo-form-page .c-form__item { gap: 0; }
.kokubo-form-page .c-form__error,
.kokubo-form-page .c-form__permit .c-form__error,
.kokubo-form-page .p-login__error {
  position: static; inset: auto; transform: none; margin: 8px 0 0; padding: 0;
  width: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.kokubo-form-page .c-form__permit { flex-wrap: wrap; padding-inline: 16px; }
.kokubo-form-page .c-form__permit .c-form__error { width: 100%; text-align: center; }
.kokubo-form-page .c-form__radios { flex-wrap: wrap; }
.kokubo-form-page .c-form__radios label,
.kokubo-form-page .c-form__reasons label,
.kokubo-form-page .c-form__permit > label { display: flex; align-items: baseline; gap: 6px; max-width: 100%; }
.kokubo-form-page input[type="checkbox"],
.kokubo-form-page input[type="radio"] { flex: 0 0 auto; accent-color: var(--color-primary); width: 16px; height: 16px; }
.kokubo-form-page .c-form__item .--label { flex-shrink: 0; }
.kokubo-form-page .c-form__item .--value { white-space: pre-wrap; min-width: 0; overflow-wrap: anywhere; }
.kokubo-form-page .c-form__item.--red-comment::after { width: calc(100% - 160px); }
.kokubo-form-page .c-form__item.--red-comment { padding-bottom: 100px; }
.kokubo-form-page .c-form__progress__list .--item { min-width: 0; flex: 1; text-align: center; }
.kokubo-form-page .c-form__progress__list .--label { white-space: nowrap; flex-shrink: 0; }
.kokubo-form-page .c-form__progress__list .--progress { width: 100%; left: 50%; }
.kokubo-form-page .kokubo-field-note { font-size: 13px; line-height: 1.6; margin-top: 6px; font-weight: 400; }
.kokubo-form-page .kokubo-form-errors { margin: 32px auto 20px; padding: 18px 24px; border: 2px solid var(--color-primary); border-radius: 10px; background: #fff5f5; color: #8b111c; overflow-wrap: anywhere; }
.kokubo-form-page .kokubo-form-errors ul { padding-left: 20px; list-style: disc; }
.kokubo-form-page .kokubo-form-errors a { text-decoration: underline; }
.kokubo-form-page .kokubo-form-notice { margin: 20px; line-height: 1.8; }
.kokubo-form-page .kokubo-member-benefit { margin: 40px auto -20px; padding: 24px 30px; border: 1px solid #d9d9d9; border-radius: 10px; line-height: 1.8; }
.kokubo-form-page .kokubo-member-benefit h3 { font-family: var(--font-heading); font-size: 22px; }
.kokubo-form-page .c-form__button .--button { cursor: pointer; box-sizing: border-box; }
.kokubo-form-page button:disabled { cursor: wait; opacity: .55; }
.kokubo-form-page :is(input, textarea, select):focus-visible,
.kokubo-form-page button:focus-visible,
.kokubo-form-page a:focus-visible { outline: 3px solid #0174be; outline-offset: 4px; }
.kokubo-form-page :is(input, textarea, select)[aria-invalid="true"] { outline: 2px solid var(--color-primary); }
.kokubo-form-page .kokubo-form-errors:focus { outline: 3px solid #0174be; outline-offset: 3px; }
.kokubo-form-page .p-login__container { align-items: stretch; }
.kokubo-form-page .p-login__member,
.kokubo-form-page .p-login__nomember { height: auto; min-height: 550px; }
.kokubo-form-page .p-login__member .--content,
.kokubo-form-page .p-login__nomember .--content { height: auto; }
.kokubo-form-page .p-login__member .--label,
.kokubo-form-page .p-login__reminder .--label { display: block; }
.kokubo-form-page .kokubo-login-remember { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 15px; }
.kokubo-form-page .p-login__member .kokubo-login-remember input { all: revert; accent-color: var(--color-primary); width: 16px; height: 16px; }
.kokubo-form-page .p-login__member .c-button { margin-top: 32px; }
.kokubo-form-page .p-login__forget { max-width: 100%; width: fit-content; }
.kokubo-form-page .p-login__reminder .--mail .p-login__error { text-align: left; }
@media (max-width: 768px) {
  .kokubo-form-page .c-form__item { gap: 12px; }
  .kokubo-form-page .c-form__item .--label { width: 100%; min-width: 0; }
  .kokubo-form-page .c-form__item.--red-comment { padding-bottom: 100px; }
  .kokubo-form-page .c-form__item.--red-comment::after { width: calc(100% - 40px); bottom: 15px; }
  .kokubo-form-page .c-form__permit .--heading { text-align: center; }
  .kokubo-form-page .c-form__button.c-button { max-width: calc(100% - 40px); }
  .kokubo-form-page .c-form__progress__list .--item { flex: 1; width: auto; }
  .kokubo-form-page .c-form__progress__list .--label { font-size: 11px; }
  .kokubo-form-page .p-login__container { margin-top: 60px; }
  .kokubo-form-page .p-login__member .--content,
  .kokubo-form-page .p-login__nomember .--content { padding: 28px 20px 40px; }
  .kokubo-form-page .p-login__nomember { min-height: 0; }
  .kokubo-form-page .p-login__nomember .--text { margin-top: 20px; }
  .kokubo-form-page .p-login__nomember .c-button { margin-top: 40px; }
  .kokubo-form-page .p-login__reminder { margin-top: 60px; padding-bottom: 60px; }
  .kokubo-form-page .p-login__reminder .--text { padding-top: 40px; font-size: 16px; }
  .kokubo-form-page .kokubo-member-benefit { padding: 20px; }
}