@charset "utf-8";

/* ----- */

/* キービジュアル */
.kv {
}
/* メニュー */
.frame-menu {
  --height-frame-menu: 90;

  position: relative;
  height: calc(var(--height-frame-menu) * 1px);
}
/* メンテナンス */
.maintenance {
  width: 1000px;
  margin-top: 15px;
  margin-bottom: 15px;
}
/* ストーリー */
#frame-story {
}
.story {
}
/* ムービー */
#frame-movie {
  --pb-frame-movie: 30;

  margin-top: 50px;
  padding-bottom: calc(var(--pb-frame-movie) * 1px);
  position: relative;
}
.movie {
  --width-movie: 850;
  width: calc(var(--width-movie) * 1px);
}
.indicate {
  --offset-indicate: 170;
  --width-indicate: 255;

  position: absolute;
  left: calc(50% + var(--offset-indicate) * 1px);
  bottom: 0;
}
/* 出演・アーティスト */
#frame-artist {
}
.artist {
}
/* プレイ概要 */
#frame-format {
}
.format {
}
/* 参加方法 */
#frame-howto {
  position: relative;
}
.howto {
}
#button-ticket {
  --bottom-button-ticket: 70;
  --width-button-ticket: 541;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-button-ticket) * 1px);
}
/* 注意事項ボタン */
#frame-notice {
  --height-frame-notice: 2426;		/* 「注意事項」が表示されていない状態の高さ */

  position: relative;
/*
 background-image: url('../../../images/event/2507karaokevideo2/background.png');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
 */

  height: calc(var(--height-frame-notice) * 1px);
}
.background-notice {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
#button-notice {
  --top-button-notice: 70;
  --width-button-notice: 542;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-button-notice) * 1px);
}
/* 注意事項 */
.notice {
  --top-notice: 200;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-notice) * 1px);

  display: none;
}
/* よくある質問 */
.faq {
  --bottom-faq: 0;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-faq) * 1px);
}
#button-youtube {
  --bottom-button-youtube: 445;
  --offset-button-youtube: (-400);
  --width-button-youtube: 562;

  position: absolute;
  left: calc(50% + var(--offset-button-youtube) * 1px);
  bottom: calc(var(--bottom-button-youtube) * 1px);
}
/* よだか */
#frame-yodaka {
  position: relative;
}
.yodaka {
}
.logo {
  --offset-logo: 170;
  --top-logo: 200;
  --width-logo: 248;

  position: absolute;
  top: calc(var(--top-logo) * 1px);
  right: calc(50% + var(--offset-logo) * 1px);
}
.answer {
  --offset-answer: 170;
  --bottom-answer: 90;
  --width-answer: 372;

  position: absolute;
  left: calc(50% + var(--offset-answer) * 1px);
  bottom: calc(var(--bottom-answer) * 1px);
}

/* 1080px未満 */
@media screen and (max-width: 1080px) {
  .kv {
    width: 100vw;
  }
  .frame-menu {
    width: 100vw;
    height: calc(var(--height-frame-menu) / 1080 * 100vw);
  }
  .maintenance {
    width: 100vw;
  }
  #frame-story {
    width: 100vw;
  }
  .story {
    width: 100vw;
  }
  #frame-movie {
    padding-bottom: calc(var(--pb-frame-movie) / 1080 * 100vw);
  }
  .movie {
    width: calc(var(--width-movie) / 1080 * 100vw);
  }
  .indicate {
    left: calc(50% + var(--offset-indicate) / 1080 * 100vw);
    width: calc(var(--width-indicate) / 1080 * 100vw);
  }
  .movie {
    bottom: calc(var(--bottom-movie) / 1080 * 100vw);
    width: calc(var(--width-movie) / 1080 * 100vw);
  }
  .frame-artist {
  }
  .artist {
    width: 100vw;
  }
  .frame-format {
  }
  .format {
    width: 100vw;
  }
  #frame-howto {
  }
  .howto {
    width: 100vw;
  }
  #button-ticket {
    bottom: calc(var(--bottom-button-ticket) / 1080 * 100vw);
    width: calc(var(--width-button-ticket) / 1080 * 100vw);
  }
  #frame-notice {
    --height-frame-notice: 2426;		/* 「注意事項」が表示されていない状態の高さ */
    height: calc(var(--height-frame-notice) / 1080 * 100vw);
  }
  .background-notice {
  }
  #button-notice {
    top: calc(var(--top-button-notice) / 1080 * 100vw);
    width: calc(var(--width-button-notice) / 1080 * 100vw);
  }
  .notice {
    width: 100vw;
    top: calc(var(--top-notice) / 1080 * 100vw);
  }
  .faq {
    width: 100vw;
    bottom: calc(var(--bottom-faq) / 1080 * 100vw);
  }
  #button-youtube {
    left: calc(50% + var(--offset-button-youtube) / 1080 * 100vw);
    bottom: calc(var(--bottom-button-youtube) / 1080 * 100vw);
    width: calc(var(--width-button-youtube) / 1080 * 100vw * 1.1);
  }
  #frame-yodaka {
  }
  .yodaka {
    width: 100vw;
  }
  .logo {
    top: calc(var(--top-logo) / 1080 * 100vw);
    right: calc(50% + var(--offset-logo) / 1080 * 100vw);
    width: calc(var(--width-logo) / 1080 * 100vw);
  }
  .answer {
    left: calc(50% + var(--offset-answer) / 1080 * 100vw);
    bottom: calc(var(--bottom-answer) / 1080 * 100vw);
    width: calc(var(--width-answer) / 1080 * 100vw);
  }
}