@charset "utf-8";

html {
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}


body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: normal;
	line-height: 140%;
	word-break : break-all;
	position: relative;
	-webkit-text-size-adjust: 100%;
	letter-spacing:0.1em;
	text-indent:0.1em;
}


a {
	color: #006494;
	text-decoration: none;
}

a:hover {
	color: #006494;
	text-decoration: underline;
}


img {
	border: none;
	line-height: 0;
	vertical-align: bottom;
}

.gothic{
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.mincho{
	font-family: "小塚明朝 Pr6N","KozukaMinPr6N","游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN W6","HiraMinProN-W6","黎ミン L","Reimin Light","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}

::selection {
	background: #b0f1ff;
	color: #fff;
}
::-moz-selection {
	background: #b0f1ff;
	color: #fff;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
h2
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

h2{
	width:400px;
	height:150px;
	margin:45px auto;
	text-align:center;
	color:#006494;
	font-size:0.95em;
	font-weight:bold;
	background-size:286px auto;
	background-position:center calc(50% - 15px);
	background-repeat:no-repeat;
}
	
	h2 p{
		text-indent:-15px;
	}
	
	h2 span{
		display:block;
		margin:90px 0 0 0;
		letter-spacing:0;
	}

h2.job_search{
	background-image:url('../img/h2_job_search.svg');
}
h2.whats_new{
	background-image:url('../img/h2_whats_new.svg');
}
h2.contents{
	background-image:url('../img/h2_contents.svg');
}
h2.about_us{
	background-image:url('../img/h2_about_us.svg');
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
h2
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

h2{
	width:400px;
	height:150px;
	margin:45px auto;
	text-align:center;
	color:#006494;
	font-size:0.95em;
	font-weight:bold;
	background-size:286px auto;
	background-position:center calc(50% - 15px);
	background-repeat:no-repeat;
}
	
	h2 p{
		text-indent:-15px;
	}
	
	h2 span{
		display:block;
		margin:90px 0 0 0;
		letter-spacing:0;
	}

h2.job_search{
	background-image:url('../img/h2_job_search.svg');
}
h2.whats_new{
	background-image:url('../img/h2_whats_new.svg');
}
h2.contents{
	background-image:url('../img/h2_contents.svg');
}
h2.about_us{
	background-image:url('../img/h2_about_us.svg');
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
フッター
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
	
@media screen and (max-width:700px){
h2{
	margin:45px auto 0 auto;
}
}

@media screen and (max-width:400px){
h2{
	width:calc(100% - 20px);
	font-size:0.85em;
}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サイドメニュー
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ハンバーガーメニューアイコン
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

.menu-trigger,
.menu-trigger span{
	display: block;
	transition: all .4s;
	box-sizing: border-box;
	margin:0;
	text-align:center;
}
.menu-trigger{
	position: relative;
	width: 76px;
	height: 24px;
	
	background-color:#0b3954;
	border-radius:16px;
}
.menu-trigger span{
	position: absolute;
	left: calc(50% - 14px);
	width: 28px;
	height: 3px;
	background-color: #85e9ff;
	border-radius:2px;
}
.menu-trigger span:nth-of-type(1){
	top: 22px;
}
.menu-trigger span:nth-of-type(2){
	top: 30px;
}
.menu-trigger span:nth-of-type(3){
	top: 38px;
}

.menu-trigger span:nth-of-type(2)::after{
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background-color: #85e9ff;
	border-radius:2px;
	transition: all .4s;
	opacity:0;
}

.menu-trigger.active span:nth-of-type(1){
	transform: translateY(20px) scale(0);
}
.menu-trigger.active span:nth-of-type(2){
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2)::after{
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	opacity:1;
}
.menu-trigger.active span:nth-of-type(3){
	transform: translateY(-20px) scale(0);
}


	header #menu_button{
		position:fixed;
		left:50px;
		top:35px;
		display:block;
		width:calc(100% - 40px);
		max-width:120px;
		padding:0 0 5px 0;
		text-align:center;
		text-decoration:none;
		color:#656263;
		font-size:0.7em;
		text-indent.0.1em;
		z-index:5;
		
		animation: logo_animation_3 3.5s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
	}
	
		header #menu_button p{
			margin:15px 0 0 0;
		}
		
		header #menu_button p.active::after{
			//content:'CLOSE';
			display:inline;
		}
		header #menu_button p.close::before{
			//content:'MENU';
			display:inline;
		}

header nav > div{
	position:fixed;
	top:0;
	left:calc(255px - 33.33%);
	display:block;
	width:100%;
	max-width:calc(33.33% - 75px);
	height:100vh;
	box-sizing: border-box;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

	header nav > div > div{
		width:100%;
		height:100vh;
		background-color:rgba(11,57,84,0.85);
		padding:40px 0 0 30px;
		box-sizing: border-box;
	}
	
	header nav p{
		font-size:2.0em;
		color:#fff;
		margin:30px 0 10px 0;
		font-weight:bold;
		line-height:1.5em;
		min-height:160px;
		letter-spacing:0.1em;
	}
	
	header nav p:first-child{
		margin-top:0;
	}
	
	header nav a{
		position:relative;
		display:block;
		color:#fff;
		margin:5px 0;
		padding:10px 10px 10px 20px;
		font-size:1.25em;
		line-height:1.5em;
	}
	
	header nav a:hover{
		color:#fff;
	}
	
	header nav a::before{
		content:'';
		position:absolute;
		left:0;
		top:calc(0.5em + 10px);
		display:block;
		width:10px;
		height:10px;
		border-width:1px 1px 0 0;
		border-color:#fff;
		border-style:solid;
		transform: rotate(45deg);
	}
	
	header nav p a{
		padding:0;
		font-size:1.0em;
	}
	
	header nav p a::before{
		display:none;
	}
	
		header nav ul{
			margin:0 0 0 30px;
		}
		
		header nav ul a::before{
			left:5px;
			top:calc(0.5em + 13px);
			width:5px;
			height:5px;
			border-radius:50%;
			background-color:#fff;
			border:none;
		}


.nav_menu_1{
	z-index:3;
}
.nav_menu_2{
	z-index:2;
}
.nav_menu_3{
	z-index:1;
}

.nav_menu_1.active{
	animation: nav_animation_1_1 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	left:225px;
}

.nav_menu_2.active{
	animation: nav_animation_1_2 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	left:calc(150px + 33.33%);
}

.nav_menu_3.active{
	animation: nav_animation_1_3 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	left:calc(75px + 66.66%);
}

	.nav_menu_1.active div > a,
	.nav_menu_2.active div > a,
	.nav_menu_3.active div > a,
	.nav_menu_1.active p,
	.nav_menu_2.active p,
	.nav_menu_3.active p,
	.nav_menu_1.active ul a,
	.nav_menu_2.active ul a,
	.nav_menu_3.active ul a{
		animation: nav_animation_2 1.2s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		opacity:1.0;
	} 

@keyframes nav_animation_1_1{
	0%{
		left:-175px;
	}
	60%{
		left:225px;
	}
}
@keyframes nav_animation_1_2{
	0%{
		left:-175px;
	}
	60%{
		left:calc(150px + 33.33%);
	}
}
@keyframes nav_animation_1_3{
	0%{
		left:-175px;
	}
	60%{
		left:calc(75px + 66.66%);
	}
}

@keyframes nav_animation_2{
	0%{
		opacity:0.0;
	}
	50%{
		opacity:0.0;
	}
	100%{
		opacity:1.0;
	}
}

.nav_menu_1.close{
	animation: nav_animation_3_1 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	left:calc(255px - 33.33%);
}

.nav_menu_2.close{
	animation: nav_animation_3_2 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	left:calc(255px - 33.33%);
}

.nav_menu_3.close{
	animation: nav_animation_3_3 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	left:calc(255px - 33.33%);
}

	.nav_menu_1.close div > a,
	.nav_menu_2.close div > a,
	.nav_menu_3.close div > a,
	.nav_menu_1.close p,
	.nav_menu_2.close p,
	.nav_menu_3.close p,
	.nav_menu_1.close ul a,
	.nav_menu_2.close ul a,
	.nav_menu_3.close ul a{
		animation: nav_animation_4 1.2s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		opacity:0;
	}


@keyframes nav_animation_3_1{
	0%{
		left:225px;
	}
	50%{
		left:225px;
	}
	100%{
		left:calc(255px - 33.33%);
	}
}

@keyframes nav_animation_3_2{
	0%{
		left:calc(150px + 33.33%);
	}
	50%{
		left:calc(150px + 33.33%);
	}
	100%{
		left:calc(255px - 33.33%);
	}
}

@keyframes nav_animation_3_3{
	0%{
		left:calc(75px + 66.66%);
	}
	50%{
		left:calc(75px + 66.66%);
	}
	100%{
		left:calc(255px - 33.33%);
	}
}

@keyframes nav_animation_4{
	0%{
		opacity:1.0;
	}
	60%{
		opacity:0.0;
	}
}


@media screen and (max-width:1620px){
header nav{
	font-size:0.8em;
}

	header nav a::before{
		width:8px;
		height:8px;
	}
	
		header nav ul a::before{
			top:calc(0.5em + 11px);
		}
}
@media screen and (max-width:1400px){
	header nav p{
		font-size:1.8em;
		min-height:100px;
	}
	
	header nav a{
		padding:5px 10px 5px 20px;
	}
	
	header nav a::before{
		top:calc(0.5em + 5px);
	}
	
		header nav ul a::before{
			top:calc(0.5em + 6px);
		}
}


@media screen and (max-width:900px){
header nav{
	position:fixed;
	right:-450px;
	top:110px;
	height:calc(100vh - 100px);
	overflow-y:auto;
	z-index:7;
	width:450px;
}

header nav.active{
	right:0;
	animation: nav_animation_1_4 1.2s ;
}

header nav.close{
	right:-450px;
	animation: nav_animation_3_4 1.2s ;
}

header nav > div{
	position:relative;
	left:0;
	top:0;
	width:100%;
	max-width:100%;
	height:auto;
}

	header nav > div > div{
		height:auto;
		min-height:calc(50vh - 90px);
		padding: 30px 20px;
	}

	header nav p{
		margin:20px 0 40px 0;
		min-height:0;
	}
	
	header nav a{
		display:block;
		color:#fff;
		padding:5px 10px 5px 20px;
	}

.nav_menu_1.active,
.nav_menu_2.active,
.nav_menu_3.active{
	animation:none;
	left:auto;
	right:0;
}

.nav_menu_1.close,
.nav_menu_2.close,
.nav_menu_3.close{
	left:auto;
	animation:none;
}

@keyframes nav_animation_1_4{
	0%{
		left:auto;
		right:-450px;
	}
	60%{
		left:auto;
		right:0;
	}
}
@keyframes nav_animation_3_4{
	0%{
		left:auto;
		right:0;
	}
	50%{
		left:auto;
		right:0;
	}
	100%{
		left:auto;
		right:-450px;
	}
}
}

@media screen and (max-width:450px){
	header nav{
		width:100%;
	}
	
	header #contact{
		height:60px;
		line-height:60px;
	}
}

@media screen and (max-width:900px){
	header #menu_button{
		left:auto;
		right:0px;
		top:26px;
		max-width:92px;
		font-size:0.5em;
	}
	
		header #menu_button p{
			margin:0;
		}
		
.menu-trigger{
	width: 72px;
	height: 63px;
}

}


@media screen and (max-width:400px){
	header #menu_button{
		top:20px;
	}
	
	header nav{
		top:80px;
	}

header #menu_button {
	max-width: 72px;
}

.menu-trigger{
	width: 52px;
	height: 43px;
	border-radius: 10px;
}

.menu-trigger span:nth-of-type(1){
	top: 12px;
}
.menu-trigger span:nth-of-type(2){
	top: 20px;
}
.menu-trigger span:nth-of-type(3){
	top: 28px;
}
}

header #menu_button{
	display:none;
}
header nav{
	display:none;
}

@media screen and (max-width:800px){
header #menu_button{
	display:block;
}
header nav{
	display:block;
}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
Go top
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
.go_top{
	position: fixed;
	right: 20px;
	margin-bottom: 20px;
}

.go_top a{
	display: block;
	width: 60px;
	height: 60px;
	color: #FFF;
	text-indent: -9999px;
	background-color: #006494;
	position: relative;
	border-radius: 50%;
	filter:alpha(opacity=80);
	box-sizing: border-box;
	box-shadow:3px 3px 0px 0px #cccccc;
	
}

.go_top a::after {
	display: block;
	content: '';
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	width: 12px;
	height: 12px;
	margin: auto;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

@media screen and (max-width:400px){

.go_top a{
	display: block;
	width: 40px;
	height: 40px;
}

.go_top a::after {
	width: 8px;
	height: 8px;
}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
footer
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
	div#contact a:first-child{
		display:block;
		width:331px;
		height:72px;
		box-sizing:border-box;
		white-space:nowrap;
		overflow:hidden;
		text-indent:100%;
		background-image:url('../img/title.svg');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		margin:0 auto 40px auto;
	}
	
	div#contact a:last-child{
		display:block;
		width:464px;
		height:50px;
		line-height:50px;
		box-sizing:border-box;
		color:#fff;
		font-size:1.5em;
		font-weight:500;
		text-align:center;
		overflow:hidden;
		margin:0 auto 40px auto;
		background-color:#006494;
	}
	
		div#contact a:last-child br{
			display:none;
		}
	
	div#contact a:hover{
		opacity:0.5;
		text-decoration:none;
	}
	
	footer ul{
		max-width:980px;
		margin:60px auto 40px auto;
		overflow:hidden;
	}
	
		footer ul li{
			min-width:100px;
			text-align:center;
			float:left;
			box-sizing:border-box;
			margin:25px 30px;
			font-size:1.1em;
		}
		
		footer ul li::before{
			content:'';
			display:block;
			width:8px;
			height:8px;
			background-color:#006494;
			border-radius:50%;
			margin:0 auto 10px auto;
		}
		
			footer ul li a{
				font-weight:bold;
			}
	
	div#footer_login{
		max-width:900px;
		margin:0 auto 45px auto;
		overflow:hidden;
	}
	
		div#footer_login a{
			display:block;
			float:right;
			height:35px;
			line-height:33px;
			box-sizing:border-box;
			border:1px #006494 solid;
			padding:0 20px;
			margin:0 3px;
			font-weight:bold;
			background-color:#f7f7ff;
		}
		
		div#footer_login 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;
		}
		
		div#footer_login a:nth-child(1)::before{
			background-image:url('../img/header_link_3.svg');
		}
		div#footer_login a:nth-child(2)::before{
			background-image:url('../img/header_link_2.svg');
		}
		
		div#footer_login a:hover{
			opacity:0.5;
			text-decoration:none;
		}
	
	footer p{
		height:35px;
		line-height:35px;
		text-align:center;
		color:#fff;
		background-image:url('../img/footer_bg.png');
		background-size:100% auto;
		background-position:center;
		background-repeat:repeat-y;
	}
	
@media screen and (max-width:600px){
	div#contact a:first-child{
		width:calc(100% - 20px);
		max-width:331px;
		box-sizing:border-box;
		background-size:contain;
	}
	
	div#contact a:last-child{
		width:200px;
		height:200px;
		line-height:1.5em;
		font-size:1.2em;
		text-align:center;
		margin:0 auto 40px auto;
		border-radius:50%;
		padding:100px 0 0 0;
		background-image:url('../img/contact.svg');
		background-size:60px auto;
		background-position:center 40px;
		background-repeat:no-repeat;
	}
	
		div#contact a:last-child span{
			display:none;
		}
		div#contact a:last-child br{
			display:inline;
		}
}

@media screen and (max-width:1000px){
	footer ul{
		max-width:800px;
		margin:60px auto 40px auto;
		overflow:hidden;
	}
}
@media screen and (max-width:800px){
	footer ul{
		max-width:500px;
		margin:60px auto 40px auto;
		overflow:hidden;
	}
	
		footer ul li{
			min-width:100px;
			text-align:left;
			float:none;
			margin:25px 30px;
			font-size:1.0em;
			position:relative;
		}
		
		footer ul li::before{
			content:'\03009';
			display:inline;
			width:auto;
			height:auto;
			background:none;
			margin:0;
			font-weight:bold;
		}
		
		
		div#footer_login a{
			float:left;
			margin:10px;
		}
}