@charset "utf-8";

/*  【注意】このファイルsample1はAPIを複数呼び出していて複雑なので、単純なサンプルとしてsample2～4も参照のこと */

/*  デザイン例（本番は外部CSS推奨） */

/* 必須 */
[class^="blog-system-postmonths-yearmonth-"] {/* 将来の機能拡張に備えいったん全てを非表示にする */
	display: none;
}
.blog-system-postmonths-yearmonth-container,
.blog-system-postmonths-yearmonth-year,
.blog-system-postmonths-yearmonth-month2,
.blog-system-postmonths-yearmonth-count {/* 必要なパーツのみを明示的に表示 */
	display: inline;
}
[class^="blog-system-headlines-headline-"] {/* 必須（将来の機能拡張に備えいったん全てを非表示にする） */
	display: none;
}
.blog-system-headlines-headline-container,
.blog-system-headlines-headline-date,
.blog-system-headlines-headline-title,
.blog-system-headlines-headline-body,
.blog-system-headlines-headline-img1 {/* （↑の続き）必要なパーツのみを明示的に表示 */
	display: block;
	color: #222;
}
/* ここから下は全くの自由 */

/* box index list 使用 */
.blog-system-headlines-headline-container{
	width: 95%;
	position:relative;
	top:0;
	font-family: "Brandon Grot W01 Bold";
	border-bottom: 1px solid #E5E5E5;
	padding: 2%;
	margin: 1%;
	min-height: 110px;
}

.blog-system-headlines-headline-title{
	 padding-left: 210px;
	font-size: 1.2em;
	/* top: 0; */
	font-size: 15px;
	font-weight: normal;
	margin-top: 2px;
	margin-bottom: 8px;
	line-height: 1.2;
}
.blog-system-headlines-headline-title a{
 /*	color: rgba(0,150,182,0.80); */
 color: #990000;
 text-decoration: none;
 font-weight: 600;
}

.blog-system-postmonths-yearmonth-year,
.blog-system-postmonths-yearmonth-month2,
.blog-system-postmonths-yearmonth-count {
		font-size: 1.2em;
}

.blog-system-postmonths-yearmonth-year{
	padding-left: 25px;
}

.blog-system-postmonths-yearmonth-count{
	padding-left: 10px;
}
.blog-system-postmonths-yearmonth-count:before {
	content: '(';
}
.blog-system-postmonths-yearmonth-count:after {
	content: ')';
}
.blog-system-postmonths-yearmonth-year:after {
	content: '年';
}
.blog-system-postmonths-yearmonth-month2:after {
	content: '月';
}
.blog-system-headlines-headline-date {
	color: ＃999;
	font-size: 14px;
	font-weight: 500;
	display: none;
}
.blog-system-headlines-headline-img1 img {
	position: absolute;
	top: 10px;
	/* height: 60px; */
	width: 200px;
	vertical-align: middle;
	padding: 0 0;
}

.blog-system-headlines-headline-body {
	position: absolute;
	top: 40px;
	left: 230px;
	font-size: 0.9rem;
	max-height: 3.5em;
	line-height: 1.2;
	overflow: hidden;
	letter-spacing: 0.08em;
	padding: 1px 0;
	line-height: 1.3;
	margin: 0;
	overflow: hidden;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
}

/* ここから下は自由に記述可 */
.blog-system-post-post-date {
	margin-top: 15px;
	color: #000;
	font-size: large;
	font-weight: 400;
	display: none;
}
.blog-system-post-post-title{
	color: #ffffff;
	font-size: 1.6em;
	font-weight: 600;
	background: #1b88bc;
	background: #3f332f;
	margin-bottom: 10px;
	padding: 15px;
	/* border: 3px solid #ff879c; */
	border-radius: 5px;
}

blog-system-post-post-body{

	margin-top: 10px;
}


.blog-system-post-post-body img {
	max-width: 600px;
	height: auto;
}
[class^="blog-system-post-post-img"] img {
	max-width: 500px;
	height: auto;
}


.blog-system-post-post-img1{
	display:none;
}

.t_title{
	font-size: 1.3em;
	margin-bottom: 15px;
	text-align: left;
}


.s_title{
	font-size: 1.2em;
	margin-bottom: 15px;
	border-bottom: 1px #999 solid;
	text-align: center;
	background: #330401;
	color: #fff; 
	padding: 5px;
}




[class^="blog-system-post-post-img"] img {
		max-width: 450px;
		height: auto;
	}








@media only screen and (min-width: 1024px){

	.blog-system-headlines-headline-container{
		    width: 600px;

	}
}


@media only screen and (min-width: 768px){

	.blog-system-headlines-headline-container{

		position:relative;
		top:0;

		width: 95%;
	}
}

@media only screen and (max-width: 500px){

	.blog-system-headlines-headline-container{
		max-height: 100px;
		position: relative;
		top: 0;
		left: 0;
		width: 95%;
	}

	.blog-system-headlines-headline-title{
		font-size: 0.8em;
		font-size: 1rem;
		position: absolute;
		top: 5px;
		left: 230px;
	}

	.blog-system-post-post-title {
		/* color: #fff; */
		font-size: 1.15em;
		font-weight: 600;
		/* background: #330401; */
		margin-bottom: 10px;
		padding: 15px;
	}
	

	.blog-system-headlines-headline-body {
		font-size: 0.8em;
		font-size: 0.95rem;
		max-height: 5em;
		/* width: calc(100% - 200px); */
		padding-left: 10px;
	}

	[class^="blog-system-post-post-img"] img {
		max-width: 300px;
		height: auto;
	}



}