@charset "UTF-8";
/* charset cssにおける文字コード宣言 */

/* ページ全体 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#wrapper {
  min-height: 640px;
  height: auto;
  height: 100%;
}

body {
  background-color: #000000;
  background-image: url("../img/moonyellow.gif"); /* 全体の背景画像 */
  background-repeat: repeat;               /* 背景を繰り返す */
  background-position: 50% 50%;            /* 背景画像の位置は画面中央 */
  background-attachment:fixed;             /* 背景画像を固定する */
  color: #000;
  font-size: 100%;
  font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height: 145%;
  letter-spacing: 1px;
}

/* -----------------------------------------------------------------------------
上メニューバー　ここから
----------------------------------------------------------------------------- */
/* ▼▼ 親メニュー ▼▼ */
ul#menu {
  list-style-type: none;
  width: 90%; /* 親メニュー全体の幅 */
  margin: 30px 1px 10px; /* 親メニューのaタグの余白部に共通 */
  padding: 0;
}
ul#menu li{
  position: relative; /* ボックスの配置基準位置を指定。相対位置。 */
  float: left; /* リストにおける横並び指定（回りこみ解除が必要） */
  width: 16.45%; /* 親メニュー単体個数（100/個数-2*個数px＝幅 合計が100を超えると2列目に行く。縁取りしている分1つあたり2pxほど余分に計算しないと100を超える。） */
  margin: 0 0 0 -1px;
  padding: 0;
  opacity: 0.95;
  border: 1px solid #ffffff;
  text-align: center;
}
ul#menu li a {
  display: block;
  margin: 0;
  padding: 10px 0; /* 親メニューのulタグの余白部に共通 */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none; /* 下線や点線、打ち消し線などの設定。リンク時における下線を消す。 */
  background: #111;
  background-image: -webkit-linear-gradient(#222, #000);
  background-image: -moz-linear-gradient(#222, #000);
  background-image: -o-linear-gradient(#222, #000);
  background-image: -ms-linear-gradient(#222, #000);
  background-image: liner-gradient(#222, #000);
}

/* ▼▼ 子メニュー ▼▼ */
ul#menu li ul{
  list-style: none;
  z-index: 9999; /* レイヤー。数値が多いほど最前面表示になる。 */
  position: absolute; /* ボックスの配置基準位置を指定。絶対位置。 */
  top: 100%; /* positionを絶対位置で基準とした位置。この場合親ボックスの真下 */
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul#menu li ul li{
  height: 0;
  overflow: hidden; /* はみ出し部分の設定 */
  width: 100%; /* 子メニューにおける幅 */
  border: none;
  transition: height .3s; /* 時間的変化 */
}
ul#menu li ul li a{
  padding: 9px 0 9px 5px; /* この余白（上下） + font-size = ホバーした時の高さ */
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #111;
  background-image: -webkit-linear-gradient(#222, #000);
  background-image: -moz-linear-gradient(#222, #000);
  background-image: -o-linear-gradient(#222, #000);
  background-image: -ms-linear-gradient(#222, #000);
  background-image: liner-gradient(#222, #000);
}
ul#menu > li:hover > a{
  position:relative;
  top:0;
  left:0;
  background: #2a2a2a;
  background-image: -webkit-linear-gradient(#3b3b3b, #191919);
  background-image: -moz-linear-gradient(#3b3b3b, #191919);
  background-image: -o-linear-gradient(#3b3b3b, #191919);
  background-image: -ms-linear-gradient(#3b3b3b, #191919);
  background-image: liner-gradient(#3b3b3b, #191919);
}
ul#menu > li:hover li:hover > a{
  position:relative;
  top: 0;
  left: 0;
  background: #2a2a2a;
  background-image: -webkit-linear-gradient(#3b3b3b, #191919);
  background-image: -moz-linear-gradient(#3b3b3b, #191919);
  background-image: -o-linear-gradient(#3b3b3b, #191919);
  background-image: -ms-linear-gradient(#3b3b3b, #191919);
  background-image: liner-gradient(#3b3b3b, #191919);
}
ul#menu li:hover > ul > li{
  position:relative;
  top: 0;
  left: 0;
  overflow: visible;
  border: 1px solid #ffffff;
  height: 32px; /* ホバーした時の高さ = 第二階層aタグ余白（上下） + font-size */
}

/* ▼▼ ブラウザはみ出し対策 ▼▼*/
ul#menu > li:last-child > ul{
  left: -100%;
  width: 100%;
}

/* ▼▼ 孫メニュー ▼▼ */
ul#menu li ul li ul {
  top: -1px;
  left: 100.5%;
  width: 100%;
}

ul#menu li ul li ul.back {
  left: -100.6%;
  width: 100%;
}

ul#menu li ul li ul li a {
  background: #111;
  background-image: -webkit-linear-gradient(#222, #000);
  background-image: -moz-linear-gradient(#222, #000);
  background-image: -o-linear-gradient(#222, #000);
  background-image: -ms-linear-gradient(#222, #000);
  background-image: liner-gradient(#222, #000);
}
ul#menu li:hover ul li ul li:hover > a {
  background: #2a2a2a;
  background-image: -webkit-linear-gradient(#3b3b3b, #191919);
  background-image: -moz-linear-gradient(#3b3b3b, #191919);
  background-image: -o-linear-gradient(#3b3b3b, #191919);
  background-image: -ms-linear-gradient(#3b3b3b, #191919);
  background-image: liner-gradient(#3b3b3b, #191919);
}

/* ▼▼ 子・孫メニュー（幅倍） ▼▼ */
/* 小説の話タイトル（長くなりがち）用。 */
ul#menu li ul li.ss ul {
  top: -1px;
  left: 100.5%;
  width: 200%;
}

ul#menu.ss li ul li.ss ul.back {
  left: -100.6%;
  width: 200%;
}

/* 下の階層があることを示す表示 */
/* ↑未実装 */

/* -----------------------------------------------------------------------------
上メニューバー　ここまで
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
フッター　ここから
----------------------------------------------------------------------------- */
div#footer {
  background-color: #2A5CAA;
  margin: 0;
  padding: 5px;
  border: 5px solid #6CBB5A;
  border-radius: 1em; 
  box-align: center;
  line-height: 17px;
  font-size: 12px;
  font-weight: bold;
}
/* -----------------------------------------------------------------------------
フッター　ここまで
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
リンクエフェクト　ここから
----------------------------------------------------------------------------- */
a:hover { /* リンクにマウスを載せた時の動作 */
  text-decoration: none;
  position: relative;
  top: 1px;
  left: 1px;
  background-color: #ffd78c;
}

a img{ /* 画像リンクの枠線消去 */
  border: none;
}

a.namea { /* ？ */
  font-size: 18;
  font-weight: 500;
  font-family: "さなフォン","ＭＳ 明朝",serif;
}

a:hover.imglink{
  text-decoration: none;
  position: relative;
  top: 1px;
  left: 1px;
  background-color: transparent;
}
/* -----------------------------------------------------------------------------
リンクエフェクト　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
ページ区分けテーブル　ここから
----------------------------------------------------------------------------- */
div.all > table { /* ページ全体 */
  width: 90%;
  height: auto;
  border: 0px #000000;
  border-spacing: 20px;
}

div.all td { /* ページ全体 */
  text-align: left;
  vertical-align: top;
  border: 5px ridge #2a5caa;
  background-color: #eeeeee;
  padding: 1em 1.5em;
}

/* -----------------------------------------------------------------------------
ページ区分けテーブル　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
リスト　ここから
----------------------------------------------------------------------------- */
ul{
  margin: 0 0 5px 0;
  padding: 0 0 0 1em;
}
ul.starmark {
  list-style-image: url("../img/starmark.gif");
  margin: 0 0 0 2.5ex;
  padding: 0;
}
ul.nomark {
  list-style-type: none;
  padding: 0 0 0 8px;
}
/* -----------------------------------------------------------------------------
リスト　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
テキスト全体　ここから
----------------------------------------------------------------------------- */
p { /* テキスト位置調整 */
  margin: 8px;
}

.caution { /* 注意書き */
  list-style-type: decimal;
}

div.textarea { /* 擬似テキストエリア */
  height: 200px;
  width: 100%;
  overflow: scroll;
  border: solid 1px #555;
}

pre { /* 文章そのまま表示の設定 */
  width: 100%;
  padding: 0;
  margin: 0;
  white-space: pre-line;
  color: #000;
  font-size: 100%;
  font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height: 145%;
}
/* -----------------------------------------------------------------------------
テキスト全体　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
見出し　ここから
----------------------------------------------------------------------------- */
h2.pti { /* ページタイトル */
  color: #ccffff;
  font-style: italic;
  font-family: "ＭＳ 明朝",serif;
  border-top:4px dotted #32cd32;
  border-bottom:4px dotted #32cd32;
  margin-top: 0.75em;
  margin-bottom: 1ex;
  padding: 1ex 1ex;
  text-shadow: 5px 5px 2px #fffafa, /* 影 */
               6px 6px 5px #000080, /* 影縁取り */
               4px 6px 5px #000080, /* 影縁取り */
               6px 4px 5px #000080, /* 影縁取り */
               4px 4px 5px #000080, /* 影縁取り */
               1px 1px 0 #87cefa, /* 文字縁取り */
               -1px 1px 0 #87cefa, /* 文字縁取り */
               1px -1px 0 #87cefa, /* 文字縁取り */
               -1px -1px 0 #87cefa; /* 文字縁取り */
}
/** text-shadow についてメモ
 * 左から順に、x座標のズレ、y座標のズレ、ぼかし具合、影の色で指定する。
 * 1px 1px 0 #000 という方なら右上の方向に1pxずつずらし、ぼかし無しの黒色で影を設定。
 * ,で区切ることで複数指定することができ、これを使うことで4つの方向にそれぞれ影を作り縁取り、
 * 一つの方向に影を作りその影にも更に縁取り……みたいなことが出来る。
 */

h3 {
  font-weight: 700; /* 文字の太さ */
  font-family: "さなフォン","ＭＳ ゴシック",sans-serif; /* フォントの指定 左ほど優先度が高い 一番最後はフォントグループの総称 */
  letter-spacing: 0; /* 文字間 */
  color: #00ffff; /* 文字色 */
  width: 100%; /* 幅 */
  height: 36px; /* 高さ */
  background-image: url("../img/headtitle.jpg"); /* 見出し背景 */
  background-size: 98.5% 36px;
  background-repeat: no-repeat; /* 繰り返し設定 */
  margin: 0; /* 余白（ボーダーラインより外側） */
  padding: 7px; /* 余白（ボーダーラインより内側） */
  text-shadow: 5px 5px 4px #0000cc, /* 影 */
               1px 1px 0 #0099ff, /* 文字縁取り */
               -1px 1px 0 #0099ff, /* 文字縁取り */
               1px -1px 0 #0099ff, /* 文字縁取り */
               -1px -1px 0 #0099ff; /* 文字縁取り */
}

h4.textarea-index { /* 擬似テキストエリア内の見出し */
  font-weight:bold;
  margin: 20px 5px 5px;
  padding: 1px 6px;
  border-bottom: 1px dotted #000000;
  border-left: solid 5px #c27b73;
}

h4.ht { /* 小見出しと文章の間隔 */
  border-top: 1px dotted #32cd32;  
  border-bottom: 1px dotted #32cd32;  
  margin: 0 0 3px;
  padding: 1ex 1ex;
}
/* -----------------------------------------------------------------------------
見出し　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
テキスト装飾　ここから
----------------------------------------------------------------------------- */

span.red {
  color: #0ff;
}

/* -----------------------------------------------------------------------------
テキスト装飾　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
画像　ここから
----------------------------------------------------------------------------- */
img#title {
  margin-top: 10px;
  padding-top: 10px;
}

img.mark {
  height: 13px;
  vertical-align: text-top;
  float: left;
  margin-top: 5px;
  margin-right: 0.5ex;
}

/* -----------------------------------------------------------------------------
モーダルウィンドウ　ここから
----------------------------------------------------------------------------- */
.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.3;
display: none\9;
}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block\9;
}
.modal-window:target {
display: block\9;
}
.modal-window .modal-inner {
position: absolute;
top: 50px;
left: 50%;
z-index: 20;
margin-left: -325px;
width: 650px;
overflow-x: hidden;
border-radius: 2px;
background: #fff;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.modal-window .modal-inner p {
padding: 0 20px;
}
.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 25px;
left: 50%;
z-index: 20;
margin-left: 285px;
background: #fff;
border-radius: 2px;
padding: 2px 8px;
font-size: 1.2em;
text-decoration: none;
text-indent: 0;
}
.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
/* -----------------------------------------------------------------------------
モーダルウィンドウ　ここまで

画像　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
未分類　ここから
----------------------------------------------------------------------------- */
.floatclear { /* 回り込み解除 */
  clear: both;
}

/* -----------------------------------------------------------------------------
未分類　ここまで
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
----------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------
メモ
---------------------------------------------------------------------------------
上メニューグラデーションは以下のとおり
#111 通常時のメインカラー
#222 通常時の上端のカラー
#000 通常時の下端のカラー
#2a2a2a マウスを載せた時のメインカラー
#3b3b3b マウスを載せた時の上端のカラー
#191919 マウスを載せた時の下端のカラー

http://0to255.com/
このサイトは指定したカラーを起点とした彩度を一覧化してくれるサイト。
http://www.color-sample.com/
こっちも色一覧。

以下ベンダープレフィクスメモ
-moz-		…… Firefox
-webkit-	…… Google Chrome、Safari
-o-		…… Opera
-ms-		…… Internet Explorer
所謂仮実装状態のもの。この接頭辞がないと動作しない物も多い（特にCSS3）。

▼▼このCSSで使われているCSS3の要素▼▼
opacity 要素の透過　○
transition 時間的変化　○
linear-gradient() 線形のグラデーション効果　×
background-size 背景画像のサイズ変更　○
text-shadow テキストの影　○
▲▲このCSSで使われているCSS3の要素▲▲
※文末のマークはベンダープレフィックスを使っていない状態での火狐ver26での動作
http://caniuse.com/
このサイトはCSS3、HTML5などの対応状況を示したサイト。
----------------------------------------------------------------------------- */