@charset "UTF-8";

body {
  overflow-x: hidden;		/* はみ出し要素対応 */
}

img {
/*  display: block; */		/* slickでNG */
}


/* --- 背景 --- */
/* 固定背景、スクロール背景を重ねる */
.background {
  --width-background: 500;

  background-image: url("../../../images/event/2510oshigamike/background/wide.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- 枠 --- */
.frame {
/*
  margin: 0 auto;
  left: 0;
  right: 0;
*/
  position: relative;
}

/* --- タイトル --- */
.title {
  margin: 0 auto;
  left: 0;
  right: 0;

  position: relative;
  z-index: 2;
}
/* --- コンテンツ --- */
.parts {
/*
  margin: 0 auto;
  left: 0;
  right: 0;
*/
}

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

  width: calc(var(--width-parts-kv) * 1px * 0.5);
}

/* クイズアドベンチャーとは */
#frame-quiz {
/*
  --mt-frame-quiz: 60;
  --height-frame-quiz: 280;

  margin-top: calc(var(--mt-frame-quiz) * 1px);
  height: calc(var(--height-frame-quiz) * 1px);
*/
border: solid 0px yellow;
}
.parts#quiz {
  --mt-parts-quiz: 0;
  --width-parts-quiz: 1000;

  margin-top: calc(var(--mt-parts-quiz) * 1px);
  width: calc(var(--width-parts-quiz) * 1px * 0.5);
}

/* どんなゲーム */
#frame-about {
}
.parts#about {
  --mt-parts-about: 0;
  --width-parts-about: 1000;

  margin-top: calc(var(--mt-parts-about) * 1px);
  width: calc(var(--width-parts-about) * 1px * 0.5);
}

/* ストーリー */
#frame-story {
  position: relative;
}
.parts#story {
  --mt-parts-story: 0;
  --width-parts-story: 1001;

  margin-top: calc(var(--mt-parts-story) * 1px);
  width: calc(var(--width-parts-story) * 1px * 0.5);
}
.parts#text-story {
  --width-text-story: 700;
  --height-text-story: 500;

  position: absolute;
  top: 25%;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-story) * 1px * 0.5);
  height: calc(var(--height-text-story) * 1px * 0.5);

  color: white;
  text-align: left;
  font-size: 16px;
border: solid yellow 0px;
}

/* 参加方法 */
#frame-howto {
}
.parts#howto {
  --pt-parts-howto: 0;
  --width-parts-howto: 1001;

  margin-top: calc(var(--pt-parts-howto) * 1px);
  width: calc(var(--width-parts-howto) * 1px * 0.5);
}

/* スケジュール */
/* →別ファイル */

/* チケット */
#frame-fee {
}
.parts#fee {
  --width-parts-fee: 1001;
  width: calc(var(--width-parts-fee) * 1px * 0.5);
}
.button-ticket {
  --width-button-ticket: 265;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 22%;
  width: calc(var(--width-button-ticket) * 1px * 0.5);
}

/* インタビュー・制作 */
#frame-author {
}
.parts#author {
  --mt-parts-author: 0;
  --width-parts-author: 1001;

  margin-top: calc(var(--mt-parts-author) * 1px);
  width: calc(var(--width-parts-author) * 1px * 0.5);
}
.parts#text-interview {
  --width-text-interview: 500;
  --height-text-interview: 280;
  --offset-text-interview: 140;

  position: absolute;
  top: 9%;
  left: calc(50% - var(--offset-text-interview) * 1px * 0.5);
  width: calc(var(--width-text-interview) * 1px * 0.5);
  height: calc(var(--height-text-interview) * 1px * 0.5);

  color: white;
  text-align: left;
  font-size: 12px;
  line-height: 140%;

border: solid yellow 0px;
}
.parts#text-author {
  --width-text-author: 700;
  --height-text-author: 750;

  position: absolute;
  top: 38%;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-text-author) * 1px * 0.5);
  height: calc(var(--height-text-author) * 1px * 0.5);

  color: white;
  text-align: left;
  font-size: 12px;
  
border: solid yellow 0px;
}
.parts#text-author .large {
  font-size: 14px;
}


/* 会場 */
/* →別ファイル */

/* FAQ */
/* →別ファイル */

/* ロゴ */
#frame-logo {
  --mt-frame-logo: 50;
  --pb-frame-logo: 50;

  margin-top: calc(var(--mt-frame-logo) * 1px);
  padding-bottom: calc(var(--pb-frame-logo) * 1px);
}
.parts#logo {
  --width-parts-logo: 350;
  width: calc(var(--width-parts-logo) * 1px * 0.5);
}

/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .background {
     overflow-x: hidden;	/* 横方向スクロールなし */
  }
  .frame {
    widht: 100vw;
  }
  .title {
  }
  .parts {
  }
  #frame-kv {
  }
  .parts#kv {
    width: 100vw;
  }
  #frame-quiz {
  }
  .parts#quiz {
    margin-top: calc(var(--mt-parts-quiz) / 1000 * 100vw);
    width: calc(var(--width-parts-quiz) / 1000 * 100vw );
  }
  #frame-about {
  }
  .parts#about {
    margin-top: calc(var(--mt-parts-about) / 1000 * 100vw);
    width: calc(var(--width-parts-about) / 1000 * 100vw );
  }
  #frame-story {
  }
  .parts#story {
    margin-top: calc(var(--mt-parts-story) / 1000 * 100vw);
    width: calc(var(--width-parts-story) / 1000 * 100vw );
  }
  .parts#text-story {
    width: calc(var(--width-text-story) / 1000 * 100vw );
    height: calc(var(--height-text-story) / 1000 * 100vw );
    font-size: 3.3vw;
  }
  #frame-howto {
  }
  .parts#howto {
    margin-top: calc(var(--pt-parts-howto) / 1000 * 100vw);
    width: calc(var(--width-parts-howto) / 1000 * 100vw );
  }
  #frame-fee {
  }
  .parts#fee {
    width: calc(var(--width-parts-fee) / 1000 * 100vw );
  }
  .button-ticket {
    width: calc(var(--width-button-ticket) / 1000 * 100vw);
  }
  #frame-author {
  }
  .parts#author {
    margin-top: calc(var(--mt-parts-author) / 1000 * 100vw);
    width: calc(var(--width-parts-author) / 1000 * 100vw );
  }
  .parts#text-interview {
    left: calc(50% - var(--offset-text-interview) / 1000 * 100vw );
    width: calc(var(--width-text-interview) / 1000 * 100vw );
    height: calc(var(--height-text-interview) / 1000 * 100vw );
    font-size: 2.5vw;
    line-height: 140%;
  }
  .parts#text-author {
    width: calc(var(--width-text-author) / 1000 * 100vw );
    height: calc(var(--height-text-author) / 1000 * 100vw );
    font-size: 2.5vw;
  }
  .parts#text-author .large {
    font-size: 3vw;
  }
  #frame-logo {
    margin-top: calc(var(--mt-frame-logo) / 1000 * 100vw);
    padding-bottom: calc(var(--pb-frame-logo) / 1000 * 100vw);
  }
  .parts#logo {
    width: calc(var(--width-parts-logo) / 1000 * 100vw * 0.5);
  }
}