/*ハンバーガーメニュー用*/
/*メニュー部分*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    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: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    display: block;
    font-size: 10vw; /*アイコン（フォント）サイズ*/
    height: 13vw;
    line-height: 13vw; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 13vw;
}

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

/*透過背景部分*/
#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: #9fb4ff;
	
}


#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: #9fb4ff;
}

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

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

#ham-menu ul a {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}

#ham-menu ul a li:hover {
  background-color: #9fb4ff;
  color: #000000;
}

#ham-menu li {
  list-style: none;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #000000;
  margin-left: 1px;
  margin-right: 1px;
   font-size: 2.5rem;
   text-align: center;
   line-height: 1.5rem;
  ont-family: 'メイリオ', 'Meiryo', sans-serif;
}

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