@charset "UTF-8";

/* ----- */
:root {
  --rate: 0.70;		/* 全体を縮小 */
}


.container {
}

.area-contents {
  background-image: url("../../../images/portal/2606nazonika/background.png");
  background-position: top center;
  background-repeat: repeat-y;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----- */

/* キービジュアル */
#frame-kv {
  position: relative;
}
.background-kv {
  --width-background-kv: 1000;

  width: calc(var(--width-background-kv) * 1px * var(--rate));
}
.kv {
  --width-kv: 292;

  position: absolute;
  top: 29%;
  width: calc(var(--width-kv) * 1px * var(--rate));
}
#kv-isekai {
  --offset-kv-isekai: 160;

  right: calc(50% + var(--offset-kv-isekai) * 1px);
}
#kv-tetsujinx {
  margin: 0 auto;
  left: 0;
  right: 0;
}
#kv-calavera {
  --offset-kv-calavera: 160;

  left: calc(50% + var(--offset-kv-calavera) * 1px);
}

/* インフォメーション */
.information  {
  --width-information: 876;

  width: calc(var(--width-information) * 1px * var(--rate));
}

/* インフォメーション：異世界転生からの脱出 */
#frame-isekai {
  margin-top: 30px;
  position: relative;
}
.information-isekai {

}

/* インフォメーション：鉄人X */
#frame-tetsujinx {
  margin-top: 30px;
  position: relative;
}
.information-tetsujinx {
}

/* インフォメーション：CALAVERA */
#frame-calavera {
  margin-top: 30px;
  position: relative;
}
.information-calcavera {
}

.button-ticket {
  --width-button-ticket: 352;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 2%;
  width: calc(var(--width-button-ticket) * 1px * var(--rate));
}

/* マップ */
#frame-map {
  margin-top: 30px;
  position: relative;
}
.map {
  --width-map: 853;

  width: calc(var(--width-map) * 1px * var(--rate));
}
.logo {
}
.logo-nazonika {
  --offset-logo-nazonika: 80;
  --width-logo-nazonika: 294;

  position: absolute;
  top: 15%;
  left: calc(50% + var(--offset-logo-nazonika) * 1px * var(--rate));
  width: calc(var(--width-logo-nazonika) * 1px * var(--rate));
}
.embed-map {
  --offset-embed-map: (-40);
  --width-embed-map: 440;
  --height-embed-map: 440;

  position: absolute;
  top: 20%;
  right: calc(50% + var(--offset-embed-map) * 1px * var(--rate));
  width: calc(var(--width-embed-map) * 1px * var(--rate));
  height: calc(var(--height-embed-map) * 1px * var(--rate));
}
.iframe-map {
  width: 100%;
  height: 100%;
}

/* FAQ */
/* --- FAQ --- */
#frame-faq {
}
.faq-title {
  --width-faq-title: 227;
  margin: 0 auto;

  width: calc(var(--width-faq-title) * 1px * var(--rate));

}

/* フッタ */
#frame-footer {
  --width-frame-footer: 876;
  --height-frame-footer: 220;

  margin-top: 30px;
  width: calc(var(--width-frame-footer) * 1px * var(--rate));
  height: calc(var(--height-frame-footer) * 1px * var(--rate));
  position: relative;

}
.logo-yodaka {
  --width-logo-yodaka: 245;
  position: absolute;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 20%;
  width: calc(var(--width-logo-yodaka) * 1px * var(--rate));
}


/* 1000px未満 */
@media screen and (max-width: 1000px) {
  .container {
  }
  .area-contents {
  }
  img {
  }
  #frame-kv {
  }
  .background-kv {
    width: 100vw;
  }
  .kv {
    --width-kv: 292;
    width: calc(var(--width-kv) / 1000 * 100vw);
  }
  #kv-isekai {
    right: calc(50% + var(--offset-kv-isekai) / 1000 * 100vw);
  }
  #kv-tetsujinx {
  }
  #kv-calavera {
    left: calc(50% + var(--offset-kv-calavera) / 1000 * 100vw);
  }
  .button-ticket {
    width: calc(var(--width-button-ticket) / 1000 * 100vw);
  }
  #frame-isekai {
  }
  .information-isekai {
  }
  #frame-tetsujinx {
  }
  .information-tetsujinx {
  }
  #frame-calavera {
  }
  .information-calavera {
  }
  #frame-map {
  }
  .map {
    width: 100vw;
  }
  .logo {
  }
  .logo-nazonika {
    left: calc(50% + var(--offset-logo-nazonika) / 1000 * 100vw);
    width: calc(var(--width-logo-nazonika) / 1000 * 100vw);
  }
  .embed-map {
    right: calc(50% + var(--offset-embed-map) / 1000 * 100vw);
    width: calc(var(--width-embed-map) / 1000 * 100vw);
    height: calc(var(--height-embed-map) / 1000 * 100vw);
  }
  .iframe-map {
  }
  #frame-faq {
  }
  .faq-title {
    width: calc(var(--width-faq-title) / 1000 * 100vw);
  }
  #frame-footer {
    width: calc(var(--width-frame-footer) / 1000 * 100vw);
    height: calc(var(--height-frame-footer) / 1000 * 100vw);
  }
  .logo-yodaka {
    width: calc(var(--width-logo-yodaka) / 1000 * 100vw);
  }
}