@charset "utf-8";

body {
	font-family: 'Inter', 'Noto Sans JP', sans-serif;
	background-color: #000;
	color: #fff;
}
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}
.hero-bg {
	background-image: url('/business/lp/satellite_ut/images/background.webp');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.sharp-red {
	/*color: #E60012;*/
	color: #E00;
}
.sharp-red-bg {
	/*background-color: #E60012;*/
	background-color: #E00;
}
.glass-effect {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.spec-tab-btn {
	border-bottom: 3px solid #000;
}
.spec-tab-btn.active {
	border-bottom: 3px solid #E00;
}

@keyframes floatUp {
	from {
		opacity: 0;
		transform: translateY(60px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.hero-title {
	text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 4px 20px rgba(0,0,0,0.6);
}

.hero-terminal {
	animation: floatUp 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
	opacity: 0;
	max-width: 180px;
}

.product-float-up {
	animation: floatUp 0.9s ease-out 0.2s forwards;
	opacity: 0;
}

.product-float-up.visible {
	opacity: 1;
}
.hero-terminal-label {
	position: absolute;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.6);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	z-index: 30;
	white-space: nowrap;
}
.hero-terminal-label.leo { left: 1.5rem; bottom: 26%; }
.hero-terminal-label.meo { right: 1.5rem; bottom: 26%; }
.underline-dynamic {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
}
.underline-dynamic::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	/*background-color: #E60012;*/ /* SHARP Red */
	background-color: #E00;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s ease-out 0.3s;
}
.underline-dynamic.animate::after {
	transform: scaleX(1);
}
.sharpLogo {
	background-color: #000;
	padding: 0 20px;
}
.borderTxt {
		text-shadow: 
			1px 1px 0 #666, -1px -1px 0 #666,
			-1px 1px 0 #666, 1px -1px 0 #666,
			0px 1px 0 #666,  0-1px 0 #666,
			-1px 0 0 #666, 1px 0 0 #666;
}
span.sup {
	vertical-align: super;
	font-size: 75%;
}

/* コンテンツの切り替え表示 */
.spec-content {
    display: none;
    animation: fadeIn 0.5s ease forwards;
}

.spec-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}