@charset "UTF-8";

@font-face {
	font-family: "Roboto";
	src: url("//library.keyence.com/fonts/Roboto-Regular.eot");
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("//library.keyence.com/fonts/Roboto-Regular.woff") format("woff"), url("//library.keyence.com/fonts/Roboto-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-weight: bold;
	font-family: "Roboto";
	src: url("//library.keyence.com/fonts/Roboto-Bold.eot");
	font-display: swap;
}

@font-face {
	font-weight: bold;
	font-family: "Roboto";
	src: url("//library.keyence.com/fonts/Roboto-Bold.woff") format("woff"), url("//library.keyence.com/fonts/Roboto-Bold.ttf") format("truetype");
	font-display: swap;
}

body{
	margin: 0;
	padding: 0;
	background: #ffffff;
	font-family: "Roboto", helvetica, arial, meiryo, sans-serif;
	color: #333333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

img{
	margin: 0;
	padding: 0;
	border: 0;
	}

p{
	font-size: 13px;
	line-height: 1.6em;
	margin: 0;
	padding: 0;
	}
.red{
	color: #af140b;
	}

h1,h2,h3,h4,h5{
	margin: 0;
	padding: 0;
	}
h5{
	font-size: 12px;
	}


a:link{
	color:#0066cc;
	text-decoration: none;
}
a:active{
	color:#ff0000;
	text-decoration: none;
}

a:visited{
	color:#0066cc;
	text-decoration: none;
}

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

.inline_box{
	display: inline;
	}

.text_center{
	text-align: center;
	}
.text_right{
	text-align: right;
	}

.fl_L {
	float: left;
}

.fl_R {
	float: right;
}

.clear{
	clear: both;
}
/*clerafix*/
.clearfix {
    zoom: 1; /* for IE5.5 - IE7 */
		overflow: hidden;
}

.clearfix:after {
    content: ".";
    font-size: 0.1em;
    line-height: 0;
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}


/*header
-------------------------------------*/

	
/*contents
------------------------------------*/
#container{
	padding: 25px 0;
	position: relative;
}
#container:before{
	content: "";
	height: 570px;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	position: absolute;
	background: rgb(243,243,243);
	background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );
}

#container #contents{
	width: 943px;
	height: auto;
	padding: 10px 0 15px;
	margin: 0 auto 25px;
	border: 1px solid #e9e9e9;
	background: #fff;
}
#container #contents .hdg1{
	background: #363636;
	color: #fff;
	position: relative;
	font-size: 1.25em;
	margin: 0 11px 25px;
	padding: 2px 8px 1px;
}
#container #contents .hdg1:after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 4px 0 4px;
	border-color: #363636 transparent transparent transparent;
	left: 35px;
	bottom: -8px;
}
#container #contents .hdg1{
}
#container #contents .capBox{
	margin-bottom: 20px;
}
#container #contents .capBox .cap{
	float: left;
	width: 900px;
	margin: 0 20px;
	display: inline;
}
#container #contents .capBox .capBtn{
	float: right;
	width: 160px;
	display: inline;
}
#container #contents .capBox em{
	display: none;
}
#container #contents .capBox a.btnTokucho{
	display: block;
	background: url(../../../../../ss/products/marking/selecting/images/btn_tokucho.gif) no-repeat left;
	width: 144px;
	height: 34px;
}
#container #contents .capBox a:hover.btnTokucho{
	background-position: right;
}
#container #contents h2 {
	min-height: 38px;
	margin-bottom: 10px;
	font-size: 1em;
}
#container #contents .printExample01 {
	margin-left: 22px;
}
#container #contents .printExample01 .imgBox {
	margin-right: 20px;
	display: table;
	width: 100px;
}
#container #contents .printExample01 .modalLink {
	margin: -12px 0 0 -6px;
}
#container #contents .printExample01 .modalLink a:hover {
	opacity: 0.6;
}
#container #contents .printExample02 {
	margin-right: 15px;
	margin-left: 22px;
}
#container #contents .printExample03 {
	margin-right: 38px;
	margin-left: 22px;
}
#container #contents .caption {
	margin-top: 5px;
	font-size: 0.75em;
}
#container #contents .reccomendModel01 {
	padding-right: 13px;
	padding-left: 65px;
	background: url("../../../../../img/ss/products/marking/selecting/next_arrow_01.png") no-repeat center left;
}
#container #contents .reccomendModel02 {
	padding-left: 35px;
	background: url("../../../../../img/ss/products/marking/selecting/next_arrow_02.png") no-repeat center left;
}
#container #contents .reccomendModel03 {
	margin-left: 35px;
	padding-right: 13px;
	padding-left: 65px;
	background: url("../../../../../img/ss/products/marking/selecting/next_arrow_01.png") no-repeat center left;
}
#container #contents ol{
	margin: 0;
	padding: 0;
	list-style: none;
}
#container #contents ol li{
	width: 179px;
	height: 194px;
	position:relative;
	float: left;
	display: inline;
}
#container #contents ol li em{
	display: none;
}

#container #contents ol li .dl_btn{
	position:absolute;
	top:0;
	left:0;
	z-index: 50;
	width: 143px;
	background: #fff;
}
#container #contents ol li .dl_btn p img{
	border: 1px solid #cdcdcd;
}
#container #contents ol li .dl_btn p .txt{
	display: block;
	font-size: 0.75em;
	line-height: 1.4;
	margin: 5px 0;
}
#container #contents ol li .dl_btn a{
	width: 143px;
	display: block;
	white-space:nowrap;
	background: #e60012;
	color: #fff;
	font-size: 0.6875em;
	padding: 8px 0 10px 32px;
	box-sizing: border-box;
	margin-top: 5px;
	position: relative;
}
#container #contents ol li .dl_btn a:before{
	content: "";
	width: 24px;
	height: 100%;
	background: #fff url(../../../../../img/ss/products/marking/selecting/icn_arrow.gif) no-repeat center center;
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #e60012;
	box-sizing: border-box;
}

#container #contents ol li .dl_btn a:hover{
	opacity: 0.6;
	text-decoration: none;
}

/*index_Button*/
#container #contents ol li.btnTop{
	margin-right: 32px;
}
#container #contents .reccomendModel02 ol li.btnTop{
	margin-right: 0;
}
#container #contents .lightWavelength {
	margin-top: 25px;
	margin-left: 22px;
	position: relative;
}
#container #contents .lightWavelength h2 {
	min-height: 0;
}
#container #contents .lightWavelength .redLine01 {
	position: absolute;
	top: -39px;
	right: 106px;
}
#container #contents .lightWavelength .redLine03 {
	position: absolute;
	top: -39px;
	right: 550px;
}
#container #contents .lightWavelength .redLine04 {
	position: absolute;
	top: -39px;
	right: 106px;
}
#container #contents .lightWavelength .redLine05 {
	position: absolute;
	top: -39px;
	right: 232px;
}
#container #contents .lightWavelength .redLine07 {
	position: absolute;
	top: -39px;
	right: 232px;
}
#container #contents .lightWavelength .redLine08 {
	position: absolute;
	top: -56px;
	right: 100px;
}
#container #contents .lightWavelength .redLine09 {
	position: absolute;
	top: -63px;
	right: 127px;
}
#container #contents .lightWavelength .redLine10 {
	position: absolute;
    top: -63px;
    left: 100px;
}

/*presentLink*/
#container .bottomCon{
	margin: 0 auto 40px;
	width: 943px;
}
#container .bottomCon .left{
	float: left;
	width: 685px;
	margin-right: 25px;	
	display: inline;
}
#container .bottomCon .right{
	float: right;
	width: 230px;
	display: inline;
}
#container .bottomCon p{
	margin-bottom: 10px;
}
#container .bottomCon .TelTxt{
	font-size: 1.375em;
	margin: 15px 0 10px;
}
#container .bottomCon .TelTxt .icon{
	margin: 0 0 0 6px;
}
#container .bottomCon dl,dt,dd{
	margin: 0;
	padding: 0;
	text-align: left;
	overflow: hidden;
}
#container .bottomCon dl.pdfTop{
	float: left;
	width: 100px;
	margin: 0 15px 0 5px;
	padding: 0;
}
#container .bottomCon dl dt,
#container .bottomCon dl dd{
	text-align: center;
}
#container .bottomCon dl dt a{
	position: relative;
	display: block;
	padding-bottom: 20px;
}
#container .bottomCon dl dt a img{
	border: 1px solid #cfcfcf;
}
#container .bottomCon dl dt a:after{
	content: "";
	width: 62px;
	height: 17px;
	position: absolute;
	bottom: 3px;
	left: 50%;
	margin-left: -31px;
	background: rgb(214,210,206);
	background: -webkit-linear-gradient(top,  rgba(214,210,206,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(214,210,206,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d2ce', endColorstr='#ffffff',GradientType=0 );
}
#container .bottomCon dl dd{
	font-size: 0.75em;
}
#container .bottomCon dl.pdf{
	float: left;
	width: 100px;
	margin: 0 15px 0 0;
	padding: 0;
}
#container .bottomCon dl.pdfLast{
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
}

/*webWindow*/
#container .bottomCon .webInner{
	width: 228px;
	background: #fffaf7;
	border: 1px solid #fac69c;
	padding-bottom: 15px;
}
#container .bottomCon .webInner ol{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125em;
}
#container .bottomCon .webInner ol a{
	color: #333;
	position: relative;
	display: block;
	width: 212px;
	height: 31px;
}
#container .bottomCon .webInner ol a:hover,
#container .bottomCon .webInner ol a:focus{
	text-decoration: none;
}
#container .bottomCon .webInner ol a .txt{
	position: relative;
	z-index: 1;
	padding: 5px 0 5px 40px;
	display: inline-block;
}
#container .bottomCon .webInner ol a > img{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
#container .bottomCon .webInner ol li{
	margin: 0 0 3px 10px;
	padding: 0;
}
#container .bottomCon .webInner ol li a:hover{
	opacity: 0.7;
}

/*footer
-------------------------------------------------*/
#footer{
	width: 100%;
	background: url(../../../../../img/ss/products/marking/selecting/footer_bg.gif) repeat-x top;
}
#footer .footerInner{
	display: flex;
	justify-content: space-between;
	width: 940px;
	margin: 0 auto;
	padding: 8px 0;
	text-align: right;
	color: #666;
	font-size: 10px;
}
#footer .footerInner ul{
	display: flex;
	list-style: none;
	margin: 0;
	font-size: 13px;
}
#footer .footerInner ul li{
	padding: 1px 12px 0;
	border-right: solid 1px #666;
}
#footer .footerInner ul li:last-child{
	border-right: none;
}
#footer .footerInner ul li a{
	color: #666;
}

/*side area*/
#sideArea{
	position: fixed;
	left: 50%;
	margin-left: 485px;
	top: 70px;
	z-index: 10000;
	}
#sideArea .sideBnr {
	width: 138px;
	margin-bottom: 10px;
	}
#sideArea .sideBnr a{
	background: url(../../../../../ss/products/marking/selecting/images/side_banner01.jpg) no-repeat 0 0;
	display: block;
	width: 138px;
	height: 154px;
	margin: 0;
	padding: 0;
}
#sideArea .sideBnr a:hover{
	background: url(../../../../../ss/products/marking/selecting/images/side_banner01_on.jpg) no-repeat 0 0;
}

#sideArea .sideBnr a span{
	display: none;
}

/* add modules */
.recHdg{
	background: #363636;
	color: #fff;
	font-size: .875em;
	margin-bottom: 16px;
	position: relative;
	padding: 5px 10px;
	font-weight: bold;
}
.recHdg:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 4.5px 0 4.5px;
	border-color: #363636 transparent transparent transparent;
	position: absolute;
	bottom: -7px;
	left: 35px;
}

.hdg1, .hdg2, #container .bottomCon .TelTxt{
	font-weight: bold;
}
.hdg2.type02{
text-align: center;
margin-top: 10px;
}

.figImg{
padding-top: 33px;
}