/************** マスターページナビゲーションメニューCSS **************/

#navbar{
	background: #ededed;
	background: -moz-linear-gradient(top,  #ededed 0%, #dbdbdb 51%, #f2f2f2 100%);
	background: -webkit-linear-gradient(top,  #ededed 0%,#dbdbdb 51%,#f2f2f2 100%);
	background: linear-gradient(to bottom,  #ededed 0%,#dbdbdb 51%,#f2f2f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#f2f2f2',GradientType=0 );
}
	
#navbar ul {
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  box-sizing:border-box;
  max-width:1280px;
	margin:0;
  margin-left:auto;
  margin-right:auto;
  padding:0 16px;
}
	
#navbar li {
  flex:1 0 0%;
  position:relative;
	list-style-type: none;
	white-space:nowrap;
	margin:0;
}

#navbar li:nth-child(n + 2){
  padding-left:1px;
}

#navbar li:nth-child(n + 2):before {
  content:"";
  position:absolute;
  left:0;
  top:8px;
  display:block;
  width:1px;
  height:24px;
  background-color:#cccccc;
}

#navbar li a {
	display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
	color:#000;
	text-decoration:none;
  height:64px;
	padding:0 24px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 51%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 51%,#ffffff 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 51%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
  line-height:1;
}

#navbar li a:hover {
	background:#4A6089;
	text-decoration:none;
  color:#ffffff;
}

#navbar li a > * {
  margin-bottom:8px;
}

#navbar li a > *:last-child {
  margin-bottom:0;
}

#navbar li a > i {
  font-size:24px;
}

/*** dropmenu ***/	
#navbar li.dropmenu .dropmenu-box {
  flex-direction:column;
	visibility:hidden;
	position:absolute;
	height:0;
  padding:0;
}

#navbar li.dropmenu .dropmenu-box li {
	display: block;
  box-sizing:border-box;
	background: #fff;
	width: 200px;
}



@media screen and (min-width:1024px){
  #navbar li.dropmenu .dropmenu-box li:nth-child(n + 2){
    padding-left:0;
    border-left:0;
  }

  #navbar li.dropmenu .dropmenu-box li:nth-child(n + 2):before{
    content:none;
  }

  #navbar li.dropmenu .dropmenu-box li a {
  	height:40px;
  }

  #navbar li.dropmenu:hover > .dropmenu-box li{
  	border: 1px solid #adadad;
  	border-top: none;
  }

  /** li.dropmenu:hover IE8・9では動作しない(javascriptで対策)**/
  #navbar li.dropmenu:hover > .dropmenu-box {
  	overflow:visible;
  	visibility:visible;
  }
}



@media screen and (max-width:1280px){
  #navbar ul{
    padding:0;
  }

  #navbar li a{
    padding:0 16px;
  }
}

@media screen and (max-width:1023px){
  #navbar > ul{
    animation: slidein 1s ease-in-out 1 normal forwards;
    overflow-x:scroll;
  }

  #navbar li a{
    height:38px;
  }

  #navbar .dropmenu > a{
    display:none;
  }

  #navbar .dropmenu > .dropmenu-box{
    visibility:visible!important;
    position:relative!important;
    flex-direction:row!important;
    border:none!important;
  }

  #navbar .dropmenu > .dropmenu-box > li{
    width:auto!important;
  }

  #navbar li a > i {
    display:none;
  }
}

@keyframes slidein {
  0% { margin-left:0; }
  50%   { margin-left:-40px; }
  100%   { margin-left:0; }
}