@charset "utf-8";
.category-nav{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.category-nav .all-post{
	position : relative;
	display : flex;
	flex-wrap : nowrap;
	justify-content : flex-start;
	align-items : center;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
.category-nav .all-post li:first-child{
	flex-shrink : 0;
}
.category-nav .all-post li:last-child{
	flex : 1;
	min-width : 0;
}
.category-nav .all-post li a{
	postion : relative;
	display : block;

	color : #4199B5;
	font-size : 20px;
	font-weight : 500;
}
.category-nav .all-post li > span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : var(--font-color);
	font-size : 20px;
	font-weight : 500;
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
	padding-left : 30px;
}
.category-nav .all-post li:last-child > span::before{
	content : "\ff1e";
	position : absolute;
	display : block;
	top : 0;
	right : auto;
	bottom : 0;
	left : 12px;
	margin : auto auto;
	color : #4199B5;
	font-size : 20px;
	font-weight : 500;
}
/***** category-list *****/
.category-list{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	width : 100%;
	height : auto;
}
.category-list li{
	position : relative;
	display : list-item;
	width : fit-content;
	height : auto;
	margin-right : 30px;
	margin-bottom : 10px;
}
.category-list li a{
	color : #4199B5;
	font-size : 20px;
	font-weight : 500;
}
.category-list li a:hover{
	opacity : 0.5;
}
/*****  *****/
.archive-list{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 15px;
	border : 2px solid #4199B5;
	padding : 30px 50px;
}
.archive-list dl{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* dt */
.post-header-data{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	width : 100%;
	height : auto;
	margin-bottom : 15px;
}
.post-header-data time{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	color : #4199B5;
	font-size : 16px;
	font-weight : 500;
	margin-right : 30px;
}
.post-header-data .category-list{
	width : auto;
}
.post-header-data .category-list li a{
	font-size : 16px;
}
.post-header-data .category-list li{
	margin-right : 20px;
}
/* dd */
.archive-list dl dd{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.archive-list dl dd:last-of-type{
	padding-bottom: 0;
	margin-bottom: 0;
}
.archive-list dl dd::before{
	content : "";
	position : absolute;
	bottom : -4px;
	left : 0;
	width : 100%;
	height : 4px;
	transform : translateY(-50%);
	background-image : radial-gradient(circle, #4199B5 25%, transparent 20%);
	background-size : 16px 6px; 
	background-repeat : repeat-x;
	background-position : left center;
}
.archive-list dl dd:last-of-type::before{
	content : none;
}
.archive-list dl dd h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 0 50px 0 15px;
}
.archive-list dl dd h3 a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : 18px;
	font-weight : 500;
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
}
.archive-list dl dd h3 a:hover{
	color : #4199B5;
}
.archive-list dl dd h3::after{
	content : "";
	position : absolute;
	display : block;
	width : 35px;
	height : 35px;
	background : url(../../images/common/info_arrow.png)center / contain no-repeat;
	top : 50%;
	right : 0;
	transform : translateY(-50%);
	transition : 0.5s;
	opacity : 0;
}
.archive-list dl dd h3:hover::after{
	transition : 0.5s;
	opacity : 1;
}
/* # =================================================================
#### single
# ================================================================= */
.single-body{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 15px;
	border : 2px solid #4199B5;
	padding : 30px 50px;
}
.post-header-data{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	width : 100%;
	height : auto;
	padding-bottom : 20px;
	margin-bottom : 30px;
}
.post-header-data::after{
	content : "";
	position : absolute;
	bottom : -4px;
	left : 0;
	width : 100%;
	height : 4px;
	transform : translateY(-50%);
	background-image : radial-gradient(circle, #4199B5 25%, transparent 20%);
	background-size : 16px 6px; 
	background-repeat : repeat-x;
	background-position : left center;
}
.post-header-data h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : 22px;
	font-weight : 500;
	padding-left : 20px;
}
/*****  *****/
#editor{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 20px;
}
/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){

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

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.archive-list{
	padding : 30px 30px;
}
.single-body{
	padding : 30px 30px;
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.archive-list{
	padding : 20px 15px;
}
.single-body{
	padding : 20px 15px;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

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

}/*** 320px ***/