@charset "UTF-8";
/*
 * CSS common.css
 */

/* ---------------------------------------
txt
--------------------------------------- */

.section{
	margin-bottom: 80px;
}
.sec_in{
	width: 1120px;
	margin: 0 auto;
	position: relative;
}
.sec_in._w1300{
	width: 1300px;
}
.sec_in._w1000{
	width: 1000px;
}
@media screen and (max-width: 1360px) {
	.sec_in._w1300{ width: 88%; }
}
@media screen and (max-width: 1200px) {
	.sec_in{ width: 88%; }
	.sec_in._w1000{ width: 88%; }
}
@media screen and (max-width: 999px) {
	.section{
		margin-bottom: 60px;
	}
}
@media screen and (max-width: 767px) {
	.section{
		margin-bottom: 40px;
	}
}



#mainv2{
	margin-top: 90px;
	position: relative;
	background: #f4f4f4;
}
#mainv2 .pagetitle{
	letter-spacing: 0.08em;
	color: #003985;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	width: 100%;
	height: 400px;
	position: relative;
	z-index: 2;
}
#mainv2 .pagetitle .en{
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
}
#mainv2 .pagetitle .jp{
	font-size: 16px;
	margin-left: 40px;
}
#mainv2 .pagetitle .no{
	position: absolute;
	top: 60%;
	left: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
}
#mainv2 #particles{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	z-index: 1;
}
@media screen and (max-width: 999px) {
	#mainv2 .pagetitle{
		height: 240px;
	}
	#mainv2 #particles{
		height: 240px;
	}
}
@media screen and (max-width: 767px) {
	#mainv2{
		margin-top: 70px;
	}
	#mainv2 .pagetitle{
		height: 260px;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
	}
	#mainv2 .pagetitle span{
		display: block;
	}
	#mainv2 .pagetitle .en{
		font-size: 24px;
	}
	#mainv2 .pagetitle .jp{
		font-size: 13px;
		margin-left: 0;
	}
	#mainv2 .pagetitle .no {
		font-size: 24px;
		top: 70%;
	}
	#mainv2 #particles{
		height: 140px;
	}
}


.btn_style1{
	letter-spacing: 0.08em;
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	color: #fff;
	text-decoration: none;
	display: block;
	width: 186px;
	padding: 12px 40px;
	box-sizing: border-box;
	position: relative;
	background: #003985;
}
.btn_style1._wh{
	color: #003985;
	background: #fff;
}
.btn_style1 span{
	position: relative;
	z-index: 1;
	display: inline-block;
}
.btn_style1 span:after{
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 100px;
	background: #fff;
}
.btn_style1._wh span:after{
	background: #003985;
}
.btn_style1 span:before{
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 100px;
	background: #0149AA;
	z-index: 1;
	width: 0;
	transition: 0.3s;
}
.btn_style1:hover span:before{
	width: 28px;
	-webkit-animation: linear btnstyle1 .6s forwards;
	animation: linear btnstyle1 .6s forwards;
}
.btn_style1:after{
	content: "";
	display: block;
	width: 0%;
	height: 100%;
	position: absolute;
	background: #002F6D;
	top: 0;
	right: 0;
	transition: 0.3s;
}
.btn_style1:hover:after{
	width: 100%;
	left: 0;
	right: auto;
}
@-webkit-keyframes btnstyle1 {
	0% { width: 0; }
	50% {
		width: 28px;
	}
	100% {
		right: -83px;
		left: auto;
		width: 0;
	}
}
@keyframes btnstyle1 {
	0% { width: 0; }
	50% {
		width: 28px;
	}
	100% {
		right: -83px;
		left: auto;
		width: 0;
	}
}










.title_style1{
	letter-spacing: 0.08em;
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	color: #003985;
	font-size: 38px;
	margin-bottom: 120px;
}
@media screen and (max-width: 999px) {
	.title_style1 {
		font-size: 30px;
		margin-bottom: 80px;
	}
}
@media screen and (max-width: 767px) {
	.title_style1 {
		font-size: 22px;
		margin-bottom: 30px;
	}
}

.title_style2{
	letter-spacing: 0.08em;
	font-size: 32px;
	margin-bottom: 80px;
	padding-bottom: 40px;
	position: relative;
}
.title_style2:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 1px;
	background: #003985;
}
.title_style2_in{
	font-size: 16px;
	margin-left: 38px;
	position: relative;
	top: -6px;
}
@media screen and (max-width: 999px) {
	.title_style2{
		font-size: 26px;
		margin-bottom: 40px;
		padding-bottom: 20px;
	}
}
@media screen and (max-width: 767px) {
	.title_style2{
		font-size: 22px;
	}
	.title_style2_in {
		font-size: 12px;
		margin-left: 20px;
		top: -4px;
	}
}

.title_style3{
	letter-spacing: 0.08em;
	color: #003985;
	font-size: 32px;
	margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
	.title_style3{
		font-size: 28px;
		margin-bottom: 40px;
	}
}
@media screen and (max-width: 999px) {
	.title_style3{
		font-size: 24px;
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 767px) {
	.title_style3{
		font-size: 18px;
		margin-bottom: 20px;
	}
}





.hover_border{}
.hover_border{
	position: relative;
	border: 1px solid transparent;
	transition: all .2s;
	cursor: pointer;
}
.hover_border::before,
.hover_border::after {
	position: absolute;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 1px solid transparent;
}
.hover_border::before {
	top: -1px;
	left: -1px;
}
.hover_border::after {
	bottom: -1px;
	right: -1px;
}
.hover_border:hover::before,
.hover_border:hover::after {
	width: 100%;
	height: 100%;
}
.hover_border:hover::before {
	border-bottom-color: #003985;
	border-left-color: #003985;
	transition: height .3s, width .3s .3s;
}
.hover_border:hover::after {
	border-top-color: #003985;
	border-right-color: #003985;
	transition: height .3s, width .3s .3s;
}
@media screen and (max-width: 767px) {
}






.interview_list li{
	color: #003985;
	position: relative;
	float: left;
	width: 22%;
	background: #fff;
	margin: 0 1.5%;
	box-sizing: border-box;
	padding-top: 100px;
}
.interview_list li .interview_number{
	font-family: 'Montserrat', sans-serif;
	color: #003985;
	position: absolute;
	line-height: 1;
	top: 21px;
	left: 10px;
	transform: rotate(90deg);
	padding-left: 40px;
}
.interview_list li .interview_number:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 35px;
	height: 1px;
	background: #003985;
}
.interview_list li .interview_bg{
	position: absolute;
	top: 30%;
	left: 8%;
}
.interview_list li .interview-btn{
	position: absolute;
	top: 20px;
	right: 0;
}
.interview_list li .interview_txt-job{
	font-size: 12px;
	margin-bottom: 30px;
}
.interview_list li .interview_txt-name{
	font-family: 'Montserrat', sans-serif;
	font-size: 40px;
	opacity: 20%;
	line-height: 1.2;
}
.interview_list li .interview-img{
	position: relative;
	z-index: 2;
}
.interview_list li .interview-img img{
	width: 100%;
}
.interview_list li.is-current{
	color: #fff;
	background: #003985;
}
.interview_list li.is-current .interview_number{
	color: #fff;
}
.interview_list li.is-current .interview_number:before{
	background: #fff;
}
.interview_list li:nth-child(1) .interview_number{
	top: 20px;
}
.interview_list li:nth-child(4) .interview_number{
	top: 22px;
}
@media screen and (max-width: 1360px) {
	.interview_list li .btn_style1{
		width: 13.6vw;
		padding: 0.8vw 3vw;
	}
	.interview_list li .btn_style1 span:after{
		left: 7.3vw;
		width: 2vw;
	}
}
@media screen and (max-width: 999px) {
	.interview_list li .btn_style1{
		width: 186px;
		padding: 12px 40px;
	}
	.interview_list li .btn_style1 span:after{
		left: 100px;
		width: 28px;
	}
}
@media screen and (max-width: 1360px) {
	.interview_list{
		margin-right: -2%;
	}
	.interview_list li{
		width: 23%;
		margin: 0 2% 0 0;
	}
	.interview_list li .interview_txt-name{
		font-size: 3vw;
	}
}
@media screen and (max-width: 999px) {
	.interview_list{
		width: 90%;
		max-width: 430px;
		margin: 0 auto;
	}
	.interview_list li{
		float: none;
		width: 100%;
		margin: 30px 0 0 0;
		/*padding-top: 100px;*/
	}
	.interview_list li .interview_txt-name{
		font-size: 48px;
	}
}
@media screen and (max-width: 767px) {
	.interview_list li .interview_txt-name{
		font-size: 8vw;
	}
}



/* ---------------------------------------
commonModule
--------------------------------------- */
.clearfix, .section, .incnt, .sec_in{
	zoom: 1;
}
.clearfix:after, .section:after, .incnt:after, .sec_in:after{
	display: block;
	content: "";
	clear: both;
}

.cnt_left {float: left; }
.cnt_right {float: right; }

._on { transition: 0.3s; }
._on:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
@media screen and (max-width: 767px) {
	._on{
		transition: none;
	}
}


/* display adjust */
.basehide, .middlehide, .tablethide, .sphide, .landhide, .porthide {
	display: block;
}
.baseblock, .tabletblock, .middleblock, .spblock, .landblock, .portblock {
	display: none;
}
@media screen and (max-width: 1300px) {
	.baseblock{display: block; }
	.basehide {display: none !important; }
}
@media screen and (max-width: 999px) {
	.tabletblock{display: block; }
	.tablethide {display: none !important; }
}
@media screen and (max-width: 767px) {
	.middleblock{display: block; }
	.middlehide {display: none !important; }
}
@media screen and (max-width: 639px) {
	.landblock{display: block; }
	.landhide {display: none !important; }
}
@media screen and (max-width: 479px) {
	.spblock{display: block; }
	.sphide {display: none !important; }
}
@media screen and (max-width: 400px) {
	.portblock{display: block; }
	.porthide {display: none !important; }
}