@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆left_list◆◆◆◆◆◆◆◆◆◆*/
div#left_list{
	width:360px;
	background-color:#f9f8f0;
	padding:50px 25px;
	box-sizing:border-box;
}
div#right_list{
	width:calc(100% - 360px);
	overflow:hidden;
}

div#left_list dt{
	color:#006494;
	font-size:1.2em;
	font-weight:bold;
	border-bottom:1px #006494 solid;
	padding:5px;
	box-sizing:border-box;
	margin:30px 0 0 0;
}

div#left_list dt:first-child{
	margin:0 0 0 0;
}

div#left_list dd{
	padding:5px;
	box-sizing:border-box;
	margin:5px 0;
	overflow:hidden;
}

	div#left_list dd select{
		width:calc(100% - 20px);
		padding:5px;
		background-color:#fff;
		border:1px #ccc solid;
		border-radius:0;
	}
	
	div#left_list dd input[type=text]{
		width:calc(100% - 20px);
		padding:5px;
		background-color:#fff;
		border:1px #ccc solid;
		border-radius:0;
	}
	
	div#left_list dd label{
		display:block;
		margin-right:0;
	}
	
	div#left_list dl > input[type=checkbox]{
		display:none;
	}
	
		div#left_list dt label{
			display:block;
			cursor:pointer;
			overflow:hidden;
		}
		
		div#left_list dl > input[type=checkbox] + dt > label::before{
			content:'▼';
			display:inline-block;
			float:right;
			font-size:0.8em;
		}
		div#left_list dl > input[type=checkbox]:checked + dt > label::before{
			content:'▲';
		}
		
		div#left_list dl > input[type=checkbox] + dt + dd{
			height:0;
		}
		div#left_list dl > input[type=checkbox]:checked + dt + dd{
			height:auto;
		}
	
	
	div#left_list a.button{
		display:block;
		height:60px;
		line-height:60px;
		background-color:#006494;
		border-radius:30px;
		border:none;
		color:#fff;
		cursor:pointer;
		width:calc(100% - 40px);
		max-width:240px;
		font-size:1.3em;
		margin:20px auto;
		text-align:center;
	}

		div#left_list > a.button:hover{
			color:#006494;
			background-color:#85e9ff;
			text-decoration:none;
		}

/*◆◆◆◆◆◆◆◆◆◆right_list◆◆◆◆◆◆◆◆◆◆*/
div.keyword{
	width:calc(100% - 40px);
	max-width:1080px;
	margin:50px auto 0 auto;
	background-color:#839ca9;
	box-sizing:border-box;
	padding:7px;
}

	div.keyword dl{
		background-color:#fff;
		border-radius:7px;
		overflow:hidden;
	}
	
		div.keyword dt{
			float:left;
			width:280px;
			background-image:url('../img/keyword_bg.svg');
			background-size:252px auto;
			background-position:center;
			background-repeat:no-repeat;
			text-align:center;
			color:#fff;
			font-weight:500;
			font-size:1.3em;
			line-height:1.6em;
			padding:60px 0;
			margin:0 20px 0 0;
			box-sizing:border-box;
		}
		
		div.keyword dd{
			float:left;
			width:calc(100% - 300px);
			letter-spacing:-0.4em;
			padding:12px 20px 12px 0;
			box-sizing:border-box;
		}
		
			div.keyword dd a{
				display:inline-block;
				letter-spacing:0.1em;
				margin:20px 15px;
				font-size:1.05em;
				font-weight:500;
				border-bottom:1px #006494 solid;
				padding:0 0 2px 0;
				box-sizing:border-box;
			}
			
			div.keyword dd a:hover{
				text-decoration:none;
				border-color:#fff;
			}

	div.list_link div.rows{
		display:inline-block;
		color:#808080;
		font-weight:500;
		margin:0 15px 0 0;
		letter-spacing:0.1em;
		vertical-align:bottom;
		height:26px;
		line-height:26px;
	}
	
		div.list_link div.rows span{
			color:#fa5000;
			font-size:2em;
		font-weight:bold;
		}

div.list_link{
	width:100%;
	max-width:1020px;
	overflow:hidden;
	margin:30px auto;
	text-align:center;
	clear:right;
	letter-spacing:-0.4em;
}
	
	div.list_link a,
	div.list_link strong{
		display:inline-block;
		width:32px;
		height:26px;
		line-height:26px;
		vertical-align:bottom;
		margin:0 5px;
		letter-spacing:0.1em;
	}
	
	div.list_link a{
		color:#808080;
	}
	
	div.list_link a:hover{
		text-decoration:none;
	}
	
	div.list_link strong{
		color:#fff;
		background-color:#006494;
		text-align:center;
	}
	div.list_link a.arrow{
		color:#fff;
		background-color:#006494;
		text-align:center;
		font-size:1.5em;
	}


div.job_box{
	width:calc(100% - 40px);
	max-width:980px;
	margin:50px auto;
	background-color:#f5fdff;
	box-sizing:border-box;
	border:1px #808080 solid;
	box-sizing:border-box;
}

div.job_box::before{
	content:'';
	display:block;
	width:100%;
	height:10px;
	background-color:#85e9ff;
}

	div.job_box > div{
		width:calc(100% - 60px);
		margin:30px auto 0 auto;
		padding:0 0 10px 0;
		border-bottom:1px #ccc solid;
		overflow:hidden;
		box-sizing:border-box;
	}
	
		div.job_box > div > h4{
			float:left;
			width:calc(100% - 260px);
			font-size:1.4em;
			font-weight:bold;
			line-height:1.5em;
			margin:15px 0 0 0;
		}
		
		div.job_box > div > div{
			float:left;
			width:calc(100% - 40px);
			max-width:190px;
			font-size:0.8em;
			letter-spacing:0;
			font-weight:500;
			color:#808080;
			line-height:1.5em;
			margin:15px 0 0 0;
		}
			
			div.job_box > div > div span{
				color:#30c5ff;
				font-weight:bold;
			}
		
		
		div.job_box > div > input[type=checkbox]{
			display:none;
		}
		
		div.job_box > div > label{
			float:left;
			display:block;
			cursor:pointer;
			width:48px;
			height:48px;
			background-image:url('../img/fav_1.svg');
			background-positionc:center;
			background-size:cover;
			background-repeat:no-repeat;
			transition:0.1s;
			margin:0 10px;
		}
		
		div.job_box > div > input[type=checkbox]:checked + label{
			background-image:url('../img/fav_2.svg')
		}

	div.job_box > dl:nth-child(2){
		width:calc(100% - 60px);
		margin:0 auto;
		padding:10px 0;
		overflow:hidden;
		box-sizing:border-box;
	}
	
		div.job_box > dl:nth-child(2) dt{
			float:left;
			width:calc(100% - 260px);
			box-sizing:border-box;
			letter-spacing:-0.4em;
			padding:5px;
		}
		
			div.job_box > dl:nth-child(2) dt span{
				display:inline-block;
				letter-spacing:0.1em;
				vertical-align:bottom;
				border:1px #006494 solid;
				color:#006494;
				font-weight:bold;
				line-height:1.1em;
				padding:1px 5px;
				margin:5px;
				float:left;
				font-size:0.9em;
			}
		
		div.job_box > dl:nth-child(2) dd{
			float:right;
			width:260px;
			box-sizing:border-box;
			padding:5px;
		}
		
			div.job_box > dl:nth-child(2) dd p{
				color:#e63b91;
				font-weight:bold;
				text-align:center;
				padding:5px 0;
				overflow:hidden;
				box-sizing:border-box;
				letter-spacing:0;
				position:relative;
			}
			
				div.job_box > dl:nth-child(2) dd p span{
					display:inline-block;
					float:left;
					width:calc(100% - 45px);
					height:28px;
					line-height:28px;
					background-image:url('../img/money_bg_1.svg');
					background-position:left bottom;
					background-repeat:repeat;
					background-size:6px auto;
					margin:2px 0 2px 10px;
					padding:0 20px;
					box-sizing:border-box;
				}
				
				div.job_box > dl:nth-child(2) dd p strong{
					font-size:1.4em;
				
				}
			
			div.job_box > dl:nth-child(2) dd p::before{
				content:'';
				display:inline-block;
				float:left;
				width:35px;
				height:32px;
				background-image:url('../img/money_bg_2.svg');
				background-position:left bottom;
				background-repeat:repeat;
				background-size:35px auto;
				
			}
	
	
	
	
	
	div.job_box > dl:nth-child(3){
		width:100%;
		margin:0 auto;
		padding:20px 30px;
		overflow:hidden;
		box-sizing:border-box;
		background-color:#fff;
	}
	
		div.job_box > dl:nth-child(3) dt{
			width:calc(100% - 40px);
			max-width:260px;
			float:left;
		}
		
			div.job_box > dl:nth-child(3) dt a{
				display:block;
				width:100%;
				max-width:260px;
				background-position:center;
				background-size:cover;
				background-repeat:no-repeat;
				margin:0 auto 10px auto;
			}
			
			div.job_box > dl:nth-child(3) dt a:hover{
				opacity:0.5;
			}
			
			div.job_box > dl:nth-child(3) dt a::before{
				content:'';
				display:block;
				width:100%;
				padding-top:75%;
			}
			
			div.job_box > dl:nth-child(3) dt p{
				text-align:center;
				color:#808080;
				font-size:0.8em;
			}
			
		div.job_box > dl:nth-child(3) dd{
			width:calc(100% - 290px);
			float:left;
			margin:0 0 0 30px;
		}
		
			div.job_box > dl:nth-child(3) dd dl{
				overflow:hidden;
			}
		
				div.job_box > dl:nth-child(3) dd dl dt{
					width:110px;
					clear:left;
					text-align:center;
					background-color:#fff;
					border:1px #006494 solid;
					box-sizing:border-box;
					height:24px;
					line-height:24px;
					border-radius:12px;
					color:#808080;
					font-size:0.9em;
					font-weight:bold;
					margin:0 0 12px 0;
				}
				
				div.job_box > dl:nth-child(3) dd dl dt.blue{
					background-color:#006494;
					color:#fff;
				}
				
				div.job_box > dl:nth-child(3) dd dl dd{
					width:calc(100% - 120px);
					margin:0 0 12px 10px;
					font-weight:500;
					line-height:24px;
				}
				
					div.job_box > dl:nth-child(3) dd dl dd span.blue{
						color:#006494;
						font-weight:bold;
						font-size:1.2em;
					}
					
					
					
	div.job_box > dl:nth-child(4){
		width:100%;
		margin:0 auto;
		padding:20px 30px;
		overflow:hidden;
		box-sizing:border-box;
		background-color:#fff;
	}
					
		div.job_box > dl:nth-child(4) dt{
			width:calc(100% - 300px);
			float:left;
		}
		
			div.job_box > dl:nth-child(4) dt p{
				padding:10px 10px 10px 135px;
				background-image:
					url('../img/point_bg_2.svg'),
					url('../img/point_bg_1.svg');
				background-position:
					20px center,
					left bottom;
				background-size:
					102px auto,
					6px auto;
				background-repeat:
					no-repeat,
					repeat;
				box-sizing:border-box;
				color:#006494;
				font-weight:bold;
				font-size:1.0em;
			}
			
			
		div.job_box > dl:nth-child(4) dd{
			width:calc(100% - 40px);
			max-width:300px;
			float:right;
		}
		
			div.job_box > dl:nth-child(4) dd a.button{
				display:block;
				height:50px;
				line-height:50px;
				background-color:#006494;
				border-radius:20px;
				border:none;
				color:#fff;
				cursor:pointer;
				width:calc(100% - 40px);
				font-size:1.3em;
				margin:10px auto;
				text-align:center;
				font-weight:bold;
			}
			
				div.job_box > dl:nth-child(4) dd a.button::after{
					content:'\009B';
					display:inline-block;
					margin:0 0 0 10px;
				}

				div.job_box > dl:nth-child(4) dd a.button:hover{
					color:#006494;
					background-color:#85e9ff;
					text-decoration:none;
				}
	

div.none{
	text-align:center;
	margin:40px auto;
}



/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
smf
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:1500px){
div#left_list{
	padding:40px;
}
}


@media screen and (max-width:1300px){
div#left_list{
	width:100%;
}
div#right_list{
	width:100%;
}
}

@media screen and (max-width:800px){
div.keyword{
	margin:0 auto 80px auto;
	max-width:calc(100% - 40px);
}

		div.keyword dt{
			float:none;
			width:100%;
			background-image:url('../img/keyword_bg_sp.svg');
			padding:30px 0;
			font-size:1.1em;
		}
		
			div.keyword dt br{
				display:none;
			}
			
		div.keyword dd{
			float:none;
			width:100%;
			padding:0 20px 20px 20px;
		}
		
			div.keyword dd a{
				margin:15px 10px;
				font-size:1.05em;
			}
			
			
			
			
			
		div.job_box > div > h4{
			width:100%;
		}
		div.job_box > div > div{
			width:calc(100% - 68px);
			max-width:100%;
		}
		
		div.job_box > dl:nth-child(2) dt{
			width:100%;
		}
		div.job_box > dl:nth-child(2) dd{
			width:100%;
		}
		
		div.job_box > dl:nth-child(3) dt{
			width:100%;
			max-width:100%;
			margin:0 auto 40px auto;
		}
		
		div.job_box > dl:nth-child(3) dd{
			width:100%;
			margin:0 auto 40px auto;
		}
		
		div.job_box > dl:nth-child(4) dt{
			float:none;
			width:100%;
		}
		
		div.job_box > dl:nth-child(4) dd{
			float:none;
			margin:20px auto;
		}
		
}

@media screen and (max-width:400px){
	div.list_link div.rows{
		display:block;
		margin:0 0 20px 0;
		
	}
	
	div.job_box > div{
		margin:10px auto 0 auto;
		width:calc(100% - 20px);
	}
	
		div.job_box > div > h4{
			font-size:1.2em;
		}
		
		div.job_box > dl:nth-child(2) dt,
		div.job_box > dl:nth-child(2) dd{
			padding:5px 0;
		}
		
			div.job_box > dl:nth-child(2) dt span{
				margin:3px;
				font-size:0.8em;
			}
			
				div.job_box > dl:nth-child(2) dd p span{
					padding:0;
					width:100%;
					margin:2px 0;
				}
			div.job_box > dl:nth-child(2) dd p::before{
				display:none;
			}
			
	div.job_box > dl:nth-child(3){
		padding:20px 10px 0 10px;
	}
		
		div.job_box > dl:nth-child(3) dd{
			width:100%;
			margin:0 auto;
		}
		
				div.job_box > dl:nth-child(3) dd dl dt,
				div.job_box > dl:nth-child(3) dd dl dd{
					width:100%;
				}
				
					div.job_box > dl:nth-child(3) dd dl dd span.blue{
						font-size:1.0em;
					}
	
	div.job_box > dl:nth-child(4){
		padding:20px 10px;
	}
					
			div.job_box > dl:nth-child(4) dt p{
				padding:10px;
				background-image:
					url('../img/point_bg_1.svg');
				background-position:
					left bottom;
				background-size:
					6px auto;
				background-repeat:
					repeat;
				box-sizing:border-box;
				font-size:1.0em;
			}
			
			div.job_box > dl:nth-child(4) dd a.button{
				font-size:1.1em;
			}
	
}




/*==================================================
ラジオボタン、チェックボックス
==================================================*/
.input input[type=radio],
.input input[type=checkbox] {
	display: inline-block;
	margin-right: 6px;
}
.input input[type=radio] + label,
.input input[type=checkbox] + label {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	line-height: 30px;
	cursor: pointer;
}
 
@media (min-width: 1px) {
	.input input[type=radio],
	.input input[type=checkbox] {
		display: none;
		margin: 0;
	}
	.input input[type=radio] + label,
	.input input[type=checkbox] + label {
		padding: 0 0 0 24px;
	}
	.input input[type=radio] + label::before,
	.input input[type=checkbox] + label::before {
		content: "";
		position: absolute;
		//top: 50%;
		top: 0.9em;
		left: 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		background: #FFF;
	}
	.input input[type=radio] + label::before {
		border: 2px solid #ccc;
		border-radius: 30px;
	}
	.input input[type=checkbox] + label::before {
		border: 2px solid #ccc;
	}
	.input input[type=radio]:checked + label::after,
	.input input[type=checkbox]:checked + label::after {
		content: "";
		position: absolute;
		//top: 50%;
		top: 0.9em;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}
	.input input[type=radio]:checked + label::after {
		left: 5px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		background: #4DD0E1;
		border-radius: 8px;
	}
	.input input[type=checkbox]:checked + label::after {
		left: 3px;
		width: 16px;
		height: 8px;
		margin-top: -8px;
		border-left: 3px solid #4DD0E1;
		border-bottom: 3px solid #4DD0E1;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	.input input[type=checkbox] + label.ikkatsu{
		margin-right:0;
		width:0;
	}
	
	.input input[type=checkbox] + label.group_name{
		padding:0 24px 0 0;
		margin:0;
	}
	
	.input input[type=checkbox] + label.group_name::before {
		content:'';
		left:auto;
		right: 0;
		
	}
	
	.input input[type=checkbox] + label.group_name::after {
		content: '';
		position: absolute;
		top: 6px;
		right: 0;
		display: block;
		width: 18px;
		height: 18px;
		background-image:url('../img/group_open.png');
		background-position:center;
		background-size:cover;
	}
	
	.input input[type=checkbox]:checked + label.group_name::after {
		content: '';
		position: absolute;
		top: 6px;
		left:auto;
		right: 0;
		display: block;
		width: 18px;
		height: 18px;
		border:none;
		background-image:url('../img/group_close.png');
		background-position:center;
		background-size:cover;
		margin-top: 0;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}