@charset "utf-8";

/*----- reset -----*/
html,body,h1,h2,h3,h4,h5,h6,a,div,span,p,ul,ol,li,dl,dt,dd,th,td,strong,em {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
}

body {
	font: 13px/22px "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}

/*----- document -----*/
body {
	position: relative;
	padding-bottom: 60px;
}

body>header {
	height: 5em;
	width: 100%;
	background: white;
	position: fixed;
	z-index: 1000;
}
body>header h1 {
	font-size: 150%;
	padding: 1.8em 0 0.6em 3.4em;
}
body>header ul { list-style: none; }
body>header .logo { position: absolute; top: 0.5em; left: 0; }
body>header .logo img { width: 4.5em; height: 4.5em; }
body>header .lang {
	font-size: 80%;
	position: absolute; top: 1em; right: 1em;
}

body>aside {
	width: 100%;
	height: 44px;
	background: white;
	position: fixed; left: 0; bottom: 0;
	z-index: 1001;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
body>aside h2 { display: none; }
body>aside ul {
	list-style: none;
	width: 300px; height: 30px;
	margin: 7px auto 0;
}
body>aside li { float: left; margin-right: 20px; }
body>aside li:last-of-type { margin-right: 10px; }
body>aside li:first-of-type { margin-left: 10px; }

body>footer nav {
	clear: both;
	height: 30em;
	margin: 5em 0 3em;
	padding-left: 1em;
}
body>footer nav h3 { color: #666; font-weight: bold; }
body>footer nav div { float: left; width: 49%; height: 18em; }
body>footer nav ul { list-style: none; }
body>footer nav li { padding-top: 1em; }

body>footer p {
	color: #999;
	font-size: 90%;
	text-align: center;
	padding-bottom: 1em;
	clear: both;
}

/*----- contents -----*/
main { padding-top: 6em; }

main>footer { height: 5em; margin-top: 5em; }
main>footer ul { list-style: none; }
main>footer li {
	float: left;
	margin-left: 0.7em;
	margin-bottom: 1em;
}
main>footer li.facebook { margin-top: -2px; }

/*----- common styles -----*/
a { color: #37a34a; }

/*----- product icons -----*/
section li.ququ_the_frog img:hover { content: url('../sticker/badge-ququ_active.png'); }
section li.keel_the_frog img:hover { content: url('../sticker/badge-keel_active.png'); }
section li.ququ_and_friends img:hover { content: url('../sticker/badge-friends_active.png'); }
section li.countil img:hover { content: url('../countil/badge_active.png'); }
section li.melancholy img:hover { content: url('../melancholy/badge_active.png'); }
section li.melancholyfree img:hover { content: url('../melancholy/badge-free_active.png'); }