#ranking_title{
	position: relative;
	margin: 0 auto;
	width:100%;
	/*background: linear-gradient(to right, #6a4797, #e95151);*/
	color:white;
	background-color: #000;
	border: 2px solid gold;
	border-radius:30px;
	    margin: 0 12px;
}
#ranking_title img{
	display: block;
	width:55%;
	margin: 0 auto;
}
#ranking_waku{
    position: relative;
    width: 100%;
    margin: 0 auto;
        margin-left:2px;
    padding-top:10px;
    padding-left: 0px;
    height: 380px;
    overflow: hidden;
    background-image:url(../images/bg_ranking.png);
    /*background-size: contain;*/ /* 画像全体が収まるように調整 */
    background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
#ranking {
    position: relative;
    margin: 0 auto;
    /*margin-top: 14px;*/
    width: 100%;
    height: 350px;
    overflow: hidden;
    overflow: scroll;
    /*background-image: linear-gradient(57deg, rgba(247, 93, 139, 1), rgba(254, 220, 64, 1));*/
}
#ranking::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#ranking::-webkit-scrollbar-track {
  background: ##fef1f9e0;
}
.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, #FFD700, #FFC107, #FFAA00);
  border-image-slice: 1;
}

#ranking #rankingtable {
    position: absolute;
    top: 0.9rem;
    left: 0.5rem;
    width:96%;
    font-size:0.8rem;
}

#ranking #rankingtable caption {
    display: block;
    position: absolute;
    top: -1rem;
    /*left: 142px;*/
    width: 100%;
    text-align: right;
    font-weight: bold;
    font-size: 0.6rem;
    color: #ccc;
}

#ranking #rankingtable tr {
    white-space: nowrap
}

#ranking #rankingtable thead {
    display: block;
    height: 22px;
    color: #fff;
    background: #000;
    font-size:0.7rem;
}

#ranking #rankingtable tbody {
    display: block;
    overflow: hidden;
    height: 1500px;
    background: #fff;
    border-bottom: 1px solid #cccccc;
    width:100%;
}
#ranking #rankingtable tbody tr{
    width:100%;
}        
#ranking #rankingtable tbody tr:nth-child(2n) td {
    background-color: #ffffcc;
}

#ranking #rankingtable tbody tr:hover {
    opacity: 0.75;
    cursor: pointer;
}

#ranking #rankingtable tbody * {
    cursor: pointer;
}

#ranking #rankingtable th.rank,#ranking #rankingtable td.rank {
    /*width: 41px;*/
    width:12%;
    text-align: center;
}
#ranking #rankingtable td.rank {
    width:12%;
}
#ranking #rankingtable th.racer {
    /*width: 160px;*/
    text-align: center;
    width:47%;
    font-size:0.7rem;
}

#ranking #rankingtable td.racer {
    /*width: 161px;*/
    /*width:50%;*/
    width:48%;
    text-align: left;
    padding-left: 1px
}

#ranking #rankingtable td.racer span {
    padding: 0 0px;
    vertical-align: middle;
    color:#666;
    font-size:0.7rem;
}

#ranking #rankingtable td.racer img {
    vertical-align: middle;
    /*width: auto*/;
    width: 20%;
}

#ranking #rankingtable th.shibu,#ranking #rankingtable td.shibu {
    /*width: 38px;*/
    width:9%;
    font-size:0.6rem;
    text-align: center;
}

#ranking #rankingtable td.shibu {
    color:#666;
    width:10%;
    font-size:0.6rem;
}
#ranking #rankingtable th.kyu,#ranking #rankingtable td.kyu {
    /*width: 34px;*/
    width:9%;
    font-size:0.6rem;
    text-align: center;
}
#ranking #rankingtable td.kyu {
    color:#666;
    width:9%;
    font-size:0.6rem;
}

#ranking #rankingtable th.money,#ranking #rankingtable td.money {
    /*width: 110px*/
        /*width:24%;*/
    width:29%;
}

#ranking #rankingtable td.money {
    text-align: right;
    padding-right: 1px;
    width:28%;
    color: #999;
    font-size:0.6rem;
}

#ranking #rankingtable td.money span.money {
    font-weight: bold;
    color: #d90200;
}

#ranking #rankingtable th {
    /*display: inline-block;*/
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
    line-height: 20px;
    height: 20px;
    font-weight: bold
}

#ranking #rankingtable td {
    display: inline-block;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
    line-height: 24px;
    height: 23px
}

#ranking #rankingtable td.rank {
    white-space: nowrap
}

#ranking #rankingtable td.rank span.rank {
    display: inline-block;
    width: 0.6rem;
    height: 16px;
    line-height: 16px;
    color: #fff;
    background-color: #a9a9a9;
}

#ranking #rankingtable td.rank span.rank.rank_a {
    color: #fff;
    background-color: #d51f06;
    font-size:0.6rem;
}

#ranking #rankingtable td.rank span.rank.rank_b {
    color: #fff;
    background-color: #df8530;
    font-size:0.6rem;
}

#ranking #rankingtable td.rank span.rank.rank_c {
    color: #fff;
    background-color: #48a6db;
    font-size:0.6rem;
}

#ranking #rankingtable td.rank span.ud {
    display: inline-block;
    width: 0.6rem;
    /*height: 30px;*/
    height:  1.6rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-indent: -9999px
}

#ranking #rankingtable td.rank span.ud.ranku {
    background-image: url(../images/ranking/arrow_up.png);
}

#ranking #rankingtable td.rank span.ud.ranks {
    background-image: url(../images/ranking/arrow_stay.png);
}

#ranking #rankingtable td.rank span.ud.rankd {
    background-image: url(../images/ranking/arrow_down.png);
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用）*/    
  #ranking_title{
	margin: 0 auto;
  }
  #ranking #rankingtable {
	width:90%;
	margin: 0 auto;
        font-size:0.9rem;
  }
  #ranking #rankingtable tbody {
    height: 1700px;
  }
  #ranking #rankingtable th.rank,#ranking #rankingtable td.rank {
    width: 36px;
    text-align: center;
  }

  #ranking #rankingtable th.racer {
    width: 145px;
    text-align: center;
  }

  #ranking #rankingtable td.racer {
    width: 145px;
    text-align: left;
    padding-left: 8px;
  }

  #ranking #rankingtable td.racer span {
    padding: 0 2px;
    vertical-align: middle;
    color:#666;
    font-size:0.7rem;
  }

  #ranking #rankingtable td.racer img {
    vertical-align: middle;
  }

  #ranking #rankingtable th.shibu,#ranking #rankingtable td.shibu {
    width: 30px;
    text-align: center;
  }

  #ranking #rankingtable td.shibu {
        color:#666;
        font-size:0.8rem;
  }
  #ranking #rankingtable th.kyu,#ranking #rankingtable td.kyu {
    width: 30px;
    text-align: center;
  }
  #ranking #rankingtable td.kyu {
    color:#666;
    font-size:0.8rem;
  }

  #ranking #rankingtable th.money,#ranking #rankingtable td.money {
    width: 99px;
    font-size:0.8rem;
  }

  #ranking #rankingtable th.money {
    text-align: center;
    border-right-color: #000;
    width: 99px;
  }

  #ranking #rankingtable td.money {
    text-align: right;
    padding-right: 1px;
  }

  #ranking #rankingtable td.money span.money {
    font-weight: bold;
    color: #d90200;
    font-size:0.8rem;
  }

  #ranking #rankingtable th {
    display: inline-block;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
    line-height: 20px;
    height: 20px;
    font-weight: bold;
    font-size:0.7rem;
  }

  #ranking #rankingtable td {
    display: inline-block;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
    line-height: 26px;
    height: 26px;
  }

  #ranking #rankingtable td.rank {
    white-space: nowrap;
  }


  #ranking #rankingtable td.rank span.rank {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background-color: #a9a9a9;
    font-size:0.5rem;
  }

  #ranking #rankingtable td.rank span.rank.rank_a {
        font-size:0.5rem;
  }

  #ranking #rankingtable td.rank span.rank.rank_b {
        font-size:0.5rem;
  }

  #ranking #rankingtable td.rank span.rank.rank_c {
        font-size:0.5rem;
  }

  #ranking #rankingtable td.rank span.ud {
    display: inline-block;
    width: 16px;
    height: 39px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-indent: -9999px;
  }

}