@charset "Shift-JIS";

table th{line-height:14px;}

/*
================================================================================================================
行脚王ランキング
================================================================================================================
*/
/*テーブル装飾*/
.rank table{background-color:rgba(255,255,255,0.9); 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;}}

/*
================================================================================================================
段位認定コース
================================================================================================================
*/
/*トグルボタン*/
.dani{
display:block;
width:100%;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
margin-top:15px;
text-shadow:1px 1px 2px rgba(0,0,0,0.7);
/*border:1px solid #fff;
border-radius:3px;*/
padding:6px 0;}
.dani:hover{cursor:pointer;}
.dani span:before{content: "▼"; padding-right:10px;}
.dani span:after{content: "▼"; padding-left:10px;}
.dani-open span:before{content: "▲"; padding-right:10px;}
.dani-open span:after{content: "▲"; padding-left:10px;}

/*.dani1{background-color:#888;}
.dani2{background-color:#555;}
.dani3{background-color:#222;}
.dani1:hover{background-color:#999;}
.dani2:hover{background-color:#777;}
.dani3:hover{background-color:#444;}*/

/*段位タイトル 七級～一級*/
.dani1{
background:#02b300;
background:-moz-linear-gradient(top, #02b300 0%, #81f801 100%);
background:-webkit-linear-gradient(top, #02b300 0%,#81f801 100%);
background:linear-gradient(to bottom, #02b300 0%,#81f801 100%);}
.dani1:hover{background:#81f801;}
/*段位タイトル 初段～八段*/
.dani2{
background:#002afb;
background:-moz-linear-gradient(top, #002afb 0%, #088bfb 100%);
background:-webkit-linear-gradient(top, #002afb 0%,#088bfb 100%);
background:linear-gradient(to bottom, #002afb 0%,#088bfb 100%);}
.dani2:hover{background:#088bfb;}
/*段位タイトル 九段～十段*/
.dani3{background:#fa0000;}
.dani3:hover{background:#fa3001;}
/*段位タイトル 中伝*/
.dani4{background:#6800be;}
.dani4:hover{background:#a067cb;}
/*段位タイトル 皆伝*/
.dani5{background:#d58a00;}
.dani5:hover{background:#dbaf00;}

/*テーブル装飾*/
.dani-inner{
display:none;
width:100%;
background-color:#fff;
font-size:14px;
margin:0 auto 0;}

.dani-inner table th,
.dani-inner table td{
height:30px;
vertical-align:middle;
border-right:1px solid #000;
border-bottom:1px solid #000;}

.dani-inner table td{font-size:12px; text-align:left; padding:0 10px;}

.dani-inner table th:last-child,
.dani-inner table td:last-child{border-right:none; text-align:center;}

.dani-inner table th{background-color:#ffc; font-size:13px; text-align:center;}
.dani-inner table th:first-child{width:6%}
.dani-inner table th:nth-child(2){width:17%}
.dani-inner table th:nth-child(3){width:32%}
.dani-inner table th:nth-child(4){width:32%}
.dani-inner table th:last-child{width:13%}

.dani-inner table img{margin:3px 0;}

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

/*
================================================================================================================
段位認定者総覧
================================================================================================================
*/
/*セレクトフォーム*/
#dani-select{
display:block;
width:100%;
margin:10px auto;}

#dani-select form{
display:block;
border-radius:10px;
margin:0 auto;}

#dani-select form div:first-child{margin:0 auto 20px;}
#dani-select form div:last-child{}

#dani-select form div:first-child select{width:100%;}
#dani-select form div:last-child input[type="submit"]{
width:100%;
color:#fff;
background:#434343;
background:-moz-linear-gradient(top, #434343 0%, #060606 100%);
background:-webkit-linear-gradient(top, #434343 0%,#060606 100%);
background:linear-gradient(to bottom, #434343 0%,#060606 100%);
font-size:14px;
font-weight:bold;}
#dani-select .submit_btn:hover{cursor:pointer; text-decoration:underline;}

@media screen and (min-width:641px){
#dani-select form{width:90%; max-width:400px;}}

@media screen and (max-width:640px){
#dani-select form{width:100% !important; max-width:auto !important;}
#dani-select form div:first-child,
#dani-select form div:nth-child(2),
#dani-select form div:last-child{float:none; width:100% !important; margin:5px auto !important;}}

/*段位タイトル ベース*/
#dani1-title,#dani2-title,#dani3-title,#dani4-title,#dani5-title{
width:100%;
color:#fff;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
/*border:1px solid #fff;*/
margin:30px auto;
padding:8px 0;}
/*段位タイトル 七級～一級*/
#dani1-title{background:#81f801;}
/*段位タイトル 初段～八段*/
#dani2-title{background:#088bfb;}
/*段位タイトル 九段～十段*/
#dani3-title{background:#fa3001;}
/*段位タイトル 中伝*/
#dani4-title{background:#a067cb;}
/*段位タイトル 皆伝*/
#dani5-title{background:#dbaf00;}

/*集計時刻・更新時刻*/
#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;}

/*テーブル装飾*/
.dani-all table{background-color:rgba(255,255,255,0.9); margin:20px 0;}
.dani-all table:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}

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

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

.dani-all table td:first-child a{display:block; color:#0066cc; padding:4px 0;}
.dani-all table td:first-child a:hover{text-decoration:underline; background-color:#e6ecef;}

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

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

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

/*
================================================================================================================
DJランク
================================================================================================================
*/
.dj-rank-cat{width:100%; margin:0; padding:0;}
.dj-rank-cat table{width:100%; margin:0; padding:0;}
.dj-rank-cat table th{color:#fff; background-color:#555; font-size:13px; font-weight:bold; text-align:center; border:1px solid #111;}
.dj-rank-cat table tr{color:#000; background-color:#fff;}
.dj-rank-cat table td{font-size:13px; border:1px solid #111;}
.dj-rank-cat table td:first-child{width:15%; text-align:center;}
.dj-rank-cat table td:nth-child(2){width:60%;}
.dj-rank-cat table td:last-child{width:25%; text-align:center;}
.dj-rank-cat table td:last-child img{width:100%; max-width:94px; padding:5px 0;}
.dj-rank-cat table td:first-child a{display:block; color:#0066cc; font-weight:bold; padding:35px 0;}
.dj-rank-cat table td:first-child a:hover{text-decoration:underline; background-color:#e6ecef;}

.dj-rank-cat table td .text,
.dj-rank-cat table td .rank-bar,
.dj-rank-cat table td .rank-bar .bar1,
.dj-rank-cat table td .rank-bar .bar2{width:100%; text-align:center;}

.dj-rank-cat table td .rank-bar{position:relative; height:22px;}
.dj-rank-cat table td .rank-bar .bar1{position:absolute; top:0; height:22px; z-index:1;}
.dj-rank-cat table td .rank-bar .bar2{position:absolute; top:-1px; height:16px; z-index:1;}
.dj-rank-cat table td .rank-pos{
width:150px;
height:12px;
margin:-5px auto 10px auto;}
.dj-rank-cat table td .rank-pos .pos{position:relative;}

.dj-rank-cat table td .none{display:none;}

@media screen and (max-width:640px){
.dj-rank-cat table th,
.dj-rank-cat table td{font-size:11px;}}

@media screen and (max-width:480px){
.dj-rank-cat table td:first-child{width:10%;}
.dj-rank-cat table td:nth-child(2){width:70%; padding:0 10px;}
.dj-rank-cat table td:last-child{width:20%;}
.dj-rank-cat table td .rank-bar .bar2{top:-1px;}}

/*DJランク 詳細テーブル装飾*/
.dj-rank-pt{width:100%; margin:40px auto;}
.dj-rank-pt table th{color:#fff; background-color:#0Cf; font-size:16px; font-weight:bold; text-align:center; border:1px solid #111; padding:5px 0;}
.dj-rank-pt table tr{color:#000; background-color:#fff; text-align:center;}
.dj-rank-pt table td{font-size:28px; font-weight:bold; text-align:center; border:1px solid #111; padding:5px;}
.dj-rank-pt table td img{width:100%; max-width:94px;}

.dj-rank-detail{width:100%; margin:40px auto;}
.dj-rank-detail table th{color:#fff; background-color:#555; font-size:13px; font-weight:bold; text-align:center; border:1px solid #111;}
.dj-rank-detail table tr{color:#000; background-color:#fff; text-align:center;}
.dj-rank-detail table td{font-size:13px; text-align:center; border:1px solid #111; padding:5px;}
.dj-rank-detail table td:first-child{width:5%;}
.dj-rank-detail table td:nth-child(2){width:50%;}
.dj-rank-detail table td:nth-child(3){width:30%;}
.dj-rank-detail table td:last-child{width:15%;}
.dj-rank-detail table td:nth-child(3) img{padding:3px 0;}
.dj-rank-detail table td div{width:100%; text-align:center;}

@media screen and (max-width:480px){
.dj-rank-pt table th{font-size:13px;}
.dj-rank-detail table th{font-size:12px;}
.dj-rank-detail table td{font-size:11px;}}

/*
================================================================================================================
DJランクRANKING
================================================================================================================
*/
/*フォーム*/
/*.dj-rank-form{width:100%; background-color:rgba(255,255,255,0.8); padding:20px; margin:30px auto;}
.dj-rank-form:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}

.dj-rank-form .rank-select{width:100%; margin:30px auto;}
.dj-rank-form .rank-select div{display:block; float:left;}
.dj-rank-form .rank-select div:first-child{width:24% !important; margin-right:1%;}
.dj-rank-form .rank-select div:nth-child(2){width:24% !important; margin-right:1%;}
.dj-rank-form .rank-select div:last-child{width:50% !important;}
.dj-rank-form .rank-select div select{width:100%;}

@media screen and (max-width:640px){
.dj-rank-form{width:100%;}}*/

/*ランク検索結果*/
.dj-rank-result{width:100%; margin:30px auto;}

/*自分のランキング情報*/
.dj-rank-result .self-rank{
width:100%;
background-color:rgba(204,204,204,0.6);
border-radius:10px;
margin:30px auto;
padding:10px;}
.dj-rank-result .self-rank span{
display:block;
width:100%;
color:#000;
font-size:15px;
font-weight:bold;
text-align:center;
margin-bottom:10px;}
/*自分のランキング情報 テーブル装飾*/
.dj-rank-result .self-rank table td{color:#000; background-color:#fff; font-size:13px; text-align:center; border:1px solid #000; padding:3px;} 
.dj-rank-result .self-rank .submit_btn{width:60% !important; margin:20px auto;}

@media screen and (max-width:640px){
.dj-rank-result .self-rank table td{font-size:11px;}
.dj-rank-result .self-rank table td:last-child img{width:60px;}
.dj-rank-result .self-rank .submit_btn{width:100% !important;}}

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

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

@media screen and (max-width:640px){
.dj-rank-result .result-list table th{font-size:11px; white-space:nowrap; padding:5px;}
.dj-rank-result .result-list table th span{display:none;}
.dj-rank-result .result-list table th br{display:block;}
.dj-rank-result .result-list table td{font-size:11px;}
.dj-rank-result .result-list table td:last-child img{width:45px !important;}}

/*
================================================================================================================
WEEKLY RANKING
================================================================================================================
*/
/*テーブル装飾*/
.rank-star{margin-bottom:30px;}
.rank-star table{border:1px solid #000;}
.rank-star table th{color:#fff; background-color:#555; font-size:15px; font-weight:bold; text-align:center; border:1px solid #111; padding:5px;}
.rank-star table tr{color:#000; background-color:#fff;}
.rank-star table tr:nth-child(2) td:nth-child(odd){width:10%; text-align:right;}
.rank-star table tr:nth-child(2) td:nth-child(odd) img{width:90%; max-width:50px; padding:10px 0;}
.rank-star table tr:nth-child(2) td:nth-child(even){width:10%; text-align:left; padding:0 5px; border-right:1px solid #000;}
.rank-star table tr:nth-child(3) td{font-size:12px; text-align:center; padding:5px; border-right:1px solid #000;}
.rank-star table tr:nth-child(3) td strong{font-weight:bold;}

.rank-weekly{margin-top:30px;}
.rank-weekly table th{color:#fff; background-color:#555; font-size:13px; font-weight:bold; text-align:center; border:1px solid #111; padding:5px;}
.rank-weekly table tr{color:#000; background-color:#fff; text-align:center; border:1px solid #111;}
.rank-weekly table td{font-size:12px; padding:5px; text-align:center;}
.rank-weekly table td:first-child{width:18%;}
.rank-weekly table td:nth-child(odd){border-right:1px solid #111;}
.rank-weekly table td:nth-child(even){width:10%; text-align:right;}
.rank-weekly table td:nth-child(even) img{width:80%; max-width:50px; min-width:30px;}

p.weekly{font-size:12px; margin-top:20px;}

@media screen and (max-width:799px){
.rank-star,
.rank-weekly{overflow-x:scroll; overflow-y:hidden;}
.rank-star table th,
.rank-star table td,
.rank-weekly table th,
.rank-weekly table td{white-space:nowrap;}}

@media screen and (max-width:480px){
.rank-star table tr:nth-child(2) td:nth-child(even){font-size:12px;}
.rank-star table tr:nth-child(2) td:nth-child(even) span{display:none;}
.rank-star table tr:nth-child(3) td{font-size:11px;}}

/*
================================================================================================================
WEEKLY RANKING
================================================================================================================
*/
/*セレクトフォーム*/
#weekly-select{
display:block;
width:100%;
/*background-color:rgba(255,255,255,0.8);*/
border-radius:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:20px auto;
/*padding:10px 0;*/}
#weekly-select div{
display:block;
width:100%;
background: #a79a80;
background: -moz-linear-gradient(top, #a79a80 0%, #b9aa8e 27%, #ab9d84 50%, #978b74 52%, #b2a489 100%);
background: -webkit-linear-gradient(top, #a79a80 0%,#b9aa8e 27%,#ab9d84 50%,#978b74 52%,#b2a489 100%);
background: linear-gradient(to bottom, #a79a80 0%,#b9aa8e 27%,#ab9d84 50%,#978b74 52%,#b2a489 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:rgba(51,51,51,0.7);
background:-moz-linear-gradient(top, rgba(51,51,51,0.7) 0%, rgba(0,0,0,0.8) 100%);
background:-webkit-linear-gradient(top, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
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:-moz-linear-gradient(top, #0cc0ff 0%, #65fcfe 100%);
background:-webkit-linear-gradient(top, #0cc0ff 0%,#65fcfe 100%);
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:-moz-linear-gradient(top, #ffb502 0%, #ffe858 100%);
background:-webkit-linear-gradient(top, #ffb502 0%,#ffe858 100%);
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 0 auto;}
.weekly-time{
display:block;
width:100%;
color:#000;
font-size:13px;
text-align:right;
margin:10px auto 0 auto;}

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

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

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

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

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

/*
================================================================================================================
EXPERT RANKING
================================================================================================================
*/
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;}}


/*
================================================================================================================
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;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
/*border:1px solid #fff;*/
margin:30px auto;
padding:8px 0;}