@charset "UTF-8";
html {
	background: linear-gradient(0.375turn,#BEDBE8, #E6C5BA);
	color: white;
	font-family: 'Zen Maru Gothic', serif;
	font-size: 16pt;
	min-height: 100%;
}
.button {
	background-color: white;
	border: none;
	border-radius: 100vh;
	box-sizing: border-box;
	color: black;
	display: block;
	margin: 1em auto;
	padding: 0.5em;
	text-decoration: inherit;
	width: 100%;
}
.button:active {
	background-color: lightblue;
}
.contents {
	display: flex;
	justify-content: center;
}
.header {
	display: flex;
}
.header-menu-list {
	display: flex;
	list-style: none;
	padding: 0;
}
.header-menu-list li {
	margin: 0 0.5em;
}
.main {
	margin: 0 auto;
	text-align: center;
	max-width: 768px;
}
.main p span {
	display: block;
}
.main-content {
	flex-grow: 1;
}
.main-figure {
	background-color: white;
	border-radius: 100%;
	height: fit-content;
	margin: 0 auto;
	padding: 2em;
	width: fit-content;
	animation: blur 500ms forwards 0ms;
}
.main-image {
	will-change: transform;
	filter: blur(10vmin);
	transition: filter 600ms ease;
	width: 300px;
	height: 300px;
	object-fit:contain;
}
/* .main-image:hover {
	filter: blur(0);
	opacity: 1;
} */
.main-list {
	animation: blur 500ms forwards 1500ms;
	list-style: none;
	opacity: 0;
	padding: 0;
}
.main-text {
	animation: blur 500ms forwards 1000ms;
	opacity: 0;
}
.main-title {
	animation: blur 500ms forwards 500ms;
	font-size: 3em;
	opacity: 0;
}
.main-title span {
	border-bottom: 0.1em dotted;
}
.main-welcome {
	animation: blur 500ms forwards 1000ms;
	opacity: 0;
}
.menu {
	background-color: white;
	border-radius: 1em;
	color: black;
	padding: 1em;
}
.menu-button {
	cursor: pointer;
	width: 2em;
}
@keyframes blur {
	from {
		filter: blur(10vmin);
		transform: scale(1.02);
	} to {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}
@media screen and (max-width: 768px) {
	.contents {
		flex-direction: column;
	}
}