@charset "UTF-8";
/* ioi */

/*▼pagebody_ioi関連*/
#pagebody_ioi {
width: 780px;
height: auto;
margin: 0px;
padding: 0px;
background: url(../img/ioi/bg_pagebody_ioi.gif) bottom left no-repeat #E0E0E0;
}
/*▲pagebody_ioi関連*/

/*▼フォント関連*/
.font_9gray {
margin: 5px 0px;
font-size: 10px;
color: #666;
}
.font_10gray {
margin: 5px 0px;
font-size: 10px;
color: #666;
}
/*▲フォント関連*/

/*▼sidenavi_ioi関連*/
#sidenavi_ioi {
	width: 175px;
	height: 500px;
	margin: 0px;
	padding: 10px;
	background: url(../img/ioi/bg_sidenavi_ioi.jpg) repeat-x;
	float: left;
}
h2#title_ioimage {
width: 175px;
height: 60px;
margin: 0px 0px 10px 0px;
background-image: url(../img/ioi/sidenavi_logo_ioi.gif);
display: block;
}
h2#title_ioimage span {
display: none;
}
#sidenavi_ioi #ioibox a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioibox_off.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioibox a:hover, #ioibox_on a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioibox_on.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioicam a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioicam_off.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioicam a:hover, #ioicam_on a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioicam_on.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioiware a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioiware_off.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioiware a:hover, #ioiware_on a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioiware_on.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioisamplemovie a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioisamplemovie_off.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioisamplemovie a:hover, #ioisamplemovie_on a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioisamplemovie_on.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioicatalog a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioicatalog_off.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioicatalog a:hover, #ioicatalog_on a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioicatalog_on.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioiresource a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioiresource_off.gif) no-repeat;
display: block;
}
#sidenavi_ioi #ioiresource a:hover, #ioiresource_on a {
width: 175px;
height: 30px;
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(../img/ioi/button_ioiresource_on.gif) no-repeat;
display: block;
}
#sidenavi_ioi span {
display: none;
}

#pagebody_ioi #sidenavi_ioi ul ul#product_list {
background: none;
margin: 0px 0px 10px 0px;
font-size: 10px;
text-align: right;
}
#pagebody_ioi #sidenavi_ioi ul ul#product_list a {
display: inline;
background: none;
height: auto;
font-size: 10px;
text-align: right;
font-family: Verdana, Geneva, sans-serif;
line-height: 1.5em;
}



/*▲sidenavi_ioi関連*/

/*▼contents_ioi関連*/
#contents_ioitop {
width: 555px;
height: auto;
margin: 0px;
padding: 255px 0px 30px 30px;
background: url(../img/ioi/ioitop_pic.jpg) no-repeat #FFFFFF;
float: right;
}



#contents_ioi {
width: 555px;
height: auto;
margin: 0px;
padding: 60px 0px 30px 30px;
background: url(../img/ioi/bg_ioi_deco.jpg) no-repeat #FFFFFF;
float: right;
}
h3.title_ioitop01 {
width: 555px;
height:30px;
margin: 0px 0px 20px 0px;
background: url(../img/ioi/title_ioitop01.gif) no-repeat;
display: block;
}
h3.title_ioitop02 {
width: 555px;
height:30px;
margin: 0px 0px 20px 0px;
background: url(../img/ioi/title_ioitop02.gif) no-repeat;
display: block;
}
h3.title_ioitop03 {
width: 555px;
height:30px;
margin: 0px 0px 20px 0px;
background: url(../img/ioi/title_ioitop03.gif) no-repeat;
display: block;
}
h3.title_ioitop04 {
width: 555px;
height:30px;
margin: 0px;
background: url(../img/ioi/title_ioitop04.gif) no-repeat;
display: block;
}
h3.title_ioitop05 {
width: 555px;
height:30px;
margin: 20px 0px 20px 0px;
background: url(../img/ioi/title_ioitop05.gif) no-repeat;
display: block;
}

.margin-right30 {
margin: 0px 35px 20px 10px;
}
.margin-right30 ul li {
margin-bottom: 10px;
padding-left: 20px;
background: url(../img/ioi/deco_li_ioi.gif) top left no-repeat;
}
.margin-right30_half {
margin: 0px 35px 20px 10px;
float: left;
}
.margin-right30_half ul li {
margin-bottom: 3px;
padding-left: 20px;
background: url(../img/ioi/deco_li_ioi.gif) top left no-repeat;
}

h4.title_ioitop02-1 {
width: 555px;
height:30px;
margin: 0px;
background: url(../img/ioi/title_ioitop_02-1.jpg) no-repeat;
display: block;
}
h4.title_ioitop02-1 span {
display: none;
}

.ioitop_middle {
width: 525px;
height: auto;
margin: 0px 0px 15px 0px;
padding: 0px;
}
.ioitop_middle_left {
width: 250px;
height: auto;
margin: 0px;
padding: 0px;
float: left;
}
.ioitop_middle_right {
width: 250px;
height: auto;
margin: 0px;
padding: 0px;
float: right;
}
#ioitop02-3 {
width: 555px;
height: 88px;
margin: 0px 0px 20px 0px;
padding: 0px;
background: url(../img/ioi/pic_ioitop_02-3.jpg) top left no-repeat;
}
#ioitop02-3 ul {
display: none;
}

#function_top {
margin: 0px;
padding: 20px 29px 10px 29px;
width: 467px;
height: auto;
background: url(../img/ioi/bg_5function_middle.gif) repeat-y;
}
#function_bottom {
margin: 0px 0px 10px 0px;
padding: 0px;
width: 525px;
height: 10px;
background: url(../img/ioi/bg_5function_bottom.gif) no-repeat;
}
#function_top ul li#function01 {
display: block;
margin: 0px 0px 20px 0px;
padding: 45px 0px 0px 0px;
background: url(../img/ioi/5function_01.jpg) no-repeat;
}
#function_top ul li#function02 {
display: block;
margin: 0px 0px 20px 0px;
padding: 45px 0px 0px 0px;
background: url(../img/ioi/5function_02.jpg) no-repeat;
}
#function_top ul li#function03 {
display: block;
margin: 0px 0px 20px 0px;
padding: 45px 0px 0px 0px;
background: url(../img/ioi/5function_03.jpg) no-repeat;
}
#function_top ul li#function04 {
display: block;
margin: 0px 0px 20px 0px;
padding: 45px 0px 0px 0px;
background: url(../img/ioi/5function_04.jpg) no-repeat;
}
#function_top ul li#function05 {
display: block;
margin: 0px;
padding: 45px 0px 0px 0px;
background: url(../img/ioi/5function_05.jpg) no-repeat;
}

#function_top ul li span {
visibility: hidden;
}


h3#title_ioibox {
width: 300px;
height:52px;
margin: 0px;
background: url(../img/ioi/title_ioibox.gif) no-repeat;
display: block;
float: left;
}
h3#title_ioibox span, h3.title_ioitop01 span, h3.title_ioitop02 span, h3.title_ioitop03 span, h3.title_ioitop04 span, h3.title_ioitop05 span{
display: none;
}
h3#title_ioicam {
width: 300px;
height:52px;
margin: 0px;
background: url(../img/ioi/title_ioicam.gif) no-repeat;
display: block;
float: left;
}
h3#title_ioicam span {
display: none;
}
h3#title_ioiware {
width: 400px;
height:52px;
margin: 0px;
background: url(../img/ioi/title_ioiware.gif) no-repeat;
display: block;
float: left;
}
h3#title_ioiware span {
display: none;
}
h3#title_ioiware_spec {
width: 520px;
height:32px;
margin: 0px;
background: url(../img/ioi/title_ioiware_spec.gif) no-repeat;
display: block;
}
h3#title_ioiware_spec span {
display: none;
}

h3#title_ioiresource {
width: 180px;
height:52px;
margin: 0px;
background: url(../img/ioi/resource/title_resource.gif) no-repeat;
display: block;
float: left;
}
h3#title_ioiresource span {
display: none;
}
h3#title_samplemovie_ioi {
	width: 200px;
	height: 30px;
	margin: 0px 0px 10px 0px;
	background: url(../img/ioi/title_samplemovie_ioi.png) no-repeat;
	display: block;
	float: left;
}
h3#title_samplemovie_ioi span {
display: none;
}
h3#title_catalog_ioi {
width: 200px;
height: 30px;
margin: 0px;
background: url(../img/ioi/resource/title_resouce_ioi.png) no-repeat;
display: block;
float: left;
}
h3#title_catalog_ioi span {
display: none;
}


#contents_ioi ul.spec {
margin: 32px 30px 0px 0px;
float: right;
display: inline;
}
#contents_ioi ul.spec li a {
width: 99px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(../img/common/button_spec_off.gif) no-repeat;
display: block;
}
#contents_ioi ul.spec li a:hover {
width: 99px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(../img/common/button_spec_on.gif) no-repeat;
display: block;
}
#contents_ioi ul.spec li span {
display: none;
}


#resourcenavi {
width: 300px;
height: 20px;
margin: 32px 30px 0px 0px;
float: right;
display: inline;
}
#resourcenavi ul li {
float: left;
display: inline;
}
#resourcenavi ul li#movie a {
width: 99px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(../img/common/button_movie_off.gif) no-repeat;
display: block;
}
#resourcenavi ul li#movie a:hover {
width: 99px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(../img/common/button_movie_on.gif) no-repeat;
display: block;
}
#resourcenavi ul li#catalog a {
width: 99px;
height: 20px;
margin: 0px 0px 0px 1px;
padding: 0px;
background: url(../img/common/button_catalog_off.gif) no-repeat;
display: block;
}
#resourcenavi ul li#catalog a:hover {
width: 99px;
height: 20px;
margin: 0px 0px 0px 1px;
padding: 0px;
background: url(../img/common/button_catalog_on.gif) no-repeat;
display: block;
}
#resourcenavi ul li#doc a {
width: 99px;
height: 20px;
margin: 0px 0px 0px 1px;
padding: 0px;
background: url(../img/common/button_doc_off.gif) no-repeat;
display: block;
}
#resourcenavi ul li#doc a:hover {
width: 99px;
height: 20px;
margin: 0px 0px 0px 1px;
padding: 0px;
background: url(../img/common/button_doc_on.gif) no-repeat;
display: block;
}
#resourcenavi ul li#movie span, #resourcenavi ul li#catalog span, #resourcenavi ul li#doc span {
display: none;
}


#contents_ioi h4.ioibox {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/h4_title_ioibox_encorder.gif) no-repeat;
}
#contents_ioi h4.ioicam {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/h4_title_ioibox_encorder.gif) no-repeat;
}
#contents_ioi .ioibox_top {
width: 555px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(../img/ioi/bg_ioibox_top.gif) no-repeat;
}
#contents_ioi h4.ioiware {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/h4_title_ioiware.gif) no-repeat;
}
#contents_ioi h4 span {
display: none;
}


h4.movieh4 {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/resource/title_resource_movie.gif) no-repeat;
}
h4.catalogh4 {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/resource/title_catalog.png) no-repeat;
}
h4.doch4 {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/resource/title_documentation.png) no-repeat;
}
h4.resource4 {
width: 555px;
height:18px;
margin: 10px 0px 20px 0px;
background: url(../img/ioi/resource/title_resource.png) no-repeat;
}




#contents_ioi .ioibox_middle {
width: 525px;
height: auto;
margin: 0px;
padding: 0px;
background: url(../img/ioi/bg_ioibox_middle.gif) ;
}
#contents_ioi .ioibox_middle .ioibox_middle_left {
width: 210px;
height: auto;
margin: 0px 25px 0px 0px;
padding: 0px 20px 0px 20px;
float: left;
}
#contents_ioi .ioibox_middle .ioibox_middle_right {
width: 210px;
height: auto;
margin: 0px;
padding: 0px 20px 0px 20px;
float: right;
}
#contents_ioi .ioibox_middle img {
margin-bottom: 10px;
}
#contents_ioi .ioibox_bottom {
width: 555px;
height: 20px;
margin: 0px 0px 10px 0px;
padding: 0px;
background: url(../img/ioi/bg_ioibox_bottom.gif) no-repeat;
}
.page_top {
margin-right: 30px;
text-align: right;
}

#contents_ioi .ioicam_top {
width: 555px;
height: 20px;
margin: 0px;
padding: 0px;
}
#contents_ioi .ioicam_middle {
width: 525px;
height: auto;
margin: 10px 0px 0px 0px;
padding: 10px 0px 0px 0px;
}
#contents_ioi .ioicam_middle .ioicam_middle_left {
width: 250px;
height: auto;
margin: 0px 25px 0px 0px;
padding: 0px;
float: left;
}
#contents_ioi .ioicam_middle .ioicam_middle_right {
width: 250px;
height: auto;
margin: 0px;
padding: 0px;
float: right;
}
#contents_ioi .ioicam_middle img {
margin-bottom: 10px;
}
#contents_ioi .ioicam_bottom {
width: 555px;
height: 20px;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#contents_ioi p.page_top {
margin-right: 30px;
text-align: right;
}

.ioi_font12bold {
display: block;
font-size: 14px;
font-weight: bold;
color: #900;
margin-bottom: 10px;
}








/*▲contents_ioi関連*/