@charset "utf-8";


/* フェードイン用のCSS */

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
 }

.slide-bottom1 {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1s ease-out;
 }

.slide-bottom2 {
	opacity: 0;
	transform: translate(0, 100px);
	transition: all 1.5s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
 }

.flex {
	display: flex;
}

#service1 ul {
	margin: 0;
	padding: 0;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#service1 ul li:nth-of-type(2){
	transition-delay: .7s;
}
#service1 ul li:nth-of-type(3){
	transition-delay: 1s;
}
#service1 ul li:nth-of-type(4){
	transition-delay: 1.5s;
}


#service2 ul {
	margin: 0;
	padding: 0;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#service2 ul li:nth-of-type(2){
	transition-delay: .7s;
}
#service2 ul li:nth-of-type(3){
	transition-delay: 1s;
}
#service2 ul li:nth-of-type(4){
	transition-delay: 1.5s;
}

#recruit ul {
	margin: 0;
	padding: 0;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#recruit ul li:nth-of-type(2){
	transition-delay: .7s;
}
#recruit ul li:nth-of-type(3){
	transition-delay: 1s;
}
#recruit ul li:nth-of-type(4){
	transition-delay: 1.5s;
}

#wj ul {
	margin: 0;
	padding: 0;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#wj ul li:nth-of-type(2){
	transition-delay: .5s;
}
#wj ul li:nth-of-type(3){
	transition-delay: 1s;
}
#wj ul li:nth-of-type(4){
	transition-delay: 1.5s;
}

#wj ul li:nth-of-type(5){
	transition-delay: 2s;
}

/* SEC02 MESSAGE
------------------------------------------------------------*/
.wrap{
	clear: both;
	width: 100%;
}

img.service{
	width: 100%;
	height: auto;
}

img.service-title{
	margin-bottom: 30px;
}

@media only screen and (min-width: 800px){
	/* SEC02 MESSAGE
	-----------------*/
	.txt, .bg{
		width: 47%;
		float: left;
		display: table;
		margin-bottom: 0px;
	}

	#sec02_02 .txt, #sec02_02 .bg{
		float: right;
	}

	.vMid{
		display: table-cell;
		padding: 0 70px;
		vertical-align: middle;
	}
	.vMid p{
		line-height: 2;
	}
	
}

@media screen and (max-width: 1024px) {
	.wrap{
	clear: both;
	width: 95%;
		margin: 0 auto;
}
    .txt{
		width: 90%;
        margin: 0 auto;
	}
	}