@charset "utf-8";
/* 
==================================================
  ハンバーガーメニュー
==================================================
*/
/*メニュー部分*/
#ham-menu{
  background-color:#ececec; /*メニュー背景色*/
  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;
    font-family: 'Bebas Neue', cursive;
    font-weight: 400;
  text-align: center;
}
#ham-menu li{
  font-size: 130%;
  list-style: none;
  margin:0;
  padding:10px 0;
  border-bottom:1px #aaa solid;
}
#ham-menu li a{
  text-decoration:none;
  color:#000;
  padding:5px 0;
  display:block;
}
#ham-menu li a:hover{
  text-decoration:none;
    color: #d5038d;
}

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