@charset 'utf-8';

body::before,
body::after {
  content: '';
  position: fixed;
  top: 0;
  height: 100vh;
}


body::before {
  left: 100%;
  width: 100vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  z-index: 3;
  opacity: 0;
}

body:not(.js_first_load)::before {
  background-image: url(../img/logo/ikeshibu_square.svg);
}

body.js_page_transition_out::before {  
  animation: fadeIn .2s cubic-bezier(0.59, 0, 0.58, 1) .2s forwards;
}

body.js_page_transition_in::before {
  animation: fadeOut .5s cubic-bezier(0.59, 0, 0.58, 1) none;
}

body.js_first_load::before {
  background-image: url(../img/logo/ikeshibu_loading.svg);
  opacity: 1;
  left: 0;
  animation: .5s firstfadeOut 2.5s cubic-bezier(0.59, 0, 0.58, 1) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    left: 0;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    left: 0;
  }
  99% {
    opacity: 0;
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes firstfadeOut {
  0% {
    opacity: 1;
    left: 0;
  }
  95% {
    opacity: 0;
    left: 0;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  height: 100vh;
  background-color: #fff;
  z-index: 2;
}

body.js_first_load::after {
  width: 100%;
  left: 0;
  opacity: 1;
  animation: .5s slideOut 2.5s cubic-bezier(0.59, 0, 0.58, 1) forwards;
}

body.js_page_transition_out::after {
  animation: slideIn .3s cubic-bezier(0.59, 0, 0.58, 1) forwards;
}

body.js_page_transition_in::after {
  width: 100%;
  animation: slideOut .8s cubic-bezier(0.59, 0, 0.58, 1) forwards;
}

@keyframes slideIn {
  0% {
      width: 0%;
  }
  100% {
      width: 100%;
  }
}

@keyframes slideOut {
  0% {
      left: 0;
  }
  100% {
      left: 100%;
  }
}

@media (min-width:640px) {
  body::before {
    background-size: 40%;
  } 
}

@media (min-width:960px) {
  body::before {
    background-size: 20%;
  } 
}