@charset "utf-8";

/* ============================================================
	研究所 記事の下部に表示する要素 新着記事一覧（#news）
	============================================================ */

/**
 * 記事ページに「cpj_20110」を使用しているカテゴリでは、新着記事一覧を「#news」というIDの要素で表現しているが
 * それ以外のカテゴリ（「からあげクン」や「ジブリ」）では「#saishin」というIDを用いている。
 * 
 * また、「からあげクン」や「ジブリ」カテゴリでは、「#news」は別の要素に使用しているため、スタイルの使いまわしはできない。
 */

/* 新着記事一覧
	============================================================ */
@media screen and (min-width: 751px) {
	#news {
		width: 1000px;
		margin: 30px auto 0;
	}
	#news ul:after {
		content: "";
		display: block;
		clear: both;
	}
	#news h1 {
		color: #023a65;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}
	#news ul {
		padding: 23px 0 20px;
	}
	#news li {
		width: 235px;
		float: left;
	}
	#news li + li {
		margin-left: 20px;
	}
	#news li p {
		margin: 0;
	}
	#news .photo {
		margin-bottom: 4px;
	}
	#news .photo img {
		width: 235px;
	}
	#news .date {
		font-size: 14px;
	}
	#news .title a {
		color: #333333;
		display: block;
		font-size: 16px;
		line-height: 22px;
		font-weight: bold;
		overflow: hidden;
		padding-bottom: 9px;
		margin-bottom: 12px;
		text-decoration: none;
	}
	#news .genre {
		color: #676767;
		font-size: 14px;
	}
}
@media screen and (max-width: 750px) {
	#news {
		padding: 0 15px;
	}
	#news h1 {
		color: #023a65;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
	}
	#news ul{
		padding: 0;
	}
	#news li, #news p {
		margin: 0;
	}
	#news li {
		padding: 13px 5px;
	}
	#news li:nth-child(odd) {
		background: #f9f9f9;
	}
	#news li:after {
		content: "";
		display: block;
		clear: both;
	}
	#news .photo {
		width: 34%;
		float: left;
		padding-right: 10px;
		background: #ffffff;
	}
	#news li:nth-child(odd) .photo {
		background: #f9f9f9;
	}
	#news .photo img {
		width: 100%;
		vertical-align: top;
	}
	#news .date {
		font-size: 10px;
	}
	#news .title {
		font-size: 12px;
		line-height: 16px;
		padding: 1px 0 3px;
		margin-bottom: 6px;
	}
	#news .title a {
		color: #333333;
		font-weight: bold;
		text-decoration: none;
	}
	#news .genre {
		color: #676767;
		font-size: 13px;
	}
}