@charset "UTF-8";
.hide {
  opacity: 0;
  display: none;
  -webkit-transition: .6s;
  transition: .6s;
}

.show {
  opacity: 1;
  display: block;
  -webkit-transition: .6s;
  transition: .6s;
}

/**
====    TOPローディング時のフェードイン    **/
.top-fade-in-1,
.top-fade-in-2 {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}

.top-fade-in-1 {
  z-index: 9998;
  background: rgb(22, 255, 22);
  -webkit-animation: topFadeIn1 1.4s forwards 1.4s;
          animation: topFadeIn1 1.4s forwards 1.4s;
  -webkit-animation-name: topFadeIn1;
          animation-name: topFadeIn1;
}

.top-fade-in-2 {
  z-index: 9999;
  background: rgb(44, 153, 255);
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: topFadeIn2;
          animation-name: topFadeIn2;
}

@-webkit-keyframes topFadeIn1 {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

@keyframes topFadeIn1 {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

@-webkit-keyframes topFadeIn2 {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

@keyframes topFadeIn2 {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

/**
====    ページローディング時のフェードイン    **/
.page-loading {
  -webkit-animation: pageLoadingFadeIn 2s forwards;
          animation: pageLoadingFadeIn 2s forwards;
}

@-webkit-keyframes loadingFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes loadingFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes pageLoadingFadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes pageLoadingFadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/**
================================   SP ナビ    **/
.nav-open {
  display: block;
  opacity: 1;
  -webkit-transition: .6s;
  transition: .6s;
  top: 60px;
}


.menu-open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 48%;
  left: 15%;
}

.menu-open span:nth-child(2) {
  left: 50%;
  opacity: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.menu-open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 48%;
  left: 15%;
}