@charset "UTF-8";

@media screen and (min-width: 1000px) {

	aside {
		position: relative;
		margin-top: 0px;
		background-color: transparent;
	}

	aside h2 {
		min-width: 330px;
		max-width: 330px;
		min-height: 30px;
		max-height: 30px;
		top: 0px;
		right: 0px;
		margin: 0px;
		padding: 0px;
		width: stretch;
		font-size: 1.0em;
		color: #ffffff;
		text-align: center;
		border-width: 1px;
		border-color: #274a78;
		border-style: solid;
		border-radius: 8px 8px 0px 0px;
		background-color: #274a78;
	}

	aside h3 {
		display: none;
	}

	section.profile, section.sns {
		min-width: 330px;
		max-width: 330px;
		margin: 0px 0px 10px 0px;
		padding: 0px;
		text-align: center;
		border-width: 1px;
		border-color: #f0f0f0;
		border-style: solid;
		border-radius: 0px 0px 8px 8px;
		background-color: #ffffff;
		background-image: none;
	}

	section.profile p {
		margin: 10px;
		padding: 0px;
		font-size: 0.8em;
		text-align: left;
		border: none;
	}

	section.profile h4 {
		display: inline-block;
		margin: 0px;
	}

	section.sns ul {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0px 0px 0px;
		padding: 0px;
 		text-align: center;
 		list-style-type: none;
	}

	section.sns ul li {
		min-width: 60px;
		margin: 0px;
		padding: 10px 0px 10px 0px;
	}

	section.sns :link, section.sns :visited, section.sns :hover, section.sns :active {
		color: #274a78;
		text-decoration: none;
	}

	section.sns ul li:hover {
		color: #ffffff;
		border-radius: 5px;
		background-color: #006699;
	}

	section.sns .sitename {
		font-size: 0.6em;
	}

	section.sns .sitename:hover {
		color: #ffffff;
	}

	section.twitter-tweet {
		transform: scale(1.0);
		transform-origin: right top;
		margin: 10px 0px 0px 0px;
	}
}

@media screen and (max-width: 999px) {
	aside {
		display: none;
	}
}

h1, .english {
	z-index: 100;
	animation: fadeInBottom 0.8s cubic-bezier(.01,1.02,.91,.6) forwards;
}

header nav {
	z-index: 100;
	animation: fadeInTop 0.8s ease forwards;
}

main section.introduction h2, main section.note h2 {
	animation: fadeInBottom 0.8s ease forwards;
}

@keyframes fadeInTop {
	0% {
		opacity: 0;
		transform: translateY(-500px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(1000px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}