@charset "UTF-8";
/* CSS Document */

* { margin:0px; padding:0px;}
body{margin:30px;
	font: 100%/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wrap {
	margin: 0px;
	padding: 0px;
	height: 400px;
}
.post{
	background:#CCC;
	padding:20px;
	width:440px;
	margin-bottom:40px;
	clear: both;
	border: 1px solid #999;	   
	}
	 
	h4{
	width:290px;
    float: right;
	}
	 
	img {
	    width: 120px;
	    float: left;
		padding :5px ;
    background:#fff;
	    margin-right:20px; /* テキストとの距離 */
	   
	}
	 
.more{
    float: right;
	}
	
	
	
.post-2{
	background:#CCC;
	padding:20px;
	width:440px;
	margin-bottom:40px;
	overflow:hidden;
　/* clear: both;いらない */
	border: 1px solid #999;	   
	}
	 

/* :after 疑似要素と content プロパティーを使ってブロックボックスを作り、そこに clear: both を指定するという手法*/
.clearfix:after {  
	visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
/* clearfix for ie7 */
.clearfix{
   display: inline-block;
}
.clearfix {
    display: block;
}




.img-2{
    width:300px;
    vertical-align: bottom;
    padding :5px;
    background:#fff;
    /* 以下、丸角とドロップシャドウは省略 */
}
 
.title{
    width:260px;
    background:rgba(0, 0, 0, 0.4);
    color:#fff;
    height: 40px;
    line-height:40px;
padding: 0 20px;
}