/* ----------------------------------------------------------------------
 カーテン
---------------------------------------------------------------------- */

/* 左から右にカーテン */
.curtainLefttoRight {
    position:relative;
}
.curtainLefttoRight.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;   
}
.curtainLefttoRight.visible:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #000;
    animation-name: curtainLeft;
    animation-duration: 1.0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes curtainLeftFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes curtainLeft{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* 右から左にカーテン */
.curtainRighttoLeft {
    position:relative;
}
.curtainRighttoLeft.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;   
}
.curtainRighttoLeft.visible:before {
    display: block;
    content: "";
    position:absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color:#000;
    animation-name:curtainRight;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes curtainRightFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes curtainRight{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}