@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/



/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	

	main #maintitle {
		height: 180px;
		text-align: center;
		position: relative;
		display: table;
		width: 100%;
		background-color: #f1f1f1;
	}
		main #maintitle .title {
			display: table-cell;
			vertical-align: middle;
		}
		main #maintitle .deco {
			position: absolute;
			top: 0;
			z-index: 1;
		}
			main #maintitle .deco01 {
				background-image: url("/recruit/w-nexco/common/img/top_deco02.png");
				left: 0;
				width: 313px;
				height: 180px;
				background-size: contain;
				background-repeat: no-repeat;
			}
			main #maintitle .deco02 {
				background-image: url("/recruit/w-nexco/common/img/top_deco01.png");
				right: 0;
				width: 313px;
				height: 180px;
				background-size: contain;
				background-repeat: no-repeat;
			}
	
	
	.people img {
		width: 100%;
	}
	
	.people > .area {
		position: relative;
		overflow: hidden;
	}
		.people .area .center{
			position: absolute;
			z-index: 1;
			width: 350px;
			height: 350px;
			left: 0;
			right: 0;
			margin: 0 auto;
			pointer-events: none;
			transform: translateX(5px);
		}
		.per {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			width: calc(50% + 175px);
			height: 350px;		
			position: relative;
			float: left;		
			background-color: #222;
		}
		.area01 .per.per-r,
		.area02 .per.per-l{
			background-color: #000;
		}
			.area > a{
				display: block;
				width: calc(50% + 175px);
				height: 350px;		
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				position: absolute;
				z-index: 2;
				background-color: transparent!important;
			}
			.area01 .per{
				transform: skewX(-45deg);
			}
			.area02 .per{
				transform: skewX(45deg);
			}
			.per.per-l{
				margin-left: -175px;
			}
			.per.per-r{
				margin-right: -175px;
			}
				.area01 .per .inner{
					transform: skewX(45deg);			
				}
				.area02 .per .inner{
					transform: skewX(-45deg);			
				}
				.per.per-l .inner{
					padding-left: 175px;
				}
				.per.per-r .inner{
					padding-right: 175px;
				}
	a:hover + .per{
		opacity: 0.8;
	}	
		.per .img-box{
			width: calc(100% - 175px);
			height: 350px;
			overflow: hidden;
		}
		.per-r .img-box{
			margin-left: 175px;
		}
			.per .img-box div{
				height: 100%;
				background-size: cover;
				background-position: center;
				transition: transform 1s cubic-bezier(0.37, 0.19, 0.28, 0.63);
			}
			a:hover + .per .img-box div{
				transform:scale(1.1);
			}
	.per .profile .name {
		line-height: 1.2;
		margin-top: 16px;
		color: white;
		font-size: 17px;
	}
		.per .profile .name span {
			font-size: 10px;
		}
	.profile{
		position: absolute;
		box-sizing: border-box;
		width: max-content;
	}
	.per-l .profile{
		left: calc(100% - 145px);
	}
	.per-r .profile{
		text-align: right;
		right: calc(100% - 145px);
	}
	.area01 .per-l .profile{
		top: 50px;

	
	}
	.area01 .per-r .profile{
		bottom: 50px;
	}
	.area02 .per-l .profile{
		bottom: 50px;
	}
	.area02 .per-r .profile{
		top: 50px;
	}
	.part {
		line-height: 1.6;
		font-weight: bold;
	}
	.part.green{
		color: #00a38d;
	}
	.part.orange {
		color: #ea6500;
	}
	.part.blue {
		color: #00a0e9;
	}
	
	
	
	
	
	
	
	
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	
	
	.people {overflow: hidden;}
	.people .per {
		position: relative;
		display: block;
	}
			.per > a{
				display: block;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				position: absolute;
				z-index: 2;
			}
	.people .img-box{
		height: 180px;
	}
		.people .img-box .bg_img {
			background-size: cover;
			background-position: 0 20%;
			height: 100%;
			overflow: hidden;
		}
			.people .img-box img{
				object-position: center 20%;
			}
	
/*	Èý½Ç¤Î¾€*/
	.people .per .profile::after {
			position: absolute;
			content: "";
			display: block;
			width: 4px;
			height: 180px;
	}
	.people .per-l .profile::after {
			bottom: 0;
			left: 0;
	}
	.people .per-r .profile::after {
			top: 0;
			left: 0;
	}
	
	.people > div:nth-child(odd) .per-l .profile::after,
	.people > div:nth-child(even) .per-l .profile::after{
		transform: skewX(-45deg) translate(88px);
	}
	.people > div:nth-child(odd) .per-r .profile::after,
	.people > div:nth-child(even) .per-r .profile::after{
		transform: skewX(45deg) translate(88px);
	}
	.people #per01 .profile::after,
	.people #per02 .profile::after,
	.people #per03 .profile::after,
	.people #per04 .profile::after,
	.people #per05 .profile::after,
	.people #per06 .profile::after{
		background: #ea6500;
	}
	.people #per07 .profile::after,
	.people #per08 .profile::after,
	.people #per09 .profile::after,
	.people #per10 .profile::after{
		background: #00a38d;
	}
	.people #per11 .profile::after,
	.people #per12 .profile::after,
	.people #per13 .profile::after,
	.people #per14 .profile::after{
		background: #00a0e9;
	}
	
	
/*	Èý½Ç¤Î‡íÐÎ*/
	.people .per-l .tri{
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 180px 180px;
		border-color: transparent transparent #222 transparent;
		z-index: -1;
	}
	.people .per-r .tri{
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 180px 0 0 180px;
		border-color: transparent transparent transparent #000;
		z-index: -1;
	}
	.people .per-l .profile {
		position: absolute;
		top: 0;
		right: 0;
		box-sizing: border-box;
		color: white;
		width: 180px;
		height: 180px;
		padding-top: 100px;
		z-index: 0;
		text-align: right
	}
	.people .per-r .profile {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		color: white;
		width: 180px;
		height: 180px;
		padding-top: 100px;
		z-index: 0;
		text-align: left
	}
	.people .per-r .profile .txt {
		position: absolute;
		width: max-content;
		height: max-content;
		bottom: 10px;
		left: 5%;
	}
	.people .per-l .profile .txt {
		position: absolute;
		width: max-content;
		height: max-content;
		bottom: 10px;
		right: 5%;
	}
	.name {
		line-height: 1.2;
		margin-top: 8px;
	}
	.name span{
		font-size: 8px;
	}
	
	
	.part {
		font-size: 12px;
		line-height: 1.2;
		font-weight: bold;
	}
	.part.green{
		color: #00a38d;
	}
	.part.orange {
		color: #ea6500;
	}
	.part.blue {
		color: #00a0e9;
	}
	
	
	main #maintitle {
		height: 100px;
		text-align: center;
		position: relative;
		display: table;
		width: 100%;
		background-color: #f1f1f1;
	}
		main #maintitle .title {
			display: table-cell;
			vertical-align: middle;
			position: relative;
			z-index: 10;
		}
		main #maintitle .deco {
			position: absolute;
			top: 0;
			z-index: 1;
		}
			main #maintitle .deco01 {
				background-image: url("/recruit/w-nexco/common/img/top_deco02.png");
				left: 0;
				width: 100%;
				height: 100px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: left;
			}
			main #maintitle .deco02 {
				background-image: url("/recruit/w-nexco/common/img/top_deco01.png");
				right: 0;
				width: 100%;
				height: 100px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: right;
			}
	
	
	
	
	
	
}