@charset "utf-8";

@media screen and (max-width:767px){
    .fixed{
        top:0;
        left:0;
        width:100%;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.7;
        z-index: 9;
    }
    header .navBtn {
        display: none; 
        width: 30px;
        position: absolute;
        top: 24px;
        right: 15px;
        cursor: pointer;
    }
    header .navBtn span {
        display: block;
        height: 4px;
        width: 100%;
        background: #e60012;
        border-radius: 2px;
        transition: all .5s ease-in-out;
    }
    header .navBtn span:nth-of-type(2), header .navBtn span:nth-of-type(3) {
        margin-top: 5px;
    }
    header.navOpen .navBtn span:nth-of-type(1) {
        transform: translateY(9px) rotate(45deg);
    }
    header.navOpen .navBtn span:nth-of-type(2) {
        opacity: 0;
    }
    header.navOpen .navBtn span:nth-of-type(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    header.navOpen nav {
        opacity: 1;
        right: 0;
    }
    
    header h2 {
        padding-bottom: 10px;
    }
    header .navBtn {
        display: block;
    }
    header nav {
        position: fixed;
        top: 0;
        right: -100%; /*右に隠す*/
        width: 70%;
        max-width: 320px;
        z-index: 99;
    }
    header nav ul li {
        float: none;
        width: auto;
        background:
            linear-gradient(to bottom, rgba(125, 73, 52, 1)0%, rgba(43, 21, 18, 1)88%);
        border: none; /* これないと、もともと入れてた border-left も出る！ */
        border-bottom: 1px solid #fff;
        line-height: 2.2;
    }
    
    header {
        position: relative;
        z-index: 99;
    }    
    
}