.img-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75.00%; /*アスペクト比 16:9の場合の縦幅*/
    overflow: hidden;
    margin: 0 auto;
}
@media screen and (min-width: 960px){
.img-frame {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
}
}

.img-01, .img-02, .img-03 {
    display: none;
}

@media screen and (min-width: 960px){
.img-01, .img-02, .img-03 {
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
}

.img-04, .img-05, .img-06 {
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
@media screen and (min-width: 960px){
.img-04, .img-05, .img-06 {
    display: none;
}
}



.img-01 {
    background-image: url('../img/ph_main001.jpg');
    animation: slide-animation-01 24s infinite;
}

.img-02 {
    background-image: url('../img/ph_main002.jpg');
    animation: slide-animation-02 24s infinite;
}

.img-03 {
    background-image: url('../img/ph_main003.jpg');
    animation: slide-animation-03 24s infinite;
}

.img-04 {
    background-image: url('../img/ph_main001_2.jpg');
    animation: slide-animation-01 24s infinite;
}

.img-05 {
    background-image: url('../img/ph_main002_2.jpg');
    animation: slide-animation-02 24s infinite;
}

.img-06 {
    background-image: url('../img/ph_main003_2.jpg');
    animation: slide-animation-03 24s infinite;
}




@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
    30% {opacity: 1;}
    40% {opacity: 0; transform: scale(1.15);}
    90% {opacity: 0}
    100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
    30% {opacity: 0; transform: scale(1.1);}
    40% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0; transform: scale(1.0);}
    100% {opacity: 0;}
}

@keyframes slide-animation-03 {
    0% {opacity: 0;}
    60% {opacity: 0; transform: scale(1.0);}
    70% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; transform: scale(1.1);}
}