@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: 1%;
				    margin: 1%;
				    float: left;
				    min-height: 70px;
			}
			
			.blog-system-headlines-headline-title{
				padding-left: 150px;
				font-size: 1.2em;
				font-size: 18px;
				font-weight: 600;
				margin-top: 2px;
				margin-bottom: 8px;
				line-height: 1.2;
				position: relative;
				left: 50px;
				top: -20px;
			}
			.blog-system-headlines-headline-title a{
				color: rgb(27, 177, 33);
				/* text-decoration: underline; */
				text-decoration: underline dotted;
			}
			
			.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; */
			    width: 100px;
			    position: relative;
			    top: 0;
			}
			
			.blog-system-headlines-headline-img1 {
				position: relative;
				bottom: 0;
				width: 150px;
				vertical-align: middle;
				/* display: none; */
			}
			.blog-system-headlines-headline-img1 img {
				float:left;

				width: 100%;

			}

			.blog-system-headlines-headline-body {
				/* position: relative; */
				/* top: -20px; */
				/* left: 200px; */
				padding-left: 50px;
				font-size: 16px;
				max-height: 3em;
				line-height: 1.5;
				font-weight: 500;
				/* overflow: hidden; */
				letter-spacing: 0.08em;
				display: inline-block;
				width: -webkit-calc(100% -  250px);
				width: calc(100% - 250px);
			}

			/* ここから下は自由に記述可 */
			.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;
			}