@charset "utf-8";
/* CSS Document */
/*Webページを開いた際（ページロード時）に何か演出*/
#wrap::before, #wrap::after {
  position: fixed;
  z-index: 1;
  top: -15%;
  display: block;
  visibility: hidden;
  width: 800px;
  height: 2208px;
  content: '';
  background: url("../img/kak.png");
}
#wrap::before {
  left: 0;
  animation: curtain_l 3s;
  -webkit-animation: curtain_l 3s;
}
#wrap::after {
  right: 0;
  animation: curtain_r 3s;
  -webkit-animation: curtain_r 3s;
}
@keyframes curtain_l {
  0% {
    visibility: visible;
  }
  20% {
    transform: rotate(0deg) translateX(0%);
    background: url("../img/kak.png");
  }
  60% {
    transform: rotate(6deg) translateX(-50%);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translateX(-100%);
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes curtain_l {
  0% {
    visibility: visible;
  }
  20% {
    -webkit-transform: rotate(0deg) translateX(0%);
    background: url("../img/kak.png");
  }
  60% {
    -webkit-transform: rotate(6deg) translateX(-50%);
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(0deg) translateX(-100%);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes curtain_r {
  0% {
    visibility: visible;
  }
  20% {
    transform: rotate(0deg) translateX(0%);
    background: url("../img/kak.png");
  }
  60% {
    transform: rotate(-6deg) translateX(50%);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes curtain_r {
  0% {
    visibility: visible;
  }
  20% {
    -webkit-transform: rotate(0deg) translateX(0%);
    background: url("../img/kak.png");
  }
  60% {
    -webkit-transform: rotate(-6deg) translateX(50%);
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(0deg) translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
}