@charset "utf-8";
@import "base.css?20140101";

/*----------------------------------
#selector.home #nav li.nav_01 a { ;}
#selector.concept #nav li.nav_02 a { ;}
#selector.high_speed #nav li.nav_03 a { ;}
#selector.easy #nav li.nav_04 a { ;}
#selector.low_price #nav li.nav_05 a { ;}
#selector.application #nav li.nav_06 a { ;}
#selector.spec #nav li.nav_07 a { ;}
#selector.faq #nav { ;}
#selector.support #nav { ;}
----------------------------------*/

/*----------------------------------
	share 
----------------------------------*/
.block { display: block; position: relative;}
.logo_optex { display: block; width: 80px ; height: 40px ; background: url("../img/share/logo_optex-fa.gif") no-repeat 0 0; text-indent: -999em; position: absolute; top: 20px; right: 20px; z-index: 100;}

/*----------------------------------
	home 
----------------------------------*/
#topImg { position: relative;}
#baseImg { height: 405px; background: url(../img/home/h2_01.jpg) no-repeat;}
#fadeImg {
	position: absolute;
	top: 300px;
	left: 0;
	width: 950px;
	height: 80px;
	text-align: center;
}
#fadeImg a { display: inline-block; height: 80px; margin: 0 10px;}

#selector.home .blockA { width: 950px ; height: 405px ; overflow: hidden;}

#selector.home .blockB { width: ; margin: 0 50px 0;}
#selector.home .blockB dl { display: block; float: left; width: 205px; height: 230px; margin-left: 10px;}
#selector.home .blockB dl.dl_01 { margin-left: 0;}
#selector.home .blockB dl.dl_01 a{ background: url("../img/home/dl_01.gif") no-repeat 0 0;}
#selector.home .blockB dl.dl_02 a{ background: url("../img/home/dl_02.gif") no-repeat 0 0;}
#selector.home .blockB dl.dl_03 a{ background: url("../img/home/dl_03.gif") no-repeat 0 0;}
#selector.home .blockB dl.dl_04 a{ background: url("../img/home/dl_04.gif") no-repeat 0 0;}
#selector.home .blockB dt a{ display: block; width: 205px; height: 230px; text-indent: -999em;}
#selector.home .blockB dd { display: none;}

/*----------------------------------
	concept 
----------------------------------*/
#selector.concept .blockA { background: url("../img/concept/blockA.jpg") no-repeat center 10px;}
#selector.concept .blockA h2 { height: 140px ; visibility: hidden;}
#selector.concept .blockA dd p{ width: 370px ; padding-left: 223px; line-height: 1.5;}

#selector.concept .blockAB { margin: 20px auto 30px; text-align: center;}

#selector.concept .blockB { width: 760px; margin: 0 45px 10px;}
#selector.concept .blockB dl { display: block; float: left; width: 240px; margin-right: 20px;  background: url("../img/concept/dl_bg.gif") no-repeat bottom; padding-bottom: 30px;}
#selector.concept .blockB dl.dl_03 { margin-right: 0;}
#selector.concept .blockB dl dt{ width: 240px; height: 75px; text-indent: -999em;}
#selector.concept .blockB dl dd{ width: 200px; padding: 0 20px; background: url("../img/concept/dd_bg.gif") repeat-y; min-height: 11.5em; height: auto !important; height: 11.5em; }
#selector.concept .blockB dl.dl_01 dt{ background: url("../img/concept/dt_01.gif") no-repeat;}
#selector.concept .blockB dl.dl_02 dt { background: url("../img/concept/dt_02.gif") no-repeat;}
#selector.concept .blockB dl.dl_03 dt { background: url("../img/concept/dt_03.gif") no-repeat;;}
#selector.concept .blockC { width: 760px; margin: 0 45px;}
#selector.concept .h3_01 { margin-bottom: 10px; font-size: 18px;}
#selector.concept .h3_02 { font-size: 18px;}

/*----------------------------------
	high_speed 
----------------------------------*/
#selector.high_speed .blockA { width: ; height: 354px ; background: url("../img/high_speed/blockA.jpg") no-repeat center center; text-indent: -999em;}

#selector.high_speed .blockB { width: 760px; margin: 0 45px 0; background: url("../img/share/blockB_bg.gif") repeat-y center;}
#selector.high_speed .blockB dl { display: block; float: left; width: 230px; margin-right: 35px;}
#selector.high_speed .blockB dl.dl_02 li { margin: 10px 0; }
#selector.high_speed .blockB dl.dl_03 ul { font-size: 10px; }
#selector.high_speed .blockB dl.dl_03 { margin-right: 0;}
#selector.high_speed .blockB img { margin: 10px 0 0; }
#selector.high_speed .blockB .border { border-top: 1px dotted #ccc; padding-top: 10px; margin-top: 10px; }
#selector.high_speed .blockB dl dt { height: 60px; margin-bottom: 15px; text-indent: -999em; }
#selector.high_speed .blockB dl.dl_01 dt { background: url("../img/high_speed/dt_01.gif") no-repeat; }
#selector.high_speed .blockB dl.dl_02 dt { background: url("../img/high_speed/dt_02.gif") no-repeat; }
#selector.high_speed .blockB dl.dl_03 dt { background: url("../img/high_speed/dt_03.gif") no-repeat; }
#selector.high_speed .blockB dd span{ display: inline-block; margin-left: 1em; text-indent: -1em; }

/*----------------------------------
	easy 
----------------------------------*/
#selector.easy .blockA { width: ; height: 200px ; background: url("../img/easy/blockA_bg.gif") no-repeat center center; text-indent: -999em;}

#selector.easy .blockB { width: 760px; margin: 0 45px 0; background: url("../img/easy/blockB_bg.gif") repeat-y center;}
#selector.easy .blockB dt { height: 21px; margin-bottom: 20px;}
#selector.easy .blockB dt strong { display: none;}
#selector.easy .blockB dl.dl_01 dt { display: block; background: url("../img/easy/dt_01.gif") no-repeat;}
#selector.easy .blockB dl.dl_02 dt { display: block; background: url("../img/easy/dt_02.gif") no-repeat;}
#selector.easy .blockB dl.dl_01 { display: block; float: left; width: 350px;}
#selector.easy .blockB dl.dl_01 img { margin-right: 10px;}
#selector.easy .blockB dl.dl_02 { display: block; float: right; width: 350px;}

#selector.easy .blockC { width: 760px; margin: 30px 45px 0; background: url("../img/easy/blockB_bg.gif") repeat-y center;}
#selector.easy .blockC dt { height: 21px; margin-bottom: 20px;}
#selector.easy .blockC dt strong { display: none;}
#selector.easy .blockC dl.dl_03 dt { display: block; background: url("../img/easy/dt_03.gif") no-repeat;}
#selector.easy .blockC dl.dl_04 dt { display: block; background: url("../img/easy/dt_04.gif") no-repeat;}
#selector.easy .blockC dl.dl_03 { display: block; float: left; width: 350px;}
#selector.easy .blockC dl.dl_03 img { margin: 0 5px; }
#selector.easy .blockC dl.dl_04 { display: block; float: right; width: 350px;}
#selector.easy .blockC dl.dl_04 img { margin: 0 10px; }
#selector.easy .blockC dl.dl_03 ul{ margin-top: 10px; display: block; width: 254px; padding: 0 0 0; list-style: none; text-align: left; }
#selector.easy .blockC dl.dl_03 ul li{ display: inline; }
#selector.easy .blockC dl.dl_03 ul li a {/*  width: 6em; */ color: #64403b; font-weight: bold; display: inline-block; background: url("../img/share/arrow_grey_s.gif") no-repeat left center; padding: 0 0 0 10px; margin-right: 5px; }
#selector.easy .blockC dl.dl_04 ul{ margin-top: 75px; display: block; width: 254px; padding: 0 0 0; list-style: none; text-align: left; }
#selector.easy .blockC dl.dl_04 ul li{ display: inline; }
#selector.easy .blockC dl.dl_04 ul li a {/*  width: 6em; */ color: #64403b; font-weight: bold; display: inline-block; background: url("../img/share/arrow_grey_s.gif") no-repeat left center; padding: 0 0 0 10px; margin-right: 5px; }

/*----------------------------------
	low_price 
----------------------------------*/
#selector.low_price .blockA { width: ; height: 200px ; background: url("../img/low_price/blockA_bg.gif") no-repeat center center; text-indent: -999em;}

#selector.low_price .blockB { width: 760px; margin: 0 45px 0; background: url("../img/low_price/blockB_bg.gif") repeat-y center;}
#selector.low_price .blockB dt { height: 21px; margin-bottom: 20px;}
#selector.low_price .blockB dt strong { display: none;}
#selector.low_price .blockB dl.dl_01 dt { display: block; background: url("../img/low_price/dt_01.gif") no-repeat;}
#selector.low_price .blockB dl.dl_02 dt { display: block; background: url("../img/low_price/dt_02.gif") no-repeat;}
#selector.low_price .blockB p { height: 7em;}
#selector.low_price .blockB dl.dl_01 { display: block; float: left; width: 350px;}
#selector.low_price .blockB dl.dl_02 { display: block; float: right; width: 350px;}

/*----------------------------------
	application 
----------------------------------*/
#selector.application .blockA { width: ; height: 200px ; background: url("../img/application/blockA_bg.gif") no-repeat center center; text-indent: -999em;}

#selector.application .blockB { width: 760px; margin: 0 45px 0; background: url("../img/share/blockB_bg.gif") repeat-y center;}
#selector.application .blockB dl { display: block; float: left; width: 230px; margin-right: 35px;}
#selector.application .blockB dl img { margin-bottom: 20px;}
#selector.application .blockB dl.dl_03 { margin-right: 0;}
#selector.application .blockB dl.dl_01 dt { display: block; background: url("../img/application/dt_01.gif") no-repeat;}
#selector.application .blockB dl.dl_02 dt { display: block; background: url("../img/application/dt_02.gif") no-repeat;}
#selector.application .blockB dl.dl_03 dt { display: block; background: url("../img/application/dt_03.gif") no-repeat;}
#selector.application .blockB dt { height: 21px; margin-bottom: 20px;}
#selector.application .blockB dt strong { display: none;}

#selector.application .blockB dl p{ min-height: 250px; height: auto !important; height: 250px;}
#selector.application .blockB dl table { margin: 10px 0 0; border-collapse: separate;}
#selector.application .blockB td { padding: 3px 5px; border-bottom: 1px dotted #ccc;}
#selector.application .blockB caption { border-top: 1px dotted #ccc; text-align: center; font-weight: bold; background-color: #ccc; }
#selector.application .blockB td a{ display: block; background: url("../img/share/arrow_grey.gif") no-repeat right center; padding-right: 15px; text-align: right; font-size: 10px; }
#selector.application .blockC a{ width: 784px; display: block; background: url("../img/share/arrow_grey.gif") no-repeat right center; margin-top: 15px; padding-right: 15px; text-align: right; font-size: 14px; }

/*----------------------------------
	spec 
----------------------------------*/
#selector.spec .blockA { height: 11em ; border-bottom: 2px solid #ccc; margin-bottom: 10px; position: relative;}
#selector.spec .blockA h2 { font-size: 18px; position: absolute; top: 5em; left: 20px;}

#selector.spec .blockB { display: block; width: 820px; margin: 0 15px 0; position: relative;}
#selector.spec .blockB p { width: 550px; margin: 0 0 0 10px; }
#selector.spec .blockB table { width: 550px; margin: 0 0 10px 10px; border-collapse: separate;}
#selector.spec .blockB th,#selector.spec .blockB td { padding: 3px 5px; }
#selector.spec .blockB th { text-align: left; vertical-align: top; font-weight: bold; color: #005bac; white-space: nowrap;}
#selector.spec .illust { display: block; width: 219px; height: 254px; position: absolute; bottom: 20px; right: 20px;}
#selector.spec th,#selector.spec td{ border-bottom: 1px dotted #ccc;}
#selector.spec .borderNone { border: 0;}

/*----------------------------------
	faq 
----------------------------------*/
#selector.faq .blockA { width: ; height: 200px ; background: url("../img/faq/blockA_bg.gif") no-repeat center center; text-indent: -999em;}

#selector.faq .blockB { width: 760px; margin: 0 45px 0;}
#selector.faq .blockB dl { width: 100%; }
#selector.faq .blockB dt{ margin: 1em 0 0; font-size: 15px; color: #005bac; }
#selector.faq .blockB dd{ margin: 0 0 0 2em;}
#selector.faq .blockB .h3_01{ margin: 1em 0 0; padding-bottom: 0.5em; border-bottom: 1px solid #ccc; font-size: 15px;}
.floatLeft{ display: block; width: 350px; list-style: circle;}
.floatRight{ display: block; width: 350px; list-style: circle;}
.floatLeft li, .floatRight li { margin: 1em 0 0 1.5em; }

/*----------------------------------
	support 
----------------------------------*/
#selector.support .blockA { width: ; height: 200px ; background: url("../img/support/blockA_bg.gif") no-repeat center center; text-indent: -999em;}

#selector.support .blockB { width: 760px; margin: 0 45px 30px; background: url("../img/share/blockB_bg.gif") repeat-y center;}
#selector.support .blockB dl { display: block; float: left; width: 230px; margin-right: 35px;}
#selector.support .blockB dl.dl_03 { display: block; float: left; margin-right: 0;}
#selector.support .blockB dl.dl_01 a{ display: block; height: 110px ; background: url("../img/support/blockB_dl_01.gif") no-repeat top center; text-indent: -999em;}
#selector.support .blockB dl.dl_02 a{ display: block; height: 110px ; background: url("../img/support/blockB_dl_02.gif") no-repeat top center; text-indent: -999em;}
#selector.support .blockB dl.dl_03 a{ display: block; height: 110px ; background: url("../img/support/blockB_dl_03.gif") no-repeat top center; text-indent: -999em;}
#selector.support .blockB dl.dl_04 a{ display: block; height: 110px ; background: url("../img/support/blockB_dl_04.gif") no-repeat top center; text-indent: -999em;}
#selector.support .blockB dl.dl_05 { display: block; float: left; margin-right: 0;}
#selector.support .blockB dl.dl_05 a{ display: block; height: 110px ; background: url("../img/support/blockB_dl_05.gif") no-repeat top center; text-indent: -999em;}

#selector.support .blockC { width: 760px; margin: 0 45px ; background: url("../img/share/blockB_bg.gif") repeat-y center;}
#selector.support .blockC dl { display: block; float: left; width: 230px; margin-right: 35px;}
#selector.support .blockC dl.dl_03 { display: block; float: left; margin-right: 0;}
#selector.support .blockC dl.dl_03 dd{ margin-top: 110px;}
#selector.support .blockC dl.dl_03 a { display: inline-block; background: url("../img/share/arrow_grey.gif") no-repeat left 0.25em; padding: 0 0 0 15px;}
#selector.support .blockC dl.dl_04 { display: block; float: left; margin-right: 0;}
#selector.support .blockC dl.dl_04 dd p { margin-top: 20px;}
#selector.support .blockC dl.dl_04 dd p a{ display: inline-block; background: url("../img/share/arrow_grey.gif") no-repeat left 0.25em; padding: 0 0 0 15px;}

#selector.support .blockC dl.dl_01 a{ display: block; height: 110px ; background: url("../img/support/blockC_dl_01.gif") no-repeat top center; text-indent: -999em;}
#selector.support .blockC dl.dl_02 a{ display: block; height: 110px ; background: url("../img/support/blockC_dl_02.gif") no-repeat top center; text-indent: -999em;}
#selector.support .blockC dl.dl_04 a{ display: block; height: 110px ; background: url("../img/support/blockB_dl_03.gif") no-repeat top center;}

/*----------------------------------
	download 
----------------------------------*/
#selector.download { width: 100%; padding: 10px 0 0; margin: 0;}
#selector.download #contents { width: 850px; margin: 0 auto; padding: 0; background-image: none;}
#selector.download #header { width: 850px; padding: 0; margin: 0;}
#selector.download #header h1 a { display: block; width: 95px ; height: 2.5em; background: url("../img/download/logo.gif") no-repeat center; text-indent: -999em;}
#selector.download #footer { width: 850px; padding: 0; margin: 0;}
#selector.download #footer p { width: auto;}
#selector.download .optex a{ display: block; width: 80px ; height: 40px ; background: url("../img/share/logo_optex-fa.gif") no-repeat 0 0; text-indent: -999em; position: absolute; top: 20px; right: 20px; z-index: 100;}

#selector.download .blockA { height: 405px; background: url("../img/download/blockA.jpg") no-repeat center bottom;}
#selector.download .blockA h2 { height: 110px ; text-indent: -999em;}
#selector.download .blockA dl { width: 450px; margin-left: 270px;}
#selector.download .blockA a{ display: block; width: 110px ; height: 180px; margin: 0 auto 10px; background: url("../img/download/btn_dl.gif") no-repeat top center; text-indent: -999em;}
#selector.download .blockA a:hover{ background: url("../img/download/btn_dl.gif") no-repeat bottom center;}
#selector.download .blockB { width: 760px; margin: 0 45px 0;}
#selector.download .blockB dl { margin: 10px 0 0; }
#selector.download .blockB dt { margin: 10px 0 0; }
#selector.download .blockB dd ol{ margin-top: 10px; padding: 0 0 0 1.5em; }
#selector.download .blockB dd li{ margin-top: 10px; }

/*----------------------------------
	sequencer 
----------------------------------*/
#selector.sequencer .blockA { background: url("../img/sequencer/blockA_bg.gif") no-repeat bottom;}
#selector.sequencer .blockA h2 { height: 94px ; margin-top: 60px; visibility: hidden;}

#selector.sequencer .blockB { width: 750px; margin: 0 auto 20px; background: url("../img/sequencer/blockB_bg_body.gif") repeat-y center;}
#selector.sequencer .blockB h3{ width: 750px; background: url("../img/sequencer/blockB_bg_head.gif") no-repeat top; padding: 14px 0; text-align: center;}
#selector.sequencer .blockB_body { width: 730px; padding: 0 10px; background: url("../img/sequencer/blockB_bg_bottom.gif") no-repeat bottom;}
#selector.sequencer .blockB dl { display: block; float: left; width: 320px; padding: 0 20px;}
#selector.sequencer .blockB dl dt { display: block; margin-bottom: 5px;}
#selector.sequencer .blockB dl dd{ padding: 0 0 20px;}
#selector.sequencer .blockB dl dd p{ min-height: 5em; height: auto !important; height: 5em; margin-bottom: 10px;}
#selector.sequencer .blockB dl dd img{ display: block; margin: 0 auto;}

#selector.sequencer .blockC { position: relative; width: 750px; background: url("../img/sequencer/blockC_bg_body.gif") repeat-y center; margin: 0 auto;}
#selector.sequencer .blockC h3{ width: 750px; background: url("../img/sequencer/blockC_bg_head.gif") no-repeat 0 50px #fff; padding-bottom: 30px;}
#selector.sequencer .blockC_body { position: relative; width: 710px; padding: 0 20px 10px; background: url("../img/sequencer/blockC_bg_bottom.gif") no-repeat bottom;}
#selector.sequencer .blockC dl { position: relative; display: block;}
#selector.sequencer .blockC dl dt { display: block; margin-bottom: 5px;}
#selector.sequencer .blockC dl dd{ padding: 0;}
#selector.sequencer .blockC dl dd img{ display: block; margin: 0 auto;}
#selector.sequencer .blockC dl.dl_03 { position: relative; z-index: 5; width: 250px; min-height: 20em; height: auto !important; height: 20em; margin-bottom: 30px;}
#selector.sequencer .blockC dl.dl_04 { position: relative; z-index: 5; width: 300px; min-height: 20em; height: auto !important; height: 20em; padding-left: 400px;}
#selector.sequencer .blockC img.blockC_img_01{ position: absolute; bottom: 35em; left: 30px;}
#selector.sequencer .blockC img.blockC_img_02{ position: absolute; bottom: 16em; left: 100px;}

#selector.sequencer .blockC dl.point { display: block; padding: 20px 10px 10px; border: 1px solid #ccc;}
#selector.sequencer .blockC dl.point img.balloon_point{ display: block; position: absolute; top: -20px; left: 10px;}
#selector.sequencer .blockC dl.dl_05.point { position: absolute; top: 0; right: 20px; width: 300px; margin: 60px 0 0;}
#selector.sequencer .blockC dl.dl_05.point p{ margin-bottom: 10px;}
#selector.sequencer .blockC dl.dl_06.point { width: auto; margin: 0 10px 20px;}
#selector.sequencer .blockC dl.dl_06.point dd p{ overflow: hidden;}
#selector.sequencer .blockC dl.dl_06.point .blockC_img_04{ float: right; margin-left: 10px;}

#selector.sequencer .blockD { position: absolute; left: 50px; bottom: 10px; width: 750px; line-height: 1em;}
#selector.sequencer .blockD a { float: right; display: inline-block; background: url("../img/sequencer/arrow_white_s.gif") no-repeat 5px center #0054a9; padding: 5px 5px 5px 20px; font-weight: bold; color: #fff; }

/*----------------------------------
	dsp_sensor 
----------------------------------*/
#selector.dsp_sensor .blockA { background: url("../img/dsp_sensor/blockA_bg.gif") no-repeat bottom;}
#selector.dsp_sensor .blockA h2 { height: 94px ; margin-top: 60px; visibility: hidden;}

#selector.dsp_sensor .blockB { width: 750px; margin: 0 auto 20px; background: url("../img/dsp_sensor/blockB_bg_body.gif") repeat-y center;}
#selector.dsp_sensor .blockB h3{ width: 750px; background: url("../img/dsp_sensor/blockB_bg_head.gif") no-repeat top; padding: 14px 0; text-align: center;}
#selector.dsp_sensor .blockB_body { width: 730px; padding: 0 10px; background: url("../img/dsp_sensor/blockB_bg_bottom.gif") no-repeat bottom;}
#selector.dsp_sensor .blockB dl { display: block; padding: 0 20px; background: url("../img/dsp_sensor/blockB_img_01.png") no-repeat top right;}
#selector.dsp_sensor .blockB dl dt { display: block; margin-bottom: 5px;}
#selector.dsp_sensor .blockB dl dd{ padding: 0 0 20px;}
#selector.dsp_sensor .blockB dl dd p{ width: 320px; height: 12em;}
#selector.dsp_sensor .blockB dl dd img{ display: block; float: right; margin-left: 50px;}

#selector.dsp_sensor .blockC { position: relative; width: 750px; margin: 0 auto 0; background: url("../img/dsp_sensor/blockC_bg_body.gif") repeat-y center;}
#selector.dsp_sensor .blockC h3{ width: 750px; background: url("../img/dsp_sensor/blockC_bg_head.gif") no-repeat 0 50px #fff; padding-bottom: 30px;}
#selector.dsp_sensor .blockC_body { width: 750px; background: url("../img/dsp_sensor/blockC_bg_bottom.gif") no-repeat bottom; padding: 0 0 10px;}
#selector.dsp_sensor .blockC dl { display: block; width: 710px; padding: 0 20px; position: relative;}
#selector.dsp_sensor .blockC dl.dl_03 { background: url("../img/dsp_sensor/dl_03_bg.gif") no-repeat 549px 0; }
#selector.dsp_sensor .blockC dl.dl_03 p { margin-bottom: 20px;}
#selector.dsp_sensor .blockC dl dt { display: block; margin-bottom: 10px;}
#selector.dsp_sensor .blockC dl dd div.morelink{ position: absolute; top: 460px; left: 10px; width: 420px; margin: 10px; padding: 5px; border: 1px solid #ccc;}
#selector.dsp_sensor .blockC dl dd img{ display: block; margin: 0 auto;}
#selector.dsp_sensor .blockC dl.point { display: block; width: 690px; margin: 60px 20px 20px; padding: 20px 10px 10px; border: 1px solid #ccc;}
#selector.dsp_sensor .blockC dl.point img.balloon_point{ display: block; position: absolute; top: -20px; left: 10px;}
#selector.dsp_sensor .blockC dl.point img.blockC_img_03{ position: absolute; top: -10px; right: 10px;}
#selector.dsp_sensor .blockC dl.point p { width: 320px;}

#selector.dsp_sensor .blockD { position: absolute; left: 50px; bottom: 10px; width: 750px; line-height: 1em;}
#selector.dsp_sensor .blockD a { float: right; display: inline-block; background: url("../img/sequencer/arrow_white_s.gif") no-repeat 5px center #0054a9; padding: 5px 5px 5px 20px; font-weight: bold; color: #fff; }