@charset "utf-8";

/* ============================================================
	研究所TOP 記事一覧画面
	============================================================ */


/* 記事一覧のサブカテ見出し
	============================================================ */
#caption {
	margin-bottom: 26px;
}
#caption * {
	margin: 0;
	padding: 0;
}
#caption .center {
	padding: 20px 16px;
	margin: 0 auto;
	color: #ffffff;
}
#caption .center * {
	margin: 0;
	padding: 0;
	color: #ffffff;
}
@media screen and (min-width: 751px) {
	#caption .center {
		height: 140px;
		width: 1000px;
		margin: 0 auto;
		color: #ffffff;
	}
}


/* 記事一覧のメイン
	============================================================ */
#articles article a,
#articles .art_list a {
	color: #333;
}
@media screen and (min-width: 751px) {
	/* フィーチャーがない場合に、マージンを確保 */
	#headImg + #articles {
		margin-top : 2rem;
	}
	#articles {
		padding-bottom : 2rem;
	}
	#articles .sub-category {
		padding-bottom : 5rem;
	}
	#articles article,
  #articles .art_list {
		width: 324px;
		margin-bottom: 35px;
		background: #ffffff;
	}
	#articles article .photo img,
  #articles .art_list .photo img {
		vertical-align: top;
		width: 100%;
	}
	#articles article .photo video,
  #articles .art_list .photo video {
		vertical-align: top;
		width: 100%;
	}
	#articles article .contents,
  #articles .art_list .contents {
		padding: 0 0 20px;
	}
	#articles article p,
  #articles article h1,
  #articles .art_list .lab_top_title_article,
  #articles .art_list p,
  #articles .art_list h1 {
		margin: 0;
	}
	#articles article .date,
  #articles .art_list .date {
		display: inline-block;
		color: #666;
		font-size: 13px;
		line-height: 13px;
		padding: 0;
		vertical-align: top;
		margin-top: 7px;
	}
	#articles article h1,
  #articles .art_list .lab_top_title_article,
  #articles .art_list h1 {
		font-size: 17px;
		margin-top: 8px;
		font-weight: normal;
	}
	#articles article .text,
  #articles .art_list .text {
		color: #666;
		font-size: 13px;
		line-height: 22.5px;
		margin-top: 4px;
	}
	#articles article .cat,
  #articles .art_list .cat {
		font-size: 13px;
		margin: 8px 10px 3px 0;
	}
}
@media screen and (max-width: 750px) {
	#articles {
	}
	#articles .sub-category {
		padding: 0 .9rem;
		margin-bottom: 5rem;
	}
	#articles #container {
		padding: 0 12px;
		margin-bottom:80px;
	}
	#articles article,
  #articles .art_list {
		width: 100%;
		display:block;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		padding:12px 0;
		border-bottom:1px solid #e7e7e7;
	}
	#articles article > a {
	}
	#articles article p.photo,
  #articles .art_list p.photo {
		width: 28%;
		padding: 0;
		margin: 0;
		float:left;
		display:inline-block;
	}
	#articles article .photo img,
  .photo video,
  #articles .art_list .photo img,
  .photo video {
		width: 100%;
		vertical-align: top;
	}
	#articles article .contents,
  #articles .art_list .contents {
		display:block;
		width: 70%;
		float:left;
		padding:0 0 0 2%;
		margin:0;
	}
	#articles article .contents h1,
  #articles .art_list .contents .lab_top_title_article,
  #articles .art_list .contents h1{
		font-size: 12.5px;
		margin:0;
	}
	#articles article .contents .text,
  #articles .art_list .contents .text {
		display:none;
	}
	#articles article .contents .cat,
  #articles .art_list .contents .cat {
		margin-top:10px;
		font-size: 9px;
		line-height: 9px;
		display: inline-block;
		padding-left: 5px;
		color:#999;
	}
	#articles article .contents .date,
  #articles .art_list .contents .date {
		margin-top:10px;
		font-size: 9px;
		line-height: 9px;
		display: inline-block;
		float:right;
		color:#999;
	}

	/* clearfix */
	#articles article:before,
	#articles article:after,
  #articles .art_list:before,
	#articles .art_list:after {
	    content: "";
	    display: table;
	}
	#articles article:after,
  #articles .art_list:after {
	    clear: both;
	}
	/* For IE 6/7 (trigger hasLayout) */
	#articles article,
  #articles .art_list {
	    zoom: 1;
	}
}


/* もっと見るボタン
	============================================================ */
#articles #more {
	position : absolute;
	bottom : -5rem;
	padding : 0 4.5vw;
	width: 100%;
	display: block;
}
@media screen and (min-width: 751px) {
	#articles #more a {
		display: block;
		height: 0;
		padding-top: 60px;
		overflow: hidden;
		background: url(/lab/common/img/more.png) no-repeat center center #023a65;
		border-radius: 7px;
		-o-border-radius: 7px;
		-ms-border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
	}
}
@media screen and (max-width: 750px) {
	#articles #more a {
		height: 0;
		display: block;
		overflow: hidden;
		padding-top: 35px;
		text-align: center;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		background: url(/lab/common/img/sp_more.gif) no-repeat center center #023a65;
	}
}