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

/*-----------------------------------------------
	technology
-----------------------------------------------*/
/* top */
#facilities .top {
	background-image: url(../img/technology/img_facilities.jpg);
}
@media only screen and (min-width:1400px){
	.top{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
   #facilities .top {
	   background-position:top right;
	}
}

/* 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:475px;
	font-size:14px;
	line-height:26px;
	text-align:left;
}
.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;
		text-align:center;
	}
	.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:10px;
		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;
	}
}



/* 研究施設一覧 */
#facilities .section {
	max-width: 1400px;
}
.bg-colored {
	background-color: #eee;
	margin-bottom: 30px;
	padding-bottom: 1px;
	padding-top: 20px;
}
#facilities .contents .section {
	margin-bottom: 130px;
	padding-top: 57px;
}

.visuals {
	overflow: hidden;
}
.visuals .logo-area,
#facilities .text-content {
	text-align: left;
}

.visuals .main-image {
	float: left;
	width: 785px;
	margin-right: 40px;
}
.visuals .logo-area {
	float: left;
	width: 390px;
}
.visuals .main-image img,
.visuals .logo-area img {
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width:1230px){
	.visuals .main-image {
		width: 62%;
		margin-right: 7%;
	}
	.visuals .logo-area {
		width: 30%;
	}
}
.visuals .logo-area dl {
	font-size: 16px;
	line-height: 27px;
	margin-bottom: 1em;
}
.visuals .logo-area dt {
	clear: left;
	float: left;
	width: 4.1em;
	/*text-align: justify;*/
	text-align-last: justify;
}
.visuals .logo-area dd {
	margin-left: 5em;
	text-indent: -1em;
}
.visuals .logo-area dd:before {
	content: "：";
}
.visuals .logo-area dd small {
	font-size: 12px;
	line-height: 1;
	vertical-align: top;
}
.visuals .logo-area dd sup {
	font-size: 10px;
	line-height: 1;
	vertical-align: 100%;
}
.visuals .additional-info h5,
.visuals .additional-info p {
	font-size: 12px;
	line-height: 20px;
}
.visuals .additional-info h5 {
	background-color: #ff8e00;
	border-radius: 10px;
	color: #FFF;
	display: inline-block;
	margin: 16px 0 4px;
	padding: 0 10px;
}
.visuals .additional-info *:last-child {
	margin-bottom: 0px;
}
.visuals .additional-info .name-explain {
	background-color: #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bg-colored .visuals .additional-info .name-explain {
	background-color: #fff;
}
#n2u-bridge .visuals .additional-info .name-explain {
	padding: 5px;
}
.visuals .additional-info .name-explain p {
	font-size: 19px;
	line-height: 1.5;
}
#n2u-bridge .visuals .additional-info .name-explain p {
	line-height: 1.2;
}
.visuals .additional-info .name-explain strong {
	color: #ff8e00;
	display: inline-block;
	text-align: center;
	width: 1em;
}
.visuals .additional-info .name-explain small {
	font-size: 16px;
}

.visuals .sub-images {
	clear: both;
	padding-top: 33px;
}
.visuals .sub-images ul {
	display: flex;
	overflow: hidden;
	justify-content: center;
}
.visuals .sub-images li {
	/*display: inline;*/
	margin: 0 2px;
}
#facilities .sub-images li img{
	max-width:100%;
	vertical-align:top;
	height:auto;
}

#facilities .text-content {
	margin: 0 auto 30px;
	padding-top: 36px;
	width: 890px;
}
#facilities .text-content h6 {
	color: #ff8e00;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 1em;
}
#facilities .text-content .text-small {
	font-size: 12px;
	line-height: 20px;
}
@media only screen and (max-width:767px){
	.visuals .main-image {
		float: none;
		width: 90%;
		margin-right: 0;
		margin:0 auto 1em;
	}
	.visuals .sub-images ul {
		display: inline-block;
	}
	.visuals .sub-images li {
		display: inline;
	}
	#facilities .sub-images {
		width: 90%;
		margin:0 auto 1em;
	}
	
	.visuals img,
	#facilities .sub-images img{
		max-width:100%;
		vertical-align:top;
		height:auto;
	}
	.visuals .logo-area {
		float: none;
		width: 90%;
		margin:0 auto;
	}
	.visuals .logo-area dl {
		font-size: 16px;
		line-height: 27px;
		width:80%;
		margin:0 auto 1em;
	}
	
	#facilities .text-content {
		margin: 0 auto 30px;
		padding-top: 36px;
		width: 90%;
	}
	.visuals .additional-info{
		text-align:center;
	}
	.visuals .additional-info h5,
	.visuals .additional-info p {
		font-size: 14px;
	}
	.visuals .additional-info p {
		text-align:left;
	}
	.contents .visuals .name-explain p br{
		display: block;
	}
}

/*コンクリート研究所*/
div.pic_left{
	float:left;
	width:50%;
}

div.txt_right{
	float:left;
	width:48%;
	margin-left: 5px;
}

.txt_right ul{
	text-align: left;
}

.txt_right ul li{
	line-height: 1rem;
}

.txt_orange{
	color: #ff8e00;
	font-size:1.2rem;
	font-weight:bold;
}