/*========================================================
アニメーション
========================================================*/
.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(2);
        transform:scale(2);
        opacity:1;
    }
}
.pvBtn{
    -webkit-animation:0.5s forwards expand-pv;
    animation:0.5s forwards expand-pv;
    animation-delay:3.2s;
    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;
}

/************************************************************************
  .expanding 拡大表示する
************************************************************************/

.expanding {
-moz-transition:-moz-transform 0.2s linear;
-webkit-transition:-webkit-transform 0.2s linear;
-o-transition:-o-transform 0.2s linear;
-ms-transition:-ms-transform 0.2s linear;
transition:transform 0.2s linear;
}

.expanding:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
}
/************************************************************************
  .graphic-list ギャラリー用のエフェクト
************************************************************************/

ul.graphic-list li { position:relative; overflow:hidden; }

ul.graphic-list li a:before { content:'';
width:50%;
height:100%;
position:absolute;
top:0;
left:-75%;
z-index:2;
display:block;
background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform:skewX(
-25deg);
transform:skewX(
-25deg);
}

ul.graphic-list li a:hover:before {
-webkit-animation:shine .75s;
animation:shine .75s;
}
/************************************************************************
  h1.main-logo
************************************************************************/
h1.main-logo {
    clip-path: inset(0 100% 0 0);
}

h1.main-logo {
    opacity: 0;
    -webkit-animation: 1.0s forwards ease-in :eft;
    animation: 1.0s forwards ease-in :eft;
    animation-delay: 1.5s;
}

.light {
    width: 425px;
    height: 252px;
    background: url(../img/light_back.png) no-repeat center top;
    background-size: contain;
    position: absolute;
    top: 150px;
    left: -120px;
    -webkit-transform: scale(3);
    transform: scale(3);
}