/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn {
  position: fixed;
  top: 5px;
  right: 10px;
  z-index:999 !important;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #b297bb;
  border-radius: 8px;
}
/*----------------------------
* メニュー本体
*----------------------------*/
.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  width: 101vw;
max-width:550px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: top;
  background-color: rgba(0, 0, 0, 0.9);
  padding-top: 80px;
}
.menu__item {
  width: 80%;
  margin: 0 auto;
  height: auto;
  padding: 8px;
  text-align: left;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: normal;
  box-sizing: border-box;
}
.bor {
  border-bottom: 1px dotted #999;
  margin-bottom: 8px;
}
.menu__item a {
  text-decoration: none;
  color: #FFF;
  display: block;
}
.menu__item a:hover {
  color: #FFF;
  position: relative;
}
.menu__item a::before {
  content: "▶"; /* マーク */
  position: absolute;
  right: 45px;
  padding-top: 3px;
  color: #CCC; /* 色を変更 */
  font-size: 8px !important; /* サイズ調整 */
}
/*----------------------------
* アニメーション部分
*----------------------------*/
/* アニメーション前のメニューの状態 */
.menu {
  transform: translateX(-100vw);
  transition: all .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active {
  transform: translateX(0);
}
.btn {
  display: block;
  font-size: 22px;
}
.btnx {
  display: none;
}
.btn.batsu {
  display: none;
}
.btnx.batsu {
  display: block;
  font-size: 22px;
}

.btn2 {
  display: block;
  font-size: 22px;
}

.btn2.batsu {
  display: none;
}