/* スマホ用 */
@charset "UTF-8";

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

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

/* --- キービジュアル --- */

/* --- ヘッダ --- */
#frame-header {
}
.text-header {
  margin: 5px 0 5px 10px;
  font-size: 3vw;
}

#frame-kv {
}
.kv {
  width: 100vw;
}

/* --- 参加方法 --- */
#frame-howto {
}
.howto {
  width: 100vw;
}

/* --- ストーリー --- */
#frame-story {
}
.story {
  width: 100vw;
}
.text-story {
  --width-text-story: 1100;

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

  font-size: 3.2vw;
  line-height: 140%;
border: solid white 0px;
}
.text-story1 {
  top: 14%;
}
.text-story2 {
  bottom: 5%;
}

/* --- チケット(料金) --- */
#frame-fee {
}
.fee {
  width: 100vw;
}
.text-fee1 {
  --width-text-fee1: 750;

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

  width: calc(var(--width-text-fee1) / 1000 * 100vw);
  font-size: 4vw;
border: solid white 0px;
}
.text-fee1 .feetable {
  --width-feetable-cell: 240;
  --height-feetable-cell: 30;

  display: grid;
  grid-template-columns: repeat(3, calc(var(--width-feetable-cell) / 1000 * 100vw));
  grid-template-rows: repeat(2, calc(var(--height-feetable-cell) / 1000 * 100vw));
  gap: 8px;
}
.text-fee2 {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 70%;

  font-size: 2vw;
border: solid white 0px;
}
.text-start {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 60%;

  font-size: 3.5vw;
border: solid white 0px;
}
.text-start .large {
  font-size: 5vw;
}
.text-start .medium  {
  font-size: 4.5vw;
}

.button-ticket {
  --width-button-ticket: 250;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 52%;
  width: calc(var(--width-button-ticket) / 1000 * 100vw);
}

/* --- スケジュール --- */
#frame-schedule {
}
.schedule {
  width: 100vw;
}
.text-atthedoor {
  bottom: 1.5%;
  font-size: 4vw;
}
.text-atthedoor a {
}

/* --- マップ --- */
#frame-map {
  position: relative;
}
.map {
  --width-map: 963;
  width: calc(var(--width-map) / 1000 * 100vw);
}
.embed-map {
  --width-embed-map: 750;
  --height-embed-map: 600;

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

  width: calc(var(--width-embed-map) / 1000 * 100vw);
  height: calc(var(--height-embed-map) / 1000 * 100vw);

border: solid yellow 0px;

}
.iframe-map {
}

.text-map {
  --width-text-map: 750;

  top: 60%;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-map) / 1000 * 100vw);

  font-size: 2.5vw;
}
.text-map .large {
  font-size: 4vw;
}
.text-map .medium {
  font-size: 3.5vw;
  font-weight: bold;
}

/* --- よだかのレコードとは --- */
#frame-yodaka {
  margin-top: 20px;
}
.yodaka {
  --width-yodaka: 715;
  width: calc(var(--width-yodaka) / 1000 * 100vw);
}
.text-yodaka {
  --width-text-yodaka: 930;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 48%;
  width: calc(var(--width-text-yodaka) / 1000 * 100vw);

  font-size: 2.2vw;
  line-height: 140%;
border: solid red 0px;
}

/* --- よくある質問 --- */
#frame-faq {
  --height-frame-faq: 3520;

  margin-top: 20px;
  height: calc(var(--height-frame-faq) / 1000 * 100vw);

border: solid yellow 0px;
}
.faq-title {
  width: 100vw;
}
.text-faq {
  --width-text-faq: 950;
  --height-text-faq: 3200;

  top: 4%;
  width: calc(var(--width-text-faq) / 1000 * 100vw);
  height: calc(var(--height-text-faq) / 1000 * 100vw);
  font-size: 3vw;
/*  overflow-y: scroll; */

border: solid red 0px;
}
.item {
  margin-left: calc(var(--ml-item) / 1000 * 100vw);

}
.item .question {
  font-size: 3.5vw;
  margin-top: calc(var(--mt-question) / 1000 * 100vw);
}
.item .answer {
  margin-top: calc(var(--mt-answer) / 1000 * 100vw);
}


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

  height: calc(var(--height-footer) / 1000 * 100vw);
border: solid white 0px;

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

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

  width: calc(var(--width-logo) / 1000 * 100vw);
}
.text-copyright {
  bottom: 10%;
  font-size: 2vw;
}