/* ==============================
  @TOP Animation
================================= */
.js .top-nav__item {
  opacity: 0;
}

.js .top-nav__item--center {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

.js .top-nav__item--animated {
  opacity: 1;
}

.js .top-nav__item--animated.top-nav__item--center {
  -webkit-animation: logo 1s ease;
  -moz-animation: logo 1s ease;
  animation: logo 1s ease;
  animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}

.js .top-nav__item--animated.top-nav__item--inner {
  -webkit-animation: item 0.5s ease-out;
  -moz-animation: item 0.5s ease-out;
  animation: item 0.5s ease-out;
  animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}

.js .top-nav__item--animated.top-nav__item--outer {
  -webkit-animation: item 0.4s ease-out;
  -moz-animation: item 0.4s ease-out;
  animation: item 0.4s ease-out;
  animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}

.top-nav__item {
  transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}

@-webkit-keyframes logo {
  0% {
    opacity: 0;
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
  }

  10% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }

  50% {
    opacity: 1;
  }

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

@-moz-keyframes logo {
  0% {
    opacity: 0;
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
  }

  10% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }

  50% {
    opacity: 1;
  }

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

@keyframes logo {
  0% {
    opacity: 0;
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
  }

  10% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }

  50% {
    opacity: 1;
  }

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

@-webkit-keyframes item {
  0% {
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
  }

  50% {
    opacity: 1;
  }

  80% {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }

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

@-moz-keyframes item {
  0% {
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
  }

  50% {
    opacity: 1;
  }

  80% {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }

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

@keyframes item {
  0% {
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
  }

  50% {
    opacity: 1;
  }

  80% {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }

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

.top-nav__link {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
}

.top-nav__link img {
  transition: opacity 0.2s ease;
}

.top-nav__link::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  opacity: 0;
  background-repeat: no-repeat;
  transition: all 0.4s ease, opacity 0.2s ease;
  transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform: scale(0.9);
  -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  content: '';
}

.top-nav__link:hover img {
  opacity: 0;
}

.top-nav__link:hover::after {
  opacity: 1;
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
}

.top-nav__link--company::after {
  background-image: url("../../images/en/top/menu01_on.png");
  background-size: 200px 200px;
}

.top-nav__link--message::after {
  background-image: url("../../images/en/top/menu02_on.png");
  background-size: 200px 200px;
}

.top-nav__link--release::after {
  background-image: url("../../images/en/top/menu03_on.png");
  background-size: 200px 200px;
}

.top-nav__link--business::after {
  background-image: url("../../images/en/top/menu04_on.png");
  background-size: 200px 200px;
}

.top-nav__link--inquiry::after {
  background-image: url("../../images/en/top/menu05_on.png");
  background-size: 200px 200px;
}

.top-nav__link--products::after {
  background-image: url("../../images/en/top/menu06_on.png");
  background-size: 200px 200px;
}