@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');

.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 #talkBox {
	width: 1100px;
	margin: 0 auto;
}
#index #contents #talkBox .listR {
	position: relative;
	padding-left: 650px;
	min-height: 350px;
	padding-bottom: 150px;
}
#index #contents #talkBox .listL {
	position: relative;
	padding-right: 650px;
	min-height: 350px;
	padding-bottom: 150px;
}
#index #contents #talkBox .listR h3,
#index #contents #talkBox .listL h3 {
	color: #003391;
	font-size: 28px;
	line-height: 1.2;
	font-weight: normal;
	padding-top: 20px;
	padding-bottom: 4px;
	border-bottom: dotted 1px #003391;
}
#index #contents #talkBox .listR h3 span,
#index #contents #talkBox .listL h3 span {
	font-size: 14px;
	font-weight: bold;
}
#index #contents #talkBox .listR .pic {
	position: absolute;
	left: 0;
	top: 0;
}
#index #contents #talkBox .listL .pic {
	position: absolute;
	right: 0;
	top: 0;
}
#index #contents #talkBox .listR p,
#index #contents #talkBox .listL p {
	font-size: 16px;
	line-height: 1.8;
	padding: 20px 0 50px;
}
#index #contents #talkBox .listR .btn,
#index #contents #talkBox .listL .btn {
	width: 300px;
	background-color: #003391;
	text-align: center;
	font-size: 12px;
	
	transition-duration: 0.3s;
}
#index #contents #talkBox .listR .btn a,
#index #contents #talkBox .listL .btn a {
	display: block;
	padding: 14px 0 12px;
	color: #ffffff;
	text-decoration: none;
}


#index #contents #talkBox .listR .btn,
#index #contents #talkBox .listL .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 #talkBox .listR .btn a,
#index #contents #talkBox .listL .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 #talkBox .listR .btn a::before,
#index #contents #talkBox .listL .btn a::before,
#index #contents #talkBox .listR .btn a::after,
#index #contents #talkBox .listL .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
#index #contents #talkBox .listR .btn a,
#index #contents #talkBox .listL .btn a,
#index #contents #talkBox .listR .btn a::before,
#index #contents #talkBox .listL .btn a::before,
#index #contents #talkBox .listR .btn a::after,
#index #contents #talkBox .listL .btn a::after {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#index #contents #talkBox .listR .btn a:hover,
#index #contents #talkBox .listL .btn a:hover {
	color: #003391;
}
#index #contents #talkBox .listR .btn a::after,
#index #contents #talkBox .listL .btn a::after {
	top: 0;
	width: 100%;
	height: 100%;
	left: -100%;
}
#index #contents #talkBox .listR .btn a:hover::after,
#index #contents #talkBox .listL .btn a:hover::after {
	top: 0;
	left: 0;
	background-color: #ffffff;
}

/*------------------------------
	talk
------------------------------*/
#talk #kv {
	width: 100%;
	margin-top: 80px;
}
#talk #kv .pic img {
	width: 100%;
}
/*------------------------------*/
#talk #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;
}
/*------------------------------*/
#talk .h2Box {
	padding: 50px 0;
}
#talk .h2Box h2 {
	font-size: 34px;
	text-align: center;
	line-height: 1.4;
	font-weight: normal;
}
#talk .h2Box h2 span {
	font-size: 14px;
	color: #003391;
	font-weight: bold;
}
/*------------------------------*/
#talk #personArea {
	background-color: #a0a0a0;
	padding: 30px 10px 40px;
	margin-bottom: 100px;
}
#talk #personBox {
	width: 1140px;
	margin: 0 auto;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center; 
	justify-content: center;
}	
#talk #personBox .list {
	width: calc(25% - 1px);
	width: -webkit-calc(25% - 1px);
	border-right: dotted 1px #ffffff;
}
#talk #personBox .list.end {
	width: calc(25% - 1px);
	width: -webkit-calc(25% - 1px);
	width: 25%;
	border-right: none;
}
#talk #personBox .list .pic {
	text-align: center;
	padding-bottom: 30px;
}
#talk #personBox .list .dataBox {
	margin: 0 20px;
	position: relative;
}
#talk #personBox .list .dataBox .jobS {
	padding: 12px 0 10px;
	color: #003391;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	background-color: #ffffff;
}
#talk #personBox .list .dataBox .jobZ {
	padding: 12px 0 10px;
	color: #232323;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	background-color: #ffffff;
}
#talk #personBox .list .dataBox .name {
	font-size: 12px;
	color: #ffffff;
	line-height: 1.7;
	text-align: center;
	padding: 16px 0;
}
#talk #personBox .list .dataBox .name span {
	font-size: 14px;
	font-weight: bold;
}
#talk #personBox .list .dataBox .status {
	color: #ffffff;
	font-size: 12px;
	padding-bottom: 14px;
}
#talk #personBox .list p {
	padding: 20px 0;
	margin: 0 20px;
	font-size: 14px;
	line-height: 1.7;
	color: #ffffff;
	border-top: solid 1px #ffffff;
}
/*------------------------------*/
#talk .textBox {
	max-width: 870px;
	margin: 0 auto;
	padding-bottom: 60px
}
#talk .textBox h3 {
	font-size: 30px;
	color: #003391;
	line-height: 1.3;
	padding-bottom: 12px;
	margin-bottom: 90px;
	border-bottom: solid 1px #003391;
	text-align: center;
	font-weight: bold;
}
#talk .textBox p {
	padding-bottom: 30px;
	padding-left: 55px;
	font-size: 16px;
	line-height: 1.8;
	position: relative;
}
#talk .textBox p span.sogo {
	position: absolute;
	left: 0;
	top: 0;
	color: #003391;
	font-weight: bold;
}
#talk .textBox p span.zimu {
	position: absolute;
	left: 0;
	top: 0;
	color: #232323;
	font-weight: bold;
}
#talk .textBox .kome {
	padding: 30px 0;
	font-size: 14px;
	padding-left: 3em;
	text-indent: -3em;
	line-height: 1.8;
	position: relative;
}
/*------------------------------*/
#talk .picArea {
	width: 100%;
	padding-bottom: 90px;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center; 
	justify-content: center;
}
#talk .picArea.end {
	padding-bottom: 0px;
}
#talk .picArea .pic {
	width: 50%;
}
#talk .picArea .pic img {
	width: 100%;
}

/*------------------------------
	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;
}