@charset "utf-8";

body{
	overflow:hidden;
}

main{
	margin:0 0 80px 0;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
header
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
header{
	margin:0 auto;
	height:226px;
	background-color:#fff;
	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{
		opacity: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(133,233,255,0.6);
				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;
				opacity:0.5;
			}
			
			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');
			}
			
	
	div#pc_nav{
		position:relative;
		width:100%;
		background-color:#006494;
		top:120px;
		letter-spacing:-0.4em;
		text-align:center;
		padding:15px 0;
	}
	
		div#pc_nav a{
			display:inline-block;
			color:#fff;
			letter-spacing:0.1em;
			font-size:0.9em;
			border-right:1px #fff solid;
			min-width:160px;
			padding:5px;
			box-sizing:border-box;
			vertical-align:bottom;
			position:relative;
		}
		
		div#pc_nav a:hover{
			text-decoration:none;
		}
		
		div#pc_nav a:last-child{
			border:none;
		}
		
		div#pc_nav a.active,
		div#pc_nav a.hover{
			background:#85e9ff;
			background-size:100% 10px;
			background-repeat:no-repeat;
			background-position:center bottom;
			color:#000;
		}
		
		div#pc_nav a.active::before,
		div#pc_nav a.hover::before{
			content:'';
			position:absolute;
			left:0;
			top:-15px;
			display:block;
			width:100%;
			height:15px;
			background-color:#85e9ff;
		}
		
		div#pc_nav a.active::after,
		div#pc_nav a.hover::after{
			content:'';
			position:absolute;
			left:0;
			bottom:-50px;
			display:block;
			width:100%;
			height:50px;
			background-image:url('../img/pc_menu_active.svg');
			background-position:center bottom;
			background-size:cover;
			background-repeat:no-repeat;
		}
		
		
			div#pc_nav a p{
				display:block;
				font-size:1.4em;
				line-height:2.2em;
				font-weight:500;
			}
			
			div#pc_nav a:nth-child(2) p{
				line-height:1.1em;
			}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
container
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
.container{
	width:100%;
	display:inline-flex;
	flex-direction:row;
}

div#left_contents{
	width:calc(100% - 490px);
	overflow:hidden;
}
div#right_contents{
	width:490px;
	background-color:#f9f8f0;
	padding:72px;
	box-sizing:border-box;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
h1
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
h1.information,
h1.interview,
h1.knowledge{
	width:calc(100% - 340px);
	box-sizing:border-box;
	padding:20px 260px 20px calc(100% - 980px);
	text-align:center;
	margin:80px 0 30px 0;
	font-size:2.4em;
	line-height:1em;
	background-image:url('../img/h1_bg.svg');
	background-size:auto 100%;
	background-position:right center;
	background-repeat:no-repeat;
}

h1.information{
	background-color:#30c5ff;
}
h1.interview{
	background-color:#ffb523;
}
h1.knowledge{
	background-color:#72c259;
}

	h1.information p,
	h1.interview p,
	h1.knowledge p{
		font-size:0.55em;
		font-weight:500;
		line-height:1em;
		margin:3px 0 0 0;
	}