@charset "UTF-8";
/* CSS Document */


@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');

.sponly {
	display: none;
}
.spmask {
	display: block;
}



/*------------------------------
	contents
------------------------------*/
#contents {
}

/*------------------------------

------------------------------*/
/*------------------------------*/
@keyframes shake {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(5deg);
	}
	50% {
		transform: rotate(-5deg);
	}
	75% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/*------------------------------
	index
------------------------------*/
#index #kv {
	width: 100%;
	position: relative;
	margin-top: 80px;
	background: url("../../common/bg_kv.jpg") no-repeat center center;
	background-size: cover;
	background-color: #003391;
}
#index #kv h2 {
	text-align: center;
	padding: 84px 0 84px;
	font-size: 34px;
	font-weight: normal;
	color: #ffffff;

	font-family: 'Noto Sans JP', Open Sans;
}
/*------------------------------*/
#index #contents {
	background-image: url("../../common/bg_left.png"), url("../../common/bg_right.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
	position: relative;
}
/*------------------------------*/
#index #contents #readBox {
	padding: 90px 10px 120px;
	/*
	background-color: #ffffff;
	*/
}
#index #contents #readBox .title {
	color: #003391;
	font-size: 18px;
	line-height: 1.7;
	text-align: center;
	padding-bottom: 20px;
	font-weight: bold;
}
#index #contents #readBox p {
	font-size: 16px;
	color: #232323;
	line-height: 1.8;
	text-align: center;
}
/*------------------------------*/
#index #contents .list.left {
	max-width: 470px;
	margin: 0 auto;
	padding: 0 400px 100px 10px;
	position: relative;
	min-height: 420px;
}
#index #contents .list.left .title {
	position: relative;
	padding-right: 85px;
	color: #003391;
	font-size: 14px;
	padding-bottom: 20px;
	text-align: right;
	font-weight: bold;
}
#index #contents .list.left .title span {
	position: absolute;
	right: 0;
	top: -6px;
	color: #ffffff;
	padding: 5px 14px 4px;
	background-color: #003391;
	border: solid 1px #003391;
}
#index #contents .list.left .title span.white {
	color: #003391;
	background-color: #ffffff;
}
#index #contents .list.left h3 {
	font-size: 26px;
	line-height: 1.7;
	color: #003391;
	font-weight: normal;
	text-align: right;
	padding-bottom: 60px;
}
#index #contents .list.left .pic {
	position: absolute;
	right: 0;
	top: 0;
}
#index #contents .list.left .name {
	font-size: 12px;
	line-height: 1.3;
	padding-bottom: 14px;
	text-align: right;
}
#index #contents .list.left .name span {
	font-size: 20px;
	font-weight: bold;
	padding-right: 10px;
	border-right: solid 1px #232323;
}
#index #contents .list.left .job {
	font-size: 14px;
	line-height: 1.3;
	padding-bottom: 30px;
	text-align: right;
}
#index #contents .list.left .btn {
	width: 300px;
	margin: 0 0 0 auto;
	background-color: #003391;
	text-align: center;
	font-size: 12px;
	height: 40px;

	transition-duration: 0.3s;
}
#index #contents .list.left .btn a {
	border: solid 1px #003391;
	display: inline-block;
	width: 298px;
	color: #ffffff;
	padding: 12px 0 11px;
	text-decoration: none;
	font-size: 12px;
	background-color: #003391;
	outline: none;

	position: relative;
	z-index: 2;
	overflow: hidden;
}
#index #contents .list.left .btn a::before,
#index #contents .list.left .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
#index #contents .list.left .btn a,
#index #contents .list.left .btn a::before,
#index #contents .list.left .btn a::after {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#index #contents .list.left .btn a:hover {
	color: #003391;
}
#index #contents .list.left .btn a::after {
	top: 0;
	width: 100%;
	height: 100%;
	left: -100%;
}
#index #contents .list.left .btn a:hover::after {
	top: 0;
	left: 0;
	background-color: #ffffff;
}
/*------------------------------*/
#index #contents .list.right {
	max-width: 470px;
	margin: 0 auto;
	padding: 0 10px 100px 400px;
	position: relative;
	min-height: 420px;
}
#index #contents .list.right .title {
	position: relative;
	padding-left: 85px;
	color: #003391;
	font-size: 14px;
	padding-bottom: 20px;
	font-weight: bold;
}
#index #contents .list.right .title span {
	position: absolute;
	left: 0;
	top: -6px;
	color: #ffffff;
	padding: 5px 14px 4px;
	background-color: #003391;
	border: solid 1px #003391;
}
#index #contents .list.right .title span.white {
	color: #003391;
	background-color: #ffffff;
}
#index #contents .list.right h3 {
	font-size: 26px;
	line-height: 1.7;
	color: #003391;
	font-weight: normal;
	padding-bottom: 60px;
}
#index #contents .list.right .pic {
	position: absolute;
	left: 0;
	top: 0;
}
#index #contents .list.right .name {
	font-size: 12px;
	line-height: 1.3;
	padding-bottom: 14px;
}
#index #contents .list.right .name span {
	font-size: 20px;
	font-weight: bold;
	padding-right: 10px;
	border-right: solid 1px #232323;
}
#index #contents .list.right .job {
	font-size: 14px;
	line-height: 1.3;
	padding-bottom: 30px;
}
#index #contents .list.right .btn {
	width: 300px;
	margin: 0 auto 0 0;
	background-color: #003391;
	text-align: center;
	font-size: 12px;
	height: 40px;

	transition-duration: 0.3s;
}
#index #contents .list.right .btn a {
	border: solid 1px #003391;
	display: inline-block;
	width: 298px;
	color: #ffffff;
	padding: 12px 0 11px;
	text-decoration: none;
	font-size: 12px;
	background-color: #003391;
	outline: none;

	position: relative;
	z-index: 2;
	overflow: hidden;
}
#index #contents .list.right .btn a::before,
#index #contents .list.right .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
#index #contents .list.right .btn a,
#index #contents .list.right .btn a::before,
#index #contents .list.right .btn a::after {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#index #contents .list.right .btn a:hover {
	color: #003391;
}
#index #contents .list.right .btn a::after {
	top: 0;
	width: 100%;
	height: 100%;
	left: -100%;
}
#index #contents .list.right .btn a:hover::after {
	top: 0;
	left: 0;
	background-color: #ffffff;
}

/*------------------------------
	kv
------------------------------*/
#interview #kv {
	width: 100%;
	margin-top: 80px;
	height: 520px;
}
#interview #kv .inner {
	max-width: 1100px;
	margin: 0 auto;
	height: 520px;
	position: relative;
}
/*------------------------------*/
#interview #kv.no01 {
	background : url("../images/bg_01.jpg") no-repeat top center;
	background-size: cover;
}
#interview #kv.no02 {
	background : url("../images/bg_02.jpg") no-repeat top center;
	background-size: cover;
}
#interview #kv.no03 {
	background : url("../images/bg_03.jpg") no-repeat top center;
	background-size: cover;
}
#interview #kv.no04 {
	background : url("../images/bg_04.jpg") no-repeat top center;
	background-size: cover;
}
#interview #kv.no05 {
	background : url("../images/bg_05.jpg") no-repeat top center;
	background-size: cover;
}
#interview #kv.no06 {
	background : url("../images/bg_06.jpg") no-repeat top center;
	background-size: cover;
}
#interview #kv h2 {
	padding-top: 120px;
	line-height: 1.5;
	font-size: 36px;
	color: #ffffff;
	text-align: right;
	font-weight: normal;

	font-family: 'Noto Sans JP', sans-serif;
	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
}
#interview #kv .name {
	position: absolute;
	right: 0;
	bottom: 50px;
	color: #ffffff;
	text-align: right;
	line-height: 1.7;
	font-size: 14px;

	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
}
#interview #kv .name span {
	font-size: 18px;
}
#interview #kv .name .jobName {
	border: solid 1px #ffffff;
	width: 100px;
	text-align: center;
	padding: 6px 0 4px;
	font-size: 14px;
	margin: 0 0 14px auto;
	box-shadow: 0px 0px 26px 4px rgba(0,0,0,0.3), 0px 0px 26px 2px rgba(0,0,0,0.2) inset;
}
/*-------- 左向き用 ↓ ↓ ↓ -------*/
#interview #kv h2.left {
	padding-top: 120px;
	line-height: 1.5;
	font-size: 36px;
	color: #ffffff;
	text-align: left;
	font-weight: normal;

	font-family: 'Noto Sans JP', sans-serif;
	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
}
#interview #kv .name2 {
	position: absolute;
	left: 0;
	bottom: 50px;
	color: #ffffff;
	text-align: left;
	line-height: 1.7;
	font-size: 14px;

	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
}
#interview #kv .name2 span {
	font-size: 18px;
}
#interview #kv .name2 .jobName {
	border: solid 1px #ffffff;
	width: 100px;
	text-align: center;
	padding: 6px 0 4px;
	font-size: 14px;
	margin: 0 auto 14px 0;
	box-shadow: 0px 0px 26px 4px rgba(0,0,0,0.3), 0px 0px 26px 2px rgba(0,0,0,0.2) inset;
}
/*--------- ↑ ↑ ↑ -------------*/

/*------------------------------*/

/*------------------------------
	textBox
------------------------------*/
#interview .textBox {
	padding-top: 90px;
}
#interview .textBox.bgable {
	padding-top: 120px;
	background-image: url("../images/bg_l01.png"), url("../images/bg_r01.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
}
/*------------------------------*/
#interview .textBox .text {
	max-width: 850px;
	margin: 0 auto;
}
#interview .textBox .text h3 {
	padding-bottom: 14px;
	font-size: 22px;
	text-align: center;
	margin-bottom: 30px;
	border-bottom: solid 1px #003391;
}
#interview .textBox .text h3 span {
	color: #003391;
}
#interview .textBox .text p {
	padding-bottom: 90px;
	font-size: 16px;
	line-height: 1.9;
}
#interview .tableBox h3.schedule {
	text-align: center;
	padding: 20px 0 50px;
	font-size: 20px;
}
/*------------------------------*/
#interview .pic img {
	width: 100%;
}
/*------------------------------*/
#interview .tableBox {
	max-width: 850px;
	margin: 0 auto;
	padding: 90px 10px 100px;
}
#interview .tableBox table {
	width: 100%;
}
#interview .tableBox th {
	background-color: #003391;
	width: 125px;
	padding: 18px 0;
	vertical-align: middle;
	border: solid 1px #e1e1e1;
	border-bottom: solid 1px #ffffff;
	text-align: center;
	line-height: 1.3;
	font-size: 12px;
	color: #ffffff;
}
#interview .tableBox th .time {
	font-size: 16px;
	font-weight: normal;
}
#interview .tableBox th span {
	font-size: 25px;
	font-weight: normal;
}
#interview .tableBox td {
	background-color: #fffcc3;
	border: solid 1px #e1e1e1;
	font-size: 16px;
	line-height: 1.8;
	padding: 10px 20px;
	vertical-align: middle;
	text-align: left;
}
#interview .tableBox td .title {
	color: #003391;
	font-weight: bold;
}
/*------------------------------*/
#interview #messageArea {
	width: 1098px;
	margin: 0 auto;
	margin-bottom: 130px;
	border: solid 1px #bbbbbb;
}
#interview #messageArea h3 {
	padding: 22px 0 20px;
	text-align: center;
	color: #ffffff;
	font-size: 20px;
	background-color: #0b3582;
}
#interview #messageArea p {
	font-size: 16px;
	padding: 35px 20px;
	line-height: 1.8;
}

/*------------------------------
	listBox
------------------------------*/
#interview #listBox {
	border-top: dotted 1px #bbbbbb;
	background-image: url("../images/bg_l02.png"), url("../images/bg_r02.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, right bottom;
}
#interview #listBox h3 {
	padding-top: 80px;
	line-height: 1.9;
	font-size: 20px;
	text-align: center;
	margin-bottom: 50px;
}
#interview #listBox h3 span {
	border-bottom: solid 1px #003391;
}
/*------------------------------*/
#interview #listBox .list {
	max-width: 850px;
	margin: 0 auto;
	position: relative;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#interview #listBox .list a {
	text-decoration: none;
	color: #000000;
}
#interview #listBox .list .btn {
	padding-bottom: 50px;

	transition-duration: 0.3s;
}
#interview #listBox .list .btn .pic {
	text-align: center;
}
#interview #listBox .list .btn .pic img {
	vertical-align: bottom;
}
#interview #listBox .list .btn:hover {
	opacity: 0.7;
}
#interview #listBox .list .btn .title {
	font-size: 12px;
	color: #003391;
	padding-bottom: 10px;
}
#interview #listBox .list a .btn .title {
	color: #003391;
}
#interview #listBox .list .btn .name {
	font-size: 10px;
	padding-bottom: 12px;
}
#interview #listBox .list .btn .name span {
	font-size: 18px;
	font-weight: bold;
}
#interview #listBox .list .btn .job {
	font-size: 12px;
}

/*------------------------------
	returnBox
------------------------------*/
.returnBox {
	padding: 50px 0 100px;
}
.returnBox .btn {
	width: 300px;
	margin: 0 auto;
	text-align: center;

	background-color: #003391;
	height: 40px;
	transition-duration: 0.3s;
}
.returnBox .btn a {
	border: solid 1px #003391;
	display: inline-block;
	width: 298px;
	color: #ffffff;
	padding: 14px 0 14px;
	text-decoration: none;
	font-size: 12px;
	background-color: #003391;
	outline: none;

	position: relative;
	z-index: 2;
	overflow: hidden;
}
.returnBox .btn a::before,
.returnBox .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.returnBox .btn a,
.returnBox .btn a::before,
.returnBox .btn a::after {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.returnBox .btn a:hover {
	color: #003391;
}
.returnBox .btn a::after {
	top: 0;
	width: 100%;
	height: 100%;
	left: -100%;
}
.returnBox .btn a:hover::after {
	top: 0;
	left: 0;
	background-color: #ffffff;
}




/*------------------------------
	loading
------------------------------*/
#loadingWrap {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index:1000;
	overflow: hidden;
}
#loadingWrap img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	width: 50px;
}