@charset "utf-8";
#zone_middle_floor {
		max-width: 100%;
}
body {
		background: url("../image/sitetop/bg-washi.jpg");
}
/* ------- ホットニュース */
/* 全体 */
.s_hotnews_area {
		margin: 4em 2em;
		background: url("/~microbid/image/sitetop/bg-hotnews-area.jpg")no-repeat;
		background-size: cover;
		padding: 2em 0;
		position: relative;
}
.s_hotnews_area::before, .s_hotnews_area::after {
		content: "";
		position: absolute;
		-webkit-transform: rotate(-35deg);
		    -ms-transform: rotate(-35deg);
		        transform: rotate(-35deg);
		width: 70px;
		height: 25px;
		background-color: #FCFCFC;
		z-index: 1;
}
.s_hotnews_area::before {
		top: -10px;
		left: -25px;
		border-bottom: 1px solid #E3E3E3;
}
.s_hotnews_area::after {
		bottom: -10px;
		right: -25px;
		border-top: 1px solid #E3E3E3;
}
/* 内側の白い透かし */
.s_hotnews_area > div {
		max-width: 1200px;
		background: rgba(255, 255, 255, .2);
		backdrop-filter: blur(11px);
		-webkit-backdrop-filter: blur(11px);
		padding: 4em 2em;
		margin: 0 auto;
}
/* エリア見出し */
.s_hotnews_area > div > div, .s_contents_area > div > div {
		max-width: 1000px;
		margin: 0 auto;
}
.s_hotnews_area > div > div > h3, .s_update_area > div > div > h3, .s_contents_area > div > div > h3, .s_pickup_area > div > div > h3, .s_contact_area > div > div > h3 {
		font-size: 2.3em;
		font-weight: normal;
		color: #666666;
		font-family: 'Shippori Mincho', serif;
		line-height: 1.6;
		margin-bottom: 2em;
}
/* エリア見出し小 */
.s_hotnews_area > div > div > h3 > span, .s_update_area > div > div > h3 > span, .s_contents_area > div > div > h3 > span, .s_pickup_area > div > div > h3 > span, .s_contact_area > div > div > h3 > span {
		display: block;
		font-size: .5em;
		margin-left: 2em;
}
/* エリア見出し三角形の装飾 */
.s_hotnews_area > div > div > h3:before, .s_contact_area > div > div > h3:before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 30px 30px 0 0;
		border-color: #d5927c transparent transparent transparent;
}
/* エリア見出し三角形の装飾 青 */
.s_update_area > div > div > h3:before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 30px 30px 0 0;
		border-color: #8697B2 transparent transparent transparent;
}
/* エリア見出し三角形の装飾 薄青 */
.s_contents_area > div > div > h3:before, .s_pickup_area > div > div > h3:before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 30px 30px 0 0;
		border-color: #A2BCC1 transparent transparent transparent;
}
/* ---ニュースパネル */
.s_hotnews_area > div > ul.s_news_panel {
		/*並べるエリア*/
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fit, 25%);
		grid-row-gap: 30px;
		grid-column-gap: 30px;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		max-width: 1200px;
		margin: 0 auto;
}
.s_hotnews_area > div > ul.s_news_panel li {
		background: #fff;
		padding-top: 2em;
		position: relative;
		top: 0;
		-webkit-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
}
.s_hotnews_area > div > ul.s_news_panel li:hover {
		background: rgba(255, 255, 255, .3);
		top: -7px;
		-webkit-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.3);
		        box-shadow: 0 2px 13px rgba(0, 0, 0, 0.3);
}
.s_hotnews_area > div > ul.s_news_panel li article {
		color: #212121;
		text-decoration: none;
}
.s_hotnews_area > div > ul.s_news_panel li figure { /*画像の枠組み*/
		margin: 0;
		-webkit-box-ordinal-group: 1;
		    -ms-flex-order: 0;
		        order: 0;
		height: 180px;
		overflow: hidden;
		-o-object-position: center;
		   object-position: center;
}
.s_hotnews_area > div > ul.s_news_panel li figure img {
		width: 100%;
		display: block;
		height: 200px;
		border-radius: 0;
		-o-object-fit: cover;
		   object-fit: cover; /*エリアに合わせて切り抜き*/
}
.card_text {
		padding: 1em;
}
.card_text > span {
		display: inline-block;
		background: #8697B2;
		color: #fff;
		font-size: .8em;
		padding: .2em 1em;
		margin-bottom: 1em;
}
.card_text p { /*本文*/
		font-size: .85em;
		height: 80px;
		line-height: 2;
}
.card_btn_area {
		padding: 0 1em 1em 0;
		text-align: right;
}
.card_btn_area a.bpts_btn_fuwa {
		margin: 3em 0 0 auto;
		width: 180px;
}
@media (max-width:960px) {
		.s_hotnews_area > div > div > h3, .s_update_area > div > div > h3, .s_contents_area > div > div > h3, .s_pickup_area > div > div > h3, .s_contact_area > div > div > h3 {
				margin-left: 1em;
		}
		#zone_middle_floor {
				padding: 0;
		}
		.s_hotnews_area {
				margin: 3em 0;
		}
		.s_hotnews_area > div {
				padding: 2em 0;
		}
		.s_hotnews_area::before, .s_hotnews_area::after, .s_update_area::before, .s_update_area::after {
				display: none;
				content: none;
		}
		.s_hotnews_area > div > ul.s_news_panel {
				display: block !important;
				width: 95%;
				margin: 0 auto;
		}
		.s_hotnews_area > div > ul.s_news_panel li {
				margin-bottom: 1em;
		}
		.s_hotnews_area > div > ul.s_news_panel li figure img {
				width: 100%;
		}
		.s_hotnews_area > div > ul.s_news_panel li article > div {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-ms-flex-line-pack: justify;
				align-content: space-between;
		}
}
/* ------- 更新情報 */
/* 全体 */
.s_update_area {
		max-width: 90%;
		margin: 0 0 0 auto;
		background: url("/~microbid/image/sitetop/bg-webupdate-area.jpg")no-repeat;
		background-size: cover;
		padding: 4em 0;
		position: relative;
}
.s_update_area::before, .s_update_area::after {
		content: "";
		position: absolute;
		-webkit-transform: rotate(-35deg);
		    -ms-transform: rotate(-35deg);
		        transform: rotate(-35deg);
		width: 70px;
		height: 25px;
		background-color: #FCFCFC;
		z-index: 1;
}
.s_update_area::before {
		top: -10px;
		left: -25px;
		border-bottom: 1px solid #E3E3E3;
}
.s_update_area::after {
		bottom: -10px;
		right: -25px;
		border-top: 1px solid #E3E3E3;
}
.s_update_area > div {
		max-width: 1200px;
		margin: 0 auto;
}
/*新着情報リスト*/
ul.s_update_panel {
		max-width: 760px;
		height: 300px;
		overflow-y: auto;
		padding-right: 1em;
}
ul.s_update_panel li {
		background: rgba(255, 255, 255, .5);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(24px);
		padding: 1em 2em;
		margin-bottom: 1em;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
}
ul.s_update_panel li:hover {
		background: rgba(255, 255, 255, .8);
		-webkit-box-shadow: -10px -17px 12px -20px rgba(0, 0, 0, 0.2);
		-ms-box-shadow: -10px -17px 12px -20px rgba(0, 0, 0, 0.2);
		box-shadow: -10px -17px 12px -20px rgba(0, 0, 0, 0.2);
}
ul.s_update_panel li span.new_icon{
	background: rgba(250,204,60,0.5);
	display: inline-block;
	color: #41342B;
	padding: 0 1em;
	font-size: .8em;
	vertical-align: 10%;
	margin-left: 1em;
}
@media (max-width: 960px) {
		.s_update_area {
				max-width: 100%;
				margin: 0 auto;
		}
		ul.s_update_panel {
				width: 95%;
				margin: 0 auto;
		}
}
/* ------- コンテンツ */
/* 全体 */
.s_contents_area {
		margin-top: 4em;
		background: url("/~microbid/image/sitetop/bg-contents-area.jpg")no-repeat;
		background-size: cover;
		padding: 5em 0 9em 0;
}
.s_contents_area > div > ul {
		max-width: 1000px;
		width: 95%;
		margin: 0 auto;
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: 30px;
}
/*パネル１つ分*/
.s_contents_area > div > ul > li {
		height: 420px;
		border-radius: 96% 4% 96% 4% / 1% 98% 2% 99%;
		position: relative;
		-webkit-box-shadow: -10px -17px 12px -20px rgba(0, 0, 0, 0.2);
		-ms-box-shadow: -10px -17px 12px -20px rgba(0, 0, 0, 0.2);
		box-shadow: -10px -17px 12px -20px rgba(0, 0, 0, 0.2);
}
.s_contents_area > div > ul > li > a {
		display: block;
		height: 100%;
		width: 100%;
}
.s_contents_area > div > ul > li > a > div {
		position: absolute;
		top: -40px;
		left: 30px;
		background: url("../image/sitetop/icon-bg-contents.png");
		width: 150px;
		height: 150px;
		opacity: .8;
}
.s_contents_area > div > ul > li > a > div > div {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center;
		height: 100%;
}
.s_contents_area > div > ul > li > a > div > div > div > h6 {
		font-size: 1em;
		font-weight: normal;
		font-family: 'Shippori Mincho', serif;
		color: #000;
}
.s_contents_area > div > ul > li > a > div > div > div > img {
		height: 40px;
}
/*研究室案内*/
.s_contents_area > div > ul > li:first-child {
		background: url("/~microbid/image/sitetop/bg-contents-about.jpg")no-repeat;
		background-size: cover;
		background-position: left center;
}
/*研究*/
.s_contents_area > div > ul > li:nth-child(2) {
		background: url("/~microbid/image/sitetop/bg-contents-education.jpg")no-repeat;
		background-size: cover;
		background-position: center center;
}
/*教育*/
.s_contents_area > div > ul > li:nth-child(3) {
		background: url("/~microbid/image/sitetop/bg-contents-research.jpg")no-repeat;
		background-size: cover;
		background-position: center center;
}
/*業績や活動*/
.s_contents_area > div > ul > li:nth-child(4) {
		background: url("/~microbid/image/sitetop/bg-contents-result.jpg")no-repeat;
		background-size: cover;
		background-position: left center;
}
@media (max-width: 960px) {
		.s_contents_area {
				margin-top: 0;
		}
		.s_contents_area > div > ul {
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		}
		/*パネル１つ分*/
		.s_contents_area > div > ul > li {
				height: 200px;
		}
		.s_contents_area > div > ul > li > a > div {
				top: 30px;
				left: 150px;
		}
}
/* ------- ピックアップ */
.s_pickup_area {
		background: url("../image/sitetop/bg-pickup.jpg")no-repeat;
		background-size: cover;
		padding: 7em 0;
}
.s_pickup_area h3 {
		margin-bottom: .5em !important;
		padding-bottom: 0;
}
.s_pickup_area > div {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}
.s_pickup_area > div > div:first-child {
		width: 35%;
		margin-right: 2em;
}
.s_pickup_area > div > div:first-child img {
		width: 100%;
}
.s_pickup_area > div > div:nth-child(2) ul li {
		margin-bottom: 1em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}
.s_pickup_area > div > div:nth-child(2) ul li a {
		display: block;
		position: relative;
		text-decoration: none;
}
.s_pickup_area > div > div:nth-child(2) ul li a img {
		display: block;
		width: 100%;
		-webkit-transition: 0.4s;
		-o-transition: 0.4s;
		transition: 0.4s;
}
.s_pickup_area > div > div:nth-child(2) ul li a:hover img {
		-webkit-filter: blur(2px);
		        filter: blur(2px);
}
.s_pickup_area > div > div:nth-child(2) ul li a:hover:before {
		opacity: 1;
		margin-top: -0.5em;
}
.s_pickup_area > div > div:nth-child(2) ul li h6 {
		font-size: 1.1em;
		font-weight: normal;
		color: #666 !important;
		text-decoration: none;
		font-family: 'Shippori Mincho', serif;
}
.s_pickup_area > div > div:nth-child(2) ul li img {
		max-width: 130px;
		width: 100%;
		margin-right: 1em;
}

@media (max-width:960px) {
		.s_pickup_area {
				display: block;
		}
		.s_pickup_area > div {
			display: block;
			width: 75%;
			margin: 0 auto;
		}
	.s_pickup_area > div > div:first-child {
		width: 100%;
		margin-right: 0;
	}
	.s_pickup_area > div > div:first-child p{
		font-weight: .9em;
		text-align: right;
	}
	.s_pickup_area > div > div:nth-child(2) ul{
		margin-top: 2em;
	}
}
/* ------- お問い合わせ */
.s_contact_area {
		margin: 10em auto;
		max-width: 1000px;
		border: 1px solid #4D4D4D;
		border-left: 3px solid #D5927C;
		padding: 2em;
		background: url("../image/sitetop/img-icon-kumanomi.png") no-repeat;
		background-position: right 5% top 15%;
}
.s_contact_area div > div:nth-child(2) {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
}
.s_contact_area div > div:nth-child(2) > a {
		width: 300px;
}
@media (max-width:960px) {
		.s_contact_area {
				margin: 2em auto;
				width: 70%;
		}
		.s_contact_area div > div:nth-child(2) {
				display: block;
		}
}