@charset "utf-8";

header {max-width:800px; width:100%; height:50px; margin:0 auto; padding:0 10px; position:relative;}
header h1 {margin:0 auto; color:#fff; font-size:15px; line-height:50px;}
header .headers {position:absolute; top:0; right:0; display:flex; padding:5px 5px;}
header .headers a {display:block; text-decoration:none; width:120px; height:40px; line-height:40px; font-size:13px; text-align:center; color:#fff; font-weight:600; border-radius:5px; box-shadow:0 0 2px rgba(0,0,0,0.3);}
header .headers .back a {background-color:#f9a930; }
header .headers .download a {background-color:#055d90;margin-left:10px;}
header .headers .logout a {background-color:#1f8914;margin-left:10px;}
header.home {max-width:initial; height:40px;}
header.home h1 {text-align:center;}

#home {max-width:350px; width:100%; margin:20px auto; padding:50px 0; height:350px; background-color:#fff; box-shadow:0 0 3px rgba(0,0,0,0.5);}
#home .text {margin:0px auto 20px auto; width:300px; }
#home .password {margin:20px auto; width:300px;}
#home .submit {margin:40px auto 0 auto; width:200px;}
#home .text input,
#home .password input {padding:10px; width:300px;}
#home .submit input {padding:10px; width:200px;}
#home .error-message {color:#b5323b; font-weight:800;}

#play_list {max-width:800px; width:100%; background-color:#fff; margin:0 auto; padding:30px;}
#play_list .carender_navi {width:100%; display:flex; margin:10px auto; justify-content: center;}
#play_list .carender_navi .l {font-size:18px; padding:0 20px 0 0;}
#play_list .carender_navi .c {font-size:18px;}
#play_list .carender_navi .r {font-size:18px; padding:0 0 0 20px;}
#play_list .carender_navi a {text-decoration:none;font-size:18px; color:#000;}
#play_list .carender {max-width:800px; width:100%; border-collapse: collapse; margin:0 auto;}
#play_list .carender td,
#play_list .carender th {padding:10px; border:1px solid #ccc;}
#play_list .carender td {text-align:center; width:14.2%; height:80px; }
#play_list .carender td .tdin {width:100%; height:100%; position:relative;}
#play_list .carender td .tdin .day {font-size:18px; position:absolute; left:0; top:0;}
#play_list .carender td .tdin .log_count {font-size:18px; position:absolute; right:0; bottom:0; width:100%;}
#play_list .carender td .tdin .log_count a {display:block; text-decoration:none; width:100%; background-color:#047684; color:#fff; font-size:12px;
    height:30px; line-height:30px; box-shadow:0 0 2px rgba(0,0,0,0.3); border-radius:5px;}
#play_list .gotoday {text-align:center; margin:0 auto; padding:10px;}
#play_list .gotoday a {text-decoration:none;font-size:18px; color:#000;}


#log_view {max-width:800px; width:100%; background-color:#fff; margin:0 auto; padding:30px;}
#log_view .log {max-width:800px; width:100%; border-collapse: collapse; margin:20px auto;}
#log_view .log td,
#log_view .log th {padding:10px; border:1px solid #ccc;}
#log_view .log td {text-align:center;}
#log_view .log td.td1 {width:10%;}
#log_view .log td.td2 {width:10%;}
#log_view .log td.td3 {width:30%; word-wrap: break-word;word-break:break-all;white-space:pre-wrap;}
#log_view .log td.td4 {width:10%;}
#log_view .log td.td5 {width:10%;}
#log_view .log td.td6 {width:10%;}
#log_view .log td.td7 {width:10%;}
#log_view .log td.td8 {width:10%;}

#download {max-width:800px; width:100%; background-color:#fff; margin:0 auto; padding:30px;}
#download form {display:block; margin:20px auto;}
#download form .text {width:200px; }
#download form .text input {padding:10px;width:200px; font-size:20px;}
#download form .submit input {margin-top:20px; padding:10px;}
#download form .between {text-align:center; margin:10px 0; width:200px; font-size:18px;}
#download form .error-message {color:#b5323b; font-weight:800;}

#for_game {text-align:center; position:absolute; right:20px; bottom:20px;}
#for_game a {color:#fff; margin-top:10px; text-align:center;}