@charset "UTF-8";

/* =============================================

    ログイン画面、パスワード再発行画面、パスワードリセット画面
    初期登録画面、メール認証画面

============================================= */

h1 {
    padding: 1rem 0;
}

h2 {
    text-decoration: underline #707070;
    text-decoration-thickness: 0px;
}

label {
    display: block;
    padding-bottom: 4%;
    width: 80%;
    margin: 0 auto;
}

.container {
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
}

#login img {
    width: 200px;
    height: 100px;
    object-fit: contain;
    margin-top: 2rem;
}

#login .login-form,
#reissue .reissue-form,
#reset-password .reset-password-form,
#confirm-password .confirm-password-form,
#register .register-form,
#verify .verify-form {
    position: absolute;
    box-sizing: border-box;
    width: 33%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

#login input:focus,
#reissue input:focus,
#reset-password input:focus {
    background: #fff;
    box-shadow: 0 0 4px #47a837;
}

#login .login-form button,
#reset-password .reset-password-form button,
#confirm-password .confirm-password-form button,
#verify .verify-form button {
    width: 100%;
    padding: 1.5rem 0;
    margin: 1rem 0 0 0;
    font-size: 170%;
    border-radius: 0 0 3px 3px;
}

#reissue .button-summary,
#register .button-summary {
    display: inline-flex;
    width: 100%;
    height: 70px;
    margin: 1rem 0 0 0;
}

#reissue .cancel-button,
#register .cancel-button {
    width: 50%;
    height: 100%;
    font-size: 150%;
    border-radius: 0 0 0 3px;
}

#reissue .reissue-button,
#register .reissue-button {
    width: 50%;
    height: 100%;
    font-size: 150%;
    border-radius: 0 0 3px 0;
}

#login button:hover,
#reissue button:hover,
#reset-password button:hover {
    cursor: pointer;
}

#login span.error-message {
    font-size: 130%;
}