@charset "UTF-8";

/* -----------------------------------------------
FileName: animation.css
----------------------------------------------- */

/* 透明から表示 */
.opacityFadeIn {
    opacity: 0;
}
.opacityFadeIn.visible {
    animation: opacityFadeIn 1.2s ease .6s 1 normal forwards;
    
}

@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 左から右にカーテン */
.curtainLefttoRight {
    position:relative;
    width: fit-content;
    opacity: 0;
    display: block;
}
.curtainLefttoRight.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out; 
    animation-delay: .6s;
    animation-fill-mode: forwards;
}

.curtainLefttoRight.visible.d0 {
    animation-delay: 0s;
}

.curtainLefttoRight.visible:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: rgba(41,76,122,1);
    animation-name: curtainLeft;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}

.curtainLefttoRight.d0.visible:before {
    animation-delay: 0s;
}


/* 左から右にカーテン2 */
.curtainLefttoRight2 {
    position:relative;
    width: fit-content;
    opacity: 0;
    display: block;
}
.curtainLefttoRight2.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out; 
    animation-delay: .6s;
    animation-fill-mode: forwards;
}

.curtainLefttoRight2.visible.d0 {
    animation-delay: 0s;
}

.curtainLefttoRight2.visible:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: rgba(255,255,255,1);
    animation-name: curtainLeft;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}

.curtainLefttoRight2.d0.visible:before {
    animation-delay: 0s;
}

/* 左から右にカーテン3 */
.curtainLefttoRight3 {
    position:relative;
    width: fit-content;
    opacity: 0;
    display: block;
}
.curtainLefttoRight3.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out; 
    animation-delay: .6s;
    animation-fill-mode: forwards;
}

.curtainLefttoRight3.visible.d0 {
    animation-delay: 0s;
}

.curtainLefttoRight3.visible:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: rgba(120,120,120,1);
    animation-name: curtainLeft;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}

.curtainLefttoRight3.d0.visible:before {
    animation-delay: 0s;
}


@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;
    width: fit-content;
    opacity: 0;
}
.curtainRighttoLeft.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}
.curtainRighttoLeft.visible:before {
    display: block;
    content: "";
    position:absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: rgba(41,76,122,1);
    animation-name:curtainRight;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}

@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);
  }
}

/* 左から右にふわっとフェードイン */
.fadeInLeft {
    opacity: 0;
}
.fadeInLeft.visible {
    animation: fadeInLeft 1.2s ease .6s 1 normal forwards;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
  }
}


/* 下から上にフェードイン */
.fadeInBottom {
    opacity: 0;
}
.fadeInBottom.visible {
animation: fadeInBottom .6s ease .6s 1 normal forwards;
}

/* fadeInBottom */
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}