/* メニュー */
@charset "UTF-8";

.button-menu {
  top: 0%;
  right: 2%;
}

.frame-menu {
  --mt-frame-menu: 0;
  --width-frame-menu:  1200;
  --height-frame-menu: 300;
/*  --height-frame-menu: 400;		8ボタン */

  position: absolute;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;

  margin-top: calc(var(--mt-frame-menu) * 1px);
  height: calc(var(--height-frame-menu) * 1px);
  z-index: 2;
border: solid red 0px;
}

.menu {
}
.menu .items {

  display: flex;
  flex-direction: column;
  float: right;

  display: none;
}
.menu .item {
  --width-menu-item: 234;		/* display:flexの影響でSafariにおいて勝手に拡大される→幅指定 */
  --mr-menu-item: 50;
  --mt-menu-item: 3;

  margin-right: calc(var(--mr-menu-item) * 1px);
  margin-bottom: calc(var(--mt-menu-item) * 1px);
  width: calc(var(--width-menu-item) * 1px);
}  
.menu .item:hover {
  cursor: pointer;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

#menu-bside {
}
#menu-format {
}
#menu-schedule {
}
#menu-story {
}
#menu-fee {
}
#menu-campaign {
}
#menu-map {
}
#menu-faq {
}

/* 1201px未満 */
@media screen and (max-width: 1200px) {
  .button-menu {S
  }
  .frame-menu {
    --mt-frame-menu: 0;
    --width-frame-menu:  1200;
    --height-frame-menu: 300;
  /*  --height-frame-menu: 400;		8ボタン */

    position: absolute;
    top: 0;
    margin: 0 auto;
    left: 0;
    right: 0;

    margin-top: calc(var(--mt-frame-menu) / 1000 * 100vw);
    height: calc(var(--height-frame-menu) / 1000 * 100vw);
    z-index: 2;
  border: solid red 0px;

  }

  .menu {
  }
  .menu .items {
    display: flex;
    flex-direction: column;
    float: right;

    display: none;
  }
  .menu .item {
    --mr-menu-item: 50;
    --mt-menu-item: 3;

    margin-right: calc(var(--mr-menu-item) / 1000 * 100vw);
    margin-bottom: calc(var(--mt-menu-item) / 1000 * 100vw);
  }  
  .menu .item:hover {
  }

  #menu-bside {
  }
  #menu-format {
  }
  #menu-schedule {
  }
  #menu-story {
  }
  #menu-fee {
  }
  #menu-campaign {
  }
  #menu-map {
  }
  #menu-faq {
  }

}