/**
 * TOP page hero - Bonded-inspired scroll + YouTube background.
 */

:root {
	--tdsi-top-ink: #111;
	--tdsi-top-paper: #eae8e4;
	--tdsi-top-light: #EAE8E4;
	--tdsi-top-gold: #c49d62;
	--tdsi-top-header-h: 5.75rem;
}

body.tdsi-is-top {
	background: var(--tdsi-top-paper);
	color: var(--tdsi-top-ink);
}

body.tdsi-is-top.is-top-loading {
	overflow: hidden;
}

.tdsi-top-loader {
	position: fixed;
	inset: 0;
	z-index: 400;
	overflow: hidden;
	background: var(--tdsi-top-paper);
	pointer-events: auto;
	color: var(--tdsi-top-ink);
}

.tdsi-top-loader.is-leaving {
	background: transparent;
}

.tdsi-top-loader__screen {
	position: absolute;
	inset: 0;
}

.tdsi-top-loader__curtain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.tdsi-top-loader__leaf {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	will-change: transform;
}

.tdsi-top-loader__leaf--top {
	top: 0;
	transform-origin: center top;
}

.tdsi-top-loader__leaf--bot {
	bottom: 0;
	transform-origin: center bottom;
}

.tdsi-top-loader__leaf--ink {
	z-index: 1;
	background: var(--tdsi-top-ink);
}

.tdsi-top-loader__leaf--paper {
	z-index: 2;
	background: var(--tdsi-top-paper);
}

.tdsi-top-loader.is-leaving .tdsi-top-loader__leaf--paper {
	transform: scaleY(0);
	transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1);
}

.tdsi-top-loader.is-leaving .tdsi-top-loader__leaf--ink {
	transform: scaleY(0);
	transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1) 0.03s;
}

.tdsi-top-loader__stage {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tdsi-top-loader__brand {
	width: min(11.5rem, 58vw);
}

.tdsi-top-loader__logo {
	width: 100%;
}

.tdsi-top-loader__logo-inner {
	display: block;
	width: 100%;
	opacity: 0;
	transform: translateY(8px);
}

.tdsi-top-loader__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.tdsi-top-loader.is-logo-in .tdsi-top-loader__logo-inner {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.28s cubic-bezier(0.2, 0, 0, 1), transform 0.32s cubic-bezier(0.2, 0, 0, 1);
}

.tdsi-top-loader__progress {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1.15rem;
	opacity: 0;
	transform: translateY(6px);
}

.tdsi-top-loader.is-counting .tdsi-top-loader__progress {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.32s cubic-bezier(0.2, 0, 0, 1), transform 0.32s cubic-bezier(0.2, 0, 0, 1);
}

.tdsi-top-loader__bar {
	display: block;
	flex: 1;
	height: 1px;
	overflow: hidden;
	background: none;
}

.tdsi-top-loader__bar-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--tdsi-top-ink);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.tdsi-top-loader__count {
	flex: none;
	min-width: 2.4em;
	font-family: "din-2014", "Noto Sans JP", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	line-height: 1;
	text-align: right;
}

.tdsi-top-loader__label {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	z-index: 3;
	font-family: "din-2014", "Noto Sans JP", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%);
	transition: opacity 0.32s cubic-bezier(0.2, 0, 0, 1) 0.08s;
}

.tdsi-top-loader.is-counting .tdsi-top-loader__label {
	opacity: 1;
}

.tdsi-top-loader.is-fade-out .tdsi-top-loader__progress,
.tdsi-top-loader.is-fade-out .tdsi-top-loader__label {
	opacity: 0;
	transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.tdsi-top-loader.is-leaving .tdsi-top-loader__stage {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

@media (max-width: 759px) {
	.tdsi-top-loader__brand {
		width: min(7.5rem, 52vw);
	}

	.tdsi-top-loader__progress {
		margin-top: 0.95rem;
		gap: 0.55rem;
	}

	.tdsi-top-loader__count {
		font-size: 0.6875rem;
	}

	.tdsi-top-loader__label {
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdsi-top-loader__logo-inner,
	.tdsi-top-loader__progress,
	.tdsi-top-loader__label {
		transition: none;
	}

	.tdsi-top-loader.is-leaving .tdsi-top-loader__leaf {
		transition-duration: 0.25s;
		transition-delay: 0s;
	}
}

body.tdsi-is-top.is-top-loaded .tdsi-top-loader {
	pointer-events: none;
}

/* 初期表示: 背景なし + ライト文字（ドロワー閉時のみ。開時は黒） */
body.tdsi-is-top:not(.is-drawer-open) .tdsi-site-header--top,
body.tdsi-is-top:not(.is-drawer-open) .tdsi-site-header--top .tdsi-site-header__inner {
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.tdsi-is-top .tdsi-site-header--top {
	position: fixed;
	inset: 0 0 auto;
	z-index: 80;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* 固定heightだと余白分の背景下端が本文を横切って「下線」に見えるため、実寸に合わせる */
	padding-inline: 0;
	transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
	color: var(--tdsi-top-light);
}

/* スクロール後（添付1）: paper背景 + ダーク文字（ドロワー閉時のみ） */
body.tdsi-is-top.is-top-scrolled:not(.is-drawer-open) .tdsi-site-header--top,
body.tdsi-is-top.is-top-scrolled:not(.is-drawer-open) .tdsi-site-header--top .tdsi-site-header__inner {
	background: var(--tdsi-top-paper);
	color: #6F6F6F;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.tdsi-site-header--top .tdsi-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: auto;
	max-width: 100%;
	padding: 0.7rem max(1.25rem, env(safe-area-inset-right, 0px)) 0.7rem max(1.25rem, env(safe-area-inset-left, 0px));
}

.tdsi-site-header--top .tdsi-site-header__logo {
	display: inline-flex;
	align-items: center;
	position: relative;
	width: auto;
	max-width: clamp(8.5rem, 14vw, 12.5rem);
	height: calc(var(--tdsi-top-header-h) - 1.7rem);
	opacity: 0;
	transform: translate3d(0, 0.4rem, 0);
	pointer-events: none;
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 最初からヘッダー左に固定（板付き＝常設）。中央飛び／ネームプレートは使わない */
body.tdsi-is-top.is-top-brand-ready .tdsi-site-header--top .tdsi-site-header__logo,
body.tdsi-is-top.is-top-logo-docked .tdsi-site-header--top .tdsi-site-header__logo {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.tdsi-site-header--top .tdsi-site-header__logo-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* FV上: 白ロゴ → スクロールで黒ロゴへクロスフェード */
.tdsi-site-header--top .tdsi-site-header__logo-img--fv {
	position: relative;
	z-index: 1;
	opacity: calc(1 - var(--tdsi-logo-mix, 0));
	filter: drop-shadow(0 0.12rem 0.45rem rgba(0, 0, 0, calc(0.35 * (1 - var(--tdsi-logo-mix, 0)))));
	transition: opacity 0.05s linear;
}

.tdsi-site-header--top .tdsi-site-header__logo-img--header {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 0;
	height: 80%;
	width: auto;
	transform: translateY(-50%);
	opacity: var(--tdsi-logo-mix, 0);
	pointer-events: none;
	transition: opacity 0.05s linear;
}

.tdsi-site-header--top .tdsi-site-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2rem);
	margin-left: auto;
}

.tdsi-site-header--top .tdsi-site-header__nav .menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(0.7rem, 1.4vw, 1.5rem);
}

@media (min-width: 960px) {
	.tdsi-site-header--top .tdsi-site-header__nav .menu {
		display: flex;
		align-items: center;
	}
}

.tdsi-site-header--top .tdsi-site-header__nav .menu a {
	font-family: "din-2014", "Barlow", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
}

@media (min-width: 960px) and (max-width: 1279px) {
	.tdsi-site-header--top .tdsi-site-header__nav .menu > li > a {
		font-size: 16px;
	}
}

body.tdsi-is-top.is-top-scrolled .tdsi-site-header--top .tdsi-site-header__nav .menu > li > a {
	color: #6F6F6F;
}

.tdsi-site-header--top .tdsi-site-header__utils {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.tdsi-site-header--top .tdsi-site-header__sns-list {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.tdsi-site-header--top .tdsi-site-header__sns {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	text-decoration: none;
}

.tdsi-site-header--top .tdsi-site-header__sns img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
	/* 初期: グレーアイコンを #EAE8E4 寄りに */
	filter: brightness(0) invert(0.92);
	transition: filter 0.35s ease;
}

body.tdsi-is-top.is-top-scrolled .tdsi-site-header--top .tdsi-site-header__sns img {
	/* スクロール後: ダーク */
	filter: brightness(0) invert(0.435);
}

.tdsi-site-header--top .tdsi-site-header__lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	height: 1.45rem;
	padding: 0 0.7rem;
	border: 0;
	border-radius: 999px;
	background: var(--tdsi-top-light);
	font-family: "din-2014", "Barlow", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	color: #2a2a2a;
	transition: background 0.35s ease, color 0.35s ease;
}

body.tdsi-is-top.is-top-scrolled .tdsi-site-header--top .tdsi-site-header__lang {
	background: #6F6F6F;
	color: var(--tdsi-top-light);
}

.tdsi-site-header--top .tdsi-site-header__burger {
	width: 1.35rem;
	height: 0.95rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
}

.tdsi-site-header--top .tdsi-site-header__burger span {
	display: block;
	flex: 0 0 2px;
	height: 2px;
	min-height: 2px;
	max-height: 2px;
	width: 100%;
	background: currentColor;
}

.tdsi-front-page {
	min-height: 100vh;
}

.tdsi-top-hero {
	position: relative;
	height: 230vh;
}

.tdsi-top-hero__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background: var(--tdsi-top-paper);
}

.tdsi-top-hero__stage {
	position: relative;
	width: 100%;
	height: 100%;
}

.tdsi-top-hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transform-origin: center center;
	will-change: transform, border-radius, opacity;
	background: #000;
	transition: none;
	pointer-events: none;
}

/* YouTube chrome cover bands: off so footage grading stays clear. */
.tdsi-top-hero__video::before,
.tdsi-top-hero__video::after {
	content: none;
	display: none;
}

body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__video {
	opacity: 0 !important;
	visibility: hidden !important;
	will-change: auto !important;
}

body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__frame,
body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__still,
body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__poster {
	visibility: hidden;
	pointer-events: none;
}

.tdsi-top-hero__slides,
.tdsi-top-hero__slide,
.tdsi-top-hero__fallback {
	position: absolute;
	inset: 0;
}

.tdsi-top-hero__slides {
	z-index: 3;
	pointer-events: none;
}

.tdsi-top-hero.is-yt-live .tdsi-top-hero__slides {
	z-index: 1;
}

.tdsi-top-hero__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0s linear 0.7s;
	pointer-events: none;
}

.tdsi-top-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.7s ease, visibility 0s linear 0s;
}

.tdsi-top-hero__echo {
	display: none;
	pointer-events: none;
}

.tdsi-top-hero__poster {
	display: none;
	pointer-events: none;
}

.tdsi-top-hero__frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.7s ease;
}

.tdsi-top-hero.is-yt-live .tdsi-top-hero__frame {
	opacity: 1;
}

.tdsi-top-hero__clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.tdsi-top-hero__still {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.tdsi-top-hero.is-yt-live .tdsi-top-hero__still {
	opacity: 0;
}

.tdsi-top-hero__failstill {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}

.tdsi-top-hero.is-yt-fallback .tdsi-top-hero__failstill {
	opacity: 1;
	visibility: visible;
}

.tdsi-top-hero.is-yt-fallback .tdsi-top-hero__frame {
	opacity: 0;
}

.tdsi-top-hero__player {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.tdsi-top-hero__player.is-front {
	z-index: 2;
	opacity: 1;
}

.tdsi-top-hero__player iframe,
.tdsi-top-hero__player > div {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 140vw !important;
	height: 78.75vw !important;
	min-width: 248.89vh !important;
	min-height: 140vh !important;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* PC: keep YouTube 16:9 (no crop) with black bars so on-video text stays visible. */
@media (min-width: 1200px) {
	.tdsi-top-hero {
		--tdsi-fv-w: min(100vw, calc(100vh * 16 / 9));
		--tdsi-fv-h: min(calc(100vw * 9 / 16), 100vh);
	}

	.tdsi-top-hero__video {
		background: #000;
	}

	.tdsi-top-hero__still,
	.tdsi-top-hero__failstill {
		inset: auto;
		top: 50%;
		left: 50%;
		width: var(--tdsi-fv-w);
		height: var(--tdsi-fv-h);
		transform: translate(-50%, -50%);
		object-fit: contain;
		background: #000;
	}

	.tdsi-top-hero__frame {
		inset: auto;
		top: 50%;
		left: 50%;
		width: var(--tdsi-fv-w);
		height: var(--tdsi-fv-h);
		overflow: hidden;
		transform: translate(-50%, -50%);
	}

	.tdsi-top-hero__clip {
		inset: 0;
		overflow: hidden;
	}

	.tdsi-top-hero__player iframe,
	.tdsi-top-hero__player > div {
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		transform: none;
	}

	.tdsi-top-hero__fallback {
		top: 50%;
		left: 50%;
		width: var(--tdsi-fv-w);
		height: var(--tdsi-fv-h);
		transform: translate(-50%, -50%);
		object-fit: contain;
	}

	.tdsi-top-hero__caption {
		left: max(1.25rem, calc(50% - (var(--tdsi-fv-w) / 2) + 1.25rem));
		bottom: max(1.25rem, calc(50% - (var(--tdsi-fv-h) / 2) + 1.25rem));
	}
}

.tdsi-top-hero__fallback {
	background:
		linear-gradient(120deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)),
		#1a1a1a;
}

.tdsi-top-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: none;
	pointer-events: none;
}

.tdsi-top-hero__hitblock {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: transparent;
	pointer-events: auto;
	cursor: default;
}

.tdsi-top-hero__caption {
	position: absolute;
	left: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1.5rem, 4vh, 2.75rem);
	z-index: 6;
	max-width: min(28rem, 70vw);
	box-sizing: border-box;
	color: #EAE8E4;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(0.7rem, 1.2vw, 0.85rem);
	line-height: 1.55;
	text-decoration: none;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	opacity: 1;
	transition: opacity 0.35s ease;
}

.tdsi-top-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	z-index: 6;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	color: #EAE8E4;
	font-family: "din-2014", sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.tdsi-top-hero__scroll i {
	display: block;
	width: 1px;
	height: 2.5rem;
	background: currentColor;
	transform-origin: top center;
	animation: tdsi-top-scroll-line 1.6s ease-in-out infinite;
}

@keyframes tdsi-top-scroll-line {
	0%,
	100% {
		transform: scaleY(0.45);
		opacity: 0.4;
	}
	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

.tdsi-top-hero__intro {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--tdsi-top-header-h);
	bottom: 0;
	z-index: 7;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: clamp(2.25rem, 6vh, 3.5rem) 1.25rem clamp(2.75rem, 8vh, 4.5rem);
	min-height: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	transform: translate3d(0, 1.4rem, 0);
	pointer-events: none;
	color: var(--tdsi-top-ink);
	background: linear-gradient(
		180deg,
		rgba(234, 232, 228, 0) 0%,
		rgba(234, 232, 228, 0.88) 28%,
		rgba(234, 232, 228, 1) 55%
	);
	will-change: transform, opacity;
	overflow: visible;
}

.tdsi-top-hero__headline {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	width: 100%;
	max-width: 100%;
	padding: 0.18em 0 0.16em;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: min(7rem, calc((100vw - 5rem) / 14));
	line-height: 1.05;
	color: var(--tdsi-top-ink);
	white-space: nowrap;
	overflow: visible;
}

.tdsi-top-hero__char {
	display: inline-block;
	transform-origin: center center;
	opacity: 0;
	transform: scale(12);
}

@media (prefers-reduced-motion: reduce) {
	.tdsi-top-hero__char {
		opacity: 1;
		transform: none;
	}
}

.tdsi-top-hero__line {
	display: block;
	flex: 0 0 auto;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.tdsi-top-hero__line--left {
	text-align: center;
	transform: translate3d(-100vw, 0, 0);
	opacity: 0;
}

.tdsi-top-hero__line--center {
	text-align: center;
	transform: none;
	opacity: 0;
}

.tdsi-top-hero__line--right {
	text-align: center;
	transform: translate3d(100vw, 0, 0);
	opacity: 0;
}

.tdsi-top-hero__lead,
.tdsi-top-hero__cta {
	opacity: 0;
	transform: translateY(1rem);
	will-change: transform, opacity;
}

.tdsi-top-hero__lead {
	margin: clamp(1.85rem, 4.2vh, 2.75rem) auto 0;
	max-width: 70rem;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--tdsi-top-ink);
}

.tdsi-top-hero__tagline {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.125rem, 1.55vw, 1.5rem);
	font-weight: 700;
	line-height: 1.65;
}

.tdsi-top-hero__statement {
	margin: clamp(2rem, 4.6vh, 3rem) auto 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 2;
}

.tdsi-top-hero__statement span {
	display: block;
}

.tdsi-top-hero__statement .tdsi-statement-line {
	opacity: 0;
	transform: translateY(0.45rem);
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tdsi-top-hero__statement .tdsi-statement-line.is-in {
	opacity: 1;
	transform: none;
}

.tdsi-top-hero__statement-flow .tdsi-statement-line + .tdsi-statement-line {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tdsi-top-hero__statement .tdsi-statement-line {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.tdsi-top-hero__sp-break {
	display: none;
}

.tdsi-top-hero__cta {
	display: inline-block;
	margin-top: clamp(1.5rem, 4vh, 2.5rem);
	perspective: 1000px;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
	vertical-align: top;
}

.tdsi-top-hero__cta-inner {
	position: relative;
	display: block;
	width: 100%;
	transform-style: preserve-3d;
	transform-origin: bottom center;
	transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.tdsi-top-hero__cta:hover .tdsi-top-hero__cta-inner {
		transform: rotateX(-90deg) translateY(50%);
	}
}

.tdsi-top-hero__cta-face {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 11rem;
	padding: 0.5rem 2.5rem;
	border-radius: 0;
	font-family: "din-2014", sans-serif;
	font-size: clamp(1.35rem, 3.2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.tdsi-top-hero__cta-face--front {
	position: relative;
	background: #111;
	color: #EAE8E4;
}

.tdsi-top-hero__cta-face--back {
	position: absolute;
	inset: 0;
	background: #111;
	color: var(--tdsi-top-gold);
	transform: rotateX(90deg) translateY(-100%);
	transform-origin: top center;
}

.tdsi-top-hero__cta-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	user-select: none;
}

.tdsi-top-hero__cta-arrow {
	display: inline-block;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-0.02em);
}

body.tdsi-is-top.is-top-intro .tdsi-top-hero__caption,
body.tdsi-is-top.is-top-intro .tdsi-top-hero__scroll {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

body.tdsi-is-top.is-top-scrolled .tdsi-top-hero__caption,
body.tdsi-is-top.is-top-scrolled .tdsi-top-hero__scroll {
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-height: 900px) {
	.tdsi-top-hero__cta {
		margin-top: 1.15rem;
	}
}

@media (max-width: 1199px) {
	.tdsi-top-hero {
		/* Match YouTube 16:9 (letterbox bars in the footage stay visible). */
		--tdsi-fv-w: 100vw;
		--tdsi-fv-h: calc(100vw * 9 / 16);
		height: auto;
	}

	.tdsi-top-hero__sticky {
		position: relative;
		height: auto;
		overflow-x: clip;
	}

	.tdsi-top-hero__stage {
		height: auto;
	}

	.tdsi-top-hero__video {
		position: relative;
		inset: auto;
		width: 100%;
		height: var(--tdsi-fv-h);
		min-height: var(--tdsi-fv-h);
		overflow: hidden;
		border-radius: 0;
		transform-origin: center center;
		will-change: auto;
		background: #000;
	}

	.tdsi-top-hero__headline {
		flex-flow: column nowrap;
		align-items: stretch;
		white-space: normal;
		overflow: visible;
		font-size: clamp(3.1rem, 7.2vw, 5.25rem);
		line-height: 0.95;
	}

	.tdsi-top-hero__line {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		white-space: normal;
	}

	.tdsi-top-hero__phrase {
		display: block;
		width: 100%;
	}

	.tdsi-top-hero__phrase--lead {
		text-align: left;
	}

	.tdsi-top-hero__phrase--tail {
		text-align: right;
	}

	.tdsi-top-hero__intro {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		justify-content: flex-start;
		padding: 2rem clamp(1.5rem, 4.5vw, 3rem) 2.25rem;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		background: var(--tdsi-top-paper);
		overflow-x: clip;
	}

	.tdsi-top-hero__scroll {
		display: none;
	}

	body.tdsi-is-top.is-top-intro .tdsi-top-hero__caption {
		opacity: 1;
		pointer-events: auto;
	}

	body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__caption {
		opacity: 0;
		pointer-events: none;
	}

	.tdsi-top-hero__lead {
		margin-top: 1.1rem;
	}

	.tdsi-top-hero__statement {
		margin-top: 1.05rem;
	}
}

@media (max-width: 900px) and (orientation: portrait) {
	.tdsi-top-hero__headline {
		flex-direction: column;
		white-space: normal;
		font-size: clamp(3.1rem, 8.2vw, 4.6rem);
		line-height: 0.92;
	}

	.tdsi-top-hero__line {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		white-space: normal;
	}

	.tdsi-top-hero__phrase {
		display: block;
		width: 100%;
	}

	.tdsi-top-hero__phrase--lead {
		text-align: left;
	}

	.tdsi-top-hero__phrase--tail {
		text-align: right;
	}
}

@media (max-width: 759px) {
	/* SPヘッダー: ぼかしなしの黒帯（iPadミニ同様に動画をはっきり見せる） */
	body.tdsi-is-top:not(.is-drawer-open) .tdsi-site-header--top,
	body.tdsi-is-top:not(.is-drawer-open) .tdsi-site-header--top .tdsi-site-header__inner {
		background: #000;
		color: var(--tdsi-top-light);
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.tdsi-is-top:not(.is-top-scrolled) .tdsi-site-header--top {
		--tdsi-logo-mix: 0;
	}

	body.tdsi-is-top:not(.is-top-scrolled) .tdsi-site-header--top .tdsi-site-header__sns img {
		filter: brightness(0) invert(0.92);
	}

	body.tdsi-is-top:not(.is-top-scrolled) .tdsi-site-header--top .tdsi-site-header__lang {
		background: var(--tdsi-top-light);
		color: #2a2a2a;
	}

	.tdsi-site-header--top .tdsi-site-header__inner {
		gap: 0.5rem;
		padding: 0.7rem max(1.5rem, env(safe-area-inset-right, 0px)) 0.7rem max(1.25rem, env(safe-area-inset-left, 0px));
	}

	.tdsi-site-header--top .tdsi-site-header__logo {
		max-width: 7.5rem;
		flex-shrink: 1;
		min-width: 0;
	}

	.tdsi-site-header--top .tdsi-site-header__nav {
		gap: 0.45rem;
		min-width: 0;
		flex-shrink: 0;
	}

	.tdsi-site-header--top .tdsi-site-header__utils {
		gap: 0.5rem;
		flex-shrink: 0;
	}

	.tdsi-site-header--top .tdsi-site-header__sns-list {
		gap: 0.4rem;
	}

	.tdsi-site-header--top .tdsi-site-header__sns img {
		width: 16px;
		height: 16px;
	}

	.tdsi-site-header--top .tdsi-site-header__lang {
		min-width: 2.1rem;
		height: 1.35rem;
		padding: 0 0.55rem;
		font-size: var(--tdsi-top-sp-meta);
	}

	.tdsi-site-header--top .tdsi-site-header__burger {
		flex-shrink: 0;
	}

	.tdsi-top-hero {
		/* SPは sticky 余白を使わず、動画→文言の通常フロー（iPadミニと同じ） */
		height: auto;
		/* 黒ヘッダーの下から動画を始める */
		padding-top: var(--tdsi-header-h, var(--tdsi-top-header-h));
		box-sizing: border-box;
		background: #000;
	}

	.tdsi-top-hero__sticky {
		position: relative;
		height: auto;
		/* 画面外へ出す見出しが横スクロールを作り、固定ヘッダーの EN が切れる */
		overflow-x: clip;
		background: #000;
	}

	.tdsi-top-hero__stage {
		height: auto;
	}

	.tdsi-top-hero__video {
		position: relative;
		inset: auto;
		width: 100%;
		height: var(--tdsi-fv-h);
		min-height: var(--tdsi-fv-h);
		overflow: hidden;
		border-radius: 0;
		transform-origin: center center;
		will-change: auto;
		background: #000;
	}

	/* ぼかし背景は使わない（iPadミニと同じく 16:9 だけ） */
	.tdsi-top-hero__echo,
	.tdsi-top-hero.is-yt-live .tdsi-top-hero__echo,
	.tdsi-top-hero__poster,
	.tdsi-top-hero.is-yt-live .tdsi-top-hero__poster {
		display: none;
	}

	.tdsi-top-hero__still,
	.tdsi-top-hero__failstill {
		inset: 0;
		top: auto;
		left: auto;
		z-index: 3;
		width: 100%;
		height: 100%;
		transform: none;
		object-fit: contain;
		background: #000;
	}

	.tdsi-top-hero__frame {
		inset: 0;
		top: auto;
		left: auto;
		z-index: 2;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transform: none;
	}

	.tdsi-top-hero__caption {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		padding: 0.75rem 1.25rem;
		/* padding込みで本文3行分を常に確保 */
		min-height: calc(0.75rem + 0.75rem + 1.55em * 3);
		background: #111;
		color: #fff;
		text-shadow: none;
		font-size: var(--tdsi-top-sp-caption);
		line-height: 1.55;
		opacity: 1;
		pointer-events: auto;
		z-index: 6;
	}

	.tdsi-top-hero__intro {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		justify-content: flex-start;
		padding: 2.15rem 1.25rem 2.5rem;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		background: var(--tdsi-top-paper);
	}

	/* SP縦: BE HYPER- / DIMENSIONAL の2行（フォントも従来サイズ） */
	.tdsi-top-hero__headline {
		flex-flow: column nowrap;
		justify-content: center;
		align-items: stretch;
		white-space: normal;
		overflow: visible;
		font-size: clamp(2.6rem, 12vw, 3.35rem);
		line-height: 0.95;
	}

	.tdsi-top-hero__line {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		white-space: normal;
	}

	.tdsi-top-hero__phrase {
		display: block;
		width: 100%;
	}

	.tdsi-top-hero__phrase--lead {
		text-align: left;
	}

	.tdsi-top-hero__phrase--tail {
		text-align: right;
	}

	/* 文言は常時表示でも、動画上のキャプションは動画が見えている間は出す */
	body.tdsi-is-top.is-top-intro .tdsi-top-hero__caption {
		opacity: 1;
		pointer-events: auto;
	}

	body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__caption {
		opacity: 0;
		pointer-events: none;
	}

	.tdsi-top-hero__lead {
		margin: 1.25rem auto 0;
		text-align: center;
	}

	.tdsi-top-hero__tagline {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.65;
		white-space: nowrap;
	}

	.tdsi-top-hero__statement {
		margin: 1.45rem auto 0;
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 2;
		letter-spacing: 0;
		line-break: strict;
		text-align: center;
		word-break: normal;
	}

	.tdsi-top-hero__statement span + span {
		margin-top: 0;
	}

	.tdsi-top-hero__sp-break {
		display: block;
	}

}

/* SP横: BE HYPER-DIMENSIONAL を1行（幅が759超でも短い高さ＝スマホ横を拾う） */
@media (max-width: 1199px) and (orientation: landscape) and (max-height: 560px) {
	.tdsi-top-hero__headline {
		flex-flow: row nowrap !important;
		flex-direction: row !important;
		justify-content: center;
		align-items: center;
		white-space: nowrap !important;
		overflow: visible;
		font-size: min(2.85rem, calc((100vw - 2.5rem) / 14.2));
		line-height: 1.05;
	}

	.tdsi-top-hero__line {
		display: block !important;
		flex-direction: row !important;
		align-items: center;
		width: auto !important;
		white-space: nowrap !important;
	}

	.tdsi-top-hero__phrase {
		display: inline !important;
		width: auto !important;
	}

	.tdsi-top-hero__phrase--lead,
	.tdsi-top-hero__phrase--tail {
		text-align: inherit !important;
	}
}

/* Tablet: copy / type sizing (video ratio shared with SP = YouTube 16:9). */
@media (min-width: 760px) and (max-width: 1199px) {
	/* ドキュメントフローで動画直下に黒帯キャプション（紙背景上の absolute だと同色で消える） */
	.tdsi-top-hero__caption {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		display: block;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
		min-height: 0;
		background: #111;
		color: #fff;
		text-shadow: none;
		font-size: clamp(0.72rem, 1.35vw, 0.88rem);
		line-height: 1.55;
		opacity: 1;
		pointer-events: auto;
		z-index: 6;
	}

	body.tdsi-is-top.is-top-intro .tdsi-top-hero__caption,
	body.tdsi-is-top.is-top-scrolled .tdsi-top-hero__caption {
		opacity: 1;
		pointer-events: auto;
	}

	.tdsi-top-hero__intro {
		padding: 1.6rem clamp(1.5rem, 4.5vw, 3rem) 3.25rem;
	}

	.tdsi-top-hero__headline {
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		overflow: visible;
		font-size: min(4.75rem, calc((100vw - 3.5rem) / 14.2));
		line-height: 1.05;
	}

	.tdsi-top-hero__line {
		display: block;
		flex-direction: row;
		width: auto;
		white-space: nowrap;
	}

	.tdsi-top-hero__phrase {
		display: inline;
		width: auto;
	}

	.tdsi-top-hero__phrase--lead,
	.tdsi-top-hero__phrase--tail {
		text-align: inherit;
	}

	.tdsi-top-hero__tagline {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.65;
	}

	.tdsi-top-hero__statement {
		margin-top: 1.75rem;
		font-size: 1.125rem;
		font-weight: 400;
		line-height: 2;
	}
}

/* Shared ≤1199: YouTube iframe at true 16:9 (no overscale crop). */
@media (max-width: 1199px) {
	.tdsi-top-hero__clip {
		inset: 0;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transform: none;
	}

	.tdsi-top-hero__player {
		overflow: hidden;
	}

	.tdsi-top-hero__player > div {
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		transform: none;
		overflow: hidden;
	}

	.tdsi-top-hero__player iframe {
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		transform: none;
	}

	.tdsi-top-hero__fallback {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		transform: none;
		object-fit: contain;
	}
}

/* Tablet: 16:9 strip only (no blur fill). */
@media (min-width: 760px) and (max-width: 1199px) {
	.tdsi-top-hero__echo,
	.tdsi-top-hero.is-yt-live .tdsi-top-hero__echo,
	.tdsi-top-hero__poster,
	.tdsi-top-hero.is-yt-live .tdsi-top-hero__poster {
		display: none;
	}

	.tdsi-top-hero__still,
	.tdsi-top-hero__failstill,
	.tdsi-top-hero__frame {
		inset: 0;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		transform: none;
		object-fit: contain;
		background: #000;
	}

	.tdsi-top-hero__caption {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		display: block;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
		min-height: 0;
		background: #111;
		color: #fff;
		text-shadow: none;
		opacity: 1;
		pointer-events: auto;
	}
}

/* SP: iPadミニと同じく 16:9 のみ（ぼかし背景なし）+ 動画直下の黒帯キャプション */
@media (max-width: 759px) {
	.tdsi-top-hero__echo,
	.tdsi-top-hero.is-yt-live .tdsi-top-hero__echo,
	.tdsi-top-hero__poster,
	.tdsi-top-hero.is-yt-live .tdsi-top-hero__poster {
		display: none !important;
	}

	.tdsi-top-hero__still,
	.tdsi-top-hero__failstill,
	.tdsi-top-hero__frame {
		inset: 0 !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: 100% !important;
		transform: none !important;
		object-fit: contain;
		background: #000;
	}

	.tdsi-top-hero__caption {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		padding: 0.75rem 1.25rem;
		min-height: calc(0.75rem + 0.75rem + 1.55em * 3);
		background: #111;
		color: #fff;
		text-shadow: none;
		font-size: var(--tdsi-top-sp-caption);
		line-height: 1.55;
		opacity: 1;
		pointer-events: auto;
		z-index: 6;
	}

	body.tdsi-is-top.is-top-intro .tdsi-top-hero__caption,
	body.tdsi-is-top.is-top-scrolled .tdsi-top-hero__caption {
		opacity: 1;
		pointer-events: auto;
	}

	body.tdsi-is-top.is-top-video-gone .tdsi-top-hero__caption {
		opacity: 0;
		pointer-events: none;
	}

	/* iPadミニと同様、SPでもスクロール誘導は出さない */
	.tdsi-top-hero__scroll {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdsi-top-hero {
		height: auto;
	}

	.tdsi-top-hero__sticky {
		position: relative;
		height: auto;
		min-height: 100vh;
	}

	.tdsi-top-hero__scroll i {
		animation: none;
	}

	.tdsi-top-hero__cta-inner {
		transition: none;
	}

	.tdsi-top-hero__cta:hover .tdsi-top-hero__cta-inner {
		transform: none;
	}
}

/* ---- Circular MORE DETAIL cursor (desktop) ---- */
.tdsi-circle-cursor {
	--tdsi-cursor-size: clamp(87px, 67.615px + 2.524vw, 108px);
	position: fixed;
	top: calc(var(--tdsi-cursor-size) / -2);
	left: calc(var(--tdsi-cursor-size) / -2);
	z-index: 9999;
	width: var(--tdsi-cursor-size);
	height: var(--tdsi-cursor-size);
	pointer-events: none;
	user-select: none;
	opacity: 0;
	will-change: transform;
}

.tdsi-circle-cursor[data-active="true"] {
	opacity: 1;
}

.tdsi-circle-cursor__inner {
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: transform 0.4s ease;
}

.tdsi-circle-cursor[data-active="true"] .tdsi-circle-cursor__inner {
	transform: scale(1);
}

.tdsi-circle-cursor__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: tdsi-rotate-circle 15s linear infinite;
}

.tdsi-circle-cursor text {
	font-family: "din-2014", "Montserrat", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.tdsi-circle-cursor text [data-type="text"],
.tdsi-circle-cursor text [data-type="dot"] {
	fill: var(--tdsi-top-gold);
}

/* ---- Minimal ring cursor (SOLUTION) ---- */
.tdsi-view-cursor {
	--tdsi-view-size: 3rem;
	position: fixed;
	top: calc(var(--tdsi-view-size) / -2);
	left: calc(var(--tdsi-view-size) / -2);
	z-index: 9999;
	width: var(--tdsi-view-size);
	height: var(--tdsi-view-size);
	pointer-events: none;
	user-select: none;
	opacity: 0;
	will-change: transform;
	transition: opacity 0.2s ease;
}

.tdsi-view-cursor[data-active="true"] {
	opacity: 1;
}

.tdsi-view-cursor__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 1px solid var(--tdsi-top-gold);
	border-radius: 50%;
	background: transparent;
	transform: scale(0.35);
	opacity: 0;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.28s ease;
}

.tdsi-view-cursor[data-active="true"] .tdsi-view-cursor__ring {
	transform: scale(1);
	opacity: 1;
}

.tdsi-view-cursor__arrow {
	display: block;
	width: 0.45rem;
	height: 0.45rem;
	margin-left: -0.1rem;
	border-top: 1.5px solid var(--tdsi-top-gold);
	border-right: 1.5px solid var(--tdsi-top-gold);
	transform: rotate(45deg);
}

[data-tdsi-cursor="more_detail"],
html.is-tdsi-cursor-more,
html.is-tdsi-cursor-more * {
	cursor: none !important;
}

[data-tdsi-cursor="view"],
html.is-tdsi-cursor-view,
html.is-tdsi-cursor-view * {
	cursor: none !important;
}

@keyframes tdsi-rotate-circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@media (hover: none), (pointer: coarse), (max-width: 759px) {
	.tdsi-circle-cursor,
	.tdsi-view-cursor {
		display: none !important;
	}

	[data-tdsi-cursor="more_detail"],
	[data-tdsi-cursor="view"],
	html.is-tdsi-cursor-more,
	html.is-tdsi-cursor-more *,
	html.is-tdsi-cursor-view,
	html.is-tdsi-cursor-view * {
		cursor: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdsi-circle-cursor {
		display: none !important;
	}

	.tdsi-circle-cursor__svg {
		animation: none;
	}
}