@charset "utf-8";

#container {
  margin:0 auto;
  width:770px;
  background-image:url(../images/bg_light_image.jpg);
  background-repeat:no-repeat;
  font-size: 10px;
}


/* header bt area*/

#toparea {
  margin:0 auto;
  padding:10px 0 0 0;
  width:770px;
  height: 90px;
}

h1 {
  height:24px;
  font-size:12px;
  line-height:22px;
  width:770px;
  margin:0 auto;
  color:#FFFFFF;
}

#toparea h2 {
	width:160px;
	height:90px;
	float:left;
}

#toparea h2 a {
	width:160px;
	height:90px;
	display:block;
	background-image:url(../images/ci_image.gif);
	text-indent:-99999px;
}

#toparea ul {
	float:right;
	width:586px;
	height:52px;
	padding:23px 0 0 0;
}

*html #toparea ul{
	height: 80px;
}

#toparea ul li {
	float:left;
	list-style-type:none;
}

/* navi area */

#navitop {
	background:url(../images/navi_top.gif) no-repeat left top;
	width:99px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navitop:hover {
	background:url(../images/navi_top.gif) no-repeat right top;
	width:99px;
	height:52px;
	display:block;
	text-indent:-99999px; 
}

#naviwhat {
	background:url(../images/navi_what.gif) no-repeat left top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviwhat:hover {
	background:url(../images/navi_what.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviform {
	background:url(../images/navi_form.gif) no-repeat left top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviform:hover {
	background:url(../images/navi_form.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navisample{
	background:url(../images/navi_sample.gif) no-repeat left top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navisample:hover {
	background:url(../images/navi_sample.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navimanual{
	background:url(../images/navi_manual.gif) no-repeat left top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navimanual:hover {
	background:url(../images/navi_manual.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navifaq{
        background:url(../images/navi_faq.gif) no-repeat left top;
        width:97px;
        height:52px;
        display:block;
        text-indent:-99999px;
}

#navifaq:hover {
        background:url(../images/navi_faq.gif) no-repeat right top;
        width:97px;
        height:52px;
        display:block;
        text-indent:-99999px;
}
))

#navidoc{
	background:url(../images/navi_doc.gif) no-repeat left top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navidoc:hover {
	background:url(../images/navi_doc.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviinfo{
	background:url(../images/navi_info.gif) no-repeat left top;
	width:99px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviinfo:hover {
	background:url(../images/navi_info.gif) no-repeat right top;
	width:99px;
	height:52px;
	display:block;
	text-indent:-99999px;
}


#samplePage #navisample { background-position: right top;}
#formPage #naviform { background-position: right top;}
#manualPage #navimanual { background-position: right top;}
#faqPage #navifaq { background-position: right top;}

/* header bt second area*/

#navitop_in {
	background:url(../images/navi_top.gif) no-repeat right top;
	width:99px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviwhat_in {
	background:url(../images/navi_what.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviform_in {
	background:url(../images/navi_form.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navisample_in {
	background:url(../images/navi_sample.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#navimanual_in {
        background:url(../images/navi_manual.gif) no-repeat right top;
        width:97px;
        height:52px;
        display:block;
        text-indent:-99999px;
}

#navifaq_in {
        background:url(../images/navi_faq.gif) no-repeat right top;
        width:97px;
        height:52px;
        display:block;
        text-indent:-99999px;
}

#navidoc_in {
	background:url(../images/navi_doc.gif) no-repeat right top;
	width:97px;
	height:52px;
	display:block;
	text-indent:-99999px;
}

#naviinfo_in {
	background:url(../images/navi_info.gif) no-repeat right top;
	width:99px;
	height:52px;
	display:block;
	text-indent:-99999px;
}



/* top main image area*/

#main_bgimage_head {
	margin:10px auto 0 auto;
	background:url(../images/mainarea_bg_head.gif) no-repeat;
	width:770px;
	height:20px;
}

#main_bgimage_head_02 {
	margin:10px auto 0 auto;
	background:url(../images/mainarea_bg_head_second.gif) no-repeat;
	width:770px;
	height:10px;
}

#main_bgimage_center {
	margin:0 auto;
	background:#FFFFFF;
	width:770px;
}

#main_bgimage_foot {
	margin:0 auto;
	background:url(../images/mainarea_bg_foot.gif) no-repeat;
	width:770px;
	height:20px;
}



/* パンくずリンク */

#pankuzuarea {
	width:729px;
/*	margin:0 0 20px 20px;*/
	margin:0 0 5px 20px;
	padding:0 0 5px 0;
	border-bottom:#999999 dotted 1px;
}

#pankuzuarea a {
	color:#5A5A5A;
	text-decoration:none;
}

#pankuzuarea a:hover {
	color:#FF6600;
	text-decoration:underline;
}

#pankuzuarea span {
	color:#999999;
}



/* main area right*/

#rightarea {
	width:530px;
	margin:0 0 0 220px;
	padding-bottom:10px
}

/* main area contents */

#contentsarea {
	width:730px;
	margin:0 0 0 20px;
	padding-bottom:10px
}

/* sitetoppage */

#toptitle001 {
	width:730px;
	height:35px;
	text-indent:-99999px;
	margin:0 0 10px 20px;
	background:url(../images/top_title_001.gif) no-repeat;
}

#toptext001 {
	width:652px;
	margin:0 auto 10px 59px;
	font-size:1.2em;
	line-height:1.7em;
}

#topimage001 {
	margin:0 auto 10px 59px;
}

#toptext002 {
	width:652px;
	margin:0 auto 5px 59px;
	font-size:1.2em;
	line-height:1.7em;
	text-align:center;
}

#toptext003 {
	width:652px;
	margin:0 auto 30px 59px;
	font-size:1em;
	line-height:1.5em;
	text-align:center;
}

#toptitle002 {
	width:730px;
	height:35px;
	text-indent:-99999px;
	margin:0 0 10px 20px;
	background:url(../images/top_title_002.gif) no-repeat;
}

#topopenimage01 {
	width:510px;
	height:92px;
	margin:15px 0 15px 10px;
	padding:0 0 15px 0;
	border-bottom:dotted #999999 1px;
	background:url(../images/top_openimage_01.gif) no-repeat;
}

#topopenimage01 p {
	display:block;
	width:305px;
	position:relative;
	top:15px;
	left:54px;
	font-size:1.2em;
	line-height:1.7em;
}

#topopenimage02 {
	width:510px;
	height:92px;
	margin:15px 0 15px 10px;
	padding:0 0 15px 0;
	border-bottom:dotted #999999 1px;
	background:url(../images/top_openimage_02.gif) no-repeat;
}

#topopenimage02 p {
	display:block;
	width:305px;
	position:relative;
	top:15px;
	left:54px;
	font-size:1.2em;
	line-height:1.7em;
}

#topopenimage03 {
	width:510px;
	height:102px;
	margin:15px 0 10px 10px;
	padding:0 0 10px 0;
	background:url(../images/top_openimage_03.gif) no-repeat;
}

#topopenimage03 p {
	display:block;
	width:290px;
	position:relative;
	top:15px;
	left:54px;
	font-size:1.2em;
	line-height:1.7em;
}

#toptitle003 {
	width:730px;
	height:35px;
	text-indent:-99999px;
	margin:0 0 0 20px;
	background:url(../images/top_title_003.gif) no-repeat;
}

.topwhatnew {
	width:710px;
	margin:10px 0 0 30px;
	padding-bottom:10px;
	border-bottom:#999999 1px dotted;
	font-size:1.2em;
	line-height:1.7em;
}

.topwhatnew dt {
	float:left;
	font-weight:bold;
	padding:0 0 0 29px;
}

.topwhatnew dd {
	margin:0 0 0 109px;}




/* page top linkボタン */
#pagetoparea {
	width:770px;
	margin:30px auto 0 auto;
}

#pagetopareabt {
	margin-left:641px;
	width:129px;
	display:block;
}

#pagetopareabt a {
	display:block;
	width:129px;
	height:32px;
	background:url(../images/pagetop_link_bt.gif) no-repeat left top;
	text-indent:-99999px;
}

#pagetopareabt a:hover {
	display:block;
	width:129px;
	height:32px;
	background:url(../images/pagetop_link_bt.gif) no-repeat right top;
	text-indent:-99999px;
}



/* フッタエリア */

#footerarabg{
  width:100%;
  background:#5d5d5d url(../images/footer_bg_image.gif) repeat-x;
  padding:30px 0 80px 0;
  color:#FFFFFF;
}

#footerarea {
  width:770px;
  margin:0 auto;
  font-size:10px;
}

#footerlinkbtarea {
  float:left;
	width:120px;
}

#footertextarea {
  width:628px;
  float:right;
}

#footertext01 {
  font-size:1.2em;
  padding-bottom:9px;
  margin-bottom:9px;
  border-bottom:1px #FFFFFF dotted;
}

#footertext01 a {
  color:#FFFFFF;
  text-decoration:none;
}

#footertext01 a:hover {
  color:#CCCCCC;
  text-decoration:underline;
}

#footertext02 {
  text-align:right;
  font-size:1.2em;
}


.sample {
    background-color: #eee;
	width:480px;
	height:60px;
    margin-bottom:10px;
}

.view_sample {
    border: solid 1px #999;
	width: 460px;
    padding:10px;
    margin-bottom:20px;
}

.arrow_orange {
  margin:0 5px 0 0;
}

div.clearboth {
  clear:both;
  margin-bottom: 10px;
}

/* error */
#errortext {
	width: 710px;
	margin:0 auto 10px auto;
	font-size:1.2em;
	line-height:1.7em;
}


/* 20090824 update */

#header_flashimage {
	margin:10px auto 0 auto;
	padding-bottom:10px;
	background-color:#FFFFFF;
	width:770px;
}


#title002_box {
	width:710px;
	margin:0 0 15px 30px;
}

#title002_01 {
	margin:0 14px 0 29px;
	width:208px;
	float:left;
	display:inline;
	font-size:1.2em;
	line-height:1.6em;
}

#title002_02 {
	margin:0 14px 0 0;
	width:208px;
	float:left;
	display:inline;
	font-size:1.2em;
	line-height:1.6em;
}

#title002_03 {
	margin:0 29px 0 0;
	width:208px;
	float:left;
	display:inline;
	font-size:1.2em;
	line-height:1.6em;
}

#moviral_area {
	width:730px;
	height:103px;
	margin:30px 0 0 20px;
	background-image:url(../images/moviral_area.gif);
	background-repeat:no-repeat;
}

#moviral_bt {
	width:225px;
	height:87px;
	position:relative;
	top:9px;
	left:10px;
	float:left;
}

#moviral_bt_link{
	background:url(../images/moviral_bt.gif) no-repeat left top;
	width:225px;
	height:87px;
	display:block;
	text-indent:-99999px;
}

#moviral_bt_link:hover {
	background:url(../images/moviral_bt.gif) no-repeat right top;
	width:225px;
	height:87px;
	display:block;
	text-indent:-99999px;
}


#moviral_text {
	width:440px;
	height:70px;
	position:relative;
	top:10px;
	left:30px;
	float:left;
	font-size:1.2em;
	line-height:1.7em;
}

/* sample_bt, case_bt, select_bt */
#common_sample_bt a{
  background:transparent url(/images/btn_sample.gif) no-repeat scroll left top;
  display:block;
  height:47px;
  text-indent:-99999px;
  width:180px;
 }

#common_sample_bt a:hover{
  background:transparent url(/images/btn_sample.gif) no-repeat scroll right top;
  display:block;
  height:47px;
  text-indent:-99999px;
  width:180px;
 }

#common_case_bt a{
  background:transparent url(/images/btn_case.gif) no-repeat scroll left top;
  display:block;
  height:47px;
  text-indent:-99999px;
  width:180px;
 }

#common_case_bt a:hover{
  background:transparent url(/images/btn_case.gif) no-repeat scroll right top;
  display:block;
  height:47px;
  text-indent:-99999px;
  width:180px;
 }

#common_select_bt a{
  background:transparent url(/images/btn_select.gif) no-repeat scroll left top;
  display:block;
  height:47px;
  text-indent:-99999px;
  width:180px;
 }

#common_select_bt a:hover{
  background:transparent url(/images/btn_select.gif) no-repeat scroll right top;
  display:block;
  height:47px;
  text-indent:-99999px;
  width:180px;
 }

#top_make_bt a{ 
  background:transparent url(/images/btn_top_make.gif) no-repeat scroll left top;
  display:block;
  width:290px;
  height:38px;
  text-indent:-99999px;
  margin: 15px auto 10px auto;
 }

#top_make_bt a:hover{ 
  background:transparent url(/images/btn_top_make.gif) no-repeat scroll right top;
  display:block;
  width:290px;
  height:38px;
  text-indent:-99999px;
  margin: 15px auto 10px auto;
 }

#common_make_bt a{ 
  background:transparent url(/images/btn_top_make.gif) no-repeat scroll left top;
  display:block;
  width:290px;
  height:38px;
  text-indent:-99999px;
 }

#common_make_bt a:hover{ 
  background:transparent url(/images/btn_top_make.gif) no-repeat scroll right top;
  display:block;
  width:290px;
  height:38px;
  text-indent:-99999px;
 }

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}


.h4orange{ 
  color: #FF8400;
  border-bottom: #CCC 1px dotted;
  text-indent: 3px;
  font-size: 1.2em;
  margin: 20px 10px 10px 10px;
 }

.h4orange span{ 
  color: #333333;
  font-weight: normal;
 }

.licencelist {
  margin:0 50px 20px 50px;
  padding:0 0 1px 0;
  font-size:1.3em;
  line-height:1.7em;
}