@charset "UTF-8";
/*
Theme Name: AK THEME
Author: OF
Description: AK電子テーマ
Version: 1.0
*/

/* 変数 */
:root {
	--f1:2.44em;
	--f2:1.95em;
	--f3:1.56em;
	--f4:1.25em;
	--f5:1em;
	--f6:0.8em;
}

main article h1 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

main .post {
	padding: 2em 0;
}

.wp-block-image figure {
	margin:0 !important;
}
/* 記事　カテゴリー */
.post-categories {
	display: flex;
	justify-content: center;
	list-style-type: none;
	margin-bottom:1.5em;
}

.post-categories ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	line-height:normal;
}

.post-categories li {
	margin-right: 10px;
	padding: 2px 10px;
	background-color: #1b5e92;
	border-radius: 20px;
	line-height: 1.5em;
}
.post-categories a {
	color: #ffffff;
	font-size: var(--f6);
}

/*　記事　投稿日*/
time {
	display: block;
	color: #444;
	font-size: var(--f6);
}
/*　前後の記事へのリンク　*/
.post-navigation {
	padding: 2em 0;
}
.post-navigation .nav-links {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-column-gap: 30px;
	column-gap:30px;
	font-size: var(--f6);
	justify-items: end;
}
.post-navigation .nav-previous {
	grid-column: 1;
	justify-self:start;
}
.post-navigation .nav-next {
	grid-column: 2;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	grid-auto-flow: column;
	grid-column-gap: 10px;
	column-gap: 10px;

}

.post-navigation .nav-previous a::before { 
	content: '\e079'; 
	font-family: 'Glyphicons Halflings'; 
	color: #444444; 
} 
.post-navigation .nav-next a::after { 
	content: '\e080'; 
	font-family: 'Glyphicons Halflings';
	color: #444444;
}

/* 記事一覧 */


main {
	container-type: inline-size;
}

@container (min-width: 400px) {
	.postlist {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
	}
}
.postlist a {
	display: block;
}

.postlist article {
	border: solid 1px #dddddd; 
	padding:0;
	margin:1em auto;
}
.postlist figure {
	margin:0;
}
.postlist h2 {
	margin:0;
	font-size: var(--f5);
}
.postlist h2,
.postlist time {
	padding: 10px;
}
/* ページネーション */
.pagination {
	grid-column: 1 / 3;
	grid-row: auto;
}
.pagination .nav-links {
	display:grid;
	grid-auto-flow: column;
	grid-column-gap: 25px;
	column-gap: 25px;
	justify-content:center;
}