#main-inner::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100vh;
background-image:url(../img/ranking/page/bg/main.jpg);
background-position:top;
background-size:cover;
opacity:.6;}
#main-inner.fix::before{position:fixed; max-width:980px; left:calc(50% - 490px);}
@media screen and (min-width:981px) and (max-width:1400px){#main-inner.fix::before{width:80%; left:unset; right:0;}}
@media screen and (max-width:980px){#main-inner.fix::before{left:0;}}

#top{display:block; background:#fff; border:1px solid; margin:0 auto 20px;}
#top img{width:100%; transition:opacity .2s ease;}
#top:hover img{opacity:.7;}

/*
================================================================================================================
ランキング
================================================================================================================
*/
.rank{
display:flex;
position:relative;
color:#fff;
background-image:url(../img/ranking/page/bg/rank.jpg);
background-position:center;
background-size:100% auto;
border:7px solid #888;
font-weight:900;
padding:10px;
box-shadow:inset 0 0 5px rgba(0,0,0,.9) , 2px 2px 2px rgba(0,0,0,.5);
align-items:center;
pointer-events:none;}
.rank::before,.rank::after{display:block; content:""; position:absolute; pointer-events:none;}
.rank::before{top:0; left:0; width:100%; height:100%; border:2px solid #000; box-shadow:1px 1px 1px rgba(255,255,255,.8) , -1px -1px 1px rgba(0,0,0,.5);}
.rank::after{top:-7px; left:-7px; width:calc(100% + 14px); height:calc(100% + 14px); border:2px solid #000; box-shadow:inset 2px 2px 1px rgba(255,255,255,.8) , inset -2px -2px 1px rgba(0,0,0,.5);}
.rank + .rank{margin-top:10px;}
.rank img{width:100%;}

.rank > li:nth-child(1){width:110px;}
.rank > li:nth-child(2){width:80px;}
.rank > li:nth-child(3),
.rank > li:nth-child(4){width:160px; letter-spacing:2px;} 
.rank > li:nth-child(5){width:calc(100% - 510px);}
@media screen and (max-width:900px){
.rank{flex-wrap:wrap; justify-content:center; max-width:500px; margin:0 auto;}
.rank > li:nth-child(1){width:100px;}
.rank > li:nth-child(2){width:60px;}
.rank > li:nth-child(3),
.rank > li:nth-child(4){width:calc((100% - 160px) / 2);} 
.rank > li:nth-child(5){width:100%; margin-top:10px;}}
@media screen and (max-width:500px){
.rank > li:nth-child(1){width:60px;}
.rank > li:nth-child(2){width:40px;}
.rank > li:nth-child(3),
.rank > li:nth-child(4){width:calc((100% - 100px) / 2); letter-spacing:1px;}}

/*フォント関連*/
.rank > li:nth-child(1){font-size:clamp(1.125rem, 0.625rem + 2.5vw, 2.5rem);/*40-18*/ text-align:center;}
.rank > li:nth-child(1) p::after{display:inline-block; content:"位"; font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*16-12*/ margin-left:5px;}
.rank > li:nth-child(3){/*color:#00e471;*/ font-size:clamp(0.813rem, 0.517rem + 1.48vw, 1.625rem);/*26-13*/ padding-left:10px;}
.rank > li:nth-child(4){color:#ffd800; font-size:clamp(0.938rem, 0.597rem + 1.7vw, 1.875rem);/*30-15*/ text-align:right; padding-right:10px;}
.rank > li:nth-child(1) p,
.rank > li:nth-child(3) p,
.rank > li:nth-child(4) p{line-height:100%; filter:drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000) drop-shadow(0 0 1px #000); transform:translateZ(0);}
@media screen and (max-width:900px){.rank > li:nth-child(4){padding-right:0px;}}
@media screen and (max-width:500px){.rank > li:nth-child(1) p::after{margin-left:2px;}}

/*オレカ*/
.rank ul.monster{display:flex; justify-content:space-between;}
.rank ul.monster > li{position:relative; width:calc((100% /3) - 2.5px); background-image:url(../img/ranking/page/bg/monster.jpg); background-size:100% 100%; border:1px solid #000;}
.rank ul.monster > li::before{
display:block;
content:"";
position:absolute;
width:100%;
height:100%;
box-shadow:inset 2px 2px 1px rgba(255,255,255,.5) , inset -2px -2px 1px rgba(0,0,0,.5);}

/*
========================
順位別
========================
*/
/*フレーム*/
.rank.no1{border-image:linear-gradient(45deg, #fdd42a 0%,#f9980e 20%,#f9980e 30%,#fbff30 50%,#f9980e 69%,#f9980e 80%,#fdd42a 100%) 1;}
.rank.no2{border-image:linear-gradient(45deg, #c3c3c3 0%,#444 20%,#444 30%,#fff 50%,#444 70%,#444 80%,#c3c3c3 100%) 1;}
.rank.no3{border-image:linear-gradient(45deg, #c4814d 0%,#692c1a 20%,#692c1a 30%,#f3823f 50%,#692c1a 70%,#692c1a 80%,#c4814d 100%) 1;}
.rank.no4,
.rank.no5,
.rank.no6,
.rank.no7,
.rank.no8,
.rank.no9,
.rank.no10{border:7px solid #009603;}

/*背景*/
.rank.no1,
.rank.no2,
.rank.no3{background-image:url(../img/ranking/page/bg/rank_top.jpg) !important; background-size:cover;}

/*テキスト*/
.rank.no1 > li:nth-child(1) p{background:linear-gradient(to bottom, #fff153 0%,#fff57f 40%,#f19600 50%,#f6d000 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.rank.no2 > li:nth-child(1) p{background:linear-gradient(to bottom, #779fb3 0%,#dbf3ff 40%,#66727b 50%,#b7cdcf 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.rank.no3 > li:nth-child(1) p{background:linear-gradient(to bottom, #ffa735 0%,#ffdd2b 40%,#b75200 50%,#e58000 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
@media screen and (max-width:980px){
.rank.no1 > li:nth-child(1),
.rank.no2 > li:nth-child(1),
.rank.no3 > li:nth-child(1){font-size:40px !important; padding-top:5px;}}
@media screen and (max-width:500px){
.rank.no1 > li:nth-child(1),
.rank.no2 > li:nth-child(1),
.rank.no3 > li:nth-child(1){font-size:30px !important;}}

/*
========================
エラー
========================
*/
.error{
color:#f00;
background:#fff;
font-weight:700;
text-align:center;
padding:40px 20px;}