@charset "utf-8";
/* ==================================================
   50年のあゆみ用エフェクト（統合版）: 旧 animate.css + story-box-zen.css
================================================== */

/* ========== 旧 animate.css ========== */

body {
    -webkit-backface-visibility: hidden
}
.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes swing {

    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transform-origin: top center
    }

    20% {
        -webkit-transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg)
    }

    100% {
        -webkit-transform: rotate(0deg)
    }
}
@-moz-keyframes swing {
    20% {
        -moz-transform: rotate(15deg)
    }

    40% {
        -moz-transform: rotate(-10deg)
    }

    60% {
        -moz-transform: rotate(5deg)
    }

    80% {
        -moz-transform: rotate(-5deg)
    }

    100% {
        -moz-transform: rotate(0deg)
    }
}
@-o-keyframes swing {
    20% {
        -o-transform: rotate(15deg)
    }

    40% {
        -o-transform: rotate(-10deg)
    }

    60% {
        -o-transform: rotate(5deg)
    }

    80% {
        -o-transform: rotate(-5deg)
    }

    100% {
        -o-transform: rotate(0deg)
    }
}
@keyframes swing {
    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(0deg)
    }
}
.swing {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
@-o-keyframes fadeIn {
    0% {
        opacity: 0
    }

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

    100% {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@-moz-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@-o-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut
}
@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg)
    }
}
@-moz-keyframes rollIn {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0px) rotate(0deg)
    }
}
@-o-keyframes rollIn {
    0% {
        opacity: 0;
        -o-transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0px) rotate(0deg)
    }
}
@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg)
    }
}
.rollIn {
    -webkit-animation-name: rollIn;
    -moz-animation-name: rollIn;
    -o-animation-name: rollIn;
    animation-name: rollIn
}

/* ========== 旧 story-box-zen.css ========== */
/** General **/

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

/** Smooth Animations **/

/** zenFadeIn **/

.zenFadeIn {
  -webkit-animation: zenFadeIn 0.5s;
  animation: zenFadeIn 0.5s;
}

/** zenFadeInUp **/

.zenFadeInUp {
  -webkit-animation: zenFadeInUp 0.5s;
  animation: zenFadeInUp 0.5s;
}

@-webkit-keyframes zenFadeInUp {
  0% {opacity: 0;-webkit-transform: translateY(200px);}
  100% {opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes zenFadeInUp {
  0% {opacity: 0;transform: translateY(200px);}
  100% {opacity: 1;transform: translateY(0);}
}

/** zenFadeInLeft **/

.zenFadeInLeft {
  -webkit-animation: zenFadeInLeft 0.5s;
  animation: zenFadeInLeft 0.5s;
}

@-webkit-keyframes zenFadeInLeft {
  0% {opacity: 0;-webkit-transform: translateX(-200px);}
  100% {opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes zenFadeInLeft {
  0% {opacity: 0;transform: translateX(-200px);}
  100% {opacity: 1;transform: translateY(0);}
}

/** zenFadeInDown **/

.zenFadeInDown {
  -webkit-animation: zenFadeInDown 0.5s;
  animation: zenFadeInDown 0.5s;
}

/** zenFadeInRight **/

.zenFadeInRight {
  -webkit-animation: zenFadeInRight 0.5s;
  animation: zenFadeInRight 0.5s;
}
@-webkit-keyframes zenFadeInRight {
  0% {opacity: 0;-webkit-transform: translateX(200px);}
  100% {opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes zenFadeInRight {
  0% {opacity: 0;transform: translateX(200px);}
  100% {opacity: 1;transform: translateY(0);}
}

/** zenFadeInBig **/

.zenFadeInBig {
  -webkit-animation: zenFadeIn 2s;
  animation: zenFadeIn 2s;
}

/** zenFadeInUpBig **/

.zenFadeInUpBig {
  -webkit-animation: zenFadeInUpBig 2s;
  animation: zenFadeInUpBig 2s;
}

@-webkit-keyframes zenFadeInUpBig {
  0% {opacity: 0;-webkit-transform: translateY(250px);}
  100% {opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes zenFadeInUpBig {
  0% {opacity: 0;transform: translateY(250px);}
  100% {opacity: 1;transform: translateY(0);}
}

/** zenFadeInLeftBig **/

.zenFadeInLeftBig {
  -webkit-animation: zenFadeInLeftBig 2s;
  animation: zenFadeInLeftBig 2s;
}
@-webkit-keyframes zenFadeInLeftBig {
  0% {opacity: 0;-moz-transform: translateX(-250px);}
  100% {opacity: 1;-moz-transform: translateX(0);}
}
@keyframes zenFadeInLeftBig {
  0% {opacity: 0;transform: translateX(-250px);}
  100% {opacity: 1;transform: translateX(0);}
}

/** zenFadeInDownBig **/

.zenFadeDownBig {
  -webkit-animation: zenFadeInDownBig 2s;
  animation: zenFadeInDownBig 2s;
}
@-webkit-keyframes zenFadeInDownBig {
  0% {opacity: 0;-webkit-transform: translateY(-250px);}
  100% {opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes zenFadeInDownBig {
  0% {opacity: 0;transform: translateY(-250px);}
  100% {opacity: 1;transform: translateY(0);}
}

/** zenFadeInRightBig **/

.zenFadeInRightBig {
  -webkit-animation: zenFadeInRightBig 2s;
  animation: zenFadeInRightBig 2s;
}
@-webkit-keyframes zenFadeInRightBig {
  0% {opacity: 0;-moz-transform: translateX(250px);}
  100% {opacity: 1;-moz-transform: translateX(0);}
}
@keyframes zenFadeInRightBig {
  0% {opacity: 0;transform: translateX(200px);}
  100% {opacity: 1;transform: translateX(0);}
}