@charset "UTF-8";
/* ===========================================
*
* ローディング　画面
* pace.jsを使用　要素はpace.jsで自動生成
* https://codebyzach.github.io/pace/
*
* ======================================== */
/* デフォルトスタイル*/
#global-container {
  /* 読み込み時にコンテンツが表示されるのを回避 */
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
}

.pace-activity {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("/img/common/loading_bg.jpg") no-repeat top center/cover;
  z-index: 20001;
  top: 0;
  left: 0;
}

.pace-activity::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
  width: 360px;
  aspect-ratio: 567/325;
  background: url("/img/common/loader.png") no-repeat top right/contain;
  z-index: 10001;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}

/* プログレスバー*/
.pace .pace-progress {
  background: #ffb93f;
  position: fixed;
  z-index: 20003;
  top: 0;
  right: 100%;
  width: 100%;
  height: 5px;
}

/* 読み込み中 */
.pace-running {
  overflow: hidden;
}

.pace-running .pace-progress {
  visibility: visible;
}

/* 読み込み完了*/
.pace-done #global-container {
  opacity: 1;
}

.pace-done .pace-progress {
  opacity: 0;
  visibility: hidden;
}

.pace-done .pace-activity {
  -webkit-animation-timing-function: 5s;
          animation-timing-function: 5s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-name: paceLorderFadeOut;
          animation-name: paceLorderFadeOut;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes paceLorderFadeOut {
  from {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  to {
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    opacity: 0;
  }
}

@keyframes paceLorderFadeOut {
  from {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  to {
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    opacity: 0;
  }
}
@-webkit-keyframes floating-y {
  0% {
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%);
  }
  100% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%);
  }
}
@keyframes floating-y {
  0% {
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%);
  }
  100% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%);
  }
}
@media screen and (max-width: 767px) {
  .pace-activity::after {
    width: 64%;
  }
  /* プログレスバー*/
  .pace .pace-progress {
    height: 3px;
  }
}