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


/*----------blog.php用-----------*/
*{
	padding:0;
	margin:0;
}

body{
	width:100%;
	max-width: 1040px;/*box3列%なので見た目の調整*/
	margin-left:10px;/*box3列%なので見た目の調整*/
	height: 600px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	color:#333;
	text-align: center;
}

a{
	color:#333;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}


.box{
	width:32%;
	height:360px;
	margin:0 0.6% 20px;
	float: left;
	text-align: left;
	background:#f8f8f8;
}

.date{
	vertical-align:top;
		font-size:11px;
	color: #999;
}

.title{
	width:100%;
	display:inline-block;
	font-size:18px;
	line-height: 1.3;
	padding:8px 0;
}

.description{
	width:100%;
	display:inline-block;
	font-size:14px;
}

.box .txt{
	padding: 10px 20px 20px;
}

.box .p{ 
	overflow: hidden;
    width:100%;/* トリミングしたい枠の幅 */
    height: 180px;/* トリミングしたい枠の高さ */
    position: relative;
}

.box img{ 
	width:100%;
	position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.box .p:hover{ 
opacity: 0.7;/*要素の透明度を指定*/
    filter: alpha(opacity=70); /*ie6、7の透明度指定*/
    /*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/
}


@media only screen and (max-width: 768px) {  
.box{
	width:94%;

}
}