/* ランキングテーブル */
.pickup-ranking-table table {
    width: 100%;
}

.pickup-ranking-table table tr th, 
.pickup-ranking-table table tr td {
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    border: 1px #000 solid;
}

.pickup-ranking-table table .head-tr {
    background: #ff0000;
}

.pickup-ranking-table table .gold-tr {
    background: linear-gradient(to right, #ffff00, #ffff96, #ffff00);
    color: #000;
}

.pickup-ranking-table table .silver-tr {
    background: linear-gradient(to right, #d1d1d1, #ffffff, #d1d1d1);
    color: #000;
}

.pickup-ranking-table table .bronze-tr {
    background: linear-gradient(to right, #f0b4a0, #ffdcd2, #f0b4a0);
    color: #000;
}

.pickup-ranking-table table .normal-tr {
    background: #fff;
    color: #000;
}

/* ランキング個別 */
.m-ranking {
    color: #000;
    margin-top: 20px;
}

.m-rank-head {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.m-rank-head .m-rank-icon {
    width: 15%;
}

.m-rank-head .m-rank-name {
    width: 84%;
    font-size: 20px;
    font-weight: bold;
    align-content: center;
}

.m-rank-content {
    padding: 10px;
}

.m-rank-data {
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    /* gap: 10px; */
}

.m-rank-data .m-rank-img {
    width: 30%;
    align-content: center;
}

.m-rank-data .m-rank-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 65%;
}

.m-rank-detail h4 {
    color: #646464;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
}

.m-rank-detail .pickup-num {
    border-bottom: 2px #646464 dotted;
}

.m-rank-detail .pickup-num p {
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    margin: 8px 0;
}

.m-rank-detail .detail-middle {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.m-rank-detail .detail-middle p {
    color: #3a7c20;
    font-weight: bold;
    font-size: 20px;
    text-align: right;
    margin-bottom: 5px;
}

.m-rank-detail .detail-middle .return-rate,
.m-rank-detail .detail-middle .win-rate {
    width: 45%;
    border-bottom: 2px #646464 dotted;
}

.m-rank-detail .syushi-wariai .per {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.m-rank-detail .syushi-wariai h4 {
    margin-bottom: 0;
}

.machine-gold {
    background: linear-gradient(to right, #ffd800, #ffff96, #ffd800);
    border: 3px solid;
    border-image: linear-gradient(#ffb400, #ffff00, #ffb400) 1;
}

.machine-gold .m-rank-content {
    background: linear-gradient(to right, #500a00, #d28200, #500a00);
}

.machine-silver {
    background: linear-gradient(to right, #d1d1d1, #ffffff, #d1d1d1);
    border: 3px solid;
    border-image: linear-gradient(#a5a5a5, #ebebeb, #a5a5a5) 1;
}

.machine-silver .m-rank-content {
    background: linear-gradient(to right, #1e1e1e, #8c8c8c, #1e1e1e);
}

.machine-bronze {
    background: linear-gradient(to right, #d2937a, #ffdcd2, #d2937a);
    border: 3px solid;
    border-image: linear-gradient(#b9785a, #f0b4a0, #b9785a) 1;
}

.machine-bronze .m-rank-content {
    background: linear-gradient(to right, #731e00, #b47858, #731e00);
}

.machine-normal {
    background: linear-gradient(to right, #ff4137, #ffa096, #ff4137);
    border: 3px #ff0000 solid;
}

.machine-normal .m-rank-content {
    background: #000;
}

.nodata-color {
    color: #777 !important;
}