/* ランキングモーダル背景 */
.rankModal{
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

/* 中央ボックス */
.rankModalContent{
/* background:white; */
background-color:black;
/* width:700px; */
width:590px;
/* height:590px; 途中で途切れるためいったんナシ*/
/* max-width:90%; */
max-width:85%;
/* max-height:70%; 途中で途切れるためいったんナシ*/
/* margin:60px auto; */
margin:15px auto;
/* padding:20px; */
border-radius:10px;
position:relative;
}


/* 閉じる */
.rankClose{
position:absolute;
right:10px;
top:10px;
font-size:18px;
}

/* ボタン */
.rankButtons{
margin-bottom:10px;
}

.rankButtons button{
margin-right:6px;
}

/* スクロール部分 */
.rankTableWrap{
max-height:400px;
overflow-y:auto;
border:1px solid #ccc;
}

/* 表 */
table{
border-collapse:collapse;
width:100%;
}

th,td{
border:1px solid #ccc;
padding:6px;
text-align:center;
}

th{
background:#eee;
position:sticky;
top:0;
}

/* ===== ドラクエ風ランキング ===== */

.rankModalContent{
background:#000;
border:4px solid white;
box-shadow:0 0 10px #fff;
}

.rankModalContent h2{
color:white;
text-align:center;
margin-bottom:10px;
font-size:22px;
}

.rankButtons button{
background:#0033cc;
color:white;
border:3px solid white;
padding:6px 12px;
font-weight:bold;
}

.rankButtons button:hover{
background:#0066ff;
cursor:pointer;
}

.rankTableWrap{
border:3px solid white;
background:black;
}

.rankTableWrap table{
color:white;
font-size:16px;
}

.rankTableWrap th{
background:#111;
color:#00ffff;
font-weight:bold;
}

.rankTableWrap tr:nth-child(even){
background:#111;
}

.rankNo{
font-weight:bold;
}

.rankName{
text-align:left;
padding-left:10px;
}

.rankValue{
color:#ffff00;
font-weight:bold;
}




/*===============================
パソコン画面用
=================================*/
@media print, screen and (min-width: 820px) {

  /* 中央ボックス */
.rankModalContent{
width:590px;
height:700px;
max-width:70%;
max-height:79%;
margin:35px auto;
}

}