@charset "utf-8";
/*************************************************************
 *
 * Copyright (c) 2025 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2025 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 1.0.0
 * Update	  : 2025.10.22
 *
 *************************************************************/

#loginForm {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-color: #bdbdbd;
  background-color: #fff;
  text-align: center;
}
#loginForm > h1 {
  color: #005bac;
}
#loginForm > div.msg {
  font-weight: bold;
  color: #ff4136;
}
#loginForm > input {
  display: block;
  width: 100%;
}
#loginForm > button {
  display: block;
  width: 100%;
  padding: 0;
}

@media print, screen and (min-width: 1025px) {
  /* px */

  #loginForm {
    width: 600px;
    margin-top: 50px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%),
                0 3px 1px -2px rgb(0 0 0 / 20%),
                0 1px 5px 0 rgb(0 0 0 / 12%);
    padding: 50px;
    border-width: 1px;
  }
  #loginForm > h1 {
    font-size: 24px;
    line-height: 33px;
  }
  #loginForm > div.msg {
    margin: 20px 0 16px;
    font-size: 14px;
    line-height: 24px;
  }
  #loginForm > input {
    height: 60px!important;
    margin-top: 20px!important;
    padding: 0 .75rem!important;
    font-size: 18px!important;
    line-height: 60px!important;
  }
  #loginForm > button {
    height: 60px!important;
    margin-top: 20px!important;
    font-size: 21px!important;
    line-height: 60px!important;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

  #loginForm {
    width: 70.2576vw;
    margin-top: 5.8548vw;
    box-shadow: 0 0.2341vw 0.2341vw 0 rgb(0 0 0 / 14%),
                0 0.3512vw 0.117vw -0.2341vw rgb(0 0 0 / 20%),
                0 0.117vw 0.5854vw 0 rgb(0 0 0 / 12%);
    padding: 5.8548vw;
    border-width: 0.117vw;
  }
  #loginForm > h1{
    font-size: 2.8103vw;
    line-height: 3.8641vw;
  }
  #loginForm > div.msg {
    margin: 2.3419vw 0 1.8735vw;
    font-size: 1.6393vw;
    line-height: 2.8103vw;
  }
  #loginForm > input {
    height: 7.0257vw!important;
    margin-top: 2.3419vw!important;
    padding: 0 .75rem!important;
    font-size: 2.1077vw!important;
    line-height: 7.0257vw!important;
  }
  #loginForm > button {
    height: 7.0257vw!important;
    margin-top: 2.3419vw!important;
    font-size: 2.459vw!important;
    line-height: 7.0257vw!important;
  }
  #loginForm > div.forget {
    margin-top: 2.3419vw;
    font-size: 1.6393vw;
  }
}
@media screen and (max-width: 640px){
	/* px/4 */

  #loginForm {
    width: 90vw;
    margin-top: 12.5vw;
    box-shadow: 0 0.5vw 0.5vw 0 rgb(0 0 0 / 14%),
                0 0.75vw 0.25vw -0.5vw rgb(0 0 0 / 20%),
                0 0.25vw 1.25vw 0 rgb(0 0 0 / 12%);
    padding: 12.5vw;
    border-width: 0.25vw;
  }
  #loginForm > h1 {
    font-size: 6vw;
    line-height: 8.25vw;
  }
  #loginForm > div.msg {
    margin: 5vw 0 4vw;
    font-size: 3.5vw;
    line-height: 6vw;
  }
  #loginForm > input {
    height: 15vw!important;
    margin-top: 5vw!important;
    padding: 0 .75rem!important;
    font-size: 4.5vw!important;
    line-height: 15vw!important;
  }
  #loginForm > button {
    height: 15vw!important;
    margin-top: 5vw!important;
    font-size: 5.25vw!important;
    line-height: 15vw!important;
  }
  #loginForm > div.forget {
    margin-top: 5vw;
    font-size: 3.5vw;
  }
}