@font-face {
    font-family: "CHIKARA DZUYOKU";
    src: url(../assets/fonts/851CHIKARA-DZUYOKU_kanaA_004.woff);
}

@font-face {
    font-family: "League Gothic";
    src: url(../assets/fonts/LeagueGothic-Regular.woff);
}

* {
    padding: 0;
    padding-inline: 0;
    padding-block: 0;
    margin: 0;
    margin-inline: 0;
    margin-block: 0;
    box-sizing: border-box;
}

html {
    --m1-red: #ff2020;
    --m1-burgundy: #810000;
    --m1-peach: #DEC4C4;
    --m1-orange: #FFCC00;
    --m1-white: #fff;
    --familyties-mustard: #CDBB53;
    --familyties-orange: #EE6B10;
    --logo-size: 110px;
    --opening-logo-size: 300px;
    font-family: "Noto Sans JP";

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

        h1 {
            animation-name: opacityAnim;
            animation-duration: 1s;
            animation-delay: 1s;
            animation-fill-mode: both;
        }
    }
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
    position: relative;

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

button {
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.caption {
    font-size: 0;
}

li {
    list-style-type: none;
}

.champion-belt {
    font-size: 40px;
    font-weight: 400;
    color: var(--m1-white);
    width: 351px;
    margin: auto;
    transition-duration: 1.2s;
    clip-path: inset(0);

    &.inactive {
        clip-path: inset(0 100% 0 0);
    }

    .bg {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #000;
        clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
    }

    span:not(.bg) {
        font-family: "Noto serif JP";
        font-size: 64px;
        font-weight: 700;
        color: var(--m1-red);
        position: relative;
        top: 8px;
        padding-left: 20px;
    }

    +.belt {
        top: 37px;

        +.belt {
            top: 70px;
        }
    }
}

.belt {
    position: absolute;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 20px;
    background-color: var(--m1-orange);
}

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

main {
    position: relative;

    h1 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 15;
        width: var(--logo-size);
        height: var(--logo-size);

        img {
            object-fit: contain;
        }
    }
}

#opening {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow: clip;

    &:not(.already-visited) {
        background-color: #111;
        opacity: 1;
        animation-name: opening, clipAnim;
        animation-duration: 2s, 1s;
        animation-delay: 0s, 1s;
        animation-fill-mode: both;

        .img-container {
            animation-name: openingLogo;
            animation-duration: 2s;
            animation-fill-mode: both;
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
        }
    }

    &.already-visited {
        opacity: 0;
        pointer-events: none;
    }

    .img-container {
        position: absolute;
        top: calc((100% - var(--opening-logo-size)) / 2);
        left: calc((100% - var(--opening-logo-size)) / 2);
        aspect-ratio: 1;
        width: var(--opening-logo-size);

        img {
            object-fit: contain;
        }
    }
}

#hero {
    color: var(--m1-white);
    position: relative;
    height: 100lvh;
    padding-top: 191px;

    .cover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: #111;
        opacity: .75;
    }

    .bg-img {
        z-index: -2;
        overflow: clip;

        img {
            position: absolute;
            top: 0;
            left: -80%;
            width: 180%;
            height: 100%;
        }
    }

    .container {
        h2 {
            font-weight: 700;
            width: fit-content;
            margin: auto;

            .first,
            .third {
                display: block;
            }

            .first {
                font-size: 20px;
                font-weight: 600;
            }

            .second {
                display: flex;

                >span {
                    font-size: 24px;

                    &:nth-of-type(1) {
                        text-shadow: 0px 4px 4px #00000040;
                        writing-mode: vertical-lr;
                        text-orientation: sideways;
                        line-height: 1.2em;
                    }

                    &:nth-of-type(2) {
                        font-size: 64px;
                        line-height: .8em;
                        padding-right: 5px;

                        span {
                            font-family: "League Gothic";
                            display: inline-block;
                            scale: 1.3 1;
                            margin: 0 16px;
                        }
                    }

                    &:nth-of-type(3) {
                        span {
                            line-height: 1.2em;
                            display: block;

                            &:nth-child(1) {
                                letter-spacing: -.3em;
                            }
                        }
                    }
                }
            }

            .second>span:nth-of-type(2),
            .third {
                font-weight: 900;
                color: var(--m1-red);
                -webkit-text-stroke: var(--m1-white) 6px;
                paint-order: stroke;
            }

            .third {
                font-size: 48px;
                padding-left: 29px;
            }
        }

        strong {
            font-family: "Noto Serif JP";
            font-size: 36px;
            font-weight: 700;
            text-shadow: 3px 3px 2px #000;
            text-align: center;
            display: block;
            width: fit-content;
            margin: 104px auto 0;
        }

        div {
            &:has(time) {
                font-size: 20px;
                letter-spacing: 1.5px;
                text-align: center;
                padding-top: 54px;
            }
        }
    }
}

#time-till-start {
    height: 100lvh;
    padding-top: 140px;
    background-color: var(--m1-white);

    &:has(h2.inactive) {
        strong {
            filter: blur(50px);
            opacity: 0;
        }
    }

    h2 {
        font-size: 40px;
        font-weight: 400;
        text-align: center;
        margin-bottom: 68px;
        transition-duration: 0.5s;

        &.inactive {
            filter: blur(50px);
            opacity: 0;
        }

        span {
            font-size: 36px;
        }
    }

    #time {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-bottom: 64px;

        >div {
            font-size: 40px;
            font-weight: 700;
            color: var(--m1-white);
            width: 60px;
            height: 80px;
            margin-bottom: 6px;
            background-color: #353535;
            border-radius: 6px;

            div {
                width: 48px;
                height: 48px;
                margin: 24px auto 8px;
                text-align: right;
            }
        }

        span {
            font-size: 24px;
        }
    }

    strong {
        font-family: "Noto Serif JP";
        font-size: 40px;
        font-weight: 400;
        text-align: center;
        display: block;
        width: fit-content;
        margin: auto;
        transition-duration: 0.5s;
        transition-delay: 0.5s;
    }

    a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 312px;
        padding: 21px 0 22px;
        margin: 30px auto 0;
        background-color: var(--familyties-mustard);
        border-radius: 50px;
    }
}

#concept {
    color: var(--m1-white);
    position: relative;
    z-index: 0;
    height: 100lvh;
    padding-top: 20px;

    .bg-img {
        top: 75px;
        height: calc(100% - 33px);
        overflow: clip;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .5;
        }

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

    ol {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.5em;
        width: 336px;
        margin: 40px auto 30px;

        li {
            margin-bottom: 1em;

            span {
                display: block;

                &:first-of-type {
                    font-size: 28px;
                    color: hsl(from #fff h s calc(l - 20));
                }

                &:last-of-type {
                    margin-left: 1em;
                }
            }
        }
    }

    strong {
        font-size: 40px;
        text-shadow: 3px 3px 2px #000;
        text-align: center;
        line-height: 1.5em;
        display: block;

        span {
            color: var(--m1-red);
        }
    }
}

#system {
    position: relative;
    z-index: 0;
    padding-top: 20px;

    .bg-img {
        top: 75px;
        height: calc(100% - 33px);
        background-color: var(--m1-burgundy);
    }

    strong {
        font-size: 36px;
        font-weight: 700;
        color: var(--m1-white);
        line-height: 1.35em;
        text-shadow: 3px 3px 2px #000;
        text-align: center;
        display: block;
        margin-top: 40px;
    }

    .peach {
        margin: 0 18px;
        background-color: var(--m1-peach);
        border-radius: 12px;
    }

    div.peach {
        margin-top: 49px;
        margin-bottom: 28px;
        padding-top: 53px;
        overflow: clip;

        p {
            font-size: 24px;
            text-align: center;
            width: 310px;
            margin: 0 auto;
        }

        #eval-svg-container {
            svg {
                .frame {
                    fill: var(--m1-white);
                    stroke-width: 1px;
                    stroke: #000;
                }

                .star {
                    fill: #C4C4C4;
                }

                .border {
                    stroke: #fff;
                }

                #eval {
                    fill: #ff0000;
                    opacity: 0;
                    transition-property: d;

                    &.text-opacity {
                        ~text {
                            opacity: 0;
                            filter: blur(50px);
                        }
                    }
                }

                text {
                    font-size: 23px;
                    transition-duration: 1s;

                    &:nth-of-type(5) {
                        transition-delay: .2s;
                    }

                    &:nth-of-type(4) {
                        transition-delay: .4s;
                    }

                    &:nth-of-type(3) {
                        transition-delay: .6s;
                    }

                    &:nth-of-type(2) {
                        transition-delay: .8s;
                    }
                }
            }
        }

        #sati-level-svg-container {
            position: relative;

            svg {
                clip-path: path("M -100 300 c 0 0 0 0 -100 300 c 0 0 0 0 700 300 V 1000 H 0 Z");
            }

            .svg1 {
                position: relative;

                #sati-level {
                    stroke: #000;
                    stroke-width: 1px;
                }

                #drop {
                    stroke: #000;
                    stroke-width: 1;
                }

                text {
                    &:nth-of-type(1) {
                        font-size: 72px;
                    }

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

            .svg2 {
                position: absolute;
                top: 0;
                left: 0;

                #sati-level-bg {
                    fill: white;
                }
            }
        }
    }

    article.peach {
        padding-top: 40px;
        padding-bottom: 65px;
        margin-bottom: 92px;

        h3 {
            font-size: 36px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 40px;
        }

        ul {
            li {
                display: flex;
                justify-content: center;
                align-items: flex-end;
                gap: 20px;
                width: 300px;
                margin: 0 auto 38px;

                .organization {
                    font-size: 16px;
                    width: 125px;

                    .img-container {
                        width: 30px;
                        height: 30px;

                        img {
                            object-fit: contain;
                        }
                    }
                }

                .roll {
                    font-size: 14px;
                }

                .name {
                    font-size: 24px;
                    width: 120px;
                }
            }
        }
    }

    #prize {
        color: var(--m1-white);
        position: relative;
        padding-bottom: 179px;
        overflow-x: clip;

        h3 {
            font-size: 40px;
            font-weight: 400;
            margin-left: 22px;
            margin-bottom: 170px;
            border-bottom: 1px var(--m1-white) solid;

            &::first-letter {
                font-family: "Noto serif JP";
                font-size: 64px;
                font-weight: 700;
                padding-left: 12px;
            }
        }

        dl {
            font-size: 36px;
            font-weight: 700;
            text-align: center;
            height: 284px;
            padding-top: 40px;
            margin-bottom: 26px;
            background-image: url(../assets/imgs/ロゴ系/金の月桂樹.webp);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;

            &#victory {
                scale: 1.2;
                margin-bottom: 50px;
            }

            &:nth-last-of-type(1) {
                margin-bottom: 0;
            }

            dt {
                margin-bottom: 48px;
            }
        }
    }
}

#contestants {
    position: relative;
    z-index: 0;
    padding-top: 20px;
    padding-bottom: 50px;

    &:has(:nth-of-type(1).swiper-slide-active) {
        .thumb {
            div:nth-of-type(1) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(1) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(2).swiper-slide-active) {
        .thumb {
            div:nth-of-type(2) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(2) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(3).swiper-slide-active) {
        .thumb {
            div:nth-of-type(3) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(3) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(4).swiper-slide-active) {
        .thumb {
            div:nth-of-type(4) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(4) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(5).swiper-slide-active) {
        .thumb {
            div:nth-of-type(5) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(5) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(6).swiper-slide-active) {
        .thumb {
            div:nth-of-type(6) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(6) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(7).swiper-slide-active) {
        .thumb {
            div:nth-of-type(7) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(7) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(8).swiper-slide-active) {
        .thumb {
            div:nth-of-type(8) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(8) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(9).swiper-slide-active) {
        .thumb {
            div:nth-of-type(9) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(9) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:has(:nth-of-type(10).swiper-slide-active) {
        .thumb {
            div:nth-of-type(10) {
                opacity: 1;
                visibility: visible;

                .bg {
                    filter: none;
                }
            }
        }

        .therapist-info {
            div:nth-of-type(10) {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    .bg-img {
        top: 75px;
        height: calc(100% - 75px);
        background-color: #1d1d1d;
    }

    h2 {
        margin-bottom: 83px;
    }

    #contestants-swiper {
        .swiper-wrapper {
            .swiper-slide {
                width: fit-content;
                padding: 44px 15px 647px;

                &.swiper-slide-active {
                    .img-container {
                        &::before {
                            animation-name: dotGameFlash;
                            animation-duration: 1s;
                            animation-iteration-count: infinite;
                            animation-fill-mode: both;
                            animation-timing-function: steps(5, end);
                        }

                        &::after {
                            opacity: 0;
                        }
                    }
                }

                .img-container {
                    position: relative;
                    display: block;
                    width: 98px;
                    height: 122px;
                    background-color: var(--m1-white);

                    &::before {
                        content: "";
                        position: absolute;
                        top: -10px;
                        left: -10px;
                        width: calc(100% + 20px);
                        height: calc(100% + 20px);
                        border-radius: 8px;
                        z-index: -1;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: #000;
                        opacity: .5;
                    }
                }
            }
        }
    }

    .thumb {
        position: absolute;
        top: 387px;
        left: 0;
        z-index: -1;
        aspect-ratio: 342 / 300;
        width: 92%;
        margin: 0 4%;
        overflow-x: clip;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .5;
        }

        .bg {
            position: absolute;
            top: 0;
            left: 0;
            filter: blur(100px);
            transition-duration: .5s;
        }

        .contestant {
            position: absolute;
            top: 0;
            z-index: 2;
            aspect-ratio: 200 / 300;
            width: unset;
            height: 100%;
            object-fit: cover;
        }

        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;

            &:nth-of-type(odd) {
                .contestant {
                    right: 0;
                }

                p {
                    left: 0;
                }
            }

            &:nth-of-type(even) {
                .contestant {
                    left: 0;
                }

                p {
                    right: 0;
                }
            }

            &:nth-of-type(3) {
                p {
                    margin-top: 2em;

                    span:not(.red) {
                        margin-top: 2em;
                    }
                }
            }

            &:nth-of-type(5) {
                p {
                    margin-top: 2em;

                    span:not(.red) {
                        margin-top: 1em;
                    }
                }
            }

            &:nth-of-type(6) {
                p {
                    margin-top: 2em;

                    span:not(.red) {
                        margin-top: 2em;
                    }
                }
            }

            &:nth-of-type(7) {
                p {
                    margin-top: 3em;

                    span:not(.red) {
                        margin-top: 3em;
                    }
                }
            }

            &:nth-of-type(8) {
                p {
                    margin-top: 2.5em;

                    span:not(.red) {
                        margin-top: 2em;
                    }
                }
            }

            &:nth-of-type(9) {
                p {
                    span:not(.red) {
                        margin-top: 1em;
                    }
                }
            }

            &:nth-of-type(10) {
                p {
                    span:not(.red) {
                        margin-top: 2em;
                    }
                }
            }
        }

        p {
            font-family: "Noto Serif JP";
            font-size: 23px;
            font-weight: 700;
            text-shadow: 3px 3px 2px #000;
            line-height: 2em;
            color: var(--m1-white);
            writing-mode: vertical-rl;
            /* text-orientation: upright; */
            position: absolute;
            top: 0;
            z-index: 2;
            height: 19em;
            margin-top: 1.5em;
            margin-right: 12px;

            span {
                &:not(.red) {
                    display: block;
                }

                &.red {
                    color: var(--m1-red);
                }
            }
        }
    }

    .therapist-info {
        color: var(--m1-white);
        position: absolute;
        top: 687px;
        left: 0;
        z-index: -1;
        height: var(--opening-logo-size);
        width: calc(100% - 24px);
        margin: 0 12px;

        >div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;

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

            small {
                font-size: 14px;
                display: block;
                margin-top: 2em;
                margin-left: 1em;
            }

            .name {
                font-size: 36px;
                font-weight: 700;
                margin-left: 5px;
            }

            .introduction,
            .signature {
                margin-top: 2em;

                span {
                    padding-left: 2em;

                    &.two-digit {
                        padding-left: 1.4em;
                    }
                }
            }

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

#special {
    color: var(--m1-white);
    position: relative;
    padding-bottom: 180px;

    .bg-img {
        background-color: #1d1d1d;
        height: calc(100% + 37px);
    }

    &:has([data-swiper-slide-index="0"].swiper-slide-active) {
        .name {
            p:nth-of-type(1) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="1"].swiper-slide-active) {
        .name {
            p:nth-of-type(2) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="2"].swiper-slide-active) {
        .name {
            p:nth-of-type(3) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="3"].swiper-slide-active) {
        .name {
            p:nth-of-type(4) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="4"].swiper-slide-active) {
        .name {
            p:nth-of-type(5) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="5"].swiper-slide-active) {
        .name {
            p:nth-of-type(6) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="6"].swiper-slide-active) {
        .name {
            p:nth-of-type(7) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="7"].swiper-slide-active) {
        .name {
            p:nth-of-type(8) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="8"].swiper-slide-active) {
        .name {
            p:nth-of-type(9) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    &:has([data-swiper-slide-index="9"].swiper-slide-active) {
        .name {
            p:nth-of-type(10) {
                opacity: 1;
                visibility: visible;
            }
        }

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

    h2 {
        font-size: 40px;
        font-weight: 400;
        margin-left: 22px;
        margin-bottom: 91px;
        border-bottom: 1px var(--m1-white) solid;

        &::first-letter {
            font-family: "Noto serif JP";
            font-size: 64px;
            font-weight: 700;
            padding-left: 12px;
        }
    }

    strong {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        display: block;
    }

    #special-swiper {
        .swiper-wrapper {
            padding-top: 120px;
            padding-bottom: 89px;

            .swiper-slide {
                position: relative;
                width: 180px;
                height: 400px;
                background-color: var(--m1-white);
                transition-property: all;
                transition-duration: .4s;

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #000;
                    opacity: .5;
                }

                &.swiper-slide-active {
                    scale: 1.3;
                    z-index: 1;
                    border-radius: 10%;

                    &::after {
                        opacity: 0;
                    }

                    .img-container {
                        img {
                            border-radius: 10%;
                        }
                    }

                    .point {
                        &::before {
                            border-bottom-right-radius: 10%;
                            border-bottom-left-radius: 10%;
                        }
                    }
                }

                .img-container {
                    width: 100%;
                    height: 100%;
                }

                .point {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 55%;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: #94FFFA;
                        opacity: .65;
                    }

                    dt,
                    dd {
                        font-size: 20px;
                        color: #000;
                        position: relative;
                    }

                    dt {
                        margin-top: 39px;
                        margin-left: 21px;
                    }

                    dd {
                        font-weight: 700;
                        text-align: right;
                        margin-top: 70px;
                        width: calc(100% - 1em);
                        margin-right: 1em;

                        span {
                            font-family: "CHIKARA DZUYOKU";
                            font-size: 36px;
                        }
                    }
                }
            }
        }
    }

    .name {
        font-size: 36px;
        font-weight: 700;
        position: relative;
        width: 5em;
        height: 1.5em;
        margin: 0 auto 64px;

        p {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;

            span {
                font-size: 20px;
                display: block;
                width: 200%;
            }
        }
    }

    form {
        font-size: 24px;
        color: #000;
        position: relative;
        width: 200px;
        height: 60px;
        margin: auto;

        button {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: var(--familyties-mustard);
            border-radius: 30px;

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

#management {
    position: relative;
    z-index: 1;
    padding-bottom: 45px;

    .bg-img {
        top: 75px;
        height: calc(100% - 33px);

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .5;
        }
    }

    .white {
        text-align: center;
        position: relative;
        z-index: 1;
        padding-top: 23px;
        padding-bottom: 11px;
        margin: 101px 13px 0;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            opacity: .65;
        }

        p {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.5em;
            margin-bottom: 40px;

        }

        >p {
            &:last-of-type {
                font-size: 40px;
                margin-top: 48px;
                margin-bottom: 0;

                span {
                    color: var(--m1-red);
                }
            }
        }
    }
}

#last-year {
    position: relative;
    z-index: 2;
    height: 100lvh;

    .bg-img {
        top: 75px;

        height: calc(100% - 75px);

        .img-container {
            position: relative;
            height: 50%;
            overflow: clip;
            pointer-events: none;

            &:first-of-type {
                p {
                    top: 98px;
                    left: 28px;
                }
            }

            &:last-of-type {
                p {
                    text-align: center;
                    top: 93px;
                    right: 14px;
                }
            }

            .swiper-wrapper {
                transition-timing-function: linear;

                .swiper-slide {
                    width: 50%;
                }
            }

            img {
                position: absolute;
                top: -25%;
                left: -25%;
                width: 150%;
                height: 150%;
                vertical-align: bottom;
            }

            p {
                font-size: 48px;
                font-weight: 700;
                -webkit-text-stroke: 10px var(--m1-white);
                paint-order: stroke;
                position: absolute;
                z-index: 1;

                span {
                    font-size: 64px;
                    color: var(--m1-red);
                }
            }
        }
    }
}

footer {
    padding-top: 100px;
    padding-bottom: 27px;
    background-color: #000;

    &:has(a.inactive) {
        .wrapper {
            clip-path: inset(0 100% 0 0);
        }
    }

    h2 {
        font-size: 48px;
        font-weight: 700;
        color: var(--m1-red);
        text-align: center;
        -webkit-text-stroke: 6px var(--m1-white);
        paint-order: stroke;
        position: relative;
        z-index: 1;

        img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            object-fit: contain;
            filter: grayscale(1);
            opacity: .2;
        }

        .m-1 {
            font-size: 64px;

            span {
                font-family: "League Gothic";
                display: inline-block;
                scale: 1.3 1;
                margin: 0 16px;
            }
        }

        .year {
            color: var(--m1-white);
            -webkit-text-stroke: unset;
            letter-spacing: 0.2em;
        }
    }

    .row-from-pc {
        position: relative;
        z-index: 1;
    }

    .wrapper {
        clip-path: inset(0);
        transition-duration: 1.2s;
    }

    p {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--m1-orange);
        padding: 21px 0;
        clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
        transition-duration: 1s;
    }

    a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 312px;
        padding: 21px 0 22px;
        margin: 31px auto 0;
        background-color: var(--familyties-mustard);
        border-radius: 50px;

        &:first-of-type {
            margin-top: 64px;
        }

        &:last-of-type {
            margin-bottom: 35px;
        }
    }

    small {
        color: var(--m1-white);
        display: block;
        width: fit-content;
        margin: auto;
    }
}

@keyframes dotGameFlash {
    0% {
        background-color: #57D5F8;
    }

    25% {
        background-color: hsl(from #57D5F8 h s calc(l - 40));
    }

    50% {
        background-color: #fff;
    }

    75% {
        background-color: #999;
    }

    100% {
        background-color: #57D5F8;
    }
}

@keyframes flashIn {
    0% {
        background-color: #57D5F8;
    }

    100% {
        background-color: rbga(#57D5F8 / 0);
    }
}

@keyframes driftX {
    from {
        left: 175px;
    }

    to {
        left: 0;
    }
}

@keyframes driftY {
    from {
        top: 175px;
    }

    to {
        top: 0;
    }
}

@keyframes driftRotate {
    0% {
        rotate: 90deg;
    }

    30% {
        rotate: 15deg;
    }

    90% {
        rotate: -10deg;
    }

    100% {
        rotate: 0;
    }
}

@keyframes opening {
    10% {
        background-color: #111;
    }

    14% {
        background-color: #fff;
    }

    18% {
        background-color: #111;
    }

    100% {
        pointer-events: none;
    }
}

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

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

/* @keyframes openingLogo {
    0% {
        transform-origin: 50% 80%;
        opacity: 0;
    }

    10% {
        opacity: 0;
        filter: invert(0);
    }

    13% {
        opacity: 1;
    }

    15% {
        filter: invert(1);
    }

    17% {
        filter: invert(0);
    }

    21% {
        top: 0;
        left: calc((100% - var(--opening-logo-size)) / 2);
        width: var(--opening-logo-size);
        rotate: 0deg;
        animation-timing-function: ease-in-out;
    }

    50% {
        left: calc((100% - var(--opening-logo-size)) / 2 + 100px);
        animation-timing-function: ease-in-out;
        rotate: 15deg;
    }

    55% {
        top: 10%;
        left: calc((100% - var(--opening-logo-size)) / 2);
        rotate: 15deg;
    }

    60% {
        rotate: -720deg;
    }

    80% {
        top: -30%;
    }

    85% {
        width: var(--logo-size);
        top: 0;
        left: 0;
        rotate: -720deg;
    }

    90% {
        filter: invert(0);
        rotate: -720deg;
    }

    95% {
        filter: invert(1);
    }

    97% {
        filter: invert(0);
        rotate: -1440deg;
    }

    99% {
        opacity: 1;
    }

    100% {
        width: var(--logo-size);
        left: 0;
        rotate: -1440deg;
    }
} */

@keyframes openingLogo {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
        /* filter: invert(0); */
    }

    14% {
        opacity: 1;
    }

    18% {
        /* filter: invert(1); */
    }

    40% {
        /* filter: invert(0); */
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes holding {
    from {
        overflow: clip;
    }

    to {
        overflow: clip;
    }
}

@keyframes parallaxImg {
    from {
        top: -40%;
    }

    to {
        top: 0;
    }
}

@keyframes opacityAnim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}