@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);
}
@keyframes floatUp {
	from {
		opacity: 0;
		transform: translateY(60px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.hero-terminal {
	animation: floatUp 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
	opacity: 0;
}
.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%;
}