@charset "UTF-8";

.rank-icon {
    width:clamp( 37px, calc( 28px + 2.4vw ), 52px );
    height:clamp( 31px, calc( 23.8px + 1.92vw ), 43px );
	margin-top:25px;
    position: absolute;
    top:calc(clamp( 17px, calc( 12.2px + 1.28vw ), 25px ) * -1);
    left:calc(clamp( 10px, calc( 7px + 0.8vw ), 15px ) * -1);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    display: inline-block;
    background-image: url('../img/ranking_01.png'); /* デフォで1位にしとく */
}

.rank-icon:not(.rank-1):not(.rank-2):not(.rank-3) {
    top:calc(clamp( 12px, calc( 7.2px + 1.28vw ), 20px ) * -1);
}

.rank-2 {
    background-image: url('../img/ranking_02.png');
}

.rank-3 {
    background-image: url('../img/ranking_03.png');
}

.rank-4 {
    background-image: url('../img/ranking_04.png');
}

.rank-5 {
    background-image: url('../img/ranking_05.png');
}

.rank-6 {
    background-image: url('../img/ranking_06.png');
}

.rank-7 {
    background-image: url('../img/ranking_07.png');
}

.rank-8 {
    background-image: url('../img/ranking_08.png');
}

.rank-9 {
    background-image: url('../img/ranking_09.png');
}

.rank-10 {
    background-image: url('../img/ranking_10.png');
}

.slider_ranking li {
    position: relative; /* これがないと absolute の基準がズレる！ */
    padding-top: 25px; /* 王冠ぶんスペースつくる */
}

.rank-icon {
    transform: translateY(0); /* 念のため明示 */
}