/* ----------------------------------------------- */
/* ---------------------コンテナ------------------- */

.box_login,
.box_register {
    width: 100%;
    max-width: 380px;
    min-height: 400px;
    padding: 15px;
    margin: auto;
    background-color: white;
    box-shadow: 0 0 8px lightgray;
}

/* ----------------------------------------------- */
/* -----------------コンポーネント----------------- */

.box_password {
    border: solid 1px rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.box_password.focus {
    border-color: #6495ed;
    transition: border-color 0.3s ease;
}

.box_password.is-invalid {
    border-color: #bd4147;
    transition: border-color 0.3s ease;
    background-color: #f8e0e0;
}

.form_password {
    border: none;
}

.form_password:focus {
    border: none;
    box-shadow: none;
}

.btn_password,
.btn_password:active,
.btn_password:hover {
    border: none;
    outline: none;
}

/* Microsoft EdgeとIEのデフォルトパスワード表示アイコンを非表示 */
.form_password::-ms-reveal,
.form_password::-ms-clear {
    display: none;
}

.link_password_reset {
    color: #0d6efd;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}
.link_password_reset:hover {
    color: #0a58ca;
}

/* ----------------------------------------------- */
/* ---------------------フォント------------------- */

.h_login,
.h_register {
    position: relative;
}

.h_login:before,
.h_login:after,
.h_register:before,
.h_register:after {
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 10%;
    height: 1px;
    background-color: lightgray;
}

.h_login:before,
.h_register:before {
    left: 10%;
}
.h_login:after,
.h_register:after {
    right: 10%;
}