@charset "utf-8";

/*----- document -----*/
section { margin: 1em auto 3em; }

section h2 { font-size: 120%; font-weight: bold; margin-bottom: 0.5em; margin-left: 0.5em; }
section ul { list-style: none; }
section a { text-decoration: none; }

section li, section li a,
section dl, section dt, section dt a, section dd {
	display: -webkit-flex; -webkit-flex-wrap: wrap;
	display: flex; flex-wrap: wrap;
}

section li a,
section dt, section dt a,
section dd, section dd a {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

section dt,
section dd { width: 30%; }
section dt { height: 7em; }

section dt:nth-of-type(1) {
	-webkit-order: 1;
	order: 1;
}
section dt:nth-of-type(2) {
	-webkit-order: 2;
	order: 2;
}
section dt:nth-of-type(3) {
	-webkit-order: 3;
	order: 3;
}
section dd:nth-of-type(1) {
	-webkit-order: 4;
	order: 4;
}
section dd:nth-of-type(2) {
	-webkit-order: 5;
	order: 5;
}
section dd:nth-of-type(3) {
	-webkit-order: 6;
	order: 6;
}

section dd { text-align: center; }
section dd a { color: #666; font-size: 90%; font-weight: bold; padding: 1em 0; }

section span {
	color: white;
	text-shadow: 0 0 1px #000, 0 0 2px #333, 0 0 3px #666, 0 0 4px #ccc;
	font-weight: bold; text-align: right;
	margin: 0.5em;
}

/*----- ququ -----*/
section.q ul { position: relative; height: 21em; }
section.q li { position: absolute; }
section.q li:nth-of-type(1) { width: 100%; height: 12em; top: 0; left: 0; }
section.q li:nth-of-type(2) { width: 45%; height: 5em; top: 12em; right: 0; }
section.q li:nth-of-type(3) { width: 55%; height: 9em; bottom: 0; left: 0; }
section.q li:nth-of-type(4) { width: 45%; height: 4em; bottom: 0; right: 0; }

section.q li a {
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

section.q li:nth-of-type(1) a { background: url('../friends/artwork.png') 50% 30% / cover; }
section.q li:nth-of-type(2) a { background: url('../map/image-ququ.jpg') center bottom / cover; }
section.q li:nth-of-type(3) a { background: url('../photo/image.jpg') 90% 100% / 120% auto; }
section.q li:nth-of-type(4) a { background: #37455c; }

/*----- sticker -----*/
section.s dt:nth-of-type(1) a { background: url('../sticker/flyer-ququ.png') center top / cover; }
section.s dt:nth-of-type(2) a { background: url('../sticker/flyer-keel.png') center center / cover; }
section.s dt:nth-of-type(3) a { background: url('../sticker/flyer-friends.png') center center / cover; }

/*----- app -----*/
section.a dt a {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

section.a dt:nth-of-type(1) { background: url('../melancholy/image.png') left center / cover; }
section.a dt:nth-of-type(2) { background: url('../countil/image.png') right bottom / cover; }
section.a dt:nth-of-type(3) { background: url('../speedy/image.png') left center / cover; }