@charset "UTF-8";
/* CSS Document */

#wrapper { position:relative; width:100%; min-width:980px; overflow:hidden; padding-top:201px; }
.inner{ position:relative; width:980px; margin:auto; }

.fw { margin-left:-500%; margin-right:-500%; padding-left:500%; padding-right:500%; /*Full Width*/ }

.col2{ float:left; width:50%; }
.col3{ float:left; width:33.33%; }

.dis_none{ display:none; }

.sec{ position:relative; padding-bottom: 120px; }
.secTtl{ position:absolute; top:-70px; width:100%; height:264px; padding-top:90px; text-align:center; background:url(../img/bubble.png) repeat-x 50% 0; }

.btn{ text-align:center; }
.btn a,a .btn{ position:relative; display:inline-block; padding:4px 41px; text-align:center; color:#fff; font-size:16px; background:#0a53a4; }
.btn a:hover,a:hover .btn{ background-color:#b5b5b5; -ms-transition:all .5s; transition:all .5s; }

.enfont{ font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; }

.bg_grad{
	background:#eeeeee;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff)) , color-stop(1.00, #dadada); 
	background: -webkit-linear-gradient(#dadada , #fff);
}


/* --header------------------------ */
header{	position:fixed; top:0; left:50%; z-index:1000; width:100%;	margin-left:-50%; padding:15px 0; border-bottom: 1px solid #f3f3f3; }

header #logo{ float:left; margin-right:10px; }
header .company_explan{ width:193px; margin-top:3px; font-size:12px; }
header .company_name{ width:193px; margin-top: -4px; text-align:center; background:url(../img/line_company_name.png) repeat-x 0 50%; }
header .company_name span{ padding:0 7px; font-size:13px; font-weight:bold; background:#e5e5e5; }
.en header .company_explan,
.en header .company_name{ width:225px; }

/* お問合わせ・言語ボタン */
header .btn_contact{ float:right; margin-right:20px; }
footer .btn_contact{ position:absolute; top:0; right:0; width:287px; margin-bottom:20px; text-align:center; }
.btn_contact a{ display:block; padding:10px 42px 10px 65px; color:#fff; background:url(../img/mail_icon.png) no-repeat 39px 50%; background-color:#0a53a4; }
footer .btn_contact a{ padding: 15px 39px 15px 84px; font-size:16px; }
.btn_contact a:hover{ background-color:#b5b5b5; }
.en footer .btn_contact a{ height:59px; padding:14px 42px 0px 59px; font-size:20px; background:url(../img/mail_icon.png) no-repeat 87px 50%; background-color:#0a53a4; }
.cn footer .btn_contact a{ height:59px; padding:14px 42px 0px 59px; font-size:20px; background:url(../img/mail_icon.png) no-repeat 87px 50%; background-color:#0a53a4; }
.vn footer .btn_contact a{ height:59px; padding:14px 42px 0px 59px; font-size:20px; background:url(../img/mail_icon.png) no-repeat 80px 55%; background-color:#0a53a4; }



header .lang{ float:right; margin-left: 10px; margin-bottom: 20px;width: 287px; }
.lang li{ float:left; width:25%; }
.lang li a,.lang li span{ display:block; padding: 10px 0; text-align: center; }
.lang li a{ background:#fff; }
.lang li span,
.lang li a:hover{ background-color:#0a53a4; color:#fff; }

.bn-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end; 
}

.f_left{
  width: 300px;
}

.f_right{
  width: 287px;
  display: flex;
  align-items: flex-end; 
}

.lang{
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}

.lang li{
  width: 25%;
  list-style: none;
  text-align: center;
}
.sns-area{
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  width: 300px;
}

.sns-box{
  text-align: center;
  float: left;
  width: 32%;
}

.sns-title{
  font-size: .8rem;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.05em;
}

.sns-img{
  max-width: 120px;
}

.sns-img img{
  width: 100%;
  display: block;
}

footer .lang{ position:absolute; top:80px; right:0; margin-bottom: 20px; width: 287px; }
footer .lang li a,footer .lang li span{ padding: 17px 0; text-align: center; }
/*footer .lang li a,footer .lang li span{ padding:17px 30px; }*/


/* --gNav------------------------ */
#gNav{ width:100%; }
#gNav ul.dropmenu { position:relative; height:58px; background:#fff; }
#gNav ul.dropmenu:before, .dropmenu:after{ content: ""; display: table; }
#gNav ul.dropmenu:after{ clear: both; }

#gNav li { float:left; width:163px; border-right:1px solid #eeeeee; }
#gNav li a { display:block; position:relative; height:58px; overflow:hidden; }
#gNav li img { display:block; position:absolute; top:0;  }

#gNav li.home { left:0; }  
#gNav li.products,.en #gNav li.single,.cn #gNav li.single,.vn #gNav li.single{ left:163px; }
#gNav li.example,.en #gNav li.care,.cn #gNav li.care,.vn #gNav li.care{ left:326px; }
#gNav li.su_do,.en #gNav li.download,.vn #gNav li.download{ left:489px; }
#gNav li.qa,.en #gNav li.contact,.cn #gNav li.contact,.vn #gNav li.contact{ width:164px; left:656px; }

.en #gNav li.contact{ width:163px; }
#gNav li.company{ width:164px; left:810px; border-right:none; }

#gNav li.home a img     { left:0; }  
#gNav li.products a img,.en #gNav li.single a img ,.cn #gNav li.single a img,.vn #gNav li.single a img{ left:-163px; }
#gNav li.example a img ,.en #gNav li.care a img,.cn #gNav li.care a img ,.vn #gNav li.care a img  { left:-326px; }
#gNav li.su_do a img,.en #gNav li.download a img,.cn #gNav li.download a img,.vn #gNav li.download a img  { left:-489px; }
#gNav li.qa a img,.en #gNav li.contact a img,.cn #gNav li.contact a img,.vn #gNav li.contact a img { left:-652px; }


#gNav li.company a img  { left:-818px; }

#gNav li a:hover img, 
#gNav li.current img { top:-58px; z-index:5; }

#gNav li a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    background-color: #0a53a4;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
#gNav li a:hover::after, #gNav li.current a::after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

#gNav ul.dropmenu li ul{ position: absolute; z-index: 9999; opacity: 0; top: 50%; visibility:hidden; transition: .5s; }
#gNav ul.dropmenu li ul li{ float:none; width:163px; border-right:none; }
#gNav ul.dropmenu li ul li a{ width:163px; height:50px; padding:15px 8px; color:#fff; font-size:13px; background:#0a53a4; border-bottom:1px solid #eeeeee; }
#gNav ul.dropmenu li ul li a:hover{ background-color:#b5b5b5; }
#gNav ul.dropmenu li ul li:last-child a{ border:none; }
#gNav ul.dropmenu li.company ul li a{ width:164px; }
#gNav ul.dropmenu li:hover ul{ top: 100%; visibility:visible; opacity: 1; }
#gNav ul.dropmenu li ul li a::after{ height:0; }

.en #gNav li.raw,
.en #gNav li.raw a{ height:70px; }

/*製品一覧---------------------*/
.ttl_products{ padding:53px 0 0 610px; }
.products_list{ position:relative; height:1500px; }
.en .products_list{ height:1000px; }
.cn .products_list{ height:1000px; }
.vn .products_list{ height:1000px; }
.products_list li a{ display:block; width:462px; height:280px;  }
.products_list li .ttl{ margin-bottom:20px; }
.products_list li .txt{ margin-bottom:20px; }
.products_list li .image{ position:absolute; bottom:96px; right:-50px; }
.products_list li.inkjet .image{ bottom:60px; }
.products_list li.visionbox .image{ bottom:120px; }
.products_list li.end .image{ bottom:110px; }

.products_list li.single{ top:-30px; left:0; }
.products_list li.care{ top:105px; left:530px; }

.products_list li.other{ top:322px; left:20px; }
.products_list li.supply{ top:480px; left:530px; }
.products_list li.software{ top:650px; left:0; }
.products_list li.security{ top:830px; left:510px; }
.products_list li.visionbox{ top:1010px; left:0px; }
.products_list li.end{ top:1200px; left:510px; }

.en .products_list li.visionbox{ top:500px; left:530px; }
.en .products_list li.inkjet{ top:322px; left:0; }
.en .products_list li.other{ top:655px; left:150px; }

.cn .products_list li.single{ top:-30px; left:0; }
.cn .products_list li.care{ top:105px; left:530px; }
.cn .products_list li.inkjet{ top:322px; left:0; }
.cn .products_list li.other{ top:655px; left:150px; }
.cn .products_list li.visionbox{ top:500px; left:530px; }

.vn .products_list li.single .image{ position:absolute; bottom:-80px; right:-50px; }
.vn .products_list li.care .image{ position:absolute; bottom:0; right:0; }
.vn .products_list li.visionbox .image{ bottom:80px; }
.vn .products_list li.inkjet{ top:450px; left:0; }
.vn .products_list li.visionbox{ top:580px; left:530px; }

/* --footer------------------------ */
footer{ clear:both; padding:48px 0 25px; border-top:1px solid #fff; }
#pagetop{ position:fixed; bottom:10px; right:10px; z-index:9999px; }
.footer1{ border-bottom:1px solid #909090; }
#fNav{ float:left; margin-bottom:20px; }
#fNav dl{ float:left; margin-right:47px; }
#fNav dt a{ padding-left:16px; font-size:16px; color:#1555a5; background: url(../img/arrow_mini.png) no-repeat 0 48%; }
#fNav dd a{ padding-left:16px; font-size:12px; }
#fNav dd.mb1{ margin-bottom:24px; }
#fNav dd.mb2{ margin-bottom:22px; }
#fNav a:hover{ text-decoration:underline; }
footer .sub_link{ clear:both; float: right; text-align:right; }
footer .sub_link li{ float:left; margin-left:20px; font-size:13px; }
footer .sub_link li a{ display:block; padding-left: 14px; background: url(../img/arrow_mini.png) no-repeat 0 43%; }

.footer2{ padding-top:30px; }
#flogo{ margin-right:30px; }
.address{ padding-top:10px; }
.copy,.copy a{ padding-top:60px; font-size:12px; color:#737373; }




/*topnews---------------------*/

.top_news {
  position: relative;
  border-top: 1px #0A53A4 solid;
  border-bottom: 1px #0A53A4 solid;
  overflow: hidden;
  padding: 5px 10px;
  background: #fff;
  width: 100%;
  margin: 10px auto 0 ;
}

.top_news p.n_title{
    font-size: 1.0em;
    float: left;
    width: 200px;
    border-right: 1px solid #333;
    margin: auto ;
}



.top_news p span {
    font-size: .2em;
    vertical-align: middle;
    padding-left: 1.0em;
}



.top_news_r {
    float: left;
    width: 700px;
    margin: auto 20px;
    height: auto !important;
}
.top_news_r .rss_date {
    float: left;
	width: 15%;}

.top_news_r .r_title {
    margin-bottom: 5px;
    width: 85%;
	text-align: left;
}

.top_news_r ul {
    position: relative;
    overflow: hidden;
}
.top_news_r li {
    display: block;
	width:100%;
}