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

#ham-menu li a:hover{
  text-decoration:none;
  color: #e3d5ba;
}

/*メニューの後ろ側（黒い半透明）*/
#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{
  border-radius:0 0 0 0; /*角丸*/
  color:#e3d5ba; /*アイコン（フォント）色*/
  cursor:pointer;
  display:block;
  font-size:60px; /*アイコン（フォント）サイズ*/
  width:70px; /*アイコン横幅*/
  height:70px; /*アイコン縦高さ*/
  line-height:75px; /*縦位置中央化*/
  letter-spacing: -0.1em;/*横位置中央化*/
  position:fixed;
  right:0;
  text-align:center;
  top:0;
  transition:all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
  z-index:1000;
  background: #333127;
}
.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;
}