@charset "utf-8";

/* CSS Document */

/**********************************************
module-login
***********************************************/

.login{
  padding-top: 6em;
  padding-bottom: 12em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: var(--color-sub01);
}

.login-header {
  padding-top: 0px;
  padding-bottom: 2em;
}

.login-header-logo01 {
  text-align: center;
  padding-bottom: 15px;
}
.login-header-logo01 img {
  max-width: 180px;
}
.login-header-logo02 {
  text-align: center;
  padding-bottom: 15px;
}
.login-header-logo02 img {
  max-width: 340px;
}

.login-header-text {
  text-align: center;
  font-size: clamp(108%,1vw, 124%);;
  font-weight: 500;
}

.login-block {
  padding: 0 3vw;
}

.login-inner {
  display: inline-block;
  width: 100%;
  max-width: 420px;
}

.login-box {
  background-color: var(--color-base);
  box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.1);
  padding: 2em 8%;
  margin-bottom: 1.5em;
  text-align: left;
}

.login-item {
  padding-bottom: 2em;
}

.login-label {
  display: block;
  font-size: 116%;
  font-weight: 500;
  padding-bottom: 0.2em;
}

.login-input{
  width: 100%;
  font-size: 16px;
  height: 40px;
  padding: 0 0.5em;
  border-radius: 5px;
  border: 1px solid var(--color-sub03);
}
.login-input:focus {
  box-shadow: 0 0 0.5em var(--color-brand03);
}

.login-submit{
  margin: 0 auto;
}
.login-submit-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 16px;
  padding: 1em 0;
  width: 100%;
  border-radius: 5px;
  background-color: var(--color-brand01);
  color: var(--color-base);
  font-weight: 500;
  transition: 0.2s;
}
body.is-pc .login-submit-btn:hover {
  background-color: #146395;
}
.login-submit-btn small{
  display: block;
  font-size: 80%;
}


.login-reminder {
  text-align: right;
  padding-bottom: 2em;
}
.login-reminder a {
}

.is-completed{
  background: rgba(223, 240, 216, 0.5);
}

.span-en {
  display: inline-block;
  font-weight: 400;
  font-size: 77%;
  font-family: var(--font-family-gothic-en);
  padding-left: 0.6em;
  letter-spacing: 0;
  opacity: 0.8;
}