/*ハンバーガーメニュー用*/
/*メニュー部分*/
#ham-menu {
    background-color: #7900c4; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    /*padding: 10px 40px;*/ /*メニュー内部上下左右余白*/
    position: fixed;
    right: -50vw; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 50vw; /*メニュー横幅①*/
    z-index: 20000;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu #menubar {
background-color: #7900c4; /*ボタン部分背景色*/
color: #ffffff; /*アイコン（フォント）色*/
display: block;
font-size: 10vw; /*アイコン（フォント）サイズ*/
height: 13vw;
line-height: 13vw; /*縦位置中央化*/
position: absolute;
right: 100%;
text-align: center;
top: 0;
width: 13vw;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu #menubatsu {
    background-color: #7900c4; /*ボタン部分背景色*/
    color: #ffffff; /*アイコン（フォント）色*/
    display: block;
    font-size: 10vw; /*アイコン（フォント）サイズ*/
    height: 13vw;
    line-height: 13vw; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 13vw;
    display: none;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:active #menubar {
 background-color: #ffffff;
 color: #7900c4;
}


#ham-menu.clicked {
    transform: translate(-50vw); /*メニュー横幅①と合わせる*/
}

#ham-menu.clicked + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 10001;
}

#ham-menu.clicked #menubar{
    display: none;
}

#ham-menu.clicked #menubatsu{
    display: inherit;
}

#ham-menu.clicked:active #menubatsu {
 background-color: #ffffff;
 color: #7900c4;
}

#ham-menu h3 {
 font-size: 3.5rem;
 text-align: center;
 line-height: 1.1rem;
 color: #ffffff;
}

/*ハンバーガーメニューホバー時のアイコン*/
#ham-menu ul {
 padding: 0px;
}

#ham-menu ul a {
  text-decoration: none;
  color: #ffffff;
}

#ham-menu ul a li:hover {
  background-color: #ffffff;
  color: #58009b;
}

#ham-menu li {
  list-style: none;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ffffff;
  margin-left: 1px;
  margin-right: 1px;
   font-size: 2.5rem;
   text-align: center;
   line-height: 0.9rem;
}

#ham-menu .menuen {
 font-size: 0.9rem;
}