*{
    margin: 0;
    padding: 0;
}
body{
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.1em;
    letter-spacing: 0.14em;
    background: #111;
    color: #fff;
    transition: 1s;
}
#main_bg{
    position: fixed;
    width: 100svw;
    height: 100svh;
    background: url(https://tokio.tokyo/cms2022/wp-content/uploads/2026/01/White_une_bg-scaled.png);
    background-size: 130%;
    background-attachment: fixed;
    background-position: 0 50%;
    opacity: 0.1; 
    transition: .5s;
    z-index: -1;
    @media screen and (max-width:690px) {
        background-size: 400%;
    }
}
#hyper_lp{
    .sp_on{
        display: none;
        @media screen and (max-width:690px) {
            display: block;
        }
    }
    scroll-snap-type: y mandatory;
    section{
        width: 100svw;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .FV{
        img{
            width: 200px;
            margin-bottom: 50px;
            @media screen and (max-width:690px) {
                width: 35vw;
            }
        }
        h1{
            font-size: 1.5em;
            line-height: 2.5em;
            
            font-weight: 200;
            text-align: center;
            @media screen and (max-width:690px) {
                font-size: 4vw;
            }
        }
    }
    .scroll_down{
        position: absolute;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1em;
        
        font-weight: 100;
        span{
            width: 2px;
            height: 80px;
            background: linear-gradient(to bottom,#111 10%,#E6D98B 15% ,#111 35%);
            background-size: 20% 200%;
            animation: scroll_down_anime 1.5s linear infinite;
        }
    }

    h2{
        font-size: 2em;
        font-weight: 200;
        text-align: center;
        
        line-height: 1.8em;
        strong{
            color: #E6D98B;
            font-size: 1em;
            font-weight: 200;
        }
        @media screen and (max-width:690px) {
            font-size: 5svw!important;
        }
    }

    .about{
        .point{
            padding: 2.5em 0;
            h3{
                font-size: 1.8em;
                text-align: center;
                font-weight: 200;
                color: #999;
                line-height: 3.3em;
                strong{
                    color: #E6D98B;
                    font-size: 1em;
                    font-weight: 200;
                }

                @media screen and (max-width:690px) {
                    font-size: 4.5svw;
                    line-height: 2.5em;
                }
            }
        }
    }

    .hyper_all_img{
        width: 80svw;
        max-width: 1200px;
        @media screen and (max-width:690px) {
            margin-top: 10vw;
        }
    }

    .hyper_pyramid_img{
        margin-top: 30px;
        width: 90svw;
        max-width: 900px;
        /* margin-left: min(-5svw,50px); */
        @media screen and (max-width:690px) {
            /* margin-left: 0; */
        }
    }

    .difference{
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5em;
        p{
            
            width: 90svw;
            max-width: 350px;
            line-height: 2em;
            font-weight: 100;
        }
        img{
            width: 90svw;
            max-width: 500px;
        }
    }

    table{
        margin: 3em auto;
        border: unset;
        border-collapse: collapse;
        color: #333;
        tr{
            background: #fff;
            &:nth-child(2n){
                background: #f6f6f6;
            }
        }
        th{
            font-weight: 600;
        }
        td{
            font-weight: 100;
        }
        td,th{
            width: 15em;
            text-align: center;
            vertical-align: middle;
            padding: 1.5em 0;
            line-height: 2em;
            height: 5em;
            @media screen and (max-width:690px) {
                width: 30%;
                font-size: 0.6em;
            }
        }
        img{
            width: 70px;
            @media screen and (max-width:690px) {
                width: 40px;
            }
        }
    }

    .flow{
        @media screen and (max-width:690px) {
            height: 2000px;
            h2{
                font-size: 6svw;
            }
        }
    }
    .hyper_flow{
        margin: 5vh 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 1em;
        @media screen and (max-width:690px) {
            flex-direction: column;
        }
        div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1em;
            width: 16em;
            max-width: 25svw;
            @media screen and (max-width:690px) {
                width: 80svw;
                max-width: 80svw;
            }
            img{
                width: 100%;
            }
            p{
                font-size: 0.9em;
                line-height: 1.8em;

            }
            a{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 1em 0;
                font-size: 1em;
                background: #444;
                color: #fff;
                text-decoration: none;
                
            }
        }
        span{
            display: block;
            width: 2em;
            height: 3em;
            max-width: 2svw;
            max-height: 3svw;
            background: #777;
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
            margin: auto;
            @media screen and (max-width:690px) {
                width: 3em;
                height: 2em;
                max-width: unset;
                max-height: unset;
                clip-path: polygon(0 0, 50% 100%, 100% 0);
            }
        }
    }

    .last{
        h2{
            font-size: 2em;
            line-height: 2.5em;
            margin-bottom: 1.5em;
        }
    }
    .contact_link{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        width: 16em;
        height: 4.2em;
        line-height: 1.5em;
        text-decoration: none;
        text-align: center;
        color: #fff;
        background: linear-gradient(45deg,#404040,#E6D98B,#404040);
        background-size: 200%;
        background-position: center;
        transition: .5s;
        @media screen and (max-width:690px) {
            font-size: 20px;
        }
        small{
            font-size: 0.6em;
        }
        &:hover{
            background-size: 100%;
            scale: calc(0.95);
        }
    }
}
@keyframes scroll_down_anime {
    0%{
        background-position: 100% 100%;
    }
    100%{
        background-position: -100% -100%;
    }
}