@charset "utf-8";

.service_header{ background-color:#333; }
.service_header .image{position:relative;background:url(../img/service_head.jpg) 100% 50% no-repeat;-webkit-background-size:cover;background-size:cover;}
.service_header .image::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#151515;}
.service_header .text{display:-webkit-flex;display:flex;justify-content: center;align-items: center;background:url(../img/service_bg.jpg) 0% 100% no-repeat;-webkit-background-size:cover;background-size:cover;}
.service_header .h1_title{max-width:420px;margin-right:auto;margin-left:auto;color:#fff;}
.service_header .h1_title h1{font-size:64px;line-height:1.25;}
.service_header .h1_title p{font-size:14px;padding-left:20px;position:relative;}
.service_header .h1_title p::after{content:"";background-color:#FFD900;width:10px;height:10px;display:block;-webkit-border-radius: 50%; border-radius: 50%;position:absolute;top:7px;left:6px;}

.def_h2{font-size:35px;background:url(../img/icon.png) 0 24px no-repeat;padding-left:36px;}

.service_announce{position:relative;}
.service_announce .area{ width:90%;max-width:1620px;margin:-87px auto 0;background-color:#fff;text-align:center;padding:76px 0 58px; }
.service_announce .box{ max-width:665px;margin-right:auto;margin-left:auto; }
.service_announce h2{ font-size:40px;margin-bottom:20px; }
.service_announce .text{margin-top:24px;}
.service_announce p{ line-height:2; }
.service_announce ul{ display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;justify-content: space-between; }
.service_announce li{ max-width:320px;width:48.1%; }
.service_announce li a{ display:block;padding:17px 10px;font-size:18px;line-height:1.3;border:1px solid #dadada;text-decoration: none;position:relative; }
.service_announce li a::before{position: absolute;background-color:#fff;width: 0%;height: 100%;background: #FFE100;top: 0;left: 0;display: block;content: "";}
.service_announce li a span{display:block;position:relative;}
.service_announce li.on a::before{width: 100%;}

.service_menu .area{ padding-bottom:49px; }
.service_menu ul{ display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;justify-content:center; }
.service_menu li{ padding:0 40px 20px; }
.service_menu li a{ position:relative;display:block;padding-bottom:5px;display:-webkit-flex;display:flex;text-decoration: none; }
.service_menu li a > span{ display:block;line-height:33px; }
.service_menu li .num{ margin-right:5px;font-size:18px;color:#bcbcbc; }
.service_menu li .name{ font-size:25px; }

.service_menu li.part2{ display:none; }
.service_menu.on_new li.part1{ display:none; }
.service_menu.on_new li.part2{ display:block; }

.service_feature { background-color:#F8F8F8; }
.service_feature .wrapper{ max-width:1280px;padding:96px 20px 111px;margin-right:auto;margin-left:auto; }
.service_feature h2{margin-bottom:35px;}
.service_feature .area{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.service_feature .box{ width:31.8%;margin-right:2.3%; }
.service_feature .box:nth-child(3n){ margin-right:0; }
.service_feature .image{ margin-bottom:20px;width: 100%;position: relative; }
.service_feature .image:before{ padding-top: 56.25%;content:"";display: block;}
.service_feature .image span{ position: absolute;top: 0;left: 0;width: 100%;height: 100%; overflow: hidden;}
.service_feature .title{ font-weight:bold;font-size:20px;margin-bottom:7px;  }
.service_feature .text{ line-height:1.875; }

.service_flow .wrapper{ padding:94px 20px 110px;max-width:1444px;margin-right:auto;margin-left:auto; }
.service_flow h2{margin: 0 auto 56px;max-width:1320px; }
.service_flow .guidance{ padding:0 8.2% 0 37.6%;position:relative;/**background:url(../img/service_guidance.jpg) 0% 0% no-repeat;**/ }
.service_flow .guidance > *{position:relative;}
.service_flow .steps{ margin-bottom:53px; }
.service_flow .steps ul{ display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;align-items:center; }
.service_flow .steps li{ position:relative; }
.service_flow .steps li.step{ border:1px solid #dadada;min-width:190px;height:94px;text-align:center;line-height:1.5;padding:35px 5px;background-color:rgba(255,255,255,0.8); }
.service_flow .steps li.step span{ position:absolute;top:-18px;left:50%;width:121px;margin-left:-60.5px;height:121px;height:36px;display:block; }
.service_flow .steps li.arrow{ width:66px;height:94px;background:url(../img/step_arrow.png) 50% 50% no-repeat;-webkit-background-size:auto 14px;background-size:auto 14px;text-indent:150%;overflow:hidden;white-space:nowrap; }
.service_flow .boxes .box{ margin-bottom:45px;max-width:502px; }
.service_flow .boxes .box:nth-child(2){ margin-left:72px; }
.service_flow .boxes .box:nth-child(3){ margin-left:144px; }
.service_flow .boxes .box:nth-child(4){ margin-left:144px; }
.service_flow .boxes .box:nth-child(5){ margin-left:144px; margin-bottom:0 }
.service_flow .boxes h3{ font-size:25px;margin-bottom:20px; }
.service_flow .boxes p{ line-height:1.875; }
.service_flow .guidance::before {content: "";display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background: url(../img/service_guidance.jpg) 0% 0% no-repeat;background-size: 628px auto;}

.service_flow .lineup{ padding-left:10px; }
.service_flow .lineup .box{ margin-bottom:56px;max-width:622px;padding:32px 42px 25px 50px;position:relative;border:1px solid #dadada;background-color:#fff; }
.service_flow .lineup .box:nth-child(2){ margin-left:55px; }
.service_flow .lineup .box:nth-child(3){ margin-left:110px; }
.service_flow .lineup .box:nth-child(4){ margin-left:110px; }
.service_flow .lineup .box:nth-child(5){ margin-left:110px; margin-bottom:0; }

.service_flow .lineup h3{ font-size:25px;margin-bottom:20px; }
.service_flow .lineup p{ line-height:1.875; }
.service_flow .lineup .num{ position:absolute;width:93px;height:93px;top:-46px;left:-30px;display:block; }

.service_results{ background-color:#F8F8F8; }
.service_results .wrapper{ padding:90px 20px 106px; } 
.service_results h2{ margin:0 auto 17px;max-width:1360px; }
.service_results .rail{ margin:0 -20px;min-height:600px;position:relative; }
.service_results .train{ display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;/** 416px * 2 **/ }
.service_results .box{ width:346px;background-color:#fff;margin-right:70px;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); }
.service_results .image{ height:317px;position:relative;margin-bottom:0;overflow-y:hidden; }
.service_results .image img{width:100%;}
.service_results figcaption{width:calc(100% - 102px);position:absolute;bottom:20px;left:0;background-color:rgba(255,255,255,0.9);padding:5px  10px 18px;}
.service_results figcaption .role{font-size:14px;color:#9a9a9a;line-height:2;display:block;}
.service_results figcaption .name{line-height:1.3;display:block;}
.service_results .text{ padding:20px; }
.service_results .text dl{ display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;line-height:27px; }
.service_results .text dt{ font-weight:bold;font-size:12px;width:63px;margin-right:12px;margin-bottom:8px;text-align:center; }
.service_results .text dt.before{background-color:#ECECEC; }
.service_results .text dt.after{background-color:#FFE100; }
.service_results .text dd{ font-size:14px;width:calc(100% - 75px); }
.service_results .text p{ padding-top:2px;font-size:14px;line-height:1.5; }
.service_results .text p.point{ padding-top:15px; }
.service_results .text p.point span{display:inline-block;padding:4px 5px 6px;line-height:1;font-size:12px;width:63px;margin-bottom:5px;text-align:center;background-color:#333;color:#fff;}
.service_results .throw{ padding:18px;font-size:15px;line-height:1.46;padding-right:10px;text-align:center;position:relative; }
.service_results .throw::after{content: "";position: absolute;top: -10px; left: 50%;transform: translateX(-50%);border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #fff;}

.service_results .lamp{ margin-top:20px;padding:0 20px;text-align:center;display:-webkit-flex;display:flex;justify-content:center; }
.service_results .lamp span{ display:block;width:10px;height:10px;-webkit-border-radius: 50%; border-radius: 50%;background-color:#d9d9d9;margin:0 8px;text-indent:150%;overflow:hidden;white-space:nowrap; }
.service_results .lamp span.is_active{ background-color:#9b9b9b; }

.service_results.resources .rail{min-height:410px;}

.service_support{ background-color:#F8F8F8; }
.service_support .wrapper{ padding:0 20px 125px; }
.service_support .box{ -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);background:url(../img/service_support.jpg) 100% 50% no-repeat #fff;-webkit-background-size:auto 100%;background-size:auto 100%;max-width:1436px;margin-right:auto;margin-left:auto;; }
.service_support .box .image{display:none;}
.service_support .box .text{padding:90px 40px 80px 72px}
.service_support h2{ font-size:36px;margin-bottom:14px;line-height:1.6; }
.service_support p{ line-height:1.75;margin-bottom:27px; }
.service_support a{ display:block;max-width:510px;background-color:#FFE100;display:-webkit-flex;display:flex;padding:21px 0 17px;align-items:center;justify-content:center;text-decoration: none;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); }
.service_support a > span{ line-height:25px;display:block;text-align:center;padding:9px 0; }
.service_support a .offer{ font-size:21px;margin-right:16px; }
.service_support a .free{ font-size:20px;background-color:#fff;width:79px;border:1px solid #9e9e9f;-webkit-border-radius: 2px; border-radius: 2px; }

/** .resources **/
.resources_info {max-width: 1480px;margin: 0 auto 40px;}
.resources_info .map {text-align: center;}

.service_recruit{ background-color:#f8f8f8;padding:90px 20px 32px; }
.service_recruit .wrapper{ padding:60px 120px 36px 153px;background-color:#fff;max-width:1747px;margin-right:auto;margin-left:auto;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); }
.service_recruit h2{ margin-bottom:22px;max-width:200px;margin-right:auto;margin-left:auto; }
.service_recruit .explain{ font-size:20px;line-height:1.65;margin-bottom:55px;max-width:640px;margin-right:auto;margin-left:auto; }
.service_recruit .area{ max-width:1545px;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-right:auto;margin-left:auto; }
.service_recruit .box{ max-width:685px;width:46.47%;margin-right:7.06%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-bottom:100px;padding:41px 24px 32px 261px;background-color:#f8f8f8;min-height:308px;position:relative;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); }
.service_recruit .box:nth-child(2n){ margin-right:0; }
.service_recruit .box h3{ width:163px;height:62px;position:absolute;content:"";display:block;top:-34px;left:36px;}
.service_recruit .box h3 img{ max-width:100%;display:block; }
.service_recruit .box .image{ position:absolute;top:55px;left:-49px;width:286px;height:205px;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); }
.service_recruit .box .text .ttl{ margin-bottom:20px; }
.service_recruit .box .text .type{ margin-bottom:17px;font-size:14px;line-height:20px;display:-webkit-flex;display:flex;align-items:center;}
.service_recruit .box .text .type span{font-weight:bold;font-size:12px;padding:5px;display:inline-block;text-align:center;width:75px;background-color:#FFE100;margin-right:18px;}
.service_recruit .box .text .txt{ font-size:14px;line-height:1.65; }
.service_recruit .box .text .txt span.skill{font-size:12px;line-height:1.5;}

@media screen and (max-width: 1767px){
    .service_recruit .wrapper{ padding:60px 90px 36px 115px;}
}

@media screen and (max-width: 1519px){
    .service_support .box .text{padding: 45px 20px 30px 35px;}
    .service_support h2{font-size:30px;}
}
@media screen and (max-width: 1460px){
    .service_recruit .wrapper{ padding:60px 60px 36px 75px;}
    .service_flow .guidance::before{/* background-position:0 100%;background-size: 46% auto; */background-position:0 0%;background-size: 42% auto;}
    .service_flow .steps{margin-right:-60px;}
}
@media screen and (max-width: 1280px){
    .service_announce .area{margin-top:-60px;padding-top:58px;}
    .service_menu li{padding:0 20px 20px;}
    .service_recruit .box{ max-width:none;width:100%;margin-right:0;}
    .service_flow .guidance{padding:0;}
    .service_flow .steps{margin-right:0px;}
    .service_flow .steps ul{justify-content: center;}
    .service_flow .boxes,
    .service_flow .lineup{padding: 0 40px 0 45%;}
    .service_flow .boxes .box:nth-child(1) {margin-left:-40px;}
    .service_flow .boxes .box:nth-child(2) {margin-left:0px;}
    .service_flow .boxes .box:nth-child(3) {margin-left:15px;}
    .service_flow .boxes .box:nth-child(4) {margin-left:30px;}
    .service_flow .boxes .box:nth-child(5) {margin-left:45px;}
    .service_flow .lineup .box:nth-child(1) {margin-left:-70px;}
    .service_flow .lineup .box:nth-child(2) {margin-left:-30px;}
    .service_flow .lineup .box:nth-child(3) {margin-left:-10px;}

    .service_recruit .box{padding-left:291px;}
    .service_recruit .box .image{left:-29px;}
}


@media screen and (min-width: 1081px){
	.service_header{ width: 100%;position: relative; }
	.service_header:before{ padding-top: 39%;content:"";display: block; }
	.service_header .box{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;display:-webkit-flex;display:flex;flex-direction: row-reverse;max-height:750px;}
	.service_header .image{width:50%;}
	.service_header .text{width:50%;}
	
	.service_announce li a:hover{cursor:pointer;}
	.service_announce li a::before{-webkit-transition: width 0.2s ease-in-out;transition: width 0.2s ease-in-out;}
	.service_announce li a:hover::before{width: 100%;}
	
	.service_menu li a::after{position:absolute;content:"";display:block;bottom:0;left:0;width:0%;height:2px;background:#FFE103;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
	.service_menu li a:hover::after{width:100%;}
	
	.service_results .rail{padding:30px 0;}
	.service_results .box{-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
	.service_results .box:hover{transform:scale(1.05);}
	.service_support a{-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
	.service_support a:hover{background-color:#333;}
	.service_support a:hover .offer{color:#fff;}
}

@media screen and (max-width: 1080px){

	.service_header .image{height:320px;background-position:50% 25%;}
	.service_header .text{height:280px;padding-bottom:40px;}
	.service_header .h1_title h1{font-size:46px;}

	.def_h2 {font-size: 25px;background-position: 0 14px;padding-left: 32px;}

	.service_announce h2{font-size:32px;}
	.service_announce li a{font-size:16px;}
	.service_announce .area{padding-bottom:45px;}
	.service_menu .area{padding:0 10px 29px;}
	.service_menu li .name{font-size:20px;}
	.service_feature .wrapper{padding:40px 20px 60px;}
	.service_feature h2{margin-bottom:25px;}
	.service_feature .image{margin-bottom:15px;}
	.service_feature .title{font-size:18px;margin-bottom:5px;}
	.service_feature .text{font-size:14px;}

	.service_flow .wrapper{padding:40px 20px;}

	.service_flow h2{margin-bottom:45px;}
	.service_flow .boxes p{font-size:14px;}
	.service_flow .boxes .box{margin-bottom:30px;}

	.service_flow .boxes h3{font-size:22px;margin-bottom:10px;}

	.service_results .wrapper{padding:40px 20px 60px;}
	.service_results h2{margin-bottom:35px;}
	.service_results .rail{min-height:500px;padding:0 0 10px;}
	.service_results .image{height:240px;overflow-y:hidden;}
	.service_results .image img{position: relative;display: block;top: -38px;}
	.service_results figcaption .role{font-size:12px;}
	.service_results figcaption .name{font-size:14px;}
	.service_results .text dd{font-size:13px;}
	.service_results .text p{font-size:14px;}

	.service_results .lamp{margin-top:30px;}

	.service_support .box{background:#fff;}
	.service_support .box .image{display:block;text-align:center;height: 300px;overflow-y: hidden;background:url(../../career/img/career_bg.jpg) 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover;}
	.service_support .box .image img{display:none;}
	.service_support .box .text{padding:30px 20px 20px;}
	.service_support h2{font-size:22px;margin-bottom:10px;}
	.service_support p{margin-bottom:20px;}

	.service_support .wrapper{padding-bottom:80px;}
	.service_support a .free,
	.service_support a .offer{font-size:18px;}
	.service_support a{padding:16px 10px 12px;}



}

@media screen and (min-width:768px){
	.service_results .play_display{display:none;}
	.service_results .train{width:3744px;animation: infiniteTrain 24s linear infinite;}
	.service_results .train:hover{animation-play-state: paused;}
	.service_results .rail{overflow-x: hidden;}
	
	.resources_info {display: flex;align-items: center;}
	.resources_info p {width: 45%;box-sizing: border-box;padding: 20px 20px 20px 60px;font-size: 22px;line-height: 2;}
	.resources_info .map {;width: 55%;}
}

@media screen and (max-width:767px){
	.service_header .image{display:none;}
	.service_header .text{padding-top:40px;}
	
	.service_announce .area{margin-right:20px;margin-left:20px;padding:40px 20px;}
	.service_announce h2{font-size:24px;}
	.service_announce p{font-size:14px;line-height:1.75;text-align:left;}
	.service_announce p br{display:none;}
	
	.service_announce ul{display:block;}
	.service_announce li{width:100%;margin:0 auto 20px;}
	.service_announce li.li_new{margin-bottom:0px;}
	.service_announce li a{font-size:15px;padding:10px 5px;}
	
	.service_menu ul{display:block;max-width:320px;margin-right:auto;margin-left:auto;}
	.service_menu li{padding:0 10px 10px;}
	.service_menu li .num{font-size:16px;}
	.service_menu li .name{font-size:18px;}
	.service_menu li a{justify-content: center;}
	
	.def_h2{font-size:22px;background-position: 0 11px;}
	.service_feature .area{max-width:480px;margin-right:auto;margin-left:auto;}
	.service_feature .box{/* width:calc(50% - 10px);margin-right:20px; */width:100%;margin-bottom:20px;}
	.service_feature .box:nth-child(2){ margin-right:0; }
	.service_feature .box:nth-child(3){ margin-bottom:0; }
	.service_feature .image{margin-bottom:10px;text-align:center;}
	.service_feature .image img{width:100%;}
	.service_feature .title{font-size:16px;}
	
	.service_flow .guidance{padding: 0 0 60px;}
	.service_flow .guidance::before{display:none;background-position: 100% 100%;background-size: auto 55%;opacity:0.3;}
	.service_flow .steps ul{display:block;}
	.service_flow .steps li.step{padding:15px 10px;text-align:left;height:auto;}
	.service_flow .steps li.step span{width:100px;margin-left:-50px;top:-15px;}
	.service_flow .steps li.arrow{width: 64px;height: 64px;transform: rotate(90deg);margin-right:auto;margin-left:auto;}
	
	.service_flow .boxes, .service_flow .lineup{padding:0px;}
	.service_flow .boxes .box{max-width:none;}
	.service_flow .boxes .box:nth-child(1),
	.service_flow .boxes .box:nth-child(3),
	.service_flow .boxes .box:nth-child(4),
	.service_flow .boxes .box:nth-child(5){margin-left:0px;}

	.service_flow .boxes h3{font-size:18px;}
	
	.service_flow .lineup{padding-left:20px;}
	.service_flow .lineup .box:nth-child(1){margin-left:0px;}
	.service_flow .lineup .box:nth-child(2){margin-left:0px;}
	.service_flow .lineup .box:nth-child(3){margin-left:0px;}
	.service_flow .lineup .box:nth-child(4){margin-left:0px;}
	.service_flow .lineup .box:nth-child(5){margin-left:0px;}
	.service_flow .lineup .num{width: 64px;height: 64px;top: -34px;left: -32px;}
	.service_flow .lineup .box{padding:30px 20px 20px;}
	.service_flow .lineup h3{font-size:18px;margin-bottom:10px;}
	.service_flow .lineup p{font-size:14px;}
	
	.service_results.resources .rail{min-height:330px;}
	
	.service_support a .free, .service_support a .offer{font-size:min(3vw,16px);}
	.service_support a .free{width:70px;}
	
	.resources_info p {padding: 20px 0;font-size:16px;}
	.resources_info p br{display:none;}
	.resources_info .map{position:relative;}
	.resources_info .map a{position:absolute;width:100%;height:100%;display:block;top:0;left:0;}
	
	.service_recruit{padding-bottom:60px;}
	.service_recruit .wrapper{padding: 40px 30px 60px;position:relative;}
	.service_recruit .wrapper::after{content:"";width:40px;height:40px;display:block;position:absolute;bottom:20px;left:50%;margin-left:-40px;background:url(../img/swipe.png) 50% 50% no-repeat;-webkit-background-size:contan;background-size:contain;}
	.service_recruit h2{max-width:150px;}
	.service_recruit .explain{font-size:16px;}
	
	.service_recruit .inner{overflow-x: auto;padding: 30px 0;-webkit-overflow-scrolling: touch;position:relative;}
	.service_recruit .inner::after{}
	.service_recruit .area{width:380%;}
	.service_recruit .box{width:23.5%;min-height:none;margin:0 2% 0 0;/* margin:0 0 60px; */}
	.service_recruit .box:nth-child(2){margin-right:2%;}
	.service_recruit .box:nth-child(4){/* margin-bottom:0;*/margin-right:0;}
	.service_recruit .box h3{width: 132px;height: 52px;top: -25px;left: 20px;}
	.service_recruit .box{padding:42px 20px 30px;}
	.service_recruit .box .image{position:static;margin:0 auto 20px;width:100%;height:auto;}
	.service_recruit .box .image img{width:100%;}
	.service_recruit .box .text .ttl{margin-bottom:15px;}
	.service_recruit .box .text .type{margin-bottom:15px;}

	.service_results{max-width:100%;overflow-x:hidden;}
	.service_results .train{width:1158px;}
	.service_results .rail{padding-bottom:30px;overflow-x:auto;-webkit-overflow-scrolling: touch;}
	.service_results .play_display{opacity:0;position:fixed;border-radius: 5px 0 0 5px;top:90px;right:0;display:block;padding:5px;width:100px;height:30px;background:#000;color:#fff;text-align:center;transform: translateX(200px);-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
	.service_results.on_pause .play_display{transform: translateX(0px);opacity:1;}
	.service_results.on_pause .train{animation-play-state: paused;}
	.service_results .box{margin:0 20px;}
	.service_results .box:nth-child(n+4){display:none;}
}

/** animation **/
/* common */
.service_header .h1_title h1,
.service_header .h1_title p,
.service_feature .box .title,
.service_feature .box .image,
.service_feature .box .text,
.service_flow .steps li,
.service_flow .box,
.service_flow .guidance::before,
.service_recruit .box .image,
.service_recruit .box .text{-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

.service_header.on_switch .h1_title h1,
.service_header.on_switch .h1_title p,
.service_feature.on_switch .box .title,
.service_feature.on_switch .box .text,
.service_flow.on_switch .steps li,
.service_flow.on_switch .box,
.service_recruit.on_switch .box .text{transform: translateX(-20px);opacity: 0;}

.service_feature.on_switch .box .image,
.service_recruit.on_switch .box .image,
.service_flow.on_switch .guidance::before{transform: translateY(20px);opacity: 0;}

.service_flow.on_switch .guidance{transform: translateX(-20px);opacity: 0;}

.service_header .h1_title p{transition-delay: .2s;}
.service_feature .box .title{transition-delay: .2s;}
.service_feature .box .text{transition-delay: .4s;}

.service_flow.on_switch .guidance::before{transition-delay: .8s;}

.service_flow.on_switch .steps li:nth-child(1){transition-delay: .2s;}
.service_flow.on_switch .steps li:nth-child(2){transition-delay: .3s;}
.service_flow.on_switch .steps li:nth-child(3){transition-delay: .4s;}
.service_flow.on_switch .steps li:nth-child(4){transition-delay: .5s;}
.service_flow.on_switch .steps li:nth-child(5){transition-delay: .6s;}

.service_flow .boxes .box:nth-child(1){transition-delay: .2s;}
.service_flow .boxes .box:nth-child(2){transition-delay: .4s;}
.service_flow .boxes .box:nth-child(3){transition-delay: .6s;}
.service_flow .boxes .box:nth-child(4){transition-delay: .8s;}
.service_flow .boxes .box:nth-child(5){transition-delay: 1s;}

.service_flow .lineup .box:nth-child(1){transition-delay: .2s;}
.service_flow .lineup .box:nth-child(2){transition-delay: .4s;}
.service_flow .lineup .box:nth-child(3){transition-delay: .6s;}

/* head */
@keyframes slideRight {
    0% { transform: translateX(50%); }
    100% { transform: translateX(0%); }
}
@keyframes slideRideRight {
    0% { width:100%; }
    50% { width:100%; }
    100% { width:0%; }
}
.service_header .image{
	animation: slideRight 0.6s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
.service_header .image::after{
	animation: slideRideRight 1.2s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}


/* result */
@keyframes infiniteTrain {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}