@charset "utf-8";

/* home
========================================================================== */

header {
	background: #fff;
}

/* home
========================================================================== */

#home {
	margin: 0 0 0 226px;
}

#home h2 {
	margin-bottom: 75px;
	color: #203880;
	font-size: 257%; /* 36px */
	font-weight: 700;
	letter-spacing: .05em;
	position: relative;
}
#home h2:before {
	width: 60px;
	height: 2px;
	margin-left: -30px;
	background: #203880;
	content: "";
	position: absolute;
	top: -25px;
	left: 50%;
	display: block;
}

#home h2 br {
	display: none;
}

#home div.subtitle {
	margin-bottom: 55px;
	color: #203880;
	font-size: 86%; /* 12px */
	font-weight: 700;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#home {
		margin: 0;
	}

	#home h2 {
		margin-bottom: 75px;
		font-size: 170%; /* 22px */
	}
	#home h2:before {
		width: 30px;
		height: 1px;
		margin-left: -15px;
		top: -20px;
	}

	#home h2 br {
		display: block;
	}

	#home div.subtitle {
		margin-bottom: 35px;
		font-size: 100%; /* 13px */
	}
}


/* scroll
-------------------------------------------------------------------------- */

#home div.scroll {
	width: 50px;
	margin-left: -25px;
	line-height: 1;
	text-align: center;
	position: absolute;
	bottom: -30px;
	left: 50%;
	z-index: 5;
	animation: img_scroll 3s ease infinite;
	transform-origin: 50% 50%;
}

@keyframes img_scroll {
  0%    { transform:translate(0,-7px) }
  12.5% { transform:translate(0,7px) }
  25%   { transform:translate(0,-7px) }
  37.5% { transform:translate(0,7px) }
  50%   { transform:translate(0,-7px) }
  62.5% { transform:translate(0,7px) }
  75%   { transform:translate(0,-7px) }
  87.5% { transform:translate(0,7px) }
  100%   { transform:translate(0,-7px) }
}

#home div.scroll img.sp {
	display: none;
}

#visual div.scroll {
	bottom: -50px;
}
#visual div.scroll img {
	margin-bottom: 10px;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#home div.scroll {
		width: 12px;
		margin-left: -6px;
		bottom: -18px;
	}

	#home div.scroll img {
		width: 100%;
	}
	#home div.scroll img.pc {
		display: none;
	}
	#home div.scroll img.sp {
		display: block;
	}

	#visual div.scroll {
		display: none;
	}

	#research div.scroll {
		bottom: 27px;
	}
}



/* parallax
========================================================================== */

#parallax {
	background: url(../img/home/bg.jpg) center center fixed no-repeat;
	background-size: cover;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#parallax {
		background: none;
	}
}



/* visual
========================================================================== */

#visual {
	position: relative;
}

#visual div.bxslider {
	position: relative;
	top: 40px;
	z-index: 1;
}

#visual div.bxslider div {
	width: 100%;
	height: 100vh;
	max-height: 756px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
#visual div.bxslider div.slide_01 { background-image: url(../img/home/slide_photo_01.jpg); }
#visual div.bxslider div.slide_02 { background-image: url(../img/home/slide_photo_02.jpg); }
#visual div.bxslider div.slide_03 { background-image: url(../img/home/slide_photo_03.jpg); }
#visual div.bxslider div.slide_04 { background-image: url(../img/home/slide_photo_04.jpg); }

#visual div.bxslider div p {
	width: 100%;
	color: #fff;
	font-size: 286%; /* 40px */
	font-weight: 700;
	letter-spacing: .1em;
	position: absolute;
	top: 50%;
 	left: 50%;
 	-webkit-transform : translate(-50%,-50%);
 	transform : translate(-50%,-50%);
}
#visual div.bxslider div.slide_01 p {
	color: #333;
}

#visual div.bxslider div p br.sp {
	display: none;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#visual div.bxslider {
		top: 0;
	}

	#visual div.bxslider div {
		height: 385px;
	}

	#visual div.bxslider div p {
		font-size: 192%; /* 23px */
	}

	#visual div.bxslider div p br.sp {
		display: block;
	}
}



/* navi (home)
========================================================================== */

#sp-nav_home {
	display: none;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#sp-nav_home {
		display: block;
	}

	#sp-nav_home > ul {
		border-top: 1px solid #203880;
		font-size: 142%; /* 17px */
		font-weight: 500;
		text-align: left;
	}

	#sp-nav_home > ul li a,
	#sp-nav_home > ul li.sp-nav_home_sub span {
		padding: 1em 30px;
		background: #fff;
		border-bottom: 1px solid #203880;
		cursor: pointer;
		display: block;
	}

	#sp-nav_home > ul li.sp a {
		background: #f2f2f2;
	}

	#sp-nav_home > ul li.sp-nav_home_sub span {
		background: url(../img/common/icon/plus.svg) no-repeat right 25px center;
		background-size: 10px;
	}
	#sp-nav_home > ul li.sp-nav_home_sub span.current {
		background-image: url(../img/common/icon/minus.svg);
	}

	#sp-nav_home > ul li.sp-nav_home_sub ul {
		display: none;
	}
	#sp-nav_home > ul li.sp-nav_home_sub ul li a {
		background: #8f9bbf;
		color: #fff;
	}
}



/* research
========================================================================== */

#research {
	padding: 160px 0 100px;
	position: relative;
}

#research_inner {
	width: 810px;
	margin: 0 auto;
}

#research ul.bxslider_research {
	text-align: left;
	position: relative;
	z-index: 1;
}

.bx-wrapper {
	position: relative;
}

.bx-wrapper .bx-prev {
	background: url(../img/home/controls.png) no-repeat 0 0;
	left: -60px;
}

.bx-wrapper .bx-next {
	background: url(../img/home/controls.png) no-repeat -14px 0;
	right: -60px;
}

.bx-wrapper .bx-controls-direction a {
	width: 14px;
	height: 38px;
	margin-top: -19px;
	text-indent: -9999px;
	position: absolute;
	top: 50%;
	outline: 0;
	z-index: 1;
}

#research ul li {
	width: 250px;
	padding: 5px;
	position: relative;
}

#research ul li a {
	width: 236px;
	height: 282px;
	padding: 5px;
	background: #fff;
	border: 2px solid #203880;
	display: block;
}
#research ul li span {
	display: block;
}

#research ul li span.research_label {
	width: 43px;
	height: 24px;
	padding: 0 5px;
	background-repeat: no-repeat;
	color: #fff;
	font-size: 79%; /* 11px */
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
}
#research ul li span.research_label_electrical_eng     { background-image: url(../img/research/research_label_electrical_eng.png); }
#research ul li span.research_label_communications_eng { background-image: url(../img/research/research_label_communications_eng.png); }
#research ul li span.research_label_electronic_eng     { background-image: url(../img/research/research_label_electronic_eng.png); }
#research ul li span.research_label_applied_physics    { background-image: url(../img/research/research_label_applied_physics.png); }
#research ul li span.research_label_computer_science   { background-image: url(../img/research/research_label_computer_science.png); }
#research ul li span.research_label_biomedical_eng     { background-image: url(../img/research/research_label_biomedical_eng.png); }

#research ul li span.research_img {
	margin-bottom: 10px;
}
#research ul li span.research_img img {
	width: 100%;
}

#research ul li span.research_title {
	font-weight: 500;
}

#research ul li span.research_name {
	font-size: 79%; /* 11px */
	position: absolute;
	bottom: 12px;
	left: 12px;
}

/* pc (small) */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	#research_inner {
		width: 535px;
	}
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#research {
		background: #e2e1e1;
		padding: 55px 0 90px;
	}

	#research_inner {
		width: 260px;
	}

	.bx-wrapper .bx-prev {
		background: url(../img/home/sp-controls.png) no-repeat 0 0;
		left: -30px;
	}

	.bx-wrapper .bx-next {
		background: url(../img/home/sp-controls.png) no-repeat -8px 0;
		right: -30px;
	}

	.bx-wrapper .bx-controls-direction a {
		width: 8px;
		height: 10px;
		margin-top: -5px;
	}

	#research ul li span.research_label {
		font-size: 85%; /* 11px */
	}

	#research ul li span.research_name {
		font-size: 85%; /* 11px */
	}
}


/* btn
-------------------------------------------------------------------------- */

#research div.btn {
	margin-top: 20px;
}
#research div.btn a {
	width: 228px;
	height: 50px;
	margin: 0 auto;
	background: #fff;
	border: 2px solid #203880;
	border-radius: 7px;
	color: #203880;
	line-height: 50px;
	display: block;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#research div.btn {
		margin-top: 45px;
	}
	#research div.btn a {
		width: 195px;
		height: 40px;
		line-height: 40px;
	}
}



/* news
========================================================================== */

#news {
	padding: 130px 0;
	position: relative;
}
#news:before {
	width: 100%;
	height: 100%;
	background: url(../img/home/bg_news.png) bottom center;
	background-size: contain;
    mix-blend-mode: multiply;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: .95;
}

#news h2 {
	color: #fff;
	position: relative;
	z-index: 5;
}
#news h2:before {
	background: #fff;
}

#news dl {
	width: 670px;
	margin: 0 auto;
	padding: 75px 115px;
	background: #fff;
	text-align: left;
	position: relative;
	z-index: 5;
}

#news dl dt {
	width: 85px;
	padding: 1em 0;
	float: left;
	clear: both;
}

#news dl dd {
	padding: 1em 0 1em 115px;
	border-bottom: 1px solid #bebdbd;
	position: relative;
}

#news dl dd:before {
	width: 2px;
	height: calc(100% - 2em);
	background: #203880;
	content: "";
	position: absolute;
	top: 1em;
	left: 85px;
	display: block;
}
#news dl dd.cat_news_media:before   { background: #FF8C00; }/*元の色　#ff7000 */
#news dl dd.cat_news_award:before   { background: #CCCC33; }/*元の色　#82027f */
#news dl dd.cat_news_lecture:before { background: #3e1485; }
#news dl dd.cat_news_event:before   { background: #BA55D3; }/*元の色　#3f1487 */
#news dl dd.cat_news_update:before  { background: #4d4d4d; }
#news dl dd.cat_news_member:before   { background: #008BBB; }
#news dl dd.cat_news_other:before   { background: #808080; }/*元の色　#8daab2 */

#news dl dd span {
	display: block;
}
#news dl dd span.news_date {
	color: #a19f9e;
}
#news dl dd span.news_title a {
	color: #787575;
	text-decoration: underline;
}

/* pc (small) */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	#news dl {
		width: 640px;
		padding: 60px;
	}
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#news {
		padding: 0 0 75px;
		position: relative;
	}
	#news:before {
		background-image: none;
		background-color: #fff;
	    mix-blend-mode: normal;
		opacity: 1;
	}

	#news h2 {
		margin-bottom: 0;
		padding: 60px 0 45px;
		background: url(../img/home/bg_news.png) no-repeat;
		background-size: cover;
		color: #fff;
		position: relative;
		z-index: 5;
	}
	#news h2:before {
		margin-top: 0;
		top: 45px;
	}

	#news dl {
		width: auto;
		padding: 52px 25px 0;
	}

	#news dl dt {
		display: none;
	}

	#news dl dd {
		margin-bottom: 2em;
		padding: 1em 0 2em;
		font-size: 93%; /* 12px */
	}

	#news dl dd:before {
		width: 32px;
		height: 3px;
		top: 0;
		left: 0;
	}
}



/* btn
-------------------------------------------------------------------------- */

#news div.btn {
	margin-top: 20px;
	position: relative;
	z-index: 5;
}
#news div.btn a {
	width: 228px;
	height: 50px;
	margin: 0 auto;
	background: #fff;
	border: 2px solid #203880;
	border-radius: 7px;
	color: #203880;
	line-height: 50px;
	display: block;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#news div.btn {
		margin-top: 35px;
	}
	#news div.btn a {
		width: 195px;
		height: 40px;
		line-height: 40px;
	}
}



/* video
========================================================================== */

#video {
	padding: 130px 0 100px;
}

#video iframe {
	width: 480px;
	height: 270px;
}

/* phones & tablet */
@media only screen and (max-width: 1023px) {
	#video {
		padding: 90px 0 75px;
		background: #ededed;
	}

	#video h2 {
		margin-bottom: 25px;
	}

	#video iframe {
		width: 320px;
		height: 180px;
	}
}