@charset "UTF-8";

#blog{padding: 80px 0;overflow: hidden;}
#blog h2{text-align: center;margin-bottom: 46px;}
#entry{padding-top: 35px;position: relative;border-top: 3px solid #3498DB;position: relative;}
/*li.blog-post{width: 250px;margin: 10px 4px;background-color: #fff;-webkit-transition: 0.25s;transition: 0.25s;}*/
li.blog-post{width: 250px;margin: 10px 4px;background-color: #fff;-webkit-transition: 0.25s;transition: 0.25s;position: relative;}
li.blog-post a{display: block;position: relative;height: 100%;text-decoration: none;color: #000;box-shadow:1px 1px 2px rgba(0,0,0,0.1);}
/*li.blog-post a.new::after{*/
li.new::after{
	content: '';
	display: block;
	background: url(../img/blog-new.svg) no-repeat center center;
	position: absolute;
	top: -20px;
	right: 10px;
	width: 50px;
	height: 50px;
}

li.blog-post:hover{opacity: 0.6}
.blog-image{position: relative;width: 100%;padding-top: 66.764705882353%;overflow: hidden;}
.blog-image img{position: absolute;left: 0;top: 0;width: 100%;}
.blog-cat{display: block;font-size: 10px;font-size: 1.0rem;line-height: 1.25;padding: 10px;background-color: #3498DB;color: #fff;font-weight: bold;}
.blog-txt-in{padding: 10px 10px 15px;}
.blog-txt-in h3{line-height: 1.25;font-size: 16px;font-size: 1.6rem;font-weight: bold;color: #333;padding-bottom: 10px;border-bottom: 1px dotted #888;margin-bottom: 10px;text-align: left;}
.blog-txt-in p{line-height: 1.5;}
.blog-thumbs {overflow: hidden;}
.blog-thumbs div{
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity .5s, transform .5s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-position:center center;
	background-size:cover;
	width: 100%;
	height:160px;
}
#cat-toggle {
	position: absolute;
	top: -30px;
	right: 50%;
	width: 240px;
	display: block;
	margin-right: -120px;
	background-color: #fff;
	z-index: 8888;
	line-height: 46px;
	border: 3px solid #3498DB;
	text-align: center;
	padding-bottom: 2px;
}
#cat-toggle:hover{background-color: #eee;}
#cat-list{padding: 75px 35px 25px;background-color: #fff;border-bottom: 3px solid #3498DB;position: absolute;left: 0;top: 0;z-index: 7777;display: none;width: 100%;}
#cat-list li{
	width: 24%;
	padding: 0;
	margin: 0 0.5% 15px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	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;
	-webkit-box-align:center;
		 -ms-flex-align:center;
-webkit-align-items:center;
				align-items:center;
	border-bottom: 1px solid #3498DB;
}
#cat-list li a{display: block; line-height: 1.25;text-decoration: none;color: #333;font-weight: bold;padding: 15px 0 15px 30px;width: 100%;background: url(../img/cat-i.svg) no-repeat left center;text-align: left;}
#cat-list li a:hover{opacity: 0.5;}
@media (max-width: 960px) {
	#cat-list{padding: 35px 15px 15px;}
	li.blog-post{width: 31.3333333333%;margin: 10px 1%;}
}
@media (max-width: 767px) {
	#cat-list li{width: 48%;margin: 0 1% 5px;}
	li.blog-post{width: 100%;margin: 5px 0;}
	li.blog-post a{display: table;width: 100%;}
	.blog-image{display: table-cell;width: 40%;vertical-align: top}
	.blog-txt{display: table-cell;width: 60%;vertical-align: top}
	li.blog-post a.new::after{right: auto;left: 5px;}
	.blog-thumbs div{
		height:100px;
	}
}

#detail {padding: 60px 0 120px;}
#detail h2 {font-size: 19px;font-size: 1.9rem;padding: 0 0 15px 0;line-height: 1.25;font-weight: bold;border-bottom: 2px #939494 solid;margin-bottom: 40px;}

#detail main {width: 70.833333333333%;}
#detail aside {width: 22.916666666667%;}
#detail aside h3 {font-size: 21px;font-size: 2.1rem;padding: 0 0 5px 0;margin-bottom: 25px;border-bottom: 2px #939494 solid;}
#detail ul{margin-bottom: 40px;}
#detail li {padding: 0;border-bottom: 1px #939494 dotted;line-height: 1.25;}
#detail li a{color: #000;text-decoration: none;padding: 10px 0;display: block;}
#detail li a:hover{background-color: #eee;}
article{width: 100%;}
.text{margin-bottom: 60px;padding-bottom: 60px;border-bottom: 1px solid #eee;}
@media (max-width: 767px) {
	#detail main {width: 100%;margin-bottom: 60px;}
	#detail aside {width: 100%;}	
}


#navigation{
	margin:0;
	padding: 0;
	line-height: 1;
	text-align: center;
}
#pagenavi a, #pagenavi span {
	padding: 10px 12px 9px;
	margin-right: 10px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
#pagenavi a:last-child{margin-right: 0;}
#pagenavi span.current {
	color: #fff;
	background-color: #3498DB;
}
#pagenavi a:hover{color: #3498DB;background-color: #eee;}