@import url("clearfix.css");

/*---------------------------------------------
Base Style
Version 1.0.0

Last Update: 2009.3.17
---------------------------------------------
01. layout [ #wrap, .contents ]
02. header
03. footer
04. common
05. #top
06. #product
07.   #webtop
08.   #remote
09.   #groupware
10.   #function
10.5  #support
11. #personal
12. #casestudy
13.   #case01
14.   #case02
15.   #case03
16. #ccompany
17. #privacy
18. #tos
19. #sitemap
99. common
---------------------------------------------*/
body{
	font-family:"ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic", Osaka, sans-serif;
	font-size: 75%;	color:#626262; line-height:1.5em;
	background:url(../img/00_body-back.gif) repeat-x  #EEEEEE;
	margin:0px; padding:0px; width:100%;}

*    { margin: 0px; padding: 0px; font-size: 100%; }

/* HTML */
hr   { display: none; }
img  { border: none; vertical-align: bottom; }

ul, ol     { list-style: none; }
p, li, dt, dd,
th, td     { text-justify: inter-ideograph; }

a          {overflow: hidden; }
a:link     {color:#007DE2;}
a:visited  {color:#67A1D0;}
a:hover    {color:#54B3FF;}


/*---------------------------------------------
01. layout [ #wrap, .contents ]
---------------------------------------------*/
#wrap    { width: 940px; margin: 0px auto; text-align: left;}

#container     { width:100%; overflow:hidden; margin-bottom:20px; background:url(../img/00_contents-back.gif) repeat-y 720px 0px;}
#onecontainer  { width:100%; overflow:hidden; margin-bottom:20px;}

.contents      { width:700px; float:left; padding:0px 0px 20px; }

.sidemenu { float: right; width:220px; text-align:left;}
.topmargin {margin-top:75px;}


/*---------------------------------------------
02. header
---------------------------------------------*/
#header { background:url(../img/00_header-back.jpg) no-repeat top center; }

#headerbox {width:940px; margin:0 auto; overflow:hidden;}

ul#gnavi  { float:left; width:725px; height:60px; margin:0px; padding:0px; overflow:hidden; background:url(../img/00_gnavi-back.gif) no-repeat; }
ul#gnavi2 { float:left; width:725px; height:60px; margin:0px; padding:0px; overflow:hidden; }
ul#gnavi li,
ul#gnavi2 li       { float:left; margin-right:17px;}
ul#gnavi li a,
ul#gnavi2 li a     { padding:0px;}
ul#gnavi li.small,
ul#gnavi2 li.small { margin-top:10px;}

ul.bgnone {background:none;}

ul#gnavi_top{ float:left; width:725px; height:60px; margin:0px; padding:0px; overflow:hidden; }
ul#gnavi_top li { float:left; margin-right:17px;}
ul#gnavi_top li a {	padding:0px;}
ul#gnavi_top li.small{ margin-top:10px;}

#headlogo { float: right; width:188px; margin:0 auto;}

/*
ul#gnavi_top li#uslink,
ul#gnavi li#uslink,
ul#gnavi2 li#uslink { display:none;}



/*---------------------------------------------
03. footer
---------------------------------------------*/
#footer { background:url(../img/00_border.gif) repeat-x top; color:#888; padding:10px 0px 40px; clear:both; float:left;width:100%;}

#footer ul {float:left; width:550px;}
#footer ul li {float:left; margin-right:20px;}
#footer ul li a,
#footer ul li a:visited { color:#888; text-decoration:none;}
#footer ul li a:hover{color:#54B3FF;}

#footer address { float: right; width: 300px; font-style: normal; text-align: right; }


/*---------------------------------------------
04. common
---------------------------------------------*/
.contents h1,
#onecontainer h1{ margin:0px; background:url(../img/00_border.gif) repeat-x bottom; padding:50px 0px 12px; }

.contents h2{ margin:0px; padding-bottom:15px; }

.contents p.txtlead   { font-size:14px; line-height:1.7em; margin-top:35px;}
.contents p.paragraph { margin-bottom:40px;}
.contents p.caption   { font-size:95%; line-height:1.5em;}

dl.boxwhite { background:#fff; padding:13px; float:right; width:180px; margin-bottom:15px;}
dl.boxwhite dd {margin-top:15px;}

dl.boxblack { background:#474747; padding:13px; float:right; width:178px; border:solid 1px #5E5E5E; color:#fff; margin-bottom:15px;}
dl.boxblack dd {margin-top:15px;}
dl.boxblack dd img{margin-top:5px;}

ul.limenu{ margin:10px 0px 40px; line-height:1.7em; }
ul.limenu li { margin:8px 0px 0px;}

ul.content-ul,
ul.content-ul3 { margin:0px; padding:0px; padding-left:20px;}

ul.content-ul li,
ul.content-ul3 li { list-style: disc; line-height:180%;}

ul.content-ul{ margin-bottom:30px;}
ul.content-ul3{ margin-bottom:20px;}

.leadbox { display:block; width:100%; overflow:hidden; margin-bottom:35px;}

dl#action { border:solid 1px #ccc; padding:15px; margin-bottom:20px;}
dl#action dd {margin-top:10px;}
dl#action dd ul.content-ul {margin:0px;}


/*---------------------------------------------
05. #top
---------------------------------------------*/
body#top { background: #EEEEEE url("../img/top_body-back.jpg") repeat-x scroll center top;}	

#top div#wrap-header { background: url("../img/top_vis.jpg") no-repeat scroll center top; min-height:418px; _height:418px; margin:0px; padding:0px;}
#top h1 { margin:25px 0px 0px 15px; border:none; background-image:none;}

#top #wrap-2col-right p#link { float:right; padding:0px 0px 10px; margin:0px; border-bottom:none;}

div.top-vis-caption{ width:430px; margin:23px 0px 0px 15px;	padding-bottom:8px; border-top:2px solid #242424;border-left:2px solid #242424;border-right:2px solid #242424; background-color:#000000;}
div.top-vis-caption P{ margin:8px 15px 0px; color:#f0f0f0;}
div.top-vis-caption P a img{ float:right; margin:10px 0px 0px 15px;}

#topcopy { width:940px; margin:0 auto; padding:0px;}

body#top #wrap {margin-top:30px;}

#top #wrap-2col-left{
	width:540px;
	margin-bottom:20px;
}
#top #wrap-2col-right{
	width:380px;
	padding-left:20px;
}
#top h2 {
	padding-bottom:10px;
	background-image:url(../img/00_border.gif);
	background-position:bottom;
	background-repeat:repeat-x;
}
#top #wrap-2col-right p{
	border-bottom:1px solid #CCCCCC;
	padding-bottom:12px;
	margin-top:13px;
}
#top #wrap-2col-right p.last {border-bottom:none;}

#wrap-top-prd1{
	float:left;
	width:260px;
	margin-top:13px;
}

#wrap-top-prd1 h3,
#wrap-top-prd3 h3{
	margin:13px 0px 8px;
}

#wrap-top-prd2{
	float:right;
	width:260px;
	padding-left:20px;
	margin-top:13px;
}

#wrap-top-prd1 p.readtxt,
#wrap-top-prd2 p.readtxt,
#wrap-top-prd3 p.readtxt{
	margin-top:13px;
	}

#wrap-top-prd3{
	clear:both;
	width:260px;
	margin-top:20px;
	padding:20px 280px 0px 0px;
	background-image:url(../img/top_illust02.jpg);
	background-position:right;
	background-repeat:no-repeat;
	min-height:204px;
	_height:204px;
}



/*---------------------------------------------
06. #product
---------------------------------------------*/
#product .contents h2{ margin:0px; padding-bottom:25px; }

#product #flashimg { float:right; width:323px; margin:0px 0px 0px 20px;}
#product #flashimg img{margin-top:30px;}

/*---------------------------------------------
07.   #webtop
---------------------------------------------*/
#webtop dl#action {margin-top:25px;}

#webtop table.wtop-data {border-top:1px solid #666666;border-bottom:1px solid #666666;border-spacing:0px;border-collapse:collapse;}
#webtop table.wtop-data td,table.wtop-data th {border-top:1px solid #666666;	padding:7px;background-color:#ffffff;width:33%;}
#webtop table.wtop-data th.td01 {background-color:#999999;color:#ffffff;font-weight:normal;text-align:center;}
#webtop table.wtop-data td.td02,table.wtop-data th.td02 {border-right:1px solid #CFCFCF;border-left:1px solid #CFCFCF;}
#webtop table.wtop-data td.td03 {background-color:#FFFFCD;}
#webtop table.wtop-data img {clear:both; vertical-align:middle;margin-right:12px; float:left;}

p#outtopic { float:right; margin-top:710px; font-size:10px; line-height:14px; padding-left:18px;}

/*---------------------------------------------
08.   #remote
---------------------------------------------*/
#remote dl#action {margin-top:25px;}


/*---------------------------------------------
09.   #groupware
---------------------------------------------*/
#groupware h2.toptitle {margin-top:25px;}


/*---------------------------------------------
10.   #function
---------------------------------------------*/
#function .content-3col-box#topbox {margin-top:25px;}
#function p.iconarea { padding:5px;	}
#function p.iconarea img{ margin-right:5px;}

#function p.funclist{	background:url(../product/img/func_item-back.jpg) repeat-y; padding:6px; min-height:35px; _height:35px; display:block;}
#function p.funclist img{ margin-right:12px;}

#function p span.caption{ display:block; clear:both; font-size:75%;}

#function h3 { margin:25px 0px 0px; color:#102C5A;}
#function h3 span {clear:both; display:block; font-weight:normal;}

#function ul.pricelist { padding:10px 0px 0px 20px;}
#function ul.pricelist li { list-style:disc; line-height:1.5em; margin-bottom:15px;	}

/*---------------------------------------------
10.5  #support
---------------------------------------------*/
#support p.txtlead span { display:block; margin-bottom:15px;}

#support h2 { padding:30px 0px 15px;}
#support dl.qeustion { color:#102C5A; font-weight:bold; margin-bottom:5px;}
#support dl.qeustion dt { width:8%; float:left;}
#support dl.qeustion dd { width:92%; float:left;}

#support dl.answer {margin-bottom:30px;}
#support dl.answer dt { width:8%; float:left; font-weight:bold; color:#CE3000;}
#support dl.answer dd { width:92%; float:left;}
#support .content-ul { margin-bottom:5px;}

/*---------------------------------------------
11. #personal
---------------------------------------------*/
p#prs-border-top{ border-top:1px solid #CECECE; margin-top:12px; padding-top:12px; }

#personal .leadbox { margin-bottom:0px;}

div.leadbox .floatbox-l{
	width:320px;
	margin-right:20px;
	float:left;
}
div.leadbox .floatbox-r{
	margin-top:35px;
	width:341px;
	float:right;
	font-size:12px;
	background-image:url(../img/00_floatbox-back.gif);
	background-repeat:repeat-y;
}
div.leadbox .floatbox-r ul{
	margin-bottom:0px;
}
div.leadbox .floatbox-r div.adjust{
	padding:12px;
}

#personal p.topimage { text-align:center; margin:20px 0px 0px;}



/*---------------------------------------------
12. #casestudy
---------------------------------------------*/
#casestudy #indexmenu { margin-top:50px;}

#case01 h2.case-h2,
#case02 h2.case-h2,
#case03 h2.case-h2 { background:#fff; padding:7px 7px 8px; border-bottom:solid 1px #ccc; margin-bottom:20px;}

#case01 ul.case-content-ul,
#case02 ul.case-content-ul,
#case03 ul.case-content-ul {margin:0px;padding:0px; padding-left:20px; margin-bottom:20px;}

#case01 ul.case-content-ul,
#case02 ul.case-content-ul,
#case03 ul.case-content-ul li {list-style: disc;line-height:180%;}


/*---------------------------------------------
13.   #case01
---------------------------------------------*/


/*---------------------------------------------
14.   #case01
---------------------------------------------*/



/*---------------------------------------------
15.   #case01
---------------------------------------------*/


/*---------------------------------------------
16. #company
---------------------------------------------*/
#company h1 { margin-bottom:35px;}
#company h3 { margin:0px 0px 10px; }

#company p#link { float:right; padding:47px 22px 0px;}

#company p.message { margin-bottom:20px;}
#company p.lastcomment { text-align:right;}
#company p.lastcomment img { padding-top:5px;}

dl.sidephoto { margin:0 auto; width:180px;}
dl.sidephoto dt.adminphoto { padding:8px; background:#fff; border:solid 1px #ccc; margin:10px 10px 5px; width:150px;}
dl.sidephoto dt.officephoto { border:solid 1px #ccc; margin:18px 18px 5px; width:150px;}
dl.sidephoto dd { margin:0px 16px 20px; color:#666;}

div.white-box {	border:1px solid  #bebebe; padding:24px; margin-top:10px; width:652px; display:block; overflow:hidden;}

div.white-box table {width:100%;}
div.white-box td,
div.white-box th{ padding:5px 7px;border-bottom:1px solid #ccc;clear:both;}
div.white-box th{ width:200px;}
div.white-box tr#last td,
div.white-box tr#last th {border-bottom:none; padding-bottom:10px;}

table.hr-bottom{ border-bottom:2px solid #999999; margin-bottom:5px; padding:0px;}


#recruit{ margin:0px 0px 10px 0px; }

#recruit h3 { font-weight:normal;}

ul.companylist { list-style-type:disc; list-style-position:inside; float:left; width:48%;}
ul.companylist li { font-size:14px; line-height:1.7em; white-space:nowrap;}

#customervoice { margin:30px 0px; width:652px; overflow:hidden; display:block; padding:16px; border:solid 9px #d7d7d7; background:#fff; }
#customervoice h2 {padding-bottom:0px;}
#customervoice dl.comment { margin:15px 0px 0px;border-bottom:1px solid #CCC; padding-bottom:10px; }
#customervoice dl.comment dt { float:left; width:32%; font-weight:bold; color:#102C5A;}
#customervoice dl.comment dt span {clear:both; display:block; font-weight:normal; color:#666666}
#customervoice dl.comment dd {float:left; width:63%; padding-left:25px;}

/*---------------------------------------------
17. #privacy
---------------------------------------------*/
#privacy h1 { margin-bottom:35px;}
#privacy h2 { margin:20px 0px 10px; color:#102C5A;}
#privacy p {margin-bottom:15px;}
#privacy blockquote { margin-left:20px;}
#privacy p.right { float:right; text-align: left;}


/*---------------------------------------------
19. #sitemap
---------------------------------------------*/
#sitemap h1 { margin-bottom:35px;}
#sitemap h2 { margin:15px 0px 5px;}

#sitemap h2 a { background:url(../product/img/prd_footnavi-arrow02.gif) no-repeat left; padding-left:20px; }

#sitemap div.content-3col-box { background:url(../img/00_cnt-3col-back4.gif) repeat-y; clear:both; margin-bottom:40px; width:100%; overflow:hidden; }
#sitemap div.content-3col-box .box1 { width:330px; float:left; }
#sitemap div.content-3col-box .box2,
#sitemap div.content-3col-box .box3 { width:275px; float:left;}




/*---------------------------------------------
99. common
---------------------------------------------*/


.p2{
	margin-bottom:12px;
}
.p3{
	margin-bottom:20px;
}



/* Lib */
.margin-bottom{ margin-bottom:30px; }


.no-margin-top { margin-top:0px; }
.no-padding{ padding:0px;}
.align-left { float:left;}
.align-right { float:right; margin-left:12px; }
.clear { clear:both; }
.margin-top{ margin-top:30px; }

.left-indent { margin-left:18px; }
.red { color:#ff0000; }

/* Clearfix */
.topicsblock:after{
	content: ".";  
    display: block;  
    visibility: hidden;  
    height: 0.1px;  
    font-size: 0.1em;  
    line-height: 0;  
    clear: both;
}

/* Layout */

DIV#wrap-content{
	width:940px;
	margin:0px auto;
	clear:both;
}


DIV#wrap-footer{
	background-image:url(../img/00_border.gif);
	background-repeat:repeat-x;
	background-position:top;
	width:940px;
	margin:20px auto;
	padding-bottom:50px;
	padding-top:12px;
    clear: both;
}
#wrap-footer .leftbox{
	float:left;
	vertical-align:top;
}
#wrap-footer .leftbox a,
#wrap-footer .leftbox a:visited{
	color:#888888;
	text-decoration:none;
}
#wrap-footer .leftbox a:hover{
	color:#54B3FF;
}
#wrap-footer .rightbox{
	float:right;
	vertical-align:top;
}


/* 2column petern */
.colum2 #wrap-content{
	background-image:url(../img/00_contents-back.gif);
	background-repeat:repeat-y;
	background-position:720px 0px;
	margin-top:0px;
}
.colum1 #wrap-content{
	margin-top:0px;
	padding-top:50px;
}
#subpage #wrap-2col-left {
	padding-top:50px;
	padding-right:20px;
	width:700px;
}
#subpage #wrap-2col-right {	
	width:220px;
}
#wrap-2col-right{
	float:right;
	vertical-align:top;
}
#wrap-2col-left{
	float:left;
	vertical-align:top;
}

/* local navi */
div#localnavi h3{
	padding:8px 0px 15px 15px;
	margin:0px;
}
div#localnavi ul,div#localnavi li{
	margin:0px;
	padding:0px;
	display:block;
	line-height:0px;
	font-size:0.1px;
}
div#localnavi ul{
	margin-bottom:15px;
}


div.local-topics-white,div.local-topics-white-top,div.local-topics-gray{
	margin:0px 0px 15px 15px;
	padding:12px;
}
div.local-topics-white P ,div.local-topics-gray P{
	margin-top:2px; margin-bottom:2px;
}
div.local-topics-white{
	background-color:#ffffff;
}
div.local-topics-white{
	background-color:#ffffff;
}
div.local-topics-white-top{
	background-color:#ffffff;
	margin-top:75px;
}
div.local-topics-white strong{
	color:#102E5B;
}
div.local-topics-gray{
	background-color:#474747;
	color:#ffffff;
	border:1px solid #5F5F5F;
}

/* contents area layout */
div.content-3col-box{
	background-image:url(../img/00_cnt-3col-back.gif);
	background-repeat:repeat-y;
	clear:both;
	margin-bottom:40px;
	width:100%;
	overflow:hidden;
}
div.content-3col-box .box1,div.content-3col-box .box2,div.content-3col-box .box3{
	width:220px;
	float:left;
}
div.content-3col-box .box2{
	margin:0px 20px;
}
div.content-3col-box-2{
	background-image:url(../img/00_cnt-3col-back2.gif);
	background-repeat:repeat-y;
	clear:both;
	margin-bottom:40px;
	width:100%;
	overflow:hidden;
}
div.content-3col-box-2 .box1-long{
	width:460px;
	padding-right:20px;
	float:left;
}
div.content-3col-box-2 .box3{
	width:220px;
	float:left;
}

div.content-3col-box-3{
	background-image:url(../img/00_cnt-3col-back3.gif);
	background-repeat:repeat-y;
	clear:both;
	margin-bottom:40px;
	width:100%;
	overflow:hidden;
}
div.content-3col-box-3 .box1-long{
	width:220px;
	padding-right:20px;
	float:left;
}
div.content-3col-box-3 .box3{
	width:460px;
	float:left;
}

div.content-2col-box{
	background-image:url(../img/00_cnt-2col-back.gif);
	background-repeat:repeat-y;
	clear:both;
	width:100%;
	overflow:hidden;
	margin-bottom:30px;		
}
div.content-2col-box .box1,
div.content-2col-box .box2{
	width:330px;
	float:left;
}
div.content-2col-box .box2{
	margin-left: 40px;
}




div#contents-foot-navi{
	margin:30px 0px 12px 0px;
	min-height:17px;
	_height:17px;
}
div#contents-foot-navi .leftbox{
	float:left;
}
div#contents-foot-navi .leftbox a{
	background:url(../product/img/prd_footnavi-arrow01.gif) no-repeat left;
	padding-left:20px;
	}


div#contents-foot-navi .rightbox{
	float:right;
}

div#contents-foot-navi .rightbox a{
	background:url(../product/img/prd_footnavi-arrow02.gif) no-repeat right;
	padding-right:20px;
	}