@charset "utf-8";

/*----- width -----*/
h1,
section,
body>header ul,
ul.foot .pdf,
ul.foot .follow { min-width: 740px; margin: 0 auto; }

section,
ul.foot .pdf,
ul.foot .follow { max-width: 1000px; }

h1,
section,
body>header ul { width: 80%; }

ul.foot .pdf,
ul.foot .follow { width: 79%; }

/*----- document -----*/
main { background: no-repeat calc(50% + 35em) 20% / 600px auto; }

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

section { margin-top: 2em; position: relative; }
section::after { content: ''; background: center / cover; position: absolute; width: 100px; height: 100px; bottom: 0; }

section>p { width: 40em; }

/*----- header -----*/
body { padding-top: 100px; }

body>header { background: white; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 1000; }
body>header ul { position: relative; }
body>header .store { position: absolute; top: 40px; left: 9em; width: 11em; height: 30px; }
body>header .store a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0.3em; }
body>header .lang { right: 10%; }

body>aside { position: fixed; z-index: 1001; }

/*----- store -----*/
li.store { font-size: 90%; text-align: center; background: #01b84f; }
li.store a { color: white; font-weight: bold; text-decoration: none; }

/*----- footer -----*/
ul.foot { list-style: none; height: 8em; }
ul.foot .store { width: 15em; padding: 0.5em; margin: 2em auto 0; }
ul.foot .pdf { text-align: left; margin-top: 2em; }
ul.foot .pdf::before {
	content: 'PDF';
	color: white; background: #e64e00;
	font-size: 0.8em; font-weight: bold;
	padding: 0.1em 0.5em; margin-right: 0.5em;
}
ul.foot .follow { text-align: right; margin-top: -2em; }

/*----- friends -----*/
ul.friends {
	list-style: none;
	position: absolute;
	top: 2em; right: 1em;
	width: 32em; height: 52px;
	display: -webkit-flex; -webkit-justify-content: space-between;
	display: flex; justify-content: space-between;
}
ul.friends li {
	background: url('../friends/badge.png') no-repeat center / auto 100%;
	width: 40px;
	display: -webkit-flex;
	display: flex;
}
ul.friends li:hover { background-image: url('../friends/badge_active.png'); }
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; }

/*----- for iPad ----- */
@media screen and (min-width: 768px) and (orientation: portrait) {
	main { background-position: calc(50% + 35em) 15%; }
	ul.friends { position: fixed; top: 25px; right: 1em; z-index: 2000; }
	ul.foot .pdf { width: auto; min-width: 0; margin-top: 0; position: absolute; top: 3.5em; right: 3em; }
	ul.foot .follow { margin-top: 2em; }
}

/*----- ququ -----*/
body.ququ main { background-image: url('flyer-ququ.png'); }
body.ququ main h2 { display: none; }

body.ququ section:nth-of-type(2) p,
body.ququ section:nth-of-type(5) p,
body.ququ section:nth-of-type(6) p { margin-left: 120px; width: 30em; }

body.ququ section:nth-of-type(2)::after,
body.ququ section:nth-of-type(4)::after,
body.ququ section:nth-of-type(5)::after {
	content: '';
	position: absolute; width: 100px; height: 100px;
	background: center / cover;
}
body.ququ section:nth-of-type(2)::after { background-image: url('ququ02.png'); top: 0; left: 0; }
body.ququ section:nth-of-type(4)::after { background-image: url('ququ04.png'); bottom: 0; left: 29em; }
body.ququ section:nth-of-type(5)::after { background-image: url('ququ05.png'); top: 0; left: 0; }

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

/*----- keel -----*/
body.keel main { background-image: url('flyer-keel.png'); }
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;
	width: 30em; min-height: 6em;
	padding-top: 3em;
	padding-left: 120px;
}

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.friends .ququ,
body.keel ul.friends .keel { background-image: url('../friends/badge_active.png'); }

/*----- friends -----*/
body.friends main { background-image: url('flyer-friends.png'); }
body.friends section:first-of-type h2 { display: none; }

body.friends section:nth-of-type(2) {
	background:
		url('friends02-1.png') no-repeat 5% 100%,
		url('friends02-2.png') no-repeat 27% 100%,
		url('friends02-3.png') no-repeat 49% 100%;
}
body.friends section:nth-of-type(3) {
	background:
		url('friends03-1.png') no-repeat 13% 100%,
		url('friends03-2.png') no-repeat 35% 100%,
		url('friends03-3.png') no-repeat 57% 100%;
}
body.friends section:nth-of-type(4) {
	background:
		url('friends04-1.png') no-repeat 5% 100%,
		url('friends04-2.png') no-repeat 27% 100%,
		url('friends04-3.png') no-repeat 49% 100%;
}

body.friends section:not(:first-of-type) { background-size: 100px; min-height: calc(100px + 2em); }