@charset "UTF-8";

#contents .inner { max-width: 800px; }

/* archive */
.column {
	display: flex;
	flex-direction: row-reverse;
	#postCont {
		.postList {
			a {
				display: block;
				&:hover > * { text-decoration: underline; }
				.date { color: var(--color-green); }
				.thumb img {
					object-fit: cover;
					object-position: center top;
				}
				.eventType { color: var(--color-green); }
				.eventDate {
					display: flex;
					line-height: 1;
					align-items: center;
					dt {
						color: #fff;
						text-align: center;
						background-color: #000;
					}
				}
			}
		}
		.pagerCont {
			display: flex;
			.nolink {
				opacity: 0;
				pointer-events: none;
			}
			a { text-decoration: underline; }
			& > ul {
				display: flex;
				&::before {
					content: "｜";
					display: inline-block;
				}
				& > li {
					&::after {
						content: "｜";
						display: inline-block;
					}
				}
			}
		}
	}
	@media screen and (min-width:1145px), print {
		#postCont {
			width: calc(100% - 200px);
			.postList {
				line-height: 28px;
				.title { font-size: 14px; }
				&:is(.news .postList) {
					li + li { margin-top: 35px; }
				}
				&:is(.events .postList) {
					display: flex;
					flex-wrap: wrap;
					gap: 60px;
					li {
						width: calc(50% - 30px);
						.thumb img { aspect-ratio: 29 / 20; }
						.eventType { font-size: 14px; }
						.thumb + * { margin-top: 20px; }
						.eventDate {
							margin-top: 25px;
							dt {
								width: 70px;
								font-size: 14px;
								margin-right: 10px;
								padding-block: 4px 6px;
							}
						}
					}
				}
			}
			.pagerCont {
				font-size: 14px;
				margin-top: 140px;
				justify-content: space-between;
				a:hover {
					color: var(--color-green);
					text-decoration: none;
				}
			}
		}
		#sidebar {
			width: 200px;
			li + li { margin-top: 15px; }
			a:hover { text-decoration: underline; }
		}
	}
	@media screen and (max-width:1144px) {
		#postCont {
			width: calc(100% - 95px);
			.postList {
				font-size: 14px;
				line-height: 24.5px;
				li + li { margin-top: 16px; }
				&:is(.events .postList) {
					li {
						.thumb {
							margin-bottom: 18px;
							img { aspect-ratio: 460 / 317; }
						}
						.eventDate {
							margin-top: 25px;
							dt {
								width: 61px;
								font-size: 12px;
								margin-right: 10px;
								padding-block: 4px 5px;
							}
						}
					}
				}
			}
			.pagerCont {
				font-size: 12px;
				margin-top: 88px;
				margin-left: -95px;
				justify-content: space-between;
			}
		}
		#sidebar {
			width: 95px;
			li + li { margin-top: 12px; }
		}
	}
}

/* article */
#post {
	.articleHeader {
		.date, .eventType { color: var(--color-green); }
		.postTitle { font-weight: 500; }
		.eventDate {
			display: flex;
			line-height: 1;
			align-items: center;
			dt {
				color: #fff;
				text-align: center;
				background-color: #000;
			}
		}
	}
	.box {
		font-weight: 500;
		&.jaText {
			word-break: break-all;
		}
		.text {
			& > * { margin-top: 2em; }
		}
	}
	.postPager {
		display: flex;
		justify-content: center;
		.nolink {
			opacity: 0;
			pointer-events: none;
		}
	}
	@media screen and (min-width:1145px), print {
		.articleHeader {
			.postTitle {
				font-size: 24px;
				margin-top: 10px;
			}
			.eventDate {
				margin-top: 20px;
				dt {
					width: 70px;
					font-size: 14px;
					padding-block: 4px;
					margin-right: 10px;
				}
			}
		}
		.box {
			margin-top: 40px;
			.subTitle {
				font-size: 18px;
				margin-top: 40px;
			}
			.text {
				font-size: 14px;
				line-height: 30px;
				margin-top: 10px;
			}
		}
		.postPager {
			font-size: 14px;
			margin-top: 140px;
			.return { margin-inline: 70px; }
		}
	}
	@media screen and (max-width:1144px) {
		.articleHeader {
			.postTitle {
				font-size: 20px;
				margin-top: 10px;
			}
			.eventDate {
				margin-top: 16px;
				dt {
					width: 61px;
					font-size: 12px;
					margin-right: 9px;
					padding-block: 3px 4px;
				}
			}
		}
		.box {
			margin-top: 40px;
			.subTitle {
				font-size: 15px;
				margin-top: 45px;
			}
			.text {
				font-size: 12px;
				margin-top: 20px;
			}
		}
		.postPager {
			font-size: 12px;
			margin-top: 85px;
			.return { margin-inline: 50px; }
		}
	}
}