@charset "utf-8";
/* Copyright 2020 FSFIELD All Rights Reserved. */

@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */

	/* グローバルナビアクティブ
	---------------------------------------------- */
	.nav_global ul li.g01 a::after{height: 4px;}
	.nav_global ul li.g01 a:hover{opacity: 1;}
	
	/* メインビジュアル
	---------------------------------------------- */
	.main{
		display: flex;
		padding: 0 0 0 60px;
		min-height: 550px;
		height: calc(100vh - 145px);
		position: relative;
	}
	
	.main_col01{
		width: 17%;
		position: relative;
		z-index: 0;
	}
	
	.main_col01::after{
		content: "";
		display: block;
		position: absolute;
		left: -60px;
		bottom: -19%;
		z-index: -1;
		background: #F3F4F5;
		width: calc(100% + 60px);
		padding-top: calc(100% + 60px);
	}
	
	.main_col02{
		background: url("../img/home/pc/img_main01.jpg") no-repeat 0 0;
		background-size: cover;
		width: 83%;
		position: relative;
		z-index: 2;
	}
	
	.txt_main01{
		font-family: 'Arial';
		position: absolute;
		top: 14%;
		left: 0; 
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		color: #004B97;
		font-size: 2.4rem;
	}
	
	.txt_main01::after{
		content: "";
		display: block;
		width: 1px;
		height: 283px;
		background: #004B97;
		position: absolute;
		left: 18px;
		bottom: -300px;
	}
	
	.txt_main02{
		color: #004B97;
		font-weight: bold;
		font-size: 4.2rem;
		line-height: 2;
		text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 20px #FFF, 0 0 40px #FFF, 0 0 80px #FFF;
		position: absolute;
		left: 9.37%;
		top: 50%;
		transform: translateY( -50%);
		z-index: 2;
	}
	
	/* 見出し
	---------------------------------------------- */
	.ttl_home01{
		display: flex;
		flex-direction: column;
		color: #004B97;
		font-weight: bold;
		font-size: 3rem;
		margin-bottom: 40px;
		line-height: 1;
		text-align: center;
		position: relative;
	}
	
	.ttl_home01::before{
		content: "";
		display: block;
		background: #004B97;
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		bottom: 47px;
	}
	
	.ttl_home01::after{
		content: "";
		display: inline-block;
		font-family: 'Arial';
		font-weight: normal;
		font-size: 1.8rem;
		line-height: 1;
		padding-top: 60px;
	}
	
	/* 新着情報
	---------------------------------------------- */
	.news{
		display: flex;
		justify-content: space-between;
		width: 1200px;
		margin: 0 auto;
		padding-bottom: 80px;
	}
	
	.news_l{
		width: 350px;
		margin-top: -50px;
		position: relative;
		z-index: 2;
	}
	
	.news_l h2{
		background: #004B97;
		width: 100%;
		height: 240px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
		color: #FFF;
		font-size: 3rem;
		font-weight: bold;
		line-height: 1;
	}
	
	.btn_news a{
		background: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80px;
		color: #004B97;
		border: 1px solid #004B97;
		position: relative;
		transition: all .3s;
	}
	
	.btn_news a:hover{
		background: #004B97;
		color: #FFF;
	}
	
	.btn_news a::after{
		content: "";
		display: inline-block;
		background: url("../img/ico_arrow01.png") no-repeat 0 0;
		background-size: contain;
		width: 7px;
		height: 12px;
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -3.5px;
	}
	
	.btn_news a:hover::after{
		background: url("../img/ico_arrow04.png") no-repeat 0 0;
		background-size: contain;
	}
	
	.news_r{
		width: 815px;
		padding-top: 40px;
	}
	
	.nav_news_home{margin-bottom: 20px;}
	
	.nav_news_home ul{
		display: flex;
		justify-content: space-between;
	}
	
	.nav_news_home ul li{
		width: 188px;
		font-weight: bold;
		line-height: 1;
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 10px;
		color: #A6A6A6;
		font-size: 1.7rem;
		cursor: pointer;
	}
	
	.nav_news_home ul li:hover,
	.nav_news_home ul li.view{
		color: #004B97;
		border-color: #004B97;
	}
	
	.wrap_contents .contents{display: none;}
	
	.wrap_contents .contents.view{display: block;}
	
	.wrap_contents .article{border-bottom: 1px solid #DDDDDD;}
	
	.wrap_contents .article a{
		display: flex;
		padding: 30px 0;
		color: #000;
	}
	
	.wrap_contents .article a:hover{opacity: 0.7;}
	
	.wrap_contents .article .inner{width: 140px;}
	
	.wrap_contents .article .date{
		display: block;
		color: #797979;
		width: 84px;
		font-size: 1.6rem;
		line-height: 1;
		margin-bottom: 8px;
	}
	
	.wrap_contents .article .cat span{
		display: block;
		background: #004B97;
		color: #FFF;
		text-align: center;
		width: 84px;
		font-size: 1.2rem;
		line-height: 1;
		padding: 3px 0 4px;
	}
	
	.wrap_contents .article h3{line-height: 1.5;}
	
	/* バナー上部
	---------------------------------------------- */
	.banner_area_top{
		background: #F3F4F5;
		padding: 60px 0;
	}
	
	.banner_area_top .inner{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	
	.banner_area_top .bn{
		background: #FFF;
		width: 580px;
		position: relative;
		overflow: hidden;
	}
	
	.banner_area_top .bn::before{
		content: "";
		display: block;
		width: 250px;
		height: 250px;
		background: #00B0DD;
		position: absolute;
		bottom: 0;
		right: 0;
		transform: rotate(16deg) translate3d(235px, 0, 0);
	}
	
	.banner_area_top .bn::after{
		content: "";
		display: block;
		width: 9px;
		height: 14px;
		background: url("../img/ico_arrow04.png") no-repeat center;
		background-size: contain;
		position: absolute;
		right: 12px;
		bottom: 12px;
	}
	
	.banner_area_top .bn a{
		display: block;
		background-repeat: no-repeat;
		background-position: 0 center;
		background-size: contain;
	}
	
	.bn_outcome a{background-image: url("../img/home/bn_img_outcome01.png");}
	
	.bn_catalog a{background-image: url("../img/home/bn_img_catalog01.png");}
	
	.banner_area_top .bn a:hover{opacity: 0.7;}
	
	.banner_area_top .bn a p{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 290px;
		height: 218px;
		margin-left: auto;
		color: #004B97;
		font-size: 3rem;
		line-height: 1;
		font-weight: bold;
		text-align: center;
	}
	
	.banner_area_top .bn a p span{
		font-size: 2rem;
		display: block;
		color: #0078F0;
		margin-top: 15px;
	}
	
	/* 産総研 地域連携部の取り組み
	---------------------------------------------- */
	.sec_activity{
		padding: 80px 0;
		width: 1200px;
		margin: 0 auto;
	}
	
	.sec_activity h3.ttl_home01::after{content: "Activity";}
	
	.sec_activity .lead{
		text-align: center;
		margin-bottom: 40px;
	}
	
	.collabo_image{text-align: center;}
	
	.collabo_image h4{
		font-size: 1.8rem;
		font-weight: bold;
		color: #004B97;
	}
	
	.collabo_image .txt{margin-bottom: 25px;}
	
	/* 相談窓口
	---------------------------------------------- */
	.sec_contact{
		background: #F3F4F5;
		padding: 80px 0;
	}
	
	.sec_contact h3.ttl_home01::after{content: "Contact";}
	
	.contact{
		width: 1200px;
		margin: 0 auto;
	}
	
	.contact .lead{
		text-align: center;
		margin-bottom: 40px;
	}
	
	/*--ナビ--*/
	.nav_contact{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.nav_contact .inner{
		width: 590px;
		margin-bottom: 20px;
	}
	
	.nav_contact .inner a{
		background: #FFF;
		display: block;
		color: #000;
		height: 100%;
	}
	
	.nav_contact .inner .image img{width: 100%;}
	
	.nav_contact .inner .txt{
		background: #FFF;
		padding: 25px;
		line-height: 1.5;
		border: 1px solid #DDDDDD;
		border-top: none;
		position: relative;
	}
	
	.nav_contact .inner.external .txt::after{
		content: "";
		display: block;
		background: url("../img/ico_tab01.png") no-repeat 0 0;
		background-size: contain;
		width: 10px;
		height: 10px;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	
	.nav_contact .inner .txt_arrrow{
		display: inline-block;
		font-size: 2.2rem;
		line-height: 1;
		margin-bottom: 15px;
		font-weight: bold;
		position: relative;
	}
	
	.nav_contact .inner .txt_arrrow::before{
		content: "";
		display: inline-block;
		background: #E50012;
		width: 4px;
		height: 24px;
		position: absolute;
		top: 0;
		left: -25px;
	}
	
	.nav_contact .inner .txt_arrrow::after{
		content: "";
		display: inline-block;
		background: url("../img/ico_arrow01.png") no-repeat 0 0;
		background-size: contain;
		width: 8px;
		height: 12px;
		position: absolute;
		top: 6px;
		right: -20px;
		transition: right .3s;
	}
	
	.nav_contact .inner:hover .txt_arrrow::after{right: -30px;}
	
	.txt_nav_contact01{
		font-size: 1.8rem;
		font-weight: bold;
		color: #E50012;
		line-height: 1.3;
		margin-bottom: 12px;
		min-height: 23.4px;
	}
	
	.txt_nav_contact01 span{font-size: 1.6rem;}
	
	.nav_contact02{margin-bottom: -30px;}
	
	.nav_contact02 .inner{margin-bottom: 30px;}
	
	.nav_contact02 .inner a{
		border: 1px solid #DDDDDD;
		height: calc(100% - 23.4px);
	}
	
	.nav_contact02 .inner .txt{
		border: none;
		height: 100%;
	}
	
	/* バナー下部
	---------------------------------------------- */
	.banner_area_btm{padding: 40px 0 15px;}
	
	.banner_area_btm ul{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.banner_area_btm ul li{margin-bottom: 25px;}
	
	.banner_area_btm ul li a:hover{opacity: 0.7;}
	

}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */

	/* メインビジュアル
	---------------------------------------------- */
	.main{
		display: flex;
		position: relative;
	}
	
	.main_col01{
		width: 17%;
		padding-top: 41.4%;
		position: relative;
		z-index: 0;
	}
	
	.main_col01::after{
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: -15%;
		z-index: -1;
		background: #F3F4F5;
		width: 100%;
		padding-top: 258.6%;
	}
	
	.main_col02{
		background: url("../img/home/sp/img_main01.jpg") no-repeat 0 0;
		background-size: cover;
		width: 83%;
		padding-top: 106.66%;
	}
	
	.txt_main01{
		font-family: 'Arial';
		position: absolute;
		top: 14%;
		left: 10px; 
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		color: #004B97;
		font-size: 1.3rem;
	}
	
	.txt_main01::after{
		content: "";
		display: block;
		width: 1px;
		height: 100px;
		background: #004B97;
		position: absolute;
		top: 190px;
		left: 9px;
	}
	
	.txt_main02{
		color: #004B97;
		font-weight: bold;
		font-size: 2.4rem;
		line-height: 2;
		position: absolute;
		left: 14%;
		top: 50%;
		transform: translateY( -50%);
		z-index: 2;
		text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 20px #FFF, 0 0 40px #FFF, 0 0 80px #FFF;
	}
	
	/* 見出し
	---------------------------------------------- */
	.ttl_home01{
		display: flex;
		flex-direction: column;
		color: #004B97;
		font-weight: bold;
		font-size: 2rem;
		margin-bottom: 20px;
		line-height: 1;
		text-align: center;
		position: relative;
	}
	
	.ttl_home01::before{
		content: "";
		display: block;
		background: #004B97;
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		bottom: 35px;
	}
	
	.ttl_home01::after{
		content: "";
		display: inline-block;
		font-family: 'Arial';
		font-weight: normal;
		font-size: 1.6rem;
		line-height: 1;
		padding-top: 40px;
	}
	
	/* 新着情報
	---------------------------------------------- */
	.news{padding: 0 25px 40px;}
	
	.news_l{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin: -30px 0 10px;
		position: relative;
		z-index: 2;
	}
	
	.news_l h2{
		background: #004B97;
		width: calc(50% - 7.5px);
		height: 28.53vw;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		font-size: 2rem;
		font-weight: bold;
		line-height: 1;
	}
	
	.btn_news{width: calc(50% - 7.5px);}
	
	.btn_news a{
		background: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 45px;
		color: #004B97;
		border: 1px solid #004B97;
		position: relative;
	}
	
	.btn_news a::after{
		content: "";
		display: inline-block;
		background: url("../img/ico_arrow01.png") no-repeat 0 0;
		background-size: contain;
		width: 7px;
		height: 12px;
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -3.5px;
	}
	
	.nav_news_home{margin-bottom: 15px;}
	
	.nav_news_home ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.nav_news_home ul li{
		width: calc(50% - 12.5px);
		font-weight: bold;
		line-height: 1;
		border-bottom: 1px solid #DDDDDD;
		padding: 25px 0 5px;
		color: #A6A6A6;
		cursor: pointer;
	}
	
	.nav_news_home ul li.view{
		color: #004B97;
		border-color: #004B97;
	}
	
	.wrap_contents .contents{display: none;}
	
	.wrap_contents .contents.view{display: block;}
	
	.wrap_contents .article{border-bottom: 1px solid #DDDDDD;}
	
	.wrap_contents .article a{
		display: block;
		padding: 15px 0;
		color: #000;
	}
	
	.wrap_contents .article .inner{
		display: flex;
		margin-bottom: 5px;
	}
	
	.wrap_contents .article .date{
		display: inline-block;
		color: #797979;
		margin-right: 10px;
	}
	
	.wrap_contents .article .cat span{
		display: inline-block;
		background: #004B97;
		color: #FFF;
		text-align: center;
		width: 80px;
		font-size: 1.1rem;
		line-height: 1;
		padding: 4px 0;
	}
	
	.wrap_contents .article h3{line-height: 1.5;}
	
	/* バナー上部
	---------------------------------------------- */
	.banner_area_top{
		background: #F3F4F5;
		padding: 40px 25px;
	}
	
	.banner_area_top .inner{
		max-width: 400px;
		margin: 0 auto;
	}
	
	.banner_area_top .bn{
		background: #FFF;
		position: relative;
		overflow: hidden;
		margin-bottom: 25px;
	}
	
	.banner_area_top .bn:last-of-type{margin-bottom: 0;}
	
	.banner_area_top .bn::before{
		content: "";
		display: block;
		width: 250px;
		height: 250px;
		background: #00B0DD;
		position: absolute;
		bottom: 0;
		right: 0;
		transform: rotate(16deg) translate3d(255px, 0, 0);
	}
	
	.banner_area_top .bn::after{
		content: "";
		display: block;
		width: 7.5px;
		height: 12px;
		background: url("../img/ico_arrow04.png") no-repeat center;
		background-size: contain;
		position: absolute;
		right: 6px;
		bottom: 7px;
	}
	
	.banner_area_top .bn a{
		display: block;
		background-repeat: no-repeat;
		background-position: 0 center;
		background-size: contain;
	}
	
	.bn_outcome a{background-image: url("../img/home/bn_img_outcome01.png");}
	
	.bn_catalog a{background-image: url("../img/home/bn_img_catalog01.png");}
	
	.banner_area_top .bn a p{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 56%;
		height: 120px;
		margin-left: auto;
		color: #004B97;
		font-size: 2rem;
		line-height: 1;
		font-weight: bold;
		text-align: center;
	}
	
	.banner_area_top .bn a p span{
		font-size: 1.4rem;
		display: block;
		color: #0078F0;
		margin-top: 10px;
	}
	
	/* 産総研 地域連携部の取り組み
	---------------------------------------------- */
	.sec_activity{padding: 40px 25px;}
	
	.sec_activity h3.ttl_home01::after{content: "Activity";}
	
	.sec_activity .lead{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.sec_activity .lead br{display: none;}
	
	.collabo_image{text-align: center;}
	
	.collabo_image h4{
		font-weight: bold;
		color: #004B97;
		margin-bottom: 3px;
	}
	
	.collabo_image .txt{margin-bottom: 20px;}
	
	.collabo_image figure img{width: 100%;}
	
	/* 相談窓口
	---------------------------------------------- */
	.sec_contact{
		background: #F3F4F5;
		padding: 40px 25px;
	}
	
	.sec_contact h3.ttl_home01::after{content: "Contact";}
	
	.contact .lead{
		text-align: center;
		margin-bottom: 20px;
	}
	
	/*--ナビ--*/
	.nav_contact01{margin-bottom: 30px;}
	
	.nav_contact .inner{margin-bottom: 30px;}
	
	.nav_contact .inner:last-of-type{margin-bottom: 0;}
	
	.nav_contact .inner a{
		background: #FFF;
		display: block;
		color: #000;
	}
	
	.nav_contact .inner .image img{width: 100%;}
	
	.nav_contact .inner .txt{
		padding: 15px;
		line-height: 1.5;
		border: 1px solid #DDDDDD;
		border-top: none;
	}
	
	.nav_contact .inner .txt_arrrow{
		display: inline-block;
		font-size: 1.6rem;
		line-height: 1.2;
		margin-bottom: 10px;
		font-weight: bold;
		position: relative;
	}
	
	.nav_contact .inner .txt_arrrow::before{
		content: "";
		display: inline-block;
		background: #E50012;
		width: 4px;
		height: 16px;
		position: absolute;
		top: 2px;
		left: -15px;
	}
	
	.nav_contact .inner .txt_arrrow::after{
		content: "";
		display: inline-block;
		background: url("../img/ico_arrow01.png") no-repeat 0 0;
		background-size: contain;
		width: 8px;
		height: 12px;
		position: absolute;
		top: 4px;
		right: -15px;
	}
	
	.txt_nav_contact01{
		font-size: 1.5rem;
		font-weight: bold;
		color: #E50012;
		line-height: 1.3;
		margin-bottom: 12px;
	}
	
	.txt_nav_contact01.txt_none{display: none;}
	
	.txt_nav_contact01 span{font-size: 1.6rem;}
	
	.nav_contact02 .inner{
		border-bottom: 1px solid #DDDDDD;
		padding: 15px 0;
		margin: 0;
	}
	
	.nav_contact02 .inner:first-of-type{border-top: 1px solid #DDDDDD;}
	
	.nav_contact02 .inner a{border: 1px solid #DDDDDD;}
	
	.nav_contact02 .inner .txt{border: none;}
	
	/* バナー下部
	---------------------------------------------- */
	.banner_area_btm{padding: 30px 25px 15px;}
	
	.banner_area_btm ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.banner_area_btm ul li{
		width: calc(50% - 7.5px);
		margin-bottom: 15px;
	}
	
	.banner_area_btm ul li img{width: 100%;}
	

}/*--@media--*/


@media only screen and (max-width:345px){ /* 表示領域が345px以下の場合に適用するスタイル */

	/* メインビジュアル
	---------------------------------------------- */
	.txt_main02{font-size: 2.2rem;}
	
	
}/*--@media--*/