html{
  overflow-x: hidden;
}
body{

    width: 100vw;
  font-family: 'Noto Sans JP', sans-serif;
}

main{
  display: flex;
  min-width: 100vw;
}
#left{
  display: flex;
  align-items:center;
  justify-content: center;
  background: #323232;
  color: #fff;
  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: 24%;
}
#left .title{
  width: 53.5%;
}
#left .login{
  font-weight: 600;
}

#right{
  display: flex;
  align-items:center;
  justify-content: center;
  background: #fff;
  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: #0a8dda;
  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: #787878;
  font-weight: 500;
}
.error{
  color: #da0a0a;
  margin-bottom: 1em;
  font-size:1.2em;
}