body{
margin-bottom:0;
}
div#scroll{
overflow-x:auto;
overflow-y:auto;
max-height:calc(100dvh - 160px);
}
/*テーブル*/
table#student{
border-collapse:separate;
border-spacing:0;
border-right:solid #333 2px;
background-color:#FEFEFE;
position:relative;
}
table#student thead th, table#student tfoot th, table#student tbody td{
padding:2px 1px;
vertical-align:middle;
border-right:solid #999 1px;
}
table#student thead th:nth-child(3), table#student tfoot th:nth-child(3), table#student tbody td:nth-child(5){
border-right:solid #999 2px;
}
table#student thead th{
background-color:#FFE9D4;
border-top:solid #333 2px;
cursor:pointer;
position:sticky;
top:0;
left:0;
z-index:1000;
}
table#student tfoot th{
background-color:#FFE9D4;
border-bottom:solid #333 2px;
top:0;
left:0;
z-index:1000;
}
table#student thead th:nth-child(n+4), table#student tfoot th:nth-child(n+4){
line-height:1.1;
font-size:13px;
padding:2px 0;
}
table#student tbody td{
border-bottom:dotted black 1px;
}
table#student thead th{
border-bottom:solid #333 2px;
}
table#student tfoot th{
border-top:solid #333 2px;
}
table#student tbody tr:nth-child(odd) td{
background:#FEFEFE;
}
table#student tbody tr:nth-child(even) td{
background:#EEE;
}
table#student thead th:first-child{
border-left:solid #333 2px;
border-right:solid #333 2px;
position:sticky;
top:0;
left:0;
z-index:1001;
}
table#student tfoot th:first-child{
border-left:solid #333 2px;
border-right:solid #333 2px;
position:sticky;
left:0;
z-index:11;
}
table#student thead th:last-child, table#student tfoot th:last-child {
border-right:none;
}
table#student tr td:last-child{
border-right:none;
}
table#student tr:last-child td{
border-bottom:none;
}
table#student thead th.er, table#student tfoot th.er{
background-color:#FFD1CC;
}
table#student tbody tr:nth-child(odd) td.er{
background-color:#FEF9F6;
}
table#student tbody tr:nth-child(even) td.er{
background-color:#EEE9E6;
}
table#student span.armor{
display:inline-block;
width:36px;
padding:1px 0;
font-size:12px;
text-align:center;
color:#FFF;
border-radius:3px;
}
table#student .colemp, table#student tr.rowemp td{
background-image:linear-gradient(#FFFFCA80, #FFFFCA80)!important;
}
/*役割*/
table#student td.role{
width:16px;
padding:0 0 0 3px;
border-left:solid #333 2px;
border-right:none;
position:sticky;
top:0;
left:0;
z-index:1;
}
table#student td.role div{
border-radius:6px 0 0 6px;
font-size:14px;
text-align:center;
color:#FFF;
width:16px;
height:20px;
cursor:default;
}
table#student td.role div.st{
background-color:#B23332;
}
table#student td.role div.sp{
background-color:#176EBC;
}
/*アイコン*/
table#student td.icon{
padding:0;
width:37px;
height:24px;
border-right:none;
position:sticky;
top:0;
left:21px;
}
table#student td.icon div{
width:33px;
height:22px;
background-position:center;
background-repeat:no-repeat;
border-width:1px 2px;
border-style:solid;
border-radius:4px;
}
/*名前*/
table#student td.name{
border-right:solid #333 2px;
padding-left:3px;
font-weight:bold;
position:sticky;
top:0;
left:58px;
z-index:1;
cursor:pointer;
}
table#student td.name span.cos{
font-size:14px;
display:inline-block;
line-height:1;
transform:translateY(-1px);
margin-left:1px;
}
/*使用率*/
table#student td.use{
min-width:48px;
font-size:14px;
text-align:right;
}
/*パーセンテージ*/
.p100{color:oklch(100% 0.4 0);}
.p95{color:oklch(96% 0.39 10);}
.p90{color:oklch(92% 0.38 20);}
.p85{color:oklch(88% 0.37 30);}
.p80{color:oklch(84% 0.36 40);}
.p75{color:oklch(80% 0.35 50);}
.p70{color:oklch(76% 0.34 60);}
.p65{color:oklch(72% 0.33 70);}
.p60{color:oklch(68% 0.32 80);}
.p55{color:oklch(64% 0.31 90);}
.p50{color:oklch(60% 0.3 100);}
.p45{color:oklch(56% 0.29 110);}
.p40{color:oklch(52% 0.28 120);}
.p35{color:oklch(48% 0.27 130);}
.p30{color:oklch(44% 0.26 140);}
.p25{color:oklch(40% 0.25 150);}
.p20{color:oklch(36% 0.24 160);}
.p15{color:oklch(32% 0.23 170);}
.p10{color:oklch(28% 0.22 180);}
.p5{color:oklch(38% 0.05 190);}
.p1{color:oklch(48% 0.01 200);}
.p0{color:oklch(68% 0 0);}
.p00{
color:oklch(68% 0 0);
text-align:center!important;
}
/*メニュー*/
div#menu div.menu {
position:fixed;
min-width:870px;
left:0;
top:-230px;
width:100%;
height:230px;
padding-left:8px;
transition:top 0.2s ease;
z-index:10003;
}
#menu-toggle:checked~label.menu-icon,
#menu-toggle:checked~label.menu-bar {
top:230px;
}