@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/hrd/mainimg.jpg") no-repeat center;
		background-size: cover;
		width: 100%;
		height: 400px;
		z-index: -1;		
	}
	#bg02{
		background-color: #efefef;
		width: 100%;
		left: 0;
	}
	.deco-bg01 {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url("/recruit/w-nexco/workstyle/img/hrd/deco.png");
		background-position: top center;
		background-size: auto 100%;
		background-repeat: no-repeat;
		top: 0;
		right: 0;
		z-index: 1;
	}
	
	.top {
		position: relative;
		width: 100%;
		height: 400px;
		top: 0;
		left: 0;
	}
		.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-end;
				align-items: center;
				height: 100%;
				text-align: right;
			}
				.top .txt-area .txtbox h1 {
					width: 470px;
					line-height: 1;
				}
				.top .txt-area .txtbox p.en{
					padding-right: 8px;
				}
	
	section {
		position: relative;
		z-index: 1;
		padding: 120px 0;
	}
	section:last-child {
		padding-bottom: 200px;
	}
		section h2 {
			font-size: 30px;
			letter-spacing: 6px;
			line-height: 1.4;
		}
		section h3 {
			font-size: 20px;
			margin-top: 35px;
		}
		section p {
			margin-top: 25px;
			line-height: 2.2;
		}
		section .graph {
			margin: 60px auto 0;
			width: 940px;
			position: relative;
			z-index: 2;
		}
	
	section.ts {
		overflow: hidden;
		
	}
	.ts .deco-bg01 {
	}
	
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    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/hrd/mainimg.jpg") no-repeat center;
		background-size: cover;
		background-position: 56% 10%;
		width: 100%;
		height: 200px;
		z-index: -1;		
	}
	#bg02{
		background-color: #efefef;
		width: 100%;
		left: 0;
	}
	.deco-bg01 {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url("/recruit/w-nexco/workstyle/img/hrd/deco.png");
		background-position: top right 25%;
		background-size: auto 100%;
		background-repeat: no-repeat;
		top: 0;
		right: 0;
		z-index: 1;
	}
	.top {
		position: relative;
		z-index: -1;
		width: 100%;
		height: 200px;
	}
		.top .txt-area{
			height: 100%;
			width: 100%;
		}
			.top .txt-area .txtbox {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 100%;
			}
				.top .txt-area .txtbox #maintitle h1 {
					text-align: right;
					line-height: 1;
				}
	
	section {
		position: relative;
		z-index: 1;
		padding: 60px 0;
	}
	section:last-child {
		padding-bottom: 100px;
	}
		section h2 {
			color: #009de6;
			font-size: 22px;
			letter-spacing: 2px;
			line-height: 1.4;
		}
		section h3 {
			font-size: 16px;
			margin-top: 25px;
		}
		section p {
			margin-top: 25px;
			line-height: 2;
		}
		section .graph {
			margin: 40px auto 0;
			position: relative;
			z-index: 2;
			overflow-y: hidden;
		}
		.scroll:after {
			top: 150px;
			bottom: auto;
		}			
			section .graph .inner {
				width: 100%;
			}
	
	section.ts {
		overflow: hidden;
		/*background-color: #efefef;*/
	}
	.ts .deco-bg01 {
	}
	
	
}