.inner {
	max-width: 133rem;
	width: 86%;
	margin: 0 auto;
}
.flex-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


#blog-archive {
	padding: 25rem 0; /* 上下左右の余白 */
}

#blog-archive .inner {
	max-width: 120rem; /* 最大幅 */
	flex-direction: row-reverse; /* アイテムの並び順（左右反転） */
	row-gap: 8rem; /* 行間の余白 */
}

#blog-archive .inner .contents {
	width: 68%; /* 幅 */
	max-width: 76.8rem; /* 最大幅 */
}

#blog-archive .inner .contents .post-list {
	width: 100%; /* 幅 */
	margin-bottom: 5%; /* 下マージン */
}

#blog-archive .inner .contents .post-list li {
	width: 100%; /* 幅 */
	padding-bottom: 7.8rem; /* 下パディング */
	margin-bottom: 7.8rem; /* 下マージン */
	border-bottom: 2px solid #828282; /* 下線 */
}

#blog-archive .inner .contents .post-list li .post-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; /* 両端揃え */
	align-items: center; /* 中央揃え（垂直方向） */
}

#blog-archive .inner .contents .post-list li .post-box .box-left {
	width: 41.6%;
	aspect-ratio: 200 / 150;
	overflow: hidden;
}

#blog-archive .inner .contents .post-list li .post-box .box-left img {
	aspect-ratio: 1.5; /* アスペクト比 */
	object-fit: cover; /* 領域に合わせて画像を拡大・縮小 */
	width: 100%; /* 幅 */
}

#blog-archive .inner .contents .post-list li .post-box .box-right {
	width: 57%; /* 右ボックスの幅 */
	max-width: 39rem; /* 最大幅 */
}

#blog-archive .inner .contents .post-list li .post-box .box-right .day {
	font-size: 1.8rem; /* フォントサイズ */
	line-height: 1.75em; /* 行の高さ */
	letter-spacing: 0.1em; /* 文字間隔 */
	color: #828282; /* 文字色 */
}

#blog-archive .inner .contents .post-list li .post-box .box-right .title-box {
	width: 100%; /* 幅 */
	font-size: 2.2rem; /* フォントサイズ */
	line-height: 1.5; /* 行の高さ */
	overflow: hidden; /* はみ出たコンテンツを隠す */
	display: -webkit-box; /* 複数行のテキストを管理 */
	-webkit-box-orient: vertical; /* 垂直方向 */
	-webkit-line-clamp: 2; /* 2行でテキストを切り詰める */
	padding: 0.2em 0; /* 上下パディング */
}

#blog-archive .inner .contents .post-list li .post-box .box-right .category {
	font-size: 1.8rem; /* フォントサイズ */
	line-height: 1.75em; /* 行の高さ */
	letter-spacing: 0.1em; /* 文字間隔 */
	background-color: #828282; /* 背景色 */
	color: #fff; /* 文字色 */
	width: fit-content; /* 幅をコンテンツに合わせる */
	padding: 0.1em 1em; /* 内側の余白 */
	border-radius: 0.3em; /* 角丸 */
}

#blog-archive .inner .contents .post-ttl .day-cate {
	font-size: 1.8rem; /* フォントサイズ */
	line-height: 1.4; /* 行の高さ */
	letter-spacing: 0.1em; /* 文字間隔 */
}

#blog-archive .inner .contents .post-ttl > h3 {
	font-size: 3.4rem; /* フォントサイズ */
	letter-spacing: 0.1em; /* 文字間隔 */
	margin-bottom: 0.7em; /* 下マージン */
	padding-bottom: 0.7em; /* 下パディング */
	border-bottom: 1px solid #828282; /* 下線 */
}

#blog-archive .inner .contents .post-ttl .news-text {
	margin-bottom: 8rem; /* 下マージン */
}

#blog-archive .inner .contents .post-ttl .news-text * {
	line-height: 1.75; /* 行の高さ */
}

#blog-archive .inner .contents .post-ttl .news-text *:first-of-child {
	margin-top: 0; /* 最初の要素の上マージンを0に */
}

#blog-archive .inner .contents .post-ttl .news-text > h1,
#blog-archive .inner .contents .post-ttl .news-text > h2,
#blog-archive .inner .contents .post-ttl .news-text > h3 {
	letter-spacing: 0.14em; /* 文字間隔 */
	font-weight: 600; /* フォントの太さ */
}

#blog-archive .inner .contents .post-ttl .news-text > h1 {
	font-size: 2.4rem; /* フォントサイズ */
	margin-top: 1em; /* 上マージン */
	color: #295b31; /* 文字色 */
}

#blog-archive .inner .contents .post-ttl .news-text > h2 {
	font-size: 2.2rem; /* フォントサイズ */
	margin-top: 2em; /* 上マージン */
	color: white; /* 文字色 */
	background-color: #295b31; /* 背景色 */
	line-height: 6rem; /* 行の高さ */
	padding-left: 2rem; /* 左パディング */
}

#blog-archive .inner .contents .post-ttl .news-text > h3 {
	font-size: 2rem; /* フォントサイズ */
	margin-top: 2em; /* 上マージン */
	border-bottom: 3px solid #295b31; /* 下線 */
	color: #295b31; /* 文字色 */
}

#blog-archive .inner .contents .post-ttl .news-text > p {
	font-size: 1.8rem; /* フォントサイズ */
	margin-top: 2em; /* 上マージン */
}

#blog-archive .inner .contents .post-ttl .news-text > figure {
	margin-top: 3.6rem; /* 上マージン */
}

#blog-archive .inner .contents .post-ttl .news-text iframe.wp-embedded-content {
	position: relative !important; /* ポジションを相対に強制 */
	visibility: initial !important; /* 表示状態を強制 */
}

#blog-archive .inner .contents .blog-navi .wp-pagenavi {
	font-size: 1.8rem; /* フォントサイズ */
	justify-content: flex-end; /* 右揃え */
	align-items: center; /* 中央揃え（垂直方向） */
	gap: 2em; /* アイテム間の余白 */
	color: #828282; /* 文字色 */
}

#blog-archive .inner .contents .blog-navi .wp-pagenavi * {
	display: flex; /* Flexboxで表示 */
	align-items: center; /* 中央揃え（垂直方向） */
	justify-content: center; /* 中央揃え（水平方向） */
	padding: 0.1em; /* 内側の余白 */
	border: none; /* 枠線なし */
}

#blog-archive .inner .contents .np-link {
	font-size: 1.8rem; /* フォントサイズ */
	justify-content: center; /* 中央揃え */
	align-items: center; /* 中央揃え（垂直方向） */
	gap: 4%; /* アイテム間の余白 */
}

#blog-archive .inner .contents .np-link * {
	padding: 0.1em; /* 内側の余白 */
	border: none; /* 枠線なし */
}

#blog-archive .inner .side-box {
	width: 27%; /* 幅 */
	max-width: 26.6rem; /* 最大幅 */
}

#blog-archive .inner .side-box .list-box {
	padding: 5%; /* 内側の余白 */
	margin-bottom: 8.4rem; /* 下マージン */
	flex-direction: column; /* 縦方向に並べる */
	justify-content: center; /* 中央揃え（垂直方向） */
	align-items: center; /* 中央揃え（水平方向） */
	border: 2px solid #828282; /* 枠線 */
	position: relative; /* 相対位置 */
}

#blog-archive .inner .side-box .list-box:last-of-type {
	margin-bottom: 0; /* 最後のアイテムの下マージンを0に */
}

#blog-archive .inner .side-box .list-box h4 {
	font-size: 4rem; 
	line-height: 1; 
	position: absolute; 
	inset: auto auto 100% 0;
	color: #828282;
}

#blog-archive .inner .side-box .list-box .post-data {
	width: 100%; /* 幅 */
}

#blog-archive .inner .side-box .list-box .post-data li.catelist-txt a {
	padding: 0.6em 0 0.6em;
	position: relative; /* 相対位置 */
	font-size: 1.6rem; /* フォントサイズ */
	line-height: 1.75; /* 行の高さ */
	letter-spacing: 0.1em; /* 文字間隔 */
	display: block; /* ブロック要素として表示 */
	width: 100%; /* 幅 */
	color: #fff;
}

#blog-archive .inner .side-box .list-box .post-data li.postlist-txt a {
	font-size: 1.4rem; /* フォントサイズ */
	line-height: 1.75; /* 行の高さ */
	letter-spacing: 0.1em; /* 文字間隔 */
	padding: 1em 0; /* 上下パディング */
	border-bottom: 1px solid #828282; /* 下線 */
	display: block; /* ブロック要素として表示 */
	width: 100%; /* 幅 */
}

#blog-archive .inner .side-box .list-box.cate-box {
	background-color: #828282; /* 背景色 */
	color: #fff; /* 文字色 */
}

#blog-archive .inner .side-box .list-box.blog-post {
	color: #828282; /* 文字色 */
}

@media (max-width: 840px) {
	#blog-archive {
		padding: 15rem 0; /* 上下パディングを調整 */
	}

	#blog-archive .inner .side-box,
	#blog-archive .inner .contents {
		max-width: initial; /* 最大幅を解除 */
		width: 100%; /* 幅を100%に */
	}
}

@media (max-width: 840px) and (max-width: 520px) {
	#blog-archive {
		padding: 11rem 0; /* 上下パディングをさらに調整 */
	}

	#blog-archive .inner .contents .post-list li {
		padding-bottom: 3rem; /* 下パディングを調整 */
		margin-bottom: 3rem; /* 下マージンを調整 */
	}

	#blog-archive .inner .contents .post-list li .post-box .box-left {
		width: 100%;
	}

	#blog-archive .inner .contents .post-list li .post-box .box-right {
		width: 100%;
	}

	#blog-archive .inner .contents .post-list li .post-box .box-right .title-box {
		font-size: 1.8rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .contents .post-list li .post-box .box-right .day {
		font-size: 1.2rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .contents .post-list li .post-box .box-right .category {
		font-size: 1.2rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .contents .post-ttl > h3 {
		font-size: 2.6rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .contents .post-ttl .day-cate {
		font-size: 1.4rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .contents .blog-navi .wp-pagenavi {
		font-size: 1.4rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .contents .np-link {
		font-size: 1.2rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .side-box .list-box h4 {
		font-size: 3.2rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .side-box .list-box .post-data li.catelist-txt a {
		font-size: 1.4rem; /* フォントサイズを調整 */
	}

	#blog-archive .inner .side-box .list-box .post-data li.postlist-txt a {
		font-size: 1.3rem; /* フォントサイズを調整 */
	}
}