@charset "UTF-8";

/* ============================================================
	年表ページのスタイル

	対象      : /corporate/info/history/timeline/
	依存       : /assets/templates/2026/global.css（--gray-* などのカスタムプロパティ）
	読み込み順 : global.css → history.css → timeline.css

	年代ナビの表示中の年代は .is-current で塗る。上部のナビはタブ
	（aria-selected）、下部のナビはただのボタンで、状態の持ち方が違うため。
 ============================================================ */

.timeline {
	padding-block-end: 10rem;
}

/* ====================================
	年代ナビ
 ==================================== */
.timeline-nav-wrapper--bottom {
	margin-block-start: 4rem;
}

.timeline-nav {
	display: flex;
}

.timeline-nav button {
	flex: none;
	cursor: pointer;
}

/* 下部のナビは複製されるまで出さない */
.timeline-nav-wrapper--bottom:not(:has(button)) {
	display: none;
}

/* ====================================
	年表
 ==================================== */
.timeline-panel[hidden] {
	display: none;
}

.timeline-panel__title {
	margin-block: 4rem 3rem;
	padding: .6rem;
	background: var(--gray-700);
	color: var(--white);
	font-size: 1.8rem;
	font-weight: 300;
	text-align: center;
}

.timeline-row {
	padding-block: 2rem;
	border-block-start: 1px solid var(--gray-300);
}

.timeline-row:last-child {
	border-block-end: 1px solid var(--gray-300);
}

.timeline-row__year {
	font-weight: 400;
}

.timeline-row__list {
	display: grid;
	gap: .8rem;
}

.timeline-row__list li {
	padding-inline-start: 1.2em;
	line-height: 1.6;
	position: relative;
}

.timeline-row__list li::before {
	content: '';
	inline-size: .4rem;
	block-size: .4rem;
	position: absolute;
	top: .8em;
	left: .6em;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--black);
}

/* ====================================
	768px未満専用スタイル
 ==================================== */
@media screen and (width < 768px) {

	/* 年代ナビ：画面幅いっぱいの横スクロール（.layout-outer の左右5%を打ち消す） */
	.timeline-nav-wrapper {
		margin-inline: calc(-100% / 18);
		padding-block: 1rem;
		border-block: 2px solid var(--gray-300);
		overflow-x: auto;
	}

	/* 左右の余白は .layout-outer と同じ5%。スクロール末尾でも切れないよう内側に持たせる */
	.timeline-nav {
		gap: 1rem;
		inline-size: fit-content;
		padding-inline: 5%;
		white-space: nowrap;
	}

	.timeline-nav button {
		padding: .8rem 1rem;
		border-radius: 3px;
		background: var(--gray-100);
		font-size: 1.2rem;
		font-weight: 500;
	}

	.timeline-nav button.is-current {
		background: var(--gray-500);
		color: var(--white);
	}

	.timeline-nav-wrapper--bottom {
		margin-block-start: 6rem;
	}

	.timeline-row__year {
		padding-inline-start: 1.4rem;
	}

	.timeline-row dd {
		margin-block-start: 1.2rem;
	}

	.timeline-row__list {
		font-size: 1.4rem;
	}
}

/* ====================================
	768px以上専用スタイル
 ==================================== */
@media print,
screen and (768px <=width) {
	.timeline {
		padding-block-end: 4rem;
	}

	/* 年代ナビ：折り返す横並び */
	.timeline-nav-wrapper--bottom {
		margin-block-start: 5rem;
	}

	.timeline-nav {
		flex-wrap: wrap;
		gap: 1.4rem 0;
	}

	.timeline-nav button {
		inline-size: 151px;
		margin-inline-start: -1px;
		padding: 1rem;
		border-inline: 1px solid var(--gray-300);
		font-size: 1.4rem;
		font-weight: 300;
		text-align: center;
		position: relative;
		z-index: 0;
	}

	.timeline-nav button:focus-visible {
		outline-offset: -2px;
	}

	/* 左右の罫線を残して内側だけ塗る */
	.timeline-nav button::before {
		content: '';
		position: absolute;
		inset: 0 1.4rem;
		z-index: -1;
		background: var(--gray-500);
		opacity: 0;
	}

	.timeline-nav button.is-current {
		color: var(--white);
	}

	.timeline-nav button.is-current::before {
		opacity: 1;
	}

	.timeline-nav-wrapper--bottom {
		margin-block-start: 12rem;
	}

	.timeline-row {
		display: flex;
		gap: 2rem;
		align-items: flex-start;
	}

	.timeline-row__year {
		flex: none;
		inline-size: 220px;
	}

	.timeline-row dd {
		flex: 1;
		margin: 0;
	}
}

/* ====================================
	（768px未満）ホバー、マウスポインタが有効なデバイス
 ==================================== */
@media screen and (width < 768px) and (hover:hover) and (pointer: fine) {
	.timeline-nav button:not(.is-current):hover {
		background: var(--gray-200);
	}
}

/* ====================================
	（768px以上）ホバー、マウスポインタが有効なデバイス
 ==================================== */
@media screen and (768px <=width) and (hover:hover) and (pointer: fine) {
	.timeline-nav button:hover {
		color: var(--white);
	}

	.timeline-nav button:hover::before {
		opacity: 1;
	}
}