@charset "UTF-8";
/*************************************
SIZE
*************************************/
/*************************************
COLORS
*************************************/
/*************************************
MIXINS
*************************************/
/*------------------------------------
animation
	*/
@keyframes maskAnim {
  0% {
    visibility: hidden;
    mask-image: none;
    opacity: 0;
    display: none;
  }
  99% {
    visibility: hidden;
    mask-image: var(--link);
    opacity: 1;
    display: block;
  }
  100% {
    visibility: visible;
    mask-image: var(--link);
    opacity: 1;
    display: block;
  }
}
@keyframes fingerAnim {
  0% {
    transform: translateX(20.5128205128vw);
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateX(-20.5128205128vw);
    opacity: 0;
  }
}
@keyframes loadBarAnim {
  0% {
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 7px);
  }
}
#loadCover {
  transition: opacity 0.6s;
}
#loadCover .inner {
  width: 13.8888888889vw;
  position: relative;
}
@media screen and ( max-width : 768px ) {
  #loadCover .inner {
    width: 33.3333333333vw;
  }
}
#loadCover figure {
  width: 100%;
  position: absolute;
}
#loadCover #base {
  opacity: 0.1;
}
#loadCover #progressImage {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  /* 初期値は右から100%隠す */
  transition: clip-path 1s ease;
}

#logo {
  opacity: 0;
  transition: opacity 1.2s;
  transition-delay: 0.5s;
}

#gNav {
  opacity: 0;
  transition: opacity 1.2s;
  transition-delay: 1s;
}

#drawer {
  opacity: 0;
  transition: opacity 1.2s;
  transition-delay: 1s;
}

.workItem {
  opacity: 0;
  transition: opacity 1.3s;
  transition-delay: 1.5s;
}

.loaded #loadCover {
  opacity: 0;
  pointer-events: none;
}
.loaded #logo, .loaded #gNav, .loaded #drawer, .loaded bg.view, .loaded .workItem {
  opacity: 1;
}