@charset "UTF-8";

/*navigation
-------------------------------------*/
#header{
background: #000 url(../../../../../img/ss/products/marking/selecting/bg_pattern.gif) repeat-x 0 0;
color: #fff;
border-top: 5px solid #ff8c01;
position:relative;
padding-top: 10px;
}
body {
overflow-x: hidden;

}
#header > *{
position: relative;
z-index: 1;
}
#header a{
color: #fff;
}
#header .frame{
width: 943px;
margin: 0 auto;
display: table;
}
#header > .frame + .frame{
margin-top: 20px;
}
#header > .frame .logo{
float: left;
}
#header > .frame dl{
float: right;
margin: 0;
}
#header > .frame dl dt,
#header > .frame dl dd{
text-align: right;
}
#header > .frame dl dd{
font-size: .875em;
margin-top: 10px;
}
#header > .frame dl dd a:before{
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 8px;
width: 0;
height: 0;
border-style: solid;
border-width: 2px 0 2px 3px;
border-color: transparent transparent transparent #ff8d01;
}
.naviBox ul{
margin: 0;
padding: 0;
}
.naviBox > ul{
display: table;
width: 100%;
font-size: .875em;
position: relative;
}
.naviBox > ul:after{
content: "";
position: absolute;
right: 0;
bottom: 6px;
height: 31px;
width: 2px;
background: #5d5d5d;
}
.naviBox > ul > li{
display: table-cell;
width: 155px;
border-left: 2px solid #000;
vertical-align: middle;
}
.naviBox > ul > li > a{
display: table-cell;
position: relative;
text-align: center;
padding: 1px 10px;
height: 40px;
width: 135px;
vertical-align: middle;
}
.naviBox > ul > li > a:hover,
.naviBox > ul > li > a:focus,
#strMetal .naviBox > ul > li.strMetal > a,
#strRegin .naviBox > ul > li.strRegin > a,
#strCeramic .naviBox > ul > li.strCeramic > a,
#strPaper .naviBox > ul > li.strPaper > a,
#strGlass .naviBox > ul > li.strGlass > a,
#strGum .naviBox > ul > li.strGum > a{
background-color: #6c6c6c;
-webkit-background-size: 2px 2px;
-moz-background-size: 2px 2px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
background-image: -webkit-linear-gradient(45deg,  #525151 25%, #525151 25%, transparent 25%, transparent 75%, #525151 75%, #525151 75%),
                  -webkit-linear-gradient(-135deg, #525151 25%, #525151 25%, transparent 25%, transparent 75%, #525151 75%, #525151 75%);
background-image: -moz-linear-gradient(45deg,  #525151 25%, #525151 25%, transparent 25%, transparent 75%, #525151 75%, #525151 75%),
                  -moz-linear-gradient(-135deg, #525151 25%, #525151 25%, transparent 25%, transparent 75%, #525151 75%, #525151 75%);
background-image: linear-gradient(45deg,  #525151 25%, #525151 25%, transparent 25%, transparent 75%, #525151 75%, #525151 75%),
                  linear-gradient(-135deg, #525151 25%, #525151 25%, transparent 25%, transparent 75%, #525151 75%, #525151 75%);
text-decoration: none;
}
.naviBox > ul > li{
position: relative;
}
.naviBox > ul > li:before{
content: "";
position: absolute;
left: -2px;
top: 50%;
margin-top: -15px;
height: 30px;
width: 2px;
background: #5d5d5d;
}
.naviBox > ul > li.strMetal:after,
.naviBox > ul > li.strRegin:after{
content: "";
position: absolute;
top: 50%;
right: 8px;
margint-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 3.5px 0 3.5px;
border-color: #ff8d01 transparent transparent transparent;
}
.naviBox > ul > li.strMetal:hover:after,
.naviBox > ul > li.strRegin:hover:after,
.naviBox > ul > li.strMetal:focus:after,
.naviBox > ul > li.strRegin:focus:after,
#strMetal .naviBox > ul > li.strMetal:after,
#strRegin .naviBox > ul > li.strRegin:after{
border-color: #fff transparent transparent transparent;
}
#subNavi .panel{
width: 943px;
left: 0;
z-index: 1;
display: table;
padding: 0 2px;
box-sizing: border-box;
display: none;
margin: 0;
}
#subNavi{
background-color: #464646;
-webkit-background-size: 2px 2px;
-moz-background-size: 2px 2px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
background-image: -webkit-linear-gradient(45deg,  #3e3e3e 25%, #3e3e3e 25%, transparent 25%, transparent 75%, #3e3e3e 75%, #3e3e3e 75%),
                  -webkit-linear-gradient(-135deg, #3e3e3e 25%, #3e3e3e 25%, transparent 25%, transparent 75%, #3e3e3e 75%, #3e3e3e 75%);
background-image: -moz-linear-gradient(45deg,  #3e3e3e 25%, #3e3e3e 25%, transparent 25%, transparent 75%, #3e3e3e 75%, #3e3e3e 75%),
                  -moz-linear-gradient(-135deg, #3e3e3e 25%, #3e3e3e 25%, transparent 25%, transparent 75%, #3e3e3e 75%, #3e3e3e 75%);
background-image: linear-gradient(45deg,  #3e3e3e 25%, #3e3e3e 25%, transparent 25%, transparent 75%, #3e3e3e 75%, #3e3e3e 75%),
                  linear-gradient(-135deg, #3e3e3e 25%, #3e3e3e 25%, transparent 25%, transparent 75%, #3e3e3e 75%, #3e3e3e 75%);
border-bottom: 5px solid #000;
}
#subNavi .panel > li{
display: table-cell;
vertical-align: middle;
line-height: 1.2;
}
#subNavi .panel > li a{
display: table;
width: 178px;
padding: 10px 5px 9px;
position: relative;
table-layout: fixed;
font-size: .85em;
text-align: left;
}
#subNavi .panel > li a > .img{
vertical-align: middle;
display: table-cell;
width: 43px;
}
#subNavi .panel > li a > span{
display: table-cell;
vertical-align: middle;
text-align: left;
width: 133px;
box-sizing: border-box;
}
#strMetal .panel.strMetal,
#strRegin .panel.strRegin{
display: block;
}
#strMetal.strPnl1 .panel.strMetal .strPnl1 a:before,
#strMetal.strPnl2 .panel.strMetal .strPnl2 a:before,
#strMetal.strPnl3 .panel.strMetal .strPnl3 a:before,
#strMetal.strPnl4 .panel.strMetal .strPnl4 a:before,
#strMetal.strPnl5 .panel.strMetal .strPnl5 a:before,
#strRegin.strPnl1 .panel.strRegin .strPnl1 a:before,
#strRegin.strPnl2 .panel.strRegin .strPnl2 a:before,
#strRegin.strPnl3 .panel.strRegin .strPnl3 a:before,
#strRegin.strPnl4 .panel.strRegin .strPnl4 a:before,
#strRegin.strPnl5 .panel.strRegin .strPnl5 a:before{
content: "";
width: 188px;
height: 100%;
padding: 0 0 5px;
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.3);
}
#strCeramic #subNavi,
#strPaper #subNavi,
#strGlass #subNavi,
#strGum #subNavi{
display: none;
}