@charset "utf-8";
/* 
==================================================
  ハンバーガーメニュー
==================================================
*/
/*メニュー部分*/
#ham-menu{
  background-color:#d4d0c4; /*メニュー背景色*/
  box-sizing:border-box;
  height:100%;
  padding:10px 20px; /*メニュー内左右上下余白*/
  position:fixed;
  left:-320px; /*メニュー横幅 width と合わせる*/
  top:0;
  transition:transform 0.2s linear 0s; /*0.3s はアニメーションにかかる時間*/
  width:320px; /*メニュー横幅*/
  z-index:9999;
  text-align: center;
}
#ham-menu li{
  font-size: 110%;
  list-style: none;
  margin:0;
  padding:20px 0;
  border-bottom:1px #aaa dotted;
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
}
#ham-menu li a{
  text-decoration:none;
  color:#4f4c43;
  padding:5px 0;
  display:block;
}
#ham-menu li a:hover{
  text-decoration:none;
}

/*メニューの後ろ側（黒い半透明）*/
#menu-background{
  background-color:#fff;
  display:block;
  height:100%;
  opacity:0;
  position:fixed;
  left:0;
  top:0;
  transition:all 0.2s linear 0s; /*0.3s はアニメーションにかかる時間*/
  width:100%;
  z-index:-1;
}

/*アイコン部分*/
#menu-icon{
  background:#d4d0c4; /*アイコン部分背景色*/
  color:#4f4c43; /*アイコン（フォント）色*/
  cursor:pointer;
  display:block;
  font-size:60px; /*アイコン（フォント）サイズ*/
  width:70px; /*アイコン横幅*/
  height:70px; /*アイコン縦高さ*/
  line-height:80px; /*縦位置中央化*/
  letter-spacing: 0;/*横位置中央化*/
  position:fixed;
  left:-1px;
  text-align:center;
  top:-1px;
  transition:all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
  z-index:9999;
}
.menuTxt{font-size:15px; font-weight:bold; line-height:35px;}

#menu-cb{
  display:none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,#menu-cb:checked ~ #menu-icon{
  transform:translate(320px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background{
  opacity:0.5;
  z-index:999;
}