@charset "utf-8";
/* CSS Document */

.timeline {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	font-family: sans-serif;
	padding-top: 40px;
	padding-bottom: 100px;
}

.timeline h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #1e3a8a; /* 青系のアクセント */
}

.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  margin-left: 60px; /* 年の部分のスペース */
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -30px;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #1F286F; /* 縦線 */
	border-radius: 2px;
}

.year {
	position: absolute;
	left: -70px;
	font-size: 1.5em;
	font-weight: bold;
	color: #1e3a8a;
	background-color: #FFFFFF;
}

.events {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.event {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px 0;
}

.month {
  font-weight: bold;
  color: #2563eb;
  min-width: 40px;
}

.description {
	background-color: #F5F7FB;
	padding-top: 12px;
	padding-right: 12px;
	padding-left: 20px;
	padding-bottom: 12px;
	border-radius: 8px;
	flex: 1;
	color: #454545;
}
/* レスポンシブ対応 */
@media screen and (max-width: 789px) {
	.timeline {
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	font-family: sans-serif;
	padding-top: 40px;
	padding-bottom: 100px;
}
}