@charset "utf-8";

/**
 *
 *  STT Hawaii
 *
 */

/*--------------------------------------------------------------------------
	overwrite スタイルの上書き
--------------------------------------------------------------------------*/

/*----------------------------------------------------------------------
	.kv
----------------------------------------------------------------------*/
.kv--2019::before {
  background-image: url(../images/kv_bg_pc.png);
}

.kv--2019__box {
  padding-top: 76px;
}

.kv--2019__box .inner::before {
  background-image: url(../images/kv_deco01_pc.png);
  width: 116px;
  height: 149px;
  top: -19px;
  left: -47px;
}

.kv--2019__box .inner::after {
  background-image: url(../images/kv_deco02_pc.png);
  width: 125px;
  height: 166px;
  bottom: -16px;
  right: -72px;
}

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

  .kv--2019__box {
    padding: 0;
  }

  .kv--2019__box .inner {
    padding: 36px 10px 0;
  }

  .kv--2019__box .inner::before {
    background-image: url(../images/kv_deco01_sp.png);
    background-position: 0 0;
    width: 26%;
    height: 84px;
    top: -31px;
    left: -12px;
  }

  .kv--2019__box .inner::after {
    background-image: url(../images/kv_deco02_sp.png);
    background-position: 100% 100%;
    width: 27%;
    height: 95px;
    bottom: -38px;
    right: -18px;
  }

  .kv--2019__ttl>img {
    width: 245px;
    transform: none;
  }

  .kv--2019__text {
    margin: 6px 0 0;
  }
}

@media all and (max-width: 350px) {
  .kv--2019__text {
    font-size: 11px;
  }
}

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

.article01 {
  top: 79px;
  right: 85px;
}

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

.article01 .days {
  position: absolute;
  top: -32px;
  left: -29px;
  -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;
}

.article01 .article__img::before {
  content: '';
  display: block;
  background: url(../images/article01_deco.png);
  width: 47px;
  height: 51px;
  position: absolute;
  top: 189px;
  right: -18px;
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 21px 22px;
  -ms-transform-origin: 21px 22px;
  transform-origin: 21px 22px;
  transition: .5s ease 1.2s;
}

.article01.active .article__img::before {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  opacity: 1;
}

.article02 {
  top: 352px;
  left: 103px;
  -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);
}

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

.article02 .days {
  position: absolute;
  top: -22px;
  right: -36px;
  -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;
}

.article02 .article__img::before {
  content: '';
  display: block;
  background: url(../images/article02_deco.png);
  width: 51px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: -19px;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
  transition: .5s ease 1.2s;
}

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

.timeline__sec01 .paper01 {
  top: 59px;
  left: 225px;
  z-index: 0;
}

.timeline__sec01 .paper02 {
  top: 553px;
  left: 520px;
}

.timeline__sec01 .paper04 {
  bottom: 55px;
  left: -124px;
}

.timeline__sec01 .obj01 {
  top: -95px;
  left: 79px;
  z-index: 2;
}

.timeline__sec01 .obj02 {
  top: 512px;
  right: 15px;
  animation: tortoise 5s ease infinite;
}

.timeline__sec01 .obj03 {
  top: 578px;
  right: 19px;
  animation: yacht 5s ease infinite;
  transform-origin: 50% 100%;
}

.timeline__sec01 .obj04 {
  top: 132px;
  left: 474px;
}

.timeline__sec01 .flower {
  transition: .5s cubic-bezier(.35, 0, .46, 1.58);
}

.timeline__sec01 .flower.active {
  transform: scale(1);
}

.timeline__sec01 .flower01 {
  top: 142px;
  left: -2px;
  transform: scale(0);
}

.timeline__sec01 .flower02 {
  top: 207px;
  left: 278px;
  transform: scale(0);
}

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

  .article01 {
    top: 30px;
    right: 30px;
  }

  .article01 .days {
    width: 54px;
    top: -19px;
    left: -17px;
  }

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

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

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

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

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

  .timeline__sec01 .paper01 {
    width: 157px;
    top: 236px;
    left: 2px;
  }

  .timeline__sec01 .paper02 {
    width: 46px;
    top: 317px;
    left: auto;
    right: 48px;
  }

  .timeline__sec01 .paper03 {
    width: 69px;
    top: -17px;
    left: 39px;
  }

  .timeline__sec01 .paper04 {
    width: 164px;
    bottom: 9px;
    left: -155px;
  }

  .timeline__sec01 .obj01 {
    width: 118px;
    top: -73px;
    left: 3%;
  }

  .timeline__sec01 .obj02 {
    width: 53px;
    top: 429px;
    right: -5px;
  }
}

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

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

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

.article03 {
  top: 53px;
  left: 346px;
}

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

.article03 .days {
  position: absolute;
  top: -22px;
  right: -22px;
  -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;
}

.article03 .article__img::before {
  content: '';
  display: block;
  background: url(../images/article03_deco.png);
  width: 55px;
  height: 57px;
  position: absolute;
  bottom: -5px;
  right: -14px;
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 21px 22px;
  -ms-transform-origin: 21px 22px;
  transform-origin: 21px 22px;
  transition: .5s ease 1.2s;
}

.article03.active .article__img::before {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  opacity: 1;
}

.article04 {
  top: 364px;
  left: 23px;
  -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(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  opacity: 1;
}

.article04 .days {
  position: absolute;
  top: -26px;
  left: -15px;
  -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;
}

.timeline__sec02 .gate {
  position: absolute;
  bottom: -34px;
  right: 195px;
  z-index: 1;
}

.timeline__sec02 .paper01 {
  top: -86px;
  left: -39px;
  z-index: 0;
}

.timeline__sec02 .paper02 {
  bottom: 46px;
  left: 386px;
}

.timeline__sec02 .paper04 {
  bottom: 326px;
  right: 79px;
}

.timeline__sec02 .obj01 {
  top: 33px;
  left: -100px;
  animation: sec02-balloon cubic-bezier(0.645, 0.045, 0.355, 1) 3s infinite;
}

.timeline__sec02 .obj02 {
  top: 25px;
  left: -66px;
}

.timeline__sec02 .car01 {
  background: url(../images/car01.png) repeat-x 0 0;
  width: 1710px;
  height: 42px;
  bottom: 231px;
  left: -355px;
  animation: cars01 10s linear infinite, cars-vibe 0.1s linear infinite;
}

.timeline__sec02 .car02 {
  background: url(../images/car02.png) no-repeat 0 0;
  width: 1710px;
  height: 42px;
  bottom: 202px;
  left: -355px;
  animation: cars02 8s linear infinite, cars-vibe 0.1s linear infinite;
}

.timeline__sec02 .tree {
  bottom: 162px;
}

.timeline__sec02 .tree01 {
  left: 211px;
}

.timeline__sec02 .tree02 {
  left: 22px;
}

.timeline__sec02 .tree03 {
  left: 283px;
}

.timeline__sec02 .tree04 {
  left: 544px;
}

.timeline__sec02 .tree05 {
  right: -16px;
}

.timeline__sec02 .tree06 {
  right: -194px;
}

.timeline__sec02 .tree07 {
  right: 170px;
  bottom: 126px;
}

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

  .article03 {
    top: 64px;
    left: 56px;
  }

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

  .article03 .days {
    width: 57px;
    top: -19px;
    right: -12px;
  }

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

  .article04 {
    top: 340px;
    left: 45px;
  }

  .article04 .days {
    width: 74px;
    top: -17px;
    left: -19px;
  }

  .timeline__sec02 .paper01 {
    width: 273px;
    top: 0px;
    left: -19px;
  }

  .timeline__sec02 .paper02 {
    width: 190px;
    bottom: 11px;
    left: 60px;
    z-index: 0;
  }

  .timeline__sec02 .paper03 {
    width: 67px;
    top: 222px;
    right: 51px;
  }

  .timeline__sec02 .paper04 {
    width: 52px;
    bottom: 265px;
    right: 0;
  }

  .timeline__sec02 .obj01 {
    width: 26px;
    top: 62px;
    left: -92px;
  }

  .timeline__sec02 .obj02 {
    width: 116px;
    top: 60px;
    left: -33px;
  }
}

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

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

.article05 {
  top: 85px;
  left: 64px;
}

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

.article05 .days {
  position: absolute;
  top: -22px;
  left: -26px;
  -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__sec03 .paper01 {
  top: 22px;
  left: 422px;
  z-index: 0;
}

.timeline__sec03 .paper02 {
  top: 114px;
  right: -25px;
}

.timeline__sec03 .paper03 {
  top: 129px;
  right: -27px;
}

.timeline__sec03 .bird {
  width: 1000px;
  bottom: -317px;
  right: -350px;
  animation: sec03-bird linear 10s infinite;
}

.timeline__sec03 .bird img:last-child {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

.timeline__sec03 .obj02 {
  top: 233px;
  left: 447px;
  animation: lex 3s linear infinite;
}

/*.timeline__sec03 .obj02.active {
	animation: lex-turn 0.5s linear forwards, lex-r 3s linear 0.5s infinite;
}*/

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

  .article05 {
    top: 28px;
    left: 36px;
  }

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

  .article05 .days {
    width: 62px;
    top: -22px;
    left: -16px;
  }

  .timeline__sec03 .paper01 {
    width: 166px;
    top: 1px;
    left: 86px;
  }

  .timeline__sec03 .paper02 {
    width: 176px;
    top: 169px;
    right: -43px;
  }

  .timeline__sec03 .paper03 {
    width: 64px;
    top: 198px;
    right: -15px;
  }

  .timeline__sec03 .bird {
    width: 72px;
    bottom: 20px;
    right: 20px;
    animation: none;
  }

  .timeline__sec03 .obj01 {
    width: 126px;
    bottom: 20px;
    left: 23px;
  }
}

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


.timeline__sec01 .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__sec02 .piece.active .piece__img {
  -webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec02 0.1s ease 0.3s infinite;
  animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec02 0.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;
}

/*----------------------------------------------------------------------
	.timelines_link
----------------------------------------------------------------------*/
.timelines_link__hdg {
  border-color: #ff8e49;
}

/*=====================================================================
	@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 tortoise {
  0% {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }

  19% {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }

  20% {
    -webkit-transform: translateX(-5px) rotate(1deg);
    -ms-transform: translateX(-5px) rotate(1deg);
    transform: translateX(-5px) rotate(1deg);
  }

  29% {
    -webkit-transform: translateX(-5px) rotate(1deg);
    -ms-transform: translateX(-5px) rotate(1deg);
    transform: translateX(-5px) rotate(1deg);
  }

  30% {
    -webkit-transform: translateX(-10px) rotate(-1deg);
    -ms-transform: translateX(-10px) rotate(-1deg);
    transform: translateX(-10px) rotate(-1deg);
  }

  39% {
    -webkit-transform: translateX(-10px) rotate(-1deg);
    -ms-transform: translateX(-10px) rotate(-1deg);
    transform: translateX(-10px) rotate(-1deg);
  }

  40% {
    -webkit-transform: translateX(-15px) rotate(1deg);
    -ms-transform: translateX(-15px) rotate(1deg);
    transform: translateX(-15px) rotate(1deg);
  }

  49% {
    -webkit-transform: translateX(-15px) rotate(1deg);
    -ms-transform: translateX(-15px) rotate(1deg);
    transform: translateX(-15px) rotate(1deg);
  }

  100% {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes yacht {
  0% {
    -webkit-transform: rotate(1.5deg);
    -ms-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }

  25% {
    -webkit-transform: translateY(5px) rotate(0deg);
    -ms-transform: translateY(5px) rotate(0deg);
    transform: translateY(5px) rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }

  75% {
    -webkit-transform: translateY(10px) rotate(0deg);
    -ms-transform: translateY(10px) rotate(0deg);
    transform: translateY(10px) rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(1.5deg);
    -ms-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
}

@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;
  }
}

@keyframes cars01 {
  0% {
    background-position: 1710px 0;
  }

  100% {
    background-position: 0px 0;
  }
}

@keyframes cars02 {
  0% {
    background-position: -831px 0;
  }

  100% {
    background-position: 1710px 0;
  }
}

@keyframes cars-vibe {
  0% {
    transform: translateY(0);
  }

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

@keyframes lex {
  0% {
    transform: translateY(0) rotateY(0) perspective(300px);
  }

  10% {
    transform: translateY(0) rotateY(-45deg) perspective(2000px);
  }

  20% {
    transform: translateY(0) rotateY(45deg) perspective(2000px);
  }

  30% {
    transform: translateY(0) rotateY(0);
  }

  80% {
    transform: translateY(0);
  }

  85% {
    transform: translateY(-5px) rotate(2deg);
  }

  90% {
    transform: translateY(0);
  }

  95% {
    transform: translateY(-5px) rotate(2deg);
  }

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

@keyframes lex-turn {
  0% {
    transform: rotateY(0) perspective(300px);
  }

  100% {
    transform: rotateY(180deg) perspective(300px);
  }
}

@keyframes lex-r {
  0% {
    transform: translateY(0) rotateY(180deg) perspective(300px);
  }

  10% {
    transform: translateY(0) rotateY(135deg) perspective(2000px);
  }

  20% {
    transform: translateY(0) rotateY(225deg) perspective(2000px);
  }

  30% {
    transform: translateY(0) rotateY(180deg);
  }

  80% {
    transform: translateY(0) rotateY(180deg);
  }

  85% {
    transform: translateY(-5px) rotate(-2deg) rotateY(180deg);
  }

  90% {
    transform: translateY(0) rotateY(180deg);
  }

  95% {
    transform: translateY(-5px) rotate(-2deg) rotateY(180deg);
  }

  100% {
    transform: translateY(0) rotateY(180deg);
  }
}