/*--------------------------
	釧路高専 機械工学分野
	流体工学研究室
	hogehoge.com
	2023-07-01	origin
----------------------------*/
@charset "UTF-8";

h3	{ font-size: ; text-align: center; }


/*------------------------
BxSlider
上下に遷移するお知らせ
------------------------*/
#information.top	{ min-height: auto; background-color: #c9dcedcc; }
#information.top .inner	{ display: flex; align-items: center; padding: 0; }
#information.top .title	{ display: flex; align-items: center; padding: 1em; color: #fff; background-color: #5081aa; font-size: initial; font-weight: normal; white-space: nowrap; transition: .2s; }
#information.top .title	{ color: #fff; background-color: #1862c1cc; }
#information.top .title:hover	{ text-decoration: none; background-color: #02c2a9; }
#information.top .title:before	{ content: '\f0ea'; margin-right: .3rem; font-family: fontAwesome; opacity: 1; }
/* for Tablet */
@media screen and (min-width:768px) { /* and ( max-width:1024px) { */
	#information.top .title:before	{ content: '\f0ea \ お知らせ'; }
	#information.top .title:after	{ content: '\f105'; margin-left: .5rem; font-family: fontAwesome; opacity: .5; }
}

/*------------------------
Grid Layout
------------------------*/
.grid		{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid > *	{ padding: 0; }
.grid li	{ display: flex; align-items: center; min-height: 8.625rem; }
.grid li>*	{ flex: 1; }
.grid .fa	{ display: block; margin-bottom: .5rem; font-size: clamp(1.6rem, 3rem, 3rem); }

.grid a	{ padding: 0 1em; color: #999; font-size: clamp(1rem, 6vw, 1.2rem); }
.grid a	{ display: flex; flex-direction: column; justify-content: center; height: 100%; border-radius: .3em; transition: .2s; }
.grid a:hover 	{ text-decoration: none; }
.grid a:not([class])	{ color: #fff; background-color: #518fdc; }
.grid a:not([class]):hover	{ color: #fff; background-color: #36c; }

/*------------------------
Flex Layout
------------------------*/
.flex		{ justify-content: center; }
.flex > *	{ padding: 0; min-width: initial; }
.flex > *	{
	background-color: rgba(255,255,255,1);
	border-radius: .3em;
	box-shadow: 0 0 12px rgba(0,0,0,.1);
}
.flex li	{ display: flex; align-items: center; min-height: 8.625rem; max-width: 304px; }
.flex li	{ aspect-ratio: 16/9; }
.flex li>*	{ flex: 1; }
.flex .fa	{ display: block; margin-bottom: .5rem; font-size: clamp(1.6rem, 3rem, 3rem); }

.flex a	{ padding: 0 1em; color: #999; font-size: clamp(1rem, 6vw, 1.2rem); }
.flex a	{ display: flex; flex-direction: column; justify-content: center; height: 100%; border-radius: .3em; transition: .2s; }
.flex a:hover 	{ text-decoration: none; }
.flex a:not([class])	{ color: #fff; background-color: #518fdc; }
.flex a:not([class]):hover	{ color: #fff; background-color: #02c2a9; }

.flex li:nth-child(1) a	{ color: #fff; background-color: #518fdc; }
.flex li:nth-child(2) a	{ color: #fff; background-color: #2b76d4; }
.flex li:nth-child(3) a	{ color: #fff; background-color: #2568ba; }
.flex li:nth-child(4) a	{ color: #fff; background-color: #2b76d4; }
.flex li:nth-child(5) a	{ color: #fff; background-color: #518fdc; }

/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) { 
}

/* for Tablet */
@media screen and (min-width:768px) { /* and ( max-width:1024px) { */
	.inner > h3 + *	{ margin-top: 2rem; }
}

/* for PC */
@media screen and (min-width:1024px) { /* and ( max-width:1024px) { */
	.grid		{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
	.grid li	{ aspect-ratio: 16/9; }
}


/*------------------------
Liquid Animation
------------------------*/
.blob {
	position: absolute;
	top: 0;
	z-index: -1;
/*
	max-height: 90vh;
	width: 90vw;
*/
}
.blob path	{ animation: blob 7s linear infinite, rot 53s linear infinite; }

@keyframes blob {
	0%	{ d: path("M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z"); }
	25%	{ d: path("M67.8,-97.1C87.8,-78.8,103.8,-58.9,117.4,-34.1C130.9,-9.4,142,20.2,139.5,50.7C137,81.2,120.8,112.6,95.3,150.1C69.8,187.7,34.9,231.3,3.3,226.8C-28.2,222.2,-56.4,169.3,-91.6,134.9C-126.8,100.5,-169,84.6,-179.6,57.1C-190.2,29.7,-169.3,-9.3,-155.2,-49.7C-141,-90.1,-133.7,-132,-109,-148.8C-84.2,-165.6,-42.1,-157.3,-9.1,-144.8C23.9,-132.2,47.8,-115.5,67.8,-97.1Z"); }
	50%	{ d: path("M137.1,-191.3C172,-163.4,190.6,-115.7,197.2,-70.1C203.8,-24.4,198.5,19.2,178.9,51.5C159.3,83.9,125.5,105,93.3,129.6C61.1,154.1,30.6,182.1,1.1,180.6C-28.4,179.1,-56.8,148.2,-81.2,121.1C-105.6,94.1,-126.1,70.8,-141.6,41.6C-157.2,12.4,-168,-22.9,-153.9,-45C-139.8,-67,-100.7,-76,-70.9,-105.5C-41.1,-135,-20.6,-185,15.3,-206C51.1,-227.1,102.3,-219.1,137.1,-191.3Z"); }
	75%	{ d: path("M123.7,-157.1C162.4,-142.2,197.2,-108.8,202.8,-70.8C208.3,-32.9,184.5,9.7,169,54.2C153.6,98.7,146.4,145.2,119.7,162.7C92.9,180.2,46.4,168.6,-1.9,171.1C-50.2,173.7,-100.3,190.4,-122.2,171.3C-144.1,152.3,-137.7,97.5,-144.1,52.7C-150.6,7.9,-169.9,-26.8,-170.5,-64.8C-171,-102.8,-152.8,-144,-121.3,-161.3C-89.7,-178.5,-44.9,-171.8,-1.2,-170.1C42.5,-168.5,85,-172,123.7,-157.1Z"); }
	100%	{ d: path("M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z"); }
}
@keyframes rot {
	fom { transform: rotate(0deg); }
	to	{ transform: rotate(360deg); }
}