html{
  overflow-x: hidden;
}
body{

    padding: 0;
    margin: 0;
    width: 100vw;
    height:100vh;
    height: 100dvh;
    min-height:100vh;
    min-height: 100dvh;
    font-family: 'Noto Sans JP', sans-serif;
  background: url(../images/common/main-bg.png) no-repeat center center / cover;
}

main{
  display: flex;
  min-width: 100vw;
}
#left{
  display: flex;
  align-items:center;
  justify-content: center;
  background: #333;
  color: #87abbc;
  min-height: 100vh;
  width: 50%;
}
#left #heading{
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  text-align: center;
  width: 100%;
  gap : 2.5vw;
}
#left .logo{
  width: 76%;
}
#left .logo img{
  margin: auto;
}
#left .title h1{
  width: 100%;
  color: #87abbc;
  line-height: 1.1;
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
  font-size: 2.56em;
  letter-spacing: 0.05em;
  margin: auto;
}
#left .login{
  font-weight: 600;
}

#right{
  display: flex;
  align-items:center;
  justify-content: center;

  color: #323232;
  min-height: 100vh;
  width: 50%;
}


#right #login{
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  text-align: left;
  width: 64%;
  font-weight: 500;
}

#right #login input[type="text"]{
  width: 100%;
  border: 1px solid #787878;
  border-radius: 5px;
  padding: 0.5em 1em;
  margin-bottom:1.25vw;
  font-weight: 500;
}
#right #login input[type="password"]{
  width: 100%;
  border: 1px solid #787878;
  border-radius: 5px;
  padding: 0.5em 1em;
  margin-bottom:1.25vw;
  font-weight: 500;
}
#right #login input[type="submit"]{
  display: block;
  width: 100%;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-bottom:0.625vw;
  padding: 0.5em;
  cursor: pointer;
  font-weight: 700;
}
#right #login logout-button a{
  display: block;
  width: 100%;
  background: #0a8dda;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-bottom:0.625vw;
  padding: 0.5em;
}

#right #login input::placeholder{
  color: #c3c8c8;
}
#right #login .login-remember{
  text-align: center;
  margin-bottom:1.875vw;
  font-size: 0.92em;
}

#right #login label{
  display: block;
  margin-bottom: 0.5em;
}
#right #login .login-false{
  font-size: 0.88em;
  color: #333;
  font-weight: 500;
}
.error{
  color: #333;
  margin-bottom: 1em;
  font-size:1.2em;
}