@charset "UTF-8";
/* CSS Document */


/*ページ全体設定-------------------------------------------------*/
* { 
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;/*--for opera--*/
	/*各sccで設定	background:#fff url(../img/main_g.jpg) top center no-repeat;*/
	text-align:center;
	color:#777777;
	font-family:Lucida Grande, Arial, Verdana, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: 1.8em;	/*行間設定*/
}


a:link {
	color:#8cb005;
	text-decoration:none;
}
a:visited {
	color:#8cb005;
	text-decoration: none;
}

a:hover, a:active {
	color:#aac60e;
	text-decoration:underline;
	outline: none;	/*クリック時の点線の囲みを消す*/
}

img {border:0}

/*h1 { margin-bottom:em;}	logo 画像のため未指定*/

/*見出し*/
h2 { 
	margin-bottom:0.5em; font-size: 14px; color:#53524e;/*font-weight:normal;*/
}

/*sub title*/
h3 { 
	margin-bottom:0.5em; font-size: 12px;	line-height: 1.3em;	/*行間設定*/ 
	color:#53524e; margin-bottom:1em;
}


/*container -------------------------------------------------*/

#container {
	width: 984px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
}


/*main graphic-----------------------------------------------------------*/

#mainG {
	width: 940px;
	height: 516px;
	margin: 0 auto;
	}
	
#logoLink a {	/*HYBRIDWORKS logo*/
	display:block;
	width:160px;
	height:50px;
	text-indent:-9999px;
	}
		
	
/* tab ----------------------------------------------------------------*/


#tabArea{
	width:984px;
	height:50px;
	margin: 0;
	padding:15px 0 3px 0;
}


#tabArea ul {
	list-style:none;
}


#tabArea ul li {
	float:left;
	text-align:center;
}

#tabArea ul li.empty {	/*メニューの左右のアキ*/
	width:276px;
	height:50px;
	background:url(../img/line.gif) bottom repeat-x;
}

	
#tabArea ul a {
	text-decoration:none;
	color:#53524e;
	display:block;			
	height:50px;
	width:152px;
	background:url(../img/line.gif) bottom repeat-x;
}

#tabArea ul .goodies a {	
	width:128px; /*文字数が少ないので幅を少なめに*/
}

#tabArea ul li a:hover {
	color:#8cb005;
}

#tabArea ul li a.active {	/*.activeでアクティブの状態を維持*/
	background:url(../img/tab.gif) bottom no-repeat;
	color:#b3b2b1;
	outline: none;	/*クリック時の点線の囲みを消す*/
}


/*goodies ---------------------------------------------------------*/

#goodies {
	clear:both;	
	width:984px;
	margin: 0;
}

/*右の大きな画像*/
#goodies_R {
	float: right;
	width:365px;
	text-align:center;
	/*margin-bottom:50px;	bottomはBannerとのスペース確保の為*/
}

/*説明文*/
#goodies_L1 {
	float: left;
	width:596px;
	padding:20px 0 20px 12px;
	
}

#goodies_L2 {
	float: left;
	width:596px;
	padding:20px 0 20px 12px;
}

/*説明文　右に画像がない場合*/
#goodies_description {
	width:984px;
}


/*サムネイル ------------------------------------------------------------*/

#sc_area {
	float: left;
	width:607px;
	margin:0;
}

.sc_thum{
	float: left;
	width: 192px;
	height: 130px;
	margin:0;
}

/*最後のサムネイルの指定　bottom-marginの設定がある*/
.sc_thum_last{
	float: left;
	width: 192px;
	height: 130px;
	margin-bottom:0px;/*bottomは下とのスペース確保の為*/
}


/*壁紙サムネイル ---------------------------------------------------------*/

#thumArea {
	clear:both;
	width:960px;
	margin: 0 0 0 0px;
}

#thumArea h2 {
	text-indent:11px;
}

/*壁紙thum*/
.thum{
	float: left;
	width: 192px;
	height: 160px;
	margin:0;
}

/*キャプション*/
.thum p{
	font-size:11px;
	text-indent:1em;
	line-height: 1.5em;	
	margin:0;
}

/*最後のサムネイルの指定　bottom-marginの設定がある*/
.thum_last{
	float: left;
	width: 192px;
	height: 160px;
	margin-bottom:30px;/*bottomはfooterとのスペース確保の為*/
}

/*最後のサムネイルのキャプション*/
.thum_last_cap{
	font-size:11px;
	text-indent:1em;
	line-height: 1.5em;	
	margin:0;
}

/*アイコン------------これは保留----------------------------------*/
.icon{
	float: left;
	width: 192px;
	height: 185px;
	margin:0;
	text-align:center;
	font-size:11px;
	line-height: 1.5em;	
}

/*最後のアイコンの指定　bottom-marginの設定がある*/
.icon_last{
	float: left;
	width: 192px;
	height: 185px;
	margin-bottom:30px;/*bottomはbannerとのスペース確保の為*/
	text-align:center;
	font-size:11px;
	line-height: 1.5em;	
}




/*how to use icons----------------------------------------------------------*/

#howto {
	clear:both;	
	width:960px;
	margin: 20px 0 0;
	padding-left:12px;
}

/*for Mac*/
#howtoMac {
	float: left;
	margin:10px 0;
	width:47%;
}

/*for Win*/
#howtowin {
	float: right;
	margin:10px 0 50px;	/*bottomはbannerとのスペース確保の為*/
	width:47%;
}

/*リストの数値マージン用*/
#howto ol {
		/*数値左合わせIE対策 marginきかないため margin0指定 + paddingにて指定*/
		/*margin-left:23px;	*/	/*左側マージン*/
		margin-left:23px;
		/*padding-left: 30px;		/**/
		/*_padding-left: 24px;	/* for IE (win)*/
		list-style-position: outside;
}

/*説明が二行にまたがる場合用 _2行目の行間小さくしバランス調整*/
#howto li {
		line-height: 1.3em;	/*行間設定*/
		margin-bottom:0.5em;
}

/*How to title*/
.howtoTitle {
		/*color:#9b6d2b;*/
		line-height: 1.3em;	/*行間設定*/
		margin-bottom:1.3em;
		font-weight: bold;
		color:#53524e;
}



/*Terms of use ---------------------------------------------------------------*/

#terms {
	clear:both;		/*上部2段組みのhowtoをクリア*/
	width:960px;
	margin: 20px 0 50px;	/*bottomはbannerとのスペース確保の為*/
	padding-left:12px;
}


/*banner -------------------------------------------------------------------*/
.bannerBox{
    clear:both;
	margin: 0 auto;
    width: 984px;
	height:168px;
}

.bannerBox img{
	margin-right: 9px;
}

/*右端のバナー　margin設定無し*/
.bannerBox img.last{
	margin:0;
}


/*copyright -------------------------------------------------------------------*/


/*copyright等フッター---------------------------------------------------------*/
#footer {
	clear:both;		/*上部2段組みのhowtoをクリア*/
	font-size: 0.8em;
	width:900px;	/*全体の幅の数値895ではNG ・左マージン分数値程度数値引く*/
	margin-top:50px;
	margin-left:0px;	/*左側マージン*/
	margin-bottom:30px;	/*最下部のスペーサー*/

}