/* =========================================================
* タブの一つをデザイン変更　（個別URL用）
* ====================================================== */
.tabLayout.tabItemWrapper div {
    height: 53px !important;
    background-color: #F7F7F7;
}
.tabLayout.tabItemWrapper div.tabSelect span div {
    background-color: rgb(139,24,109);
    color: rgb(255,255,255);
}
/*
.tabLayout.tabItemWrapper div.tabItem:hover {
    background-color: rgb(139,24,109);
    color: rgb(255,255,255);
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
}
.tabLayout.tabItemWrapper div a {
    display: table-cell;
    width: 100%;
    height: 100%;
    line-height: 1.1;
}
*/
.tabLayout.tabItemWrapper div a {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 1.1;
}
.tabLayout.tabItemWrapper div a span {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 1.1;
    vertical-align: middle;
    padding-top: 7px;
}
.tabLayout.tabItemWrapper div a span#case {
    line-height: 53px;
    vertical-align: middle;
    padding-top: 0px;
}
.tabItemWrapper div.tabSelect{
    background-color: rgb(139,24,109);
    color: rgb(255,255,255);
}

div.tabItem a:hover {
    color: rgb(255,255,255) !important;
}

.tabItem{
  padding-left: 30px;
  vertical-align:middle;
  font-size: 1.1em;
  line-height: 1.1em;
  font-weight: bold;
}
.tabItem span.small{
  font-size: 0.875em;
}
.tabItem div.small{
  font-size: 0.875em;
}
.tabItem b.small{
  font-size: 0.875em;
}


.Tab .tabItem {position: relative;}
.TabInPage .tabItem {position: relative;}

.tabItem:before {
  position: absolute;
  top: 3px;
  left: 20px;
  margin: 0 0 0 0;
}

.tabItem:nth-child(1):before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag1_off.png);}
.tabItem:nth-child(1).tabSelect:before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag1_on.png) !important;}
.tabItem:nth-child(1):hover::before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag1_over.png) !important;}

.tabItem:nth-child(2):before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag2_off.png);}
.tabItem:nth-child(2).tabSelect:before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag2_on.png) !important;}
.tabItem:nth-child(2):hover::before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag2_over.png) !important;}

.tabItem:nth-child(3):before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag3_off.png);}
.tabItem:nth-child(3).tabSelect:before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag3_on.png) !important;}
.tabItem:nth-child(3):hover::before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag3_over.png) !important;}

.tabItem:nth-child(4):before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag4_off.png);}
.tabItem:nth-child(4).tabSelect:before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag4_on.png) !important;}
.tabItem:nth-child(4):hover::before{content: url(/content/dam/nttcom/hq/jp/business/services/network/m2m-remote-access/bmobile/img/icon_tabnavi_tag4_over.png) !important;}

#jirei01.head_anchor_link {
    margin-top: 80px;
}

/*IE8〜11*/
@media screen\0 {
    .tabItem:before {
      position: absolute;
      top: 10%;
      left: 20px;
      margin: 0 0 0 0;
    }
    .tabItem:nth-child(1):before {
      top: 10%;
    }
}

@media screen and (max-width:1024px){
    .tabItem span {
        vertical-align: middle;
    }
    .tabNavigation .tabLayout,
    .tabNavi-transition .tabLayout {
    display: table;
    width: 1024px;
    margin: 0 auto;
    table-layout: fixed;
  }
    .tabItem span{
    font-size: 0.95em;
  }

}

@media screen and (max-width:768px){
  .tabItem span{
    font-size: 0.95em;
  }
    .tabNavigation .tabLayout,
    .tabNavi-transition .tabLayout {
    display: table;
    width: 720px;
    margin: 0 auto;
    table-layout: fixed;
  }

  .tabLayout.tabItemWrapper div {
      height: 53px !important;
  }
  .tabLayout.tabItemWrapper div a {
      display: table-cell;
      width: 100%;
      height: 100%;
      line-height: 1.0;
  }

  .tabItem:before,
  .tabItem span:before,
  .tabItem.tabSelect:before,
  .tabItem.tabSelect span:before{
    content: none !important;
  }
  .tabLayout.tabItemWrapper div {
      display: table-cell;
      line-height: 1.0;
      margin: 0 auto;
      text-align: center;
      vertical-align: middle;
  }
  .tabNavigation .tabLayout.fixed,
  .tabNavi-transition .tabLayout {
      width: 95%;
      margin: 0 auto;
      text-align: center;
    }

  .tabItem {
    position: relative;
    padding-left: 0px;
    margin: 0 auto;
    text-align: center;
  }
  .tabItem:before {
    position: absolute;
    top: 3px;
    left: 0px;
    margin: 0 auto;
  }
  .tabItem span{
    padding-left: 0px;
    vertical-align:middle;
    margin: 0 auto;
    text-align: center;
      padding-top: 0px;
    }
  .tabLayout.tabItemWrapper div a span{
    padding-top: 2px;
}

  .tabItem:nth-child(1):before{content: none !important;}
  .tabItem:nth-child(1).tabSelect:before{content: none !important;}
  .tabItem:nth-child(1):hover::before{content: none !important;}

  .tabItem:nth-child(2):before{content: none !important;}
  .tabItem:nth-child(2).tabSelect:before{content: none !important;}
  .tabItem:nth-child(2):hover::before{content: none !important;}

  .tabItem:nth-child(3):before{content: none !important;}
  .tabItem:nth-child(3).tabSelect:before{content: none !important;}
  .tabItem:nth-child(3):hover::before{content: none !important;}

  .tabItem:nth-child(4):before{content: none !important;}
  .tabItem:nth-child(4).tabSelect:before{content: none !important;}
  .tabItem:nth-child(4):hover::before{content: none !important;}
}

@media screen and (min-width:481px){
  .br_mobile{display:none; }
}