
@charset "utf-8";
/*=============================================================
PAGE Layout
=============================================================*/
/* MAIN Layout
-------------------------------------------------------------*/
#contentsMain{
	width:720px;
	float:left;
	padding:35px 0 60px;
}
#product #contentsMain{
	width:676px;
	float:left;
	padding:35px 0 60px;
}
#contentsMain.full,
#product #contentsMain.full{
	width:970px;
	float:none;
	clear:both;
}
/* Side Layout
-------------------------------------------------------------*/
#contentsSide{
	width:240px;
	float:right;
	padding:35px 0 60px;
}
#column-right #contentsSide{
	width:240px;
	float:right;
	padding:0 0 60px;
}
/*=============================================================
TTL Layout
=============================================================*/
/* H1
-------------------------------------------------------------*/
body div#pageTtl,
#contents #pageTtl{
	margin-bottom:35px;
}
body div#pageTtl h1,
#contents #pageTtl h1{
	padding:20px 0 17px 19px;
	border-left:1px solid #000;
	font-size:28px;
	font-weight:normal;
	color:#000;
	margin:0;
	background:none;
	line-height:1.5 !important;
}
#contents #pageTtl.ttlBtn h1{
	display:inline-block;
	float:left;
}
#contents #pageTtl h1 span.caption {
	padding:0;
	background: none;
	font-size:12px;
	display: block;
	margin-bottom:5px;
}


body#news div#contents h1.newprod,
body#news div#contents h1.press,
body#news div#contents h1.news,
body#news div#contents h1.kakaku,
body#news div#contents h1.oshirase{
	padding:20px 0 17px 19px;
	border-left:1px solid #000;
	font-size:28px;
	font-weight:normal;
	color:#000;
	margin:0;
	background:none;
	width:auto;
	line-height:1.5 !important;
}
body#news div#contents h1.news{
	margin-bottom:30px;
}
body#news div#contents h1.newprod span,
body#news div#contents h1.press span,
body#news div#contents h1.news span,
body#news div#contents h1.kakaku span,
body#news div#contents h1.oshirase span{
	background:none;
	display:inline-block;
}
body#news div#contents h1.newprod span.year,
body#news div#contents h1.press span.year,
body#news div#contents h1.news span.year,
body#news div#contents h1.kakaku span.year,
body#news div#contents h1.oshirase span.year{
	position: static;
	display: inline-block;
	font-weight: normal;
	padding-left: 45px;
	font-size: 28px;
	background: url(/https/www.iodata.jp/shared/img/ico_surcle_news_ttl.png) no-repeat 20px 16px;
}

/* H2
-------------------------------------------------------------*/
#contents h2.subtitle{
	margin-top:35px;
	padding:10px 12px 7px 12px;
	border-top:3px solid #001eaa;
	border-bottom:1px solid #999;
	font-size:18px;
	color:#001eaa;
	background:none;
}
#contents #listArea h2{
	margin-top:35px;
	padding:10px 12px 7px 12px;
	border-top:3px solid #000;
	border-bottom:1px solid #999;
	font-size:18px;
	color:#000;
	background:none;
	font-weight:normal;
	background-color:#eee;
}
#contents h2.surcleLine{
	font-size:21px;
	line-height: 1.0;
	background: url(/https/www.iodata.jp/shared/img/bg_line_dotX_2px_black.png) repeat-x right center;
	font-weight:normal;
}
#contents h2.surcleLine span{
	display: inline-block;
	background: #fff url(/https/www.iodata.jp/shared/img/ico_surcle.png) no-repeat left center;
	padding-left:25px;
	padding-right:10px;
	padding-top:2px;
}
#contents .ttlBtnRight{
	background: url(/https/www.iodata.jp/shared/img/bg_line_dotX_2px_black.png) repeat-x right center;
}
#contents .ttlBtnRight h2.surcleLine{
	float:left;
}
#contentsSide h2.bar{
	padding: 17px 0 10px 0px;
	font-size: 16px;
	color: #4498ce;
	background: url(/https/www.iodata.jp/shared/img/side_bar_blue.png) repeat-x left top;
}
/*=============================================================
a
=============================================================*/
/* a
-------------------------------------------------------------*/
a.btn{
	display: inline-block;
	padding: 7px 10px 5px 25px;
	background: #999 url(/https/www.iodata.jp/shared/img/arw_white.png) no-repeat 10px center;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	color:#FFF !important;
	line-height:1.0;
}
#product #contents #pageTtl.ttlBtn a.btn{
	display: inline-block;
	margin-top:20px;
	padding: 7px 10px 5px 25px;
	background: #999 url(/https/www.iodata.jp/shared/img/arw_white.png) no-repeat 10px center;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	color:#FFF !important;
	line-height:1.0;
}
#product #contents #pageTtl.ttlBtn a.btn.print{
	padding: 7px 10px 5px 35px;
	background: #d53400 url(/https/www.iodata.jp/shared/img/ico_print.png) no-repeat 10px center;
}
#product #contents #pageTtl.ttlBtn a#cLnk_spf,
#contents .ttlBtn a.btn,
#contents .ttlBtnRight a.btn{
	float:right;
}
#product #contents #pageTtl.ttlBtn a#cLnk_spf{
	margin-top:20px;
}
#product #contents #listArea p.img a.btn{
	display: block;
	padding: 7px 10px 5px 15px;
	margin:10px 5px 0 5px;
	width:77px;
	background: #000 url(/https/www.iodata.jp/shared/img/arw_white.png) no-repeat 10px center;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	color:#FFF !important;
	line-height:1.0;
	text-align:center;
}
#product #contents #listArea p.img a.btn-red{
	display: block;
	padding: 7px 10px 5px 15px;
	margin:10px 5px 0 5px;
	width:77px;
	background: #d53400 url(/https/www.iodata.jp/shared/img/arw_white.png) no-repeat 10px center;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	color:#FFF !important;
	line-height:1.0;
	text-align:center;
}
/*=============================================================
BOX
=============================================================*/
/* ul BNR
-------------------------------------------------------------*/
#contentsSide .boxLinkLine{
	margin:5px 0;
	padding-top:5px;
	border-top:1px solid #999;
	text-align:right;
}
/*=============================================================
ul
=============================================================*/
/* ul BNR
-------------------------------------------------------------*/
#contentsSide ul.boxBnrList li{
	margin-bottom:5px;
}
#contentsSide ul.boxBnrList li img{
	vertical-align:bottom;
}
#contentsSide ul.boxBnrList li a:hover img{
 opacity: 0.6;  
	filter: alpha(opacity=60);  
}
/* 注意書きリスト 
-------------------------------------------------------------*/
ul.product-attention {
	padding-top:10px;
	margin:0px 0px 30px;
	line-height:1.6;
	font-size:12px;
}
ul.product-attention a {
	color: #4F9BD8;
}
ul.product-attention img {
	padding-right: 5px;
	vertical-align: middle;
}
ul.disc{
	margin-left:1.5em;
}
ul.disc li{
	list-style:disc;
}
ul.listAtn{
	text-indent:-1em;
}
ul.listAtn li{
	padding-left:1em;
}
ul.disc li{
	list-style:disc;
}
ol.num{
	margin-left:1.8em;
}
ol.num li{
	list-style:decimal;
}
/*=============================================================
table
=============================================================*/
/* table
-------------------------------------------------------------*/
body table.nonLine{
	border:none !important;
}
body table.nonLine th,
body table.nonLine td{
	border:none !important;
}





/*=============================================================
MENU
=============================================================*/
/* ul BNR
-------------------------------------------------------------*/
#column-right #contentsSide dl#localMenu {
	padding:0 0 10px;
}

#column-right dl {
	margin-top:20px;
}
#product #contentsSide a img{
	vertical-align:bottom;
}
#product #contentsSide a{
	display:block;
	margin-top:0px;
}
#contentsSide div{
margin-top:5px !important;
margin-bottom:0px !important;
}
#contentsSide #localMenu{
	margin-bottom:25px;
}
#contentsSide #localMenu dt{
	padding:8px 13px;
	background:#e5e5e5;
}
#contentsSide #localMenu dt span.ttlLinkNon,
#contentsSide #localMenu dt a{
	padding: 9px 13px 6px 13px;
	display: block;
	font-size: 16px;
	color: #333;
	background: url(/https/www.iodata.jp/shared/img/lm_bg_ttl.png) no-repeat left center;
	margin:0;
}
#contentsSide #localMenu .subTtl{
	margin: 0;
	padding: 9px 8px 7px 8px;
	border-top: 2px solid #001eaa;
	border-bottom: 1px dotted #333;
	font-size: 15px;
	color:#001eaa;
}
#contentsSide #localMenu .subTtl span{
	display: block;
	padding-left: 21px;
	background: url(/https/www.iodata.jp/shared/img/ico_blue.png) no-repeat left 2px;
}
#contentsSide #localMenu .subTtl a{
	display: block;
	padding-left: 21px;
	background: url(/https/www.iodata.jp/shared/img/arw_black.png) no-repeat left 2px;
}
#contentsSide #localMenu dd li{
	padding-bottom:1px;
	border-bottom:1px dotted #666;
	font-size:13px;
}
#contentsSide #localMenu dd li.lineNone{
	border-bottom:none;
}
#contentsSide #localMenu dd li a{
	padding:12px 10px 7px 29px;
	color:#333;
	position:relative;
	background-color: #ececec;
	background-image: -moz-linear-gradient(top, #ffffff, #ececec);
	background-image: -ms-linear-gradient(top, #ffffff, #ececec);
	background-image: -o-linear-gradient(top, #ffffff, #ececec);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#ececec));
	background-image: -webkit-linear-gradient(top, #ffffff, #ececec);
	background-image: linear-gradient(top, #ffffff, #ececec);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ececec', GradientType=0)";
	line-height:1.15;
	display:block;
	margin:0;
}
#contentsSide #localMenu dd li a:after{
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	position:absolute;
	top: 50%;
	left: 13px;
	margin-top:-3px;
	background: url(/https/www.iodata.jp/shared/img/arw_black_small.png) no-repeat left center;
}
#contentsSide #localMenu dd li.brand a{
	padding:0px;
}
#contentsSide #localMenu dd li.brand a:after{
	background:none;
	z-index:-10;
}
#contentsSide #localMenu li img{
	margin:0 auto;
	vertical-align:bottom;
}
#contentsSide #localMenu dd #bnrMenu{
	padding-top:35px;
}
#contentsSide #localMenu dd #bnrMenu li{
	padding-bottom:10px;
	border-bottom:none;
	line-height:1.5;
}
#contentsSide #localMenu dd #bnrMenu li.center{
	text-align:center;
}
#contentsSide #localMenu dd #bnrMenu li a{
	padding:0px;
	background:none;
	background-color:none;
	background-image:none;
	margin-bottom:5px;
}
#contentsSide #localMenu dd #bnrMenu li a:after{
	background:none;
	z-index:-10;
}
#contentsSide #localMenu dd #bnrMenu li.boxBnr a{
	border:1px solid #CCC;
	padding:12px 10px 7px 29px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background-color: #ececec;
	background-image: -moz-linear-gradient(top, #ffffff, #ececec);
	background-image: -ms-linear-gradient(top, #ffffff, #ececec);
	background-image: -o-linear-gradient(top, #ffffff, #ececec);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#ececec));
	background-image: -webkit-linear-gradient(top, #ffffff, #ececec);
	background-image: linear-gradient(top, #ffffff, #ececec);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ececec', GradientType=0)";
}
#contentsSide #localMenu dd #bnrMenu li.boxBnr a:after{
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	position:absolute;
	top: 50%;
	left: 13px;
	margin-top:-3px;
	background: url(/https/www.iodata.jp/shared/img/arw_black_small.png) no-repeat left center;
	z-index:2;
}
#contentsSide #localMenu a{
	text-decoration:none;
}
#contentsSide #localMenu a:hover{
	text-decoration:underline;
}

/*=============================================================
NEWS
=============================================================*/
/* topicdate
-------------------------------------------------------------*/
body#news div#contents p.topicdate{
	margin-top:10px;
	margin-bottom:35px;
	padding:5px 10px 3px 35px;
	text-align:left;
	border-top:1px dotted #999;
	border-bottom:1px dotted #999;
}



/*=============================================================
COMMON LAYOUT
=============================================================*/
/* COMMON LAYOUT
-------------------------------------------------------------*/
.clmBox{
	clear:both;
	line-height:1.6;
}
.clmBox a{
	color:#4f9bd8;
}
.clmBox .clmBoxRound{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #DBD7D7;
	padding:14px;
	display:block;
}
.clmBox .clmBoxRoundInner {
	width:100%;
	display:table;
}
.clmBox .clmBoxRoundTtlGrade {
	margin:-14px -14px 14px !important;
	padding:0 !important;
	border:none !important;
	border-bottom:1px dotted #CCCCCC !important;
	background-color: #efefef;
	background-image: -moz-linear-gradient(top, #efefef, #fdfdfd);
	background-image: -ms-linear-gradient(top, #efefef, #fdfdfd);
	background-image: -o-linear-gradient(top, #efefef, #fdfdfd);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#efefef), to(#fdfdfd));
	background-image: -webkit-linear-gradient(top, #efefef, #fdfdfd);
	background-image: linear-gradient(top, #efefef, #fdfdfd);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#fdfdfd', GradientType=0)";
}
.clmBox .clmBoxRoundTtlGrade span {
	padding:8px 14px 7px;
	border:1px solid #FFF;
	border-bottom:none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	display:block;
	font-size:14px !important;
}
.clmBox .clmBoxRoundInner .clmBoxRoundLeft {
	display:table-cell;
	vertical-align:top;
	padding-right:14px;
}
.clmBox .clmBoxRoundInner .clmBoxRoundRight {
	display:table-cell;
	vertical-align:top;
	border-left:1px dotted #CCCCCC;
	padding-left:14px;
	width:50%;
}

.clmBox dl.contactBox dt{
	margin-bottom: 5px;
	padding: 2px 0px 0px 12px;
	border-left: 3px solid #333;
	line-height: 1.2;
	font-weight:bold;
}
.clmBox dl.contactBox dd{
	padding: 0px 0px 0px 15px;
}
.clmBox ul.pdfBox{
	padding-bottom:14px;
	margin:0;
}
.clmBox ul.pdfBox li{
	background:url(/https/www.iodata.jp/common/img_v2/icon_pdf.gif) no-repeat left top;
	padding-left:23px;
	color:#4f9bd8;
	line-height:1.2;
	list-style:none !important;
}
.clmBox ul.pdfBox li a{
	color:#4f9bd8;
}
.clmBox dl.pdfBox{
	border-top:1px dotted #CCCCCC;
	padding-top:14px;
	display:table;
	width:100%;
	margin:0;
}
.clmBox dl.pdfBox dt{
	display:table-cell;
	vertical-align:top;
	width:125px;
}
.clmBox dl.pdfBox dd{
	display:table-cell;
	vertical-align:top;
	font-size:13px;
}

.clmBox .clmBoxRoundGray{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border:1px solid #DBD7D7;
	padding:14px;
	display:block;
	background-color:#f5f5f5;
}
.clmBox .clmBoxRoundGrayInner {
	width:100%;
	display:table;
}
.clmBox .clmBoxRoundGray .clmBoxRoundGrayLeft {
	display:table-cell;
	vertical-align:top;
	padding-right:14px;
}
.clmBox .clmBoxRoundGray .clmBoxRoundGrayRight {
	display:table-cell;
	vertical-align:top;
}
.clmBox .clmBoxRoundGray .img200 .clmBoxRoundGrayRight {
	width:200px;
}
.clmBox .clmBoxRoundGray .img200 .clmBoxRoundGrayRight img {
	max-width:200px;
}
.clmBox .clmBoxRoundGray .img300 .clmBoxRoundGrayRight {
	width:300px;
}
.clmBox .clmBoxRoundGray .img300 .clmBoxRoundGrayRight img {
	max-width:300px;
}
.clmBoxPhotoFull{
	clear:both;
}
.clmBoxPhotoFull .photoBox{
	clear:both;
	text-align:center;
}
.clmBoxPhotoFull .photoBox img{
	max-width:676px !important;
	height:auto;
}
.clmBoxPhotoRight200{
	clear:both;
}
.clmBoxPhotoRight200 .txtBox{
	float:left;
	width:456px;
}
.clmBoxPhotoRight200 .photoBox{
	float:right;
	width:200px;
	text-align:center;
}
.clmBoxPhotoRight200 .photoBox img{
	max-width:200px !important;
	height:auto;
}
.clmBoxPhotoRight300{
	clear:both;
}
.clmBoxPhotoRight300 .txtBox{
	float:left;
	width:356px;
}
.clmBoxPhotoRight300 .photoBox{
	float:right;
	width:300px;
	text-align:center;
}
.clmBoxPhotoRight300 .photoBox img{
	max-width:300px !important;
	height:auto;
}
.clmBoxPhotoRight{
	clear:both;
}
.clmBoxPhotoRight .txtBox{
}
.clmBoxPhotoRight .photoBox{
	float:right;
	text-align:center;
	padding-left:20px;
}
.clmBoxTableFull{
	clear:both;
}
.clmBoxTableFull .tableBox{
	clear:both;
}
.clmBoxTableFull .tableBox table.lineTable{
	clear:both;
	width:100%;
}
.clmBoxTableFull .tableBox table.lineTable th,
.clmBoxTableFull .tableBox table.lineTable td{
	clear:both;
	border:1px solid #CCC;
}
.clmBoxTableFull .tableBox table.lineTable th{
	clear:both;
	border:1px solid #CCC;
	background: #E0E0E0;
	text-align:left;
}
.clmBoxTable300{
	clear:both;
}
.clmBoxTable300 .txtBox{
	float:left;
	width:356px;
}
.clmBoxTable300 .tableBox{
	float:right;
	width:300px;
}
.clmBoxTable300 .tableBox table.lineTable{
	clear:both;
	width:100%;
}
.clmBoxTable300 .tableBox table.lineTable th,
.clmBoxTable300 .tableBox table.lineTable td{
	clear:both;
	border:1px solid #CCC;
}
.clmBoxTable300 .tableBox table.lineTable th{
	clear:both;
	border:1px solid #CCC;
	background: #E0E0E0;
	text-align:left;
}

.clmBox a.arwDef{
	padding-left: 12px;
	display: block;
	background: url(/https/www.iodata.jp/shared/img/arw_black_small.png) no-repeat left 6px;
	text-decoration:none;
}
.clmBox a.arwDef:hover{
	text-decoration:underline;
}
.clmBox .tableBoxFull{
	clear:both;
	width:100%;
	line-height:1.6;
}
.clmBox .tableBoxFull table.tableFullLine{
	clear:both;
	width:100%;
}
.clmBox .tableBoxFull table.tableFullLine th,
.clmBox .tableBoxFull table.tableFullLine td{
	clear:both;
	border:1px solid #CCC;
	padding:5px;
}
.clmBox .tableBoxFull table.tableFullLine th{
	clear:both;
	border:1px solid #CCC;
	background: #E0E0E0;
	text-align:left;
}
.clmBox .tableBoxFull table.tableFullLine th a {
    color: #333 !important;
}

@media print {
div#contents {
 width:100% !important;
}
}




