.ai .car{
    top: -30px;
    left:calc(50% - 37px);
    position: absolute;
    animation-name: carMove;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ai .car img{
	width:75px;
}

@keyframes carMove{
    0% {
        transform: translateX(50vw) translateX(-37px);
    }
    50% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50vw) translateX(37px);
    }
}

.ai .ufo{
	top:0;
	left:50%;
	animation: ufoMoveX 4s ease-in-out infinite;
}

.ai .ufo img{
	width:75px;
	animation: ufoMoveY 4s -1s ease-in-out infinite;
}

@media screen and (max-width: 768px){
	.ai .ufo{
		animation: ufoMoveXSP 4s ease-in-out infinite;
	}

	.ai .ufo img{
		animation: ufoMoveYSP 4s -1s ease-in-out infinite;
	}
}

@keyframes ufoMoveX{
    0%,100%{
        transform: translateX(192px);
    }
    50%{
        transform: translateX(-192px);
    }
}
@keyframes ufoMoveY{
    0%,100%{
        transform: translateY(-96px) rotate(15deg);
    }
    50%{
        transform: translateY(96px) rotate(-15deg);
    }
}


@keyframes ufoMoveXSP{
    0%,100%{
        transform: translateX(25vw);
    }
    50%{
        transform: translateX(-25vw);
    }
}
@keyframes ufoMoveYSP{
    0%,100%{
        transform: translateY(-12vw) rotate(15deg);
    }
    50%{
        transform: translateY(12vw) rotate(-15deg);
    }
}


.ai .rocket,
.ai .house,
.ai .mirrorball,
.ai .child,
.ai .senior,
.ai .campaign,
.ai .card,
.ai .business,
.ai .savings,
.ai .under25,
.ai .smartphone,
.ai .atm,
.ai .bank,
.ai .operator{
    position: relative;
    height: 110px;
}

.ai .rocket {
    transform: translateX(-50vw) translateX(50%);
}

.ai .rocket > span{
    position: absolute;
    animation-name: rocketMove;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes rocketMove{
    0% {
        left: 100vw;
    }
    to {
        left: -200px;
    }
}
.ai .house > span{
    position: absolute;
    left: 30px;
}
.ai .mirrorball{
    height: 120px;
}
.ai .mirrorball > span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.ai .senior > span{
    position: absolute;
    right: 30px;
}
.ai .loan{
    position: relative;
    height: 110px;
    transform: translateX(-50vw) translateX(50%);
}
.ai .loan > span{
    position: absolute;
    animation-name: comFly;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
@keyframes comFly{
    0% {
        left: 100vw;
        top: 100px;
        transform: scaleX(1);
    }
    50% {
        left: -100px;
        top: 0;
        transform: scaleX(1);
    }
    51% {
        top: 100px;
        left: -100px;
        transform: scaleX(-1);
    }
    to {
        left: 100vw;
        top: 0;
        transform: scaleX(-1);
    }
}
.ai .card > span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.ai .business > span{
    position: absolute;
    left: 30px;
}
.ai .under25 > span{
    position: absolute;
    right: 30px;
}
.ai .child > span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.ai .campaign > span{
    position: absolute;
    left: 30px;
}
.ai .savings > span{
    position: absolute;
    left: 0;
}
.ai .transporter{
    position: relative;
    background: url(../image/town.svg) repeat no-repeat;
    background-size: auto 100px;
    height: 120px;
}
.ai .transporter > span{
    position: absolute;
    animation-name: transporterMove;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    bottom: 0;
}

.ai .transporter > span >img{
    transform: translateX(-50vw) translateX(50%);
}

@keyframes transporterMove{
    0% {
        left: calc(100vw + 200px);
    }
    to {
        left: -340px;
    }
}
.ai .smartphone > span{
    position: absolute;
    right: 20px;
}
.ai .atm {
    height: 130px;
}
.ai .atm > span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.ai .bank > span{
    position: absolute;
    right: 10px;
}
.ai .operator > span{
    position: absolute;
    left: 10px;
}

/*画像サイズ指定*/
.ai .rocket img{
    height: 100px;
}

.ai .house img{
    height: 100px;
}

.ai .mirrorball img{
    height: 120px;
}

.ai .senior img{
    height: 100px;
}

.ai .loan img{
    height: 65px;
}

.ai .card img{
    height: 100px;
}

.ai .business img{
    height: 100px;
}

.ai .under25 img{
    height: 100px;
}

.ai .child img{
    height: 100px;
}

.ai .campaign img{
    height: 100px;
}

.ai .saving img{
    height: 100px;
}

.ai .transporter img{
    height: 80px;
}

.ai .smartphone img{
    height: 100px;
}

.ai .atm img{
    height: 130px;
}

.ai .bank img{
    height: 100px;
}

.ai .operator img{
    height: 100px;
}