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

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

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


/* --- キービジュア]ル --- */
#frame-kv {
  --height-frame-kv: 1404;

  height: calc(var(--height-frame-kv) / 1000 * 100vw);
}
.kv {
  width: 100vw;
}
.title {
  width: 100vw;
}

/* --- キャッチ --- */
#frame-catch {
}
.catch {
  width: 100vw;
}
.text-catch {
  top: 20%;

  font-size: 6vw;
}

/* --- ポイント --- */
#frame-point {
}
.point {
  width: 100vw;
}
.text-point {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  width: 75vw;
  font-size: 3vw;
}
.text-point-1 {
  top: 30%;
}
.text-point-2 {
  top: 59.5%;
}
.text-point-3 {
  top: 89.5%;
}

/* --- ストーリー --- */

#frame-story {
  --height-frame-story: 1102;
   height: calc(var(--height-frame-story) / 1000 * 100vw);
}
.story {
  width: 100vw;

  left: 50%;
  transform: translateX(-50%);
}
#button-size {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 8%;
  width: calc(var(--width-button-size) / 1000 * 100vw);
}
.text-story {
  margin: 0 auto;
  left: 0;
  right: 0;

  width: 85vw;
  font-size: 3vw;
  line-height: 170%;
}
.text-story {
  top: 15%;

}
.text-story-latter {
}

/* --- キャラクター --- */
#frame-character {
}
.character {
  width: 100vw;
}
.text-character {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 15%;

  width: 85vw;
  font-size: 3vw;
  line-height: 170%;
}

/* --- 参加方法 --- */
#frame-howto{
}
.howto {
  width: 100vw;
}
.frame-calendar {
  --top-frame-calendar: 1260;
  --width-frame-calendar: 750;
  --height-frame-calendar: 343;


  top: calc(var(--top-frame-calendar) / 1000 * 100vw);
  width: calc(var(--width-frame-calendar) / 1000 * 100vw);
  height: calc(var(--height-frame-calendar) / 1000 * 100vw);
}
.slider-calendar {
}
.calendar {
}
.text-schedule {
  margin: 0 auto;
  left: 0;
  right: 0;

  width: 77vw;
  top: 34.0%;

  line-height: 140%;
  font-size: 3vw;
}
.text-schedule .large {
  font-size: 4.5vw;
}
.text-schedule .medium {
  font-size: 3.5vw;
}
.text-schedule .small {
  font-size: 2.5vw;
}
.text-fee {
  margin: 0 auto;
  left: 0;
  right: 0;

  width: 70vw;
  font-size: 2.1vw;
  bottom: 8%;
}
.text-start {
  margin: 0 auto;
  left: 0;
  right: 0;

  width: 60vw;
  font-weight: bold;
  font-size: 3vw;
  text-align: center;
  bottom: 4.5%;
}
.text-start .large {
  font-size: 5vw;
}
.text-start .medium  {
  font-size: 4vw;
}
#button-ticket {
  margin: 0 auto;
  left: 0;
  right: 0;

  bottom: 2%;
  width: calc(var(--width-button-ticket) / 1000 * 100vw);
}

/* --- ビギナーズガイド --- */
#frame-beginner {
}
.beginner {
  width: 100vw;
}
.text-beginner {
  top: 28%;
  width: 35vw;
  font-size: 2.5vw;
}
.text-beginner-1 {
  right: 55%;
}
.text-beginner-2 {
  left: 55%;
}
.text-beginner .yellow {
  font-size: 3.5vw;
}

/* --- グッズ --- */
#frame-goods {
}
.goods {
  width: 100vw;
}

/* --- マップ --- */
#frame-map {
}
.map {
  width: 100vw;
}
.embed-map {
  --width-embed-map: 700;
  --height-embed-map: 600;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 12%;

  width: calc(var(--width-embed-map) / 1000 * 100vw);
  height: calc(var(--height-embed-map) / 1000 * 100vw);

border: solid yellow 0px;

}
.iframe-map {
}
.text-map {
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 65%;
  width: 75vw;

  line-height: 150%;
  font-size: 2.5vw;
border: solid white 0px;
}
.text-map .large {
  font-size: 4vw;
}

/* --- アバウト --- */
#frame-about {
}
.about {
  width: 100vw;
}
.section-about-1 {
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 85vw;
  top: 10%;
}
.image-about-1 {
  width: 30vw;
}
.text-about-1 {
  width: 65vw;

  font-size: 2.7vw;
}
.text-about-1 .large {
  font-size: 4vw;
}
.section-about-2 {
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 85vw;
  top: 55%;
border: solid white 0px;
}
.text-about-2 {
  width: 85vw;

  padding-right: 10px;
  text-align: left;
  color: white;
  font-size: 2.7vw;
  line-height: 180%;
}
.text-about-2 .large {
  font-size: 4vw;
  font-weight: bold;
}
.section-about-3 {
  display: flex;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 85vw;
  top: 73%;
border: solid white 0px;
}
.text-about-3 {
  width: 85vw;

  font-size: 2.7vw;
}
.image-about-3 {
  width: 30vw;
  float: left;
}

/* --- FAQ --- */
#frame-faq {
  --height-frame-faq: 1400;
  height: calc(var(--height-frame-faq) / 1000 * 100vw);

border: solid yellow 0px;
}
.faq-title {
  width: 100vw;
}
.text-faq {
  --height-text-faq: 1200;

  top: 13%;
  width: 85vw;
  height: calc(var(--height-text-faq) / 1000 * 100vw);
  font-size: 2.5vw;
  overflow-y: scroll;

border: solid white 0px;
}
.item {
  margin-left: calc(var(--ml-item) / 1000 * 100vw);

}
.item .question {
  margin-top: calc(var(--mt-question) / 1000 * 100vw);
}
.item .answer {
  margin-top: calc(var(--mt-answer) / 1000 * 100vw);
}

/* --ｰ フッタ --- */
#frame-footer {
  --height-footer: 280;

  height: calc(var(--height-footer) / 1000 * 100vw);
border: solid white 0px;

}
.footer {
}

.logo {
  --width-logo: 253;
  width: calc(var(--width-logo) / 1000 * 100vw);

  bottom: 11%;
}
.text-copyright {
  font-size: 2vw;
}

/* --- 妖怪 --- */
.yokai-wrapper {
}

.yokai {
}

.yokai-A {
  --top-yokai-A: 1670;
  --offset-yokai-A : 300;

  top: calc(var(--top-yokai-A) / 1000 * 100vw);
  right: calc(50% + var(--offset-yokai-A) / 1000 * 100vw);
  width: calc(var(--width-yokai-A) / 1000 * 100vw);
}
.yokai-B {
  --top-yokai-B: 1650;
  --offset-yokai-B : 280;

  top: calc(var(--top-yokai-B) / 1000 * 100vw);
  left: calc(50% + var(--offset-yokai-B) / 1000 * 100vw);
  width: calc(var(--width-yokai-B) / 1000 * 100vw);
}
.yokai-C {
  --top-yokai-C: 3700;
  --offset-yokai-C : 300;

  top: calc(var(--top-yokai-C) / 1000 * 100vw);
  left: calc(50% + var(--offset-yokai-C) / 1000 * 100vw);
  width: calc(var(--width-yokai-C) / 1000 * 100vw);
}
.yokai-D {
  --top-yokai-D: 8270;
  --offset-yokai-D : 280;

  top: calc(var(--top-yokai-D) / 1000 * 100vw);
  right: calc(50% + var(--offset-yokai-D) / 1000 * 100vw);
  width: calc(var(--width-yokai-D) / 1000 * 100vw);
}