@charset "UTF-8";

.frame-menu .menu {
  position: absolute;
}

.frame-menu #menu-story {
  --offset-story: 300;
  --bottom-story: 20;
  --width-story: 147;

  right: calc(50% + var(--offset-story) * 1px);
  bottom: calc(var(--bottom-story) * 1px);
}
/*
.frame-menu #menu-movie {
  --offset-movie: 170;
  --bottom-movie: 20;
  --width-movie: 136;

  right: calc(50% + var(--offset-movie) * 1px);
  bottom: calc(var(--bottom-movie) * 1px);
}
*/
.frame-menu #menu-artist {
  --offset-artist: 150;
  --bottom-artist: 20;
  --width-artist: 68;

  right: calc(50% + var(--offset-artist) * 1px);
  bottom: calc(var(--bottom-artist) * 1px);
}
.frame-menu #menu-format {
  --bottom-format: 20;
  --width-format: 150;

/*
  --offset-format: (-10);
  left: calc(50% + var(--offset-format) * 1px);
*/
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-format) * 1px);
}
.frame-menu #menu-howto {
  --offset-howto: 140;
  --bottom-howto: 20;
  --width-howto: 121;

  left: calc(50% + var(--offset-howto) * 1px);
  bottom: calc(var(--bottom-howto) * 1px);
}
.frame-menu #menu-notice {
  --offset-notice: 310;
  --bottom-notice: 20;
  --width-notice: 123;

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

/* 1080px未満 */
@media screen and (max-width: 1080px) {

  .frame-menu #menu-story {
    right: calc(50% + var(--offset-story) / 1080 * 100vw);
    bottom: calc(var(--bottom-story) / 1080 * 100vw);
    width: calc(var(--width-story) / 1080 * 100vw);
  }
/*
  .frame-menu #menu-movie {
    right: calc(50% + var(--offset-movie) / 1080 * 100vw);
    bottom: calc(var(--bottom-movie) / 1080 * 100vw);
    width: calc(var(--width-movie) / 1080 * 100vw);
  }
*/
  .frame-menu #menu-artist {
    right: calc(50% + var(--offset-artist) / 1080 * 100vw);
    bottom: calc(var(--bottom-artist) / 1080 * 100vw);
    width: calc(var(--width-artist) / 1080 * 100vw);
  }
  .frame-menu #menu-format {
/*    left: calc(50% + var(--offset-format) / 1080 * 100vw); */
    bottom: calc(var(--bottom-format) / 1080 * 100vw);
    width: calc(var(--width-format) / 1080 * 100vw);
  }
  .frame-menu #menu-howto {
    left: calc(50% + var(--offset-howto) / 1080 * 100vw);
    bottom: calc(var(--bottom-howto) / 1080 * 100vw);
    width: calc(var(--width-howto) / 1080 * 100vw);
  }
  .frame-menu #menu-notice {
    left: calc(50% + var(--offset-notice) / 1080 * 100vw);
    bottom: calc(var(--bottom-notice) / 1080 * 100vw);
    width: calc(var(--width-notice) / 1080 * 100vw);
  }
}