@charset "utf-8";

/* ------------------------------
 ホーム
------------------------------ */
#contentshome					{ width:100%; margin:0; padding:0; text-align:center; }
.bxslider a 					{ width: 100%; height: 400px; display: block;}
.mainimg01						{ background:url(/recruit/img/rec_main01.png) no-repeat center 0;}
.mainimg02						{ background:url(/recruit/img/rec_main02.png) no-repeat center 0; }
.mainimg03						{ background:url(/recruit/img/rec_main03.png) no-repeat center 0; }
.mainimg04						{ background:url(/recruit/img/rec_main04.png) no-repeat center 0; }

@media screen and (max-width: 767px) {
.bxslider a {
	height: 200px;
	background-size: cover;
}
}
@media screen and (max-width: 479px) {
.bxslider a {
	height: 150px;
	background-size: cover;
}
}
#grid{ 
	background:url(/recruit/shared/img/rec_bg.gif);
	padding: 50px 0 80px 0;
}
ul.pickup{ 
	width: 980px;
	margin: 0 auto;
	margin-top: 34px;
}
.pickup li{ 
	width: 300px;
	margin: 0 40px 40px 0;
	float: left;
}
@media all and (min-width: 768px) {
.pickup li:nth-child(3n) { 
	margin-right: 0;
	margin-bottom: 70px;
}
}
ul.more{ 
	width: 980px;
	margin: 0 auto;
	display: block;
}
.more li{ 
	width: 230px;
	margin: 0 20px 0 0;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 34px;
}
.more li a{ 
	color: #333333;
	font-weight: bold;
}
.more li p{ 
	width: 100%;
	position: absolute;
	top: 15px;
	text-align: center;
	font-weight: bold;
}
.more li:nth-child(4n) { 
	margin-right: 0;
}
.pickup li, .more li a,
.more li > div { 
	background: #fff;
	display: block;
}
.more li > div > div {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 10px;
    bottom: 9px;
    left: 0;
    right: 0;
    margin: auto;
}
.more li > div > div > a {
	font-size: 93%;
	font-weight: normal;
    background: none;
}
.more li > div > div > a::after {
	content: "";
	display: inline-block;
    width: 19px;
    height: 19px;
    background: url(/recruit/shared/img/icon_arrow_recruit_info.png) no-repeat center / cover;
	vertical-align: middle;
	margin-left: 5px;
	margin-bottom: 2px;
}
.more li > div > img {
	opacity: 1 !important;
}

/* ------------------------------
 タブレット・スマホ用コード
------------------------------ */
@media screen and (max-width: 767px) {
	#grid{ 
		padding: 7% 0 5% 0;
	}
	.balloon{ 
		width: 45%;
	}
	ul.pickup{ 
		width: 95%;
		margin: 3% auto 10% auto;
	}
	.pickup li{ 
		width: 46%;
		margin: 0;
		margin: 0 2% 2% 2%;
	}
	ul.more{ 
		width: 95%;
		margin: 3% auto 5% auto;
	}
	.more li{ 
		width: 46%;
		margin: 0;
		margin: 0 2% 2% 2%;
	}
	.more li p{ 
		width: 100%;
		position: absolute;
		top: 6%;
		text-align: center;
	}
	.more li img{ 
		width: 100%;
	}
	.more li > div > div {
		gap: 5px;
		bottom: 4px;
	}
	.more li > div > div > a {
		font-size: 75%;
	}
	.more li > div > div > a::after {
		width: 14px;
		height: 14px;
		margin-left: 3px;
	}
}
@media screen and (max-width: 479px) {
	.more li p {
		font-size: 81%;
	}
}

 /* ------------------------------
 新着情報一覧
------------------------------ */
.news{
	padding: 70px 0;
}
@media screen and (max-width: 767px) {
	.news{
		padding: 30px 5% 0;
	}
}
/* ------------------------------
 NEWS　一覧へ
------------------------------ */
.news-link{
	width: 730px;
	margin: 0 auto;
	padding: 10px 0 70px;
}
.news-link a{
	 width: 48px; 
	 font-size:85%;
	 padding: 4px 0 4px 18px; 
	 color: #fff; 
	 border-radius:15px; 
	 background: #0085CE url(/shared/img/icon_arrow_wl.png) no-repeat 1em center; 
	 display: block; color:#fff; 
	 float: right;
}
@media screen and (max-width: 767px) {
	.news-link{
		width: 100%;
		padding: 10px 0 0;
	}
}
/* ------------------------------
 NEWS　スライダー
------------------------------ */
#pu	{ 
	width:1068px; 
	margin:0 auto 60px; 
	padding:30px 0 0; 
	text-align:left;
 }
 @media screen and (max-width: 767px) {
	#pu	{ 
		width: 100%;
		margin:0 auto; 
	 }
 }