@charset "utf-8";
body {font-family: 'Noto Sans JP', '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノゴシック Pro', 'Hiragino Kaku Gothic ProN', 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 18px; color: #333; line-height: 1.75;}
img {display: block;}
@media screen and (max-width:768px) {
    body {font-size: 16px;}
}
/* login */
#login {width: 90%; height: 100vh; box-sizing: border-box; margin: 0 auto; position: relative;}
#login .yellow-green {position: absolute; left: 0; bottom: 0; border-top: 45vh solid transparent; border-right: 45vw solid transparent; border-bottom: 45vh solid #C2D84E; border-left: 45vw solid #C2D84E;}
#login .green {position: absolute; right: 0; top: 0; border-top: 45vh solid #157A48; border-right: 45vw solid #157A48; border-bottom: 45vh solid transparent; border-left: 45vw solid transparent;}
#login .box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#login .box img {margin: 0 auto 30px;}
#login .box .form {width: 90vw; max-width: 500px; background-color: #fff; border: 1px solid #707070; border-radius: 30px; padding: 20px 40px;}
#login .box .form h2 {font-size: 22px; font-weight: normal; text-align: center; margin: 0 auto 30px;}
#login .box .form .login-error {color: #B70000; text-align: center;}
#login .box .form .login-contact {font-size: 15px; text-align: center;}
/* loginform */
#loginform .login-username, #loginform .login-password {display: flex; flex-direction: column; margin: 0 auto 20px;} 
#loginform .login-username input, #loginform .login-password input {border-radius: 5px; border: 1px solid #707070; padding: 5px;}
#loginform .login-remember {text-align: center; margin: 0 auto 20px;}
#loginform .login-submit {text-align: center;}
#loginform .login-submit input {display: inline-block; text-align: center; padding: 5px 20px; border-radius: 5px; border: 1px solid #707070; margin: 0 auto 20px; transition: .5s;}
#loginform .login-submit input:hover {background-color: #707070; color: #fff;}