/*
================================================================================================================
レベル別色
================================================================================================================
*/
li.master p{color:#ff4800 !important;}/*オレンジ*/
li.resident p{color:#cf007f !important;}/*紫*/

/*
================================================================================================================
タブ切替
================================================================================================================
*/
.rank-tab{display:flex; width:100%; justify-content:space-between; margin:0 auto; font-family:'Noto Sans JP', sans-serif; margin:20px auto 0;}
.rank-tab > p{
display:block;
position:relative;
width:calc((100% / 7) - 10px);
background-color:#fff;
text-align:center;
padding: 10px 0;
transition:all 0.3s ease;}
.rank-tab > p:hover,
.rank-tab > p.select{color:#fff !important; cursor:pointer;}

@media screen and (max-width:700px){
.rank-tab{flex-wrap:wrap;}
.rank-tab > p{width:calc((100% / 3) - 10px); margin:5px;}
.rank-tab > p:first-child{width:100% !important;}}

.rank-tab > p:first-child{color:#777; border:2px solid #ccc;}
.rank-tab > p:nth-child(2){color:#fe4cde; border:2px solid #ffcaf5;}
.rank-tab > p:nth-child(3){color:#80e501; border:2px solid #d9f7b3;}
.rank-tab > p:nth-child(4){color:#ff6e07; border:2px solid #ffd4b5;}
.rank-tab > p:nth-child(5){color:#6508f9; border:2px solid #d1b5fd;}
.rank-tab > p:nth-child(6){color:#ff0604; border:2px solid #ffb5b4;}
.rank-tab > p:nth-child(7){color:#079aff; border:2px solid #b5e1ff;}

.rank-tab > p:first-child:hover,
.rank-tab > p:first-child.select{background-color:#777; border:2px solid #777;}
.rank-tab > p:nth-child(2):hover,
.rank-tab > p:nth-child(2).select{background-color:#fe4cde; border:2px solid #fe4cde;}
.rank-tab > p:nth-child(3):hover,
.rank-tab > p:nth-child(3).select{background-color:#80e501; border:2px solid #80e501;}
.rank-tab > p:nth-child(4):hover,
.rank-tab > p:nth-child(4).select{background-color:#ff6e07; border:2px solid #ff6e07;}
.rank-tab > p:nth-child(5):hover,
.rank-tab > p:nth-child(5).select{background-color:#6508f9; border:2px solid #6508f9;}
.rank-tab > p:nth-child(6):hover,
.rank-tab > p:nth-child(6).select{background-color:#ff0604; border:2px solid #ff0604;}
.rank-tab > p:nth-child(7):hover,
.rank-tab > p:nth-child(7).select{background-color:#079aff; border:2px solid #079aff;}

/*
================================================================================================================
見出し
================================================================================================================
*/
.rank-inner .title{text-align:center; font-weight:700; font-family:'Noto Sans JP', sans-serif; padding:10px; margin:20px auto;}

.theme00 .title{background-color:#777;}
.theme01 .title{background-color:#fe4cde;}
.theme02 .title{background-color:#80e501;}
.theme03 .title{background-color:#ff6e07;}
.theme04 .title{background-color:#6508f9;}
.theme05 .title{background-color:#ff0604;}
.theme06 .title{background-color:#079aff;}

/*
================================================================================================================
ランキング表
================================================================================================================
*/
.rank-inner > ul{display:flex; text-align:center; border:1px solid; border-bottom:none;}
.rank-inner > ul > li{position:relative; padding:5px 0;}
.rank-inner > ul li + li{border-left:1px solid;}
.rank-inner > ul li:first-child{width:40px !important;}
.rank-inner > ul li{width:calc((100% - 40px) / 10);}
/*.rank-inner:not(.theme00) > ul li{width:calc((100% - 40px) / 4);}*/

/*見出し表*/
.rank-inner ul.head{font-size:12px; font-weight:bold;}

/*メイン表*/
.rank-inner ul.rank{font-size:13px;}
.rank-inner ul.rank:last-child{border-bottom:1px solid;}
.rank-inner ul.rank li:nth-child(3){font-size:11px;}
.rank-inner ul.rank li:first-child,ul.rank li:nth-child(2){font-weight:bold;}
.rank-inner ul.rank li:not(:first-child){background:rgba(255,255,255,.5);}

/*色*/
.theme00 ul{color:#333; background-color:#ccc;}
.theme01 ul{color:#5c1a34; background-color:#ffcaf5;}
.theme02 ul{color:#1b3a1a; background-color:#d9f7b3;}
.theme03 ul{color:#5e1a1a; background-color:#ffd4b5;}
.theme04 ul{color:#1a1a53; background-color:#d1b5fd;}
.theme05 ul{color:#5e1a1a; background-color:#ffb5b4;}
.theme06 ul{color:#1a1c5e; background-color:#b5e1ff;}

/*選択中*/
.theme00 ul.rank li:nth-child(5),
.theme01 ul.rank li:nth-child(6),
.theme02 ul.rank li:nth-child(7),
.theme03 ul.rank li:nth-child(8),
.theme04 ul.rank li:nth-child(9),
.theme05 ul.rank li:nth-child(10),
.theme06 ul.rank li:nth-child(11){font-weight:bold;}

@media screen and (max-width:370px){
.rank-inner ul.head{font-size:10px;}
.rank-inner ul.rank{font-size:12px;}}

/*
================================================================================================================
総合
================================================================================================================
*/
@media screen and (max-width:800px){
.rank-inner > ul > li{padding:5px;}

.rank-inner ul.head{display:none;}
.rank-inner ul.head li:nth-child(2),
.rank-inner ul.head li:nth-child(3),
.rank-inner ul.head li:nth-child(4){width:calc((100% - 40px) / 3) !important;}
.rank-inner ul.head li:nth-child(5),
.rank-inner ul.head li:nth-child(6),
.rank-inner ul.head li:nth-child(7),
.rank-inner ul.head li:nth-child(8),
.rank-inner ul.head li:nth-child(9),
.rank-inner ul.head li:nth-child(10),
.rank-inner ul.head li:nth-child(11){display:none;}

.rank-inner ul.rank{flex-wrap:wrap;}
.rank-inner ul.rank li{border-bottom:1px solid;}
.rank-inner ul.rank li + li{border-left:none;}
.rank-inner ul.rank li:nth-child(9),
.rank-inner ul.rank li:nth-child(10),
.rank-inner ul.rank li:nth-child(11){border-bottom:none;}
.rank-inner ul.rank li:nth-child(7),
.rank-inner ul.rank li:nth-child(10){border-left:1px solid; border-right:1px solid;}

.rank-inner ul.rank li:nth-child(2),
.rank-inner ul.rank li:nth-child(3),
.rank-inner ul.rank li:nth-child(4){width:calc((100% - 40px) / 3) !important;}
.rank-inner ul.rank li:nth-child(5){width:100%;}
.rank-inner ul.rank li{width:calc(100% / 3);}

.rank-inner ul.rank li::before{
display:block;
content:attr(data-name);
position:absolute;
width:60px;
top:calc(50% - 10px);
left:5px;
color:#fff;
background:#888;
text-align:center;
font-size:10px;}
.rank-inner ul.rank li:nth-child(6),
.rank-inner ul.rank li:nth-child(7),
.rank-inner ul.rank li:nth-child(8),
.rank-inner ul.rank li:nth-child(9),
.rank-inner ul.rank li:nth-child(10),
.rank-inner ul.rank li:nth-child(11){text-align:right;}

/*色*/
.theme00 ul.rank li:nth-child(2),
.theme00 ul.rank li:nth-child(3),
.theme00 ul.rank li:nth-child(4){background-color:#ccc;}
.theme01 ul.rank li:nth-child(2),
.theme01 ul.rank li:nth-child(3),
.theme01 ul.rank li:nth-child(4){background-color:#ffcaf5;}
.theme02 ul.rank li:nth-child(2),
.theme02 ul.rank li:nth-child(3),
.theme02 ul.rank li:nth-child(4){background-color:#d9f7b3;}
.theme03 ul.rank li:nth-child(2),
.theme03 ul.rank li:nth-child(3),
.theme03 ul.rank li:nth-child(4){background-color:#ffd4b5;}
.theme04 ul.rank li:nth-child(2),
.theme04 ul.rank li:nth-child(3),
.theme04 ul.rank li:nth-child(4){background-color:#d1b5fd;}
.theme05 ul.rank li:nth-child(2),
.theme05 ul.rank li:nth-child(3),
.theme05 ul.rank li:nth-child(4){background-color:#ffb5b4;}
.theme06 ul.rank li:nth-child(2),
.theme06 ul.rank li:nth-child(3),
.theme06 ul.rank li:nth-child(4){background-color:#b5e1ff;}

.theme00 ul.rank li::before{color:#333; background-color:#ccc;}
.theme01 ul.rank li::before{color:#5c1a34; background-color:#ffcaf5;}
.theme02 ul.rank li::before{color:#1b3a1a; background-color:#d9f7b3;}
.theme03 ul.rank li::before{color:#5e1a1a; background-color:#ffd4b5;}
.theme04 ul.rank li::before{color:#1a1a53; background-color:#d1b5fd;}
.theme05 ul.rank li::before{color:#5e1a1a; background-color:#ffb5b4;}
.theme06 ul.rank li::before{color:#1a1c5e; background-color:#b5e1ff;}}

@media screen and (max-width:400px){
.rank-inner ul.rank li{width:50%;}
.rank-inner ul.rank li:nth-child(7){border-left:1px solid; border-right:none;}
.rank-inner ul.rank li:nth-child(9){border-bottom:1px solid; border-left:1px solid;}
.rank-inner ul.rank li:nth-child(10){border-left:none; border-right:none;}
.rank-inner ul.rank li:nth-child(11){border-left:1px solid;}}