/* ==========================================================================
   TEYLL — ヘッダー（l-header-teyll。Figma 1337:91293・SP l-header-teyll-sp 1368:6426。header-teyll.php）
   - 画面の上に浮いた白いカプセル（いちばん上の層）。PC：上・左右 24px・高さ 80（下へスクロールすると 64＝teyll.js の is-scrolled）
   - 英字のナビの下に小さく日本語。いまのページのナビの下に Ring のグラデーションの線 2px（aria-current="page"）
   - 1023px 以下はナビを隠して ☰（44 の丸・Ring の輪）。SP は上・左右 12px・高さ 60（大きさは変えない）
   ========================================================================== */
.l-header-teyll {
	position: fixed;
	top: calc(24px + var(--admin-bar-offset, 0px));
	left: 24px;
	right: 24px;
	z-index: 100;
	pointer-events: none; /* カプセルの外（左右のすき間）は下の画面を押せる */
}

.l-header-teyll__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1392px;
	height: 80px;
	margin-inline: auto;
	padding: 0 14px 0 36px;
	border-radius: var(--radius-full);
	background: var(--teyll-bg-canvas);
	box-shadow: var(--shadow-float);
	pointer-events: auto;
	transition: height 0.3s ease;
}

.l-header-teyll.is-scrolled .l-header-teyll__inner {
	height: 64px;
}

.l-header-teyll__logo {
	display: block;
	flex: none;
}

.l-header-teyll__logo img {
	width: auto;
	height: 34px;
}

/* ---------- ナビ（英字＋日本語） ---------- */
.l-header-teyll__nav-list {
	display: flex;
	align-items: center;
	gap: 40px;
}

.l-header-teyll__nav-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
}

.l-header-teyll__nav-en {
	font: var(--text-teyll-en-label);
	letter-spacing: var(--ls-teyll-en-label);
	color: var(--teyll-text-primary);
}

.l-header-teyll__nav-ja {
	font: var(--text-teyll-caption);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* いまのページ・ホバー：下に Ring の線 2px（ホバーは左から伸びる） */
.l-header-teyll__nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 1px;
	background: var(--teyll-gradient-ring);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.l-header-teyll__nav-link:hover::after,
.l-header-teyll__nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* ---------- 右：無料で相談する・☰ ---------- */
.l-header-teyll__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.l-header-teyll__menu {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--teyll-bg-canvas);
	color: var(--teyll-text-primary);
}

.l-header-teyll__menu::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: var(--teyll-gradient-ring);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- 1023px 以下：ナビを隠して ☰ ---------- */
@media (max-width: 1023px) {
	.l-header-teyll__nav {
		display: none;
	}

	.l-header-teyll__menu {
		display: inline-flex;
	}
}

/* ---------- SP（Figma l-header-teyll-sp：351×60・x12 y12） ---------- */
@media (max-width: 767px) {
	.l-header-teyll {
		top: calc(12px + var(--admin-bar-offset, 0px));
		left: 12px;
		right: 12px;
	}

	.l-header-teyll__inner,
	.l-header-teyll.is-scrolled .l-header-teyll__inner {
		height: 60px;
		padding: 0 8px 0 16px;
	}

	.l-header-teyll__logo img {
		height: 24px;
	}

	.l-header-teyll__actions {
		gap: 8px;
	}

	/* 「無料で相談する」は小さく（高さ 44・文字 TEYLL/SP/Label 13・アイコンなし） */
	.l-header-teyll__contact.c-teyll-button--s {
		min-height: 44px;
		padding: 0 16px;
		font: var(--text-teyll-label);
	}

	.l-header-teyll__contact .c-teyll-button__icon {
		display: none;
	}
}