@charset "UTF-8";

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

    .menu {
        position: fixed;
        z-index: 999;
        top: 18px;
        right: 14px;
        display: block;
        box-sizing: content-box;
        -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        border: 0;
        outline: 0;
        background-color: transparent;
    }

    .menu.active {
        position: fixed;
        background-color: transparent;
    }

    .menu:hover {
        cursor: pointer;
        opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "alpha(opacity=100)";
    }

    /* ナビボタン */
    #btn_nav {
        border: solid 1px #707070;
        background-color: #FFF;
        border-radius: 50px;
        padding: 10px;
        height: 36px;
        width: 36px;
    }

    #btn_nav .menu__line {
        position: relative;
        display: block;
    }

    #btn_nav .menu__line,
    #btn_nav .menu__line:before,
    #btn_nav .menu__line:after {
        width: 100%;
        height: 1.5px;
        -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        background-color: #707070;
    }

    #btn_nav .menu__line:before {
        position: absolute;
        top: 6px;
        left: 0;
        content: ' ';
    }

    #btn_nav .menu__line:after {
        position: absolute;
        top: 12px;
        left: 0;
        content: ' ';
    }

    #btn_nav .menu__line.active {
        background-color: transparent;
    }

    #btn_nav .menu__line.active:before,
    #btn_nav .menu__line.active:after {
        top: 6px;
        background-color: #707070;
    }

    #btn_nav .menu__line.active:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #btn_nav .menu__line.active:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /*gnav*/
    .gnav {
        min-width: 300px;
        width: 100%;
        height: 100vh;
        overflow: scroll;
        background-color: #F1f1f1;
        color: #121212;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
    }

    .gnav_wrap {
        display: block;
        position: absolute;
        width: 100%;
        padding: 35px 2%;
        top: 45%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


    /* contents_list */
    .gnav_menu {
        display: block;
        text-align: center;
        font-size: 1.2em;
    }

    .gnav_menu li {
        margin-bottom: 1.35em;
        margin-right: 0;
    }

    .gnav_menu li:last-child {
        margin-bottom: 0;
    }

    /* link */
    .gnav a:link, .gnav a:visited, .gnav a:active {
        color: #121212;
        text-decoration: none;
    }



}