@charset "utf-8";
/* # =================================================================
#### ページング archive
# ================================================================= */
/*** archive ***/
.tablenav{
	position : relative;
	display : block;
	width : 100%;
	color : var(--key-color);
	margin : 5em auto 0;
	line-height :2em;
	text-align :center;
}
a.page-numbers, .tablenav .current{
	display : inline;
	color : var(--key-color);
	padding : 4px 8px;
	border :solid 1px var(--key-color);
	text-decoration :none;
	font-size :smaller;
}
a.page-numbers:hover{
	color : #FFFFFF;
	background : var(--key-color);
	border-color : var(--key-color);
}
a.page-numbers:first-child:hover,
a.page-numbers:last-child:hover{
	background-color : transparent;
}
.tablenav .current{
	color : white;
	background : var(--key-color);
	border-color : var(--key-color);
	font-weight : bold;
}
.tablenav .next, .tablenav .prev{
	border :0 none;
	font-size :smaller;
	font-weight :bold;
	border : 1px solid var(--key-color);
}
a.prev.page-numbers:hover,
a.next.page-numbers:hover{
	background : var(--key-color);
	color : #FFF;
}
/* # =================================================================
#### ページング single
# ================================================================= */
/*** single ***/
#pagenavi{
	position : relative;
	display : flex;
	display : -ms-flexbox; /* IE10 */
	display : -webkit-box; /* Android4.3以下、Safari3.1～6.0 */
	display : -webkit-flex; /* Safari6.1以降 */
	flex-wrap : wrap;
	-webkit-flex-wrap : wrap; /* for old webkit browser */
	-ms-flex-wrap : wrap; /* for IE10 */
	justify-content : space-between;
	-webkit-justify-content : space-between;  /* Safari etc. */
	-ms-justify-content : space-between;  /* IE10 */
	width : 100%;
	margin : 50px auto 0;
	padding : 0;
	list-style : none;
}
#pagenavi li{
	position : relative;
	display : block;
	width : auto;
}
#pagenavi li a{
	text-decoration : none;
	color : #1D1D1D;
}
#pagenavi li a:hover{
	opacity : 0.5;
}
#pagenavi li.prev,
#pagenavi li.next{
	z-index : 1;
}
#pagenavi li:nth-child(2){
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	margin : auto;
}
/* # =================================================================
#### ページング サムネイル付き
# ================================================================= */
.pager-thumb{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : justify;
	-ms-flex-pack : justify;
	justify-content : space-between;
	width : 100%;
	height : auto;
	margin-top : 50px;
}
.pager-thumb .pager{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
}
.pager-thumb .pager.prev-pager{

}
.pager-thumb .pager.next-pager{

}
.pager-thumb .pager.prev-pager:before{
	content : "";
	position : absolute;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	height : auto;
	top : 30px;
	bottom : 0;
	left : auto;
	right : 0;
	border-right : 1px solid #D1D1D1;
}
/*** pager p ***/
.pager-thumb .pager p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--16px);
	font-weight : bold;
	margin-bottom : 5px;
}
.pager-thumb .pager.next-pager p{
	text-align : right;
}
/*** pager-wrap ***/
.pager-wrap{
	border-top : 1px solid #D1D1D1;
}
/*** pager ***/
.pager-thumb .pager a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 10px 20px 0;
}
.pager-thumb .pager.prev-pager a{
	padding-left : 0;
}
.pager-thumb .pager.next-pager a{
	padding-right : 0;
}
.pager-thumb .pager a{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : start;
	-ms-flex-pack : start;
	justify-content : flex-start;
}
.pager-thumb .pager a:hover{
	opacity : 0.5;
}
.pager-thumb .pager h4{
	position : relative;
	display : block;
	width : calc(100% - 100px);
	height : auto;
	font-size : var(--14px);
	font-weight : bold;
	padding-left : 20px;
}
/*** figure ***/
.pager-thumb .pager figure{
	position : relative;
	display : block;
	width : 100px;
	height : auto;
}
.pager-thumb .pager figure span{
	position : relative;
	display : block;
	width : auto;
	height : 0;
	padding-top : 66.6666%;
}
.pager-thumb .pager figure img{
	position : absolute;
	display : flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	width : auto;
	max-width : 100%;
	height : 100%;
	margin : 0 auto;
	top : 0;
	left : 0;
	right : 0;
}
/* # =================================================================
#### common
# ================================================================= */
.blog-title{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : start;
	-ms-flex-pack : start;
	justify-content : flex-start;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
.blog-title time{
	position : relative;
	display : block;
	width : 54px;
	height : 54px;
	background-color : #BBBBBB;
	text-align : center;
	line-height : 100%;
	color : #FFF;
	font-size : var(--12px);
	margin-right : 15px;
}
.blog-title time span:first-child{
	position : absolute;
	display : block;
	width : 54px;
	top : 10px;
}
.blog-title time span:last-child{
	position : absolute;
	display : block;
	width : 54px;
	bottom : 10px;
}
.blog-title h3{
	position : relative;
	display : block;
	width : auto;
	height : auto;
}
/* # =================================================================
#### editor
# ================================================================= */
#editor{
	margin-bottom : 50px;
}
#editor a{
	color : blue;
	text-decoration : underline;
}
#editor a:hover{
	color : red;
}
#editor a:visited{
	color : purple;
}

/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){

}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
/* # =================================================================
#### ページング サムネイル付き
# ================================================================= */
.pager-thumb .pager.prev-pager a{
	padding-right : 10px;
}
.pager-thumb .pager.next-pager a{
	padding-left : 10px;
}
.pager-thumb .pager figure{
	width : 75px;
}
.pager-thumb .pager h4{
	width : calc(100% - 75px);
	font-weight : normal;
	padding-left : 10px;
	font-size : var(--12px);
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){
/* # =================================================================
#### ページング サムネイル付き
# ================================================================= */
.pager-thumb .pager a{
	padding : 10px;
}
.pager-thumb .pager figure{
	width : 100%;
	margin-bottom : 10px;
}
.pager-thumb .pager h4{
	width : 100%;
	padding : 0;
	max-height : 53px;
	text-align : justify;
	white-space : normal;
	overflow : hidden;
	display : -webkit-box;
	text-overflow : ellipsis;
	-webkit-box-orient : vertical;
	-webkit-line-clamp : 3;
}
}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/