html {
    &:has(#opening:not(.already-visited)) {
        animation-name: holding;
        animation-duration: 4s;

        #hero {
            .container {
                h2 {
                    animation-name: opacityAnim;
                    animation-duration: 1s;
                    animation-delay: 2s;
                    animation-fill-mode: both;
                }

                strong {
                    animation-name: clipAnim2;
                    animation-duration: 1s;
                    animation-delay: 2.3s;
                    animation-fill-mode: both;
                }

                div:has(time) {
                    animation-name: opacityAnim;
                    animation-duration: 1s;
                    animation-delay: 3s;
                    animation-fill-mode: both;
                }
            }
        }
    }
}

.for-mb {
    display: none;
}

.from-tb {
    display: block;
}

.row-from-tb {
    display: flex;
}

.champion-belt {
    font-size: 6.2lvh;
    width: 68lvh;
    height: 15lvh;
    padding-left: 11lvh;

    span:not(.bg) {
        font-size: 9.3lvh;
    }

    +.belt {
        top: 6.6lvh;

        +.belt {
            top: 11lvh;
        }
    }
}

.belt {
    height: 3lvh;
}

#hero {
    padding-top: 19lvh;

    .cover,
    .bg-img {
        width: 50%;
    }

    .cover {
        opacity: 1;
    }

    .bg-img {
        left: unset;
        right: 0;

        img {
            width: 360%;
            left: -210%;
        }
    }

    .container {
        width: 50%;

        strong {
            margin-top: 13lvh;
        }
    }
}

#time-till-start {
    padding-top: 16lvh;

    h2 {
        font-size: 48px;
        margin-bottom: 9.5lvh;

        span {
            font-size: 40px;
        }
    }

    #time {
        margin-bottom: 7.9lvh;

        >div {
            font-size: 48px;
            width: 80px;
            height: 100px;

            div {
                width: 58px;
                height: 58px;
            }
        }

        span {
            font-size: 36px;
            margin-right: 20px;
            margin-left: 5px;
        }
    }

    strong {
        font-size: 48px;
    }

    a {
        margin-top: 9.8lvh;
    }
}

#concept {
    .bg-img {
        top: 12lvh;
        height: calc(100% - 5.4lvh);
    }

    ol {
        font-size: 3lvh;
        width: 576px;
        margin-top: 4lvh;
        margin-bottom: 11lvh;

        li {
            span {
                &:first-of-type {
                    font-size: 3.4lvh;
                }
            }
        }

    }

    p {
        font-size: 3.4lvh;
        font-weight: 700;
        text-shadow: 3px 3px 2px #000;
        width: fit-content;
        margin: 0 auto 3lvh;
    }

    strong {
        font-size: 3.9lvh;
    }
}

#system {
    .bg-img {
        top: 12lvh;
        height: calc(100% - 5.4lvh);
    }

    strong {
        margin-top: 14lvh;
        font-size: 3.5lvh;
    }

    div.peach {
        p {
            font-size: 2.3lvh;
            width: 509px;
        }

        .row-from-tb {
            width: 768px;
            margin: auto;
        }

        #eval-svg-container {
            aspect-ratio: 1;
            width: 600px;
        }

        .container {
            flex-grow: 1;
            position: relative;
        }

        #sati-level-svg-container {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 300px;
            height: 300px;
        }
    }

    article.peach {
        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                width: 300px;
                height: 107px;

                .organization {
                    font-size: 18px;
                    width: 126px;
                }

                .roll {
                    font-size: 16px;
                }

                .name {
                    font-size: 22px;
                }
            }
        }
    }

    #prize {
        padding-bottom: 17.4lvh;

        h3 {
            font-size: 6.2lvh;
            margin-left: 70px;
            margin-bottom: 16.6lvh;

            &::first-letter {
                font-size: 9.3lvh;
            }
        }

        dl {
            font-size: 3.5lvh;
            height: 27.7lvh;
            padding-top: 3.9lvh;

            &:not(#victory) {
                display: inline-block;
                width: 350px;
                margin: 0 calc((100% - 704px) / 4);
            }
        }
    }
}

#contestants {
    padding-bottom: 600px;

    .bg-img {
        top: 12lvh;
        height: calc(100% - 5.4lvh);
    }

    #contestants-swiper {
        .swiper-wrapper {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-auto-rows: 140px;
            width: 460px;
            margin-left: auto;

            .swiper-slide {
                padding: 10px 9px;

                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3),
                &:nth-child(4) {
                    grid-row: 1;
                }

                &:nth-child(5),
                &:nth-child(6),
                &:nth-child(7) {
                    grid-row: 2;
                }

                &:nth-child(8),
                &:nth-child(9),
                &:nth-child(10) {
                    grid-row: 3;
                }

                &:nth-child(5),
                &:nth-child(8) {
                    grid-column: 2 / 4;
                }

                &:nth-child(6),
                &:nth-child(9) {
                    grid-column: 4 / 6;
                }

                &:nth-child(7),
                &:nth-child(10) {
                    grid-column: 6 / 8;
                }

                &:nth-child(1) {
                    grid-column: 1 / 3;
                }

                &:nth-child(2) {
                    grid-column: 3 / 5;
                }

                &:nth-child(3) {
                    grid-column: 5 / 7;
                }

                &:nth-child(4) {
                    grid-column: 7 / 9;
                }
            }
        }
    }

    .thumb {
        top: 300px;
        width: 694px;
        margin: 0 calc((100% - 694px) / 2);

        div {
            &:nth-of-type(odd) {
                .contestant {
                    right: unset;
                    left: -50px;
                }

                p {
                    left: 0;
                }
            }
        }
    }

    .therapist-info {
        top: 950px;
        margin: 0 21px;

        >div {

            small,
            .introduction {
                font-size: 16px;
            }

            small {
                height: 47px;
                margin-left: 10px;
            }

            .name {
                font-size: 48px;
            }

            div:has(.from-tb) {
                width: 55%;
                min-width: 450px;
                margin-left: auto;
                margin-right: 32px;
            }

            .from-tb {
                font-family: "NOto Serif JP";
                font-size: 32px;
                font-weight: 700;
                text-shadow: 3px 3px 2px #000;

                span {
                    &:not(.red){
                        display: block;
                        margin-left: 2em;
                    }

                    &.red {
                        color: red;
                    }
                }
            }

            .signature {
                font-size: 20px;
            }
        }
    }
}

#special {
    .bg-img {
        height: calc(100% + 7lvh);
    }

    &:has(.swiper-slide-active:nth-child(1)) {
        .name {
            p:nth-of-type(1) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(1) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(2)) {
        .name {
            p:nth-of-type(2) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(2) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(3)) {
        .name {
            p:nth-of-type(3) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(3) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(4)) {
        .name {
            p:nth-of-type(4) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(4) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(5)) {
        .name {
            p:nth-of-type(5) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(5) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(6)) {
        .name {
            p:nth-of-type(6) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(6) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(7)) {
        .name {
            p:nth-of-type(7) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(7) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(8)) {
        .name {
            p:nth-of-type(8) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(8) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(9)) {
        .name {
            p:nth-of-type(9) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(9) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(.swiper-slide-active:nth-child(10)) {
        .name {
            p:nth-of-type(10) {
                opacity: 1;
                visibility: visible;
            }
        }

        form {
            button:nth-of-type(10) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    h2 {
        font-size: 6.2lvh;
        margin-left: 70px;
        margin-bottom: 8.88lvh;

        &::first-letter {
            font-size: 9.3lvh;
        }
    }

    strong {
        font-size: 2.5lvh;
    }

    #special-swiper {
        .swiper-wrapper {
            .swiper-slide {
                width: 22.5lvh;
                height: 50lvh;

                .point {
                    dt {
                        margin-top: 3.8lvh;
                        margin-left: 2lvh;
                    }

                    dd {
                        margin-top: 6.8lvh;
                    }
                }
            }
        }
    }

    .name {
        margin-top: 3lvh;
    }
}

#management {
    .bg-img {
        top: 12lvh;
        height: calc(100% - 5.4lvh);
    }

    .white {
        margin: 9.3lvh 93px 0;

        p {
            font-size: 3.1lvh;
        }

        >p {
            &:last-of-type {
                font-size: 4.6lvh;
            }
        }
    }
}

#last-year {
    .bg-img {
        top: 12lvh;
        height: calc(100% - 5.4lvh);

        .img-container {
            &:first-of-type {
                p {
                    top: 13.6lvh;
                    left: 57px;
                }
            }

            &:last-of-type {
                p {
                    top: 17.1lvh;
                    right: 59px;
                }
            }
        }
    }
}

footer {
    h2 {
        font-size: 64px;

        .m-1 {
            font-size: 96px;
        }
    }

    p {
        font-size: 36px;
        width: 640px;
        margin: 89px auto 0;
    }

    a {
        font-size: 20px;
    }
}

@keyframes clipAnim {
    0% {
        clip-path: inset(0);
    }

    99% {
        clip-path: inset(0 50% 0 0);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes clipAnim2 {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0);
    }
}