/*
=====================================================================
*
*    header
*
* ===================================================================
*/
@media screen and (min-width: 769px){   
	.pcOnly {
	display: block;
	}
	.spOnly {
	display: none;
	}
	header{
		background: #000;
		height: 140px;
		margin-bottom: 40px;
		line-height: 0;
	}
	header.global .layoutFrame {
	  text-align: center;
	  max-width: 980px;
	  margin: auto;
	  padding-top: 30px;
	  overflow: hidden;
	}
	header.global .siteLogo {
	  margin-bottom: 25px;
	}
	header.global .siteMenu {
	  opacity: 1;
	  position: relative;
	  height: 15px;
	}
	header.global .siteMenu .menu {
	  float: left;
	  padding-left: 0;
	}
	header.global .siteMenu .sns {
	  float: right;
	  width: 104px;
	  padding-right: 0;
	  background: url(../img/nav_bg_slash.svg) no-repeat 0 50%;
	  background-size: 12px 16px;
	  
	}
	header.global .siteMenu .menu li {
	  display: inline-block;
	  margin-right: 40px;
	}
	header.global .siteMenu .menu li.navBustmake{
		margin-right: 30px !important;
	}
	header.global .siteMenu .menu li.navBlog{
		margin-right: 15px !important;
	}
	header.global .siteMenu .menu li.navFair{
		margin-right: 25px !important;
	}
	
	header.global .siteMenu .menu a {
	  display: block;
	  position: relative;
	}
	
	header.global .siteMenu .menu .navWebstore {
	  margin-right: 0;
	}
	
	header.global .siteMenu .sns li {
	  display: inline-block;
	  margin-left: 15px;
	}
	header.global .siteMenu a {
	  position: relative;
	  display: block;
	  height: 15px;
	}
	header.global .siteMenu .menu img {
	  opacity: 1;
	  -webkit-transition: 0.35s ease opacity;
	  transition: 0.35s ease opacity;
	}
	header.global .siteMenu .menu .over {
	  position: absolute;
	  left: 0;
	  top: 0;
	  opacity: 0;
	}

  header.global .siteMenu a:after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -28px;
    display: block;
    height: 1px;
    background: transparent;
    -webkit-transition: 0.3s ease all;
    transition: 0.3s ease all;
  }
  header.global .siteMenu a:hover:after,
  header.global .siteMenu a.current:after {
    left: 0;
    right: 0;
    background: #fff;
  }
  header.global .siteMenu .menu a:hover img {
    opacity: 0;
  }
  header.global .siteMenu .menu a:hover .over {
    opacity: 1;
  }


}


@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
  header.global{
	line-height: 0;
	background: #000;
	text-align: center;
	margin-bottom: 20px;
  }
  header.global .layoutFrame {
    padding-top: 15px;
  }
  header.global .siteLogo {
    padding-bottom: 15px;
  }
  header.global .siteLogo img{
    width: 90px;
  }
  header.global,
  header.global.isHover {
    height: auto;
  }

  /*
   * ハンバーガー
   */
  #BtnHamburger {
    position: fixed;
    z-index: 201;
    top: 18px;
    right: 14px;
    width: 32px;
    height: 26px;
  }
  #BtnHamburger a {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  #BtnHamburger span {
    position: absolute;
    right: 5px;
    left: 5px;
    display: block;
    height: 1px;
    background: #FFF !important;
    transition: .3s ease-out;
  }
  #BtnHamburger .top {
    top: 5px;
  }
  #BtnHamburger .middle {
    top: 50%;
    margin-top: -1px;
  }
  #BtnHamburger .bottom {
    top: 19px;
  }
  body.isClose #BtnHamburger .top {
    -webkit-animation: menu-top-close .50s forwards;
    animation: menu-top-close .50s forwards;
  }
  body.isClose #BtnHamburger .middle {
    -webkit-animation: menu-middle-close .50s forwards;
    animation: menu-middle-close .50s forwards;
  }
  body.isClose #BtnHamburger .bottom {
    -webkit-animation: menu-bottom-close .50s forwards;
    animation: menu-bottom-close .50s forwards;
  }
  body.isOpen #BtnHamburger .top {
    -webkit-animation: menu-top-open .50s forwards;
    animation: menu-top-open .50s forwards;
  }
  body.isOpen #BtnHamburger .middle {
    -webkit-animation: menu-middle-open .50s forwards;
    animation: menu-middle-open .50s forwards;
  }
  body.isOpen #BtnHamburger .bottom {
    -webkit-animation: menu-bottom-open .50s forwards;
    animation: menu-bottom-open .50s forwards;
  }
  body.isOpen .setFix #BtnHamburger span {
    background: #000;
  }

  /*
   * ドロワーメニュー
   */
  .siteMenu {
    opacity: 1;
  }
  header.global .siteMenu {
    height: 0;
  }
  header.global .siteMenu .drawerBase {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-transition: 0.3s ease all;
    transition: 0.3s ease all;
    z-index: 200;
  }
  body.isOpen header.global .siteMenu .drawerBase {
    left: 0;
  }
  header.global .siteMenu .menu {
    float: none;
    margin-top: 60px;
  }
  header.global .siteMenu .menu li {
    width: 100%;
    text-align: center;
    height: 40px;
  }
  header.global .siteMenu .menu li .over{
	display: none;  
  }
  header.global .siteMenu .sns {
    background: none;
    width: 100%;
    float: none;
    text-align: center;
  }
  header.global .siteMenu .sns li {
    margin: 0;
    display: inline-block;
  }
  header.global .siteMenu .sns li:not(:last-child) {
    margin-right: 20px;
  }
}