@media screen and (min-width:768px) and ( max-width:1024px) {
	.contents {
		width:1000px;
	}

}
@media screen and (min-width:1024px) and ( max-width:1210px) {
	.contents {
		width:96%;
	}

}



@media screen and (min-width:1210px) {
	.contents {
		width:1200px;
	}

}


@media screen and (min-width:768px) {



/*--------------------------------------
	共通設定
	-------------------------------------*/
.sp {
	display:none;
}
html {
  font-size: 16px;
}



/*--------------------------------------
	TEMPLATE
	-------------------------------------*/

/*------------- header ---------------*/
body{
	background-image:url("../asset/images/bg.gif");
	background-position:center top;
}
body.scrolling{
	padding-top:160px;
}


header {
	width:100%;
	height:200px;
}
header.fixed{
	background-color:#fff;
	position:fixed;
	top:-40px;
	z-index:4000;
	height:100px;
	overflow:hidden;
	border-bottom:1px #0073cb solid;
}
#topMain.fixed{
	margin-top:200px;
}

header div#headerWrap {
}
header .h_bg {

}
header #headerWrap #logo {
}
#headerWrap{
	position:relative;
	height:200px;
}
#logo{
	width:300px;
	display:block;
	position:absolute;
	left:0;
}

#navWrap{
	position:absolute;
	right:0;
	width:calc(100% - 400px);
	background-color:transparent;
}

#navWrap ul.upper {
	display: flex;
	float:right;
}
#navWrap ul li:last-child{
	border-right:1px #CCC solid;
}


#navWrap ul.upper li{
	line-height:1rem;
	padding:0.5rem 1.5rem;
	border-left:#CCC 1px solid;
	font-size:0.9rem;
}

#navWrap ul.downer {
	margin-top:22px;
	clear:both;
	display: flex;
	float:right;
}

#navWrap ul.downer li{
	line-height:1rem;
	background-color:#0073cb;
	border-radius: 2rem;
	padding:0.5rem 2rem;
	margin-left:0.5rem;
}
#navWrap ul.downer li a{
	color:#fff;
}



#navWrap a:link {
	color:#333;
	text-decoration:none;
}
#navWrap a:visited {
	color:#333;
	text-decoration:none;
}
#navWrap a:hover {
	color:#AA0000;
	opacity:0.8;
}



/*------------- footer ---------------*/
footer ul li{
	font-size:0.9rem;
	float:left;
	line-height:1;
	padding:0 1rem;
	border-left:1px #CCC solid;
}

footer ul li:last-child {
	border-right:1px #fff solid;
}
footer ul#footerService{
	float:left;
}
footer ul#footerContact{
	float:right;
}
footer address{
	width:100%;
	clear:both;
	text-align:left;
	margin-top:50px;
	color:#CCC;
	font-size:0.9rem;
}
footer h1{
	font-size:1.2rem;
	color:#fff;
	text-align:left;
	padding:2rem 0 1rem 0;
}
/*--------------------------------------
	共通部分
	-------------------------------------*/

.anchor{
	height: 1px;
	display: block;
	padding-top: 40px;
	margin-top: -40px;
}

/*------------- contents ---------------*/


.contentsWrapper{
	width:100%;
	overflow:hidden;
	padding:50px 0;

}
.contents {
	margin:0 auto;
	overflow:hidden;
	padding:3em 0 5em;
	color:#333;
}
.contents .contentTitle{
	font-size:2rem;
}
.contents .contentTitleJP{
	font-size:1rem;
	padding-bottom:50px;
}
.contents .contentLine{
	border-bottom:1px #0073cb solid;
}
.contentsWrapper .narrow{
	width:900px;
	margin:0 auto;
}

.contents h2{
	color:#666;
	display:block;
	width:100%;
	text-align:center;
	font-size:200%;
	font-weight:bold;
	padding-bottom:1em;
	border-bottom:1px #DDD solid;
	margin-bottom:2em;
}
.contents h3{

}



/*------------- flex ---------------*/
.colwrap{
	width:calc(100% + 40px);
	overflow:hidden;
	margin-left:-20px;
}
.col1_3,
.col2_3,
.col1_2,
.col1_4
{
	float:left;
	padding:0 20px;
}
.col1_2 img
.col1_3 img,
.col2_3 img,
.col1_4 img{
	width:100%;
}
.col1_4{
	width:25%;
}
.col1_3{
	width:33.3333%;
}
.col2_3{
	width:66.66666%;
}
.col1_2{
	width:50%;
}
.fullImage{
	width:100%;
	min-width:1000px;
	margin:0 auto;
	overflow:hidden;
}
.fullWrap{
	min-width:1000px;
	width:100%;
}
.fullWrap .col1_2{
	padding:0;
}
.fullWrap figure{
	width:100%;
}
.contentsWrap{
	min-height:200px;
	padding-bottom:100px;
}

.flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin-bottom:2em;
}
.flexTarget{
	align-items:stretch;
}
.flexTargetInner{
	height:100%;
}
.borderedImageWrap{
	border:#f2f2f2 5px solid;
	padding:10px;
	background-color:#fff;
}



/*------------- flex ---------------*/




/*--------------------------------------
	■TOP HERO
	-------------------------------------*/
#heroTopOuter{
	background-color:#0073cb;
	margin:0;
	padding:0;
}
#heroTopWrapper{
	padding:0;
}


#heroTop{
	width:calc(100% - 470px);
	height:470px;
	float:right;
	background-size:cover;
}
#heroTopUpper{
	width:100%;
	height:100%;
	background-size:100%;
}
#heroMission{
	width:470px;
	height:470px;
	float:left;
	background-color:#444;
}
#heroMissionUpper{
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center bottom;
	background-repeat:no-repeat;
}









/*--------------------------------------
	■Our Businesses
	-------------------------------------*/


#ourBusinesses button,
#ypsHead button,
#ypsBottom button{
	margin-top:50px;
	width:40%;
	margin-left:30%;
}

/*--------------------------------------
	■News Release
	-------------------------------------*/
#newsRelease{
	border-top:1px #0073cb solid;
}

#newsRelease dl dt {
	float: left;
	clear: left;
	width: 12rem;
	padding:2rem 0;
}

#newsRelease dl dd {
	border-bottom: 1px dotted #ccc;
	padding:2rem 0;
	padding-left: 12rem; 
}











/*--------------------------------------
	■bunners
	-------------------------------------*/
#bunners ul li{
	width:14.6%;
	margin:1rem 1%;
}

/*--------------------------------------
	■companyInformation
	-------------------------------------*/
#companyInformation dl.top{
	border-top:1px #0073cb solid;
}
#companyInformation dl{
	display:table;
	width:100%;
}
#companyInformation dl dt,
#companyInformation dl dd{
	display: table-cell;
	vertical-align:middle;
	border-bottom:1px #ccc solid;
	padding:1em 2em;
}
#companyInformation dl dt{
	width:30%;
	text-align:center;
	font-weight:bold;
	border-right:1px #ccc dotted;
}
#companyInformation dl dd{
	width:70%;
}
#googleMap{
	width:100%;
	height:500px;
}

/*--------------------------------------
	■privacyPolicy
	-------------------------------------*/
#privacyPolicy div{
	width:46%;
	float:left;
	margin:0 2%;

}
#privacyPolicy .plead{
	width:50%;
	margin:50px 25%;
}

/*--------------------------------------
	■中途F
	-------------------------------------*/
#careerHeroWrapper{
	background-color:#0073cb;
	margin:0;
	padding:0;
	height:470px;
	overflow:visible;
}
#heroSeccondWrapper{
	padding:0;
	height:470px;
	position:relative;
	overflow:visible;
}


#heroSecond{
	width:calc(100% - 470px);
	height:470px;
	float:left;
}
#heroSecondFULL{
	width:100%;
	height:470px;
	float:left;
	background-image:url("../asset/images/career/careerbg.png");
}
#heroSecondUpper{
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center bottom;
	background-repeat:no-repeat;
}
#heroSecondUpperPC{
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center bottom;
	background-repeat:no-repeat;
	background-image:url("../asset/images/career/careerupper.png");
}


#quickForm{
	width:470px;
	height:670px;
	position:absolute;
	right:0;
}
.quickFormCheck li{
	width:31%;
	margin:0.2rem 1%;
}

/*--------------------------------------
	■都道府県選択
	-------------------------------------*/
.prefectureCheckBoxes{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
.prefectureCheckBoxes ul{
	padding:2rem;
	border-radius:1rem;
	border:#CCC 1px solid;
	margin:0.5rem;
}
.prefButtonWrapper{
	text-align:center;
	padding-top:1rem;
	padding-bottom:2rem;
}
.prefButtonWrapper .button{
	padding:0.5rem 5rem;
}


/*--------------------------------------
	■中途求人
	-------------------------------------*/
#jobListingsWrapper{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width:100%;
}
#jobListingsWrapper .jobListings{
	width:calc(50% - 4px);
	margin:2px;
}
.jobInfomation{
	width:100%;
}

#jobListingsWrapper table.typical td{
	padding:0 5px;
}



/*--------------------------------------
	■中途FAQ
	-------------------------------------*/
#faq div{
	width:46%;
	float:left;
	margin:0 2%;

}





/*--------------------------------------
	■派遣
	-------------------------------------*/

#staffing #careerHeroWrapper{
	background-color:#0096c0;
}
#staffing #introduction{
	text-align:center;
}


/*--------------------------------------
	■派遣フロー
	-------------------------------------*/
#registrationFlow .colwrap{
	width:100%;
	margin:0;
	padding:0;
}
#registrationFlow .flowContent{
	width:22%;
}
#registrationFlow .flowArrow{
	width:4%;
}
#registrationFlow .flowArrow:before{
	display:block;
	font-family:"Material Icons";
	content:"forward";
	font-size:2rem;
	color:#0073cb;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'liga';
	height:100%;
	padding-top:calc(200px - 1rem);
	text-align:center;
}

#registrationFlow .imageTitle{
	height:200px;
}



	/* コンタクトフォーム */

#contactForm{
	border:#CCC 1px solid;
	width:100%;
	margin-left:0%;
}
#contact h2{
	width:90%;
	margin-left:5%;
}
#contactForm dl{
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:100%;
}
#contactForm dl dt{
	width:40%;
	background-color:#c4ecf3;
	padding:1em;
	border-bottom:#CCC 2px solid;
	margin-bottom:0px;
	color:#00afcc;
	font-weight:bold;
	display: flex;
	justify-content: center;
	align-items: center; 
}
#contactForm dl dt .required:after{
	color:#D55;
	content:"*";
}
#contactForm dl dd{
	margin-left:0px;
	width:calc(60% - 0px);
	background-color:#FFF;
	padding:1em;
	border-bottom:#CCC 2px solid;
	margin-bottom:0px;
}
#contactForm dl dd textarea{
	width:calc(100% - 0em);
	height:5em;
}
#contactForm dl dd input[type="text"]{
	width:calc(100% - 0em);
}
#contactForm .buttons{
	width:80%;
	margin-left:10%;
}
#contactForm .buttons button{
	width:40%;
	margin:1em 5%;
	float:left;
}
.WlcValidationError{
	border:#F99 1px solid;
}
.errorMessage li{
	color:#900!important;
	font-size:80%;
}


/*--------------------------------------
	■YPS
	-------------------------------------*/

.ypsContents h3{
	padding-bottom:50px;
	font-size:1.4rem;
	font-weight:bold;
	border-bottom:1px solid #CCC;
}
.ypsContents .text{
	width:80%;
	margin-left:10%;
	margin-top:50px;
	padding-left:30%;
	background-size:15%;
	background-position:10% center;
}
.ypsContents .text ul{
	margin-top:2rem;
}

#yps01 .text{
	background-image:url("../asset/images/yps/icon01pc.svg");
}
#yps02 .text{
	background-image:url("../asset/images/yps/icon02pc.svg");
}
#yps03 .text{
	background-image:url("../asset/images/yps/icon03pc.svg");
}
#yps04 .text{
	background-image:url("../asset/images/yps/icon04pc.svg");
}
#yps05 .text{
	background-image:url("../asset/images/yps/icon05pc.svg");
}

#ypsAddress{
	padding-top:50px;
	text-align:center;
}
#ypsAddress strong{
	display:block;
	color:#0073cb;
	font-size:1.4rem;
	line-height:2rem;
}


/*--------------------------------------
	■YPS
	-------------------------------------*/

.imageContainerCol1 img{
	width:80%;
	margin-left:10%;
}