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

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

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

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

/* --- キャッチ --- */
#frame-catch {
}
.catch {
}

/* --- インフォメーション --- */
#frame-information {
  position: relative;
}
.information {
}
.text-information {
width: 1000px;
  --offset-text-information: 100;

  /* right: calc(50% + var(--offset-text-information) * 1px); */
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 38%;

  font-size: 28px;
border: solid white 0px;
}
.text-information .infotable {
  --widthinfotable-cell-left: 200;
  --widthinfotable-cell-center: 50;
  --widthinfotable-cell-right: 750;
  --heightinfotable-cell-top: 60;
  --heightinfotable-cell-bottom: 100;

  display: grid;
  grid-template-columns: calc(var(--widthinfotable-cell-left) * 1px) 
						 calc(var(--widthinfotable-cell-center) * 1px)
						 calc(var(--widthinfotable-cell-right) * 1px);
  grid-template-rows: calc(var(--heightinfotable-cell-top) * 1px) 
					  calc(var(--heightinfotable-cell-bottom) * 1px);

  line-height: 110%;
}
.text-information .infotable .right {
  justify-self: end;
}
.text-information .infotable .left {
  text-align: left;
  justify-self: start;
}
.text-information .infotable .small {
  font-size: 22px;
}
.button-map {
  --offset-button-map: 70;
  --width-button-map: 219;

  right: calc(50% + var(--offset-button-map) * 1px);
  bottom: 10%;
}

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

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

  font-size: 28px;
  line-height: 140%;
border: solid white 0px;
}
.text-story1 {
  top: 14%;
}
.text-story2 {
  bottom: 5%;
}

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

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

/* --- チケット(料金) --- */
#frame-fee {
/*
  --height-frame-fee: 900;

  height: calc(var(--height-frame-fee) * 1px);
*/
border: solid white 0px;
}
.fee {
}
.text-fee1 {
  --offset-text-fee1: 100;

  right: calc(50% + var(--offset-text-fee1) * 1px);
  top: 32%;

  font-size: 24px;
border: solid white 0px;
}
.text-fee1 .feetable {
  --width-feetable-cell: 150;
  --height-feetable-cell: 30;

  display: grid;
  grid-template-columns: repeat(3, calc(var(--width-feetable-cell) * 1px));
  grid-template-rows: repeat(2, calc(var(--height-feetable-cell) * 1px));
  gap: 8px;
}
.text-fee2 {
  --offset-text-fee2: 130;

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

  font-size: 16px;
  text-align: left;
border: solid white 0px;
}
.text-start {
  --offset-text-start: 110;

  right: calc(50% + var(--offset-text-start) * 1px);
  bottom: 25%;

  font-size: 22px;
border: solid white 0px;
}
.text-start .large {
  font-size: 32px;
}
.text-start .medium  {
  font-size: 28px;
}

.button-ticket {
  --width-button-ticket: 250;
  --offset-button-ticket: 200;

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

/* --- よだかのレコードとは --- */
#frame-yodaka {
  margin-top: 50px;
}
.yodaka {
  --width-yodaka: 973;
}
.text-yodaka {
  --width-text-yodaka: 930;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 48%;
  width: calc(var(--width-text-yodaka) * 1px);

  font-size: 18px;
  line-height: 140%;
border: solid red 0px;
}

/* --- 東方project展 --- */
#frame-exhibition {
  margin-top: 50px;
}
.exhibition {
  --width-exhibition: 968;
}

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

  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: 2400;

  top: 6%;
  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 {
  font-size: 28px;
  margin-top: calc(var(--mt-question) * 1px);
}
.item .answer {
  margin-top: calc(var(--mt-answer) * 1px);
}


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

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

}
.footer {
}
.logo {
  --width-logo: 215;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 60%;
  width: calc(var(--width-logo) * 1px);
}
.text-copyright {
    bottom: 10%;
  font-size: 18px;
}


/* 1201px未満 */
@media screen and (max-width: 1200px) {
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-catch {
  }
  .catch {
    width: 100vw;
  }
  #frame-information {
  }
  .information {
    width: 100vw;
  }
  .text-information {
    font-size: 2.5vw;
  }
  .text-information .infotable {
    grid-template-columns: calc(var(--widthinfotable-cell-left) / 1200 * 100vw) 
  						 calc(var(--widthinfotable-cell-center) / 1200 * 100vw)
  						 calc(var(--widthinfotable-cell-right) / 1200 * 100vw);
    grid-template-rows: calc(var(--heightinfotable-cell-top) / 1200 * 100vw) 
  					  calc(var(--heightinfotable-cell-bottom) / 1200 * 100vw);
  }
  .text-information .infotable .right {
  }
  .text-information .infotable .left {
  }
  .text-information .infotable .small {
    font-size: 2vw;
  }
  .button-map {
    right: calc(50% + var(--offset-button-map) / 1200 * 100vw);
    width: calc(var(--width-button-map) / 1200 * 100vw);
  }
  #frame-story {
  }
  .story {
    width: 100vw;
  }
  .text-story {
    width: calc(var(--width-text-story1) / 1200 * 100vw);
    font-size: 2.5vw;
  }
  .text-story1 {
  }
  .text-story2 {
  }
  #frame-howto {
  }
  .howto {
    width: 100vw;
  }
  #frame-schedule {
  }
  .schedule {
    width: 100vw;
  }
  #frame-fee {
  }
  .fee {
    width: 100vw;
  }
  .text-fee1 {
    right: calc(50% + var(--offset-text-fee1) / 1200 * 100vw);
    font-size: 2.2vw;
  }
  .text-fee1 .feetable {
    grid-template-columns: repeat(3, calc(var(--width-feetable-cell) / 1200 * 100vw));
    grid-template-rows: repeat(2, calc(var(--height-feetable-cell) / 1200 * 100vw));
  }
  .text-fee2 {
    right: calc(50% + var(--offset-text-fee2) / 1200 * 100vw);
    width: calc(var(--width-text-fee2) / 1200 * 100vw);
    font-size: 1.5vw;
  }
  .text-start {
    right: calc(50% + var(--offset-text-start) / 1200 * 100vw);
    font-size: 1.7vw;
  }
  .text-start .large {
    font-size: 2.7vw;
  }
  .text-start .medium  {
    font-size: 2.1vw;
  }
  .button-ticket {
    right: calc(50% + var(--offset-button-ticket) / 1200 * 100vw);
    width: calc(var(--width-button-ticket) / 1200 * 100vw);
  }
  #frame-yodaka {
  }
  .yodaka {
    width: calc(var(--width-yodaka) / 1200 * 100vw);
  }
  .text-yodaka {
    width: calc(var(--width-text-yodaka) / 1200 * 100vw);
    font-size: 1.5vw;
  }
  #frame-exhibition {
  }
  .exhibition {
    width: calc(var(--width-exhibition) / 1200 * 100vw);
  }
  #frame-faq {
    height: calc(var(--height-frame-faq) / 1200 * 100vw);
  }
  .faq-title {
    width: 100vw;
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1200 * 100vw);
    height: calc(var(--height-text-faq) / 1200 * 100vw);
    font-size: 2vw;
  }
  .item {
    margin-left: calc(var(--ml-item) / 1200 * 100vw);
  }
  .item .question {
    font-size: 2.5vw;
    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 {
    font-size: 1.5vw;
  }
}