@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;
}

/*----- width -----*/
body:not(.full)>header,
main>footer {
	max-width: 80%;
	min-width: 740px;
	margin: 0 auto;
}

/*----- document -----*/
body {
	min-height: 50em;
	padding-bottom: 20em;
	position: relative;
}
body:not(.full)>header {
	position: relative;
	height: 100px;
	margin-bottom: 2em;
}
body:not(.full)>header>h1 {
	font-size: 200%;
	padding-top: 45px;
	padding-left: 80px;
}
body:not(.full)>header>ul:first-of-type {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
}
body>header:first-of-type ul { list-style: none; }
body>header:first-of-type .logo {
	-webkit-transform: translate(-15px, 6px);
	transform: translate(-15px, 6px);
}
body>header:first-of-type .logo img { width: 86px; height: 86px; }
body>header:first-of-type .logo img:hover { content: url('../img/logo_active.png'); }
body>header:first-of-type .lang { font-size: 80%; position: absolute; top: 0; right: 0; }

body>aside { position: absolute; top: 40px; right: 10%; }
body>aside h2 { display: none; }
body>aside ul { list-style: none; }
body>aside li { float: left; margin-left: 1.5em; }

body>footer { position: absolute; bottom: 1em; left: 0; width: 100%; }
body>footer nav { font-size: 80%; width: 68em; height: 13em; margin: 0 auto; }
body>footer nav h3 { color: #333; font-weight: bold; }
body>footer nav ul { list-style: none; }
body>footer nav div { float: left; width: 17em; }

body>footer p {
	color: #999;
	font-size: 90%;
	text-align: center;
	margin-top: 2em;
}

/*----- follow buttons bottom of window -----*/
@media screen and (min-width: 768px) and (orientation: portrait) {
	body>aside {
		background: white;
		position: fixed; top: auto; right: auto; bottom: 0; left: 0;
		width: 100%; height: 50px; z-index: 1001;
	}
	body>aside ul { width: 460px; margin: 10px auto 0; }
	body>aside li { margin-left: 40px; }
	body>footer { bottom: 5em; }
	body { padding-bottom: 24em; }
}

/*----- contents -----*/
main { position: relative; padding: 3em 0; }
main>footer { height: 2em; margin-top: 5em; }
main>footer ul { list-style: none; }
main>footer li { float: left; margin-right: 1.5em; }
main>footer li.facebook { margin-top: -2px; }

/*----- common styles -----*/
a { color: #37a34a; text-decoration: none; }
a:hover { color: #9dd64a; text-decoration: underline; }

nav a { color: #666; }
nav a:hover { color: #9dd64a; }

/*----- transitions -----*/
.fade {
	-webkit-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.zoom {
	-webkit-transition: transform 0.2s; z-index: 0;
	transition: transform 0.2s; z-index: 0;
}
.zoom:hover {
	-webkit-transform: scale(1.1); z-index: 2000;
	transform: scale(1.1); z-index: 2000;
}

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