/*========================================================
アニメーション
========================================================*/
.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 0;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes fadeInNorml {
    from {
        opacity: 0;
       -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInNorml {
    -webkit-animation-name: fadeInNorml;
    animation-name: fadeInNorml;
}
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -8%, 0);
        transform: translate3d(0, -8%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(6%, 0, 0);
        transform: translate3d(6%, 0, 0);

    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@keyframes catchCopyRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(6%, 0, 0) scale(1.5);
        transform: translate3d(6%, 0, 0) scale(1.5);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes catchCopyLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 0, 0) scale(1.5);
        transform: translate3d(-10%, 0, 0) scale(1.5);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.catchCopy01 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyRight;
    animation: 0.7s forwards ease-in-out catchCopyRight;
    opacity: 0;
}
.catchCopy02 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyRight;
    animation: 0.7s forwards ease-in-out catchCopyRight;
    opacity: 0;
    animation-delay: 0.2s;
}
.catchCopy03 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyRight;
    animation: 0.7s forwards ease-in-out catchCopyRight;
    opacity: 0;
    animation-delay: 0.4s;
}
.catchCopy04 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyLeft;
    animation: 0.7s forwards ease-in-out catchCopyLeft;
    opacity: 0;
    animation-delay: 0.6s;
}
.catchCopy05 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyLeft;
    animation: 0.7s forwards ease-in-out catchCopyLeft;
    opacity: 0;
    animation-delay: 0.8s;
}
.catchCopy06 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyLeft;
    animation: 0.7s forwards ease-in-out catchCopyLeft;
    opacity: 0;
    animation-delay: 1s;
}
.catchCopy07 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyLeft;
    animation: 0.7s forwards ease-in-out catchCopyLeft;
    opacity: 0;
    animation-delay: 1.2s;
}
.catchCopy08 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyLeft;
    animation: 0.7s forwards ease-in-out catchCopyLeft;
    opacity: 0;
    animation-delay: 1.4s;
}
.catchCopy09 {
    -webkit-animation: 0.7s forwards ease-in-out catchCopyLeft;
    animation: 0.7s forwards ease-in-out catchCopyLeft;
    opacity: 0;
    animation-delay: 1.6s;
}
@keyframes slideLeft {
    100% {
        clip-path: inset(0);
        -webkit-clip-path: inset(0);
        opacity: 1;
    }
}
.logo{
    -webkit-animation: 1.0s forwards ease-in  slideLeft;
    animation: 1.0s forwards ease-in  slideLeft;
    opacity: 0;
    animation-delay: 1.5s;
}
.date{
    -webkit-animation: 0.5s forwards ease-in slideLeft;
    animation: 0.5s forwards ease-in slideLeft;
    opacity: 0;
    animation-delay: 2.4s;
}
.slideL{
    -webkit-animation: 1.0s forwards ease-in  slideLeft;
    animation: 1.0s forwards ease-in  slideLeft;
    opacity: 0;
}
.secTtl{
    -webkit-animation: 0.7s forwards ease-in  expandN;
    animation: 0.7s forwards ease-in  expandN;
    opacity: 0;
}
@keyframes expand-pv {
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.pvBtn{
    -webkit-animation: 0.5s forwards expand-pv;
    animation: 0.5s forwards expand-pv;
    animation-delay: 1s;
    opacity: 0;
}
@keyframes light {
    100% {
        -webkit-transform: translateX(340px) scale(0.1);
        transform: translateX(340px) scale(0.1);
        opacity: 1;
    }
}
.lightEffect{
    -webkit-animation: 1.2s ease-in-out light;
    animation: 1.2s ease-in-out light;
    animation-delay: 1.8s;
    opacity: 0;
}
@keyframes expandN {
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
.expandN{
    -webkit-animation: 1.5s forwards expandN;
    animation: 1.5s forwards expandN;
    opacity: 0;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}
.shine{
    -webkit-animation-name: shine;
    animation-name: shine;
    animation-delay: 1.6s;
    opacity: 1;
}
.storyTxt{
   -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft; 
    animation-delay:1s;
    opacity: 1;
}
.storyImg{
   -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-delay:1.5s;
    opacity: 1;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}