@charset "utf-8";
/* CSS Document */
/*------背景------------------------------------------------------------------------------*/
html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#fff;/*背景色*/
}

#wrap{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

/*
canvas{ 
	display: block; 
	vertical-align: bottom; 
} 
#particles-js{ 
	position:absolute; 
	width: 100%; 
	height: 100%; 
	background-color: #ffffff; 
	background-image: url(""); 
	background-repeat: repeat-y;
	background-size: cover; 
	background-position: 50% 50%; } 
.count-particles{ 
	background: #000022; 
	position: absolute; 
	top: 48px; left: 0; 
	width: 80px; 
	color: #13E8E9; 
	font-size: .8em; 
	text-align: left; 
	text-indent: 4px; 
	line-height: 14px; 
	padding-bottom: 2px; 
	font-family: Helvetica, Arial, sans-serif; 
	font-weight: bold; 
} 
*/
/*------背景ここまで------------------------------------------------------------------------------*/


/*------全体設定------------------------------------------------------------------------------*/

html {
	height:100%;
}
*{
	box-sizing:border-box;
}
body {
	width:100%;
	height:auto;
	font-style: normal;
	font-weight: 600;
	/*color: #363636;*/
	color: #4c4c4c;
	font-size:  1.12vw;/*20px*/
	font-family: YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

body,p,h1,h2,h3,ul,li{
	padding:0; margin:0;
}
h2{
	font-weight:bold;
}
li{ list-style:none;}
a{
	text-decoration:none;
	color: #28292b;
}

/*------全体設定ここまで---------------------------------------------------------------------*/


/*------header----------------------------------------------------------------------------*/
header{
	width: 100%;
	position: relative;
}
.logo{
	width: 20%;
	position: absolute;
	top: 0;
	left: 2%;
  	margin-top:  1.12vw;/*20px;*/
}
.navbar {
	position: absolute;
	top: 0;
	left: 40%;
  	margin-top:  1.5vw;/*20px;*/
}
.navbar ul {
  display: flex;
  width: 100%;
}
.navbar ul li {
  margin-left: 5%;
  margin-right: 5%;
}
.nav-item a {
  padding: 1.12vw;/*20px;*/
  font-size: 0.952vw;/*17px;*/
  color: #fff;
  font-weight: 500;
}
.nav-item {
  /* アニメーション速度を指定 */
  transition: 0.3s;
  /* hover前後の回転角度の調整 */
  transform: rotate(0);
}
.nav-item:hover {
  /* アニメーション速度を指定 */
  transition: 0.3s;
  /* hover前後の回転角度の調整 */
  transform: rotate(360deg);
}
.header_res{
	display: none;
}
@media screen and (max-width: 959px) {
	.nav{
		display: none!important;
	}
	.header_res{
		display: block;
	}
	.logo{
		width: 50%;
		top: 10px;
	}
	.hamburger{
		display : block;
  		position: fixed;
  		z-index : 3;
 		right : 32px;
  		top   : 15px;
 		width : 42px;
  		height: 42px;
  		cursor: pointer;
  		text-align: center;
  
	}
	.hamburger span {
  		display : block;
  		position: absolute;
  		width   : 30px;
  		height  : 2px ;
  		left    : 6px;
  		background : #fff;
  		-webkit-transition: 0.2s all;
  		-moz-transition   : 0.2s all;
  		transition        : 0.2s all;
	}
	.hamburger span:nth-child(1) {
  		top: 10px;
	}	
	.hamburger span:nth-child(2) {
  		top: 20px;
	}
	.hamburger span:nth-child(3) {
  		top: 30px;
	}

	/* ナビ開いてる時のボタン */

	.hamburger.active span:nth-child(1) {
  		top : 16px;
  		left: 6px;
  		width: 24px;
    	background : #fff;
  		-webkit-transform: rotate(-45deg);
  		-moz-transform   : rotate(-45deg);
  		transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2) {
  		left: 60%;
  		opacity: 0;
  		-webkit-animation: active-btn17-bar02 .8s forwards;
  		animation: active-hamburger-bar02 .8s forwards;
	}
	@-webkit-keyframes active-hamburger-bar02 {
  		100% {
   	 		height: 0;
  		}
	}
	@keyframes active-hamburger-bar02 {
  		100% {
    		height: 0;
  		}
	}
	.hamburger.active span:nth-child(3) {
  		top: 16px;
  		width: 24px;
  		background : #fff;
  		-webkit-transform: rotate(45deg);
  		-moz-transform   : rotate(45deg);
  		transform        : rotate(45deg);
	}


	.hamburger::after {
  		position: absolute;
		top: 50%;
  		left: 50%;
  		display: block;
  		content: '';
  		width: 52px;
  		height: 52px;
  		margin: -32px 0 0 -32px;
  		border-radius: 50%;
  		border: 2px solid rgba(0, 0, 0, 0);
  		transition: all .75s;
	}
	.hamburger.active::after {
  		border: 2px solid #fff;
		}

	nav.globalMenuSp {
  		position: fixed;
  		z-index : 2;
  		top  : 0;
  		left : 0;
  		color: #fff;
  		background: rgba(0,0,0,0.7);
  		text-align: center;
  		width: 100%;
  		display: none;
  		/*transition: opacity .6s ease, display .6s ease;*/
	}

	nav.globalMenuSp ul {
  		margin: 0 auto;
  		padding: 0;
  		width: 100%;
	}

	nav.globalMenuSp ul li {
  		list-style-type: none;
  		padding: 0;
  		width: 100%;
  		transition: .4s all;
	}
	nav.globalMenuSp ul li:last-child {
  		padding-bottom: 0;
	}	
	nav.globalMenuSp ul li:hover{
  		background :#ddd;
	}

	nav.globalMenuSp ul li a {
  		display: block;
		font-size: 3em;
  		color: #fff;
  		padding: 2.2em 0;
	}	

	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
  		display: block;

	}
	.logo_res{
		width: 50%;
		position: absolute;
 		left : 10px;
  		top  : 15px;
	}
}
/*------New TechnologyPromotion Lab　アニメ　--------------------------------------------------------------------*/
.blur{
	animation-name:blurAnime;
	animation-duration:4s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
		filter: blur(10px);
		transform: scale(1.02);
}

  to {
		filter: blur(0);
		transform: scale(1);
}
}

.lab_text{
	margin-left: 54.877vw;/*980px;*/
	margin-top: 27.998vw;/*500px;*/
	color: #fff;
	font-size: 4.2vw;/*75px;*/
	font-family: "遊ゴシック", "Century Gothic", sans-serif;
	position: absolute;
	top: 0;
}
/*------headerレスポンシブ--------------------------------------------------------------------*/
.header_video_res{
	display: none;
}
@media screen and (max-width: 959px) {
.header_video_res{
	display: block;
}	
.header_video{
	display: none;
}
.lab_text{
	margin-top: 80vw;/*500px;*/
	font-size: 6vw;
}
}


/*------headerここまで--------------------------------------------------------------------*/

/*------main----------------------------------------------------------------------------*/

 /*-------------目的------------------------*/
#purpose{
	width: 65%;
	margin: 0 auto;
	padding-top: 10vw;/*200px;*/
	padding-bottom: 5.6vw;/*100px;*/
	height: auto;
}
.mokuteki{
	position: relative;
}
.mokudeki_t{ 
	position: absolute;
	top: 20%;
	left: 0;
	font-size: 2.8vw;/*50px;*/
	color: #39c;
	letter-spacing : 3.5em;
}
.p_img{
	width: 80%;
	margin: 0 auto;
	margin-top: 100px;
}
.purpose_text{
	font-size: 1.2vw;/*1.2em;20px*/
	line-height: 1.68vw;/*30px;*/
	margin-top: 30px;
}
/*------目的レスポンシブ--------------------------------*/
.purpose-img_res{
	display: none;
}
@media screen and (max-width: 959px) {
#fukidashi {
	display: none;
}
.p_img{
	display: none;
}
.purpose-img_res{
	display: block;
	margin-top: 100px;
}
.purpose{
	width: 80%;
	}
#purpose{
	width: 80%;
	margin-top: 50px;
	margin-bottom: 100px;
}
.mokudeki_t{ 
	font-size: 7vw;
}
.purpose_text{
	font-size: 3vw;/*1.2em;20px*/
	line-height: 4vw;
}
}
/*------目的レスポンシブここまで--------------------------------*/

/*-------------目的ここまで------------------------*/

/*-------------製品------------------------*/
#home_seihin{
	width: 65%;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 50px;
	height: auto;
}
.seihinsyoukai{
	position: relative;
}
.seihin_t{ 
	position: absolute;
	top: 25%;
	left: 0;
	font-size: 2.24vw;/*40px;*/
	color: #39c;
	letter-spacing : 1.0em;
}
.p_text{
	line-height: 1.68vw;/*30px;*/
	margin-bottom: 100px;
	margin-top: 1.68vw;/*30px;*/
}
.seihinmatome{
	display: flex;
    justify-content:space-around;
	text-align: center;
	margin-bottom: 2vw;
}
.seihinmatome2{
	width: 70%;
	margin: 0 auto;
	display: flex;
    justify-content:space-around;
	text-align: center;
	margin-bottom: 2vw;
}
/*-------------製品紹介　アニメ------------------------*/
.img_anime{
  width: 20vw;/*500px;*/
  overflow: hidden;
}
.img_anime img{
  width: 100%;
  cursor: pointer;
  border-radius: 50% 50% 50% 50%;
  transition-duration: 0.3s;
}
.img_anime img:hover{
  border-radius: 0% 0%;
  transition-duration: 0.3s;
}
/*-------------詳しくはこちら　アニメ------------------------*/
.gnavi{
   /*display: flex;*/
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    text-align: center;
    list-style: none;
	padding: 50px 20px;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/
.gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
  color:#0481A2;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 40%;
    /*線の形状*/
    width: 20%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*-------------製品紹介レスポンシブ------------------------*/
@media screen and (max-width: 959px) {
.seihin_logo{
	width: 80%;	
	}
#home_seihin{
	width: 80%;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
	height: auto;
}
.seihinsyoukai{
	position: relative;
}
.seihin_t{ 
	position: absolute;
	top: 15%;
	left: 0;
	font-size: 7vw;/*40px;*/
	color: #39c;
	letter-spacing : 1.0em;
}
.p_text{
	font-size: 3vw;
	line-height: 4vw;
	margin-bottom: 1.68vw;/*30px;*/
}
.img_anime{
  width: 40vw;/*500px;*/
  overflow: hidden;
}
.gnavi li a{
	font-size: 3vw;
}
.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 35%;
    /*線の形状*/
    width: 30%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}
.rpt600{
}
}
/*-------------製品紹介レスポンシブ------------------------*/
/*-------------製品ここまで------------------------*/

 /*-------------サービス---------------------------*/
#service{
	width: 65%;
	margin: 0 auto;
	padding-top: 10vw;
	padding-bottom: 5.6vw;/*100px;*/
	height: auto;
}
.service{
	position: relative;
}
.service_t{ 
	position: absolute;
	top: 25%;
	left: 0;
	font-size: 2.8vw;/*50px;*/
	color: #39c;
	letter-spacing : 0.5em;
}
.s_text{
	font-size: 1.12vw;/*1.2em;20px*/
	line-height: 1.68vw;/*30px;*/
	margin-top: 30px;
}
.service_f{
	margin-top: 5.6vw;/*100px;*/
	display: flex;
	justify-content: center;
	justify-content: space-between;
}

.home-service-img1,
.home-service-img2,
.home-service-img3,
.home-service-img4{
	width: 90%;
	height: auto;
}


/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.s_box{
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
 /*-------------サービスここまで------------------------*/
/*------サービスレスポンシブ--------------------------------*/
.service_f_res{
	display: none;
}
@media screen and (max-width: 959px) {
.service_t{
	font-size: 7vw;
	}
	.s_text{
	font-size: 3vw;/*1.2em;20px*/
	line-height: 4vw;/*30px;*/
	}
#service{
	width: 85%;
	}
.service_e{
	width: 65%;
	}
.service_f{
	display: none;
	}
.service_f_res{
	display: block;
	margin-top:50px;
}
.service_res1{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.service_res2{
	width: 80%;
	margin: 0 auto;
	margin-top: 2.8vw;/*50px;*/
	display: flex;
	justify-content: space-between;
}
.home-service-img1,
.home-service-img2,
.home-service-img3,
.home-service-img4{
	width: 90%;
	height: auto;
}
}
/*------サービスレスポンシブここまで--------------------------------*/

/*-------------大学・研究員の皆様------------------------*/
#school{
	width: 65%;
	height: auto;
	margin: 0 auto;
	padding-bottom: 5.6vw;/*100px;*/
	padding-top: 10vw;
}
.school_t{
	font-size: 2.24vw;/*40px;*/
	text-align: center;
}
.school_text{
	font-size: 1.12vw;/*1.2em;20px*/
	margin-top: 1.12vw;/*20px;*/
	line-height: 2vw;/*30px;*/
}
.daigaku{
	margin-top: 5.6vw;/*100px;*/
	display: flex;
	justify-content: center;
	column-gap: 5.6vw;/*100px;*/
}
.home-daigaku-kenkyuujo-img,
.home-daigaku-kasidashi-img,
.home-daigaku-daigaku-img,
.home-daigaku-yazirushi-img{
	width: 20%;
	height: auto;	
}
/*-------------回転アニメ-------------------*/
.home-daigaku-kasidashi-img{
	 animation:60s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(900deg); }
}
 /*-------------大学・研究員の皆様ここまで-------------------*/
/*-------------大学・研究員の皆様レスポンシブ------------------------*/
.daigaku_res{
	display: none;
}
@media screen and (max-width: 959px) {
	.daigaku{
		display: none;
	}
	.daigaku_res{
		display: block;
		display: flex;
		justify-content: center;
		margin-bottom: 2.24vw;/*40px;*/
		column-gap: 2.24vw;/*40px;*/
	}	
	#school{
		width: 85%;
		margin-top: 70px;
	}
	.school_t{
		font-size: 5vw;
	}
	p.school_text{
		margin-top: 30px;
		font-size: 3vw;
		line-height: 4vw;
	}
.home-daigaku-kenkyuujo-img_res,
.home-daigaku-kasidashi-img_res,
.home-daigaku-daigaku-img_res,
.home-daigaku-yazirushi-img_res{
	width: 30%;
	height: auto;	
}	
}
/*-------------回転アニメ-------------------*/
.home-daigaku-kasidashi-img_res{
	 animation:60s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(900deg); }
} 
.home-daigaku-kasidashi-img_res,
.home-daigaku-yazirushi-img_res{
	position: relative;
}
.home-daigaku-yazirushi-img_res{
	position: absolute;
	margin-top:8vw;
}
.school_text{
	font-size: 1.12vw;/*1.2em;20px*/
	margin-top: 1.12vw;/*20px;*/
	line-height: 2.8vw;
}
}
/*-------------大学・研究員の皆様レスポンシブここまで------------------------*/

.home-daigaku-kasidashi-img,
.home-daigaku-yazirushi-img{
	position: relative;
}
.home-daigaku-yazirushi-img{
	position: absolute;
	width: 15%;
	margin-top: 3.36vw;/*60px;*/
}
 /*-------------お問い合わせ------------------------*/

#contact{
	width: 100%;
	height: 27.998vw;/*500px;*/
	background-color: #000;
	opacity: .7;
}
#contact{
	width: 100%;
	height: 27.998vw;/*500px;*/
	background-color: #000;
}
.contact_wrap{
	width: 80%;
	margin: 0 auto;
}
.contact_f{
	display: flex;
	justify-content: center;
	justify-content: space-between;
	padding-top: 11.199vw;/*200px;*/
}
.contact_text1{
	width: 20%;
}
.contact_text2{
	width: 30%;
}
.contact_text3{
	width: 20%;
}

 /*-------------お問い合わせここまで------------------------*/
/*-------------お問い合わせレスポンシブ------------------------*/
#contact_res{
	display: none;
}
@media screen and (max-width: 959px) {
#contact{
	display: none;
}
#contact_res img{
	margin-top: 5.04vw;/*90px;*/
}
.contact_res2{
	width: 60%;
	margin: 0 auto;
	}
#contact_res{
	display: block;
	width: 100%;
	height: 25vw;
	background-color: #000;
	margin-top: 2.8vw;/*50px;*/
	opacity: .75;
}
}
/*-------------お問い合わせレスポンシブここまで------------------------*/

/*------お知らせ--------------------------------*/
.recently_news{
	position: relative;
	margin-bottom: 20px;
}
.news_img{
	width: 35%;
}
.news_t{ 
	position: absolute;
	top: 25%;
	left: 0;
	font-size: 2.8vw;/*50px;*/
	color: #39c;
	letter-spacing : 0.5em;
}
.news{
	font-size: 1.12vw;
	text-align: center;
	font-weight: 600;
	padding-top: 20px;
}
.news a{
	transition: 0.1s ;
	color: #4c4c4c;
}
.news a:hover{
	opacity: 0.3;
}
@media screen and (max-width: 959px) {
	.news_img{
		width: 50%;
	}
	.news_t{ 
		position: absolute;
		top: 20%;
		left: 0;
		font-size: 6vw;/*50px;*/
		color: #39c;
		letter-spacing : 0.5em;
	}
	.news{
		font-size: 3vw;
		text-align: center;
		font-weight: 600;
		padding-top: 20px;
	}
}



/*------main ここまで--------------------------------*/

/*------footer--------------------------------*/

#footer_wrap{
	width: 70%;
	margin: 0 auto;
}
.footer_nav ul{
	display: flex;
	justify-content: center;
	justify-content: space-between;
	padding-top: 1.68vw;/*30px;*/
}

.footer_logo{
	width:40%;
	margin: 0 auto;
	margin-top: 5.6vw;/*100px;*/
	padding-bottom: 5.6vw;/*100px;*/
}

.navbar_f ul {
  /* flexboxでナビゲーションバーを横並び配置する */
  display: flex;
  /* 縦幅中央に配置する指定 */
  align-items: center;
  /* 横幅中央に配置する指定 */
  justify-content: center;
  width: 100%;
  /* リストスタイルを削除 */
  list-style: none;
}
.navbar_f ul li {
  /* ナビゲーションメニュー同士の間隔を指定 */
  margin-left: 10%;
  margin-right: 5%;
}
.nav-item_f a {
  padding: 1.12vw;/*20px;*/
  color: #000;
  font-size:  0.952vw;/*17px;*/
  font-weight: 500;
  text-decoration: none;
  color: #4c4c4c;
}
.nav-item_f {
  /* アニメーション速度を指定 */
  transition: 0.3s;
  /* hover前後の回転角度の調整 */
  transform: rotate(0);
}
.nav-item_f:hover {
  /* アニメーション速度を指定 */
  transition: 0.3s;
  /* hover前後の回転角度の調整 */
  transform: rotate(360deg);
}
.nav_f_res{
	display: none;
}

@media screen and (max-width: 959px) {
	ul.nav_f{
		display: none;
	}
	.nav_f_res{
		display: block;
		text-align: center;
	}
	.nav-item_f_res{
		font-size: 3em;
		padding: 2em 0;
	}
	.footer_logo{
		width: 80%;
	}
}
/*------footerここまで--------------------------------*/