/* CSS Document */
.visual_frame{
   position: relative;
   width: 70%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}

.visual_frame{
   width: 100%;
   height: 200px;
}
.vis1, 
.vis2, 
.vis3, 
.vis4, 
.vis5{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.vis1{
   background-image: url('images/main_visual1.jpg');
   animation: slide-animation-01 20s infinite;
}
.vis2{
   background-image: url('images/main_visual2.jpg');
   animation: slide-animation-02 20s infinite;
}
.vis3{
   background-image: url('images/main_visual3.jpg');
   animation: slide-animation-03 20s infinite;
}
.vis4{
   background-image: url('images/main_visual4.jpg');
   animation: slide-animation-04 20s infinite;
}
.vis5{
   background-image: url('images/main_visual5.jpg');
   animation: slide-animation-05 20s infinite;
}
@keyframes slide-animation-01 {
 0% {opacity: 1; transform: scale(1.0);}
 10% {opacity: 1;}
 30% {opacity: 0; transform: scale(1.15);}
 80% {opacity:  1; transform: scale(1.0);}
100% {opacity:0}
}
/*vision*/
@keyframes slide-animation-02 {
 0% {opacity: 0;}
 10% {opacity: 0; transform: scale(1.1);}
 30% {opacity: 1;}
 80% {opacity: 0; transform: scale(1.0);}
 100% {opacity: 0;}
}
/*production*/
@keyframes slide-animation-03 {
 0% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 1;transform: scale(1.5);}
 60% {opacity: 1;}
 80% {opacity: 0; transform: scale(1.15);}
 100% {opacity: 0;}
}
/*total management*/
@keyframes slide-animation-04 {
 0% {opacity: 0;}
 60% {opacity: 0;}
 80% {opacity: 1; transform: scale(1.15);}
 90% {opacity: 0; transform: scale(1.0);}
 100% {opacity: 0;}
}
/*parts*/
@keyframes slide-animation-05 {
 0% {opacity: 0;}
 60% {opacity: 0;}
 80% {opacity: 0; transform: scale(1.0);}
 90% {opacity: 1}
100% {opacity: 0.8; transform: scale(1.1);}
}