@charset "shift_jis";	/* 文字コードの宣言。しないと日本語を使ったときバグが起きたりする。*/

/* スタイルシートでレイアウトするときは、ブラウザによって、「width」の値に「padding」や「border」を含んだり含まなかったり、デフォルトのインデントの値が違ったりとまちまちなので、取りあえず全ての「margin」と「padding」を消して、必要な要素にはそれぞれ「margin」と「padding」を入れていきます。*/
/* 全てのmarginとpaddingを0にする */
* {
	margin:0; padding:0;
}

body {

	_overflow:hidden;				/* スクロールバーを表示しない。
									　 表示する必要のある箇所では別個に
									　 _overflowを設定する。 */

	/*HTMLの背景色*/
/*	background-color : #FFFFFF;		/* 白*/
	background-color : #FEFEFE;		/* ほとんど白*/
/*	background-color : #fcfbff;		/* ラベンダーアイス*/
/*	background-color : #fffcf9;		/* 最淡パステルオレンジ */
/*	background-color : #fff9f9;		/* 最淡パステルレッド */
/*	background-color : #f9fff9;		/* 最淡パステルグリーン */


	/*HTML（本文）の文字色*/
    color :	#444477;    			/*	文字色　紺*/

	/*フォントサイズ*/
    font-size : 100%;
	
	/*スクロールバーの色 IE5.5以降のみ*/
	/*表面・背景は白、上下左右の端の色のみ指定すると立体でないスクロールバー*/
	/*上下左右の影の色を設定するとスクロール領域いっぱいのバーになる*/
	/*上下左右の影の色を設定しないとスクロール領域の中に箱があるイメージになる*/
	scrollbar-base-color:#ffffff;			/*スクロールバーの表面の色*/
	scrollbar-track-color: #ffffff;			/*スクロールバーの背景の色 */
	scrollbar-highlight-color:#ffffff;		/*左端と上端の影の色*/
	scrollbar-shadow-color:#ffffff;			/*右端と下端の影の色*/

	scrollbar-arrow-color:#8888ef;			/*スクロールボタンの矢印の色*/
	scrollbar-3dlight-color: #8888ef;   	/*左端と上端の色 */
	scrollbar-darkshadow-color: #8888ef;	/*右端と下端 */
}

/***************************************************************
	基本の段組。
	divを使ってメニュー部・本文部の2つのボックスから構成します。
	
	menubox…メニューフレーム部。あくまでメニュー部分全体の設定。
	mainbox…メイン部分。同じくメイン部全体の設定。
	
	menuLink…メニューの文章を記述するところ。枠内の設定はこちら。
	mainText…本文を記述するところ。小細工的な設定はこちらに記述すること。
	
	各部の設定（メニュー部のメニュー文字など）は別にclassで設定。
	
	#…id。id=""で指定。複数箇所指定しない部位に使用。
	.…class。calss=""で指定。<p><span>タグなどと同じように部分部分で使用。
*****************************************************************/
#menubox{
	margin : 0; 
	padding : 0; 

	height : 100%;
	width : 190px;					/* 横幅。*/

	/* cssハック　IEとその他のブラウザ用 */
	position: fixed;
	_position : absolute ; 			/* WIN IE用。
									 　absoluteにする限り、横スクロールには対応できない？
									 　あるいはJSでスクロール時に
									 　ポジションの書き換えをするか */
	overflow:auto;					/* CSSハックはしない。
									 　メニューを左に表示している限り、
									 　表示がおかしくなることはない。 */

	left : 0px;
	top : 15px;						/* 忍者広告のための下げ */
	
	z-index : 100;					/* 念のため最前面指定 */
	
	line-height: 180%;				/* 行間 */
}
/* メニューの設定 */
#menuLink{
	margin : 10px 10px 0 10px; 
	padding : 0 0 10px 1em;
/*	background-color : #fdeff2;		/* 背景色 ピンク*/
/*	background-color : #eaf4fc;		/* 背景色 月白*/
/*	background-color : #fffff9;		/* 背景色 ミルキーホワイト*/
/*	background-color : #f0f6da;		/* 背景色 ホワイトリリー*/
	background-color : #ffffe0;		/* 背景色 ファインタリーイエロー*/
/*	border : 2px dotted #ffb2b2;	/* 枠線色 オレンジ*/
	border : 2px dotted #bcbace;	/* 枠線色 ラベンダーグレイ*/
}

#mainbox{
	_overflow:auto;					/* メイン領域のスクロール
									 　CSSハックをはずすと、スクロールバー
									 　が右に2列表示されてしまう。 */
	margin : 0 0 0 13em;			/* メニュー部のwidthに合わせる */
	padding : 20px 0 0 0; 
	
	height : 100%;

	z-index : 1;					/* メイン領域はメニューより下 */
	
	line-height: 180%;				/* 行間 */
}
#mainText{
	margin : 20px;
	padding : 0;
	z-index : 100;
}

/* 更新履歴 */
#rireki{
	margin : 10px 10px 0 10px; 
	padding : 10px 0 10px 1em;
/*	background-color : #fdeff2;		/* 背景色 ピンク*/
/*	background-color : #eaf4fc;		/* 背景色 月白*/
/*	background-color : #fffff9;		/* 背景色 ミルキーホワイト*/
/*	background-color : #f0f6da;		/* 背景色 ホワイトリリー*/
	background-color : #ffffe0;		/* 背景色 ファインタリーイエロー*/
/*	border : 2px dotted #ffb2b2;	/* 枠線色 オレンジ*/
	border : 2px dotted #bcbace;	/* 枠線色 ラベンダーグレイ*/
}

/* メニューを隠すボタン */
#closeBtn
{
	cursor : pointer;
	text-align: center;
	
	width : 2em;
	height : 2em;
	margin : -2px; 
	padding : 0;
	
/*	background-color : #fdeff2;		/* 背景色 ピンク*/	
/*	border : 2px dotted #ffb2b2;	/* 枠線色 オレンジ*/
	border : 2px dotted #bcbace;	/* 枠線色 ラベンダーグレイ*/
}
#closeBtn:hover 	{ background-color: #d9e3eb;	}
/* メニューを表示するボタン */
#openBtn
{
	cursor : pointer;
	text-align: center;
	margin : 10px 10px 0 10px; 
	padding : 0;
	
	position : absolute ;
	top : 10px;
	left : 0px;

	width : 175px;
	
/*	background-color : #fdeff2;		/* 背景色 ピンク*/
/*	background-color : #eaf4fc;		/* 背景色 月白*/
	background-color : #ffffe0;		/* 背景色 ファインタリーイエロー*/
/*	border : 2px dotted #ffb2b2;	/* 枠線色 オレンジ*/
	border : 2px dotted #bcbace;	/* 枠線色 ラベンダーグレイ*/
}

/* テーブル要素 */
table{
	border-collapse : collapse;		/* 隣のセルの枠線と重ねて表示 */
/*	border: 2px solid #ff6600;		/**/
	border : 2px dotted #bcbace;	/* 枠線色 ラベンダーグレイ*/
}
table.infotbl{
	border-collapse : collapse;		/* 隣のセルの枠線と重ねて表示 */
	border: 0px none;
}
.tableTitle{
	padding : 10px;
	
	/**文字色*/
/*	color : #ff6600; /* 濃い目のオレンジ*/
	color : #666666; /* 薄い黒*/
    
	/*テーブル（タイトル）の中の背景色*/
/*		http://www.colordic.org/ranking.php		*/
/*	background-color : #fffaf0;		/* floralwhite 薄いオレンジ*/
/*	background-color : #eaf4fc;		/* 背景色 月白*/
	background-color : #ffffe0;		/* 背景色 ファインタリーイエロー*/
/*	background-color : #fffff9;		/* 背景色 ミルキーホワイト*/
/*	background-color : #f0f6da;		/* 背景色 ホワイトリリー*/
}
/* ドロップダウンリスト */
.dropdown{
	width: 130px;
}
td.pad_top{
	padding-top : 10px;
}
td.pad_left{
	padding-left : 10px;
}
td.pad_bottom{
	padding-bottom : 10px;
}
td.pad_right{
	padding-right : 10px;
}
/******************************************************
　　本文の装飾系
******************************************************/
/* 行間サイズ */
.largerline{ line-height: 150%;}
.defline { line-height: 100%; }
.minline { line-height: 50%;}
/* フォントサイズ */
.morelargefont { font-size : 170%;}
.largerfont { font-size : 130%;}
.minfont { font-size : 80%;}

/***** 文字装飾 *****/
 /* 下線 */
.underLine{ text-decoration : underline;}
.wUnderLine{ border-bottom: double;}
.dotLine{ border-bottom: dotted 2px;}
/* 太さ通常 */
.b0{ font-weight : normal;}
/* 太字 */
.b1{ font-weight : bold;}
.b2{ font-weight : bolder;}
/* 斜体 */
.i{ font-style : italic;}


/***** 区切り線(例：hr class="hr-text" data-content="区切り線の真ん中の文字"で使う) *****/
.hr-text {
	line-height: 1em;
	position: relative;
	outline: 0;
	border: 0;
	color: black;
	text-align: center;
	height: 1.5em;
	opacity: .5;
}
.hr-text:before {
	content: '';
	background: -webkit-linear-gradient(left, transparent, #818078, transparent);
	background: linear-gradient(to right, transparent, #818078, transparent);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
height: 1px;
}
.hr-text:after {
	content: attr(data-content);
	position: relative;
	display: inline-block;
	color: black;
	padding: 0 .5em;
	line-height: 1.5em;
	color: #818078;
	background-color: #fcfcfa;
}

/***** 色 *****/
 /* 文字色 */
.colorWhite{ color : #FFFFFF;}
.colorBlack{ color : #222222;}
.colorGray { color : #888888;}
.colorRed  { color : #ea5550;}
.colorBlue { color : #192f60;}
.colorYellow{ color : #ffdc00;}
.colorPurple{ color : #47266e;}
.colorLightPurple{ color : #ff60ff;}
.colorGreen { color : #00533f;}
.colorOrangeRed{ color : #FF4500;}
.colorLightSalmon{color : #FFA07A;}

 /* 背景色 */
.bgColRed{background-color    : #ffeaea;}
.bgColBlue{background-color   : #eaf4ff;}
.bgColBlack{background-color  : #222222;}
.bgColGray{background-color	  : #dcdcdc;}
.bgColYellow{background-color : #ffffef;}
.bgColPurple{background-color : #f4eaff;}
.bgColPurple2{background-color : #E1CBF7;}
.bgColGreen{background-color  : #eaffea;}
.bgColOrange{background-color : #fff7ef;}
.bgColLightPink{background-color : #fff4f4;}
.bgColLightSalmon{background-color : #FFA07A;}


/**** 範囲装飾 ****/
/* テキスト表示位置・左 */
.text_left{
	text-align: left;
}
/* テキスト表示位置・真ん中 */
.text_center{
	text-align: center;
}
/* テキスト表示位置・右 */
.text_right{
	text-align: right;
}
/* 引用部 */
.inyo{
	font-family : 'ＭＳ ゴシック';
	font-style : oblique ;			/* 斜め */
	padding : 0 0 0 2em;
}
blockquote{
	border: 1px solid #ccc; /* 枠線の色と太さ */
	padding: 10px; /* 引用文の内側の余白 */
	margin: 20px 0; /* 引用文の上下の余白 */
	font-style: italic; /* 斜体表示 */
	background-color: #f9f9f9; /* 背景色 */
	border-radius: 5px; /* 角を丸くする */
}

/* 強調表示 */
.kyocho{
	font-size : 130%;
	font-weight: bold;
	color : #ed6d3d;
	background-color : #e5fff2;
}
.kyocho_ColLess{
	font-size : 130%;
	font-weight: bold;
}

/* めっちゃ強調表示 */
.garish-text {
	font-size: 2em; /* 非常に大きなフォントサイズ */
	color: #ff4444; /* 黒色の文字 */
	background: linear-gradient(45deg, #ffd700, #ff8c00); /* 金色からオレンジ色へのグラデーション */
	padding: 20px; /* 広い内側の余白 */
	border: 5px solid #0000ff; /* 太い青色の枠線 */
	border-radius: 15px; /* 角丸 */
	text-shadow: 3px 3px 10px #ffff00; /* 黄色の強い影 */
}

/* 白抜き */
.shironuki{
	background-color: #222222;
	color: #fff;
	padding: 0 0.1em;
}

/* 取り消し線 */
.torikesi{
	text-decoration: line-through;
}

/* 下波線 */
.namisen{
	text-decoration: underline wavy #4d9bc1;
	text-underline-offset: 0.3em; 
}

/* つぶやきよう。 */
.tubuyaki{
	color : #9caeb7;
}
/* 段落を作る。 */
.danraku{
	padding : 0 0 0 2em;
}
.danraku2{
	padding : 0 0 0 1em;
}
/* インデント */
.indent{
	text-indent: 1em;
}
/** 枠(直線) */
.waku{
	display:inline-block;
	padding-top: 3px;				/* テキスト表示位置の指定 */
	padding-left: 8px;
	border-color: #555555;
	border-style: solid;
	border-width: 1px;
}
/** 枠(点線) */
.dotWaku{
	display:inline-block;
	padding-top: 3px;				/* テキスト表示位置の指定 */
	padding-left: 1em;
	border-color: #555555;
	border-style: dotted;
	border-width: 1px;
}
/** 枠(二重線) */
.wUnderLineWaku{
	display:inline-block;
	padding-top: 3px;				/* テキスト表示位置の指定 */
	padding-left: 8px;
	border-color: #555555;
	border-style: double;
	border-width: 3px;
}
.tapeWaku{
	display:inline-block;
	padding-top: 3px;
	padding-right: 5px;
	padding-left: 8px;
	background-color:#f4f4f4;/*背景色*/
	position:relative;
}
.maruwaku{
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

/** 枠線大*/
.borderLarge{
	border-width: 3px;
}
/** 枠用PREタグ */
.preWaku{
	white-space: pre-wrap;
	word-wrap: break-word;			/* IE用 */
}

/** AA表示用設定 */
.aa{
	font-family:'ＭＳ Ｐゴシック','ＭＳＰゴシック','MSPゴシック','MS Pゴシック';
	font-size:16px;
	line-height:18px;
	white-space: pre;
}

/***** 特殊系 *****/
.width_short{ width : 25%;}
.width_herf{ width : 50%;}
.width_long{ width : 75%;}


/***** タグ設定 *****/
/* <img>タグ */
img {
	border: none;	/* 画像にリンクを張ったときのボーダーを消す */
}

/* <a>タグ */
A			{ text-decoration:none;}
A:link 		{ color: #58ae78;	}	/**リンク */
/*A:link 		{ color: #8a2be2;	}	/**リンク 紫*/
/*A:link 		{ color: #043c78;	}	/**リンク 青紫*/
/*A:visited 	{ color: #add8e6;	}	/**既リンク*/
/*A:visited 	{ color: #9bb6c4;	}	/**既リンク 薄緑*/
A:visited 	{ color: #4496d3;	}	/**既リンク ゼニスブルー*/
A:active 	{ color: #8888bb;	}	/**クリック中のリンクテキスト 紅色*/
A:hover 	{ color: #ff4500;	}	/**マウスを乗せたとき 紅色*/


/***** システム設定 *****/

/* web拍手 */
.webClap{
	display: block;		/* "display: block;"でブロック要素にします。 これにしないと、クリックできないので注意して下さい。 */
	background-image: url("http://img.webclap.com/webclap/button/off.php?img=13");
	background-repeat: no-repeat;
	height : 57px;
	width : 69px;
	text-indent: -4096px;	/* アクセシビリティ上、タグ内に文字を書かないのは良くないので、このプロパティで、 HTMLタグ内では意味をなす文字列を記述させ、実際の表示では画面上から消すようにします。  */
}
/* じかんねぇー */
.noTime{
	display: block;
	background-image: url("./sozai/busy8831.gif");
	background-repeat: no-repeat;
	height : 31px;
	width : 88px;
	text-indent: -4096px;
}

/** Mozilla系列（Firefox etc）とIE の表示の差をなくす */
* { box-sizing : border-box}
* { -moz-box-sizing : border-box}


/* スクロールバー強制表示 */
.overflowScroll{
	_overflow:scroll;
	width : 100%;					/* スクロールバーのために必須 */
}

/* 忍者広告の表示位置設定。一番上右側 */
.tdftad {
	position:absolute; 
	top:0;
	right :20px;
}