/*clearfix
#base div:after,#base ul::after{display:block; content:""; clear:both; visibility:hidden; height:0;}*/

.rank table .visit-date:after,
.rank table .visit-time::after,
.dani-all table .dani-date::after,
.dani-all table .dani-time::after,
#weekly-play ul li [type="submit"]::after{display:block; content:""; clear:both; visibility:hidden; height:0;}

/*
================================================================================================================
テーマ変更
================================================================================================================
*/
table th{line-height:14px;}
p.text{text-align:center; font-size:13px; font-weight:bold; margin-top:20px;}
@media screen and (max-width:480px){p.text{text-align:left; font-size:12px;}}

.dani,
#dani1-title,#dani2-title,#dani3-title,#dani4-title,#dani5-title,
#arena1-title,#arena2-title{
text-shadow:1px 1px 1px rgba(0,0,0,.5) , 2px 2px 5px rgba(0,0,0,.3);
font-family:'Noto Sans JP', sans-serif;
font-weight:700;}

#weekly-select div{background-color:#baef00}
#weekly-play ul li input{font-family:'Noto Sans JP', sans-serif;}

/*
================================================================================================================
行脚王ランキング
================================================================================================================
*/
/*テーブル装飾*/
.rank table{background-color:#fff; margin:20px 0;}
.rank table:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}

.rank table th{color:#fff; background-color:#555; font-size:13px; font-weight:bold; text-align:center; border:1px solid #111;}
.rank table th:first-child{width:8%;}
.rank table th:nth-child(2){width:20%;}
.rank table th:nth-child(3){width:12%;}
.rank table th:nth-child(4){width:10%;}
.rank table th:nth-child(5){width:10%;}
.rank table th:last-child{width:30%;}

.rank table td{height:40px; font-size:12px; border:1px solid #111; text-align:center;}
.rank table .visit-date,.rank table .visit-time{float:left;}
.rank table .visit-date{width:55%; text-align:right;}
.rank table .visit-time{width:45%; text-align:left; padding-left:10px;}

.rank table td:nth-child(2) a{display:block; color:#0066cc; padding:4px 0;}
.rank table td:nth-child(2) a:hover{text-decoration:underline; background-color:#e6ecef;}

.rank table tr.rank_num{background-color:#555; color:#fff;}
.rank table tr.rank_num td{position:relative; font-size:13px; font-weight:bold; height:auto !important;}
.rank table tr.rank_num .visit-top{position:absolute; top:5px; right:10px;}
.rank table tr.rank_num a{display:block; color:#fff; padding:5px 0;}
.rank table tr.rank_num a:hover{background-color:#888; text-decoration:underline;}
.rank table tr.rank_num a:hover > .visit-top{text-decoration:underline;}

@media screen and (max-width:799px){
.rank table th{font-size:11px;}
.rank table td{font-size:11px;}
.rank table .visit-date,.rank table .visit-time{float:none; width:100%;}
.rank table .visit-date{text-align:center;}
.rank table .visit-time{text-align:center; padding-left:0;}}

/*
================================================================================================================
WEEKLY RANKING
================================================================================================================
*/
/*セレクトフォーム*/
#weekly-select{
display:block;
width:100%;
border-radius:10px;
margin:20px auto;}
#weekly-select div{
display:block;
width:100%;
border-radius:10px;
border:1px solid #000;
margin:10px auto;
padding:20px 0;}
#weekly-select select{width:80% !important; margin:0 10%;}

/*プレースタイル/難易度選択ボタン*/
#weekly-play:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}
#weekly-play ul{float:left; width:49%;}
#weekly-play ul li [type="submit"]{
float:left;
width:100%;
color:#fff;
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:14px;
font-weight:bold;
text-align:center;
border-radius:10px;
border:1px solid #000;
text-shadow:0px 1px 3px #000000;
margin:10px 0;
padding:15px 0;}
#weekly-play ul:last-child{margin-left:2%;}

#weekly-play ul li [type="submit"]:hover{cursor:pointer;}

#weekly-play ul:first-child li [type="submit"]:hover,
#weekly-play ul:first-child li.tab-select > [type="submit"]{
background:#0cc0ff;
background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%);
border:1px solid #006ba2;}

#weekly-play ul:last-child li [type="submit"]:hover,
#weekly-play ul:last-child li.tab-select > [type="submit"]{
background:#ffb502;
background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%);
border:1px solid #a87300;}

/*週タイトル*/
#weekly-title{
display:block;
width:100%;
color:#fff;
font-size:20px;
font-weight:bold;
text-align:center;
border-bottom:2px solid #fff;
padding-bottom:10px;
margin:50px auto 20px;}

.weekly-time{
display:block;
width:100%;
color:#fff;
background:rgba(0,0,0,.8);
font-size:13px;
text-align:right;
border-radius:5px;
padding:0 10px;
margin:10px auto 0;}

/*ランキング結果 テーブル装飾*/
.weekly-rank.scroll{margin-top:30px;}
.weekly-rank table th{color:#fff; background:#888; font-size:13px; font-weight:bold; text-align:center; border:1px solid #111; padding:5px;}
.weekly-rank table tr{position:relative; color:#fff; background:#37374d; text-align:center; border:1px solid #111; z-index:-1;}
.weekly-rank table td{color:#fff; font-size:12px; padding:5px; text-align:center; border:1px solid #111;}
.weekly-rank table td:nth-child(2) img{width:80%; max-width:35px; min-width:30px;/* padding:5px 0;*/}

.weekly-rank table td a,
.weekly-rank table td div{color:#fff;}

.weekly-rank table td:nth-child(2){text-align:right !important; border-right:none;}
.weekly-rank table td:nth-child(3){text-align:left !important; border-left:none;}

/*ランキング結果 テーブル装飾 TOPに戻る*/
.weekly-rank table tr.rank_num{background-color:#555; color:#fff; position:relative; z-index:1;}
.weekly-rank table tr.rank_num td{position:relative; font-size:13px; font-weight:bold; height:auto !important; padding:0 !important;}
.weekly-rank table tr.rank_num .visit-top{position:absolute; top:5px; right:10px;}
.weekly-rank table tr.rank_num a{display:block; color:#fff; padding:5px 0;}
.weekly-rank table tr.rank_num a:hover{background-color:#888; text-decoration:underline;}
.weekly-rank table tr.rank_num a:hover > .visit-top{text-decoration:underline;}

@media screen and (max-width:799px){
#weekly-play ul li [type="submit"]{font-size:12px; margin:5px 0;}
#weekly-select div{width:100%; margin:0 auto;}
#weekly-select select{width:90% !important; margin:0 5%!important; font-size:11px;}
#weekly-title{font-size:14px; padding-bottom:5px; margin:30px auto 20px;}
.weekly-rank table th{font-size:11px;}
.weekly-rank table td{font-size:11px;}}

@media screen and (max-width:600px){
.weekly-time{font-size:10px; text-align:center; padding:0;}
.weekly-rank.scroll{overflow-x:scroll; overflow-y:hidden;}
.weekly-rank.scroll table th,
.weekly-rank.scroll table td{white-space:nowrap;}}

.weekly-rank#rate table td{text-align:center !important;}
.weekly-rank#rate table td:nth-child(2){border-right:1px solid #111 !important;}

/*
=============================
予想レーティング変化
=============================
*/
#rating{display:none;}

@media screen and (max-width:600px){
.rating{display:none;}
#rating{display:block; margin:10px auto 0;}}

/*
=============================
トグル
=============================
*/
#toggle-btn{
position:relative;
color:#fff;
background:linear-gradient(to bottom, #00008f 0%,#02023c 100%);
font-size:20px;
font-family:'Noto Sans JP', sans-serif;
letter-spacing:1px;
text-align:center;
font-weight:700;
text-shadow:2px 2px 2px rgba(0,0,0,.6);
border-radius:5px;
border:1px solid #000;
padding:10px 0;
margin:10px auto;}
#toggle-btn:hover{cursor:pointer;}
#toggle-btn::before{position:absolute; top:10px; right:10px; content:"▼"; font-size:15px;}
#toggle-btn.open::before{content:"▲";}
@media screen and (max-width:640px){#toggle-btn{font-size:16px;}}
@media screen and (max-width:480px){#toggle-btn{font-size:14px;}}

#toggle-inner{display:none; font-size:14px; line-height:180%; color:#fff; background:rgba(0,0,0,.8); padding:20px;}
@media screen and (max-width:640px){#toggle-inner{font-size:12px;}}
@media screen and (max-width:480px){#toggle-inner{font-size:11px; padding:10px;}}

/*
================================================================================================================
WEEKLY RANKING（DJ DATA）
================================================================================================================
*/
p.weekly{background:rgba(0,0,0,.8); font-size:12px; border-radius:5px; padding:5px 10px; margin-top:20px;}
@media screen and (max-width:480px){p.weekly{font-size:10px; margin-top:10px;}}

ul.wr-star::after,
ul.wr-head::after,
ul.wr-rank::after{display:none !important;}

/*
=============================
獲得スター
=============================
*/
.wr-head{color:#fff; background:#888; line-height:140%; font-weight:bold; text-align:center; border:1px solid #000; border-bottom:none; padding:5px 0;}
div.wr-head{font-size:15px; margin:40px auto 0;}
ul.wr-star{display:flex; color:#fff; background:#37374d; margin:0 auto 40px; border:1px solid #000;}
ul.wr-star li{width:25%; text-align:center;}
ul.wr-star li + li{border-left:1px solid #000;}
ul.wr-star li p{padding:5px;}
ul.wr-star li p:first-child{display:flex; align-items:center; justify-content:center;}
ul.wr-star li p:first-child span{display:inline-block;}
ul.wr-star li p:first-child span:last-child{padding-top:10px;}
ul.wr-star li p:first-child span:last-child::before{content:" × "; font-size:12px;}
ul.wr-star li p:first-child img{width:90%; max-width:35px;}
ul.wr-star li p:last-child{font-size:12px;}
ul.wr-star li p:first-child br,
ul.wr-star li p:last-child strong br{display:none;}

@media screen and (max-width:640px){
ul.wr-star li p{line-height:140%;}
ul.wr-star li p:first-child{flex-wrap:wrap;}
ul.wr-star li p:first-child span{display:block; width:100%;}
ul.wr-star li p:first-child span:last-child{padding-top:5px;}}
@media screen and (max-width:600px){ul.wr-star li p:last-child{font-size:11px;}}
@media screen and (max-width:480px){
div.wr-head{font-size:13px;}
ul.wr-star{margin:0 auto 20px;}
ul.wr-star li p:first-child br,
ul.wr-star li p:last-child strong br{display:block;}
ul.wr-star li p:first-child img{max-width:25px;}
ul.wr-star li p:last-child strong{font-size:10px;}}
@media screen and (max-width:330px){ul.wr-star li p:last-child{font-size:10px;}}

/*
=============================
ランキング
=============================
*/
ul.wr-head{display:flex; padding:0; font-size:12px; margin:10px auto 0;}
ul.wr-head li:first-child{width:180px;}
ul.wr-head li{display:flex; width:calc((100% - 180px) / 3); align-items:center; justify-content:center; padding:5px 0; }
ul.wr-head li + li{border-left:1px solid #000;}

ul.wr-rank{display:flex; color:#fff; background:#37374d; margin:0 auto;}
ul.wr-rank li{display:flex; font-size:12px; text-align:center; align-items:center; justify-content:center; padding:10px 0;}
ul.wr-rank li + li{border-left:1px solid #000;}
ul.wr-rank li.music{width:180px; padding:10px 5px; flex-wrap:wrap;}
ul.wr-rank li.music > *{width:100%;}
ul.wr-rank li:not(.music){display:flex; width:calc((100% - 180px) / 3);}
ul.wr-rank li:not(.music) p:first-child{padding-right:5px;}
ul.wr-rank li:not(.music) p:first-child img{width:80%; max-width:40px; min-width:30px;}
ul.wr-rank li:not(.music) p:last-child span{display:block; line-height:120%;}
ul.wr-rank li:not(.music) p:last-child img{padding:3px 0;}

ul.wr-rank + ul.wr-rank{border-top:none;}

@media screen and (min-width:601px){ul.wr-rank{border:1px solid #000;}}

@media screen and (max-width:600px){
ul.wr-head{display:none;}
ul.wr-rank{flex-wrap:wrap; margin:10px auto 0;}
ul.wr-rank li.music{width:100%; background-color:#333; /*font-weight:bold;*/ border:1px solid #000;}
ul.wr-rank li:not(.music){position:relative; width:calc(100% / 3); font-size:11px; padding-top:30px; border-bottom:1px solid #000;}
ul.wr-rank li:not(.music):nth-child(4){border-right:1px solid #000;}
ul.wr-rank li:not(.music)::before{display:block; position:absolute; width:100%; top:0; left:0; color:#fff; background-color:#555; font-weight:bold;}
ul.wr-rank li:not(.music):nth-child(2)::before{content:"NORMAL";}
ul.wr-rank li:not(.music):nth-child(3)::before{content:"HYPER";}
ul.wr-rank li:not(.music):nth-child(4)::before{content:"ANOTHER";}

.play-tab:nth-of-type(3) ul.wr-rank li.music,
.play-tab:last-of-type ul.wr-rank li.music{color:#fff; background:#333;}}

@media screen and (max-width:420px){
ul.wr-rank li.music{padding:5px; line-height:140%;}
ul.wr-rank li:not(.music){flex-wrap:wrap;}
ul.wr-rank li:not(.music) p{width:100%;}
ul.wr-rank li:not(.music) p:first-child{padding-right:0; padding-bottom:5px;}
ul.wr-rank li:not(.music) p:first-child img{max-width:35px;}}

/*
================================================================================================================
TOPRANKER RANKING
================================================================================================================
*/
.dj-rank-form{width:100%; background-color:rgba(255,255,255,0.8); padding:20px; margin:30px auto;}
.toprank-select{width:100%; max-width:640px; display:flex; margin:30px auto;}
.toprank-select div{display:block;}
.toprank-select div:first-child{width:24% !important; margin-right:1%;}
.toprank-select div:nth-child(2){width:24% !important; margin-right:1%;}
.toprank-select div:last-child{width:50% !important;}
.toprank-select div select{width:100%;}
.toprank-select div p{font-size:14px; font-weight:bold;}
.dj-rank-form input[type="submit"].submit_btn{max-width:640px !important; margin:0 auto;}

.toprank-result .rank-inner{display:flex; width:100%; background-color:rgba(255,255,255,0.9); flex-wrap:wrap; border:1px solid #666; padding:10px; margin:10px auto;}
.toprank-result .rank-inner span{display:block; width:100% !important; font-size:16px; font-weight:bold; text-align:center; color:#fff; background-color:#777; padding:3px 0; margin:0 auto 10px;}
.toprank-result .rank-inner div{width:20%; color:#333; font-size:14px; text-align:center;}
.toprank-result .rank-inner div p.dif1,
.toprank-result .rank-inner div p.dif2,
.toprank-result .rank-inner div p.dif3,
.toprank-result .rank-inner div p.dif4,
.toprank-result .rank-inner div p.dif5{color:#fff; font-weight:bold;}
.toprank-result .rank-inner div p.dif1{background-color:#89ed00;}
.toprank-result .rank-inner div p.dif2{background-color:#39b1ff;}
.toprank-result .rank-inner div p.dif3{background-color:#ff8009;}
.toprank-result .rank-inner div p.dif4{background-color:#fc2829;}
.toprank-result .rank-inner div p.dif5{background-color:#ec00f6;}
.toprank-result .rank-inner div p:nth-child(2){color:#000; font-weight:bold;}

@media screen and (max-width:800px){
.toprank-select{flex-wrap:wrap;}
.toprank-select div{display:block;}
.toprank-select div:first-child,
.toprank-select div:nth-child(2){width:100% !important; margin-right:0%;}
.toprank-select div:last-child{width:100% !important;}
.toprank-select div p{display:block; text-align:center; font-size:12px; margin-top:10px;}}

@media screen and (max-width:640px){
.toprank-result .title-blue{font-size:14px;}
.toprank-result .rank-inner span,
.toprank-result .rank-inner div{font-size:12px;}}

@media screen and (max-width:500px){
.toprank-result .rank-inner div p.dif1,
.toprank-result .rank-inner div p.dif2,
.toprank-result .rank-inner div p.dif3,
.toprank-result .rank-inner div p.dif4,
.toprank-result .rank-inner div p.dif5{height:40px;}
.toprank-result .rank-inner div p.dif1,
.toprank-result .rank-inner div p.dif2,
.toprank-result .rank-inner div p.dif3,
.toprank-result .rank-inner div p.dif4{line-height:40px;}}

@media screen and (max-width:380px){
.toprank-result .rank-inner div p.dif1,
.toprank-result .rank-inner div p.dif2,
.toprank-result .rank-inner div p.dif3,
.toprank-result .rank-inner div p.dif4,
.toprank-result .rank-inner div p.dif5{height:30px; font-size:10px; padding:3px;}
.toprank-result .rank-inner div p.dif5{line-height:12px !important; text-align:left;}
.toprank-result .rank-inner div p.dif1,
.toprank-result .rank-inner div p.dif2,
.toprank-result .rank-inner div p.dif3,
.toprank-result .rank-inner div p.dif4{line-height:25px !important;}}

@media screen and (max-width:350px){
.toprank-result .rank-inner div p.dif1{line-height:12px !important; text-align:left;}}

/*
================================================================================================================
アリーナキューブ RANKING
================================================================================================================
*/
/*ランキング結果 テーブル装飾*/
#arena{margin-top:30px;}
#arena table th{color:#fff; background-color:#555; font-size:13px; font-weight:bold; text-align:center; border:1px solid #111; padding:5px;}
#arena table tr{position:relative; color:#000; background-color:#fff; text-align:center; border:1px solid #111; z-index:-1;}
#arena table td{font-size:12px; padding:5px; text-align:center;}

#arena table td:nth-child(2) img{width:80%; max-width:40px; min-width:30px;}

#arena table td:first-child,
#arena table td:nth-child(2),
#arena table td:nth-child(3),
#arena table td:nth-child(4),
#arena table td:nth-child(5),
#arena table td:nth-child(6),
#arena table td:nth-child(7){border-right:1px solid #111;}

/*ランキング結果 テーブル装飾 TOPに戻る*/
#arena table tr.rank_num{background-color:#555; color:#fff; position:relative; z-index:1;}
#arena table tr.rank_num td{position:relative; font-size:13px; font-weight:bold; height:auto !important; padding:0 !important;}
#arena table tr.rank_num .visit-top{position:absolute; top:5px; right:10px;}
#arena table tr.rank_num a{display:block; color:#fff; padding:5px 0;}
#arena table tr.rank_num a:hover{background-color:#888; text-decoration:underline;}
#arena table tr.rank_num a:hover > .visit-top{text-decoration:underline;}

@media screen and (max-width:799px){
#arena-play ul li [type="submit"]{font-size:12px; margin:5px 0;}
#arena-select div{width:96%; margin:0 2%;}
#arena-select select{width:90% !important; margin:0 5%!important; font-size:11px;}
#arena table th{font-size:11px;}
#arena table td{font-size:11px;}
#arena-title{font-size:14px; padding-bottom:5px; margin:30px auto 0 auto;}}

@media screen and (max-width:480px){
.arena-time{font-size:11px; text-align:center;}
#arena{overflow-x:scroll; overflow-y:hidden;}
#arena table th,
#arena table td{white-space:nowrap;}}

/*
================================================================================================================
ランキング/アリーナクラス TOPRANKER
================================================================================================================
*/
/*集計時刻・更新時刻*/
#date-count,#date-up{
display:block;
width:100%;
color:#fff;
font-size:12px;
text-align:right;
padding:3px 10px;}
#date-count{background-color:#666;}
#date-up{background-color:#999;}

/*ランキングリスト テーブル装飾*/
.arena-class table th{color:#fff; background-color:#555; font-size:14px; font-weight:bold; text-align:center; border:1px solid #000; padding:3px;}
.arena-class table th br{display:none;}
.arena-class table td{color:#000; background-color:#fff; font-size:13px; text-align:center; border:1px solid #000;}
.arena-class table td:last-child img{width:60px;}
.arena-class table td:nth-child(2) a{display:block; padding:10px;}
.arena-class table td:nth-child(2) a:hover{background-color:#e6ecef;}
.arena-class table td:nth-child(2) a .dj-name{color:#0066cc; font-weight:bold;}
.arena-class table td:nth-child(2) a .dj-id{color:#000;}
.arena-class table td:nth-child(2) a:hover .dj-name{text-decoration:underline;}

.arena-class table tr.rank_num{color:#fff;}
.arena-class table tr.rank_num td{position:relative!important; font-size:13px; background-color:#555; font-weight:bold; height:auto !important;}
.arena-class table tr.rank_num .visit-top{position:absolute; top:5px; right:10px;}
.arena-class table tr.rank_num a{display:block; color:#fff; padding:5px 0;}
.arena-class table tr.rank_num a:hover{background-color:#888; text-decoration:underline;}
.arena-class table tr.rank_num a:hover > .visit-top{text-decoration:underline;}

@media screen and (max-width:640px){
.arena-class table th{font-size:11px; white-space:nowrap; padding:5px;}
.arena-class table th span{display:none;}
.arena-class table th br{display:block;}
.arena-class table td{font-size:11px; padding:0 5px;}
.arena-class table td img{width:60px !important;}}

@media screen and (max-width:480px){
.arena-class{overflow-x:scroll; overflow-y:hidden;}
.arena-class table th,
.arena-class table td{white-space:nowrap;}}

/*アリーナタイトル ベース*/
#arena1-title,#arena2-title{
width:100%;
color:#fff;
text-align:center;
margin:30px auto;
padding:8px 0;}