/* --------------------------------------------------- */
.blog {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	
	max-width: 1200px;
	width: 90%;
	margin: 0px auto 50px;
}
/* --------------------------------------------------- */
.blog .blog_left {
	float: left;
	width: 77%;
	margin-right: 3%;
	padding-bottom: 50px;
}
/* --------------------------------------------------- */
.blog .blog_nav {
	width: 20%;
}
.blog .blog_nav ul {
	margin-bottom: 30px;
}
.blog .blog_nav li {
	line-height: 150%;
	margin-bottom: 8px;
	font-size: 90%;
}
.blog .blog_nav li a {
}
.blog .blog_nav li a span {
	display: block;
	font-size: 90%;
	margin-bottom: 3px;
	color: #aaa;
}
.blog .blog_nav li a:hover {
	text-decoration: underline;
}
/* --------------------------------------------------- */
.blog .blog_list {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.blog .blog_list a {
	display: block;
	float: left;
	width: 32%;
	margin-right: 2%;
	background-color: #fff;
	padding: 0;
	margin-bottom: 20px;
	border-right: rgba(0,0,0,.1) 1px solid;
	border-bottom: rgba(0,0,0,.1) 1px solid;
}
.blog .blog_list a:nth-child(3n) {
	margin-right: 0;
}
.blog .blog_list a:hover {
	background-color: #f9f9f9;
}
.blog .blog_list dl {
}
.blog .blog_list dt {
	font-size: 90%;
	padding: 20px;
	line-height: 150%;
	font-weight: 500;
}
.blog .blog_list dt span {
	display: block;
	font-size: 90%;
	margin-bottom: 5px;
	color: rgba(0,0,0,.5);
	font-weight: 300;
}
.blog .blog_list dd {
	position: relative;
	width: 100%;
	height: 170px;
	overflow: hidden;
	margin: 0 auto;
}
.blog .blog_list dd img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 150%;
}
/* --------------------------------------------------- */
.blog .blog_more {
	width: 95%;
}
.blog .blog_more p {
	margin-bottom: 25px;
}
.blog .blog_more .ttl {
	margin-bottom: 30px;
}
.blog .blog_more .ttl h3 {
	font-size: 130%;
	font-weight: 600;
	line-height: 160%;
	margin-bottom: 5px;
	letter-spacing: 2px;
}
.blog .blog_more .ttl p {
	font-size: 80%;
	font-weight: 300;
	margin-bottom: 0;
}
.blog .blog_more .ttl p span {
	display: inline-block;
	margin-right: 15px;
}
.blog .blog_more .ttl p a {
	display: inline-block;
}
.blog .blog_more .ttl p a::before {
	content: 'category:';
	margin-right: 5px;
	color: #aaa;
}
.blog .blog_more .ttl p a:hover {
}




@media screen and (max-width: 1030px) {
	.blog .blog_nav {
		width: 25%;
	}
	/* --------------------------------------------------- */
	.blog .blog_left {
		width: 72%;
		margin-right: 3%;
		padding-bottom: 0px;
	}
	/* --------------------------------------------------- */
	.blog .blog_list {
	}
	.blog .blog_list a,
	.blog .blog_list a:nth-child(3n) {
		width: 49%;
		margin-right: 2%;
	}
	.blog .blog_list a:nth-child(2n) {
		margin-right: 0;
	}
	.blog .blog_list dt {
		padding: 15px;
	}
	.blog .blog_list dd {
		height: 150px;
	}
	/* --------------------------------------------------- */
	
	/* --------------------------------------------------- */
}
@media screen and (max-width: 900px) {
	/* --------------------------------------------------- */
	.blog {
		margin: 0px auto 30px;
	}
	/* --------------------------------------------------- */
	.blog .blog_nav {
		width: 100%;
	}
	/* --------------------------------------------------- */
	.blog .blog_left {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 40px;
	}
	/* --------------------------------------------------- */
	.blog .blog_list {
	}
	/* --------------------------------------------------- */
	.blog .blog_more {
		width: 100%;
	}
	/* --------------------------------------------------- */
}
@media screen and (max-width: 680px) {
	/* --------------------------------------------------- */
	
	/* --------------------------------------------------- */
	.blog .blog_list a {
		margin-bottom: 10px;
	}
	.blog .blog_list dd {
		height: 120px;
	}
	/* --------------------------------------------------- */
}