@charset "utf-8";

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

   page
         - index
									- outline
									- curriculum
									- laboratory
									- 
         

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


/*--------------------------------------------------------------------------------------------
  index
--------------------------------------------------------------------------------------------*/
.banner-top {
  margin-top: 40px;
  position: relative;
  padding-bottom: 75px;
  /*opacity: 0;*/
}

.bx-wrapper {
  display: flex;
  justify-content: center
}

.bx-viewport {
  text-align: center;
  margin: 0 auto;
  width: 80%!important;
}

.bx-wrapper {
  position: relative;
}

#bxslider img {
  width: 100%;
}

.bx-controls-direction .bx-prev,
.bx-controls-direction .bx-next {
  text-indent: -99999px;
  width: 80px;
  height: 80px;
  position: absolute; 
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.bx-controls-direction .bx-prev {
  right: 3.22%;
  background: url(../image/icon-next-slideshow.png) no-repeat;
  background-size: 80px auto;
}

.bx-controls-direction .bx-next {
  left: 3.22%;
  background: url(../image/icon-prev-slideshow.png) no-repeat;
  background-size: 80px auto;
}

.banner-top .text {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -20px;
  text-align: center;
		z-index: 200;
		font-weight: bold;
}

.banner-top .text .title {
  margin: 0 0 10px 0;
  font-size: 28px;
}

.banner-top .text .desc {
  line-height: 1.8;
}

#focuses {
  padding: 60px 0 0 0;
}

#focuses .info-30 {
  margin-top: 50px;
}

#focuses .info h3 {
  font-size: 40px;
}

#focuses .info .desc {
  font-size: 18px;
  margin: 10px 0 35px 0;
  line-height: 1.8;
		text-align: left;
}

#focuses .info li {
  padding: 45px 2.63% 47px 2.63%;
  text-align: center;
}

#focuses .info-30 li {
  width: 33.3333333333%;
}

#focuses .info img {
  max-width: 100%;
}

#focuses a:hover img:first-child {
	opacity: .8;
}

#focuses .info .photo {
  position: relative;
  padding-bottom: 35px;
}

#focuses .info-50 li:first-child {
  justify-content: flex-end;
}

#focuses .info-50 .frame {
  width: 58%;
  flex-direction: column;
}

#focuses .info .icon {
  position: absolute;
  bottom: 0;
  right: 35px;
  width: 114px;
}

#candidates {
  padding: 88px 0 125px 0;
}

#candidates ul {
  padding-top: 63px;
}

#candidates li {
  width: 49%;
}

#candidates  li:first-child {
  margin-right: 2%;
}

#candidates  li img {
  width: 100%;
}

#candidates a:hover img {
	opacity: .8;
}

#movie {
  padding: 75px 0 92px 0;
}

#movie .slide-movie {
  margin-top: 43px;
}

#movie .slick-slide iframe {
  border: 8px solid rgba(1, 63, 100, 0.26)
}

#movie .slick-prev {
  left: 1%;
  background: url(../image/icon-prev-slideshow.png) no-repeat;
  background-size: 80px auto;
}

#movie .slick-next {
  right: 1%;
  background: url(../image/icon-next-slideshow.png) no-repeat;
  background-size: 80px auto;
}

#movie .slick-arrow {
  z-index: 1;
  width: 80px;
  height: 80px;
}

#movie .slide-movie {
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
}

#movie .slide-movie > li {
	text-align:center;
	margin-bottom:1em;
}

#movie .slide-movie > li p {
text-align: left;
}


#movie .slide-movie .slick-list li iframe {
	display:block;
	margin:0 auto;
}

.slick-prev:before,
.slick-next:before {
	content: "" !important;
}

.slick-dots {
	bottom:-48px !important;
}

#movie .slide-movie .slick-dots li button::before {
	content:'';
	width:16px;
	height:16px;
	background:#013f64;
	border-radius:50%;
}

#index h2 {
	font-family: 'Josefin Sans', sans-serif;
}

#index h2 span {
 font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-weight: bold;
}

#index h2 span::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  width: 250px;
  height: 3px;
  background: linear-gradient(to right, #a7abf2 0%, #85c5e8 100%);
}

#index h2 span {
  position: relative;
  display: block;
  padding-top: 17px;
  margin-top: 3px;
  font-size: 30px;
  color: #013f64;
}

#banner {
	padding: 80px 0;
	background: url(../image/index_banner_back.png) no-repeat center 0;
	background-size: cover;
}

#banner ul {
	width: 98%;
	margin: 0 auto 60px;
	display: flex;
}

#banner ul li {
	width: 25%;
	margin: 0 2%;
}

#banner ul li:nth-child(2n) {
	margin-top: 100px;
}

#banner ul li a img {
	max-width: 100%;
}

#banner ul li a:hover img {
	opacity: .8;
}

#banner p {
	margin: 0 0 40px;
	text-align: center;
	font-weight: bold;
}


#banner .gbtn {
	margin: 0;
}

#indexNews {
 padding: 88px 0 0;
}

#indexNews .newsList {
	width: 1000px;
	margin: 0 auto;
	padding: 63px 0 40px;
}

#indexTop {
text-align: center;
margin: 30px auto -10px;
}

#indexTop a {
display: inline-block;
}

#indexTop a:hover {
opacity: 0.7;
}

#indexTop a img {
max-width: 100%;
height: auto;
}



/*--------------------------------------------------------------------------------------------
  outline
--------------------------------------------------------------------------------------------*/
.outline .catch ul {
	position: relative;
	width: 660px;
	height: 690px;
	margin: 0 auto 80px;
}

.outline .catch ul li {
	position: absolute;
}

.outline .catch ul li a:hover img {
	opacity: .7;
}

.outline .catch ul li:nth-child(1) {
	top: 0;
	left: calc(50% - 105px);
}

.outline .catch ul li:nth-child(1) img {
	width: 210px;
}

.outline .catch ul li:nth-child(2) {
	top: 150px;
	right: 0;
}

.outline .catch ul li:nth-child(2) img {
	width: 276px;
}

.outline .catch ul li:nth-child(3) {
	bottom: 4px;
	left: calc(50% + 17px);
}

.outline .catch ul li:nth-child(3) img {
	width: 266px;
}

.outline .catch ul li:nth-child(4) {
	bottom: 0;
	left: 40px;
}

.outline .catch ul li:nth-child(4) img {
	width: 273px;
}

.outline .catch ul li:nth-child(5) {
	top: 157px;
	left: 0;
}

.outline .catch ul li:nth-child(5) img {
	width: 281px;
}

.outline .pickup {
	background: url(../image/pickup_back.png) no-repeat center 0;
	background-size: 303px;
	text-align: center;
	font-weight: bold;
	font-size: 26px;
	padding: 54px 0 50px;
}

.outline .laboBox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 0 40px;
}

.outline .laboBox .laboinfo {
	width: 50%;
}

.outline .laboBox .laboinfo h3.laboname {
	display: inline-block;
	margin: 0 0 10px !important;
	padding: 0 10px;
	background: url(../image/outline_labo_back.png) repeat 0 0;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.05em;
	border: none !important;
}

.outline .laboBox .laboinfo h3.laboname:before {
	background-color: transparent !important;
}

.outline .laboBox .laboinfo .pop {
	display: block;
	background-color: #FFF;
	margin: 0 0 20px !important;
	padding: 0 10px;
	font-size: 24px;
	font-weight: bold;
}

.outline .laboBox .laboPhoto {
	width: 44%;
	position: relative;
	padding: 30px 0 0;
}

.outline .laboBox .laboPhoto::before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	top: 15px;
	left: -18px;
 background: linear-gradient(-45deg, transparent, transparent 49%, #013f64 49%, #013f64 51%, transparent 51%, transparent);
}

.outline .laboBox .laboPhoto::after {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	bottom: -18px;
	right: -18px;
 background: linear-gradient(135deg, transparent, transparent 49%, #013f64 49%, #013f64 51%, transparent 51%, transparent);
}

.outline .laboBox .laboPhoto img {
	max-width: 100%;
}

.outline .ryouikiMenu {
	width: 1000px;
	margin: 0 auto;
	padding: 64px 0;
}

.outline .ryouikiMenu p {
	margin: 0 0 20px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.outline .ryouikiMenu ul {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.outline .ryouikiMenu ul li {
	margin: 0 1%;
	padding: 0;
	width: 20%;
}

.outline .ryouikiMenu ul li a {
	text-align: center;
	border: 3px solid #D9E3F4;
	padding: 8px;
}

.outline .ryouikiMenu ul li a:hover {
	background-color: #D9E3F4;
}



/*space--------------------------------------------------*/
.f-space {
	padding: 60px 0 0;
}

.f-space .cat {
	padding: 30px 0 0;
	text-align: center;
}

.f-space h2 {
	/*background: url(../image/space_back.png) no-repeat center center;
	background-size: 166px;
	line-height: 191px;*/
	font-size: 30px;
	font-weight: bold;
	position: relative;
	z-index: 10;
	padding: 10px 30px;
	display: inline-block;
	background-color: #D0E7F9;
	width: 400px;
}

.f-space h2::before {
	position: absolute;
	content: "／ 領域 01 ／";
	top: -40px;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 18px;
	font-weight: bold;
}

.f-space .outlineLead {
	min-height: 220px;
	background: url(../image/space_back_left.png) no-repeat 15% center,  url(../image/space_back_right.png) no-repeat 85% center;
	background-size: 161px;
}

.f-space .outlineLead p {
	width: 1000px;
	margin: 0 auto 64px;
	text-align: center;
	line-height: 2.4;
}

.f-space .inner {
	margin: -35px 0 0;
	padding: 100px 0 40px;
	background-color: #F1F8FD;
}



/*particle--------------------------------------------------*/
.f-particle {
	padding: 60px 0 0;
}

.f-particle .cat {
	padding: 30px 0 0;
	text-align: center;
}

.f-particle .cat h2 {
	/*background: url(../image/space_back.png) no-repeat center center;*/
	/*ackground-size: 166px;*/
	font-size: 30px;
	font-weight: bold;
	z-index: 10;
	padding: 10px 30px;
	display: inline-block;
	margin: 0 auto;
	background-color: #B9E0F9;
	position: relative;
	width: 400px;
}

.f-particle .cat h2::before {
	position: absolute;
	content: "／ 領域 02 ／";
	top: -40px;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 18px;
	font-weight: bold;
}

.f-particle .outlineLead {
	min-height: 220px;
	background: url(../image/particle_back_left.png) no-repeat 15% center,  url(../image/particle_back_right.png) no-repeat 85% center;
	background-size: 161px;
}

.f-particle .outlineLead p {
	width: 1000px;
	margin: 0 auto 64px;
	text-align: center;
	line-height: 2.4;
}

.f-particle .inner {
	margin: -35px 0 0;
	padding: 100px 0 40px;
	background-color: #EAF6FD;
}



/*material--------------------------------------------------*/
.f-material {
	padding: 60px 0 0;
}

.f-material .cat {
	padding: 30px 0 0;
	text-align: center;
}

.f-material h2 {
	/*background: url(../image/material_back.png) no-repeat center center;
	background-size: 166px;*/
	font-size: 30px;
	font-weight: bold;
	position: relative;
	z-index: 10;
	padding: 10px 30px;
	display: inline-block;
	margin: 0 auto;
	background-color: #CED6F7;
	position: relative;
	width: 400px;
}

.f-material h2::before {
	position: absolute;
	content: "／ 領域 03 ／";
	top: -40px;
	left: 0;
	right: 0;
	margin: auto;
	font-weight: normal;
	font-size: 18px;
	font-weight: bold;
}

.f-material .outlineLead {
	min-height: 220px;
	background: url(../image/material_back_left.png) no-repeat 15% center,  url(../image/material_back_right.png) no-repeat 85% center;
	background-size: 161px;
}

.f-material .outlineLead p {
	width: 1000px;
	margin: 0 auto 64px;
	text-align: center;
	line-height: 2.4;
}

.f-material .inner {
	margin: -35px 0 0;
	padding: 100px 0 40px;
	background-color: #F0F3FD;
}



/*energy--------------------------------------------------*/
.f-energy {
	padding: 60px 0 0;
}

.f-energy .cat {
	padding: 30px 0 0;
	text-align: center;
}

.f-energy h2 {
	/*background: url(../image/life_back.png) no-repeat center center;
	background-size: 166px;*/
	font-size: 30px;
	font-weight: bold;
	position: relative;
	z-index: 10;
	padding: 10px 30px;
	display: inline-block;
	margin: 0 auto;
	background-color: #A9E3F6;
	position: relative;
	width: 400px;
}

.f-energy h2::before {
	position: absolute;
	content: "／ 領域 04 ／";
	top: -40px;
	left: 0;
	right: 0;
	margin: auto;
	font-weight: normal;
	font-size: 18px;
	font-weight: bold;
}

.f-energy .outlineLead {
	min-height: 220px;
	background: url(../image/energy_back_left.png) no-repeat 15% center,  url(../image/energy_back_right.png) no-repeat 85% center;
	background-size: 161px;
}

.f-energy .outlineLead p {
	width: 1000px;
	margin: 0 auto 64px;
	text-align: center;
	line-height: 2.4;
}

.f-energy .inner {
	margin: -35px 0 0;
	padding: 100px 0 40px;
	background-color: #E5F7FC;
}




/*life--------------------------------------------------*/
.f-life {
	padding: 60px 0 0;
}

.f-life .cat {
	padding: 30px 0 0;
	text-align: center;
}

.f-life h2 {
	/*background: url(../image/life_back.png) no-repeat center center;
	background-size: 166px;*/
	font-size: 30px;
	font-weight: bold;
	position: relative;
	z-index: 10;
	padding: 10px 30px;
	display: inline-block;
	margin: 0 auto;
	background-color: #C8EDDA;
	position: relative;
	width: 400px;
}

.f-life h2::before {
	position: absolute;
	content: "／ 領域 05 ／";
	top: -40px;
	left: 0;
	right: 0;
	margin: auto;
	font-weight: normal;
	font-size: 18px;
	font-weight: bold;
}

.f-life .outlineLead {
	min-height: 220px;
	background: url(../image/life_back_left.png) no-repeat 15% center,  url(../image/life_back_right.png) no-repeat 85% center;
	background-size: 161px;
}

.f-life .outlineLead p {
	width: 1000px;
	margin: 0 auto 64px;
	text-align: center;
	line-height: 2.4;
}

.f-life .inner {
	margin: -35px 0 0;
	padding: 100px 0 40px;
	background-color: #E9F8F0;
}



/*--------------------------------------------------------------------------------------------
  curriculum
--------------------------------------------------------------------------------------------*/
.curriFlow {
	margin: 0;
	padding: 0 0 20px;
	display: flex;
	position: relative;
}

.curriFlow:before {
	position: absolute;
	background-color: #D8E2F8;
	content: "";
	width: 8px;
	height: 100%;
	top: 0;
	left: 60px;
	z-index: -1;
}

.curriFlow.nobtm:before {
	background-color: transparent;
}

.curriFlow .grade {
	width: 200px;
}

.curriFlow .grade p {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
	text-align: center;
	background-color: #7d9fe8;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2 !important;
}

.curriFlow .info {
	width: 800px;
	padding: 20px 0 20px;
}

#second .content .curriFlow .info h3 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	background: linear-gradient(transparent 70%, #F8EED8 70%);
	border: none;
}

#second .content .curriFlow .info h3:before {
	background-color: transparent;
}

.album2 {
	display: flex;
	width: 90%;
	margin: 0 auto 60px;
	justify-content: space-between;
}

.album2 li {
	width: 44%;
	margin: 0;
	position: relative;
}

.album2 li img {
	max-width: 100%;
}

.album2 li::before {
	position: absolute;
	content: "";
	width: 50px;
	height: 50px;
	top: -15px;
	left: -15px;
 background: linear-gradient(-45deg, transparent, transparent 49%, #7d9fe8 49%, #7d9fe8 51%, transparent 51%, transparent);
}

.album2 li::after {
	position: absolute;
	content: "";
	width: 50px;
	height: 50px;
	bottom: -15px;
	right: -15px;
 background: linear-gradient(135deg, transparent, transparent 49%, #7d9fe8 49%, #7d9fe8 51%, transparent 51%, transparent);
}

.curriculumList {
	position: relative;
	margin: 0 0 60px;
	padding: 20px;
	background-color: #FFF;
	display: flex;
	flex-wrap: wrap;
}

.curriculumList:before {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	bottom: -6px;
	right: -5px;
 background: linear-gradient(135deg, transparent, transparent 49%, #7d9fe8 49%, #7d9fe8 51%, transparent 51%, transparent);}

.curriculumList:after {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	top: -4px;
	left: -5px;
 background: linear-gradient(-45deg, transparent, transparent 49%, #7d9fe8 49%, #7d9fe8 51%, transparent 51%, transparent);
}

.curriculumList li {
	width: 32%;
	margin: 0 0 6px;
	padding: 0 8px;
	border-bottom: 1px dotted #CCC;
}

.curriculumList li:nth-of-type(3n-1) {
	margin: 0 2% 6px;
}

.curriTheme {
	margin: 0 0 40px;
	border: 4px solid #E7F3FA;
	padding: 40px 32px 32px;
	border-image: url(../image/border_back.png);
 border-image-slice: 1;
 border-image-repeat: stretch;
	box-shadow: 4px 4px 0 #DDD;
}

#second .content .curriTheme h3 {
	margin: 0 0 20px;
	background-color: #89C2E9;
	border: none;
	border-radius: 10px;
	color: #FFF;
	letter-spacing: 0.05em;
}

#second .content .curriTheme h3:before {
	background-color: transparent;
  content: "";
  position: absolute;
  top: 100%;
  left: 80px;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #89C2E9;
		width: auto;
		height: auto;
}

#second .content .curriTheme p {
	margin: 0 0 20px;
}

#second .content .curriTheme .door {
	display: flex;
}

#second .content .curriTheme .door li {
	width: 144px;
	margin-right: 40px;
}

#second .content .curriTheme .door a {
	display: inline-block;
	padding: 0 0 0 20px;
	background: url(../image/icon_mag.png) no-repeat 0 4px;
	background-size: 15px;
}


/*--------------------------------------------------------------------------------------------
  laboratory
--------------------------------------------------------------------------------------------*/
.staffBox {
	display: flex;
	justify-content: space-between;
}

.staffBox .names {
	width: 18%;
}

.staffBox .names ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.staffBox .names ul li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #CCC;
}

.staffBox .names ul li a {
	display: block;
	padding: 8px;
	transition: 0.3s;
	background: url(../image/arrow-01.png) no-repeat 94% center;
	background-size: 8px;
	text-decoration: none !important;
}

.staffBox .names ul li a:hover {
	background: url(../image/arrow-01.png) no-repeat 98% center;
	background-size: 8px;
}

.staffBox .photos {
	width: 80%;
}

.staffBox .photos .personalBox {
	border-bottom: 1px dotted #CCC;
}

.staffBox .photos .personalBox .personal {
	display: flex;
	align-items: center;
}

.staffBox .photos .personalBox .personal .pic {
	width: 100px;
	margin-right: 20px;
	position: relative;
}

.staffBox .photos .personalBox .personal .pic:after {
	content: "";
	width: 10px;
	height: 10px;
	bottom: -5px;
	right: -5px;
	background-color: #7D9FE8;
	position: absolute;
}


.staffBox .photos .personalBox .personal img {
	max-width: 100%;
	height: auto;
}

.staffBox .photos .personalBox .personal dt {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 4px;
}

.staffBox .photos .personalBox .personal dt span {
	font-weight: normal;
	font-size: 14px;
	margin-left: 8px;
}

.staffBox .photos .personalBox .personal li {
	display: inline-block;
	width: 120px;
	padding: 1px 0;
	text-align: center;
	font-size: 14px;
	margin-right: 4px;
}

.staffBox .photos .personalBox .personal li.space {
	background-color: #D0E7F9;
}

.staffBox .photos .personalBox .personal li.particle {
	background-color: #D0E7F9;
}

.staffBox .photos .personalBox .personal li.material {
	background-color: #CED6F7;
}

.staffBox .photos .personalBox .personal li.energy {
	background-color: #A9E3F6;
}

.staffBox .photos .personalBox .personal li.life {
	background-color: #C8EDDA;
}

.staffBox .photos .personalBox .personal li.bme {
	background-color: #EEE;
}

.staffBox .photos .personalBox .personal li.ipg {
	background-color: #D5E2EC;
	width: 220px;
}

.staffBox .photos .personalBox a {
	padding: 20px;
	transition: 0.5s;
	text-decoration: none !important;
}

.staffBox .photos .personalBox a:hover {
	background-color: #F0F7FD;
}

.staffBox .labodetail {
	width: 80%;
}

.staffBox .labodetail .firstBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	margin-bottom: 40px;
}

.staffBox .labodetail .firstBox .photo {
	width: 20%;
}

.staffBox .labodetail .firstBox .photo img {
	max-width: 100%;
	height: auto;
}

#second .content .staffBox .labodetail .firstBox .profile {
	width: 76%;
	line-height: 1.4;
}

#second .content .staffBox .labodetail .firstBox .profile p {
	margin: 0;
	font-weight: bold;
}

#second .content .staffBox .labodetail .firstBox .profile h2 {
	font-size: 32px;
	text-align: left;
	margin: -4px 0 12px;
}

#second .content .staffBox .labodetail .firstBox .profile h2 span {
	color: #666;
	font-size: 20px;
	margin-left: 20px;
	font-weight: 400;
	text-transform: none !important;
}

#second .content .staffBox .labodetail .firstBox ul.link li {
	margin: 0 32px 8px 0;
	display: inline-block;
}

#second .content .staffBox .labodetail .firstBox ul.link li a {
	text-decoration: none;
	padding-left: 26px;
	display: inline-block;
}

#second .content .staffBox .labodetail .firstBox ul.link li a:hover {
	text-decoration: underline;
}

#second .content .staffBox .labodetail .firstBox ul.link li.web a {
	background: url(../image/icon_web.png) no-repeat 0 0;
	background-size: 20px;
}

#second .content .staffBox .labodetail .firstBox ul.link li.db a {
	background: url(../image/icon_db.png) no-repeat 0 0;
	background-size: 20px;
}

#second .content .staffBox .labodetail .firstBox ul.cat {
	margin: 0 0 12px;
}

#second .content .staffBox .labodetail .firstBox ul.cat li {
	display: inline-block;
	width: 120px;
	padding: 1px 0;
	text-align: center;
	font-size: 14px;
	margin-right: 4px;
	}

#second .content .staffBox .labodetail .firstBox ul.cat li.space {
	background-color: #D0E7F9;
}

#second .content .staffBox .labodetail .firstBox ul.cat li.particle {
	background-color: #D0E7F9;
}

#second .content .staffBox .labodetail .firstBox ul.cat li.material {
	background-color: #CED6F7;
}

#second .content .staffBox .labodetail .firstBox ul.cat li.energy {
	background-color: #A9E3F6;
}

#second .content .staffBox .labodetail .firstBox ul.cat li.life {
	background-color: #C8EDDA;
}

#second .content .staffBox .labodetail .firstBox ul.cat li.bme {
	background-color: #EEE;
}

#second .content .staffBox .labodetail .firstBox ul.cat li.ipg {
	background-color: #D5E2EC;
	width: 220px;
}

.staffBox .labodetail .secondBox {
	padding: 0 40px 20px;
}

.staffBox .labodetail .secondBox h3 {
	position: relative;
	margin: 0 !important;
	padding: 0 0 0 22px !important;
	border: none !important;
}

.staffBox .labodetail .secondBox h3:before {
	background-color: transparent !important;
}

.staffBox .labodetail .secondBox h3:after {
	position: absolute;
	top: 7px;
	left: 0;
	width: 16px;
	height: 16px;
	content: "";
	background-color: #7d9fe8;
	border-radius: 50%;
}

.staffBox .labodetail .secondBox p {
	position: relative;
	margin: 0 0 24px !important;
	padding: 0 0 20px 20px;
}

.staffBox .labodetail .secondBox p:before {
	position: absolute;
	top: -8px;
	left: 8px;
	background-color: #CCC;
	width: 1px;
	height: 100%;
	content: "";
}

.staffBox .labodetail .thirdBox {
	padding: 0 20px;
}

.staffBox .labodetail .thirdBox a {
	display: inline-block;
}

.staffBox .labodetail .thirdBox h3 {
	position: relative;
	margin: 0 0 20px;
	padding: 4px 8px !important;
	background-color: #F0F8FD !important;
	border: none !important;
}

.staffBox .labodetail .thirdBox h3:before {
	position: absolute;
	content: "";
	top: -1px;
	left: 0;
	width: 60px;
	height: 2px;
	background-color: #8DC8EF;
}

#second .content .thirdBox p {
	margin: 0 0 30px;
}

.staffBox .labodetail .thirdBox ol {
	margin: 0 0 40px;
}

.staffBox .labodetail .thirdBox ol li {
	list-style: decimal;
	margin: 0 0 10px;
}

.staffBox .labodetail .thirdBox ul {
	margin: 0 0 40px 40px;
}

.staffBox .labodetail .thirdBox ul li {
	list-style: disc;
}

.update {
	margin: 0 !important;
	text-align: right;
}

.album2-2 {
	display: flex;
	width: 90%;
	margin: 0 auto 60px;
}

.album2-2 li {
	width: 44%;
	margin: 0 3%;
	position: relative;
	list-style: none !important;
}

.album2-2 li img {
	display: block;
	max-width: 100%;
	margin: 0 auto 10px;
}

/*--------------------------------------------------------------------------------------------
  skill
--------------------------------------------------------------------------------------------*/
.jyouken {
	margin: 0 0 40px !important;
}

.skillList {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.skillList li {
	width: 46%;
	margin: 0 2%;
	padding: 8px 0 8px 38px;
	background: url(../image/icon_check.png) no-repeat 8px 9px;
	background-size: 20px;
	border-bottom: 1px dotted #CCC;
}

/*--------------------------------------------------------------------------------------------
  news
--------------------------------------------------------------------------------------------*/
.newsList {
	margin: 0 0 40px;
}

.newsList li {
	border-bottom: 1px dotted #CCC;
}

.newsList li a {
	padding: 12px;
	text-decoration: none !important;
}

.newsList li a span {
	position: relative;
	padding-left: 1em;
	margin-right: 3em;
}

.newsList li a span:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 20px;
	background-color: #7d9fe8;
	content: "";
}

.newsList li a:hover {
	background-color: #E7F3FA;
}

/*--------------------------------------------------------------------------------------------
  news_detail
--------------------------------------------------------------------------------------------*/
.newsDetail {
	margin: 0 0 40px;
	border: 4px solid #E7F3FA;
	padding: 56px 32px 32px;
	border-image: url(../image/border_back.png);
 border-image-slice: 1;
 border-image-repeat: stretch;
}

#second .content .newsDetail .date {
	margin: 0 0 5px !important;
	font-size: 16px;
	font-weight: 400;
}

#second .content .newsDetail h2 {
	font-size: 24px;
	text-align: left;
	line-height: 1.4;
}

.newsDetail a {
	display: inline-block;
}


/*--------------------------------------------------------------------------------------------
  contact
--------------------------------------------------------------------------------------------*/
#second .content .contact {
	display: flex;
	justify-content: center;
}

#second .content .contact li {
	margin: 0 20px 40px;
}

#second .content .contact a {
	display: block;
	width: 300px;
	padding: 8px;
	border: 1px solid #013f64;
	color: #FFF;
	text-decoration: none;
	background: url(../image/arrow-02.png) #013f64 no-repeat 96% center;
	background-size: 10px;
}

#second .content .contact a:hover {
	background: url(../image/arrow-03.png) #FFF no-repeat 96% center;
	background-size: 10px;
	color: #013f64;
}



/*--------------------------------------------------------------------------------------------
  for
--------------------------------------------------------------------------------------------*/
.forBnrMenu {
	display: flex;
	width: 90%;
	margin: 0 auto 60px;
	justify-content: center;
}

.forBnrMenu li {
	width: 48%;
	margin: 0 1%;
}

.forBnrMenu li img {
	max-width: 100%;
}

.forBnrMenu li a:hover img {
	opacity: 0.8;
}

.forMenus {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.forMenus .menu {
	width: 48%;
	margin-bottom: 60px;
}

#second .content .forMenus .menu h2 {
	margin: 0 0 10px;
	border: 1px solid #CCC;
	text-align: center;
	font-size: 18px;
	padding: 10px;
}

#second .content .forMenus .menu ul {
	background-color: #F3F2F1;
	padding: 20px;
}

#second .content .forMenus .menu ul li {
	margin: 0 0 6px;
}

#second .content .forMenus .menu ul li a {
	background: url(../image/arrow-01.png) no-repeat 0 6px;
	background-size: 8px;
	padding: 0 0 0 16px;
	display: block;
	text-decoration: none;
}

#second .content .forMenus .menu ul li a:hover {
	text-decoration: underline;
}

#second .content .forMenus .menu ul li ul {
	margin: 6px 0 0;
	padding: 0 0 0 40px;
}

#second .content .forMenus .menu ul li ul li {
	list-style: disc;
	margin: 0;
	padding: 0;
}

#second .content .forMenus .menu ul li ul li a {
	background-image: none;
	padding: 0;
}


/*--------------------------------------------------------------------------------------------
  student_corner
--------------------------------------------------------------------------------------------*/
#second .content #student_corner h3 {
	margin: 0 0 10px;
	padding: 4px;
	border-bottom: 3px #80D95E double;
	font-weight: bold;
	border-top: none;
}

#second .content #student_corner h3:before {
	background-color: transparent;
}

#student_corner .labBox {
	margin-bottom: 60px;
}

#student_corner .labBox .labDetail {
	display: flex;
	justify-content: space-between;
}

#student_corner .labBox .labDetail .text {
	width: 42%;
}

#student_corner .labBox .labDetail .text table {
	width: 100%;
}

#student_corner .labBox .labDetail .text table th {
	display: block;
	width: 100%;
	background-color: #E7F3BE;
	text-align: left;
	font-weight: 400;
	padding: 4px;
}

#student_corner .labBox .labDetail .text table td {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 4px;
}

#student_corner .labBox .labDetail .movieBox {
	width: 54%;
}

#student_corner .labBox .labDetail .movieBox .movie {
 position: relative;
 width: 100%;
	padding-top: 56.25%;
}

#student_corner .labBox .labDetail .movieBox .movie iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}


/*--------------------------------------------------------------------------------------------
  openlab
--------------------------------------------------------------------------------------------*/

#openlab .olLead {
	text-align: center;
	font-weight: 600;
	font-size: 34px;
	color: #64b3f4;
	margin: 0 0 10px !important;
}

#openlab .olLead2 {
	position: relative;
	width: 600px;
	margin: 0 auto 30px !important;
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
}

#openlab .olLead2:before, #openlab .olLead2:after { 
 position: absolute;
 top: 0;
 content:'';
 width: 8px;
 height: 100%;
 display: inline-block;
}

#openlab .olLead2:before {
 border-left: solid 2px #64b3f4;
 border-top: solid 2px #64b3f4;
 border-bottom: solid 2px #64b3f4;
 left: 0;
}

#openlab .olLead2:after {
 content: '';
 border-top: solid 2px #64b3f4;
 border-right: solid 2px #64b3f4;
 border-bottom: solid 2px #64b3f4;
 right: 0;
}

#openlab .olImg {
	margin: 0 0 40px;
	text-align: center;
}

#openlab .olImg img {
	width: 600px;
	height: auto;
}

#openlab .labBox {
	margin: 0 0 40px;
}

#second .content #openlab .labBox h3 {
	position: relative;
	margin: 0 0 10px;
	padding: 8px 4px;
	background-color: #61A3AA;
	color:#FFF;
	font-weight: 600;
	font-size: 18px;
	border-radius: 6px;
	border: none;
}

#openlab .labBox h3:before {
	background-color: transparent;
}

#openlab .labBox h3:after {
	content: "Laboratory";
	position: absolute;
	bottom: -6px;
	right: 0;
	color: rgba(255,255,255, 0.5);
	font-size: 30px;
	font-family: Verdana, Geneva, sans-serif;
}

#openlab .labBox .labDetail {
	display: flex;
	justify-content: space-between;
}

#openlab .labBox .labDetail .text {
	width: 42%;
}

#openlab .labBox .labDetail .text table {
	width: 100%;
}

#openlab .labBox .labDetail .text table th {
	display: block;
	width: 100%;
	background-color: #DFEDEE;
	text-align: left;
	font-weight: bold;
	padding: 0 4px;
}

#openlab .labBox .labDetail .text table td {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

#openlab .labBox .labDetail .movieBox {
	width: 54%;
}

#openlab .labBox .labDetail .movieBox .movie {
 position: relative;
 width: 100%;
	padding-top: 56.25%;
}

#openlab .labBox .labDetail .movieBox .movie iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}

/*--------------------------------------------------------------------------------------------
  event
--------------------------------------------------------------------------------------------*/
#event .eventBox {
	margin: 0 0 40px;
}

#event .eventBox h3 {
	position: relative;
	margin: 0 0 20px;
	padding: 8px;
	background-color: #a7abf2;
	color:#FFF;
	font-weight: 600;
	font-size: 20px;
	border-radius: 6px;
	border: none;
	letter-spacing: 0.04em;
}

#event .eventBox h3:before {
	background-color: transparent;
}

#event .eventBox h3:after {
	content: "Event";
	position: absolute;
	bottom: -6px;
	right: 0;
	color: rgba(255,255,255, 0.5);
	font-size: 30px;
	font-family: Verdana, Geneva, sans-serif;
}

#event .eventBox .eventDetail {
	display: flex;
	justify-content: space-between;
}

#event .eventBox .eventDetail .text {
	width: 42%;
}

#event .eventBox .eventDetail .text table {
	width: 100%;
}

#event .eventBox .eventDetail .text table th {
	display: block;
	width: 100%;
	background-color: #DFEDEE;
	text-align: left;
	font-weight: bold;
	padding: 0 4px;
}

#event .eventBox .eventDetail .text table td {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

#event .eventBox .eventDetail .movieBox {
	width: 50%;
}

#event .eventBox .eventDetail .movieBox .movie img {
	max-width: 100%;
	height: auto;
	border-radius: 10px 0 0 10px;
}


/*add20250813*/
#bxslider {
width: 80%;
margin: 0 auto;
}

#bxslider .slick-prev {
  left: -90px;
  background: url(../image/icon-prev-slideshow.png) no-repeat;
  background-size: 80px auto;
}

#bxslider .slick-next {
  right: -90px;
  background: url(../image/icon-next-slideshow.png) no-repeat;
  background-size: 80px auto;
}

#bxslider .slick-arrow {
  z-index: 1;
  width: 80px;
  height: 80px;
}