@charset "utf-8";
/* CSS Document */

#navToggle {
    display: none;
    /*通常時は非表示にしておきます*/
    position: absolute;
    /*bodyに対しての絶対位置指定です*/
    right: 13px;
    top: 13px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
}

#navToggle div {
    position: relative;
}

/*spanの絶対位置指定の親にします*/
#navToggle span {
    display: block;
    position: absolute;
    padding-top: 3px;
    /*#navToggle div に対して*/
    width: 100%;
    border-bottom: solid 3px white;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out
}

#navToggle span:nth-child(1) {
    top: 0
}

#navToggle span:nth-child(2) {
    top: 11px
}

#navToggle span:nth-child(3) {
    top: 22px
}

/* スマホ
-------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .nav_outer {
        padding: 0;
        min-width:inherit;
    }
    


    header nav {
        z-index: 1000000000000000;
        position: absolute;
        top: 50px;
        /*通常時はビュー外*/
        right: 0;
        /*通常時はビュー外*/
        background-color: rgba(70, 130, 180, 0.9);
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        width: 50%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s, visibility .5s;

    }

    header nav li {
        display: block;
        padding: 10px 0;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid #fff;
    }

    header nav li:last-child {
        border-bottom: none;
    }

    header nav li a {
        color: #fff;
        display: block;
    }

    .openNav nav {
        opacity: 1;
        visibility: visible;
        /* -moz-transform: translateX(-292px);
	-webkit-transform: translateX(-292px);
	transform: translateX(-292px)*/
    }

    /* Toggle(Button) */
    /*display:noneだったボタンを display:blockにして表示します*/
    #navToggle {
        display: block;
    box-sizing: content-box;
    }
        #navToggle div{
        position: relative;
    height: 30px;
    }

    /* Click Toggle(Button) */
    .openNav #navToggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .openNav #navToggle span:nth-child(2),
    .openNav #navToggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}