* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		justify-content: space-between;
		background-color: #f9f9f9;
		color: #333;
}

header {
		text-align: center;
		padding: 2rem 1rem;
}

header img {
		max-width: 150px;
		margin-bottom: 1rem;
}

header h1 {
		font-size: 2rem;
		margin-bottom: 0.5rem;
}

.key-visual {
		display: flex;
		justify-content: center;
		margin: 0;
}

.key-visual img {
		max-width: 80%;
		height: auto;
		border-radius: 10px;
}

.slogan {
		text-align: center;
		font-size: 1.5rem;
		font-weight: bold;
		margin: 1rem 0;
		color: #0056b3;
}

.description {
		text-align: center;
		max-width: 600px;
		margin: 1rem auto 2rem auto;
		font-size: 1.1rem;
		line-height: 1.6;
		color: #555;
}

.cta-button {
		display: block;
		margin: 2rem auto;
		padding: 1rem 2rem;
		font-size: 1.2rem;
		color: white;
		background-color: #007bff;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		text-decoration: none;
		transition: background-color 0.3s ease;
}

.cta-button:hover {
		background-color: #0056b3;
}

footer {
		text-align: center;
		padding: 1rem;
		font-size: 0.9rem;
		background-color: #f0f0f0;
}

footer a {
		margin: 0 0.5rem;
		color: #007bff;
		text-decoration: none;
}

footer a:hover {
		text-decoration: underline;
}

@media (max-width: 480px) {
		header h1 {
				font-size: 1.5rem;
		}

		.slogan {
				font-size: 1.2rem;
		}

		.description {
				font-size: 1rem;
				padding: 0 1rem;
		}

		.cta-button {
				width: 80%;
				padding: 0.8rem 1.5rem;
				font-size: 1rem;
		}
}