@charset "UTF-8";
/**
*
*	/products/scanner/developertools/css/index.css
*/

@media screen and (max-device-width: 1024px) {
#contents .mainSection .mainvisual_guide{
    left: -88px;
}
}

@media screen and (max-device-width: 768px) {
#contents .mainSection .mainvisual_guide {
    position: relative;
    z-index: 500;
    width: 1200px;
    height: 257px;
    margin: 0 -230px;
	left: inherit;
    overflow: hidden;
}
}

/*************************************************************************
 *		スキャナー開発・運用支援ツールのgp紹介CSSを定義
*************************************************************************/

/*===================================================================
	共通
===================================================================*/
/* ------ .section ------ */
.section h2 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	padding-bottom: 4px;
	color: #000000;
	border-bottom: 3px solid #0054a3;
}
.section h2.ttlBlack {
	color: #000;
}
.section h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	padding-bottom: 5px;
	color: #000;
	border-bottom: 2px solid #7f7f7f;
}
.section h3 span {
	padding-left: 10px;
	border-left: 5px solid #005ab0
}
.section p {
	margin-bottom: 20px;
}
/*===================================================================
development.htm / installation.htm / machine.htm / operation.htm
===================================================================*/
/* ------ lNav ------ */
.lNav {
	width: 100%;
	min-width: 960px;
	height: 43px;
	background: url(/common/images/bg_line_01.gif) repeat-x left bottom;
}
.lNav ul {
	width: 960px;
	margin: 0 auto;
}
.lNav li {
	float: left;
	width: 320px;
	height: 43px;
}
.lNav li a {
	display: block;
	width: 100%;
	height: 100%;
}
.lNav.top li.lnav01 a, .lNav li.lnav01 a:hover {
	background: url(/products/scanner/developertools/images/nav_local_01_on.gif) no-repeat left top;
}
.lNav.deve1 li.lnav02 a, .lNav li.lnav02 a:hover {
	background: url(/products/scanner/developertools/images/nav_local_02_on.gif) no-repeat left top;
}
.lNav.deve2 li.lnav03 a, .lNav li.lnav03 a:hover {
	background: url(/products/scanner/developertools/images/nav_local_03_on.gif) no-repeat left top;
}
.lNav.deve3 li.lnav04 a, .lNav li.lnav04 a:hover {
	background: url(/products/scanner/developertools/images/nav_local_04_on.gif) no-repeat left top;
}
.lNav.deve4 li.lnav05 a, .lNav li.lnav05 a:hover {
	background: url(/products/scanner/developertools/images/nav_local_05_on.gif) no-repeat left top;
}
.lNav li a:hover img, .lNav.top li.lnav01 a img, .lNav.deve1 li.lnav02 a img, .lNav.deve2 li.lnav03 a img, .lNav.deve3 li.lnav04 a img, .lNav.deve4 li.lnav05 a img {
	visibility: hidden;
}

/*===================================================================
	index.htm
===================================================================*/
/* ------ #utilitySection ------ */
#utilitySection {
	background: #f2f2f2;
	margin-bottom: 70px;
	padding: 35px 40px
}
#utilitySection > div {
	margin-bottom: 15px
}
#utilitySection div > div {
	box-sizing: border-box;
	width: 431px;
	margin-bottom: 0;
	padding: 25px 15px 25px 25px;
	background-color: #FFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #015aac
}
#utilitySection div:nth-child(2) {
	margin-bottom: 0
}
#utilitySection div > div h2 {
	margin-bottom: 15px
}
#utilitySection div > div > div.inner {
	width: 241px;
	position: relative;
	min-height: 155px;
	padding: 0;
	border: none
}
#utilitySection div > div p {
	margin-bottom: 10px;
	color: #000;
	font-size: 95%
}
#contents .mainSection #utilitySection div > div p.btn {
	position: absolute;
	bottom: 0;
	top: inherit;
	width: 241px;
	height: 40px;
	box-sizing: border-box;
	font-size: 110%;
	display: block;
	background: url(../images/ico_arrow.png) no-repeat right 10px center;
	margin: 0;
	color: #FFF;
	background-color: #015aac;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 10px 15px;
	text-align: left;
	font-weight: 700
}
#contents .mainSection #utilitySection div > div p.btn a {
	text-decoration: none;
	color: #FFF
}
#contents .mainSection #utilitySection div > div p.btn:hover {
	color: #0059aa;
	text-decoration: none;
	background: url(../images/ico_arrow_o.png) no-repeat right 10px center #aadcff
}
#contents .mainSection #utilitySection div > div p.btn:hover a {
	text-decoration: none;
	color: #0059aa
}
/* ------ .btn02 ------ */
#contents .mainSection p.btn02 {
	text-align: center
}
#contents .mainSection p.btn02 a {
	box-sizing: border-box;
	display: block;
	position: inherit;
	background: url(../images/ico_pop_02.png) no-repeat right 15px center;
	width: 352px;
	height: 60px;
	margin: 0 auto 10px;
	color: #FFF;
	background-color: #015aac;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 19px 15px 5px;
	text-align: left;
	font-weight: 700
}
#contents .mainSection p.btn02 a:hover {
	color: #0059aa;
	text-decoration: none;
	background: url(../images/ico_pop_02.png) no-repeat right 15px center #aadcff
}
/* ------ .btn03 ------ */
#contents .mainSection div.btn03 {
	width: 543px;
	text-align: center;
	font-size: 12px;
	margin: 40px auto 0
}
#contents .mainSection div.btn03 p {
	border: 1px solid #015aac;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	box-sizing: border-box;
	width: 263px;
	height: 82px
}
#contents .mainSection div.btn03 a {
	box-sizing: border-box;
	height: 80px;
	display: block;
	position: inherit;
	background-image: url(../images/bt_bg01.gif), url(../images/ico_arrow03.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left 10px center, right 10px center;
	margin: 0 auto;
	color: #015aac;
	background-color: #f2f2f2;
	padding: 19px 15px 5px 80px;
	font-size: 14px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-align: left;
	font-weight: 700
}
#contents .mainSection div.btn03 p:nth-child(2) {
	float: right
}
#contents .mainSection div.btn03 p:nth-child(2) a {
	background-image: url(../images/bt_bg02.gif), url(../images/ico_arrow03.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left 10px top 12px, right 10px center
}
#contents .mainSection div.btn03 a:hover {
	color: #0059aa;
	text-decoration: none;
	opacity: .3;
	filter: alpha(opacity=30);
	-ms-filter: "alpha( opacity=30 )"
}
/*===================================================================
下層
===================================================================*/
#devArea {
	margin-bottom: 50px
}
#devArea .innerBlock {
	background-color: #f2f2f2;
	padding: 36px 26px
}
/*===================================================================
development.htm
===================================================================*/
/* ------ #devArea ------ */
#devArea .innerBlock ul#devList01 li{
	margin-right: 6px;
	float: left;
}
#devArea .innerBlock ul#devList02 li{
    margin-right: 17px;
	float: left;
}
#devArea .innerBlock ul#devList01 li:last-child,#devArea .innerBlock ul#devList02 li:last-child {
	margin-right: 0;
}
#devArea .innerBlock ul.List001{
    width:518px;
    padding: 10px 8px;
}
#devArea .innerBlock ul.List002{
    width:162px;
    padding: 10px 11px 10px 5px;
}
#devArea .innerBlock ul.mr3{
  margin-right: 3px;
}
#devArea .innerBlock ul#devList01 {
	margin-bottom: 15px;
	border: solid 2px #999;
    border-radius: 10px;
}
#devArea .innerBlock ul#devList01 li dl dt,#devArea .innerBlock ul#devList02 li dl dt {
	background: url(../images/img_fuki.gif)no-repeat;
	box-sizing: border-box;
	width: 168px;
	height: 169px;
	padding: 0 8% 15px 8%;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.2
}
#devArea .innerBlock ul#devList01 li dl dd,#devArea .innerBlock ul#devList02 li dl dd {
	padding: 10px;
	background-color: #FFF;
	background-image: url(../images/ico_dev.gif);
	background-position: top 10px center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	width: 168px;
	height: 200px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	display: table
}
#devArea .innerBlock ul#devList01 li dl dd p.txtDev,#devArea .innerBlock ul#devList02 li dl dd p.txtDev {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	padding: 10% 6.5%;
}
#devArea .innerBlock ul#devList01 li dl dd p.btn,#devArea .innerBlock ul#devList02 li dl dd p.btn {
	box-sizing: border-box;
	display: block;
	top: inherit;
	width: 90%;
	height: 30px;
	margin: 0 auto;
	color: #FFF;
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0
}
#devArea .innerBlock ul#devList01 li dl dd p.btn a,#devArea .innerBlock ul#devList02 li dl dd p.btn a {
	box-sizing: border-box;
	display: block;
	top: inherit;
	background: url(../images/ico_pop_02.png) no-repeat right 5px center;
	width: 100%;
	height: 30px;
	margin: 0;
	color: #FFF;
	background-color: #015aac;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 7px 10px;
	position: inherit;
	font-size: 12px;
	font-weight: 700;
	text-align: left;
}
#devArea .innerBlock ul#devList01 li dl dd p.btn a:hover,#devArea .innerBlock ul#devList02 li dl dd p.btn a:hover {
	text-decoration: none;
	color: #015aac;
	background: url(../images/ico_pop_02.png) no-repeat right 7px center;
	background-color: #aadcff
}

/*=============================================================================
operation.htm
=============================================================================*/
#devArea .innerBlock.pd40 {
	padding: 40px
}
#devArea .innerBlock ul#devList03 li {
	width: 205px;
	margin-right: 20px;
	float: left
}
#devArea .innerBlock ul#devList03 li:last-child {
	margin-right: 0
}
#devArea .innerBlock ul#devList03 {
	margin-bottom: 10px
}
#devArea .innerBlock ul#devList03 li dl dt {
	background: url(../images/img_fuki03.gif)no-repeat;
	box-sizing: border-box;
	width: 205px;
	height: 169px;
	padding: 0 15px 40px;
	display: flex;
	justify-content: center;
	align-items: center
}
#devArea .innerBlock ul#devList03 li dl dd {
	padding: 10px;
	background-color: #FFF;
	background-image: url(../images/ico_dev.gif);
	background-position: top 18px center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	width: 205px;
	height: 130px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	display: table
}
#devArea .innerBlock ul#devList03 li dl dd p.txtDev {
	display: table-cell;
	vertical-align: middle
}
#devArea .innerBlock ul#devList03 li dl dd p.btn {
	box-sizing: border-box;
	display: block;
	top: inherit;
	width: 90%;
	height: 55px;
	margin: 0 auto;
	color: #FFF;
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0
}
#devArea .innerBlock ul#devList03 li dl dd p.btn a {
	box-sizing: border-box;
	display: block;
	top: inherit;
	background: url(../images/ico_pop_02.png) no-repeat right 5px center;
	width: 100%;
	height: 55px;
	margin: 0;
	color: #FFF;
	background-color: #015aac;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 10px;
	position: inherit;
	font-size: 12px;
	font-weight: 700
}
#devArea .innerBlock ul#devList03 li dl dd p.btn a:hover {
	text-decoration: none;
	color: #015aac;
	background: url(../images/ico_pop_02.png) no-repeat right 5px center;
	background-color: #aadcff
}
/*=============================================================================
machine.htm
=============================================================================*/
#devArea .innerBlock ul#devList04 li {
	width: 430px;
	margin-right: 20px;
	float: left
}
#devArea .innerBlock ul#devList04 li:last-child {
	margin-right: 0
}
#devArea .innerBlock ul#devList04 {
	margin-bottom: 10px
}
#devArea .innerBlock ul#devList04 li dl dt {
	background: url(../images/img_fuki04.gif)no-repeat;
	box-sizing: border-box;
	width: 430px;
	height: 114px;
	padding: 0 15px 25px 19px;
	display: flex;
	/*flex-direction: column;*/
	justify-content: center;
	align-items: center
}
#devArea .innerBlock ul#devList04 li dl dd {
	padding: 10px;
	background-color: #FFF;
	background-image: url(../images/ico_dev.gif);
	background-position: top 20px center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	width: 430px;
	height: 115px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	display: table
}
#devArea .innerBlock ul#devList04 li dl dd p.txtDev {
	display: table-cell;
	vertical-align: middle
}
#devArea .innerBlock ul#devList04 li dl dd p.btn {
	box-sizing: border-box;
	display: block;
	top: inherit;
	width: 90%;
	height: 40px;
	margin: 0 auto;
	color: #FFF;
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0
}
#devArea .innerBlock ul#devList04 li dl dd p.btn a {
	box-sizing: border-box;
	display: block;
	top: inherit;
	background: url(../images/ico_arrow04.png) no-repeat right 10px center;
	width: 100%;
	height: 40px;
	margin: 0;
	color: #FFF;
	background-color: #015aac;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 10px;
	position: inherit;
	font-size: 12px;
	font-weight: 700
}
#devArea .innerBlock ul#devList04 li dl dd p.btn a:hover {
	text-decoration: none;
	color: #015aac;
	background: url(../images/ico_arrow04_o.png) no-repeat right 10px center;
	background-color: #aadcff
}