@charset "Shift_JIS";

html{ scrollbar-base-color: black; }
html,table,input,textarea,code,kbd,pre,samp,tt{ font-size: 100%; }
html,body,p,ul,ol,li,dl,dt,dd{ margin: 0; padding: 0; }
ul,ol,dl{ margin-top: 1em; margin-bottom: 1em; line-height: 1.8; }
li,dd{ margin-left: 2em; }
dt{ margin-bottom: .15em; }
dd+dt{ margin-top: .5em; }
small{ font-size: smaller; }
big{ font-size: larger; }
em,strong,dfn,caption{ font-style: normal; font-weight: 700; }
strong{ font-size: 115%; }
q,cite{ color: #2c7f43; }
blockquote{ /* 引用 */	
	padding: 7px;
	border: 2px solid #ccc;
	background: #eee;
}
blockquote{ margin-left: 5%; margin-right: 0; }
cite{ font-style: normal; }
abbr{ cursor: help; }
code{ color: #59290c; }
code,kbd{ font-family: 'Courier New', Courier, monospace; }
kbd,var{ margin-right: .2em; }
table{ border-collapse: collapse; background: #FFF; color: #000; }
th,td{ padding: .3em 1em; border:1px solid #DDD;  vertical-align: top; text-align: left; }
th{ background-color: #EEE; }
img{ border: none; }
br{ letter-spacing: normal; }
a:link,a:visited{ text-decoration: underline; }
a:hover,a:focus{ text-decoration: none; }
form{ margin: 1em 0; }
img,input,textarea{ vertical-align: text-bottom; }
input[type="button"],input[type="submit"]{ cursor: pointer; }
body>ins,div>ins,body>del,div>del{ display: block; }

h1{ margin: 1.5em 0; padding: 0; line-height: 1.2; }
h2,h3,h4,h5,h6{ margin: 4em 0 2em; padding: 0; line-height: 1.2; }
h2+h3,h3+h4,h4+h5,h5+h6{ margin-top: 3em; }

span.dash{ letter-spacing: -.1em; margin-right: .1em; }
hr{ visibility: hidden; }
.note,.notice,.afterword{ margin: 1.5em 0; }
.notice p,.note p,.afterword p,form p{ margin: 0; text-indent: 0; line-height:1.45; }
.note{ margin-left: 15%; font-size: small; text-align: right; }
.note>li,.note>dt,.note>dd{ display: inline; margin-left: .5em; }
.note>li+li,.note>dd+dt{ border-left: 1px dotted #888; padding-left: .5em; }
.note>dt:after{ content: "\ff1a"; }/* content: ":" */
.notice{ border: 2px solid red; padding: .8em; }
.notice:before{  content: "\4e\6f\74\69\63\65\3a"; /* content: "Notice:" */
display: block; margin: -.5em 0 .8em; border-bottom: 1px dotted red; 
color: red; font-weight: bold; font-size: 110%; }
.afterword  form{ text-align: center; }
ul.nav{ margin: 4em 0 2em; clear: both; }
p.mark{ text-indent: 0; }
 #MENU
	{
	margin: 0;
	padding: 0;
	}
#MENU ul
{
	margin: 0;
	padding: 0;
	text-align: right;
}

#MENU01,
#MENU02,
#MENU03,
#MENU04
{
	display: inline;
	margin: 0 0.25em;
	padding: 0;
	border: 0;
}

#MENU01 a:link,
#MENU02 a:link,
#MENU03 a:link,
#MENU04 a:link
{
	/* メニューリンク */
	padding: 0.15em 0.25em;
	border-bottom: 3px solid #CCCCCC;
	color: #777777;
	font-weight: bold;
	line-height: 2;
	text-decoration: none;
}

#MENU01 a:visited,
#MENU02 a:visited,
#MENU03 a:visited,
#MENU04 a:visited
{
	/* 訪問済みリンク */
	border-color: #CCCCCC;
	color: #777777;
}

#MENU01 a:hover, #MENU01 a:focus,
#MENU02 a:hover, #MENU02 a:focus,
#MENU03 a:hover, #MENU03 a:focus,
#MENU04 a:hover, #MENU04 a:focus
{
	/* オンマウス時とフォーカス時のリンク */
	border-color: #191970;
	color: #191970;
}

#MENU li.menu-on a
{
	/* 該当ページメニュー */
	border-color: red;
	color: #191970;
}
}

 .modori{
	list-style: none;
	margin: 0;
	padding: 0;

	}
.modori li{
	list-style: none;
	display: block;
	text-align: right;
	margin: 1em 0 2em;
	padding: 0;
	}
.modori li a{
	color: #000000 !important;
	display: inline;
	letter-spacing: 0.25em;
	font-weight: 700;
	padding: 0.25em 1em;
	text-decoration: none;
	border-bottom: 1px solid #000;
	}
#FOOTER{
	text-align: right;
	border-top: 1px solid #000;
	margin: 0 -20px;
	padding: 15px 0 5px;
	background: url("./image/line.gif") repeat-x 0 0;
	}
 #FOOTER ul
	{
	list-style: none;
	margin: 0;
	padding: 0;
	}
#FOOTER li{
	display: inline;
	margin: 0 0 0 1em;
	padding: 0;
	}
 #FOOTER li a{
	color: #333;
	ext-decoration: none;
	}
#FOOTER a:hover{
	text-decoration: underline;
	}
#FOOTER li address{
	display:inline;
	margin: 0;
	padding: 0;
	}
}  
/* ★任意カスタマイズ事項======================= */

html
{
	background-color: #eee; /* 全体背景色 */
	background-image: none; /* 全体背景画像 */
	background-repeat: repeat;
	background-position: 0 0;
	background-attachment: fixed;
}
body
{
	width: 80%; /* 横幅(IE6用) */
	max-width: 60em; /* 最大横幅 */
	margin-left: auto;
	margin-right: auto;
	color: #000; /* 文字色 */
	background-color: #fff; /* テキスト表示部背景色 */
	background-image: none; /* テキスト表示部背景画像 */
	background-repeat: repeat;
	background-position: 0 0;
	background-attachment: scroll;
	border-left: 1px solid #000; /* テキスト表示部ボーダー */
	border-right: 1px solid #000; 
}
p
{
	/* text-indent: 1em; */
	/* margin-bottom: 0.5em; */
}

hr,div.break{ margin: 2em 0; color: #777; }/*場面展開用スペースと文字色*/
.notice{ margin-bottom: 8em; } /* 前書きの下部スペース */
.afterword{ margin-top: 10em; color: #777; } /* 後書きの上部スペースと文字色 */

h1,h2,h3,h4,h5,h6{ color: #191970; }/* 見出しの文字色 */
/* 見出しボーダー */
h1,h2,h3,
ul.nav{  border-top: 1px solid #000; border-bottom: 1px solid #000; }
 h4
	{
	border-left: 7px #000000;
	padding-left: 10px;
	font-size: 18px;;
	border-bottom: dashed 1px #999;
  	}
a:link{ color: #1e38ff; } /*未訪問リンク文字色 */
a:visited{ color: #77697a; } /*既訪問リンク文字色 */

/* ============================ */

body{ padding: 1em 30px; line-height: 1.8;  }

h1,h2,ul.nav{ margin-left: -60px; margin-right: -60px; padding: .2em 55px; }

h1{ font-size: 180%; letter-spacing: .5em; text-align: center; }
h2{ font-size: 140%; margin-right: 0; padding-right: .5em; }
h3,h4,h5,h6{  margin-right: 0; padding: .2em 1em; }
h3{ font-size: 120%; text-align:left; }

div.break{ text-align: center; }

ul.nav{ margin-left: 0; text-align: right; }
ul.nav li{ display: inline; margin: 0 1em; }
ul.nav kbd{ color: #888; }
ul.nav kbd:before{ content: "["; }
ul.nav kbd:after{ content: "]"; }

.afterword{ margin-left: 12%; margin-right: 12%; font-size: small; }<!DOCTYPE html>
<html lang="ja">
<head>

	<meta charset="Shift_JIS">
	<meta name="viewport" content="width=device-width">
	<meta name="robots" content="noindex,nofollow">
	<link rel="stylesheet" type="text/css" href="css/01.css" media="screen">
	<style type="text/css" media="print,projection"><!--
		html,body{ margin: 0; padding: 0; background: #FFFFFF; color: #000000; font-family: Serif; }
		.note{ text-align: right; }
		p.break{ margin-left: 3em; }
		div.notice,div.afterword{ border: 2px solid #000; padding: 5pt; }
		form,ul.nav{ display: none; }
	--></style>


	<style type="text/css" media="screen">
		div.afterword h2,div.afterword h3{ margin: 1.5em 0; }
	</style>


	<title>小説ページ用テンプレート &lt; alevirita</title>
</head>
<body>




<h1>小説ページ用テンプレート</h1>

<p>このページは<a href="/">alevirita</a>で配布しているテンプレートのサンプルページです。
<p>HTML要素の基本的スタイルと、小説展示ページで使いそうな、前書きブロック、後書きブロック、ナビゲーションや補足要素用の装飾をつけられるデザインです。
<p>共通HTMLは一応サンプルとしてついてますが、全体のレイアウトの再現のために必要なものでははなく、どんなHTMLでもCSSを読み込めばフレームワークとして汎用的に使えます。

<ul>
	<li><a href="./?css=&amp;sample=class" rel="nofollow">デザイン要素解説</a>
</ul>

<h2>作品展示サンプル</h2>
<ul>
	<li><a href="./?css=&amp;sample=1" rel="nofollow">使用サンプル1</a>
	<li><a href="./?css=&amp;sample=2" rel="nofollow">使用サンプル2</a>（前注意・後書き有）
	<li><a href="./?css=&amp;sample=3" rel="nofollow">使用サンプル3</a>（長編の一ページ）
	<li><a href="./?css=&amp;sample=4" rel="nofollow">使用サンプル4</a>（お題に沿った短編）
</ul>


<h2>ダウンロード</h2>
<ul>
	<li><a href="//dl/">CSSダウンロード</a>
	<li><a href="./html.zip">共通HTMLダウンロード</a>
	</ul>

<dl>
	<dt>2019-05-11<dd>共通HTMLをHTML5に変更
	<dt>2012-07-03<dd>IEでダウンロードできなかったので共通HTMLをzipダウンロードに変更
	<dt>2012-03-16<dd>ダウンロードできる共通HTMLが草案時のものでした。正しいHTMLに修正しました。
</dl>
		
<h3>ダウンロード版共通HTML使い方</h3>
<ol>
	<li>ダウンロードしたHTMLファイルを任意のエディタで開いて、★で囲われている部分に指定のURLなり文字列を挿入します。もし不要の部分があれば<code>&lt;!-- ▽<var>説明</var>--&gt;</code>から<code>&lt;!-- △<var>説明</var>--&gt;</code>までを消してください
	<li><code>★スタイルシートURL★</code>を適宜書き換えます
</ol>


<div class="afterword">


<dl class="note">
	<dt>Path<dd><a href="/" rel="home">alevirita</a> &gt;
				<a href="/original/" rel="up">original</a> &gt;
				小説用テンプレート
</dl>
</div>


</body>
</html>