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

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

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

/* --- ヘッダ --- */

#framesp-header {
  position: relative;
}
.header {
  --height-header: 80;

  width: 100vw;
  height: calc(var(--height-header) * 1px);
  background-color: white;

}
.title{
  --pt-title: 10;
  --pl-title: 15;

  font-size: 28px;
  color: black;
  text-align: left;
  padding-top: calc(var(--pt-title) / 1000 * 100vw);
  padding-left: calc(var(--pl-title) / 1000 * 100vw);
}


/* --- キービジュアル --- */
#framepc-kv {
  position: relative;
}
.kv {
/*  width: 100vw; */
}
/* --- --- */
.background {
  background-image: url("../../../images/event/2409hauntedhouse/background.png");
  background-size: contents;
  background-repeat: repeat-y;
  background-position: center top;
}

/* メニュー */
.frame-menu {
  --mt-frame-menu: 20;
  --width-frame-menu:  1200;
  --height-frame-menu: 170;

  position: relative;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: calc(var(--mt-frame-menu) * 1px);
  width: calc(var(--width-frame-menu) * 1px);
  height: calc(var(--height-frame-menu) * 1px);
border: solid red 0px;
}
.menu {
}
.menu .items {
}

.menu .item {
  position: absolute;
}
.menu .item:hover {
  cursor: pointer;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
#menu-attention {
  --top-menu-attention: 40;
  --offset-menu-attention: 315;
  top: calc(var(--top-menu-attention) * 1px);
  right: calc(50% + var(--offset-menu-attention) * 1px);
}
#menu-format {
  --top-menu-format: 40;
  --offset-menu-format: 100;
  top: calc(var(--top-menu-format) * 1px);
  right: calc(50% + var(--offset-menu-format) * 1px);
}
#menu-schedule {
  --top-menu-schedule: 40;
  --offset-menu-schedule: -60;
  top: calc(var(--top-menu-schedule) * 1px);
  left: calc(50% + var(--offset-menu-schedule) * 1px);
}
#menu-story {
  --top-menu-story: 40;
  --offset-menu-story: 170;
  top: calc(var(--top-menu-story) * 1px);
  left: calc(50% + var(--offset-menu-story) * 1px);
}
#menu-fee {
  --top-menu-fee: 100;
  --offset-menu-fee: 370;
  top: calc(var(--top-menu-fee) * 1px);
  right: calc(50% + var(--offset-menu-fee) * 1px);
}
#menu-goods {
  --top-menu-goods: 100;
  --offset-menu-goods: 200;
  top: calc(var(--top-menu-goods) * 1px);
  right: calc(50% + var(--offset-menu-goods) * 1px);
}
#menu-map {
  --top-menu-map: 100;
  --offset-menu-map: 50;
  top: calc(var(--top-menu-map) * 1px);
  right: calc(50% + var(--offset-menu-map) * 1px);
}
#menu-faq {
  --top-menu-faq: 100;
  --offset-menu-faq: 20;
  top: calc(var(--top-menu-faq) * 1px);
  left: calc(50% + var(--offset-menu-faq) * 1px);
}

/* チケットボタン */
.button-upticket {
  --top-button-upticket: 30;
  --offset-button-upticket: 320;

  top: calc(var(--top-button-upticket) * 1px);
  left: calc(50% + var(--offset-button-upticket) * 1px);

}

/* --- BLOCK-A(システム、フォーマット、スケジュール) --- */
#framepc-blocka {
  --mt-frame-blocka: 10;

  position: relative;
  margin-top: calc(var(--mt-frame-blocka) * 1px);
}
.blocka {
}

/* --- ストーリー --- */
#framepc-story {
  --mt-frame-about: 50;

  position: relative;
  margin-top: calc(var(--mt-frame-about) * 1px);
}
.story {
}

/* --- BLOCK-B(チケット、グッズ) --- */
#framepc-blockb {
  --mt-frame-blockb: 0;

  position: relative;
  margin-top: calc(var(--mt-frame-blockb) * 1px);
}
.blockb {
}
.button-ticket {
  --bottom-button-ticket: 230;
  --offset-button-ticket: 160;

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


/* --- マップ --- */
#framepc-map {
  --mt-frame-map: 30;

  position: relative;
  margin-top: calc(var(--mt-frame-map) * 1px);
}
.map {
}
.map-text {
  --width-map: 500;
  --top-map: 100;
  --offset-map: 30;

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

  text-align: left;
  color: white;

  font-size: 16px;
border: solid red 0px;
}
.map-text .venue {
  margin-top: 30px;
}
.map-text .howto {
  margin-top: 10px;
}
.map-text .address {
  margin-top: 10px;
}
.map-text .xl {
  font-size: 24px;
}
.map-text .large {
  font-size: 22px;
/*
  text-shadow: 
    0.3px 0.3px 0, 0.3px -0.3px 0, -0.3px 0.3px 0, -0.3px -0.3px 0,
    0.3px 0 0, 0 0.3px 0, -0.3px 0 0, 0 -0.3px 0;
*/
}
.button-map {
  --width-button-map: 180;
  --bottom-button-map: 0;
  --offset-button-map: 120;

  bottom: calc(var(--bottom-button-map) * 1px);
  left: calc(50% + var(--offset-button-map) * 1px);
}
/* よくある質問 */
/* →別ファイル */

/* ロゴ */
#framepc-footer {
  --mt-frampc-footer: 50;

  position: relative;
  margin-top: calc(var(--mt-frampc-footer) * 1px);

}
.footer {
}

.logo-yodaka {
/*
  --mt-logo-yodaka: 		  50;
  --mb-logo-yodaka: 		  20;
  --width-logo-yodaka: 		  196;

  position: absolute;
  margin-top: calc(var(--mt-logo-yodaka) * 1px);
  margin-bottom: calc(var(--mb-logo-yodaka) * 1px);
  width: calc(var(--width-logo-yodaka) * 1px);
*/
  --top-logo-yodaka: 370;

  position: absolute;
  top: calc(var(--top-logo-yodaka) * 1px);
  margin: 0 auto;
  left: 0;
  right: 0;

}
.copyright {
  --bottom-copyright: 100;

  position: absolute;
  bottom: calc(var(--bottom-copyright) * 1px);
  margin: 0 auto;
  left: 0;
  right: 0;

  color: white;
  font-size: 18px;
}