/* ***************************** mark - checkbox ************************** */
#nav-checkbox { display: none; }

/* ***************************** mark - 3本線 ***************************** */
#nav-open{
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;

    position: fixed;
    top:18px;
    right: 0;

    z-index: 9;
}

#nav-open span, 
#nav-open span:before, 
#nav-open span:after {
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background:#eee;
    display: block;
    content: '';
    cursor: pointer;
}

#nav-open span:before{ 
    transform : translateY(7px);
    -webkit-transform: translateY(7px);

}
#nav-open span:after{
    transform : translateY(11px);
    -webkit-transform: translateY(11px);
}

/* ***************************** side-menu ***************************** */
#nav-contents{
    width: 60%;
    height: 100%;

    position: fixed;
    top:0;

    overflow: auto; /* はみ出した場合の処理*/
    z-index: 999;

    background-color:whitesmoke; 

    -webkit-transition: .3s ease-in-out; 

    transition: .3s ease-in-out; 
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%); 
}



/* ***************************** 閉じる用の薄黒カバー ********************* */
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

/* *************************** 動作 チェックが入ったら ******************** */
/*中身*/
#nav-checkbox:checked ~ #nav-contents {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out; 
    -webkit-transform: translateX(0%);
    transform: translateX(0%); 
}

/*カバー*/
#nav-checkbox:checked ~ #nav-close {
    display: block;
    opacity: .5;
}


/* ================================================================= */
/*  sp over size only                                                */
/* ================================================================= */
@media screen and (min-width: 768px) {
    /* side-menu */
    #nav-contents{ display: none; }

    /* mark */
    #nav-open{ display: none;}
}