@charset "UTF-8";


:root {
  --width-kv: 1200;
  --width-menu: 360;
  --width-title: 360;
  --width-catch: 136;
}

body {
  overflow-x: hidden;		/* はみ出し要素対応 */
}

img {
/* display: block; */		/* slickでNG */
}


/* --- 背景 --- */
.background {
}
#frame-menu {
  --top-frame-menu: 50;
  --left-frame-menu: 20;
  --height-frame-menu: 800;

  display: flex;
  flex-direction: column; /* 子要素を垂直に並べる */
  position: fixed;
  top: calc(var(--top-frame-menu) * 1px);
  left: calc(((100vw - var(--width-kv) * 1px) / 2) / 2 - (var(--width-title) * 1px) / 2);
  width: calc(var(--width-frame-menu) * 1px);
  height: calc(var(--height-frame-menu) * 1px);

  z-index: 9;		/* 他要素に隠れることがあるので対応 */
}
#frame-menu img {
  position: static;
}
.title {
  left: calc(((100vw - var(--width-kv) * 1px) / 2) / 2 - (var(--width-title) * 1px) / 2);
  width: calc(var(--width-title) * 1px);
  margin-bottom: 30px;
}
.menu {
  --width-menu: 152;

  display: block;
  margin-left: 10px;
  width: calc(var(--width-menu) * 1px);
}
.menu:hover {
  cursor: pointer;
}
.catch {
  --top-catch: 50;
  --left-catch: 0;

  position: fixed;
  top: calc(var(--top-catch) * 1px);
  right: calc(((100vw - var(--width-kv) * 1px) / 2) / 2 - (var(--width-catch) * 1px) / 2);
  width: calc(var(--width-catch) * 1px);
}


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

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

/* --- 参加方法 --- */
#frame-howto {
}
.howto {
}

/* --- チケット --- */
#frame-fee {
  position: relative;
}
.fee {
}
#button-ticket {
  --width-button-ticket: 316;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 8%;
}

/* --- スケジュール --- */
#frame-schedule {
}
.schedule {
}

/* --- マップ --- */
#frame-map {
  position: relative;

}
.map {
}
.embed-map {
  --width-embed-map: 600;
  --height-embed-map: 600;
  --offset-embed-map: 0;

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

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

}
.iframe-map {
  width: 100%;
  height: 100%;
}
.text-map {
  --width-text-map: 700;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 65%;
  width: calc(var(--width-text-map) * 1px);
  padding: 30px;

  text-align: left;
  color: white;
  font-size: 24px;
}
.text-map .large {
  font-weight: bold;
  font-size: 32px;
}
.text-map .medium {
  font-size: 26px;
}

/* --- Q&A --- */
#frame-faq{
  --height-frame-faq: 2000;

  position: relative;
  height: calc(var(--height-frame-faq) * 1px);
}
.faq-title {
}
.text-faq {
  --width-text-faq: 900;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-faq) * 1px);
}
.item {
  --ml-item: 20;

  margin-left: calc(var(--ml-item) * 1px);

  text-align: left;
  color: white;
  font-size: 22px;
}
.item .question {
  --mt-question: 40;

  margin-top: calc(var(--mt-question) * 1px);
  font-weight: bold;
  font-size: 28px;
}
.item .answer {
  --mt-answer: 5;

  margin-top: calc(var(--mt-answer) * 1px);
}

/* --- フッタ --- */
#frame-footer {
  position: relative;
}
.footer {
}
.logo {
  --width-logo: 253;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 45%;
}


/* --- 1920px未満 --- */
@media screen and (max-width: 1920px) {
  .title {
    position: fixed;
    left: calc(((100vw - var(--width-kv) / 1920 * 100vw) / 2) / 2 - (var(--width-title) / 1920 * 100vw) / 2);
    width: calc(var(--width-title) / 1920 * 100vw * 0.75);
    z-index: -1;
  }
  .catch {
    position: fixed;
    top: calc(var(--top-catch) * 1px);
    right: calc(((100vw - var(--width-kv) * 1px) / 2) / 2 - (var(--width-catch) * 1px) / 2);
    width: calc(var(--width-catch) * 1px);
    z-index: -1;
  }
  #frame-menu {
    left: calc(((100vw - var(--width-kv) / 1920 * 100vw) / 2) / 2 - (var(--width-title) / 1920 * 100vw) / 2);
  }
}

/* --- 1680px未満 --- */
@media screen and (max-width: 1680px) {
  .title {
    display: none;
  }
  .catch {
    display: none;
  }
  #frame-menu {
    display: none;
  }
}

/* --- 1001px未満 --- */
@media screen and (max-width: 1000px) {
  .background {
  }
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-about {
    margin-top: 50px;
  }
  .about {
    width: 100vw;
  }
  #frame-howto {
  }
  .howto {
    width: 100vw;
  }
  #frame-fee {
  }
  .fee {
    width: 100vw;
  }
  #button-ticket {
    width: calc(var(--width-button-ticket) / 1000 * 100vw);
  }
  #frame-schedule {
  }
  .schedule {
    width: 100vw;
  }
  #frame-map {
  }
  .map {
    width: 100vw;
  }
  .embed-map {
    width: calc(var(--width-embed-map) / 1000 * 100vw);
    height: calc(var(--height-embed-map) / 1000 * 100vw);
  }
  .iframe-map {
  }
  .text-map {
    width: calc(var(--width-text-map) / 1000 * 100vw);
    padding: 0;
    font-size: 2.5vw;
  }
  .text-map .large {
    font-size: 3.5vw;
  }
  .text-map .medium {
    font-size: 3vw;
  }
  #frame-faq{
    height: calc(var(--height-frame-faq) / 1000 * 100vw * 1.3);
  }
  .faq-title {
    width: 100vw;
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1000 * 100vw);
  }
  .item {
    margin-left: calc(var(--ml-item) / 1000 * 100vw);
    font-size: 2.5vw;
  }
  .item .question {
    font-size: 3vw;
  }
  .item .answer {
  }
  #frame-footer {
  }
  .footer {
    width: 100vw;
  }
  .logo {
    width: calc(var(--width-logo) / 1000 * 100vw);
  }
}