#wrapper{
	background-color:black;
}

#wrapper.top #contents {
  background: url("../images/howto/bg.jpg") center top no-repeat;
  min-height:2430px;
}


#wrapper.top .container .logo {
  position: absolute;
  top: 730px;
  left: calc(320px - 630px / 2);
  width: 630px;
  height:  233px;
  transition: all ease 0.5s 0.5s;
  opacity: 0;
}


#wrapper.top .container .logo.doShow {
  opacity: 1;
}


#wrapper.top .container .title {
  position: absolute;
  top: 105px;
  left: calc(320px - 640px / 2);
  width: 640px;
  height:  128px;
  transition: all ease 0.3s 0.2s;
  transform: translate(0, 200px);
  opacity: 0;
}

#wrapper.top .container .title.doShow {
  transform: translate(0, 0);
  opacity: 1;
}

#wrapper.top .container .img1 {
  position: absolute;
  top: 279px;
  left:8px;
  width: 617px;
  height: 608px;
  transition: all ease 300ms 0.2s;
  opacity: 0;
}

#wrapper.top .container .img1.doShow {
  opacity: 1;
}

#wrapper.top .container .img2 {
  position: absolute;
  top: 963px;
  left:20px;
  width: 616px;
  height:  761px;
  transition: all ease 300ms 0.2s;
  opacity: 0;
}

#wrapper.top .container .img2.doShow {
  opacity: 1;
}

#wrapper.top .container .cach {
  position: absolute;
  top: 1676px;
  left: calc(320px - 533px / 2);
  width: 533px;
  height: 149px;
  transition: all ease 300ms 0.2s;
  opacity: 0;
}

#wrapper.top .container .cach.doShow {
  opacity: 1;
}

#wrapper.top .container .atention {
  position: absolute;
  top: 1791px;
 right: 10px;
  width: 283px;
  height: 18px;
  transition: all ease 300ms 0.2s;
  opacity: 0;
}

#wrapper.top .container .atention.doShow {
  opacity: 1;
}


#wrapper.top .container .oizumi {
  position: absolute;
  top: 26px;
  left: 26px;
  width: 125px;
  height: 35px;
  opacity: 0;
  z-index: 1000;
  transition: all ease 300ms 0s;
}
#wrapper.top .container .oizumi.doShow {
  opacity: 1;
}