#wrapper{
	background-color:black;
}

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


#wrapper.booklet .container .title {
  position: absolute;
  top: 80px;
  left: calc(320px - 640px / 2);
  width: 100%;
  height:  270px;
  z-index: 100;
  transition: all ease 0.2s 0.1s;
  opacity: 0;
}


#wrapper.booklet .container .title.doShow {
  opacity: 1;
}

#wrapper.booklet .container .imgbox{
  position: relative;
  z-index: 100;
  opacity: 0;
  top:200px;
  left: calc(50% - 640px / 2);
  width: 100%;
  transition: all ease 0.3s 0s;
  transform: translate(0, -50px);
}
#wrapper.booklet .container .imgbox.doShow {
　transform: translate(0px,0px);
  opacity: 1;
  transform: translate(0, -0);
}

#wrapper.booklet .container .title img,
#wrapper.booklet .container .imgbox img{
	width: 100%;
}


#wrapper.booklet .container .img1 {
  position: absolute;
  top: 200px;
  left: calc(320px - 640px / 2);
  width: 640px;
  height:  270px;
  z-index: 100;
  transition: all ease 0.2s 0.3s;
  transform: translate(0, -50px);
  opacity: 0;
}


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




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