/* common */

.arrow{
  position: relative;
  width: 100%;
}

.arrow:before,.arrow:after{
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-top: #999 solid 2px;
  border-right: #999 solid 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow-front:before{
  display: block;
  left: -12px;
}

.arrow-back:after{
  display: block;
  right: 10px;
}

/* button */

.header .signup{
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  text-shadow: none;
  font-weight: normal;
  width: auto;
  margin: 0;
  padding: 0;
}

.btnWrap{
  text-align: center;
  margin: 0 auto;
}

.btnWrap .btn{
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  line-height: 44px;
  font-size: 16px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  font-weight: bold;
}

.btn.signin{
  color: #fff;
  background: #498dca;
  border-color: #36668e;
}

.btn.signup{
  background: #e3a000;
  border-color: #ae8a10;
}

.btn.premium{
  color: #fff;
  background: #aa8616;
  border-color: #7a610d;
}

.hdContentServiceList+.btnWrap{
  text-align: right;
}

.btnWrap .logout{
  display: inline-block;
  font-weight: bold;
  color: #666;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
}

.hdContent .btnWrap .logout:before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background: url(../img/site_header/icon_logout.png) no-repeat left bottom;
  background-size: 100%;
  vertical-align: middle;
}

/* header */

.header{
  width: 100%;
  height: 48px;
  max-width: 100%;
  z-index: 1;
  margin-bottom: 6px;
}

.header.global {
  position: fixed;
  top: 0;
  z-index: 9998;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.watch header{
  margin-bottom: 0;
}

.watch div.header{
    margin-bottom: 0;
}

.hdInner{
  position: relative;
/*  display: table;*/
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  line-height: 48px;
  background-color: #222;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  z-index: 3;
}

/* logo */
.hdLogo{
/*  display: table-cell;*/
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.hdTitle{
  width: 118px;
  height: 24px;
}

.hdTitle a{
  display: inline-block;
  width: 100%;
  height: 100%;
  text-indent: -999em;
  overflow: hidden;
  background: url(../img/site_header/hd_logo.png) no-repeat 0 -2px;
  background-size: 100%;
}

.hdVideoTitle{
  width: 88px;
  height: 23px;
}

.hdVideoTitle a{
  display: inline-block;
  width: 100%;
  height: 100%;
  text-indent: -999em;
  overflow: hidden;
  background: url(../img/site_header/logo_nicovideo.png) no-repeat 0 0;
  background-size: 100%;
}

/* button */

.hdNav{
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1;
  overflow: hidden;
}

.hdButton{
  position: relative;
  display: inline-block;
  float:left;
  width: 40px;
  height: 48px;
  vertical-align: middle;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.hdButton.search:before{
  content: "";
  display: block;
  margin: 12px auto 0;
  width: 25px;
  height: 25px;
  background: url(../img/site_header/hd_search.png) no-repeat center center;
  background-size: 100%;
}

.hdButton.menu:after{
  content: "";
  display: block;
  margin: 12px auto 0;
  width: 25px;
  height: 25px;
  background: url(../img/site_header/hd_menu.png) no-repeat center center;
  background-size: 100%;
}

.hdButton.search:after{
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  display: block;
  width: 6px;
  height: 25px;
  border-right: #636363 solid 1px;
  background-size: 100%;
}

.hdButton.search.selected:before{
  background: url(../img/site_header/hd_search_on.png) no-repeat center center;
  background-size: 100%;
}

.hdButton.menu.selected:after{
  background: url(../img/site_header/hd_menu_on.png) no-repeat center center;
  background-size: 100%;
}

/* content */

.hdContent{
  width: 100%;
  background: #d7d7d7;
  background-color: rgba(187,187,187,1);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  line-height: 1;
  z-index: 1;
  box-shadow: 0 0 2px rgba(0,0,0,0.8);
}

/*.searchButtonWrap .searchButton:last-child{
  margin-left: 12px;
}
*/
.hdContentTag .item{
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}


.hdContentTag .item a{
  display: inline-block;
  color: #333;
  line-height: 24px;
  padding: 0 8px;
  background: #e7e7e7;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #999;
}

/* search */
.hdNoFixed .mdSearch.active{
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
  box-shadow: none;
  overflow: hidden;
  position: fixed;
  top: 48px;
  width: 100%;
  background: #ededed;
  left: 0;
}

.mdSearch .hdContentInner{
  /* 新検索UIの中身はpadding0 */
  padding: 0 !important;
}

[aria-hidden='true']{
    display: none !important;
}


/* menu */
.hdContentProfile{
  width: 100%;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
  display: table;
}

.userThumb{
  width: 30px;
  height: 30px;
  line-height: 0px;
  margin-right: 8px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.userThumb img{
  width: 100%;
}

.userName{
  display: table-cell;
  vertical-align: middle;
  padding-right: 15px;
  line-height: 1.3em;
}

.userName a{
  color: #333;
  font-weight: bold;
  text-decoration: underline;
}

.hdContentProfile nav{
  display: table-cell;
  vertical-align: middle;
  width: 90px;
}

.hdContentProfile nav a{
  font-size: 12px;
  color: #333;
}

.hdContentServiceList{
  background: #fff;
  margin-bottom: 8px;
}

.hdContentHeader{
  position: relative;
  padding-left: 10px;
  line-height: 30px;
  background: #767676;
}

.hdContentHeader h2{
  color: #fff;
}

.hdContentHeaderLink {
  position: absolute;
  top: 50%;
  right: 24px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 12px;
  color: #fff;
}

.hdContentHeaderLink::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  width: 5px;
  height: 5px;
  margin-top: -1px;
  border-top: #fff solid 2px;
  border-right: #fff solid 2px;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}

.hdContentBody .itemList{
  border: #ccc solid 1px;
  border-bottom: 0;
}


.hdContentBody .itemList:after{
  content: "";
  clear: both;
  display: block;
}

.hdContentBody .item{
  float: left;
  width: 50%;
  height: 40px;
  border-left: #ccc solid 1px;
  border-bottom: #ccc solid 1px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.hdContentBody .item:nth-child(even){
  border-left: 0;
}

.hdContentBody .item.top{
  float: none;
  width: 100%;
  text-align: center;
  border-left: 0;
}

.hdContentBody .item a{
  position: relative;
  display: inline-block;
  color: #333;
  width: 100%;
  line-height: 40px;
  padding-left: 40px;
  font-weight: bold;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.hdContentBody .item a:before{
  position: absolute;
  top: 8px;
  left: 8px;
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../img/site_header/sp_service.png?20170209) no-repeat;
  background-size: 23px auto;
}

.hdContentBody .top a:before{
  background-position: 0 0;
}

.hdContentBody .live a:before{
  background-position: 0 -58px;
}

.hdContentBody .news a:before{
  background-position: 0 -152px;
}

.hdContentBody .channel a:before{
  background-position: 0 -89px;
}

.hdContentBody .blomaga a:before{
  background-position: 0 -122px;
}

.hdContentBody .manga a:before{
  background-position: 0 -239px;
}

.hdContentBody .book a:before{
  background-position: 0 -182px;
}

.hdContentBody .illust a:before{
  background-position: 0 -207px;
}

.hdContentBody .atsumaru a:before{
  background-position: 0 -270px;
}

.hdContentBody .item.video a::before{
  width: 22px;
  height: 25px;
  background: url(../img/site_header/icon_tvchan.png) no-repeat;
  background-size: 22px auto;
}

.hdContentBody .item.mastodon a::before{
  width: 23px;
  height: 26px;
  background: url(../img/site_header/icon_mastodon.png) no-repeat;
  background-size: 23px auto;
}


/* slide animation */
body.hdNoFixed {
  /* 共通ヘッダーの高さ + margin-bottom:6px; 分 */
  padding-top: 54px;
}

body.hdNoFixed.watch{
  /* Watchページ用 共通ヘッダーの高さ分 */
  padding-top: 48px;
}

body.hdNoFixed.watch.fixed{
  /* watchページ画面追従モードの時はpaddingをつけない */
  padding-top: 0;
}

body.hdNoFixed.watch.fixed .header{
  /* watchページ画面追従モードの時は、共通ヘッダーをstaticに */
  position: static;
}

@media screen and (orientation: landscape) {
  body.hdNoFixed.watch{
    /* Watchページlandscapeの時はpaddingをつけない */
    padding-top: 0;
  }
}
/* Android4系のバグを防ぐため、Watchページではbodyをfixedさせない */
.watch.siteWide-BodyAction_Fixd{
  position: static !important;
}


.hdNoFixed .header{
  position: fixed;
  height: auto;
  top: 0;
  left: 0;
}

.hdNoFixed .hdContent.mdSearch{
  height: 0;
  width: 100%;
  overflow: hidden;
}

.hdNoFixed .hdContent.mdNavigation {
  max-height: 0;
  width: 100%;
  overflow: hidden;
}

.hdNoFixed .hdContentInner{
  position: relative;
  display: none;
  opacity: 0;
  padding: 10px;
  box-sizing: border-box;
}

.hdNoFixed .active .hdContentInner{
  display: block;
  opacity: 1;
  width: 100%;
  transition: all .3s ease;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
}

.hdNoFixed .hdContent.active{
  transition: all .3s ease;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  z-index: 2
}

.hdNoFixed .hdContent.active.mdSearch{
  /*検索UIでは開く速度を0にする*/
  transition: all 0s ease;
  -moz-transition: all 0s ease;
  -webkit-transition: all 0s ease;
  -o-transition: all 0s ease;
  -ms-transition: all 0s ease;
  z-index: 2
}

.hdNoFixed .mdNavigation.active{
  max-height: 999px;
}

.hdNoFixed .isLogin .mdNavigation.active{
  max-height: 999px;
}

.hdNoFixed .isLogin.isPremium .mdNavigation.active{
  max-height: 999px;
}

/* override sitemap */
.hdNoFixed.sitemap{
  padding-top: 0;
}

.sitemap .header{
  position: static;
}


/* horizonbar */
.headerButton {
  background-color: #e3a000;
  border-right: rgba(0,0,0,0.2) solid 1px;
  border-bottom: rgba(0,0,0,0.2) solid 1px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.headerButton.premium.shrink {
  line-height: 30px;
}

.headerButton .historyAppeal {
  display: block;
  font-size: 12px;
  margin-top: -10px;
}

.watch .headerButton {
  margin-bottom: 8px;
}

.headerButton.premium {
  margin: 8px auto 8px;
  line-height: 40px;
  width: 96%;
}

/*　ヘッダーメニュー内のボタンは幅100% */
.hdContent .headerButton.premium {
  width: 100%;
}

.headerButton.premium.round {
    border-radius: 32px;
}

.headerButton a {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  width: 100%;
  text-align:center;
}
.headerButton.premium a {
  font-size: 16px;
}

.headerButton.premium.campaign p {
 font-size: 12px;
 color: #FFFF00;
 vertical-align: 100%;
 white-space: nowrap;
 line-height: 0px;
 font-weight: normal;
}

.headerButton.premium.campaign a {
  height: 60px;
}

.textShadow {
  text-shadow: rgba(0,0,0,0.6) 1px 1px 0;
}

/* 一般会員用追加分 */
.headerButtonWrap {
  width: 96%;
  margin: 2px auto 8px;
}

.headerButton.signin,
.headerButton.signup {
  line-height: 40px;
  display: inline-block;
}

.headerButton.signin.round,
.headerButton.signup.round {
    border-radius: 32px;
}

.headerButton.signin {
  margin-right: 2%;
  width: 49%;
  background: #498dca;
}

.headerButton.signup {
  width: 49%;
  background: #e3a000;
}

/* 初月無料キャンペーン start 20140602-20140630 */

.btn.signup.campaign {
    padding: 8px 0;
    line-height: 1;
}

.campaignMain{
    display: block;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    vertical-align: 100%;
}

.campaignSub{
    display: block;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1;
    margin-top: 4px;
    color: #ffff00;
    vertical-align: 100%;
}

/* 初月無料キャンペーン end 20140602-20140630 */

/* ############################################################################################################### */

/* TODO:DOMごと削除する */
.inputButton{
  display: none;
}

/* TODO:履歴には件数を出さない DOMから削除できるか相談する */
.SearchHistory .search-SearchList_HearerNumber{
  display: none;
}


/*
  banner
*/

.hdContentBanner {
  width: 100%;
  max-width: 355px;
  margin: 0 auto 10px;
}

.hdContentBanner a {
  display: block;
  width: 100%;
  height: 100%;
}

.hdContentBanner img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

@media screen and (orientation: landscape) {
  .hdContentBanner {
    width: 100%;
    height: 100%;
    max-width: 710px;
  }
}


/* ヘッダーメニューabテスト */
/* ABテスト後に移行します */

.mdNavigation .hdContentInner {
  overflow-y: auto;
}

.hdContentBody .item.top {
  text-align: left;
  border-left: #ccc solid 1px;
}

.hdContentBody .item {
  float: none;
  width: 100%;
}

.hdContentBody .item:nth-child(even) {
  border-left: #ccc solid 1px;
}