@charset "UTF-8";

/* Base
============================================================================== */
.loading-unit {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #3d3d3d;
  opacity: 1;
}
.loading-unit.is-hidden {
  display: none;
  opacity: 0;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(0);
}
.loading.pc { animation: movingLeft1 2.0s ease-in-out 2.0s forwards; }
.loading.sp { animation: movingLeft2 2.0s ease-in-out 2.0s forwards; }

.loading.sp { display: none; }
@media screen and (max-width:780px) {
  .loading.sp { display: inherit; }
  .loading.pc { display: none; }
}

.loading-item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* SVG
============================================================================== */
.loading.pc .loading-item > svg { width: 200%; }
.loading.sp .loading-item > svg { width: 300%; }

/* "Book" Path */
.st0 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6px;
}
.loading.pc .st0 {
  stroke-dasharray: 5195;
  stroke-dashoffset: 5195;
  animation: st0Anime1 4.0s linear 0s forwards;
}
.loading.sp .st0 {
  stroke-dasharray: 3683;
  stroke-dashoffset: 3683;
  animation: st0Anime2 4.0s linear 0s forwards;
}

/* "ZAISAN" Outline */
.st1 {
  fill-opacity: 0;
  fill: #ffffff;
  stroke: none;
}
.loading.pc .st1 { animation: fadeIn 1.0s linear 7.25s forwards; }
.loading.sp .st1 { animation: fadeIn 1.0s linear 7.0s forwards; }

/* "team create" Outline */
.st2 {
  fill-opacity: 0;
  fill: #ffffff;
  stroke: none;
}
.loading.pc .st2 { animation: fadeIn 1.0s linear 8.25s forwards; }
.loading.sp .st2 { animation: fadeIn 1.0s linear 8.0s forwards; }

/* "ZAISAN" Path */
.st3 {
  fill: none;
  stroke: #ffffff;
  stroke-miterlimit: 200;
  stroke-linecap: round;
}

.loading.pc .st3 {
  stroke-dasharray: 1023;
  stroke-dashoffset: 1023;
  stroke-width: 1.6px;
  animation: st3Anime3 4.0s linear 3.75s forwards;
}
.loading.pc .st3.delay01 { animation-delay: 4.5s; }
.loading.pc .st3.delay02 { animation-delay: 5.0s; }
.loading.pc .st3.delay03 { animation-delay: 5.5s; }
.loading.pc .st3.delay04 { animation-delay: 6.0s; }
.loading.pc .st3.delay05 { animation-delay: 6.5s; }
.loading.pc .st3.delay06 { animation-delay: 7.0s; }

.loading.sp .st3 {
  stroke-dasharray: 772;
  stroke-dashoffset: 772;
  stroke-width: 1.6px;
  animation: st3Anime4 4.0s linear 3.75s forwards;
}
.loading.sp .st3.delay01 { animation-delay: 4.5s; }
.loading.sp .st3.delay02 { animation-delay: 5.0s; }
.loading.sp .st3.delay03 { animation-delay: 5.5s; }
.loading.sp .st3.delay04 { animation-delay: 6.0s; }
.loading.sp .st3.delay05 { animation-delay: 6.5s; }
.loading.sp .st3.delay06 { animation-delay: 7.0s; }

@keyframes movingLeft1 {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes movingLeft2 {
  from { transform: translateX(0); }
  to { transform: translateX(-200%); }
}

@keyframes st0Anime1 {
  0% { stroke-dashoffset: 5195; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes st0Anime2 {
  0% { stroke-dashoffset: 3683; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes st3Anime3 {
  0% { stroke-dashoffset: 1023; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes st3Anime4 {
  0% { stroke-dashoffset: 772; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes fadeIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}