@import url('https://fonts.googleapis.com/css2?family=Potta+One&family=Zen+Maru+Gothic&display=swap');

body {
	margin: 0px;
	padding: 0px;
	font-size: 2vw;
	font-family: "Zen Maru Gothic", sans-serif;
}

#canilogo {
	height: 100vh;
	display: grid;
	place-items: center;
	text-align: center;

}

#canilogo svg {
	width: 70vw;
	vertical-align: middle;
	animation: fade 2s ease-in-out 0.2s 1 forwards;
	opacity: 0%;
}

#canilogo p {
	animation: fade 2s ease-in-out 2s 1 forwards;
	opacity: 0%;
	font-size: 5vw;
}

@keyframes fade {
	0% {
		opacity: 0%;
	}

	100% {
		opacity: 100%;
	}
}


h2 {
	color: #ffffff;
	padding: 2vw 4vw;
	background: linear-gradient(135deg, #cf65f6 0%, #fd85f3 100%);
	border-radius: 1vw;
	box-shadow: 0 1vw 2vw rgba(129, 19, 162, 0.3);
}

#slogan {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 5vw;

}

#slogan>:first-child {
	font-family: "Potta One";
	position: relative;

	width: 80vw;

	font-size: 11vw;

	text-align: center;

	background: linear-gradient(to top, #b30000 0%, #ff3300 40%, #ffcc00 80%, #ffffff 100%);
	background-clip: text;
	color: transparent;

}

#slogan>:first-child::before {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -2;

	font-weight: 900;
	color: #000000;
}

#slogan>:nth-child(2) {
	margin: 5vw;
}

#slogan span {
	display: block;
	font-size: 2em;
	margin: 2vw 0px;
}

article p {
	margin: 1em;
	text-indent: 0.1em;
}

/* ボタン全体のスタイリング */
#contact a {
	width: 50vw;
	height: 10vw;
	display: flex;
	place-items: center;
	justify-content: center;
	gap: 2vw;
	padding: 1vw;

	margin: 10vw auto 2vw;

	background-color: #9a57ff;
	color: #ffffff;
	text-decoration: none;
	text-align: center;

	font-size: 4vw;
	font-weight: bold;
	border-radius: 6em;
	box-shadow: 0 0.5vw 1vw rgba(21, 3, 70, 0.3);
}

#contact svg {
	height: 80%;
}

#contact div {
	text-align: center;
}

footer {
	background-color: #9a57ff;
	color: #ffffff;
	font-size: 2vw;
	display: flex;
	justify-content: space-between;
	text-align: right;
	padding: 1vw;
}

h1 {
	margin: 0px;
	padding: 0px;
	text-align: left;
	font-size: 2vw;

}