@charset "utf-8";

.timeline {
	width: 96%;
	max-width: 940px;
	margin-top: 2em;
}
.timeline-list {
	padding: 0 0;
}
.timeline-list-item {
	display: flex;
	line-height: 1.5;
	font-size: 16px;
}
.timeline-list-item .date {
	width: 20%;
	padding:0 20px;
	color: #888888;
	font-weight: bold;
	text-align: right;
}
@media (max-width: 569px) {
	.timeline {
		width: 100%;
		max-width: 940px;
	}
	.timeline-list-item .date {
		width: 25%;
		padding: 0 15px 0 15px;
		color: #888888;
        	font-weight: bold;
		font-size:90%;
	}
}
.timeline-list-item .content {
	position: relative;
	width: 80%;
	padding: 0 20px 40px 30px;
	border-left: 1px solid var(--main-color);	/*縦線の色*/
}
@media (max-width: 569px) {
	.timeline-list-item .content {
		font-size: 85%;
	}
}
.timeline-list-item .content::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px; /*widthの半分の値を指定*/
	width: 20px;
	height: 20px;
	background-color: var(--main-color);	/*●の色*/
	border-radius: 10px;
}
.h-alternative{
	font-size: clamp(17px, 1.7vw, 19px);
	font-weight: 600;
	color: var(--main-color);
}