/* −−−−−−−−−−−−−−−−−−−−
ガラケー向けデザインはALICE+の【配色の設定】のみで色を付けています。あとはhtml【デザイン編集】に直接装飾を施しています
↓【配色の設定】は以下のように【色コードで指定】して下さい

★【リンク色】：テーマカラー（#ff7d7d　薄紅）
★【既読リンク色】：テーマカラー or #999999（白背景に溶け込まない色で）

その他の項目はすべて【色コードで指定済】にして、テキストボックスは空欄にして下さい
【配色の設定】の背景色をベージュにすると、ガラケーでは本文も全てベージュ背景になります（＝読みづらくなる）
−−−−−−−−−−−−−−−−−−−− */

/* リセットCSS。分からなければ触らないで下さい */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,img,a,ul,li{
margin:0;
padding:0;
border:0;
font-size:16px;
font-weight: normal;
font: inherit;
vertical-align:baseline;
}

/* −−−−−−−−−−−−−−−−−−−−
ページ全体の余白設定＝画面端からメインコンテンツまでの距離
メインコンテンツ＝『タブ風メニュー』『本文』『フッターメニュー』の三段の総称
−−−−−−−−−−−−−−−−−−−−

『本文』文字サイズ:14px
（↑下部ALICE+リンクの文字サイズと同じ）
『本文』以外の行間はline-height:1、（タブの見た目制御用）
『本文』はline-height:1.7;
『下部ALICE+リンク』はALICE+側でfont-size:14pxに固定されています。
『下部ALICE+リンク』の行間はline-height:2.2
↑はALICE+リンクのタップ領域を、余白合わせて最低40px程度設けたかったからです（ALICE+リンクをタップしづらくすると規約違反になります）

−−−−−−−−−−−−−−−−−−−− */
body{
margin:10px 0; /* ページ全体の余白設定 */
line-height:1;
background-color:#bcafa7;/* 背景色：ベージュ */
text-align: center;
}
.wrap{
max-width: 600px;/* 幅は最大で600px */
text-align:left;/* ここは変えないこと */
margin: 0 auto;/* ここは変えないこと */
}
.wrap{
margin-top:20px;/* 更新履歴記事を並べる為の余白 */
}
/* −−−−−−−−−−−−−−−−−−−−
メインコンテンツの本文（小説のテキスト部分） */
.main{
color:#000000;
background-color:#ffffff;
line-height:1.7;/* 行間 */
padding:6px 12px;/* 内側余白の上下px 左右px */
font-size:14px;/* 『本文』文字サイズ */
}
/* −−−−−−−−−−−−−−−−−−−−
見出し部分の装飾 */

h1{ font-size:150%; }/* サイトタイトル */
h2{ font-size:125%; }/* informationとか */

/* −−−−−−−−−−−−−−−−−−−− *//* −−−−−−−−−−−−−−−−−−−−
■ページ全体のリンク■
白背景のコンテンツ内のリンク色。
※ガラケーのリンク色は【配色の設定】で設定
※下部ALICE+リンクの配色はCSS最下部に別項で設定
小説ごとにリンクの文字色を変える場合はここのカラーコードを変更
−−−−−−−−−−−−−−−−−−−− */

a:link{
text-decoration:none;/* 下線を消す */
color:#000000;/* 未訪問リンク：薄紅 */
}
a:visited{ color:#999999; }/* 訪問済み：薄紅 */
a:hover{ color:#000000; /* オンマウスとタップで：黒 */ }
a:active{ color:#000000; }/* 選択中：黒 */


/* なお、タブ内テキストリンク装飾は別項。後述
−−−−−−−−−−−−−−−−−−−−− */


/* −−−−−−−−−−−−−−−−−−−−
タブ風メニューとフッターメニュー
−−−−−−−−−−−−−−−−−−−−− */

/* リストの先頭マークを消し、リストの余白を消し、テーブルのように並べる */
ul{
display:table;
table-layout: fixed;/* タブの幅を均等にする */
list-style:none;
font-size:0;
background:#bcafa7;/* タブ・フッター置き場背景ベージュ */
width: 100%;
}

/* リスト（＝『タブ』『フッターブロック』）の装飾 */
li{
display:table-cell;/* タブ・フッターをテーブルセル状に横並び */
background:#bcafa7;/* タブの無い空間はベージュ */
font-size:12px;/* タブ・フッターの文字サイズ */
vertical-align:bottom;/* タブ文字をボックス下揃えに */
text-align:center;/* 文字をボックス中央に */
line-height:20px;/* 黒背景の高さ */
}

/* 『フッターブロック』は改行しても全ての行が上に揃う */

.foot li{
vertical-align:top;/* 文字をボックス上揃えに */
}

/* −−−−−−−−−−−−−−−−−−−−
現在表示しているページの『タブ』背景色：白
文字色は【配色の設定：文字色】の設定が継承されます。何も色コードを指定していないため↓はデフォルトの文字色#000000黒ですが、color:#お好きな色;を書き足してここだけ変更可能 */

li.selected {
background-color:#ffffff;
}

/* −−−−−−−−−−−−−−−−−−−−
更新履歴の日付部分＆フッター下部『カウンター』など
リンク無しテキストだけの黒いボックス
それからフッターメニューの余白を黒く埋める
背景色：濃灰、文字色：白
−−−−−−−−−−−−−−−−−−−− */

li.kuro{
background-color:#444444;
color:#ffffff;/* 文字は白 */
}

/* −−−−−−−−−−−−−−−−−−−−
現在表示しているページの『タブ（白背景）』の中のリンク装飾
小説ごとにリンク文字色を変える場合ここのカラーコードも変更
一応フッターリンク部分でも『選択中タブ（白背景）』を使う可能性を考慮しました
−−−−−−−−−−−−−−−−−−−− */

.tab li.selected a{
display: inline;/* リンクをテキストリンクに戻す */
background-color:#ffffff;/* リンクの背景色 */
color:#8CD3E5;/* リンク文字色：薄紅 */
border-bottom:1px dashed #8CD3E5;/* 下に破線：薄紅を引く */
}
/* 上と同じ。オンマウスとタップで文字色変化 */
.tab li.selected a:hover{
background-color:#ffffff;/* リンクの背景色 */
color:#36BDDF;/* リンク文字色：黒 */
border-bottom:1px dashed #36BDDF;/* 下に破線を引く。hover時に色を変えないつもりならこの一行は消して可 */
}

.foot li.selected a{
display: inline;/* リンクをテキストリンクに戻す */
background-color:#ffffff;/* リンクの背景色 */
color:#8CD3E5;/* リンク文字色：薄紅 */
border-bottom:1px dashed #8CD3E5;/* 下に破線：薄紅を引く */
}
/* 上と同じ。オンマウスとタップで文字色変化 */
.foot li.selected a:hover{
background-color:#ffffff;/* リンクの背景色 */
color:#36BDDF;/* リンク文字色：黒 */
border-bottom:1px dashed #36BDDF;/* 下に破線を引く。hover時に色を変えないつもりならこの一行は消して可 */
}

/* −−−−−−−−−−−−−−−−−−−−
未選択のタブっぽい部分と、コンテンツ最下部のリンク装飾
リンク領域をブロック一杯にして背景は濃灰、文字色白
hoverでリンク領域背景を薄灰色に変える
−−−−−−−−−−−−−−−−−−−− */

.tab li a,.foot li a{
background-color: #444444;
color:#ffffff;
display: block;
width: 100%;
height:100%;
}
.tab li a:hover,.foot li a:hover{
background-color: #666666;/* 背景を薄灰に */
}/* −−−−−−−−−−−−−−−−−−−−
■小説リストリンク■
タップしやすいように行間を大きめに空け（2.2倍）
リンク一つ一つ同士の余白paddingを5pxで設定しています
『タイトルの右』に全角スペースを入れて５の倍数で改行、という使い方前提にしています
−−−−−−−−−−−−−−−−−−−− */

.list{
font-size: 14px;
line-height:2.2;
}

.list a{
padding:5px;
letter-spacing: 0.1em;/* 字間が14pxの0.1倍空く */
}

.list a:visited{ color:#999999; }/* 小説リスト既読灰色 */

.list a:active,.list a:hover{
color: #000000;/* オンマウスで文字を黒に */
}



/* −−−−−−−−−−−−−−−−−−−−
フォーム部品（名前変換や拍手の入力フォーム）

1pxの線（濃灰色）の枠線と文字に、白背景
−−−−−−−−−−−−−−−−−−−− */

input[type="submit"],input[type="text"],button,textarea,select {
width: auto;
background: none;
border: 1px solid #444444;
border-radius: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: none;
-webkit-box-shadow: none;
margin: 4px;
padding: 4px;
color: #444444;
}

/* −−−ボタンとテキストエリア
背景色：白／文字色：濃灰
ボタンにオンマウスで文字と枠線が薄灰色に */

input[type="submit"]{
background-color: #ffffff;
}
input[type="submit"]:hover{
color: #ffffff;
border-color:#666666;
background-color: #666666;
}

/* −−−入力フォームの横幅はALICE+独自タグで設定して下さい
大きなサイズにしすぎても、maxで画面の80％までしか広がりません
フォーム部品が画面からはみ出して横スクロールが発生しないようにです */

input[type="text"], textarea {
background-color: #ffffff;
max-width:80%;
}

textarea { line-height: 1.2; }

/* −−−セレクトボックス（章ジャンプなど） */
select {
background-color: #ffffff;
}

/* −−−−−−−−−−−−−−−−−−−−
↓拍手フォームだけ配色を変える
−−−−−−−−−−−−−−−−−−−− */


/* −−−ボタンとテキストエリア
背景色：濃灰／文字色：白
ボタンにオンマウスで文字と枠線が薄灰色に */
.clap input[type="text"],.clap input[type="submit"],.clap textarea,.clap select{
color:#ffffff;
background: #444444;
border: 1px solid #444444;
}
.clap input[type="submit"]:hover{
background: #666666;
border-color:#666666;
}/* −−−−−−−−−−−−−−−−−−−−
※【下部ALICE+リンク】※

背景色と同化してしまうのを避けるために、文字色を黒に変更
font-size:14pxはALICE+側で固定されています
タップしやすいよう、テキストリンク中心から半径16px以内には他のリンク領域を被らせないようにしています
14×2.2＝30.8pxのリンク挿入行周囲に10pxの余白……という指定
−−−−−−−−−−−−−−−−−−−− */

footer{
line-height:2.2;
margin:10px 0;
}
footer a:link,footer a:visited{ color:#000000; }
footer a:hover,footer a:active{ color:#444444; }