@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% 1% 5%;
				margin: 2%;
				float: left;
				max-height: 100px;
				text-align: left;
			}
			
			.blog-system-headlines-headline-title{
				padding-left: 80px;
				font-size: 1.0em;
			    font-size: 1.0rem;
			    
			    font-weight: 600;
			    margin-top: 2px;
			    margin-bottom: 8px;
			    line-height: 1.2;

			
			}
			.blog-system-headlines-headline-title a{
				color: #220602;
				font-weight: 600;
				text-decoration: underline；
			}
			
			.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: relative;
			    top: -20px;
			    height: 60px;
			    width: 60px;
			    vertical-align: middle;
			}

			.blog-system-headlines-headline-body {
				position: relative;
				top: -60px;
				padding-left: 80px;
			    font-size: 1.0rem;
			    max-height: 3em;
			    line-height: 1.5;
			    font-weight: 500;
			    overflow: hidden;
			    letter-spacing: 0.08em;
			}

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