@charset "Shift_JIS";

/* 全称セレクタ--------------------------------------------- */
* {
margin:0;padding:0;
font:normal normal normal 12px/1.6 "Lucida Grande","Hiragino Kaku Gothic ProN",Meiryo,"メイリオ",sans-serif;
border:none;
}

/* 全体指定------------------------------------------------- */

body {
color:#444444;
text-align:center;
-webkit-text-size-adjust: 100%;
}

html {
scrollbar-arrow-color:#444444;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
}
/* スクロールバー指定が不要の場合は、スクロールバーのみ削除して下さい */

/* リンク--------------------------------------------------- */

a{text-decoration:none;font-size:100%;
font-weight: bold;}
a:link, a:visited {color:orange;}
a:active {color:#6fbad9;}
a:hover {color:#60615e;position:relative;top:1px;left:1px;}

/* 文字----------------------------------------------------- */

em {font-weight:bold;font-size:100%;}/* 強調 */
strong {font-weight:bold;font-size:100%;border-bottom:2px solid #cccccc;}/* より強い強調 */
ins {text-decoration:underline;font-size:100%;}/* 追加 */
del {text-decoration:line-through;font-size:100%;}/* 削除 */

/* その他--------------------------------------------------- */

ul li {list-style:none;}/* リストマーク非表示 */
hr {display:none;}/* ライン(非表示) */

/* 画像の周りに枠を付ける */
.img {border:1px solid #444444;}


/* ********************************************************* */
/* レイアウト */
/* ********************************************************* */


/* 全体(大枠) */
#wrapper {
width:764px;/* 横幅(画像横サイズ＋2pxで) */
text-align:left;
margin:0px auto 8px auto;/* 8pxは大枠下部の余白 */
padding:0px 5px 0px 5px;/* 大枠の中の余白 */
border-left:2px solid #cccccc;/* 大枠左ライン */
border-right:2px solid #cccccc;/* 大枠右ライン */
border-bottom:2px solid #cccccc;/* 大枠下ライン */
background:#ffffff;/* 大枠の中の背景色 */
}

/* ヘッダー */
#header {
margin:0px;
padding:0px;
position:relative;
}

/* メイン(1カラム用) */
#contents {
margin:0px 30px 0px 30px;/* ★ */
padding:20px 0px 0px 0px;
}

/* メイン(2カラム用) */
#main {
margin:0px 15px 0px 15px;/* ★ */
padding:0px;
}

/* フッター */
#footer {
clear:both;/* 2カラム用のfloat解除 */
text-align:center;
margin:0px auto;
padding:0px;
border-top:1px dashed #cccccc;
}

/* ページ下部の著作権表示 */
address {
color:#cccccc;
margin:0px 0px 20px 0px;
}


/* ********************************************************* */
/* ヘッダー */
/* ********************************************************* */


/* サイトタイトル------------------------------------------- */

ul#title {
margin:-5px 15px 10px 15px;/* ★ */
padding:0px;
}

ul#title li {display:inline;}/* 横並び */

/* タイトル全体の文字指定部分 */
ul#title li.site {
font-size:50px;
font-family:impact;
}

/* タイトル文字に色を付ける */
ul#title span.font {
color:#f68693;
font-size:100%;
font-family:impact;
}

/* コメントの部分 */
#header p.com {
font-size:100%;
line-height:130%;
position:absolute;
top:30px;
left:310px;/* ←サイトタイトルの長さに合わせて必ず調整して下さい */
}

/* トップ画像部分------------------------------------------- */

#header h1 {
font-size:130%;
text-align:center;
margin:-20px 0px 0px 0px;
padding:7px 0px;/* ドットラインと画像の間の余白 */
border-top:1px dashed #cccccc;
border-bottom:1px dashed #cccccc;
}


/* ********************************************************* */
/* メニュー */
/* ********************************************************* */

/* 見出し--------------------------------------------------- */

/* パンくずリスト------------------------------------------- */

ul#pan {
margin:-16px 10px 0px 0px;
padding:0px 0px;
text-align:right;
}

ul#pan li {display:inline;}/* 横並び指定 */

ul#pan li.pan01 a {
display:inline-block;
width:65px;
height:65px;
line-height:65px;
font-size:120%;
color:#ffffff;
letter-spacing:1px;
text-align:center;
background:#97c22d;
border-radius:65px; */
-moz-border-radius:65px; */
-webkit-border-radius:65px; */

}
ul#pan li.pan01 a:hover {background:#f68693;}

ul#pan li.pan02 a {
display:inline-block;
width:65px;
height:65px;
line-height:65px;
font-size:120%;
color:#ffffff;
letter-spacing:1px;
text-align:center;
background:#86d2e3;
border-radius:65px; */
-moz-border-radius:65px; */
-webkit-border-radius:65px; */
}
ul#pan li.pan02 a:hover {background:#f68693;}

ul#pan li.pan03 a {
display:inline-block;
width:55px;
height:55px;
line-height:55px;
font-size:120%;
color:#ffffff;
letter-spacing:1px;
text-align:center;
background:#8ed1e0;
border-radius:55px; */
-moz-border-radius:55px; */
-webkit-border-radius:55px; */
}
ul#pan li.pan03 a:hover {background:#f68693;}

/* ********************************************************* */
/* 共通(#contentsと#) */
/* ********************************************************* */


/* 見出し--------------------------------------------------- */

h2,h3.h4 {
color:#444444;
font-size:120%;
margin:0px 0px 15px 0px;
padding:0px 0px 0px 5px;
border-left:10px solid #cccccc;
}

/* アイコン付き見出し赤 */
h5 {
color:#f68693;
font-size:125%;
font-weight:bold;
line-height:16px;
margin:0px 0px 8px -12px;
padding:0px 0px 0px 20px;
background:url(img/icon-2.png) no-repeat left center;/* アイコン指定 */
}

/* アイコン付き見出し青 */
h6 {
color:#8ed1e0;
font-size:115%;
font-weight:bold;
line-height:16px;
margin:0px 0px 8px -12px;
padding:0px 0px 0px 20px;
background:url(img/icon-1.png) no-repeat left center;/* アイコン指定 */
}

/* 丸角見出し */
h7 {
width:180px;
height:42px;
line-height:22px;
background:#f68693;
color:#ffffff;
font-size:120%;
font-weight:bold;
letter-spacing:2px;
margin:0px 0px 0px -20px;/* -38pxで左側に飛び出させてます */
padding:0px 30px 0px 20px;
/* ↓丸角指定 */
border-radius:0 12px 12px 0;
-webkit-border-radius:0 12px 12px 0;
-moz-border-radius:0 12px 12px 0;
}

/* 丸角見出し */
h8 {
width:180px;
height:22px;
line-height:10 0 40px 0;
background:#69b8e3;
color:#ffffff;
font-size:120%;
font-weight:bold;
letter-spacing:2px;
margin:0px 0px 0px -18px;/* -38pxで左側に飛び出させてます */
padding:0px 30px 0px 15px;
/* ↓丸角指定 */
border-radius:0 12px 12px 0;
-webkit-border-radius:0 12px 12px 0;
-moz-border-radius:0 12px 12px 0;
}

/* P段落---------------------------------------------------- */

p {
font-size:110%;
line-height:130%;
margin:15px 0px 15px 0px;
padding:0px;
}

/* 段落内の文字を小さく */
p.text {
font-size:100%;
line-height:170%;
}

/* 下部余白少なめ */
p.none {
margin:0px 0px 5px 0px;/* 余白 */
}

/* 真ん中寄せ */
p.center {
text-align:center;
margin:0px 0px 10px 0px;/* 余白 */
}

/* 装飾BOX */
p.box1 {
color:#60615e;
margin:0px 5px 15px 1px;
padding:15px;
border:1px dashed #6fbad9;
background:#ffffff;
}
p.box2 {
color:#60615e;
padding:10px;
border:1px solid #f8888b;
background:url('img/back.gif');; margin-left:1px; margin-right:1px; margin-top:0px; margin-bottom:15px
}


/* リスト--------------------------------------------------- */

ul.list {
margin:0px 0px 10px 0px;
padding:0px;
list-style:disc inside;
}

ul.list li {
font-size:120%;
padding:0px;
list-style:square inside;
}

/* table■------------------------------------------------- */

table#dou {
	width: 100%;
	font-size:10pt;
}
table#dou th{
}

table#dou td{
	width: auto;
	padding:2px;
}
/* P段落 */
table#dou p {
padding:2px 0px 2px 10px;
border-left:3px solid #f39aab;/* 左にライン */
line-height:130%;
margin:0px 0px 2px 1px;/* 余白 */
}


/* 戻るリンク----------------------------------------------- */

ul.pagetop {
text-align:right;
margin:0px 0px 5px 0px;
}

ul.pagetop li {
display:inline;/* 横並び */
padding:0px 0px 0px 1px;
}


/* ********************************************************* */
/* #contents内(1カラム用) */
/* ********************************************************* */


/* gallery.html--------------------------------------------- */

#gallery {margin:0;padding:0;}

/* 見出し */
#gallery h2 {
color:#ffffff;
font-size:140%;
letter-spacing:1px;
margin:0px 0px 15px 0px;
padding:1px 5px 1px 5px;
background:#444444;
border:none;
}

/* P段落 */
#gallery p.title {
color:#444444;
font-size:140%;
margin:0px 1px 8px 1px;/* 余白 */
padding:0px 4px 0px 4px;
border-bottom:1px dashed #cccccc;
}

#gallery p {
font-size:120%;
line-height:140%;
margin:0px 1px 20px 1px;
padding:0px;
}

#gallery p.pict {
margin:0px 5px 15px 5px;
}

/* タイトルリスト */
#gallery ul.novellist {
margin:0px 5px 15px 5px;
padding:0px;
list-style:disc inside;
}

#gallery ul.novellist li {
font-size:120%;
padding:0px;
list-style:square inside;
}


/* ********************************************************* */
/* #main内(2カラム用) */
/* ********************************************************* */


/* #main内の左右BOX指定------------------------------------- */

/* メイン(文章の方) */
#main_main {
float:left;/* 左寄せ */
width:480px;
margin:0px;
padding:15px 15px 15px 0px;
border-right:1px dashed #cccccc;/* 縦ドットライン指定 */
}

/* サブ */
#main_sub {
float:right;/* 右寄せ */
width:210px;
margin:10px;
padding:15px 0px 15px 0px;
}

/* #main_main----------------------------------------------- */

/* 更新履歴 */
#main_main p.rireki {
height:55px;/* 縦幅 */
overflow:auto;
font-size:100%;
line-height:140%;
}

/* #main_sub------------------------------------------------ */

/* 見出し */
#main_sub .title {
color:#444444;
font-size:120%;
margin:0px 0px 10px 0px;
padding:0px 0px 0px 5px;
border-left:1px dashed #cccccc;/* 縦ドットライン指定 */
}

/* P段落 */
#main_sub p {
font-size:100%;
line-height:150%;
margin:15px 0px 15px 0px;
padding:0px;
}


/* ********************************************************* */
/* フッター */
/* ********************************************************* */


#footer p {
margin:15px 0px 8px 0px;
}

#footer ul {
margin:0px 0px 10px 0px;
}

#footer li {display:inline;/* 横並び */}

/* 境目ライン画像表示 */
#footer li.line {
margin:0px;
background:url(img/menu-line.gif) no-repeat center;
}


/* ********************************************************* */
/* 作品展示ページ */
/* ********************************************************* */


/* 展示頁共通←戻→リンク----------------------------------- */

ul.bottom {
padding:0px 0px 10px 0px;
text-align:center;
}

ul.bottom li {
display:inline;/* 横並び */
padding:0px 0px 0px 3px;
}

/* 展示頁共通フッター--------------------------------------- */

ul#foot {
width:80%;/* 横幅 */
margin:0px auto 30px auto;
padding:10px 30px;
border:3px solid #cccccc;/* 大枠 */
background:#ffffff;/* 大枠の中の背景色 */
}

#foot li {
display:inline;/* 横並び */
color:#444444;
font-size:90%;
padding:0px 0px 0px 3px;
}

/* イラスト展示--------------------------------------------- */

/* 全体 */
#pict {
text-align:center;
margin:10px auto;/* 大枠下部の余白 */
padding:20px 30px;/* 大枠の中の余白 */
border:3px solid #cccccc;/* 大枠 */
background:#ffffff;/* 大枠の中の背景色 */
}

/* タイトル */
#pict h1 {
color:#ffffff;
font-size:140%;
margin:0px 0px 8px 0px;
padding:1px 5px 1px 5px;
background:#444444;
}

#pict p {
margin:0px 0px 15px 0px;
padding:0;
}

/* コメント部分 */
#pict p.com {
line-height:140%;
margin:0px 0px 5px 0px;
padding:0;
}

/* テキスト展示--------------------------------------------- */

/* 全体 */
#novel {
width:80%;/* 横幅 */
text-align:left;
margin:10px auto;/* 大枠下部の余白 */
padding:20px 30px;/* 大枠の中の余白 */
border:3px solid #cccccc;/* 大枠 */
background:#ffffff;/* 大枠の中の背景色 */
}

/* タイトル */
#novel h1 {
color:#444444;
font-size:140%;
letter-spacing:1px;
margin:0px 0px 10px 0px;
padding:0px;
}

/* 文章部分 */
#novel p {
font-size:120%;
line-height:200%;
padding:20px 0px 80px 0px;/* 余白 */
}

/* コメント部分 */
#novel p.com {
color:#444444;
font-size:100%;
line-height:140%;
margin:10px 0px 10px 0px;/* 余白 */
padding:10px 10px;
border:3px double #444444;
background:#cccccc;
}

/* ページリンク */
#novel ul.page {
margin:0px 0px;
text-align:right;
}

#novel ul.page li {
display:inline;/* 横並び */
padding:0px 0px 0px 4px;
}

/**************************************************************************************
**************************************************************************************
≪ 忍者メールフォーム１ 600px ver. ≫

■ タイトル部分の背景色や、広告部分の背景色、枠線、フォーム入力部分の色などは
ある程度CSSの知識があれば変えられると思います。

■ 幅の変更、パーツ部分背景色（名前とか）などはフロートやマージン・パディングを
理解していないのなら触らないことがおすすめです。
サポートはしていません、自己責任でアレンジされてください。

■　対応パーツは、[ name ]　[ mail ]　[ url ]　[ title ]　[ textarea ]　[ answer ]　[ text ]
減らす場合はそのままご利用していただいて大丈夫です。
他のパーツを増やす場合は、CSSの追加で可能です。CSSの知識がある方のみ自力でアレンジして下さい。

■ 再配布はしないようお願いします。

http://karma7.blog.shinobi.jp/
KARMA7
**************************************************************************************
**************************************************************************************/


/**************************************************************************************
全体のデザイン
**************************************************************************************/
/*メールフォーム全体を囲っているタグのid*/
#ninja_mail{
	margin          : 0px;
	padding         : 0px;
	color           : #373737;
	font-size       : small;
	text-align      : left;
	width           : 700px;
	border          : 0px solid #000000;
}
/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#ninja_mail .main {
	background-color: #ffffff;
	padding-top     : 5px;
}
/*メールフォームのタイトルを囲っているタグのclass*/
#ninja_mail .title{
	background-color: #BBBBBB;
	padding         : 5px 10px;
	font-size       : 24px;
	font-weight     : bold;
}
/*メールフォームの説明文を囲っているタグのclass*/
#ninja_mail .explain {
	color           : #B6B6B6;
	font-size       : x-small;
	padding         : 2px 10px;
}
/**************************************************************************************
パーツのデザイン
**************************************************************************************/
/*パーツの表示名と入力項目を囲っているタグのclass*/
#ninja_mail .name_top,
#ninja_mail .mail_top,
#ninja_mail .url_top,
#ninja_mail .title_top,
#ninja_mail .textarea_top,
#ninja_mail .answer_top,
#ninja_mail .text_top{
	clear           : both;
	padding         : 2px 0 2px 10px;
}
/*パーツの表示名を囲っているタグのclass（[ 名前 ]の部分）*/
#ninja_mail .name_left,
#ninja_mail .mail_left,
#ninja_mail .url_left,
#ninja_mail .title_left,
#ninja_mail .textarea_left,
#ninja_mail .answer_left,
#ninja_mail .text_left{
	float           : left;
	width           : 120px;
}
/*パーツの入力項目を囲っているタグのclass*/
#ninja_mail .name_right,
#ninja_mail .mail_right,
#ninja_mail .url_right,
#ninja_mail .title_right,
#ninja_mail .textarea_right,
#ninja_mail .answer_right,
#ninja_mail .text_right{
	float           : right;
	width           : 560px;
}
/*パーツの入力項目のclass（inputなどの部分）*/
#ninja_mail .name_parts,
#ninja_mail .mail_parts,
#ninja_mail .url_parts,
#ninja_mail .title_parts,
#ninja_mail .answer_parts,
#ninja_mail .text_parts{
	font-size       : small;
	width           : 250px;
	border          : 1px dashed #D8D8D8;
}
#ninja_mail .textarea_parts{
	font-size       : small;
	width           : 95%;
	height          : 250px;
	border          : 1px dashed #D8D8D8;
}
/**************************************************************************************
ボタンのデザイン
**************************************************************************************/
/*メールフォームの送信ボタンを囲っているタグのclass*/
#ninja_mail .submit {
	clear           : both;
	padding         : 10px 0 0 140px;
}
/*メールフォームの送信ボタンのclass*/
#ninja_mail .submit_button {
}
/**************************************************************************************
エラーメッセージ
送信完了メッセージ
**************************************************************************************/
/*エラーメッセージを囲っているタグのclass*/
#ninja_mail .error,
#ninja_mail .result{
	padding         : 20px 0 0 10px;
	font-size       : 18px;
}
/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#ninja_mail .error_submit,
#ninja_mail .result_submit {
}
/*エラーメッセージのリトライボタンのclass*/
#ninja_mail .error_submit_button,
#ninja_mail .result_submit_button {
}
/**************************************************************************************
広告のデザイン
**************************************************************************************/
#shinobi_jp_text {
	padding-top     : 10px;
	width           : 100% !important;
	text-align      : center !important;
}
#karma7 a, #shinobi_jp_text a{
	text-decoration : none;
}
#karma7{
	font-size       : x-small;
	padding         : 2px 0;
	width           : 100%;
	text-align      : center;
}