/* local.css — feature08 都市にまつわる諸活動 追加スタイル */

/* 活動セクション */
#Contents #ContentsInner article .activity-section {
	margin-top: 0;
	padding: 20px 0;
	border-bottom: 1px solid #e5e5e5;
}
#Contents #ContentsInner article h2 + .activity-section {
	margin-top: 0;
	padding-top: 0;
}
#Contents #ContentsInner article .activity-section:last-of-type {
	border-bottom: none;
}

/* 教員名 */
#Contents #ContentsInner article .activity-teacher {
	margin-top: 5px;
	font-size: 1.3em;
	color: #666;
}

/* キーワードタグ */
#Contents #ContentsInner article .activity-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	align-items: center;
}
#Contents #ContentsInner article .activity-keywords::before {
	content: "Keywords";
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.95em;
	font-weight: bold;
	color: #fff;
	background: #5a4a8a;
	border-radius: 3px;
	line-height: 1.5;
	margin-right: 4px;
}
#Contents #ContentsInner article .activity-keywords span {
	display: inline-block;
	padding: 6px 16px;
	font-size: 1.1em;
	color: #5a4a8a;
	background: #f3f0fa;
	border-radius: 3px;
	line-height: 1.6;
}

/* 関連リンク */
#Contents #ContentsInner article .activity-links {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#Contents #ContentsInner article .activity-links a {
	display: inline-block;
	padding: 8px 18px;
	font-size: 1.1em;
	color: #5a4a8a;
	background: #f8f6fc;
	border: 1px solid #c8b8e8;
	border-radius: 5px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
#Contents #ContentsInner article .activity-links a:hover {
	background: #5a4a8a;
	color: #fff;
	border-color: #5a4a8a;
}
#Contents #ContentsInner article .activity-links a::before {
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 6px;
	font-size: 0.9em;
}

/* 4列グリッド（バードバス写真8枚用） */
#Contents #ContentsInner article .item-flex_col_split04 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 25px;
}
#Contents #ContentsInner article .item-flex_col_split04 figure {
	width: 23%;
	margin: 0 auto 15px;
}
#Contents #ContentsInner article .item-flex_col_split04 figure img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	#Contents #ContentsInner article .item-flex_col_split04 figure {
		width: 48%;
	}
}

/* 画像カーソル */
#Contents #ContentsInner article figure img {
	cursor: zoom-in;
}

/* モーダル */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10000;
	justify-content: center;
	align-items: center;
	cursor: zoom-out;
}
.modal-overlay.is-active {
	display: flex;
}
.modal-overlay img {
	max-width: 90%;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.modal-overlay .modal-caption {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 1.1em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.modal-overlay .modal-close {
	position: absolute;
	top: 15px;
	right: 25px;
	color: #fff;
	font-size: 2.5em;
	cursor: pointer;
	line-height: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.modal-overlay .modal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 3em;
	cursor: pointer;
	padding: 10px 18px;
	user-select: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
	transition: background 0.2s;
	border-radius: 4px;
}
.modal-overlay .modal-nav:hover {
	background: rgba(255, 255, 255, 0.15);
}
.modal-overlay .modal-prev {
	left: 15px;
}
.modal-overlay .modal-next {
	right: 15px;
}
.modal-overlay .modal-counter {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #ccc;
	font-size: 1em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}