/* PC用 */
@charset "UTF-8";

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

/* ---------- */

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

/* --- キャッチ --- */
#frame-catch {
}
.catch {
}

/* --- ルール --- */
#frame-rule {
}
.rule {
}

/* --- インタビュー --- */
#frame-interview {
}
.interview {
}
.text-interview {
  --width-text-interview: 450;
  --offset-text-interview:130;

  width: calc(var(--width-text-interview) * 1px);
  left: calc(50% - var(--offset-text-interview) * 1px);

  font-size: 24px;
}

/* --- プレイ形式 --- */
#frame-format {
}
.format {
  
}

/* --- 参加方法 --- */
#frame-howto {
}
.howto {
  
}

/* --- スケジュール --- */
#frame-schedule {
  --mt-frame-schedule: 30;
  --width-frame-schedule: 1200;
  --height-frame-schedule: 1200;

  margin-top: calc(var(--mt-frame-schedule) * 1px);
  width: calc(var(--width-frame-schedule) * 1px);
  height: calc(var(--height-frame-schedule) * 1px);
}
.schedule {
}
.text-schedule {
  top: 10%;

  width: calc(var(--width-text-schedule) * 1px);
  font-size: 28px;
}
.frame-calendar {
  --width-frame-calendar: 700;
  --height-frame-calendar: 1000;

  top: 22%;
  width: calc(var(--width-frame-calendar) * 1px);
  height: calc(var(--height-frame-calendar) * 1px);
}
.slider-calendar {
}
.calendar {
}

/* --- チケット --- */
#frame-fee {
}
.fee {
}
.button-ticket {
  bottom: 9%;
}

/* --- マップ --- */
#frame-map {
  --width-frame-map: 1200;
  --height-frame-map: 700;

  width: calc(var(--width-frame-map) * 1px);
  height: calc(var(--height-frame-map) * 1px);
border: solid yellow 0px;
}
.embed-map {
  --width-embed-map: 450;
  --height-embed-map: 450;
  --offset-embed-map: 50;

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

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

border: solid yellow 0px;

}
.iframe-map {
}
.text-map {
  --offset-text-map: (-120);
  --width-text-map: 500;
  --height-text-map: 100;

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

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

  font-size: 28px;
border: solid white 0px;
}
.text-map .large {
  font-size: 32px;
}

/* --- 制作 --- */
#frame-author {
  --width-frame-author: 1200;
  --height-frame-author: 750;

  width: calc(var(--width-frame-author) * 1px);
  height: calc(var(--height-frame-author) * 1px);
}
.author {
}
.text-author {
  --width-text-author: 1000;

  top: 20%;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-author) * 1px);

  font-size: 28px;
border: solid white 0px;
}
.text-author .large {
  font-size: 32px;
}

/* --- FAQ --- */
#frame-faq {
  --height-frame-faq: 2800;
  height: calc(var(--height-frame-faq) * 1px);

border: solid yellow 0px;
}
.faq-title {
  
}
.text-faq {
  --width-text-faq: 1000;
  --height-text-faq: 2600;

  top: 6%;
  width: calc(var(--width-text-faq) * 1px);
  height: calc(var(--height-text-faq) * 1px);
  font-size: 24px;
/*  overflow-y: scroll; */

border: solid white 0px;
}
.item {
  margin-left: calc(var(--ml-item) * 1px);
}
.item .question {
/*  margin-top: calc(var(--mt-question) * 1px); */
}
.item .answer {
  margin-top: calc(var(--mt-answer) * 1px);
  margin-bottom: calc(var(--mb-answer) * 1px);
}

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

  height: calc(var(--height-footer) * 1px);
border: solid white 0px;
}
.logo {
  width: calc(var(--width-logo) * 1px);
}

/* 1201px未満 */
@media screen and (max-width: 1200px) {
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-catch {
  }
  .catch {
    width: 100vw;
  }
  #frame-rule {
  }
  .rule {
    width: 100vw;
  }
  #frame-interview {
  }
  .interview {
    width: 100vw;
  }
  .text-interview {
    width: calc(var(--width-text-interview) / 1200 * 100vw);
    left: calc(50% - var(--offset-text-interview) / 1200 * 100vw);
  }
  #frame-format {
  }
  .format {
    width: 100vw;
  }
  #frame-howto {
  }
  .howto {
    width: 100vw;
  }
  #frame-schedule {
    margin-top: calc(var(--mt-frame-schedule) / 1200 * 100vw);
    width: calc(var(--width-frame-schedule) / 1200 * 100vw);
    height: calc(var(--height-frame-schedule) / 1200 * 100vw);
  }
  .schedule {
    width: 100vw;
  }
  .text-schedule {
    width: calc(var(--width-text-schedule) / 1200 * 100vw);
    font-size: 26px;
  }
  .frame-calendar {
    width: calc(var(--width-frame-calendar) / 1200 * 100vw);
    height: calc(var(--height-frame-calendar) / 1200 * 100vw);
  }
  .slider-calendar {
  }
  .calendar {
  }
  #frame-fee {
  }
  .butto-ticket {
    width: calc(var(--width-button-ticket) / 1200 * 100vw);
  }
  .fee {
    width: 100vw;
  }
  .frame-ticket {
    width: calc(var(--width-frame-ticket) / 1200 * 100vw);
    height: calc(var(--height-frame-ticket) / 1200 * 100vw);
  }
  #frame-map {
    width: calc(var(--width-frame-map) / 1200 * 100vw);
    height: calc(var(--height-frame-map) / 1200 * 100vw);
  }
  .embed-map {
    right: calc(50% + var(--offset-embed-map) / 1200 * 100vw);
    width: calc(var(--width-embed-map) / 1200 * 100vw);
    height: calc(var(--height-embed-map) / 1200 * 100vw);
  }
  .iframe-map {
  }
  .text-map {
    left: calc(50% + var(--offset-text-map) / 1200 * 100vw);
    width: calc(var(--width-text-map) / 1200 * 100vw);
    font-size: 22px;
  }
  .text-map .large {
    font-size: 24px;
  }
  #frame-author {
    width: calc(var(--width-frame-author) / 1200 * 100vw);
    height: calc(var(--height-frame-author) / 1200 * 100vw);
  }
  .author {
    width: 100vw;
  }
  .text-author {
    width: calc(var(--width-text-author) / 1200 * 100vw);
    font-size: 24px;
  }
  .text-author .large {
    font-size: 30px;
  }
  #frame-faq {
    height: calc(var(--height-frame-faq) / 1200 * 100vw);
  }
  .faq-title {
    width: 100vw;
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1200 * 100vw);
    height: calc(var(--height-text-faq) / 1200 * 100vw);
    font-size: 20px;
  }
  .item {
    margin-left: calc(var(--ml-item) / 1200 * 100vw);
  }
  .item .question {
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 1200 * 100vw);
    margin-bottom: calc(var(--mb-answer) / 1200 * 100vw);
  }
  #frame-footer {
    height: calc(var(--height-footer) / 1200 * 100vw);
  }
  .logo {
    width: calc(var(--width-logo) / 1200 * 100vw);
  }
}