/*
================================================================================================================
ランキング
================================================================================================================
*/
#update{
width:96%;
max-width:980px;
font-size:82.25%;
text-align:right;
margin:10px auto 0;}

/*HIT CHART用*/
.category{
width:96%;
max-width:980px;
color:#2c2f16;
background-color:#d3fb6b;
font-weight:800;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
font-size:20px;
text-align:center;
padding:10px;
margin:0 auto;}
#hitchart.category:before{content:"ALL";}
#floor.category:before{content:"FLOOR";}
#exit.category:before{content:"EXIT TUNES";}
#toho.category:before{content:"東方アレンジ";}

@media screen and (max-width:640px){
.category{font-size:14px; padding:5px;}}

/*
=========================
ランキング見出し
=========================
*/
#table_col{
display:flex;
width:96%;
max-width:980px;
color:#fff;
font-weight:bold;
text-align:center;
margin:10px auto;}
#table_col > div{background-color:#000; padding:5px 0;}
#table_col > div + div{border-left:solid 1px #fff;}

/*HIT CHART用*/
#hitchart-rank #table_col .rank{width:150px;}
#hitchart-rank #table_col .title{width:calc(100% - 400px);}
#hitchart-rank #table_col .artist{width:250px;}

/*
=========================
ランキング表
=========================
*/
#rank_waku{
width:96%;
max-width:980px;
color:#000;
background-color:#e5e5e5;
border:2px solid #19292b;
padding:10px 0;
margin:10px auto;}

ul#rank_tbl li{
display:flex;
font-size:13px;
text-align:left;
align-items:center;
padding:10px 0;}
ul#rank_tbl li + li{border-top:1px solid #19292b;}
ul#rank_tbl li a{color:#19292b; font-weight:bold;}
ul#rank_tbl li a:hover{color:#ef952e; text-decoration:underline;}

/*HIT CHART用*/
#hitchart-rank ul#rank_tbl .inner{display:flex; font-weight:bold; align-items:center;}
#hitchart-rank ul#rank_tbl .inner:first-child{width:150px; text-align:center;}
#hitchart-rank ul#rank_tbl .inner .rank{width:100px; font-size:18px; padding:0 10px;}
#hitchart-rank ul#rank_tbl .inner .rank img{width:100%; max-width:78px;}
#hitchart-rank ul#rank_tbl .inner .arrow{width:50px;}
#hitchart-rank ul#rank_tbl .inner .arrow img{width:90%; max-width:50px;}
#hitchart-rank ul#rank_tbl .inner:nth-child(2){width:calc(100% - 150px);}
#hitchart-rank ul#rank_tbl .inner .jacket{width:100%; max-width:221px;}
#hitchart-rank ul#rank_tbl .inner .title{width:calc(100% - 427px); color:#ff5a01; padding:0 10px;}
#hitchart-rank ul#rank_tbl .inner .artist{width:250px; padding:0 10px;}
#hitchart-rank ul#rank_tbl span{display:none;}

#hitchart-rank #rank_tbl {
  .rank_1st, .rank_2nd, .rank_3rd, .arrow {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 30px;

    &.rank_1st {background-image: url("../images/rank/rank01.png");}
    &.rank_2nd {background-image: url("../images/rank/rank02.png");}
    &.rank_3rd {background-image: url("../images/rank/rank03.png");}
    &.up   {background-image: url("/game/sdvx/v/p/images/p/hitchart/up.png");}
    &.stay {background-image: url("/game/sdvx/v/p/images/p/hitchart/stay.png");}
    &.down {background-image: url("/game/sdvx/v/p/images/p/hitchart/down.png");}
  }
}

@media screen and (max-width:980px){
#table_col{display:none;}
ul#rank_tbl li{align-items:flex-start;}
#hitchart-rank ul#rank_tbl .inner:nth-child(2){flex-wrap:wrap;}
#hitchart-rank ul#rank_tbl .inner:nth-child(2) > div{width:100% !important; padding:0 10px !important;}
#hitchart-rank ul#rank_tbl .inner .jacket{margin-bottom:10px;}
#hitchart-rank ul#rank_tbl .inner .title{font-size:14px;}
#hitchart-rank ul#rank_tbl .inner .artist{font-size:13px;}
/*#hitchart-rank ul#rank_tbl span{display:block; font-weight:bold; color:#ff5a01;}*/}

@media screen and (max-width:640px){
#hitchart-rank ul#rank_tbl .inner:first-child{width:120px;}
#hitchart-rank ul#rank_tbl .inner .rank{width:80px; /*padding:0 0 0 10px;*/ padding:0;}
#hitchart-rank ul#rank_tbl .inner .arrow{width:40px;}
#hitchart-rank ul#rank_tbl .inner:nth-child(2){width:calc(100% - 120px);}
.rank_1st,.rank_2nd,.rank_3rd{background-size:auto 80% !important;}}

@media screen and (max-width:420px){
ul#rank_tbl li{font-size:12px;}
#hitchart-rank ul#rank_tbl .inner:first-child{width:70px; flex-wrap:wrap;}
#hitchart-rank ul#rank_tbl .inner:first-child > div{width:100% !important; /*padding:0 0 10px 10px !important;*/ margin-bottom:10px;}
#hitchart-rank ul#rank_tbl .inner .arrow img{width:90%; max-width:40px;}
#hitchart-rank ul#rank_tbl .inner:nth-child(2){width:calc(100% - 70px);}
#hitchart-rank ul#rank_tbl .inner .jacket img{width:100%; max-width:177px;}}