@charset "utf-8";
body{
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: white;
}
#wrap{
    width: 100%;
    height: auto;
}
#l_wrapper{
    width: 100%;
    height: auto;
}
.loading__contents{
    width: 100%;
    height: 100dvh;
    background-color: var(--color--black);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
    .loading__inner{
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }
        .loading__text__wrap{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
            .loading__text{
                font-size: 30px;
                letter-spacing: 0.1em;
                line-height: 1.5;
                text-align: center;
                color: var(--color--white);
                position: relative;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                column-gap: 0.1em;
            }
                .loading__text span{
                    display: block;
                    transform: translateY(100%);
                    transition: transform 0.3s ease; 
                }
                .loading__text span.show_up{
                    transform: translateY(0%);
                }
                .loading__text span.show_up.loaded{
                    animation: down 0.5s cubic-bezier(.24,.14,.93,.7) forwards;
                }
                @keyframes down {
                    0%{
                        transform: translateY(0%);
                    }
                    40%{
                        transform: translateY(-10%);
                    }
                    100%{
                        transform: translateY(100%);
                    }
                }
            .loading__text::after{
                content: "";
                width: 100%;
                height: 1px;
                background-color: var(--color--white);
                position: absolute;
                bottom: 0;
                left: 0;
                animation: myon 0.5s ease;
                transform-origin: left center;
                transition: 0.3s cubic-bezier(.24,.14,.93,.7);
            }
            .loading__text.loaded::after{
                transform: scaleX(0);
            }
            @keyframes myon {
                0%{
                    transform: scaleX(0);
                }
                100%{
                    transform: scale(1);
                }
            }
#hero{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .hero__inner{
        width: 90%;
        height: auto;
        margin: 0 auto;
        max-width: 1200px;
    }
        .hero__nav__contents{
            width: 100%;
            height: auto;
        }
            .hero__nav__list{
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                column-gap: 30px;
            }
                .hero__nav__item{
                    width: 100%;
                    height: auto;
                    border-radius: 10px;
                    overflow: hidden;
                }
                    .hero__nav__link{
                        width: 100%;
                        height: 100%;
                        position: relative;
                        border-radius: 10px;
                        overflow: hidden;
                        flex-grow: 1;
                    }
                    .hero__nav__link::before{
                        content: "";
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: -100%;
                        background-color: var(--color--gray);
                        mix-blend-mode: multiply;
                        z-index: 1;
                        transition: 0.5s ease;
                    }
                    .hero__nav__link:hover::before{
                        top: 0;
                    }
                    .hero__nav__link:hover .nav__image{
                        transform: scale(1.05);
                    }
                    .hero__nav__link:hover .nav__text{
                        filter: blur(0);
                        color: var(--color--white);
                    }
                        .nav__image{
                            width: 100%;
                            height: auto;
                            transition: 0.5s ease;
                        }
                            .nav__image img{
                                width: 100%;
                                height: auto;
                            }
                        .nav__text{
                            font-size: 40px;
                            font-weight: 700;
                            letter-spacing: 0.1em;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            color: var(--color--white);
                            text-shadow: 0 1px 10px var(--color--black);
                            z-index: 2;
                            transition: 0.5s ease;
                        }
@media all and (max-width:1200px){
    .nav__text{
        font-size: 30px;
    }
}
/* Tablet ================================================== */
@media all and (max-width:820px){
        .header__link{
            font-size: 30px;
            text-align: center;
        }
#hero{
    display: block;
    padding-top: 180px;
    height: auto;
}
        .hero__nav__list{
            flex-wrap: wrap;
            column-gap: 10px;
            row-gap: 10px;
        }
            .hero__nav__item{
                width: 48%;
            }
                .nav__text{
                    font-size: 22px;
                }
}