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

@font-face {
	font-family: PixelMplus12;
	src: local(PixelMplus12), url(/common/PixelMplus12-Regular) format("woff");
}

@font-face {
	font-family: PixelMplus12;
	src: local(PixelMplus12), url(/common/PixelMplus12-Bold) format("woff");
	font-weight: bold;
}

@font-face {
	font-family: PixelMplus10;
	src: local(PixelMplus10), url(/common/PixelMplus10-Regular) format("woff");
}

@font-face {
	font-family: PixelMplus10;
	src: local(PixelMplus10), url(/common/PixelMplus10-Bold) format("woff");
	font-weight: bold;
}

section,
footer {
	margin: 3em 0;
}

#schedule2,
#schedule3,
#schedule4 {
	margin-top: -3em;
}

hgroup {
	position: relative;
	margin-bottom: 8em;
}

hgroup img {
	height: 5em;
}

h2:nth-of-type(2) {
	left: 0;
	right: 0;
	font-size: 2em;
	top: 7.5em;
}

h2:nth-of-type(2)::first-line {
	background: rgba(200,200,200,0.5);
}

header > p {
	margin: 0;
}

#art > header p i strong {
	font-size: 2em;
}

/*------------------------------------
	更新日時
*/
#schedule footer,
#ranking footer,
#participants footer,
#lottery-tool footer {
	font-size: 0.8em;
	margin: 0;
	text-align: right;
	box-shadow: none;
}

footer > time {
	box-shadow: none;
	padding-left: 0;
}

/*====================================
	ランキング

	参考: CSS3のグラデーションで金属や木目などを表現する | Webクリエイターのメモ帳 <http://cre8or.jp/web-design-tips/201>
*/
#ranking table {
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 1em 0.5em;
}

#ranking tr {
	margin-bottom: 1em;
}

/*------------------------------------
	順位
*/
#ranking td:nth-of-type(1) {
	border-style: solid;
	border-width: 1px;
	font-size: 3em;
	line-height: 0.9em;
	width: 1em;
	height: 1em;
	border-radius: 0.15em;
	margin: 0.1em 0.1em 0.1em 0;
	font-family: PixelMplus12, fantasy;
	box-sizing: border-box;
	text-shadow: -1px -1px rgba(0, 0, 0, 0.34), 1px 1px rgba(240, 240, 204, 0.9);
	border-spacing: 10em;
	padding-left: 0.27em;
}

/*------------------------------------
	名前
*/
#ranking th {
	font-size: 1.5em;
	font-family: PixelMplus12, fantasy;
	vertical-align: top;
}

#ranking th a:link,
#ranking th a:visited {
	color: inherit;
}
#ranking th a:hover {
	position: relative;
	top: 0.1em;
	left: 0.1em;
}

/* ※注 */
#ranking th sup a:link,
#ranking th sup a:visited {
	font-family: sans-serif; /* IE */
	font-family: initial;
	color: crimson;
	text-shadow: none;
}
#ranking th sup a:hover {
	position: static;
	color: coral;
}

/*------------------------------------
	SCORE
*/
#ranking td:nth-of-type(2) {
	font-size: 1.25em;
	font-family: PixelMplus10, fantasy;
	text-align: center;
}
#ranking td:nth-of-type(2):not(:empty)::before,
#ranking td:nth-of-type(2):not(:empty)::after {
	content: "★";
	font-family: 美咲ゴシック, fantasy;
	margin: 0.1em;
	font-size: 0.8em;
	vertical-align: 0.19em;
}

/*------------------------------------
	1位
*/
#ranking tr:nth-of-type(1) {
	color: #BBBB99;
}
#ranking tr:nth-of-type(1) td:nth-of-type(1) {
	/* 順位 */
	border-color: #DECA73;
	box-shadow:
		2px 2px 0.5em rgba(150, 130, 80, 0.55),
		inset 1px 1px 0 rgba(200, 200, 160, 0.9),
		inset -1px -1px 0 rgba(0, 0, 0, 0.34);
	background: linear-gradient(
		-72deg,
		#EECC33,
		#DDDDAA 16%,
		#EECC33 21%,
		#DDDDAA 24%,
		#886633 27%,
		#EECC33 36%,
		#DDDDAA 45%,
		#DDDDAA 60%,
		#EECC33 72%,
		#DDDDAA 80%,
		#EECC33 84%,
		#452100);
	padding-left: 0.3em;
}
#ranking tr:nth-of-type(1) th {
	/* 名前 */
	text-shadow: -1px -1px #DDDDBB, 1px 1px #645A00;
}
#ranking tr:nth-of-type(1) td:nth-of-type(2) {
	/* SCORE */
	color: #AABB88;
}

/*------------------------------------
	2位
*/
#ranking tr:nth-of-type(2) {
	color: #BBBBBB;
}
#ranking tr:nth-of-type(2) td:nth-of-type(1) {
	/* 順位 */
	border-color: #CCCCCC;
	box-shadow:
		2px 2px 0.5em rgba(122, 122, 122, 0.55),
		inset 1px 1px 0 rgba(200, 200, 200, 0.9),
		inset -1px -1px 0 rgba(0, 0, 0, 0.34);
	background: linear-gradient(
		-72deg,
		#CCCCCC,
		#DDDDDD 16%,
		#CCCCCC 21%,
		#DDDDDD 24%,
		#888888 27%,
		#CCCCCC 36%,
		#DDDDDD 45%,
		#DDDDDD 60%,
		#CCCCCC 72%,
		#DDDDDD 80%,
		#CCCCCC 84%,
		#A1A1A1);
}
#ranking tr:nth-of-type(2) th {
	/* 名前 */
	text-shadow: -1px -1px #CCCCCC, 1px 1px #555555;
}
#ranking tr:nth-of-type(2) td:nth-of-type(2) {
	/* SCORE */
	color: #AAAABB;
}

/*------------------------------------
	3位
*/
#ranking tr:nth-of-type(3) {
	color: #BBAA88;
}
#ranking tr:nth-of-type(3) td:nth-of-type(1) {
	/* 順位 */
	border-color: #DEA173;
	box-shadow:
		2px 2px 0.5em rgba(122, 55, 34, 0.55),
		inset 1px 1px 0 rgba(200, 180, 160, 0.9),
		inset -1px -1px 0 rgba(0, 0, 0, 0.5);
	background: linear-gradient(
		-72deg,
		#CA7345,
		#DDCCBB 16%,
		#CA7345 21%,
		#DDCCBB 24%,
		#A14521 27%,
		#CA7345 36%,
		#DDCCBB 45%,
		#DDCCBB 60%,
		#CA7345 72%,
		#DDCCBB 80%,
		#CA7345 84%,
		#732100);
}
#ranking tr:nth-of-type(3) th {
	/* 名前 */
	text-shadow: -1px -1px #CCBBAA, 1px 1px #775522;
}

/*------------------------------------
	4位
*/
#ranking tr:nth-of-type(4) {
	color: #DDDDEE;
}
#ranking tr:nth-of-type(4) td:nth-of-type(1) {
	/* 順位 */
	text-shadow: -1px -1px rgba(60, 60, 70, 0.9), 1px 1px rgba(0, 0, 0, 0.34);
	border-color: #555566;
	box-shadow:
		2px 2px 0.5em rgba(50, 50, 60, 0.55),
		inset 1px 1px 0 rgba(100, 100, 120, 0.9),
		inset -1px -1px 0 rgba(0, 0, 0, 0.5);
	background: linear-gradient(
		-72deg,
		#CACADA,
		#DDDDEE 16%,
		#CACADA 21%,
		#DDDDEE 24%,
		#BBBBCC 27%,
		#CACADA 36%,
		#DDDDEE 45%,
		#DDDDEE 60%,
		#CACADA 72%,
		#DDDDEE 80%,
		#CACADA 84%,
		#BABACA);
}
#ranking tr:nth-of-type(4) th {
	/* 名前 */
	text-shadow: -1px -1px #CCBBAA, 1px 1px #775522;
}
#ranking tr:nth-of-type(4) td:nth-of-type(2) {
	/* SCORE */
	color: #AAAAAA;
}

/*------------------------------------
	5位以降
*/
#ranking tr:nth-of-type(n+5) {
	color: whitesmoke;
}
#ranking tr:nth-of-type(n+5) td:nth-of-type(1) {
	/* 順位 */
	text-shadow: -1px -1px rgba(60, 60, 70, 0.9), 1px 1px rgba(0, 0, 0, 0.34);
	border-color: darkgray;
	box-shadow:
		inset 1px 1px 0 rgba(100, 100, 120, 0.9),
		inset -1px -1px 0 rgba(0, 0, 0, 0.5);
	background: whitesmoke;
}
#ranking tr:nth-of-type(n+5) th {
	/* 名前 */
	text-shadow: -1px -1px #CCBBAA, 1px 1px #775522;
}
#ranking tr:nth-of-type(n+5) td:nth-of-type(2) {
	/* SCORE */
	color: #999999;
}

/*------------------------------------
	10位以降
*/
#ranking tr:nth-of-type(n+10) td:nth-of-type(1) {
	/* 順位 */
	position: relative;
}
#ranking tr:nth-of-type(n+10) td:nth-of-type(1) span {
	position: absolute;
	top: 0.03em;
}
#ranking tr:nth-of-type(n+10) td:nth-of-type(1) span:nth-of-type(1) {
	left: 0.07em;
}

#ranking tr:nth-of-type(n+10) td:nth-of-type(1) span:nth-of-type(2) {
	left: 0.45em;
}

/*------------------------------------
	11位
*/
#ranking tr:nth-of-type(11) td:nth-of-type(1) span:nth-of-type(1) {
	left: 0.1em;
}

#ranking tr:nth-of-type(11) td:nth-of-type(1) span:nth-of-type(2) {
	left: 0.5em;
}

/*------------------------------------
	未登録
*/
#ranking th:empty::before {
	content: "――――";
	font-size: 0.5em;
}

/*====================================
	ライブ配信での要項
*/
#details-live dl {
	list-style-type: square;
}

#details-live dt {
	font-weight: bold;
}

#details-live dt::before {
	content: "※";
}

#details-live dd {
	display: list-item;
	margin-left: 1.5em;
}

/*====================================
	作品一覧
*/
#theories table,
#illustrations table {
	width: 100%;
}

#illustrations tbody {
	display: flex;
	flex-wrap: wrap;
}

#illustrations tr {
	width: calc(25% - 3px);
	display: flex;
	flex-direction: column;
	text-align: center;
	border: #F08080 none 1px;
}

#illustrations tr:nth-of-type(4n+2),
#illustrations tr:nth-of-type(4n+3),
#illustrations tr:nth-of-type(4n+4) {
	border-left-style: dashed;
}

#illustrations tr:nth-of-type(n+5) {
	border-top-style: dashed;
}

#illustrations th {
	height: 3.2em;
	display: flex;
	justify-content: center;
	align-items: center;
}

#illustrations td:nth-of-type(1) {
	width: 100%;
	height: 10rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

#illustrations img {
	max-width: 10rem;
	max-height: 10rem;
}

/*------------------------------------
	Internet Explorer 11 
*/
#illustrations table,
#illustrations td {
	display: block;
}

/*====================================
	日程
*/
#participants figure {
	width: 42em;
	margin-left: auto;
	margin-right: auto;
}

#calendar {
	display: flex;
	flex-wrap: wrap;
}

#calendar > * {
	width: 6em;
	box-sizing: border-box;
	padding-left: 0.3em;
}
#calendar > dt {
	height: 1.5em;
	padding-bottom: 0.5em;
}
#calendar > dd {
	height: 3em;
	margin-left: 0;
}

#calendar dl {
	font-size: 0.8em;
	margin: 0;
}
#calendar dl dd {
	margin-left: 0;
}

#participants i {
	font-style: oblique;
	font-family: inherit;
}

/*------------------------------------
	週
*/
#calendar > *:first-of-type {
	margin-left: 36em;
}
#calendar > dt:nth-of-type(1) {
	order: 1;
}
#calendar > dd:nth-of-type(1) {
	order: 2;
}
#calendar > dt:nth-of-type(n+2) {
	order: 3;
}
#calendar > dd:nth-of-type(n+2) {
	order: 4;
}
#calendar > dt:nth-of-type(n+9) {
	order: 5;
}
#calendar > dd:nth-of-type(n+9) {
	order: 6;
}
#calendar > dt:nth-of-type(n+16) {
	order: 7;
}
#calendar > dd:nth-of-type(n+16) {
	order: 8;
}
#calendar > dt:nth-of-type(n+23) {
	order: 9;
}
#calendar > dd:nth-of-type(n+23) {
	order: 10;
}
#calendar > dt:nth-of-type(n+30) {
	order: 11;
}
#calendar > dd:nth-of-type(n+30) {
	order: 12;
}
#calendar > *:last-of-type {
	width: calc(6em + 1px);
	margin-right: calc(18em - 1px);
}

/*------------------------------------
	枠線
*/
#calendar > * {
	border-width: 1px;
}
#calendar > *:not(:nth-of-type(7n+2)) {
	border-left-style: dashed;
}
#calendar > dt:not(:nth-of-type(1)):not(:nth-last-of-type(-n+4)) {
	border-top-style: dashed;
}
#calendar > *:last-of-type {
	border-right-style: dashed;
}
#calendar > dd:nth-last-of-type(-n+11):not(:nth-last-of-type(-n+4)) {
	border-bottom-style: dashed;
}

/*------------------------------------
	曜日
*/
#calendar > dt:nth-of-type(7n + 2) time,
#calendar > dt:nth-of-type(6) time,
#calendar > dt:nth-of-type(26) time {
	color: hotpink;
}
#calendar > dt:nth-of-type(7n + 1) time {
	color: dodgerblue;
}

/*------------------------------------
	年月
*/
#participants figcaption {
	text-align: center;
	border-bottom: solid;
	position: relative;
}
#participants .year {
	position: absolute;
	bottom: 0;
	left: 9em;
}
#participants .month {
	font-size: 2em;
}

/*------------------------------------
	1日2人
*/
#participants del {
	display: none;
}

#calendar > dd:nth-of-type(8) dl {
	display: flex;
	flex-wrap: wrap;
}

#calendar > dd:nth-of-type(8) dt {
	margin-right: 0.5em;
}

/*====================================
	注意事項
*/
#hints i {
	font-style: inherit;
	font-family: "851チカラヅヨク-かなA", fantasy;
	font-size: 1.2em;
	
}

#hints-video ul ul {
	font-weight: bold;
}

strong strong {
	font-size: 2em;
}

/*====================================
	ナビゲーション
*/

nav {
	text-align: center;
	display: flex;
	padding: 0;
}

nav a,
nav::before,
nav::after {
	margin: 1em;
	flex-basis: 100%;;
}

nav a[rel="prev"]::before {
	content: "← ";
}

nav a[rel="next"]::after {
	content: " →";
}

#appetite nav::before,
#sports nav::after {
	content: "";
	display: block;
}

/*====================================
	アイコン
*/
body {
	position: relative;
}

body::before,
body::after {
	content: "";
	position: absolute;
	bottom: 0;
	background: no-repeat 0% / calc((100vw - 45em) / 2);
	display: block;
	width: calc((100vw - 45em) / 2);
	height: calc((100vw - 45em) / 2);
	right: calc((100vw - 46em) / -2);
	z-index: -1;
}

body::before {
	display: none\0; /* Internet Explorer */
	filter: brightness(0) invert(100%);
}

body::after {
	opacity: 0.5;
}

body#appetite::before,
body#appetite::after {
	background-image: url("./appetite-icon");
}

body#reading::before,
body#reading::after {
	background-image: url("./reading-icon");
}

body#art::before,
body#art::after {
	background-image: url("./art-icon");
}

body#sports::before,
body#sports::after {
	background-image: url("./sports-icon");
}
