@charset "UTF-8";
.l-loading {
  background: #ffffff;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}

.is-hello .l-loading {
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  transition: -webkit-transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  transition: transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  transition: transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
}

.top .l-loading {
    background-color: #fbe1ec;
}

.top .l-loading::before {
  background: #ffffff;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0%;
}

.is-hello .top .l-loading {
  -webkit-transition-delay: 1450ms;
          transition-delay: 1450ms;
}

.is-hello .top .l-loading::before {
  top: 100%;
  -webkit-transition: top 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  transition: top 650ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
}

.l-loading-logo {
  background: url(../img/loading_logo.png) no-repeat center center;
  background-size: 100px auto;
  bottom: 0;
  left: 0;
  margin-left: -8px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}

.is-hello:not(.is-bye) .l-loading-logo {
  opacity: 0;
  -webkit-transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, visibility 0ms 750ms;
  transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, visibility 0ms 750ms;
  visibility: hidden;
}

.is-hello:not(.is-bye) .top .l-loading-logo {
  -webkit-transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1) 1450ms, visibility 0ms 2100ms;
  transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1) 1450ms, visibility 0ms 2100ms;
}

@-webkit-keyframes bye {
  0% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
}

@keyframes bye {
  0% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
}