/* --------------------------------------------------------------------------
   common
--------------------------------------------------------------------------- */

/* toTop
----------------------------------------------------------------- */
@-webkit-keyframes toTop {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }

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

@keyframes toTop {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

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

/* title
----------------------------------------------------------------- */
@-webkit-keyframes title {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  70% {
    opacity: 0.7;
    -webkit-transform: scale(1.2);
  }

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

@keyframes title {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 0.7;
    transform: scale(1.2);
  }

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

/* btn
----------------------------------------------------------------- */
@-webkit-keyframes btn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  70% {
    opacity: 0.7;
    -webkit-transform: scale(1.3);
  }

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

@keyframes btn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 0.7;
    transform: scale(1.3);
  }

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

/* object
----------------------------------------------------------------- */
@-webkit-keyframes object {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  70% {
    opacity: 0.7;
    -webkit-transform: scale(1.2);
  }

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

@keyframes object {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 0.7;
    transform: scale(1.2);
  }

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

.l-sec-base.is-active .to-top {
  -webkit-animation: toTop 500ms ease-in-out forwards;
  animation: toTop 500ms ease-in-out forwards;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

.l-sec-base.is-active .btn {
  -webkit-animation: btn 500ms ease-in-out forwards;
  animation: btn 500ms ease-in-out forwards;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.l-sec-base.is-active .ttl {
  -webkit-animation: title 500ms ease-in-out forwards;
  animation: title 500ms ease-in-out forwards;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

/* --------------------------------------------------------------------------
   sec-mv
--------------------------------------------------------------------------- */
@-webkit-keyframes mvTopLeftObject {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }

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

@keyframes mvTopLeftObject {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

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

@-webkit-keyframes mvTopRightObject {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }

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

@keyframes mvTopRightObject {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

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

.sec-mv.is-active .sec-mv__ttl {
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}

.sec-mv.is-active .obj-wrap__item {
  -webkit-animation: object 400ms ease-in-out forwards;
  animation: object 400ms ease-in-out forwards;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.sec-mv.is-active .obj-wrap__item--01 {
  -webkit-animation: mvTopLeftObject 400ms ease-in-out forwards;
  animation: mvTopLeftObject 400ms ease-in-out forwards;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.sec-mv.is-active .obj-wrap__item--02 {
  -webkit-animation: mvTopRightObject 400ms ease-in-out forwards;
  animation: mvTopRightObject 400ms ease-in-out forwards;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

/* --------------------------------------------------------------------------
   sec-road
--------------------------------------------------------------------------- */
@-webkit-keyframes roadImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(15%);
  }

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

@keyframes roadImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(15%);
    transform: translateY(15%);
  }

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

.sec-road.is-active .img--01 {
  -webkit-animation: roadImg01 500ms ease-in-out forwards;
  animation: roadImg01 500ms ease-in-out forwards;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

/* --------------------------------------------------------------------------
   sec-aruaru
--------------------------------------------------------------------------- */
@-webkit-keyframes aruaruImg01 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }

  40% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

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

@keyframes aruaruImg01 {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  40% {
    opacity: 1;
    transform: scale(1.2);
  }

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

.sec-aruaru.is-active .img--01 {
  -webkit-animation: aruaruImg01 600ms ease-in-out forwards;
  animation: aruaruImg01 600ms ease-in-out forwards;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

/* --------------------------------------------------------------------------
   sec-sagashi
--------------------------------------------------------------------------- */
@-webkit-keyframes sagashiImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }

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

@keyframes sagashiImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

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

.sec-sagashi.is-active .img--01 {
  -webkit-animation: sagashiImg01 500ms ease-in-out forwards;
  animation: sagashiImg01 500ms ease-in-out forwards;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

/* --------------------------------------------------------------------------
   sec-bonus
--------------------------------------------------------------------------- */
.sec-bonus.is-active .obj-wrap__item {
  -webkit-animation: object 500ms ease-in-out forwards;
  animation: object 500ms ease-in-out forwards;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.sec-bonus.is-active .img--01 {
  -webkit-animation: object 500ms ease-in-out forwards;
  animation: object 500ms ease-in-out forwards;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}

/* --------------------------------------------------------------------------
   sec-panda
--------------------------------------------------------------------------- */
@-webkit-keyframes pandaTitleObject {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

@keyframes pandaTitleObject {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(24deg);
    transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes pandaImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }

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

@keyframes pandaImg01 {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

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

.sec-panda.is-active .ttl-obj {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-animation: pandaTitleObject 400ms ease-in-out forwards;
  animation: pandaTitleObject 400ms ease-in-out forwards;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}

.sec-panda.is-active .img--01 {
  -webkit-animation: pandaImg01 500ms ease-in-out forwards;
  animation: pandaImg01 500ms ease-in-out forwards;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

/* --------------------------------------------------------------------------
   sec-tuna
--------------------------------------------------------------------------- */
@-webkit-keyframes tunaTitleObject {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

@keyframes tunaTitleObject {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes tunaImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }

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

@keyframes tunaImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

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

.sec-tuna.is-active .ttl-obj {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-animation: tunaTitleObject 400ms ease-in-out forwards;
  animation: tunaTitleObject 400ms ease-in-out forwards;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}

.sec-tuna.is-active .img--01 {
  -webkit-animation: tunaImg01 500ms ease-in-out forwards;
  animation: tunaImg01 500ms ease-in-out forwards;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

/* --------------------------------------------------------------------------
   sec-recipe
--------------------------------------------------------------------------- */
@-webkit-keyframes recipeTitleObject {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

@keyframes recipeTitleObject {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes recipeImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }

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

@keyframes recipeImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

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

.sec-recipe.is-active .ttl-obj {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-animation: recipeTitleObject 400ms ease-in-out forwards;
  animation: recipeTitleObject 400ms ease-in-out forwards;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}

.sec-recipe.is-active .img--01 {
  -webkit-animation: recipeImg01 400ms ease-in-out forwards;
  animation: recipeImg01 400ms ease-in-out forwards;
  -webkit-animation-delay: 380ms;
  animation-delay: 380ms;
}

/* --------------------------------------------------------------------------
   sec-chef
--------------------------------------------------------------------------- */
@-webkit-keyframes chefObject {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(24deg);
    transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

@keyframes chefObject {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(24deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes chefImg01 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }

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

@keyframes chefImg01 {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

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

.sec-chef.is-active .sec-chef__ttl {
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.sec-chef.is-active .obj--01 {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-animation: chefObject 400ms ease-in-out forwards;
  animation: chefObject 400ms ease-in-out forwards;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}

.sec-chef.is-active .img--01 {
  -webkit-animation: chefImg01 400ms ease-in-out forwards;
  animation: chefImg01 400ms ease-in-out forwards;
  -webkit-animation-delay: 380ms;
  animation-delay: 380ms;
}