@charset "UTF-8";

/*=========================================================================
  
	min 992px

=========================================================================*/

/*-----------------------------------------------
  layout
-----------------------------------------------*/

#mainSearch > div {
	background-color:#f2f2f2;
	padding:20px;
	background-image: url(../images/bg-stripe.gif);
	background-size: 40px 32px;
}

#mainSearchBox {
	background-color: #FFF;
	box-shadow: 0 1px 2px 1px rgba(0,0,0,0.12);
	padding: 20px;
	padding: 20px;
	color: #000;
}

#jobSearch > div:nth-child(1) {
	width: 64%;
}

#jobSearch > div:nth-child(2) {
	width: 34%;
}

/*-----------------------------------------------
  common
-----------------------------------------------*/

#mainSearchBox h3 {
	background-color: rgba(0,89,255,.6);
	color: #FFF;
	font-size: 1.6rem;
	padding: 5px 10px;
	margin-bottom: 15px;
}



/*-----------------------------------------------
  地域選択, 検索キーワード
-----------------------------------------------*/

#allOverseas {
	padding: 0 10px 5px 10px;
}

#allOverseas .check_mark:before {
	top: 0;
}

#allOverseas .check_mark:after {
	top: 4px;
}

#allOverseas label {
	font-size: 1.8rem;
	margin-right: 30px;
}

	/*----- タブボタン -----*/

	.areaBtn {
		border: none;
	}

	.areaBtn li {
		background-color: rgba(0,89,299,.14);
		color: #333 !important;
		float: none;
		line-height: 1.3;
		width: 14.3%;
		text-align: center;
		position: relative;
		cursor: pointer;
	}

	.areaBtn li:nth-child(2n) {
		background-color: rgba(0,89,299,.1);
	}

	.areaBtn li.active,
	.areaBtn li:hover,
	.areaBtn li.active:hover {
		background-color: rgba(0,89,299,.32);
	}

	.areaBtn li.areaChecked:after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		border-style: solid;
		border-width: 0 0 12px 12px;
		border-color: transparent transparent #333 transparent;
	}

	.areaBtn > li > a {
		margin: 0;
		width: 100%;
		height: 100%;
		padding: 8px 3px;
		border-radius: 0;
		border: none !important;
		background: none !important;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		color: #000 !important;
		font-weight: 700;
	}

	/*----- タブ内 -----*/

	.tab-content > .tab-pane {
		padding: 15px 0 10px 10px;
	}

	.areaBox > div:nth-child(1) {
		border-right: 1px solid #CCC;
		margin-right: 20px;
		width: 165px;
	}

	.areaBox label {
		display: inline-block;
		line-height:1;
		position:relative;
		margin-right:15px;
		margin-bottom: 10px;
		font-size: 1.4rem;
	}

	.areaBox label span {
		padding-left: 23px;
	}

/*----- キーワード -----*/

.searchKey input {
	width: 100%;
	padding: 5px 10px;
	font-size: 1.3rem;
}

/*-----------------------------------------------
  選択した条件
-----------------------------------------------*/

.selectedTerm {
	background-color: rgba(0,0,0,.08);
	margin-top: 15px;
}

.selectedTerm p {
	background-color: rgba(0,0,0,.1);
	text-align: left;
	font-size: 1.2rem;
	padding: 8px 13px;
}

.selectedTerm ul {
	text-align: left;
	padding: 10px 15px;
	font-size: 1.3rem;
}

/*	2017.12.08　.selectedTerm ul li がinline-blockになっていなかったため急遽対策	*/
#commonSearchBox li, .selectedTerm ul li {
	display: inline-block;
	margin-right: 20px;
}

.selectedTerm input {
	width: 235px;
	color: #FFF;
	background-color: rgba(0,0,0,.6);
	border: none;
	font-size: 1.3rem;
	transition: all .3s ease;
}

.selectedTerm input:hover {
	background-color: rgba(0,0,0,1);
}

/*-----------------------------------------------
  職種選択
-----------------------------------------------*/

.selectJob > ul > li {
	width: 49%;
	margin-bottom: 2%;
}

	/*----- 雇用形態 -----*/

	.selectJob > ul > li:nth-child(1) { background-color:rgba(92,201,255,.1); }
	.selectJob > ul > li:nth-child(2) { background-color:rgba(113,195,31,.1); letter-spacing: -0.1em; }
	.selectJob > ul > li:nth-child(3) { background-color:rgba(248,149,0,.1); }
	.selectJob > ul > li:nth-child(4) { background-color:rgba(232,45,28,.1); }

	.jobType {
		position: relative;
		height: 60px;
	}

	.jobType:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.selectJob li:nth-child(1) .jobType:after { background-color:rgba(92,201,255,.2); }
	.selectJob li:nth-child(2) .jobType:after { background-color:rgba(113,195,31,.2); }
	.selectJob li:nth-child(3) .jobType:after { background-color:rgba(248,149,0,.2); }
	.selectJob li:nth-child(4) .jobType:after { background-color:rgba(232,45,28,.2); }

	.selectJob li:nth-child(1) input[type="checkbox"]:checked + .jobType:after { background-color:rgba(92,201,255,1); }
	.selectJob li:nth-child(2) input[type="checkbox"]:checked + .jobType:after { background-color:rgba(113,195,31,1); }
	.selectJob li:nth-child(3) input[type="checkbox"]:checked + .jobType:after { background-color:rgba(248,149,0,1); }
	.selectJob li:nth-child(4) input[type="checkbox"]:checked + .jobType:after { background-color:rgba(232,45,28,1); }

	.jobType > div {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.jobType > div > div {
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
	}

	.jobType h2 {
		font-size: 1.7rem;
		color: #000;
		padding-left: 55px;
		text-align: left;
		font-weight: 700;
	}

	.jobType h2 span {
		font-size: 1.5rem;
	}

	.selectJob li .check_mark:before {
		width: 30px;
		height: 30px;
		top: -15px;
		left: 15px;
	}

	.selectJob li .check_mark:after {
		width: 21px;
		height: 13px;
		left: 19px;
		top: -11px;
		border-width: 0 0 2px 2px;
		border-color:rgba(255,255,255,.4);
	}

	.selectJob li:nth-child(1) .check_mark:before { background-color:rgba(92,201,255,.24); }
	.selectJob li:nth-child(2) .check_mark:before { background-color:rgba(113,195,31,.24); }
	.selectJob li:nth-child(3) .check_mark:before { background-color:rgba(248,149,0,.24); }
	.selectJob li:nth-child(4) .check_mark:before { background-color:rgba(232,45,28,.24); }

	.selectJob li input[type="checkbox"]:checked + .jobType .check_mark:before { background-color:#FFF; }

	.selectJob li:nth-child(1) > label > input[type="checkbox"]:checked + .jobType .check_mark:after { border-color: rgba(92,201,255,1); }
	.selectJob li:nth-child(2) > label > input[type="checkbox"]:checked + .jobType .check_mark:after { border-color: rgba(113,195,31,1); }
	.selectJob li:nth-child(3) > label > input[type="checkbox"]:checked + .jobType .check_mark:after { border-color: rgba(248,149,0,1); }
	.selectJob li:nth-child(4) > label > input[type="checkbox"]:checked + .jobType .check_mark:after { border-color: rgba(232,45,28,1); }


	/*----- 職種 -----*/

	.jobTypeDetail {
		text-align: center;
		font-size: 1.4rem;
		padding: 10px;
	}

	.jobTypeDetail li {
		text-align: center;
		margin-bottom: 2%;
		line-height: 1.6;
		width: 50%;
		font-size: 1.1rem;
		font-weight: 700;
	}

/*----- 検索する -----*/

#searchJw, #searchSubmit button {
    border: none;
	width: 100%;
	font-weight: normal;
    display: block;
	line-height: 1;
    padding: 15px 10px;
    font-size: 2.4rem;
    color: #FFF;
    background-color: #0068b5;
	font-family: FontAwesome, YuKyo-Medium, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

/*===============================================
  
	max 991px

===============================================*/

@media (max-width: 991px) {
	
	/*----- flex 解除 -----*/
	
	#jobSearch {
		-webkit-flex-direction: column;
		-ms-flex-direction:column;
		flex-direction: column;
	}
	
	#jobSearch > div {
		width: 100% !important;
	}
	
	/*-----------------------------------------------
	  地域選択, 検索キーワード
	-----------------------------------------------*/
	
	/*----- 地域を選択する -----*/
	
	#selectAreaBtn {
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex !important;
		margin:0 auto 20px;
		width:100%;
		padding:10px 15px;
		justify-content:center;
		background-color: rgba(0,89,255,.14);
		color: #333;
	}
	
	#selectAreaBtn span {
		font-size: 1.6rem;
	}
	
	#selectAreaBtn .icon_plus:before { top:3px; }
	#selectAreaBtn .icon_plus:after { top:12px; }
	
	/*----- 検索キーワード -----*/
	
	.searchKey {
		margin-top: 15px;
	}
	
	/*----- 選択した条件 -----*/
	
	.selectedTerm {
		margin-bottom: 15px;
	}
	.selectedTerm input {
		width: 120px;
	}
	
	/*-----------------------------------------------
	  職種選択
	-----------------------------------------------*/
	
	#mainSearch h2 {
		font-size: 1.5rem;
	}
	
	/*----- モーダル -----*/
	
	.iziModal {
		padding: 0 !important;
	}
	.iziModal-wrap {
		padding: 20px;
	}
	.iziModal {
		padding: 20px;
		max-width: 100% !important;
		box-shadow: none !important;
	}
	
	.areaBtn > li > a {
		font-size: 1.8rem;
		font-weight: bold;
	}
	
	
		/*----- モーダル上のモーダル -----*/

		.areaTarget {
			display: none;
			position: absolute;
			min-height: 290px;
			height: auto;
			padding: 20px !important;
			top: 0;
			left: 0;
			width: 100%;
			background-color:#FFF;
			text-align: left;
			z-index: 2000;
			height: 100%;
		}
	
		.areaTarget label {
			background-color: #d1dee5;
			padding: 10px;
			margin-right: 0;
			width: 48%;
			font-size: 1.8rem;
		}

		.areaTarget label  span {
			padding: 0 0 0 25px;
			margin-left: 0;
		}
	
		.modal-backdrop {
			display: none;
		}
	
		/*
		.modal-backdrop {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
		*/
	
			/*----- 地域 -----*/

			.areaBox {
				-webkit-flex-wrap : wrap;
				-ms-flex-wrap : wrap;
				flex-wrap: wrap;
				-webkit-flex-direction: column;
				-ms-flex-direction:column;
				flex-direction: column;
			}
			.areaBox > div, .areaBox > div:nth-child(1) label {
				width: 100% !important;
			}
			.areaBox > div:nth-child(1) {
				order: 2;
				margin-right: 0;
				border: none;
			}
			.areaBox > div:nth-child(2) {
				order: 1;
				display:-ms-flexbox;
				display:-webkit-flex;
				display:flex;
				-webkit-justify-content: space-between;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-flex-wrap : wrap;
				-ms-flex-wrap : wrap;
				flex-wrap: wrap;
			}
			.areaBtn {
				-webkit-flex-wrap : wrap;
				-ms-flex-wrap : wrap;
				flex-wrap: wrap;
				-webkit-justify-content: space-between;
				-ms-flex-pack: justify;
				justify-content: space-between;
			}
			.areaBtn li {
				width: 49%;
				margin-bottom: 2%;
			}
			.areaBtn:before {
				display: none;
			}
	
}

/*===============================================
  
	max 767px

===============================================*/

@media (max-width: 767px) {
	#selectAreaBtn {
		justify-content:space-between;
	}
	#mainSearch > div, #mainSearchBox {
		padding: 10px;
	}
}

/*===============================================
  
	max 414px

===============================================*/

@media (max-width: 414px) {
	.jobType { height: 50px; }
	.selectJob li .check_mark:before {
		top: -15px;
		left: 10px;
	}
	.selectJob li .check_mark:after {
		left: 14px;
		top: -10px;
	}
}