@charset "utf-8";

.timeline {
	width: 96%;
	max-width: 950px;
	font-family: "Zen Kaku Gothic New", serif;
	box-sizing: border-box;
}
.timeline-list {
	padding: 0 0;
}
.timeline-list-item {
	display: flex;
	line-height: 1.5;
}
.timeline-list-item .date {
	width: 20%;
	padding:0 20px;
	color: var(--accent-color1);
	font-weight: bold;
	text-align: right;
	box-sizing: border-box;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.timeline-list-item .content {
	position: relative;
	width: 80%;
	padding: 0 20px 20px 30px;
	border-left: 1px solid #ccc;
	box-sizing: border-box;
}
.timeline-list-item .content::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px; /*widthの半分の値を指定*/
	width: 20px;
	height: 20px;
	background-color: var(--accent-color1);
	border-radius: 10px;
}
.content p {
	margin: 0 0 20px 0;
	line-height: 1.2;
	color: var(--accent-color1);
	font-weight: 500;
	font-size: clamp(17px, 1.7vw, 18px);
}
/*一番下*/
.tlend .content{
	position: relative;
	width: 80%;
	padding: 0 20px 40px 30px;
	border-left: none;
}

@media (max-width: 769px) {
	.timeline {
		width: 100%;
	}
	.timeline-list-item {
		display: block; /* 横並びを解除して縦並びに */
	}

	.timeline-list-item .date,
	.timeline-list-item .content {
		width: 100%; /* 横幅を100%にして並べる */
		text-align: left; /* 必要ならdateも左寄せに */
		padding-left: 10px;
		padding-right: 10px;
	}

	.timeline-list-item .content {
		border-left: none; /* 縦線削除 */
		padding-left: 10px; /* 微調整 */
	}

	.timeline-list-item .content::before {
		display: none; /* ●を非表示に */
	}
}