@namespace url("http://www.w3.org/1999/xhtml");

header {
	margin-bottom: 3em;
}

/*====================================
	企画名
*/
header h1 {
	font-size: 5em;
	margin: 0;
	font-family: 美咲ゴシック, fantasy;
	text-align: center;
	color: #FFCFE7;
	text-shadow: -2px -2px 0px #19000E, 2px -2px 0px #19000E, 2px 2px 0px #19000E, -2px 2px 0px #19000E,
			 -4px -4px 0px #5C3D5C, 4px -4px 0px #5C3D5C, 4px 4px 0px #5C3D5C, -4px 4px 0px #5C3D5C;
}

/*====================================
	紹介動画
*/
header div {
	display: flex;
	justify-content: space-between;
}

header dl {
	text-align: right;
}

header dt,
header dd {
	display: inline;
	margin-left: 1em;
}

header dt::after {
	content: ":";
	font-weight: bold;
}

iframe {
	border: none;
}

/*====================================
	各ページへのリンク
*/
main {
	display: flex;
}

main > div {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
}

main a {
	flex-grow: 1;
	display: block;
	padding: 0.5em;
	border-radius: 1em;
	position: relative;
	text-decoration: none;
	color: white;
	background: #f08080;
	box-shadow: 0 0 0 5px #f08080;
	border: 1px dashed rgba(255,255,255,0.8);
	font-weight: inherit;
}

main a img {
	border-style: none; /* Internet Explorer 9 */
}

/*------------------------------------
	マウスオーバー時のスタイル
*/
main a:hover {
	color: white;
}

main a:hover,
main a:hover section::after {
	opacity: 0.8\0; /* Internet Explorer */
	filter: contrast(70%);
	z-index: 1;
}

/*------------------------------------
	タイトル
*/
hgroup {
	position: absolute;
	top: -1em;
	left: -0.5em;
	width: 19em;
	z-index: 2;
}

main h1,
h2:nth-of-type(1) {
	color: crimson;
}

main h1,
h2 {
	margin: 0;
}

main h1 {
	font-weight: normal;
}

main {
	counter-reset: section;
}

main h1::before {
	counter-increment: section;
	content: counter(section) ".";
}

main h1 img {
	height: 2em;
	vertical-align: bottom;
}

/*------------------------------------
	サブタイトル
*/
h2:nth-of-type(1) {
	position: absolute;
	top: 0;
	right: 9em;
	font-size: 1.2em;
	margin-left: 0.5em;
}

h2 span,
h2::before,
h2::after {
	display: inline-block;
}

h2::before,
h2 span:nth-last-of-type(n+8) {
	position: relative;
	left: 1.5em;
}

h2 span:nth-last-of-type(-n+7),
h2::after {
	position: absolute;
	width: 2em;
	text-align: center;
	height: 18em;
	-ms-transform-origin: bottom; /* Internet Explorer 9 */
	transform-origin: bottom;
}

h2 span:nth-last-of-type(7) {
	-ms-transform: rotate(3deg); /* Internet Explorer 9 */
	transform: rotate(3deg);
}

h2 span:nth-last-of-type(6) {
	-ms-transform: rotate(6deg); /* Internet Explorer 9 */
	transform: rotate(6deg);
}

h2 span:nth-last-of-type(5) {
	-ms-transform: rotate(9deg); /* Internet Explorer 9 */
	transform: rotate(9deg);
}

h2 span:nth-last-of-type(4) {
	-ms-transform: rotate(12deg); /* Internet Explorer 9 */
	transform: rotate(12deg);
}

h2 span:nth-last-of-type(3) {
	-ms-transform: rotate(15deg); /* Internet Explorer 9 */
	transform: rotate(15deg);
}

h2 span:nth-last-of-type(2) {
	-ms-transform: rotate(18deg); /* Internet Explorer 9 */
	transform: rotate(18deg);
}

h2 span:nth-last-of-type(1) {
	-ms-transform: rotate(21deg); /* Internet Explorer 9 */
	transform: rotate(21deg);
}

h2::after {
	-ms-transform: rotate(24deg); /* Internet Explorer 9 */
	transform: rotate(24deg);
}

/*------------------------------------
	概要
*/
main a {
	padding-top: 6em;
}

h2:nth-of-type(2) {
	top: 4em;
	position: absolute;
	width: 15.4em;
	font-size: 1.3em;
	left: 0.5em;
	text-decoration: underline;
	font-weight: normal;
}

/*------------------------------------
	アイコン
*/
main a {
	padding-bottom: 3em;
	margin-bottom: 2em;
}

main > div:first-of-type {
	margin-right: 2em;
}

main section::after {
	position: absolute;
	right: -3em;
	bottom: -3em;
	z-index: 1;
}

main [href="./appetite"] section::after {
	content: url("./appetite-icon");
}

main [href="./reading"] section::after {
	content: url("./reading-icon");
}

main [href="./art"] section::after {
	content: url("./art-icon");
}

main [href="./sports"] section::after {
	content: url("./sports-icon");
}

/*====================================
 * フッター
 */
footer {
	margin-bottom: 1.5em;
}

footer > p {
	margin-bottom: 3em;
}

footer > dl,
footer > aside {
	width: 28.5em;
	margin-left: auto;
	overflow: auto;
}

footer dt {
	width: 8em;
	margin-right: 0.5em;
	float: left;
	clear: both;
}

footer dd {
	width: 20em;
	margin: 0;
	float: left;
}

dd + dd {
	width: auto;
	margin-right: 1em;
}

#video-creators ~ dd {
	width: auto;
	margin-right: 1em;
}

/*------------------------------------
 * 謝辞
 */
#acknowledgements dt:first-of-type {
	height: 8em;
}