@charset "Shift-JIS";

/*
================================================================================================================
RIVAL
================================================================================================================
*/
#rival{}

/*共通*/
#rival li .name{background-repeat:no-repeat; background-position:left 10px center;}
#rival li:not(.search) .name{background-color:#001e26; border:1px solid; font-weight:bold; box-shadow:0 6px 8px rgba(0,0,0,.5) , inset 0 0 5px #acffea;}
#rival li .name a{color:#bbc4c7; border-bottom:1px solid; transition:all .2s ease;}
#rival li .name a:hover{color:#fff; filter:drop-shadow(0 0 3px #acffea);}

#rival .search{color:#fff; background:linear-gradient(135deg, rgba(119,178,194,.6) 0%,rgba(83,134,148,.4) 100%);}
#rival .search .name{background-image:url(../../images/rival/rival_none.png);}
#rival .search a{
display:block;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
background-image:url(../../images/rival/rival_search.png);
filter:drop-shadow(0 0 2px rgba(31,252,255,1)) drop-shadow(0 0 3px rgba(31,252,255,.8)) drop-shadow(0 10px 10px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(31,252,255,.8));
}

/*
========================
PC
========================
*/
@media screen and (min-width:901px){
#rival > .inner > #pc {display:flex; width:100%; justify-content:space-between;}
#rival > .inner > #sp{display:none;}}

#rival > .inner > #pc > li{
display:block;
position:relative;
width:calc(100% / 3 - 10px);
height:320px;
text-aligh:center;
box-shadow:0 0 5px rgba(0,0,0,.5) , 0 10px 10px rgba(0,0,0,.5);}

#rival > .inner > #pc li .name{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
color:#bbc4c7;
font-size:20px;
line-height:70px;
padding-left:100px;}

#rival > .inner > #pc li .data{
width:100%;
height:calc(100% - 70px);
color:#eaffff;
font-size:13px;
margin:70px auto 0;}
#rival > .inner > #pc li:not(.search) .data{
background:linear-gradient(135deg, rgba(119,178,194,.6) 0%,rgba(83,134,148,.4) 100%);
padding:10px 20px 10px 10px;
overflow:auto;}

/*
========================
SP
========================
*/
@media screen and (max-width:900px){
#rival > .inner > #pc{display:none;}
#rival > .inner > #sp{display:block;}}

#rival > .inner > #sp{filter:drop-shadow(0 10px 3px rgba(0,0,0,.5));}
#rival > .inner > #sp ul#tabMenu{display:flex; width:100%; justify-content:space-between;}
#rival > .inner > #sp ul#tabMenu li{
display:block;
position:relative;
width:calc(100% / 3 - 5px);
height:75px;
font-size:92.25%;
text-align:center;
cursor:pointer;
opacity:.3;}

#rival > .inner > #sp ul#tabMenu li .name{
display:block;
position:relative;
width:100%;
height:100%;
background-position:center left 10px;}
#rival > .inner > #sp ul#tabMenu li.search .name > p,
#rival > .inner > #sp ul#tabMenu li .name a{display:inline-block; position:absolute; top:45px; right:10px;}

#rival > .inner > #sp #tabBoxes{
display:block;
position:relative;
height:200px;
overflow:hidden;}
#rival > .inner > #sp #tabBoxes div{
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:all .3s;}
#rival > .inner > #sp #tabBoxes .data{
position:relative;
width:100%;
color:#eaffff;
background:linear-gradient(135deg, rgba(119,178,194,.6) 0%,rgba(83,134,148,.4) 100%);
font-size:13px;
overflow:auto;
padding:10px;
margin:0;
opacity:0;
z-index:3;}
#rival > .inner > #sp .search{background:linear-gradient(135deg, rgba(119,178,194,.6) 0%,rgba(119,178,194,.6) 100%);}
#rival > .inner > #sp #tabBoxes .search{opacity:0;}

#rival > .inner > #sp ul#tabMenu li.active,
#rival > .inner > #sp #tabBoxes div.active,
#rival > .inner > #sp #tabBoxes .data.active{opacity:1;}

@media screen and (max-width:640px){#rival > .inner > #sp ul#tabMenu li .name{background-size:40% auto; background-position:top 10px left 10px;}}
@media screen and (max-width:480px){#rival > .inner > #sp ul#tabMenu li .name{font-size:11px; background-size:60% auto;}}

/*
========================
レベル別
========================
*/
.level_1{background-image:url(../../images/rival/rival_level1.png);}
.level_2{background-image:url(../../images/rival/rival_level2.png);}
.level_3{background-image:url(../../images/rival/rival_level3.png);}
.level_4{background-image:url(../../images/rival/rival_level4.png);}
.level_5{background-image:url(../../images/rival/rival_level5.png);}
.level_6{background-image:url(../../images/rival/rival_level6.png);}
.level_7{background-image:url(../../images/rival/rival_level7.png);}
.level_8{background-image:url(../../images/rival/rival_level8.png);}
.level_9{background-image:url(../../images/rival/rival_level9.png);}
.level_10{background-image:url(../../images/rival/rival_level10.png);}