@charset "UTF-8";

/* ================================
    slider
================================ */
.wrap-slider{
    width: 100%; /*スライドのサイズの調整はここらへん */
    height: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.slider{
    width: 100%;
    height: 100%;
    position: relative;
}
.slider > li{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 500;    
}
.slider > li.is-active{ z-index: 100; }
.slider > li:not(:first-child){ display: none;}
.slider > li:not(.is-active) > span{ animation: fadeOut 1s ease-in-out forwards;} /* スライドアウトのアニメーションの調整 */
@media (min-width:768px){ .slider > li:not(.is-active) > span{ animation-duration: 1s; } }
.slider > li > span{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.slider > li img{ position: relative; max-width: none; }
.slider > li.animated[data-slideImg="zoomIn"] img{ animation: zoomIn 20s infinite; }
.slider > li.animated[data-slideImg="zoomOut"] img{ animation: zoomOut 20s infinite; }

/* animation
---------------------- */
@keyframes slideOut{ 100%{ width: 0; } }
@keyframes slideOut_right{ 100%{ width: 0; } }
@keyframes zoomIn{ 100%{ transform: scale(1.2);} }
@keyframes zoomOut{ 0%{ transform: scale(1.2)} 100%{ transform: scale(1);} }
@keyframes fadeOut{ 0%{ opacity: 1;} 100%{ opacity: 0;} }