@charset "utf-8";
@import "common.css";

/*-----------------------------------------------
	technology
-----------------------------------------------*/
/* top */
.top{
	background:url(/assets/img/technology/img_top.jpg) center top no-repeat;
}
#facilities .top {
	background-image: url(/assets/img/technology/img_facilities.jpg);
}
@media only screen and (min-width:1400px){
	.top{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.top{
		background-image:url(/assets/img/technology/img_top_sp.jpg);
		background-size:cover;
	}
   #facilities .top {
		background-image: url(/assets/img/technology/img_facilities_sp.jpg);
	}
}

/* figure */
.figure{
	width:100%;
	margin-bottom:38px;
	padding:83px 0 52px;
	background:url(../img/technology/bg_figure.jpg) center top no-repeat;
}
.figure figure{
	position:relative;
	width:910px;
	margin:0 auto;
	text-align:center;
}
.figure img{
	margin-left:8px;
}
.figure li{
	position:absolute;
	max-width:250px;
	min-width:186px;
	padding:20px 14px 12px;
	border-radius:6px;
	box-shadow:16px 10px 10px rgba(103,200,207,0.16);
	background-color:rgba(255,255,255,0.8);
	font-size:18px;
	line-height:24px;
	text-align:center;
}
.figure .mgt1{
	top:-50px;
	left:526px;
	color:#f39100;
}
.figure .mgt2{
	top:104px;
	left:684px;
	color:#00abcd;
}
.figure .mgt3{
	top:392px;
	left:630px;
	color:#007e9e;
}
.figure .mgt4{
	top:390px;
	right:632px;
	color:#699a03;
}
.figure .mgt5{
	top:104px;
	right:690px;
	color:#eb3a3d;
}
@media only screen and (min-width:1400px){
	.figure{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.figure{
		margin-bottom:28px;
		padding:85px 0 60px;
		background-size:cover;
	}
	.figure figure{
		width:320px;
	}
	.figure img{
		width:302px;
		max-width:100%;
		height:auto;
		margin-left:4px;
	}
	.figure li{
		max-width:142px;
		min-width:87px;
		padding:7px;
		border-radius:4px;
		box-shadow:0 10px 10px rgba(103,200,207,0.16);
		background-color:rgba(255,255,255,0.8);
		font-size:10px;
		line-height:13px;
	}
	.figure .mgt1{
		top:-70px;
		left:120px;
	}
	.figure .mgt2{
		top:-44px;
		right:10px;
		left:inherit;
	}
	.figure .mgt3{
		top:inherit;
		right:10px;
		bottom:-26px;
		left:inherit;
	}
	.figure .mgt4{
		top:inherit;
		right:inherit;
		bottom:-48px;
		left:25px;
	}
	.figure .mgt5{
		top:-54px;
		right:inherit;
		left:10px;
	}
}

/* contents */
.contents{
	text-align:center;
}
.contents .section{
	max-width:1400px;
	margin:0 auto 110px;
}
.contents h4{
	margin-bottom:8px;
	font-weight:bold;
	font-size:26px;
	line-height:36px;
}
.contents p{
	margin-bottom:24px;
	font-size:16px;
	line-height:28px;
}
.section .img{
	display:flex;
}
.section .img figure{
	width:50%;
}
.section.research .img figure{
	width:100%;
}
.section .img figcaption{
	width:100%;
	font-size:14px;
	line-height:26px;
	text-align:center;
}
.section .img > figure:first-of-type > figcaption{
	float:right;
}
.section .img > figure:last-of-type > figcaption{
	padding-left:48px;
}
.section.research .img > figure > figcaption{
	float:none;
	width:950px;
	margin:0 auto;
	padding-left:0;
}
@media only screen and (max-width:767px){
	.contents .section{
		margin-bottom:100px;
	}
	.contents .section:last-of-type{
		margin-bottom: 90px;
	}
	.contents h4{
		margin-bottom:4px;
		padding:0 14px;
		font-size:20px;
		line-height:30px;
	}
	.contents p{
		margin-bottom:4px;
		padding:0 14px;
	}
	.contents p br{
		display:none;
	}
	.section .img{
		display:block;
	}
	.section .img figure{
		position:relative;
		width:100%;
		height:250px;
	}
	.section .img figure img{
		position:absolute;
		top:0;
		left:50%;
		width:auto;
		height:225px;
		transform:translateX(-50%);
	}
	.section .img figcaption,
	.section.research .img > figure > figcaption{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		padding:0 14px 4px;
		font-size:13px;
		line-height:18px;
		text-align:center;
	}
	.section .img > figure:first-of-type > figcaption{
		float:none;
	}
	.section .img > figure:last-of-type > figcaption{
		padding-left:0;
	}
}

#technology_development .txt-block{
	width:950px;
	margin:0 auto;
}
@media only screen and (max-width:767px){
#technology_development .txt-block{
	width:100%;
}
}