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

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

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

/* --- メニュー --- */
#frame-menu {
}
.menu {
}
.menu-story {
  --width-menu-story: 127;
  width: calc(var(--width-menu-story) / 1000 * 100vw);
}
.menu-point {
  --width-menu-point: 103;
  width: calc(var(--width-menu-point) / 1000 * 100vw);
}
.menu-format {
  --width-menu-format: 125;
  width: calc(var(--width-menu-format) / 1000 * 100vw);
}
.menu-tokyo {
  --width-menu-tokyo: 136;
  width: calc(var(--width-menu-tokyo) / 1000 * 100vw);
}
.menu-osaka {
  --width-menu-osaka: 136;
  width: calc(var(--width-menu-osaka) / 1000 * 100vw);
}
.menu-fee {
  --width-menu-fee: 97;
  width: calc(var(--width-menu-fee) / 1000 * 100vw);
}
.menu-goods {
  --width-menu-goods: 99;
  width: calc(var(--width-menu-goods) / 1000 * 100vw);
}
.menu-map {
  --width-menu-map: 80;
  width: calc(var(--width-menu-map) / 1000 * 100vw);
}
.menu-about {
  --width-menu-about: 99;
  width: calc(var(--width-menu-about) / 1000 * 100vw);
}
.menu-faq {
  --width-menu-faq: 139;
  width: calc(var(--width-menu-faq) / 1000 * 100vw);
}

/* --- キービジュアル --- */
#frame-kv {
}
.kv {
  width: 100vw;
}

/* --- キャッチ --- */
#frame-catch {
}
.catch {
  margin-top: 100px;
  width: 100vw;
}
.button-ticket {
  width: calc(var(--width-button-ticket) / 1000 * 100vw);
}

#button-ticket-1 {
  top: 5%;
}

/* --- カルーセル --- */
#frame-scenes {
  --height-frame-scenes: 290;
  height: calc(var(--height-frame-scenes) / 1000 * 100vw);

  margin-top: 30px;

}
.slider-scenes {
  --height-slider-scenes: 290;

  width: 100vw;
  height: calc(var(--height-slider-scenes) / 1000 * 100vw); 
}
.scene {
  --width-scene: 399;

  width: calc(var(--width-scene) / 1000 * 100vw);

}


/* --- ストーリー --- */
#frame-story {
  --height-frame-story: 1350;

  height: calc(var(--height-frame-story) / 1000 * 100vw);
border: solid red 0px;
}
.story {
  width: 100vw;
}
.text-story {
  width: 90vw;

  font-size: 3vw;
  line-height: 180%;
border: solid white 0px;
}
.illust-story {

  width: 100vw;
}

/* --- 動画 --- */
#frame-movie {
}
.movie-title {
  width: 100vw;
}
.movie {
  width: 100vw;
}

/* --- ポイント --- */
#frame-point {
}
.point {
  width: 100vw;
}

/* --- リピーター --- */
#frame-repeater {
}
.repeater {
  width: 100vw;
}
.text-repeater-1 {
 --width-text-repeater-1: 950;

  width: calc(var(--width-text-repeater-1) / 1200 * 100vw);

  top: 43%;
  line-height: 2vw;
}
.text-repeater-1 .large {
  font-size: 3vw;
}
.text-repeater-1 .medium {
  font-size: 2.5vw;
}
.text-repeater-1 .small {
  font-size: 2vw;
}
.text-repeater-2 {
  --offset-text-repeater-2: (-60);

  left: calc(50% + var(--offset-text-repeater-2) / 1200 * 100vw);
  font-size: 3vw;
}
.text-repeater-3 {
  --width-text-repeater-2: 900;
  --offset-text-repeater-2: 420;

  width: calc(var(--width-text-repeater-2) / 1200 * 100vw);
  left: calc(50% - var(--offset-text-repeater-2) / 1200 * 100vw);
  font-size: 1.8vw;
}
.text-repeater-4 {
  --width-text-repeater-2: 880;
  --offset-text-repeater-2: 330;

  width: calc(var(--width-text-repeater-2) / 1200 * 100vw);
  left: calc(50% - var(--offset-text-repeater-2) / 1200 * 100vw);
  bottom: 3%;
  font-size: 2.5vw;

}
.text-repeater-4 .caution {
}
#button-repeater {
  --offset-button-repeater: (-20);

  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-button-repeater) / 1200 * 100vw);
}

/* --- プレイタイプ --- */
#frame-format {
}
.format {
  width: 100vw;
}

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

/* --- スケジュール(東京) --- */
#frame-tokyo {
border: solid yellow 0px;
}
.schedule-tokyo {
  width: 100vw;
border: solid white 0px;
}
.text-tokyo {
  top: 7%;
}
/* --- スケジュール(大阪) --- */
#frame-osaka {
border: solid yellow 0px;
}
.schedule-osaka {
  width: 100vw;
border: solid white 0px;
}
.text-osaka {
  top: 22%;
}
/* --- スケジュール(共通) --- */
.text-schedule {
  width: 95vw;

   line-height: 90%;
border: solid white 0px;
}
.text-schedule .large {
  font-size: 4.5vw;
}
.text-schedule .medium {
  font-size: 4vw;
}
.text-schedule .small {
  font-size: 3.5vw;
}

/* --- チケット(料金) --- */
#frame-fee {
  --height-frame-fee: 1100;

  height: calc(var(--height-frame-fee) / 1000 * 100vw);
border: solid white 0px;
}
.fee {
  width: 100vw;
}
.text-fee {
  top: 45%;
  width: 75vw;

  font-size: 3vw;

border: solid white 0px;
}
.notice {
  padding-left: 4.5vw;
  text-indent: -4.5vw;
}
.text-start {
  bottom: 21%;
  width: 90vw;

  font-size: 4vw;

border: solid white 0px;
}
#button-ticket-tokyo {
  --offset-button-ticket-tokyo: 30;

  right: calc(50% + var(--offset-button-ticket-tokyo) / 1000 * 100vw);
  bottom: 4%;
  width: calc(var(--width-button-ticket) / 1000 * 100vw * 0.9);
}
#button-ticket-osaka {
  --offset-button-ticket-osaka: 30;

  left: calc(50% + var(--offset-button-ticket-osaka) / 1000 * 100vw);
  bottom: 4%;
  width: calc(var(--width-button-ticket) / 1000 * 100vw * 0.9);
}

/* --- グッズ --- */
#frame-goods {
}
.goods {
  width: 100vw;
}

/* --- マップ --- */
/*
#frame-map {
  --height-frame-map: 1400;

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

border: solid white 0px;
}
.map {
  width: 100vw;
}
.text-map {
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 60%;
  width: 75vw;

  font-size: 2.5vw;
border: solid white 0px;
}
.text-map .large {
  font-size: 3.5vw;
}
*/
#frame-map {
  --height-frame-map: 2700;

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

border: solid white 0px;
}
.map {
  width: 100vw;
}
.embed-map {
  --width-embed-map: 750;
  --height-embed-map: 750;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  width: calc(var(--width-embed-map) / 1000 * 100vw);
  height: calc(var(--height-embed-map) / 1000 * 100vw);
}
.embed-map-tokyo {
  top: 22%;
}
.embed-map-osaka {
  top: 69%;
}
iframe-map {
}
.text-map {
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 75vw;
  font-size: 2.5vw;
border: solid white 0px;
}
.text-map-tokyo {
  top: 6%;
}
.text-map-osaka {
  top: 53%;
}
.text-map .large {
  font-size: 3.5vw;
}
.text-map .medium {
  font-size: 3vw;
}


/* --- アバウト --- */
#frame-about {
  --height-frame-about: 2000;

  height: calc(var(--height-frame-about) / 1000 * 100vw);
}
.about {
  width: 100vw;
}
.section-about-1 {
  width: 85vw;
}
.about-1 {
  width: 30vw;
}
.text-about-1 {
  width: 65vw;

  font-size: 3vw;
}
.text-about-1 .large {
  font-size: 4vw;
}
.section-about-2 {
  width: 85vw;
  margin: 0 auto;
border: solid white 0px;
}
.text-about-2 {
  width: 85vw;

  padding-right: 10px;
  text-align: left;
  color: white;
  font-size: 3vw;
  line-height: 180%;
}
.text-about-2 .large {
  font-size: 4vw;
  font-weight: bold;
}
.section-about-3 {
  display: flex;
  width: 85vw;
  margin: 0 auto;
border: solid white 0px;
}
.text-about-3 {
  width: 85vw;

  font-size: 3vw;
}
.about-3 {
  width: 55vw;
  float: left;
}
.illust-about {
  width: 100vw;
}


/* --- よくある質問 --- */
#frame-faq {
  --height-frame-faq: 1400;
  height: calc(var(--height-frame-faq) / 1000 * 100vw);

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

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

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

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

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

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

}
.footer {
}

.logo {
  --width-logo: 253;
  width: calc(var(--width-logo) / 1000 * 100vw);

  bottom: 11%;
}
.text-copyright {
  font-size: 2vw;
}