@charset "utf-8";

:root {
  --top-title: -30;
  --left-title: 60;
  --width-panel: 806;
}

body {
  background-color: #FFFFFF;
}

.contents {
}

a:hover {
  cursor: pointer;
  filter: alpha(opacity=70);
  opacity:0.8;
}

.absolute {
  position: absolute;
}

.absolute-center {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.buttons {
  position: absolute;
}

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

/* トップ */
.top {
  max-width: 1000px;
  margin: 0 auto;
  left: 0;
  right: 0;

  position: relative;
  z-index: 1;
}
.top .kv {
}
.top .character {
  --width-character: 1100;
  --co-character: 500;

  bottom: 0;
  left: calc(50% - var(--co-character) * 1px);
   width: 100%;
/*  margin: 0 calc(50% - 50vw);  /* ネガティブマージン */
}


.top .snow {
  --top-snow: 0;
  --width-snow: 1000;

  top: calc(var(--top-snow) * 1px);
}
.top .xmas {
  --top-xmas: 380;
  --width-xmas: 606;

  top: calc(var(--top-xmas) * 1px);
}

.top .holly {
  --top-holly: 270;
  --width-holly: 81;

  top: calc(var(--top-holly) * 1px);
}

.top .fairy-left {
  --top-fairy-left: 350;
  --co-fairy-left: 450;
  --width-fairy-left: 167;

  top: calc(var(--top-fairy-left) * 1px);
  left: calc(50% - var(--co-fairy-left) * 1px);
}
.top .fairy-right {
  --top-fairy-right: 310;
  --co-fairy-right: -290;
  --width-fairy-right: 162;

  top: calc(var(--top-fairy-right) * 1px);
  left: calc(50% - var(--co-fairy-right) * 1px);
}

/* ハイライト */
.highlight {
  position: relative;
}
.highlight .band {
  --height-band: 178;

  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: calc(var(--height-band) * 1px);
}
.highlight .screenshot {
  --top-screenshot: 0;
  --left-screenshot: 0;
  --width-screenshot: 1000;

  top: calc(var(--top-screenshot) * 1px);
  left: calc(var(--left-screenshot) * 1px);

}
.highlight .controller {
  --top-controller: -40;
  --left-controller: 30;
  --width-controller: 153;
  top: calc(var(--top-controller) * 1px);
  left: calc(var(--left-controller) * 1px);
}

/* 背景 */
.background {
  background: url('/fw/public/images/event/2112rpg/background.png') center 0 repeat-y;
  background-size: contain;
}


/*  説明・情報 */
.deco {
  --width-deco: 860;
}
.stage {
  --mt-panel: 50;
  --width-stage: 720;

  margin-top: calc(var(--mt-panel) * 1px);
}
.event {
  --mt-panel: 50;
  --width-event: 896;

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

/* ストーリー */
.story {
  max-width: 1000px;
  margin: 0 auto;

  --mt-panel: 80;
  --width-panel: 806;

  margin-top: calc(var(--mt-panel) * 1px);
  position: relative;
}
.story .title {
  --width-title: 306;

  top: calc(var(--top-title) * 1px);
  left: calc(var(--left-title) * 1px);
}

/* クリスマスエディションとは */
.xmas-edition {
  --mt-panel: 100;

  margin-top: calc(var(--mt-panel) * 1px);
  position: relative;
}
.xmas-edition .title {
  --width-title: 506;

  top: calc(var(--top-title) * 1px);
  left: calc(var(--left-title) * 1px);
}
.xmas-edition .ribbon {
  --top-ribbon: -60;
  --co-ribbon: -80;
  --width-ribbon: 394;

  top: calc(var(--top-ribbon) * 1px);
  left: calc(50% - var(--co-ribbon) * 1px);
}

/* 公演情報 */
.information {
  --mt-panel: 80;

  margin-top: calc(var(--mt-panel) * 1px);
  position: relative;
}
.information .title {
  --width-title: 306;

  top: calc(var(--top-title) * 1px);
  left: calc(var(--left-title) * 1px);
}


/* スケジュール */
.schedule {
  --mt-panel: 80;

  margin-top: calc(var(--mt-panel) * 1px);
  position: relative;
}
.schedule .title {
  --width-title: 306;

  top: calc(var(--top-title) * 1px);
  left: calc(var(--left-title) * 1px);
}
.schedule .button-ticket {
  --top-button-ticket: 360;
  --width-button-ticket: 259;
  --co-button-ticket: 290;

  top: calc(var(--top-button-ticket) * 1px);
/*
  left: calc(50% - var(--co-button-ticket) * 1px);
*/
  margin: 0 auto;
  left: 0;
  right :0;
  width: calc(var(--width-button-ticket) * 1px);
}
.schedule .button-ticket2 {
  --top-button-ticket2: 340;
  --width-button-ticket2: 259;
  --co-button-ticket2: -20;

  top: calc(var(--top-button-ticket2) * 1px);
  left: calc(50% - var(--co-button-ticket2) * 1px);
  width: calc(var(--width-button-ticket2) * 1px);
}
/* 開催場所 */
.map {
  --mt-panel: 80;

  margin-top: calc(var(--mt-panel) * 1px);
  position: relative;
}
.map .title {
  --width-title: 306;

  top: calc(var(--top-title) * 1px);
  left: calc(var(--left-title) * 1px);
}
.map .embed-map {
  --top-embed-map: 50;
  --width-embed-map: 360;
  --height-embed-map: 360;
  --offset-embed-map: 10;

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

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

border: solid yellow 0px;

}
.map .iframe-map {
  width: 100%;
  height: 100%;
}
.map .text-map {
  position: absolute;
  text-align: left;
  color: white;

  --top-text-map: 50;
  --offset-text-map: 10;
  --width-text-map: 370;

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

  font-family: 'PixelMplus12';
  font-size: 16px;
  text-align: left;
border: solid yellow 0px;

}
.map .text-map .large {
  font-size: 24px;
  font-weight: bold;

  font-weight: bold;
}
.map .text-map .medium {
  font-size: 20px;
  font-weight: bold;

}


/* FAQ */
.faq {
  --mt-panel: 80;

  margin-top: calc(var(--mt-panel) * 1px);
  position: relative;
}
.faq .title {
  --width-title: 306;

  top: calc(var(--top-title) * 1px);
  left: calc(var(--left-title) * 1px);
}

/* ロゴ */
.logo {
  --width-logo: 199;
  margin: 30px auto;
}

/* 1000px未満 */
@media screen and (max-width: 1000px) {
  /* 共通 */
  .buttons {
    width: calc(var(--width-button) / 1000 * 100vw * 1.0);
  }

  /* トップ */
  .top {
    overflow: hidden;
    width: 96vw;
  }
  .top .kv {
  }
  .top .character {
    left: 0;
/*    width: calc(var(--width-character) / 1000 * 100vw * 1.0); */
  margin: 0 calc(50% - 50vw);  /* ネガティブマージン */
width :107vw;

  }
  .top .snow {
    top: calc(var(--top-snow) / 1000 * 100vw * 1.0);
    width: 96vw;
  }
  .top .xmas {
    top: calc(var(--top-xmas) / 1000 * 100vw * 1.0);
    width: calc(var(--width-xmas) / 1000 * 100vw * 1.0);
  }
  .top .holly {
    top: calc(var(--top-holly) / 1000 * 100vw * 0.9);
    width: calc(var(--width-holly) / 1000 * 100vw * 1.0);
  }
  .top .fairy-left {
    top: calc(var(--top-fairy-left) / 1000 * 100vw * 1.0);
/*    left: calc(var(--left-fairy-left) / 1000 * 100vw * 1.0); */
  left: calc(50% - var(--co-fairy-left) / 1000 * 100vw * 1.0);
    width: calc(var(--width-fairy-left) / 1000 * 100vw * 1.0);
  }
  .top .fairy-right {
    top: calc(var(--top-fairy-right) / 1000 * 100vw * 1.0);
/*    left: calc(var(--left-fairy-right) / 1000 * 100vw * 1.0); */
  left: calc(50% - var(--co-fairy-right) / 1000 * 100vw * 1.0);

    width: calc(var(--width-fairy-right) / 1000 * 100vw * 1.0);
  }

  /* ハイライト */
  .highlight {
    width: 90vw;
  }
  .highlight .band {
    height: calc(var(--height-band) / 1000 * 100vw * 1.0);
  }
  .highlight .screenshot {
    top: calc(var(--top-screenshot) / 1000 * 100vw * 1.0);
    left: calc(var(--left-screenshot) / 1000 * 100vw * 1.0);
/*    width: calc(var(--width-screenshot) / 1000 * 100vw * 1.0); */
    width: 90vw;

  }
  .highlight .controller {
    top: calc(var(--top-controller) / 1000 * 100vw * 1.0);
    left: calc(var(--left-controller) / 1000 * 100vw * 1.0);
    width: calc(var(--width-controller) / 1000 * 100vw * 1.0);
  }

  /* 背景 */
  .background {
    background-size: 96vw;
  }
  /*  説明・情報 */
  .deco {
    width: calc(var(--width-deco) / 1000 * 100vw * 1.0);
  }
  .stage {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: calc(var(--width-stage) / 1000 * 100vw * 1.0);
  }
  .event {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: calc(var(--width-event) / 1000 * 100vw * 1.0);
  }

  /* ストーリー */
  .story {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: 98vw;;
  }
  .story .panel {
    width: 80vw;;
  }
  .story .title {
    top: calc(var(--top-title) / 1000 * 100vw * 1.0);
    left: calc(var(--left-title) / 1000 * 100vw * 1.0);
    width: calc(var(--width-title) / 1000 * 100vw * 1.0);
  }

  /* クリスマスエディションとは */
  .xmas-edition  {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: 98vw;;
  }
  .xmas-edition  .panel {
    width: 80vw;;
  }
  .xmas-edition  .title {
    top: calc(var(--top-title) / 1000 * 100vw * 1.0);
    left: calc(var(--left-title) / 1000 * 100vw * 1.0);
    width: calc(var(--width-title) / 1000 * 100vw * 1.0);
  }
  .xmas-edition .ribbon {
    top: calc(var(--top-ribbon) / 1000 * 100vw * 1.0);
  left: calc(50% - var(--co-ribbon) / 1000 * 100vw * 1.0);
    width: calc(var(--width-ribbon) / 1000 * 100vw * 1.0);
  }

  /* 公演情報 */
  .information {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: 98vw;;
  }
  .information .panel {
    width: 80vw;;
  }
  .information .title {
    top: calc(var(--top-title) / 1000 * 100vw * 1.0);
    left: calc(var(--left-title) / 1000 * 100vw * 1.0);
    width: calc(var(--width-title) / 1000 * 100vw * 1.0);
  }

  /* スケジュール */
  .schedule {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: 98vw;;
  }
  .schedule .panel {
    width: 80vw;;
  }
  .schedule .title {
    top: calc(var(--top-title) / 1000 * 100vw * 1.0);
    left: calc(var(--left-title) / 1000 * 100vw * 1.0);
    width: calc(var(--width-title) / 1000 * 100vw * 1.0);
  }
  .schedule .button-ticket {
    top: calc(var(--top-button-ticket) / 1000 * 100vw * 1.0);
/*    left: calc(50% - var(--co-button-ticket) / 1000 * 100vw * 1.0); */
    width: calc(var(--width-button-ticket) / 1000 * 100vw * 1.0);
  }
  .schedule .button-ticket2 {
    top: calc(var(--top-button-ticket2) / 1000 * 100vw * 1.0);
    left: calc(50% - var(--co-button-ticket2) / 1000 * 100vw * 1.0);
    width: calc(var(--width-button-ticket2) / 1000 * 100vw * 1.0);
  }
  /* 開催場所 */
  .map {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: 98vw;;
  }
  .map .panel {
    width: 80vw;;
  }
  .map .title {
    top: calc(var(--top-title) / 1000 * 100vw * 1.0);
    left: calc(var(--left-title) / 1000 * 100vw * 1.0);
    width: calc(var(--width-title) / 1000 * 100vw * 1.0);
  }
  .map .embed-map {
    top: calc(var(--top-embed-map) / 1000 * 100vw * 1.0);
    right: calc(50% + var(--offset-embed-map) / 1000 * 100vw * 1.0);
    width: calc(var(--width-embed-map) / 1000 * 100vw * 1.0);
    height: calc(var(--height-embed-map) / 1000 * 100vw * 1.0);
  }
  .map .iframe-map {
  }
  .map .text-map {
    top: calc(var(--top-text-map) / 1000 * 100vw * 1.0);
    left: calc(50% + var(--offset-text-map) / 1000 * 100vw * 1.0);
    width: calc(var(--width-text-map) / 1000 * 100vw * 1.0);
    font-size: 1.5vw;
_  }
  .map .text-map .large {
    font-size: 2.5vw;
  }
  .map .text-map .medium {
    font-size: 2vw;
  }
  /* FAQ */
  .faq {
    margin-top: calc(var(--mt-panel) / 1000 * 100vw * 1.0);
    width: 98vw;;
  }
  .faq .panel {
    width: 80vw;;
  }
  .faq .title {
    top: calc(var(--top-title) / 1000 * 100vw * 1.0);
    left: calc(var(--left-title) / 1000 * 100vw * 1.0);
    width: calc(var(--width-title) / 1000 * 100vw * 1.0);
  }
  /* ロゴ */
  .logo {

    width: calc(var(--width-logo) / 1000 * 100vw * 1.0);
  }
}