/*========================================================
アニメーション
========================================================*/
.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;
}

.animated.fast { 
-webkit-animation-duration:0.5s;
animation-duration:0.5s;
}

@-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 slideLeft {
    100% {
        clip-path:inset(0);
        -webkit-clip-path:inset(0);
        opacity:1;
    }
}

.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 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;
}
@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);
}
/************************************************************************
  .expansion マウスホバーで拡大表示
************************************************************************/
.expansion { overflow:hidden; cursor:pointer; }
.expansion img { transition:0.5s; }
.expansion:hover img { transform:scale(1.1, 1.1); }

/* iframe */
.expansion iframe { transition:0.5s; }
.expansion:hover iframe { transform:scale(1.1, 1.1); }
/************************************************************************
  .expansion-bg 擬似要素の背景画像をマウスホバーで拡大表示
************************************************************************/
.expansion-bg { overflow:hidden; cursor:pointer; }
.expansion-bg::before { background-position:center; transition:0.5s; }
.expansion-bg:hover::before { transform:scale(1.1, 1.1); }
.expansion-bg::after { background-position:center; transition:0.5s; }
.expansion-bg:hover::after { transform:scale(1.1, 1.1); }
/************************************************************************
  .bk-slide 背景をスライドさせる
************************************************************************/
.hide { opacity:0; position:relative; }
.view { opacity:1; }

a.flag { width:100%; height:250px; /*background-color:rgba(255,0,0,0.5);*/ display:block; position:absolute; bottom:-250px; z-index:-9999; pointer-events:none; }
.view a.flag { opacity:0; }


.bk-slide { width:100%; height:100%; position:absolute; transition:0.5s; transition-delay:0; -webkit-transform:translateX(-100%); transform:translateX(-100%); }
.view .bk-slide { -webkit-transform:translateX(0%); transform:translateX(0%); }

.bk-slide .bk-slide-c { transition:1s; opacity:0; }
.view .bk-slide .bk-slide-c { transition-delay:0s; opacity:1; }
.view .bk-slide .bk-slide-c.slow { transition-delay:0.2s; }

.slide { /*width:100%; height:100%; position:absolute;*/ transition:0.5s; transition-delay:0; -webkit-transform:translateX(-100%); transform:translateX(-100%); }
.view .slide { -webkit-transform:translateX(0%); transform:translateX(0%); }
/************************************************************************
  floating
************************************************************************/
@keyframes floating {
from { transform:translate(0, 5px); }
50% { transform:translate(0, 0); }
to { transform:translate(0, 5px); }
}