@charset "UTF-8";

/*------------------------------------------
BASE
-------------------------------------------*/

* 
	{
	margin:0;
	padding:0;
	font-family: Arial;
	letter-spacing:0.1em;
	}




body
	{
	background:url(img/body_bg.gif) #F5F5F4 center top repeat-x;
	font-size:12px;
	line-height:140%;
	color:#4b4b4b;
	}

a
	{
	color:#1198BB;
	}

a:hover
	{
	color:#c7c7c7;
	}
img
	{
	border:none;
	}

hr
	{
	clear:both;
	width:0px;
	height:0px;
	}


/*------------------------------------------
CONTAINER
-------------------------------------------*/

#container
	{
	width:820px;
	margin:0 auto;
	background:url(/img/container_bg.gif) center top repeat-y;	
	position:relative;

	}

/*------------------------------------------
BANNER
-------------------------------------------*/

#header
	{

	width:820px;
	height:153px;
	float:left;
	margin:0 auto;
	background:url(/img/banner_bg.gif)  center top no-repeat;
	}

#header h1
	{
	margin:0;
	padding:0;
	float:left;
	height:108px;
	}

#header h1 a
	{
	position:absolute;
	top:10px;
	left:10px;
	display:block;
	float:left;
	width:340px;
	height:90px;
	text-indent:-9999px;
	}

#h-right
	{
	float:left;
	}

#header h2
	{
	height:40px;
	overflow:hidden;
	padding:0;
	margin:20px 20px 0px 390px;
	font-size:12px;
	line-height:120%;
	font-weight:normal;
	}


/*------------------------------------------
MAIN__SEARCH
-------------------------------------------*/

#search
	{
	margin:0px 0px 0px 340px;
	text-align:center;
	}

#search-inner
	{}

#search-inner input
	{
	margin-top:5px;
	}


/*------------------------------------------
BANNER MENU
-------------------------------------------*/
#header ul
	{
	position:absolute;
	top:110px;
	left:0px;
	width:820px;
	height:31px;
	margin:8px 0 0 0;
	list-style:none;
	}


#header ul li
	{
	text-indent:-9999px;
	margin:0;
	padding:0;
	display:inline;
	}

#header ul li a
	{
	float:left;
	}

#header li#home a
	{width:76px;height:31px;}

#header li#about a
	{width:214px;height:31px;}

#header li#sample a
	{width:184px;height:31px;}

#header li#login a
	{width:137px;height:31px;}

#header li#faq a
	{width:90px;height:31px;}

#header li#mail a
	{width:119px;height:31px;}

#header li#home a:link,#header li#home a:visited
	{background:url(/img/menu_home.gif) 0 0;}

#header li#about a:link,#header li#about a:visited
	{background:url(/img/menu_about.gif) 0 0;}

#header li#about a:link,#header li#about a:visited
	{background:url(/img/menu_about.gif) 0 0;}

#header li#sample a:link,#header li#sample a:visited
	{background:url(/img/menu_sample.gif) 0 0;}

#header li#login a:link,#header li#login a:visited
	{background:url(/img/menu_login.gif) 0 0;}

#header li#faq a:link,#header li#faq a:visited
	{background:url(/img/menu_faq.gif) 0 0;}

#header li#mail a:link,#header li#mail a:visited
	{background:url(/img/menu_mail.gif) 0 0;}

#header li#home a:hover,#header li#home a:focus
	{background:url(/img/menu_home.gif) 0 31px;}

#header li#about a:hover,#header li#about a:focus
	{background:url(/img/menu_about.gif) 0 31px;}

#header li#sample a:hover,#header li#sample a:focus
	{background:url(/img/menu_sample.gif) 0 31px;}

#header li#login a:hover,#header li#login a:focus
	{background:url(/img/menu_login.gif) 0 31px;}

#header li#faq a:hover,#header li#faq a:focus
	{background:url(/img/menu_faq.gif) 0 31px;}

#header li#mail a:hover,#header li#mail a:focus
	{background:url(/img/menu_mail.gif) 0 31px;}



#header li#download a
	{width:176px;height:31px;}

#header li#download a:link,#header li#download a:visited
	{background:url(/img/add_dl.gif) 0 0;}

#header li#download a:hover,#header li#download a:focus
	{background:url(/img/add_dl.gif) 0 31px;}
	
#header li#authorinfo a
	{width:136px;height:31px;}

#header li#authorinfo a:link,#header li#authorinfo a:visited
	{background:url(/img/author_info.gif) 0 0;}

#header li#authorinfo a:hover,#header li#authorinfo a:focus
	{background:url(/img/author_info.gif) 0 31px;}

#header li#authortop a
	{width:117px;height:31px;}

#header li#authortop a:link,#header li#authortop a:visited
	{background:url(/img/author_top.gif) 0 0;}

#header li#authortop a:hover,#header li#authortop a:focus
	{background:url(/img/author_top.gif) 0 31px;}

#header li#steptop a
	{width:182px;height:31px;}

#header li#steptop a:link,#header li#steptop a:visited
	{background:url(/img/step_top.gif) 0 0;}

#header li#steptop a:hover,#header li#steptop a:focus
	{background:url(/img/step_top.gif) 0 31px;}
	

#header li#wlogout a
	{width:182px;height:31px;}

#header li#wlogout a:link,#header li#wlogout a:visited
	{background:url(/img/logout.gif) 0 0;}

#header li#wlogout a:hover,#header li#wlogout a:focus
	{background:url(/img/logout.gif) 0 31px;}
	
	
#header li#base a
	{width:150px;height:31px;
	background:url(/img/menu_base.gif) 0 0;
	}

	
/*------------------------------------------
WRAP
-------------------------------------------*/

#wrap
	{
	width:820px;
	}


/*------------------------------------------
MAIN
-------------------------------------------*/

#main
	{
	float:left;
	width:900px;
	}

.gotop
{
text-align:right;
padding:10px 30px 0 0;
}


/*------------------------------------------
MAIN__WHAT'S NEW
-------------------------------------------*/

#newmain h3
	{
	background:url(/img/whatsnewmain.gif) left top no-repeat;
	width:556px;
	height:35px;
	text-indent:-9999px;
	margin:13px 8px 5px 8px;
	padding:0;
	}

#newmain ul
	{
	margin:0 10px 10px 20px;
	padding:0;
	list-style:none;
	}

#newmain ul li
	{
	background:url(/img/newlist_icon.gif) left center no-repeat;
	padding:2px 5px 3px 20px;
	}



/*------------------------------------------
MAIN__STEP_NEW_ENTRY
-------------------------------------------*/


#step_new
	{
	width:555px;
	margin:0px 20px 0px 15px;
	}

#step_new h3
	{
	height:44px;
	background:url(/img/step_new_h3.gif) 0 0 no-repeat;
	text-indent:-9999px;
	margin-bottom:5px;
	}

.step_new_entry
	{
	float:left;
	}

.step_new_entry table
	{
	width:530px;
	letter-spacing:0px;
	border: 2px dotted #CAD9E1; 
	border-collapse: collapse;
	}

.step_new_entry table tr
	{
	border: 2px dotted #CAD9E1; 
	}

.step_new_entry table td
	{
	padding:10px;
	background:url(/img/new_bg.gif);
	}

.step_new_entry table td.bg_yellow
	{
	background:none;
	padding:12px;
	}

.more
	{
	vertical-align:top;
	}


/*------------------------------------------
MAIN__STEP_RECOMMEND_ENTRY
-------------------------------------------*/

#step_recommend
	{
	width:555px;
	margin:20px 20px 10px 15px;
	clear:both;
	}

#step_recommend h3
	{
	height:44px;
	background:url(/img/step_recommend_h3.gif) 0 0 no-repeat;
	text-indent:-9999px;
	margin-bottom:5px;
	}

.step_recommend_entry table
	{
	width:530px;
	border:2px dotted #FADDDD;
	border-collapse: collapse;
	letter-spacing:0px;
	}

.step_recommend_entry table tr
	{
	border:2px dotted #FADDDD;
	}

.bg_red
	{
	background:url(/img/reco_bg.gif);
	padding:12px;
	}

.bg_yellow
	{
	background:none;
	padding:12px;
	}


/*------------------------------------------
SIDE
-------------------------------------------*/

#side
	{
	float:left;
	width:220px;
	margin-top:8px;
	}

.side_inner,
.side_inner_rank,
.side_inner_new h3
	{
	margin-left:px;
	padding:0;
	}


#side ul
	{
	margin:10px 10px 10px 20px;
	padding:0;
	list-style:none;
	}

.side_inner ul li
	{
	background:url(/img/list_icon.gif) left center no-repeat;
	padding:2px 5px 3px 20px;
	}

.side_inner h3,
.side_inner_rank h3,
.side_inner_new h3
	{
	text-indent:-9999px;
	margin-left:10px;
	padding:0;
	}

h3#author
	{
	background:url(/img/author.gif) left top no-repeat;
	width:220px;
	height:52px;
	}

h3#author a
	{
	display:block;
	width:220px;
	height:52px;
	}

h3#login
 {
 background:url(/img/login.gif) left top no-repeat;
 width:220px;
 height:52px;
 }

h3#category
	{
	background:url(/img/category.gif) left top no-repeat;
	width:219px;
	height:35px;
	}

h3.rank
	{
	background:url(/img/rank.gif) center top no-repeat;
	width:219px;
	height:35px;

	}

.lavel
	{
	display:block;
	margin:5px 5px 0 23px;
	}

.rank1
	{
	background:url(/img/rankicon_1.gif)  no-repeat;
	background-position:0 4px;
	padding:5px 5px 10px 24px;
	}

.rank2
	{
	background:url(/img/rankicon_2.gif)  no-repeat;
	background-position:0 4px;
	padding:5px 5px 10px 24px;
	}

.jyuni1
	{
	display:block;
	font-weight:bold;
	color:#F46E64;
	}


.jyuni2
	{
	display:block;
	font-weight:bold;
	color:#F9C802;
	}


h3#new
	{
	background:url(img/whatsnew.gif) left top no-repeat;
	width:219px;
	height:35px;
	}

.side_inner_new ul li
	{
	background:url(img/newlist_icon.gif) left 3px no-repeat;
	padding:2px 5px 3px 20px;
	}


/*------------------------------------------
FOOTER
-------------------------------------------*/

#footer
	{
	clear:both;
	width:820px;
	height:100px;
	margin:0 auto;
	background:url(/img/footer.gif) center bottom no-repeat;
	}

#footer ul
	{
	list-style:none;
	margin:0;
	padding:35px 10px 0 350px;
	}

#footer ul li
	{
	float:left;
	background:url(/img/arrow.gif) left center no-repeat;
	padding:5px 20px 3px 13px;
	}

#footer a,
#footer_1colum div
	{
	text-decoration:none;
	color:#9DB613;
	}

#footer a:hover,
#footer_1colum div
	{
	color:#ccc;
	}

#footer div,
#footer_1colum div
	{
	clear:both;
	padding:15px 0 0 15px;
	font-size:10px;
	color:#333;
	}





/*------------------------------------------
ABOUT_ABOUT_TOP
-------------------------------------------*/

.about_top h3,
#about_use h3
	{
	background:url(/img/main_h3.gif) left top no-repeat;
	width:536px;
	margin:20px 8px 5px 8px;
	padding:10px 10px 5px 10px;
	color:#60B0C4;
	font-size:12px;
	clear:both;
	}

.inner
	{	
	width:500px;
	margin:20px 30px 0px 30px;
	padding-bottom:20px;
	line-height:160%;
	}

.inner ul
	{
	margin:10px 20px 20px 40px;
	list-style:none;
	}

.inner ul li
	{
	background:url(/img/mainlist_icon.gif) left center no-repeat;
	padding:5px 20px 2px;
	}

li#noicon
	{
	background:none;
	padding:5px 20px 2px;
	}
	
.inner p
	{
	padding:10px 0;
	}

.about_top_img
	{
	margin-left:10px;
	}



/*------------------------------------------
ABOUT_ABOUT_USE
-------------------------------------------*/

.about_use_des,
.about_use_des2
	{
	width:500px;
	clear:both;
	margin-bottom:20px;
	}

.about_use_des img,
.img_left
	{
	float:left;
	margin:5px 25px 0px 0px;
	}

.about_use_des p,
.about_use_des2 p,
.about_use_des2 img
	{
	padding:10px 0;
	}


/*------------------------------------------
ABOUT_AUTHOR_USE
-------------------------------------------*/

.author_img1
	{
	padding-bottom:20px;
	}

.author_use_des
	{
	width:500px;
	clear:both;
	margin-bottom:10px;
	background:url(/img/about/arrow.gif) left 45px no-repeat;
	}

.author_use_des2
	{
	width:500px;
	clear:both;
	margin-bottom:10px;
	}

.author_use_des img,
.author_use_des2 img
	{
	float:left;
	margin:0px 30px 10px 0px;
	}

.author_use_des p,
.author_use_des2 p
	{
	padding:10px 0 10px 60px;
	}

.about_top dt
	{
	background:url(/img/mainlist_icon.gif) left center no-repeat;
	padding:5px 20px 2px;
	margin:10px 0;
	color:#9CBC06;
	font-weight:bold;
	}

.about_top dd
	{
	margin-bottom:20px;
	margin-left:20px;
	}


/*------------------------------------------
SAMPLE
-------------------------------------------*/

#sample_div
	{
	width:700px;
	margin:20px 0;
	}

#sample_div p
	{
	margin:15px 0;
	}

#h2_sample
	{
	font-size:14px;
	color:#ed5268;
	font-weight:bold;
	}

#h3_sample
	{
	margin:5px 0;
	font-size:12px;
	}

.article_info
	{
	margin:10px 0;
	border:1px dotted #BFBFBF;
	padding:10px;
	}

.blockm
	{
	clear:both;
	padding:20px;
	background:url(/img/1colum_line.gif) center top no-repeat;
	}

.blockm table
	{
	padding:10px;
	width:600px;
	margin-left:auto;
	margin-right:auto;
	background:url(/img/new_bg.gif);
	border:2px dotted #CAD9E1;
	}


.sample_rss
	{
	float:right;
	width:160px;
	text-align:center;
	}

.sample_rss a
	{
	text-decoration:none;
	}


/*------------------------------------------
1COLUM_CONTAINER
-------------------------------------------*/

#container_1colum,
#container_writer
	{
	width:820px;
	margin:0 auto;
	background:url(/img/1colum/container_bg.gif) center top repeat-y;
	position:relative;
	}


/*------------------------------------------
1COLUM_BANNER
-------------------------------------------*/

#container_1colum #header
	{

	width:820px;
	height:153px;
	float:left;
	margin:0 auto;
	background:url(/img/1colum/banner_bg.gif)  center top no-repeat;
	}

/*------------------------------------------
1COLUM_BANNER
-------------------------------------------*/

#container_writer #header
	{

	width:820px;
	height:153px;
	float:left;
	margin:0 auto;
	background:url(/img/writer/banner_bg.gif)  center top no-repeat;
	}


/*------------------------------------------
1COLUM_MAIN
-------------------------------------------*/

#container_1colum #main,
#container_writer #main
	{
	float:right;
	width:750px;
	margin:20px auto 10px 10px;
	}

/*------------------------------------------
1COLUM_MAIN2
-------------------------------------------*/

#container_1colum #main2,
#container_writer #main2
 {
 float:right;
 width:800px;
 margin:30px auto 10px auto;
 }

#container_1colum #main2 table
{
border-collapse:collapse;
}

#container_1colum #main2 table td
{
padding:5px;
}

/*------------------------------------------
1COLUM_FOOTER
-------------------------------------------*/

#footer_1colum,
#footer_writer
	{
	clear:both;
	width:820px;
	height:80px;
	margin:0 auto;
	background:url(/img/1colum/footer.gif) center top no-repeat;
	}

#footer_1colum ul,
#footer_writer ul
	{
	list-style:none;
	margin:0;
	padding:10px 10px 0 200px;
	}

#footer_1colum ul li,
#footer_writer ul li
	{
	float:left;
	background:url(/img/arrow.gif) left center no-repeat;
	padding:5px 20px 3px 13px;
	}

#footer_1colum a,
#footer_writer a
	{
	text-decoration:none;
	color:#9DB613;
	}

#footer_1colum a:hover,
#footer_writer a:hover
	{
	color:#ccc;
	}

#footer_1colum div,
#footer_writer div
	{
	clear:both;
	padding:15px 0 0 15px;
	font-size:10px;
	color:#333;
	}


/*------------------------------------------
1COLUM_ABOUT_ABOUT_TOP
-------------------------------------------*/

#container_1colum .about_top h3,
#container_writer .about_top h3
	{
	background:url(/img/1colum/main_h3.gif) left top no-repeat;
	width:666px;
	margin:20px 8px 5px 8px;
	padding:10px 10px 5px 10px;
	color:#60B0C4;
	font-size:12px;
	clear:both;
	}

#container_1colum .inner,
#container_writer .inner
	{	
	width:700px;
	margin:15px 30px 0px 10px;
	padding-bottom:20px;
	line-height:160%;
	}



/*------------------------------------------
FULL_CONTAINER
-------------------------------------------*/

#container_full
	{
	width:1020px;
	margin:0 auto;
	position:relative;
	}


/*------------------------------------------
FULL_BANNER
-------------------------------------------*/

#container_full #header
	{

	width:1020px;
	height:117px;
	float:left;
	margin:0 auto;
	background:url(/img/writer/banner_bg.gif)  center top no-repeat;
	}


/*------------------------------------------
FULL_MAIN
-------------------------------------------*/

#container_full #main
	{
	float:right;
	width:950px;
	margin:0 auto 10px auto;
	}


/*------------------------------------------
FULL_FOOTER
-------------------------------------------*/

#footer_full
	{
	clear:both;
	width:820px;
	height:80px;
	margin:0 auto;
	background:url(/img/1colum/footer.gif) center top no-repeat;
	}

#footer_full ul
	{
	list-style:none;
	margin:0;
	padding:10px 10px 0 200px;
	}

#footer_full ul li
	{
	float:left;
	background:url(/img/arrow.gif) left center no-repeat;
	padding:5px 20px 3px 13px;
	}

#footer a
	{
	text-decoration:none;
	color:#9DB613;
	}

#footer a:hover
	{
	color:#ccc;
	}

#footer div
	{
	clear:both;
	padding:15px 0 0 15px;
	font-size:10px;
	color:#333;
	}


/*------------------------------------------
FULL_ABOUT_ABOUT_TOP
-------------------------------------------*/

#container_full .about_top h3
	{
	background:url(/img/1colum/main_h3.gif) left top no-repeat;
	width:666px;
	margin:20px 8px 5px 8px;
	padding:10px 10px 5px 10px;
	color:#60B0C4;
	font-size:12px;
	clear:both;
	}

#container_full .inner
	{	
	width:600px;
	margin:20px 30px 0px 30px;
	padding-bottom:20px;
	line-height:160%;
	}




/*------------------------------------------
FONT
-------------------------------------------*/

.red
	{
	color:#ED705F;
	}

.s_font
	{
	font-size:10px;
	}

/*---------------
FONT:背景(黄)
-----------------*/
.yellow
	{
	background:#F9EA40;
	}

/*---------------
FONT:背景(黄)+下線
-----------------*/
.yellow2
	{
	background:#F9EA40;
	border-bottom:1px solid;
	}

/*---------------
FONT:文字色(赤)+強調
-----------------*/
.red_stg
	{
	color:#D60212;
	font-weight:bold;
	}

/*---------------
FONT:文字色(赤)+強調+背景(黄)
-----------------*/
.red_stg2
	{
	color:#D60212;
	font-weight:bold;
	background:#F9EA40;
	}

/*---------------
FONT:文字色(赤)+強調+背景(黄)+下線
-----------------*/
.red_stg3
	{
	color:#D60212;
	font-weight:bold;
	background:#F9EA40;
	border-bottom:1px solid;
	}

/*---------------
FONT:強調+下線
-----------------*/
.stg_bb
	{
	font-weight:bold;
	border-bottom:1px solid;
	}

/*---------------
新規登録ボタン
-----------------*/
h3#regist
	{
	background:url(/img/regist.gif) left top no-repeat;
	width:220px;
	height:83px;
	margin-top:10px;
	}

h3#regist a
	{
	display:block;
	width:220px;
	height:83px;
	}
	
	
/*--------
Error message
-------*/

.error
	{
	color:#D60212;
	font-weight:bold;
	}