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

body{
	background-color:#fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.4em;
	font-size: 100%;
	color: #222;	
}
main {min-height: 600px;}
.wrapper{background-color:#fff;}

:root {
	--main-color: #fff;
	--sub-color: #4b8058;
	--sub2-color: #8CBD3A;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}
address {font-style: normal;}
/*-------------------- 共通 --------------------*/
sup {font-size: 75.5%; vertical-align: top; position: relative; top: -0.3em;}
sub {font-size: 75.5%; vertical-align: bottom; position: relative; top: 0.3em;}

.text_c {text-align: center;}
.text_R {text-align: right;}
.text_s {font-size: 0.9em;}

.textcolor_1 {color: var(--main-color)!important;}
.textcolor_2 {color: var(--sub-color)!important;} 

.mtb10 {margin: 10px;}
.mb20 {margin-bottom: 20px;}
.mb50 {margin-bottom: 50px;}
.mb100 {margin-bottom: 100px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt50 {margin-top: 50px;}
.ptb20 {padding:20px 0;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 30px;}
.pt50 {padding-top: 50px;}
.pb50 {padding-bottom: 50px;}
.pb80 {padding-bottom: 80px;}
.pb100 {padding-bottom: 100px;}
.pt1em {padding-top: 1em;}
.pdL1em {padding-left: 1em;}

.wrapper {
	width: 100%;
	min-width: 320px;
	padding: 0;
	text-align: left;}
	
.b_to_top{
	clear: both;
	position: fixed;
	right: 50px;
	bottom: 50px;
	z-index: +1;
	}
.b_to_top.none{
    opacity: 0;
    z-index: -1;
	}

.fl_R {float: right;}
.fl_L {float: left;}
.clearfix {clear: both;}

.red {color: #f00;}
.white {color: #fff;}

.btn {text-align: center;}
.btn a, .btn span {
	display: inline-block; 
	padding: 0.5em 1em; 
	text-decoration: none; 
	border-radius: 8px; 
	color: var(--main-color);
	background-color: #fff;
}
.btn a:hover, .btn span:hover {background-color: var(--sub-color); color: #fff; transition-duration: 0.2s;}

/mainimg fade*-------------------- Top page --------------------*/
/*--------　ヘッダー　--------*/
header {background-color: var(--main-color);}
	/*-moz-linear-gradient(left,var(--main-color) 50%, rgb(217, 247, 197) 55%,rgb(188, 231, 159) 60%,rgb(150, 212, 109) 65%, rgb(140, 180, 58) 70%,var(--sub-color) 80%, rgb(140, 180, 58)) ;}*/
/*--------　ヘッダー　--------*/
#top {height: 120px; width: 100vw; background-color: var(--main-color);}
#top h1 {float: left;}
#top h1 img {margin-left:20%; margin-top: 30px;}
.toplink {float: right; padding-top: 40px; padding-right: 8%; vertical-align: middle;}
.toplink div {display: inline-block; vertical-align: middle;}
.toplink div img {vertical-align: middle;}
.snsimg {margin: 0 8px;}
.engbtn {font-size: 0.9em; margin-right: 10px;}
.engbtn a {font-weight: 900;}
.engbtn .textcolor_2:hover {color: #fff!important;}

.menufix {position: fixed; top: 0; z-index: 10;}

/*----- gnav -----*/
.gnav {
	width: 100%;
	background-color: var(--sub-color);
}
.gnav ul{
	list-style:none;
	max-width: 900px;
	margin: 0 auto;
	overflow: auto;
}
.gnav ul li {
	background-color: var(--sub-color);
	float: left;
	width: 16.5%;
	text-align: center;	
	text-decoration: none;
}

.gnav ul li a {
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 18px 0;
	text-decoration: none;
	color: #fff;
  }
	.gnav ul li a::after {
	position: absolute;
	bottom: 10px;
	left: 25%;
	content: '';
	width: 50%;
	height: 5px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: left top;
	transition-duration: 0.3s;
	z-index: 10;
  }
  .gnav ul li a:hover,.gnav_sp ul li a:hover {
	background: var(--sub2-color);
	opacity: 1;
  }
  .gnav ul li a:hover::after {transform: scale(1, 1);}

  .now {position: relative;}

  .now::after {
	display: inline-block;
	content: "";
	position: absolute;
	bottom: 0px;
	left: 42%;
	width: 0;
	height: 0;
	border-right: 12px solid transparent;
	border-bottom: 10px solid #fff;
	border-left: 12px solid transparent;}

/*-----　メインビジュアル　-----*/
.mainvisual {margin-top: 190px; position: relative;}
.catch {
	width: 100%;
	box-sizing: border-box;
	padding: 40px 6%;
	position: absolute;
	bottom: 5px;
	z-index: 5;
	color: #f0f0f0;
	background-color:rgba(0,0,0,0.5);}
.catch h2 {
	font-size: 20px;
	text-align: center;
	padding-bottom: 14px;
	border-bottom: solid 1px #f0f0f0;
	}
.catch p {padding-top: 14px;}

.slick-list li {text-align: center; background-color: #E2E2E2;}
.mainimg video {width: 100%; height: auto; max-height: 450px;}
.mainimg img {display: inline-block; width: 100%; height: auto; max-height: 450px; max-width: 700px;}

/*----- スライダー -----*/
.fade { margin: 0 auto; width: 100%;}
.slick-dots li.slick-active button:before {color: var(--main-color);}
.slick-dots li button:before {font-size: 12px;}
.slick-prev {left: 10px;}
.slick-next {right: 10px;}
.slick-prev:before,.slick-next:before {color: #fff; display: none;}

/*-------　お知らせ　-------*/
.topcont {width: 900px; margin: 0 auto; padding: 50px 0;}
.topcont::after {content: ""; display: block; clear: both;} 
.topcont h2 {position: relative; top: -10px; line-height: 1.6em;}

.news {min-height: 450px;}
.news table {width: 100%;}
.news table tr td {width: 49%;}
.news table tr td:nth-child(2) {text-align: right;}
.news h2 {line-height: 2.5em;}
.news h3 {color: rgb(51, 51, 51); font-weight: bold; margin-top: 50px; margin-bottom: 5px; margin-left: 20px}
.news div {border: solid 3px var(--sub-color); height: 400px; overflow: scroll;}
.news div ul {
	list-style: none; 
	padding: 1em;}
.news div ul li {
	padding-top: 1em;
	border-bottom: solid 1px #ccc; 
	font-size: 0.9em; 
	/* white-space: nowrap; */
	overflow: hidden;
	text-overflow: ellipsis;}
	
.news div ul li a {	color: #505050; text-decoration: none;}
.news div ul li a:hover {opacity: 0.7;}

.date {display: inline-block; width: 6em;}
.cate {display: inline-block; border-radius: 6px; color: #fff; padding: 0 0.5em; margin: 2px 1em;}
.cateA {background-color: #30A3B3;}
.cateB {background-color: #CC6B9C;}
.cateC {background-color: #555555;}

.newsall {
	display: inline-block;
	padding: 0 2em 0 3em;
	background-color: var(--sub-color);
	border-radius: 12px;
	font-size: 0.8em;
	color: #fff;
	text-decoration: none;
	position: relative;
}
.newsall span::before {
	display: inline-block;
	content: "";
	position: absolute;
	top: 5px;
	left: 22px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid #fff;}


.twitter {float: right; width: 38%; padding-left: 2%;}
.tw_inner {
	border: solid 1px var(--sub-color);
	overflow: scroll;
	position:relative;
	width:100%;
	height:300px;
}

.tw_inner iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*----- フッター -----*/
footer{
	clear: both;
	background: #ccc;
	text-align: center;
	color: rgb(70, 70, 70);
}
.footernav ul {display: inline-block; list-style: none; margin: 30px auto;}
.footernav ul li {display: inline-block;}
.footernav ul li a {
	display: inline-block;
	position: relative;
	padding: 0.5em 2em;
	margin: 5px;
	color: rgb(70, 70, 70);
	font-size: 0.8em;
	text-decoration: none;
}
.footernav ul li a::after {
	position: absolute;
	bottom: 3px;
	left: 10%;
	content: '';
	width: 80%;
	height: 2px;
	background: var(--sub-color);
	transform: scale(0, 1);
	transform-origin: left top;
	transition-duration: 0.3s;
	z-index: 10;
  }
  .footernav ul li a:hover::after {transform: scale(1, 1);}

.footeradress {margin-bottom: 20px;}
.footeradress span {font-size: small; padding-right: 0.5em; display: inline-block; white-space: nowrap;}
.cr {font-size: small; color: rgb(120, 120, 120);}

/*-------------------- sub page --------------------*/
.subpage {width: 900px; margin: 0px auto; padding: 10px 0 30px 0;}
.subpage h2 {
	font-size: 1.4em;
	line-height: 3em;
	padding-left: 0.5em;
	padding-top: 20px;
}
.titleline {
	margin: 0; 
	position: relative; 
	top: -5px; 
	height: 3px;
	background: -moz-linear-gradient(left,rgb(133, 202, 86), rgb(140, 180, 58) 5%,var(--sub-color) 15%, rgb(140, 180, 58));
	background: -webkit-linear-gradient(left,rgb(133, 202, 86), rgb(140, 180, 58) 5%,var(--sub-color) 15%, rgb(140, 180, 58));
	background: linear-gradient(to right,rgb(133, 202, 86), rgb(140, 180, 58) 5%,var(--sub-color) 15%, rgb(140, 180, 58));
	border: none;
}
.subpage h3 {font-size: 1.25em;}

.sentence {width: 780px; margin: 1em auto; line-height: 1.6em;}
.sentence p {text-indent: 1em;}

.sentence_fig::after {content: ""; display: block; clear: both;}
.sentence_fig h3 {color: var(--sub-color); font-weight: bold; font-size: 1.2em; padding-bottom: 0.5em;}
.sentence_fig p {width: auto; text-indent: 1em; line-height: 1.6em;}
.sentence_fig img {padding: 0 5px;}
.sentence_fig .list {box-sizing: border-box; padding-left: 1em;}
.sentence_fig .list ul li {padding: 0.25em;}

.con2 {width: 100%; padding: 30px 0;}
.con2::after {content: ""; display: block; clear: both;}
.con {float: left; width: 45%; margin: 0 2.25%;}

.senmovie {padding-left: 8px;}
.contents_inner {padding-top: 100px; margin-top:-100px;}
.contents_inner1 {padding-top: 180px; margin-top:-100px;}

.results,.member,.research,.energy,.recruit,.map {width: 800px; margin: 30px auto;}

/*-------------------- サブナビ --------------------*/
.submenu {width:100%; max-width: 900px; margin: auto; background-color: #fff;}
.submenu h2 {
	font-size: 1.4em;
	line-height: 3em;
	padding-left: 0.5em;
	padding-top: 22px;}

.subnav {padding-left: 20px; margin: auto; display: inline-block;}
.subnav div {
	display: inline-block; 
	position: relative;
	box-sizing: border-box;
	top: 20px;  
	padding: 0 10px;
	margin: 10px 0;
	height: 34px;
}
.subnav a {
	display: inline-block; 
	position: absolute;
	text-align: center; 
	border-radius: 5px; 
	color:var(--main-color); 
	text-decoration: none; 
	box-shadow:0 3px 8px rgba(0,0,0,0.3); 
	top: 0px;
	padding: 0.2em 18px;
	white-space: nowrap
}
.subnav a:hover {
	background-color: var(--main-color); 
	color: #fff; 
	transition-duration: 0.2s; 
	top: 2px;
	box-shadow:0 1px 5px rgba(0,0,0,0.2);
}
.subnav .now {
	color: #fff; 
	background-color:var(--main-color); 
	top: 2px; 
	box-shadow:0 1px 5px rgba(0,0,0,0.2);
}
.subnav .now::after {content: none;}

.subtitle {display: inline-block;}
.submanupage {padding: 250px 0 100px 0;}



/*----- メンバー -----*/
.member h3 {padding-bottom: 10px; color: var(--sub-color); font-weight: bold;}
.member h4 {font-size: 1.2em; font-weight: bold;}
.member .con2 {padding: 10px 0;}

.PI {width: 100%; margin: 0 auto;}

.photoPI {display: inline-block; width: 300px; margin: 0 auto; padding:0 15px; vertical-align: top; text-align: center;}
.photoPI img {width: 140px;}
.profilePI {max-width: 330px; width: 100%; display: inline-block;}
.profilePI::after {content: ""; clear: both;}
.profilePI table {width: 100%;}
.profilePI table tr td {width: 50%; text-align: center;}
.profilePI .job {font-size: 1.0em; padding-top: 0.5em; padding-bottom: 0.5em;}

.photoSt {margin-right: 8px; display: inline-block; width: 20%; text-align: center; vertical-align: top;}
.photoSt img {width: 70px;}
.profileSt {display: inline-block; width: 75%; margin: 0 auto;}
.profileSt h4 {font-size: 1.1em;}
.profileSt .job {font-size: 0.9em;}

.Rm {display: inline-block; color: var(--sub-color) ;text-decoration: none; border-bottom: 2px solid var(--sub-color); padding-top: 3px; font-weight: bold; font-size: 0.9em;}
.Rm::after {content: " ...";}

.member .con {padding-bottom: 50px;}
.member .con:nth-child(odd) {clear: both;}

.membermail {clear: both; font-size: 0.9em;}
.membermail span {font-size: 0.9em; font-weight: bold;}
.membermail span::after {content: ": ";}
.membermail img{width: 1em; vertical-align: middle;}

.gs {display: inline-block; position: relative; margin: 14px 0px 8px 0; padding: 0.6em 0.6em 0.6em 1.2em; border-radius: 25px; color: #fff; background-color:var(--sub-color); text-decoration: none; font-weight: bold; font-size: 0.9em;}
.gs:hover {background-color: var(--main-color); transition-duration: 0.3s;}
.gs span::before {
	display: inline-block;
	content: "";
	position: absolute;
	top: 14px;
	left: 8px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid #fff;}

/*--- 詳細 ---*/
.member_mo {float: left; width:50%; min-height: auto;}
.member_mo h3 {color: var(--sub-color); font-weight: bold; margin-top: 30px; margin-left: 30px; margin-bottom: 10px;}
/*.member_mo h3 {position: relative; padding: 0 0 10px 2.2em; color: #222; clear: both;}*/
.member_mo h3 .job {font-weight: normal; font-size: 0.9em; padding-left: 0em;}
.member_mo h3 img {position: absolute; top: -5px; left: 0;}
.member_mo h4 {clear: both; line-height: 2.5em; color: var(--sub-color); padding-top: 5px; margin-left: 30px;}
.member_mo p {margin-left: 40px;margin-right: 30px;}
.member_mo .photoPI {width: 450px; margin: 0 auto; padding: 0px; vertical-align: top; text-align: center;}
.member_mo .photoPI img {width: 425px;}

.member_mo .profilePI {max-width: 550px; width: 100%; padding-bottom: 50px; text-align: left;}
.member_mo .profilePI::before {content: ""; display: block; clear: both;}
.member_mo .profilePI dl::after {content: ""; display: block; clear: both;}
.member_mo .profilePI dl dt1 {clear: both; float: left; width: 130px; text-align: left; font-size: 1em; line-height: 26px; padding-right: 1em;}
.member_mo .profilePI dl dt2 {clear: both; float: left; width: 130px; text-align: right; font-size: 1em; line-height: 26px; padding-right: 1em;}
.member_mo .profilePI dl dd {float: left; width: 100%; max-width: 400px; font-size: 1em; padding:0;}

.member_mo .membermail {font-size: 1em; padding-top: 10px;}



/*----- アクセス -----*/
.map div {padding: 0 0 30px 0;}
.map p {font-size: 1.2em; font-weight: bold; padding: 0.5em 0;}
.map a {color: var(--sub-color); word-wrap: break-word;}

/*--------------------レスポンシブ設定 PC--------------------*/

@media screen and (min-width:1500px) {
	.br-pc{display: block;}
	.br-sp{display: none;}
	.gnav {display: block;}
	.gnav_sp {display: none;}
	.toplink {display: inline-block;}

	.topcont,.gnav ul,.subpage,.resultsmenu  {width: 1100px; max-width:1200px;}
	.sentence,.sentence_fig,.research,.member,.energy,.results,.recruit,.map {width: 1000px;}
	.submenu {max-width: 1100px;}

	.energy .sentence_fig img {width: 360px;}
	.results div,.sentence_fig img {width: 850px;}
	.md_field a {width: 100%;}
	.membermail img{width: 1em;}
	.photoPI {padding: 0 30px;}
	.photoSt {padding: 0px;}
	}

@media screen and (min-width:850px) {
	.br-pc{display: block;}
	.br-sp{display: none;}
	.gnav {display: block;}
	.gnav_sp {display: none;}
	.toplink {display: inline-block;}
	}

/*--------------------レスポンシブ設定 SP--------------------*/
@media screen and (max-width:849px) {
	.br-pc{display: none;}
	.br-sp{display: block;}
	.gnav {display: none;}
	.gnav_sp {display: block;}
 	.toplink {display: none;}

/*---- トップページ -----*/
	header{width: 100%; height: auto;}
	#top {float: left; height: 100px; width: 100vw; min-width: 350px;}
	#top h1 img {margin-left: 10%; margin-top: 26px; width: 240px;}
	.mainvisual{margin-top: 110px;}

	#pull {float: right;}
	#pull img {width: 40px; margin: 32px 30px 0px 0px}
	.sp_cont {display: none; clear: both; background-color: var(--sub-color);}
	.sp_cont ul {list-style: none;}
	.sp_cont ul li {
		display: inline-block; 
		width: 49%; 
		line-height: 2.8em;
		margin: 0.3em 0;
		text-align: center;
		border-right: solid 1px #eee;
	}
	.sp_cont ul li:nth-child(even) {border-right: none;}

/*--SNS系ボタン--*/
	.sp_cont ul li:last-child {width: 98%; border-right: none;}
	.sp_cont ul li:last-child a {width: 100%;}
 	.toplink_sp {margin-top: 20px;}
	.toplink_sp div {display: inline-block; margin: 0 15px;}

	.engbtn a {display: inline-block; box-sizing: border-box; color: var(--sub-color); padding: 0em 2em;}
	.snsimg a {line-height: 36px;}
	.snsimg a:hover {background-color: var(--sub-color);}
	.snsimg a img {vertical-align: bottom;}
/*----*/

	.sp_cont ul li a {display: inline-block; width: 70%; text-decoration: none; color: #fff; }

	.menuline {clear: both; margin: 0; border: none; background-color: var(--sub-color); height: 10px;}

	.mainvisual {clear: both; background-color: #fefefe;}

	.catch {
		width: 100%;
		box-sizing: border-box;
		padding: 36px;
		position: relative;
		top: 0px;
		background-color: rgba(0,0,0,0.6);

	}


	.topcont {width: 95%;}
	.news,.twitter { 
		width: 100%;
		box-sizing: border-box;
		padding: 10px 20px;
		margin: 0 auto;
	}
	.news {min-height: 400px;}
	.tw_inner {height: auto;}

	.footer-inner{
		text-align: center;
		padding: 0.5em 0;
	}
	.footernav ul li a {
		margin: 5px 0px;
	}

/*---- サブページ -----*/

.subpage {width: 90%; margin: 0 auto; padding: 50px 0 30px 0;}
.subpage h2 {padding-left: 0em;}
.sentence {width: 100%;}
.sentence_fig {width: 100%;}
.sentence_fig img {max-width: 100%;}
.sentence_fig .fl_R {float: none; text-align: center; padding-bottom: 1em; text-indent: 0;}

.submanupage {padding: 210px 0 100px 0;}
.subtitle {display: block;}
.submenu {min-width: 350px;}
.submenu h2 {padding-top: 0px;}
.resultspage {padding: 200px 0 100px 0;}
.subnav {padding-left: 0px;}
.subnav div {
	top: -10px;
	height: 35px;
}
.subnav a {padding: 0.4em 10px;}

.con {float: none; width: 90%; max-width: 480px; margin: 0 auto; margin-bottom: 30px;}

.b_to_top {right: 0; bottom: 100px;}
/*----- 研究内容 -----*/
.md_field a {width: 100%;}
.md_field ul li {width: 100%;}
.sanko {padding-left: 0em;}
.sanko div {margin-left: 1em; padding-right: 1em;}
.btnene1 {width: 145px;}
.btnene2 {width: 80px;}
.btnene3 {width: 120px;}
.energy .fl_L {width: 100%;}
.energy .fl_R {width: 100%;}

.btnbio1 {width: 120px;}
.btnbio2 {width: 120px;}
.btnbio3 {width: 100px;}

/*----- メンバー 研究業績 学生募集 アクセス -----*/
.member,.results,.recruit,.research,.energy,.recruitimg div h2,.map {width: 100%;}

.researchimg img {width: 100%;}

.member h3 .stu {padding: 0;}
.member .con {width: 100%;}
.photoPI {display: block; text-align: center; padding: 18px 0;}
.photoPI img {margin: 0;}
.profilePI {margin: 0 auto; display: block; text-align: left;}
.photoSt {padding: 0px;}

.member_mo .profilePI dl dt1 {text-align: left; line-height: 1em; padding-top: 5px;}
.member_mo .profilePI dl dt2 {text-align: left; line-height: 1em; padding-top: 5px;}
.member_mo .profilePI dl dd {padding:0 0 0.6em 0;}
.Rm {margin-left: 0px;}


.btnresult1{width: 95px;}
.btnresult2{width: 60px;}
.btnresult3{width: 85px;}
.btnresult4{width: 100px;}
.senmovie {padding-left: 0px;}

.recruitimg {padding-top: 110px;}

}

@media print{
	header {display: none;}
	.mainvisual {margin-top: 0;}
	.subpage {padding: 0 0 30px 0;}
  }