/* Extra small None	   ～575px */
/* Small       sm   576～767px */
/* Medium      md   768～991px */
/* Large       lg   992～1199px */
/* Extra large xl   1200px～ */
body {
    font-family: 'Mukta', sans-serif;
    height: 100vh;
    min-height: 550px;
    position: relative;
    overflow-y: hidden;
    color: #707070;
}

.top {
    background: #fff;
    padding: 1.75em 2.25em;
    box-sizing: border-box;
    width: 100%;
}

.top label {
    display: inline-block;
    font-weight: bold;
}

.logo_wrap {
    text-align: center;
    width: 50%;
    margin: 0 auto;
}

form.login_form input[type="text"],
form.login_form input[type="password"],
form.login_form input[type="email"] {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background: none;
    padding: 0.75em 1.25em;
    margin: 0 0 0.65em;
    font-size: 13.3333px;
    line-height: normal;
    background-color: white;
}

form.login_form {
    text-align: center;
    margin: 0;
}

/* ログインボタン、新しいパスワード保存ボタン、メール送信ボタン */
.login_button {
    padding: 0.75em 1.25em;
    border: 0;
    border-radius: 2.05em;
    font-weight: bold;
    margin-top: .65em;
    cursor: pointer;
    color: #fff;
    background: #479bd3;
    border: 1px solid #479bd3;
}

.login_button:hover {
    background-color: #89B9D6;
    border: 1px solid #479bd3;
}

/* sign_up パスワードを忘れた場合ボタン */
/* login_send ログイン画面へ戻るボタン */
/* login_send_pass_reset パスワード再設定の申請画面へ戻るボタン */
/* login_send_pass_complete ログイン画面へ戻るボタン */
/* login_send_pw_reset_done ログイン画面へ戻るボタン */
/* login_back ログイン画面へ戻るボタン */
.sign_up,
.login_send,
.login_send_pass_reset,
.login_send_pass_complete,
.login_send_pw_reset_done,
.login_back {
    padding: 0.75em 1.25em;
    border-radius: 2.05em;
    font-weight: bold;
    margin-top: 0.65em;
    color: #89B9D6;
    background: #fff;
    border: 1px solid #89B9D6;
}

.sign_up:hover,
.login_send:hover,
.login_send_pass_reset:hover,
.login_send_pass_complete:hover,
.login_send_pw_reset_done:hover,
.login_back:hover {
    color: #89B9D6;
    background-color: #e5f2ff;
    text-decoration: none !important;
}

.login_send_pw_reset_done {
    margin-top: 17px;
}

/* エラー時表示エリア */
.template_err_msg ul {
    list-style: none;
    padding-left: 0;
}

@media (max-width: 575px) {
    body.login-bg-color {
        background: white;
    }

    .contents {
        background: white;
        width: 100%;
    }

    .wrap {
        max-width: 630px;
        margin: 0 auto;
        width: 100%;
    }

    label.login_txt {
        text-align: left;
        width: 83%
    }

    /* 新しいパスワード */
    label.pw_txt {
        text-align: left;
        min-width: 83%;
    }

    /* ボタン系 */
    .login_button,
    .sign_up {
        width: 86%;
    }

    .send_button {
        width: 97% !important;
    }

    .save_button {
        width: 80% !important;
    }

    .login_send {
        width: 97%;
    }

    .login_send_pass_reset {
        width: 100%;
    }

    .login_send_pass_complete {
        width: 86%;
    }

    /* ボタン系 end */

    form.login_form input[type="text"],
    form.login_form input[type="password"],
    form.login_form input[type="email"] {
        width: 83%;
    }

    .top {
        margin-top: 0%;
    }

    .sm-pl-24 {
        padding-left: 24px;
    }

    .auto-warp {
        white-space: pre-wrap;
    }

    .login_back_btn_position {
        justify-content: flex-start !important;
    }

    .send_btn_position {
        justify-content: flex-start !important;
    }

    .d-flex_md {
        display: inherit;
    }

    .logo_wrap {
        width: 70%;
        padding: 1em 0;
        max-width: 270px;
    }

}

@media (min-width: 576px) {
    body.login-bg-color {
        background: white;
    }

    .contents {
        background: white;
        width: 100%;
    }

    .wrap {
        max-width: 630px;
        margin: 0 auto;
        width: 100%;
    }

    form.login_form {
        padding: 2.25em;
    }

    label.login_txt {
        width: 7.25em;
        text-align: left;
    }

    /* 新しいパスワード */
    label.pw_txt {
        text-align: left;
        min-width: 13em;
    }

    .login_button,
    .sign_up {
        width: 55%;
    }

    .login_send {
        width: 100%;
    }

    form.login_form input[type="text"],
    form.login_form input[type="password"],
    form.login_form input[type="email"] {
        width: 50%;
    }

    .top {
        margin-top: 0%;
    }

    .login_back_btn_position {
        justify-content: flex-start !important;
    }

    .send_btn_position {
        justify-content: flex-end !important;
    }

    .d-flex_md {
        display: flex;
    }

}

@media (min-width: 992px) {
    body.login-bg-color {
        background: #F4F4F4;
    }

    .contents {
        background: #F4F4F4;
        width: 100%;
    }

    .wrap {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }

    /* ボタン系 */
    .login_button,
    .sign_up {
        width: 70%;
    }

    .save_button {
        width: 34% !important;
    }

    .send_button {
        width: 84% !important;
    }

    .login_send {
        width: 88%;
    }

    .login_send_pass_reset {
        width: 75% !important;
    }

    .login_send_pass_complete {
        width: 51%;
    }

    .login_send_pw_reset_done {
        width: 55% !important;
    }

    .login_back {
        width: 121% !important;
    }

    /* ボタン系 end */

    form.login_form {
        padding: 1.25em 0;
    }

    label.login_txt {
        width: 7.25em;
        text-align: left;
    }

    /* 新しいパスワード */
    label.pw_txt {
        text-align: left;
        min-width: 13em;
    }

    form.login_form input[type="text"],
    form.login_form input[type="password"] {
        width: 65%;
    }

    .reset-pass {
        width: 50% !important;
    }

    form.login_form input[type="email"] {
        width: 65%;
    }

    .top {
        margin: 1.25em 0 0 0;
        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    }

    .max-width-560 {
        max-width: 560px !important;
    }

    .padding-right-0 {
        padding-right: 0;
    }

    .login_back_btn_position {
        justify-content: flex-start !important;
    }

    .send_btn_position {
        justify-content: flex-end !important;
    }

    .d-flex_md {
        display: flex;
    }

}