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

@font-face {
	font-family: 美咲ゴシック;
	src: local(美咲ゴシック), local(MisakiGothic), url(/common/misaki_gothic) format("woff");
}

@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: Structr;
	src: local(Structr), url(/common/Structr-Bold) format("woff");
	font-weight: bold;
}

@font-face {
	font-family: 衡山毛筆フォント;
	src: local(衡山毛筆フォント), url(/common/KouzanMouhituFontOTF) format("woff");
}

@viewport {
	width: 38em;
}

body {
	width: 38em;
	margin-left: auto;
	margin-right: auto;
	background: black;
	color: #CC0000;
}

body > * {
	font-size: 0.8125em;
	font-family: "Courier New", Courier, monospace;
}

a:link {
	color: #9999FF;
	text-decoration: none;
}

a:visited {
	color: #666699;
}

a:hover {
	color: #CCCC00;
}

i {
	font-style: normal;
}
i::before {
	content: "「";
}
i::after {
	content: "」";
}

kbd::before {
	content: "【";
}
kbd::after {
	content: "】";
}

section small {
	font-size: 1em;
}
section small::before {
	content: "※";
}

a {
	white-space: nowrap;
}

strong {
	color: lightcoral;
	font-size: 1.15em;
}

/*====================================
 * ランキング更新日時
 */
 
body > small {
	display: block;
	text-align: right;
}

body > small + section {
	margin-top: 1em;
}

/*====================================
 * ヘッダー
 */
body > header {
	text-align: center;
}

/*------------------------------------
 * ページ名
 */
body > header > h1 {
	font-family: 美咲ゴシック, fantasy;
	color: #FFCFE7;
	text-shadow: -2px -2px #19000E, 2px -2px #19000E, 2px 2px #19000E, -2px 2px #19000E,
			 -4px -4px #5C3D5C, 4px -4px #5C3D5C, 4px 4px #5C3D5C, -4px 4px #5C3D5C;
}

/*------------------------------------
 * 企画名
 */
#project-name {
	font-size: 3.5em;
	margin-top: 0;
}
#project-name span:nth-of-type(1) {
	font-size: 0.5em;
}
#project-name span:nth-of-type(2) {
	color: khaki;
}
#project-name span:nth-of-type(3) {
	color: crimson;
}
#project-name span:nth-of-type(4) {
	color: paleturquoise;
}

/*====================================
 * 見出し
 */
section h1 {
	font-size: 1em;
}
section h1 a:link,
section h1 a:visited,
section h1 a:hover {
	color: inherit;
}
section h1 a::before,
caption h1::before {
	content: "★";
}
section {
	margin-top: 4em;
	margin-bottom: 4em;
}

/*====================================
 * フッター
 */
body > footer {
	clear: both;
}
body > footer::before {
	content: "";
	display: block;
	border-top: solid medium #222244;
	margin: 2em auto;
}

/*------------------------------------
 * サイト内リンク
 */
nav {
	text-align: center;
	margin: 2em;
}

/*------------------------------------
 * 運営
 */
footer dl {
	width: 23em;
	margin-left: auto;
	line-height: 1.6em;
}
footer dt {
	width: 8em;
	float: left;
	clear: both;
}
footer dd {
	width: 15em;
	margin: 0;
	float: left;
}
#video-creators {
	height: 4.8em;
}
#video-creators + dd,
dd + dd {
	width: auto;
	margin-right: 1em;
}

/*------------------------------------
 * 更新日
 */
footer small {
	clear: both;
	display: block;
	text-align: right;
}

/*====================================
 * 紹介動画
 */
#pv dt {
	width: 5em;
	float: left;
	clear: both;
}
#pv dd {
	float: left;
	margin: 0;
}
#pv dl::after {
	content: "";
	display: block;
	clear: both;
}

/*====================================
 * 参加方法
 */
#way figure {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

/*------------------------------------
 * ミニゲーム別のルール
 */
#way section {
	margin-top: 1.5em;
	margin-left: 2em;
}
#way section:not(:last-of-type) {
	margin-bottom: 0;
}
#way section h1::before {
	content: "※";
}

/*====================================
 * 開催日程
 */
#schedule ol {
	margin-top: 0;
	padding-left: 0;
	list-style: none;
}
#schedule ol > li {
	float: left;
	width: 6.5em;
	height: 4em;
	border-bottom: solid #222244;
}
#schedule ol > li > time {
	margin-left: 0.1em;
}
#schedule ol::after {
	content: "";
	display: block;
	clear: both;
}

/*------------------------------------
	年月
*/
#schedule figure {
	width: 45.5em;
	margin-left: auto;
	margin-right: auto;
}
#schedule figcaption {
	text-align: center;
	border-bottom: solid #222244;
	position: relative;
}
#schedule .year {
	position: absolute;
	bottom: 0;
	left: 17em;
}
#schedule .month {
	font-size: 2em;
}

/*------------------------------------
	開催期間
*/
ol > li#first-half,
ol > li#second-half {
	height: 10em;
}
li ul {
	list-style: disc;
}

/*------------------------------------
	前半
*/
ol > li#first-half {
	width: 26em;
}
ol > li#first-half,
.minigames caption {
	background: #101030;
}

/*------------------------------------
	後半
*/
ol > li#second-half {
	width: 19.5em;
}
#second-half,
#second-half + li,
.minigames:last-of-type caption {
	background: #1F2F2F;
}
#second-half + li > time {
	display: none;
}

/*------------------------------------
	2015-05-01
*/
#schedule ol > li:first-of-type {
	padding-left: 32.5em;
}

/*------------------------------------
	2015-05-31
*/
#schedule ol > li:last-of-type {
	width: auto;
	height: auto;
	border: none;
	position: relative;
	top: -1.5em;
	left: 5.3em;
}

/*------------------------------------
	曜日
*/
#schedule #first-half > time,
#schedule #second-half > time span,
#schedule ol > li:nth-of-type(7n + 5) > time {
	/* 休日 */
	color: lightsalmon;
}
#schedule ol > li:nth-of-type(2) > time,
#schedule ol > li:nth-of-type(7n + 4) > time {
	/* 土曜日 */
	color: lightskyblue;
}
#schedule ol > li > time,
#schedule ol > li:nth-of-type(4) > time {
	/* 平日 */
	color: silver;
}

/*====================================
 * 各ミニゲーム共通
 */
.minigames table,
.minigames table > *,
.minigames tr,
.minigames tr > * {
	display: block;
	/* Internet Explorer 9 で表関連要素に display プロパティが効かないバグの対処 */
	float: left;
	width: 100%;
	
}
.minigames thead {
	display: none;
}
.minigames caption, 
.minigames tbody {
	width: 15em;
	height: 18em;
	float: left;
	margin: 0.2em;
	box-sizing: border-box;
	padding: 0.5em;
}
.minigames:last-of-type::after {
	content: "";
	display: block;
	clear: both;
}

/*------------------------------------
 * ミニゲーム
 */
.minigames tbody {
	border: solid;
}

/*------------------------------------
 * ゲーム名・ミニゲーム名
 */
.minigames th {
	top: 0;
	left: 0;
	width: 100%;
	/* ミニゲーム名 */
	text-align: right;
}
.minigames th a::before,
.minigames th a::after {
	content: "〜";
}

/*------------------------------------
 * ミニゲーム名
 */
.minigames th > b {
	display: block;
	font-weight: inherit;
	text-align: center;
	font-size: 2em;
	height: 1.2em;
	box-sizing: border-box;
}

/*------------------------------------
 * ゲーム名
 */
.minigames th a {
	margin-right: 0.5em;
}
.minigames th a::before,
.minigames th a::after {
	content: "〜";
}

/*====================================
 * 順位・名前・得点
 *
 * 参考: CSS3のグラデーションで金属や木目などを表現する | Webクリエイターのメモ帳 <http://cre8or.jp/web-design-tips/201>
 */
.minigames td {
	font-family: PixelMplus12, fantasy;
}
.minigames tr {
	clear: both;
}
.minigames td {
	float: left;
	width: auto;
}

/*------------------------------------
 * 名前・得点
 */
.minigames tbody td:nth-of-type(n+2) {
	width: 10em;
	text-align: center;
}

/*------------------------------------
 * 名前
 */
.minigames td:nth-of-type(2) {
	font-weight: bold;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	white-space: nowrap;
}

.minigames td a:link,
.minigames td a:visited {
	color: inherit;
	text-decoration: underline;
}
.minigames td a:hover {
	position: relative;
	top: 0.1em;
	left: 0.1em;
}

/*------------------------------------
 * 順位
 */
.minigames 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);
}

/*------------------------------------
 * 得点
 */
.minigames td:nth-of-type(3) {
	width: 5em;
	text-align: right;
}
.minigames td:nth-of-type(3)::before,
.minigames td:nth-of-type(3)::after {
	content: "★";
	font-family: 美咲ゴシック, fantasy;
	margin: 0.1em;
}

/*------------------------------------
 * 1位
 */
.minigames tr:nth-of-type(2) {
	color: #BBBB99;
}
.minigames tr:nth-of-type(2) td:nth-of-type(1) {
	/* 順位 */
	border-color: #DECA73;
	box-shadow:
		2px 2px 0.5em rgba(255, 220, 150, 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;
}
.minigames tr:nth-of-type(2) td:nth-of-type(2) {
	/* 名前 */
	text-shadow: -1px -1px #DDDDBB, 1px 1px #645A00;
}

/*------------------------------------
 * 2位
 */
.minigames tr:nth-of-type(3) {
	color: #BBBBBB;
}
.minigames tr:nth-of-type(3) 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);
	padding-left: 0.27em;
}
.minigames tr:nth-of-type(3) td:nth-of-type(2) {
	/* 名前 */
	text-shadow: -1px -1px #CCCCCC, 1px 1px #555555;
}

/*------------------------------------
 * 3位
 */
.minigames tr:nth-of-type(n+4) {
	color: #BBAA88;
}
.minigames tr:nth-of-type(n+4) 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);
	padding-left: 0.27em;
}
.minigames tr:nth-of-type(n+4) td:nth-of-type(2) {
	/* 名前 */
	text-shadow: -1px -1px #CCBBAA, 1px 1px #775522;
}

/*------------------------------------
 * 未登録
 */
.minigames .has-blank {
	opacity: 0.3;
}
.minigames .has-blank td:nth-of-type(2)::before {
	content: "――――";
}
.minigames .has-blank td:nth-of-type(3)::before {
	content: "――" !important;
	position: static !important;
}
.minigames .has-blank td:nth-of-type(3)::after {
	display: none;
}

/*====================================
 * 前半・後半
 */
.minigames caption {
	text-align: left;
}
.minigames caption time > div {
	text-align: right;
}

/*====================================
 * NASU
 */
#nasu,
#nasu-smartphone {
	border-color: #84454A;
	box-shadow: 0 -1px #B57184, 1px 0 #4A0C31, 0 1px #4A0C31, -1px 0 #4A0C31,	/* 外側の上・右・下・左 */
			-1px -1px #535653, 0 0 0 1px #535653,	/* 外側の四隅 */
			inset 1px 1px #4A0C31, inset -1px -1px #523C42;	/* 内側の上左・下右 */
}
#nasu th b,
#nasu-smartphone th b {
	font-family: Structr, sans-serif;
	color: #732073;
	text-shadow: -1px -1px #9C59AD, 1px -1px #9C59AD, 1px 1px #9C59AD, -1px 1px #9C59AD;
	font-weight: bold;
}
#nasu-smartphone th {
	font-weight: normal;
}

/*====================================
 * ミニゲームB
 */
#minigame-b {
	border-color: #7B7D7B;
	box-shadow: 0 0 0 2px #626163, inset 0 0 0 2px #626163;
}
#minigame-b th b span {
	margin: 0.2em;
	display: inline-block;
}
#minigame-b th b span:nth-of-type(1) {
	color: #DD0000;
	transform: rotate(-30deg);
}
#minigame-b th b span:nth-of-type(2) {
	color: #0000DD;
	transform: rotate(30deg);
}
#minigame-b th b span:nth-of-type(3) {
	color: #DDDD00;
	transform: rotate(30deg);
}

/*====================================
 * YoKe
 */
#yoke {
	border-color: #739AD5;
	box-shadow: inset 0 0 0 1px #395173,
			inset 0 2px #739AD5, inset 0 -2px #739AD5, inset 3px 0 #739AD5, inset -3px 0 #739AD5;
}
#yoke th b {
	font-family: sans-serif;
	color: #395173;
	text-shadow: -1px -1px #739AD5, 1px -1px #739AD5, 1px 1px #739AD5, -1px 1px #739AD5,
			0 4px #182039;
}

/*====================================
 * パイロン走
 */
#pylon-runs {
	border-color: #314931;
	box-shadow: -1px 0 #426942, -1px -1px #426942, 0 -1px #426942, /* 外側の左と上 */
			1px 0 #182818, 1px 1px #182818, 0 1px #182818,  /* 外側の右と下 */
			0 0 0 1px #314931,	/* 外側の右上角と左下角 */
			0 0 0 2px #101410,	/* 外側の外側 */
			inset 1px 1px #182818, inset -1px -1px #426942;	/* 内側 */ 
}
#pylon-runs th b {
	font-family: serif;
	color: #B52829;
	text-shadow: -1px -1px silver, 1px -1px silver, 1px 1px silver, -1px 1px silver;
	font-weight: bold;
	letter-spacing: -0.2em;
	position: relative;
	top: -0.2em;
}
#pylon-runs th b span {
	position: relative;
}
#pylon-runs th b span:nth-of-type(2) {
	top: -0.27em;
}
#pylon-runs th b span:nth-of-type(3) {
	left: -0.1em;
}
#pylon-runs th b span:nth-of-type(4) {
	top: -0.27em;
}
#pylon-runs th b span:nth-of-type(5) {
	font-family: 衡山毛筆フォント, cursive;
	font-size: 1.3em;
	color: #414950;
	top: 0.2em;
	left: -0.3em;
}
#pylon-runs td:nth-of-type(3)::before,
#pylon-runs td:nth-of-type(3)::after {
	content: "☆";
}

/*====================================
 * SHINSOKU NEKO
 */
#shinsoku-neko {
	border-color: #FF8629;
	box-shadow: 0 -1px #FFBA52, 1px 0 #BD5529, 0 1px #BD5529, -1px 0 #BD5529,
			inset 1px 1px #BD5529, inset -1px -1px #8C4931,
			inset 0 0 0 2px #4A1C00;
}
#shinsoku-neko th b {
	font-family: Structr, sans-serif;
	color: #733C18;
	text-shadow: -1px -1px #84754A, 1px -1px #84754A, 1px 1px #84754A, -1px 1px #84754A;
}
#shinsoku-neko th b span {
	font-size: 0.4em;
	text-shadow: none;
}
#shinsoku-neko th b span:nth-of-type(1) {
	position: relative;
	top: -0.8em;
	left: 1em;
}
#shinsoku-neko td:nth-of-type(3)::before,
#shinsoku-neko td:nth-of-type(3)::after {
	content: "．";
}
#shinsoku-neko td:nth-of-type(3)::before {
	position: relative;
	left: 0.65em;
}

/*====================================
 * TA_BE_
 */
#ta-be {
	border-color: #CEB652;
}
#ta-be th b {
	font-family: sans-serif;
	color: #A52400;
	font-weight: bold;
}
#ta-be td:nth-of-type(3)::before, 
#ta-be td:nth-of-type(3)::after {
	content: "．";
	position: relative;
	top: -0.2em;
	left: 0.5em;
}
#ta-be td:nth-of-type(3)::after {
	visibility: hidden;
}

/*====================================
 * PANErabbit
 */
#pane-rabbit {
	border-color: #C6B2FF;
	border-width: 1px;
	box-shadow: 0 0 0 1px #A571FF, inset 0 0 0 1px #9ff1F7, inset 0 0 0 2px #6310A5; 
}
#pane-rabbit th b {
	font-family: sans-serif;
	color: gainsboro;
	text-shadow: -1px -1px #6310A5, 1px -1px #6310A5, 1px 1px #6310A5, -1px 1px #6310A5;
}

/*====================================
 * きのこ狩り・たけのこ狩り
 */
#kinokogari,
#takenokogari {
	border-color: #31B231;
}
#kinokogari th b,
#takenokogari th b {
	font-family: 衡山毛筆フォント, serif;
}

/*------------------------------------
 * きのこ狩り
 */
#kinokogari th b {
	color: #BDDFFF;
	text-shadow: -1px -1px #727172, 1px -1px #727172, 1px 1px 0 #727172, -1px 1px #727172;
}

/*------------------------------------
 * たけのこ狩り
 */
#takenokogari th a {
	display: inline-block;
	-ms-transform-origin: left;
	transform-origin: left;
	-ms-transform: scaleX(0.8);
	transform: scaleX(0.8);
}
