@charset "UTF-8";

* {
 margin:0;
 padding:0;
}
body {
 text-align:center;
 font-family:'Noto Sans JP';
}
#header {
 position:relative;
 width:800px;
 margin:10px auto 0 auto;
 text-align:left;
}
#title {
 display:inline-block;
 vertical-align:top;
 height:50px;
}
#subtitle {
 display:inline-block;
 vertical-align:middle;
 margin-left:20px;
 font-size:22pt;
 font-weight:bold;
}
#admin {
 position:absolute;
 top:15px;right:15px;
}
#admin a {
 font-size:12pt;
 text-decoration:none;
 color:white;
 background:#0489B1;
 border-radius:5px;
 padding:5px 20px;
 border:solid 2px #0489B1;
}
#upper {
 width:900px;
 margin:20px auto 0 auto;
 text-align:center;
}
#operator {
 display:inline-block;
 width:120px;
}
#operator img { width:100%; }
#lower {
 width:820px;
 margin:0 auto;
}
#announce {
 display:inline-block;
 vertical-align:top;
 width:690px;
}
#announce div {
 margin:10px 0 0 20px;
 padding:20px;
 background:#F8E0F7;
 border-radius:15px;
 text-align:left;
}
.level_container {
 display:inline-block;
 text-align:center;
}
.level {
 position:relative;
 display:inline-block;
 width:180px;
 margin:25px 10px 0 10px;
 padding:10px 0;
 background:gray;
 font-size:16pt;
 cursor:pointer;
 border-radius:15px;
 border-bottom:solid 4px gray;
}
.level span {
 font-size:70pt;
 font-weight:bold;
 font-family:'Rubik';
}
#level1 { background:#F5A9E1; } #level1:hover { background:#F6CEEC;top:4px;border:none; }
#level2 { background:#58ACFA; } #level2:hover { background:#81BEF7;top:4px;border:none; }
#level3 { background:#01DF01; } #level3:hover { background:#11EF11;top:4px;border:none; }
#level4 { background:#FFBF00; } #level4:hover { background:#F7D358;top:4px;border:none; }
#level5 { background:#B45F04; } #level5:hover { background:#DF7401;top:4px;border:none; }
#level6 { background:#8904B1; } #level6:hover { background:#A901DB;top:4px;border:none; }
#level7 { background:#DF013A; } #level7:hover { background:#FF0040;top:4px;border:none; }
#level8 { background:#000000;color:white;} #level8:hover { background:#2E2E2E;top:4px;border:none; }
#back {
 margin:40px auto;
}
#back a {
 position:relative;
 font-size:14pt;
 text-decoration:none;
 color:white;
 background:#222222;
 border-radius:5px;
 padding:10px 30px 10px 40px;
}
#back a:hover {
 background:#444444;
}
#back a::before {
 content:"";
 position:absolute;
 top:18px;
 left:20px;
 width:10px;
 height:10px;
 border-bottom:solid 2px;
 border-left:solid 2px;
 transform:rotate(45deg);
}