body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: -webkit-gradient(linear, right top, left top, from(#98c7dc), to(#b0d0e0));
  background: -webkit-linear-gradient(right, #98c7dc, #b0d0e0);
  background: -o-linear-gradient(right, #98c7dc, #b0d0e0);
  background: linear-gradient(270deg, #98c7dc, #b0d0e0);
  font-family: Noto Sans JP, Noto Sans Japanese, Noto Sans, sans-serif;
}

body ::-webkit-input-placeholder {
  color: #4E546D;
}

body p {
  color: #5B5E6F;
  font-size: 10px;
  text-align: left;
}

input {
  border-radius: 0;
  -webkit-appearance: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white !important;
}

.login-wrapper {
  opacity: 1;
  width: 240px;
  border-top: 2px solid #014099;
  height: 350px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  padding: 50px 40px 40px 40px;
  background: #ffffff;
  -webkit-box-shadow: 0 6px 20px 0 rgba(19, 49, 62, 0.16);
          box-shadow: 0 6px 20px 0 rgba(19, 49, 62, 0.16);
}

.login-wrapper .login-text-area {
  position: absolute;
  bottom: 20px;
  left: 35px;
  width: 250px;
  text-align: center;
}

.login_title {
  margin-top: -35px;
  padding-bottom: 40px;
  color: #afb1be;
  text-align: center;
  font-size: 12px;
  height: 128px;
}

.login_area {
  height: 208px;
  position: absolute;
  left: 0;
}

.login_area .icon {
  position: absolute;
  z-index: 1;
  left: 36px;
  top: 4.5px;
  opacity: .5;
}

.error {
  position: absolute;
  margin: -40px;
  text-align: center;
  width: 100%;
}

.error p {
  color: #E91E63;
  text-align: center;
  font-size: 12px;
}

.login_area input[type='password'] {
  color: #00bcd4;
}

.login_area input[type='text'], .login_area input[type='password'] {
  width: 190px;
  margin-top: -2px;
  background: #fff;
  padding: 10px 65px;
  border-top: 1px solid #e6e6e6c7;
  border-top: 1px solid rgba(230, 230, 230, 0.7803921568627451);
  border-bottom: 1px solid #e6e6e6c7;
  border-bottom: 1px solid rgba(230, 230, 230, 0.7803921568627451);
  border-right: none;
  border-left: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.login_area input[type='text']:focus, .login_area input[type='password']:focus {
  outline: none;
}

.login_area_name, .login_area_pw {
  position: relative;
}

.login_area_submit {
  position: relative;
  top: 25px;
  width: 80%;
  margin: auto;
}

.login-text-area a {
  font-size: 10px;
  color: #606479;
  -webkit-transition-property: color;
  -o-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s;
  text-decoration: none;
}

.login-text-area a:hover {
  color: #2c7494;
  -webkit-transition-property: color;
  -o-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s;
  text-decoration: underline;
}

.login_area_submit input {
  border-radius: 50px;
  background: transparent;
  padding: 10px 50px;
  border: 2px solid #97c7dc;
  color: #81a8b9;
  text-transform: uppercase;
  font-size: 11px;
  -webkit-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s;
  display: block;
  margin: auto;
}

.login_area_submit input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

.login_area_submit input:hover {
  color: white;
  background: #94c6dc;
  cursor: pointer;
  -webkit-transition-property: background, color;
  -o-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s;
}

/* mobile */
@media only screen and (max-width: 450px) {
  body {
    background: #fff;
  }

  .login-wrapper {
    padding: 0 40px 50px 40px;
    border-top: none;
    background: #fff;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  .login_area input[type='text'], .login_area input[type='password'] {
    background: #c2ced417;
    border-top: 1px solid #ffffff00;
    border-bottom: 1px solid #ffffff00;
  }
}