@charset "UTF-8";

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

/* --- ヘッダ --- */
#frame-header {
}
#frame-menu {
}
.menu {
}
#menu-catch {
  width: calc(var(--width-menu-catch) * 1px);
}
#menu-point {
  width: calc(var(--width-menu-point) * 1px);
}
#menu-story {
  width: calc(var(--width-menu-story) * 1px);
}
#menu-format {
  width: calc(var(--width-menu-format) * 1px);
}
#menu-howto {
  width: calc(var(--width-menu-howto) * 1px);
}
#menu-fee {
  width: calc(var(--width-menu-fee) * 1px);
}
#menu-schedule {
  width: calc(var(--width-menu-schedule) * 1px);
}
#menu-map {
  width: calc(var(--width-menu-map) * 1px);
}
#menu-faq {
  width: calc(var(--width-menu-faq) * 1px);
}

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

/* --- キャッチ --- */
#frame-catch {
  width: calc(var(--width-frame-catch) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-frame-catch) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-catch {
  top: calc(var(--top-text-catch) / var(--width-raw) * var(--width-cooked) * 1px);
  width: calc(var(--width-text-catch) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-catch) / var(--width-raw) * var(--width-cooked) * 1px);

  font-size: 24px;
  line-height: 150%;
}
.text-catch .notice {
  font-size: 17px;
}

/* --- フォト --- */
#frame-photo {
  width: calc(var(--width-frame-photo) / var(--width-raw) * var(--width-cooked) * 1px);
}
.slider-photo {
  width: calc(var(--width-slider-photo) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-slider-photo) / var(--width-raw) * var(--width-cooked) * 1px);
}
.photo {
  width: calc(var(--width-photo) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- ポイント --- */
#frame-point {
}
.point {
  width: calc(var(--width-point) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- ストーリー --- */
#frame-story {
}
.story {
  width: calc(var(--width-story) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-story {
  top: calc(var(--top-text-story) / var(--width-raw) * var(--width-cooked) * 1px);
  width: calc(var(--width-text-story) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-story) / var(--width-raw) * var(--width-cooked) * 1px);

  font-size: 17px;
}

/* --- プレイ形式・参加方法 --- */
#frame-format {
}
.format {
  width: calc(var(--width-format) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- インフォメーション --- */
#frame-information {
}
.information {
  width: calc(var(--width-information) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-information {
  font-size: 19px;
}
.text-information-1 {
  width: calc(var(--width-text-information-1) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-information-1) / var(--width-raw) * var(--width-cooked) * 1px);
  top: calc(var(--top-text-information-1) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-information-2 {
  width: calc(var(--width-text-information-2) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-text-information) / var(--width-raw) * var(--width-cooked) * 1px);
  top: calc(var(--top-text-information-2) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-information .title {
  font-size: 28px;
}
#button-dej {
  width: calc(var(--width-button-dej) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- チケット --- */
#frame-fee {
}
.fee {
  width: calc(var(--width-fee) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- スケジュール --- */
#frame-schedule {
}
.schedule {
  width: calc(var(--width-schedule) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-schedule {
  width: calc(var(--width-text-schedule) / var(--width-raw) * var(--width-cooked) * 1px);
  font-size: 16px;
}
.text-schedule .small {
  font-size: 14px;
}
.text-schedule .medium {
  font-size: 18px;
}
.text-schedule .attention {
  font-size: 10px;
}
.text-schedule .reverse {
}
#calendar {
  width: calc(var(--width-calendar) / var(--width-raw) * var(--width-cooked) * 1px);
}
#button-ticket {
  width: calc(var(--width-button-ticket) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- マップ --- */
#frame-map {
}
.map {
  width: calc(var(--width-map) / var(--width-raw) * var(--width-cooked) * 1px);
}
.embed-map {
  width: calc(var(--width-embed-map) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-embed-map) / var(--width-raw) * var(--width-cooked) * 1px);
}
.iframe-map {
}
.text-map {
  width: calc(var(--width-text-map) / var(--width-raw) * var(--width-cooked) * 1px);

  font-size: 16px;
  line-height: 140%;
}
.text-map .large {
  font-size: 20px;
}
.text-map .medium {
  font-size: 18px;
}

/* --- FAQ --- */
#frame-faq {
  width: calc(var(--width-frame-faq) / var(--width-raw) * var(--width-cooked) * 1px);
  height: calc(var(--height-frame-faq) / var(--width-raw) * var(--width-cooked) * 1px);
}
.faq-title {
  width: calc(var(--width-faq-title) / var(--width-raw) * var(--width-cooked) * 1px);
}
.text-faq {
  width: calc(var(--width-text-faq) / var(--width-raw) * var(--width-cooked) * 1px);
}
.item {
  --ml-item: 20;

  margin-left: calc(var(--ml-item) / var(--width-raw) * var(--width-cooked) * 1px);
}
.item .question {
  font-size: 20px;
  margin-top: calc(var(--mt-question) / var(--width-raw) * var(--width-cooked) * 1px);

}
.item .answer {
  font-size: 17px;
  margin-top: calc(var(--mt-answer) / var(--width-raw) * var(--width-cooked) * 1px);
}

/* --- フッタ --- */
#frame-footer {
}
.footer {
  width: calc(var(--width-footer) / var(--width-raw) * var(--width-cooked) * 1px);
}
.logo {
  width: calc(var(--width-logo) / var(--width-raw) * var(--width-cooked) * 1px);
}


/* 1100px未満 */
@media screen and (max-width: 1100px) {
  #menu-catch {
    width: calc(var(--width-menu-catch) / 1100 * 100vw);
  }
  #menu-point {
    width: calc(var(--width-menu-point) / 1100 * 100vw);
  }
  #menu-story {
    width: calc(var(--width-menu-story) / 1100 * 100vw);
  }
  #menu-format {
    width: calc(var(--width-menu-format) / 1100 * 100vw);
  }
  #menu-howto {
    width: calc(var(--width-menu-howto) / 1100 * 100vw);
  }
  #menu-fee {
    width: calc(var(--width-menu-fee) / 1100 * 100vw);
  }
  #menu-schedule {
    width: calc(var(--width-menu-schedule) / 1100 * 100vw);
  }
  #menu-map {
    width: calc(var(--width-menu-map) / 1100 * 100vw);
  }
  #menu-faq {
    width: calc(var(--width-menu-faq) / 1100 * 100vw);
  }
}