@charset "UTF-8";

:root {
  --width-raw:    1280;		/* 画像オリジナル幅 */
  --width-cooked:  750;		/* 画像表示幅 */
/*  --height-frame-header: 80;	/* ヘッダ高さ */
}

.text {
  color: white;
  text-align: left;
}

/* --- 背景 --- */
.wrapper {
  z-index: 0;	/* 全体より下 */

  background-image: url("../../../images/dej/2607vampirehall/background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

  min-height: 100vh; /* コンテンツが短くても背景が出るように */
}

/* --- ヘッダ --- */
#frame-header {
  width: 100%;
  display: flex; 
  justify-content: flex-end; 
  align-items: center;

  box-sizing: border-box;
  padding-right: 0;

  position: fixed;
  top: 0;
  background-color: black;
  z-index: 3;
}
#frame-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.menu {
  align-items: center;
}
#menu-catch {
  --width-menu-catch: 111;
}
#menu-point {
  --width-menu-point: 133;
}
#menu-story {
  --width-menu-story: 146;
}
#menu-format {
  --width-menu-format: 146;
}
#menu-howto {
  --width-menu-howto: 128;
}
#menu-fee {
  --width-menu-fee: 128;
}
#menu-schedule {
  --width-menu-schedule: 168;
}
#menu-map {
  --width-menu-map: 106;
}
#menu-faq {
  --width-menu-faq: 128;
}

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

.kv {
  width: 100vw;
  display: block;
}

/* --- キャッチ --- */
#frame-catch {
  --width-frame-catch: 1280;
  --height-frame-catch: 640;

  position: relative;
  margin: 0 auto;
}
.catch {
  --width-catch: 1280;
}
.text-catch {
  --width-text-catch: 1280;
  --height-text-catch: 100;
  --top-text-catch: 120;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  text-align: center;
  line-height: 160%;
border: solid yellow 0px;
}
.text-catch .red {
  color: red;
}

/* --- フォト --- */
#frame-photo {
  --width-frame-photo: 1280;
/*
  display: flex; 
  justify-content: center; 
  align-items: center;
*/

  margin: 0 auto;
  overflow: hidden;
border: solid red 0px;
}
.slider-photo {
  --width-slider-photo: 1280;
  --height-slider-photo: 193;

/*
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
*/
}
.photo {
  --width-photo: 313;
}

/* --- ポイント --- */
#frame-point {
}
.point {
  --width-point: 1280;
}

/* --- ストーリー --- */
#frame-story {
  position: relative;
}
.story {
  --width-story: 1280;
}
.text-story {
  --width-text-story: 1280;
  --height-text-story: 100;
  --top-text-story: 340;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  text-align: center;
  line-height: 180%;
border: solid yellow 0px;
}

/* --- プレイ形式・参加方法 --- */
#frame-format {
}
.format {
  --width-format: 1280;
}

/* --- インフォメーション --- */
#frame-information {
  position: relative;
}
.information {
  --width-information: 1280;
}
.text-information {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  text-align: left;
  line-height: 160%;
}
.text-information-1 {
  --width-text-information-1: 750;
  --height-text-information-1: 600;
  --top-text-information-1: 380;
border: solid red 0px;
}
.text-information-2 {
  --width-text-information-2: 950;
  --height-text-information-2: 100;
  --top-text-information-2: 1380;
border: solid yellow 0px;
}
.text-information .title {
  text-align: center;
}
#button-dej {
  --width-button-dej: 481;

  margin: 0 auto;
  left: 0;
  right: 0;
  top: 30%;
}

/* --- チケット --- */
#frame-fee {
}
.fee {
  --width-fee: 1280;
}

/* --- スケジュール --- */
#frame-schedule {
  position: relative;
}
.schedule {
  --width-schedule: 1280;
}
.text-schedule {
  --width-text-schedule: 700;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;

  top: 21%;
  color: white;
  text-align: left;
border: solid red 0px;
}
.text-schedule .small {
}
.text-schedule .medium {
}
.text-schedule .attention {
}
.text-schedule .reverse {
  background-color: orange;
  color: black;
}

#calendar {
  --width-calendar: 851;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 48%;

z-index: 2;

}
#button-ticket {
  --width-button-ticket: 397;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5%;
}

/* --- マップ --- */
#frame-map {
  position: relative;
}
.map {
  --width-map: 1280;
}
.embed-map {
  --width-embed-map: 800;
  --height-embed-map: 700;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 25%;
}
.iframe-map {
  width: 100%;
  height: 100%;
}
.text-map {
  --width-text-map: 800;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 75%;

  text-align: left;
  color: white;
border: solid yellow 0px;
}
.text-map .large {
  font-weight: bold;
}
.text-map .medium {
}

/* --- FAQ --- */
#frame-faq {
  --width-frame-faq: 1280;
  --height-frame-faq: 3050;

  position: relative;
  margin: 0 auto;

border: solid red 0px;
}
.faq-title {
  --width-faq-title: 1280;
}
.faq-line-up {
}
.text-faq {
  --width-text-faq: 1000;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 11%;

  margin-top: 10px;
  padding-right: 10px;

border: solid yellow 0px;
}
.item {
  text-align: left;
  color: white;
}
.item .question {
  --mt-question: 40;
  font-weight: bold;
}
.item .answer {
  --mt-answer: 5;
}
.faq-line-bottom {
  --mt-faq-line-bottom: 30;
}

/* --- フッタ --- */
#frame-footer {
  position: relative;
}
.footer {
  --width-footer: 1280;
}
.logo {
  --width-logo: 235;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 45%;
}