@charset "UTF-8";

/*アーカイブ・カテゴリー一覧ページ用*/
.cate_title{
	background:url(../images/topimg.jpg) no-repeat center/cover;
	padding:2em;
	text-align:center;
	font-size:200%;
	font-family:var(--klee);
	color:var(--white);
	text-shadow:1px 1px 3px var(--black);
}

.clickable{
	cursor:pointer;
	img{
		transition:0.3s;
		&:hover{
			opacity:0.7;
		}
	}
}

.date{
	text-align:right;
	color:var(--black);
}

/*サイドを含む箱*/
.post_box{
	width:80%;
	max-width:1200px;
	margin:0 auto;
	padding:2em;
}

/*ページャーを含む箱*/
.post_main{
	width:100%;
	
	.post_list{
		width:100%;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		gap:2em;
	}
		
	.post_list_item{
		background:#fff;
		border-bottom:1px solid var(--maincolor);
		filter:drop-shadow(1px 1px 3px rgba(150,150,150,0.3));
		
		a{
			display:flex;
			gap:2em;
			align-items:center;
			padding:0;
			width:100%;
			height:100%;
			&:hover{
				background:var(--basecolor);
			}
			.post_excerpt{
				color:var(--black);
			}
		}
	
		:not(.news){
			.post_text{
				padding-right:2em;
			}
		}
		&.news{
			filter:none;
			a{
				padding:0.5em;
				flex-wrap:wrap;
				gap:0.5em;
				justify-content:space-between;
				.post_excerpt{
					width:100%;
				}
				.post_title::before{
					content:'■';
					margin-right:0.3em;
				}
			}
			.post_text{
				width:100%;
				padding:0.5em 1em;
				display:flex;
				align-items:center;
				justify-content:space-between;
				flex-wrap:wrap;
			}
		}
		
	}
}



.post_title{
	font-size:150%;
	letter-spacing:0.1em;
	font-weight:normal;
}
.post_thumb{
	margin:0;
	width:35%;
	aspect-ratio:1/1;
	img{
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:center;
	}
}

/*カテゴリ表示用*/
.post-categories{
	display:flex;
	flex-wrap:wrap;
	gap:0.5em;
}
.post-categories a{
	display:inline-block;
	width:fit-content;
	padding:0.3em 0.5em;
	border-radius:0.3em;
	background:var(--basecolor);
	font-size:85%;
}




/*------個別の投稿ページ用------*/

#single{
	margin:50px auto;
	width:80%;
	max-width:1200px;
	
	&.single_flex{
		display:flex;
		gap:50px;
		
		#side{
			width:25%;
		}
	}
}
#single_box,#side{
	width:100%;
}

.single_section{
	margin:2em auto;
	padding:0 2em;
}

.single_title{
	color:var(--maincolor);
	font-size:2.3rem;
	letter-spacing:0.1em;
	padding-bottom:0.3em;
	margin-bottom:0.5em;
	border-bottom:1px solid var(--maincolor);
}
.single_date,.category{
	text-align:right;
	font-size:80%;
}

.single_thumb{
	margin:2em 0;
	img{
		width:100%;
		height:auto;
	}
}
.single_content{
	padding:0 1.5em;
	p{
		margin:1.5em 0;
	}
}

/*前後の記事へ*/
.adjacent_post_links ul{
	display:flex;
	justify-content:center;
	gap:5em;
	font-size:80%;
	margin-top:3em;
}


/*サイドバー*/
#side{
	display:flex;
	flex-direction:column;
	gap:5em;
	margin-top:5em;
	
	.sidebox{
		width:calc((100% - 5em) / 2);
		
		ul{
			display:flex;
			flex-wrap:wrap;
			gap:0.5em 1.5em;
			font-size:85%;
			padding:0.5em;
			
			a{
				color:#666;
				display:flex;
				align-items:center;
				gap:0.5em;
				
				&::before{
					content:'';
					height:0;
					width:0;
					border-left:0.7em solid #666;
					border-top:0.5em solid transparent;
					border-bottom:0.5em solid transparent;
					display:block;
					transition:0.3s;
					position:relative;
					left:0;
					top:-0.2em;
				}
				&:hover::before{left:0.2em;}
			}
		}
	}
	
.widget_title{
	color:#999;
	font-size:110%;
	margin:1.5em 0 0.5em;
	padding-bottom:0.3em;
	border-bottom:1px solid #999;
	letter-spacing:0.05em;
&:first-letter{
	color:var(--maincolor);
	font-size:120%;
	}

#side a:hover{color:var(--maincolor);}
.tag-cloud-link{
	display:inline-block;
	width:fit-content;
	padding:0.3em 0.7em;
	border-radius:0.3em;
	background:rgba(var(--main-rgb),0.2);
	font-size:85%;
	color:#666;
}
	
}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　スマホ用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width: 600px) {

  /*サブページ用*/
	.page_title_big{padding:40px 0;}
	.works_text{font-size:70%;margin-top:1em;}
    .subpage-flex,.subpage-flex.tri{
        --listitem-length:2;
    }
    .subpage-flex{
        align-items: center;
    }
    .subpage-flex.sp-one{
        --listitem-length:1;
    }
	
	
	/*一覧ページとか用*/
	.post_box{
		width:100%;
		padding:1em;
	}
	.post_list{gap:1.5em;}
	.list_box .works_list_item a{padding:0.5em;}
	.list_box .works_list_item h3{margin:0.5em 0 0;font-size:1rem;}
	
	#side{margin-top:2em;gap:1em;flex-direction:column;}
	#side .sidebox{width:100%;}

    
}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
    ▲　スマホ用css　▲
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/