/* @media screen and (max-width:1600px) {
    .ranking-summary__content::before {
        right: calc(30% - 50%);
        width: calc(100% - 15%);
        height: 1300px;
    }
} */
/* 
@media screen and (max-width:1500px) {
    .ranking-summary__content::before {
        right: calc(30% - 35%);
        width: calc(100% - 30%);
        height: 1442px;
    }
}

@media screen and (max-width:1400px) {
    .ranking-summary__content::before {
        right: calc(30% - 35%);
        width: calc(100% - 30%);
    }
} 

@media screen and (max-width:1200px) {
    .footer::before, .footer::after {
        width: 30%;
    }
} */

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

    .ranking-summary__content::before {
        right: calc(30% - 35%);
        width: calc(100% - 25%);
    }

    .ranking-summary__header::before {
        left:-40%;
    }
    .ranking-summary__header::after {
        right:-40%;
    }
} */
/* @media screen and (max-width:1000px) {

    .header__logo {
        top: 20px;
        width: 180px;
    }

    .ranking-summary {
        margin-top: 200px;
    }

    .ranking-summary__header::before {
        left:-30%;
    }
    .ranking-summary__header::after {
        right:-30%;
    }
} */

@media screen and (max-width:1000px) {
    .ranking-area {padding: 100px 0 350px;}
}
@media screen and (max-width:900px) {

    .ranking-summary {
            margin-top: 150px;
    }

}

@media screen and (max-width:800px) {

    .wrapper {
            width: calc(100% - 30px);
    }

    /* Header */

    .header__logo {
        left: 5px;
    }

    .header__logo {
        top: 8px;
        width: 30vw;
    }

    /* Hero Section */

    .hero {
        padding-bottom: 60px;
    }

    .hero::after {
        background: url(../images/hero-bottom-sp.png) no-repeat center top;
        height: calc(100% - 25%);
        background-size: 145%;
    }

    .hero__buttons li {
        width: 60%;
        max-width: 100%;
    }

    .hero__date-image {
        bottom: 5%;
    }

    .hero-btn {
        width: 300px;
        margin: 20px auto 0;
    }

    .hero__buttons {
        gap: 10px;
    }

    .hero-btn {
    width: 80%;
    max-width: 80%;
    margin: 10px auto 0;
    }

    .hero__buttons li {
    width: 70%;
    max-width: 80%;
    }

    .ranking-summary {
        margin-top: 20px;
    }

    .ranking-summary__rank {
    padding: 10px;
    }

    .ranking-summary__box {
    min-height: 0;
    }

    .ranking-summary__content::before {
        right: -20px;
        width: 75%;
    }

    .ranking-summary__content::before {
    height: 100%;
    }

    .hero__date-image {
    left: 10%;
    }

    .ranking-summary__rank-value--left {
    font-size: 10vw;
    }

    .ranking-summary__content::before {
    bottom: 110%;
    }

    span.block-rank, 
    span.solo-rank {
        font-size: 15vw;
    }

    .ranking-summary__box--individual .ranking-summary__rank {
        min-height: 0;
    }

    .ranking-summary__rank-value--right {
        line-height: normal;
        min-height: 0;
    }

    .ranking-summary__rank-value--left {
        line-height: normal;
        min-height: 0;
    }

    .ranking-summary__box {
        min-height: 0;
    }

    .ranking-summary__rank {
        padding: 0 10px 20px;
    }

    /* Ranking Area Summary Start */

        .ranking-summary__content {
            padding: 50px 20px 40px;
        }

        .ranking-summary__label {
            font-size: 5vw;
        }
    
        .ranking-summary__header {
            width: 80%;
        }
    
        .ranking-summary__lessons-text {
            font-size: 4.5vw;
        }
    
        .ranking-summary__note {
            font-size: 3.5vw;
        }
    
        .ranking-summary__results {
            gap: 60px;
            flex-wrap: wrap;
            flex-direction: column;
        }
    
        .ranking-summary__box {
            max-width: 100%;
            /* min-height: 160px; */
        }
    
        .ranking-summary__box::before {
            top: -50px;
            width: 70px;
        }
    
        .ranking-location {
            font-size: 20px;
            padding: 5px 10px;
        }
    
        .ranking-location span {
            font-size: 18px;
        }
    
        .ranking-summary__rank {
            padding: 0 10px 10px;
        }
    
        .ranking-summary__header::before {
            /* left: -15%; */
            top: -30px;
        }
    
        .ranking-summary__header::after {
            top: -30px;
        }

    .ranking-summary__header::before {
        left: -55px;
        width: 100px;
    }

    .ranking-summary__header::after {
        right: -55px;
        width: 100px;
    }

    /* Ranking Area Summary End */
    
    /* Ranking area */

    .ranking-area::after {
        background: url(../images/guide-bg-overlay-sp.png) no-repeat bottom center/contain;
    }

    .ranking-area {
        padding: 60px 0 25%;
        height: auto;
    }

    .ranking-area__content {
        padding: 40px 20px;
    }

    .ranking-area__tabs {
        flex-direction: column;
    }

    .ranking-area__tab {
        max-width: 80%;
        margin: 0 auto;
    }

    .ranking-area__left-holder {
        width: 100%;
        margin: 0 auto;
    }
    .ranking-area__note img {
        margin: 20px auto;
        max-width: 100%;
        width: 400px;
    }

    .ranking-area__table th {
        font-size: 18px;
        padding:10px;
    }

    .ranking-area__bar-label {
        font-size: 16px;
    }

    .ranking-area__panel {
        padding:20px 10px;
    }

    .custom-select-wrapper {
        width: 150px;
    }

    .custom-select-wrapper select {
        padding-right:20px;
    }

    /* guide */

    .guide__step-text::before {
            
        display: none;
        }

        .guide__step-text-sub {
            margin: 20px auto;
        }
    
        .guide__step-text {
            padding: 50px 10px 20px;
            width: 100%;
        }
    
        ul.guide__steps li:not(:last-child) .guide__step-number::after {
            display: none;
        }
    
        .guide__step-head {
            flex-direction: column;
            position: relative;
        }
    
        .guide__step-number {
            position: absolute;
            left: 0;
            right: 0;
            top: -35px;
            margin: 0 auto;
            z-index: 1;
        }
    
        .guide__step-body {
            text-align: center;
        }
    
        .guide__step {
            display: block;
        }
    
        .guide__content {
            padding: 40px 20px;
        }
    
        .guide__header {
            margin: 0 auto 50px;
        }
    
        .guide__step-number img {
            width: 80px;
        }
    
        .guide__buttons {
            flex-wrap: wrap;
            gap: 10px;
        }
    
        .guide__steps {
            gap: 100px;
        }
    
        .guide {
            padding: 60px 0;
            height: auto;
        }
    
        .guide__step-title {
            line-height: 120%;
        }

    /* Campaign */

    .footer::after {
        background: url(../images/footer-vector2-sp.png) no-repeat bottom center/contain;
    }

    .footer::before {
        background: url(../images/footer-vector1-sp.png) no-repeat bottom center/contain;
    }

    .campaign {
        padding: 60px 0;
    }

    .campaign__content {
        padding: 50px 5%;
    }

    .campaign__section p, .campaign__list li {
        font-size: 16px;
    }

    .campaign__list--notes {
        padding-left: 0;
    }

    .campaign__content {
        padding: 40px 5%;
    }

    /* Footer */
    .footer:before, .footer::after {
        width: 25%;
    }
    .footer:before {
        left: 10px;
    }
    .footer:after {
        right: 10px;
    }
    .footer {
        padding: 40px 20px;
        height: auto;
    }

    .footer__socials li a {
        width: 50px;
    }

    .footer__socials {
        gap: 20px;
    }

    .footer__text {
        font-size: 20px;
    }

    .footer__title {
        font-size: 25px;
    }
}


@media screen and (max-width:600px) {

    .ranking-summary__header::after {
        right: auto;
        left: 88%;
    }

    .ranking-summary__header::before {
        left: -15%;
    }
    

}