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

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

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

/* --- キービジュアル --- */
#frame-kv {
  --height-frame-kv: 595;
  height: calc(var(--height-frame-kv) * 1px);
}
.kv {
}

/* --- キャッチ --- */
#frame-catch {
  margin-top: 30px;
}
.catch {
  --width-catch: 922;
}
.text-catch {
  top: 20%;

  font-size: 60px;
}

/* --- ポイント --- */
#frame-point {
  position: relative;
}
.point {
  --width-point: 1080;
}
.text-point {
  --width-text-point: 280;

  position: absolute;
  width: calc(var(--width-text-point) * 1px);
  top: 68%;
  font-size: 15px;
}
.text-point-1 {
  --offset-text-point-1: 200;
  right: calc(50% + var(--offset-text-point-1) * 1px);
border: solid red 0px;
}
.text-point-2 {
  margin: 0 auto;
  left: 0;
  right: 0;
border: solid red 0px;
}
.text-point-3 {
  --offset-text-point-3: 200;
  left: calc(50% + var(--offset-text-point-3) * 1px);
border: solid red 0px;
}

/* --- ストーリー --- */
#frame-story {
  --height-frame-story: 619;

  margin-top: 70px;
  height: calc(var(--height-frame-story) * 1px);
  overflow-y: hidden;
border: solid red 0px;
}
.story {
  --width-story: 1080;

  left: 50%;
  transform: translateX(-50%);

}
#button-size {
  --offset-button-size: 140;

  right: calc(50% + var(--offset-button-size) * 1px);
  bottom: 5%;
  width: calc(var(--width-button-size) * 1px);
}

.text-story {
  --offset-text-story: 0;
  --width-text-story: 500;

  width: calc(var(--width-text-story) * 1px);
  right: calc(50% + var(--offset-text-story) * 1px);

  font-size: 18px;
  text-align: left;
  line-height: 150%;
border: solid red 0px;
}
.text-story {
  top: 13%;

}
.text-story-latter {
}

/* --- キャラクター --- */
#frame-character {
  margin-top: 50px;
}
.character {
  --width-character: 1080;
}
.text-character {
  --offset-text-character: (-100);
  --width-text-character: 600;

  left: calc(50% + var(--offset-text-character) * 1px);
  bottom: 35%;

  width: calc(var(--width-text-character) * 1px);
  font-size: 20px;
  line-height: 170%;
  text-align: left;

border: solid red 0px;
}

/* --- 参加方法 --- */
#frame-howto{
  margin-top: 50px;
}
.howto {
  --width-howto: 1080;
}
.frame-calendar {
  --top-frame-calendar: 660;
  --width-frame-calendar: 750;
  --height-frame-calendar: 343;

  top: calc(var(--top-frame-calendar)  * 1px);
  width: calc(var(--width-frame-calendar)  * 1px);
  height: calc(var(--height-frame-calendar)  * 1px);
border: solid red 0px;
}
.slider-calendar {
}
.calendar {
}
.text-schedule {
  --width-text-schedule: 700;
  --offset-text-schedule: (-300);

  left: calc(50% + var(--offset-text-schedule) * 1px);
  top: 19.5%;
  width: calc(var(--width-text-schedule) * 1px);

  line-height: 250%;
border: solid red 0px;
}
.text-schedule .large {
  font-size: 32px;
}
.text-schedule .medium {
  font-size: 28px;
}
.text-schedule .small {
  font-size: 20px;
}
.text-fee {
  --offset-text-fee: 100;
  --width-text-fee: 380;

  left: calc(50% + var(--offset-text-fee) * 1px);
  bottom: 10%;
  width: calc(var(--width-text-fee) * 1px);
  font-size: 14px;

border: solid red 0px;
}
.text-start {
  --offset-text-start: 150;
  --width-text-start: 380;

  left: calc(50% + var(--offset-text-start) * 1px);
  bottom: 6.5%;
  width: calc(var(--width-text-start) * 1px);
  font-weight: bold;
  font-size: 20px;
}
.text-start .large {
  font-size: 32px;
}
.text-start .medium  {
  font-size: 28px;
}
#button-ticket {
  --offset-button-ticket: 180;

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

/* --- ビギナーズガイド --- */
#frame-beginner {
  margin-top: 50px;
}
.beginner {
  --width-beginner: 1080;
}
.text-beginner {
  --width-text-beginner: 330;

  top: 33%;
  width: calc(var(--width-text-beginner) * 1px);
  font-size: 20px;
}
.text-beginner-1 {
  --offset-text-beginner-1: 0;

  right: calc(50% + var(--offset-text-beginner-1) * 1px);
border: solid red 0px;
}
.text-beginner-2 {
  --offset-text-beginner-2: 50;

  left: calc(50% + var(--offset-text-beginner-2) * 1px);
border: solid red 0px;
}
.text-beginner .yellow {
  font-size: 20px;
}

/* --- グッズ --- */
#frame-goods {
  margin-top: 50px;
}
.goods{
  --width-goods: 1080;
}

/* --- マップ --- */
#frame-map {
  --height-frame-map: 557;

  height: calc(var(--height-frame-map) * 1px);
  margin-top: 50px;

border: solid white 0px;
}
.map {
  --width-map: 1080;
}
.embed-map {
  --width-embed-map: 420;
  --height-embed-map: 420;
  --offset-embed-map: 50;

  right: calc(50% + var(--offset-embed-map) * 1px);
  top: 20%;

  width: calc(var(--width-embed-map) * 1px);
  height: calc(var(--height-embed-map) * 1px);

border: solid yellow 0px;

}
.text-map {
  --width-text-map: 520;

  top: 20%;
  left: 50%;
  width: calc(var(--width-text-map) * 1px);

  font-size: 18px;
border: solid white 0px;
}
.text-map .large {
  font-size: 28px;
}
#button-map {
  left: 55%;
  bottom: 15%;
  width: calc(var(--width-button-map) * 1px);
}

/* --- アバウト --- */
#frame-about {
  margin-top: 50px;
}
.about {
  --width-about: 1080;

}
.section-about-1 {
  --width-section-about-1: 1000;

  display: flex;
  justify-content: space-between;
  width: calc(var(--width-section-about-1) * 1px);
  top: 10%;
border: solid red 0px;
}
.image-about-1 {
  --width-image-about-1: 124;

  width: calc(var(--width-image-about-1) * 1px);
text-align: right;
}
.text-about-1 {
  --width-text-about-1: 850;

  width: calc(var(--width-text-about-1) * 1px);
  font-size: 20px;
}
.text-about-1 .large {
  font-size: 23px;
  font-weight: bold;
}
.section-about-3 {
  --width-section-about-3: 1000;

  width: calc(var(--width-section-about-3) * 1px);

  display: flex;
  justify-content: space-between;
  top: 58%;
border: solid yellow 0px;
}
.text-about-3 {
  --width-text-about-3: 850;

  width: calc(var(--width-text-about-3) * 1px);
  text-align: left;
  font-size: 18px;
}
.text-about-3 .large {
  font-size: 22px;
  font-weight: bold;
}
.image-about-3 {
  --width-image-about-3: 260;
  width: calc(var(--width-image-about-3) * 1px);
  float: left;
}

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

  margin-top: 50px;
  height: calc(var(--height-frame-faq) * 1px);

border: solid yellow 0px;
}
.faq-title {
}
.text-faq {
  --width-text-faq: 1050;
  --height-text-faq: 2000;

  top: 3%;
  width: calc(var(--width-text-faq) * 1px);
  height: calc(var(--height-text-faq) * 1px);
  font-size: 24px;
/*  overflow-y: scroll; */

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

}
.item .question {
  margin-top: calc(var(--mt-question) * 1px);
}
.item .answer {
  margin-top: calc(var(--mt-answer) * 1px);
}


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

  height: calc(var(--height-footer) * 1px);
border: solid white 0px;

}
.footer {
}
.logo {
  --width-logo: 215;
  width: calc(var(--width-logo) * 1px);

  bottom: 11%;
}
.text-copyright {
  font-size: 24px;
}

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

.yokai {
}

.yokai-A {
  --top-yokai-A: 880;
  --offset-yokai-A : 350;

  top: calc(var(--top-yokai-A) * 1px);
  right: calc(50% + var(--offset-yokai-A) * 1px);
  width: calc(var(--width-yokai-A) * 1px);
}
.yokai-B {
  --top-yokai-B: 880;
  --offset-yokai-B : 350;

  top: calc(var(--top-yokai-B) * 1px);
  left: calc(50% + var(--offset-yokai-B) * 1px);
  width: calc(var(--width-yokai-B) * 1px);
}
.yokai-C {
  --top-yokai-C: 2300;
  --offset-yokai-C : 400;

  top: calc(var(--top-yokai-C) * 1px);
  left: calc(50% + var(--offset-yokai-C) * 1px);
  width: calc(var(--width-yokai-C) * 1px);
}
.yokai-D {
  --top-yokai-D: 4200;
  --offset-yokai-D : 400;

  top: calc(var(--top-yokai-D) * 1px);
  right: calc(50% + var(--offset-yokai-D) * 1px);
  width: calc(var(--width-yokai-D) * 1px);
}


/* 1201px未満 */
@media screen and (max-width: 1200px) {
  #frame-kv {
    height: calc(var(--height-frame-kv) / 1200 * 100vw);
  }
  .kv {
    width: 100vw;
  }
  #frame-catch {
  }
  .catch {
    width: calc(var(--width-catch) / 1200 * 100vw);
  }
  .button-ticket {
    width: calc(var(--width-button-ticket) / 1200 * 100vw);
  }
  #button-ticket-1 {
  }
  #frame-point {
  }
  .point {
    width: calc(var(--width-point) / 1200 * 100vw);
  }
  .text-point {
    width: calc(var(--width-text-point) / 1200 * 100vw);
  }
  .text-point-1 {
    right: calc(50% + var(--offset-text-point-1) / 1200 * 100vw);
  }
  .text-point-2 {
  }
  .text-point-3 {
    left: calc(50% + var(--offset-text-point-3) / 1200 * 100vw);
  }
  #frame-story {
    height: calc(var(--height-frame-story) / 1200 * 100vw);
  }
  .story {
    width: calc(var(--width-story) / 1200 * 100vw);
  }
  #button-size {
    right: calc(50% + var(--offset-button-size) / 1200 * 100vw * 1.2);
    width: calc(var(--width-button-size) / 1200 * 100vw * 0.8);
  }
  .text-story {
    width: calc(var(--width-text-story) / 1200 * 100vw);
    right: calc(50% + var(--offset-text-story) / 1200 * 100vw);
    font-size: 1.6vw;
  }
  .text-story {
  }
  .text-story-latter {
  }
  #frame-character {
  }
  .character {
    width: calc(var(--width-character) / 1200 * 100vw);
  }
  .text-character {
    left: calc(50% + var(--offset-text-character) / 1200 * 100vw);
    width: calc(var(--width-text-character) / 1200 * 100vw);
  }
  #frame-howto{
  }
  .howto {
    width: calc(var(--width-howto) / 1200 * 100vw);
  }
  .frame-calendar {
    top: calc(var(--top-frame-calendar)  / 1200 * 100vw);
    width: calc(var(--width-frame-calendar)  / 1200 * 100vw);
    height: calc(var(--height-frame-calendar)  / 1200 * 100vw);
  }
  .slider-calendar {
  }
  .calendar {
  }
  .text-schedule {
    left: calc(50% + var(--offset-text-schedule) / 1200 * 100vw);
    width: calc(var(--width-text-schedule) / 1200 * 100vw);
  }
  .text-schedule .large {
  }
  .text-schedule .medium {
  }
  .text-schedule .small {
  }
  .text-fee {
    left: calc(50% + var(--offset-text-fee) / 1200 * 100vw);
    width: calc(var(--width-text-fee) / 1200 * 100vw);
  }
  .text-start {
    left: calc(50% + var(--offset-text-start) / 1200 * 100vw);
    width: calc(var(--width-text-start) / 1200 * 100vw);
  }
  .text-start .large {
  }
  .text-start .medium  {
  }
  #button-ticket {
    left: calc(50% + var(--offset-button-ticket) / 1200 * 100vw);
    width: calc(var(--width-button-ticket) / 1200 * 100vw);
  }
  #frame-beginner {
  }
  .beginner {
    width: calc(var(--width-beginner) / 1200 * 100vw);
  }
  .text-beginner {
    width: calc(var(--width-text-beginner) / 1200 * 100vw);
  }
  .text-beginner-1 {
    right: calc(50% + var(--offset-text-beginner-1) / 1200 * 100vw);
  }
  .text-beginner-2 {
    left: calc(50% + var(--offset-text-beginner-2) / 1200 * 100vw);
  }
  .text-beginner .yellow {
  }
  #frame-goods {
  }
  .goods{
    width: calc(var(--width-goods) / 1200 * 100vw);
  }
  #frame-map {
    height: calc(var(--height-frame-map) / 1200 * 100vw);
  }
  .map {
    width: calc(var(--width-map) / 1200 * 100vw);
  }
  .embed-map {
    right: calc(50% + var(--offset-embed-map) / 1200 * 100vw);
    width: calc(var(--width-embed-map) / 1200 * 100vw);
    height: calc(var(--height-embed-map) / 1200 * 100vw);
  }
  .text-map {
    width: calc(var(--width-text-map) / 1200 * 100vw);
  }
  .text-map .large {
  }
  #button-map {
    width: calc(var(--width-button-map) / 1200 * 100vw);
  }
  #frame-about {
  }
  .about {
    width: calc(var(--width-about) / 1200 * 100vw);
  }
  .section-about-1 {
    width: calc(var(--width-section-about-1) / 1200 * 100vw);
  }
  .image-about-1 {
    width: calc(var(--width-image-about-1) / 1200 * 100vw);
  }
  .text-about-1 {
    width: calc(var(--width-text-about-1) / 1200 * 100vw);
  }
  .text-about-1 .large {
  }
  .section-about-3 {
    width: calc(var(--width-section-about-3) / 1200 * 100vw);
  }
  .text-about-3 {
    width: calc(var(--width-text-about-3) / 1200 * 100vw);
  }
  .text-about-3 .large {
  }
  .image-about-3 {
    width: calc(var(--width-image-about-3) / 1200 * 100vw);
  }
  #frame-faq {
    height: calc(var(--height-frame-faq) / 1200 * 100vw * 1.2);
  }
  .faq-title {
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1200 * 100vw);
    height: calc(var(--height-text-faq) / 1200 * 100vw);
  }
  .item {
    margin-left: calc(var(--ml-item) / 1200 * 100vw);
  }
  .item .question {
    margin-top: calc(var(--mt-question) / 1200 * 100vw);
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 1200 * 100vw);
  }
  #frame-footer {
    height: calc(var(--height-footer) / 1200 * 100vw);
  }
  .footer {
  }
  .logo {
    width: calc(var(--width-logo) / 1200 * 100vw);
  }
  .text-copyright {
  }
  .yokai-wrapper {
  }
  .yokai {
  }
  .yokai-A {
    top: calc(var(--top-yokai-A) / 1200 * 100vw);
    right: calc(50% + var(--offset-yokai-A) / 1200 * 100vw);
    width: calc(var(--width-yokai-A) / 1200 * 100vw);
  }
  .yokai-B {
    top: calc(var(--top-yokai-B) / 1200 * 100vw);
    left: calc(50% + var(--offset-yokai-B) / 1200 * 100vw);
    width: calc(var(--width-yokai-B) / 1200 * 100vw);
  }
  .yokai-C {
    top: calc(var(--top-yokai-C) / 1200 * 100vw);
    left: calc(50% + var(--offset-yokai-C) / 1200 * 100vw);
    width: calc(var(--width-yokai-C) / 1200 * 100vw);
  }
  .yokai-D {
    top: calc(var(--top-yokai-D) / 1200 * 100vw);
    right: calc(50% + var(--offset-yokai-D) / 1200 * 100vw);
    width: calc(var(--width-yokai-D) / 1200 * 100vw);
  }
}