@charset "UTF-8";

/* Legacy imported standard posts: list layout aligned with #topics journal (ryosan-blog grid). */

@media screen and (min-width: 768px), print {
	#topics #legacy-post-archive {
		padding: 0 4rem 119px;
	}
	#topics #legacy-post-archive .system-list {
		max-width: 1200px;
		margin: 0 auto;
		background: url(../images/topics/line.svg) repeat-x top center;
		padding: 60px 20px 0 20px;
	}
	#topics #legacy-post-archive .morebtn {
		text-align: center;
	}
	#topics #legacy-post-archive .morebtn a {
		background: #523e1e;
		width: 320px;
		height: 64px;
		box-shadow: 0 3px 0 0 #23190b;
		font-size: 1.6rem;
		padding-top: 20px;
	}
	#topics #legacy-post-archive .system-list li {
		overflow: hidden;
		line-height: 1.4;
		margin-bottom: 20px;
		width: 31%;
		margin-right: 3.5%;
	}
	#topics #legacy-post-archive .system-list li a:hover {
		text-decoration: none;
	}
	#topics #legacy-post-archive .system-list li:nth-child(3n) {
		margin-right: 0;
	}
	#topics #legacy-post-archive .system-list .system-date {
		font-size: 1.5rem;
		line-height: 1.4;
		margin-bottom: 7px;
		color: #958707;
		font-weight: 500;
	}
	#topics #legacy-post-archive .system-list .system-date span {
		font-size: 1.3rem;
	}
	#topics #legacy-post-archive .system-list .system-ttl-01 {
		font-size: 2rem;
		letter-spacing: 0;
		line-height: 1.6;
		display: block;
		margin-bottom: 12px;
	}
	#topics #legacy-post-archive .system-list-inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	#topics #legacy-post-archive .system-list .system-pic {
		width: 100%;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		text-align: center;
		margin-bottom: 15px;
		position: relative;
		border-radius: 2rem;
	}
	#topics #legacy-post-archive .system-list .system-pic img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		display: block;
	}
	#topics #legacy-post-archive .legacy-post-archive__empty {
		width: 100%;
		list-style: none;
		text-align: center;
		padding: 40px 20px;
	}

	/* 個別記事（標準 post）メインアイキャッチ：幅に合わせて画像全体を表示（縦横比は元画像のまま） */
	#post #topics .system-contents .system-pic {
		width: 100%;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
		overflow: hidden;
		border-radius: 2rem;
		text-align: center;
		position: relative;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #f5f4f0;
	}
	#post #topics .system-contents .system-pic img {
		position: static;
		width: 100%;
		height: auto;
		max-width: 100%;
		vertical-align: bottom;
		display: block;
		-o-object-fit: contain;
		object-fit: contain;
	}

	/* WP-PageNavi（custom_pagenavi / テーマの .page-list 相当） */
	#topics #legacy-post-archive .legacy-post-archive__pagenavi {
		clear: both;
		max-width: 1200px;
		margin: 30px auto 50px;
		padding: 0 20px;
		text-align: center;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi nav {
		display: block;
		width: 100%;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi {
		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;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 10px;
		margin: 0;
		font-size: 1.4rem;
		line-height: 1.4;
		font-weight: 500;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list li {
		width: auto;
		margin: 0;
		display: inline-block;
		vertical-align: middle;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi span.pages {
		display: none;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi a,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list a {
		display: inline-block;
		min-width: 44px;
		text-align: center;
		padding: 12px 16px;
		background: #eeefef;
		border: 1px solid #dcdddd;
		color: #231815;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi a:hover,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list a:hover {
		background: #523e1e;
		color: #fff;
		border-color: #523e1e;
		text-decoration: none;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi span.current,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list span.current,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list li.active > span,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list li.active > a {
		display: inline-block;
		min-width: 44px;
		text-align: center;
		padding: 12px 16px;
		background: #231815;
		color: #fff;
		border: 1px solid #231815;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi span.extend {
		padding: 12px 6px;
		border: none;
		background: transparent;
		color: #666;
		min-width: auto;
	}
}

@media screen and (max-width: 767px) {
	#topics #legacy-post-archive {
		padding: 0 2.7vw 29.75vw;
	}
	#topics #legacy-post-archive .system-list {
		background: url(../images/topics/line.svg) repeat-x top center;
		padding: 6vw 0 0 0;
		background-size: 100% auto;
	}
	#topics #legacy-post-archive .morebtn {
		text-align: center;
	}
	#topics #legacy-post-archive .morebtn a {
		background: #523e1e;
		height: 14vw;
		box-shadow: 0 0.75vw 0 0 #23190b;
		font-size: 3.75vw;
		padding-top: 4.2vw;
	}
	#topics #legacy-post-archive .system-list li {
		overflow: hidden;
		line-height: 1.4;
		margin-bottom: 5vw;
		width: 48.2%;
		margin-right: 3.5%;
	}
	#topics #legacy-post-archive .system-list li a:hover {
		text-decoration: none;
	}
	#topics #legacy-post-archive .system-list li:nth-child(2n) {
		margin-right: 0;
	}
	#topics #legacy-post-archive .system-list .system-date {
		font-size: 2.75vw;
		line-height: 1.4;
		letter-spacing: 0;
		margin-bottom: 1.75vw;
		color: #958707;
		font-weight: 500;
	}
	#topics #legacy-post-archive .system-list .system-date span {
		font-size: 2.75vw;
	}
	#topics #legacy-post-archive .system-list .system-ttl-01 {
		font-size: 3.75vw;
		letter-spacing: 0.19vw;
		line-height: 1.4;
		display: block;
		margin-bottom: 3vw;
	}
	#topics #legacy-post-archive .system-list-inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 0.7vw 1.5vw;
	}
	#topics #legacy-post-archive .system-list .system-pic {
		width: 100%;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		text-align: center;
		margin-bottom: 3.15vw;
		position: relative;
		border-radius: 3vw;
	}
	#topics #legacy-post-archive .system-list .system-pic img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		display: block;
	}
	#topics #legacy-post-archive .legacy-post-archive__empty {
		width: 100%;
		list-style: none;
		text-align: center;
		padding: 8vw 4vw;
	}

	#post #topics .system-contents .system-pic {
		width: 100%;
		max-width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0 2.7vw 4.2vw;
		overflow: hidden;
		border-radius: 3vw;
		text-align: center;
		position: relative;
		background: #f5f4f0;
	}
	#post #topics .system-contents .system-pic img {
		position: static;
		width: 100%;
		height: auto;
		max-width: 100%;
		vertical-align: bottom;
		display: block;
		-o-object-fit: contain;
		object-fit: contain;
	}

	#topics #legacy-post-archive .legacy-post-archive__pagenavi {
		clear: both;
		margin: 6vw auto 12vw;
		padding: 0 2.7vw;
		text-align: center;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi nav {
		display: block;
		width: 100%;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi {
		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;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 2vw;
		margin: 0;
		font-size: 3.2vw;
		line-height: 1.4;
		font-weight: 500;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list li {
		width: auto;
		margin: 0;
		display: inline-block;
		vertical-align: middle;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi span.pages {
		display: none;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi a,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list a {
		display: inline-block;
		min-width: 10vw;
		text-align: center;
		padding: 3vw 4vw;
		background: #eeefef;
		border: 1px solid #dcdddd;
		color: #231815;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi a:hover,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list a:hover {
		background: #523e1e;
		color: #fff;
		border-color: #523e1e;
		text-decoration: none;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi span.current,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list span.current,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list li.active > span,
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .page-list li.active > a {
		display: inline-block;
		min-width: 10vw;
		text-align: center;
		padding: 3vw 4vw;
		background: #231815;
		color: #fff;
		border: 1px solid #231815;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#topics #legacy-post-archive .legacy-post-archive__pagenavi .wp-pagenavi span.extend {
		padding: 3vw 2vw;
		border: none;
		background: transparent;
		color: #666;
		min-width: auto;
	}
}