* {
    margin: 0;
    padding: 0;
    font-family: "メイリオ";
}

h1 {
    font-size: 1em;
    text-align: right;
    padding-right: 10px;
}

h2, h3 {
    font-size: 1em;
    margin: 10px 0;
}

html, body {
    background: #fff;
    font-family: "メイリオ";
    width: 100%;
    height: 100%;
    /* 縦の高さを100% */
}



th a:link {
    color: #fff;
}

th a:visited {
    color: #fff;
}

th a:hover {
    color: #fff;
}

th a:active {
    color: #fff;
}

tr.even:hover {
    background: #ff0;
}

td.hi {
    font-weight: 700;
    background: #ff0;
}

.hpb-cnt-tb3 {
    background-color: #333333;
    border: 0px solid #cccccc;
}

.hpb-cnt-tb-cell5 {
    background-color: #eeeeee;
    color: #333333;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    width: 70px;
    height: 70px;
    text-align: center;
}

.hpb-cnt-tb-cell6 {
    background-color: #cccccc;
    color: #333333;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    width: 70px;
    height: 70px;
    text-align: center;
}

.linext {
    float: left;
    margin-left: 3px;
    padding-top: 5px;
    padding-left: 0;
    padding-right: 5px;
    padding-bottom: 5px;
    font-size: 1em;
}

.navi2:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

tr.ttl {
    background-color: #ccc;
    color: #000;
    font-weight: 700;
}

td.ttl {
    background-color: #EDF3FE;
    color: #000;
    font-weight: 700;
}

.graph {
    text-align: center;
    margin: 10px;
}

.graph2 img {
    width: 616px;
    height: 313px;
}

.container {
    max-width: 95%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    /* フッター部の配置用に定義 */
    min-height: 100%;
}

.main {
    margin: 10px;
    padding-bottom: 90px;
    /* フッターの高さの分余白を取る */
}

th.rankwidth1 {
    width: 10%;
}

th.rankwidth2 {
    width: 30%;
}

th.rankwidth3 {
    width: 40%;
}

th.rankwidth4 {
    width: 20%;
}

.footer-bk {
    background-color: #175e4c;
    /* 背景色(黒) */
    width: 100%;
    /* 横の幅を100% */
    height: 60px;
    /* 縦の幅を120px */
    position: absolute;
    /* 絶対位置指定することを定義 */
    bottom: 0;
    /* 絶対位置指定(左0px,下0px) */
    padding: 10px 0;
    /* 上下に余白を取る */
}

.twitter-timeline {
    width: 100%!important;
    margin: 10px;
}

.bar {
    background-color: #175e4c;
    width: 100%;
}

a {
    text-decoration: none;
}

.toggleMenu {
    display: none;
    background: #175e4c;
    padding: 10px 15px;
    color: #fff;
}

.nav {
    list-style: none;
    *zoom: 1;
    background: #175e4c;
}

    .nav:before, .nav:after {
        content: " ";
        display: table;
    }

    .nav:after {
        clear: both;
    }

    .nav ul {
        list-style: none;
        width: 15em;
    }

    .nav a {
        padding: 10px 15px;
        color: #fff;
    }

    .nav li {
        position: relative;
    }

    .nav > li {
        float: left;
        border-top: 1px solid #104336;
    }

        .nav > li > .parent {
            background-image: url(images/downArrow.png);
            background-repeat: no-repeat;
            background-position: right;
        }

        .nav > li > a {
            display: block;
        }

    .nav li ul {
        position: absolute;
        left: -9999px;
    }

    .nav > li.hover > ul {
        left: 0;
    }

    .nav li li.hover ul {
        left: 100%;
        top: 0;
    }

    .nav li li a {
        display: block;
        background: #1d7a62;
        position: relative;
        z-index: 100;
        border-top: 1px solid #175e4c;
    }

    .nav li li li a {
        background: #249578;
        z-index: 200;
        border-top: 1px solid #1d7a62;
    }

table {
    background: #fff;
    /*-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;*/
    margin: 0 0 18px;
    border-bottom: 1px #666 solid;
    width: 100%;
}

    table th {
        font-weight: 700;
        background: #175e4c;
        color: #fff;
        font-size: 1em;
        padding: 5px;
    }

table, td, th {
    border-right: 1px #666 solid;
    border-left: 1px #666 solid;
    border-collapse: collapse;
}

    table td {
        font-size: 1em;
    }

    table tbody tr.even, table tbody tr.alt {
        background: #f9f9f9;
    }

    table tbody tr:nth-child(even) {
        background: #f9f9f9;
    }

    table tbody tr td {
        color: #333;
        padding: 5px;
        vertical-align: top;
        text-align: center;
    }

.toptable table tr:first-child {
    border-bottom: 1px #666 solid;
}

.toptable table {
   
    margin: 10px 0 0;
    width: 50%;
    float: left;
    height: 250px;
     
}
.toptable {

text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;

}
.child2 {
display:inline-block;
}

.toptable:after, .jok:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

.jok table {
    width: 33%;
    float: left;
}

.graph .st {
    display: block;
    position: relative;
    background: #ff7f50;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .sd {
    display: block;
    position: relative;
    background: #2e8b57;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .kb {
    display: block;
    position: relative;
    background: #87cefa;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .cb {
    display: block;
    position: relative;
    background: #66cdaa;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .sht {
    display: block;
    position: relative;
    background: #ff8c00;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .fk {
    display: block;
    position: relative;
    background: #ff0;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .skr {
    display: block;
    position: relative;
    background: #e9967a;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .cu {
    display: block;
    position: relative;
    background: #eee8aa;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .es {
    display: block;
    position: relative;
    background: #5f9ea0;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

.graph .oth {
    display: block;
    position: relative;
    background: #eee8aa;
    text-align: center;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 10px;
}

    .graph .st span, .graph .cb span, .graph .kb span, .graph .sht span, .graph .fk span, .graph .skr span, .graph .cu span, .graph .oth span, .graph .sd span {
        position: absolute;
        left: 1em;
    }

.senpatulist {
    text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;

}
.child {

    display:inline-block;

}
.senpatulist ul {
list-style-type:none;

}
.senpatulist li {
     display:block;
    float:left;
    width:30%;
    border:1px solid #666;
    margin:3px;


}
.senpatulist dt {
    background: #175e4c;
        color: #fff;
        font-size: 1em;
    padding:5px;


}
.senpatulist dt {
    background: #175e4c;
        color: #fff;
        font-size: 1em;
    padding:5px;
    font-weight:bold;


}

.senpatulist dd {
     padding:2px;


}

.senpatulist:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

@media screen and (max-width: 600px) {

    .senpatulist li {
       width:100%;
    border:1px solid #666;
    margin:2px;


}
    .senpatulist dd {
     padding:2px;

}

    .toptable table {
        width: 100%;
    }

    .graph2 img {
        width: 100%;
        height: 302px;
    }

    .jok table {
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .jok table {
        width: 100%;
        float: left;
    }
}

@media screen and (max-width: 800px) {

    .jok table {
        width: 100%;
        float: left;
    }

    .graph img {
        width: 75%;
    }


    .toptable table {
    }

    .active {
        display: block;
    }

    .nav > li {
        float: none;
    }

        .nav > li > .parent {
            background-position: 95% 50%;
        }

    .nav li li .parent {
        background-image: url(images/downArrow.png);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }

    .nav ul {
        display: block;
        width: 100%;
    }

    .nav > li.hover > ul, .nav li li.hover ul {
        position: static;
    }
}

@media screen and (max-width:1520px) {
    table.responsive {
        margin-bottom: 0;
    }

    .pinned {
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
        width: 15%;
        overflow: hidden;
        overflow-x: scroll;
        border-right: 1px solid #ccc;
        border-left: 0 solid #ccc;
    }

        .pinned table {
            border-right: none;
            border-left: none;
            width: 100%;
        }

            .pinned table th, .pinned table td {
                white-space: nowrap;
            }

        .pinned td:last-child {
            border-bottom: 0;
        }





    div.scrollable {
        overflow: scroll;
        overflow-y: hidden;
    }

    table.responsive td, table.responsive th {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
    }
}