@charset "utf-8";
/*============================

metalbuild ハンバーガーメニュー用css

============================*/
@media screen and (min-width: 768px) {
/*ボタン部分
============================*/
/*#container {
  position:relative;
}*/
#mb_hbmenu.mb_hbmenu2 {
  position:fixed;
  top:0;
  left:50%;
  width:100%;
  z-index:10;
  background:rgba(0,0,0,0.8);
}

#mb_hbmenu {
  position:fixed;
  top:15px;
  right:10px;
  z-index:10;
  background:rgba(0,0,0,0.8);/*ハンバーガーメニュー背景色*/
}
#mb_hbmenu * {
  margin:0;
  padding:0;
  list-style-type:none;
}

:root {
  --hamburger-menu-size: 100%; /* メニューの大きさ */ 
  --hamburger-menu-padding: 12px;  
  --hamburger-menu-border-px: 2px; /* 線の太さ */
  --hamburger-menu-border-color: #ffffff; /* 線の色 */
  --hamburger-menu-transition: 0.3s; /* アニメーション秒数 */
}
#mb_hbmenu .hamburger-menu {
  cursor: pointer;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: rgb(98, 85, 164);/*ハンバーガーメニュー背景色*/
/*  border:1px solid #ffffff;*//*メニューに罫線をつける場合*/
}
#mb_hbmenu .hamburger-menu-line {
  position: absolute;
  transition: var(--hamburger-menu-transition);
  width: calc(100% - var(--hamburger-menu-padding) * 2);
  height: var(--hamburger-menu-border-px);
  background-color: var(--hamburger-menu-border-color);
}
#mb_hbmenu .line-top {
  top: var(--hamburger-menu-padding);
  left: var(--hamburger-menu-padding);
}
#mb_hbmenu .line-middle {
  top: calc(50% - var(--hamburger-menu-border-px)/2);
  left: var(--hamburger-menu-padding);
}
#mb_hbmenu .line-bottom {
  bottom: var(--hamburger-menu-padding);
  left: var(--hamburger-menu-padding);
}
#mb_hbmenu .hamburger-menu-active > .line-top {
  top: calc(50% - var(--hamburger-menu-border-px)/2);
  transform: rotate(45deg);
}
#mb_hbmenu .hamburger-menu-active > .line-middle {
  width: 0;
  height: 0;
  left: var(--hamburger-menu-padding);
}
#mb_hbmenu .hamburger-menu-active > .line-bottom {
  top: calc(50% - var(--hamburger-menu-border-px)/2);
  transform: rotate(-45deg);
}

/*ボタン部分
============================*/
#mb_hbmenu .mb_hbmenu_inner {
/*  position:absolute;
  top:0;
  left:0;*/
  width:100%;
  height:100%;
  padding:10px 10px 10px 10px;
/*  margin-left:60px;
  margin-top:-56px;*/
  margin-left:4px;
}
#mb_hbmenu .mb_hbmenu_inner a {
  color:#ffffff;
  font-size:1.6em;
  line-height:1.4;
  text-decoration:none;
  display:block;
  margin-bottom:15px;
  position:relative;
  padding-left:1.3em;
}
#mb_hbmenu .mb_hbmenu_inner a:before {
  content:">";
  position:absolute;
  left:0;
  top:3px;
  transform:rotate(90deg);
  border:1px solid #fff;
  line-height:1;
  padding:0 2px;
}
#mb_hbmenu .mb_hbmenu_inner .mb_hm_otherlink a:before {
  content:">";
  position:absolute;
  transform:rotate(0);
  left:0;
  top:3px;
  line-height:1;
  border:0;
}
#mb_hbmenu .mb_hbmenu_inner a:hover {
  opacity:0.8;
}
#mb_hbmenu .mb_hbmenu_inner a:hover:before {
  color:#000;
  background:#fff;
}

}