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

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

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

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

  width: calc(var(--width-frame-header) * 1px);
}
.title {
  font-size: 24px;
  font-weight: bold;
  padding: 10px 0 10px 10px;
}
/* --- キービジュアル --- */
#frame-kv {
}
.kv {
}

/* --- キャッチ --- */
#frame-catch {
}
.catch {
  --width-catch: 1121;
}

/* --- コメント --- */
#frame-comment {
}
.comment {
  --width-comment: 1121;
}

/* --- 遊び方 --- */
#frame-howto {
}
.howto {
  --width-howto: 1098;
}

/* --- スケジュール --- */
#frame-schedule {
}
.schedule {
  --width-schedule: 1121;
}

/* --- 料金 --- */
#frame-fee {
  position: relative;
}
.fee {
  --width-fee: 1121;
}
.button-ticket {
 --offset-button-ticket: 220;
 --width-button-ticket: 226;

  left: calc(50% + var(--offset-button-ticket) * 1px);
  bottom: 6%;
  width: calc(var(--width-button-ticket) * 1px);
}

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

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

  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: 30;
  --width-text-map: 450;

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

  font-size: 18px;
  text-align: left;
border: solid yellow 0px;
}
.text-map .large {
  font-size: 28px;
  font-weight: bold;
}
.text-map .medium {
  font-size: 24px;
  font-weight: bold;
}
.button-map {
  --offset-button-map: 150;
  --width-button-map: 191;

  left: calc(50% + var(--offset-button-map) * 1px);
  bottom: 7%;
  width: calc(var(--width-button-map) * 1px);
}

/* --- FAQ --- */
#frame-faq {
}
.faq-title {
  --width-faq-title: 292;
}
.faq-line-up {
  --width-faq-line-up: 1007;
}
.text-faq {
  --width-text-faq: 1007;

  width: calc(var(--width-text-faq) * 1px);
}
.item {
  --ml-item: 20;

  font-size: 24px;
  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);

}
.faq-line-bottom {
  --width-faq-line-bottom: 1007;
  margin-top: calc(var(--mt-faq-line-bottom) * 1px);
}

/* --- フッタ --- */
#frame-footer {
}
.footer {
  --width-footer: 689;
}
.logo {
  --width-logo: 196;

  width: calc(var(--width-logo) * 1px);
  top: 25%;
}
.text-copyright {
  bottom: 0;
  font-size: 16px;
}

/* 1201px未満 */
@media screen and (max-width: 1200px) {
  #frame-header {
    width: 100vw;
  }
  .title {
  }
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-catch {
  }
  .catch {
    width: calc(var(--width-catch) / 1200 * 100vw);
  }
  #frame-comment {
  }
  .comment {
    width: calc(var(--width-comment) / 1200 * 100vw);
  }
  #frame-howto {
  }
  .howto {
    width: calc(var(--width-howto) / 1200 * 100vw);
  }
  #frame-schedule {
  }
  .schedule {
    width: calc(var(--width-schedule) / 1200 * 100vw);
  }
  #frame-fee {
  }
  .fee {
    width: calc(var(--width-fee) / 1200 * 100vw);
  }
  .button-ticket {
    left: calc(50% + var(--offset-button-ticket) / 1200 * 100vw);
  }
  #frame-map {
  }
  .map {
    width: calc(var(--width-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);
  }
  .text-map {
    left: calc(50% + var(--offset-text-map) / 1200 * 100vw);
    width: calc(var(--width-text-map) / 1200 * 100vw);
    font-size: 16px;
  }
  .text-map .large {
    font-size: 20px;
  }
  .text-map .medium {
    font-size: 18px;
  }
  #frame-faq {
  }
  .faq-title {
    width: calc(var(--width-faq-title) / 1200 * 100vw);
  }
  .faq-line-up {
    width: calc(var(--width-faq-line-up) / 1200 * 100vw);
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1200 * 100vw);
  }
  .item {
    margin-left: calc(var(--ml-item) / 1200 * 100vw);
  }
  .item .question {
    margin-top: calc(var(--mt-question) / 1200 * 100vw);
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 1200 * 100vw);
  }
  .faq-line-bottom {
    width: calc(var(--width-faq-line-bottom) / 1200 * 100vw);
    margin-top: calc(var(--mt-faq-line-bottom) / 1200 * 100vw);
  }
  #frame-footer {
  }
  .footer {
    width: calc(var(--width-footer) / 1200 * 100vw);
  }
  .logo {
    width: calc(var(--width-logo) / 1200 * 100vw);
  }
  .text-copyright {
  }
}