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

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

.buttons {
  position: absolute;		/* PCのみabsolute指定 */
}

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

.area-contents {
  background-image: url('../../../images/event/2504prisonbreak/pc/background.png');
  background-position: top center;
}


/* --- ヘッダ(タイトル) --- */

/* --- キービジュアル --- */
#frame-kv {
  --mt-frame-kv: 50;
  --width-frame-kv: 1200;
  --height-frame-kv: 591;

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

  width: calc(var(--width-frame-kv) * 1px);
  height: calc(var(--height-frame-kv) * 1px);
  overflow: hidden;
}
.kv {
  --height-kv: 591;

  position: absolute;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  height: calc(var(--height-kv) * 1px);
}
#kv1 {
  background-image: url('../../../images/event/2504prisonbreak/pc/parts/kv1.png');
  z-index: 1;
}
#kv2 {
  background-image: url('../../../images/event/2504prisonbreak/pc/parts/kv2.png');
  z-index: 0;
}
#kv3 {
  background-image: url('../../../images/event/2504prisonbreak/pc/parts/kv3.png');
  z-index: 2;
}

/*  --- キャッチ・とは --- */
.frame-block {
  background-image: url('../../../images/event/2504prisonbreak/pc/background2.png');
  background-size: contain;
}

/*  --- キャッチ --- */
#frame-catch {
  --height-frame-catch: 244;

  margin-top: 50px;
  height: calc(var(--height-frame-catch) * 1px);
}
.catch {
}
/*  --- とは --- */
#frame-about  {
  --height-frame-catch: 543;

  margin-top: 50px;
  height: calc(var(--height-frame-catch) * 1px);
}
.about {
}
/*  --- ストーリー--- */
#frame-story {
  --width-frame-story: 1200;
  --height-frame-story: 889;

  position: relative;
  width: calc(var(--width-frame-story) * 1px);
  height: calc(var(--height-frame-story) * 1px);
  margin: 50px auto 0;
  left: 0;
  right: 0;
  overflow-y: hidden;
}
.story {
  --height-story: 930;

  position: absolute;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  height: calc(var(--height-story) * 1px);
background-repeat: no-repeat;
}
#story1 {
  background-image: url('../../../images/event/2504prisonbreak/pc/parts/story1.png');
  z-index: 2;
border: solid red 0px;
}
#story2 {
  background-image: url('../../../images/event/2504prisonbreak/pc/parts/story2.png');
  z-index: 1;
border: solid blue 0px;
}

/*  --- お試し謎 --- */
#frame-trial {
  margin-top: 50px;
}
.trial {
}
/*  --- プレイタイプ・チケット --- */
#frame-blocka {
  margin-top: 50px;
  position: relative;
}
.blocka {
}
.button-ticket {
  --offset-button-ticket: 130;
  --width-button-ticket: 300;

  position: absolute;
  bottom: 15%;
  left: calc(50% + var(--offset-button-ticket) * 1px);
  width: calc(var(--width-button-ticket) * 1px);

}

/*  --- スケジュール --- */
#frame-schedule {
  margin-top: 50px;
}
.schedule {
}
/*  --- グッズ --- */
#frame-goods{
  margin-top: 50px;
}
.goods {
  --width-goods: 1200;
  width: calc(var(--width-goods) * 1px);
}
/*  --- キャンペーン --- */
#frame-campaign {
  margin-top: 50px;
}
.campaign {
}
/*  --- マップ --- */
#frame-map {
  margin-top: 50px;
  position: relative;
}
.map {
  --mt-parts-map: 40;
  --width-map: 1065;

/*  margin: calc(var(--mt-parts-map) * 1px) auto 0; */
  width: calc(var(--width-map) * 1px);
}
.embed-map {
  --offset-embed-map: 50;
  --width-embed-map: 400;
  --height-embed-map: 400;

  position: absolute;
  right: calc(50% + var(--offset-embed-map) * 1px);
  top: 17%;
  width: calc(var(--width-embed-map) * 1px);
  height: calc(var(--height-embed-map) * 1px);
}
.iframe-map {
  width: 100%;
  height: 100%;
}
.map-chain {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

.button-map {
  --offset-button-map: 100;
  --width-button-map: 252;

  position: absolute;
  bottom: 15%;
  left: calc(50% + var(--offset-button-map) * 1px);

  width: calc(var(--width-button-map) * 1px);
}

/* --- よくある質問 --- */
#frame-faq {
  --mt-frame-faq: 50;

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

/* ロゴ、お試し謎解答 */
#frame-footer {
  position: relative;
}
.trial-answer {
  --offset-trial-answer: 200;
  --width-trial-answer: 327;

  position: absolute;
  top: 0;
  left: calc(50% + var(--offset-trial-answer) * 1px);
  width: calc(var(--width-trial-answer) * 1px);
}
.logo-yodaka {
  --margin-logo-yodaka: 50;
  --width-logo-yodaka: 249;

  margin: calc(var(--margin-logo-yodaka) * 1px) auto;
  width: calc(var(--width-logo-yodaka) * 1px);
}