@charset "utf-8";

body{
	overflow:hidden;
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
header
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
header{
	max-width:1920px;
	height:700px;
	margin:0 auto;
	background-image:
		url('../img/header_bottom.svg'),
		url('../img/loupe.svg'),
		url('../img/header_bg.png');
	background-size:
		1920px auto,
		260px auto,
		cover;
	background-position:
		center bottom,
		calc(50% + 420px) 310px,
		right center;
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat;
	box-sizing:border-box;
	position:relative;
}

	header div#sitename{
		width:331px;
		height:72px;
		box-sizing:border-box;
		position:absolute;
		left:calc(50% - 544px);
		top:22px;
		white-space:nowrap;
		overflow:hidden;
		text-indent:100%;
		background-image:url('../img/title.svg');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	
	header div#sitename:hover{
		background-color:rgba(255,255,255,0.5);
	}
		
		header div#sitename a{
			display:block;
			width:331px;
			height:72px;
		}
	
	header > ul{
		box-sizing:border-box;
		position:absolute;
		left:calc(50% - 135px);
		top:22px;
		overflow:hidden;
	}
		
		header > ul li{
			float:left;
			margin:0 8px 0 0;
		}
		
		header > ul li:nth-child(1){
			width:214px;
		}
		header > ul li:nth-child(2){
			width:144px;
		}
		header > ul li:nth-child(3){
			width:168px;
		}
		header > ul li:nth-child(4){
			width:132px;
			margin:0;
		}
		
			header > ul li a{
				display:block;
				background-color:rgba(255,255,255,0.5);
				font-weight:bold;
				line-height:2.1em;
				text-align:center;
				letter-spacing:0.02em;
				vertical-align:bottom;
			}
			
			header > ul li a:hover{
				text-decoration:none;
				background-color:rgba(255,255,255,1);
			}
			
			header > ul li a::before{
				content:'';
				display:inline-block;
				width:20px;
				height:20px;
				background-size:contain;
				background-position:center;
				background-repeat:no-repeat;
				margin:0 5px 7px 0;
				vertical-align:bottom;
			}
			
			header > ul li:nth-child(1) a::before{
				background-image:url('../img/header_link_1.svg');
			}
			header > ul li:nth-child(2) a::before{
				background-image:url('../img/header_link_2.svg');
			}
			header > ul li:nth-child(3) a::before{
				background-image:url('../img/header_link_3.svg');
			}
			header > ul li:nth-child(4) a::before{
				background-image:url('../img/header_link_4.svg');
			}
			
	
	header dl{
		box-sizing:border-box;
		position:absolute;
		left:calc(50% - 504px);
		top:310px;
		overflow:hidden;
	}
	
		header dt{
			//color:#fff;
			color:#006494;
			text-align:center;
			font-size:1.8em;
			font-weight:bold;
			height:65px;
			line-height:65px;
		}
		
		header dt::before{
			content:'\0300A';
			margin:0 10px 0 0;
		}
		header dt::after{
			content:'\0300B';
			margin:0 0 0 10px;
		}
		
		header dd{
			width:768px;
			background-color:rgba(24,66,84,0.5);
			box-sizing:border-box;
			padding:8px;
		}
		
			header dd ul{
				background-color:#fff;
				overflow:hidden;
				padding:13px 0;
				border-radius:8px;
			}
			
				header dd ul li{
					float:left;
					box-sizing:border-box;
					border-right:1px #9e9e9e solid;
					width:20%;
					text-align:center;
				}
				
				header dd ul li:last-child{
					border:none;
				}
			
				header dd ul select,
				header dd ul input{
					border:none;
					font-weight:500;
					box-sizing:border-box;
					width:calc(100% - 10px);
				}
				
				header dd ul input{
					padding:7px 5px 6px 5px;
				}
				
				header dd ul select{
					padding:5px 5px 7px 5px;
				}
				
				@-moz-document url-prefix() {
					header dd ul select{
						padding:5px;
					}
				}
				
	header input[type=submit]{
		position:absolute;
		display:block;
		width:180px;
		height:180px;
		cursor:pointer;
		background:none;
		border:none;
		//background-color:rgba(255,0,0,0.5);
		left:calc(50% + 302px);
		top:313px;
		border-radius:50%;
	}
	

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
job_search
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

div#job_search{
	//background-image:url('../img/job_search_bg.svg');
	background-size:auto 100%;
	background-position:center;
	background-repeat:repeat-x;
	//border-bottom:1px #ccc solid;
	box-sizing:border-box;
	padding:20px 0 0 0;
}

	div#job_search ul{
		overflow:hidden;
		margin:60px auto 105px auto;
		width:100%;
		max-width:1080px;
	}
	
		div#job_search ul li{
			float:left;
			width:calc(25% - 50px);
			margin:0 25px;
			box-sizing:border-box;
			text-align:center;
			background-image:url('../img/job_search_loupe.svg');
			background-size:100% auto;
			background-repeat:no-repeat;
			background-position:center top;
			position:relative;
		}
		
		div#job_search ul li:hover{
			opacity:0.5;
		}
		
		div#job_search ul li::before{
			content:'';
			display:block;
			padding-top:121.65%;
		}
		
			div#job_search ul li a{
				position:absolute;
				width:88%;
				height:74%;
				background-size:cover;
				background-repeat:no-repeat;
				background-position:center;
				top:4%;
				left:6%;
				border-radius:50%;
				color:#fff;
				line-height:190px;
				font-size:2em;
				font-weight:bold;
				letter-spacing:0.2em;
				text-indent:0.2em;
			}
			
			div#job_search ul li:nth-child(1) a{
				background-image:url('../img/job_search_1.png');
			}
			div#job_search ul li:nth-child(2) a{
				background-image:url('../img/job_search_2.png');
			}
			div#job_search ul li:nth-child(3) a{
				background-image:url('../img/job_search_3.png');
			}
			div#job_search ul li:nth-child(4) a{
				background-image:url('../img/job_search_4.png');
			}
			
			div#job_search ul li a:hover{
				text-decoration:none;
			}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
whats_new
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
div#whats_new{
	background: #fff;
	background: -webkit-linear-gradient(to top, #e7fbff, #e7fbff, #fff);
	background: linear-gradient(to top, #e7fbff, #e7fbff, #fff);
}

	div#whats_new > div.keyword{
		max-width:1080px;
		margin:140px auto 140px 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;
				}
				
				div.keyword dd a:hover{
					text-decoration:none;
					border-color:#fff;
				}
			


	div#whats_new > div.information{
		margin:0 auto;
		padding:0 0 120px 0;
	}

		div.information h3{
			white-space:nowrap;
			overflow:hidden;
			text-indent:100%;
			height:56px;
			background-image:url('../img/whats_new_2.svg');
			background-size:242px auto;
			background-position:center;
			background-repeat:no-repeat;
			margin:0 auto 20px auto;
		}
		
			div.information > div ul{
				max-width:1080px;
				overflow:hidden;
				margin:0 auto;
			}
			
				div.information > div ul li{
					float:left;
					width:calc(25% - 30px);
					margin:15px;
					overflow:hidden;
				}
				
					div.information > div ul li > a{
						display:block;
						width:calc(100% - 20px);
						margin:0 auto;
						background-size:cover;
						background-position:center;
						background-repeat:no-repeat;
						background-color:#fff;
					}
					
					div.information > div ul li > a:hover{
						opacity:0.5;
					}
					
					div.information > div ul li > a::before{
						content:'';
						display:block;
						padding-top:75%;
					}
					
					
					div.information > div ul li > p.cate{
						display:inline-block;
						margin:25px 0 0 0;
						padding:0 10px;
						height:19px;
						line-height:19px;
						font-size:0.8em;
						position:relative;
						box-sizing:border-box;
						overflow:hidden;
						color:#fff;
						font-weight:bold;
						vertical-align:bottom;
					}
					
					div.information > div ul li > p.cate::before,
					div.information > div ul li > p.cate::after{
						content:'';
						display:block;
						width:10px;
						height:19px;
						background-size:10px 19px;
						background-position:center;
						background-repeat:no-repeat;
						position:absolute;
						top:0;
					}
					
					div.information > div ul li > p.cate::before{
						left:0;
					}
					div.information > div ul li > p.cate::after{
						right:0;
					}
					
					div.information > div ul li > p.news::before{
						background-image:url('../img/whats_new_info_1_b.svg');
					}
					div.information > div ul li > p.news::after{
						background-image:url('../img/whats_new_info_1_a.svg');
					}
					div.information > div ul li > p.interview::before{
						background-image:url('../img/whats_new_info_2_b.svg');
					}
					div.information > div ul li > p.interview::after{
						background-image:url('../img/whats_new_info_2_a.svg');
					}
					div.information > div ul li > p.knowledge::before{
						background-image:url('../img/whats_new_info_3_b.svg');
					}
					div.information > div ul li > p.knowledge::after{
						background-image:url('../img/whats_new_info_3_a.svg');
					}
					
						div.information > div ul li > p.cate span{
							display:inline-block;
							float:left;
							padding:0 5px;
						}
						
						div.information > div ul li > p.news span{
							background-color:#30c5ff;
						}
						div.information > div ul li > p.interview span{
							background-color:#ffb523;
						}
						div.information > div ul li > p.knowledge span{
							background-color:#72c259;
						}
				
				
					div.information > div ul li > p.date{
						display:block;
						text-align:center;
						background-color:#fff;
						color:#808080;
						font-size:0.9em;
						font-weight:500;
					}
					
						div.information > div ul li > p.date span{
							color:#30c5ff;
							font-weight:bold;
						}
						
					div.information > div ul li > strong{
						display:block;
						text-align:center;
						margin:20px 0 10px 0;
					}
					
					div.information > div ul li > div{
						padding:10px 20px;
						border-width:1px 0 1px 0;
						border-color:#006494;
						border-style:dotted;
						font-size:0.8em;
						font-weight:500;
						color:#808080;
					}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
login
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
div#login{
	background-image:url('../img/login_bg.svg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	letter-spacing:-0.4em;
	text-align:center;
}

	div#login a{
		display:inline-block;
		width:100%;
		max-width:295px;
		height:60px;
		line-height:60px;
		background-color:rgba(255,255,255,0.8);
		border-radius:30px;
		margin:30px 135px;
		letter-spacing:0.01em;
		font-weight:bold;
		font-size:1.4em;
	}
	
	div#login a:hover{
		background-color:rgba(255,255,255,1);
		text-decoration:none;
	}
	
	div#login a::before{
		content:'';
		display:inline-block;
		width:26px;
		height:26px;
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		margin:0 8px 17px 0;
		vertical-align:bottom;
	}
	
	div#login a:first-child::before{
		background-image:url('../img/header_link_2.svg');
	}
	div#login a:last-child::before{
		background-image:url('../img/header_link_3.svg');
	}
	
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
contents
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
div#contents{
	background-image:url('../img/job_search_bg.svg');
	background-size:auto 100%;
	background-position:center;
	background-repeat:repeat-x;
	border-bottom:1px #ccc solid;
	box-sizing:border-box;
}

	div#contents ul{
		overflow:hidden;
		margin:60px auto 105px auto;
		width:100%;
		max-width:870px;
		padding:0 0 5px 0;
	}
	
		div#contents ul li{
			float:left;
			width:calc(33.33% - 56px);
			margin:0 28px;
			box-sizing:border-box;
			text-align:center;
			position:relative;
			border-radius:50%;
			overflow:hidden;
			background-color:#f7f7ff;
			box-shadow:5px 5px 0px 0px #cccccc;
		}
		
		div#contents ul li:hover{
			opacity:0.5;
		}
		
		div#contents ul li::before{
			content:'';
			position:absolute;
			left:0;
			top:156px;
			display:block;
			width:100%;
			height:82px;
			background-color:#006494;
		}
		
			div#contents ul li a{
				position:relative;
				display:block;
				width:100%;
				height:234px;
				color:#fff;
				font-size:1.1em;
				font-weight:bold;
				letter-spacing:0.2em;
				text-indent:0.2em;
				box-sizing:border-box;
				padding:180px 0 0 0;
				background-position:center 32px;
				background-size:108px auto;
				background-repeat:no-repeat;
			}
			
			div#contents ul li:nth-child(1) a{
				background-image:url('../img/contents_link_1.svg');
			}
			div#contents ul li:nth-child(2) a{
				background-image:url('../img/contents_link_3.svg');
				padding:168px 0 0 0;
			}
			div#contents ul li:nth-child(3) a{
				background-image:url('../img/contents_link_4.svg');
				padding:168px 0 0 0;
			}
			
			div#contents ul li a:hover{
				text-decoration:none;
			}
			
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
about_us
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
div#about_us > div > h2{
	margin:100px auto 200px auto;
}

div#about_us > div{
	max-width:1920px;
	margin:0 auto;
	background-image:
		url('../img/about_us_bottom.svg'),
		url('../img/about_us_top.svg'),
		url('../img/about_us_bg.png');
	background-size:
		1920px auto,
		1920px auto,
		cover;
	background-position:
		center bottom,
		center 60px,
		center 60px;
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat;
	box-sizing:border-box;
	position:relative;
	padding:0 0 300px 0;
}

	div#about_us > div > div{
		overflow:hidden;
		background-color:rgba(255,255,255,0.8);
		padding:80px 20px;
		box-sizing:border-box;
	}
	
		div#about_us > div > div h3{
			font-size:1.8em;
			color:#006494;
			max-width:1080px;
			margin:0 auto 40px auto;
			letter-spacing:0.2em;
			line-height:60px;
			overflow:hidden;
		}
		
			div#about_us > div > div h3 strong{
				font-size:1.4em;
				float:left;
			}
			
			div#about_us > div > div h3 strong,
			div#about_us > div > div h3 span{
				display:block;
				height:60px;
				line-height:60px;
				float:left;
			}
			
		div#about_us > div > div > div{
			max-width:1080px;
			margin:0 auto;
			overflow:hidden;
		}
		
			div#about_us > div > div > div p{
				width:50%;
				float:left;
				box-sizing:border-box;
				line-height:2em;
				font-weight:bold;
				color:#808080;
				letter-spacing:0.15em;
			}
			
			div#about_us > div > div > div p:first-child{
				padding:0 25px 0 0;
			}
			
			div#about_us > div > div > div p:last-child{
				padding:0 0 0 25px;
			}