@charset "utf-8";
/* ===================================================================
CSS information

 file name  :global_header.css
 style info :グローバルヘッダー用CSS
=================================================================== */


/*----------------------------------------------------
	global_header
----------------------------------------------------*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


div#global_header {
	width:100%;
	padding:9px 0;
	height:22px;
	background:#000;
}

div#global_header div#global_menu {
	width:960px;
	margin:0 auto;
}

div#global_header div#global_menu:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

div#global_header div#global_menu ul {
	float:left;
	width:450px;
	font-size:0;
	list-style:none;
	margin-top:3px;
}

div#global_header div#global_menu ul:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

div#global_header div#global_menu ul li {
	float:left;
	padding-right:18px;
	background:url(/tpl/img/vr-separator.png) no-repeat 100% 100%;
}

div#global_header div#global_menu ul li.edge {
	background:none;
	padding:0;
}

div#global_header td {
	width:auto;
	padding:0;
	border:none;
}

div#global_header div#cse-search-form {
	float:right !important;
	width:240px !important;
	margin-right:20px !important;
}

div#global_header div#cse-search-form form {
	margin:0 !important;
	padding:0 !important;
}

div#global_header div#cse-search-form table {
	margin:0 !important;
	padding:0 !important;
}

div#global_header div#cse-search-form td.gsc-input {
	margin:0 !important;
	padding:0 !important;
	line-height:0 !important;
}

div#global_header div#cse-search-form td.gsc-input input {
	border:none !important;
	width:205px !important;
	height:22px !important;
	background:url(/tpl/img/bg-search_form.gif) left top repeat-x !important;
	margin:0 !important;
	padding:0 0 0 5px !important;
	font-size:12px !important;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	height/*\**/:19px\9 !important;
	padding-top/*\**/:3px\9 !important;
}

div#global_header div#cse-search-form td.gsc-input input:focus {
	background:url(/tpl/img/bg-search_form.gif) left top repeat-x !important;
}

div#global_header div#cse-search-form td.gsc-search-button {
	width:31px !important;
	min-width:inherit !important;
}

div#global_header div#cse-search-form td.gsc-search-button input {

	border:none !important;
	width:31px !important;
	min-width:inherit !important;
	height:22px !important;
	background:url(/tpl/img/btn-search_off.gif) left top no-repeat #fff !important;
	margin:0 !important;
	padding:0 !important;
	border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	font-size:12px !important;
	font-weight:normal !important;

	/*
	font-family: inherit;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	padding: 0 8px;
	height: 29px;
	min-width: 54px;

	border: 1px solid #666666;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;

	border-color:none;
	background-color:none;
	background-image:none;
	background-image:none;
	background-image:none;
	background-image:none;
	background-image: none;
	background-image:none;
	filter: none;
	*/
}

div#global_header div#cse-search-form td.gsc-search-button input:hover {
	background:url(/tpl/img/btn-search_on.gif) left top no-repeat !important;
}

div#global_header div#cse-search-form td.gsc-clear-button {
	display:none !important;
}

.gsc-branding {
	display:none !important;
}

/*----------------------------------------------------
	logo用
----------------------------------------------------*/
p#campany_logo {
	float:right;
	width:100px;
	margin:3px 0 0 0;
	font-size:0;
}
/*header 170615
---------------------------------------------------*/

div#global_header.block_header {
  font-family: 'Noto Sans Japanese', sans-serif;
}
ul#topic_path li a {
  background: none;
  margin-right: 0;
  padding-right: 5px;
}
#topic_path li:not(:first-child) {
  padding-left: 5px;
}
#global_header.block_header {
  background: #fff !important;
  height: auto !important;
  border-bottom: 1px solid #e9e9e9;
  padding: 0 !important;
}
div#global_header.block_header div#cse-search-form {
  float: left !important;
  margin-top: 5px;
  margin-right: 10px !important;
}
div#global_header.block_header div#cse-search-form table {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
div#global_header.block_header div#cse-search-form td.gsc-search-button {
  position: absolute;
  right: 5px;
  top: 4px;
}
div#global_header.block_header div#cse-search-form td.gsc-input input {
  width: 180px !important;
  height: 30px !important;
  background: transparent !important;
  padding: 5px 35px 5px 5px !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div#global_header.block_header div#cse-search-form td.gsc-input input:hover {
  border: 1px solid #ddd !important;
  border-radius: 3px;
}
div#global_header.block_header div#cse-search-form td.gsc-search-button input {
  background: url("/zac/img/header/ico-search.png") center center no-repeat !important;
}
div#global_header.block_header div#cse-search-form td.gsc-search-button input:hover {
  background: url("/zac/img/header/ico-search.png") center center no-repeat !important;
}
div#global_header.block_header div#cse-search-form {
  width: 180px !important;
}

#global_header.block_header #global_menu {
  overflow: hidden;
}
#global_header.block_header .logo {
  float: left;
  width: 105px;
  margin: 18px 0;
}
#global_header.block_header .logo a { 
  display: block;
}
#global_header.block_header .container_header {
  width: 800px;
  float: right;
  overflow: hidden;
}
#global_header.block_header .top_header_menu {
  display: table;
  width: 610px;
  border: 1px solid #e9e9e9;
  border-top: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 0px 4px 0 rgba(0,0,0,0.05);
}
#global_header.block_header .list_menu {
  width: 335px !important;
  font-size: 100% !important;
}
#global_header.block_header .list_menu li:not(:first-child) > a {
  border-left: 1px solid #e9e9e9;
}
#global_header.block_header ul li {
  background: none !important;
}
#global_header.block_header .list_menu li {
  background: none !important;
  padding: 8px 0 10px !important;
}
#global_header.block_header .list_menu li a {
  color: #555;
  font-size: 100%;
  text-decoration: none;
  padding: 5px 11px !important;
  display: block;
  line-height: 0.5;
  font-weight: 300;
}
#global_header.block_header .list_menu li:hover {
  opacity: 0.7;
}
#global_header.block_header .document {
  width: 270px;
  display: table;
  float: right;
}
#global_header.block_header .document .phone {
  float: left;
  padding: 11px 10px 0;
  text-align: center;
}
#global_header.block_header .request_document {
  position: relative;
  background: #254692;
  float: right;
  font-size: 117%;
  -webkit-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}
#global_header.block_header .request_document:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  right: 10px;
  top: 50%;
  margin-top: -6px;
  background: url('/zac/img/header/ico-arow_right.png') no-repeat 0 0;
  background-size: 6px 12px;
	-webkit-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
#global_header.block_header .request_document:hover:after {
  right: 8px;
}
#global_header.block_header .request_document a {
  width: 117px;
  height: 39px;
  text-align: center;
  line-height: 39px;
  color: #fff;
  display: block;
  text-decoration: none;
  font-weight: 500;
}
#global_header.block_header .request_document:hover {
  background: #ee4466;
}
#global_header.block_header .menu_header {
  width: 100%;
  margin: 15px 0;
}
#global_header.block_header .menu_header:after {
  content: '';
  display: block;
  clear: both;
}
#global_header.block_header .list_menu_header {
  font-size: 109% !important;
  width: 765px !important;
  float: right !important;
}
#global_header.block_header .list_menu_header li {
  padding: 0 20px !important;
}
#global_header.block_header .list_menu_header li:first-child {
  padding-left: 0 !important;
}
#global_header.block_header .list_menu_header li:last-child {
  padding-right: 0 !important;
}
#global_header.block_header .list_menu_header li a {
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  position: relative;
}
#global_header.block_header .list_menu_header li a:hover:after {
    background: #154a95;
    width: 100%;
}
#global_header.block_header .list_menu_header li a:after {
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    left: 0px;
    bottom: -15px;
    margin: auto;
    width: 0;
    transition: all .3s ease;
}
#global_header.block_header .list_menu_header .active a:hover:after {
    background: #154a95;
    width: 100%;
}
#global_header.block_header .list_menu_header .active a:after {
    background: #154a95;
    width: 100%;
}
.introduce #global_header.block_header .list_menu_header li:nth-child(1) a:after {
    background: #154a95;
    width: 100%;
}
.products #global_header.block_header .list_menu_header li:nth-child(2) a:after {
    background: #154a95;
    width: 100%;
}
.function #global_header.block_header .list_menu_header li:nth-child(3) a:after {
    background: #154a95;
    width: 100%;
}
.casestudy #global_header.block_header .list_menu_header li:nth-child(4) a:after {
    background: #154a95;
    width: 100%;
}
.erp #global_header.block_header .list_menu_header li:nth-child(5) a:after {
    background: #154a95;
    width: 100%;
}
.seminar #global_header.block_header .list_menu_header li:nth-child(6) a:after {
    background: #154a95;
    width: 100%;
}
.detail #global_header.block_header .list_menu_header li:nth-child(7) a:after {
    background: #154a95;
    width: 100%;
}

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

.header_fix {
  border-bottom: 1px solid #e9e9e9;
  background: #fff;
  top: 0;
  position: fixed;
  z-index: 19011990;
  width: 100%;
  -webkit-transform: translateY(-156px);
  transform: translateY(-156px);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}

.header_fix::after {
  position: relative;
  content: '';
  height: 1px;
  width: 100%;
}

.header_fix.is-scroller {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
}

.header_fix .header_fix_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 983px;
  height: 60px;
}

.header_fix .header_fix_logo {
  width: 68px;
}

.header_fix .header_fix_logo img {
  width: 100%;
  height: auto;
}

.header_fix .list_navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header_fix .list_navigation li {
  padding: 0 18px;
}

.header_fix .list_navigation li a {
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  position: relative;
  color: #254692;
  font-size: 109%;
}

.header_fix .list_navigation li a::after {
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  left: 0px;
  bottom: -20px;
  margin: auto;
  width: 0;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.header_fix .list_navigation li a:hover::after,
.header_fix .list_navigation .active a:after {
  background: #154a95;
  width: 100%;
}

.introduce .header_fix .list_navigation li:nth-child(1) a:after {
  background: #154a95;
  width: 100%;
}
.products .header_fix .list_navigation li:nth-child(2) a:after {
  background: #154a95;
  width: 100%;
}
.function .header_fix .list_navigation li:nth-child(3) a:after {
  background: #154a95;
  width: 100%;
}
.casestudy .header_fix .list_navigation li:nth-child(4) a:after {
  background: #154a95;
  width: 100%;
}
.erp .header_fix .list_navigation li:nth-child(5) a:after {
  background: #154a95;
  width: 100%;
}
.seminar .header_fix .list_navigation li:nth-child(6) a:after {
  background: #154a95;
  width: 100%;
}
.detail .header_fix .list_navigation li:nth-child(7) a:after {
  background: #154a95;
  width: 100%;
}

.header_fix .header_fix_button a {
  color: #fff;
  display: block;
  height: 60px;
  width: 120px;
  text-align: center;
  line-height: 60px;
  text-decoration: none;
  font-size: 117%;
  position: relative;
  background-color: #254692;
  -webkit-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  font-weight: 500;
}

.header_fix .header_fix_button a::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 12px;
  right: 15px;
  top: 50%;
  margin-top: -5px;
  background: url(/zac/img/share/ico-arrow_button_aside.png) no-repeat 0 0;
  -webkit-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.header_fix .header_fix_button a:hover {
  background: #ee4466;
}

.header_fix .header_fix_button a:hover::after {
  right: 13px;
}