@charset "utf-8";

/*=================================

sp_ranking

=================================*/
@media screen and (max-width:767px){

#main_visual {
background:transparent;
}

#main_visual #main_visual_cont {
align-items:center;
height: 75vw;
max-height:75vw;
padding:5vw 5vw 0;
}

#main_visual #main_visual_cont img {
aspect-ratio: 367 / 316;
object-fit: contain;
object-position: center center;
width: auto;
padding-bottom:0;
width:100%;
max-height:100%;
height:100%;
}

#container {
 overflow: visible;
 position:relative;
 z-index:4;
}

#ranking {
 padding:0 0 30px;
}

#ranking #ranking_cont {

}

#ranking #ranking_cont ol {
 overflow-x:hidden;
 overflow-y: visible;
}

#ranking #ranking_cont ol.pc {
display:none;
}

#ranking #ranking_cont ol.sp {
 display:flex;
 padding:5vw 0 0;
}

#ranking #ranking_cont ol:before {
content:none;
}

#ranking #ranking_cont ol li {
}

#ranking #ranking_cont ol li:before {
background-image:url(../../img/bg_rank_1_sp.png);
background-repeat:no-repeat;
content:" ";
height:auto;
width:150vw;
position:absolute;
top:0;
right::auto;
bottom:auto;
left::auto;
margin:auto;
z-index:2;
}

#ranking #ranking_cont ol li:first-child {
 padding:20px 0 0;
}

#ranking #ranking_cont ol li:first-child:before {
background-image:url(../../img/bg_rank_1_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left:0;
left: -20vw;
}

#ranking #ranking_cont ol li:first-child:after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(2):before {
background-image:url(../../img/bg_rank_2_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -20vw;
top:3vw;
}

#ranking #ranking_cont ol li:nth-child(2):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(3):before {
background-image:url(../../img/bg_rank_3_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:140vw;
left: -20vw;
top:-2vw;
}

#ranking #ranking_cont ol li:nth-child(4):before {
background-image:url(../../img/bg_rank_4_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -20vw;
top:5vw;
}

#ranking #ranking_cont ol li:nth-child(4):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(5):before {
background-image:url(../../img/bg_rank_5_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -20vw;
top:2vw;
}

#ranking #ranking_cont ol li:nth-child(5):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(6):before {
background-image:url(../../img/bg_rank_6_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -15vw;
top:0;
}

#ranking #ranking_cont ol li:nth-child(6):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(7):before {
background-image:url(../../img/bg_rank_7_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -20vw;
top:0;
}

#ranking #ranking_cont ol li:nth-child(7):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(8):before {
background-image:url(../../img/bg_rank_8_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -25vw;
top:3vw;
}

#ranking #ranking_cont ol li:nth-child(8):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(9):before {
background-image:url(../../img/bg_rank_9_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -25vw;
top:0vw;
}

#ranking #ranking_cont ol li:nth-child(9):after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(10):before {
background-image:url(../../img/bg_rank_10_sp2.png);
background-position:right center;
background-size:auto 100%;
width:150vw;
height:150vw;
left: -25vw;
top:0vw;
}

#ranking #ranking_cont ol li:nth-child(10):after {
content:none;
}

#ranking #ranking_cont ol li .rank {
content:" ";
position:absolute;
 width:35vw;
 height:35vw;
 top: 0vw;
 z-index:4;
}

#ranking #ranking_cont ol li .rank img {
 height: auto;
 width: 100%;
 z-index:3;
}

#ranking #ranking_cont ol li:first-child .rank {
 left: 3vw;
 width:35vw;
 height:35vw;
}

#ranking #ranking_cont ol li:nth-child(2) .rank {
 right:5vw;
 width:35vw;
 height:35vw;
}

#ranking #ranking_cont ol li:nth-child(3) .rank {
 left:2vw;
 width:35vw;
 height:35vw;
}

#ranking #ranking_cont ol li:nth-child(4) .rank {
 right:5vw;
}

#ranking #ranking_cont ol li:nth-child(5) .rank {
 left:5vw;
}

#ranking #ranking_cont ol li:nth-child(6) .rank {
 right:5vw;
}

#ranking #ranking_cont ol li:nth-child(7) .rank {
 left:5vw;
}

#ranking #ranking_cont ol li:nth-child(8) .rank {
 right:5vw;
}

#ranking #ranking_cont ol li:nth-child(9) .rank {
 left:5vw;
}

#ranking #ranking_cont ol li:nth-child(10) .rank {
 right:5vw;
}

#ranking #ranking_cont ol li div {
max-width: 360px;
width:75vw;
position:relative;
z-index:3;
}

#ranking #ranking_cont ol li:nth-child(odd) div:before {
content:none;
}


#ranking #ranking_cont ol li:nth-child(odd) div:after {
content:none;
}

#ranking #ranking_cont ol li:nth-child(odd) div:before,
#ranking #ranking_cont ol li:nth-child(even) div:before {
content:none;
}



#ranking #ranking_cont ol li div img {
max-width:100%;
width:100%;
position:relative;
z-index:3;
}

#ranking #ranking_cont ol li div dl {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center;
width:100%;
}

#ranking #ranking_cont ol li div dl dt {
width:100%;
}

#ranking #ranking_cont ol li div dl dd {
width:100%;
}

#ranking #ranking_cont ol li div dl dd:nth-child(2) {
padding-top:20px;
}

#ranking #ranking_cont ol li div dl dd:nth-child(2) img {
margin-right:-3vw;
}

#ranking #ranking_cont ol li div dl dd:nth-child(3) {
margin-top:10px;
}

#ranking #ranking_cont ol li div dl dd:nth-child(3) img {
animation-delay: 0.5s;
width:70vw;
max-width:320px;
}

#ranking .info {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center;
width:100%;
}

#ranking .info img {
animation-delay: 0.5s;
width:70vw;
max-width:320px;
height:100%;
}

}

@media screen and (max-width:480px){
#ranking #ranking_cont ol li:first-child:before { 
width:160vw;
height:160vw;
}

#ranking #ranking_cont ol li:nth-child(2):before,
#ranking #ranking_cont ol li:nth-child(3):before,
#ranking #ranking_cont ol li:nth-child(4):before,
#ranking #ranking_cont ol li:nth-child(5):before,
#ranking #ranking_cont ol li:nth-child(6):before,
#ranking #ranking_cont ol li:nth-child(7):before,
#ranking #ranking_cont ol li:nth-child(8):before,
#ranking #ranking_cont ol li:nth-child(9):before {
width:160vw;
height:160vw;
}

#ranking #ranking_cont ol li:nth-child(10):before {
 width:170vw;
 height:170vw;
}

}