/*
=====================================================================
*
*    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;
	  width: 880px;
	  margin: 0 auto;
	}
	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: 28px;
	}
	
	
	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 .sns li.xicon {
    width: 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;
  }
  header.global .siteMenu.language{
    width: 880px;
    margin: 30px auto 0px auto; 
  }
  
  header.global .siteMenu.language .selectLanguage{
    margin-top: -7px;
  }
  
  
  select {
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* IE用の対策 */
  select.selectlinkPC::-ms-expand {
    display: none;
  }
  
  
  .selectlinkPC{
    /*padding: 5px 5px 0px 2px;*/
    /*border: 1px #ddd solid;
    border-radius: 3px;*/
    background-color: #000;
    color: #FFF;
    cursor: pointer;
    border: none;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: lighter !important;
    width: 50px;
    height: 22px;
    appearance: none; /* デフォルトの矢印を非表示 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('../img/icon_arrow.svg') no-repeat right 10px center;
    background-size: 10px; /* 画像サイズを調整 */
    padding-right: 5px; /* 画像が隠れないように余白を確保 */
  }
  
  .selectlinkPC option{
    color: #000;
  }
  


}


@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: #FFF;
  }

  /*
   * ドロワーメニュー
   */
  .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.xicon{
    width: 15px;
  }
  header.global .siteMenu .sns li:not(:last-child) {
    margin-right: 20px;
  }
  header.global .siteMenu.language .menu li.pcOnly{
    display: none;
  }
  
  header.global .siteMenu .menu.language.snsArea{
    margin: 5px 0px 0px 0px;
  }
  
  header.global .siteMenu .menu.language.snsArea li{
    width: initial;
    max-width: initial;
    min-width: initial;
  }
  
  header.global .siteMenu .menu.language.snsArea li.xicon{
    margin-left: 20px;
    margin-right: 20px;
  }
  
  header.global .siteMenu .menu.language.selectLanguage{
    margin-top: 5px;
  }
  
  
  #SelectLanguage{
    text-align: right;
    margin-right: 18px;
  }
  
  
  .selectlinkPC{
    padding: 0px 5px 0px 2px;
    /*border: 1px #ddd solid;
    border-radius: 3px;*/
    background-color: #000;
    color: #FFF;
    cursor: pointer;
    border: none;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: lighter !important;
  }
  
  .selectlink{
    padding: 5px;
    border: 1px #ddd solid;
    border-radius: 3px;
    background-color: #000;
    color: #FFF;
    cursor: pointer;
  }
  
  .selectlink:hover{
    border: 1px #FFF solid;
    background-color: #222;
  }
  
  
}






header.global .siteMenu .menu.language li {
  display: inline-block;
  margin-right: 10px;
}

header.global .siteMenu .menu.language .navWithFan {
  margin-right: 10px !important;
}


header.global .siteMenu .menu.language .navWebstore {
  margin-right: 44px !important;
}

header.global .siteMenu .menu.language .navShop {
  margin-right: 10px !important;
}


header.global .siteMenu .menu.language .slashicon{
  margin-right: 16px;
}

header.global .siteMenu .menu.language .xicon{
  margin-right: 10px;
}

header.global .siteMenu .menu.language .xicon img{
  width: 15px;
  height: 15px;
}

header.global .siteMenu .menu.language .instaicon{
  margin-right: 44px;
}

header.global .siteMenu .menu.language .langicon{
  margin-right: 3px;
}

header.global .siteMenu .menu.language .langicon img{
  width: 15px;
}



header.global .siteMenu .menu.language .arrowicon{
  margin-left: -7px;
}

header.global .siteMenu .menu.language .arrowicon img{
  width: 11px;
}