@charset "utf-8";

/* ===================================================================
CSS information
 file name : header.css
 style info : ヘッダー部分で使用するCSS
=================================================================== */

/* ---------------------------------------------
 ヘッダー上段（サイトロゴ、SNSボタン、ログインメニュー） 
 --------------------------------------------- */
#header .headerUpper { position: relative; }

#header .headerUpper .siteLogo {
  text-align: center;
  padding: 12px 0 14px;
}

#header .headerUpper .siteLogo img { width: 170px; }

/*--- SNSボタン ---*/
#header .headerUpper .headerSns {
  position: absolute;
  top: 18px;
  left: 0;
}

#header .headerUpper .headerSns li {
  float: left;
  margin-right: 10px;
}

#header .headerUpper .headerSns li img {
  width: 30px;
  opacity: 0.8;
}

#header .headerUpper .headerSns li:hover img { opacity: 1; }

/*--- ログインメニュー ---*/
#header .headerUpper .login {
  position: absolute;
  top: 30px;
  right: 0;
  font-size: 12px;
}

#header .headerUpper .loginMenu {
  position: absolute;
  top: 18px;
  right: -5px;
  font-size: 12px;
  padding: 0 10px 10px 30px;
}

#header .headerUpper .loginMenu .menuBtn img { width: 30px; }

#header .headerUpper .loginMenu:hover .menuBtn img {
  cursor: pointer;
  opacity: 0.5;
}

#header .headerUpper .loginMenu .menuBox {
  position: absolute;
  top: 50px;
  right: 0px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
}

#header .headerUpper .loginMenu:hover .menuBox {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#header .headerUpper .loginMenu .menuBox .menuList {
  position: relative;
  background: #fafafa;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
  width: 170px;
}

#header .headerUpper .loginMenu .menuBox .menuList:before {
  position: absolute;
  top: -4px;
  right: 20px;
  content: " ";
  height: 8px;
  width: 8px;
  background: #fafafa;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

#header .headerUpper .loginMenu .menuBox .menuList ul {
  background:#fafafa;
  padding: 5px 20px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}

#header .headerUpper .loginMenu ul li {
  border-top: 1px solid #e8e8e8;
  line-height: 3.8;
  padding-left: 25px;
}

#header .headerUpper .loginMenu ul li:first-child { border-top: none; }
#header .headerUpper .loginMenu ul li.mypage { background: url("/images/n/nbo/2016/common/icon_mypage.png") no-repeat left 13px /16px; }
#header .headerUpper .loginMenu ul li.regist { background: url("/images/n/nbo/2016/common/icon_regist.png") no-repeat left 13px /16px; }
#header .headerUpper .loginMenu ul li.logout { background: url("/images/n/nbo/2016/common/icon_logout.png") no-repeat left 15px /16px; }

/*--- 日付 ---*/
#header .headerUpper .date {
  position: absolute;
  bottom: 3px;
  left: 0;
  font-size: 11px;
}

/* ---------------------------------------------
 ヘッダー下段（ローカルナビ、検索窓）
 --------------------------------------------- */
#header .headerLower { position: relative; }

/*--- ローカルナビ ---*/
#header .headerLower .localNavi {
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  font-size: 12px;
  height: 35px;
  line-height: 35px;
}

#header .headerLower .localNavi li {
  float: left;
  margin-left: 23px;
  position: relative;
}

#header .headerLower .localNavi li a { padding: 10px 0; }
#header .headerLower .localNavi li:first-child { margin-left: 20px; }
#header .headerLower .localNavi li.active,
#header .headerLower .localNavi ul.top li.top a,
#header .headerLower .localNavi ul.retail li.retail a,
#header .headerLower .localNavi ul.ict li.ict a,
#header .headerLower .localNavi ul.maker li.maker a,
#header .headerLower .localNavi ul.economy li.economy a,
#header .headerLower .localNavi ul.skill li.skill a,
#header .headerLower .localNavi ul.feature li.feature a { color: #e50020; }

#header .headerLower .localNavi li.feature a {
  background: url("/images/n/nbo/2016/common/icon_arrow_down.png") no-repeat right 17px /6px;
  padding-right: 12px;
}

#header .headerLower .localNavi li ul.sub {
  position: absolute;
  top: 35px;
  left: -20px;
  visibility: hidden;
  opacity: 0;
  border: 1px solid #e8e8e8;
  background: #fff;
  width: 250px;
  padding-bottom: 15px;
  z-index: 2;
}

#header .headerLower .localNavi li:hover ul.sub {
  visibility: visible;
  opacity: 1;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#header .headerLower .localNavi li ul.sub li {
  display: inline-block;
  width: 100px;
  margin: 15px 0 0 18px;
  height: 15px;
  line-height: 15px;
}

#header .headerLower .localNavi li ul.sub li a {
  color: #000 !important;
  background: none;
  padding: 3px 0 !important;
  text-decoration: none;
}

#header .headerLower .localNavi li ul.sub li a:hover { text-decoration: underline; }

/*--- NBDボタン ---*/
#header .headerLower .btnNBD {
  position: absolute;
  top: 6px;
  right: 210px;
}

#header .headerLower .btnNBD a {
  background: #e50020;
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: 12px;
  height: 24px;
  line-height: 25px;
  text-align: center;
  width: 130px;
}

#header .headerLower .btnNBD a:hover {
  text-decoration: none;
  background: #d3001d;
  -webkit-transition: all .6s;
  transition: all .6s;
}

/*--- ページ内検索 ---*/
#header .headerLower .searchBox {
  position: absolute;
  top: 6px;
  right: 0;
}

#header .headerLower .searchBox input {
  font-size: 12px;
  margin:0;
  padding:0;
}

#header .headerLower .searchBox .field {
  border: 1px solid #c0c0c0;
  border-right: none;
  height: 22px;
  width: 175px;
  text-indent: 5px;
}

#header .headerLower .searchBox .btn { width: 26px; }