@charset "UTF-8";
/*
========================================

	recruit > work > work_anime.css
    
========================================

.row.world li h4.fldTitle span.openMark {animation: blink_btn 3s linear infinite;}

@keyframes blink_btn {
    0% {
        box-shadow: 
        0px 0px 0px 0px rgba(197,202,233,1),
        0px 0px 0px 0px rgba(197,202,233,1);
    }
    25% {
        box-shadow: 
        0px 0px 0px 20px rgba(197,202,233,0.5),
        0px 0px 0px 5px rgba(197,202,233,1);
    }
    100% {
        box-shadow: 
        0px 0px 0px 80px rgba(197,202,233,0),
        0px 0px 0px 40px rgba(197,202,233,0);
    }
}*/

/*moving cloud*/
/*
.row.world li.field.f01 h4.fldTitle {animation: cloud_01 24s linear infinite; z-index: 999;}
.row.world li.field.f02 h4.fldTitle {animation: cloud_02 16s linear infinite; z-index: 999;}
.row.world li.field.f03 h4.fldTitle {animation: cloud_03 24s linear infinite; z-index: 999;}
.row.world li.field.f04 h4.fldTitle {animation: cloud_04 16s linear infinite; z-index: 999;}


.row.world li.field.f01 span.fldTitle {	-webkit-animation: cloud_01 24s linear infinite; animation: cloud_01 24s linear infinite;}
.row.world li.field.f02 span.fldTitle {	-webkit-animation: cloud_02 16s linear infinite; animation: cloud_02 16s linear infinite;}
.row.world li.field.f03 span.fldTitle {	-webkit-animation: cloud_03 24s linear infinite; animation: cloud_03 24s linear infinite;}
.row.world li.field.f04 span.fldTitle {	-webkit-animation: cloud_04 16s linear infinite; animation: cloud_04 16s linear infinite;}

@-webkit-keyframes ○○ { ----------iOS 8.0 以下や Android 4.4.x系向けに対応したい場合
}

@keyframes cloud_01 {
    0% {background-position:left center;}
    25% {background-position: center top;}
    50% { background-position:right center;}
    75% { background-position:center bottom;}
    100% { background-position:left center;}
}

@keyframes cloud_02 {
    0% {background-position:left center;}
    25% {background-position: center bottom;}
    50% { background-position:right center;}
    75% { background-position:center top;}
    100% { background-position:left center;}
}

@keyframes cloud_03 {
    0% {background-position:right center;}
    25% {background-position: center top;}
    50% { background-position:left center;}
    75% { background-position:center bottom;}
    100% { background-position:right center;}
}

@keyframes cloud_04 {
    0% {background-position:right center;}
    25% {background-position: center bottom;}
    50% { background-position:left center;}
    75% { background-position:center top;}
    100% { background-position:right center;}
}*/

/*moving item*/

/*footer {z-index: 11;}車とかが隠れるように*/

img.block {
    position: absolute;
    z-index: 11;
}

.anime_car_a_01,
.anime_car_a_02,
.anime_car_a_03,
.anime_car_a_04,
.anime_car_b_01,
.anime_car_b_02,
.anime_car_b_03,
.anime_car_b_04,
.anime_car_c_01,
.anime_car_c_02,
.anime_car_c_03,
.anime_car_c_04 {
    /*height: 5%; フィールドの縦横値から計算した正方形にする比率 */
    /*width: 2.875%;  フィールドの縦横値から計算した正方形にする比率 */
    height: 10%;   /*フィールドの縦横値から計算した正方形にする比率 */
    width: 5.75%;   /*フィールドの縦横値から計算した正方形にする比率 */
    /*
    background: url(/business/amenity/img/cloud.png) no-repeat center center;
    background-size: 100%;
    */
    position: absolute; /* 位置指定 */
    z-index: 9;
    visibility: hidden;
}

.anime_drone,
.anime_drone_02 {
    /*height: 5%; フィールドの縦横値から計算した正方形にする比率 */
    /*width: 2.875%;  フィールドの縦横値から計算した正方形にする比率 */
    height: 8%;   /*フィールドの縦横値から計算した正方形にする比率 */
    width: 4.6%;   /*フィールドの縦横値から計算した正方形にする比率 */
    /*
    background: url(/business/amenity/img/cloud.png) no-repeat center center;
    background-size: 100%;
    */
    position: absolute; /* 位置指定 */
    /*z-index: 10;*/
    visibility: hidden;

    /*border:1px solid #c3c;ガイド*/
}

.anime_plane {
    height: 100%;   /*フィールドの縦横値から計算した正方形にする比率 */
    width: 57.5%;   /*フィールドの縦横値から計算した正方形にする比率 */
    
    max-width: 480px;
    max-height: 480px;

    /*
    background: url(/business/amenity/img/cloud.png) no-repeat center center;
    background-size: 100%;
    */
    position: absolute; /* 位置指定 */
    /*z-index: 11;*/
    visibility: hidden;

    /*border:1px solid #c3c;ガイド*/
}

@media only screen and (min-width: 992px) {

    .anime_plane {
        max-width: 400px;
        max-height: 400px;

        /*border:1px solid #fc3;ガイド*/
    }

}


@media only screen and (min-width: 1280px) {

    .anime_plane {
        max-width: 480px;
        max-height: 480px;

        /*border:1px solid #3c9;ガイド*/
    }

}
@media only screen and (min-width: 1536px) {

    .anime_plane {
        max-width: 600px;
        max-height: 600px;

        /*border:1px solid #c3c;ガイド*/
    }

}

.anime_train {
    height: 40%;   /*フィールドの縦横値から計算した正方形にする比率 */
    width: 23%;   /*フィールドの縦横値から計算した正方形にする比率 */
    /*
    background: url(/business/amenity/img/cloud.png) no-repeat center center;
    background-size: 100%;
    */
    position: absolute; /* 位置指定 */
    z-index: 9;
    visibility: hidden;

     /*border:1px solid #c3c;ガイド*/
}

.anime_car_a_01,
.anime_car_a_02,
.anime_car_a_03,
.anime_car_a_04 {background: url(/business/amenity/img/car_a.png) no-repeat center center;background-size: 100%;}

.anime_car_b_01,
.anime_car_b_02,
.anime_car_b_03,
.anime_car_b_04 {background: url(/business/amenity/img/car_b.png) no-repeat center center;background-size: 100%;}

.anime_car_c_01,
.anime_car_c_02,
.anime_car_c_03,
.anime_car_c_04 {background: url(/business/amenity/img/car_c.png) no-repeat center center;background-size: 100%;}

.anime_drone {background: url("/business/amenity/img/drone_b.png") no-repeat center center;background-size: 100%; z-index: 97;} /*IEだけ背景画像切り替え不可のため*/
.anime_drone_02 {background: url("/business/amenity/img/drone_b.svg") no-repeat center center;background-size: 100%; z-index: 97;} /*IEだけ背景画像切り替え不可のため*/

.anime_plane {background: url(/business/amenity/img/plane.png) no-repeat center center;background-size: 100%; z-index: 99;}

.anime_train {background: url(/business/amenity/img/train.png) no-repeat center center;background-size: 100%;}

/*
.anime_car_a_01 {animation: car_f01_down 10s linear 0s infinite;}
.anime_car_a_02 {animation: car_f02_down 10s linear 0s infinite;}
.anime_car_a_03 {animation: car_f03_down 10s linear 10s infinite; visibility: hidden;}
.anime_car_a_04 {animation: car_f04_down 10s linear 0s infinite;}

.anime_car_b_01 {animation: car_f01_down 10s linear 5s infinite;}
.anime_car_b_02 {animation: car_f02_down 10s linear 5s infinite;}
.anime_car_b_03 {animation: car_f03_down 10s linear 15s infinite;}
.anime_car_b_04 {animation: car_f04_down 10s linear 5s infinite;}

.anime_car_c_01 {animation: car_f01_down 10s linear 10s infinite;}
.anime_car_c_02 {animation: car_f02_down 10s linear 10s infinite;}
.anime_car_c_03 {animation: car_f03_down 10s linear 20s infinite;}
.anime_car_c_04 {animation: car_f04_down 10s linear 10s infinite;}

.anime_car_d_01 {animation: car_f01_down 10s linear 15s infinite;}
.anime_car_d_02 {animation: car_f02_down 10s linear 15s infinite;}
.anime_car_d_03 {animation: car_f03_down 10s linear 25s infinite;}
.anime_car_d_04 {animation: car_f04_down 10s linear 15s infinite;}
*/

.anime_car_a_01 {animation: car_f01_down 16s linear 0s infinite;}
.anime_car_a_02 {animation: car_f02_down 16s linear 0s infinite;}
.anime_car_a_03 {animation: car_f03_down 16s linear 0s infinite;}
.anime_car_a_04 {animation: car_f04_down 16s linear 0s infinite;}

.anime_car_b_01 {animation: car_f01_down 16s linear 8s infinite;}
.anime_car_b_02 {animation: car_f02_down 16s linear 8s infinite;}
.anime_car_b_03 {animation: car_f03_down 16s linear 8s infinite;}
.anime_car_b_04 {animation: car_f04_down 16s linear 8s infinite;}

.anime_car_c_01 {animation: car_f01_up 16s linear 0s infinite;}
.anime_car_c_02 {animation: car_f02_up 16s linear 0s infinite;}
.anime_car_c_03 {animation: car_f03_up 16s linear 0s infinite;}
.anime_car_c_04 {animation: car_f04_up 16s linear 0s infinite;}

.anime_drone {animation: drone 16s linear 0s infinite alternate;}
.anime_drone_02 {animation: drone02 16s linear 0s infinite alternate;}

.anime_plane {animation: plane 24s linear 8s infinite;}

.anime_train {animation: train 24s linear 0s infinite alternate;}

@keyframes car_f01_down {/*field01での車の動き_下り*/

0% {
    visibility: visible;
    /*background-color: #fc3;目印*/
    right: 0;
    bottom:35%;
}
 
100% {
    right: 50%;
    bottom: -15%;
}

}

@keyframes car_f02_down {/*field02での車の動き_下り*/

0% {
    visibility: visible;
    /*background-color: #c33;目印*/
    right: 50%;
    top: 5%;
    transform: scaleX(1);
}

50% {
    right: 90%;
    top: 45%;
    transform: scaleX(1);
}
    
55% {
    right: 90%;
    top: 45%;
    transform: scaleX(-1);
}

85% {
    right: 40%;
    top: 95%;
    transform: scaleX(-1);
}
    
90% {
    right: 40%;
    top: 95%;
    transform: scaleX(1);
}

100% {
    right: 50%;
    top: 105%;
    transform: scaleX(1);
}

}

@keyframes car_f03_down {/*field03での車の動き_下り*/

0% {
    visibility: visible;
    /*background-color: #03f;目印*/
    right: 50%;
    top: 5%;
    transform: scaleX(1);
}
   
10% {
    right: 50%;
    top: 5%;
    transform: scaleX(1);
}

20% {
    right: 60%;
    top: 12.5%;
    transform: scaleX(1);
}
    
25% {
    right: 60%;
    top: 12.5%;
    transform: scaleX(-1);
}
    
55% {
    right: 25%;
    top: 47.5%;
    transform: scaleX(-1);
}

65% {
    right: 25%;
    top: 47.5%;
    transform: scaleX(-1);
}
    
75% {
    right: 10%;
    top: 62.5%;
    transform: scaleX(-1);
}
    
80% {
    right: 10%;
    top: 62.5%;
    transform: scaleX(1);
}

100% {
    right: 50%;
    top: 105%;
    transform: scaleX(1);
}

}

@keyframes car_f04_down {/*field04での車の動き_下り*/

0% {
    visibility: visible;
    /*background-color: #000;目印*/
    right: 50%;
    top:5%;
}
 
50% {
    right: 100%;
    top:55%;
}
    
60% {
    right: 100%;
    top:55%;
}
    
100% {
    right: 200%;
    top:155%;
}

}

@keyframes car_f04_up {/*field04での車の動き_登り*/

0% {
    visibility: visible;
    /*background-color: #fc3;目印*/
    left: 0;
    top:35%;
    transform: scaleX(-1);
}
    
70% {
    left: 32.5%;
    top: 4%;
    transform: scaleX(-1);
}

85% {
    left: 32.5%;
    top: 4%;
    transform: scaleX(-1);
}
    
90% {
    left: 40%;
    top: -4%;
    transform: scaleX(-1);
}
    
95% {
    left: 40%;
    top: -4%;
    transform: scaleX(1); 
    /*opacity: 1;*/
}
/*
99% {
left: 35%;
top: -10%;
transform: scaleX(1);
opacity: 1;
}
*/
100% {
    left: 35%;
    top: -10%;
    transform: scaleX(1);
    /*opacity: 0;*/
}

}

@keyframes car_f03_up {/*field03での車の動き_登り*/

0% {
    visibility: visible;
    /*background-color: #cc3;目印*/
    left:50%;
    top:85%;
    transform: scaleX(-1);
}
 
100% {
    left: 100%;
    top: 35%;
    transform: scaleX(-1);
}

}

@keyframes car_f02_up {/*field02での車の動き_登り*/

0% {
    visibility: visible;
    /*background-color: #cc3;目印*/
    left:35%;
    top:90%;
}
    
50% {
    left: 5%;
    top: 60%;
}
    
70% {
    left: 5%;
    top: 60%;
}

100% {
    left: -10%;
    top: 45%;
}

}

@keyframes car_f01_up {/*field01での車の動き_登り*/

0% {
    visibility: visible;
    /*background-color: #cc3;目印*/
    left:90%;
    top:45%;
}

50% {
    left: 72.5%;
    top: 27%;
}
    
100% {
    left: 72.5%;
    top: 27%;
}

}

@keyframes drone {/*ドローン(旧)*/

0% {
    visibility: visible;
    left:15%;
    bottom:9%;
    height: 5%;
    width: 2.875%;
    background: url("/business/amenity/img/drone_a.png") no-repeat center center;
    background-size: 100%; 
}
    
3% {
    background: url("/business/amenity/img/drone_b.png") no-repeat center center;
    background-size: 100%; 
}

15% {
    left:15%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}
    
20% {
    bottom:20%;
}
   
25% {
    left:25%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}

35% {
    left:35%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}
    
45% {
    left:25%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}
    
55% {
    left:15%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}

65% {
    left:5%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}
    
70% {
    bottom:30%;
}

75% {
    left:15%;
    bottom:25%;
    height: 12%;
    width: 6.9%;
    background: url("/business/amenity/img/drone_c.png") no-repeat center center;
    background-size: 100%; 
}

87% {
    background: url("/business/amenity/img/drone_b.png") no-repeat center center;
    background-size: 100%; 
}
    
90% {
    left:15%;
    bottom:9%;
    height: 5%;
    width: 2.875%;
    background: url("/business/amenity/img/drone_a.png") no-repeat center center;
    background-size: 100%; 
}
        
100% {
    left:15%;
    bottom:9%;
    height: 5%;
    width: 2.875%;
    background: url("/business/amenity/img/drone_a.png") no-repeat center center;
    background-size: 100%; 
}

}

@keyframes drone02 {/*ドローン（新）*/

    0% {
        visibility: visible;
        right:15%;
        bottom:29%;
        height: 5%;
        width: 2.875%;
        background: url("/business/amenity/img/drone_a.svg") no-repeat center center;
        background-size: 100%; 
    }
        
    3% {
        background: url("/business/amenity/img/drone_b.svg") no-repeat center center;
        background-size: 100%; 
    }
    
    15% {
        right:15%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
        
    20% {
        bottom:40%;
    }
       
    25% {
        right:25%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
    
    35% {
        right:35%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
        
    45% {
        right:25%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
        
    55% {
        right:15%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
    
    65% {
        right:5%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
        
    70% {
        bottom:50%;
    }
    
    75% {
        right:15%;
        bottom:45%;
        height: 12%;
        width: 6.9%;
        background: url("/business/amenity/img/drone_c.svg") no-repeat center center;
        background-size: 100%; 
    }
    
    87% {
        background: url("/business/amenity/img/drone_b.svg") no-repeat center center;
        background-size: 100%; 
    }
        
    90% {
        right:15%;
        bottom:29%;
        height: 5%;
        width: 2.875%;
        background: url("/business/amenity/img/drone_a.svg") no-repeat center center;
        background-size: 100%; 
    }
            
    100% {
        right:15%;
        bottom:29%;
        height: 5%;
        width: 2.875%;
        background: url("/business/amenity/img/drone_a.svg") no-repeat center center;
        background-size: 100%; 
    }
}


@keyframes plane {/*飛行機*/

    0% {
        visibility: visible;
        /*background-color: #fc3;目印*/
        right: -57.5%;
        /*top:-75%;*/
        top:-50%;
        /*border: 1px solid #000;*/
    }

    100% {
        right: 257.5%;
        /*top:225%;*/
        top:200%;
        /*border: 1px solid #000;*/
    }

}

@keyframes train {/*電車*/

    0% {
        visibility: visible;
        left: 30%;
        top:30.5%;
    }
        
    10% {
        visibility: visible;
        left: 30%;
        top:30.5%; 
    } 

    100% {
        left: 100%;
        top: -40%;
    }
    
}