@charset "UTF-8";
@import url("/common/novel.css");
/* -----------------------------------------------------------------------------
    ☆ ひぐらしがなくですの の CSS
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
    ★ Media groups に visual を持つ環境で適用されるべき設定
----------------------------------------------------------------------------- */

@media screen, print, handheld, tv, projection, tty {

	/*  ● 背景  */

	html {
		background-color	: #000 ;
		color	: #CCC ;
	}

	/*  ● 見出し  */

	h1 {
		border-width	: 2.25pt ;
		border-style	: double ;
		font	: bold 120%/1.6 monospace ;
		letter-spacing	: 0.25em ;
		max-width	: 34.67em ;
		margin	: auto ;
		padding	: 0.5em 2em ;
	}

	h1.Light {
		border-color	: #FFF ;
		background-color	: #000 ;
		color	: #CCC ;
	}

	h1.L {
		border-color	: #000 ;
		background-color	: #D4D4D4 ;
		color	: #000 ;
	}

	h1.Light-And-L {
		border-color	: #000 #000 #CCC #CCC ;
		background-color	: #999 ;
		color	: #000 ;
	}

	h1.L-And-Light {
		border-color	: #CCC #CCC #000 #000 ;
		background-color	: #999 ;
		color	: #000 ;
	}

	h1.LL {
		border-color	: #666 ;
		background-color	: #999 ;
		color	: #000 ;
	}

	/*  ● ハイパーリンク  */

	a {
		padding	: 0 ;
		color	: #9AB ;
	}

	a:link, a:visited {
		background-color	: #000 ;
		text-decoration	: none ;
	}

	a:hover {
		background-color	: #000 ;
		color	: #CDE ;
		text-decoration	: underline ;
	}

	/*  ● 文章  */

	p {
		text-indent	: 0 ;
		padding-left	: 0 ;
	}


	/*  ○ 索引  */

	ul {
		max-width	: 45em ;
		margin	: 0 auto 10em ;
	}

	div + ul {
		margin-top	: 10em ;
	}

	li {
		margin	: 0.2em 0 ;
		list-style-type	: none ;
	}

	dl {
		position	: relative ;
	}

	dt {
		position	: absolute ;
		font	: 100%/1.6 monospace ;
	}

	dd {
		font	: 100%/1.6 'メイリオ', monospace ;
		padding-left	: 5.5em ;
	}

	ul.Double-Page dl,
	ul.Double-Page dt,
	li.Double-Page dl,
	li.Double-Page dt {
		position	: static ;
	}

	ul.Double-Page dd,
	li.Double-Page dd {
		margin-top	: 0.2em ;
		margin-bottom	: 0.6em ;
	}

	/*  ○ 名札付き文章（台本調）のために  */

	div.Libretto {
		max-width	: 44em ;
	}

	div.Libretto p {
		position	: relative ;
	}

	div.Libretto p span.Name {
		display	: block ;
		position	: absolute ;
		width	: 4em ;
		text-align	: center ;
	}

	div.Libretto p span.Mess {
		display	: block ;
		padding-left	: 5em ;
		text-indent	: -1em ;
	}

	div.Libretto p.Memory {
		margin-top	: 1.5em ;
		margin-bottom	: 1.5em ;
		margin-left	: 5em ;
	}

	/*  ○ メッセージ枠の調整 */

	div.Libretto, div.Message {
		margin	: 3em auto 6em ;
	}

	div.Message {
		padding-right	: 0 ;
	}

	div.Message > p {
		text-indent	: 1em ;
	}

	div.Message > p.Talk {
		text-indent	: -1em ;
		padding-left	: 1em ;
	}

	/*  ○ 場所表示、時間、効果音、補足事項、中寄せ、会話文、大きな行間  */

	p.Place, p.Time {
		margin	: 1em 0 ;
	}

	p.SE {
		margin	: 1em 0 1em 3em ;
	}

	p.Supp {
		text-indent	: -1em ;
		margin-left	: 3em ;
		margin-right	: 2em ;
	}

	p.CenterWord {
		white-space	: nowrap ;
		text-align	: center ;
	}

	/*  ○ DEATH NOTE  */

	div.DEATHNOTE {
		background-color	: #FFF ;
		color	: #000 ;
		margin	: 1em 2em ;
		padding	: 1em 0.25em ;
	}

	div.DEATHNOTE > hr {
		margin	: 0 auto ;
		height	: 0 ;
		border-color	: #000 ;
		border-style	: solid none none none ;
	}

	div.DEATHNOTE > p {
		position	: relative ;
		margin-left	: 1em ;
		margin-right	: 1em ;
	}

	div.DEATHNOTE > p > span.Name {
		position	: absolute ;
		display	: block ;
		width	: 4em ;
		white-space	: nowrap ;
	}

	div.DEATHNOTE > p > span.Die {
		display	: block ;
		margin-left	: 5em ;
	}

	/*  ○ 長文改行時の行間  */

	/* こっちの表現では Firefox が認識しない。
	div.Libretto > p > span.Mess > br:after {
		content	: "" ;
		display	: block ;
		height	: 0.2em ;
	}
	だから下のよくわからん方法を使う。つーか、どうしてこれだと認識するんだ。 */

	div.Libretto > p > span.Mess > br:after {
		content	: "" ;
	}

	div.Libretto > p > span.Mess > br {
		display	: block ;
		margin-bottom	: 0.2em ;
	}

	/*  ○ アイキャッチ  */

	p.Eyecatch {
		border	: 0.75pt solid #333 ;
		background-color	: #000 ;
		color	: #CCC ;
		margin-left	: auto ;
		margin-right	: 0 ;
		padding	: 0.25em 1em ;
		max-width	: 10em ;
		text-align	: center ;
		white-space	: nowrap ;
	}

	div.Libretto > p.Eyecatch, div.Message > p.Eyecatch {
		text-indent	: 0 ;
	}

	p.Eyecatch > span.Blood {
		background-color	: #000 ;
		color	: #F66 ;
	}

	/*  ○ 非表示設定  */

	p.OnlyText, span.OnlyText {
		display	: none ;
	}

	/* 文字の半角化。というか、どれだけ伸縮するかがアバウトすぎる。 */
	/* 知る限りのブラウザが未対応。使えない。 */
	span.half-word {font-stretch	: condensed ;}

}

/* -----------------------------------------------------------------------------
    ★ 以下のメディアクエリで適用されるべき設定
        screen の横幅 480px 未満, handheld
----------------------------------------------------------------------------- */

@media handheld, only screen and (max-width:359pt) {

	/*  ○ 名札付き文章（台本調）のために  */

	div.Libretto > p > span.Name {
		top	: -1em ;
		text-align	: left ;
		color	: #666 ;
	}

	div.Libretto > p > span.Mess {
		padding-left	: 1em ;
	}

	/*  ○ DEATH NOTE  */

	div.DEATHNOTE {
		margin-left	: 0 ;
		margin-right	: 0 ;
	}

	div.DEATHNOTE > p > span.Name {
		position	: static ;
	}

	div.DEATHNOTE > p > span.Die {
		margin-left	: 1em ;
	}

}