.m-header{
   display: none;
}

@media screen and (max-width: 720px) {
 
.menu{
   display: none;
}

.m-header{
   display: block;
}


footer{
  padding: 15px;
}

footer h2{
  font-size: 20px;
}

footer p{
margin: 3px 0;
}


.m-menu{
   text-align: center;
}

.m-menu a{
   display: block;
   cursor: pointer;
   color: black;
   width: 100%;
   text-decoration: none;
   letter-spacing: 3px;
   padding: 30px 0;
   border-bottom: 1px dashed #cccccc;
   transition: all 0.7s;
}

.m-menu a:hover{
  background-color: #e9e9e9;
}


.m-header {
   padding:30px;
 }
 
 #nav-drawer {
   float: right;
   position: relative;
 }
 
 /*チェックボックス等は非表示に*/
 .nav-unshown {
   display:none;
 }
 
 /*アイコンのスペース*/
 #nav-open {
   display: inline-block;
   width: 30px;
   height: 22px;
   vertical-align: middle;
 }
 

 /*ハンバーガーアイコンをCSSだけで表現*/
 #nav-open span, #nav-open span:before, #nav-open span:after {
   position: absolute;
   height: 3px;/*線の太さ*/
   width: 25px;/*長さ*/
   border-radius: 3px;
   background: #555;
   display: block;
   content: '';
   cursor: pointer;
 }
 #nav-open span:before {
   bottom: -8px;
 }
 #nav-open span:after {
   bottom: -16px;
 }
 
 /*閉じる用の薄黒カバー*/
 #nav-close {
   display: none;/*はじめは隠しておく*/
   position: fixed;
   z-index: 99;
   top: 0;/*全体に広がるように*/
   left: 0;
   width: 100%;
   height: 100%;
   background: black;
   opacity: 0;
   transition: .3s ease-in-out;
 }
 
 /*中身*/
 #nav-content {
   overflow: auto;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;/*最前面に*/
   width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
   max-width: 330px;/*最大幅（調整してください）*/
   height: 100%;
   background: #fff;/*背景色*/
   transition: .3s ease-in-out;/*滑らかに表示*/
   -webkit-transform: translateX(-105%);
   transform: translateX(-105%);/*左に隠しておく*/
 }
 
 /*チェックが入ったらもろもろ表示*/
 #nav-input:checked ~ #nav-close {
   display: block;/*カバーを表示*/
   opacity: .5;
 }
 
 #nav-input:checked ~ #nav-content {
   -webkit-transform: translateX(0%);
   transform: translateX(0%);/*中身を表示（右へスライド）*/
   box-shadow: 6px 0 25px rgba(0,0,0,.15);
 }
 
}