@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;
  mix-blend-mode: screen;

  pointer-events: none;
}

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

/* --- 前景 --- */

/* テキスト */
.text {
  position: absolute;
}

/* フレーム */
.frame {
  margin: 0 auto;
  left: 0;
  right: 0;
}

/* キービジュアル */
#frame-kv {
/*
  --height-frame-kv: 1390;

  height: calc(var(--height-frame-kv) * 1px);
*/
}
.kv {
}

/* DRJとは */
#frame-about {
  position: relative;
}
.about {
}
.text-about {
  --width-text-about: 750;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 30%;

  width: calc(var(--width-text-about) * 1px);

  text-align: left;
  color: white;
  font-size: 36px;
  font-weight: bold;

border: solid yellow 0px;
}
.text-caution {
  --width-text-caution: 750;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 48%;

  width: calc(var(--width-text-caution) * 1px);

  text-align: left;
  color: white;
  font-size: 24px;
  font-weight: bold;

border: solid yellow 0px;
}

/* チケット */
#frame-fee {
  position: relative;
}
.fee {
}
.text-ticket {
  --width-text-ticket: 850;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 25%;

  width: calc(var(--width-text-ticket) * 1px);

  color: #00A0FF;
  font-size: 36px;
  font-weight: bold;
}
#button-ticket {
  --width-button-ticket: 358;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 8%;
}

/* スケジュール */
#frame-schedule {
  position: relative;
}
.schedule {
}
.text-schedule-1 {
  --width-text-schedule-1: 800;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 17%;

  width: calc(var(--width-text-schedule-1) * 1px);

  text-align: left;
  color: white;
  font-size: 28px;
  font-weight: bold;

border: solid yellow 0px;
}
.text-schedule-2 {
  --offset-text-schedule-2: 100;
  --width-text-schedule-2: 300;

  left: calc(50% + var(--offset-text-schedule-2) * 1px);
  top: 28%;

  width: calc(var(--width-text-schedule-2) * 1px);

  text-align: left;
  color: white;
  font-size: 16px;
  font-weight: bold;

border: solid yellow 0px;
}

/* マップ */
#frame-map {
  position: relative;
}
.map {
}
.embed-map {
  --width-embed-map: 400;
  --height-embed-map: 400;
  --offset-embed-map: 30;

  position: absolute;
  left: calc(50% + var(--offset-embed-map) * 1px);
  top: 25%;

  width: calc(var(--width-embed-map) * 1px);
  height: calc(var(--height-embed-map) * 1px);

border: solid yellow 0px;
}
.iframe-map {
  width: 100%;
  height: 100%;
}
.text-map {
  --offset-text-map: 0;
  --width-text-map: 450;

  right: calc(50% + var(--offset-text-map) * 1px);
  top: 25%;

  width: calc(var(--width-text-map) * 1px);

  text-align: left;
  color: white;
  font-size: 18px;
  font-weight: bold;

border: solid yellow 0px;
}
.text-map .large {
  font-size: 26px;
}
.text-map .medium {
  font-size: 22px;
}


/* よくある質問 */
#frame-faq {
  position: relative;
}
.faq {
}
.text-faq {
  --width-text-faq: 900;
  --height-text-faq: 1100;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 13%;
  width: calc(var(--width-text-faq) * 1px);
  height: calc(var(--height-text-faq) * 1px);
  overflow-y: auto !important;

  text-align: left;
  color: white;
  font-weight: bold;
border: solid yellow 0px;
}
.item {
  --ml-item: 20;
  --mr-item: 20;

  margin-left: calc(var(--ml-item) * 1px);
  margin-right: calc(var(--mr-item) * 1px);
}
.item .question {
  --mt-question: 25;
  margin-top: calc(var(--mt-question) * 1px);
  font-size: 22px;
}
.item .answer {
  --mt-answer: 5;
  margin-top: calc(var(--mt-answer) * 1px);
  font-size: 20px;
}

/* ロゴ */
#frame-logo {
  position: relative;
}
.footer{
}
.logo {
  --width-logo: 350;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 20%;
}

/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .background {
  }
  #video {
    height: 100vh;
  }
  .text {
  }
  .frame {
    width: 100vw;
  }
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-about {
  }
  .about {
    width: 100vw;
  }
  .text-about {
    width: calc(var(--width-text-about) / 1000 * 100vw);
    font-size: 3.5vw;
  }
  .text-caution {
    width: calc(var(--width-text-caution) / 1000 * 100vw);
    font-size: 2.5vw;
  }
  #frame-fee {
  }
  .fee {
    width: 100vw;
  }
  .text-ticket {
    width: calc(var(--width-text-ticket) / 1000 * 100vw);
    font-size: 4vw;
  }
  #button-ticket {
    width: calc(var(--width-button-ticket) / 1000 * 100vw);
  }
  #frame-schedule {
  }
  .schedule {
    width: 100vw;
  }
  .text-schedule-1 {
    width: calc(var(--width-text-schedule-1) / 1000 * 100vw);
    font-size: 3vw;
  }
  .text-schedule-2 {
    left: calc(50% + var(--offset-text-schedule-2) / 1000 * 100vw * 0.7);
    width: calc(var(--width-text-schedule-2) / 1000 * 100vw * 1.5);
    font-size: 2vw;
  }
  #frame-map {
  }
  .map {
    width: 100vw;
  }
  .embed-map {
    left: calc(50% + var(--offset-embed-map) / 1000 * 100vw);
    width: calc(var(--width-embed-map) / 1000 * 100vw);
    height: calc(var(--height-embed-map) / 1000 * 100vw);
  }
  .iframe-map {
  }
  .text-map {
    right: calc(50% + var(--offset-text-map) / 1000 * 100vw);
    width: calc(var(--width-text-map) / 1000 * 100vw);
    font-size: 2vw;
  }
  .text-map .large {
    font-size: 3vw;
  }
  .text-map .medium {
    font-size: 2.5vw;
  }
  #frame-faq {
  }
  .faq {
    width: 100vw;
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1000 * 100vw);
    height: calc(var(--height-text-faq) / 1000 * 100vw);

    z-index: 3;		/* iPhone対策 */
    -webkit-overflow-scrolling: touch;  /* iPhone対策 */
  }
  .item {
    margin-left: calc(var(--ml-item) / 1000 * 100vw);
    margin-right: calc(var(--mr-item) / 1000 * 100vw);
  }
  .item .question {
    margin-top: calc(var(--mt-question) / 1000 * 100vw);
    font-size: 3vw;
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 1000 * 100vw);
    font-size: 2.5vw;
  }
  #frame-logo {
  }
  .footer{
    width: 100vw;
  }
  .logo {
    width: calc(var(--width-logo) / 1000 * 100vw);
  }
}