/* PC用 */
@charset "UTF-8";

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

/* ---------- */

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

#frame-header {
  background-color: white;
  position: relative;
  height: 40px;
}
.title {
  --offset-title: 300;

  font-size: 28px;

  position: absolute;
  top: 0;
  right: calc(50% + var(--offset-title) * 1px);
}

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

/* --- ストーリー・キャッチ --- */
#frame-story {
  --mt-frame-story: 50;
  --height-frame-story: 2727;

  margin-top: calc(var(--mt-frame-story) * 1px);
  height: calc(var(--height-frame-story) * 1px);
  background-image: url('../../../images/dej/2505amethyst/pc/background/story.png');
}
.catch {
  --top-catch: 50;
  --width-catch: 1513;

  top: calc(var(--top-catch) * 1px);
}
.story {
  --top-story: 650;
  top: calc(var(--top-story) * 1px);
}

/* --- インフォメーション --- */
#frame-information {
  --mt-frame-information: 50;
  --height-frame-information: 3316;

  margin-top: calc(var(--mt-frame-information) * 1px);
  height: calc(var(--height-frame-information) * 1px);
  background-image: url('../../../images/dej/2505amethyst/pc/background/information.png');

}
.information {
}
.button-dej {
  --top-button-dej: 1020;
  --width-button-dej: 870;


  top: calc(var(--top-button-dej) * 1px);
}

/* --- プレイタイプ --- */
#frame-format {
  --mt-frame-format: 0;
  --height-frame-format: 1813;

  margin-top: calc(var(--mt-frame-format) * 1px);
  height: calc(var(--height-frame-format) * 1px);
  background-image: url('../../../images/dej/2505amethyst/pc/background/format.png');
}
.format {
  --top-format: 50;

  top: calc(var(--top-format) * 1px);
}

/* --- スケジュール --- */
#frame-schedule {
  --mt-frame-schedule: 0;
  --height-frame-schedule: 2927;

  margin-top: calc(var(--mt-frame-schedule) * 1px);
  height: calc(var(--height-frame-schedule) * 1px);
  background-image: url('../../../images/dej/2505amethyst/pc/background/schedule.png?1');
}
.schedule {
  --top-schedule: 150;
  --width-schedule: 2044;

  top: calc(var(--top-schedule) * 1px);
}
.calendar {
  --top-calendar: 1000;
  --width-calendar: 1240;

  top: calc(var(--top-calendar) * 1px);

}

/* --- マップ --- */
#frame-map {
  --mt-frame-map: 0;
  --height-frame-map: 1610;

  margin-top: calc(var(--mt-frame-map) * 1px);
  height: calc(var(--height-frame-map) * 1px);
  background-image: url('../../../images/dej/2505amethyst/pc/background/map.png');
}
.map {
  --top-map: 150;
  --width-map: 2044;
  top: calc(var(--top-map) * 1px);;
}
.text-map {
  --width-text-map: 1200;

  left: calc(50% + var(--left-text-map) * 1px);
  top: 30%;
  left: 54%;
  width: calc(var(--width-text-map) * 1px);
  font-size: 36px;
  line-height: 140%;
}

.text-map .large {
  font-size: 48px;
  line-height: 100%;
}

/* --- よくある質問 --- */
#frame-faq {
  --mt-frame-faq: 0;
  --height-frame-faq: 3164;

  margin-top: calc(var(--mt-frame-faq) * 1px);
  height: calc(var(--height-frame-faq) * 1px);
  background-image: url('../../../images/dej/2505amethyst/pc/background/faq.png');
}
.faq {
  --top-faq: 100;
  --width-faq: 822;

  top: calc(var(--top-faq) * 1px);

}
.text-faq {
  --width-text-faq: 1800;
  --height-text-faq: 2400;

  top: 15%;
  width: calc(var(--width-text-faq) * 1px);
  height: calc(var(--height-text-faq) * 1px);
  font-size: 28px;
border: solid white 0px;
}
.item {
  --ml-item: 20;

  margin-left: calc(var(--ml-item) * 1px);
  padding: 10px;
}
.item .question {
  --mt-question: 50;
  margin-top: calc(var(--mt-question) * 1px);
  font-size: 120%;
}
.item .answer {
  --mt-answer: 10;
  margin-top: calc(var(--mt-answer) * 1px);
}

/* --ｰ フッタ --- */
#frame-footer {
  --height-footer: 500;
  height: calc(var(--height-footer) * 1px);
}
.footer {
}
.logo {
  
  --width-logo: 407;
  bottom: 22%;
}

/* 2501px未満 */
@media screen and (max-width: 2500px) {
  #frame-header {
    background-color: white;
    position: relative;
    height: 40px;
  }
  .title {
    right: initial;
    left: 0;
  }
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-story {
    margin-top: calc(var(--mt-frame-story) / 2500 * 100vw);
    height: calc(var(--height-frame-story) / 2500 * 100vw);
  }
  .catch {
    top: calc(var(--top-catch) / 2500 * 100vw);
    width: calc(var(--width-catch) / 2500 * 100vw);
  }
  .story {
    width: 100vw;
    top: calc(var(--top-story) / 2500 * 100vw);
  }
  #frame-information {
    margin-top: calc(var(--mt-frame-information) / 2500 * 100vw);
    height: calc(var(--height-frame-information) / 2500 * 100vw);
  }
  .information {
    width: 100vw;
  }
  .button-dej {
    top: calc(var(--top-button-dej) / 2500 * 100vw);
    width: calc(var(--width-button-dej) / 2500 * 100vw);
  }
  #frame-format {
    margin-top: calc(var(--mt-frame-format) / 2500 * 100vw);
    height: calc(var(--height-frame-format) / 2500 * 100vw);
  }
  .format {
    width: 100vw;
    top: calc(var(--top-format) / 2500 * 100vw);
  }
  #frame-schedule {
    margin-top: calc(var(--mt-frame-schedule) / 2500 * 100vw);
    height: calc(var(--height-frame-schedule) / 2500 * 100vw);
  }
  .schedule {
    top: calc(var(--top-schedule) / 2500 * 100vw);
    width: calc(var(--width-schedule) / 2500 * 100vw);
  }
  .calendar {
    top: calc(var(--top-calendar) / 2500 * 100vw);
    width: calc(var(--width-calendar) / 2500 * 100vw);
  }
  #frame-map {
    margin-top: calc(var(--mt-frame-map) / 2500 * 100vw);
    height: calc(var(--height-frame-map) / 2500 * 100vw);
  }
  .map {
    top: calc(var(--top-map) / 2500 * 100vw);;
    width: calc(var(--width-map) / 2500 * 100vw);;
  }
  .text-map {
    margin: 0 auto;
    width: calc(var(--width-text-map) / 2500 * 100vw);
    font-size: 1.5vw;
    line-height: 150%;
  }
  .text-map .large {
    font-size: 2.2vw;
    line-height: 100%;
  }
  #frame-faq {
    margin-top: calc(var(--mt-frame-faq) / 2500 * 100vw);
    height: calc(var(--height-frame-faq) / 2500 * 100vw);
  }
  .faq {
    top: calc(var(--top-faq) / 2500 * 100vw);
    width: calc(var(--width-faq) / 2500 * 100vw);
  }
  .text-faq {
    top: 15%;
    width: calc(var(--width-text-faq) / 2500 * 100vw);
    height: calc(var(--height-text-faq) / 2500 * 100vw);
    font-size: 28px;
  border: solid white 0px;
  }
  .item {
    margin-left: calc(var(--ml-item) / 2500 * 100vw);
    padding: 10px;
  }
  .item .question {
    margin-top: calc(var(--mt-question) / 2500 * 100vw);
    font-size: 120%;
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 2500 * 100vw);
  }
  #frame-footer {
    height: calc(var(--height-footer) / 2500 * 100vw);
  }
  .footer {
  }
  .logo {
    bottom: 22%;
    width: calc(var(--width-logo) / 2500 * 100vw);
  }
}