@charset "UTF-8";

/* --------------------------------------------------------------------------------------
   キービジュアル
--------------------------------------------------------------------------------------- */

.page-45 { background-image: url(../img/recruit/key_index.jpg); }
.page-47 { background-image: url(../img/recruit/key_welfare.jpg); }
.page-68 { background-image: url(../img/recruit/key_welfare.jpg); }

/* --------------------------------------------------------------------------------------
   採用情報
--------------------------------------------------------------------------------------- */

.recruit-index .inner {
	margin-top: 50px;
	width: 825px;
}

.recruit-index .inner .graph {
	float: left;
	width: 300px;
}

.recruit-index .inner .graph div { margin-top: -10px; }
.recruit-index .inner .graph div:first-child { margin-top: 0; }

.recruit-index .inner .graph div span {
	color: #fff;
	display: block;
	font-size: 150%;
	height: 80px;
	letter-spacing: 9px;
	line-height: 80px;
	text-align: center;
	width: 300px;
}

/* .recruit-index .inner .graph div:nth-child(1) span { background-color: #9fd2fd; } */
.recruit-index .inner .graph div:nth-child(1) span { background-color: #5faff3; }
.recruit-index .inner .graph div:nth-child(2) span { background-color: #2882ce; }
.recruit-index .inner .graph div:last-child span { background-color: #155891; }

.recruit-index .inner .graph div::after {
	border: none;
	box-shadow: -7px 7px 5px rgba(0,0,0,.2);
	content: '';
	display: block;
	height: 210px;
	margin: -105px auto -88px;
	transform: scale(1,.2) rotate(-45deg);
	width: 210px;
}

/* .recruit-index .inner .graph div:nth-child(1)::after { background-color: #9fd2fd; } */
.recruit-index .inner .graph div:nth-child(1)::after { background-color: #5faff3; }
.recruit-index .inner .graph div:nth-child(2)::after { background-color: #2882ce; }
.recruit-index .inner .graph div:nth-child(3)::after { background-color: #155891; }

.recruit-index .inner .graph div:last-child::after { display: none; }

.recruit-index .inner .detail {
	float: right;
	width: 485px;
}

.recruit-index .inner .detail p {
	align-items: center;
	display: flex;
	margin-top: 16px;
	min-height: 80px;
}

.recruit-index .inner .detail p:first-child { margin-top: 0; }

.recruit-index .at {
	margin: 30px auto 0;
	max-width: 825px;
	text-align: left;
}

.recruit-index .at li {
	margin-left: 1em;
	margin-top: 5px;
	text-indent: -1em;
}

.recruit-index .at li:first-child { margin-top: 0; }

.contactbox { display: block; }

.contact-inner {
	display: table !important;
	margin-top: 40px;
	width: 100% !important;
}

.contact-inner:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------------------
   福利厚生・各種制度
--------------------------------------------------------------------------------------- */

.recruit-welfare article section { margin-top: 80px; }

.recruit-welfare article section table {
	margin: 20px 100px 0;
	width: 800px;
}

/* --------------------------------------------------------------------------------------
   募集要項・エントリー
--------------------------------------------------------------------------------------- */

.search-map {
	background: #efefef url(../img/top/area_map.png) no-repeat 94% -21px/ 32% auto;
	margin-top: 40px;
	padding: 30px 40px;
}

.search-map h3 { font-size: 143%; }

.search-map ul {
	margin-left: -20px;
	margin-top: 30px;
	overflow: hidden;
	width: 586px;
}

.search-map li {
	background-color: #fff;
	border: 2px solid #ccc;
	border-radius: 5px;
	box-shadow: 2px 2px 1px #ccc;
	cursor: pointer;
	float: left;
	margin-bottom: 13px;
	margin-left: 20px;
	text-align: center;
	transition: all .3s ease;
	width: 170px;
}

.search-map li a {
	display: block;
	padding: 7px 0;
}

.search-map .active {
	background-color: #166ca2;
	border-color: #166ca2;
	box-shadow: none;
}

.search-map .active a {
	color: #fff;
	text-decoration: none;
}

.entry-wrap .column {
	border: 1px solid #155891;
	margin-top: 50px;
	padding: 55px 70px;
}

.entry-wrap .column h4 {
	background-color: #155891;
	color: #fff;
	font-size: 185%;
	margin: -55px -70px 0;
	padding: 26px 0;
	text-align: center;
}

.entry-wrap .column .item {
	border-bottom: 1px solid #155891;
	margin-top: 97px;
	padding-bottom: 100px;
}

.entry-wrap .column .item:nth-child(2) { margin-top: 50px; }

.entry-wrap .column .item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.entry-wrap .column h5 { margin-bottom: 31px; }

.entry-wrap .column .banner-entry { margin-top: 40px; }

.entry-wrap .column table {
	margin: 0 auto;
	width: 90%;
}

.search-fixed {
	background-image: none;
	box-shadow: 0 0 5px #ccc;
	display: block !important;
	left: 0;
	margin-top: 0;
	padding: 1% 0 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

.search-fixed h3 { display: none; }

.search-fixed ul {
	letter-spacing: -.9em;
	margin-left: 0;
	margin-top: 0;
	text-align: center;
	width: auto;
}

.search-fixed li {
	display: inline-block;
	float: none;
	letter-spacing: normal;
	margin-left: 5px;
	width: 160px;
}

.all-txt {
	font-size: 140%;
	margin-top: 38px;
	text-align: center;
}

.all-txt strong { font-size: 160%; }

.searchbox {
	margin: 60px auto 18px;
	text-align: center;
}

.searchbox table { border: 1px solid #155891; }

.searchbox th { border-right: 1px solid #155891; }
.searchbox td { border-bottom: 1px solid #155891; }

.searchbox > p { margin: 40px auto 0; }

.searchbox > p input {
	-webkit-appearance: none;
	border-radius: 0;
}

.searchbox .list { margin-top: 22px; }
.searchbox .list:first-child { margin-top: 0; }

.searchbox .list p {
	display: inline-block;
	font-weight: bold;
	margin-right: 12px;
	vertical-align: middle;
}

.searchbox .list div {
	border-left: 1px solid #155891;
	display: inline-block;
	padding-left: 15px;
	vertical-align: middle;
}

.searchbox td label {
	cursor: pointer;
	margin-right: 20px;
}

.searchbox td input { margin-right: 5px; }

/* --------------------------------------------------------------------------------------
   IOSのタップ用
--------------------------------------------------------------------------------------- */

@media (min-width: 980px) {

	.search-map li:hover {
		background-color: #166ca2;
		border-color: #166ca2;
		box-shadow: none;
	}

	.search-map li:hover a {
		color: #fff;
		text-decoration: none;
	}
}

/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media (max-width: 979px) {

	.recruit-index .inner { width: auto; }

	.recruit-index .inner .detail {	width: 53%; }

	.recruit-welfare article section table {
		margin: 2% 5% 0;
		width: 90%;
	}

	.search-map ul { width: auto; }

	.search-map li { width: 141px; }

	.entry-wrap .column {
		margin-top: 10%;
		padding: 5%;
	}

	.entry-wrap .column h4 { margin: -6% calc(-6% + 2px) 0; }

	.entry-wrap .column table { width: 100%; }

	.entry-wrap .column .item {
		margin-top: 12%;
		padding-bottom: 12%;
	}

	.search-fixed {
		bottom: 0;
		top: auto;
	}
}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 766px) {

	.recruit-index .inner { margin-top: 7%; }

	.recruit-index .inner .graph {
		float: none;
		width: auto;
	}

	.recruit-index .inner .graph div span {	width: auto; }

	.recruit-index .inner .graph div::after {
		height: auto;
		margin-top: -35%;
		padding-bottom: 70%;
		position: relative;
		width: 70%;
		z-index: -1;
	}

	.recruit-index .inner .detail {
		float: none;
		margin-top: 8%;
		width: auto;
	}

	.search-map { padding: 5%; }

	.search-fixed { display: none !important; }

	.search-map ul {
		margin-left: -4%;
		margin-top: 6%;
	}

	.search-map li {
		font-size: 85%;
		margin-left: 4%;
		width: 44%;
	}

	.entry-wrap .column h4 {
		font-size: 145%;
		margin: -6% calc(-6% + 1px) 0;
		padding: 6% 0;
	}

	.entry-wrap .column .item:nth-child(2) { margin-top: 9%; }

	.recruit-welfare article section { margin-top: 14%; }

	.recruit-welfare article section table {
		margin: 9% 0 0;
		width: 100%;
	}

	.searchbox .list p {
		margin-right: 2%;
		width: 12%;
	}

	.searchbox th {
		background-color: #155891;
		border-right: none;
		color: #fff;
		padding: 2% 5%;
	}

	.searchbox td {
		border-bottom: none;
		margin: 5% 5% 0;
	}

	.searchbox td label {
		display: block;
		margin-right: 0;
		margin-top: 4%;
	}

	.searchbox td label:first-child { margin-top: 0; }

	.searchbox .job-select { padding-bottom: 5%; }

	.searchbox .list div {
		padding-left: 4%;
		width: 80%;
	}
}