@charset "UTF-8";

/*-----------------------------------

File name:			login.css

-----------------------------------*/

/*-------------------------
ベース、背景
-------------------------*/
html,
body{height:100%;}
body{background:#4E51B1/*#4E51B1*/;}
#container{position:relative;min-height:100%;}
#contents{width:980px;/*height:auto;*/min-height:100%;margin:0 auto;text-align:left;}
#footer{position:absolute;bottom:0;width:100%;}
#footer p{font-size:13px;line-height:40px;font-weight:700;color:#4E51B1;width:960px;height:40px;background:#FFF;margin:0 auto;padding:0 10px;text-align:left;}

#contents .main2{text-align:center;padding:0 0 60px 0;}
#contents .main2 h1{padding:30px 0 0;}
#contents .main2 .comm1{padding:30px 0 0;font-size:17px;line-height:25px;color:#FFF;}
#contents .main2 .comm1.error{padding:80px 0 0;position:relative;color:#F00;}
#contents .main2 .comm1.error::after{content:"!";display:block;width:30px;height:30px;font-size:22px;line-height:30px;text-align:center;color:#FFF;font-weight:700;background:#F00;padding:3px;border-radius:20px;position:absolute;top:20px;left:50%;margin:0 0 0 -20px;border:2px solid #FFF;}
#contents .main2 .comm1 a{line-height:1;color:#000;padding:20px 40px;text-decoration:none;vertical-align:top;display:inline-block;background:#FFF;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.4);transition:0.3s;}
#contents .main2 .comm1 a:hover{color:#4E51B1;box-shadow:none;transform:translateY(2px);}

#contents .main2 .login{width:780px;height:230px;margin:30px auto 0 auto;background:rgba(255,255,255,0.7);box-shadow:1px 1px 0 rgba(0,0,0,0.4) inset;}
#contents .main2 .login form{display:block;background-image:url(../images/op_log_ic.png);background-repeat:no-repeat;background-position:30px 30px;background-size:80px 80px;}
#contents .main2 .login ul{margin:0 30px 0 130px;padding:20px 0 0;text-align:left;}
#contents .main2 .login li{width:100%;}

#contents .main2 .login .tx{height:40px;margin:10px 0 0;overflow:hidden;}
#contents .main2 .login .tx span{font-size:18px;line-height:40px;height:40px;display:block;}
#contents .main2 .login .tx input{font-size:16px;line-height:36px;height:36px;width:348px;padding:0 5px;float:right;border:2px solid #AAA;border-radius:5px;transition:0.3s;ime-mode:disabled;}
#contents .main2 .login .tx input:hover{border:2px solid #666699;}
#contents .main2 .login .tx input:focus{background-color:#E5F8FF;border:2px solid #666699;}

#contents .main2 .login .ch{margin:10px 0 0;}
#contents .main2 .login .ch label{cursor:pointer;}
#contents .main2 .login .ch input{position:absolute;opacity:0;}
#contents .main2 .login .ch label span{vertical-align:middle;display:inline-block;font-size:16px;line-height:30px;height:30px;background:rgba(255,255,255,0.3);padding:3px 10px 3px 30px;border-radius:10px;border:2px solid #FFF;position:relative;transition:0.3s;}
#contents .main2 .login .ch label span::before,
#contents .main2 .login .ch label span::after{content:"";display:block;position:absolute;top:50%;transition:0.3s;}
#contents .main2 .login .ch label span::before{width:10px;height:10px;border-radius:5px;background:#AAA;left:10px;margin:-5px 0 0;}
#contents .main2 .login .ch label span::after{width:10px;height:15px;border-bottom:7px solid #666699;border-right:7px solid #666699;transform:rotate(45deg);left:7px;margin:-13px 0 0;opacity:0;}
#contents .main2 .login .ch label:hover span{ border-color:#666699;}
#contents .main2 .login .ch label :checked + span{background:#FFF;}
#contents .main2 .login .ch label :checked + span::after{opacity:1;}

#contents .main2 .login .btn{text-align:right;margin:-30px 0 0;}
#contents .main2 .login .btn a{width:300px;height:60px;margin:0 0 0 auto;overflow:hidden;display:block;text-align:left;font-size:20px;line-height:30px;padding:15px;color:#666699;text-decoration:none;box-sizing:border-box;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.4);background:#F6D066;position:relative;transition:0.3s;}
#contents .main2 .login .btn a::before,
#contents .main2 .login .btn a::after{display:block;content:"";position:absolute;width:0;height:0;border:7px solid transparent;border-left-color:#666699;border-width:10px 20px;top:50%;margin:-7px 0 0;transition:0.3s;}
#contents .main2 .login .btn a::before{right:25px;}
#contents .main2 .login .btn a::after{right:0;}
#contents .main2 .login .btn a:hover{box-shadow:none;transform:translateY(2px);}