@charset "UTF-8";

/* Blog カテゴリ表示
---------------------------------------------------- */

#blog-menu {
 display: flex;
 flex-wrap: wrap;
 justify-content: left;
}

#blog-menu a {
 padding: .9em 1em 1em;
 display: inline-block;
 @media screen and ( min-width: 1000px ){
  padding: .6em 1em .7em;
 }
}

#blog-menu a:hover,
.blog-cat-info .bc_info,
.blog-cat-diary .bc_diary,
.blog-cat-reply .bc_reply,
.blog-cat-all .bc_all{
 color: #66C;
 background-color: #DCDCF0;
}


/* Blog 本文表示
---------------------------------------------------- */

.blog-post,
.single-post {
 margin: 50px 0 0;
 padding: 0;
}

.blog-post-meta,
.single-post-meta {
 margin: 13px 0 0;
 padding: 5px 0 0;
 color: #999;
 text-align: right;
 border-top: 1px #CCC solid;
}

.blog-post-meta span,
.single-post-meta span {
 margin: 0 1em;
 padding: .1em .5em .2em;
 line-height: 1.8em;
 background-color: #DCF0F0;
}

.blog-post h1,
.single-post h1 {
 margin: 0;
 padding: 0 0 0 35px;
 color: #666;
}

.blog-item-box {
 margin: 1em 1em 4em;
 padding: 0;
}


/* Blog記事一覧ページのページネーション
---------------------------------------------------- */

.pagination .nav-links {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.pagination .page-numbers {
 margin: 0 5px;
 padding: .9em 1.2em 1em;
 background-color: #F0F0F0;
 display: inline-block;
 @media screen and ( min-width: 1000px ){
  padding: .6em 1em .7em;
 }
}

.pagination .current,
.pagination .nav-links a:hover {
 color: #696;
 background-color: #DCF0DC;
}

/* h2を削除 */
.screen-reader-text {
 display: none;
}


/* Blog singleページのページネーション
---------------------------------------------------- */

.single-pagination {
 padding: 0 10px;
 text-align: center;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 justify-content: space-between;
 @media screen and ( max-width: 699px ) {
 justify-content: center;
 }
}

.single-pagination .next-link,
.single-pagination .next-link-no {
 text-align: left;
 @media screen and ( max-width: 699px ) {
  width: 70%;
 }
 @media screen and ( min-width: 700px ) {
  width: 40%;
 }
}

.single-pagination .prev-link,
.single-pagination .next-link-no {
 text-align: right;
 @media screen and ( max-width: 699px ) {
  width: 70%;
 }
 @media screen and ( min-width: 700px ) {
  width: 40%;
 }
}

.single-pagination a {
 margin: .3em 0;
 padding: .9em 1em 1em;
 background-color: #F0F0F0;
 display: block;
 @media screen and ( min-width: 1000px ){
  padding: .6em 1em .7em;
 }
}

.single-pagination a:hover {
 color: #696;
 background-color: #DCF0DC;
}