@charset "utf-8";

@import "../../../common/css/layout.css";

body {
  position: relative;
  overflow: hidden;
}

/*-------------------------------------------------------------------------
  Title
/*-----------------------------------------------------------------------*/

#ttl .anm {
  width: 39.38%;
  position: absolute;
  top: 0;
  right: 0;
}
#ttl.isCharacter .anm {
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
#ttl.isCharacter.show .anm {
  transition-delay:0s;
  transform: scale(1);
}


/*-------------------------------------------------------------------------
  Story
/*-----------------------------------------------------------------------*/

#story {
  margin-top: -10%;
  padding: 10% 0 10%;
  background: url(../img/story/bg.png) no-repeat center 5%;
  background-size: 100% auto;
  position: relative;
}
  #story .txt {
    width: 47.15%;
    position: relative;
    left: 23%;
  }
  #story .anm {
    width: 23.26%;
    position: absolute;
    top: 39%;
    left: 4.8%;
  }
#story.isCharacter .anm {
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
#story.isCharacter.show .anm {
  transition-delay:0.4s;
  transform: scale(1);
}


/*-------------------------------------------------------------------------
  Chara
/*-----------------------------------------------------------------------*/

#chara {
  margin-top: -2%;
  padding-bottom: 10%;
  position: relative;
}
  #chara > div {
    position: relative;
  }
  #chara > div:nth-child(odd) {
    float: left;
  }
  #chara > div:nth-child(even) {
    float: right;
  }
    #chara > div > p {
      width: 100%;
    }
    #chara > div > .anm {
      position: absolute;
    }
  #chara #dillon {
    width: 55.56%;
  }
  #chara #dillon .anm {
    bottom: 0;
    right: 0;
  }
  #chara #russ {
    width: 41.67%;
    margin-top: -3.8%;
  }
  #chara #russ .anm {
    width: 100%;
    top: 0;
    right: 0;
  }
  #chara #weldon {
    width: 48.61%;
    margin-top: -1.6%;
  }
  #chara #weldon .anm {
    top: 0;
    left: 0;
  }
  #chara #sal {
    width: 48.61%;
    margin-top: -6.0%;
  }
  #chara #sal .anm {
    top: 0;
    right: 0;
  }
  #chara #rita {
    width: 44.44%;
    margin-top: -1.0%;
    float: left;
  }
  #chara #rita .anm {
    bottom: 0;
    right: 0;
  }
  #chara #panthado {
    width: 52.78%;
    float: right;
    margin-top: -5.8%;
  }
  #chara #panthado .anm {
    top: 0;
    right: 0;
  }

#chara .isCharacter .txt {
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
  #chara .isCharacter#dillon .txt,
  #chara .isCharacter#weldon .txt,
  #chara .isCharacter#rita .txt {
    position: relative;
    left: -100%;
  }
  #chara .isCharacter#russ .txt,
  #chara .isCharacter#sal .txt,
  #chara .isCharacter#panthado .txt {
    position: relative;
    right: -100%;
  }
  #chara .isCharacter.show#dillon .txt,
  #chara .isCharacter.show#weldon .txt,
  #chara .isCharacter.show#rita .txt {
    transition: all .2s ease-out;
    transform: scale(1);
    left: 0;
  }
  #chara .isCharacter.show#russ .txt,
  #chara .isCharacter.show#sal .txt,
  #chara .isCharacter.show#panthado .txt {
    transition: all .4s ease-out;
    transform: scale(1);
    right: 0;
  }

  #chara .isCharacter#dillon .anm,
  #chara .isCharacter#weldon .anm,
  #chara .isCharacter#rita .anm {
    left: -100%;
  }
  #chara .isCharacter#russ .anm,
  #chara .isCharacter#sal .anm,
  #chara .isCharacter#panthado .anm {
    right: -100%;
  }
  #chara .isCharacter.show#dillon .anm,
  #chara .isCharacter.show#weldon .anm,
  #chara .isCharacter.show#rita .anm {
    transition: all .6s ease-out;
    transform: scale(1);
    left: 0;
  }
  #chara .isCharacter.show#russ .anm,
  #chara .isCharacter.show#sal .anm,
  #chara .isCharacter.show#panthado .anm {
    transition: all .8s ease-out;
    transform: scale(1);
    right: 0;
  }


/*-------------------------------------------------------------------------
  Footer
/*-----------------------------------------------------------------------*/
#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}