@charset "utf-8";

header div{
	position:relative;
	height:30vw;
	text-align:center;
	background-image:url("../images/recruit/top/header.png");
	background-repeat: no-repeat;
	background-size:cover;
}

header img{
	position:absolute;
	bottom:20px;
	left:30%;
}

article p.cat{
	position: relative;
}
	
article p.txt{
	position: relative;
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 5px;
	font-size:x-large;
}
article p.sub{
	white-space: nowrap;
	padding-left: 15px;
	padding-bottom: 10px;
	font-size:"small";
	color:#FFFFFF;
}

aside{
	margin-bottom:12px;
}

aside ul.navUl li.brack{
	background-color:#000000;
}
aside ul.navUl li.blue{
	background-color:#082386;
}
aside ul.navUl li img{
	position: absolute;
	right:25px;
}

aside ul.navUl li{
	position: relative;
	color:#FFFFFF;
	padding-left:10px;
}

aside ul.newsUl{
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
}
aside ul.newsUl li{
	white-space: nowrap;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
}

aside ul.newsUl li span.day{
	font-size:1.1em;
}
aside ul.newsUl li span.msg{
	font-size:1.2em;
}


/**********
PC 向け(1920超え)
***********/
@media only screen and (min-width: 1921px){

	article p.cat img.bg{
		width:100%;
	}

}
/**********
PC 向け
***********/
@media only screen and (min-width: 1261px) {
	
	article div.du,
	article div.tri{
		display:inline-block;
		overflow:hidden;
		background-color:FFFFFF;
		margin:0.1vw;
	}

	article div.du{
		width:49.5%;
	}
	article div.tri{
		width:99.5%;
	}

	article p.cat img.ng{
		position: absolute;
		left:0px;
		bottom:2px;
	}
	article p.txt img{
		position: absolute;
		right:10px;
	}
	
	aside div.lef{
		float:left;
		padding-left:5px;
		padding-top:5px;
		padding-bottom:5px;
	}
	aside div.rig{
		float:right;
	}

	aside ul.navUl a{
		text-decoration: none;
	}
	aside ul.navUl li{
		width:300px;
		padding-left:20px;
		padding-top:30px;
		padding-bottom:30px;
		font-size:x-large;
	}
	
	article p#cat7{
		height:273px;
		overflow:hidden;
	}
	
	article p#cat7 img.bg{
		position:absolute;
		bottom:0px;
		width:100%;
		max-height:none;
	}

}


/**********
モバイル 向け
***********/
@media only screen and (max-width: 1260px){
	
	#navUl{
		background-color:#FFFFFF;
	}
	
	header,article,aside,footer{
		width:100%;
	}
	header img{
		width:25%;
		left:35%;
	}
	article div.lef{
		margin-bottom:12px;
	}
	article div.rig{
		margin-bottom:12px;
	}
	article p.cat{
		position: relative;
	}
	article p.cat img.bg{
		width:100%;
	}
	article p.cat img.ng{
		position: absolute;
		bottom:2px;
		left:0px;
	}
	article p.txt img{
		position: absolute;
		right:20px;
	}
	
	article div.tri p.cat img.bg{
		display:none;
	}
	article div.tri p.cat{
		height:30.32vw;
	}
	p#cat5{
		background-image:url("../images/recruit/top/cat5.png");
		background-position: center bottom;
		background-size:cover;
	}
	p#cat6{
		background-image:url("../images/recruit/top/cat6.png");
		background-position: center bottom;
		background-size:cover;
	}
	p#cat7{
		background-image:url("../images/recruit/top/cat7.png");
		background-position: center bottom;
		background-size:cover;
	}
	article p.txt{
		white-space: nowrap;
	}
	article p.sub{
		white-space: nowrap;
	}

	aside ul.navUl a{
		text-decoration: none;
	}
	aside ul.navUl li{
		font-size:x-large;
		padding-left:10px;
		padding-top:20px;
		padding-bottom:20px;
	}

}