/* Styles extracted from index.php */
.ratebox {
    position: relative;
    width: 100%;
}

.brand-rate-label {
    width: 56%;
    height: 11%;
    background-color: #FFEB79;
    border-radius: 12% 12% 12% 12% / 50% 50% 50% 50%;
    position: absolute !important;
    top: 42%;
    left: 22%;
    font-size: min(3vw, 18px);
    color: #333;
    font-weight: bold;
    z-index: 1;
    line-height: 1;
}

.brand-rate-label.carrier {
    top: 42%;
}

.brand-rate-label.virtual {
    top: 42%;
}

.brand-rate-label.credit {
    top: 42%;
}

@media screen and (min-width: 1025px) {

    .ratebox:nth-child(2) .brand-rate-label.virtual,
    .ratebox:nth-child(2) .brand-rate-label {
        top: 43% !important;
    }

    .ratebox:nth-child(2) .brand-rate .number-box {
        padding-top: 30px;
    }
}

.brand-rate-label .splide__track {
    width: 100%;
    height: 100%;
}

.brand-rate-label .splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.brand-rate-label p {
    text-align: center;
    margin: 0;
}

.brand-rate {
    width: 100%;
    aspect-ratio: 205 / 140;
    background-color: #fff;
    border-radius: 10px;
    height: 164px;
}

.ratebox_rate {
    margin-top: 2%;
}

.number-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(1% * 4 / 3);
    list-style-type: none;
    padding-left: 0;
    margin-bottom: min(6vw, 40px);
}

.splide__track {
    height: 164px;
}

@media screen and (max-width: 1450px) {
    .brand-rate-label.carrier {
        top: 38%;
    }

    .brand-rate-label.virtual {
        top: 38%;
    }

    .brand-rate-label.credit {
        top: 38%;
    }
}

@media screen and (max-width: 1300px) {
    .brand-rate-label.carrier {
        top: 35%;
    }

    .brand-rate-label.virtual {
        top: 37%;
    }

    .brand-rate-label.credit {
        top: 35%;
    }
}

@media screen and (max-width: 1200px) {
    .brand-rate-label.carrier {
        top: 42%;
    }

    .brand-rate-label.virtual {
        top: 42%;
    }

    .brand-rate-label.credit {
        top: 42%;
    }
}

@media screen and (max-width: 1110px) {
    .brand-rate-label.carrier {
        top: 40%;
    }

    .brand-rate-label.virtual {
        top: 40%;
    }

    .brand-rate-label.credit {
        top: 40%;
    }
}

@media screen and (max-width: 1024px) {
    /*.brand-rate-label {
        top: 36%;
    }

    .brand-rate {
        height: 120px;
    }

    .splide__track {
        height: 110px;
    }

    .ratebox_rate {
        margin-top: 10%;
    }*/

    .brand-rate-label.carrier {
        top: 38%;
    }

    .brand-rate-label.virtual {
        top: 38%;
    }

    .brand-rate-label.credit {
        top: 38%;
    }
}

@media screen and (max-width: 997px) {
    .brand-rate-label.carrier {
        top: 35%;
    }

    .brand-rate-label.virtual {
        top: 39%;
    }

    .brand-rate-label.credit {
        top: 35%;
    }
}

@media screen and (max-width: 911px) {
    .brand-rate-label.carrier {
        top: 34%;
    }

    .brand-rate-label.virtual {
        top: 37%;
    }

    .brand-rate-label.credit {
        top: 34%;
    }
}

@media screen and (max-width: 830px) {
    .brand-rate-label.carrier {
        top: 30%;
    }

    .brand-rate-label.virtual {
        top: 33%;
    }

    .brand-rate-label.credit {
        top: 30%;
    }
}

@media screen and (max-width: 767px) {
    .brand-rate-label {
        top: 44%;
    }

    .brand-rate {
        height: 120px;
    }

    .splide__track {
        height: 110px;
    }

    /*.ratebox_rate {
        margin-top: 10%;
    }*/

    .brand-rate-label.virtual {
        top: 44%;
    }

    .brand-rate-label.carrier {
        top: 44%;
    }

    .brand-rate-label.credit {
        top: 43%;
    }

    .merupay {
        font-size: 0.8em;
    }

}

@media screen and (max-width: 680px) {
    /*.brand-rate-label {
        top: 40%;
    }

    .brand-rate-label.virtual {
        top: 40%;
    }

    .brand-rate-label.carrier {
        top: 40%;
    }

    .brand-rate-label.credit {
        top: 40%;
    }*/

    .ratebox_rate {
        margin-top: 8%;
    }
}

@media screen and (max-width: 540px) {
    .brand-rate-label {
        top: 40%;
    }

    .brand-rate-label.virtual {
        top: 40%;
    }

    .brand-rate-label.carrier {
        top: 40%;
    }

    .brand-rate-label.credit {
        top: 40%;
    }

    .ratebox_rate {
        margin-top: 10%;
    }
}

@media screen and (max-width: 490px) {
    .brand-rate-label {
        top: 37%;
    }

    .brand-rate-label.virtual {
        top: 37%;
    }

    .brand-rate-label.carrier {
        top: 37%;
    }

    .brand-rate-label.credit {
        top: 37%;
    }
}

@media screen and (max-width: 390px) {
    .brand-rate-label {
        top: 35%;
    }

    .brand-rate-label.virtual {
        top: 35%;
    }

    .brand-rate-label.carrier {
        top: 35%;
    }

    .brand-rate-label.credit {
        top: 35%;
    }
}

@media screen and (max-width: 350px) {
    /*.brand-rate-label {
        top: 40%;
    }*/

    .brand-rate-label.virtual {
        top: 34%;
    }

    .brand-rate-label.carrier {
        top: 34%;
    }

    .brand-rate-label.credit {
        top: 34%;
    }

    .kyash {
        font-size: 0.9em;
    }
}





/* OVERLAP FIX */
.brand-rate .number-box {
    padding-top: 8%;
}

/* OVERLAP FIX */
.brand-rate .number-box {
    padding-top: 20px;
}

@media screen and (max-width: 767px) {
    .brand-rate .number-box {
        padding-top: 35px;
    }
}