@charset "UTF-8";

:root {
  --rate: 0.70;		/* 全体を縮小 */
  --width-kv: 1200;
  --width-title: 458;
}

/* 背景 */
.outer {
  position: fixed;
  background-image: url("../../../images/event/2606scramble/wide/outer.png");
  background-position: 50% top;
  background-repeat: repeat-y;

  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100vw;
  height: 100%;
  z-index: -2;
}

/* --- 公演タイトル --- */
.frame-title {
}
.title {
  --top-title: 100;
  --offset-title: 550;

  position: fixed;
  top: calc(var(--top-title) * 1px);
  right: calc(50% + var(--offset-title) * 1px);
  z-index: 3;
}

/* --- メニュー --- */
#frame-menu {
  --top-frame-menu: 430;
  --offset-frame-menu: 785;
  --width-frame-menu: 250;

  position: fixed;
  top: calc(var(--top-frame-menu) * 1px);
  right: calc(50% + var(--offset-frame-menu) * 1px);

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

border: solid black 0px;
}
.menu {
  --width-menu: 191;

  margin-bottom: 5px;
  width: calc(var(--width-menu) * 1px);
}
.menu:hover {
  cursor: pointer;
}

/* --- キャッチ --- */
.frame-catch {
}
.catch {
  --width-kv: 1200;
  --top-catch: 120;
  --width-catch: 239;
  --offset-catch: 650;

  position: fixed;
  top: calc(var(--top-catch) * 1px);
  left: calc(50% + var(--offset-catch) * 1px);
  z-index: 3;
}


/* 2200px未満 */
@media screen and (max-width: 2200px) {
  .frame-title {
  }
  .title {
    --offset-title: 500;
    right: calc(50% + var(--offset-title) * 1px);
    width: calc(var(--width-title) * 1px * 0.9);
  }
  #frame-menu {
    --offset-frame-menu: 690;
    right: calc(50% + var(--offset-frame-menu) * 1px);
  }
  .frame-catch {
  }
  .catch {
  --offset-catch: 500;

  left: calc(50% + var(--offset-catch) * 1px);
  width: calc(var(--width-catch) * 1px *  0.9);
  }
}

/* 2000px未満 */
@media screen and (max-width: 2000px) {
  .frame-title {
  }
  .title {
    --offset-title: 450;
    right: calc(50% + var(--offset-title) * 1px);
    width: calc(var(--width-title) * 1px * 0.8);
  }
  #frame-menu {
    --offset-frame-menu: 550;
    right: calc(50% + var(--offset-frame-menu) * 1px);
  }
  .frame-catch {
  }
  .catch {
    width: calc(var(--width-catch) * 1px * 0.8);
  }
}
/* 1600px未満 */
@media screen and (max-width: 1600px) {
  .frame-title {
  }
  .title {
    display: none;
  }
  #frame-menu {
    display: none;
  }
  .frame-catch {
  }
  .catch {
    display: none;
  }
}