@charset "utf-8";

/**
 *
 *  STT Hawaii
 *
 */

/*--------------------------------------------------------------------------
	overwrite スタイルの上書き
--------------------------------------------------------------------------*/
.timelines_link__hdg {
  border: 2px solid #ffb400;
}

/*----------------------------------------------------------------------
	.kv
----------------------------------------------------------------------*/
.kv::before {
  background-image: url(../images/kv_bg_pc.jpg);
  opacity: 0.15;
}

.kv .inner::before,
.kv .inner::after {
  position: absolute;
  background: no-repeat center / contain;
  content: '';
}

.kv .inner::before {
  top: -26px;
  left: -49px;
  width: 135px;
  height: 169px;
  background-image: url(../images/kv_deco01.png);
}

.kv .inner::after {
  bottom: -20px;
  right: -45px;
  width: 137px;
  height: 114px;
  background-image: url(../images/kv_deco02.png);
}

/* @SP */
@media all and (max-width: 767px) {
  .kv::before {
    background-image: url(../images/kv_bg_sp.jpg);
  }

  .kv .inner::before {
    top: -64px;
    left: -13px;
    width: 99px;
    height: 124px;
  }

  .kv .inner::after {
    bottom: -41px;
    right: -42px;
    width: 99px;
    height: 82px;
  }
}

/*----------------------------------------------------------------------
	.timeline
----------------------------------------------------------------------*/
/* sec01 */
.timeline__sec01 {
  background-image: url(../images/sec01_bg_pc.jpg);
}

.article01 {
  top: 97px;
  right: 84px;
}

.article01.active {
  -webkit-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg);
  opacity: 1;
}

.article01 .days {
  position: absolute;
  top: -24px;
  right: -38px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article01.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.article02 {
  top: 312px;
  left: 7px;
  -webkit-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 5;
}

.article02.active {
  -webkit-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  opacity: 1;
}

.article02 .days {
  position: absolute;
  top: -19px;
  right: -44px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article02.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.timeline__sec01 .paper01 {
  top: 13px;
  left: -233px;
  z-index: 2;
}

.timeline__sec01 .paper02 {
  top: 131px;
  right: -205px;
  z-index: 0;
}

.timeline__sec01 .paper03 {
  top: 463px;
  left: 334px;
  z-index: 2;
}

.timeline__sec01 .people01 {
  top: 227px;
  left: -106px;
  z-index: 3;
}

.timeline__sec01 .people02 {
  top: 344px;
  right: -111px;
  z-index: 0;
}

.timeline__sec01 .plane {
  top: -107px;
  left: -4px;
}

.timeline__sec01 .obj01 {
  top: 331px;
  left: -215px;
  z-index: 4;
}

.timeline__sec01 .obj02 {
  top: 382px;
  right: -170px;
}

.timeline__sec01 .obj03 {
  bottom: 28px;
  left: 238px;
  z-index: 3;
}

/* @SP */
@media all and (max-width: 767px) {
  .timeline__sec01 {
    height: 616px;
    background-image: url(../images/sec01_bg_sp.jpg);
  }

  .article01 {
    top: 24px;
    right: 51px;
  }

  .article01 .days {
    top: -16px;
    right: -21px;
    width: 83px;
  }

  .article01 .article__img::before {
    content: none;
  }

  .article02 {
    top: 309px;
    left: 22px;
  }

  .article02.active {
    transform: rotate(4deg);
  }

  .article02 .days {
    top: -18px;
    right: -18px;
    width: 82px;
  }

  .timeline__sec01 .paper01 {
    top: 49px;
    left: 207px;
    width: 219px;
  }

  .timeline__sec01 .paper02 {
    top: 164px;
    left: -54px;
    width: 207px;
  }

  .timeline__sec01 .paper03 {
    top: 243px;
    left: 259px;
    width: 137px;
  }

  .timeline__sec01 .plane {
    top: -68px;
    left: -63px;
    width: 187px;
  }

  .timeline__sec01 .people01 {
    top: 85px;
    left: 73px;
    width: 47px;
  }

  .timeline__sec01 .people02 {
    top: 415px;
    left: 235px;
    width: 46px;
  }

  .timeline__sec01 .people03 {
    top: -49px;
    left: 37px;
    width: 75px;
  }

  .timeline__sec01 .obj01 {
    top: -14px;
    left: -90px;
    width: 522px;
  }

  .timeline__sec01 .obj02 {
    top: 122px;
    left: auto;
    right: -69px;
    width: 230px;
    z-index: 2;
  }

  .timeline__sec01 .obj03 {
    top: 308px;
    bottom: auto;
    left: 122px;
    width: 51px;
  }

  .timeline__sec01 .obj04 {
    top: 365px;
    right: -40px;
    width: 103px;
    z-index: 2;
  }
}

/* @smallSP */
@media all and (max-width: 374px) {
  .article01 {
    right: 31px;
  }

  .article02 {
    left: 30px;
  }
}

/* sec02 */
.timeline__sec02 {
  height: 797px;
  background-image: url(../images/sec02_bg_pc.jpg);
}

.timeline__sec02 .piece {
  margin-left: -3px;
}

.article03 {
  top: -13px;
  left: 342px;
}

.article03.active {
  -webkit-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg);
  opacity: 1;
}

.article03 .days {
  position: absolute;
  top: -20px;
  left: -26px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article03.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.article04 {
  top: 280px;
  right: -94px;
  -webkit-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.article04.active {
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  opacity: 1;
}

.article04 .days {
  position: absolute;
  top: -26px;
  right: -18px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article04.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.article05 {
  top: 516px;
  left: -70px;
}

.article05.active {
  -webkit-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg);
  opacity: 1;
}

.article05 .days {
  position: absolute;
  top: -31px;
  left: -32px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article05.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.timeline__sec02 .piece {
  z-index: 5;
}

.timeline__sec02 .paper01 {
  top: -101px;
  right: -85px;
  z-index: 3;
}

.timeline__sec02 .paper02 {
  top: -123px;
  left: -271px;
  z-index: 0;
}

.timeline__sec02 .paper03 {
  top: 47px;
  left: 85px;
  z-index: 0;
}

.timeline__sec02 .paper04 {
  top: 58px;
  right: -323px;
  z-index: 0;
}

.timeline__sec02 .paper05 {
  top: 195px;
  left: -332px;
  z-index: 0;
}

.timeline__sec02 .paper06 {
  top: 301px;
  left: -268px;
  z-index: 0;
}

.timeline__sec02 .paper07 {
  top: 318px;
  left: 270px;
  z-index: 0;
}

.timeline__sec02 .paper08 {
  bottom: 7px;
  right: 60px;
  z-index: 5;
}

.timeline__sec02 .people01 {
  top: -14px;
  left: -338px;
  z-index: 0;
}

.timeline__sec02 .people02 {
  top: 155px;
  left: 121px;
  z-index: 0;
}

.timeline__sec02 .people03 {
  top: 172px;
  right: -209px;
  z-index: 0;
}

.timeline__sec02 .people04 {
  bottom: 229px;
  left: 290px;
  z-index: 0;
}

.timeline__sec02 .people05 {
  bottom: 219px;
  left: 178px;
  z-index: 0;
}

.timeline__sec02 .obj01 {
  top: 109px;
  left: -249px;
}

.timeline__sec02 .obj02 {
  top: 147px;
  left: 56px;
}

.timeline__sec02 .obj03 {
  top: 114px;
  right: -305px;
}

.timeline__sec02 .obj04 {
  top: 312px;
  left: -387px;
}

.timeline__sec02 .obj05 {
  bottom: 265px;
  left: 571px;
}

.timeline__sec02 .obj06 {
  bottom: 164px;
  left: -302px;
}

.timeline__sec02 .obj07 {
  top: 40px;
  right: -33px;
  z-index: 3;
}

/* @SP */
@media all and (max-width: 767px) {
  .timeline__sec02 {
    height: 782px;
    background-image: url(../images/sec02_bg_sp.jpg);
  }

  .article03 {
    top: 31px;
    left: 137px;
  }

  .article03.active {
    transform: rotate(-4deg);
  }

  .article03 .days {
    top: -11px;
    left: -8px;
    width: 82px;
  }

  .article03 .article__img::before {
    content: none;
  }

  .article04 {
    top: 305px;
    left: 157px;
  }

  .article04.active {
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  .article04 .days {
    width: 83px;
    top: -10px;
    right: -17px;
  }

  .article05 {
    top: 585px;
    left: 20px;
  }

  .article05.active {
    transform: rotate(-3deg);
  }

  .article05 .days {
    width: 82px;
    top: -9px;
    left: -10px;
  }

  .timeline__sec02 .paper01 {
    top: -94px;
    left: 218px;
    width: 275px;
  }

  .timeline__sec02 .paper02 {
    top: -51px;
    left: -65px;
    width: 248px;
  }

  .timeline__sec02 .paper03 {
    top: 78px;
    left: -35px;
    width: 298px;
  }

  .timeline__sec02 .paper04 {
    top: 130px;
    right: -100px;
    width: 257px;
  }

  .timeline__sec02 .paper05 {
    top: 195px;
    left: -80px;
    width: 235px;
    z-index: 1;
  }

  .timeline__sec02 .paper06 {
    top: 420px;
    left: 41px;
    width: 164px;
  }

  .timeline__sec02 .paper07 {
    top: 279px;
    left: 0;
    width: 186px;
  }

  .timeline__sec02 .paper08 {
    bottom: 11px;
    right: -15px;
    width: 153px;
  }

  .timeline__sec02 .people01 {
    top: 19px;
    left: -19px;
    width: 153px;
  }

  .timeline__sec02 .people02 {
    top: 149px;
    left: 10px;
    width: 87px;
  }

  .timeline__sec02 .people03 {
    top: 344px;
    right: 218px;
    width: 168px;
  }

  .timeline__sec02 .people04 {
    top: -49px;
    bottom: auto;
    left: 232px;
    width: 56px;
    z-index: 5;
  }

  .timeline__sec02 .obj01 {
    top: 147px;
    left: 188px;
    width: 16px;
  }

  .timeline__sec02 .obj02 {
    top: 239px;
    left: -13px;
    z-index: 2;
    width: 57px;
  }

  .timeline__sec02 .obj03 {
    top: 205px;
    right: 8px;
    z-index: 1;
    width: 86px;
  }

  .timeline__sec02 .obj04 {
    top: 486px;
    left: 119px;
    z-index: 2;
    width: 47px;
  }
}

/* @smallSP */
@media all and (max-width: 374px) {
  .article04 {
    left: 64px;
  }
}

/* sec03 */
.timeline__sec03 {
  height: 1004px;
  background-image: url(../images/sec03_bg_pc.jpg);
}

.article06 {
  top: 34px;
  right: 626px;
}

.article06.active {
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  opacity: 1;
}

.article06 .days {
  position: absolute;
  top: -21px;
  left: -28px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article06.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.article07 {
  top: 419px;
  left: 524px;
}

.article07.active {
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
  opacity: 1;
}

.article07 .days {
  position: absolute;
  top: -28px;
  right: -19px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.article07.active .days {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.timeline__sec03 .piece {
  z-index: 6;
}

.timeline__sec03 .paper01 {
  top: -81px;
  left: 301px;
}

.timeline__sec03 .paper02 {
  top: 98px;
  right: -313px;
}

.timeline__sec03 .paper03 {
  top: 449px;
  left: -130px;
}

.timeline__sec03 .paper04 {
  top: 372px;
  right: -53px;
}

.timeline__sec03 .paper05 {
  top: 400px;
  left: -244px;
  z-index: 0;
}

.timeline__sec03 .paper06 {
  bottom: 194px;
  right: -79px;
  z-index: 0;
}

.timeline__sec03 .marionette01,
.timeline__sec03 .marionette02 {
  z-index: 3;
  transform: translateY(-50%);
  opacity: 0;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) .3s;
}

.timeline__sec03 .marionette01.active,
.timeline__sec03 .marionette02.active {
  transform: translateY(0);
  opacity: 1;
}

.timeline__sec03 .marionette01 {
  bottom: 365px;
  left: -66px;
}

.timeline__sec03 .marionette02 {
  bottom: 365px;
  left: 40px;
}

.timeline__sec03 .obj01 {
  top: -48px;
  right: 85px;
  z-index: 5;
}

.timeline__sec03 .obj02 {
  top: 109px;
  left: 316px;
  z-index: 2;
}

.timeline__sec03 .obj03 {
  top: 219px;
  right: 38px;
  z-index: 2;
}

.timeline__sec03 .obj04 {
  bottom: 327px;
  left: -118px;
  z-index: 2;
}

/* @SP */
@media all and (max-width: 767px) {
  .timeline__sec03 {
    height: 782px;
    background-image: url(../images/sec03_bg_sp.jpg);
  }

  .article06 {
    top: 94px;
    right: 30px;
  }

  .article06.active {
    transform: rotate(7deg);
  }

  .article06 .days {
    width: 82px;
    top: -11px;
    right: -11px;
    left: auto;
  }

  .article07 {
    top: 366px;
    left: 24px;
  }

  .article07.active {
    transform: rotate(-5deg);
  }

  .article07 .days {
    top: -12px;
    left: auto;
    right: -12px;
    width: 82px;
  }

  .timeline__sec03 .paper01 {
    top: 75px;
    left: 40px;
    width: 164px;
  }

  .timeline__sec03 .paper02 {
    top: 147px;
    right: -265px;
    width: 238px;
  }

  .timeline__sec03 .paper03 {
    top: 229px;
    left: 6px;
    width: 188px;
  }

  .timeline__sec03 .paper04 {
    top: 371px;
    right: -50px;
    width: 86px;
  }

  .timeline__sec03 .people01 {
    top: -75px;
    right: 47px;
    z-index: 5;
    width: 62px;
  }

  .timeline__sec03 .people02 {
    top: 0px;
    left: 226px;
    z-index: 1;
    width: 51px;
  }

  .timeline__sec03 .people03 {
    bottom: 19px;
    left: -7px;
    z-index: 0;
    width: 123px;
  }

  .timeline__sec03 .obj01 {
    top: 213px;
    right: auto;
    left: -34px;
    width: 98px;
  }

  .timeline__sec03 .obj02 {
    top: 210px;
    right: -62px;
    left: auto;
    width: 56px;
  }

  .timeline__sec03 .obj03 {
    top: 540px;
    right: -43px;
    z-index: 5;
    width: 87px;
  }

  .timeline__sec03 .marionette01 {
    bottom: 436px;
    left: 46px;
    width: 28px;
    z-index: 2;
  }

  .timeline__sec03 .marionette02 {
    bottom: 436px;
    left: 110px;
    width: 26px;
    z-index: 2;
  }
}

/* @smallSP */
@media all and (max-width: 374px) {
  .article05 {
    left: 50px;
  }

  .article06 {
    right: 84px;
  }
}


.timeline__sec01 .piece.active .piece__img,
.timeline__sec02 .piece.active .piece__img,
.timeline__sec03 .piece.active .piece__img {
  -webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01 1s ease 0.3s infinite;
  animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01 1s ease 0.3s infinite;
}

.timeline__sec03 .piece--train.active .piece__img {
  -webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01-02 1s ease 0.3s infinite;
  animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01-02 1s ease 0.3s infinite;
}

.piece-end {
  position: absolute;
  bottom: 53px;
  left: 98px;
  opacity: 0;
}

.piece-end.active {
  opacity: 1;
}

.piece-end.active .piece__img {
  -webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, ending 8s ease 0.3s forwards;
  animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, ending 8s ease 0.3s forwards;
}

/*=====================================================================
	@keyframes
=====================================================================*/
@keyframes sec01 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

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

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

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

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

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

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

@keyframes sec01-02 {
  0% {
    transform: translateY(0px);
  }

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

  70% {
    transform: translateY(2px) rotate(0.5deg);
  }

  80% {
    transform: translateY(0px);
  }

  90% {
    transform: translateY(2px) rotate(-0.5deg);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes sec02 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }

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

@keyframes sec02-balloon {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

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

@keyframes sec03-bird {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes ending {
  0% {
    transform: rotate(0deg);
  }

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

  10% {
    transform: rotate(15deg);
  }

  15% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(3) translate(-60px, 180px);
    opacity: 0;
  }
}