/* 基本設定 ======================================================================================== */
/* クリーム色：#fff8dc　ベースの緑：#24936e　 濃い緑：#1e614b　薄い緑：#b1d1bd */
@charset 'UTF-8';

/* 全体設定 */
* { margin:0; padding:0; }
body { display:flex; background-color:#24936e; background:url(https://dara.sakura.ne.jp/wallpaper.gif); background-attachment:fixed; font-size:16px; line-height:1.6; font-family:"メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; }

/* メイン部分 */
main { width:80%; height:100vh; }

/* ナビゲーション部分 */
nav { position:fixed; top:0px; left:80%; width:20%; height:100vh; }

/* 下部余白 */
.BottomSpace { margin-bottom:50px !important; }




/* 左カラム =============================================================================== */
/* コンテンツ部分 */
/* box-sixing：要素の幅と高さにpaddingとborderを含める */
/* 上下30px余白、marginで右寄せ、左右に線を引く */
div#MainArea { box-sizing:border-box; width:80%; padding:30px 0px; margin:0 0 0 auto; border-style:solid; border-width:0px 2px 2px; background-color:#fff8dc; outline:none; }


/* 基本フォント */
p { padding:0px 10px 20px; }
a { color:#24936e; text-decoration:none; outline:none; }
a:visited { color:#24936e; text-decoration:none; }
a:hover, a:active { color:#000; text-decoration:none; }


/* 見出し */
h1 { padding:5px 10px; background:#1e614b; font-size:16px; font-weight:bold; color:#fff; }
h2 { padding:5px 10px; background:#b1d1bd; font-size:16px; font-weight:bold; color:#000; margin: 0.67em 0; }
h3 { padding:0px 10px; font-size:16px; font-weight:bold; }

/* 見出し内テキスト */
p.HF { padding:0px 10px; font-weight:bold; }
a.HF { color:#1e614b; text-decoration:none; word-wrap:break-word; }
a:visited.HF { color:#1e614b; text-decoration:none; }
a:hover.HF, a:active.HF { color:#000; text-decoration:none; }
/* h1内のリンクテキスト用 */
a.h1Link { color:#fff; text-decoration:none; border-bottom:0px; }


/* 画像 */
img { border:none; max-width:90%; height:auto; }
a.Image { text-decoration:none; border-bottom:0px; }


/* テキスト装飾 */
/* 左側スペース多め */
p.Contents { padding-left:30px; }
/* 小説（右側スペース作り） */
p.Novel { margin-right:5%; }
/* 権利表記 */
p#Copyright    { color:#666; font-size:12px; font-weight:bold; }


/* テーブル */
table { margin:10px 30px; border:solid 2px; width:90%; border-collapse:collapse; }
tr { backgorund-color:#fff8dc; }
tr:nth-child(even){ background-color:#d5e5d5; }
th { width:0; white-space:nowrap; font-weight:normal; padding:0 10px; background-color:#b1d1bd; border-top:solid 1px #fff8dc; }
th.header { border:solid 1px #000; color:#fff; background-color:#000; }
td { padding:0 10px; }
td.noclor { background-color:#fff8dc; }


/* トップに戻るやつ */
#page-top { display:block; position:fixed; bottom:20px; right:20px; }
#page-top a { display:block; background:#000; text-decoration:none; color:#fff; width:50px; padding:12px 0; text-align:center; border-radius:5px; }
#page-top a:hover { display:block; text-decoration:none; background:#333; }


/* 小説用div（通常版と縦書き版を横に並べる） */
div#NovelListArea { display:flex; }



/* 右側（メニュー） ======================================================================================== */

/* サイト名 */
div#Title { height:50px; }
a#Title { color:#000; text-decoration:none; border-bottom:0px; margin:10px; font-size:26px; font-weight:bold; line-height:50px; }
a:visited#Title { color:#000; text-decoration:none; border-bottom:0px; }
a:hover#Title, a:active#Title { color:#b1d1bd; text-decoration:none; border-bottom:0px; }


/* メニュー部分 */
div.MenuSec { padding:5px 15px; color:#eee; border-bottom:0px; background-color:#000; }

li { list-style-type:none; }

a.Menu { display:block; padding:5px 0px 5px 40px; background-color:#1e614b; color:#eee; text-decoration:none; border-bottom:#000 solid 1px; border-left:#000 solid 1px; outline:none; }
a.Menu:visited { text-decoration:none; border-bottom:#000 solid 1px; border-left:#000 solid 1px; }
a.Menu:hover, a.Menu:active { text-decoration:none; border-bottom:#000 solid 1px; border-left:#000 solid 1px; opacity:0.5; }

/* Slicknavはスマホ用画面でのみ表示 */
.slicknav_menu { display:none; }


/* スマホ対応 ====================================================================================== */
@media screen and (max-width:640px){

body { padding:0; flex-direction:column; }

/* 枠の変更 */
nav { width:100%; height:auto; overflow-x:visible; overflow-y:visible; }
main { width:100%; }

div#MainArea { box-sizing:border-box; width:100%; margin-bottom:50px; padding:30px 0px; overflow-y:hidden; border-style:solid; border-width:0px 0px 2px 0px; background-color:#fff8dc; outline:none; }


/* テーブル */
table { margin-left:10px; margin-right:10px; }
table.status { width:90%; table-layout:fixed; }
th { width:auto; white-space:normal; font-weight:normal; padding:0 10px; background-color:#b1d1bd; border-top:solid 1px #fff8dc; }


/* メニュー部分 */
div#Title { display:none; }
ul#menu { display:none; }
span.triangle { display:none; }
.slicknav_menu { display:block; }

div.MenuSec { padding:0; color:#eee; border-bottom:0px; background-color:transparent; }
a.Menu { display:block; padding:0; background-color:transparent; color:#eee; text-decoration:none; border-bottom:none; outline:none; }
a.Menu:visited { text-decoration:none; border-bottom:none; }
a.Menu:hover, a.Menu:active { text-decoration:none; border-bottom:none; opacity:0.5; }
}