/* ============================================================
	/corporate/info/history/ 配下の共通スタイル

	対象      : /corporate/info/history/ 以下の全ページ
 ============================================================ */

/* ====================================
	ページタイトル
 ==================================== */
.page-heading {
	padding-block: 4rem 3rem;
}

.page-heading__title {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.page-heading__lead {
	max-inline-size: 800px;
	margin: 2rem auto 0;
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: center;
}

@media print,
screen and (768px <=width) {
	.page-heading {
		padding-block: 7rem 6rem;
	}

	.page-heading__title {
		font-size: 5rem;
	}

	.page-heading__lead {
		margin-block-start: 4rem;
		font-size: 2rem;
	}
}

/* ====================================
	セクションナビ
 ==================================== */
.section-nav {
	--section-nav-height: 40px;
	--section-nav-duration: .25s;
	padding-block: 2.5rem;
	border-bottom: 1px solid var(--gray-300);
}

/* 読み込み前の高さを確保する */
.section-nav>.layout-inner {
	min-block-size: var(--section-nav-height);
}

.section-nav__list a,
.section-nav__toggle {
	display: flex;
	align-items: center;
	min-block-size: var(--section-nav-height);
	padding: .7rem 2rem;
	border: 1px solid var(--black);
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1.4;
}

/* 現在ページ */
.section-nav__list .active {
	background: var(--gray-300);
}

/* PC：横並びのタブ */
@media print,
screen and (768px <=width) {
	.section-nav {
		padding-block: 5rem 3rem;
	}

	.section-nav__toggle {
		display: none;
	}

	.section-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.section-nav__list a {
		justify-content: center;
		min-inline-size: 160px;
		text-align: center;
	}
}

/* モバイル：現在ページ名のボタンで開閉するドロップダウン */
@media screen and (width < 768px) {
	.section-nav__toggle {
		inline-size: 100%;
		padding-inline-end: 40px;
		text-align: left;
		position: relative;
		transition: border-block-end-color 0s var(--section-nav-duration);
	}

	.section-nav__toggle::before {
		content: '';
		display: block;
		inline-size: 12px;
		block-size: 14px;
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		background: url('/assets/common/images/plus-solid.svg') no-repeat center center/auto 100%;
	}

	.section-nav__toggle[aria-expanded="true"]::before {
		background-image: url('/assets/common/images/minus-solid.svg');
	}

	.section-nav__toggle[aria-expanded="true"] {
		border-block-end-color: var(--gray-300);
		transition-delay: 0s;
	}

	/* 開閉アニメーション */
	.section-nav__panel {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		border: 1px solid var(--black);
		border-block-start: 0;
		transition: grid-template-rows var(--section-nav-duration) ease, visibility var(--section-nav-duration);
	}

	.section-nav__panel>* {
		overflow: hidden;
	}

	.section-nav__panel.is-open {
		grid-template-rows: 1fr;
		visibility: visible;
	}

	.section-nav__list {
		display: flex;
		flex-direction: column;
	}

	/* 枠線はトグルと一覧の外周だけ。項目どうしは薄い罫線で区切る */
	.section-nav__list a {
		border: 0;
	}

	.section-nav__list>li+li {
		border-block-start: 1px solid var(--gray-300);
	}
}

/* ====================================
	セクションナビ（ページ下部）
 ==================================== */
.section-nav--bottom {
	display: none;
}

@media print,
screen and (768px <=width) {
	.section-nav--bottom {
		display: block;
		padding-block: 6rem 3rem;
		border-block-start: 1px solid var(--gray-300);
		border-block-end: 0;
	}

	.section-nav__heading {
		font-size: 2.2rem;
		line-height: 1.6;
	}

	/* 読み込み前の高さを確保する */
	.section-nav--bottom .section-nav__panel {
		min-block-size: var(--section-nav-height);
		margin-block-start: 3rem;
	}
}

@media (hover:hover) and (pointer: fine) {

	.section-nav__list a:hover,
	.section-nav__toggle:hover {
		background: var(--gray-100);
		text-decoration: none;
	}

	.section-nav__list .active:hover {
		background: var(--gray-300);
	}
}