@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-img1 {object-fit: cover;/* height: 60px; */width: 60px;position: absolute;top: -10px;/* display: none; */padding: 2%;/* max-height: 150px; *//* max-width: 90%; */overflow: hidden;/* width: 50%; *//* height: 50%; *//* position: relative; */overflow: hidden;width: 150px;/* height: 150px; *//* position: relative; */object-fit: cover;/* display: inline; */}

.blog-system-headlines-headline-container{
	width: 98%;
	position: relative;
	/* top:0; */
	/*font-family: "Brandon Grot W01 Bold";*/
	border-bottom: 1px solid #E5E5E5;
	padding: 1% 0;
	margin: 1%;
	min-height: 100px;
}

.blog-system-headlines-headline-title{
	/* padding-left: 80px; */
	font-size: 1.2em;
	top: 0;
	font-size: 17px;
	font-weight: normal;
	margin-top: 2px;
	margin-bottom: 0px;
	line-height: 1.5;
	top: 50px;
	left: 170px;
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
	width: calc(100% - 200px);
	display: inline;
}
.blog-system-headlines-headline-title a{
 /*	color: rgba(0,150,182,0.80); */
 color: #1f1b19;
 text-decoration: none;
}

.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: 16px;
	font-weight: 500;
	/* display: none; */
	position: relative;
	top: 0px;
	left: 170px;
	text-align: left;
	line-height: 1;
	display: table-cell;
}
.blog-system-headlines-headline-img1 img {
	position: absolute;
	/* top: 10px; */
	/* left: 0; */
	/* height: 60px; */
	/* width: 60px; */
	/* vertical-align: middle; */
	/* object-fit: cover; */
	/* padding: 2%; */
	/* max-height: 150px; */
	/* max-width: 90%; */
	overflow: hidden;
	width: 50%;
	height: 50%;
	position: relative;
	overflow: hidden;
	width: 90%;
	height: 80px;
	position: relative;
	object-fit: cover;
}

.blog-system-headlines-headline-body {
	position: absolute;
	top: 50px;
	left: 80px;
	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;
	text-align: left;
	display: none;
}

/* ここから下は自由に記述可 */
.blog-system-post-post-date {
	margin-top: 15px;
	color: #000;
	font-size: large;
	font-weight: 400;
}
.blog-system-post-post-title{
	color: #fff;
	font-size: large;
	font-weight: 600;
	background: #330401;
	margin-bottom: 10px;
	padding: 8px;

}

blog-system-post-post-body{

	margin-top: 10px;
}


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


.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;
}


.blog-system-headlines-headline{
	/* height: 130px; */
}

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

	.blog-system-headlines-headline-container{
		    /* max-width: 600px; */
		    width: 98%;
		    text-align: left;
		    /* min-height: 120px; */
	}
}


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

	.blog-system-headlines-headline-container{
		position:relative;
		top:0;
		width: 95%;
	}

.blog-system-headlines-headline-title{
	top: 30px;
	left: 165px;
	font-weight: 600;
/* 	width: calc(100% - 200px); */
	width: 100%;
}

.blog-system-headlines-headline-img1 {
    position: absolute;
    top: 0;
    padding: 2%;
    overflow: hidden;
    overflow: hidden;
    width: 150px;
    height:80px;
    object-fit: cover;
}





.blog-system-headlines-headline-img1 img {
    width: 50%;
    height: 50%;
    position: relative;
    overflow: inherit;
    width: 120px;
    height: 80px;
    position: relative;
    top: 0;
}
}

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

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

	.blog-system-headlines-headline-title{
		font-size: 0.8em;
		font-size: 0.8rem;
		position: absolute;
		top: 20px;
		left: 150px;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.blog-system-headlines-headline-date {
		top: 0px;
		left: 150px;
	}

	.blog-system-headlines-headline-container{
		width: 100%;
		/* min-height: 120px; */
    }
}