:root{
  --login-blue:#0b63ce;
  --login-blue-deep:#053779;
  --login-blue-soft:#eaf3ff;
  --login-sky:#0e86d8;
  --login-ink:#122033;
  --login-muted:#66768a;
  --login-line:#d8e3f1;
  --login-panel:#ffffff;
}

body.towa-login-page{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--login-ink);
  background:
    linear-gradient(135deg, rgba(247,250,255,.98), rgba(235,243,254,.98)),
    repeating-linear-gradient(90deg, rgba(11,99,206,.055) 0, rgba(11,99,206,.055) 1px, transparent 1px, transparent 68px),
    repeating-linear-gradient(0deg, rgba(11,99,206,.045) 0, rgba(11,99,206,.045) 1px, transparent 1px, transparent 68px);
  font-family:"Source Sans 3","Hiragino Kaku Gothic ProN","Yu Gothic Medium",Meiryo,sans-serif;
}

.towa-login-shell{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,56px);
  isolation:isolate;
}

.towa-login-shell::before{
  position:absolute;
  inset:0;
  z-index:-1;
  content:"";
  background:
    linear-gradient(118deg, transparent 0 12%, rgba(11,99,206,.1) 12% 12.4%, transparent 12.4%),
    linear-gradient(118deg, transparent 0 18%, rgba(11,99,206,.12) 18% 18.5%, transparent 18.5%),
    linear-gradient(118deg, transparent 0 76%, rgba(11,99,206,.08) 76% 76.4%, transparent 76.4%);
}

.towa-login-panel{
  width:min(100%,960px);
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(320px,390px) minmax(0,1fr);
  overflow:hidden;
  background:var(--login-panel);
  border:1px solid rgba(216,227,241,.9);
  border-radius:8px;
  box-shadow:0 30px 90px rgba(18,32,51,.16);
}

.towa-login-brand{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px;
  overflow:hidden;
  background:linear-gradient(150deg, #052e6f 0%, #0b63ce 56%, #0e86d8 100%);
}

.towa-login-brand::before{
  position:absolute;
  inset:-14%;
  content:"";
  background:
    repeating-linear-gradient(138deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent 18px),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 42%);
  opacity:.8;
}

.towa-login-brand::after{
  position:absolute;
  right:-72px;
  bottom:-72px;
  width:240px;
  height:240px;
  content:"";
  border:34px solid rgba(255,255,255,.18);
  transform:rotate(18deg);
}

.towa-login-logo-plate{
  position:relative;
  z-index:1;
  width:min(100%,292px);
  padding:28px 26px;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:8px;
  box-shadow:0 24px 54px rgba(2,25,66,.28);
}

.towa-login-logo-plate img,
.towa-login-mobile-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.towa-login-form-area{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(30px,5vw,62px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
}

.towa-login-card{
  width:min(100%,420px);
}

.towa-login-card-head{
  margin-bottom:30px;
}

.towa-login-mobile-logo{
  display:none;
  max-width:220px;
  margin-bottom:26px;
}

.towa-login-card h1{
  margin:0;
  color:#0f1f35;
  font-size:2.1rem;
  line-height:1.2;
  font-weight:900;
}

.towa-login-alert{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  margin-bottom:22px;
  border-radius:8px;
}

.towa-login-form{
  display:grid;
  gap:18px;
}

.towa-field .form-label{
  margin-bottom:.45rem;
  color:#2b3d55;
  font-size:.94rem;
  font-weight:800;
}

.towa-field .input-group{
  border-radius:8px;
  box-shadow:0 10px 24px rgba(18,32,51,.06);
}

.towa-field .input-group-text,
.towa-field .form-control,
.towa-password-toggle{
  min-height:50px;
  border-color:var(--login-line);
}

.towa-field .input-group-text{
  color:var(--login-blue);
  background:#f6f9fe;
}

.towa-field .form-control{
  color:#16253a;
  font-weight:700;
}

.towa-field .form-control:focus{
  border-color:#76adef;
  box-shadow:0 0 0 .2rem rgba(11,99,206,.14);
}

.towa-password-toggle{
  color:#4d5c70;
  background:#fff;
}

.towa-password-toggle:hover,
.towa-password-toggle:focus{
  color:var(--login-blue);
  background:var(--login-blue-soft);
  border-color:#b7d4f6;
}

.towa-turnstile-wrap{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden;
  background:#f7fbff;
  border:1px solid var(--login-line);
  border-radius:8px;
}

.towa-login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#3b4e66;
  font-weight:700;
}

.towa-login-options .form-check-input:checked{
  background-color:var(--login-blue);
  border-color:var(--login-blue);
}

.towa-login-submit{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  color:#fff;
  background:linear-gradient(135deg, var(--login-blue), var(--login-blue-deep));
  border:0;
  border-radius:8px;
  font-size:1.05rem;
  font-weight:900;
  box-shadow:0 16px 34px rgba(11,99,206,.28);
}

.towa-login-submit:hover,
.towa-login-submit:focus{
  color:#fff;
  background:linear-gradient(135deg, #0a58b9, #04306d);
  box-shadow:0 18px 38px rgba(11,99,206,.34);
}

.towa-login-submit .bi{
  font-size:1.45rem;
}

@media (max-width: 767.98px){
  .towa-login-shell{
    align-items:flex-start;
    padding:18px;
  }

  .towa-login-panel{
    min-height:auto;
    grid-template-columns:1fr;
  }

  .towa-login-brand{
    display:none;
  }

  .towa-login-form-area{
    min-height:calc(100vh - 36px);
    padding:34px 22px;
  }

  .towa-login-mobile-logo{
    display:block;
  }
}

@media (max-width: 420px){
  .towa-login-shell{
    padding:10px;
  }

  .towa-login-form-area{
    min-height:calc(100vh - 20px);
    padding:26px 18px;
  }

  .towa-login-card h1{
    font-size:1.9rem;
  }

  .towa-field .input-group-text{
    padding-right:.65rem;
    padding-left:.65rem;
  }
}