@charset "utf-8";

/*----- document -----*/
h1, section { width: 95%; margin-left: auto; margin-right: auto; }

h1 { font-size: 140%; font-weight: bold; margin-bottom: 3em; }
main h2 { font-weight: bold; margin-bottom: 1em; }

section { margin-top: 2em; }

/*----- store -----*/
li.store { font-size: 90%; text-align: center; background: #01b84f; padding: 0.5em; }
li.store a { color: white; font-weight: bold; text-decoration: none; }
body>header .store { width: 8em; position: absolute; bottom: 1em; left: 7em; }

/*----- footer -----*/
ul.foot { list-style: none; background: no-repeat center top / 100%; padding-top: 80%; }
ul.foot .store { width: 50%; margin: 0 auto; }
ul.foot .follow { text-align: right; width: 95%; height: 2em; margin-top: 4em; }
ul.foot .pdf { font-size: 80%; position: absolute; top: 11em; right: 1em; }
ul.foot .pdf::before {
	content: 'PDF';
	color: white; background: #e64e00;
	font-size: 80%; font-weight: bold;
	margin-right: 0.5em; padding: 0.2em 0.5em;
}

/*----- friends -----*/
ul.friends {
	list-style: none;
	display: -webkit-flex; -webkit-justify-content: space-around;
	display: flex; justify-content: space-around;
	max-width: 370px; margin: 2em auto 0;
}
ul.friends li {
	background: url('../friends/badge.png') no-repeat center / auto 100%;
	width: 40px; height: 52px;
	display: -webkit-flex;
	display: flex;
}
ul.friends a {
	opacity: 0; overflow: hidden;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

ul.friends li:nth-of-type(1) { background-position: 0px  0px; }
ul.friends li:nth-of-type(2) { background-position: -40px  0px; }
ul.friends li:nth-of-type(3) { background-position: -80px  0px; }
ul.friends li:nth-of-type(4) { background-position: -120px  0px; }
ul.friends li:nth-of-type(5) { background-position: -160px  0px; }
ul.friends li:nth-of-type(6) { background-position: -200px  0px; }
ul.friends li:nth-of-type(7) { background-position: -240px  0px; }
ul.friends li:nth-of-type(8) { background-position: -280px  0px; }

/*----- ququ -----*/
body.ququ main h2 { display: none; }
body.ququ section { min-height: 100px; }

body.ququ section:nth-of-type(odd) { background-position: left top; }
body.ququ section:nth-of-type(even) { background-position: right top; }
body.ququ section:nth-of-type(odd) p { margin-left: 8.7em; }
body.ququ section:nth-of-type(even) p { margin-right: 8.7em; }

body.ququ section:nth-of-type(1) { background: url('ququ01.png') no-repeat left top / 100px; }
body.ququ section:nth-of-type(2) { background: url('ququ02.png') no-repeat right top / 100px; }
body.ququ section:nth-of-type(3) { background: url('ququ03.png') no-repeat left top / 100px; }
body.ququ section:nth-of-type(4) { background: url('ququ04.png') no-repeat right top / 100px; }
body.ququ section:nth-of-type(5) { background: url('ququ05.png') no-repeat left top / 100px; }
body.ququ section:nth-of-type(6) { min-height: 3em; }

body.ququ ul.foot { background-image: url('flyer-ququ.png'); }
body.ququ li.ququ { background-image: url('../friends/badge_active.png'); }

/*----- keel -----*/
body.keel section:first-of-type h2 { display: none; }

body.keel section ul { list-style: none; }
body.keel section li {
	background: no-repeat left top / 100px;
	min-height: 7em; padding-top: 2em; padding-left: 120px;
	vertical-align: middle;
}

body.keel section span::before { content: '\A'; white-space: pre; }

body.keel section:nth-of-type(2) li:nth-of-type(1) { background-image: url('keel02-1.png'); }
body.keel section:nth-of-type(2) li:nth-of-type(2) { background-image: url('keel02-2.png'); }
body.keel section:nth-of-type(2) li:nth-of-type(3) { background-image: url('keel02-3.png'); }
body.keel section:nth-of-type(3) li:nth-of-type(1) { background-image: url('keel03-1.png'); }
body.keel section:nth-of-type(3) li:nth-of-type(2) { background-image: url('keel03-2.png'); }
body.keel section:nth-of-type(3) li:nth-of-type(3) { background-image: url('keel03-3.png'); }
body.keel section:nth-of-type(4) li:nth-of-type(1) { background-image: url('keel04-1.png'); }
body.keel section:nth-of-type(4) li:nth-of-type(2) { background-image: url('keel04-2.png'); }
body.keel section:nth-of-type(4) li:nth-of-type(3) { background-image: url('keel04-3.png'); }

body.keel ul.foot { background-image: url('flyer-keel.png'); }
body.keel ul.friends .ququ,
body.keel ul.friends .keel { background-image: url('../friends/badge_active.png'); }

/*----- friends -----*/
body.friends section:first-of-type h2 { display: none; }

body.friends section:nth-of-type(2) {
	background:
		url('friends02-1.png') no-repeat 0% 100%,
		url('friends02-2.png') no-repeat 50% 100%,
		url('friends02-3.png') no-repeat 100% 100%;
}
body.friends section:nth-of-type(3) {
	background:
		url('friends03-1.png') no-repeat 0% 100%,
		url('friends03-2.png') no-repeat 50% 100%,
		url('friends03-3.png') no-repeat 100% 100%;
}
body.friends section:nth-of-type(4) {
	background:
		url('friends04-1.png') no-repeat 0% 100%,
		url('friends04-2.png') no-repeat 50% 100%,
		url('friends04-3.png') no-repeat 100% 100%;
}

body.friends section:not(:first-of-type) {
	background-size: 100px;
	max-width: 350px; min-height: calc(100px + 2em);
	margin-left: auto; margin-right: auto;
}

body.friends ul.foot { background-image: url('flyer-friends.png'); }
body.friends ul.friends li { background-image: url('../friends/badge_active.png'); }