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

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

:root {
}

.background {
}


/* ---------- */
/* --- ヘッダ --- */

#framesp-header {
  position: relative;
}
.header {
  --height-header: 160;

  width: 100vw;
  height: calc(var(--height-header) / 1000 * 100vw);
  background-color: white;

}
.title{
  --pt-title: 15;
  --pl-title: 30;

  font-size: 3vw;
  color: black;
  text-align: left;
  padding-top: calc(var(--pt-title) / 1000 * 100vw);
  padding-left: calc(var(--pl-title) / 1000 * 100vw);
}
/* メニュー */
/* →別ファイル */
/*
#button-menu {
  --top-button-menu: 0;
  --right-button-menu: 20;
  --width-button-menu: 77;

  position: absolute;
  right: calc(var(--right-button-menu) / 1000 * 100vw);
  top: calc(var(--top-button-menu) / 1000 * 100vw);
  width: calc(var(--width-button-menu) / 1000 * 100vw * 2);
z-index: 99;
position: fixed;
}

.frame-menu {
  --height-frame-menu:		 174;
  height: calc(var(--height-frame-menu) * 1px);

  position: fixed !important;
  top: 0;
  width: 100vw;
  pointer-events: none;
  z-index: 99;

border: solid red 0px;
}

#button-menu {
}
.frame-menu {
}
.menu {
  --width-menu: 1000;

  margin: 0 auto;
  left: 0;
  right: 0;
  width: calv(var(--width-menu) / 1000 * 100vw);
}

.menu img {
  display: block;
}
.menu .items {
  --right-items: 20;
  --top-items: 90;

  position: absolute;
  top: calc(var(--top-items) / 1000 * 100vw);
  right: calc(var(--right-items) / 1000 * 100vw);
  pointer-events: auto;
  background-color: black;
border: solid red 0px;

}

.menu .item {
  --width-item: 236;
  --margin-item: 10;

  margin-top: calc(var(--margin-item) / 1000 * 100vw);
  margin-bottom: calc(var(--margin-item) / 1000 * 100vw);
  width: calc(var(--width-item) / 1000 * 100vw * 2);
}
.menu .item:hover {
  cursor: pointer;
  filter: alpha(opacity=85);
  opacity: 0.85;
}

.menu .item:focus, 
.menu .item:active {
  outline: none !important;
  box-shadow: none;
  transform: translate(4px, 4px);
}

.menu .items {
  display: none;
}
*/

/* --- キービジュアル --- */
#framesp-kv {
  position: relative;
}
.kv {
  width: 100vw;
}
/* --- チケットボタン --- */
#framesp-buttons {
  --mt-framesp-buttons:	   0;
  --height-framesp-buttons: 370;

  position: relative;
  margin-top: calc(var(--mt-framesp-buttons) / 1000 * 100vw);
  height: calc(var(--height-framesp-buttons) / 1000 * 100vw);
border: solid red 0px;
}
.button-ticket-a {
  --width-button-ticket-a: 248;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  width: calc(var(--width-button-ticket-a) / 1000 * 100vw * 2.0);
}
.other {
  --width-other: 497;

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


/* --- B-SIDEとは --- */
#framesp-bside {
  --mt-frame-bside: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-bside) / 1000 * 100vw);
border: solid red 0px;
}
.bside {
  --width-bside: 1000;
  width: calc(var(--width-bside) / 1000 * 100vw);
}
/* --- リピーターとは --- */
#framesp-repeater {
  --mt-frame-repeater: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-repeater) / 1000 * 100vw);
border: solid red 0px;
}
.repeater {
  --width-repeater: 1000;
  width: calc(var(--width-repeater) / 1000 * 100vw);
}
.button-original {
  --top-button-original: 150;
  --left-button-original: 50;
  --width-button-original: 280;

  top: calc(var(--top-button-original) / 1000 * 100vw);
  left: calc(var(--left-button-original) / 1000 * 100vw);
  width: calc(var(--width-button-original) / 1000 * 100vw);
}

/* --- フォーマット --- */
#framesp-format {
  --mt-frame-format: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-format) / 1000 * 100vw);
}
.format {
  --width-format: 1000;
  width: calc(var(--width-format) / 1000 * 100vw);
}

/* --- スケジュール --- */
#framesp-schedule {
  --mt-frame-schedule: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-schedule) / 1000 * 100vw);
border: solid red 0px;
}
.schedule {
  --width-schedule: 1000;
  width: calc(var(--width-schedule) / 1000 * 100vw);
}

/* --- ストーリー --- */
#framesp-story {
  --mt-frame-story: 50;
/*   --height-frame-story: 1700; */

  position: relative;
  margin-top: calc(var(--mt-frame-story) / 1000 * 100vw);
/*  height: calc(var(--height-frame-story) / 1000 * 100vw); */
border: solid red 0px;
}
.story {
  --width-story: 1000;
  width: calc(var(--width-story) / 1000 * 100vw);
}

/* --- チケット --- */
#framesp-fee {
  --mt-frame-fee: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-fee) / 1000 * 100vw);
border: solid red 0px;
}
.fee {
  --width-fee: 1000;
  width: calc(var(--width-fee) / 1000 * 100vw);
}
.button-ticket-b {
  --width-button-ticket-b: 287;
  --top-button-ticket-b: 730;			/* display:noneによりずれが生じる */
  
  right: 54%;
  top: calc(var(--top-button-ticket-b) / 1000 * 100vw);
  width: calc(var(--width-button-ticket-b) / 1000 * 100vw * 1.3);
}
.button-ticket-c {
  --width-button-ticket-c: 287;
  --top-button-ticket-c: 730;			/* display:noneによりずれが生じる */
  
  left: 54%;
  top: calc(var(--top-button-ticket-c) / 1000 * 100vw);
  width: calc(var(--width-button-ticket-c) / 1000 * 100vw * 1.3);
}

/* --- キャンペーン --- */
#framesp-campaign {
  --mt-frame-campaign: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-campaign) / 1000 * 100vw);
border: solid red 0px;
}
.campaign {
  --width-campaign: 1000;
  width: calc(var(--width-campaign) / 1000 * 100vw);
}

/* マップ*/
/* →別ファイル */

/* よくある質問 */
/* →別ファイル */

/* ロゴ */
#framesp-footer {
}
.logo-yodaka {
  --mt-logo-yodaka: 50;
  --mb-logo-yodaka: 50;

  margin-top: calc(var(--mt-logo-yodaka) * 1px);
  margin-bottom: calc(var(--mb-logo-yodaka) * 1px);

}