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

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

============================*/
/*ボタン部分
============================*/
/*#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:0;
  right:0;
  z-index:10;
  background:rgba(0,0,0,0.9);/*ハンバーガーメニュー背景色*/
}
#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: rgba(0,0,0,0.8);/*ハンバーガーメニュー背景色*/
  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 0 10px;
  margin-left:50px;
  margin-top:-50px;
}
#mb_hbmenu .mb_hbmenu_inner li {
  float:left;
  width:25%;
/*  margin-left:1.5%;*/
}
#mb_hbmenu .mb_hbmenu_inner li:first-child {
  margin-left:0;
}
#mb_hbmenu .mb_hbmenu_inner a {
  color:#ffffff;
  font-size:1.25em;
  line-height:1.6;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
  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;
}

/*PC/SP共通で使用する場合のスタイル、別にする場合は削除
=====================*/
@media screen and (max-width: 768px) {

#mb_hbmenu .hamburger-menu {
  width:40px;
  height:40px;
}
/*ボタン部分
============================*/
#mb_hbmenu .mb_hbmenu_inner {
  padding:10px 10px 10px 10px;
  margin-left:0;
  margin-top:0;
}
#mb_hbmenu .mb_hbmenu_inner li {
  float:none;
  width:100%;
}

#mb_hbmenu .mb_hbmenu_inner a {
  font-size:1em;
}

}