@charset "utf-8";

/* Google Fonts
========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap');



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

#visual {
	width: 100%;
	height: 600px;
	background: #3b3b3a;
	overflow: hidden;
	position: relative;
}


/* phones */
@media only screen and (max-width: 767px) {
	#visual {
		height: 200px;
	}
}


/* contents
-------------------------------------------------------------------------- */

#visual_contents {
	width: 100%;
	max-width: 960px;
	margin-left: -480px;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 101;
	zoom: 1;
}
#visual_contents:after {
	content:"";
	display: block;
	clear: both;
}
#visual_contents li {
	width: 33.333%;
	height: 170px;
	float: left;
}
#visual_contents li a {
	color: #fff;
}

#visual_contents li h2 {
	font-family: 'Lato', sans-serif;
	font-size: 171%; /* 24px */
	font-weight: 400;
}
#visual_contents li h3 {
	padding-bottom: 50px;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

#visual_contents li p {
	margin-top: -30px;
	margin-bottom: 15px;
	padding: 0 20px;
	text-align: left;
	display: none;
}
#visual_contents p.learn_more {
	margin-top: 0;
}
#visual_contents p.learn_more a.learn_more {
	padding: 0 25px 0 0;
	background: url(../../img/common/learn_more.svg) no-repeat center right;
	background-size: 20px;
}

#visual_contents li img {
	width: 100px;
	height: 100px;
	margin: -50px 0 25px;
}

#visual_contents li.spintronics {
	background: -moz-linear-gradient(top right, rgba(30,173,240,.7), rgba(10,230,96,.7));
	background: -webkit-linear-gradient(top right, rgba(30,173,240,.7), rgba(10,230,96,.7));
	background: linear-gradient(to bottom left, rgba(30,173,240,.7), rgba(10,230,96,.7));
}
#visual_contents li.ai_hardware {
	background: -moz-linear-gradient(top right, rgba(255,200,49,.8), rgba(240,69,121,.8));
	background: -webkit-linear-gradient(top right, rgba(255,200,49,.8), rgba(240,69,121,.8));
	background: linear-gradient(to bottom left, rgba(255,200,49,.8), rgba(240,69,121,.8));
}
#visual_contents li.power_electronics {
	background: -moz-linear-gradient(top right, rgba(157,0,198,.7), rgba(1,0,236,.7));
	background: -webkit-linear-gradient(top right, rgba(157,0,198,.7), rgba(1,0,236,.7));
	background: linear-gradient(to bottom left, rgba(157,0,198,.7), rgba(1,0,236,.7));
}

#visual_contents li.spintronics.active {
	background: -moz-linear-gradient(top right, #1eadf0, #0ae660);
	background: -webkit-linear-gradient(top right, #1eadf0, #0ae660);
	background: linear-gradient(to bottom left, #1eadf0, #0ae660);
}
#visual_contents li.ai_hardware.active {
	background: -moz-linear-gradient(top right, #ffc831, #f04579);
	background: -webkit-linear-gradient(top right, #ffc831, #f04579);
	background: linear-gradient(to bottom left, #ffc831, #f04579);
}
#visual_contents li.power_electronics.active {
	background: -moz-linear-gradient(top right, #9d00c6, #0100ec);
	background: -webkit-linear-gradient(top right, #9d00c6, #0100ec);
	background: linear-gradient(to bottom left, #9d00c6, #0100ec);
}

#visual_contents li.active {
	height: 300px;
	margin-top: -130px;
}
#visual_contents li.active p {
	display: block;
}

#spintronics,
#ai_hardware,
#power_electronics {
	width: 100%;
	height: 600px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: 100;
}

#spintronics {
	background-image: url(../../img/index/spintronics.jpg);
}
#ai_hardware {
	background-image: url(../../img/index/ai_hardware.jpg);
}
#power_electronics {
	background-image: url(../../img/index/power_electronics.jpg);
}

#spintronics, #ai_hardware, #power_electronics, [aria-hidden="false"] {
    animation: anime_zoom 7s linear;
}
#spintronics, #ai_hardware, #power_electronics, [aria-hidden="true"] {
    transform: scale(1.1);
}

@keyframes anime_zoom {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}

#visual_text {
	margin-top: -600px;
	margin-bottom: 240px;
	position: relative;
	z-index: 102;
}
#visual_text p {
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 386%; /* 54px */
	font-weight: bold;
	line-height: 360px;
	text-shadow: 0 0 7px #000;
}

/* tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#visual_contents {
		max-width: auto;
		margin-left: 0;
		left: 0;
	}

	#visual_contents li {
		height: 150px;
	}

	#visual_contents li h2 {
		font-size: 154%; /* 20px */
	}
	#visual_contents li h3 {
		font-size: 85%; /* 11px */
	}

	#visual_contents li img {
		width: 80px;
		height: 80px;
		margin: -40px 0 20px;
	}

	#visual_contents li.active {
		height: 300px;
		margin-top: -150px;
	}
}

/* phones */
@media only screen and (max-width: 767px) {
	#visual_contents {
		display: none;
	}

	#spintronics,
	#ai_hardware,
	#power_electronics {
		height: 200px;
		position: absolute;
		top: 0;
		left: 0;
	}

	#visual_text {
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	#visual_text p {
		font-size: 123%; /* 16px */
		line-height: 200px;
	}
}



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

#visual_nav {
	display: none;
}

/* phones */
@media only screen and (max-width: 767px) {
	#visual_nav {
		text-align: left;
		display: block;
	}
	#visual_nav a {
		color: #fff;
	}

	#visual_nav li {
		padding: 10px;
		clear: both;
		zoom: 1;
	}
		#visual_nav li:after {
		content:"";
		display: block;
		clear: both;
	}
	#visual_nav li h2 {
		font-family: 'Lato', sans-serif;
		font-size: 154%; /* 20px */
		font-weight: 400;
	}
	#visual_nav li h3 {
		font-size: 85%; /* 11px */
		font-weight: 400;
	}

	#visual_nav li img {
		width: 50px;
		height: 50px;
		margin: 0 10px 0 0;
		float: left;
	}

	#visual_nav li.spintronics {
		background: -moz-linear-gradient(top right, #1eadf0, #0ae660);
		background: -webkit-linear-gradient(top right, #1eadf0, #0ae660);
		background: linear-gradient(to bottom left, #1eadf0, #0ae660);
	}
	#visual_nav li.ai_hardware {
		background: -moz-linear-gradient(top right, #ffc831, #f04579);
		background: -webkit-linear-gradient(top right, #ffc831, #f04579);
		background: linear-gradient(to bottom left, #ffc831, #f04579);
	}
	#visual_nav li.power_electronics {
		background: -moz-linear-gradient(top right, #9d00c6, #0100ec);
		background: -webkit-linear-gradient(top right, #9d00c6, #0100ec);
		background: linear-gradient(to bottom left, #9d00c6, #0100ec);
	}
}



/* pickup
========================================================================== */

#pickup {
	width: 100%;
	padding: 25px 0 10px;
	background: #3b3b3a;
	zoom: 1;
}
#pickup:after {
	content:"";
	display: block;
	clear: both;
}

#pickup > div {
	max-width: 960px;
	margin: 0 auto;
}
/* バナーが3つの場合
#pickup > div > div {
	width: 33.333%;
	display: inline-block;
}
*/
#pickup > div > div {
	width: 48%;
	display: inline-block;
}
#pickup img {
	width: 97%;
}

/* tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#pickup {
		width: auto;
		padding: 30px 30px 10px;
	}
}

/* phones */
@media only screen and (max-width: 767px) {
	#pickup {
		width: auto;
		padding: 15px;
	}
	#pickup > div > div {
		width: 100%;
		margin-bottom: 15px;
		float: none;
	}
	#pickup > div > div:last-child {
		margin-bottom: 0;
	}
}




/* gloval navi (sp)
========================================================================== */

#gnav_sp {
	display: none;
}

/* phones */
@media only screen and (max-width: 767px) {
	#gnav_sp {
		display: block;
		zoom: 1;
	}
	#gnav_sp:after {
		content:"";
		display: block;
		clear: both;
	}

	#gnav_sp ul li {
		width: 50%;
		float: left;
	}

	#gnav_sp ul li a {
		padding: 1em 0;
		background: #5cb531;
		border-bottom: 1px solid #92ca78;
		color: #fff;
		display: block;
	}
	#gnav_sp ul li:nth-child(2n) a {
		border-left: 1px solid #92ca78;
	}
}



/* contents
========================================================================== */

#contents {
	padding: 40px 40px 70px;
}


/* news
-------------------------------------------------------------------------- */

#news {
	width: 100%;
	margin-left: -340px;
	text-align: left;
	float: right;
}

#news > div {
	margin-left: 340px;
}

#news h2 {
	margin-bottom: 1em;
	color: #5cb531;
	font-size: 129%; /* 18px */
	float: left;
}

#news div.btn {
	float: right;
}
#news div.btn a:after {
	width: 1em;
	margin: 0 .25em;
	content: "\f138";
	color: #5cb531;
	font-family: FontAwesome;
	text-align: center;
	display: inline-block;
}

#news dl {
	height: 500px;
	margin-bottom: 1em;
	overflow: scroll;
	overflow-x: hidden;
	clear: both;
}
#news dl a {
	text-decoration: underline;
}

#news dl dt {
	padding-bottom: .25em;
}
#news dl dt span.date {
	width: 6em;
	font-weight: bold; 
	display: inline-block;
}

#news dl dt span.label-awards,
#news dl dt span.label-news,
#news dl dt span.label-recruit,
#news dl dt span.label-opera,
#news dl dt span.label-pressrelease {
	width: 9em;
	margin-top: -.25em;
	color: #fff;
	font-size: 11px;
	text-align: center;
	display: inline-block;
}
#news dl dt span.label-awards       { background: #c12c20; }
#news dl dt span.label-news         { background: #5ab89c; }
#news dl dt span.label-recruit      { background: #3f0180; }
#news dl dt span.label-pressrelease { background: #dda600; }
#news dl dt span.label-opera        { background: #5ab89c; }

#news dl dd {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px dotted #ccc;
}

/* tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#news {
		margin-left: -280px;
	}

	#news > div {
		margin-left: 280px;
	}
}

/* phones */
@media only screen and (max-width: 767px) {
	#news {
		margin-bottom: 40px;
		margin-left: 0;
		float: none;
	}

	#news > div {
		margin-left: 0;
	}
}


/* sidebar
-------------------------------------------------------------------------- */

#sidebar {
	width: 300px;
	font-size: 93%; /* 13px */
	text-align: left;
	float: left;
}

#sidebar div.pamphlet {
	margin-top: 10px;
}
#sidebar div.pamphlet img {
	width: 100%;
}
#sidebar div.powerspin {
	margin-top: 15px;
	text-align: center;
}
#sidebar div.powerspin img {
	width: 240px;
}

#sidebar address {
	margin-top: 0;
}

#sidebar div.bnr {
	margin-top: 10px;
}
#sidebar div.bnr img {
	width: 100%;
}

/* tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#sidebar {
		width: 240px;
	}
}

/* phones */
@media only screen and (max-width: 767px) {
	#sidebar {
		width: auto;
		font-size: 100%; /* 13px */
		float: none;
	}

	#sidebar address {
		margin-bottom: 15px;
	}

	#sidebar div.bnr {
		width: 48%;
		margin: 1%;
		float: left;
	}
	#sidebar div.bnr img {
		width: 100%;
	}
}



/* link
========================================================================== */

#link {
	padding: 30px 0 120px;
	background: #8dd471;
	font-size: 93%; /* 13px */
	text-align: left;
}

#link > div {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

#link dl {
	width: 50%;
	margin-bottom: 1em;
	float: left;
}

#link dl dt {
	margin-bottom: .25em;
	color: #fff;
	font-weight: bold;
}

#link dl dd {
	margin-bottom: .25em;
	padding-left: 1.5em;
	position: relative;
}

#link dl dd a {
	color: #fff;
}
#link dl dd a:before {
	width: 1em;
	margin: 0 .25em;
	content: "\f138";
	font-family: FontAwesome;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
#link dl dd a:hover {
	text-decoration: underline;
}

#link dl dd.indent {
	padding-left: 4.5em;
}
#link dl dd.indent a:before {
	left: 3em;
}

/* phones */
@media only screen and (max-width: 767px) {
	#link {
		padding: 30px 0 240px;
		font-size: 100%; /* 13px */
	}

	#link dl {
		width: 100%;
		padding-bottom: 1em;
		border-bottom: 1px solid #fff;
		float: none;
	}

	#link dl dt {
		margin-bottom: .5em;
	}

	#link dl dd {
		margin-bottom: .5em;
	}
}