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

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

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

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

/* --- ストーリー --- */
#frame-story {
}
.story {
}
.text-story1 {
  --width-text-story1: 800;

  top: 11%;
  width: calc(var(--width-text-story1) * 1px);

  font-size: 32px;
  line-height: 180%;
border: solid red 0px;
}

.text-story2 {
  --width-text-story1: 800;

  top: 62%;
  width: calc(var(--width-text-story2) * 1px);

  font-size: 26px;
  line-height: 180%;
border: solid red 0px;
}

/* --- 参加方法 --- */
#frame-howto {
}
.howto {
}
/* --- 開催概要 --- */
#frame-info {
}
.info {
}
.text-info {
  --offset-text-info: (-90);

  left: calc(50% + var(--offset-text-info) * 1px);
  font-size: 28px;
}
.text-period {
  top: 13.5%;

  line-height: 120%;
}
.text-fee {
  top: 22%;
}
.text-hours {
  top: 30%;
}
.text-kit {
  top: 37.5%;
}
.text-venue {
  --offset-text-venue: (-130);

  left: calc(50% + var(--offset-text-venue) * 1px);
  font-size: 20px;
  line-height: 120%;
}
.text-venue1 {
  top: 44.5%;
}
.text-venue2 {
  top: 53%;
}
.text-venue3 {
  top: 62%;
}
.text-pre {
  --offset-text-pre: (-340);

  left: calc(50% + var(--offset-text-pre) * 1px);
  top: 72%;
  font-size: 21px;
}
.text-attention {
  --width-text-attention: 920;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 87%;
  width: calc(var(--width-text-attention) * 1px);
  font-size: 21px;
}

/* --- 注意事項 --- */
#frame-notice {
  --height-frame-notice: 1100;
  height: calc(var(--height-frame-notice) * 1px);
}
.notice {
}
.text-notice {
  --width-text-notice: 920;

  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-notice) * 1px);
  font-size: 22px;
}

/* --ｰ フッタ --- */
#frame-footer {
}
.footer {
}
.logo {
  --width-logo: 431;

  bottom: 11%;
}

/* 1201px未満 */
@media screen and (max-width: 1200px) {
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-story {
  }
  .story {
    width: 100vw;
  }
  .text-story1 {
    width: calc(var(--width-text-story1) / 1200 * 100vw);
    font-size: 28px;
  }
  .text-story2 {
    width: calc(var(--width-text-story2) / 1200 * 100vw);
    font-size: 24px;
  }
  #frame-howto {
  }
  .howto {
    width: 100vw;
  }
  #frame-info {
  }
  .info {
    width: 100vw;
  }
  .text-info {
    left: calc(50% + var(--offset-text-info) / 1200 * 100vw);
  }
  .text-period {
  }
  .text-fee {
  }
  .text-hours {
  }
  .text-kit {
  }
  .text-venue {
    left: calc(50% + var(--offset-text-venue) / 1200 * 100vw);
  }
  .text-venue1 {
    top: 44.5%;
  }
  .text-venue2 {
    top: 53%;
  }
  .text-venue3 {
    top: 62%;
  }
  .text-pre {
    left: calc(50% + var(--offset-text-pre) / 1200 * 100vw);
    font-size: 18px;
  }
  .text-attention {
    width: calc(var(--width-text-attention) / 1200 * 100vw);
    font-size: 18px;
  }
  #frame-notice {
  }
  .notice {
    width: 100vw;
  }
  .text-notice {
    width: calc(var(--width-text-notice) / 1200 * 100vw);
   font-size: 21px;
  }
  #frame-footer {
    position: relative;
  }
  .footer {
  }
  .logo {
    width: calc(var(--width-logo) / 1200 * 100vw);
  }
}