@charset "UTF-8";

.background {
  background-image: url("../../../images/event/2302yonkoma/background.png");
  background-repeat: repeat-y;
  background-position: top center;
  max-width: 1200px;
  margin: 0 auto;
}

.kv {
  margin: 0 auto;
}
.kv-pc {
  display: block;
}
.kv-sp {
  display: none;
}

.balloon {
  position: absolute;
}

/* このゲームについて */
.frame-howto {
  --width-frame-howto: 812;

  margin: 20px auto;
  position: relative;
  width: calc(var(--width-frame-howto) * 1px);
}
.howto {
  --width-howto: 812;
}
/* 練習問題 */
.frame-practice {
  --width-frame-practice: 866;		/* 実サイズは893px */

  margin: 20px auto;
  position: relative;
  width: calc(var(--width-frame-practice) * 1px);
}
.practice {
  --width-practice: 866;		/* 実サイズは893px */
}

/* ストーリー */
.frame-story {
  --width-frame-story: 866;		/* 実サイズは895px */

  margin: 50px auto;
  position: relative;
  width: calc(var(--width-frame-story) * 1px);
}
.story {
  --width-story: 866;		/* 実サイズは895px */
}
.balloon-story {
  --top-balloon-story: 20;
  --left-balloon-story: 120;
  --width-balloon-story: 287;

  top: calc(var(--top-balloon-story) * 1px);
  left: calc(var(--left-balloon-story) * 1px);
}

/* グッズ */
.frame-goods {
  --width-frame-goods: 866;		/* 実サイズは895px */

  margin: 50px auto;
  position: relative;
  width: calc(var(--width-frame-goods) * 1px);
}
.goods {
  --width-goods: 866;		/* 実サイズは895px */
}
.balloon-goods {
  --top-balloon-goods: -30;
  --left-balloon-goods: 130;
  --width-balloon-goods: 184;

  top: calc(var(--top-balloon-goods) * 1px);
  left: calc(var(--left-balloon-goods) * 1px);
}

/* インフォメーション */
.frame-information {
  --width-frame-information: 866;	/* 実サイズは873px */

  margin: 50px auto;
  position: relative;
  width: calc(var(--width-frame-information) * 1px);
}
.information {
  --width-information: 866;	/* 実サイズは873px */
}
.balloon-information {
  --top-balloon-information: -20;
  --left-balloon-information: 160;
  --width-balloon-information: 426;

  top: calc(var(--top-balloon-information) * 1px);
  left: calc(var(--left-balloon-information) * 1px);
}

/* スケジュール */
.frame-schedule {
  --width-frame-schedule: 866;	/* 実サイズは895px */

  margin: 20px auto;
  position: relative;
  width: calc(var(--width-frame-schedule) * 1px);
}
.schedule {
  --width-schedule: 866;	/* 実サイズは895px */
}
.balloon-schedule {
  --top-balloon-schedule: 20;
  --left-balloon-schedule: 160;
  --width-balloon-schedule: 283;

  top: calc(var(--top-balloon-schedule) * 1px);
  left: calc(var(--left-balloon-schedule) * 1px);
}
.button-ticket {
  --width-button-ticket: 253;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5%;
}

/* マップ */
.frame-map {
  --width-frame-map: 866;	/* 実サイズは897px */

  margin: 20px auto;
  position: relative;
  width: calc(var(--width-frame-map) * 1px);
}
.map {
  --width-map: 866;	/* 実サイズは897px */
}
.balloon-map {
  --top-balloon-map: 20;
  --left-balloon-map: 160;
  --width-balloon-map: 206;

  top: calc(var(--top-balloon-map) * 1px);
  left: calc(var(--left-balloon-map) * 1px);
}
.embed-map {
  --width-embed-map: 420;
  --height-embed-map: 420;
  --offset-embed-map: 10;

  position: absolute;
  left: calc(50% + var(--offset-embed-map) * 1px);
  top: 8%;
  width: calc(var(--width-embed-map) * 1px);
  height: calc(var(--height-embed-map) * 1px);

}
.iframe-map {
  width: 100%;
  height: 100%;
}
.text-map {
  --offset-text-map: 20;
  --width-text-map: 380;

  position: absolute;
  top: 30%;
  right: calc(50% + var(--offset-text-map) * 1px);
  width: calc(var(--width-text-map) * 1px);

  font-size: 16px;
  text-align: left;
  color: black;

}
.text-map .large {
  font-size: 24px;
  font-weight: bold;

  font-weight: bold;
}
.text-map .medium {
  font-size: 20px;
  font-weight: bold;
}

/* FAQ */
.frame-faq {
  --width-frame-faq: 866;	/* 実サイズは893px */

  margin: 20px auto;
  position: relative;
  width: calc(var(--width-frame-faq) * 1px);
}
.faq {
  --width-faq: 866;	/* 実サイズは893px */
}
.balloon-faq {
  --top-balloon-faq: 20;
  --left-balloon-faq: 330;
  --width-balloon-faq: 240;

  top: calc(var(--top-balloon-faq) * 1px);
  left: calc(var(--left-balloon-faq) * 1px);
}

.logo {
  --width-logo: 200;
  margin: 20px auto 50px
}

/* 1200px未満 */
@media screen and (max-width: 1200px) {
  .kv {
    width: 100vw;
  }
  .kv-pc {
    display: none;
  }
  .kv-sp {
    display: block;
  }
}

/* 866px未満 */
@media screen and (max-width: 866px) {
  .frame-howto {
    width: calc(var(--width-frame-howto) / 866 * 100vw);
  }
  .howto {
    width: calc(var(--width-howto) / 866 * 100vw);
  }
  .frame-practice {
    width: calc(var(--width-frame-practice) / 866 * 100vw);
  }
  .practice {
    width: calc(var(--width-practice) / 866 * 100vw);
  }
  .frame-story {
    width: calc(var(--width-frame-story) / 866 * 100vw);
  }
  .story {
    width: calc(var(--width-story) / 866 * 100vw);
  }
  .balloon-story {
    top: calc(var(--top-balloon-story) / 866 * 100vw);
    left: calc(var(--left-balloon-story) / 866 * 100vw);
    width: calc(var(--width-balloon-story) / 866 * 100vw);
  }
  .frame-goods {
    width: calc(var(--width-frame-goods) / 866 * 100vw);
  }
  .goods {
    width: calc(var(--width-goods) / 866 * 100vw);
  }
  .balloon-goods {
    top: calc(var(--top-balloon-goods) / 866 * 100vw);
    left: calc(var(--left-balloon-goods) / 866 * 100vw);
    width: calc(var(--width-balloon-goods) / 866 * 100vw);
  }
  .frame-information {
    width: calc(var(--width-frame-information) / 866 * 100vw);
  }
  .information {
    width: calc(var(--width-information) / 866 * 100vw);
  }
  .balloon-information {
    top: calc(var(--top-balloon-information) / 866 * 100vw);
    left: calc(var(--left-balloon-information) / 866 * 100vw);
    width: calc(var(--width-balloon-information) / 866 * 100vw);
  }

  .frame-schedule {
    width: calc(var(--width-frame-schedule) / 866 * 100vw);
  }
  .schedule {
    width: calc(var(--width-schedule) / 866 * 100vw);
  }
  .balloon-schedule {
    top: calc(var(--top-balloon-schedule) / 866 * 100vw);
    left: calc(var(--left-balloon-schedule) / 866 * 100vw);
    width: calc(var(--width-balloon-schedule) / 866 * 100vw);
  }
  .button-ticket {
    width: calc(var(--width-button-ticket) / 866 * 100vw);
  }

  .frame-map {
    width: calc(var(--width-frame-map) / 866 * 100vw);
  }
  .map {
    width: calc(var(--width-map) / 866 * 100vw);
  }
  .balloon-map {
    top: calc(var(--top-balloon-map) / 866 * 100vw);
    left: calc(var(--left-balloon-map) / 866 * 100vw);
    width: calc(var(--width-balloon-map) / 866 * 100vw);
  }
  .embed-map {
    width: 45vw;
    height: 45vw;
  }
  .iframe-map {
  }
  .text-map {
    font-size: 1.7vw;
    right: 50vw;
    width: 46vw;
  }
  .text-map .large {
    font-size: 3vw;
  }
  .text-map .medium {
    font-size: 2.5vw;
  }

  .frame-faq {
    width: calc(var(--width-frame-faq) / 866 * 100vw);
  }
  .faq {
    width: calc(var(--width-faq) / 866 * 100vw);
  }
  .balloon-faq {
    top: calc(var(--top-balloon-faq) / 866 * 100vw);
    left: calc(var(--left-balloon-faq) / 866 * 100vw);
    width: calc(var(--width-balloon-faq) / 866 * 100vw);
  }

  .logo {
    width: calc(var(--width-logo) / 866 * 100vw);
  }
}