@keyframes fire {
  0%, 100% {
    transform: scale(1, 1.08) rotate(0deg);
  }
  50% {
    transform: scale(1, 1) rotate(-3deg);
  }
}
@keyframes fire2 {
  0%, 100% {
    transform: scale(1, 1.12) rotate(0deg);
  }
  50% {
    transform: scale(1, 1) rotate(5deg);
  }
}
@keyframes fire3 {
  0%, 100% {
    transform: scale(1, 1.05) rotate(0deg);
  }
  50% {
    transform: scale(1, 1) rotate(2deg);
  }
}
#wrapper.character #contents {
  background-color:  white;
   min-height: 2190px;
}

#wrapper.character .container .character_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);  width: 2560px;
  height: 1060px;
}


#wrapper.character .container .title {
  position: absolute;
  top: 30px;
  left: calc(50% - 506px / 2);
  width: 506px;
  height: 79px;
  transition: all ease 0.5s 0s;
  transform: translatey(-100px);
  opacity: 0;
}

#wrapper.character .container .title.doShow {
  opacity: 1;
  transform: translatey(0px);
}

#wrapper.character .container .cnt01 {
  position: absolute;
  top: 140px;
  left: calc(50% - 894px / 2);
  width: 894px;
  height: 412px;
  transition: all ease 0.5s 0.2s;
  transform: translatex(-100px);
  opacity: 0;
}

#wrapper.character .container .cnt01.doShow {
  opacity: 1;
  transform: translatex(0px);
}


#wrapper.character .container .cnt02 {
  position: absolute;
  top: 500px;
  left: calc(50% - 894px / 2);
  width: 894px;
  height: 417px;
  transition: all ease 0.5s 0.4s;
  transform: translatex(100px);
  opacity: 0;
}

#wrapper.character .container .cnt02.doShow {
  opacity: 1;
  transform: translatex(0px);
}



#wrapper.character .container .cnt03 {
  position: absolute;
  top: 867px;
  left: calc(50% - 894px / 2);
  width: 894px;
  height: 405px;
  transition: all ease 0.5s 0.6s;
  transform: translatex(-100px);
  opacity: 0;
}

#wrapper.character .container .cnt03.doShow {
  opacity: 1;
  transform: translatex(0px);
}

#wrapper.character .container .cnt04 {
  position: absolute;
  top: 1221px;
  left: calc(50% - 894px / 2);
  width: 894px;
  height: 402px;
  transition: all ease 0.5s 0.8s;
  transform: translatex(100px);
  opacity: 0;
}

#wrapper.character .container .cnt04.doShow {
  opacity: 1;
  transform: translatex(0px);
}


#wrapper.character .container .cnt05 {
  position: absolute;
  top: 1575px;
  left: calc(50% - 1058px / 2);
  width: 1058px;
  height: 402px;
  transition: all ease 0.5s 1s;
  transform: translatex(-100px);
  opacity: 0;
}

#wrapper.character .container .cnt05.doShow {
  opacity: 1;
  transform: translatex(0px);
}




#wrapper.character .container .copyright {
  position: absolute;
  top: 920px;
  left: 0;
  right: 0;
  margin: auto;
  width: 452px;
  height: 15px;
  opacity: 0;
  transition: all ease 300ms 0s;

}
#wrapper.character .container .copyright.doShow {
  opacity: 1;
}
#wrapper.character .container .oizumi {
  position: absolute;
  top: 17px;
  left: 50px;
  width: 107px;
  height: 30px;
  opacity: 0;
  transition: all ease 300ms 0s;
}
#wrapper.character .container .oizumi.doShow {
  opacity: 1;
}