@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 {
		overflow: hidden;
		position: relative;
	}
		.bg{
			position: absolute;
		}
		#bg01{
			background: url("/recruit/w-nexco/workstyle/img/integration02/mainimg2.jpg") no-repeat top right;
			background-size: auto;
			background-color: #e0e4e7;
			width: 100%;
			height: 236px;
			z-index: -1;
		}
		.deco01 {
			position: absolute;
			width: 1112px;
			height: 1292px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration02/deco04.png");
			background-position: top right;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: 0;
			right: 0;
		}
		.deco02 {
			position: absolute;
			width: 310px;
			height: 446px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration02/deco03.png");
			background-position: top left;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: 0;
			left: 0;
		}
	
	.top {
		position: relative;
		width: 100%;
		height: 236px;
		top: 0;
		left: 0;
		z-index: 10;
	}
		.top .top-bg {
			width: 100%;
			height: 400px;
			background-size: cover;
			background-position: 70% 10%;
		}
		.top .txt-area {
			height: 100%;
		}
			.top .txt-area .txtbox {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100%;
				text-align: left;
			}
				.top .txt-area .txtbox h1 {
					width: 550px;
					line-height: 1;
				}
				.top .txt-area .txtbox p.en{
					padding-right: 8px;
				}
	
		.menu {
			margin-top: 100px;
			width: 100%;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
		}
		.menu li {
			width: 100%;
			display: block;
			border-left: solid 1px #a6a6a6;
		}
			.menu li:last-child {
				display: block;
				border-right: solid 1px #a6a6a6;
			}
					.menu li a{
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10px 0 20px;
						position: relative;
						font-weight: bold;
					}
						.menu li a:after{
							content: '';
							display: block;
							position: absolute;
							width: 6px;
							height: 6px;
							border-right: 1px solid #00abff;
							border-bottom: 1px solid #00abff;
							transform: rotate(45deg);
							left: 0;
							right: 0;
							margin: 0 auto;
							bottom: 10px;
							transition: 0.4s;
						}
						.menu li a:hover{
							color: #00abff;
						}
						.menu li a:hover:after{
							bottom: 3px;
						}

/*	¹²Í¨*/
	h2 {
		font-size: 30px;
		text-align: center;
		padding: 80px 0;
		letter-spacing: 0.2em;
	}
	.pht-wrap {
		position: relative;
	}
		.pht-wrap .img-box{
			width: 100%;
		}
			.pht-wrap .img-box img{
				width: 100%;
			}
		.pht-wrap .prof-box{
			width: 45%;
			position: absolute;
			bottom: 0;
			right: 0;
			transform: translateY(50%);
			padding: 25px 25px 35px;
			color: white;
			background: #000;
		}
		.prof-box.doboku {
			background-image: linear-gradient(-45deg, transparent 50px, #00a38d 50px, #00a38d 53px, transparent 53px)
		}
		.prof-box.jimu {
			background-image: linear-gradient(-45deg, transparent 50px, #ea6500 50px, #ea6500 53px, transparent 53px)
		}
		.prof-box.sisetu {
			background-image: linear-gradient(-45deg, transparent 50px, #0078d2 50px, #0078d2 53px, transparent 53px)
		}
			.prof-box .part{
				font-weight: bold;
			}
			.prof-box.doboku .part{
				color: #00a38d;
			}
			.prof-box.jimu .part{
				color: #ea6500;
			}
			.prof-box.sisetu .part{
				color: #0078d2;
			}
			.prof-box .content{
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				align-items: center;
				margin-top: 20px;
			}
				.prof-box .content .name{
					font-size: 17px;
					line-height: 1.2;
					margin-right: 50px;
					flex-shrink: 0;
				}
					.prof-box .content div{
						width: 100%;
					}
						.prof-box .content .name span{
							font-size: 10px;
						}
						.prof-box .child{
							width: 95%;
							padding-top: 25px;
							margin-top: 25px;
							border-top: solid 1px rgba(255,255,255,0.30);
						}
						.prof-box span.bold{
							font-weight: bold;
						}
						.prof-box span.small{
							font-size: 12px;
						}
			/*	2ÐФΤȤ³¤í*/
			.sec03 .prof-box .content{
				align-items: flex-start;
			}
				.sec03 .prof-box .content .name{
					margin-top: 2px;
				}
	
	.career {
		position: relative;
		padding: 80px 70px 60px;
/*		margin-top: 180px;*/
		margin-bottom: 136px;
	}
		.career .title{
			position: absolute;
			top: -30px;
			left: 70px;
		}
		.career .title.img-box{
			width: 300px;
		}
	
	.career .timeline ul {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: space-between;
	}
		.career .timeline ul li{
			width: 160px;
		}
		.career .timeline ul li.point{
		}
			.career .timeline p{
				font-weight: bold;
				margin-top: 24px;
			}
			.career .item {
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				align-items: flex-end;
			}
				.career .timeline .num {
					height: 41px;
					flex-shrink: 0;
				}
					.career .timeline .num img{
						height: 100%;
						max-height: 100%;
					}
				.career .timeline .arrow{
					width: 100%;
					height: 1px;
					margin-bottom: 3px;
					margin-left: 10px;
					position: relative;
					background-color: rgba(0,0,0,0.15)
				}
				.career .timeline .arrow::after{
					content: "";
					display: block;
					width: 10px;
					height: 1px;
					position: absolute;
					top: -4px;
					right: 0;
					background-color: rgba(0,0,0,0.15);
					transform: rotate(45deg);
				}
	.content{
	}
		.content dl{
			width: 900px;
			padding: 50px;
			background-color: #ffffff;
/*			border: solid 1px #ea6500;*/
		}
		.content dl:not(:first-child){
			margin-top: 60px;
		}
		.content dl:nth-child(even){
			margin-right: 0;
			margin-left: auto;
		}
			.content dl dt{
				font-weight: bold;
				font-size: 22px;
				line-height: 1.6;
/*				color: #ea6500;*/
				position: relative;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				align-items: center;
			}
			.content dl dt::before{
				content: "";
				display: block;
				width: 37px;
				height: 43px;
				background-size: contain;
				margin-right: 16px;
			}
				.content dl dt.multiple::before{
					margin-top: -14px;
/*
					content: "";
					display: block;
					width: 37px;
					height: 43px;
					background-size: contain;
					position: absolute;
					top: 6px;
					left: 0;
*/
				}
			.content dl dd{
				line-height: 2.1;
				margin-top: 32px;
				text-align: justify;
			}
	
	
	
	
	.sec01::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		padding: 100px 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.sec01 {
		position: relative;
/*		background-color: #f2f2f2;*/
		padding: 100px 0;
	}
		.sec01 .lead{
			font-size: 17px;
			font-weight: bold;
		}
		.sec01 .txt{
			margin-top: 28px;
			line-height: 2.2;
		}
	.sec02{
		position: relative;
		z-index: 2;
	}
	
	.section .container {
		padding-bottom: 238px;
	}
	
	
	
/*	É«¤ÎÔO¶¨*/
	
	.orange {
		background-color: #fef6f0;
	}
	.orange .career {
		background-color: #fcebde;
	}
	
	.orange .career .timeline ul li.point{
		color: #ea6500;
	}
		.orange .content dl{
			border: solid 1px #ea6500;
		}
		.orange dl dt{
			color: #ea6500;
			letter-spacing: 0.1em;
		}
			.content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_orenge.png");
			}
	
	
	.green {
		background-color: #f0f9f8;
	}
	.green .career {
		background-color: #def3f0;
	}
	
	.green .career .timeline ul li.point{
		color: #00a38d;
	}
	
		.green .content dl{
			border: solid 1px #00a38d;
		}
		.green dl dt{
			color: #00a38d;
		}
			.green .content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_green.png");
			}
	
	.pink {
		background-color: #faf3f4;
	}
		.pink .content dl{
			border: solid 1px #bf5d76;
		}
		.pink dl dt{
			color: #bf5d76;
		}
			.pink .content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_pink.png");
			}
	.blue {
		background-color: #ebf4fb;
	}
		.blue .content dl{
			border: solid 1px #0078d2;
		}
		.blue dl dt{
			color: #0078d2;
		}
			.blue .content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_blue.png");
			}
	
	
	
	
	
	
	
	
	
	
	
	
	
	.person02 .career ul{
		width: 75%;
	}
	.person02 .career ul:last-of-type{
		width: 75%;
		margin-right: 0;
		margin-left: auto;
		margin-top: 45px;
	}
	.sec02 .wrap {
		padding-top: 180px;
	}
	.sec03 .wrap {
		padding-top: 275px;
	}
	
	
	
	.person .container{
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
	}
	
	.person01 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/01.png");
	}
	.person02 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/02.png");
	}
	.person03 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/03.png");
	}
	.person04 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/04.png");
	}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	.main {
		overflow: hidden;
		background-color: transparent;
		position: relative;
	}
		.bg{
			position: absolute;
		}
		#bg01{
			background: url("/recruit/w-nexco/workstyle/img/integration02/mainimg_sp.jpg") no-repeat center;
			background-size: cover;
			background-position: top 10% center;
			background-color: #e0e4e7;
			width: 100%;
			height: 200px;
			z-index: -1;		
		}
	.wrap {
		position: relative;
	}
	/*	TOP¤Îdeco*/
		.deco01 {
			position: absolute;
			width: 1112px;
			height: 1026px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration02/deco04.png");
			background-position: top right;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: 0;
			right: -30px;
		}
		.deco02 {
			position: absolute;
			width: 310px;
			height: 362px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration02/deco03.png");
			background-position: top left;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: 0;
			left: -120px;
		}
	.top {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 200px;
	}
		.top .txt-area{
			height: 100%;
			width: 100%;
		}
			.top .txt-area .txtbox {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100%;
				padding-top: 15px;
					text-shadow: 0px 0px 13px white;
			}
				.top .txt-area .txtbox #maintitle h1 {
					text-shadow: 0px 0px 13px white;
					text-align: left;
					font-size: 21px;
					letter-spacing: 0.2em;
					line-height: 1.5;
					margin-top: 0;
				}
	
		.menu {
			margin-top: 20px;
		}
		.menu li{
			float: left;
			width: 50%;
			text-align: center;
			position: relative;
			font-size: 12px;
			box-sizing: border-box;
		}
			.menu li:nth-of-type(n + 3){
				margin-top: 10px;
			}
			.menu li:nth-of-type(2n):before,
			.menu li:nth-of-type(n + 3):after{
				content: '';
				display: block;
				position: absolute;
				background-color: #b8b8b8;
				top: 0;
				left: 0;
			}
			.menu li:nth-of-type(2n):before{
				width: 1px;
				height: 100%;
			}				
			.menu li:nth-of-type(n + 3):after{
				width: calc(100% - 5px);
				height: 1px;
				top: -5px;
				left: 0;
			}
			.menu li:nth-of-type(2n):after{
				left: 5px;
			}
				.menu li a{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10px 0 20px;
					position: relative;
					font-weight: bold;
				}
					.menu li a:after{
						content: '';
						display: block;
						position: absolute;
						width: 6px;
						height: 6px;
						border-right: 1px solid #00abff;
						border-bottom: 1px solid #00abff;
						transform: rotate(45deg);
						left: 0;
						right: 0;
						margin: 0 auto;
						bottom: 10px;
						transition: 0.4s;
					}
					.menu li a:hover{
						color: #00abff;
					}
					.menu li a:hover:after{
						bottom: 3px;
					}
	
	
	
	
	
	
	
	
	
	
	
/*	¹²Í¨*/
	h2 {
		font-size: 24px;
		text-align: center;
		padding: 50px 0;
	}
	.pht-wrap {
		position: relative;
	}
		.pht-wrap .img-box{
			width: 100%;
		}
			.pht-wrap .img-box img{
				width: 100%;
			}
		.pht-wrap .prof-box{
			margin-right: 0;
			margin-left: auto;
/*			position: absolute;*/
			bottom: -125px;
/*
			right: 0;
			width: 90%;
*/
			max-width: 450px;
			margin-right: 0;
			padding: 18px;
			color: white;
			background: #000;
		}
		.prof-box.doboku {
			background-image: linear-gradient(-45deg, transparent 50px, #00a38d 50px, #00a38d 53px, transparent 53px)
		}
		.prof-box.jimu {
			background-image: linear-gradient(-45deg, transparent 50px, #ea6500 50px, #ea6500 53px, transparent 53px)
		}
		.prof-box.sisetu {
			background-image: linear-gradient(-45deg, transparent 50px, #0078d2 50px, #0078d2 53px, transparent 53px)
		}
			.prof-box .part{
				font-weight: bold;
			}
			.prof-box.doboku .part{
				color: #00a38d;
			}
			.prof-box.jimu .part{
				color: #ea6500;
			}
			.prof-box.sisetu .part{
				color: #0078d2;
			}
			.prof-box .content{
				margin-top: 8px;
			}
				.prof-box .content .name{
					font-size: 16px;
					line-height: 1.2;
					display: -webkit-flex;
					display: -moz-flex;
					display: -ms-flex;
					display: -o-flex;
					display: flex;
					align-items: center;
					margin-bottom: 5px;
				}
					.prof-box .content div{
						width: 100%;
					}
						.prof-box .content .name span{
							font-size: 8px;
							margin-left: 5px;
						}
						.prof-box .child{
							width: 95%;
							padding-top: 25px;
							margin-top: 25px;
							border-top: solid 1px rgba(255,255,255,0.30);
						}
						.prof-box span.bold{
							font-weight: bold;
						}
						.prof-box span.small{
							font-size: 12px;
						}
			/*	2ÐФΤȤ³¤í*/
			.sec03 .prof-box{
				bottom: -230px;
			}
			.sec03 .prof-box .content{
				align-items: flex-start;
			}
				.sec03 .prof-box .content .name{
					margin-top: 2px;
				}
	
	.career {
		position: relative;
		padding: 80px 32px 60px;
/*		margin-top: 80px;*/
		margin-bottom: 72px;
	}
		.career .title{
			position: absolute;
			top: -22px;
			left: 20px;
		}
		.career .title.img-box{
			width: 220px;
		}
	
	.career .timeline ul {
		width: max-content;
		margin: auto;
	}
		.career .timeline ul li{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
		}
		.career .timeline ul li:not(:first-child){
			margin-top: 46px;
		}
		.career .timeline ul li.point{
		}
			.career .timeline p{
				font-weight: bold;
				margin-left: 32px;
			}
			.career .item {
				width: 85px;
				position: relative;
				flex-shrink: 0;
			}
				.career .timeline .num {
					display: -webkit-flex;
					display: -moz-flex;
					display: -ms-flex;
					display: -o-flex;
					display: flex;
					justify-content: center;
					height: 41px;
					flex-shrink: 0;
				}
					.career .timeline .num img{
						height: 100%;
						max-height: 100%;
					}
				.career .timeline .arrow{
					width: 1px;
					height: calc(100% - 20px);
					margin-bottom: 3px;
					margin-left: 10px;
					position: absolute;
					bottom: -34px;
					left: 26px;
					background-color: rgba(0,0,0,0.15)
				}
				.career .timeline .arrow::after{
					content: "";
					display: block;
					width: 10px;
					height: 1px;
					position: absolute;
					bottom: 4px;
					right: 0;
					background-color: rgba(0,0,0,0.15);
					transform: rotate(45deg);
				}
	.content{
	}
		.content dl{
			width: 100%;
			padding: 22px;
			background-color: #ffffff;
/*			border: solid 1px #ea6500;*/
		}
		.content dl:not(:first-child){
			margin-top: 35px;
		}
		.content dl:nth-child(even){
			margin-right: 0;
			margin-left: auto;
		}
			.content dl dt{
				font-weight: bold;
				font-size: 18px;
/*				color: #ea6500;*/
				position: relative;
				padding-left: 40px;
				margin-top: 12px;
				line-height: 1.4;
			}
			.content dl dt::before{
				content: "";
				display: block;
				width: 29px;
				height: 32px;
				background-size: contain;
				background-repeat: no-repeat;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
			}
				.content dl dt.multiple::before{
					top: 4px;
					margin: 0;
				}
			.content dl dd{
				margin-top: 22px;
				text-align: justify;
			}
			.content dl dt.multiple + dd{
				margin-top: 16px;
/*				text-align: justify;*/
			}
	
	
	
	
	
	
	
		
	.sec01 {
		background-color: #f2f2f2;
		padding: 60px 0;
	}
		.sec01 .lead{
			font-size: 17px;
			font-weight: bold;
		}
		.sec01 .txt{
			margin-top: 28px;
			line-height: 2.2;
			text-align: justify-;
		}
	
	.section .container {
		padding-bottom: 60px;
	}
	
	
	
/*	É«¤ÎÔO¶¨*/
	
	.orange {
		background-color: #fef6f0;
	}
	.orange .career {
		background-color: #fcebde;
	}
	
	.orange .career .timeline ul li.point{
		color: #ea6500;
	}
		.orange .content dl{
			border: solid 1px #ea6500;
		}
		.orange dl dt{
			color: #ea6500;
		}
			.content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_orenge.png");
			}
	
	
	.green {
		background-color: #f0f9f8;
	}
	.green .career {
		background-color: #def3f0;
	}
	
	.green .career .timeline ul li.point{
		color: #00a38d;
	}
	
		.green .content dl{
			border: solid 1px #00a38d;
		}
		.green dl dt{
			color: #00a38d;
		}
			.green .content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_green.png");
			}
	
	.pink {
		background-color: #faf3f4;
	}
		.pink .content dl{
			border: solid 1px #bf5d76;
		}
		.pink dl dt{
			color: #bf5d76;
		}
			.pink .content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_pink.png");
			}
	.blue {
		background-color: #ebf4fb;
	}
		.blue .content dl{
			border: solid 1px #0078d2;
		}
		.blue dl dt{
			color: #0078d2;
		}
			.blue .content dl dt::before{
				background-image: url("/recruit/w-nexco/workstyle/img/integration02/q_blue.png");
			}
	
	
	
	
	
	
	
	
	
	
	
	
	.sec02 {
		position: relative;
		z-index: 2;
	}
	.person02 .career ul{
	}
	.person02 .career ul:last-of-type{
		margin-top: 46px;
	}
	.sec03 .wrap .content {
/*		margin-top: 80px;*/
	}
	
	
	
	.person .container{
		padding-top: 80px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
	}
	
	.person01 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/01.png");
	}
	.person02 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/02.png");
	}
	.person03 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/03.png");
	}
	.person04 .container{
		background-image: url("/recruit/w-nexco/workstyle/img/integration02/04.png");
	}
}