@charset "utf-8";
 
#page-auth {
    width: 1000px;
    margin: 0 auto 100px;
}
#page-auth h1.pagetitle {
    text-align: left;
	margin: 30px auto;
	padding: 0;
    font-size: 30px;
    border-bottom: none;
    text-align: center;
	font-weight: bold;
}
#page-auth .box {
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#page-auth .login {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
#page-auth .login a {
    width: 35%;
    border: 2px solid #222;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    position: relative;
    margin: 20px 10px 48px;
    line-height: initial;
}
#page-auth .login a:hover {
    background-color: #e9e9e9;
}
#page-auth .login img {
    float: left;
    width: 24px;
}
#page-auth .login-input {
    padding: 10px 50px;
    font-size: 16px;
    width: 100%;
}
#page-auth .login-input p {
    padding: 5px 100px;
}
#page-auth .login-input input {
    width: 100%;
    padding: 10px;
}
#page-auth .input-save {
    text-align: center;
    padding: 30px;
    font-size: 16px;
}
#page-auth .input-save input {
    margin-right: 10px;
}
#page-auth .login-btn {
    background: #222222;
    color: #fff;
    padding: 15px 0 !important;
    width: 40% !important;
    font-weight: bold;
    margin-bottom: 20px;
}
#page-auth .login-btn-red {
    background: #C72A2A;
    color: #fff;
    padding: 15px 0 !important;
    width: 40% !important;
    font-weight: bold;
    display: inline-block;
    margin: 20px 0 50px;
    border: none;
}
#page-auth .login-btn:hover {
    background: #C72A2A;
}
#page-auth .login-btn-red:hover {
    background: #E54545;
}
#page-auth .login-link {
    text-align: center;
    text-decoration: none !important;
}
#page-auth .forgot-input {
    padding: 10px 50px;
}
#page-auth .forgot-input p {
    padding: 5px 100px;
}
#page-auth .forgot-input input {
    width: 100%;
    padding: 10px;
}
#page-auth .back-login {
    display: block;
}

@media screen and (max-width:767px){
 
    #page-auth {
        width: 100%;
        margin: 0 auto 100px;
    }
	#page-auth h1.pagetitle {
		font-size:  20px;
	}
    #page-auth .login {
        margin-bottom: 30px;
    }
    #page-auth .login a {
        width: 90%;
        margin: 10px;
        display: inline-block;
        padding: 15px;
    }
    #page-auth .login-input {
        padding: 0;
        width: 90%;
        margin: 20px auto 0;
    }
    #page-auth .login-input p {
        padding: 10px 0;
    }
    #page-auth .input-save {
        text-align: left;
        padding: 20px;
        margin-bottom: 20px;
    }
    #page-auth .login-btn,
    #page-auth .login-btn-red {
        padding: 15px 0 !important;
        width: 90% !important;
    }
    #page-auth .login-btn-red {
        margin-bottom: 70px;
    }
    #page-auth .login-link p {
        padding: 20px 0;
    }
    #page-auth .box {
        border-bottom: 1px solid #707070;
    }
    #page-auth .forgot-input {
        padding: 0;
        width: 90%;
        margin: 20px auto 0;
    }
    #page-auth .forgot-input p {
        padding: 10px 0;
    }
}