/* =============================================================
    TOP Page 
============================================================= */
.p-page-home {
  /**
  * b-top__mainvisual
  */
  /**
  * b-top__case
  */
}
.p-page-home .b-top__mainvisual--image .mainvisual-loop:first-of-type picture:first-of-type img, .p-page-home .b-top__mainvisual--image .mainvisual-loop:last-of-type picture:first-of-type img {
  animation: mainLoop 50s -25s linear infinite;
  animation-play-state: running;
}
.p-page-home .b-top__mainvisual--image .mainvisual-loop:first-of-type picture:nth-of-type(2) img, .p-page-home .b-top__mainvisual--image .mainvisual-loop:last-of-type picture:nth-of-type(2) img {
  animation: mainLoop2 50s linear infinite;
  animation-play-state: running;
}
.p-page-home .b-top__mainvisual--image .mainvisual-loop:nth-of-type(2) picture:first-of-type img {
  animation: mainLoop 50s -25s linear infinite;
  animation-direction: reverse;
  animation-play-state: running;
}
.p-page-home .b-top__mainvisual--image .mainvisual-loop:nth-of-type(2) picture:nth-of-type(2) img {
  animation: mainLoop2 50s linear infinite;
  animation-direction: reverse;
  animation-play-state: running;
}
.p-page-home .b-top__case--logo:first-of-type {
  animation: loop 200s -100s linear infinite;
}
.p-page-home .b-top__case--logo:nth-of-type(2) {
  animation: loop2 200s linear infinite;
}

@keyframes mainLoop {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes mainLoop2 {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200%);
  }
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes imageSwitch {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
    z-index: 10;
  }
  100% {
    opacity: 0;
  }
}