@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%;
				font-family: "Brandon Grot W01 Bold";
				border-bottom: 1px solid #E5E5E5;
				padding: 1px 0;
				margin: 1px;
				float: left;
				max-height: 40px;
				vertical-align: middle;
				text-align: left;
			}
			
			.blog-system-headlines-headline-title{
				padding-left: 120px;
				font-size: 1.1em;
				font-size: 14px;
				font-weight: 500;
				/* margin-top: -30px; */
				margin-bottom: 0px;
				line-height: 1.2;
				position: relative;
				top: -22px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #21a5b6;
			}
			.blog-system-headlines-headline-title a{
			/*	color: rgba(0,150,182,0.80);*/
			color: #21a5b6;
			text-decoration: underline;
			line-height: 1.1;
			}
			
			.blog-system-headlines-headline-title a:hover{
				color: #7eccd6;
			　　text-decoration: none;
				line-height: 1.1;
			}

			
			.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: #555;
				font-size: 14px;
				padding-left: 10px;
				font-weight: 500;
				/*	display: none;　*/
			}


					
			.blog-system-headlines-headline-img1 img {
				position: relative;
				top: -20px;
				height: 60px;
				width: 60px;
				vertical-align: middle;
				display: none;
			}

			.blog-system-headlines-headline-body {
				position: relative;
				top: -10px;
				padding-left: 100px;
				font-size: 1.0rem;
				max-height: 3em;
				line-height: 1.5;
				font-weight: 400;
				overflow: hidden;
				letter-spacing: 0.08em;
				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;
			}



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

	.blog-system-headlines-headline-date {
		color: #555;
		font-size: 12px;
		padding-left: 10px;
		font-weight: 500;
		/*	display: none;　*/
	}

	.blog-system-headlines-headline-title{
		padding-left: 90px;
		font-size: 1.1em;
		font-size: 13px;
		font-weight: 500;
		/* margin-top: -30px; */
		margin-bottom: 0px;
		line-height: 1.2;
		position: relative;
		top: -22px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #21a5b6;
	}

}