/* Extra small None	   ～575px */
/* Small       sm   576～767px */
/* Medium      md   768～991px */
/* Large       lg   992～1199px */
/* Extra large xl   1200px～ */
@import url('https://fonts.googleapis.com/css?family=Mukta');

body {
    font-family: 'Mukta', sans-serif;
    height: 100vh;
    min-height: 550px;
    position: relative;
    overflow-y: hidden;
    color: #707070;
}

label {
    margin-bottom: 0;
}

/* エラーメッセージエリア */
.template_err_msg {
    color: #dc3545 !important;
    text-align: left !important;
}

.template_err_msg ul {
    list-style: none;
    padding-left: 0;
}

body.login-bg-color {
    background: white;
}

.contents {
    width: 100%;
    padding-top: 0;
    background: white;
}

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

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

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

/* ロゴ */
.logo_title {
    color: #16a8c9;
    font-weight: bold !important;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

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

form.login_form input {
    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;
    width: 90%;
}


label.login_txt {
    text-align: left !important;
    min-width: 6.05em;
    margin-right: 10rem;
}

label.login_txt.pass2 {
    margin-right: 5.3rem;
}

label.pw_txt1 {
    min-width: 13em;
    padding-right: 170px;
}

label.pw_txt2 {
    min-width: 13em;
    padding-right: 90px
}

/* active時の黒い罫線を消す */
button:focus {
    outline: 0px auto -webkit-focus-ring-color;
}

input:hover {
    outline: 0px auto -webkit-focus-ring-color;
}

input:active {
    outline: 0px auto -webkit-focus-ring-color;
    box-shadow: 0px 0px 2px 2px #82c7e7;
}

input:focus {
    outline: 0px auto -webkit-focus-ring-color;
    box-shadow: 0px 0px 2px 2px #82c7e7;
}

input:focus-visible {
    outline: 0px auto -webkit-focus-ring-color;
}

/* 青いボタン ログイン, 新しいパスワード保存, メール送信ボタン */
.btn-submit {
    width: 70% !important;
    padding: 0.75em 1.25em;
    background: #479bd3;
    border-radius: 2.05em;
    font-weight: bold;
    margin-top: 1.25em;
    color: white;
    cursor: pointer;
    border: 1px solid #479bd3;
}

.btn-submit:hover {
    background-color: #89B9D6;
    color: white;
}

/* 白いボタン */
/* btn-return 戻るボタン */
.sign_up,
.btn-return {
    width: 70% !important;
    color: #18b7db;
    background: #fff;
    border: 1px solid #89B9D6;
    border-radius: 2.05em;
    font-weight: bold;
    padding: 0.75em 1.25em;
    margin-top: 0.65em;
}

.sign_up:hover {
    color: #89B9D6;
    background-color: #e5f2ff;
}

/* パスワード再設定の申請に戻るボタン */
.sign_up_txt_long {
    color: #89B9D6;
    background: #fff;
    border: 1px solid #89B9D6;
    border-radius: 2.05em;
    font-weight: bold;
    padding: 0.75em 1.25em;
    margin-top: 0.65em;
    width: 90% !important;
}

.sign_up_txt_long:hover {
    color: #89B9D6;
    background-color: #e5f2ff;
}

@media (max-width: 575px) {
    .top {
        margin-top: 0%;
    }

    label.login_txt {
        margin-right: 0;
        text-align: left;
    }

    label.pw_txt1 .pw_txt2 {
        min-width: 90%;
    }

    .sign_up,
    .btn-submit,
    .btn-return {
        min-width: 240px;
        max-width: 330px;
    }

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

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

}

@media (min-width: 576px) {
    .top {
        margin-top: 0%;
        padding: 1.75em 1.25em;
    }

    form.login_form input {
        width: 50%;
    }

    .sign_up,
    .btn-submit {
        width: 50% !important;
    }

    .btn-return {
        color: #89B9D6;
        width: 50% !important;
    }

    .btn-return:hover {
        color: #89B9D6;
    }

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

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

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

    .contents {
        background: #F4F4F4;
    }

    .wrap {
        max-width: 500px;
    }

    .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%);
        padding: 1.75em 2.25em;
    }

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

    .btn-submit {
        width: 60% !important;
    }

    .sign_up,
    .btn-return,
    .btn-return:hover {
        color: #89B9D6;
        width: 60% !important;
    }

    .btn-return:hover {
        background-color: #e5f2ff;
    }
}

.header_wrap {
    justify-content: space-between;
}

.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%);
}

.fa-angle-right {
    color: #89B9D6;
}