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

@font-face {
	font-family: ふい字;
	src: local(ふい字), local(HuiFont), url(/common/HuiFont109) format("woff");
}

@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;
}

@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: 美咲ゴシック;
	src: local(美咲ゴシック), local(MisakiGothic), url(/common/misaki_gothic) format("woff");
}



/*====================================
	ゆめ2っきのオープニング風
*/
html::before,
html::after {
	content: "";
	display: block;
	width: 100%;
	height: 50px;
	position: fixed;
	z-index: 1;
}

html::before {
	top: -50px;
	background: linear-gradient(black, transparent);
}

html::after {
	bottom: 0;
	background: linear-gradient(transparent, black);
}

body {
	padding-bottom: 50px;
}



/*====================================
	全体の文字色・背景・幅
*/
body {
	color: gainsboro;
	background: black;
}

body > * {
	font-size: 20px;
	margin: 1.5em auto;
	max-width: 29em;
}

body > p:not(.strong-em),
section:not(#comments) {
	font-family: PixelMplus10, sans-serif;
	line-height: 1.5em;
}



/*====================================
	リンクのスタイル
*/
a:link {
	white-space: nowrap;
	color: #99F;
}

a:visited {
	color: #669;
}

a:hover {
	color: #CC0;
}



/*====================================
	ページの見出し
*/
body > h1 {
	font-size: 60px;
	font-family: ふい字, fantasy;
	text-align: center;
	text-shadow: black 0.15em 0.15em 0.02em;
	height: 94px;
	line-height: 1.3em;
	margin-top: 28px;
	margin-bottom: 28px;
}
body {
	background-image: url("./yume2kki-heading-background");
	background-repeat: repeat-x;
}



/*====================================
	概要など
*/
p {
	text-align: center;
}

.addition-date {
	position: absolute;
	right: 0;
	bottom: 0;
	font-family: 美咲ゴシック, sans-serif;
	font-size: 16px;
	line-height: normal;
}
section .addition-date {
	right: 0.3em;
	bottom: 0.3em;
}
.addition-date time {
	margin-right: 0.2em;
}



/*====================================
	セクションなどの枠とその見出し
*/
body > p,
section:not(#comments) h1,
section:not(#comments)::before {
	border: solid 0.3em;
	border-radius: 0.2em;
	padding: 0.9em;
	background: black;
}

section:not(#comments)::before {
	content: "";
	display: block;
	position: absolute;
	top: 3em;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
}

section:not(#comments) h1 {
	font-size: 1em;
	font-weight: normal;
	width: 9em;
	text-align: center;
	position: absolute;
	top: 0.25em;
	left: -1.8em;
	padding-left: 0;
	padding-right: 0;
}
section:not(#comments) h1::before {
	content: "＊";
	position: relative;
	top: 0.15em;
}
section#live-streaming h1 {
	width: 13em;
}
section#video-sharing h1 {
	width: 10em;
}

section:not(#comments) {
	position: relative;
	padding: 6em 1.2em 1.2em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

/*------------------------------------
	強調、強勢
*/
.strong > strong strong,
.strong-em > strong em,
li strong {
	color: crimson;
	font-weight: normal;
	font-style: normal;
	margin-left: 0.3em;
	margin-right: 0.3em;
}
del strong {
	color: inherit;
	margin-left: 0;
	margin-right: 0;
}

/*------------------------------------
	重要な段落
*/
.strong,
.strong-em {
	text-align: left;
	border: solid 0.2em crimson;
	border-radius: 0;
	position: relative;
}

strong {
	font-weight: normal;
}

.strong {
	padding: 1.5em;
}

.strong-em > strong {
	font-size: medium;
}

/*------------------------------------
	注釈
*/
section li small {
	font-family: PixelMplus12;
	font-size: 12px;
}
section li small::before {
	content: "（";
}
section li small::after {
	content: "）";
}

/*------------------------------------
	補足
*/
section > small::before {
	content: "※";
}
section > small samp {
	font-family: PixelMplus12;
	font-size: 12px;
}
section > small i {
	font-style: normal;
}
section > small i::before {
	content: "「";
}
section > small i::after {
	content: "」";
}

footer small {
	font-size: 12px;
	font-family: PixelMplus12, sans-serif;
	color: silver;
}

/*------------------------------------
	リンク切れ
*/
del {
	color: white;
}
del ol,
del li {
	text-decoration: inherit;
}



/*====================================
	リスト
*/
#things-to-prepare > ol,
#rules > ul,
#live-streaming > ul,
#video-sharing > ul,
#others ul {
	list-style: none;
	padding-left: 1em;
}
#things-to-prepare > * > li,
#rules > * > li,
#live-streaming > * > li,
#video-sharing > * > li,
#others > * > li {
	position: relative;
	margin-bottom: 0.5em;
}
#things-to-prepare > * > li::before,
#rules > * > li::before,
#live-streaming > * > li::before,
#video-sharing > * > li::before,
#others > * > li::before {
	content: "＊";
	position: absolute;
	left: -1em;
}



/*====================================
	カードの見本
*/
#rules > figure {
	color: black;
	background: orange;
	font-family: serif;
	font-weight: bold;
	padding: 2em;
	margin: 0 1em;
}

#rules > figure ol {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding-left: 0;
}
#rules > figure li {
	counter-increment: level;
	display: table-cell;
}
#rules > figure li figure {
	margin: 0;
}
#rules > figure li figcaption {
	font-size: 0.7em;
}
#rules > figure li figcaption::before {
	content: counter(level) "、";
	font-family: sans-serif;
}

#rules > figure > figcaption {
	clear: both;
	font-size: 2em;
}
#rules > figure > figcaption span {
	font-size: 0.3em;
	font-weight: normal;
	margin-left: 1.5em;
}



/*====================================
	数字の横の隅付き括弧の説明
*/
#rules dl {
	margin-left: 1em;
}
#rules dl * {
	float: left;
	margin-left: 0.2em;
}
#rules dt {
	clear: both;
}
#rules dt::after {
	content: "→";
}
#rules dl::after {
	content: "";
	display: block;
	clear: both;
}



/*====================================
	にってい
*/
section#participants > h1 {
	width: 13em;
}
#participants ol {
	margin-top: 0;
	padding-left: 0;
	list-style: none;
}
#participants li {
	float: left;
	width: 4em;
	height: 4em;
	border-bottom: solid;
}
#participants li > time {
	margin-left: 0.1em;
}
#participants dl {
	font-family: PixelMplus12;
	font-size: 12px;
	line-height: 14px;
	margin-left: 0.5em;
	margin-top: 0;  /* IE */
}
#participants dt {
	height: 1.5em;
	white-space: nowrap;
}
#participants dd {
	margin-left: 0;
}
#participants ol::after {
	content: "";
	display: block;
	clear: both;
}

ins {
	text-decoration: none;
}

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

/*------------------------------------
	曜日
*/
#participants li:nth-of-type(7n + 1) > time,
#participants li:nth-of-type(7n + 1) > ins > time {
	color: lightsalmon;
}
#participants li:nth-of-type(7n + 7) > time,
#participants li:nth-of-type(7n + 7) > ins > time {
	color: lightskyblue;
}

/*------------------------------------
	自動改行位置
*/
#participants li:not(.after-first-day) a span::after {
	content: "\A";
	white-space: pre;
}

/*------------------------------------
	最終日
*/
#participants li:last-of-type {
	padding-right: 20em;
}




/*====================================
	さんかしゃ（どうが）
*/
section#participants-video-sharing > h1 {
	width: 11em;
}
#participants-video-sharing ul {
	color: gray;
}
#participants-video-sharing ul,
#participants-video-sharing ol {
	list-style: none;
	padding-left: 0;
}
#participants-video-sharing ol {
	float: left;
}
#participants-video-sharing ol li {
	float: left;
	margin-right: 1em;
}
#participants-video-sharing .long ol li {
	margin-right: 0.5em;
}
#participants-video-sharing > ul > li::after,
#participants-video-sharing ul::after {
	content: "";
	display: block;
	clear: both;
}



/*====================================
	しょうひん せいさく
*/
section#award > h1 {
	width: 11em;
}
#award ul {
	list-style: none;
	padding-left: 0;
}
#award li {
	width: 7.2em;
	float: left;
}
#award ul::after {
	content: "";
	display: block;
	clear: both;
}



/*====================================
	かいさいきかん
*/
#period dl {
	margin-top: 0;
	margin-bottom: 0;
}
#period dl > * {
	float: left;
}
#period dt {
	clear: both;
	width: 12em;
}
#period dd {
	margin-left: 0;
}
#period dd::before {
	content: ":";
	margin-right: 1em;
}
#period dl::after {
	content: "";
	display: block;
	clear: both;
}



/*====================================
	コメント欄
*/
#comments {
	font-size: medium;
	line-height: 1.1em;
	max-width: 50em;
	margin: 3em auto 0;
}

#comments form > ol {
	list-style: none;
}

#comments form > ol > li {
	position: relative;
}

#comments li input {
	position: absolute;
	left: -2em;
}

#comments .name {
	color: lightgrey;
}
#comments .name::before {
	content: "–";
	padding: 0.5em;
}

.trip {
	font-style: oblique;
}

#comments .ipaddr,
#comments time {
	font-size: smaller;
	color: darkgray;
	margin-left: 0.7em;
}

#comments .ipaddr[title] {
	cursor: help;
}

#comments li ol {
	list-style: circle;
}

/*====================================
	コメント投稿フォーム
*/
[name=body] {
	width: 34em;
}

#form label {
	white-space: nowrap;
}

[name=name],
[name=trip] {
	width: 6em;
}

.usage {
	font-size: smaller;
	color: darkgray;
}

.success {
	border: solid #46A;
	background: #234;
	margin-bottom: 1em;
}

.errors {
	border: solid #A55;
	background: #422;
	margin-bottom: 1em;
}

/*====================================
	フッター
*/
footer {
	font-family: PixelMplus12, sans-serif;
	text-align: right;
	margin-top: 0;
	margin-bottom: 1em;
}

footer > * {
	font-size: 12px;
}

footer dl {
	margin-bottom: 0;
}

footer dl > * {
	display: inline;
	margin-left: 0.2em;
}

footer dt::before {
	content: "\A";
	white-space: pre;
}

footer dt::after {
	content: ":";
}

small time {
	margin-right: 0.2em;
}