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


@media screen and (min-width: 1281px) ,print{
	
	/* ------- 骨格 -------------------------------------------------------------------------------------------------------------------*/
	div.wrapListDepartment{
		padding: 75px;
        min-height: calc(100vh - 321px);
	}
		
	/*-- 一覧のナビゲーション ------------------------------------------------------------------------------ */
	div.wrapNaviList ul li{
		border-right: 1px solid rgba(255,255,255,.5);
	}
	
	/*-- 研究室 ------------------------------------------------------------------------------ */
	
	div.wrapListBlock div.depListBlock div.innerListBlock article{
		float: left;
		width:33.3%;
		padding:3px;
	}
	
	/* -- キーワード郡 ------------------------------------------------------------------------------ */
	
	div.innerListBlock div.wrapKeyword{ margin: 0 0 30px;}
	div.innerListBlock div.wrapKeyword ul{ margin: 0; padding: 0;}
	div.innerListBlock div.wrapKeyword ul li{
		float: left;
		width: 20%;
		list-style-type: none;
		margin: 0 ; padding: 0 1px 1px 0;
	}	
	div.innerListBlock span.highlight{
		color:red;
	}

	div.innerListBlock p{
		margin-bottom: 0.5em;
	}
	
}
@media screen and (min-width: 1001px) and (max-width: 1280px),print{
	
	/* ------- 骨格 -------------------------------------------------------------------------------------------------------------------*/
	div.wrapListDepartment{
		padding: 75px;
	}
	
	/*-- 一覧のナビゲーション ------------------------------------------------------------------------------ */
	div.wrapNaviList ul li{
		border-right: 1px solid rgba(255,255,255,.5);
	}
	
	/*-- 研究室 ------------------------------------------------------------------------------ */
	div.wrapListBlock div.depListBlock div.innerListBlock article{
		float: left;
		width:50%;
		padding:3px;
	}
	
	/* -- キーワード郡 ------------------------------------------------------------------------------ */

	div.innerListBlock div.wrapKeyword{ margin: 0 0 30px;}
	div.innerListBlock div.wrapKeyword ul{ margin: 0; padding: 0;}
	div.innerListBlock div.wrapKeyword ul li{
		float: left;
		width: 33.3%;
		list-style-type: none;
		margin: 0 ; padding: 0 1px 1px 0;
	}
	div.innerListBlock span.highlight{
		color:red;
	}

	div.innerListBlock p{
		margin-bottom: 0.5em;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1000px),print{

	/* ------- 骨格 -------------------------------------------------------------------------------------------------------------------*/
	div.wrapListDepartment{
		padding: 50px;
	}

	/*-- 一覧のナビゲーション ------------------------------------------------------------------------------ */
	div.wrapNaviList ul{}
	div.wrapNaviList ul li{
		width: 50%;
		border-bottom: 1px solid rgba(255,255,255,.5);
	}
	div.wrapNaviList ul li:nth-child(odd){
		border-right: 1px solid rgba(255,255,255,.5);
	}
	
	/*-- 研究室 ------------------------------------------------------------------------------ */
	div.wrapListBlock div.depListBlock div.innerListBlock article{
		float: left;
		width:50%;
		padding:3px;
	}
	
	/* -- キーワード郡 ------------------------------------------------------------------------------ */

	div.innerListBlock div.wrapKeyword{ margin: 0 0 30px;}
	div.innerListBlock div.wrapKeyword ul{ margin: 0; padding: 0;}
	div.innerListBlock div.wrapKeyword ul li{
		float: left;
		width: 50%;
		list-style-type: none;
		margin: 0 ; padding: 0 1px 1px 0;
	}
	div.innerListBlock span.highlight{
		color:red;
	}
	div.innerListBlock p{
		margin-bottom: 0.5em;
	}
		
}

@media screen and (min-width: 768px) {

	/*ページタイトル*/
	div.wrapListDepartment div.wrapTitleList{}
	div.wrapListDepartment div.wrapTitleList h1{
		font-weight: 900;
		font-size: 36px;
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,.05);
		margin: 0 0 50px;
	}
	/*Sdgs用*/
    div.wrapListDepartment div.wrapTitleList h1.title_sdgs{
        display: flex;
        align-items: flex-start;
    }
    div.wrapListDepartment div.wrapTitleList h1.title_sdgs .img{
        display: block;
        margin: 0 30px 0 0;
        height: 150px;
        width: auto;
    }
    
	/*一覧のナビゲーション*/
	div.wrapNaviList{ margin: 0 0 50px;}
	div.wrapNaviList ul.clearfix{
		margin: 0; padding: 0;
		width: 100%;
	}
	
	div.wrapNaviList ul li{
		float: left;
		list-style-type: none;
		margin: 0; padding: 0 1px 0 0;
	}
	div.wrapNaviList ul li a{
		display: block;
		margin: 0; padding: 10px 20px;
		font-weight: 700;
		color: #fff !important;
		text-shadow: 0 0 10px rgba(0,0,0,0.05);
	}
	div.wrapNaviList ul li a:hover{
		background-color: rgba(255,255,255,.3);
		cursor: pointer;
	}
	div.wrapNaviList ul li a i{ margin: 0 0 0 20px;}
	
	/*一覧*/
	div.wrapListBlock{}
	div.wrapListBlock div.depListBlock:not(:first-child){
		margin-top: 20px;
	}

	/*一覧のタイトル*/
	div.wrapListBlock div.depListBlock h2{
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,.05);
		font-weight: 900;
		font-size: 1.6em;
		margin: 0 0 20px;
	}
	div.wrapListBlock div.depListBlock div.innerListBlock{
        margin: 0;
        display: flex;
        flex-flow: row wrap;
    }
    
	/*一覧の見出し*/
	.keyword h3.subtitleKeyword{
		display: inline-block;
		padding: 13px 20px;
		font-size: 1.3em;
		font-weight: 700;
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,.05);
		background: #0a94d6; /* Old browsers */
		background: -moz-linear-gradient(left, #0a94d6 0%, #076a9c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #0a94d6 0%,#076a9c 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #0a94d6 0%,#076a9c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a94d6', endColorstr='#076a9c',GradientType=1 ); /* IE6-9 */	
	}
	
	/*-- 研究室 ------------------------------------------------------------------------------ */

	div.wrapListBlock div.depListBlock div.innerListBlock article a{
		display: block;
        height: 100%;
		background-color: rgba(255,255,255,.75);
		padding: 15px;
		color: #000;
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a:hover{
		text-decoration: none;
		background-color: rgba(255,255,255,.9);
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a h3{
		font-size: 1.3em;
		font-weight: 700;
		color: #000;
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a h4{
		font-size: 1em;
		font-weight: 700;		
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a ul{ margin: 0; padding: 0; }
	div.wrapListBlock div.depListBlock div.innerListBlock article a ul li{
		list-style-type: none;
		float: left;
		margin: 0 10px 0 0; padding: 0;
		font-size: .875em;
	}
	
	/* -- キーワード郡 ------------------------------------------------------------------------------ */

	div.innerListBlock div.wrapKeyword ul li a{
		display: block;
		color: #000;
		padding: 8px 15px;
		background-color: rgba(255,255,255,.75);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: .9em;
	}
	div.innerListBlock div.wrapKeyword ul li a:hover{
		text-decoration: none;
		background-color: rgba(255,255,255,.9);
	}
	div.innerListBlock span.highlight{
		color:red;
	}
	div.innerListBlock p{
		margin-bottom: 0.5em;
	}
    
	/* -- SDGsナビ ------------------------------------------------------------------------------ */
    .wrapNaviSdgs{
        margin: 50px 0 0;
    }
    .wrapNaviSdgs .heading{
        color: #fff;
        text-shadow: 0 0 10px rgb(0,0,0,.05);
        font-weight: 900;
        font-size: 1.4em;
        margin: 0 0 20px;
    }
    .wrapNaviSdgs .navSdgs{
        display: flex;
        flex-flow: row wrap;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .wrapNaviSdgs .navSdgs .item{
        padding: 0 1px 1px 0;
    }
    .wrapNaviSdgs .navSdgs .item .link{
        display: block;
        width: 60px;
        height: 60px;
    }
    .wrapNaviSdgs .navSdgs .item .link .img{
        display: block;
        width: 100%;
        height: 100%;
        filter: brightness(80%);
    }
    .wrapNaviSdgs .navSdgs .item .link:hover .img{
        filter: brightness(120%);
    }
}

@media screen and (max-width: 767px){

	/* ------- 骨格 -------------------------------------------------------------------------------------------------------------------*/
	div.wrapListDepartment{
		padding: 30px 20px 20px;
	}

	/*ページタイトル*/
	div.wrapListDepartment div.wrapTitleList{}
	div.wrapListDepartment div.wrapTitleList h1{
		font-weight: 900;
		font-size: 21px;
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,.05);
		margin: 0 0 50px;
	}
	/*Sdgs用*/
    div.wrapListDepartment div.wrapTitleList h1.title_sdgs{
        display: flex;
        align-items: flex-start;
    }
    div.wrapListDepartment div.wrapTitleList h1.title_sdgs .img{
        display: block;
        margin: 0 20px 0 0;
        height: 100px;
        width: auto;
    }
	
	/*-- 一覧のナビゲーション ------------------------------------------------------------------------------ */
	div.wrapNaviList ul{}

	/*一覧のナビゲーション*/
	div.wrapNaviList{ margin: 0 0 50px;}
	div.wrapNaviList ul{
		margin: 0; padding: 0;
		width: 100%;
	}
	
	div.wrapNaviList ul li{
		list-style-type: none;
		margin: 0; padding: 0 1px 0 0;
		border-bottom: 1px solid rgba(255,255,255,.5);
	}
	div.wrapNaviList ul li a{
		display: block;
		margin: 0; padding: 5px 20px;
		font-weight: 700;
		color: #fff !important;
		text-shadow: 0 0 10px rgba(0,0,0,0.05);
		font-size: .8em;
	}
	div.wrapNaviList ul li a:hover{
		background-color: rgba(255,255,255,.3);
		cursor: pointer;
	}
	div.wrapNaviList ul li a i{ margin: 0 0 0 20px;}
	
	/*一覧*/
	div.wrapListBlock{}
	div.wrapListBlock div.depListBlock:not(:first-child){
		margin-top: 20px;
	}


	/*一覧のタイトル*/
	div.wrapListBlock div.depListBlock h2{
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,.05);
		font-weight: 900;
		font-size: 1.2em;
		margin: 0 0 20px;
	}
	div.wrapListBlock div.depListBlock div.innerListBlock{
        margin: 0;
        display: flex;
        flex-flow: column;
    }
    
    div.wrapListBlock div.depListBlock div.innerListBlock article{
        width: 100%;    
    }
    
	/*一覧の見出し*/
	.keyword h3.subtitleKeyword{
		display: inline-block;
		padding: 13px 20px;
		font-size: 1em;
		font-weight: 700;
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,.05);
		background: #0a94d6; /* Old browsers */
		background: -moz-linear-gradient(left, #0a94d6 0%, #076a9c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #0a94d6 0%,#076a9c 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #0a94d6 0%,#076a9c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a94d6', endColorstr='#076a9c',GradientType=1 ); /* IE6-9 */	
	}
	
	
	/*-- 研究室 ------------------------------------------------------------------------------ */
	div.wrapListBlock div.depListBlock div.innerListBlock article{
		padding:3px;
	}
	
	div.wrapListBlock div.depListBlock div.innerListBlock article a{
		display: block;
        height: 100%;
		background-color: rgba(255,255,255,.75);
		padding: 15px;
		color: #000;
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a:hover{
		text-decoration: none;
		background-color: rgba(255,255,255,.9);
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a h3{
		font-size: 1em;
		font-weight: 700;
		color: #000;
	}
	div.wrapListBlock div.depListBlock div.innerListBlock article a h4{
		font-size: .9em;
		font-weight: 700;		
	}
	
	div.wrapListBlock div.depListBlock div.innerListBlock article a ul{ margin: 0; padding: 0; }
	div.wrapListBlock div.depListBlock div.innerListBlock article a ul li{
		list-style-type: none;
		float: left;
		margin: 0 5px 0 0; padding: 0;
		font-size: .8em;
	}
	
	/* -- キーワード郡 ------------------------------------------------------------------------------ */

	div.innerListBlock div.wrapKeyword{ margin: 0 0 30px;}
	div.innerListBlock div.wrapKeyword ul{ margin: 0; padding: 0;}
	div.innerListBlock div.wrapKeyword ul li{
		list-style-type: none;
		margin: 0 ; padding: 0 0 1px 0;
	}

	div.innerListBlock div.wrapKeyword ul li a{
		display: block;
		color: #000;
		padding: 4px 10px;
		background-color: rgba(255,255,255,.75);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: .9em;
	}
	div.innerListBlock div.wrapKeyword ul li a:hover{
		text-decoration: none;
		background-color: rgba(255,255,255,.9);
	}
	div.innerListBlock span.highlight{
		color:red;
	}
	div.innerListBlock p{
		margin-bottom: 0.5em;
	}
    
	/* -- SDGsナビ ------------------------------------------------------------------------------ */
    .wrapNaviSdgs{
        margin: 50px 0 0;
    }
    .wrapNaviSdgs .heading{
        color: #fff;
        text-shadow: 0 0 10px rgb(0,0,0,.05);
        font-weight: 900;
        font-size: 1.2em;
        margin: 0 0 20px;
    }
    .wrapNaviSdgs .navSdgs{
        display: flex;
        flex-flow: row wrap;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .wrapNaviSdgs .navSdgs .item{
        padding: 0 1px 1px 0;
    }
    .wrapNaviSdgs .navSdgs .item .link{
        display: block;
        width: 60px;
        height: 60px;
    }
    .wrapNaviSdgs .navSdgs .item .link .img{
        display: block;
        width: 100%;
        height: 100%;
        filter: brightness(80%);
    }
    .wrapNaviSdgs .navSdgs .item .link:hover .img{
        filter: brightness(120%);
    }
    
}
@media screen , print{
	
	/*一覧のナビゲーション：色設定*/
	.dep01 div.wrapNaviList ul{
		background: #00bfc9; /* Old browsers */
		background: -moz-linear-gradient(left, #00bfc9 0%, #00979e 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #00bfc9 0%,#00979e 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #00bfc9 0%,#00979e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bfc9', endColorstr='#00979e',GradientType=1 ); /* IE6-9 */
	}
	.dep01 div.wrapListBlock div.depListBlock div.innerListBlock article a h4{ color: #00979e;}

	.dep02 div.wrapNaviList ul{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009f60+0,007a49+100 */
		background: #009f60; /* Old browsers */
		background: -moz-linear-gradient(left, #009f60 0%, #007a49 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #009f60 0%,#007a49 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #009f60 0%,#007a49 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009f60', endColorstr='#007a49',GradientType=1 ); /* IE6-9 */
	}
	.dep02 div.wrapListBlock div.depListBlock div.innerListBlock article a h4{ color: #007a49;}
	
	.dep03 div.wrapNaviList ul{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#83b368+0,629149+100 */
		background: #83b368; /* Old browsers */
		background: -moz-linear-gradient(left, #83b368 0%, #629149 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #83b368 0%,#629149 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #83b368 0%,#629149 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83b368', endColorstr='#629149',GradientType=1 ); /* IE6-9 */
	}
	.dep03 div.wrapListBlock div.depListBlock div.innerListBlock article a h4{ color: #629149;}
	
	.dep04 div.wrapNaviList ul{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b1c06b+0,9bad4a+100 */
		background: #b1c06b; /* Old browsers */
		background: -moz-linear-gradient(left, #b1c06b 0%, #9bad4a 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #b1c06b 0%,#9bad4a 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #b1c06b 0%,#9bad4a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1c06b', endColorstr='#9bad4a',GradientType=1 ); /* IE6-9 */
	}
	.dep04 div.wrapListBlock div.depListBlock div.innerListBlock article a h4{ color: #9bad4a;}
	
	.keyword div.wrapNaviList ul{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a94d6+0,076a9c+100 */
		background: #0a94d6; /* Old browsers */
		background: -moz-linear-gradient(left, #0a94d6 0%, #076a9c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #0a94d6 0%,#076a9c 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #0a94d6 0%,#076a9c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a94d6', endColorstr='#076a9c',GradientType=1 ); /* IE6-9 */	
	}

	.search div.wrapListBlock div.depListBlock div.innerListBlock article a h4{ color: #076a9c;}
	
}