@charset "UTF-8";

.absolute {
  position: absolute;
}
.center {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
}

/* --- 背景動画 --- */
.background {
  position: fixed;
  overflow: hidden;
  height: 100vh;
  width: 100%;

  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

#video {
  width: 100vw;
  min-height: 100%;
  object-fit: cover;
}

/* --- 前景 --- */
/* フレーム */
.frame {
/*
  width: 500px;
*/
  margin: 0 auto;
  left: 0;
  right: 0;
  overflow: hidden;
}


/* パーツ */
.parts {
  --mt-parts: 0;

/*
  --width-parts: 500;
  width: calc(var(--width-parts) * 1px);
*/
  margin-top: calc(var(--mt-parts) * 1px);

  z-index: 2;
}

/* キービジュアル */
#frame-kv {
  --height-frame-kv: 1245;
  height: calc(var(--height-frame-kv) * 1px);
}
.kv {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}

/* 過去決勝戦 */
#frame-history {
  --height-frame-history: 1667;

  height: calc(var(--height-frame-history) * 1px);
  position: relative;
}
.history {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
.button-play{
  --offset-button-play: 330;
  --width-button-play: 81;

 left: calc(50% + var(--offset-button-play) * 1px);
  z-index: 2;
}
#button-play-2022 {
  --top-button-play-2022: 780;

 top: calc(var(--top-button-play-2022) * 1px);
}
#button-play-2023 {
  --top-button-play-2023: 1400;
 top: calc(var(--top-button-play-2023) * 1px);
}

/* スケジュール */
#frame-finalist {
  --height-frame-finalist: 1572;
  height: calc(var(--height-frame-finalist) * 1px);

  position: relative;
}
.finalist {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
#button-watch {
  --bottom-button-watch: 150;
  --width-button-watch: 358;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-button-watch) * 1px);
  z-index: 2;
}

/* ニュース */
#frame-news {
  --height-frame-news: 520;

  position: relative;
  height: calc(var(--height-frame-news) * 1px);
}
.news {
  --width-news: 900;
  --br-news: 20;

  position: absolute;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  border: solid red 0px;
  border-radius: calc(var(--br-news) * 1px);
}
.box-news {
  --top-news: 0;
  --width-news: 900;
  --height-news: 512;

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

  top: calc(var(--top-news) * 1px);
/*
  --width-news: 450;
*/
  width: calc(var(--width-news) * 1px);
  height: calc(var(--height-news) * 1px);

  overflow-y: scroll;

/*  scrollbar-color: white red; */
  scrollbar-color: grey lightgrey; */
  scrollbar-width: thin;
  scrollbar-radius: 20px;
}
.text-news {
  --top-text-news: 30;
  --size-text-news: 28;

  position: absolute;
  top: calc(var(--top-text-news) * 1px);

  color: white;
  text-align: left;
  line-height: calc(var(--size-text-news) * 1px * 1.2);
  font-size: calc(var(--size-text-news) * 1px);
  padding: 10px;
  z-index: 3;
}

/* スケジュール */
#frame-schedule {
  --height-frame-schedule: 1850;
  height: calc(var(--height-frame-schedule) * 1px);

  position: relative;
}
.schedule {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}

/* 参加方法 */
#frame-howto {
  --height-frame-howto: 1600;
  height: calc(var(--height-frame-howto) * 1px);

  position: relative;
}
.howto {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
.box-howto {
  --width-box-howto: 320;
  --offset-box-howto: 50;

  position: absolute;
  width: calc(var(--width-box-howto) * 1px);
  left: calc(50% + var(--offset-box-howto) * 1px);

border: solid white 0px;
}
.box-howto-1 {
  --top-box-howto-1: 420;
  --height-box-howto-1: 180;

  top: calc(var(--top-box-howto-1) * 1px);
  height: calc(var(--height-box-howto-1) * 1px);
}
.box-howto-2 {
  --top-box-howto-2: 770;
  --height-box-howto-2: 100;

  top: calc(var(--top-box-howto-2) * 1px);
  height: calc(var(--height-box-howto-2) * 1px);
}
.box-howto-3 {
  --top-box-howto-3: 1070;
  --height-box-howto-3: 100;

  top: calc(var(--top-box-howto-3) * 1px);
  height: calc(var(--height-box-howto-3) * 1px);
}
.box-howto-4 {
  --top-box-howto-4: 1430;
  --height-box-howto-4: 100;

  top: calc(var(--top-box-howto-4) * 1px);
  height: calc(var(--height-box-howto-4) * 1px);
}
.text-howto {
  --size-text-howto: 28;

  position: absolute;
  top: 0;

  color: white;
  text-align: left;
  line-height: calc(var(--size-text-howto) * 1px * 1.4);
  font-size: calc(var(--size-text-howto) * 1px);
  padding: 10px;

  z-index: 3;
}
#button-entry {
  --width-button-entry: 592;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--width-button-entry) * 1px);

  z-index: 3;
}

/* 参加条件 */
#frame-condition {
  --height-frame-condition: 2255;

  position: relative;
  height: calc(var(--height-frame-condition) * 1px);
}
.condition {
  position: absolute;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.box-condition {
  --top-box-condition: 320;
  --width-box-condition: 800;
  --height-box-condition: 1250;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-box-condition) * 1px);
  width: calc(var(--width-box-condition) * 1px);
  height: calc(var(--height-box-condition) * 1px);
  overflow-y: scroll;
  z-index: 2;

border: solid white 0px;
}
.text-condition {
  --size-text-condition: 22;

  position: absolute;
  top: 0;

  color: white;
  text-align: left;
  line-height: calc(var(--size-text-condition) * 1px * 1.4);
  font-size: calc(var(--size-text-condition) * 1px);
  padding: 10px;

  z-index: 3;
}
#button-rules {
  --width-button-rules: 592;
  --buttom-button-rules: 190;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--buttom-button-rules) * 1px);

  z-index: 3;
}

/* 大会規約 */
.rules {
  --top-rules: 50;

  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-rules) * 1px);
  
  z-index: 4;
}
.box-rules {
  --width-box-rules: 800;
  --height-box-rules: 550;
  --top-box-rules: 400;

  position: fixed;
  top: calc(var(--top-box-rules) * 1px);
  margin: 0 auto;
  left: 0;
  right: 0;

  width: calc(var(--width-box-rules) * 1px);
  height: calc(var(--height-box-rules) * 1px);
  border: solid white 2px;
  overflow-y: scroll;
  z-index: 5;

border: solid yellow 0px;
}
.text-rules {
  --size-text-rules: 22;

  position: absolute;
  top: 0;

  color: white;
  text-align: left;
  line-height: calc(var(--size-text-rules) * 1px * 1.4);
  font-size: calc(var(--size-text-rules) * 1px);
  padding: 10px;

  z-index: 6;
}
#button-back {
  --top-button-back: 250;
  --width-button-back: 592;

  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-button-back) * 1px);
  width: calc(var(--width-button-back)  * 1px);

  z-index: 16;
}

/* 準決勝進出者 */
#frame-qualifiers {
  --height-frame-qualifiers: 1500;
  height: calc(var(--height-frame-qualifiers) * 1px);

  position: relative;
}
.qualifiers {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
#button-grade {
  --top-button-grade: 1400;
  --width-button-grade: 592;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-button-grade) * 1px);
  z-index: 2;
}

/* 公演 */
#frame-event {
  --height-frame-event: 3119;
  height: calc(var(--height-frame-event) * 1px);

  position: relative;
}
.event {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
#button-amethyst {
  --top-button-amethyst: 1500;
  --width-button-amethyst: 592;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-button-amethyst) * 1px);
  z-index: 2;
}
#button-cleopatra {
  --bottom-button-cleopatra: 150;
  --width-button-cleopatra: 592;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-button-cleopatra) * 1px);
  z-index: 2;
}

/* ロゴ */
#frame-footer {
  --height-frame-footer: 150;

  height: calc(var(--height-frame-footer) * 1px);
  position: relative;
}
.footer {
  --width-footer: 1000;

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

}
.logo {
  --bottom-logo: 30;
  --width-logo: 350;

  position: absolute;
  bottom: calc(var(--bottom-logo) * 1px);
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-logo) * 1px * 0.5);

  z-index: 3;
}

/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .background {
  }
  #video {
    width: 100vw;
    object-fit: cover;
  }
  .frame {
    width: 100vw;
  }
  .parts {
    width: 100vw;
    margin-top: calc(var(--mt-parts) / 1000 * 100vw);
  }
  #frame-kv {
    --height-frame-kv: 1769;
    height: calc(var(--height-frame-kv) / 1000 * 100vw);
  }
  .kv {
    width: 100vw;
  }
  #frame-history {
  height: calc(var(--height-frame-history) / 1000 * 100vw);

  }
  .history {
    width: 100vw;
  }
  .button-play{
   left: calc(50% + var(--offset-button-play) / 1000 * 100vw);
   width: calc(var(--width-button-play) / 1000 * 100vw);
  }
  #button-play-2022 {
   top: calc(var(--top-button-play-2022) / 1000 * 100vw);
  }
  #button-play-2023 {
   top: calc(var(--top-button-play-2023) / 1000 * 100vw);
  }
  #frame-finalist {
    height: calc(var(--height-frame-finalist) / 1000 * 100vw);
  }
  .finalist {
    width: 100vw;
  }
  #button-watch {
    bottom: calc(var(--bottom-button-watch) / 1000 * 100vw);
    width: calc(var(--width-button-watch) / 1000 * 100vw);
  }

  #frame-news {
    height: calc(var(--height-frame-news) / 1000 * 100vw);
  }
  .news {
    border-radius: calc(var(--br-news) / 1000 * 100vw);
  }
  .box-news {
    top: calc(var(--top-news) / 1000 * 100vw);
    width: calc(var(--width-news) / 1000 * 100vw);
    height: calc(var(--height-news) / 1000 * 100vw);
    scrollbar-radius: 5px;
  }
  .text-news {
    top: calc(var(--top-text-news) / 1000 * 100vw);
    line-height: 130%;
    font-size: 4vw;
    padding: 5px;
  }
  #frame-schedule {
    height: calc(var(--height-frame-schedule) / 1000 * 100vw);
  }
  .schedule {
    width: 100vw;
  }
  #frame-howto {
  height: calc(var(--height-frame-howto) / 1000 * 100vw);
  }
  .howto {
    width: 100vw;
  }
  .box-howto {
    width: calc(var(--width-box-howto) / 1000 * 100vw);
    left: calc(50% + var(--offset-box-howto) / 1000 * 100vw);
  }
  .box-howto-1 {
    top: calc(var(--top-box-howto-1) / 1000 * 100vw);
    height: calc(var(--height-box-howto-1) / 1000 * 100vw);
  }
  .box-howto-2 {
    top: calc(var(--top-box-howto-2) / 1000 * 100vw);
    height: calc(var(--height-box-howto-2) / 1000 * 100vw);
  }
  .box-howto-3 {
    top: calc(var(--top-box-howto-3) / 1000 * 100vw);
    height: calc(var(--height-box-howto-3) / 1000 * 100vw);
  }
  .box-howto-4 {
    top: calc(var(--top-box-howto-4) / 1000 * 100vw);
    height: calc(var(--height-box-howto-4) / 1000 * 100vw);
  }
  .text-howto {
    line-height: 140%;
    font-size: calc(var(--size-text-howto) / 1000 * 100vw);
    font-size: 3vw;
    padding: 5px;
  }
  #button-entry {
    width: calc(var(--width-button-entry) / 1000 * 100vw);
  }

  #frame-condition {
    height: calc(var(--height-frame-condition) / 1000 * 100vw);
  }
  .condition {
  }
  .box-condition {
    top: calc(var(--top-box-condition) / 1000 * 100vw);
    width: calc(var(--width-box-condition) / 1000 * 100vw);
    height: calc(var(--height-box-condition) / 1000 * 100vw);
  }
  .text-condition {
    line-height: 150%;
    font-size: 3vw;
  }
  #button-rules {
    bottom: calc(var(--buttom-button-rules) / 1000 * 100vw);
    width: calc(var(--width-button-rules) / 1000 * 100vw);
  }
  .rules {
    width: 100vw;
    top: calc(var(--top-rules) / 1000 * 100vw);
  }
  .box-rules {
    top: calc(var(--top-box-rules) / 1000 * 100vw);
    width: calc(var(--width-box-rules) / 1000 * 100vw);
    height: calc(var(--height-box-rules) / 1000 * 100vw);
  }
  .text-rules {
    line-height: 120%;
    font-size: 3vw;
  }
  #button-back {
    top: calc(var(--top-button-back) / 1000 * 100vw);
    width: calc(var(--width-button-back) / 1000 * 100vw);
  }
  #frame-qualifiers {
    height: calc(var(--height-frame-qualifiers) / 1000 * 100vw);
  }
  .qualifiers {
  }
  #button-grade {
    top: calc(var(--top-button-grade) / 1000 * 100vw);
    width: calc(var(--width-button-grade) / 1000 * 100vw);
  }
  #frame-event {
    height: calc(var(--height-frame-event) / 1000 * 100vw);
  }
  .event {
    width: 100vw;
  }
  #button-amethyst {
    top: calc(var(--top-button-amethyst) / 1000 * 100vw);
    width: calc(var(--width-button-amethyst) / 1000 * 100vw);
  }
  #button-cleopatra {
    bottom: calc(var(--bottom-button-cleopatra) / 1000 * 100vw);
    width: calc(var(--width-button-cleopatra) / 1000 * 100vw);
  }
  #frame-footer {
    height: calc(var(--height-frame-footer) / 1000 * 100vw);
  }
  .footer {
    width: 100vw;
  }
  .logo {
    bottom: calc(var(--bottom-logo) / 1000 * 100vw);
    width: calc(var(--width-logo) / 1000 * 100vw );
  }
}