@charset "UTF-8";

.for-pc {
  display: block;
}
.for-sp {
  display: none;
}

body {
  overflow-x: hidden;		/* はみ出し要素対応 */
}

img {
/* display: block; */		/* slickでNG */
}

/* --- ヘッダ --- */
/*
#frame-header {
  --width-frame-header: 1200;

  width: calc(var(--width-frame-header) * 1px);
  margin: 0 auto;


}
.text-header {
  background-color: white;
  color: black;
  text-align: left;
  padding: 10px 10px;

  font-size: 24px;
}
*/

/* --- キービジュアル --- */
#frame-kv {
}
.kv {
}

/* --- ストーリー --- */
#frame-story {
}
.story {
}

/* --- ノイズ背景 --- */
.noise {
  --width-noise: 1000;

  width: calc(var(--width-noise) * 1px);

  margin: 0 auto;
  left: 0;
  right: 0;
  background-image: url("../../../images/event/2604tvspecial/noise.png");
  background-repeat: no-repeat;
}

/* --- プレイ形式・参加方法 --- */
#frame-format {
}
.format {
}

/* --- 料金(チケット) --- */
#frame-fee {
  position: relative;
}
.fee {
}
#button-ticket {
  --width-button-ticket: 400;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 11%;
}

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

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

  position :absolute;
  margin: 0 auto;
  left: 7.5%;
  right: 0;
  top: 8%;

  text-align: left;
  color: black;
  font-weight: bold;

  line-height: 180%;
  font-size: 22px;
border: solid black 0px;
}
.text-schedule .large {
  font-size: 32px;
}
.text-schedule .medium {
  font-size: 24px;
}
.text-schedule .small {
}

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

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 15%;

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

  border: solid black 1px;
}
.iframe-map {
  width: 100%;
  height: 100%;
}
.text-map {
  --width-text-map: 670;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 60%;
  width: calc(var(--width-text-map) * 1px);
  padding: 30px;

  text-align: left;
  color: black;
  font-size: 24px;
}
.text-map .large {
  font-weight: bold;
  font-size: 32px;
}
.text-map .medium {
  font-size: 26px;
}

/* --- グッズ --- */
#frame-goods {
  backgound-color: black;
}
.goods {
}

/* --- Q&A --- */
#frame-faq{
  --height-frame-faq: 1900;

  position: relative;
  height: calc(var(--height-frame-faq) * 1px);
}
.faq-title {
}
.text-faq {
  --width-text-faq: 900;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-faq) * 1px);
}
.item {
  --ml-item: 20;

  margin-left: calc(var(--ml-item) * 1px);

  text-align: left;
  color: white;
  font-size: 22px;
}
.item .question {
  --mt-question: 40;

  margin-top: calc(var(--mt-question) * 1px);
  font-weight: bold;
  font-size: 28px;
}
.item .answer {
  --mt-answer: 5;

  margin-top: calc(var(--mt-answer) * 1px);
}


/* --- フッタ --- */
#frame-footer {
  --height-frame-footer: 200;

  position: relative;
  height: calc(var(--height-frame-footer) * 1px);

}
.footer {
}
.logo {
  --width-logo: 253;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 15%;
}

/* --- 1201px未満 --- */
@media screen and (max-width: 1200px) {
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
}

/* --- 1001px未満 --- */
@media screen and (max-width: 1000px) {
  .for-pc {
    display: none;
  }
  .for-sp {
    display: block;
  }
  #frame-header {
    width: 100vw;
  }
  .text-header {
    font-size: 3vw
  }
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-story {
  }
  .story {
    width: 100vw;
  }
  .noise {
    width: 100vw;
  }
  #frame-format {
  }
  .format {
    width: 100vw;
  }
  #frame-fee {
  }
  .fee {
    width: 100vw;
  }
  #button-ticket {
    width: calc(var(--width-button-ticket) / 1000 * 100vw);
  }
  #frame-schedule {
  }
  .schedule {
    width: 100vw;
  }
  .text-schedule {
    width: calc(var(--width-text-schedule) / 1000 * 100vw);
    line-height: 180%;
    font-size: 2vw;
  }
  .text-schedule .large {
    font-size: 3.5vw;
  }
  .text-schedule .medium {
    font-size: 2.5vw;
  }
  .text-schedule .small {
  }
  #frame-map {
  }
  .map {
    width: 100vw;
  }
  .embed-map {
    width: calc(var(--width-embed-map) / 1000 * 100vw);
    height: calc(var(--height-embed-map) / 1000 * 100vw);
  }
  .iframe-map {
  }
  .text-map {
    --width-text-map: 800;

    width: calc(var(--width-text-map) / 1000 * 100vw);
  
   line-height: 140%;
    font-size: 2.5vw;
  }
  .text-map .large {
    font-size: 4vw;
  }
  .text-map .medium {
    font-size: 3vw;
  }
  #frame-goods {
  }
  .goods {
    width: 100%;
  }
  #frame-faq{
    height: calc(var(--height-frame-faq) / 1000 * 100vw * 1.25);
  }
  .faq-title {
    width: 100vw;
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1000 * 100vw);
  }
  .item {
    margin-left: calc(var(--ml-item) / 1000 * 100vw);
    font-size: 2.5vw;
  }
  .item .question {
    margin-top: calc(var(--mt-question) / 1000 * 100vw);
    font-size: 3.5vw;
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 1000 * 100vw);
  }

  #frame-footer {
    height: calc(var(--height-frame-footer) / 1000 * 100vw);
  }
  .footer {
  }
  .logo {
    width: calc(var(--width-logo) / 1000 * 100vw);
  }
}