@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
header
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:1500px){
header{
	background-position:
		center bottom,
		calc(50% + 420px) 310px,
		right center;
}
}



@media screen and (max-width:1220px){
header{
	overflow:hidden;
	height:auto;
	
	background-image:
		url('../img/header_bottom.svg'),
		url('../img/header_bg.png');
	background-size:
		1920px auto,
		cover;
	background-position:
		center bottom,
		right center;
	background-repeat:
		no-repeat,
		no-repeat;
}

	header div#sitename{
		position:relative;
		top:0;
		left:0;
		margin:22px auto;
		background-color:rgba(255,255,255,0.5);
	}
	
	header div#sitename:hover{
		background-color:rgba(255,255,255,1);
	}
	
	header > ul{
		position:relative;
		top:0;
		left:0;
		width:690px;
		margin:60px auto;
	}
	
	header dl{
		position:relative;
		top:0;
		left:0;
		margin:150px auto 0 auto;
		width:780px;
		overflow:hidden;
	}
	
	header input[type=submit]{
		position:relative;
		top:0;
		left:0;
		width:300px;
		height:100px;
		border-radius:10px;
		margin:40px auto 80px auto;
		background-color:#0b3954;
		background-image:url('../img/search.svg');
		background-size:128px auto;
		background-position:center;
		background-repeat:no-repeat;
	}
	
	header input[type=submit]:hover{
		background-color:rgba(24,66,84,0.6);
	}
}


@media screen and (max-width:800px){
header{
	background-size:
		1920px auto,
		800px auto;
	background-position:
		center 260px,
		right 110px;
	background-repeat:
		no-repeat,
		no-repeat;
	position:relative;
}

	header div#sitename{
		width:100%;
		margin:0 auto;
		background-color: #fff;
		background: url('../img/title.svg'),-webkit-linear-gradient(to top, #e7fbff, #fff, #fff);
		background: url('../img/title.svg'),linear-gradient(to top, #e7fbff, #fff, #fff);
		background-size:310px auto,cover;
		background-position:center,center;
		background-repeat:no-repeat,repeat;
		border-top:5px #0b3954 solid;
		height:110px;
		position:fixed;
		left:0;
		top:0;
		animation: logo_animation_2 2.5s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		z-index:4;
		
	}
	
		header div#sitename a{
			display:block;
			width:310px;
			height:68px;
			margin:19px auto;
		}

	header > ul{
		display:none;
	}
	
	header dl{
		margin:313px auto 0 auto;
		padding:30px 0 0 0;
		width:100%;
		background-color:#fff;
	}
	
		header dt{
			color:#0b3954;
			font-size:1.5em;
		}
		
		header dd{
			width:100%;
			max-width:400px;
			margin:0 auto;
			padding:15px;
		}
			
			header dd ul{
				background:none;
				padding:0; 
			}
			
				header dd ul li{
					float:none;
					box-sizing:border-box;
					border:none;
					width:100%;
					border-radius:8px;
					background-color:#fff;
					padding:10px 0;
					margin:5px 0;
				}
				
	header input[type=submit]{
		height:87px;
		margin:20px auto 0 auto;
		background-color:#85e9ff;
		background-image:url('../img/search_sp.svg');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	
	header input[type=submit]:hover{
		background-color:#85e9ff;
		opacity:0.5;
	}
}

@media screen and (max-width:550px){
header{
	background-size:
		1920px auto,
		600px auto;
	background-position:
		center 190px,
		right 100px;
}



	header dl{
		margin:243px auto 0 auto;
	}
	
	header div#sitename{
		background-position:10px center;
	}
	
		header div#sitename a{
			margin:19px 0 19px 10px;
		}
}

@media screen and (max-width:400px){
	header div#sitename{
		height:80px;
		background-size:200px auto,cover;
	}
	
		header div#sitename a{
			width: 200px;
			height: 40px;
			margin:17px 0 19px 10px;
		}
}



@media screen and (max-width:1100px){
	div#job_search ul{
		max-width:540px;
	}
	
		div#job_search ul li{
			width:calc(50% - 50px);
		}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
job_search
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:560px){
	div#job_search ul{
		margin: 0 auto 60px auto;
	}
	
		div#job_search ul li{
			float:none;
			width:100%;
			margin:20px auto;
			background-image:none;
		}
		
		div#job_search ul li::before{
			display:none;
			padding-top:0;
		}
		
			div#job_search ul li a{
				display:block;
				position:relative;
				width:100%;
				background-size:cover;
				background-repeat:no-repeat;
				background-position:center;
				top:0;
				left:0;
				border-radius:0;
				line-height:80px;
				font-size:1.75em;
			}
			
			div#job_search ul li:nth-child(2) a{
				background-position:center bottom;
			}
			div#job_search ul li:nth-child(4) a{
				background-position:center bottom;
			}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
whats_new
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:800px){
	div#whats_new > 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;
				}
}

@media screen and (max-width:1100px){
			div.information > div ul{
				max-width:540px;
			}
			
				div.information > div ul li{
					float:left;
					width:calc(50% - 30px);
				}
				
				div.information > div ul li:nth-child(2n + 1){
					clear:left;
				}

}
@media screen and (max-width:560px){
			div.information > div ul{
				max-width:270px;
			}
			
				div.information > div ul li{
					float:left;
					width:calc(100% - 30px);
					margin-bottom:40px;
				}
				
				div.information > div ul li:nth-child(2n + 1){
					clear:left;
				}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
login
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:1170px){
div#login{
	overflow:hidden;
}

	div#login a{
		margin:30px;
	}
}

@media screen and (max-width:800px){
	div#login a{
		border-radius:10px;
		margin:30px 5px;
		max-width:200px;
	}
}

@media screen and (max-width:460px){
	div#login a{
		font-size:1.1em;
		display:block;
		margin:20px auto;
	}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
contents
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:900px){
h2.contents{
	margin-bottom:0;
}

	div#contents ul{
		margin:0 auto 40px auto;
	}
	
		div#contents ul li{
			float:none;
			width:calc(100% - 56px);
			max-width:234px;
			margin:40px auto;
		}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
about_us
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:1100px){
div#about_us > div > h2{
	margin:100px auto 40px auto;
}


div#about_us > div{
	background:none;
	padding:0;
	margin:0 0 40px 0;
}

	div#about_us > div > div{
		background-image:
			url('../img/about_us_bg.png');
		background-size:
			cover;
		background-position:
			center;
		background-repeat:
			no-repeat;
		padding:0;
	}
	
		div#about_us > div > div h3{
			margin:80px auto 0 auto;
			padding:60px 25px 60px 25px;
			background-color:rgba(255,255,255,0.8);
		}
	
		div#about_us > div > div > div{
			background-color:rgba(255,255,255,0.8);
			margin:0 auto 80px auto;
			padding:0 25px 80px 25px;
		}
}

@media screen and (max-width:800px){
	div#about_us > div > div{
		background-image:
			url('../img/about_us_bg_sp.png');
		background-size:
			cover;
	}
	
			div#about_us > div > div > div p{
				width:100%;
				float:none;
				margin:20px 0;
			}
			
			div#about_us > div > div > div p:first-child,
			div#about_us > div > div > div p:last-child{
				padding:0;
			}
}
@media screen and (max-width:600px){
		div#about_us > div > div h3{
			font-size:1.4em;
		}
}
@media screen and (max-width:400px){
		div#about_us > div > div h3{
			margin:40px auto 0 auto;
			padding:20px 25px 20px 25px;
			font-size:1.2em;
		}
		
		div#about_us > div > div > div{
			margin:0 auto 40px auto;
			padding:0 25px 20px 25px;
		}
}