@charset "UTF-8";
/* CSS Document */
/*--------------
toppage-button
---------------*/	
.box{
	position: relative;
	overflow: hidden;
	width:	100%;
	height: 200px;
	margin: 0 0 40px 0;
	padding: 0 0 20% 0;
	box-sizing: border-box;
		}	


.box>div{
	position: absolute;
	top: 0;
	width: 48%;
	height: 200px;
	text-align: center;
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
	-js-display: flex;	
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items: center;
	box-align:center;
	align-items:center;
		}
		
.box > div >  p{
	width: 100%;
	text-align: center;
	font-size: 33px;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.05em;
	}
	
	
.size33,.size28{
	font-weight: bold;
	}
	
.size28{
	letter-spacing: 0;
	}
	
.box span:first-child{
	margin: 0;
	}

.box span{
		margin: 2% 0 0 0;
		}
	
.box a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
.box p img{
	max-width: 100%;
	}
	

.box:nth-child(2n+2){
	border-top-left-radius: 48px;
	}
	
.box:nth-child(2n+1) div{
 	right: 0;
	border-top-left-radius: 48px;
	}

.box:nth-child(2n+2) div{
	left:0;
	border-top-left-radius: 48px;
	}
		
		
	[id^="bt"]:before{
		content:'';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 60%;
		height: 100%;
		transition: 0.4s ease-in;
		-webkit-transition: 0.4s ease-in;
		z-index: 0;
		}
		
	#bt01:before,#bt03:before{
		width: 52%;
		margin:0 0 0 48%;
		}
			
	.box:hover[id^="bt"]:before{
		-webkit-transform:scale(1.1,1.1); 
		transform:scale(1.1,1.1); 		
		}

		
	#bt01:before{
		background:url(images/img_01.jpg) center right no-repeat;
		background-size: cover;
		}
		
	#bt02:before{
		background:url(images/img_02.jpg) center left no-repeat;
		background-size: cover;
		}
		
	#bt03:before{
		background:url(images/img_03.jpg) center right no-repeat;
		background-size: cover;
		}
	

@media screen and (max-width: 999px){
	.box>p{
		font-size: 20px;
		}
		
}
	
.box p span{
	display: block;
	text-align: center;
	font-size: 16px;
	}	




/*--------------
topsection
---------------*/	

#lead{
	padding: 40px 0;
	text-align: center;
	font-weight: bold;
	border-bottom: 2px solid #43b149;
	font-size: 18px;
	color: #464646;
	}
	
#top{
	text-align: center;
	}
	
	
#top>h2{
	padding: 0 2%;
	margin: 0 auto 2% auto;
	display: inline-block;
	background: #fff;
	font-size: 22px;
	border: 1px solid #004ea2;
	color: #004ea2;
	}
	
/*--------------
profile
---------------*/	
#prof_row2{
	margin: 60px 0 0 0;
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	-js-display: flex;
	-webkit-align-items: center; /* Safari */
  	align-items:         center;	
	}

#prof_row2 img{
	max-width: 100%;
	}
	
#prof_row2 div.profile-blue,#prof_row2 div.profile-green{
	position: relative;
	width: 41.5%;
	}
	
p.pos{
	position: absolute;
	top: -20px;
	left: -20px;
	display: inline-block;
	padding: 0 15px;
	background: #fff;
	font-size: 24px;
	}
	
.profile-blue .pos{
	border: 1px solid #004ea2;
	color: #004ea2;
	}	
	
.profile-green .pos{
	border: 1px solid #43b149;
	color: #43b149;
	}	
	
#prof_row2 .cross{
 margin: 0 4%;
 width: 10%;
	}
	
.cross span{
	display: block;
	width: 100%;
	height: 2px;
	background: #918a8b;
	}
	
.cross span:first-child{
	-webkit-transform:rotateY(45deg);
	transform:rotate(45deg);
	}
	
.cross span:last-child{
	-webkit-transform:rotateY(-45deg);
	transform:rotate(-45deg);
	}
	
.name{
	padding: 3% 5%;
	border-bottom-left-radius: 34px;
	}	
	

@media screen and (min-width: 950px){	
#prof_row2 .name div{
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	-js-display: flex;
	-webkit-align-items: center; /* Safari */
  	align-items:         center;	
	}
	
#prof_row2 .bt{
	margin: 0 0 0 8%;
	text-align: left;
	}
}
	
#prof_row2 .name div p:first-child{
	font-size: 36px;
	}
	
@media screen and (max-width: 949px){
	#prof_row2 .bt{
		width: 60%;
		}
	}	
	
#prof_row2 .bt{
	padding: 7px 10px 7px 5px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.08em;
	cursor: pointer;
	text-align: center;
	transition: 0.4s ease;
	-webkit-transition: 0.4s ease;
	box-sizing:border-box;
	}
	
.profile-blue .name{
	background: #004ea2;
	color: #fff;
	}
	
.profile-green .name{
	background: #43b149;
	color: #fff;
	}
	
.profile-orange .name{
	background: #d2801e;
	color: #fff;
	}
	
.profile-blue .bt{
	background: #fff;
	color: #004ea2;
	border: 1px solid #004ea2;
	}
	
.profile-blue .bt:hover{
	color: #fff;
	background: #004ea2;
	border: 1px solid #fff;
	}
	
.profile-green .bt{
	background: #fff;
	color: #43b149;
	border: 1px solid #43b149;
	}
	
.profile-green .bt:hover{
	color: #fff;
	background: #43b149;
	border: 1px solid #fff;
	}
	
.profile-orange .bt{
	background: #fff;
	color:  #d2801e;
	border: 1px solid #d2801e;
	}
	
.profile-orange .bt:hover{
	background: #d2801e;
	color: #fff;
	border: 1px solid #fff;
	}

article{
	padding: 10% 0 4% 0;
	text-align: center;
	}
	
article p span.note{
	color: #918a8b;
	display: block;
	font-size: 14px;
	}


article p.capt{
	text-align: center;
	color: #464646;
	margin: 0 0 0 0;
	}
	
	
article a:link,article a:visited{
	color: #fff;
	}

/*-------------
profile modal
-------------*/	
.modal{
	display:none; 
	width: 100%;
	height: 100%;
	}
	
.modalBody{
	position: fixed;
	z-index:1000;
	width:800px;
	text-align: center;
	left:0;
	right: 0;
	top:0;
	bottom: 0;
	margin: auto;
	height: 400px;
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	-js-display: flex;
	}
	
.modalbg{
	position: fixed;	
	top: 0;
	left:0;
	z-index:999;
	height:100%;
	width:100%;
	background:rgba(255,255,255,0.9);
	}

.modalBody .Lside{
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	width: 35%;
	}
	
.modalBody .Lside img{
	box-sizing: border-box;
	max-width: 100%;
	}
	
.modalBody.profile-blue .Lside img{
	border: 1px solid #004ea2;
	}
	
.modalBody.profile-green .Lside img{
	border: 1px solid #43b149;
	}
	
.profileContent{
	position: relative;
	margin: 5% 0 0 28%;
	width: 60%;
	}

.text{
	width: 100%;
	height: 350px;
	padding: 8% 8% 8% 15%;
	overflow: scroll;
	background: #fff;
	}

.mclose{
	box-sizing: border-box;
	position: absolute;
	top: 1px;
	right:-16px;
	width: 110px;
	padding: 5px 0;
	text-align: center;
	color: #fff;
	font-size: 18px;
	transition: 0.4s ease;
	-webkit-transition: 0.4s ease;
	cursor: pointer;
	z-index: 999;
	}	
	
.profile-blue .text{
	border: 1px solid #004ea2;
	}
	
.profile-green .text{
	border: 1px solid #43b149;
	}	
	
.profile-orange .text{
	border: 1px solid #d2801e;
	}
	
.profileContent h3{
	margin: 5% 0 2% 0;
	font-size: 18px;
	font-weight: bold;
	}
	

.Lside .name{
	padding: 5%;
	}	
	
.Lside .name p:nth-child(2){
	margin: 8px 0;
	font-size: 36px;
	}	
	
.profile-blue h3{
	color: #004ea2;
	border-bottom: 1px solid #004ea2;	
	}
	
.profile-orange h3{
	color: #d2801e;
	border-bottom: 1px solid #d2801e;	
	}
	
.profile-green h3{
	color: #43b149;
	border-bottom: 1px solid #43b149;
	}

.profile-blue .mclose{
	background: #004ea2;	
	border: 1px solid #004ea2;
	}
	
.profile-blue .mclose:hover{
	color: #004ea2;
	border: 1px solid #004ea2;	
	background: #fff;
	}

.profile-green .mclose{
	background:#43b149;
	border: 1px solid #43b149;
	}
	
.profile-green .mclose:hover{
	color: #43b149;
	border: 1px solid #43b149;
	background: #fff;
	}	

.profile-orange .mclose{
	background: #d2801e;
	border: 1px solid  #d2801e;
	}
	
.profile-orange .mclose:hover{
	color: #d2801e;
	background: #fff;
	}
	
.outline{
	font-size: 18px;
	line-height: 1.8em;
	}
	
/*-------------
article
-------------*/	
	
article h3{
	margin: 0 0 50px 0;
	padding: 30px 6.25% 20px 6.25%;
	border-top: 2px solid #004ea2;
	border-bottom: 2px solid #004ea2;
	font-size: 32px;
	color: #004ea2;
	font-weight: bold;
	}

article>div{
	width: 100%;
	padding: 0 3% 3% 3%;
	display: table;
/*	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	-js-display: flex;	*/
	}	
	
article img{
	margin: 2% auto 5% auto;
	}
	
p[class^="name"]{
	display: table-cell;
	vertical-align: top;
	width: 15%;
	color: #fff;
	text-align: center;
	font-weight: bold;
	}
	

.name_blue span,.name_green span,.name_orange span{
	margin: 5px 0 0 0;
	display: inline-block;
	padding: 2px;
	text-align: center;
	width: 70px;
	}

.name_blue span{
	background: #004ea2;
	}
	
.name_green span{
	background:#43b149;
	}

.name_orange span{
	background:#d2801e;
	}
	
article p:nth-child(2){
	display: table-cell;
	vertical-align: middle;
	width: 84%;
	padding: 0 8% 0 0;
	}

h3 img{
	width: 10%;
	vertical-align: middle;
	margin: -20px 0 0 0;
	 }
	 
h3 span{
	display: inline-block;
	vertical-align: middle;
	width: 86%;
	font-weight:bold;
	text-align: center;
		}
		
#next{
	display: block;
	text-align: center;
	}
	
/*--------------
footNav
---------------*/	
#footNav ul{
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	-js-display: flex;	
	}
	
#footNav ul li{
	position: relative;
	overflow: hidden;
	border-top-left-radius: 33px;
	}
	
#footNav ul li img{
	
	transition: 0.4s ease;
	-webkit-transition: 0.4s ease;
	}
	
#footNav ul li:hover img{
	-webkit-transform:scale(1.1,1.1); 
	transform:scale(1.1,1.1); 	
	}
	
#footNav ul li a{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
#footNav>p{
	margin: 10% 0 2% 0;
	text-align: center;
	font-size: 24px;
	color: #004ea2;	
	}	
	
#footNav li p{
	padding: 5% 0;
	text-align: center;
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.08em;
	}

#footNav p span{
	display: block;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	}

#footNav p.green{
	background: #43b149;
	}
	
#footNav p.lightblue{
	background: #009fa3;
	}