.mod-top-block-01 .text-01 {
  left: 218px;
  top: 74px;
}
.mod-top-block-01 .text-01.is-active {
  top: 104px;
}
.tablet-device .mod-top-block-01 .text-01 {
  left: 436px;
  top: 178px;
}
.tablet-device .mod-top-block-01 .text-01.is-active {
  top: 208px;
}
.tablet-device .mod-top-block-01 .text-01 img {
  width: 168px;
}

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

#js-block-07 {
  position: relative;
  height: 482px;
  z-index: 11;
}
.tablet-device #js-block-07 {
  height: 960px;
  margin-top: -92px;
}
#js-block-07 div, #js-block-07 h1, #js-block-07 p {
  position: absolute;
  transition: all 0.8s ease-out;
}
#js-block-07 .bg-01 {
  top: -1px;
  left: -215px;
}
#js-block-07 .bg-01 img {
  width: 750px;
}
.tablet-device #js-block-07 .bg-01 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-07 .bg-01 img {
  width: 1500px;
}
#js-block-07 .pattern {
  left: -1px;
  top: 145px;
}
#js-block-07 .pattern img {
  width: 93px;
}
body.tablet-device #js-block-07 .pattern {
  left: -2px;
  top: 290px;
}
body.tablet-device #js-block-07 .pattern img {
  width: 186px;
}
#js-block-07 .ttl-main {
  left: 180px;
  top: 361px;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  opacity: 0;
}
#js-block-07 .ttl-main img {
  width: 121px;
}
body.tablet-device #js-block-07 .ttl-main {
  left: 360px;
  top: 722px;
}
body.tablet-device #js-block-07 .ttl-main img {
  width: 242px;
}
#js-block-07 .ttl-main.is-active {
  -webkit-transition-delay: 4.5s;
  transition-delay: 4.5s;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}
#js-block-07 .bg-title {
  left: 167px;
  top: 339px;
  opacity: 0;
}
#js-block-07 .bg-title img {
  width: 154px;
}
body.tablet-device #js-block-07 .bg-title {
  left: 334px;
  top: 678px;
}
body.tablet-device #js-block-07 .bg-title img {
  width: 308px;
}
#js-block-07 .bg-title.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  opacity: 1;
}
#js-block-07 .title-01 {
  left: 180px;
  top: 361px;
  opacity: 0;
}
#js-block-07 .title-01 img {
  width: 121px;
}
body.tablet-device #js-block-07 .title-01 {
  left: 360px;
  top: 722px;
}
body.tablet-device #js-block-07 .title-01 img {
  width: 242px;
}
#js-block-07 .title-01.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 3s both;
  animation: bounceInDown 1s ease-in-out 3s both;
}
#js-block-07 .title-02 {
  left: 180px;
  top: 361px;
  opacity: 0;
}
#js-block-07 .title-02 img {
  width: 121px;
}
body.tablet-device #js-block-07 .title-02 {
  left: 360px;
  top: 722px;
}
body.tablet-device #js-block-07 .title-02 img {
  width: 242px;
}
#js-block-07 .title-02.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 3.5s both;
  animation: bounceInDown 1s ease-in-out 3.5s both;
}
#js-block-07 .score-a {
  left: 18px;
  top: 313px;
  opacity: 0;
}
#js-block-07 .score-a img {
  width: 277px;
}
body.tablet-device #js-block-07 .score-a {
  left: 36px;
  top: 626px;
}
body.tablet-device #js-block-07 .score-a img {
  width: 554px;
}
#js-block-07 .score-a.is-active {
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
  opacity: 1;
}
#js-block-07 .score-b {
  left: 14px;
  top: 146px;
  opacity: 0;
}
#js-block-07 .score-b img {
  width: 22px;
}
body.tablet-device #js-block-07 .score-b {
  left: 28px;
  top: 292px;
}
body.tablet-device #js-block-07 .score-b img {
  width: 44px;
}
#js-block-07 .score-b.is-active {
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
  opacity: 1;
}
#js-block-07 .score-e {
  left: 197px;
  top: 353px;
  opacity: 0;
}
#js-block-07 .score-e img {
  width: 102.5px;
}
body.tablet-device #js-block-07 .score-e {
  left: 394px;
  top: 706px;
}
body.tablet-device #js-block-07 .score-e img {
  width: 205px;
}
#js-block-07 .score-e.is-active {
  -webkit-transition-delay: 4.5s;
  transition-delay: 4.5s;
  opacity: 1;
}
#js-block-07 .capture-01 {
  left: 0px;
  top: 39px;
  opacity: 0;
}
#js-block-07 .capture-01 img {
  width: 124px;
}
body.tablet-device #js-block-07 .capture-01 {
  left: 0px;
  top: 78px;
}
body.tablet-device #js-block-07 .capture-01 img {
  width: 248px;
}
#js-block-07 .capture-01.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 0.3s both;
  animation: bounceInDown 1s ease-in-out 0.3s both;
}
#js-block-07 .capture-02 {
  left: 118px;
  top: 28px;
  opacity: 0;
}
#js-block-07 .capture-02 img {
  width: 110px;
}
body.tablet-device #js-block-07 .capture-02 {
  left: 236px;
  top: 56px;
}
body.tablet-device #js-block-07 .capture-02 img {
  width: 220px;
}
#js-block-07 .capture-02.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 0.6s both;
  animation: bounceInDown 1s ease-in-out 0.6s both;
}
#js-block-07 .capture-03 {
  left: 59px;
  top: 147px;
  opacity: 0;
}
#js-block-07 .capture-03 img {
  width: 259px;
}
body.tablet-device #js-block-07 .capture-03 {
  left: 118px;
  top: 294px;
}
body.tablet-device #js-block-07 .capture-03 img {
  width: 518px;
}
#js-block-07 .capture-03.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 0.9s both;
  animation: bounceInDown 1s ease-in-out 0.9s both;
}
#js-block-07 .capture-04 {
  left: 219px;
  top: 52px;
  opacity: 0;
}
#js-block-07 .capture-04 img {
  width: 63px;
}
body.tablet-device #js-block-07 .capture-04 {
  left: 438px;
  top: 104px;
}
body.tablet-device #js-block-07 .capture-04 img {
  width: 126px;
}
#js-block-07 .capture-04.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 1.2s both;
  animation: bounceInDown 1s ease-in-out 1.2s both;
}
#js-block-07 .capture-05 {
  left: 3px;
  top: 290px;
  opacity: 0;
}
#js-block-07 .capture-05 img {
  width: 94px;
}
body.tablet-device #js-block-07 .capture-05 {
  left: 6px;
  top: 580px;
}
body.tablet-device #js-block-07 .capture-05 img {
  width: 188px;
}
#js-block-07 .capture-05.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 1.5s both;
  animation: bounceInDown 1s ease-in-out 1.5s both;
}
#js-block-07 .capture-06 {
  left: 15px;
  top: 290px;
  opacity: 0;
}
#js-block-07 .capture-06 img {
  width: 146px;
}
body.tablet-device #js-block-07 .capture-06 {
  left: 30px;
  top: 580px;
}
body.tablet-device #js-block-07 .capture-06 img {
  width: 292px;
}
#js-block-07 .capture-06.is-active {
  -webkit-animation: bounceInDown 1s ease-in-out 1.8s both;
  animation: bounceInDown 1s ease-in-out 1.8s both;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-300px);
  }

  60% {
    -webkit-transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }

  60% {
    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#js-block-06 {
  position: relative;
  height: 466px;
  z-index: 10;
}
.tablet-device #js-block-06 {
  height: 960px;
  margin-top: -92px;
}
#js-block-06 div, #js-block-06 h1, #js-block-06 p {
  position: absolute;
  transition: all 0.8s ease-out;
}
#js-block-06 .bg-01 {
  top: -1px;
  left: -215px;
}
#js-block-06 .bg-01 img {
  width: 750px;
}
.tablet-device #js-block-06 .bg-01 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-06 .bg-01 img {
  width: 1500px;
}
#js-block-06 .ttl-main {
  left: 15px;
  top: 39px;
  -webkit-transform: translate(30px, -30px);
  transform: translate(30px, -30px);
  opacity: 0;
}
#js-block-06 .ttl-main img {
  width: 62px;
}
body.tablet-device #js-block-06 .ttl-main {
  left: 30px;
  top: 78px;
}
body.tablet-device #js-block-06 .ttl-main img {
  width: 124px;
}
#js-block-06 .ttl-main.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
#js-block-06 .txt-name-01 {
  left: 37px;
  top: 283px;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  opacity: 0;
}
#js-block-06 .txt-name-01 img {
  width: 235px;
}
body.tablet-device #js-block-06 .txt-name-01 {
  left: 74px;
  top: 566px;
}
body.tablet-device #js-block-06 .txt-name-01 img {
  width: 470px;
}
#js-block-06 .txt-name-01.is-active {
  -webkit-transition-delay: 3s;
  transition-delay: 3s;
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
#js-block-06 .txt-name-02 {
  left: 37px;
  top: 283px;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  opacity: 0;
}
#js-block-06 .txt-name-02 img {
  width: 235px;
}
body.tablet-device #js-block-06 .txt-name-02 {
  left: 74px;
  top: 566px;
}
body.tablet-device #js-block-06 .txt-name-02 img {
  width: 470px;
}
#js-block-06 .txt-name-02.is-active {
  -webkit-transition-delay: 3.5s;
  transition-delay: 3.5s;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
#js-block-06 .photo-01 {
  left: 195px;
  top: 18px;
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
#js-block-06 .photo-01 img {
  width: 144px;
}
body.tablet-device #js-block-06 .photo-01 {
  left: 390px;
  top: 36px;
}
body.tablet-device #js-block-06 .photo-01 img {
  width: 288px;
}
#js-block-06 .photo-01.is-active {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  opacity: 1;
}
#js-block-06 .photo-01.is-active.js-anim {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-filter: blur(0);
  filter: blur(0);
}
#js-block-06 .photo-02 {
  left: 24px;
  top: 87px;
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
#js-block-06 .photo-02 img {
  width: 260px;
}
body.tablet-device #js-block-06 .photo-02 {
  left: 48px;
  top: 174px;
}
body.tablet-device #js-block-06 .photo-02 img {
  width: 520px;
}
#js-block-06 .photo-02.is-active {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  opacity: 1;
}
#js-block-06 .photo-02.is-active.js-anim {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-filter: blur(0);
  filter: blur(0);
}
#js-block-06 .photo-03 {
  left: 171px;
  top: 392px;
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
#js-block-06 .photo-03 img {
  width: 182px;
}
body.tablet-device #js-block-06 .photo-03 {
  left: 342px;
  top: 784px;
}
body.tablet-device #js-block-06 .photo-03 img {
  width: 364px;
}
#js-block-06 .photo-03.is-active {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  opacity: 1;
}
#js-block-06 .photo-03.is-active.js-anim {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
  -webkit-filter: blur(0);
  filter: blur(0);
}
#js-block-06 .photo-04 {
  left: -16px;
  top: 345px;
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
#js-block-06 .photo-04 img {
  width: 109px;
}
body.tablet-device #js-block-06 .photo-04 {
  left: -32px;
  top: 690px;
}
body.tablet-device #js-block-06 .photo-04 img {
  width: 218px;
}
#js-block-06 .photo-04.is-active {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
  opacity: 1;
}
#js-block-06 .photo-04.is-active.js-anim {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
  -webkit-filter: blur(0);
  filter: blur(0);
}
#js-block-06 .photo-05 {
  left: 84px;
  top: 378px;
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
#js-block-06 .photo-05 img {
  width: 135px;
}
body.tablet-device #js-block-06 .photo-05 {
  left: 168px;
  top: 756px;
}
body.tablet-device #js-block-06 .photo-05 img {
  width: 270px;
}
#js-block-06 .photo-05.is-active {
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
  opacity: 1;
}
#js-block-06 .photo-05.is-active.js-anim {
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
  -webkit-filter: blur(0);
  filter: blur(0);
}
#js-block-06 .line-01-01 {
  left: -142px;
  top: 90px;
  width: 177.5px;
  background: url("/sp/hanatsubaki/2015home/img/top/interview02/line_01_01.png") no-repeat left -836px;
  background-size: 177.5px 418px;
  height: 418px;
}
body.tablet-device #js-block-06 .line-01-01 {
  background-size: 355px 836px;
  height: 836px;
}
#js-block-06 .line-01-01.is-active {
  -webkit-animation: lineA 6s ease-in-out 3.5s infinite;
  animation: lineA 6s ease-in-out 3.5s infinite;
}
.tablet-device #js-block-06 .line-01-01 {
  left: -284px;
  top: 180px;
  width: 355px;
}
#js-block-06 .line-01-02 {
  left: -142px;
  top: 90px;
  width: 177.5px;
  opacity: 1;
  background: url("/sp/hanatsubaki/2015home/img/top/interview02/line_01_02.png") no-repeat left -836px;
  background-size: 177.5px 418px;
  height: 418px;
}
body.tablet-device #js-block-06 .line-01-02 {
  background-size: 355px 836px;
  height: 836px;
}
#js-block-06 .line-01-02.is-active {
  -webkit-animation: lineA 6s ease-in-out 5s infinite;
  animation: lineA 6s ease-in-out 5s infinite;
}
.tablet-device #js-block-06 .line-01-02 {
  left: -284px;
  top: 180px;
  width: 355px;
}
#js-block-06 .line-02-01 {
  left: 226px;
  top: 18px;
  width: 90px;
  opacity: 1;
  background: url("/sp/hanatsubaki/2015home/img/top/interview02/line_02_01.png") no-repeat left -922px;
  background-size: 90px 461px;
  height: 461px;
}
body.tablet-device #js-block-06 .line-02-01 {
  background-size: 180px 922px;
  height: 922px;
}
#js-block-06 .line-02-01.is-active {
  -webkit-animation: lineB 6s ease-in-out 3s infinite;
  animation: lineB 6s ease-in-out 3s infinite;
}
.tablet-device #js-block-06 .line-02-01 {
  left: 452px;
  top: 36px;
  width: 180px;
}
#js-block-06 .line-02-02 {
  left: 226px;
  top: 18px;
  width: 90px;
  opacity: 1;
  background: url("/sp/hanatsubaki/2015home/img/top/interview02/line_02_02.png") no-repeat left -922px;
  background-size: 90px 461px;
  height: 461px;
}
body.tablet-device #js-block-06 .line-02-02 {
  background-size: 180px 922px;
  height: 922px;
}
#js-block-06 .line-02-02.is-active {
  -webkit-animation: lineB 6s ease-in-out 4.5s infinite;
  animation: lineB 6s ease-in-out 4.5s infinite;
}
.tablet-device #js-block-06 .line-02-02 {
  left: 452px;
  top: 36px;
  width: 180px;
}
#js-block-06 .line-03-01 {
  left: 353px;
  top: 23px;
  width: 132px;
  opacity: 1;
  background: url("/sp/hanatsubaki/2015home/img/top/interview02/line_03_01.png") no-repeat left -499px;
  background-size: 132px 249.5px;
  height: 249.5px;
}
body.tablet-device #js-block-06 .line-03-01 {
  background-size: 264px 499px;
  height: 499px;
}
#js-block-06 .line-03-01.is-active {
  -webkit-animation: lineC 6s ease-in-out 4s infinite;
  animation: lineC 6s ease-in-out 4s infinite;
}
.tablet-device #js-block-06 .line-03-01 {
  left: 706px;
  top: 46px;
  width: 264px;
}
#js-block-06 .line-03-02 {
  left: 353px;
  top: 23px;
  width: 132px;
  opacity: 1;
  background: url("/sp/hanatsubaki/2015home/img/top/interview02/line_03_02.png") no-repeat left -499px;
  background-size: 132px 249.5px;
  height: 249.5px;
}
body.tablet-device #js-block-06 .line-03-02 {
  background-size: 264px 499px;
  height: 499px;
}
#js-block-06 .line-03-02.is-active {
  -webkit-animation: lineC 6s ease-in-out 5.5s infinite;
  animation: lineC 6s ease-in-out 5.5s infinite;
}
.tablet-device #js-block-06 .line-03-02 {
  left: 706px;
  top: 46px;
  width: 264px;
}

@-webkit-keyframes lineA {
  0% {
    background-position: left -836px;
    opacity: 0;
  }

  12% {
    background-position: left 0;
    opacity: 0.2;
  }

  60% {
    background-position: left 0;
    opacity: 1;
  }

  90% {
    background-position: left 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes lineA {
  0% {
    background-position: left -836px;
    opacity: 0;
  }

  12% {
    background-position: left 0;
    opacity: 0.2;
  }

  60% {
    background-position: left 0;
    opacity: 1;
  }

  90% {
    background-position: left 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes lineB {
  0% {
    background-position: left -922px;
    opacity: 0;
  }

  12% {
    background-position: left 0;
    opacity: 0.2;
  }

  60% {
    background-position: left 0;
    opacity: 1;
  }

  90% {
    background-position: left 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes lineB {
  0% {
    background-position: left -922px;
    opacity: 0;
  }

  12% {
    background-position: left 0;
    opacity: 0.2;
  }

  60% {
    background-position: left 0;
    opacity: 1;
  }

  90% {
    background-position: left 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes lineC {
  0% {
    background-position: left -499px;
    opacity: 0;
  }

  12% {
    background-position: left 0;
    opacity: 0.2;
  }

  60% {
    background-position: left 0;
    opacity: 1;
  }

  90% {
    background-position: left 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes lineC {
  0% {
    background-position: left -499px;
    opacity: 0;
  }

  12% {
    background-position: left 0;
    opacity: 0.2;
  }

  60% {
    background-position: left 0;
    opacity: 1;
  }

  90% {
    background-position: left 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blur02 {
  0% {
    -webkit-filter: blur(10px);
  }

  100% {
    -webkit-filter: blur(0);
  }
}

@keyframes blur02 {
  0% {
    -ms-filter: blur(10px);
    filter: blur(10px);
  }

  100% {
    -ms-filter: blur(0);
    filter: blur(0);
  }
}

#js-block-05 {
  position: relative;
  height: 480px;
  z-index: 9;
}
.tablet-device #js-block-05 {
  height: 960px;
  margin-top: -92px;
}
#js-block-05 div, #js-block-05 h1, #js-block-05 p {
  position: absolute;
  transition: all 0.8s ease-out;
}
#js-block-05 .bg-01 {
  top: -1px;
  left: -215px;
}
.tablet-device #js-block-05 .bg-01 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-05 .bg-01 img {
  width: 1500px;
}
#js-block-05 .bg-02 {
  top: -1px;
  left: -215px;
  opacity: 0;
}
#js-block-05 .bg-02.is-active.js-anim {
  -webkit-animation: fadeBG 7.2s ease-in-out 3.6s infinite;
  animation: fadeBG 7.2s ease-in-out 3.6s infinite;
}
.tablet-device #js-block-05 .bg-02 {
  top: -2px;
  left: -430px;
}
.tablet-device #js-block-05 .bg-02 img {
  width: 1500px;
}
#js-block-05 .ttl-main-01 {
  left: 119px;
  top: 299px;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
}
#js-block-05 .ttl-main-01 img {
  width: 109px;
}
body.tablet-device #js-block-05 .ttl-main-01 {
  left: 238px;
  top: 598px;
}
body.tablet-device #js-block-05 .ttl-main-01 img {
  width: 218px;
}
#js-block-05 .ttl-main-01.is-active {
  -webkit-transition-delay: 3.6s;
  transition-delay: 3.6s;
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
#js-block-05 .ttl-main-02 {
  left: 165px;
  top: 105px;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
}
#js-block-05 .ttl-main-02 img {
  width: 53px;
}
body.tablet-device #js-block-05 .ttl-main-02 {
  left: 330px;
  top: 210px;
}
body.tablet-device #js-block-05 .ttl-main-02 img {
  width: 106px;
}
#js-block-05 .ttl-main-02.is-active {
  -webkit-transition-delay: 3.2s;
  transition-delay: 3.2s;
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
#js-block-05 .jacket-01, #js-block-05 .jacket-02, #js-block-05 .jacket-03, #js-block-05 .jacket-04, #js-block-05 .jacket-05, #js-block-05 .jacket-06, #js-block-05 .jacket-07, #js-block-05 .jacket-08, #js-block-05 .jacket-09 {
  -webkit-transform: translate(-50px, -200px) rotate(5deg);
  transform: translate(-50px, -200px) rotate(5deg);
  opacity: 0;
}
#js-block-05 .jacket-01.is-active, #js-block-05 .jacket-02.is-active, #js-block-05 .jacket-03.is-active, #js-block-05 .jacket-04.is-active, #js-block-05 .jacket-05.is-active, #js-block-05 .jacket-06.is-active, #js-block-05 .jacket-07.is-active, #js-block-05 .jacket-08.is-active, #js-block-05 .jacket-09.is-active {
  opacity: 1;
  -webkit-transform: translate(0, 0) rotate(0);
  transform: translate(0, 0) rotate(0);
}
#js-block-05 .jacket-01 {
  left: -18px;
  top: 30px;
}
#js-block-05 .jacket-01 img {
  width: 171px;
}
body.tablet-device #js-block-05 .jacket-01 {
  left: -36px;
  top: 60px;
}
body.tablet-device #js-block-05 .jacket-01 img {
  width: 342px;
}
#js-block-05 .jacket-01.is-active {
  -webkit-transition-delay: 2.7s;
  transition-delay: 2.7s;
  opacity: 1;
}
#js-block-05 .jacket-01.is-active.js-anim {
  -webkit-animation: fadeJC 12s ease-in-out infinite;
  animation: fadeJC 12s ease-in-out infinite;
}
#js-block-05 .bg-jacket-01 {
  left: -18px;
  top: 30px;
  opacity: 0;
}
#js-block-05 .bg-jacket-01 img {
  width: 171px;
}
body.tablet-device #js-block-05 .bg-jacket-01 {
  left: -36px;
  top: 60px;
}
body.tablet-device #js-block-05 .bg-jacket-01 img {
  width: 342px;
}
#js-block-05 .bg-jacket-01.is-active.js-anim {
  -webkit-animation: fadeJCBG 12s ease-in-out infinite;
  animation: fadeJCBG 12s ease-in-out infinite;
}
#js-block-05 .jacket-02 {
  left: 198px;
  top: 32px;
}
#js-block-05 .jacket-02 img {
  width: 144px;
}
body.tablet-device #js-block-05 .jacket-02 {
  left: 396px;
  top: 64px;
}
body.tablet-device #js-block-05 .jacket-02 img {
  width: 288px;
}
#js-block-05 .jacket-02.is-active {
  -webkit-transition-delay: 2.4s;
  transition-delay: 2.4s;
}
#js-block-05 .jacket-03 {
  left: 231px;
  top: 136px;
}
#js-block-05 .jacket-03 img {
  width: 138px;
}
body.tablet-device #js-block-05 .jacket-03 {
  left: 462px;
  top: 272px;
}
body.tablet-device #js-block-05 .jacket-03 img {
  width: 276px;
}
#js-block-05 .jacket-03.is-active {
  -webkit-transition-delay: 2.1s;
  transition-delay: 2.1s;
  opacity: 1;
}
#js-block-05 .jacket-03.is-active.js-anim {
  -webkit-animation: fadeJC 12s ease-in-out 1s infinite;
  animation: fadeJC 12s ease-in-out 1s infinite;
}
#js-block-05 .bg-jacket-03 {
  left: 231px;
  top: 136px;
  opacity: 0;
}
#js-block-05 .bg-jacket-03 img {
  width: 138px;
}
body.tablet-device #js-block-05 .bg-jacket-03 {
  left: 462px;
  top: 272px;
}
body.tablet-device #js-block-05 .bg-jacket-03 img {
  width: 276px;
}
#js-block-05 .bg-jacket-03.is-active.js-anim {
  -webkit-animation: fadeJCBG 12s ease-in-out 1s infinite;
  animation: fadeJCBG 12s ease-in-out 1s infinite;
}
#js-block-05 .jacket-04 {
  left: 49px;
  top: 184px;
}
#js-block-05 .jacket-04 img {
  width: 104px;
}
body.tablet-device #js-block-05 .jacket-04 {
  left: 98px;
  top: 368px;
}
body.tablet-device #js-block-05 .jacket-04 img {
  width: 208px;
}
#js-block-05 .jacket-04.is-active {
  -webkit-transition-delay: 1.8s;
  transition-delay: 1.8s;
}
#js-block-05 .jacket-05 {
  left: 282px;
  top: 249px;
}
#js-block-05 .jacket-05 img {
  width: 71px;
}
body.tablet-device #js-block-05 .jacket-05 {
  left: 564px;
  top: 498px;
}
body.tablet-device #js-block-05 .jacket-05 img {
  width: 142px;
}
#js-block-05 .jacket-05.is-active {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
#js-block-05 .jacket-06 {
  left: 227px;
  top: 315px;
}
#js-block-05 .jacket-06 img {
  width: 114px;
}
body.tablet-device #js-block-05 .jacket-06 {
  left: 454px;
  top: 630px;
}
body.tablet-device #js-block-05 .jacket-06 img {
  width: 228px;
}
#js-block-05 .jacket-06.is-active {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}
#js-block-05 .jacket-07 {
  left: -20px;
  top: 268px;
}
#js-block-05 .jacket-07 img {
  width: 170px;
}
body.tablet-device #js-block-05 .jacket-07 {
  left: -40px;
  top: 536px;
}
body.tablet-device #js-block-05 .jacket-07 img {
  width: 340px;
}
#js-block-05 .jacket-07.is-active {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
  opacity: 1;
}
#js-block-05 .jacket-07.is-active.js-anim {
  -webkit-animation: fadeJC 12s ease-in-out 2s infinite;
  animation: fadeJC 12s ease-in-out 2s infinite;
}
#js-block-05 .bg-jacket-07 {
  left: -20px;
  top: 268px;
  opacity: 0;
}
#js-block-05 .bg-jacket-07 img {
  width: 170px;
}
body.tablet-device #js-block-05 .bg-jacket-07 {
  left: -40px;
  top: 536px;
}
body.tablet-device #js-block-05 .bg-jacket-07 img {
  width: 340px;
}
#js-block-05 .bg-jacket-07.is-active.js-anim {
  -webkit-animation: fadeJCBG 12s ease-in-out 2s infinite;
  animation: fadeJCBG 12s ease-in-out 2s infinite;
}
#js-block-05 .jacket-08 {
  left: 254px;
  top: 407px;
}
#js-block-05 .jacket-08 img {
  width: 81px;
}
body.tablet-device #js-block-05 .jacket-08 {
  left: 508px;
  top: 814px;
}
body.tablet-device #js-block-05 .jacket-08 img {
  width: 162px;
}
#js-block-05 .jacket-08.is-active {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
#js-block-05 .jacket-09 {
  left: -21px;
  top: 407px;
}
#js-block-05 .jacket-09 img {
  width: 123px;
}
body.tablet-device #js-block-05 .jacket-09 {
  left: -42px;
  top: 814px;
}
body.tablet-device #js-block-05 .jacket-09 img {
  width: 246px;
}
#js-block-05 .jacket-09.is-active {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

@-webkit-keyframes fadeBG {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeBG {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  35% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

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

  45% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  45% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeJCBG {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeJCBG {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#js-block-04 {
  position: relative;
  height: 496px;
  z-index: 10;
}
.tablet-device #js-block-04 {
  height: 992px;
}
#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 {
  left: 135px;
  top: 86px;
  opacity: 0;
}
#js-block-04 .ttl-main img {
  width: 168px;
}
body.tablet-device #js-block-04 .ttl-main {
  left: 270px;
  top: 172px;
}
body.tablet-device #js-block-04 .ttl-main img {
  width: 336px;
}
#js-block-04 .ttl-main.is-active {
  -webkit-transition-delay: 5.5s;
  transition-delay: 5.5s;
  opacity: 1;
}
#js-block-04 .circle-01 {
  left: -33px;
  top: 177px;
}
#js-block-04 .circle-01 img {
  width: 264px;
}
body.tablet-device #js-block-04 .circle-01 {
  left: -66px;
  top: 354px;
}
body.tablet-device #js-block-04 .circle-01 img {
  width: 528px;
}
#js-block-04 .circle-01 img {
  opacity: 0;
  transition: all 0.8s ease-out;
}
#js-block-04 .circle-01.is-active {
  -webkit-animation: wobble 7s ease-in-out 0s 1;
  animation: wobble 7s ease-in-out 0s 1;
  transform-origin: center -20px 0;
}
#js-block-04 .circle-01.is-active img {
  opacity: 1;
}
#js-block-04 .circle-01.js-anim {
  -webkit-animation: pendulumC 12s ease-in-out 8s infinite;
  animation: pendulumC 12s ease-in-out 8s infinite;
}
#js-block-04 .circle-02 {
  left: 173px;
  top: 352px;
}
#js-block-04 .circle-02 img {
  width: 172px;
}
body.tablet-device #js-block-04 .circle-02 {
  left: 346px;
  top: 704px;
}
body.tablet-device #js-block-04 .circle-02 img {
  width: 344px;
}
#js-block-04 .circle-02 img {
  opacity: 0;
  transition: all 0.8s ease-out 0.5s;
}
#js-block-04 .circle-02.is-active {
  -webkit-animation: wobble 6s ease-in-out 0.5s 1;
  animation: wobble 6s ease-in-out 0.5s 1;
  transform-origin: center -20px 0;
}
#js-block-04 .circle-02.is-active img {
  opacity: 1;
}
#js-block-04 .circle-02.js-anim {
  -webkit-animation: pendulumA 10s ease-in-out infinite;
  animation: pendulumA 10s ease-in-out infinite;
}
#js-block-04 .circle-03 {
  left: 212px;
  top: 189px;
}
#js-block-04 .circle-03 img {
  width: 114px;
}
body.tablet-device #js-block-04 .circle-03 {
  left: 424px;
  top: 378px;
}
body.tablet-device #js-block-04 .circle-03 img {
  width: 228px;
}
#js-block-04 .circle-03 img {
  opacity: 0;
  transition: all 0.8s ease-out 1s;
}
#js-block-04 .circle-03.is-active {
  -webkit-animation: wobble 5s ease-in-out 1s 1;
  animation: wobble 5s ease-in-out 1s 1;
  transform-origin: center -20px 0;
}
#js-block-04 .circle-03.is-active img {
  opacity: 1;
}
#js-block-04 .circle-03.js-anim {
  -webkit-animation: pendulumB 10s ease-in-out 4s infinite;
  animation: pendulumB 10s ease-in-out 4s infinite;
}
#js-block-04 .circle-04 {
  left: 9px;
  top: 47px;
}
#js-block-04 .circle-04 img {
  width: 115px;
}
body.tablet-device #js-block-04 .circle-04 {
  left: 18px;
  top: 94px;
}
body.tablet-device #js-block-04 .circle-04 img {
  width: 230px;
}
#js-block-04 .circle-04 img {
  opacity: 0;
  transition: all 0.8s ease-out 1.5s;
}
#js-block-04 .circle-04.is-active {
  -webkit-animation: wobble 5s ease-in-out 1.5s 1;
  animation: wobble 5s ease-in-out 1.5s 1;
  transform-origin: center -20px 0;
}
#js-block-04 .circle-04.is-active img {
  opacity: 1;
}
#js-block-04 .car-01 {
  left: 0px;
  top: 421px;
  -webkit-transform: translateX(-200px) scale(0);
  -ms-transform: translateX(-200px) scale(0);
  transform: translateX(-200px) scale(0);
}
#js-block-04 .car-01 img {
  width: 140px;
}
body.tablet-device #js-block-04 .car-01 {
  left: 0px;
  top: 842px;
}
body.tablet-device #js-block-04 .car-01 img {
  width: 280px;
}
#js-block-04 .car-01.is-active {
  -webkit-transition-delay: 4s;
  transition-delay: 4s;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
}
#js-block-04 .house-01 {
  left: 135px;
  top: 86px;
  opacity: 0;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
}
#js-block-04 .house-01 img {
  width: 168px;
}
body.tablet-device #js-block-04 .house-01 {
  left: 270px;
  top: 172px;
}
body.tablet-device #js-block-04 .house-01 img {
  width: 336px;
}
#js-block-04 .house-01.is-active {
  -webkit-transition-delay: 4s;
  transition-delay: 4s;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
#js-block-04 .house-02 {
  left: 135px;
  top: 86px;
  opacity: 0;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
}
#js-block-04 .house-02 img {
  width: 168px;
}
body.tablet-device #js-block-04 .house-02 {
  left: 270px;
  top: 172px;
}
body.tablet-device #js-block-04 .house-02 img {
  width: 336px;
}
#js-block-04 .house-02.is-active {
  -webkit-transition-delay: 4.3s;
  transition-delay: 4.3s;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
#js-block-04 .house-03 {
  left: 135px;
  top: 86px;
  opacity: 0;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
}
#js-block-04 .house-03 img {
  width: 168px;
}
body.tablet-device #js-block-04 .house-03 {
  left: 270px;
  top: 172px;
}
body.tablet-device #js-block-04 .house-03 img {
  width: 336px;
}
#js-block-04 .house-03.is-active {
  -webkit-transition-delay: 4.6s;
  transition-delay: 4.6s;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
#js-block-04 .house-04 {
  left: 135px;
  top: 86px;
  opacity: 0;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
}
#js-block-04 .house-04 img {
  width: 168px;
}
body.tablet-device #js-block-04 .house-04 {
  left: 270px;
  top: 172px;
}
body.tablet-device #js-block-04 .house-04 img {
  width: 336px;
}
#js-block-04 .house-04.is-active {
  -webkit-transition-delay: 4.9s;
  transition-delay: 4.9s;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
#js-block-04 .house-05 {
  left: 135px;
  top: 86px;
  opacity: 0;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
}
#js-block-04 .house-05 img {
  width: 168px;
}
body.tablet-device #js-block-04 .house-05 {
  left: 270px;
  top: 172px;
}
body.tablet-device #js-block-04 .house-05 img {
  width: 336px;
}
#js-block-04 .house-05.is-active {
  -webkit-transition-delay: 5.2s;
  transition-delay: 5.2s;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translate(15%, 0) rotate(-10deg);
  }

  25% {
    -webkit-transform: translate(-15%, 0) rotate(8deg);
  }

  50% {
    -webkit-transform: translate(10%, 0) rotate(-5deg);
  }

  75% {
    -webkit-transform: translate(-5%, 0) rotate(3deg);
  }

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

@keyframes wobble {
  0% {
    transform: translate(15%, 0) rotate(-10deg);
  }

  25% {
    transform: translate(-15%, 0) rotate(8deg);
  }

  50% {
    transform: translate(10%, 0) rotate(-5deg);
  }

  75% {
    transform: translate(-5%, 0) rotate(3deg);
  }

  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}

@-webkit-keyframes pendulumA {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(-10%, 0) rotate(8deg);
  }

  40% {
    -webkit-transform: translate(14%, 0) rotate(-5deg);
  }

  60% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }

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

@-webkit-keyframes pendulumB {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(8%, 0) rotate(-8deg);
  }

  40% {
    -webkit-transform: translate(-14%, 0) rotate(5deg);
  }

  60% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }

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

@-webkit-keyframes pendulumC {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }

  15% {
    -webkit-transform: translate(-4%, 0) rotate(6deg);
  }

  30% {
    -webkit-transform: translate(1%, 0) rotate(-2deg);
  }

  50% {
    -webkit-transform: translate(0, 0) rotate(0deg);
  }

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

@keyframes pendulumA {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-8%, 0) rotate(8deg);
  }

  40% {
    transform: translate(14%, 0) rotate(-5deg);
  }

  60% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes pendulumB {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(10%, 0) rotate(-8deg);
  }

  40% {
    transform: translate(-14%, 0) rotate(5deg);
  }

  60% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes pendulumC {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  15% {
    transform: translate(-4%, 0) rotate(6deg);
  }

  30% {
    transform: translate(1%, 0) rotate(-2deg);
  }

  50% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

#js-block-03 {
  position: relative;
  height: 509px;
  z-index: 10;
  margin-top: -17px;
}
.tablet-device #js-block-03 {
  height: 978px;
  margin-top: -34px;
}
#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: 30px;
  top: 260px;
  -webkit-transform: translate(-30px, -30px);
  transform: translate(-30px, -30px);
  opacity: 0;
}
#js-block-03 .ttl-main img {
  width: 214px;
}
body.tablet-device #js-block-03 .ttl-main {
  left: 60px;
  top: 520px;
}
body.tablet-device #js-block-03 .ttl-main img {
  width: 428px;
}
#js-block-03 .ttl-main.is-active {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
#js-block-03 .txt-name {
  left: 173px;
  top: 307px;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  opacity: 0;
}
#js-block-03 .txt-name img {
  width: 110px;
}
body.tablet-device #js-block-03 .txt-name {
  left: 346px;
  top: 614px;
}
body.tablet-device #js-block-03 .txt-name img {
  width: 220px;
}
#js-block-03 .txt-name.is-active {
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
#js-block-03 .photo-01 {
  left: 29px;
  top: 41px;
  opacity: 0;
}
#js-block-03 .photo-01 img {
  width: 319px;
}
body.tablet-device #js-block-03 .photo-01 {
  left: 58px;
  top: 82px;
}
body.tablet-device #js-block-03 .photo-01 img {
  width: 638px;
}
#js-block-03 .photo-01.is-active {
  opacity: 1;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
#js-block-03 .light-01 {
  left: 92px;
  top: 12px;
  width: 265px;
  height: 194px;
  overflow: hidden;
  opacity: 0;
}
#js-block-03 .light-01 img {
  width: 265px;
}
body.tablet-device #js-block-03 .light-01 {
  left: 184px;
  top: 24px;
}
body.tablet-device #js-block-03 .light-01 img {
  width: 530px;
}
#js-block-03 .light-01.is-active {
  -webkit-animation: line01 6s ease-in-out 2s infinite;
  animation: line01 6s ease-in-out 2s infinite;
}
.tablet-device #js-block-03 .light-01 {
  width: 530px;
  height: 388px;
}
#js-block-03 .light-02 {
  left: -215px;
  top: 269px;
  width: 419px;
  height: 171px;
  overflow: hidden;
  opacity: 0;
}
#js-block-03 .light-02 img {
  width: 419px;
}
body.tablet-device #js-block-03 .light-02 {
  left: -430px;
  top: 538px;
}
body.tablet-device #js-block-03 .light-02 img {
  width: 838px;
}
#js-block-03 .light-02.is-active {
  -webkit-animation: line02 6s ease-in-out 2s infinite;
  animation: line02 6s ease-in-out 2s infinite;
}
.tablet-device #js-block-03 .light-02 {
  width: 838px;
  height: 342px;
}
#js-block-03 .light-03 {
  left: 64px;
  top: 135px;
  width: 265px;
  height: 333px;
  overflow: hidden;
  opacity: 0;
}
#js-block-03 .light-03 img {
  width: 265px;
}
body.tablet-device #js-block-03 .light-03 {
  left: 128px;
  top: 270px;
}
body.tablet-device #js-block-03 .light-03 img {
  width: 530px;
}
#js-block-03 .light-03.is-active {
  -webkit-animation: line03 6s ease-in-out 2s infinite;
  animation: line03 6s ease-in-out 2s infinite;
}
.tablet-device #js-block-03 .light-03 {
  width: 530px;
  height: 666px;
}

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

  15% {
    width: 0px;
    opacity: 1;
  }

  40% {
    width: 530px;
    opacity: 1;
  }

  80% {
    width: 530px;
    opacity: 1;
  }

  100% {
    width: 530px;
    opacity: 0;
  }
}

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

  15% {
    width: 0px;
    opacity: 1;
  }

  40% {
    width: 530px;
    opacity: 1;
  }

  80% {
    width: 530px;
    opacity: 1;
  }

  100% {
    width: 530px;
    opacity: 0;
  }
}

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

  20% {
    width: 0px;
    opacity: 1;
  }

  45% {
    width: 838px;
    opacity: 1;
  }

  80% {
    width: 838px;
    opacity: 1;
  }

  100% {
    width: 838px;
    opacity: 0;
  }
}

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

  20% {
    width: 0px;
    opacity: 1;
  }

  45% {
    width: 838px;
    opacity: 1;
  }

  80% {
    width: 838px;
    opacity: 1;
  }

  100% {
    width: 838px;
    opacity: 0;
  }
}

@-webkit-keyframes line03 {
  0% {
    height: 0px;
    opacity: 0;
  }

  5% {
    height: 0px;
    opacity: 1;
  }

  35% {
    height: 666px;
    opacity: 1;
  }

  80% {
    height: 666px;
    opacity: 1;
  }

  100% {
    height: 666px;
    opacity: 0;
  }
}

@keyframes line03 {
  0% {
    height: 0px;
    opacity: 0;
  }

  5% {
    height: 0px;
    opacity: 1;
  }

  35% {
    height: 666px;
    opacity: 1;
  }

  80% {
    height: 666px;
    opacity: 1;
  }

  100% {
    height: 666px;
    opacity: 0;
  }
}

#js-block-02 {
  position: relative;
  height: 528px;
  z-index: 8;
  margin-top: -30px;
}
.tablet-device #js-block-02 {
  height: 1056px;
  margin-top: -60px;
}
#js-block-02 div, #js-block-02 h1, #js-block-02 p {
  position: absolute;
}
#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 .ttl-main-01, #js-block-02 .ttl-main-02 {
  width: 218px;
  height: 162px;
}
.tablet-device #js-block-02 .ttl-main-01, .tablet-device #js-block-02 .ttl-main-02 {
  width: 436px;
  height: 324px;
}
#js-block-02 .ttl-main-01 img, #js-block-02 .ttl-main-02 img {
  position: absolute;
}
#js-block-02 .ttl-main-01 img.ttl-01, #js-block-02 .ttl-main-02 img.ttl-01 {
  left: 0px;
  top: 0px;
}
.tablet-device #js-block-02 .ttl-main-01 img.ttl-01, .tablet-device #js-block-02 .ttl-main-02 img.ttl-01 {
  left: 0px;
  top: 0px;
  width: 202px;
}
#js-block-02 .ttl-main-01 img.ttl-02, #js-block-02 .ttl-main-02 img.ttl-02 {
  left: 59px;
  top: 42px;
  -webkit-animation: blur 5s linear infinite;
  animation: blur 5s linear infinite;
}
.tablet-device #js-block-02 .ttl-main-01 img.ttl-02, .tablet-device #js-block-02 .ttl-main-02 img.ttl-02 {
  left: 118px;
  top: 84px;
  width: 318px;
}
#js-block-02 .ttl-main-01 img.ttl-03, #js-block-02 .ttl-main-02 img.ttl-03 {
  left: 30px;
  top: 95px;
}
.tablet-device #js-block-02 .ttl-main-01 img.ttl-03, .tablet-device #js-block-02 .ttl-main-02 img.ttl-03 {
  left: 60px;
  top: 190px;
  width: 192px;
}
#js-block-02 .ttl-main-01 img.ttl-04, #js-block-02 .ttl-main-02 img.ttl-04 {
  right: 0px;
  bottom: 0px;
}
.tablet-device #js-block-02 .ttl-main-01 img.ttl-04, .tablet-device #js-block-02 .ttl-main-02 img.ttl-04 {
  right: 0px;
  bottom: 0px;
  width: 204px;
}
#js-block-02 .ttl-main-01 {
  left: 82px;
  top: 178px;
}
.tablet-device #js-block-02 .ttl-main-01 {
  left: 164px;
  top: 356px;
}
#js-block-02 .ttl-main-02 {
  left: 85px;
  top: 285px;
  opacity: 0;
}
#js-block-02 .ttl-main-02.is-active {
  -webkit-animation: fadeB 24s linear 12s infinite;
  animation: fadeB 24s linear 12s infinite;
}
.tablet-device #js-block-02 .ttl-main-02 {
  left: 170px;
  top: 570px;
}
#js-block-02 .photo-02, #js-block-02 .photo-03, #js-block-02 .photo-04 {
  top: -1px;
  left: -215px;
  width: 750px;
  opacity: 0;
}
.tablet-device #js-block-02 .photo-02, .tablet-device #js-block-02 .photo-03, .tablet-device #js-block-02 .photo-04 {
  top: -2px;
  left: -430px;
  width: 1500px;
}
#js-block-02 .photo-02 {
  background: url("/sp/hanatsubaki/2015home/img/top/special01/photo_02.jpg") no-repeat center top;
  background-size: 750px 529px;
  height: 529px;
}
body.tablet-device #js-block-02 .photo-02 {
  background-size: 1500px 1058px;
  height: 1058px;
}
#js-block-02 .photo-02.is-active {
  -webkit-animation: fadeA 24s linear 6s infinite;
  animation: fadeA 24s linear 6s infinite;
}
#js-block-02 .photo-03 {
  background: url("/sp/hanatsubaki/2015home/img/top/special01/photo_03.jpg") no-repeat center top;
  background-size: 750px 529px;
  height: 529px;
}
body.tablet-device #js-block-02 .photo-03 {
  background-size: 1500px 1058px;
  height: 1058px;
}
#js-block-02 .photo-03.is-active {
  -webkit-animation: fadeA 24s linear 12s infinite;
  animation: fadeA 24s linear 12s infinite;
}
#js-block-02 .photo-04 {
  background: url("/sp/hanatsubaki/2015home/img/top/special01/photo_04.jpg") no-repeat center top;
  background-size: 750px 529px;
  height: 529px;
}
body.tablet-device #js-block-02 .photo-04 {
  background-size: 1500px 1058px;
  height: 1058px;
}
#js-block-02 .photo-04.is-active {
  -webkit-animation: fadeA 24s linear 18s infinite;
  animation: fadeA 24s linear 18s infinite;
}

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

  10% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  35% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

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

  10% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  35% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

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

  5% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  55% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

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

  5% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  55% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  20% {
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }

  60% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes blur {
  0% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  20% {
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }

  60% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}