@charset "utf-8";

        .sample {
            position:  absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-image: url(../../../hpv4/images/mainBackGround.png);
            background-attachment: fixed;
            z-index:-1;
        }
        
        .sample li {
            position:  absolute;
            top: 330px;
            left: 200px;
            width: 35%;
            height: 20%;
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: none;
            opacity: 0;
            -webkit-animation: anime 40s linear 0s infinite ;
            animation: anime 40s linear 0s infinite ;
        }
        
        
        .sample li:nth-child(1) { 
            background-image: url(../2013_11_NaraKanazawaNoto/images/1.png) 
        }
        .sample li:nth-child(2) {
            background-image: url(../2013_11_NaraKanazawaNoto/images/2.png);
            -webkit-animation-delay: 10s;
            animation-delay: 10s;
        }
        .sample li:nth-child(3) {
            background-image: url(../2013_11_NaraKanazawaNoto/images/3.png);
            -webkit-animation-delay: 20s;
            animation-delay: 20s;
        }
        .sample li:nth-child(4) {
            background-image: url(../2013_11_NaraKanazawaNoto/images/1.png);
            -webkit-animation-delay: 30s;
            animation-delay: 30s;
        }
        
        
        @-webkit-keyframes anime { 
            0% {
                -webkit-animation-timing-function: ease-in;
                opacity: 0;
            }
            10% {
                -webkit-transform: scale(1.1);
                opacity: 1;
            }
            40% {
                -webkit-transform: scale(1.2);
                    -webkit-animation-timing-function: ease-out;
                opacity: 1;
            }
            50% {
                -webkit-transform: scale(1.3);
                opacity: 0;
            }
            100% { opacity: 0 }
        }
        @keyframes anime { 
            0% {
                animation-timing-function: ease-in;
                opacity: 0;
            }
            10% {
                transform: scale(1.1);
                opacity: 1;
            }
            40% {
                transform: scale(1.2);
                    animation-timing-function: ease-out;
                opacity: 1;
            }
            50% {
                transform: scale(1.3);
                opacity: 0;
            }
            100% { opacity: 0 }
        }