@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/integration01/mainimg.jpg") no-repeat center;
			background-size: cover;
			width: 100%;
			height: 236px;
			z-index: -1;
		}
		.deco01 {
			position: absolute;
			width: 1112px;
			height: 1292px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration01/deco04.png");
			background-position: top right;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: 0;
			right: 0;
			z-index: 2;
		}
		.deco02 {
			position: absolute;
			width: 310px;
			height: 446px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration01/deco03.png");
			background-position: top left;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: 0;
			left: 0;
			z-index: 2;
		}
	
	.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;
				}
	
	section {
		position: relative;
		padding: 110px 0;
	}
	section:last-child {
		padding-bottom: 200px;
	}
	
		section h2 {
			font-size: 17px;
			letter-spacing: 6px;
			line-height: 1.4;
		}
		section h3 {
			font-size: 16px;
			margin-top: 40px;
		}
		section p {
			margin-top: 30px;
			line-height: 2.2;
		}
		section .graph {
			position: relative;
			z-index: 2;
		}
		section .graph.flex {
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
		}
	
	
		.sec01 {
		}
		.sec01::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #ebf7fd;
			z-index: -1;
		}
			.sec01 .graph {
				margin: 60px auto 0;
				background-color: white;
				padding: 30px 0;
				box-sizing: border-box;
			}
				.sec01 .graph dl {
					display: -webkit-flex;
					display: -moz-flex;
					display: -ms-flex;
					display: -o-flex;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
				.sec01 .graph dl:not(:last-child) {
					border-right: solid 3px #e9e9e9;
				}
				.sec01 .graph dl:last-child {
					width: 387px;
				}
					.sec01 .graph dl dt {
						font-size: 20px;
						text-align: center;
						font-weight: bold;
					}
					.sec01 .graph dl dd {
						width: 320px;
					}
				.sec01 p:last-of-type {
					margin-top: 60px;
				}
	.sec02 {
		background-color: white;
		z-index: 10;
	}
		.sec02 .menu {
			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;
		}
		.sec02 .menu li {
			width: 100%;
			display: block;
			border-left: solid 1px #a6a6a6;
		}
			.sec02 .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;
						}
	
	
	.sec02 .container {
		position: relative;
		padding-top: 160px;
	}
	.sec02 .container:first-of-type {
/*		padding-top: 120px;*/
	}
		.sec02 .container h2 {
			font-size: 24px;
			font-weight: bold;
		}
	
		.sec02 .pick {
			position: absolute;
			top: 110px;
			padding: 0px 8px;
			border: solid 1px #00a0e9;
			color: #00a0e9;
			letter-spacing: 0.18em;
		}
			.sec02 .pick::before {
				content: "";
				display: block;
				position: absolute;
				bottom: -10px;
				left: 20px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 10px 10px 0;
				border-color: transparent #00a0e9 transparent transparent;
			}
			.sec02 .pick::after {
				content: "";
				display: block;
				position: absolute;
				bottom: -9px;
				left: 20px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 10px 10px 0;
				border-color: transparent #ffffff transparent transparent;
			}
		.sec02 table {
			margin-top: 40px;
			border-collapse: collapse;
			border-top: solid 1px #7a7a7a;
			border-bottom: solid 1px #7a7a7a;
			height: 100%;
			width: 100%;
		}
			.sec02 table th{
				font-size: 16px;
				text-align: left;
				width: 355px;
				background-color: #e9e9e9;
				box-sizing: border-box;
				padding: 15px 25px;
				position: relative;
				z-index: -1;
			}
			.sec02 table tr:not(:last-child) th::after{
				content: "";
				display: block;
				width: calc(100% - 5px);
				height: 1px;
				border-bottom: solid 1px #d3d3d3;
				position: absolute;
				bottom: 0px;
				right: 0;
				left: 0;
				margin: auto;
			}
			.sec02 table td{
				padding: 0 15px;
				box-sizing: border-box;
				position: relative;
			}
			.sec02 table tr:not(:last-child) td::after{
				content: "";
				display: block;
				width: calc(100% - 5px);
				height: 1px;
				border-bottom: solid 1px #d3d3d3;
				position: absolute;
				bottom: 0px;
				right: 0;
				left: 0;
				margin: auto;
			}
	
	
		.sec02 .graph img{
			width: 1036px;
		}
		.sec02 #baby .graph {
			margin: 60px auto 0;
		}
		.sec02 .container > p.attention {
			margin-top: 10px;
			text-align: right;
			font-size: 12px;
		}
		.sec02 #nursing .graph {
			margin: 15px auto 0;
		}
		.sec02 #nursing h3:last-of-type {
			margin-top: 50px;
		}

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	.main {
		overflow: hidden;
		background-color: transparent;
		position: relative;
	}
	.main img{
		width: 100%;
	}
		.bg{
			position: absolute;
		}
		#bg01{
			background: url("/recruit/w-nexco/workstyle/img/integration01/mainimg_sp.jpg") no-repeat center;
			background-size: cover;
			background-position: center;
			width: 100%;
			height: 200px;
			z-index: 1;		
		}
	/*	TOP¤Îdeco*/
		.deco01 {
			position: absolute;
			width: 1112px;
			height: 1106px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration01/deco04.png");
			background-position: top right;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: -2px;
			right: -30px;
			z-index: 2;
		}
		.deco02 {
			position: absolute;
			width: 310px;
			height: 380px;
			background-image: url("/recruit/w-nexco/workstyle/img/integration01/deco03.png");
			background-position: top left;
			background-size: auto 100%;
			background-repeat: no-repeat;
			top: -2px;
			left: -120px;
			z-index: 2;
		}
	.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%;
			}
				.top .txt-area .txtbox #maintitle h1 {
					text-align: left;
					font-size: 21px;
					letter-spacing: 0.2em;
					line-height: 1.5;
				}
	
	section {
		position: relative;
		padding: 60px 0;
	}
	section:last-child {
		padding-bottom: 100px;
	}
		section h2 {
/*			color: #009de6;*/
			font-size: 18px;
			letter-spacing: 2px;
			line-height: 1.4;
		}
			section h3 {
				font-size: 16px;
				margin-top: 32px;
				line-height: 1.6;
			}
			section p {
				margin-top: 25px;
				line-height: 2;
			}
			section .graph {
				margin: 20px auto 0;
				position: relative;
				z-index: 2;
				overflow-y: hidden;
			}
				section .graph.flex {
					display: -webkit-flex;
					display: -moz-flex;
					display: -ms-flex;
					display: -o-flex;
					display: flex;
					flex-direction: column;
				}
				section .graph .inner {
					width: 1036px;
				}
				section .graph.scroll:after {
					top: 50%;
					transform: translateY(-50%);
					bottom: auto;
				}
	.sec01 {
	}
	.sec01::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #ebf7fd;
		z-index: -1;
	}
		.sec01 .wrap {
			position: relative;
			z-index: 3;
		}
			.sec01 p {
				text-align: justify;
			}
			.sec01 p:last-of-type {
				margin-top: 32px;
			}
				.sec01 .graph {
					background-color: white;
					padding: 0px 20px;
					box-sizing: border-box;
				}
					.sec01 .graph dl {
						display: -webkit-flex;
						display: -moz-flex;
						display: -ms-flex;
						display: -o-flex;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 20px 0;
						box-sizing: border-box;
					}
					.sec01 .graph dl:not(:last-child) {
						border-bottom: solid 3px #e9e9e9;
					}
					.sec01 .graph dl:last-child {
					}
						.sec01 .graph dl dt {
							font-size: 20px;
							text-align: center;
							font-weight: bold;
						}
						.sec01 .graph dl dd {
							width: 85%;
						}
	.sec02 {
		padding-top: 30px;
	}
		.sec02 .menu li{
			float: left;
			width: 50%;
			text-align: center;
			position: relative;
			font-size: 12px;
			box-sizing: border-box;
		}
			.sec02 .menu li:nth-of-type(n + 3){
				margin-top: 10px;
			}
			.sec02 .menu li:nth-of-type(2n):before,
			.sec02 .menu li:nth-of-type(n + 3):after{
				content: '';
				display: block;
				position: absolute;
				background-color: #b8b8b8;
				top: 0;
				left: 0;
			}
			.sec02 .menu li:nth-of-type(2n):before{
				width: 1px;
				height: 100%;
			}				
			.sec02 .menu li:nth-of-type(n + 3):after{
				width: calc(100% - 5px);
				height: 1px;
				top: -5px;
				left: 0;
			}
			.sec02 .menu li:nth-of-type(2n):after{
				left: 5px;
			}
				.sec02 .menu li a{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10px 0 20px;
					position: relative;
					font-weight: bold;
				}
					.sec02 .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;
					}
					.sec02 .menu li a:hover{
						color: #00abff;
					}
					.sec02 .menu li a:hover:after{
						bottom: 3px;
					}
		.sec02 .container {
			position: relative;
			padding-top: 130px;
		}
		.sec02 .container:first-of-type {
/*			padding-top: 70px;*/
		}
			.sec02 .pick {
				position: absolute;
				top: 90px;
				padding: 0px 8px;
				border: solid 1px #00a0e9;
				color: #00a0e9;
				letter-spacing: 0.18em;
			}
				.sec02 .pick::before {
					content: "";
					display: block;
					position: absolute;
					bottom: -10px;
					left: 20px;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 10px 10px 0;
					border-color: transparent #00a0e9 transparent transparent;
				}
				.sec02 .pick::after {
					content: "";
					display: block;
					position: absolute;
					bottom: -9px;
					left: 20px;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 10px 10px 0;
					border-color: transparent #ffffff transparent transparent;
				}
			.sec02 .container h2 {
				font-size: 24px;
				font-weight: bold;
			}
			.sec02 table {
				margin-top: 32px;
				border-collapse: collapse;
				border-top: solid 1px #7a7a7a;
				border-bottom: solid 1px #7a7a7a;
				height: 100%;
				width: 100%;
			}
				.sec02 table th{
					text-align: left;
					width: 130px;
					background-color: #e9e9e9;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					position: relative;
					padding: 15px 10px;
					z-index: -1;
				}
			.sec02 table tr:not(:last-child) th::after{
				content: "";
				display: block;
				width: calc(100% - 5px);
				height: 1px;
				border-bottom: solid 1px #d3d3d3;
				position: absolute;
				bottom: 0px;
				right: 0;
				left: 0;
				margin: auto;
			}
				.sec02 table td{
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					position: relative;
					padding: 15px 10px;
				}
			.sec02 table tr:not(:last-child) td::after{
				content: "";
				display: block;
				width: calc(100% - 5px);
				height: 1px;
				border-bottom: solid 1px #d3d3d3;
				position: absolute;
				bottom: 0px;
				right: 0;
				left: 0;
				margin: auto;
			}
	
	
			section .graph-area .graph {
				margin-top: 16px;
			}
			section .graph-area .graph li{
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				padding-top: 16px;
			}
			section .graph-area .graph div{
				width: 100%;
			}
			section .graph-area .graph li:not(:first-child){
				margin-top: 32px;
				padding-top: 32px;
				border-top: solid 1px #7a7a7a;
			}
			section .graph-area .graph .target{
				width: 20px;
				text-align: center;
				font-size: 12px;
				margin-right: 10px;
				color: white;
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
				text-orientation: upright; /* ¤¹¤Ù¤Æ¿k·½Ïò¤Ë±íʾ */
			}
			section .graph-area .graph .target.woman{
				background-color: #e77893;
			}
			section .graph-area .graph .target.all{
				background-color: #61cba5;
			}
			section .graph-area .graph .target.man{
				background-color: #65a1ee;
			}
			section .graph-area .graph .system{
/*				margin-top: 16px;*/
				font-size: 16px;
				font-weight: bold;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				align-items: flex-start;
				
			}
			section .graph-area .graph span{
				width: 54px;
				padding: 2px;
				margin-right: 10px;
				font-size: 12px;
				font-weight: normal;
				text-align: center;
				display: inline-block;
				background-color: black;
				color: white;
				flex-shrink: 0;
/*				margin-top: 1px;*/
			}
			section .graph-area .graph .content{
/*				margin-top: px;*/
/*				font-size: 16px;*/
				margin-top: 15px;
				padding-top: 15px;
/*				border-top: solid 1px #d3d3d3;*/
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				align-items: flex-start;
				position: relative;
			}
			section .graph-area .graph .system span{
				margin-top: 2px;
			}
			section .graph-area .graph .content:before{
				content: "";
				display: block;
				width: 95%;
				height: 1px;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				margin: auto;
				background-color: #d3d3d3;
			}
			section .graph-area .graph .attention{
				border: solid 1px #00a38d;
				color: #00a38d;
				background-color: white;
				padding: 5px 20px;
				margin-top: 20px;
				text-align: justify;
			}
			section .graph-area .graph .img-box{
				margin-top: 20px;
			}
	
	
	
		.sec02 .container > p.attention {
			margin-top: 10px;
			font-size: 12px;
		}
	
	#nursing h3:last-of-type {
		margin-top: 60px;
	}
}