@charset "UTF-8";

/*
@font-face {
  font-family: "Zen Old Mincho Bold";
  font-display: block;
  src: url("../../../fonts/ZenOldMincho-Bold.ttf") format("TrueType");
}

.text {
  font-family: "Zen Old Mincho Bold";
}
*/

/* ----- */

/* インフォメーション */
.text-information {
  color: white;
  font-size: 24px;
  text-align: left;
}
.venue {
  --offset-venue: -200;

  position: absolute;
  left: calc(50% + var(--offset-venue) * 1px * var(--rate));
}
.minutes {
  --offset-minutes: -200;

  position: absolute;
  left: calc(50% + var(--offset-minutes) * 1px * var(--rate));
}
.fee {
  --offset-fee: -200;

  position: absolute;
  left: calc(50% + var(--offset-fee) * 1px * var(--rate));
  line-height: 100%;
}
.fee .small {
  font-size: 20px;
}
.fee .mini {
  font-size: 14px;
}
.players {
  --offset-players: -200;

  position: absolute;
  left: calc(50% + var(--offset-players) * 1px * var(--rate));
}
.players .small {
  font-size: 20px;
}

/* インフォメーション：異世界 */
.text-isekai {
}
.text-isekai .venue {
  bottom: 35.7%;
}
.text-isekai .minutes {
  bottom: 33.6%;
}
.text-isekai .fee {
  bottom: 30.7%;
}
.text-isekai .players {
  bottom: 28.4%;
}
/* インフォメーション：鉄人X */
.text-tetsujinx {
}
.text-tetsujinx .venue {
  bottom: 40.5%;
}
.text-tetsujinx .minutes {
  bottom: 38.4%;
}
.text-tetsujinx .fee {
  bottom: 35.3%;
}
.text-tetsujinx .players {
  bottom: 33.0%;
}
/* インフォメーション：CALAVERA */
.text-calavera {
}
.text-calavera .venue {
  bottom: 38.5%;
}
.text-calavera .minutes {
  bottom: 36.4%;
}
.text-calavera .fee {
  bottom: 33.4%;
}
.text-calavera .players {
  bottom: 31.2%;
}

/* マップ */
.text-map {
  --width-text-map: 330;
  --height-text-map: 300;
  --offset-text-map:  80;

  position: absolute;
  top: 35%;
  left: calc(50% + var(--offset-text-map) * 1px * var(--rate));
  width: calc(var(--width-text-map) * 1px * var(--rate));
  height: calc(var(--height-text-map) * 1px * var(--rate));

  text-align: left;
  color: white;
  font-size: 14px;
}
.text-map .large {
  font-size: 22px
}
.text-map .medium {
  font-size: 18px;
}

/* FAQ */
.text-faq {
  --width-text-faq: 850;

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

  text-align: left;
  color: white;

  font-size: 14px;
  margin-left: calc(var(--ml-item) * 1px * var(--rate));
}
.item .question {
  --mt-question: 40;

  font-weight: bold;
  margin-top: calc(var(--mt-question) * 1px * var(--rate));
  font-size: 20px;

}
.item .answer {
  --mt-answer: 5;
  margin-top: calc(var(--mt-answer) * 1px * var(--rate));
  font-size: 18px;
}

/* 1000px未満 */
@media screen and (max-width: 1000px) {
  /* インフォメーション */
  .text-information {
    font-size: 3.5vw;
  }
  .venue {
    left: calc(50% + var(--offset-venue) / 1000 * 100vw);
  }
  .minutes {
    left: calc(50% + var(--offset-minutes) / 1000 * 100vw);
  }
  .fee {
    left: calc(50% + var(--offset-fee) / 1000 * 100vw);
  }
  .fee .small {
    font-size: 2.5vw;
  }
  .fee .mini {
    font-size: 2vw
  }
  .players {
    left: calc(50% + var(--offset-players) / 1000 * 100vw);
  }
  .players .small {
    font-size: 2.5vw;
  }
  .text-isekai {
  }
  .text-isekai .venue {
  }
  .text-isekai .minutes {
  }
  .text-isekai .fee {
  }
  .text-isekai .players {
  }
  .text-tetsujinx {
  }
  .text-tetsujinx .venue {
  }
  .text-tetsujinx .minutes {
  }
  .text-tetsujinx .fee {
  }
  .text-tetsujinx .players {
  }
  .text-calavera {
  }
  .text-calavera .venue {
  }
  .text-calavera .minutes {
  }
  .text-calavera .fee {
  }
  .text-calavera .players {
  }
  .text-map {
    left: calc(50% + var(--offset-text-map) / 1000 * 100vw);
    width: calc(var(--width-text-map) / 1000 * 100vw);
    height: calc(var(--height-text-map) / 1000 * 100vw);
    font-size: 2.5vw;
  }
  .text-map .large {
    font-size: 3.5vw;
  }
  .text-map .medium {
    font-size: 3vw;;
  }
  .text-faq {
    width: calc(var(--width-text-faq) / 1000 * 100vw);
  }
  .item {
    font-size: 2vw;
    margin-left: calc(var(--ml-item) / 1000 * 100vw);
  }
  .item .question {
    --mt-question: 40;
    margin-top: calc(var(--mt-question) / 1000 * 100vw);
    font-size: 3vw;
  }
  .item .answer {
    margin-top: calc(var(--mt-answer) / 1000 * 100vw);
    font-size: 2.5vw;
  }
}