.mod-top-block-01 .text-01 {
  left: 15px;
  top: 246px;
}
.mod-top-block-01 .text-01.is-active {
  top: 276px;
}
.tablet-device .mod-top-block-01 .text-01 {
  left: 30px;
  top: 492px;
}
.tablet-device .mod-top-block-01 .text-01.is-active {
  top: 552px;
}
.tablet-device .mod-top-block-01 .text-01 img {
  width: 236px;
}

.mod-top-block-01 .text-02.is-active {
  top: 410px;
}
.tablet-device .mod-top-block-01 .text-02.is-active {
  top: 790px;
}

#js-block-04 {
  position: relative;
  height: 500px;
  z-index: 10;
  margin-top: 24px;
}
.tablet-device #js-block-04 {
  height: 1036px;
  margin-top: -134px;
}
#js-block-04 div, #js-block-04 h1, #js-block-04 p {
  position: absolute;
  transition: all 0.8s ease-out;
}
#js-block-04 .bg-01 {
  top: -1px;
  left: -215px;
}
.tablet-device #js-block-04 .bg-01 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-04 .bg-01 img {
  width: 1500px;
}
#js-block-04 .ttl-main-01 {
  left: 112px;
  top: 103px;
  -webkit-transform: rotate(90deg) scale(0);
  transform: rotate(90deg) scale(0);
}
#js-block-04 .ttl-main-01.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.tablet-device #js-block-04 .ttl-main-01 {
  left: 224px;
  top: 206px;
}
.tablet-device #js-block-04 .ttl-main-01 img {
  width: 408px;
}
#js-block-04 .ttl-main-02 {
  left: 112px;
  top: 103px;
  -webkit-transform: rotate(-90deg) scale(0);
  transform: rotate(-90deg) scale(0);
}
#js-block-04 .ttl-main-02.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.tablet-device #js-block-04 .ttl-main-02 {
  left: 224px;
  top: 206px;
}
.tablet-device #js-block-04 .ttl-main-02 img {
  width: 408px;
}
#js-block-04 .book-01 {
  left: -98px;
  top: 363px;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
#js-block-04 .book-01.is-active {
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.tablet-device #js-block-04 .book-01 {
  left: -178px;
  top: 726px;
}
.tablet-device #js-block-04 .book-01 img {
  width: 596px;
}
#js-block-04 .book-02 {
  left: -8px;
  top: 322px;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
#js-block-04 .book-02.is-active {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.tablet-device #js-block-04 .book-02 {
  left: -16px;
  top: 644px;
}
.tablet-device #js-block-04 .book-02 img {
  width: 212px;
}
#js-block-04 .book-03 {
  left: 195px;
  top: 295px;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
#js-block-04 .book-03.is-active {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.tablet-device #js-block-04 .book-03 {
  left: 390px;
  top: 590px;
}
.tablet-device #js-block-04 .book-03 img {
  width: 500px;
}
#js-block-04 .uchiwa-01 {
  left: -24px;
  top: 19px;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
#js-block-04 .uchiwa-01.is-active {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.tablet-device #js-block-04 .uchiwa-01 {
  left: -48px;
  top: 38px;
}
.tablet-device #js-block-04 .uchiwa-01 img {
  width: 390px;
}
#js-block-04 .parts-01 {
  left: 281px;
  top: 39px;
  opacity: 0;
}
#js-block-04 .parts-01.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  opacity: 1;
}
#js-block-04 .parts-01.is-active.js-anim {
  -webkit-animation: shake 8s linear 3s infinite;
  animation: shake 8s linear 3s infinite;
}
.tablet-device #js-block-04 .parts-01 {
  left: 562px;
  top: 78px;
}
.tablet-device #js-block-04 .parts-01 img {
  width: 108px;
}
#js-block-04 .parts-02 {
  left: 74px;
  top: 226px;
  opacity: 0;
}
#js-block-04 .parts-02.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  opacity: 1;
}
#js-block-04 .parts-02.is-active.js-anim {
  -webkit-animation: shake 6s linear 1s infinite;
  animation: shake 10s linear 1s infinite;
}
.tablet-device #js-block-04 .parts-02 {
  left: 148px;
  top: 452px;
}
.tablet-device #js-block-04 .parts-02 img {
  width: 648px;
}
#js-block-04 .parts-03 {
  left: 3px;
  top: 435px;
  opacity: 0;
}
#js-block-04 .parts-03.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  opacity: 1;
}
#js-block-04 .parts-03.is-active.js-anim {
  -webkit-animation: shake 7s linear 1s infinite;
  animation: shake 7s linear 1s infinite;
}
.tablet-device #js-block-04 .parts-03 {
  left: 6px;
  top: 870px;
}
.tablet-device #js-block-04 .parts-03 img {
  width: 108px;
}
#js-block-04 .deco-01 {
  left: 196px;
  top: 30px;
}
.tablet-device #js-block-04 .deco-01 {
  left: 392px;
  top: 60px;
}
.tablet-device #js-block-04 .deco-01 img {
  width: 196px;
}
#js-block-04 .deco-02 {
  left: 101px;
  top: 298px;
}
.tablet-device #js-block-04 .deco-02 {
  left: 202px;
  top: 596px;
}
.tablet-device #js-block-04 .deco-02 img {
  width: 176px;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  5% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  10% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }

  15% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  20% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }

  30% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }

  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  5% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  10% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }

  15% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  20% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }

  30% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }

  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

#js-block-03 {
  position: relative;
  height: 509px;
  z-index: 10;
  margin-top: -20px;
}
.tablet-device #js-block-03 {
  height: 1018px;
  margin-top: -80px;
}
#js-block-03 div, #js-block-03 h1, #js-block-03 p {
  position: absolute;
  transition: all 1s ease-out;
}
#js-block-03 .bg-01 {
  top: -1px;
  left: -215px;
}
.tablet-device #js-block-03 .bg-01 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-03 .bg-01 img {
  width: 1500px;
}
#js-block-03 .ttl-main {
  left: 40px;
  top: 44px;
  -webkit-transform: translate(30px, -30px);
  transform: translate(30px, -30px);
  opacity: 0;
}
#js-block-03 .ttl-main.is-active {
  -webkit-transition-delay: 3.2s;
  transition-delay: 3.2s;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
.tablet-device #js-block-03 .ttl-main {
  left: 80px;
  top: 88px;
}
.tablet-device #js-block-03 .ttl-main img {
  width: 150px;
}
#js-block-03 .txt-name {
  left: 110px;
  top: 180px;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  opacity: 0;
}
#js-block-03 .txt-name.is-active {
  -webkit-transition-delay: 2.8s;
  transition-delay: 2.8s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.tablet-device #js-block-03 .txt-name {
  left: 220px;
  top: 360px;
}
.tablet-device #js-block-03 .txt-name img {
  width: 386px;
}
#js-block-03 .photo-01 {
  left: 88px;
  top: 21px;
  opacity: 0;
  -webkit-transform: translate(-50px, 50px);
  transform: translate(-50px, 50px);
}
#js-block-03 .photo-01.is-active {
  opacity: 1;
  -webkit-transition-delay: 1.3s;
  transition-delay: 1.3s;
  -webkit-transform: translate(0);
  transform: translate(0);
}
.tablet-device #js-block-03 .photo-01 {
  left: 176px;
  top: 42px;
}
.tablet-device #js-block-03 .photo-01 img {
  width: 468px;
}
#js-block-03 .photo-02 {
  left: -68px;
  top: 273px;
  opacity: 0;
  -webkit-transform: translate(50px, -50px);
  transform: translate(50px, -50px);
}
#js-block-03 .photo-02.is-active {
  opacity: 1;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transform: translate(0);
  transform: translate(0);
}
.tablet-device #js-block-03 .photo-02 {
  left: -136px;
  top: 546px;
}
.tablet-device #js-block-03 .photo-02 img {
  width: 654px;
}
#js-block-03 .circle-01 {
  left: 10px;
  top: 125px;
  -webkit-transform: scale(0);
  transform: scale(0);
}
#js-block-03 .circle-01.is-active {
  -webkit-animation: scale 9s ease-in-out 1s infinite;
  animation: scale 9s ease-in-out 1s infinite;
}
.tablet-device #js-block-03 .circle-01 {
  left: 20px;
  top: 250px;
}
.tablet-device #js-block-03 .circle-01 img {
  width: 94px;
}
#js-block-03 .circle-02 {
  left: 15px;
  top: 268px;
  -webkit-transform: scale(0);
  transform: scale(0);
}
#js-block-03 .circle-02.is-active {
  -webkit-animation: scale 7s ease-in-out 2s infinite;
  animation: scale 7s ease-in-out 2s infinite;
}
.tablet-device #js-block-03 .circle-02 {
  left: 30px;
  top: 536px;
}
.tablet-device #js-block-03 .circle-02 img {
  width: 114px;
}
#js-block-03 .circle-03 {
  left: 228px;
  top: 331px;
  -webkit-transform: scale(0);
  transform: scale(0);
}
#js-block-03 .circle-03.is-active {
  -webkit-animation: scale 8s ease-in-out 1.5s infinite;
  animation: scale 8s ease-in-out 1.5s infinite;
}
.tablet-device #js-block-03 .circle-03 {
  left: 456px;
  top: 662px;
}
.tablet-device #js-block-03 .circle-03 img {
  width: 248px;
}
#js-block-03 .line-01 {
  left: -94px;
  top: 52px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s ease-out;
}
#js-block-03 .line-01.is-active {
  opacity: 1;
  -webkit-animation: line01 3s ease-in-out;
  animation: line01 3s ease-in-out;
}
.tablet-device #js-block-03 .line-01 {
  left: -188px;
  top: 104px;
}
.tablet-device #js-block-03 .line-01 img {
  width: 316px;
}
#js-block-03 .line-02 {
  left: 48px;
  top: 33px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s ease-out;
}
#js-block-03 .line-02.is-active {
  opacity: 1;
  -webkit-animation: line02 2s ease-in-out;
  animation: line02 2s ease-in-out;
}
.tablet-device #js-block-03 .line-02 {
  left: 96px;
  top: 66px;
}
.tablet-device #js-block-03 .line-02 img {
  width: 838px;
}

@-webkit-keyframes line01 {
  0% {
    width: 0px;
  }

  100% {
    width: 316px;
  }
}

@keyframes line01 {
  0% {
    width: 0px;
  }

  100% {
    width: 316px;
  }
}

@-webkit-keyframes line02 {
  0% {
    width: 0px;
  }

  100% {
    width: 838px;
  }
}

@keyframes line02 {
  0% {
    width: 0px;
  }

  100% {
    width: 838px;
  }
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  20% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  90% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  20% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  90% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

#js-block-02 {
  position: relative;
  height: 518px;
  z-index: 10;
  margin-top: -30px;
}
.tablet-device #js-block-02 {
  height: 1036px;
  margin-top: -60px;
}
#js-block-02 div, #js-block-02 h1, #js-block-02 p {
  position: absolute;
  transition: all 0.8s ease-out;
}
#js-block-02 .bg-01 {
  top: -1px;
  left: -215px;
}
.tablet-device #js-block-02 .bg-01 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-02 .bg-01 img {
  width: 1500px;
}
#js-block-02 .photo-left-01 {
  left: 7px;
  top: 333px;
  opacity: 0;
  -webkit-transform: translate(-30px, -30px);
  -ms-transform: translate(-30px, -30px);
  transform: translate(-30px, -30px);
}
#js-block-02 .photo-left-01.is-active {
  -webkit-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
#js-block-02 .photo-left-01.is-active.js-anim {
  -webkit-animation: fadeA 13s linear infinite;
  animation: fadeA 13s linear infinite;
}
.tablet-device #js-block-02 .photo-left-01 {
  left: 14px;
  top: 666px;
}
.tablet-device #js-block-02 .photo-left-01 img {
  width: 270px;
}
#js-block-02 .photo-left-02 {
  left: 7px;
  top: 333px;
  opacity: 0;
}
#js-block-02 .photo-left-02.is-active {
  -webkit-transition-delay: 1s;
  -ms-transition-delay: 1s;
  transition-delay: 1s;
  opacity: 1;
}
.tablet-device #js-block-02 .photo-left-02 {
  left: 14px;
  top: 666px;
}
.tablet-device #js-block-02 .photo-left-02 img {
  width: 270px;
}
#js-block-02 .photo-center {
  left: 10px;
  top: 21px;
  opacity: 0;
  -webkit-transform: translate(0px, -30px);
  -ms-transform: translate(0px, -30px);
  transform: translate(0px, -30px);
}
#js-block-02 .photo-center.is-active {
  -webkit-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  transition-delay: 0.7s;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
.tablet-device #js-block-02 .photo-center {
  left: 20px;
  top: 42px;
}
.tablet-device #js-block-02 .photo-center img {
  width: 544px;
}
#js-block-02 .photo-right-01 {
  left: 133px;
  top: 345px;
  opacity: 0;
  -webkit-transform: translate(30px, -30px);
  -ms-transform: translate(30px, -30px);
  transform: translate(30px, -30px);
}
#js-block-02 .photo-right-01.is-active {
  -webkit-transition-delay: 1.1s;
  -ms-transition-delay: 1.1s;
  transition-delay: 1.1s;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
#js-block-02 .photo-right-01.is-active.js-anim {
  -webkit-animation: fadeB 20s linear 1s infinite;
  animation: fadeB 20s linear 1s infinite;
}
.tablet-device #js-block-02 .photo-right-01 {
  left: 266px;
  top: 700px;
}
.tablet-device #js-block-02 .photo-right-01 img {
  width: 366px;
}
#js-block-02 .photo-right-02 {
  left: 133px;
  top: 345px;
  opacity: 0;
}
#js-block-02 .photo-right-02.is-active {
  -webkit-transition-delay: 2s;
  -ms-transition-delay: 2s;
  transition-delay: 2s;
  opacity: 1;
}
#js-block-02 .photo-right-02.is-active.js-anim {
  -webkit-animation: fadeB 20s linear 5s infinite;
  animation: fadeB 20s linear 5s infinite;
}
.tablet-device #js-block-02 .photo-right-02 {
  left: 266px;
  top: 700px;
}
.tablet-device #js-block-02 .photo-right-02 img {
  width: 366px;
}
#js-block-02 .photo-right-03 {
  left: 133px;
  top: 345px;
  opacity: 0;
}
#js-block-02 .photo-right-03.is-active {
  -webkit-transition-delay: 2s;
  -ms-transition-delay: 2s;
  transition-delay: 2s;
  opacity: 1;
}
.tablet-device #js-block-02 .photo-right-03 {
  left: 266px;
  top: 700px;
}
.tablet-device #js-block-02 .photo-right-03 img {
  width: 366px;
}

@-webkit-keyframes fadeA {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeA {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeB {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeB {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}