@charset "utf-8";

.sp_nav {
    display: none;
}

.sp-only {
    display: none;
}


/*  FACILITY画像切り替え  */

@media screen and (max-width: 767px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .flex_header.page.pc-only {
        display: none;
    }

    .sp_nav {
        display: block;
    }

    .smart-nav {
        position: fixed;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(33, 33, 33, 0.90);
        z-index: 12;

        ul#menu-smart-menu {
            position: relative;
            top: 40%;
            left: 40%;
            transform: translate(-50%, -50%);
            width: 50%;
            border-left: solid 1px #fff;
        }

        li.menu-item a {
            color: #fff;
            font-size: 2.4vw;
            font-weight: 300;
            margin: 1vw 0;
            padding-left: 4vw;
            text-align: left;
        }
    }

    ul.sub-menu {
        margin-left: 5vw;
    }

    .sp_nav li.current-menu-ancestor > a,
    .sp_nav li.current-menu-item > a, 
    .sp_nav li.current-menu-parent > a, 
    .sp_nav li.current-post-ancestor > a, 
    .sp_nav li.current_page_ancestor > a, 
    .sp_nav li.current_page_parent > a, 
    .sp_nav li > a:hover:after {
        color: #9e9e9e;
        font-weight: 500;
    }

    #smart-nav {
        display: none;
    }

    .nav_wrap {
        z-index: 99;
        position: relative;
    }

    #navbutton {
        position: fixed;
        top: 0;
        right: 2%;
        margin: 10px 10px;
        background: none;
        border: none;
        z-index: 10;
    }

    .menu_bars {
        content: url(../img/common/menu_i.svg);
        width: 34px;
        height: 34px;
        padding: 0 0;
    }

    .menu_bars.menu_times {
        content: url(../img/common/time_i.svg);
        width: 34px;
        height: 34px;
        padding: 0 0;
    }

    .footer_float {
        position: fixed;
        bottom: 0;
        z-index: 99999;
    }

    .float {
        width: 50%;
    }
}

@media screen and (max-width: 414px) {

    .smart-nav li.menu-item a {
        font-size: 4.4vw;
        margin: 1vw 0;
    }

    .smart-nav ul#menu-smart-menu {
        position: relative;
        top: 48%;
        left: 40%;
        transform: translate(-35%, -50%);
        width: 65%;
        border-left: solid 1px #fff;
        text-align: left;
    }

}