/* CSS Document */
.blog-catelogy-type-top-fix { padding-bottom: 22px; }
.blog-catelogy-type-top-fix li a { border: 1px solid #808080; }

.blog-catelogy span {
  display:inline-block;
  margin-left: 28px;
}
.blog-catelogy .thumbnail {
	position:relative;
	display:inline-block;
	margin-left: 28px;
	width:145px;
	height:145px;
}
.blog-catelogy .thumbnail img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	transform: translate(-50%,-50%);
}
.blog-catelogy li:hover .thumbnail img {
	transform: translate(-50%,-50%) scale(1.1);
}

.blog-catelogy span:first-child { margin-left: 0; }

.pagging { margin-bottom: 88px; }

#blog-post {
  color: #80808;
  text-align: left;
  margin-bottom: 68px;
}

#blog-post .title-page { margin-bottom: 25px; }

#blog-post a {
  color: #808080;
  font-size: 13px;
  line-height: 34px;
  display: inline-block;
}

#blog-post > li {
  padding: 0 25px;
}

#blog-post > li:last-child { padding-right: 0; }

#blog-post .list-post { list-style: none; }

#blog-post .list-post li {
  float: none;
  width: auto;
}

/* ranking */
#ranking .blog-catelogy { margin-left: -19px; }

#ranking  li {
  width: 20%;
  padding-left: 19px;
}

#ranking li:nth-child(3n + 1) { clear: none; }

#ranking li:nth-child(5n + 1) { clear: left; }

#ranking  li a {
  padding: 0;
}
#ranking .blog-catelogy li a {
    display: inline;
}




#ranking li a .thumbnail {
	position:relative;
	display:inline-block;
	margin-left: 28px;
	width:145px;
	height:145px;
}

#ranking .blog-catelogy li:before {
  left: 25px;
  top: -25px;
}

#main-content { padding-bottom: 95px; }

@media screen and (max-width: 768px) {
  .blog-catelogy-type-top-fix {
    padding-bottom: 44px;
  }
  .blog-catelogy-type-top-fix li:last-child a { border-bottom: 1px solid #808080; }
  .blog-catelogy-type-top-fix li a {
    border: none;
    border-top: 1px solid #808080;
    margin-bottom: 0;
  }
  
  .blog-catelogy { text-align: left; }
  
  .blog-catelogy-type-top li a .thumbnail { width: 30%; }
  
	.blog-catelogy .thumbnail {
		margin-left: 0;
		width:105px;
		height:105px;
	}
  .pagging {
    margin-bottom: 77px;
  }
  
  #blog-post li {
    float: none;
    width: auto;
    padding: 0 0 13px;
  }
  
  #blog-post > li:last-child {
    padding: 0;
  }
  
  #blog-post a {
    font-size: 12px;
    line-height: 22px;
    color: #000;
  }
  #blog-post .list-categoies-blog,
  #blog-post .list-post { padding: 0 10px; }
  
  #blog-post .title-page {
    margin-bottom: 11px;
  }
  
  #blog-post { margin-bottom: 10px; }
  
  #ranking .blog-catelogy li  {
    float: none;
    width: auto;
    padding: 0
  }
  
  #ranking .blog-catelogy li:first-child a {
    border-top: 1px solid #808080;
}
  #ranking .blog-catelogy li:last-child a {
    border-bottom: none;
}
  #ranking .blog-catelogy li a {
    display: block;
    padding: 15px 12px 14px;
    margin: 0;
    border-bottom: 1px solid #808080;
}
  
  #ranking .blog-catelogy li :last-child a { border: none; }
  
  #ranking .blog-catelogy { margin: 0; }
  
  #ranking .blog-catelogy li::before {
    left: 16px;
    top: 2px;
    transform: scale(.5);
    transform-origin: 0 0;
  }
	#ranking li a .thumbnail {
		margin-left: 0;
		width:105px;
		height:105px;
	}
  
  #ranking .title-page { margin-bottom: 20px;margin-top: 30px; }
  
  #ranking li a .thumbnail { width: 30%; }
  
  #main-content {
    padding-bottom: 13px;
  }
}