@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;
			}
			/* ここから下は全くの自由 */
			
			
			blog-system-postmonths-yearmonth-container{
				font-size: 1.1rem;
			}
			
			/* box index list 使用 */
			.blog-system-headlines-headline-container{
				width: 96%;
				border: 1px #ddd solid;
				padding: 1%;
				margin: 1%;
			/*	float: left; */
			/*	min-height: 320px;*/
				background: #f9f1e3;
				text-align: left;
				clear: both;
				overflow: auto;
			}
			
			.blog-system-headlines-headline-title{
				font-size: 1.2em;
				display: inline;
			}
			
			
			.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: 1px;
			}
			
			.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: 1.2em;
				display: inline;
				margin-right: 10px;
			}
			.blog-system-headlines-headline-img1 img {
				width: 100px;
				padding: 5%;
				display: inline;
				max-height: 120px;
			}
			.blog-system-headlines-headline-img1 {
				width: 120px;
				float: left;
    			}
			.blog-system-headlines-headline-body{
				/*	display: inline;*/
				padding-top: 20px;
			    margin-left: 120px;
			}


			/* ここから下は自由に記述可 */
			
			.blog-system-post-post-container{
				text-align: left;
				padding: 8px 2px;
				margin-bottom: 10px;
				margin-left: 8px;
			}
			.blog-system-post-post-date {
				color: #330401;
			    font-size: 1.0rem;
			    font-weight: 600;
			    padding: 5px;
			    display: inline;
			    
			/*	display: none;*/
			}
			.blog-system-post-post-title{
				color: #330401;
				font-size: 1.0rem;
				font-weight: 600;
				padding: 5px;
				display: inline;
			}
			
			.blog-system-post-post-body{
				font-size: 0.95rem;
				margin-top: 10px;
				text-align: left;
				padding: 1%;
			}

			
			
			
			
			.blog-system-post-post-body img {
				max-width: 400px;
				height: auto;
			}
			[class^="blog-system-post-post-img"] img {
				max-width: 100%;
				height: auto;
				padding: 20px 0;
			}


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




			[data-img-pos="右"] .blog-system-post-post-img1,
			 [data-img-pos="右"] .blog-system-post-post-img2,
			 [data-img-pos="右"] .blog-system-post-post-img3{
			    float: right;
			    width:38%;

			}
			
			[data-img-pos="右"] .blog-system-post-post-body {
				width: 56%;
				margin-right: 1%;
			    float: left;
			}
			

			[data-img-pos="左"] .blog-system-post-post-img1,
			[data-img-pos="左"] .blog-system-post-post-img2,
			[data-img-pos="左"] .blog-system-post-post-img3{
			    float: left;
			    width: 38%;
			}
			
			[data-img-pos="左"] .blog-system-post-post-body {
				width: 56%;
			    float: right;
			    margin-left: 1%:
			}

			[data-img-pos="上"] .blog-system-post-post-img1,
			 [data-img-pos="上"] .blog-system-post-post-img2,
			 [data-img-pos="上"] .blog-system-post-post-img3{
			   display: inline;
			    width:33%;
			    margin-left: 1%;
			}

			[data-img-pos="上"] .blog-system-post-post-body {
				width: 99%;
			    float: right;
			    margin-left: 1%:
			}



/* SMARTPHONES SIZE */
@media screen and (max-width: 850px){

			.blog-system-headlines-headline-container{
				width: 47%;
				border: 1px #999 solid;
				padding: 1%;
				margin: 1%;
				float: left;
				min-height: 320px;
			}


					
		.blog-system-postmonths-yearmonth-year,
		.blog-system-postmonths-yearmonth-month2,
		.blog-system-postmonths-yearmonth-count {
				font-size: 1.1em;
		}
		
		.blog-system-postmonths-yearmonth-year{
			padding-left: 2px;
		}
		
		

}

.int_blogR{
	width: 22%;
	margin-left: 1%;
	float: right;
	text-align: left;
	padding-top: 10px;
}

.int_blogL{
	width: 75%;
	padding-right: 1%;
	float: left;
	border-right: 1px solid #f1efef;
}

.int_blog{
	width: 100%;
}




/* SMARTPHONES SIZE */
@media screen and (max-width: 667px){



}

/* SMARTPHONES SIZE */
@media screen and (max-width: 400px){


		.blog-system-headlines-headline-container{
			width: 96%;
			border: 1px #999 solid;
			padding: 2%;
			margin: 10px 1%;
			float: left;
			min-height: 250px;
		}




		[data-img-pos="右"] .blog-system-post-post-img1,
		[data-img-pos="右"] .blog-system-post-post-img2,
		[data-img-pos="右"] .blog-system-post-post-img3{
		    float: right;
		    width:90%;
		    padding: 5%;

		}
		
		[data-img-pos="右"] .blog-system-post-post-body {
			width: 100%;
			margin-right: 0%;
		    float: left;
		}
		

		[data-img-pos="左"] .blog-system-post-post-img1,
		[data-img-pos="左"] .blog-system-post-post-img2,
		[data-img-pos="左"] .blog-system-post-post-img3{
		    float: left;
		    width: 90%;
		    padding: 5%;
		}
		
		[data-img-pos="左"] .blog-system-post-post-body {
			width: 100%;
		    float: right;
		    margin-left: 0%:
		}




}