body #serach
{
    background-color: rgb(0,231,255);
}
    
body
{
	margin:0;
	text-align: left;
	color: #000000;
	font-size:150%;
	font-weight: 100;
	font-family: "Century Gothic", "YuGothic", "游ゴシック体", "Yu Gothic", "游ゴシック","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


a
{
	color:#000000;
    font-style:normal;
    text-decoration:none;
}
a:link 
{
	color:#000000;
    font-style:normal;
    text-decoration:none;
}
a:visited 
{
	color:#000000;
    text-decoration:none;
}
a:hover 
{
  	color:#000000;
    font-style:normal;
    text-decoration:none;
}
a:active 
{
	color:#000000;
    text-decoration:none;
}




#navi
{
	margin:0 auto;
	width 			:100%;
	display			:flex;
	-js-display		:flex;
	flex-wrap		:nowrap;

	padding			:0;
	border-top:1px solid #dddddd;
	border-bottom:1px solid #dddddd;
}

#navi li
{
	text-align	:center;
	margin		:0;
	list-style	:none;
	width		:25%;

	border-right:1px solid #dddddd;
}

#navi li a
{
	padding-top	:40px;
	height		:70px;
	display:block;
}
#navi li a:hover
{
	background-color:#f2f2f2;
}

#topics
{

	padding-left:5%;
	width:90%;
	display:block;
	float: left;
	margin:50px 0 50px 0;
}

#topics h2
{
	padding-left:30px;
	font-size:200%;
}




#contact
{

	padding-left:5%;
	width:90%;
	display:block;
	float: left;
	margin:50px 0 50px 0;
}

#contact h2
{
	padding-left:30px;
	font-size:200%;
}






#main img
{  
	display:block;
	float: left;
}  

.section
{
	width:1000px;
	margin: 0 auto; 
    text-align: center;  


}

h1
{
	margin: 100px 0 100px 0;
	font-size: 300%;
	line-height: 1;
}


h2
{
	padding: 20px 0 20px 0;
	font-size: 200%;
}

p
{
	font-size: 100%;
}

.clear 
{
	clear:both;
}

.logo
{
	width:208;
	margin: 0 auto;  

}


.table1
{

	border-top : 1px solid #dddddd;
	width:100%;
	font-weight: normal;
	font-size: 100%;
	margin: 50px 0 50px 0;
	text-align : left;
}

.table1 th
{
	padding: 0px; 
	border-bottom : 1px solid #dddddd;
	width : 20%;
}
.table1 th.year
{

	width : 10%;
}
.table1 td.subtext
{
	font-size:70%;
	width : 15%;
}

.table1 td
{
	padding: 30px 0 30px 0 ;
	border-bottom : 1px solid #dddddd;

}
.table1 .area
{
	width : 20%;
}


#contents
{
	margin:auto;
	text-align: center;
	display		:block;
	
}



.projects
{

	width 			:90%;
	display			:flex;
	-js-display		:flex;
	flex-wrap		:wrap;
	justify-content	:space-between;
	margin-bottom	:100px;
	margin:0 auto;
	padding			:0 0 50px 0;
}

.projectsItem
{
	width		:30%;
	margin-bottom: 50px;

}
.projectsItem img
{
	width		:100%;
	margin-bottom: 20px;

}

.projectsItem p
{
	text-align: left;
	margin:0 0 0 0;
}
.projectsItem p.subtext
{
	text-align: left;
	margin:0;
	font-size: 70%;
}

.visual
{
	width 			:90%;

	
	margin:100px auto;
	margin-bottom	:100px;
}


.visual img
{
	width		:100%;
}

.visual p
{
	width 			:90%;
	margin:0 auto;
	text-align: left;
	margin-bottom: 50px;
}

















.bg_gray
{
	background-color:f7f7f7;
}

.sectioin
{
	/*text-align: center; */
	width 			:100%;
}


.member
{
	padding:20px 0 0 0;
	text-align: center;
}


.members
{
	width 			:90%;
	-js-display		:flex;
	display			:flex;
	
	flex-wrap		:wrap;
	justify-content	:center;
	margin-bottom	:100px;
	margin:0 auto;
	padding			:20px 0 50px 0;
}

.memberItem
{
	text-align	:center;
	width		:20%;
	font-size	:90%;
	line-height	:1.2;
	margin-bottom	:50px;
}
.memberItem p
{
	font-size: 150%;
	margin:10px 0 0 0 ;
}
.memberItem p.subtext
{
	font-size: 80%;
}

.memberItem img
{  
	width		:80%;
    border-radius: 50%;         
    -webkit-border-radius: 50%;     
    -moz-border-radius: 50%;  
}

.subtext
{  
	color: #aaa;
} 





.btn 
{
	display : block;
	
	margin-bottom:100px;
}
.btn a
{
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
	color: #000000;
	font-size: 21px;
	background: #ffffff;
	padding: 20px 0px 20px 0px;
	border: solid #000000 1px;
	text-decoration: none;
	padding: 50px;
	text-align:center;
	width:60%;
	margin:0 auto;
	display:block;
	float:center;
	
}
.btn a:hover 
{
	font-size: 21px;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
}










@media (min-width: 1600px) 
{
  #contents{width:1600px;}
}
@media (max-width: 1000px) 
{
	.projectsItem{width		:48%;}
	.memberItem{width		:33%;}
}
@media (max-width: 640px) 
{
	.projectsItem{width		:100%;}
	.memberItem{width		:50%;}
}