.navs-bar{
    width: 100%;
    background-image: url(../img/header_bg.png);
    background-size: cover;
    aspect-ratio: 1920/109;

    position: fixed;
    z-index: 100;
    top: 0;
}

.nav-logo{
    position: fixed;
    width: calc(100dvw*95/1920);
    aspect-ratio: 95/39;
    left: calc(100dvw*27/1920);
    top: calc(100dvw*15/1920);
}

.menu-list{
    width: fit-content;
    display: flex;
    flex-direction: row;
    /* gap: calc(100dvw*25/1920); */
    margin: 0 auto;
    transform: translateY(calc(100dvw*15/1920));
}

.menu-list li{
    padding:0 calc(100dvw*25/1920);
    border-right: solid #c9aca5 1px;
}
.menu-list li:last-child{border-right: none;}

.menu-list li a{
    display: block;
    color: #c9aca5;
    text-decoration: none;
    font-size: calc(100dvw*21/1920);
}

/* mobile */
@media screen and (max-width: 767px) {
    .navs-bar{
        background-image: url(../img/m/header_bg.png);
        aspect-ratio: 640/157;
    }
    .nav-logo{
        width: calc(100dvw*136/640);
        aspect-ratio: 136/54;
        left: 50%;
        transform: translateX(-50%);
        top: calc(100dvw*20/640);
    }

    .nav-ham{
        display: block;
        width: calc(100dvw*72/640);
        aspect-ratio: 72/48;
        position: absolute;
        top: calc(100dvw*24/640);
        right: calc(100dvw*30/640);
    }

    .nav-ham.gaming{display: none !important;}

    .nav-container{
        position: fixed;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px); /* Safari需加前綴 */

        display: none !important;
    }

    .nav-container.expand{display: block !important;}

    .nav-close{
        display: block !important;
        width: calc(100dvw*54/640);
        aspect-ratio: 54/54;
        position: absolute;
        top: calc(100dvw*21/640);
        right: calc(100dvw*40/640);
    }

    .nav-main{
        width: 100dvw;
        height: fit-content;
        background-color: #c9aca5;
        padding: calc(100dvw*100/640);
        padding-top: calc(100dvw*75/640);
        padding-bottom: 0;
        box-sizing: border-box;

        background-image: url(../img/m/menu_deco.png);
        background-size: calc(100dvw* 587/640) auto;
        background-position: calc(100dvw* 35/640) calc(100dvw* 140/640);
        background-repeat: no-repeat;
    }

    .nav-main .menu-list{
        font-family: 'GenSenRounded2TW-M';
        width: 100%;
        text-align: center;
        margin: 0;
        flex-direction: column;
        transform: initial;
    }

    .nav-main .menu-list li{
        padding: calc(100dvw * 20 / 640) 0;
        border-right: 0;
        border-bottom: solid #917370 2px;
    }
    .menu-list li:last-child{
        border-bottom: none;
    }

    .nav-main .menu-list li a {
        color: #331a1a;
        font-size: calc(100dvw * 40 / 640);
    }

}