/**
 * css/pages/top-application.css
 * ============================================================
 * A LEGEND 2：TOP Application Section
 * ============================================================
 *
 * 役割：
 * - template-parts/top/application.php の専用DOMを装飾します。
 * - top.application.* の正規設定を、配置・カードデザイン・画像比率・カード内情報として反映します。
 *
 * 設計方針：
 * - 旧 featured / rotate / color / motion / card_layout 前提のCSSは扱いません。
 * - 色、角丸、影、フォント、ボタン、見出しは共通デザイン設定由来のCSS変数を使います。
 * - TOP Application専用の色設定は復活させず、card.style はclass差分だけを担当します。
 * - layout は一覧全体の配置、card-style はカード自体の見た目です。
 *
 * @package ALEGEND2
 */

.aleg2-top-application {
	position: relative;
	isolation: isolate;

	/*
	 * 背景責務：
	 * - TOP全体の背景は .aleg2-main--top に委譲します。
	 * - Applicationセクション単体で radial-gradient や境界線を重ねると、
	 *   直前のGalleryセクションとの間に明るい帯・境目が出ます。
	 * - ここでは背景を透明に固定し、カードの質感だけを card.style と
	 *   共通デザイン変数で表現します。
	 */
	padding-block: var(--aleg2-section-padding-y, clamp(4.5rem, 8vw, 9rem));
	color: var(--aleg2-color-text, #f7f7fb);
	background: transparent;
}

.aleg2-top-application__inner {
	width: min(var(--aleg2-container-wide, 1180px), calc(100% - 2rem));
	margin-inline: auto;
}

.aleg2-top-application__list {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.8rem);

	/*
	 * Applicationカードhover時の安全表示域。
	 * 既存のカード内overflowはメディア拡大を閉じ込める役割があるため維持し、
	 * カード外側の枠線・影・liftは一覧コンテナで受けます。
	 */
	--aleg2-top-application-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-top-application-interaction-safe-space);
	margin-block-start: calc(clamp(2rem, 4vw, 3.5rem) - var(--aleg2-top-application-interaction-safe-space));
	margin-block-end: calc(var(--aleg2-top-application-interaction-safe-space) * -1);
}

/**
 * 配置：グリッド
 * ------------------------------------------------------------
 * top.application.layout = grid
 */
.aleg2-top-application--layout-grid .aleg2-top-application__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/**
 * 配置：縦積み
 * ------------------------------------------------------------
 * top.application.layout = stacked
 */
.aleg2-top-application--layout-stacked .aleg2-top-application__list {
	grid-template-columns: minmax(0, 1fr);
	max-width: min(100%, 980px);
}

.aleg2-top-application-card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	min-width: 0;
	color: var(--aleg2-color-text, #f7f7fb);
	font-family: var(--aleg2-font-body, var(--aleg2-font-sans, system-ui, sans-serif));
	background: var(--aleg2-color-surface, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--aleg2-color-border, rgba(255, 255, 255, 0.14));
	border-radius: var(--aleg2-radius-card, 24px);
	box-shadow: var(--aleg2-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.28));
	transition:
		transform 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

.aleg2-top-application-card:hover,
.aleg2-top-application-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--aleg2-color-border-strong, rgba(255, 255, 255, 0.28));
	box-shadow: var(--aleg2-shadow-panel, var(--aleg2-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.28)));
}

.aleg2-top-application-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--aleg2-top-application-image-ratio, 16 / 9);
	color: inherit;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--aleg2-color-primary, #8ee6ff) 16%, transparent), transparent),
		var(--aleg2-color-bg-soft, rgba(255, 255, 255, 0.04));
}

/*
 * カードメディア共通要素。
 * ------------------------------------------------------------
 * top.application.card.media_source でアイキャッチ画像／ヒーロー画像／動画を
 * 切り替えても、カードサイズ・hover演出・object-fit が同じ品質になるよう、
 * img / video の共通classへ表示責務を集約します。
 */
.aleg2-top-application-card__media-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, filter 0.5s ease;
}

.aleg2-top-application-card__image,
.aleg2-top-application-card__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aleg2-top-application-card__video {
	background: var(--aleg2-color-bg-soft, rgba(255, 255, 255, 0.04));
}

.aleg2-top-application-card:hover .aleg2-top-application-card__media-el,
.aleg2-top-application-card:focus-within .aleg2-top-application-card__media-el {
	transform: scale(1.045);
	filter: saturate(1.08) contrast(1.03);
}

.aleg2-top-application-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--aleg2-color-primary, #8ee6ff) 18%, transparent), transparent 56%),
		linear-gradient(315deg, color-mix(in srgb, var(--aleg2-color-secondary, #b68cff) 16%, transparent), transparent 60%),
		var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1));
}

.aleg2-top-application-card__placeholder-mark {
	letter-spacing: 0.18em;
	color: var(--aleg2-color-text-faint, rgba(247, 247, 251, 0.48));
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, inherit));
	font-size: clamp(1rem, 3vw, 2rem);
	font-weight: 800;
}

.aleg2-top-application-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	padding: clamp(1.1rem, 2.4vw, 1.65rem);
}

.aleg2-top-application-card__badges,
.aleg2-top-application-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.aleg2-top-application-card__badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.25rem 0.68rem;
	color: var(--aleg2-color-on-primary, #061018);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, inherit));
	font-size: var(--aleg2-font-size-xs, 0.78rem);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	background: var(--aleg2-color-primary, #8ee6ff);
	border-radius: var(--aleg2-radius-pill, 999px);
}

.aleg2-top-application-card__badge--update {
	color: var(--aleg2-color-on-secondary, #061018);
	background: var(--aleg2-color-secondary, #b68cff);
}

.aleg2-top-application-card__title {
	margin: 0;
	color: var(--aleg2-color-heading, var(--aleg2-color-text, #f7f7fb));
	font-family: var(--aleg2-font-heading, var(--aleg2-font-sans, system-ui, sans-serif));
	font-size: clamp(1.15rem, 1rem + 0.55vw, 1.55rem);
	line-height: 1.22;
}

.aleg2-top-application-card__title a {
	color: inherit;
	text-decoration: none;
}

.aleg2-top-application-card__title a:hover,
.aleg2-top-application-card__title a:focus-visible {
	color: var(--aleg2-color-link-hover, var(--aleg2-color-accent, #8ee6ff));
}

.aleg2-top-application-card__meta {
	gap: 0.55rem 0.8rem;
	color: var(--aleg2-color-text-muted, rgba(247, 247, 251, 0.68));
	font-size: var(--aleg2-font-size-sm, 0.9rem);
}

.aleg2-top-application-card__meta-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	min-width: 0;
}

.aleg2-top-application-card__meta-label {
	color: var(--aleg2-color-text-faint, rgba(247, 247, 251, 0.48));
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, inherit));
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aleg2-top-application-card__meta-value {
	color: var(--aleg2-color-text-muted, rgba(247, 247, 251, 0.68));
	text-decoration: none;
}

.aleg2-top-application-card__meta-value[href]:hover,
.aleg2-top-application-card__meta-value[href]:focus-visible {
	color: var(--aleg2-color-link-hover, var(--aleg2-color-accent, #8ee6ff));
}

.aleg2-top-application-card__excerpt {
	margin: 0;
	color: var(--aleg2-color-text-muted, rgba(247, 247, 251, 0.68));
	font-size: var(--aleg2-font-size-sm, 0.9rem);
	line-height: 1.85;
}

.aleg2-top-application-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	width: fit-content;
	margin-block-start: auto;
	color: var(--aleg2-color-link, var(--aleg2-color-primary, #8ee6ff));
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, inherit));
	font-size: var(--aleg2-font-size-sm, 0.9rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.aleg2-top-application-card__more:hover,
.aleg2-top-application-card__more:focus-visible {
	color: var(--aleg2-color-link-hover, var(--aleg2-color-accent, #8ee6ff));
}

/**
 * カードスタイル：標準
 */
.aleg2-top-application-card--style-standard {
	background: var(--aleg2-color-surface, rgba(255, 255, 255, 0.06));
}

/**
 * カードスタイル：パネル
 */
.aleg2-top-application-card--style-panel {
	background: var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1));
	box-shadow: var(--aleg2-shadow-panel, var(--aleg2-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.28)));
}

/**
 * カードスタイル：ガラス
 */
.aleg2-top-application-card--style-glass {
	background: color-mix(in srgb, var(--aleg2-glass-bg, var(--aleg2-color-surface, rgba(255, 255, 255, 0.06))) 78%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/**
 * カードスタイル：アウトライン
 */
.aleg2-top-application-card--style-outline {
	background: transparent;
	border-color: var(--aleg2-color-border-strong, rgba(255, 255, 255, 0.28));
	box-shadow: none;
}

/**
 * カードスタイル：ミニマル
 */
.aleg2-top-application-card--style-minimal {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.aleg2-top-application-card--style-minimal .aleg2-top-application-card__body {
	padding-inline: 0;
	padding-block-end: 0;
}

/**
 * 縦積み配置のカード構造
 */
.aleg2-top-application--layout-stacked .aleg2-top-application-card {
	grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
	grid-template-rows: auto;
}

.aleg2-top-application--layout-stacked .aleg2-top-application-card__media {
	height: 100%;
	min-height: 100%;
}

.aleg2-top-application--layout-stacked .aleg2-top-application-card__body {
	justify-content: center;
	padding: clamp(1.3rem, 3vw, 2.4rem);
}

.aleg2-top-application__empty {
	padding: 1.2rem 1.4rem;
	margin: 0;
	color: var(--aleg2-color-text-muted, rgba(247, 247, 251, 0.68));
	background: var(--aleg2-color-surface, rgba(255, 255, 255, 0.06));
	border: 1px dashed var(--aleg2-color-border, rgba(255, 255, 255, 0.14));
	border-radius: var(--aleg2-radius-card, 24px);
}

.aleg2-top-application [data-aleg2-application-card].is-ready {
	will-change: transform;
}

@media (max-width: 960px) {
	.aleg2-top-application--layout-grid .aleg2-top-application__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-top-application--layout-stacked .aleg2-top-application-card {
		grid-template-columns: minmax(180px, 42%) minmax(0, 1fr);
	}
}

@media (max-width: 680px) {
	.aleg2-top-application {
		padding-block: var(--aleg2-section-padding-y-sm, clamp(3.5rem, 12vw, 5rem));
	}

	.aleg2-top-application--layout-grid .aleg2-top-application__list,
	.aleg2-top-application--layout-stacked .aleg2-top-application__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.aleg2-top-application--layout-stacked .aleg2-top-application-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.aleg2-top-application--layout-stacked .aleg2-top-application-card__media {
		height: auto;
		min-height: 0;
	}

	.aleg2-top-application-card__meta {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aleg2-top-application-card,
	.aleg2-top-application-card__media-el {
		transition: none;
	}

	.aleg2-top-application-card:hover,
	.aleg2-top-application-card:focus-within {
		transform: none;
	}

	.aleg2-top-application-card:hover .aleg2-top-application-card__media-el,
	.aleg2-top-application-card:focus-within .aleg2-top-application-card__media-el {
		transform: none;
		filter: none;
	}
}

/**
 * 配置：3Dオービットスライダー
 * ------------------------------------------------------------
 * top.application.layout = orbit
 *
 * Splideはローカル資産・DOM互換の土台としてだけ使い、矢印・pagination・drag・keyboard・autoplayは
 * js/pages/top-application.js の独自Orbit Controllerで一元管理します。
 * Splide標準の横移動transformへ依存せず、loop cloneも使いません。
 * JSが無効、Splide未読み込み、表示件数不足、モーション軽減環境では静的なカード一覧として読めるよう、
 * .is-orbit-enabled が付くまでは通常gridに近いfallback表示を維持します。
 */
.aleg2-top-application__orbit {
	position: relative;

	/*
	 * Orbit表示でも、fallback grid / 有効化後のカード外形が切れないようにします。
	 * 3D演出用のoverflow:visibleは維持し、上下の安全域だけを共通tokenへ寄せます。
	 */
	--aleg2-top-application-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-top-application-interaction-safe-space);
	margin-block-start: calc(clamp(2.4rem, 4.8vw, 4.5rem) - var(--aleg2-top-application-interaction-safe-space));
	margin-block-end: calc(var(--aleg2-top-application-interaction-safe-space) * -1);
}

.aleg2-top-application__orbit-track {
	overflow: visible;
}

.aleg2-top-application__orbit-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.8rem);
	padding: 0;
	margin: 0;
	list-style: none;
}

.aleg2-top-application__orbit-slide {
	min-width: 0;
}

.aleg2-top-application__orbit.is-orbit-enabled {
	--aleg2-orbit-viewport-height: clamp(28rem, 50vw, 38rem);
	--aleg2-orbit-card-width: clamp(15.5rem, 23vw, 20.75rem);
	--aleg2-orbit-x: 0px;
	--aleg2-orbit-y: 0px;
	--aleg2-orbit-z: 0px;
	--aleg2-orbit-scale: 1;
	--aleg2-orbit-opacity: 1;
	--aleg2-orbit-z-index: 1;
	--aleg2-orbit-brightness: 1;
	--aleg2-orbit-shadow-opacity: 0.36;
	min-height: calc(var(--aleg2-orbit-viewport-height) + 4.75rem);
	perspective: 1380px;
	perspective-origin: 50% 14%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.aleg2-top-application__orbit.is-orbit-enabled.is-orbit-dragging,
.aleg2-top-application__orbit.is-orbit-enabled.is-orbit-pointer-active {
	cursor: grabbing;
}

.aleg2-top-application__orbit.is-orbit-enabled::before {
	position: absolute;
	inset: 12% 8% auto;
	z-index: 0;
	height: 68%;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(ellipse at 50% 22%, color-mix(in srgb, var(--aleg2-color-primary, #8ee6ff) 10%, transparent), transparent 58%),
		radial-gradient(ellipse at 50% 74%, rgba(0, 0, 0, 0.28), transparent 64%);
	filter: blur(10px);
	opacity: 0.7;
	transform: translateZ(-280px);
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-track {
	position: relative;
	z-index: 1;
	height: var(--aleg2-orbit-viewport-height);
	overflow: visible;
	transform-style: preserve-3d;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-list {
	position: relative;
	display: block;
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	transform: none !important;
	transform-style: preserve-3d;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide {
	position: absolute;
	top: 54%;
	left: 50%;
	width: min(var(--aleg2-orbit-card-width), calc(100vw - 3rem)) !important;
	max-width: calc(100vw - 3rem);
	min-width: 0 !important;
	margin: 0 !important;
	visibility: visible;
	flex: 0 0 auto !important;
	opacity: var(--aleg2-orbit-opacity);
	z-index: var(--aleg2-orbit-z-index);
	pointer-events: none;
	transform:
		translate(-50%, -50%)
		translate3d(var(--aleg2-orbit-x), var(--aleg2-orbit-y), var(--aleg2-orbit-z))
		scale(var(--aleg2-orbit-scale));
	filter: brightness(var(--aleg2-orbit-brightness));
	transform-style: preserve-3d;
	transition:
		filter 0.28s ease,
		opacity 0.28s ease;
	will-change: transform, opacity;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide.is-orbit-active {
	pointer-events: auto;
}

/*
 * 独自Orbit Controllerの描画品質。
 * ------------------------------------------------------------
 * 矢印・pagination・autoplayの回転はJSのrequestAnimationFrameで連続描画します。
 * CSS transitionで終点だけ補間すると、3枚時にカードが背面でワープして見えるため、
 * 位置・scale・opacityの主制御はJSから渡されるCSS変数に任せます。
 */
.aleg2-top-application__orbit.is-orbit-enabled.is-orbit-dragging .aleg2-top-application__orbit-slide,
.aleg2-top-application__orbit.is-orbit-enabled.is-orbit-animating .aleg2-top-application__orbit-slide {
	transition: none;
}

.aleg2-top-application__orbit.is-orbit-enabled.is-orbit-dragging .aleg2-top-application__orbit-slide {
	pointer-events: none;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide.is-orbit-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card {
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	background: rgba(9, 12, 18, 0.94);
	background: color-mix(in srgb, var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1)) 86%, #05070d);
	border-color: color-mix(in srgb, var(--aleg2-color-border-strong, rgba(255, 255, 255, 0.28)) 78%, transparent);
	/*
	 * 影の強さはJSが算出する奥行き係数へ連動させます。
	 * 背面カードを単純に隠さず、上方向リフト・縮小・明るさ・影で
	 * 「奥へ回っている」状態を表現します。
	 */
	box-shadow: 0 26px 86px rgba(0, 0, 0, var(--aleg2-orbit-shadow-opacity));
	backface-visibility: hidden;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card:hover,
.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card:focus-within {
	transform: none;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card__media {
	background-color: rgba(8, 11, 18, 0.96);
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card__body {
	position: relative;
	z-index: 1;
	min-height: clamp(9rem, 12vw, 12rem);
	background: rgba(6, 8, 14, 0.96);
	background: color-mix(in srgb, var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1)) 76%, #05070d);
	box-shadow: 0 -1px 0 color-mix(in srgb, var(--aleg2-color-border, rgba(255, 255, 255, 0.14)) 88%, transparent);
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card--style-glass,
.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card--style-outline,
.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card--style-minimal {
	background: rgba(9, 12, 18, 0.94);
	background: color-mix(in srgb, var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1)) 86%, #05070d);
	border-color: color-mix(in srgb, var(--aleg2-color-border-strong, rgba(255, 255, 255, 0.28)) 78%, transparent);
	box-shadow: 0 26px 86px rgba(0, 0, 0, var(--aleg2-orbit-shadow-opacity));
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application-card--style-minimal .aleg2-top-application-card__body {
	padding-inline: clamp(1.1rem, 2.4vw, 1.65rem);
	padding-block-end: clamp(1.1rem, 2.4vw, 1.65rem);
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide:not(.is-orbit-active) .aleg2-top-application-card {
	box-shadow: 0 18px 54px rgba(0, 0, 0, var(--aleg2-orbit-shadow-opacity));
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide.is-orbit-back .aleg2-top-application-card {
	/*
	 * 背面カードは消さずに、少し暗く・影を弱く・上へ逃がした状態で見せます。
	 * filter本体はslide側のCSS変数で制御し、カード側では過剰なblurを使いません。
	 */
	border-color: color-mix(in srgb, var(--aleg2-color-border, rgba(255, 255, 255, 0.14)) 70%, transparent);
}

.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide:not(.is-orbit-active) .aleg2-top-application-card__body {
	background: rgba(6, 8, 14, 0.98);
	background: color-mix(in srgb, var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1)) 70%, #05070d);
}

/*
 * 専用操作UIレイヤー。
 * ------------------------------------------------------------
 * Splide生成矢印には依存せず、template-parts/top/application.php が出す専用ボタンを
 * JSで直接bindします。カードはJSで z-index: 1200 前後を割り当てるため、
 * controls / pagination はさらに上のレイヤーへ固定します。
 */
.aleg2-top-application__orbit-controls {
	position: absolute;
	inset: 0;
	z-index: 2200;
	pointer-events: none;
}

.aleg2-top-application__orbit-button {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: clamp(2.75rem, 5vw, 3.6rem);
	height: clamp(2.75rem, 5vw, 3.6rem);
	padding: 0;
	/*
	 * アイコンは文字記号ではなくSVGで描画します。
	 * font-size / line-height で矢印を調整しないことで、フォント差や環境差に左右されない
	 * 安定した操作UIにします。
	 */
	color: var(--aleg2-color-text, #f7f7fb);
	cursor: pointer;
	pointer-events: auto;
	background: rgba(10, 14, 22, 0.88);
	background: color-mix(in srgb, var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.1)) 88%, #05070d);
	border: 1px solid var(--aleg2-color-border, rgba(255, 255, 255, 0.14));
	border-radius: 999px;
	box-shadow: var(--aleg2-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.28));
	opacity: 0.96;
	transform: translateY(-50%);
	transition:
		background-color 0.24s ease,
		border-color 0.24s ease,
		opacity 0.24s ease,
		transform 0.24s ease;
}

.aleg2-top-application__orbit-button:hover,
.aleg2-top-application__orbit-button:focus-visible {
	border-color: color-mix(in srgb, var(--aleg2-color-primary, #8ee6ff) 56%, var(--aleg2-color-border, rgba(255, 255, 255, 0.14)));
	opacity: 1;
	transform: translateY(-50%) scale(1.06);
}

.aleg2-top-application__orbit-button:focus-visible {
	outline: 2px solid var(--aleg2-color-primary, #8ee6ff);
	outline-offset: 4px;
}

.aleg2-top-application__orbit-button-icon {
	display: block;
	width: clamp(1.05rem, 2vw, 1.45rem);
	height: clamp(1.05rem, 2vw, 1.45rem);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.45;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.aleg2-top-application__orbit-button--prev {
	left: clamp(0.85rem, 7vw, 8.5rem);
}

.aleg2-top-application__orbit-button--next {
	right: clamp(0.85rem, 7vw, 8.5rem);
}

.aleg2-top-application__orbit-pagination {
	position: absolute;
	inset-inline: 0;
	bottom: 0.85rem;
	z-index: 2210;
	display: flex;
	gap: 0.42rem;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.aleg2-top-application__orbit-page {
	width: 0.62rem;
	height: 0.62rem;
	padding: 0;
	cursor: pointer;
	background: var(--aleg2-color-text-faint, rgba(247, 247, 251, 0.48));
	border: 0;
	border-radius: 999px;
	opacity: 0.62;
	transition:
		background-color 0.24s ease,
		opacity 0.24s ease,
		transform 0.24s ease;
}

.aleg2-top-application__orbit-page:hover,
.aleg2-top-application__orbit-page:focus-visible {
	opacity: 0.9;
	transform: scale(1.18);
}

.aleg2-top-application__orbit-page:focus-visible {
	outline: 2px solid var(--aleg2-color-primary, #8ee6ff);
	outline-offset: 4px;
}

.aleg2-top-application__orbit-page.is-active {
	background: var(--aleg2-color-primary, #8ee6ff);
	opacity: 1;
	transform: scale(1.24);
}

/* Splide側UIがキャッシュや外部処理で残っても、二重UIにならないよう明示的に無効化します。 */
.aleg2-top-application__orbit.is-orbit-enabled .splide__arrows,
.aleg2-top-application__orbit.is-orbit-enabled .splide__pagination {
	display: none !important;
}

.aleg2-top-application__orbit.is-orbit-fallback .aleg2-top-application__orbit-list,
.aleg2-top-application.is-orbit-fallback .aleg2-top-application__orbit-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.aleg2-top-application__orbit-list,
	.aleg2-top-application__orbit.is-orbit-fallback .aleg2-top-application__orbit-list,
	.aleg2-top-application.is-orbit-fallback .aleg2-top-application__orbit-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-top-application__orbit.is-orbit-enabled {
		--aleg2-orbit-viewport-height: clamp(26rem, 62vw, 34rem);
		--aleg2-orbit-card-width: clamp(15rem, 34vw, 19rem);
		perspective: 1100px;
	}
}

@media (max-width: 680px) {
	.aleg2-top-application__orbit-list,
	.aleg2-top-application__orbit.is-orbit-fallback .aleg2-top-application__orbit-list,
	.aleg2-top-application.is-orbit-fallback .aleg2-top-application__orbit-list {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * スマートフォンでは重なりによる誤タップとカード縮小を避けるため、
	 * layout = orbit のままでも静的な1列表示へ寄せます。
	 */
	.aleg2-top-application__orbit.is-orbit-enabled {
		min-height: 0;
		perspective: none;
		cursor: auto;
	}

	.aleg2-top-application__orbit.is-orbit-enabled::before {
		display: none;
	}

	.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-track {
		height: auto;
	}

	.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1rem, 2.5vw, 1.8rem);
		height: auto;
	}

	.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide {
		position: relative;
		top: auto;
		left: auto;
		width: auto !important;
		max-width: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		filter: none;
		transform: none;
		transition: none;
		will-change: auto;
	}

	.aleg2-top-application__orbit-controls,
	.aleg2-top-application__orbit-pagination,
	.aleg2-top-application__orbit.is-orbit-enabled .splide__arrows,
	.aleg2-top-application__orbit.is-orbit-enabled .splide__pagination {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aleg2-top-application__orbit.is-orbit-enabled .aleg2-top-application__orbit-slide,
	.aleg2-top-application__orbit-button,
	.aleg2-top-application__orbit-page {
		transition: none;
	}
}