@charset "UTF-8";
.animated{
  opacity: 0;
  animation-duration: 0.6s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 768px) {
  .animated{
    opacity: 1;
    animation-duration: 0.6s;
    animation-delay: 0.2s;
  }
} 
    

.duration1s{
  animation-duration: 1s;
}

.duration1-5s{
  animation-duration: 1.5s;
}

.duration2s{
  animation-duration: 2s;
}


.delay-1s{
  animation-delay: 0.1s;
}

.delay-2s{
  animation-delay: 0.2s;
}

.delay-3s{
  animation-delay: 0.3s;
}

.delay-5s{
  animation-delay: 0.5s;
}

.delay-6s{
  animation-delay: 0.6s;
}

.delay-7s{
  animation-delay: 0.7s;
}

.delay-8s{
  animation-delay: 0.8s;
}

.delay-9s{
  animation-delay: 0.9s;
}

.delay1s{
  animation-delay: 1s;
}

.delay1-1s{
  animation-delay: 1.1s;
}

.delay1-2s{
  animation-delay: 1.2s;
}

.delay1-3s{
  animation-delay: 1.3s;
}

.delay1-4s{
  animation-delay: 1.4s;
}

.delay1-5s{
  animation-delay: 1.5s;
}

.delay1-6s{
  animation-delay: 1.6s;
}

.delay1-7s{
  animation-delay: 1.7s;
}

.delay1-8s{
  animation-delay: 1.8s;
}

.delay1-9s{
  animation-delay: 1.9s;
}

.delay2s{
  animation-delay: 2s;
}

.delay2-1s{
  animation-delay: 2.1s;
}

.delay2-2s{
  animation-delay: 2.2s;
}

.delay2-3s{
  animation-delay: 2.3s;
}

.delay2-5s{
  animation-delay: 2.5s;
}
.delay2-6s{
  animation-delay: 2.6s;
}


.delay2-7s{
  animation-delay: 2.7s;
}

.delay2-8s{
  animation-delay: 2.8s;
}

.delay2-9s{
  animation-delay: 2.9s;
}

.delay3s{
  animation-delay: 3s;
}

.delay3-1s{
  animation-delay: 3.1s;
}

.delay3-2s{
  animation-delay: 3.2s;
}

.delay3-3s{
  animation-delay: 3.3s;
}

.delay3-4s{
  animation-delay: 3.4s;
}

.delay3-5s{
  animation-delay: 3.5s;
}

.delay3-6s{
  animation-delay: 3.6s;
}

.delay3-8s{
  animation-delay: 3.8s;
}

.delay4s{
  animation-delay: 4s;
}

.delay4-1s{
  animation-delay: 4.1s;
}

.delay4-2s{
  animation-delay: 4.2s;
}

.delay4-3s{
  animation-delay: 4.3s;
}

.delay4-4s{
  animation-delay: 4.4s;
}
.delay4-5s{
  animation-delay: 4.5s;
}


.delay4-6s{
  animation-delay: 4.6s;
}

.delay4-7s{
  animation-delay: 4.7s;
}

.delay4-8s{
  animation-delay: 4.8s;
}

.delay4-9s{
  animation-delay: 4.9s;
}

.delay5s{
  animation-delay: 5s;
}
.delay5-2s{
  animation-delay: 5.2s;
}
.delay5-3s{
  animation-delay: 5.3s;
}
.delay5-4s{
  animation-delay: 5.4s;
}
.delay5-6s{
  animation-delay: 5.6s;
}

.delay5-5s{
  animation-delay: 5.5s;
}

.delay6s{
  animation-delay: 6s;
}
.delay6-5s{
  animation-delay: 6.5s;
}
.delay7s{
  animation-delay: 7s;
}
.delay7-5s{
  animation-delay: 7.5s;
}
.delay8s{
  animation-delay: 8s;
}
.delay9s{
  animation-delay: 9s;
}
.delay10s{
  animation-delay: 10s;
}

@-webkit-keyframes fadeInFirst{
  0%{opacity:0}to{opacity:1}
}
@keyframes fadeInFirst{
  0%{opacity:0}to{opacity:1}
}

.fadeInFirst{
  -webkit-animation-name:fadeInFirst;
  animation-name:fadeInFirst;
}


/* fadeInUp
------------------------------------------------ */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* fadeInLeft
------------------------------------------------ */
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* fadeInLeft2
------------------------------------------------ */
@-webkit-keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft2 {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* fadeInRight
------------------------------------------------ */
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* fadeInRight2
------------------------------------------------ */
@-webkit-keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight2 {
  -webkit-animation-name: fadeInRight2;
  animation-name: fadeInRight2;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* bounceInUp
------------------------------------------------ */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.13, 1.13, 1.13);
    transform: scale3d(1.13, 1.13, 1.13);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.13, 1.13, 1.13);
    transform: scale3d(1.13, 1.13, 1.13);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* bounce
------------------------------------------------ */
@-webkit-keyframes bounce {
  from {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounce {
  from {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* bounce2
------------------------------------------------ */
@-webkit-keyframes bounce2 {
  from {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

  20% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounce2 {
  from {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

  20% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounce2 {
  -webkit-animation-name: bounce2;
  animation-name: bounce2;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* bounce3
------------------------------------------------ */
@-webkit-keyframes bounce3 {
  from {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
    opacity: 0;
  }

  20% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    opacity: 1;
  }

  25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
@keyframes bounce3 {
  from {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
    opacity: 0;
  }

  20% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    opacity: 1;
  }

  25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
.bounce3 {
  -webkit-animation-name: bounce3;
  animation-name: bounce3;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* クロスフェード用アニメ
------------------------------------------------ */
@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        z-index:9;
    }
    100% { opacity: 0 }
}

/* マスク用アニメ
------------------------------------------------ */
@keyframes play {
  from {
    transform: translateX(0);   /* 変形 横,縦 */
    opacity: 0;
  }
  2% {
    transform: translateX(0);   /* 変形 横,縦 */
    opacity: 1;
  }
  to {
    transform: translateX(0);   /* 変形 横,縦 */
    opacity: 1;
  }
}

@-webkit-keyframes play {
  from {
    transform: translateX(0);   /* 変形 横,縦 */
    opacity: 0;
  }
  2% {
    transform: translateX(0);   /* 変形 横,縦 */
    opacity: 1;
  }
  to {
    transform: translateX(100%);   /* 変形 横,縦 */
    opacity: 1;
  }
}
@-webkit-keyframes maskOut {
  from {
    opacity: 1;
    transform   : scale(1, 1);
  }
  
  to {
    opacity: 0;
    transform   : scale(0, 1);
  }
}
@keyframes maskOut {
  from {
    opacity: 1;
    transform   : scale(1, 1);
  }
  
  to {
    opacity: 0;
    transform   : scale(0, 1);
  }
}  
@-webkit-keyframes maskIn {
  from {
    transform   : scale(0, 1);   /* 変形 横,縦 */
  }
  to {
    transform   : scale(1, 1);   /* 変形 横,縦 */
  }
}
@keyframes maskIn {
  from {
    transform   : scale(0, 1);   /* 変形 横,縦 */
  }
  to {
    transform   : scale(1, 1);   /* 変形 横,縦 */
  }
}

@-webkit-keyframes bgIN {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}
@keyframes bgIN {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}  


/* end
------------------------------------------------ */
.box {
  width: 100%;
  margin: 0 0 2% 0;
  position: relative;
}
.box.onAction:before {
  animation-name: maskIn;
  animation-duration: .5s;
  animation-delay: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(233,233,233,0.6);*/
  background: #f5f5f5;
  border-radius:20px;
  transform : scale(0, 1);
  transform-origin : 0% 50% ;
  opacity: 1;
}
.box.onAction.right:before {
  transform-origin : 100% 50% ;
}

.box .boxInner {
  width: inherit;
  height: inherit;
  box-shadow: 10px 10px 0 0 rgba(24, 75, 138, 0.2);
  border-radius:  20px;
}

.isPlay {
  animation-name: bgIN;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 0;
}
  
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /*background-image: linear-gradient( 109.6deg,  rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );*/
  background: #f5f5f5;
  border-radius:20px;
  opacity: 1;
  transform : scale(1, 1);
  transform-origin : 100% 50% ;
}

.isPlay.right:before {
  transform-origin : 0% 50% ;
}