@charset "UTF-8";


/* --- 公演タイトル --- */
.frame-title {
}
.title {
  --width-title: 429;
  --left-title: 50;

  position: fixed;
  top: 100px;
  left: calc(var(--left-title) * 1px);
  z-index: 3;
}
/* --- 化粧部屋には秘密 --- */
.frame-secret {
}
.secret {
  --width-secret: 192;
  --right-secret: 150;

  position: fixed;
  top: 100px;
  right: calc(var(--right-secret) * 1px);
  z-index: 3;
}

/* --- メニュー --- */
#frame-menu {
  --top-frame-menu: 400;
  --left-frame-menu: 50;
  --width-frame-menu: 200;

  position: fixed;
  top: calc(var(--top-frame-menu) * 1px);
  left: calc(var(--left-frame-menu) * 1px);

  width: calc(var(--width-frame-menu) * 1px);;
  height: 400px;
  z-index: 3;
}
.menu {
  --width-menu: 189;

  margin-bottom: 5px;
}
.menu:hover {
  cursor: pointer;
}

/* 2151px未満 */
@media screen and (max-width: 2150px) {
  .frame-title {
  }
  .title {
    width: calc(var(--width-title) / 2150 * 100vw * 0.8);
  }
  .frame-secret {
  }
  .secret {
    width: calc(var(--width-secret) / 2150 * 100vw);
    right: calc(var(--right-secret) / 2150 * 100vw);
  }
  #frame-menu {
    top: calc(var(--top-frame-menu) / 2150 * 100vw * 0.8);
  }
  .menu {
  }
  .menu:hover {
  }
}

/* 1951px未満 */
@media screen and (max-width: 1950px) {
  .frame-title {
  }
  .title {
    width: calc(var(--width-title) / 1950 * 100vw * 0.75);
  }
  .frame-secret {
  }
  .secret {
    width: calc(var(--width-secret) / 1950 * 100vw * 0.75);
    right: calc(var(--right-secret) / 1950 * 100vw * 0.5);
  }
  #frame-menu {
    top: calc(var(--top-frame-menu) / 1950  * 100vw * 0.8);
    left: calc(var(--left-frame-menu) / 1950  * 100vw * 1);
  }
  .menu {
  }
  .menu:hover {
  }
}

/* 1501px未満 */
@media screen and (max-width: 1501px) {
  .frame-title {
  }
  .title {
    width: calc(var(--width-title) / 1500 * 100vw * 0.5);
    left: calc(var(--left-title) / 1500 * 100vw * 0.75);
  }
  .frame-secret {
  }
  .secret {
    width: calc(var(--width-secret) / 1500 * 100vw * 0.75);
    right: calc(var(--right-secret) / 1500 * 100vw * 0.75);
  }
  #frame-menu {
    top: calc(var(--top-frame-menu) / 1500 * 100vw * 0.75);
    left: calc(var(--left-frame-menu) / 1500 * 100vw * 0.75);
    width: calc(var(--width-frame-menu) / 1500 * 100vw * 0.75);
  }
  .menu {
    width: calc(var(--width-menu) / 1500 * 100vw * 1.0);
  }
  .menu:hover {
  }
}

/* 1181px未満 */
@media screen and (max-width: 1181px) {
  .frame-title {
    display: none;
  }
  .title {
  }
  .frame-secret {
    display: none;
  }
  .secret {
  }
  #frame-menu {
    display: none;
  }
  .menu {
  }
  .menu:hover {
  }
}