html {
    --logo-size: 175px;
    --opening-logo-size: 450px;
    font-size: 18px;
}

a {
    &:hover {
        animation-name: pop;
        animation-duration: .2s;

        &::after {
            outline: var(--familyties-orange) 3px solid;
            animation-name: ringAnime;
            animation-duration: .7s;
            animation-fill-mode: both;
        }
    }
}

.from-pc {
    display: block;
}

.none-from-pc {
    display: none;
}

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

.champion-belt {
    margin-left: 56px;
}

main {
    h1 {
        width: 175px;
        height: 175px;
    }
}

#hero {
    padding-top: 26lvh;

    .bg-img {
        img {
            width: 250%;
            left: -115%;
        }
    }

    .container {
        h2 {
            .first {
                font-size: 24px;
            }

            .second {
                >span {
                    &:nth-of-type(1) {
                        font-size: 48px;
                    }

                    &:nth-of-type(2) {
                        font-size: 128px;
                    }

                    &:nth-of-type(3) {
                        font-size: 48px;
                    }
                }
            }

            .third {
                font-size: 96px;
            }
        }

        strong {
            font-size: 48px;
            margin-top: 2lvh;
        }

        div {
            &:has(time) {
                font-size: 24px;
                padding-top: 5lvh;
            }
        }
    }
}

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

    h2 {
        font-size: 64px;

        span {
            font-size: 52px;
        }
    }

    #time {
        >div {
            font-size: 64px;
            width: 100px;
            height: 120px;

            div {
                width: 77px;
                height: 77px;
                margin-top: 30px;
            }
        }

        span {
            font-size: 40px;
        }
    }

    a {
        font-size: 24px;
        width: 500px;
        padding: 32.4px 0;
        margin-top: 7lvh;
    }
}

#concept {
    ol {
        font-size: 36px;
        width: fit-content;

        li {
            display: flex;
            gap: 1.5em;
            margin-bottom: 2lvh;

            span {
                &:first-of-type {
                    font-size: 40px;
                    flex-shrink: 0;
                }
            }
        }
    }

    p {
        font-size: 40px;
    }

    strong {
        font-size: 64px;
    }
}

#system {
    strong {
        font-size: 48px;
    }

    .peach {
        margin: 0 50px
    }

    div.peach {
        p {
            font-size: 36px;
            width: 573px;
        }

        .row-from-tb {
            width: fit-content;
        }

        .container {
            flex: 0;
            width: 0;
        }

        #eval-svg-container {
            width: 700px;
        }

        #sati-level-svg-container {
            translate: 50%;
            width: 370px;
            height: 370px;
        }
    }

    article.peach {
        h3 {
            font-size: 48px;
        }

        ul {
            li {
                height: 136px;
                
                &:not(.last) {
                    width: 36%;
                }

                &.last {
                    width: calc(100% / 3);
                }

                .organization {
                    font-size: 24px;
                    width: 223px;
                }

                .roll {
                    font-size: 16px;
                    text-wrap: nowrap;

                    .from-pc {
                        display: inline;
                    }
                }

                .name {
                    font-size: 28px;
                    width: 140px;
                }
            }
        }
    }

    #prize {
        h3 {
            margin-left: 100px;
        }

        .row-from-pc {
            justify-content: center;
            gap: 2vw;
        }

        dl {
            font-size: 40px;
            width: 310px !important;
            height: 300px !important;
            padding-top: 40px;
            background-size: cover;

            &#victory {
                scale: 1.33;
                margin-right: 50px;
            }

            &:not(#victory) {
                margin: 0;
            }
        }
    }
}

#contestants {
    #contestants-swiper {
        padding-top: 140px;
        overflow: visible;

        .swiper-wrapper {
            margin-left: 50%;

            button {
                &:hover {
                    animation-name: pop;
                    animation-duration: .2s;

                    &::after {
                        outline: #fff 3px solid;
                        animation-name: ringAnime;
                        animation-duration: .7s;
                        animation-fill-mode: forwards;
                    }
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 5%;
                    z-index: -1;
                }
            }
        }
    }

    .thumb {
        aspect-ratio: unset;
        width: 994px;
        height: 600px;
        margin: 0 calc((100% - 994px) / 2);
    }

    .therapist-info {
        width: 1100px;
        margin: 0 calc((100% - 1100px) / 2);

        >div {
            div:has(small) {
                width: 370px;
            }

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

            div:has(.from-tb) {
                margin-left: 48px;
                margin-right: 0;
                flex: 1;
            }

            .from-tb {
                font-size: 38px;
            }

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

#special {
    h2 {
        margin-left: 100px;
    }

    strong {
        font-size: 30px;
    }

    #special-swiper {
        .swiper-wrapper {
            .swiper-slide {
                width: 180px;
                height: 500px;
            }
        }
    }

    .name {
        p {
            span {
                position: absolute;
                bottom: 0;
                left: calc(100% + 36px);
            }
        }
    }

    form {
        button {
            &:hover {
                animation-name: pop;
                animation-duration: .2s;

                &::after {
                    outline: var(--familyties-orange) 3px solid;
                    animation-name: ringAnime;
                    animation-duration: .7s;
                    animation-fill-mode: forwards;
                }
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                border-radius: inherit;
            }
        }
    }
}

#management {
    padding-bottom: 105px;

    .bg-img {
        background-color: #fff;

        &::after {
            content: none;
        }

        img {
            display: none;
        }
    }

    .white {
        .row-from-pc {
            gap: 100px;
            justify-content: center;
            align-items: center;

            &:nth-of-type(1) {
                margin-bottom: 178px;

                p {
                    width: 510px;
                }

                .from-pc {
                    width: 500px;
                    height: 580px;
                    overflow: clip;
                }
            }

            &:nth-of-type(2) {
                .from-pc {
                    position: relative;
                    width: 500px;
                    height: 336px;

                    .img-container {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 635px;
                        clip-path: polygon(0 0, 100% 0, 100% 436px, calc((100vw - 950px) / 2) 436px, calc((100vw - 950px) / 2) 100%, 0 100%);
                    }
                }
            }

            .from-pc {
                position: relative;
                flex: 1;

                img {
                    position: absolute;
                    top: -40%;
                    left: 0;
                    width: 100%;
                    height: 140%;
                    animation-name: parallaxImg;
                    animation-timeline: view();
                }
            }
        }

        p {
            font-size: 36px;
        }

        >p {
            &:last-of-type {
                font-size: 64px;
                width: fit-content;
                margin: 107px auto 0;
            }
        }
    }
}

#last-year {
    .bg-img {
        .img-container {
            &:first-of-type {
                p {
                    top: 17.11lvh;
                }
            }

            p {
                font-size: 96px;

                span {
                    font-size: 128px;
                }
            }
        }
    }
}

footer {
    h2 {
        font-size: 96px;

        img {
            height: 200%;
        }

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

    .row-from-pc {
        justify-content: center;
        align-items: center;
        gap: 61px;
    }

    p {
        margin: unset;
    }

    a {
        font-size: 24px;
        width: 500px;
        padding: 32.4px 0;
    }

    small {
        font-size: 20px;
    }
}

@keyframes ringAnime {
    from {
        outline-offset: 0px;
    }

    to {
        outline-offset: 25px;
        opacity: 0;
    }
}

@keyframes pop {
    50% {
        color: #797979;
        scale: 1.1;
    }
}