@charset "utf-8";



/*  Modules header nav
*/

.main-navigation .menu {
    list-style-type: none;
    margin: 0;
    padding: 1em;

    display: flex;
    justify-content: center;
    align-items: center;
}

.main-navigation .menu-item {
    width: 90%;
}

.main-navigation .menu-item:nth-child(3) {
    width: 100%;
}

.main-navigation .menu-item a {
    padding: 0.5em 1em;

    color: #707070;
    font-size: 1.3em;
    text-align: center;
}

.main-navigation .menu-item a:hover {
    background-color: var(--bg-color-primary);
    color: var(--font-color-sub);
}



.menu-item .sub {
    font-size: var(--font-size-main);
    width: 100%;
}



/*  Modules disable smartphone menu
*/

.main-navigation-key {
    display: none;
}



/*  Modules footer nav
*/

.footer-navigation .menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-navigation .menu-item a {
    padding: 1em;

    color: #fff;
    font-size: 1.3em;
}



/*  pc x-small : pc small ((1024 + 1366) / 2)
*/

@media screen and (max-width: 1195px) {
    .main-navigation .menu {
        padding: 0.5em 0;
    }

    .main-navigation-value .menu-item {
        max-width: 33.333%;
    }

    .main-navigation .menu-item:nth-child(3) {
        width: 110%;
    }

    .main-navigation .menu-item a,
    .footer-navigation .menu-item a {
        font-size: 1em;
    }

    .main-navigation .menu-item a .sub,
    .footer-navigation .menu-item a .sub {
        font-size: 0.9em;
    }
}



/*  pc x-small 1024px under
*/
@media screen and (max-width: 1023px) {
    .main-navigation .menu {
        flex-wrap: wrap;
    }
}



/*  new iPad portrate : pc xx-small ((810px + 1024px) / 2)
*/

@media screen and (max-width: 917px) {
    .main-navigation {
        position: fixed;
        z-index: 65535;
        top: 0;
        left: 0;
        width: 100%;
        margin: auto;

        padding-top: env(safe-area-inset-top);
    }

    .admin-bar.scroll-top .main-navigation {
        top: 46px;
    }

    .main-navigation-key {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em;
        background-color: var(--color-white);
    }

    .main-navigation-key img {
        height: 3em;
    }

    .main-navigation-value {
        position: absolute;
        top: 64px;
        right: -100vw;
        width: 80%;
        background-color: var(--color-white);
    }

    .main-navigation-value.active {
        right: 0;
    }

    .main-navigation-value .menu-item {
        width: 100%;
        max-width: 100%;
    }

    .main-navigation-value .menu-item a {
        padding: 1em;
        text-align: left;
    }
}