html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: #fbfbfc;
}


/* =========================================================
   Login page base
   ========================================================= */

main.container-fluid.hall-login-main {
  position: relative;
  max-width: none;
  min-height: 100vh;
  padding: 0 !important;
  overflow: hidden;
}


/* base.html側の認証エラーmessages */
.hall-login-main > .alert {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 1100;

  width: min(520px, calc(100vw - 32px));
  margin: 0 !important;

  transform: translateX(-50%);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.12);
}


.hall-login-page {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  padding: 32px;

  background: #fbfbfc;
}


/* 左側オレンジ帯 */
.hall-login-accent {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: clamp(96px, 8vw, 132px);

  background: #f58220;
}


/* =========================================================
   Login card
   ========================================================= */

.hall-login-card {
  position: relative;
  z-index: 1;

  width: min(
    550px,
    calc(100vw - 64px)
  );

  padding:
    54px
    40px
    34px;

  background: #ffffff;

  border:
    1px solid
    #d9dde3;

  border-radius: 12px;

  box-shadow:
    0 3px 12px
    rgba(0, 0, 0, 0.12);
}


/* =========================================================
   Logo
   ========================================================= */

.hall-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.hall-login-logo {
  display: block;

  width: min(
    245px,
    70%
  );

  height: auto;
}


.hall-login-subtitle {
  margin:
    12px
    0
    0;

  color: #30343a;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;

  text-align: center;
}


/* =========================================================
   Divider
   ========================================================= */

.hall-login-divider {
  width: 100%;
  height: 1px;

  margin:
    28px
    0
    24px;

  background: #e2e5e9;
}


/* =========================================================
   Form
   ========================================================= */

.hall-login-form {
  width: 100%;
}


.hall-login-field
+
.hall-login-field {
  margin-top: 24px;
}


.hall-login-input-wrap {
  position: relative;

  display: flex;
  align-items: center;
}


.hall-login-input-icon {
  position: absolute;

  left: 16px;

  width: 21px;
  height: 21px;

  fill: #8d939d;

  pointer-events: none;
}


/* ID・パスワード共通 */
.hall-login-input {
  width: 100%;
  height: 58px;

  padding:
    0
    18px
    0
    53px;

  color: #34383e;
  background: #ffffff;

  border:
    1px solid
    #cfd4da;

  border-radius: 8px;

  outline: none;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 18px;
  line-height: 1;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;

  box-sizing: border-box;
}


/* パスワード欄右側は目ボタン分を空ける */
.hall-login-password-input {
  padding-right: 52px;
}


.hall-login-input::placeholder {
  color: #8d939d;
  opacity: 1;
}


.hall-login-input:focus {
  border-color: #f58220;

  box-shadow:
    0 0 0 3px
    rgba(245, 130, 32, 0.14);
}


/* =========================================================
   Password eye button
   ========================================================= */

.hall-login-password-toggle {
  position: absolute;

  right: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  padding: 0;

  color: #8d939d;
  background: transparent;

  border: 0;
  border-radius: 6px;

  cursor: pointer;
}


.hall-login-password-toggle:hover {
  color: #666d77;
  background: #f4f5f7;
}


.hall-login-password-toggle:focus-visible {
  outline:
    2px solid
    #f58220;

  outline-offset: 2px;
}


.hall-login-eye-icon {
  width: 22px;
  height: 22px;

  fill: currentColor;
}


.hall-login-eye-icon[hidden] {
  display: none;
}


/* =========================================================
   Remember login
   ========================================================= */

.hall-login-remember {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  margin-top: 22px;

  color: #34383e;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 15px;
  line-height: 1.4;

  cursor: pointer;

  user-select: none;
}


.hall-login-checkbox {
  width: 22px;
  height: 22px;

  margin: 0;

  accent-color: #f58220;

  cursor: pointer;
}


/* =========================================================
   Login button
   ========================================================= */

.hall-login-submit {
  width: 100%;
  height: 55px;

  margin-top: 27px;

  color: #ffffff;

  background: #f58220;

  border:
    1px solid
    #f58220;

  border-radius: 8px;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 17px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}


.hall-login-submit:hover {
  background: #e9741b;
  border-color: #e9741b;
}


.hall-login-submit:focus-visible {
  outline:
    3px solid
    rgba(245, 130, 32, 0.30);

  outline-offset: 2px;
}


/* =========================================================
   Forgot password
   ========================================================= */

.hall-login-divider-bottom {
  margin:
    26px
    0
    22px;
}


.hall-login-forgot-link {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  width: fit-content;

  margin:
    0
    auto;

  color: #0d6efd;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 15px;
  line-height: 1.4;

  text-decoration: underline;
}


.hall-login-forgot-link:hover {
  color: #0a58ca;
}


.hall-login-forgot-icon {
  width: 18px;
  height: 18px;

  fill: #8d939d;

  flex: 0 0 auto;
}


/* =========================================================
   Validation error
   ========================================================= */

.hall-login-form-errors,
.hall-login-field-errors {
  color: #dc3545;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 12px;
  line-height: 1.4;
}


.hall-login-form-errors {
  margin-bottom: 14px;

  padding:
    10px
    12px;

  background: #fff2f2;

  border:
    1px solid
    #f0b7bd;

  border-radius: 6px;
}


.hall-login-field-errors {
  margin-top: 6px;
}


.hall-login-remember-errors {
  margin-top: 6px;
}


/* =========================================================
   Narrow screen
   ========================================================= */

@media (max-width: 767.98px) {

  .hall-login-page {
    padding: 20px;
  }


  .hall-login-accent {
    width: 18px;
  }


  .hall-login-card {
    width: min(
      520px,
      calc(100vw - 40px)
    );

    padding:
      42px
      28px
      30px;
  }


  .hall-login-subtitle {
    font-size: 18px;
  }


  .hall-login-input {
    height: 54px;

    font-size: 16px;
  }
}


/* =========================================================
   Low height screen
   ========================================================= */

@media (max-height: 720px) {

  main.container-fluid.hall-login-main {
    overflow-y: auto;
  }


  .hall-login-page {
    align-items: flex-start;

    min-height: 720px;

    padding-top: 24px;
    padding-bottom: 24px;
  }


  .hall-login-card {
    padding-top: 34px;
    padding-bottom: 26px;
  }


  .hall-login-divider {
    margin-top: 20px;
    margin-bottom: 18px;
  }


  .hall-login-field
  +
  .hall-login-field {
    margin-top: 18px;
  }


  .hall-login-submit {
    margin-top: 20px;
  }
}