@charset "utf-8";


/*
======Copyright and Credits===========

	CSS FILE for Flat BIt,Inc.
	
	copyright: Flat Bit,Inc.
	mail to  : info@flatbit.co.jp
	
	Autor    : Hiroyuki Morimoto (CSS+XHML+Illustration)
		 mail: h.morimoto@flatbit.co.jp
	
	Autor	 :Tetuya Nakanisi (program)
		 mail:t.nakanisi@flatbit.co.jp			 		
======================================


=============CONTENTS=================

	last up date 30.01.2006
	start   date 11.12.2006
	
			Ver 2.0

======================================


*/


h1, h2, h3, h4, h5, h6,
div,p,ul,html,body
	{
	margin:0;
	padding:0;
	}
	
html

	{
	min-width:900px;
	}
	
body
	{
	background: #FFF;
	color: #484848;
	font: 9px/1.5 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック', sans-serif;
	}	

a	
	{
	color: #0060ec;
	outline: none;
	text-decoration: none;
	}
	
dl
	{
	clear:both;
	border-bottom: 1px dotted #CCCCCC ;
	margin: 15px 0 0 5px;
	}

dt
	{
	width: 180px;
	float:left;
	font-size: 1.3em;
	}
	
dd
	{
	margin-left:180px;
	padding-left:10px;
	font-size: 1.3em;
	}
	
.imgL
	{
	float: left;
	}
	
.caution
	{
	color: #FF0000;
	}	
	
/*------------------------------------
         Float Clear
------------------------------------*/

.line
	{
	margin:0;
	padding:0;
	clear:both;
	}		
	

hr
	{
	display:none;
	}	

/*------------------------------------
         Accesibility
------------------------------------*/

.helpnavi
	{
	margin:0;
	padding:0;
	position:absolute;
	left:-9999px;
	width:900px;
	}

/*------------------------------------
        Wrapper
------------------------------------*/

#Wrapper
	{
	width: 100%;
	margin: 0 auto;
	text-align:left;
	}
	

/*------------------------------------
        Header
------------------------------------*/
#Header
	{
	width: 100%;
	background:#EBEBEB url(../images/head/headback.png) bottom repeat-x;
	height: 320px;
	padding-bottom: 10px;
	}
	
	
/*------------------------------------
        Navigation
------------------------------------*/			
	
#Navigation
	{
	width: 750px;
	margin: 0 auto;
	height: 200px;
	}	
	
#homeNavi,
#serviceNavi,
#folioNavi,
#companyNavi,
#contactNavi
	{
	margin-left: 10px;
	padding-top: 50px;
	padding-left: 20px;
	width: 100px;
	float: left;
	}

.navi-item
	{
	padding: 10px;
	background: #EBEBEB;
	}	
	
.navi-item2
	{
	padding: 10px;
	background: #D7D7D7;
	}

#Header h2.Navi a
	{
	background: url(../images/Navigation/Navi001.png) no-repeat;
	text-indent: -9999px;
	width: 100px;
	height: 15px;
	display: block;
	font-size: 0px;
	}

#homeNavi h2.Navi a,
#homeNavi h2.Navi a:hover
	{
	background-position: 0 0;
	}

#serviceNavi h2.Navi a
	{
	background-position: 0 -16px;
	}
	
#serviceNavi h2.Navi a:hover
	{
	background-position: -200px -16px;
	}	
	
#serviceNavi h2.Navi-ch a,
#serviceNavi h2.Navi-ch a:hover
	{
	background-position: -100px -16px;
	}	
	
#folioNavi h2.Navi a
	{
	background-position: 0 -32px;
	}
	
#folioNavi h2.Navi a:hover
	{
	background-position: -200px -32px;
	}	
	
#folioNavi h2.Navi-ch a,
#folioNavi h2.Navi-ch a:hover
	{
	background-position: -100px -32px;
	}
	
#companyNavi h2.Navi a
	{
	background-position: 0 -48px;
	}
	
#companyNavi h2.Navi a:hover
	{
	background-position: -200px -48px;
	}	
	
#companyNavi h2.Navi-ch a,
#companyNavi h2.Navi-ch a:hover	
	{
	background-position: -100px -48px;
	}
	
#contactNavi h2.Navi a
	{
	background-position: 0 -64px;
	}
	
#contactNavi h2.Navi a:hover
	{
	background-position: -200px -64px;
	}	
	
.navi-item ul
	{
	list-style: none;
	padding: 30px 0 0 15px;
	width: 80px;
	height: 90px;
	background: #D7D7D7;
	overflow: hidden;
	}

.navi-item li
	{
	margin-bottom: 3px;
	font-size: 8pt;
	}	
	
.navi-item li a
	{
	color: #000000;
	text-decoration: none;
	}
	
.navi-item li a:hover
	{
	color: #ff0047;
	font-size: 9pt;
	}	
	
	
.slide
	{
	display: none;
	}
	
#About #companyNavi h2.Navi a,
#News #companyNavi h2.Navi a
	{
	background-position: -100px -48px;
	}
	
#About #companyNavi .slide,
#News #companyNavi .slide
	{
	display: block;
	}				

#About #companyNavi.navi-item,
#News #companyNavi.navi-item
	{
	background: #D7D7D7;
	}	
	
	
#Folio #folioNavi h2.Navi a
	{
	background-position: -100px -32px;
	}
	
#Folio #folioNavi .slide
	{
	display: block;
	}				

#Folio #folioNavi.navi-item
	{
	background: #D7D7D7;
	}
	
#Web #serviceNavi h2.Navi a,
#System #serviceNavi h2.Navi a,
#Logo #serviceNavi h2.Navi a,
#Hosting #serviceNavi h2.Navi a
	{
	background-position: -100px -16px;
	}
	
#Web #serviceNavi .slide,
#System #serviceNavi .slide,
#Logo #serviceNavi .slide,
#Hosting #serviceNavi .slide
	{
	display: block;
	}				

#Web #serviceNavi.navi-item,
#System #serviceNavi.navi-item,
#Logo #serviceNavi.navi-item,
#Hosting #serviceNavi.navi-item
	{
	background: #D7D7D7;
	}	
	
	
/*------------------------------------
        Controller
------------------------------------*/	

#Controller
	{
	width: 800px;
	height: 115px;
	margin: 6px auto 0;
	background: url(../images/Navigation/Navi011.png) top right no-repeat;
	position: relative;
	}
	
#Controller h1
	{
	display: block;
	text-indent: -9999px;
	background: url(../images/Navigation/Navi002.png)  no-repeat;
	width: 125px;
	height: 115px;
	float:left;
	}
	
#Controller h1 a
	{
	width: 100px;
	height: 90px;
	margin: 10px auto;
	display: block;
	}	
	
#Ctrl
	{
	float:right;
	margin: 75px 12px 0 0;
	}

#Ctr ul
	{
	list-style: none;
	}
	
#Ctrl li
	{
	display: block;
	float: left;
	text-indent: -9999px;
	margin-left: 3px;
	}	
	
#Ctrl li#switch a
	{
	display: block;
	width: 70px;
	height: 20px;
	background: url(../images/Navigation/Navi005.png) no-repeat;
	margin-right: 2px;
	}
	
#Ctrl li#switch a.off
	{
	display: block;
	width: 69px;
	height: 20px;
	background: url(../images/Navigation/Navi009.png) no-repeat;
	margin-left: 1px;
	}
	
#Ctrl li#feed a
	{
	display: block;
	width: 52px;
	height: 20px;
	background: url(../images/Navigation/Navi006.png) no-repeat;
	}
	
#Ctrl li#Text
	{
	background: url(../images/Navigation/Navi010.png) no-repeat;
	width: 105px;
	height: 20px;
	float: left;
	}
		
	
#Ctrl a#plus
	{
	text-indent: -9999px;
	margin: 5px 0 0 53px;
	padding:0; 
	width: 15px;
	height: 14px;
	display: block;
	float: left;
	}
	
*html #Ctrl a#plus
	{
	margin: 5px 0 0 0;
	padding-left:53px; 
	}	
	
#Ctrl a#zero	
	{
	text-indent: -9999px;
	margin: 5px 0 0 4px;
	width: 15px;
	height: 14px;
	display: block;
	float: left;
	}	
	
#Ctrl a#minus	
	{
	text-indent: -9999px;
	margin: 5px 0 0 3px;
	width: 15px;
	height: 14px;
	display: block;
	float: left;
	}
	
	
/*------------------------------------
        Search
------------------------------------*/	

#SearchBox
	{
	width: 350px;
	margin: 0 auto;
	padding:0;
	position: relative;
	top: -68px;
	}
	
#search
	{
	width: 200px;
	border: 1px solid #999999;
	border-left: 1px solid #000000;
	border-top: 1px solid #000000;
	font: 1.2em Arial, Helvetica, sans-serif;
	color:#000000;
	}
	
#submit
	{
	margin-left: 3px;
	vertical-align: -10px;
	}	
	
							
	

	
/*------------------------------------
        Content-wrapper
------------------------------------*/	
	
#Content-wrapper
	{
	background: #FFFFFF;
	width: 100%;
	padding-bottom: 50px;
	}	
	
/*------------------------------------
        Content
------------------------------------*/	

#Content
	{
	width: 800px;
	margin:0 auto;
	}
	
#Content p
	{
	font-size: 1.3em
	}	
	
	
#Content a img
	{
	text-decoration: none;
	border: none;
	}
	
#ADVisual
	{
	list-style: none;
	}
	
#Cont
	{
	width: 800px;
	margin: 15px auto;
	border: 1px solid #CCCCCC;
	}	
	
.ContentBox
	{
	float: left;
	width: 170px;
	margin: 15px 8px;
	padding-left: 10px;
	border-left: 1px solid #CCCCCC;
	}
	
.ContentBox-L
	{
	float: left;
	width: 170px;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	}	
	
ul#News
	{
	list-style: none;
	font-size: 1.2em;
	}	
		
		
#Container h2
	{
	margin: 10px 0 2px;
	font-size:1.5em;
	color:#000000;
	background: url(../images/image001.png) left no-repeat ;
	padding: 8px 0 0 30px;
	height: 31px;
	display: block;
	}		
	
#Container h3
	{
	margin: 15px 0 5px;
	padding-left: 5px; 
	font-size:1.3em;
	color: #000000;
	border-left: 5px solid #ff4c00;
	border-bottom: 1px solid #CCCCCC;
	}
	
#Container p
	{
	font-size:1.3em;
	margin: 5px 0 15px 10px;
	line-height: 190%;
	}
	
#Container ul
	{
	margin-left: 10px;
	}	
	
#Container li
	{
	list-style-position: inside;
	font-size: 1.3em;
	margin-bottom: 5px;
	}	
		
#Container p#iq a
	{
	background: url(../images/Navigation/Navi013.png) no-repeat;
	display: block;
	width: 210px;
	height: 60px;
	text-indent: -9999px;
	margin: 20px auto;
	}		
	
	
#rotate li
	{
	font-size: 1.2em;
	}					
						
	
/*------------------------------------
        Footer
------------------------------------*/	

#Footer
	{
	padding: 15px 0;
	margin: 0 auto 20px;
	width: 850px;
	clear: both;
	background: #f7f7f2;
	color: #626046;
	}
	
#Footer a
	{
	color: #0093ff;
	}
	
#Footer a:hover
	{
	text-decoration: underline;
	}		
	
#Footer ul
	{
	list-style: none;
	margin: 0 auto;
	}
	
#Footer li
	{
	display: inline;
	font-size: 1.0em;
	}			
	
#FL
	{
	float: left;
	margin-left: 15px;
	}	
	
#FR
	{
	float: right;
	margin-right: 15px;
	}	
	
	
address
	{
	font-style: normal;
	}		
	
	
/*------------------------------------
        Top
------------------------------------*/	
	
#Top #homeNavi h2.Navi a
	{
	background-position: -100px 0;
	}
	
#Top.index #Content h2
	{
	margin: 10px 0 5px;
	font: bold 1.3em Arial, Helvetica, sans-serif;
	color: #ff0076;
	background: none;
	}		
	
#Top.index #Content h3
	{
	text-indent: -9999px;
	display: block;
	width: 116px;
	height: 15px;
	background: url(../images/top/top005.png) no-repeat;
	}
	
#Top.index p
	{
	font-size: 1.2em;
	}	
	
	
/*------------------------------------
        Contact
------------------------------------*/

#Contact #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/contact/contact001.png) no-repeat;
	border-bottom: 1px solid #CCCCCC;
	}
	

#Contact #contactNavi h2.Navi a
	{
	background-position: -200px -64px;
	}
	
#Contact #Container
	{
	width: 700px;
	margin: 15px auto 25px;
	}	
	
/*------------------------------------
        Web
------------------------------------*/
#Web #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/web/web010.png) no-repeat;
	}
	
#Web #Content
	{
	width: 800px;
	}
		
#Web #Container
	{
	width: 700px;
	margin: 15px auto 25px;
	}
	
	
#Web table img
	{
	margin-right:20px;
	margin-bottom: 15px;
	}
	
#Web table
	{
	border: 1px;
	}	
	
/*------------------------------------
        Web
------------------------------------*/
#System #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/system/system.png) no-repeat;
	}
	
#System #Content
	{
	width: 800px;
	}
		
#System #Container
	{
	width: 700px;
	margin: 15px auto 25px;
	}
	
/*------------------------------------
        Hosting
------------------------------------*/
#Hosting #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/host/host001.png) no-repeat;
	border-bottom: 1px solid #CCCCCC;
	}
	
#Hosting #Content
	{
	width: 800px;
	}
		
#Hosting #Container
	{
	width: 700px;
	margin: 15px auto 25px;
	}
	
	
/*------------------------------------
        News
------------------------------------*/	

#News #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0px auto;
	background: url(../images/company/cmp002.png) no-repeat;
	border-bottom: 1px solid #CCCCCC;
	}

#News #Container
	{
	width: 580px;
	margin-left:20px;
	float: left;
	}
	
#News #Container p
	{
	font-size: 1.3em;
	margin-bottom: 15px;
	}
	
#News  #Container h2
	{
	margin: 15px 0;
	color: #000000;
	font-size: 1.4em;
	}		
	
#News #Side
	{
	margin-top: 20px;
	width: 180px;
	float:right;
	}
	
#News #Side  h2
	{
	margin-left: 15px;
	font-size: 1.3em;
	}	
	
#News #Side ul
	{
	list-style: none;
	margin: 10px 0 0 15px;
	}		

#News #Side li
	{
	font-size: 1.2em;
	margin-bottom: 5px;
	}
	
/*------------------------------------
        About
------------------------------------*/	

#About #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/company/cmp001.png) no-repeat;
	}
	
#About #Content
	{
	width: 800px;
	}
	
#About #Container
	{
	width: 680px;
	margin: 15px auto 25px;
	}
	
/*------------------------------------
        PortFolio
------------------------------------*/

#Folio #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/portfolio/folio002.png) no-repeat;
	}
	
#Folio #Content
	{
	width: 800px;
	}
	
#Folio #Container
	{
	width: 680px;
	margin: 15px auto 25px;
	}
	
#Folio #Content p
	{
	font-size: 1.3em;
	}

.project
	{
	margin-bottom: 15px;
	border-bottom: 1px solid #999999;
	}
	
.project table
	{
	font-size: 1.2em;
	}
			
	
/*------------------------------------
        Logo
------------------------------------*/

#Logo #Content-wrapper h1
	{
	text-indent: -9999px;
	display: block;
	width: 800px;
	height: 109px;
	margin: 0 auto;
	background: url(../images/logo/logo014.png) no-repeat;
	}
	
#Logo #Content
	{
	width: 800px;
	}
	
#Logo #Container
	{
	width: 700px;
	margin: 15px auto 25px;
	}
	
#Logo #Container p
	{
	margin: 5px 0 20px;
	}
	
#Logo table img
	{
	margin-right:20px;
	margin-bottom: 15px;
	}
	
#Logo table
	{
	border: 1px;
	}
	
#Logo p#Economy a
	{
	text-indent: -9999px;
	display: block;
	background: url(../images/logo/logo003.png) no-repeat;
	width: 150px;
	height: 41px;
	margin: 20px auto;
	}
	
#Logo p#orderS a,	
#Logo p#orderB a
	{
	text-indent: -9999px;
	display: block;
	background: url(../images/logo/logo005.png) no-repeat;
	width: 150px;
	height: 41px;
	margin: 20px auto;
	}					
	
/*------------------------------------
        Logo
------------------------------------*/	
	
#Logo .box
	{
	margin: 0 15px 10px;
	float: left;
	}
	
	
#Logo.store #Container p
	{
	font-size: 1.2em;
	}
	
	
#Logo.store #Container ul.tpBox
	{
	list-style: none;
	border-top: 1px solid  #999999;
	}
	
#Logo.store #Container ul.tpBox li
	{
	display: inline;
	}					

#Contact dd,
#Logo.contact dd
	{
	margin-bottom: 10px;
	}
	
#Contact .boxArea,
#Logo.contact .boxArea
	{
	width: 300px;
	padding: 3px;
	font-size: 85%;
	border: 1px solid #D3D3D3;
	border-top-color: #7C7C7C;
	border-bottom-color: #B0B0B0;
	}	
	
#Contact textarea,
#Contact select,
#Contact input,
#Logo.contact textarea,
#Logo.contact select,
#Logo.contact input
	{
	font-size: 1.3em;
	font-family: Osaka,"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3",Arial, Helvetica, sans-serif ;
 	}
	
#Contact .submit,
#Logo.contact .submit
	{
	margin: 15px auto;
	width:100px;
	}
	
#Logo.store .cart
	{
	margin-top:5px;
	}
	
#Logo.store ul#NePre
	{
	margin: 15px auto;
	width: 300px;
	list-style: none;
	}
	
#Logo.store #NePre a
	{
	display: block;
	text-indent: -9999px;
	float: left;
	}	
	
#Logo.store #NePre a#Prev
	{
	width: 38px;
	height: 24px;
	background: url(../images/logo/logo011.png) no-repeat;
	}
	
#Logo.store #NePre a#Next
	{
	width: 38px;
	height: 24px;
	background: url(../images/logo/logo012.png) no-repeat;
	}
	
#Logo.store #NePre a#ECTop
	{
	width: 146px;
	height: 24px;
	background: url(../images/logo/logo013.png) no-repeat;
	}	
	
.paginate 
	{
	margin: 10px auto;
    text-align: center;
    font-size: 9px;
	}
	
.paginate a
	{
	color: #4E8896;
	}									
		
/*------------------------------------
        SubNavigation
------------------------------------*/


#Cont-Navi 
	{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #999;
	width: 800px;
	}

#Cont-Navi ul{
margin: 0;
float: left;
padding-left: 8px;
width: 800px;
}

#Cont-Navi ul li{
display: inline;
margin:0 ;
}


#Cont-Navi ul li.divisor
{
float: left;
padding: 7px 9px 0px 5px;
color: #CCCCCC;
}

#Cont-Navi ul li a{
color: #666666;
float: left;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
padding: 7px 9px 7px 5px;
}


#Cont-Navi ul li a:hover,
#About.index #Cont-Navi li#CN01 a,
#About.philosophy #Cont-Navi li#CN02 a,	
#About.accessmap #Cont-Navi li#CN04 a,
#Web.design #Cont-Navi li#CN01 a,
#Web.xhtml #Cont-Navi li#CN02 a,
#Web.cms #Cont-Navi li#CN03 a,
#Web.blog #Cont-Navi li#CN04 a,
#Web.flow #Cont-Navi li#CN05 a,
#Web.faq #Cont-Navi li#CN06 a,
#System.index #Cont-Navi li#CN01 a,
#System.flow #Cont-Navi li#CN02 a,
#Logo.economy #Cont-Navi li#CN01 a,
#Logo.standard #Cont-Navi li#CN02 a,
#Logo.business #Cont-Navi li#CN03 a,
#Logo.flow #Cont-Navi li#CN04 a,
#Logo.faq #Cont-Navi li#CN05 a,
#Logo.code #Cont-Navi li#CN06 a,
#Logo.store #Cont-Navi li#CN01 a,
#Folio.logo #Cont-Navi li#CN02 a,
#Folio.web #Cont-Navi li#CN01 a
	{
	background: transparent url(../images/Navigation/pointer.gif) bottom center no-repeat;
	color: #089cdd;
	}