@charset "UTF-8";

/* 背景 */
.outer {

  position: fixed;
  background-image: url("../../../images/event/2602deathvehicle/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 {
  --width-kv: 1200;
  --width-title: 510;
  --top-title: 150;

  position: fixed;
  top: calc(var(--top-title) * 1px);
  left: calc(((100vw - var(--width-kv) * 1px) / 2 - var(--width-title) * 1px) / 2);
  z-index: 3;
}

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

  position: fixed;
  top: calc(var(--top-catch) * 1px);
  right: calc(((100vw - var(--width-kv) * 1px) / 2 - var(--width-catch) * 1px) / 2);
  z-index: 3;
}


/* 2200px未満 */
@media screen and (max-width: 2200px) {
  .frame-title {
  }
  .title {
    width: calc(var(--width-title) / 2200 * 100vw * 0.8);
    left: calc(((100vw - var(--width-kv) / 2200 * 100vw) / 2 - var(--width-title) / 2200 * 100vw * 0.8) / 2);
  }
  .frame-catch {
  }
  .catch {
    width: calc(var(--width-catch) / 2200 * 100vw);
    right: calc(((100vw - var(--width-kv) / 2200 * 100vw) / 2 - var(--width-catch) / 2200 * 100vw) / 2);
  }
}

/* 2000px未満 */
@media screen and (max-width: 2000px) {
  .frame-title {
  }
  .title {
    width: calc(var(--width-title) / 2000 * 100vw * 0.6);
    left: calc(((100vw - var(--width-kv) / 2000 * 100vw) / 2 - var(--width-title) / 2000 * 100vw * 0.6) / 2);
  }
  .frame-catch {
  }
  .catch {
    width: calc(var(--width-catch) / 2000 * 100vw);
    right: calc(((100vw - var(--width-kv) / 2000 * 100vw) / 2 - var(--width-catch) / 2000 * 100vw) / 2);
  }
}

/* 1800px未満 */
@media screen and (max-width: 1800px) {
  .frame-title {
  }
  .title {
    display: none;
  }
  .frame-catch {
  }
  .catch {
    display: none;
  }
}