@charset "utf-8";

body {
  background-color: #FFFFFF;
}

a:hover {
  cursor: pointer;
  filter: alpha(opacity=80);
  opacity:0.8;
}

.container {
  margin: 0 auto;
  padding: 0;
}

.area-contents {
  text-align: center;
}

.kv {
  --width-kv: 1000;
}
.story {
  --width-story: 1000;
  margin-top: 20px;
}
.repeater {
  --width-repeater: 900;
  margin-top: 20px;
}
.format {
  --width-format: 900;

  margin-top: 20px;
}
.bar1 {
  --width-bar1: 1000;
  margin-top: 20px;
}
.ticket {
 --width-ticket: 900;

  margin-top: 20px;
}

.frame-schedule {
  --height-frame-schedule: 950;

  position: relative;
  margin-top: 20px;
  height: calc(var(--height-frame-schedule) * 1px);
}
.bg-schedule {
  --width-bg-schedule: 1000;

  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--width-bg-schedule) * 1px);
}
.schedule {
  --width-schedule: 900;
  --top-schedule: 100;

  position: absolute;
  top: 6%;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.button-ticket {
  --width-button-ticket: 272;

  position: absolute;
}
.button-ticketN {
  right: 55%;
  bottom: 1%;
}
.button-ticketR {
  left: 55%;
  bottom: 1%;
}
.frame-campaign {
}
.campaign {
  --width-campaign: 900;

  margin-top: 20px;
}
.frame-map {
  position: relative;
}
.map {
  --width-map: 900;

  margin-top: 20px;
}
.button-map {
  --width-button-map: 268;

  position: absolute;
  left: 55%;
  bottom: 8%;
}
.frame-goods {
}
.goods {
  --width-goods: 910;

  margin-top: 20px;
}
.bar2 {
  --width-bar2: 1000;

  margin-top: 20px;
}

.faq {
  --width-faq: 900;
  margin-top: 20px;
}

.frame-logo {
  --height-frame-logo: 664;

  position: relative;
  margin-top: 20px;
  height: calc(var(--height-frame-logo) * 1px);
}
.bg-logo {
  --width-bg-logo: 1000;

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

.logo {
  --width-logo: 263;

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

/* 1000px未満 */
@media screen and (max-width: 999px) {
  .kv {
    width: calc(var(--width-kv) / 1000 * 100vw);
  }
  .story {
    width: calc(var(--width-story) / 1000 * 100vw);
  }
  .repeater {
    width: calc(var(--width-repeater) / 1000 * 100vw);
  }
  .format {
    width: calc(var(--width-format) / 1000 * 100vw);
  }
  .bar1 {
    width: calc(var(--width-bar1) / 1000 * 100vw);
  }
  .ticket {
    width: calc(var(--width-ticket) / 1000 * 100vw);
  }
  .frame-schedule {
    height: calc(var(--height-frame-schedule) / 1000 * 100vw);
  }
  .bg-schedule {
    width: calc(var(--width-bg-schedule) / 1000 * 100vw);
  }
  .schedule {
    width: calc(var(--width-schedule) / 1000 * 100vw);
  }
  .button-ticket {
    width: calc(var(--width-button-ticket) / 1000 * 100vw);
  }

  .button-ticketN {
  }
  .button-ticketR {
  }
  .frame-campaign {
  }
  .campaign {
    width: calc(var(--width-campaign) / 1000 * 100vw);
  }
  .frame-map {
  }
  .map {
    width: calc(var(--width-map) / 1000 * 100vw);
  }
  .button-map {
    width: calc(var(--width-button-map)/ 1000 * 100vw);
  }
  .bg-goods {
    width: calc(var(--width-bg-goods) / 1000 * 100vw);
  }
  .goods {
    width: calc(var(--width-goods) / 1000 * 100vw);
  }
  .faq {
    width: calc(var(--width-faq)/ 1000 * 100vw);
  }
  .bar2 {
    width: calc(var(--width-bar2)/ 1000 * 100vw);
  }
  .frame-logo {
    height: calc(var(--height-frame-logo) / 1000 * 100vw);
  }
  .bg-logo {
    width: calc(var(--width-bg-logo) / 1000 * 100vw);
  }
  .logo {
    width: calc(var(--width-logo)/ 1000 * 100vw);
  }
}