@charset "utf-8";

/*----- document -----*/
section { max-width: 800px; margin: 0 auto 2em; }

section h2 { font-size: 120%; font-weight: bold; margin-bottom: 0.5em; }
@media screen and (min-width: 768px) and (orientation: portrait) {section h2 { padding-left: 1em; }}

section a,
section a:hover { text-decoration: none; }

section ul { list-style: none; }

section ul, 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, 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: 9em; }

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: 0.2em; }
section dd a:hover { color: white; }

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

/*----- ququ -----*/
section.q li:nth-of-type(1) { width: 100%; height: 22em; }
section.q li:nth-of-type(2) { width: 25%; height: 12em; }
section.q li:nth-of-type(3) { width: 30%; height: 12em; }
section.q li:nth-of-type(4) { width: 15%; height: 12em; }

section.q li:nth-of-type(1) a {
	background: url('../friends/artwork.png') 50% 30% / cover;
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}
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') 80% 100% / cover;
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}
section.q li:nth-of-type(4) a {
	background: #37455c;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

/*----- 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; }

section.s dd a {
	-webkit-flex-direction: column; -webkit-align-items: flex-start;
	flex-direction: column; align-items: flex-start;
}
section.s dd a:hover { background: #01b84f; }

/*----- app -----*/
section.a dt:nth-of-type(1) a {
	background: url('../melancholy/image.png') left center / cover;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
section.a dt:nth-of-type(2) a {
	background: url('../countil/image.png') right bottom / cover;
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}
section.a dt:nth-of-type(3) a {
	background: url('../speedy/image.png') left center / cover;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

section.a dd a:hover { background: #333; }