@charset "UTF-8";

.top-main .mask-line {
	opacity: 0;
}

.top-main.eon .mask-line {
	stroke-dasharray: 2000px;
	animation: h-written 4.5s ease-out 2.5s forwards;
	stroke: #FFF;
	stroke-width: 3;
}

@keyframes h-written {
	0% {
		opacity: 1;
		stroke-dashoffset: 2000px;
	}

	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}


.main-copy01 {
	position: absolute;
	top: 35%;
	left: 10%;
	width: 500px;
	z-index: 2;
}


.top-main {
	width: 100%;
	height: 100vh;
	background: #071529;
}

.top-main .bg-box {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: relative;
	background: url("../img/top_main.jpg") no-repeat center bottom;
	background-size: cover;
	transition: all 3s ease-out;
	transition-delay: 1s;
}

.top-main.eon .bg-box {
	opacity: 1;
}

.top-panel02 {
	width: 100%;
	position: relative;
	padding: 120px 0 200px;
}








.top-service {
	width: 100%;
	padding: 50px 0;
	position: relative;
}

.top-service:before {
	width: 100%;
	height: 25%;
	background: #3A82F3;
	content: "";
	position: absolute;
	top: 200px;
	left: 0;
}

.top h2.toph2 {
	font-size: 50px;
	letter-spacing: .04em;
	padding: 0 0 100px;
	font-weight: 400;
	line-height: 1.6em;
	position: relative;
	display: inline-block;
	left: 10%;
}

.top h2.toph2 span,
.h2sub {
	font-size: 20px;
	line-height: 1.8em;
	display: block;
	padding-left: 20px;
	position: relative;
}

.top h2.toph2 span:before,
.h2sub:before {
	width: 3px;
	height: 30px;
	content: "";
	position: absolute;
	left: 5px;
	top: calc(50% - 15px);
	background: #3A82F3;
}

.h2sub {
	display: inline-block;
	left: 10%;
	font-weight: 500;
}

.top-service ul {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.top-service ul li {
	width: 23%;
	margin: 0 1% 3%;
	position: relative;
	box-sizing: border-box;
	padding: 40px 0;
}

.top-service ul li .btn-box {
	width: 100%;
	height: 200px;
	overflow: hidden;
	position: relative;
}

.top-service ul li .btn-box:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #3A82F3;
	transform-origin: right top;
	transform: scale(1, 1);
	transition: all 1s;
	z-index: 2;
}

.top-service ul li.eon .btn-box:before {
	transform: scale(0, 1);
}

.top-service ul li:nth-child(1).eon .btn-box:before {
	transition-delay: .2s;
}

.top-service ul li:nth-child(2).eon .btn-box:before {
	transition-delay: .4s;
}

.top-service ul li:nth-child(3).eon .btn-box:before {
	transition-delay: .6s;
}

.top-service ul li:nth-child(4).eon .btn-box:before {
	transition-delay: .8s;
}

.top-service ul li:nth-child(5).eon .btn-box:before {
	transition-delay: 1s;
}

.top-service ul li:nth-child(6).eon .btn-box:before {
	transition-delay: 1.2s;
}

.top-service ul li:nth-child(7).eon .btn-box:before {
	transition-delay: 1.4s;
}

.top-service .btn-box p {
	position: absolute;
	top: 30px;
	z-index: 2;
}

.top-service .btn-box p span {
	line-height: 30px;
	display: inline-block;
	background: #132847;
	color: #FFF;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 10px;
	padding: 0 15px;
}

.top-service ul li .btn-box .btn-img {
	width: 100%;
	height: 100%;
	position: relative;
	transform: scale(2);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: all .5s;
}

.top-service ul li:nth-child(1).eon .btn-img {
	transform: scale(1.2);
	transition-delay: .4s;
}

.top-service ul li:nth-child(2).eon .btn-img {
	transform: scale(1.2);
	transition-delay: .6s;
}

.top-service ul li:nth-child(3).eon .btn-img {
	transform: scale(1.2);
	transition-delay: .8s;
}

.top-service ul li:nth-child(4).eon .btn-img {
	transform: scale(1.2);
	transition-delay: 1s;
}

.top-service ul li:nth-child(5).eon .btn-img {
	transform: scale(1.2);
	transition-delay: 1.2s;
}

.top-service ul li:nth-child(6).eon .btn-img {
	transform: scale(1.2);
	transition-delay: 1.4s;
}

.top-service ul li:nth-child(7).eon .btn-img {
	transform: scale(1.2);
	transition-delay: 1.6s;
}

.top-service ul li:nth-child(1) .btn-img {
	background-image:
		url("../img/service-illust01.png");
}

.top-service ul li:nth-child(2) .btn-img {
	background-image:
		url("../img/service-illust02.png");
}

.top-service ul li:nth-child(3) .btn-img {
	background-image:
		url("../img/service-illust03.png");
}

.top-service ul li:nth-child(4) .btn-img {
	background-image:
		url("../img/service-illust04.png");
}

.top-service ul li:nth-child(5) .btn-img {
	background-image:
		url("../img/service-illust07.png");
}

.top-service ul li:nth-child(6) .btn-img {
	background-image:
		url("../img/service-illust06.png");
}

.top-service ul li:nth-child(7) .btn-img {
	background-image:
		url("../img/service-illust08.png");
}

.top-service ul li:hover .btn01:after {
	width: 100%;
	transform-origin: left top;
	transform: scale(1, 1);
}

.top-service ul li:hover .btn01 p {
	color: #FFF;
}

.image-animation01 .btn01 {
	position: absolute;
	right: 0;
	bottom: -80px;
}

.top-panel01 {
	width: 100%;
	position: relative;
	padding: 0 0 50px;
}

.top-panel01 .catch {
	width: 400px;
	position: absolute;
	right: 10%;
	top: 30px;
	transition-delay: .5s;
	z-index: 2;
}

.top-panel01 .image-animation01 {
	width: 90%;
	position: relative;
	box-sizing: border-box;
	height: 550px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 80px;
}

.image01 {
	position: absolute;
	width: 400px;
	height: 550px;
	overflow: hidden;
	left: -200px;
	bottom: -100px;
	transition: all 1.5s;
	opacity: 0;
	transform: rotate(10deg);
	transition-delay: 1s;
}

.image02 {
	position: absolute;
	width: 400px;
	height: 550px;
	left: 210px;
	bottom: -100px;
	overflow: hidden;
	transition: all 1.5s;
	opacity: 0;
	transform: rotate(10deg);
	transition-delay: .5s;
}

.image03 {
	position: absolute;
	width: 270px;
	height: 460px;
	left: 520px;
	bottom: -100px;
	overflow: hidden;
	opacity: 0;
	transition: all 1.5s;
	transform: rotate(10deg);
}

.image-animation01.eon .image01 {
	left: 0;
	bottom: 0;
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.image-animation01.eon .image02 {
	left: 410px;
	bottom: 0;
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.image-animation01.eon .image03 {
	left: 820px;
	bottom: -50px;
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.image-animation01.eon .image02 .image-box {
	transform: scale(1.1) rotate(0deg);
}

.image-animation01.eon .image02 .image-box {
	transform: scale(1.1) rotate(0deg);
}

.image01 .image-box,
.image02 .image-box,
.image03 .image-box {
	transform: scale(2) rotate(20deg);
	transition: all 2s;
}

.image-animation01.eon .image01 .image-box {
	transform: scale(1.1) rotate(0deg);
}

.image-animation01.eon .image02 .image-box {
	transform: scale(1.1) rotate(0deg);
}

.image-animation01.eon .image03 .image-box {
	transform: scale(1.1) rotate(0deg);
}





.top-cariot {
	width: 100%;
	min-height: 300px;
	padding: 0 0 80px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top-cariot h2.toph2 {
	left: 0;
}

.top-cariot .cariot-logo {
	width: 140px;
	position: absolute;
	bottom: 150px;
	left: 0;
}

.top-cariot .cp01 {
	position: absolute;
	bottom: 100px;
	font-size: 14px;
	font-weight: 500;
}

.top-cariot .text-box {
	width: 300px;
	position: relative;
	left: 10%;
}

.top-cariot .text-box .btn01 {
	bottom: 0;
	position: absolute;
	left: 0;
}

.top-cariot .image-box {
	width: calc(90% - 300px);
	position: relative;
}

.top-cariot .new-item {
	width: 600px;
	position: absolute;
	bottom: -50px;
	left: 0;
	opacity: 0;
	z-index: 2;
	transition: all 1s;
}

.top-cariot .new-item.eon {
	left: 50px;
	opacity: 1;
}

.top-cariot .image-banner {
	width: 80%;
	left: 20%;
	position: relative;
	overflow: hidden;
}

.top-cariot .image-banner:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #3A82F3;
	transform-origin: right top;
	transform: scale(1, 1);
	transition: all 1s;
	z-index: 2;
}

.top-cariot .image-banner.eon:before {
	transform: scale(0, 1);
}

.top-cariot .image-banner img {
	transform: scale(1.5);
	transition: all 1s;
}

.top-cariot .image-banner.eon img {
	transform: scale(1);
	transition: all 1s;
}

.top-cariot:hover .btn01:after {
	width: 100%;
	transform-origin: left top;
	transform: scale(1, 1);
}

.top-cariot:hover .btn01 p {
	color: #FFF;
}



.top-showcase {
	width: 100%;
	position: relative;
	padding: 100px 0;
	overflow: hidden;
}

.top-showcase h2.toph2 {
	padding-bottom: 60px;
}

.top-showcase ul {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 60px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top-showcase .list01 li {
	opacity: 0;
	position: relative;
	transform: scale(1.5) translate(100px, 0);
	transition: all 1s;
}

.top-showcase .list02 li {
	opacity: 0;
	position: relative;
	transform: scale(1.5) translate(-100px, 0);
	transition: all 1s;
}

.top-showcase .list03 li {
	opacity: 0;
	position: relative;
	transform: scale(1.5) translate(100px, 0);
	transition: all 1s;
}

.top-showcase .list04 li {
	opacity: 0;
	position: relative;
	transform: scale(1.5) translate(-100px, 0);
	transition: all 1s;
}

.top-showcase .list01.eon li,
.top-showcase .list02.eon li,
.top-showcase .list03.eon li,
.top-showcase .list04.eon li {
	opacity: 1;
	transform: scale(1) translate(0, 0);
}

.top-showcase .list01.eon li:nth-child(2) {
	transition-delay: .3s;
}

.top-showcase .list01.eon li:nth-child(3) {
	transition-delay: .6s;
}

.top-showcase .list01.eon li:nth-child(4) {
	transition-delay: .9s;
}

.top-showcase .list02.eon li:nth-child(4) {
	transition-delay: .3s;
}

.top-showcase .list02.eon li:nth-child(3) {
	transition-delay: .6s;
}

.top-showcase .list02.eon li:nth-child(2) {
	transition-delay: .9s;
}

.top-showcase .list02.eon li:nth-child(1) {
	transition-delay: 1.2s;
}

.top-showcase .list03.eon li:nth-child(1) {
	transition-delay: .3s;
}

.top-showcase .list03.eon li:nth-child(2) {
	transition-delay: .6s;
}

.top-showcase .list03.eon li:nth-child(3) {
	transition-delay: .9s;
}

.top-showcase .list03.eon li:nth-child(4) {
	transition-delay: 1.2s;
}

.top-showcase .list04.eon li:nth-child(4) {
	transition-delay: .3s;
}

.top-showcase .list04.eon li:nth-child(3) {
	transition-delay: .6s;
}

.top-showcase .list04.eon li:nth-child(2) {
	transition-delay: .9s;
}

.top-showcase .list04.eon li:nth-child(1) {
	transition-delay: 1.2s;
}

.top-showcase ul li.logo-komatsu {
	width: 160px;
	padding: 25px 0 0;
}

.top-showcase ul li.logo-bridgestone {
	width: 210px;
	padding: 15px 0 0;
}

.top-showcase ul li.logo-groovex {
	width: 180px;
	padding: 15px 0 0;
}

.top-showcase ul li.logo-jpx {
	width: 70px;
	padding: 0 0 0;
}

.top-showcase ul li.logo-tokyu {
	width: 190px;
	padding: 15px 0 0;
}

.top-showcase ul li.logo-staffservice {
	width: 280px;
	padding: 20px 0 0;
}

.top-showcase ul li.logo-onet {
	width: 110px;
	padding: 0 0 0;
}

.top-showcase ul li.logo-something {
	width: 180px;
	padding: 0 0 0;
}

.top-showcase ul li.logo-advantest {
	width: 180px;
	padding: 25px 0 0;
}

.top-showcase ul li.logo-duplo {
	width: 110px;
	padding: 10px 0 0;
}

.top-showcase ul li.logo-recruit {
	width: 140px;
	padding: -10px 0 0;
}

.top-showcase ul li.logo-ana {
	width: 120px;
	padding: 0px 0 0;
}

.top-showcase ul li.logo-yamato {
	width: 150px;
	padding: 20px 0 0;
}

.top-showcase ul li.logo-secom {
	width: 140px;
	padding: 10px 0 0;
}

.top-showcase ul li.logo-honda {
	width: 120px;
	padding: 0 0 0;
}

.top-showcase ul li.logo-jgc {
	width: 200px;
	padding: 30px 0 0;
}





.top-news h2.toph2 {
	padding-bottom: 60px;
}

.top-news {
	width: 100%;
	position: relative;
	padding: 150px 0 250px;
}

.top-news .fin {
	transition-delay: .2s;
}

.top-news .news-title {
	position: relative;
}

.top-news .news-title:before {
	width: 400px;
	height: 250px;
	content: "";
	position: absolute;
	left: 5%;
	top: 30px;
	background: #F5F7F8;
	background-size: contain;
	z-index: -1;
}

.top-news .news-articles {
	width: 86%;
	padding: 0 0 0;
	margin: 0 0 0 7%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}

.top-news .news-articles .btn01 {
	position: absolute;
	bottom: 120px;
	left: calc(43% - 320px);
}

.articles-top {
	width: 43%;
	position: relative;
}

.sub-articles {
	width: 54%;
}

.sub-articles ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sub-articles ul li {
	width: 47%;
	margin-bottom: 50px;
	position: relative;
}

.news-main {
	width: 100%;
	position: relative;
	margin-bottom: 10px;
}

.news-main .news-date {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 12px;
	font-weight: 400;
	color: #FFF;
	background: #3A82F3;
	width: 100px;
	line-height: 30px;
	text-align: center;
	z-index: 30;
}

.news-category {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;
	font-size: 12px;
	font-weight: 400;
	color: #3A82F3;
	background: #F5F9FF;
	padding: 0 15px;
	line-height: 30px;
	text-align: center;
	margin: 15px;
}

.articles-top .p01 {
	font-size: 16px;
	font-weight: 500;
	width: 80%;
	margin: 0 15px;
	transition: all .5s;
}

.sub-articles .p01 {
	font-size: 14px;
	margin: 0 15px;
	font-weight: 500;
	transition: all .5s;
}

.articles-top:hover .p01,
.sub-articles ul li:hover .p01 {
	color: #3971B7;
}



.top-company {
	width: 100%;
	position: relative;
	background: url("../img/top-compnay-bg.jpg") no-repeat center top;
	background-size: cover;
	margin: 0px auto 0;
}

.top-company .fin {
	transition-delay: .2s;
}

.top-company h2 {
	position: relative;
	top: 80px;
	left: 10%;
	display: inline-block;
}

.top-company ul {
	position: relative;
	width: 90%;
	left: 0;
	padding: 50px 0 250px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top-company ul li {
	width: 24%;
	position: relative;
}

.top-company ul li .btn-img-box {
	width: 100%;
	height: 1px;
	padding: 0 0 52.3%;
	overflow: hidden;
	position: relative;
}

.top-company ul li .btn-img-box:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(19, 40, 71, 0.51);
	z-index: 2;
	opacity: 0;
	transition: all .5s;
}

.top-company ul li:hover .btn-img-box:before {
	opacity: 1;
}

.top-company ul li .btn-img {
	width: 100%;
	transform: scale(1);
	transition: all .5s;
}

.top-company ul li:hover .btn-img {
	transform: scale(1.05);
}






.top-recruit {
	background: #F5F7F8;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 100px;
}

.top-recruit ul {
	width: 800px;
	position: relative;
	top: -100px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top-recruit ul li {
	width: 31.33%;
	position: relative;
}

.top-recruit .btn-box {
	width: 100%;
	height: 160px;
	border-radius: 10px;
	background: #FFF;
	position: relative;
}

.top-recruit .btn-img {
	width: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 1;
	transform-origin: center center;
	transform: scale(1) translate(-50%, -50%);
	transition: all .5s;
}

.top-recruit ul li:hover .btn-img {
	opacity: .9;
}



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

	.main-copy01 {
		position: absolute;
		top: 35%;
		left: 10%;
		width: 400px;
		z-index: 2;
	}

	.top-panel02 {
		width: 100%;
		position: relative;
		padding: 120px 0 200px;
	}








	.top-service {
		width: 100%;
		padding: 50px 0;
		position: relative;
	}

	.top-service:before {
		width: 100%;
		height: 15%;
		background: #3A82F3;
		content: "";
		position: absolute;
		top: 200px;
		left: 0;
	}

	.top h2.toph2 {
		font-size: 30px;
		letter-spacing: .04em;
		padding: 0 0 100px;
		font-weight: 400;
		line-height: 1.6em;
		position: relative;
		display: inline-block;
		left: 5%;
	}

	.top h2.toph2 span,
	.h2sub {
		font-size: 16px;
		line-height: 1.8em;
		display: block;
		padding-left: 20px;
		position: relative;
	}

	.top h2.toph2 span:before,
	.h2sub:before {
		width: 3px;
		height: 20px;
		content: "";
		position: absolute;
		left: 5px;
		top: calc(50% - 10px);
		background: #3A82F3;
	}

	.h2sub {
		display: inline-block;
		left: 5%;
		font-weight: 500;
	}

	.top-service ul {
		width: 90%;
		margin: 0 auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-service ul li {
		width: 31.33%;
		margin-bottom: 2%;
		position: relative;
		box-sizing: border-box;
		padding: 30px 0;
	}

	.top-service ul li .btn-box {
		width: 100%;
		height: 200px;
		overflow: hidden;
		position: relative;
	}

	.top-service ul li .btn-box:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #3A82F3;
		transform-origin: right top;
		transform: scale(1, 1);
		transition: all 1s;
		z-index: 2;
	}

	.top-service ul li.eon .btn-box:before {
		transform: scale(0, 1);
	}

	.top-service ul li:nth-child(1).eon .btn-box:before {
		transition-delay: .2s;
	}

	.top-service ul li:nth-child(2).eon .btn-box:before {
		transition-delay: .4s;
	}

	.top-service ul li:nth-child(3).eon .btn-box:before {
		transition-delay: .6s;
	}

	.top-service ul li:nth-child(4).eon .btn-box:before {
		transition-delay: .8s;
	}

	.top-service ul li:nth-child(5).eon .btn-box:before {
		transition-delay: 1s;
	}

	.top-service ul li:nth-child(6).eon .btn-box:before {
		transition-delay: 1.2s;
	}

	.top-service .btn-box p {
		position: absolute;
		top: 30px;
		z-index: 2;
	}

	.top-service .btn-box p span {
		line-height: 30px;
		display: inline-block;
		background: #132847;
		color: #FFF;
		font-size: 13px;
		font-weight: 400;
		margin-bottom: 10px;
		padding: 0 10px;
	}

	.top-service ul li .btn-box .btn-img {
		width: 100%;
		height: 100%;
		position: relative;
		transform: scale(2);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		transition: all .5s;
	}

	.top-service ul li:nth-child(1).eon .btn-img {
		transform: scale(1.5);
		transition-delay: .4s;
	}

	.top-service ul li:nth-child(2).eon .btn-img {
		transform: scale(1.5);
		transition-delay: .6s;
	}

	.top-service ul li:nth-child(3).eon .btn-img {
		transform: scale(1.5);
		transition-delay: .8s;
	}

	.top-service ul li:nth-child(4).eon .btn-img {
		transform: scale(1.5);
		transition-delay: 1s;
	}

	.top-service ul li:nth-child(5).eon .btn-img {
		transform: scale(1.5);
		transition-delay: 1.2s;
	}

	.top-service ul li:nth-child(6).eon .btn-img {
		transform: scale(1.5);
		transition-delay: 1.4s;
	}

	.top-service ul li:nth-child(1) .btn-img {
		background-image:
			url("../img/service-illust01.png");
	}

	.top-service ul li:nth-child(2) .btn-img {
		background-image:
			url("../img/service-illust02.png");
	}

	.top-service ul li:nth-child(3) .btn-img {
		background-image:
			url("../img/service-illust03.png");
	}

	.top-service ul li:nth-child(4) .btn-img {
		background-image:
			url("../img/service-illust04.png");
	}

	.top-service ul li:nth-child(5) .btn-img {
		background-image:
			url("../img/service-illust07.png");
	}

	.top-service ul li:nth-child(6) .btn-img {
		background-image:
			url("../img/service-illust06.png");
	}

	.top-service ul li:hover .btn01:after {
		width: 100%;
		transform-origin: left top;
		transform: scale(1, 1);
	}

	.top-service ul li:hover .btn01 p {
		color: #FFF;
	}

	.image-animation01 .btn01 {
		position: absolute;
		right: 0;
		bottom: -80px;
	}

	.top-panel01 {
		width: 100%;
		position: relative;
		padding: 0 0 50px;
	}

	.top-panel01 .catch {
		width: 300px;
		position: absolute;
		right: 5%;
		top: 30px;
		transition-delay: .5s;
		z-index: 2;
	}

	.top-panel01 .image-animation01 {
		width: 90%;
		position: relative;
		box-sizing: border-box;
		height: 350px;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 80px;
	}

	.image01 {
		position: absolute;
		width: 200px;
		height: 350px;
		overflow: hidden;
		left: -200px;
		bottom: -100px;
		transition: all 1.5s;
		opacity: 0;
		transform: rotate(10deg);
		transition-delay: 1s;
	}

	.image02 {
		position: absolute;
		width: 200px;
		height: 350px;
		left: 110px;
		bottom: -100px;
		overflow: hidden;
		transition: all 1.5s;
		opacity: 0;
		transform: rotate(10deg);
		transition-delay: .5s;
	}

	.image03 {
		position: absolute;
		width: 150px;
		height: 260px;
		left: 320px;
		bottom: -80px;
		overflow: hidden;
		opacity: 0;
		transition: all 1.5s;
		transform: rotate(10deg);
	}

	.image-animation01.eon .image01 {
		left: 0;
		bottom: 0;
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	.image-animation01.eon .image02 {
		left: 210px;
		bottom: 0;
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	.image-animation01.eon .image03 {
		left: 420px;
		bottom: -32px;
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	.image-animation01.eon .image02 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image-animation01.eon .image02 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image01 .image-box,
	.image02 .image-box,
	.image03 .image-box {
		transform: scale(2) rotate(20deg);
		transition: all 2s;
	}

	.image-animation01.eon .image01 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image-animation01.eon .image02 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image-animation01.eon .image03 .image-box {
		transform: scale(1.1) rotate(0deg);
	}





	.top-cariot {
		width: 100%;
		min-height: 300px;
		padding: 0 0 80px;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-cariot h2.toph2 {
		left: 0;
	}

	.top-cariot .cariot-logo {
		width: 140px;
		position: absolute;
		bottom: 150px;
		left: 0;
	}

	.top-cariot .cp01 {
		position: absolute;
		bottom: 100px;
		font-size: 14px;
		font-weight: 500;
	}

	.top-cariot .text-box {
		width: 300px;
		position: relative;
		left: 10%;
	}

	.top-cariot .text-box .btn01 {
		bottom: 0;
		position: absolute;
		left: 0;
	}

	.top-cariot .image-box {
		width: calc(90% - 300px);
		position: relative;
	}

	.top-cariot .new-item {
		width: 300px;
		position: absolute;
		bottom: -50px;
		left: 0;
		opacity: 0;
		z-index: 2;
		transition: all 1s;
	}

	.top-cariot .new-item.eon {
		left: 50px;
		opacity: 1;
	}

	.top-cariot .image-banner {
		width: 90%;
		height: 300px;
		left: 10%;
		position: relative;
		overflow: hidden;
	}

	.top-cariot .image-banner img {
		object-fit: cover;
		height: 100%;
	}

	.top-cariot .image-banner:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #3A82F3;
		transform-origin: right top;
		transform: scale(1, 1);
		transition: all 1s;
		z-index: 2;
	}

	.top-cariot .image-banner.eon:before {
		transform: scale(0, 1);
	}

	.top-cariot .image-banner img {
		transform: scale(1.5);
		transition: all 1s;
	}

	.top-cariot .image-banner.eon img {
		transform: scale(1);
		transition: all 1s;
	}

	.top-cariot:hover .btn01:after {
		width: 100%;
		transform-origin: left top;
		transform: scale(1, 1);
	}

	.top-cariot:hover .btn01 p {
		color: #FFF;
	}



	.top-showcase {
		width: 100%;
		position: relative;
		padding: 100px 0;
		overflow: hidden;
	}

	.top-showcase h2.toph2 {
		padding-bottom: 60px;
	}

	.top-showcase ul {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto 60px;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-showcase .list01 li {
		opacity: 0;
		position: relative;
		transform: scale(1.5) translate(100px, 0);
		transition: all 1s;
	}

	.top-showcase .list02 li {
		opacity: 0;
		position: relative;
		transform: scale(1.5) translate(-100px, 0);
		transition: all 1s;
	}

	.top-showcase .list03 li {
		opacity: 0;
		position: relative;
		transform: scale(1.5) translate(100px, 0);
		transition: all 1s;
	}

	.top-showcase .list01.eon li,
	.top-showcase .list02.eon li,
	.top-showcase .list03.eon li {
		opacity: 1;
		transform: scale(1) translate(0, 0);
	}

	.top-showcase .list01.eon li:nth-child(2) {
		transition-delay: .3s;
	}

	.top-showcase .list01.eon li:nth-child(3) {
		transition-delay: .6s;
	}

	.top-showcase .list01.eon li:nth-child(4) {
		transition-delay: .9s;
	}

	.top-showcase .list02.eon li:nth-child(4) {
		transition-delay: .3s;
	}

	.top-showcase .list02.eon li:nth-child(3) {
		transition-delay: .6s;
	}

	.top-showcase .list02.eon li:nth-child(2) {
		transition-delay: .9s;
	}

	.top-showcase .list02.eon li:nth-child(1) {
		transition-delay: 1.2s;
	}

	.top-showcase .list03.eon li:nth-child(1) {
		transition-delay: .3s;
	}

	.top-showcase .list03.eon li:nth-child(2) {
		transition-delay: .6s;
	}

	.top-showcase .list03.eon li:nth-child(3) {
		transition-delay: .9s;
	}

	.top-showcase .list03.eon li:nth-child(4) {
		transition-delay: 1.2s;
	}

	.top-showcase .list03.eon li:nth-child(5) {
		transition-delay: 1.5s;
	}

	.top-showcase ul li.logo-komatsu {
		width: 90px;
		padding: 20px 0 0;
	}

	.top-showcase ul li.logo-bridgestone {
		width: 120px;
		padding: 12px 0 0;
	}

	.top-showcase ul li.logo-groovex {
		width: 120px;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-jpx {
		width: 40px;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-tokyu {
		width: 110px;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-staffservice {
		width: 210px;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-onet {
		width: 60px;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-something {
		width: 120px;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-advantest {
		width: 110px;
		padding: 15px 0 0;
	}

	.top-showcase ul li.logo-duplo {
		width: 80px;
		padding: 5px 0 0;
	}

	.top-showcase ul li.logo-recruit {
		width: 100px;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-ana {
		width: 90px;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-yamato {
		width: 130px;
		padding: 15px 0 0;
	}

	.top-showcase ul li.logo-secom {
		width: 110px;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-honda {
		width: 100px;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-jgc {
		width: 150px;
		padding: 20px 0 0;
	}

	.top-news h2.toph2 {
		padding-bottom: 60px;
	}

	.top-news {
		width: 100%;
		position: relative;
		padding: 100px 0 150px;
	}

	.top-news .fin {
		transition-delay: .2s;
	}

	.top-news .news-title {
		position: relative;
	}

	.top-news .news-title:before {
		width: 400px;
		height: 250px;
		content: "";
		position: absolute;
		left: 5%;
		top: 30px;
		background: #F5F7F8;
		background-size: contain;
		z-index: -1;
	}

	.top-news .news-articles {
		width: 90%;
		padding: 0 0 0;
		margin: 0 0 0 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
	}

	.top-news .news-articles .btn01 {
		position: absolute;
		bottom: 160px;
		left: 0;
	}

	.articles-top {
		width: 45%;
		position: relative;
	}

	.sub-articles {
		width: 52%;
	}

	.sub-articles ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sub-articles ul li {
		width: 48%;
		margin-bottom: 50px;
		position: relative;
	}

	.news-main {
		width: 100%;
		position: relative;
		margin-bottom: 10px;
	}

	.news-main .news-date {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 12px;
		font-weight: 400;
		color: #FFF;
		background: #3A82F3;
		width: 100px;
		line-height: 30px;
		text-align: center;
	}

	.news-category {
		position: relative;
		top: 0;
		left: 0;
		display: inline-block;
		font-size: 11px;
		font-weight: 400;
		color: #3A82F3;
		background: #F5F9FF;
		padding: 0 10px;
		line-height: 30px;
		text-align: center;
		margin: 10px 0;
	}

	.articles-top .p01 {
		font-size: 13px;
		font-weight: 500;
		width: 80%;
		margin: 0 0;
		transition: all .5s;
	}

	.sub-articles .p01 {
		font-size: 12px;
		margin: 0 10px;
		font-weight: 500;
		transition: all .5s;
	}

	.articles-top:hover .p01,
	.sub-articles ul li:hover .p01 {
		color: #3971B7;
	}



	.top-company {
		width: 100%;
		position: relative;
		background: url("../img/top-compnay-bg.jpg") no-repeat right top;
		background-size: cover;
		margin: 0px auto 0;
	}

	.top-company .fin {
		transition-delay: .2s;
	}

	.top-company h2 {
		position: relative;
		top: 60px;
		left: 10%;
		display: inline-block;
	}

	.top-company ul {
		position: relative;
		width: 70%;
		max-width: 600px;
		left: 0;
		padding: 30px 0 100px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-company ul li {
		width: 48%;
		margin-bottom: 30px;
		position: relative;
	}

	.top-company ul li .btn-img-box {
		width: 100%;
		height: 1px;
		padding: 0 0 52.3%;
		overflow: hidden;
		position: relative;
	}

	.top-company ul li .btn-img-box:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(19, 40, 71, 0.51);
		z-index: 2;
		opacity: 0;
		transition: all .5s;
	}

	.top-company ul li:hover .btn-img-box:before {
		opacity: 1;
	}

	.top-company ul li .btn-img {
		width: 100%;
		transform: scale(1);
		transition: all .5s;
	}

	.top-company ul li:hover .btn-img {
		transform: scale(1.05);
	}






	.top-recruit {
		background: #F5F7F8;
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 100px;
	}

	.top-recruit ul {
		width: 90%;
		position: relative;
		top: -100px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-recruit ul li {
		width: 31.33%;
		position: relative;
	}

	.top-recruit .btn-box {
		width: 100%;
		height: 160px;
		border-radius: 10px;
		background: #FFF;
		position: relative;
	}

	.top-recruit .btn-img {
		width: 60px;
		position: absolute;
		top: 50%;
		left: 50%;
		opacity: 1;
		transform-origin: center center;
		transform: scale(1) translate(-50%, -50%);
		transition: all .5s;
	}

	.top-recruit ul li:hover .btn-img {
		opacity: .9;
	}
}


@media screen and (max-width: 500px) {
	.main-copy01 {
		position: absolute;
		top: 35%;
		left: 6%;
		width: 280px;
		z-index: 2;
	}

	.top-panel02 {
		width: 100%;
		position: relative;
		padding: 120px 0 200px;
	}








	.top-service {
		width: 100%;
		padding: 50px 0;
		position: relative;
	}

	.top-service:before {
		width: 100%;
		height: 260px;
		background: #3A82F3;
		content: "";
		position: absolute;
		top: 150px;
		left: 0;
	}

	.top h2.toph2 {
		font-size: 20px;
		letter-spacing: .04em;
		padding: 0 0 50px;
		font-weight: 400;
		line-height: 1.8em;
		position: relative;
		display: inline-block;
		left: 5%;
	}

	.top h2.toph2 span,
	.h2sub {
		font-size: 14px;
		line-height: 1.8em;
		display: block;
		padding-left: 15px;
		position: relative;
	}

	.top h2.toph2 span:before,
	.h2sub:before {
		width: 3px;
		height: 20px;
		content: "";
		position: absolute;
		left: 2px;
		top: calc(50% - 10px);
		background: #3A82F3;
	}

	.h2sub {
		display: inline-block;
		left: 5%;
		font-weight: 500;
	}

	.top-service ul {
		width: 90%;
		margin: 0 auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-service ul li {
		width: 48%;
		margin-bottom: 2%;
		position: relative;
		box-sizing: border-box;
		padding: 30px 0;
	}

	.top-service ul li .btn01 {
		width: 100%;
	}

	.top-service ul li .btn-box {
		width: 100%;
		height: 200px;
		overflow: hidden;
		position: relative;
	}

	.top-service ul li .btn-box:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #3A82F3;
		transform-origin: right top;
		transform: scale(1, 1);
		transition: all 1s;
		z-index: 2;
	}

	.top-service ul li.eon .btn-box:before {
		transform: scale(0, 1);
	}

	.top-service ul li:nth-child(1).eon .btn-box:before {
		transition-delay: .2s;
	}

	.top-service ul li:nth-child(2).eon .btn-box:before {
		transition-delay: .4s;
	}

	.top-service ul li:nth-child(3).eon .btn-box:before {
		transition-delay: .6s;
	}

	.top-service ul li:nth-child(4).eon .btn-box:before {
		transition-delay: .8s;
	}

	.top-service ul li:nth-child(5).eon .btn-box:before {
		transition-delay: 1s;
	}

	.top-service ul li:nth-child(6).eon .btn-box:before {
		transition-delay: 1.2s;
	}

	.top-service .btn-box p {
		position: absolute;
		top: 30px;
		z-index: 2;
	}

	.top-service .btn-box p span {
		line-height: 30px;
		display: inline-block;
		background: #132847;
		color: #FFF;
		font-size: 12px;
		font-weight: 400;
		margin-bottom: 5px;
		padding: 0 5px;
	}

	.top-service ul li .btn-box .btn-img {
		width: 100%;
		height: 100%;
		position: relative;
		transform: scale(2);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		transition: all .5s;
	}

	.top-service ul li:nth-child(1).eon .btn-img {
		transform: scale(1.5);
		transition-delay: .4s;
	}

	.top-service ul li:nth-child(2).eon .btn-img {
		transform: scale(1.5);
		transition-delay: .6s;
	}

	.top-service ul li:nth-child(3).eon .btn-img {
		transform: scale(1.5);
		transition-delay: .8s;
	}

	.top-service ul li:nth-child(4).eon .btn-img {
		transform: scale(1.5);
		transition-delay: 1s;
	}

	.top-service ul li:nth-child(5).eon .btn-img {
		transform: scale(1.5);
		transition-delay: 1.2s;
	}

	.top-service ul li:nth-child(6).eon .btn-img {
		transform: scale(1.5);
		transition-delay: 1.4s;
	}

	.top-service ul li:nth-child(1) .btn-img {
		background-image:
			url("../img/service-illust01.png");
	}

	.top-service ul li:nth-child(2) .btn-img {
		background-image:
			url("../img/service-illust02.png");
	}

	.top-service ul li:nth-child(3) .btn-img {
		background-image:
			url("../img/service-illust03.png");
	}

	.top-service ul li:nth-child(4) .btn-img {
		background-image:
			url("../img/service-illust04.png");
	}

	.top-service ul li:nth-child(5) .btn-img {
		background-image:
			url("../img/service-illust07.png");
	}

	.top-service ul li:nth-child(6) .btn-img {
		background-image:
			url("../img/service-illust06.png");
	}

	.top-service ul li:hover .btn01:after {
		width: 100%;
		transform-origin: left top;
		transform: scale(1, 1);
	}

	.top-service ul li:hover .btn01 p {
		color: #FFF;
	}

	.image-animation01 .btn01 {
		position: absolute;
		right: 0;
		bottom: -80px;
	}

	.top-panel01 {
		width: 100%;
		position: relative;
		padding: 0 0 150px;
		overflow: hidden;
	}

	.top-panel01 .catch {
		width: 240px;
		position: absolute;
		right: 5%;
		top: 30px;
		transition-delay: .5s;
		z-index: 2;
	}

	.top-panel01 .image-animation01 {
		width: 90%;
		position: relative;
		box-sizing: border-box;
		height: 250px;
		display: flex;
		flex-wrap: wrap;
		margin-top: 80px;
		margin-bottom: 20px;
	}

	.image01 {
		position: absolute;
		width: 130px;
		height: 200px;
		overflow: hidden;
		left: -200px;
		bottom: -100px;
		transition: all 1.5s;
		opacity: 0;
		transform: rotate(10deg);
		transition-delay: 1s;
	}

	.image02 {
		position: absolute;
		width: 130px;
		height: 200px;
		left: 110px;
		bottom: -100px;
		overflow: hidden;
		transition: all 1.5s;
		opacity: 0;
		transform: rotate(10deg);
		transition-delay: .5s;
	}

	.image03 {
		position: absolute;
		width: 80px;
		height: 180px;
		left: 200px;
		bottom: -80px;
		overflow: hidden;
		opacity: 0;
		transition: all 1.5s;
		transform: rotate(10deg);
	}

	.image-animation01.eon .image01 {
		left: 0;
		bottom: 0;
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	.image-animation01.eon .image02 {
		left: 140px;
		bottom: 0;
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	.image-animation01.eon .image03 {
		left: 280px;
		bottom: -58px;
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	.image-animation01.eon .image02 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image-animation01.eon .image02 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image01 .image-box,
	.image02 .image-box,
	.image03 .image-box {
		transform: scale(2) rotate(20deg);
		transition: all 2s;
	}

	.image-animation01.eon .image01 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image-animation01.eon .image02 .image-box {
		transform: scale(1.1) rotate(0deg);
	}

	.image-animation01.eon .image03 .image-box {
		transform: scale(1.1) rotate(0deg);
	}





	.top-cariot {
		width: 100%;
		min-height: 500px;
		padding: 0 0 20px;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-cariot h2.toph2 {
		left: 0;
	}

	.top-cariot .cariot-logo {
		width: 140px;
		position: absolute;
		bottom: 150px;
		left: 0;
	}

	.top-cariot .cp01 {
		position: absolute;
		bottom: 100px;
		font-size: 13px;
		font-weight: 500;
	}

	.top-cariot .text-box {
		width: 80%;
		position: relative;
		left: 10%;
		height: 280px;
	}

	.top-cariot .text-box .btn01 {
		bottom: 0;
		position: absolute;
		left: 0;
	}

	.top-cariot .image-box {
		width: 100%;
		top: 0;
		position: relative;
	}

	.top-cariot .new-item {
		width: 200px;
		position: absolute;
		bottom: -50px;
		left: 0;
		opacity: 0;
		z-index: 2;
		transition: all 1s;
	}

	.top-cariot .new-item.eon {
		left: 50px;
		opacity: 1;
	}

	.top-cariot .image-banner {
		width: 90%;
		height: 150px;
		top: 50px;
		left: 10%;
		position: relative;
		overflow: hidden;
	}

	.top-cariot .image-banner img {
		object-fit: cover;
		height: 100%;
	}

	.top-cariot .image-banner:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #3A82F3;
		transform-origin: right top;
		transform: scale(1, 1);
		transition: all 1s;
		z-index: 2;
	}

	.top-cariot .image-banner.eon:before {
		transform: scale(0, 1);
	}

	.top-cariot .image-banner img {
		transform: scale(1.5);
		transition: all 1s;
	}

	.top-cariot .image-banner.eon img {
		transform: scale(1);
		transition: all 1s;
	}

	.top-cariot:hover .btn01:after {
		width: 100%;
		transform-origin: left top;
		transform: scale(1, 1);
	}

	.top-cariot:hover .btn01 p {
		color: #FFF;
	}



	.top-showcase {
		width: 100%;
		position: relative;
		padding: 100px 0;
		overflow: hidden;
	}

	.top-showcase h2.toph2 {
		padding-bottom: 30px;
	}

	.top-showcase ul {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto 0;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-showcase .list01 li,
	.top-showcase .list03 li {
		opacity: 0;
		position: relative;
		transform: scale(1.5) translate(100px, 0);
		transition: all 1s;
		text-align: center;
		margin-bottom: 20px;
	}

	.top-showcase .list02 li,
	.top-showcase .list04 li {
		opacity: 0;
		position: relative;
		transform: scale(1.5) translate(-100px, 0);
		transition: all 1s;
		text-align: center;
		margin-bottom: 20px;
	}

	.top-showcase .list01.eon li,
	.top-showcase .list02.eon li,
	.top-showcase .list03.eon li,
	.top-showcase .list04.eon li {
		opacity: 1;
		transform: scale(1) translate(0, 0);
	}

	.top-showcase .list01.eon li:nth-child(2) {
		transition-delay: 0s;
	}

	.top-showcase .list01.eon li:nth-child(3) {
		transition-delay: 0s;
	}

	.top-showcase .list01.eon li:nth-child(4) {
		transition-delay: 0s;
	}

	.top-showcase .list02.eon li:nth-child(4) {
		transition-delay: 0s;
	}

	.top-showcase .list02.eon li:nth-child(3) {
		transition-delay: 0s;
	}

	.top-showcase .list02.eon li:nth-child(2) {
		transition-delay: 0s;
	}

	.top-showcase .list02.eon li:nth-child(1) {
		transition-delay: 0s;
	}

	.top-showcase .list03.eon li:nth-child(1) {
		transition-delay: 0s;
	}

	.top-showcase .list03.eon li:nth-child(2) {
		transition-delay: 0s;
	}

	.top-showcase .list03.eon li:nth-child(3) {
		transition-delay: 0s;
	}

	.top-showcase .list03.eon li:nth-child(4) {
		transition-delay: 0s;
	}

	.top-showcase .list04.eon li:nth-child(4) {
		transition-delay: 0s;
	}

	.top-showcase .list04.eon li:nth-child(3) {
		transition-delay: 0s;
	}

	.top-showcase .list04.eon li:nth-child(2) {
		transition-delay: 0s;
	}

	.top-showcase .list04.eon li:nth-child(1) {
		transition-delay: 0s;
	}

	.top-showcase ul li.logo-komatsu {
		width: 50%;
		padding: 16px 0 0;
	}

	.top-showcase ul li.logo-bridgestone {
		width: 50%;
		padding: 8px 0 0;
	}

	.top-showcase ul li.logo-groovex {
		width: 50%;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-jpx {
		width: 50%;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-tokyu {
		width: 50%;
		padding: 5px 0 0;
	}

	.top-showcase ul li.logo-staffservice {
		width: 50%;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-onet {
		width: 50%;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-advantest {
		width: 50%;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-duplo {
		width: 50%;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-recruit {
		width: 50%;
		padding: 0 0 10px;
	}

	.top-showcase ul li.logo-ana {
		width: 50%;
		padding: 0 0 10px;
	}

	.top-showcase ul li.logo-yamato {
		width: 50%;
		padding: 10px 0 0;
	}

	.top-showcase ul li.logo-secom {
		width: 50%;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-honda {
		width: 50%;
		padding: 0 0 0;
	}

	.top-showcase ul li.logo-jgc {
		width: 50%;
		padding: 20px 0 0;
	}

	.top-showcase ul li.logo-something {
		width: 50%;
	}

	.top-showcase ul li.logo-komatsu img {
		width: 80px;
	}

	.top-showcase ul li.logo-bridgestone img {
		width: 110px;
	}

	.top-showcase ul li.logo-groovex img {
		width: 100px;
	}

	.top-showcase ul li.logo-jpx img {
		width: 36px;
	}

	.top-showcase ul li.logo-tokyu img {
		width: 100px;
	}

	.top-showcase ul li.logo-staffservice img {
		width: 160px;
	}

	.top-showcase ul li.logo-onet img {
		width: 50px;
	}

	.top-showcase ul li.logo-something img {
		width: 100px;
	}

	.top-showcase ul li.logo-advantest img {
		width: 100px;
	}

	.top-showcase ul li.logo-duplo img {
		width: 70px;
	}

	.top-showcase ul li.logo-recruit img {
		width: 100px;
	}

	.top-showcase ul li.logo-ana img {
		width: 80px;
	}

	.top-showcase ul li.logo-yamato img {
		width: 100px;
	}

	.top-showcase ul li.logo-secom img {
		width: 70px;
	}

	.top-showcase ul li.logo-honda img {
		width: 60px;
	}

	.top-showcase ul li.logo-jgc img {
		width: 120px;
	}

	.top-news h2.toph2 {
		padding-bottom: 60px;
	}

	.top-news {
		width: 100%;
		position: relative;
		padding: 100px 0 150px;
	}

	.top-news .fin {
		transition-delay: .2s;
	}

	.top-news .news-title {
		position: relative;
	}

	.top-news .news-title:before {
		width: 200px;
		height: 150px;
		content: "";
		position: absolute;
		left: 5%;
		top: 30px;
		background: #F5F7F8;
		background-size: contain;
		z-index: -1;
	}

	.top-news .news-articles {
		width: 80%;
		padding: 0 0 0;
		margin: 0 0 0 10%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
	}

	.top-news .news-articles .btn01 {
		position: absolute;
		bottom: -20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.articles-top {
		width: 100%;
		position: relative;
		margin-bottom: 40px;
	}

	.sub-articles {
		width: 100%;
	}

	.sub-articles ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sub-articles ul li {
		width: 100%;
		margin-bottom: 40px;
		position: relative;
	}

	.news-main {
		width: 100%;
		position: relative;
		margin-bottom: 10px;
	}

	.news-main .news-date {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 12px;
		font-weight: 400;
		color: #FFF;
		background: #3A82F3;
		width: 100px;
		line-height: 30px;
		text-align: center;
	}

	.news-category {
		position: relative;
		top: 0;
		left: 0;
		display: inline-block;
		font-size: 11px;
		font-weight: 400;
		color: #3A82F3;
		background: #F5F9FF;
		padding: 0 10px;
		line-height: 30px;
		text-align: center;
		margin: 10px 0;
	}

	.articles-top .p01 {
		font-size: 12px;
		font-weight: 500;
		width: 100%;
		margin: 0 0;
		transition: all .5s;
	}

	.sub-articles .p01 {
		font-size: 12px;
		margin: 0;
		font-weight: 500;
		transition: all .5s;
	}

	.articles-top:hover .p01,
	.sub-articles ul li:hover .p01 {
		color: #3971B7;
	}



	.top-company {
		width: 100%;
		position: relative;
		background: url("../img/top-compnay-bg.jpg") no-repeat left top;
		background-size: cover;
		margin: 0px auto 0;
	}

	.top-company .fin {
		transition-delay: .2s;
	}

	.top-company h2 {
		position: relative;
		top: 60px;
		left: 10%;
		display: inline-block;
	}

	.top-company ul {
		position: relative;
		width: 80%;
		margin: 0 auto;
		max-width: 300px;
		left: 0;
		padding: 30px 0 50px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-company ul li {
		width: 100%;
		margin-bottom: 30px;
		position: relative;
	}

	.top-company ul li .btn-img-box {
		width: 100%;
		height: 1px;
		padding: 0 0 52.3%;
		overflow: hidden;
		position: relative;
	}

	.top-company ul li .btn-img-box:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(19, 40, 71, 0.51);
		z-index: 2;
		opacity: 0;
		transition: all .5s;
	}

	.top-company ul li:hover .btn-img-box:before {
		opacity: 1;
	}

	.top-company ul li .btn-img {
		width: 100%;
		transform: scale(1);
		transition: all .5s;
	}

	.top-company ul li:hover .btn-img {
		transform: scale(1.05);
	}






	.top-recruit {
		background: #F5F7F8;
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 50px;
	}

	.top-recruit ul {
		width: 90%;
		max-width: 220px;
		position: relative;
		top: -50px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-recruit ul li {
		width: 100%;
		margin-bottom: 30px;
		position: relative;
	}

	.top-recruit .btn-box {
		width: 100%;
		height: 90px;
		border-radius: 10px;
		background: #FFF;
		position: relative;
	}

	.top-recruit .btn-img {
		width: 50px;
		position: absolute;
		top: 50%;
		left: 50%;
		opacity: 1;
		transform-origin: center center;
		transform: scale(1) translate(-50%, -50%);
		transition: all .5s;
	}

	.top-recruit ul li:hover .btn-img {
		opacity: .9;
	}
}


.floating-banner {
	position: fixed;
	width: 200px;
	right: 25px;
	bottom: 80px;
	z-index: 3;
	opacity: 0;
	transition: all .5s ease-out;
	transition-delay: 1s;
}
.floating-banner.eon {
	opacity: 1;
}
@media screen and (max-width: 1023px) {
	.floating-banner {
		width: 200px;
		right: 10px;
		bottom: 50px;
	}
}
@media screen and (max-width: 500px) {
	.floating-banner {
		width: 160px;
		z-index: 10;
	}
}

.top-more {
	padding: 50px 0;
}

.top-more ul {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top-more ul li {
	width: 31.33%;
	position: relative;
}

.top-more ul li .btn02 {
	margin: 5px 0 0;
	padding: 0 10px;
	box-sizing: border-box;
}

.top-more ul li .btn-img {
	background: #132847;
	overflow: hidden;
}

.top-more ul li .btn-img img {
	transition: all .5s;
}

@media (hover: hover) {
	.top-more ul li:hover .btn-img img {
		transform: scale(1.1);
		opacity: 0.5;
	}
}

@media screen and (max-width: 1000px) {
	.top-more {
		padding: 20px 0;
	}

	.top-more ul li {
		width: 48%;
		margin-bottom: 20px;
	}

	.top-more ul li .btn02 {
		margin: 5px 0 0;
		padding: 0 0;
	}

	.top-more ul li .btn02 p {
		font-size: 12px;
		padding-right: 5px;
	}
}

@media screen and (max-width: 500px) {
	.top-more {
		padding: 0;
	}

	.top-more ul {
		width: 90%;
		max-width: 300px;
		margin: 0 auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.top-more ul li {
		width: 100%;
		margin-bottom: 20px;
		position: relative;
	}
}