@charset "UTF-8";

/*基本設定*/

body{
	margin: 0;
	background-color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
}

.bar{
	width: 100%;
	height: 10px;
	background-color: #191970;
}

.w-container{
	width: min(95%, 1166px);
	margin: auto;
	position:relative;
}

:root{
	--v-space: clamp(20px, 9vw, 30px);
}

img{
}

.imgtext{
	padding: var(--v-space) 0;
	background:aqua;
}

h1{
	margin: 0;
	font-size: clamp(14px,5vw,26px);

}

h2{
	margin: 0;
	/*position: relative;
  	padding: 0.25em 0;  
	font-weight: 200;*/
	font-weight: 100;

}

  
h2:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(18, 113, 21), transparent);
}
/*h3{
	margin: 0;
}*/


h3 {
	margin:40px 0 20px 8px;
	padding:5px 0px 5px 20px;
	font-size:18px;
	color:#444444;
	text-align:left;
	font-weight: 800;
	background: transparent;
	border-left: solid 5px #808080;


  }



h4{
	font-size:15px;
	margin:15px 0 10px 0;

}

h5{
	margin: 0;
}

h6{
	margin: 0;
}

p{
	margin: 0;
	padding:0 0 10px 5px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(10px,5vw,14px);
	min-height: 0vw;
	/*font-weight: 200;*/
	/*line-height: 1.4;*/
	line-height: 1.6em
	
}

.back_to_top{
  position: fixed;
  bottom: 10px; 
  right: 10px;
  padding: 6px 40px;
  z-index: 99999;
}

.red{
	color:red;
}


/*ヘッダー*/
.header{
	height: 80px;
 	background-color:#ffffff;
}
/*
.navbtn{
	cursor: pointer;
}
*/

.header-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.site{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;

}



/*メニュー*/

.menu-bar{
 	background-color:white;
}

.menu-bar-container{
    padding:0;
	display: flex;
	justify-content: space-between;
  	align-items: center;
  	justify-content: center;

}
/*	
.nav{
		margin:0px;
		letter-spacing: .2em;

}
*/
/*
.nav ul{
	list-style-position:outside;
	position:relative;
}
*/

/*
.nav a{
	display:block;
	padding:0px;
	color:#0a0a0a;
	font-weight:500;
	text-decoration:none;
}
*/

/*
.nav a:hover{
	background-color:#457c47;
	color:white;
	border-bottom: 2px solid #aacaab;
}
*/


/*
.nav li{
	height:35px;
	float:left;
	width: 133px;
	padding:0px;
	line-height: 30px;
	font-size: clamp(10px,5vw,14px);
	text-align:center;
	list-style-type: none;

}
*/


.navbtn{
	padding:0;
	outline:none;
	border:none;
	background:transparent;
	cursor:pointer;
	color:#aaaaaa;
	font-size:20px;
}

@media(min-width:768px){
	.navbtn{
		display: none;
	}
}

@media (max-width:767px){
	.nav{
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index:100;
		background-color:#4e483ae6;
		transition: trabsform 0.4s;
	}
	
	.open .navbtn{
		z-index:110;
	}	
	
	.open .nav{
		transform: translate(-100%,0);	
	}
	
	.open body{
		position:fixed;
		overflow: hidden;
	}
	
	.navbtn .fa-bars{
		display: revert;
	}
	
	.open .navbtn .fa-bars{
		display: none;
	}
	
	.navbtn .fa-times{
		display: none;
	}
	
	.open .navbtn .fa-times{
		display: revert;
	}

	.nav ul{
		display:flex;
		flex-direction: column;
		list-style-type: none;
		list-style-position:outside;
		justify-content: center;
		align-items: center;
		height:100%;
		gap: 40px;
		color:#ffffff;
	}
	
	.nav a{
	color:#ffffff;
	text-decoration:none;
}

}	

@media(min-width:768px){

.nav{
		margin:0px;

}



	.nav ul{
		display: flex;
		gap 20px;
		color: #707070;
	}
	
	.nav ul li{
	height:35px;
	float:left;
	width: 80px;
	padding:0px;
	line-height: 30px;
	font-size: clamp(9px,5vw,13px);
	text-align:center;
	list-style-type: none;
	}
	
	.nav a{
	display:block;
	padding:0px;
	color:#0a0a0a;
	font-weight:500;
	text-decoration:none;

  }
  
  .nav li a:hover {
  }

  .hover-forcus{
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover-forcus::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #26285c;
	transition: all 0.5s ease 0s;
}
.hover-forcus:hover {
	cursor: pointer;
}
.hover-forcus:hover::after {
	width: 100%;
}
}
	
/*ヒーロー*/
.hero{
	height:200px;
	background-image: url(img/hero.jpg);
	background-position: center;
	background-size: cover;
}

.hero2{
	height:200px;
	background-image: url(img/hero2.JPG);
	background-position: center;
	background-size: cover;
}

.hero3{
	height:200px;
	background-image: url(img/hero3.JPG);
	background-position: center;
	background-size: cover;
}

.hero4{
	height:200px;
	background-image: url(img/hero4.jpg);
	background-position: center;
	background-size: cover;
}

.hero5{
	height:200px;
	background-image: url(img/hero5.JPG);
	background-position: center;
	background-size: cover;
}

.hero6{
	height:200px;
	background-image: url(img/hero6.JPG);
	background-position: center;
	background-size: cover;
}

.hero-container{
	display: grid;
	justify-items: center;
	align-content: center;
	height: 100%;
	margin: 3px 0 0 0;

	/*メッシュ*/
	content: '';
	/*display: block;
	position: absolute;
	top: 0;
	right: 0;*/
	width: 100%;
	/*height: 100vh;*/
	background-color: rgba(255,255,255,0.6);
	background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%);
	background-size: 3px 3px;
	background-position: 0 0, 6px 6px;
	
	
	
}

.hero,.hero2,.hero3,.hero4,.hero5,.hero6 h1{
	margin-bottom: 15px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(14px,5vw,26px);
	min-height: 0vw;
	/*font-weight: 400;*/
	line-height: 1.3;
	text-align: center;
}



.hero h2{
	margin-bottom: 0px;
}

.hero,.hero,.hero2,.hero3,.hero4,.hero5,.hero6 p{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(8px,5vw,13px);
	min-height: 0vw;
	/*font-weight: 400;*/
	line-height: 1.3;
	text-align: center;

	}

	

.information{
	padding: clamp(15px, 5vw, 30px) 0;
	/*display:block;*/
}

.information p{
	margin-top: 1em;
	margin-bottom: 2em;
	font-size: clamp(10px,5vw,14px);

}

.information-container{
	display: flex;
	flex-direction: column;
	gap: clamp(45px, 5vw, 80px);
	/*display:block;*/

}

.information-h2{
	display:block;
	/*content:'';*/
	/*font-weight: 100;*/

}

.information p img{
margin:20px 0 20px 10px;
width: min(90%, 400px);
}


.image-ogawaphoto img{
	float: left;
	padding: clamp(10px, 5vw, 30px);
	width: min(30%, 180px);
	height:auto;
}


.area-container{
	/*width: min(95%, 900px);*/
	margin: 3em 2em 3em 2em;
	display:grid;
	gap:27px;
}

@media (min-width:768px){
	.area-container{
		grid-template-columns: repeat(3,1fr);
	}
}

.area{
	padding:15px 15px;
	border-radius:20px;
	background-color:#ffffff;
	border: solid #aaaaaa thin;
	float:none;
	text-align:center;
	width:250px;
	height:500px;
			
}
.area-container{
	/*width: min(95%, 1166px);*/
	margin: auto;
	padding:3em;
}


.image-area img{
	padding: clamp(10px, 5vw, 30px);
	width: min(90%, 180px);
	

}

.area p{
	text-align:left;
	display:block;
	/*width:250px;*/
	height:165px;
}

.area-name h3 {
	width:200px;
	padding:0.7em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #e9eef0;/*背景色*/
  border-left: solid 7px #6b8ec7;/*左線（実線 太さ 色）*/
  font-wait:100;
  text-align:center;	
  display:inline-block;
  margin:10px;


  }

  
/*-----*/
.area-section{
	padding:var(--v-space) 0;
	text-align:center;
}

.area{
	padding:10px clamp(5px,9vw,25px);
	margin:10px;
	float:left;
	display:block;
}

.area-img figure{
	margin:0px;
}

.research-area{
	display:block;
	align:center;
	padding:10px;
}

.area-img{
	display:inline-block;
	/*float:inherit;*/
	padding:0;


}

.area-name{
	font-size:15px;
}


/*-----*/

.area-btn{
margin : 0 auto;
text-align:center;
}

.area-btn a{
		text-decoration:none;
		display:block;
		width:260px;
		padding:10px;
		box-sizing: border-box;
		border-radius:4px;
		background-color:#9fc9b6;
		color:#ffffff;
		font-size:13px;
		text-align: center;
		/*text-shadow:0 0 6px #00000052;*/
		font-wait:200;

}


.research-text{
 		display:block;
		float:left;

	
}

.research-text img{
	display:block;
	float:inherit;
	float:right;
	padding:30px 7px;
	width: min(50%,200px );
	height:auto;

}

.research-img2{
		width: min(90%,500px );
	height:auto;

}

.research-text p{
}

.research-text-li{
		font-size: clamp(10px,5vw,14px);
		margin:0 0 10px 0;
}

.research-text-li li{
		margin:30px 0 5px 0;

}


.clearLeft { 
clear: left; 
}

@media (min-width: 768px){
	.information-container{
		flex-direction: row;
		/*align-items:center;*/
	}
	.information-container > .information-container1{
		flex:3;

	}
	.information-container > .information-container2{
		flex:1;
	}
}

.information-banner-table{
	display: block;
	width:200px;
	border:0px;
	text-align:center;
}


.heading-decoration + p{
	margin-top: 0.5em;
	margin-bottom:2em;
	color:#707070;
	font-size:18px;
}

.members{
	padding:var(--v-space) 0;
	text-align:center;
}

.member{
	padding:15px clamp(5px,9vw,30px);
	margin:0;
	float:left;
	display:block;
}

.member-img figure{
	margin:0px;
}

.member-photo{
	display:block;
	align:center;
	padding:10px;
}

.member-img{
	display:block;
	float:inherit;
	padding:3px 10px;


}

.member-name{
	float:left;
	padding:3px 10px;
	width:150px;

}


.software-list{
	margin:20px 0 0 0px;
	line-height:160%;
}

/*
.oneday{
	padding:var(--v-space) 0;
	text-align:center;
}
*/

.oneday-at{
	padding:15px clamp(5px,9vw,30px);
	margin:0;
	float:left;
	display:block;
}


.oneday-time{
		display:block;
		align:center;
		float:left;
		width:100px;
}

.oneday-img{
		display:block;
		width:220px;
		float:inherit;


}

.oneday-text{
	display:block;
	align:left;
	float:inherit;
	width:min(90%,400px);
	padding:5px;

}

.oneday-last{
 height:200px
}

.oneday-last img {
 width: auto; 
 max-height: 100%; 
}

.info-research-list li{
	font-size: clamp(10px,5vw,14px);
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 95%;
  height: 90%;
  border: 0;
}
.embed-responsive-16by9 {
  /*padding-bottom: 56.25%;*/
    padding-bottom: 60%;


}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}






/*フッター*/
.footer{
	background-color: #EBEBEB;
}

.footer-container{
	/*width: 100%;*/
	background-color: #EBEBEB;
}

.footer-logo{
padding-top:70px;
padding-bottom:10px;

}

.footer-menu-ul{
	display: flex;
	flex-wrap: wrap;
    padding:0;
	list-style-type: none;
	list-style-position:outside;
	font-size: clamp(10px,5vw,12px);
	gap: 15px;
}

.footer-menu-ul a{
	text-decoration:none;
	color:#0a0a0a;

}

.footer-menu-ul a:hover{
	text-decoration: underline;
}


.footer-copy{
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	font-size: clamp(6px,6vw,10px);

}

.footer-bar{
		background-color: #AEAEAE;
}