@charset "utf-8";
/* 背景 */
.front-img{
     position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
} 
.front-img ul{
}
.front-img img {
    min-height: 100%;
    min-width: 100%;   
}
.front-img li:nth-child(1) { 
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.front-img li:nth-child(2) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
@-webkit-keyframes front-anime { 
    0% {
        -webkit-animation-timing-function: ease-in;
        opacity: 0;
    }
    25% {
        -webkit-transform: scale(1.01);
        opacity: 1;
        -webkit-animation-timing-function: ease-out; 
    } 
    50% {
        -webkit-transform: scale(1.02);
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
    100% { opacity: 0 }
}
@keyframes front-anime { 
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    25% {
        transform: scale(1.01);
        opacity: 1;
        animation-timing-function: ease-out; 
    } 
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
    80% {
        transform: scale(1.1);
        opacity: 0;
    }
    100% { opacity: 0 }
}
/* ########### 768px 以下 ########### */
@media (max-width:768px){
.front-img ul{
}
.front-img-pc{display: none
}
.front-img li {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;

    width: 56.25vh; /* 9:16 の幅→9 ÷ 16＝ 177.77% */
    height: 177.77777778vw; /* 9:16の幅 → 16 ÷ 9 = 56.25% */
    min-height: 100%;
    min-width: 100%;
   top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: front-anime 16s linear infinite 0s;
    animation: front-anime 16s linear infinite 0s;	
}
}
/* ########### 769px 以上 ########### */
@media (min-width:769px){
.front-img ul{
}
.front-img-sp{display: none
}
.front-img li {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;

    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
   top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: front-anime 16s linear infinite 0s;
    animation: front-anime 16s linear infinite 0s;	
}
}