table {
	width: 60%;
	margin: 1.5rem auto;
	border: solid 1px #ccc;
	padding: 10px;
}

td {
	border: solid 1px #ccc;
	padding: 10px;
	text-align: center;
}

tr {
	border: solid 1px #ccc;
	padding: 10px;
	text-align: center;
}

.info {
	max-width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 20px;
	border-radius: 10px;
}
.info h2 {
	text-align: center;
	font-size: 2.8rem;
	margin-bottom: 20px;
	font-family: inherit;
}

.info h3 {
	text-align: left; 
	font-size: 1.7rem;
	margin-top: 10px;
	margin-bottom: 20px;
	font-family: inherit;
	border-bottom: 1px solid #004A98;
	padding-bottom: 10px;
}

.info p {
	margin-bottom: 2.0rem;
}

/* カテゴリ別背景 */
.info .category-E {
  background-color: #FF5050;
}
.info .category-C {
  background-color: #FFBE3B;
}
.info .category-S {
  background-color: #8EC16B;
}
.info .category-I {
  background-color: #004A98;
}
.info .category-O {
  background-color: #969696;
}

.narrow {
	margin-bottom: 20px;
}

.info-hist {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding:15px;
}

.info-item {
	display: flex;
	align-items: center; /* アイテムを中央揃え */
	justify-content: flex-start;
	padding: 8px;
}

.info-item .category {
	width: 120px;
	text-align: center;
	padding: 2px 5px;
	color: white;
	font-weight: bold;
	border-radius: 3px;
	margin: 0px 20px 0px 20px;
}

.info-item .header-row {
	display: flex;
}

.info-item .date {
	text-align: center;
	margin-right: 20px;
}

/* ▼ 画面幅が768px以下のときは縦並びに変更 ▼ */
@media (max-width: 768px) {
	.info-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.info-item .header-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 5px;
	}

	.info-item .category {
		margin: 0px 20px 0px 0px;
	}
	
	.info-item .topic {
		padding-top: 1rem;
		padding-left: 2rem;
		padding-right: 2rem;
		width: 100%;
		box-sizing: border-box;
	}
}


.info-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}


.info-title {
	display: flex;
	flex-direction: row; /* デフォルトでは横並び */
	align-items: center;
	justify-content: flex-start;
	background-color: #fff;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	flex-wrap: wrap; /* 必要なら折り返し */
}

.info-title .summary-bar .category {
	width: 120px;
	text-align: center;
	padding: 5px 10px;
	color: white;
	font-weight: bold;
	border-radius: 3px;
	margin-right: 20px;
}

.info-contents {
	background-color: #fff;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	margin-bottom: 5px;
}

.info-contents .main-area {
	align-items: center;
	justify-content: flex-start;
	background-color: #fff;
	padding: 15px 1.5rem 5px 1.5rem;
	text-align: left;
}

.info-links {
	display: flex;
	justify-content: center;
}
.info-links a {
	text-decoration: none;
	color: #003087;
	font-size: 16px;
}
.info-links a:hover {
	text-decoration: underline;
}


/* ▼ 画面幅が768px以下のときは縦並びに変更 ▼ */
@media (max-width: 768px) {
	.info-title {
		flex-direction: column;
		align-items: flex-start;
	}

	.info .info-category .category {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.info-title .topic {
		padding-left: 2rem;
		padding-right: 2rem;
		width: 100%; /* オプション：幅100%にして余白を活かす */
		box-sizing: border-box; /* padding分を含めて幅を管理 */
		margin-top: 10px;
	}

	.info-contents {
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid #ccc;
		margin-bottom: 5px;
	}

	.info-contents .main-area {
		align-items: center;
		justify-content: flex-start;
		background-color: #fff;
		padding: 15px 1.0rem 5px 1.0rem;
		text-align: left;
	}
}