*{ box-sizing: border-box; }
html { font-size: 62.5%; }

/*** archive ***/

article.post-article{ display: flex; justify-content: space-between; position: relative; transition: .3s; }
article.post-article + .post-article{ margin-top: 5rem; }
article.post-article.search{ display: block; }
article.post-article:hover{ opacity: .4; }
article.post-article a.linkwrap{ width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 10; }
article.post-article .thumb{ width: 300px; height: 150px; background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #f2f2f2; }
article.post-article .txt{ width: calc(100% - 350px); }
article.post-article.search .txt{ width: 100%; }
article.post-article .txt .meta{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
article.post-article .txt .time{ display: inline-block; font-size: 1.2rem; }
article.post-article .txt .cat{ display: flex; font-size: 1.2rem; width: 9rem; height: 2.4rem; border-radius: 1.2rem; border: solid 1px; justify-content: center; align-items: center; margin-left: 1rem; }
article.post-article .txt h2{ width: 100%; font-size: 2.2rem; font-weight: 700; margin-bottom: .4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
article.post-article .txt p{ width: 100%; font-size: 1.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.tag-list{ width: 1000px; margin: 1rem auto; display: flex; flex-wrap: wrap; }
.tag-list li{ margin-right: 1em; font-size: 1.2rem; }
.tag-list li a{ background: #16254B; color: #fff; display: block; padding: .2em .6em; }

.pagination{ margin-top: 8rem; }
.pagination .page-numbers{ display: flex; }
.pagination .page-numbers li + li{ margin-left: .8rem; }
.pagination .page-numbers li a,
.pagination .page-numbers li span{ display: flex; width: 2rem; height: 2rem; font-size: 1.2rem; justify-content: center; align-items: center; border: solid 1px; box-sizing: border-box; border-radius: .2rem; }
.pagination .page-numbers li span.current{ background: #000; color: #fff; border-color: #000; }


@media(max-width: 768px){
	/*** archive ***/

	article.post-article{ flex-wrap: wrap; }
	article.post-article + .post-article{ margin-top: 4rem; }
	article.post-article .thumb{ width: 100%; margin-bottom: 1.5rem; }
	article.post-article .txt{ width: 100%; }
	article.post-article .txt h2{ font-size: 1.8rem; margin-bottom: 0; }
	article.post-article .txt p{ font-size: 1.4rem; 
}