﻿
body {
    font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
    background: #fff;
    background-image:url(../img/bg_body.png);
}
#loginHeader{
    max-width:420px;
    min-width:340px;
    margin:10px auto 0 auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
#imgSiteTitle{
    width:200px;
    margin:6px 0 0 6px;
}
#imgLoginString{
    margin-right:30px;
    transform-origin:40% 50%;
    animation:loginrotate 2s ease-in-out;
}
@keyframes loginrotate{
    0%{
        transform:rotate(0deg) scale(0.6);
    }
    50%{
        transform:rotate(420deg) scale(1.3);
    }
    100%{
        transform:rotate(360deg) scale(1);
    }
}
main {
    width: 320px;
    margin: 80px auto 0 auto;
    background: #eff;
    box-shadow: 4px 4px 6px #333;
    position:relative;
    animation:mainrotate 1s ease-in-out;
}
@keyframes mainrotate{
    0%{
        transform: rotateY(0deg) scale(0);
        top:-180px;
        left:160px;
    }
    100% {
        transform: rotateY(720deg) scale(0.6);
        top:0px;
        left:0px;
    }
}
h1 {
    width: 100%;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    background: #36c;
    color: #fff;
    text-shadow: 4px 4px 6px #aaa;
}
.tr {
    display: flex;
}
.tr input{
    width:180px;
    font-size:15px;
}
.label {
    display: block;
    width: 100px;
    padding-top: 4px;
    font-size: 15px;
    text-align:center;
    flex-grow:0;
    flex-shrink:0;
}
#trTokId{
    padding:16px 0 12px 0;
    border-bottom:solid 1px #f80;
    background:#eee;
}
/*
#dfTokId{
    text-transform:uppercase;
}*/
#trPasswd {
    padding-top: 8px;
    padding-bottom: 10px;
    background: #9ce;
    border-bottom:solid 1px #f80;
}
#trLogin{
    padding: 3px 0;
}
#pbLogin{
    font-size:14px;
    color:#060;
    line-height:1.1;
    
}
#pErrMsg{
    color:#f00;
    font-size:14px;
    box-sizing:border-box;
    width:240px;
    min-height:50px;
    padding-top:8px;
    padding-left:8px;
    line-height:1.1;
}
footer {
    font-size: 16px;
    color: #009;
    line-height: 26px;
    background: #ee6;
    text-align: center;
    border-top: solid 1px #900;
}
#pStartStat{
    font-size:14px;
    color:#f00;
    width:280px;
    margin:10px auto 0 auto;
}
#aForgotPasswd{
    font-size:14px;
    display:block;
    width:200px;
    margin:30px auto 0 auto;
    padding:4px;
}
#pLoginMsg{
    width:80%;
    max-width:480px;
    margin:40px auto 0 auto;
    padding:16px;
    font-size:14px;
    line-height:1.4;
    color:#a00;
    background:#ffe;
    border-radius:8px;
}