div.logo {
    width:100%;
    text-align:left;
    margin:20px auto;
    padding-left:150px;
}
div.logo img {
    width:220px;
}
h1 {
    font-size:1.2em;
    width:500px;
    box-sizing: border-box;
    padding:5px;
    border-radius: 3px;
    background:#0b64eafc;
    text-align:center;
    margin:60px auto 10px auto;
    color:#fff;
}

div#login_area {
    box-sizing: border-box;
    padding:20px;
    width:500px;
    margin:20px auto;
    text-align:center;
    border:1px solid #dfdfdf;
    background:#fff;
    border-radius: 3px;
}
input {
    padding:5px;
    height:30px;
    width:200px;
}
.login_btn {
    margin-top:30px;
    box-sizing: border-box;
    background:#0b64eafc;
    color:#fff;
    width:200px;
    border-radius: 5px;
    height:50px;
}
.error_message {
    margin-top:20px;
    font-weight:bold;
    color:crimson;
    display:none;
}
.login_message {
    margin-top:20px;
    width:100%;
    text-align:center;
}
/** smart phone **/
@media print, screen and (max-width: 760px) {
    h1 {
        margin-top:10px;
        width:calc(100vw - 20px);
        margin-left:10px;
        margin-right:10px;
    }
    div#login_area {
        width:calc(100vw - 20px);
        border:none;
    }
    .error_message {
        width:calc(100vw - 40px);
        margin-left:auto;
        margin-right:auto;
    }
    .login_message {
        width:calc(100vw - 40px);
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }
    div.logo {
        width:100%;
        box-sizing:border-box;
        text-align:left;
        padding-left:10px;
    }
}