@charset "utf-8";

main { max-width: 80%; min-width: 740px; margin: 0 auto; }

/*----- menu -----*/
section.menu { margin-bottom: 7em; }
section.menu h2 { display: none; }

section.menu ol {
	list-style: none;
	background: url('menu.png') no-repeat center / cover, url('menu.jpg') no-repeat center / cover;
	width: 740px; height: 315px; margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	position: relative;
}
section.menu li {
	display: -webkit-flex; -webkit-flex-basis: 100px;
	display: flex; flex-basis: 100px;
}
section.menu a {
	-webkit-flex-glow: 1;
	flex-glow: 1;
} 

section.menu li:nth-of-type(1) {
	-webkit-order: 4;
	order: 4;
}
section.menu li:nth-of-type(2) {
	-webkit-order: 2;
	order: 2;
}
section.menu li:nth-of-type(3) {
	-webkit-order: 1;
	order: 1;
}
section.menu li:nth-of-type(4) {
	-webkit-order: 8;
	order: 8;
}
section.menu li:nth-of-type(5) {
	-webkit-order: 7;
	order: 7;
}
section.menu li:nth-of-type(6) {
	-webkit-order: 5;
	order: 5;
}
section.menu li:nth-of-type(7) {
	-webkit-order: 6;
	order: 6;
}
section.menu li:nth-of-type(8) {
	-webkit-order: 3;
	order: 3;
}

/* for Pad */
@media screen and (max-width: 1024px) {
	section.menu span { opacity: 0; }
}
/* for PC */
@media screen and (min-width: 1025px) {
	section.menu ol,
	section.menu a {
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}

	section.menu ol:hover { background-image: url('menu.jpg'); }

	section.menu a { opacity: 0; text-decoration: none; background: no-repeat top left / 100% 100%; position: absolute; }
	section.menu a:hover { opacity: 1; }

	section.menu ol>li:nth-of-type(1) a { background-image: url('menu01.png'); left: 192px; top:  83px; width: 183px; height: 217px; z-index: 990; }
	section.menu ol>li:nth-of-type(2) a { background-image: url('menu02.png'); left:  72px; top: 121px; width: 124px; height: 174px; z-index: 993; }
	section.menu ol>li:nth-of-type(3) a { background-image: url('menu03.png'); left:   4px; top:   4px; width: 181px; height: 279px; z-index: 992; }
	section.menu ol>li:nth-of-type(4) a { background-image: url('menu04.png'); left: 592px; top:  21px; width: 146px; height: 263px; z-index: 987; }
	section.menu ol>li:nth-of-type(5) a { background-image: url('menu05.png'); left: 464px; top:  14px; width: 165px; height: 276px; z-index: 986; }
	section.menu ol>li:nth-of-type(6) a { background-image: url('menu06.png'); left: 358px; top:  93px; width: 129px; height: 201px; z-index: 989; }
	section.menu ol>li:nth-of-type(7) a { background-image: url('menu07.png'); left: 462px; top: 131px; width: 103px; height: 163px; z-index: 988; }
	section.menu ol>li:nth-of-type(8) a { background-image: url('menu08.png'); left: 180px; top:  45px; width: 135px; height: 233px; z-index: 991; }

	section.menu span {
		color: white;
		font-size: 150%; font-weight: bold;
		text-align: center; text-shadow: 0 0 5px black;
		position: absolute; left: calc((100% - 10em) / 2); bottom: 3em;
		display: block; width: 10em;
	}
}

/*----- characters -----*/
section:not(.menu) {
	background: no-repeat right top / 100px 100px;
	max-width: 800px; min-height: 200px;
	margin: 4em auto 0; padding-left: 180px; padding-bottom: 30px;
	position: relative;
}
section h2 { font-size: 180%; margin-bottom: 1em; padding-top: 1em; }
section p { line-height: 200%; }
section p.image { line-height: 100%; position: absolute; top: 0; left: 0; }

section.ququ { background-image: url('ququ_em.png'); }
section.coco { background-image: url('coco_em.png'); }
section.kesla { background-image: url('kesla_em.png'); }
section.mariene { background-image: url('mariene_em.png'); }
section.hoffbon { background-image: url('hoffbon_em.png'); }
section.keel { background-image: url('keel_em.png'); }
section.juli { background-image: url('juli_em.png'); }
section.swimul { background-image: url('swimul_em.png'); }

section.keel,
section.snake { margin-top: 10em; }

section ul { list-style: none; position: absolute; bottom: 0; right: 0; }
section ul>li { float: left; margin-right: 1.5em; }

section p.twitter { position: absolute; bottom: 0; left: 180px; }