* {
  padding: 0;
  margin: 0;
}

.main {
  display: flex;
  width: 100%;
  height: 100vh;
  /* background-color: aqua; */
}

.page-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 100vh;
  /* background-color: rgb(255, 0, 0); */
}

.background {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: rgb(251, 0, 255); */
}

.logo-box {
  position: absolute;
  margin-right: 45%;
  width: 45%;
  height: 45%;
 /* background-color: rgb(0, 21, 255); */
}

.logo {
  position: absolute;
  width: 100%;
  height: 110%;
}

.back {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  object-position:10% 100%;
  object-fit: cover;
}


.page-right {
  display: flex;
  flex-flow: column;
  width: 50%;
  height: 100vh;
  /* background-color: rgb(170, 255, 0); */
}

.message-box {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: end;
  width: 100%;
  height: 38%;
  /* background-color: rgb(0, 255, 238);  */
}

.message-login {
  width: 50%;
  height: 40%;
  font-size: 30px;
  font-weight: bolder;
  /* background-color: rgb(255, 136, 0);   */
}

.message {
  display: flex;
  flex-flow: column;
  text-align: left;
  align-items: center;
  opacity: 0.7;
  width: 50%;
  height: 8vh;
  /* background-color: rgb(255, 72, 0);  */
}

.ID-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 15%;
  /* background-color: rgb(0, 21, 255); */
}

.logo-userID-box {
  display: flex;
  align-items: center;
  width: 55%;
  height: 65%;
  /* background-color: rgb(0, 255, 162); */
  border: solid;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.15); 
}

.ID {
  display: flex;
  align-items: center;
  width: 80%;
  height: 70%;
  /* background-color: rgb(255, 213, 0);  */
}

.ID-logo-box {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 15%;
  height: 65%;
  /* background-color: rgba(0, 251, 255, 0.751);  */
}

.ID-logo {
  width: 80%;
  height: 95%;
  /* box-shadow: 5px 5px 5px rgba(0,0,0,0.15);   */
}

.password-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 15%;
  /* background-color: rgb(174, 0, 255);  */
}

.logo-password-box {
  display: flex;
  align-items: center;
  width: 55%;
  height: 65%;
  /* background-color: rgb(246, 255, 0); */
  border: solid;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.15); 
}

.password {
  display: flex;
  align-items: center;
  width: 80%;
  height: 70%;
  /* background-color: rgb(34, 255, 0);  */
}

.key-logo-box {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 15%;
  height: 65%;
  /* background-color: rgba(255, 0, 60, 0.751); */
}

.key-logo {
  width: 80%;
  height: 95%;
  /* box-shadow: 5px 5px 5px rgba(0,0,0,0.15);   */
}

.login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 17%;
  /* background-color: rgb(255, 0, 208);  */
}

.login {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 30%;
  height: 40%;
  /* background-color: rgb(0, 179, 255);  */
}

.under-message-box {
  display: flex;
  width: 100%;
  height: 5%;
  /* background-color: rgb(255, 0, 34);  */
}



.under-message {
  flex-flow: column;
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  height: 75%;
  text-align: left;
  /* background-color: rgb(4, 0, 255);  */
}


.user-id-text {
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
  background-color: transparent;
  /* box-shadow: 10px 10px 10px rgba(0,0,0,0.3);   */
}

.user-id-text:focus {
  outline: none;
}


.password-text {
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
  background-color: transparent;
  /* box-shadow: 10px 10px 10px rgba(0,0,0,0.3);   */
}

.password-text:focus {
  outline: none;
}

.click {
  width: 100%;
  height: 100%;
  border-radius:15px;
  cursor: pointer;
  color: aliceblue;
  background-color: rgb(75, 79, 100);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.15);  
}

/* ホバー時 */
.click:hover {
  box-shadow: none;
  transform: translateY(1px);
}

/* .user-id-text:hover { 
  color: #000; /* 文字色を白にする */
  /* background-color: #c9c9c9; 背景色をグレー（#c9c9c9）にする */
/* } */

/* .password-text:hover {
  color: #000; /* 文字色を白にする */
  /* background-color: #c9c9c9; 背景色をグレー（#c9c9c9）にする */
/* } */ 

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #F5F5F5 inset;
}