@charset "utf-8";

html{
    width:100vw;
    height:100vh;
    overflow: hidden;
}

body{
    scroll: no;
    height:100vh;
    overflow: hidden;
    font-family: メイリオ, 'Lucida Grande', 'ヒラギノ角ゴ ProN W3', Meiryo, sans-serif;
    font-size: 5vmax;
    line-height: 1.5;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}


/* ===  Header Styles === */
#header{
   height: 6vmax;
   background-color: rgb(146,208,80);
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
}

.header{
    margin: 6vh 1vh 0 0;
    max-height: 8vh;
    font-size: 8vmin;
    font-weight: bold;
    text-align: center;
    color: #434443;
    text-shadow: 1px 1px 8px white;
}
/* ===  Login === */
.content{
    align-items: center;
    text-align: center;
    padding: 0;
    height: 100vmin;
    width: 100vmin;
    left: 0;
    right: 0;
    margin: auto;
}

.login-form-tab__title{
    margin: 0 auto;
    max-height: 10vh;
    font-size: 8vmin;
    font-weight: bold;
    text-align: center;
    color: #2a421a;
    text-shadow: 1px 1px 8px white;
}
.content__login-form-frame{
    position: relative;
    color: #FFFFFF;
}

#loginFormImage{
    position: relative;
    width: 100vmin;
    height: 100vmin;
    max-width: 75vh;
    max-height: 75vh;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

.login-form-frame__login-form{
    position: absolute;
    width: 100vmin;
    height: 60vmin;
    max-width: 75vh;
    max-height: 45vh;
    top: 30vmin;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 4vmin;
    text-align:center;
    color: #FFFFFF;
    font-weight: 700;
}
.login-form-frame__login-form .submit {
    margin: 2.8em auto;
}

.login-form__label{
    font-size: 4vmin;
    width: 24vmin;
    position: relative;
    display: inline-block;
    color: #504d4d;
    text-align: center;
}

.login-form__username, .login-form__password{
    font-size: 4vmin;
    width: 36vmin;
    margin: 0;
    position: relative;
    text-indent: 5%;
    border-radius: 2vmin;
    -moz-border-radius : 2vmin;
    -webkit-border-radius: 2vmin;
}


.login-form__password{
    margin-top: 2vh;
}

.login-form__submit-btn{
    position: relative;
    bottom: 27%;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    padding: 1vmin;
    font-size: 4vmin;
    font-weight: bold;
    background-color: #f7b455;
    color: black;
    width: 24vmin;
    height: 12vmin;
    max-width: 18vh;
    max-height: 9vh;
    text-align: -webkit-center;
    border-style: outset;
    border-color: #f7b455;
    box-shadow: 0 1vmin 1vmin 0 rgba(0,0,0,0.2), 0 1vmin 1vmin 0 rgba(0,0,0,0.19);
    z-index: 2;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],input[type="password"],textarea{
   -webkit-appearance: none;
   -webkit-border-radius: 0;
    border-radius: 10px;
    -moz-border-radius :10px;
    -webkit-border-radius: 10px;
}


#login_qr {
    display: inline-block;
}
#loginQRCodeImage{
    display: inline-block;
    width: 25vmin;
    height: 25vmin;
    max-width: 110px;
    max-height: 110px;
}
.login_img {
    position: fixed;
    right: 5vmin;
    bottom: 11vmin;
}
#loginSishou{
    display: inline-block;
    max-width: 110px;
    max-height: 110px;
    width: 25vmin;
    height: 25vmin;
    background-color: #ffffff;
}
#loginSishou img {
    max-width: 100px;
    max-height: 100px;
    width: 23vmin;
    height: 23vmin;
    padding: 1vmin 1vmin;
}

.footer{
    position: fixed;
    bottom: 1vh;
    width:100vw;
    font-size: 5vmin;
    text-align:center;
    color: #504d4d;
}

.error {
    color: #ff5555;
}