@charset "UTF-8";

/* 警告 */
.frame-warning {
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}
.warning {
  --width-warning: 822;

  display: block;
  margin: 0 auto;
  /* width: calc(var(--width-warning) * 1px); */
}
#button-ok {
  --mt-button-ok: 240;
  --width-button-ok: 298;

  margin: calc(var(--mt-button-ok) * 1px) auto 0;
  left: 0;
  right: 0;
}
.hand {
  --pt-hand: 360;
  --pl-hand: 100;
  --width-hand: 65;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding-top: calc(var(--pt-hand) * 1px);
  padding-left: calc(var(--pl-hand) * 1px);

  z-index: 2;
  pointer-events: none;
}

/* メイン */
.main {
  display: none;
}

/* キービジュアル */
.kv {
}

/* とは */
.about {
  --width-about: 824;

  margin-top: 20px;
}

/* インフォメーション */
.frame-information {
  position: relative;
}
.information {
  --width-information: 922;
  margin-top: 20px;
}
#button-dej {
  --bottom-button-dej: 430;
  --width-button-dej: 221;
  --offset-button-dej: 180;

  bottom: calc(var(--bottom-button-dej) * 1px);
  left: calc(50% + var(--offset-button-dej) * 1px);
}
#button-entry {
  --bottom-button-entry: 70;
  --width-button-entry: 189;
  --offset-button-entry: 180;

  bottom: calc(var(--bottom-button-entry) * 1px);
  left: calc(50% + var(--offset-button-entry) * 1px);
}

/* スケジュール */
.frame-schedule {
  position: relative;
}
.schedule {
  --width-schedule: 922;
  margin-top: 20px;
}
.calendar {
  --top-calendar: 450;
  --offset-calendar: 460;
  --width-calendar: 784;

  position :absolute;
  top: calc(var(--top-calendar) * 1px * 0.93);
  left: calc(50% - var(--offset-calendar) * 1px);
}
.button-move {
  --top-button-move: 835;
  --width-button-move: 170;

  top: calc(var(--top-button-move) * 1px * 0.96);
}
#button-back {
  --offset-button-back: 100;
  right: calc(50% + var(--offset-button-back) * 1px);
}
#button-next {
  --offset-button-next: -30;
  left: calc(50% + var(--offset-button-next) * 1px);
}

/* マップ */
.frame-map {
  position: relative;
}
.map {
  --width-map: 922;

  margin-top: 20px;
}
#button-map {
  --bottom-button-map: 250;
  --offset-button-map: 100;
  --width-button-map: 142;

  bottom: calc(var(--bottom-button-map) * 1px);
  left: calc(50% + var(--offset-button-map) * 1px);
}

/* faq */
.faq {
  --width-faq: 863;

  margin-top: 20px;
}

/* ロゴ */
.logo-yodaka {
  --width-logo-yodaka: 200;

  margin-top: 50px;
}

/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .frame-warning {
  }
  .warning {
    width: calc(var(--width-warning) / 1000 * 100vw);
  }
  #button-ok {
    margin: calc(var(--mt-button-ok) / 1000 * 100vw) auto 0;
    width: calc(var(--width-button-ok) / 1000 * 100vw);
  }
  .hand {
    padding-top: calc(var(--pt-hand) / 1000 * 100vw);
    padding-left: calc(var(--pl-hand) / 1000 * 100vw);
    width: calc(var(--width-hand) / 1000 * 100vw * 2.5);
  }

  .main {
  }
  .kv {
    width: 100vw;
  }
  .about {
    width: calc(var(--width-about) / 1000 * 100vw);
  }
  .frame-information {
  }
  .information {
    width: calc(var(--width-information) / 1000 * 100vw);
  }
  #button-dej {
    bottom: calc(var(--bottom-button-dej) / 1000 * 100vw);
/*    right: calc(var(--right-button-dej) / 1000 * 100vw); */
    left: calc(50% + var(--offset-button-dej) / 1000 * 100vw);

    width: calc(var(--width-button-dej) / 1000 * 100vw);
  }
  #button-entry {
    bottom: calc(var(--bottom-button-entry) / 1000 * 100vw);
    left: calc(50% + var(--offset-button-entry) / 1000 * 100vw);
    width: calc(var(--width-button-entry) / 1000 * 100vw);
  }
  .schedule {
    width: calc(var(--width-schedule) / 1000 * 100vw);
  }
  .calendar {
    top: calc(var(--top-calendar) / 1000 * 100vw);
    left: calc(50% - var(--offset-calendar) / 1000 * 100vw);
    width: calc(var(--width-calendar) / 1000 * 100vw);
  }
  .button-move {
    top: calc(var(--top-button-move) / 1000 * 100vw);
    left: calc(50% - var(--offset-button-move) / 1000 * 100vw);
    width: calc(var(--width-button-move) / 1000 * 100vw);
  }
  #button-back {
    right: calc(50% + var(--offset-button-back) / 1000 * 100vw);
  }
  #button-next {
    left: calc(50% + var(--offset-button-next) / 1000 * 100vw);
  }
  .map {
    width: calc(var(--width-map) / 1000 * 100vw);
  }
  #button-map {
    bottom: calc(var(--bottom-button-map) / 1000 * 100vw);
    left: calc(50% + var(--offset-button-map) / 1000 * 100vw);
    width: calc(var(--width-button-map) / 1000 * 100vw);
  }
  .faq {
    width: calc(var(--width-faq) / 1000 * 100vw);
  }
  .logo-yodaka {
    width: calc(var(--width-logo-yodaka) / 1000 * 100vw);
  }
}