@charset "utf-8";

main>aside { max-width: 1200px; margin: 7em auto 0; }

main>aside ul { list-style: none; }
main>aside li { float: left; position: relative; }
main>aside a {
	color: #666;
	font-size: 90%;
	text-align: center;
	position: absolute;
}
main>aside a:hover { text-decoration: none; }

main>aside ul.tile { height: 7em; }
main>aside ul.tile>li { width: 17%; height: 7em; }
main>aside ul.tile>li:last-of-type { width: 15%; }

main>aside ul.tile>li a {
	font-weight: bold;
	top: -2em; left: 0;
	width: 100%; height: 11em;
}
main>aside ul.tile>li:hover a { color: #666; }

main>aside ul.store { height: 2em; }
main>aside ul.store>li { width: 17%; height: 2em; }
main>aside ul.store>li.app { width: 7%; }
main>aside ul.store>li.play { width: 10%; }
main>aside ul.store>li:last-of-type { width: 15%; }

main>aside ul.store>li:hover { background: #333; }
main>aside ul.store>li.line:hover { background: #01b84f; }

main>aside ul.store>li a {
	font-weight: bold;
	top: 0; left: 0;
	width: 100%; height: 100%;
	padding-top: 0.2em;
}
main>aside ul.store>li:hover a { color: white; }

main>aside li.ququ_the_frog { background: url('../sticker/flyer-ququ.png') 50% 0% / cover; }
main>aside li.keel_the_frog { background: url('../sticker/flyer-keel.png') center center / cover; }
main>aside li.ququ_and_friends { background: url('../sticker/flyer-friends.png') 50% 30% / cover; }
main>aside li.melancholy { background: url('../melancholy/image.png') left center / cover; }
main>aside li.countil { background: url('../countil/image.png') right bottom / cover; }
main>aside li.speedy { background: url('../speedy/image.png') left center / cover; }