@charset "utf-8";


#area_tabs ul {
    display: flex;
    margin-bottom: 3rem !important;
}

#area_tabs ul li {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.75rem !important;
    margin: 0 8px 20px 0 !important;
    background: rgba(125 155 210 / 0.50);
    border: 1px solid rgba(220 220 220 / 1.00);
    border-radius: 3px;
}

#area_tabs ul li:hover {
    color: rgba(255 255 255 / 1.00) !important;
    background: rgba(20 60 155 / 1.00);
}

#area_tabs ul li.active {
    color: rgba(255 255 255 / 1.00) !important;
    background: rgba(20 60 155 / 1.00);
}

#page2,
#page3 {
    display: none;
}



.area_list {
    overflow: scroll;
}



table.list{
    width:auto;
}
table.list caption{
    font-size:15px;
}
table.list th,
table.list td{
    padding:1px 5px;
    font-weight:normal;
    border-right:solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    white-space:nowrap;
    vertical-align:middle;
    text-align:center;
}
table.list th{
    border-left:solid 1px #ddd;
    border-top:solid 1px #ddd;
    background:#f5f5f5;
}
table.list th.grade{
    width:56px;
}
table.list th.subject{
    width:420px;
    text-align:left;
}
table.list td{
    border-top:solid 1px #eee;
}
table.list td ol{
    padding:5px 0;
    width:420px;
}
table.list td ol li{
    width:400px;
    text-align:left;
    white-space:normal;
    word-break:break-all;
    padding:1px 0 1px 20px;
    border-bottom:dashed 1px #ccc;
}
table.list td ol li.num1{
    background:url(../img/num1.gif) 1px 2px no-repeat;
}
table.list td ol li.num2{
    background:url(../img/num2.gif) 1px 2px no-repeat;
}
table.list td ol li.num3{
    background:url(../img/num3.gif) 1px 2px no-repeat;
}
table.list td ol li.num4{
    background:url(../img/num4.gif) 1px 2px no-repeat;
}
table.list td ol li.num5{
    background:url(../img/num5.gif) 1px 2px no-repeat;
}
table.list td ol li.num6{
    background:url(../img/num6.gif) 1px 2px no-repeat;
}
table.list td ol li.num7{
    background:url(../img/num7.gif) 1px 2px no-repeat;
}
table.list td ol li.num8{
    background:url(../img/num8.gif) 1px 2px no-repeat;
}
table.list td ol li.num9{
    background:url(../img/num9.gif) 1px 2px no-repeat;
}
table.list td ol li.num10{
    background:url(../img/num10.gif) 0 2px no-repeat;
}
table.list td ol li.num11{
    background:url(../img/num11.gif) 0 2px no-repeat;
}
table.list td ol li.num12{
    background:url(../img/num12.gif) 0 2px no-repeat;
}
table.list td ol li.num13{
    background:url(../img/num13.gif) 0 2px no-repeat;
}
table.list td ol li.num14{
    background:url(../img/num14.gif) 0 2px no-repeat;
}
table.list td ol li.num15{
    background:url(../img/num15.gif) 0 2px no-repeat;
}
table.list td ol li.num16{
    background:url(../img/num16.gif) 0 2px no-repeat;
}

tfoot * {
    text-align: left;
}

@media all and (min-width: 960px) {
    tfoot li,
    tfoot p {
        width: 900px !important;
        white-space: wrap;
    }
}

@media all and (max-width: 780px) {
    tfoot li,
    tfoot p {
        width: 800px !important;
        white-space: wrap;
    }
}