/* 公開ページの切り替えタブ（PASSAGEとは／本を探す）。既存の .header の中に収まる前提のスコープ。 */

/* ロゴ行60pxの直下にタブ行(約49px)が付くので、ヘッダー全体の高さをその分だけ伸ばす。 */
.header--public {
	height: 109px;
	top: 0;
}
/* ヘッダー内の高さが伸びた分、ロゴ行自身は元の60pxに留める。 */
.header--public .header__wrapper {
	height: 60px;
}
/* index--fixed はスクロールで出てくるまでヘッダーを隠す演出だが、公開ヘッダーは常時表示が要件。 */
body.index--fixed .header--public {
	opacity: 1;
	transform: translate(0, 0);
}
.header--public ~ .main {
	padding-top: 109px;
}
body.index .header--public ~ .main {
	padding-top: 109px;
}
/* フロアガイド等の #id アンカーがヘッダーの下に隠れないよう、伸びた高さ分だけスクロール位置を補正する。 */
html:has(.header--public) {
	scroll-padding-top: 109px;
}

.public-page-tabs {
	width: 100%;
	background: var(--white, #fff);
	border-bottom: 1px solid var(--gray-20, #d7dde0);
}
.public-page-tabs__list {
	display: flex;
	max-width: 640px;
	margin: 0 auto;
}
.public-page-tabs__item {
	flex: 1 1 50%;
	min-width: 0;
}
.public-page-tabs__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 4px 8px;
	border-bottom: 3px solid transparent;
	color: var(--gray-70, #586d7a);
	font-size: 1.6rem;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}
.public-page-tabs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	font-size: 18px;
	line-height: 1;
}
.public-page-tabs__icon img {
	display: block;
	width: 20px;
	height: 20px;
}
.public-page-tabs__link--current {
	color: var(--gray-90, #344652);
	font-weight: bold;
	border-bottom-color: var(--gray-80, #455966);
}
.public-page-tabs__link:focus-visible {
	outline: 2px solid var(--primary, #007bc7);
	outline-offset: -2px;
}

@media screen and (max-width: 360px) {
	.public-page-tabs__link {
		font-size: 1.5rem;
	}
}