/* ************************************************************** */
/* contents                                                       */
/* ************************************************************** */
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (max-width: 767px) {
  #sidemenu.open~#contents_wrapper>div>* {
    filter: blur(4px);
  }
}


/* ************************************************************** */
/* prologue                                                       */
/* ************************************************************** */
.scene_wrapper {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  opacity: 1;
  transition: opacity 1s ease-in;
}
.scene_wrapper.hide {
  opacity: 0;
}
#scene_1 { height: 200vh; }
#scene_2,
#scene_3,
#scene_4,
#scene_5 { height: 100vh; }

.scene_wrapper>div {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 1;
  transition: opacity .5s ease-in;
}
.scene_wrapper>div.hide {
  opacity: 0;
}

.serif_wrapper {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}
.serif_wrapper:not(:first-child) {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.serif_wrapper:first-child>img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#serif_1 { top:   0vh; }
#serif_2 { top: 100vh; }
#serif_3 { top: 200vh; }
#serif_4 { top: 300vh; }
#serif_5 { top: 400vh; }
#serif_6 { top: 500vh; }

/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #scene_1>div:nth-child(1) { background-image: url('../../img/prologue/wide/scene_1_1.jpg'); }
  #scene_1>div:nth-child(2) { background-image: url('../../img/prologue/wide/scene_1_2.jpg'); }
  #scene_1>div:nth-child(3) { background-image: url('../../img/prologue/wide/scene_1_3.jpg'); }
  #scene_2>div:nth-child(1) { background-image: url('../../img/prologue/wide/scene_2_1.jpg'); }
  #scene_2>div:nth-child(2) { background-image: url('../../img/prologue/wide/scene_2_2.jpg'); }
  #scene_2>div:nth-child(3) { background-image: url('../../img/prologue/wide/scene_2_3.jpg'); }
  #scene_3>div:nth-child(1) { background-image: url('../../img/prologue/wide/scene_3_1.jpg'); }
  #scene_3>div:nth-child(2) { background-image: url('../../img/prologue/wide/scene_3_2.jpg'); }
  #scene_3>div:nth-child(3) { background-image: url('../../img/prologue/wide/scene_3_3.jpg'); }
  #scene_4>div:nth-child(1) { background-image: url('../../img/prologue/wide/scene_4_1.jpg'); }
  #scene_4>div:nth-child(2) { background-image: url('../../img/prologue/wide/scene_4_2.jpg'); }
  #scene_4>div:nth-child(3) { background-image: url('../../img/prologue/wide/scene_4_3.jpg'); }
  #scene_5>div:nth-child(1) { background-image: url('../../img/prologue/wide/scene_5_1.jpg'); }
  #scene_5>div:nth-child(2) { background-image: url('../../img/prologue/wide/scene_5_2.jpg'); }
  #scene_5>div:nth-child(3) { background-image: url('../../img/prologue/wide/scene_5_3.jpg'); }

  .serif_wrapper>img {
    width: 50%;
    max-width: 550px;
  }
  #serif_2 { background-image: url('../../img/prologue/wide/serif_1.png'); }
  #serif_3 { background-image: url('../../img/prologue/wide/serif_2.png'); }
  #serif_4 { background-image: url('../../img/prologue/wide/serif_3.png'); }
  #serif_5 { background-image: url('../../img/prologue/wide/serif_4.png'); }
  #serif_6 { background-image: url('../../img/prologue/wide/serif_5.png'); }

  .serif_wrapper:not(:first-child)>img:nth-child(2) {
    display: none;
  }
}
@media all and (max-width: 767px) {
  #scene_1>div:nth-child(1) { background-image: url('../../img/prologue/nrrw/scene_1_1.jpg'); }
  #scene_1>div:nth-child(2) { background-image: url('../../img/prologue/nrrw/scene_1_2.jpg'); }
  #scene_1>div:nth-child(3) { background-image: url('../../img/prologue/nrrw/scene_1_3.jpg'); }
  #scene_2>div:nth-child(1) { background-image: url('../../img/prologue/nrrw/scene_2_1.jpg'); }
  #scene_2>div:nth-child(2) { background-image: url('../../img/prologue/nrrw/scene_2_2.jpg'); }
  #scene_2>div:nth-child(3) { background-image: url('../../img/prologue/nrrw/scene_2_3.jpg'); }
  #scene_3>div:nth-child(1) { background-image: url('../../img/prologue/nrrw/scene_3_1.jpg'); }
  #scene_3>div:nth-child(2) { background-image: url('../../img/prologue/nrrw/scene_3_2.jpg'); }
  #scene_3>div:nth-child(3) { background-image: url('../../img/prologue/nrrw/scene_3_3.jpg'); }
  #scene_4>div:nth-child(1) { background-image: url('../../img/prologue/nrrw/scene_4_1.jpg'); }
  #scene_4>div:nth-child(2) { background-image: url('../../img/prologue/nrrw/scene_4_2.jpg'); }
  #scene_4>div:nth-child(3) { background-image: url('../../img/prologue/nrrw/scene_4_3.jpg'); }
  #scene_5>div:nth-child(1) { background-image: url('../../img/prologue/nrrw/scene_5_1.jpg'); }
  #scene_5>div:nth-child(2) { background-image: url('../../img/prologue/nrrw/scene_5_2.jpg'); }
  #scene_5>div:nth-child(3) { background-image: url('../../img/prologue/nrrw/scene_5_3.jpg'); }

  .serif_wrapper>img {
    width: 60%;
  }
  #serif_2 { background-image: url('../../img/prologue/nrrw/serif_1.png'); }
  #serif_3 { background-image: url('../../img/prologue/nrrw/serif_2.png'); }
  #serif_4 { background-image: url('../../img/prologue/nrrw/serif_3.png'); }
  #serif_5 { background-image: url('../../img/prologue/nrrw/serif_4.png'); }
  #serif_6 { background-image: url('../../img/prologue/nrrw/serif_5.png'); }

  .serif_wrapper:not(:first-child)>img:nth-child(1) {
    display: none;
  }
}

/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #scene_nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    top: 0;
    right: 1.5em;
    bottom: 0;
    width: 2em;
    height: 40%;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 1;
  }
  #scene_nav>div {
    display: block;
    width:  2em;
    height: 2em;
    background-image: url('../../img/prologue/nav_othr.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }
  #scene_nav>div.curr {
    background-image: url('../../img/prologue/nav_curr.svg');
  }
}
@media all and (max-width: 767px) {
  #scene_nav {
    display: none;
  }
}