@charset "utf-8";
/**---------------- *オープニング アニメーション-----------------*/
.shutter{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#1e1e1e;
  z-index:9999;
  animation: byeShutter 2.6s forwards;
  
  &::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto;
    background-color:var(--main-c);
    width:0;
    height:1px;
    animation: shutterOpen 2.6s forwards;
  }
}

.content{
  animation: contentScale 2.6s forwards;
}
.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 175px;
}

@keyframes byeShutter{
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    display:none;
    z-index:-1;
  }
}

@keyframes shutterOpen{
  0%{
    width:0;
    height:1px;
  }
  50%{
    width:100%;
    height:1px;
  }
  90%{
    width:100%;
    height:100%;
  }
  100%{
    width:100%;
    height:100%;
  }
}

@keyframes contentScale{
  70%{
    transform:perspective(800px) scale(0.9) rotateX(15deg);
  }
  100%{
    transform:perspective(800px) scale(1) rotateX(0);
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}
/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color:var(--main-c);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.loaded {
  opacity: 0;
  visibility: hidden;
}

/** *ロゴオープニング */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80vh;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 30%;max-width:350px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}