@charset "UTF-8";
/* --- オープニングアニメーション --- */
#loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  z-index: 99999;
  background-color: #fff;
}
#loading img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.logo_group {
  width: 80%;
  max-width: 1000px;
  margin: auto;
  display: flex;
  align-items: center;
}
.logo_group .logo_group_left {
  flex: 0 0 20.9%;
  opacity: 0;
  position: relative;
  z-index: 0;
}
.logo_group .logo_group_right {
  flex: 0 0 76.2%;
  margin-left: auto;
}

/* 光 */
.svg_flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
}
.svg_flash .base-circle {
  stroke-width: 4;
  fill: none;
  /* stroke: #444; 必要なら */
}
.svg_flash .circle-light {
  stroke: #fff;
  stroke-width: 60;
  stroke-linecap: round;
  stroke-dasharray: 60 490;
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-45deg);
  filter: url(#glow);
}

/* 発動用クラス */
#loading .svg_flash.is-active {
  opacity: 1;
}
#loading .svg_flash.is-active .circle-light {
  animation: circle-spin 0.3s linear forwards;
}

@keyframes circle-spin {
  0% {
    transform: rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-405deg);
    opacity: 0;
  }
}
/* =============================
 * マスクエフェクト
 * ============================= */
@media screen {
  .logo_group_right {
    opacity: 0;
    mask-image: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 100% 50%;
    -webkit-mask-position: 100% 50%;
    mask-size: 200% 100%;
    -webkit-mask-size: 200% 100%;
    transition: mask-position 0.5s cubic-bezier(0.51, 0.49, 0.16, 0.99) 0.3s;
  }
  .logo_group_right.is-active {
    opacity: 1;
    mask-position: 0% 50%;
    -webkit-mask-position: 0% 50%;
  }
}
/* =============================
 * オープニング終了
 * ============================= */
body.complete #loading {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* 2回目以降loading内の場合 */
body.load_already #loading {
  opacity: 0;
  visibility: hidden;
}

/*# sourceMappingURL=loading.css.map */