/* ==============================
  @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/top/menu01_on.png");
  background-size: 200px 200px; }

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

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

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

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

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