@charset "UTF-8";

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

.frame-menu #menu-story {
  --offset-story: 320;
  --bottom-story: 20;
  --width-story: 166;

  right: calc(50% + var(--offset-story) * 1px);
  bottom: calc(var(--bottom-story) * 1px);
}
.frame-menu #menu-howto {
  --offset-howto: 160;
  --bottom-howto: 20;
  --width-howto: 90;

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

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-format) * 1px);
}
.frame-menu #menu-notice {
  --offset-notice: 200;
  --bottom-notice: 20;
  --width-notice: 123;

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

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

/* 1080px未満 */
@media screen and (max-width: 1080px) {
  .frame-menu .menu {
  }
  .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-howto {
    right: calc(50% + var(--offset-howto) / 1080 * 100vw);
    bottom: calc(var(--bottom-howto) / 1080 * 100vw);
    width: calc(var(--width-howto) / 1080 * 100vw);
  }
  .frame-menu #menu-format {
    bottom: calc(var(--bottom-format) / 1080 * 100vw);
    width: calc(var(--width-format) / 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);
  }
  .frame-menu #menu-faq {
    left: calc(50% + var(--offset-faq) / 1080 * 100vw);
    bottom: calc(var(--bottom-faq) / 1080 * 100vw);
    width: calc(var(--width-faq) / 1080 * 100vw);
  }
}