@charset "utf-8";

/*box3（３カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.box3 {
	position: relative;
	width: 25.5%;		/*ボックスの幅*/
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 2.5%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	background: #eeeeee;		/*背景色*/
	border: 1px solid #eeeae2;	/*枠線の幅、線種、色*/
	margin: 0 0 20px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 1.2;	/*行間*/
	color: #666;		/*文字色*/
}
/*box3内の日付*/
.box3 span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #529306;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
/*box3内のp(段落)タグ*/
.box3 p {
	padding: 0 !important;
	height: 3.5em;		/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: center;	/*文字を左よせ*/
	font-weight: bold;
}
.box3 p.only {
	height: 3.5em;		/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: center;	/*文字を左よせ*/
}
/*段落タグにリンクが設定された場合の文字色*/
.box3 p a {
	color: #666;
}
/*box3内のh4(見出し)タグ*/
.box3 h4 {
	color: #529306;	/*文字色*/
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
}
/*box3内のfigure(画像)タグ*/
.box3 figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
}
/*box3内のbtn1。本体の設定はこの下のブロックにあります。*/
.box3 p.btn1 {
	height: auto;
	position: absolute;
	bottom: 30px;	/*box3の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}
.box3 p.btn1 a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}
.box3 p.comment {
	padding: 0 !important;
	font-size:80%;
	font-weight:normal;
}


/*box1、box3のfigure写真共通設定
---------------------------------------------------------------------------*/
.box1 figure a:hover,.box3 figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}

/*btn1
---------------------------------------------------------------------------*/
p.btn1 a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
	background: #529306;	/*背景色*/
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		/*角丸のサイズ*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
	font-weight:normal;
}
/*マウスオン時*/
p.btn1 a:hover {
	border: 1px solid #529306;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #529306 !important;	/*文字色*/
}

/*写真を３列に並べたレイアウト
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.photo {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 33.3%;	/*幅*/
}
.photo a:hover img {
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}
/*photoボックス内の段落(p)タグ*/
.photo p {
	padding: 5px 0 !important;	/*上下、左右への段落タグ内の余白*/
	position: absolute;
	bottom: 0px;	/*photoボックスの下から0pxの場所に配置*/
	width: 100%;	/*幅*/
	background: #111;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は50%色がついた状態のこと*/
	color: #fff;	/*文字色*/
	text-align: center;	/*文字をセンタリング*/
	font-size: 80%;
}