@charset "UTF-8";

.text {
  font-family: 'GenEiLateMin';
}

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

/* --- キャッチ --- */
#frame-catch {
  margin-top: 50px;
}
.catch {
  --width-catch: 1000;
}

/* --- シーン --- */
#frame-scenes {
  --width-frame-scenes: 750;
  --height-frame-scenes: 180;

  position: relative;
  overflow: hidden;
}
.slider-scenes {
  --width-slider-scenes: 750;
  --height-slider-scenes: 180;

  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.scene {
  --width-scene: 320;
}

/* --- ポイント --- */
#frame-point {
  margin-top: 0px;
}
.point {
  --width-point: 1000;
}

/* --- ストーリー --- */
#frame-story {
  position: relative;
  margin-top: 50px;
}
.story {
  --width-story: 1000;
}
.text-story {
  --width-text-story: 740;
  --height-text-story: 440;

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

  top: 28%;
  color: white;
  text-align: left;

  overflow-y: hidden;
}
.text-story .hidden {
/*  display: none; */
}
#button-more {
  --width-button-more: 200;

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

}

/* --- プレイ形式 --- */
#frame-format {
  margin-top: 50px;
}
.format {
  --width-format: 1000;
}

/* --- チケット(料金) --- */
#frame-fee {
  position: relative;
  margin-top: 50px;
}
.fee {
  --width-fee: 1000;
}

/* --- スケジュール --- */
#frame-schedule {
  position: relative;
  margin-top: 50px;
}
.schedule {
  --width-schedule: 1000;
}
.text-schedule {
  --width-text-schedule: 700;

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

  top: 18%;
  color: white;
  text-align: left;

}
.text-schedule .small {
}
.text-schedule .medium {
}
.text-schedule .attention {
}
.text-schedule .reverse {
  background-color: orange;
  color: black;
}
#calendar {
  --width-calendar: 643;

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

z-index: 2;

}
#button-ticket {
  --width-button-ticket: 260;

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

  bottom: 7%;
}

/* --- マップ --- */
#frame-map {
  position: relative;
  margin-top: 50px;
}
.map {
  --width-map: 1000;
}
.embed-map {
  --width-embed-map: 650;
  --height-embed-map: 550;

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

}
.iframe-map {
  width: 100%;
  height: 100%;
}
.text-map {
  --width-text-map: 650;

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

  text-align: left;
  color: white;
}
.text-map .large {
  font-weight: bold;
}
.text-map .medium {
}

/* --- FAQ --- */
#frame-faq {
  margin-top: 50px;
}
.faq-title {
  --width-faq-title: 1000;
}
.faq-line-up {
}
.text-faq {
  --width-text-faq: 850;

  margin: 0 auto;
}
.item {
  text-align: left;
  color: white;
}
.item .question {
  --mt-question: 40;
  font-weight: bold;
}
.item .answer {
  --mt-answer: 5;
}
.faq-line-bottom {
  --mt-faq-line-bottom: 30;
}

/* --- フッタ --- */
#frame-footer {
  margin-top: 50px;
}
.logo {
  --width-logo: 299;
}
/*
.text-copyright {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  color: white;
  line-height: 140%;
}
*/

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

/* 背景部 */
.wrapper {
  --width-wrapper: 1000;

  background-image: url("../../../images/event/2512cleopatra/wide/behind.png");
  background-repeat: repeat-y;
  background-position: center top;

  z-index: 0;
}

/* サイドバー */
.sidebar {
  --width-sidebar: 40;

  position: fixed;
  top: 0;
  width: calc(var(--width-sidebar) * 1px);
  height: 100%;
  background-image: url("../../../images/event/2512cleopatra/wide/sidebar.png");
  background-repeat: repeat-y;

  z-index: 999;
  overflow: hidden;
}
.sidebar.left {
}
.sidebar.right {
}
.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;

  background-image: url("../../../images/event/2512cleopatra/wide/sidebar.png");
  background-repeat: repeat-y;

  animation: scrollUp 20s linear infinite;
}
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 高さの半分だけ動かす＝シームレスループ */
  }
}

/* 両脇 */
.outer {
  --width-outer: 2620;

  position: fixed;
  background-image: url("../../../images/event/2512cleopatra/wide/outer.png");
  background-repeat: repeat-y;
  background-position: center top;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  height: 100%;

  z-index: -2;
}