@charset "utf-8";

/* =========================================================
  History Timeline
========================================================= */
.p-history-timeline {
	padding-top: clamp(70px, 7.8vw, 150px);
	padding-bottom: clamp(40px, 4.165vw, 80px);
	background-color: #f7f7f7;
}

.p-history-timeline__item {
	display: grid;
	grid-template-columns: 100px 120px 1fr;
	column-gap: 0;
}

.p-history-timeline__year {
	padding-top: 0.1em;
	font-size: clamp(32px, 2.344vw, 45px);
	font-weight: 400;
	line-height: 1;
	text-align: right;
}

.p-history-timeline__year span {
	color: var(--color-primary);
}

.p-history-timeline__point {
	position: relative;
}

.p-history-timeline__point::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 110%;
	background-color: #9f9f9f;
	transform: translateX(-50%);
}
.p-history-timeline__item:first-of-type .p-history-timeline__point::before {
	top: 10px;
}
.p-history-timeline__item:last-of-type .p-history-timeline__point::before {
	content: none;
}

.p-history-timeline__point::after {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 50%;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background-color: var(--color-primary);
	transform: translateX(-50%);
}

.p-history-timeline__body {
	padding-bottom: clamp(55px, 5.2vw, 100px);
}

.p-history-timeline__body dl {
	display: grid;
	gap: 1.4em;
}

.p-history-timeline__body dl > div {
	display: grid;
	grid-template-columns: 170px 1fr;
	column-gap: 45px;
}

.p-history-timeline__body dt,
.p-history-timeline__body dd {
	font-size: clamp(16px, 1.042vw, 20px);
	font-weight: 600;
	line-height: 1.8;
}

.p-history-timeline__body dt {
	white-space: nowrap;
}

.p-history-timeline__body dt span {
	color: var(--color-primary);
}

/* =========================================================
  History Timeline - SP
========================================================= */
@media (max-width: 767px) {
	.p-history-timeline {
		padding-top: 55px;
		padding-bottom: 65px;
	}

	.p-history-timeline__item {
		grid-template-columns: 67px 35px 1fr;
	}

	.p-history-timeline__year {
		font-size: 28px;
	}

	.p-history-timeline__point::after {
		width: 16px;
		height: 16px;
	}

	.p-history-timeline__body {
		padding-bottom: 45px;
	}

	.p-history-timeline__body dl > div {
		display: block;
	}

	.p-history-timeline__body dt,
	.p-history-timeline__body dd {
		font-size: 14px;
		line-height: 1.7;
	}

	.p-history-timeline__body dd {
		margin-top: 0.4em;
	}
}

/* =========================================================
  Custom Override
  Typography
========================================================= */

.p-history dt,
.p-history dd {
	font-weight: 400;
	color: #444;
	line-height: 1.8;
}

.p-history__year {
	font-weight: 300;
}

/* =========================================================
  Custom Override
  History Typography
========================================================= */

@media (min-width: 768px) {

	/* 年号と本文の距離を少し詰める */
	.p-history-timeline__item {
		grid-template-columns: 90px 90px 1fr;
	}

	/* 月と本文の距離を少し詰める */
	.p-history-timeline__body dl > div {
		grid-template-columns: 140px 1fr;
		column-gap: 28px;
	}

	/* 年号 */
	.p-history-timeline__year {
		font-weight: 300;
		letter-spacing: 0.02em;
	}

	/* 月・本文 */
	.p-history-timeline__body dt,
	.p-history-timeline__body dd {
		font-weight: 400;
		line-height: 1.8;
		color: #444;
	}

}