.menu {
    position: fixed;
    z-index: 9998;
}

/*チェックボックスを非表示*/
.menu-hidden {
    display:none;
}

#humberger-menu { /*メニューのクリック有効面*/
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 60px;
    display: inline-block;
    box-sizing: border-box;
}

#humberger-menu div { /*ハンバーガーメニューの書式*/
    position: absolute;
    left: 15px;/*横位置*/
    height: 3px;/*線の太さ*/
    width: 30px;/*幅の幅*/
    background-color: #999;/*線の色*/
    border-radius: 10px;/*線の丸み*/
    display: inline-block;
    box-sizing: border-box;
}
#humberger-menu div:nth-of-type(1) {/*一本目の高さ*/
    top: 35px;
}
#humberger-menu div:nth-of-type(2) {/*二本目の高さ*/
    top: 43px;
}
#humberger-menu div:nth-of-type(3) {/*三本目の高さ*/
    top: 51px;
}
#humberger-menu p {
    color: #999;
    font-size: 10px;
    font-family: sans-serif;
    position: absolute;
    left: 15px;
    top: 55px
}

#humberger-menu-s { /*メニューのクリック有効面(小さいウィンドウ用)*/
    position: absolute;
    top: 0px;
    left: 0px;
    height: 70px;
    width: 43px;
    display: inline-block;
    box-sizing: border-box;
}

#humberger-menu-s div { /*ハンバーガーメニューの書式(小さいウィンドウ用)*/
    position: absolute;
    left: 10px;/*横位置*/
    height: 3px;/*線の太さ*/
    width: 25px;/*幅の幅*/
    background-color: #999;/*線の色*/
    border-radius: 10px;/*線の丸み*/
    display: inline-block;
    box-sizing: border-box;
}
#humberger-menu-s div:nth-of-type(1) {/*一本目の高さ*/
    top: 24px;
}
#humberger-menu-s div:nth-of-type(2) {/*二本目の高さ*/
    top: 31px;
}
#humberger-menu-s div:nth-of-type(3) {/*三本目の高さ*/
    top: 38px;
}
#humberger-menu-s p {
    color: #999;
    font-size: 10px;
    font-family: sans-serif;
    position: absolute;
    left: 8px;
    top: 45px
}

.menu-close { /*メニューオープン時の薄いカバー*/
    display: none;/*初期は表示させない*/
    position: fixed;
    z-index: 9998;/*サイトの最前面に出す*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    transition: .3s ease-in-out;/*滑らかに表示させる*/
}

.menu-content { /*メニューの中身*/
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に出す*/
    width: 250px;/*メニュー幅*/
    height: 100%;
    background: #000;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示させる*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらカバーとメニューを表示*/
#menu-click:checked ~ .menu-close {
    display: block;
    opacity: .5;
}
#menu-click:checked ~ .menu-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*チェックが入ったらカバーとメニューを表示(小さいウィンドウ用)*/
#menu-click-s:checked ~ .menu-close {
    display: block;
    opacity: .5;
}
#menu-click-s:checked ~ .menu-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}