/*PC設定*/
/*----------------------------------------*/
/* zwHeader（ヘッダー）
/*----------------------------------------*/
.zwHeader {
  width: 1130px;
  height: 154px;
  position: relative;
}
/*----------------------------------------*/
/*ゾイドロゴ*/
.zwLogo {
  position: absolute;
  width: 196px;
  height: 73px;
  background: url("../images/header_logo.png") no-repeat 0 0 /100% auto;
  margin: 0 0 0 -550px;
  left: 50%;
  top: 66px;
  z-index: 5;
}
/*ゾイドロゴ オンマウス*/
.zwLogo:hover {
  background: url("../images/header_logo_on.png") no-repeat 0 0 /100% auto;
}
/*リンク範囲*/
.zwLogo a {
  display: block;
  width: 196px;
  height: 73px;
  /* テキストを画像に置換する */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
/*----------------------------------------*/
/* zwNav
/*----------------------------------------*/
/*ナビゲーション レイアウト*/
.zwNav {
  position: relative;
  width: 1130px;
  height: 154px;
  background: url(../images/bg_nav_3rd.png) no-repeat 0 0 /100% auto;
  margin: 0 auto;
}
/*ナビゲーション ボタン*/
.zwNav ul {
  position: absolute;
  width: 1130px;
  height: 154px;
  margin: 0;
  padding: 0;
  top: 48px;
  left: 214px;
  font-size: 0;
}
/*ナビゲーション ボタン*/
.zwNav ul li {
  position: relative;
  display: inline-block;
  margin: 0 0 0 0;
  padding: 0;
  font-size: 0;
}
/*スマホナビゲーション内 ロゴ（PCでは非表示）*/
.zwNav ul li#navBtn0 {
  display: none;
}
/*ゾイドとは*/
.zwNav ul li#navBtn1 div {
  display: block;
  width: 95px;
  height: 70px;
  background: url("../images/navi01_3rd.png") no-repeat center /100% auto;
}
/*商品情報*/
.zwNav ul li#navBtn2 div {
  display: block;
  width: 86px;
  height: 70px;
  background: url("../images/navi02_3rd.png") no-repeat center /100% auto;
}
/*ゾイドワイルド戦記*/
.zwNav ul li#navBtn3 div {
  display: block;
  width: 158px;
  height: 70px;
  background: url("../images/navi03_3rd.png") no-repeat center /100% auto;
}
/*ゾイドアプリ情報*/
.zwNav ul li#navBtn4 div {
  display: block;
  width: 100px;
  height: 70px;
  background: url("../images/navi04_3rd.png") no-repeat center /100% auto;
}
/*イベントキャンペーン*/
.zwNav ul li#navBtn5 div {
  display: block;
  width: 112px;
  height: 70px;
  background: url("../images/navi05_3rd.png") no-repeat center /100% auto;
}
/*ミュージアム*/
.zwNav ul li#navBtn6 div {
  display: block;
  width: 110px;
  height: 70px;
  background: url("../images/navi06_3rd.png") no-repeat center /100% auto;
}
/*ゾイドベース店舗リスト*/
.zwNav ul li#navBtn7 div {
  display: block;
  width: 112px;
  height: 70px;
  background: url("../images/navi07_3rd.png") no-repeat center /100% auto;
}
/*ゾイドワイルド列伝*/
.zwNav ul li#navBtn8 div {
  display: block;
  width: 158px;
  height: 70px;
  background: url("../images/navi08_3rd.png") no-repeat center /100% auto;
}
/*ボタン オンマウス*/
.zwNav ul li#navBtn1 div:hover {
  background: url("../images/navi01_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn2 div:hover {
  background: url("../images/navi02_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn3 div:hover {
  background: url("../images/navi03_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn4 div:hover {
  background: url("../images/navi04_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn5 div:hover {
  background: url("../images/navi05_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn6 div:hover {
  background: url("../images/navi06_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn7 div:hover {
  background: url("../images/navi07_3rd_on.png") no-repeat center /100% auto;
}
.zwNav ul li#navBtn8 div:hover {
  background: url("../images/navi08_3rd_on.png") no-repeat center /100% auto;
}
/*ハンバーガーメニュー（PCでは非表示）*/
.toggle-button {
  display: none;
}
@media screen and (max-width: 667px) {
  /*スマホ設定*/
  .overlay {
    position: fixed;
    width: 100%;
    height: 0;
    background: url(../images/tex_red.png) repeat center top /100% auto;
    border: solid 8px #5b0f19;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    z-index: 23001;
  }
  /*----------------------------------------------------------------*/
  /*#toggleをクリックで.overlayに追加するクラス*/
  .nav-active {
    opacity: .96;
    visibility: visible;
    overflow: auto;
    height: 100%; /*max-height: 340px;*/
  }
  /*ハンバーガーメニュー*/
  #navToggle {
    position: fixed;
    width: 60px;
    height: 60px;
    background: url(../images/nav_menu.png) no-repeat center /100% auto;
    padding-bottom: calc(100%*434/434);
    margin: 0;
    padding: 0;
    top: 66px;
    /*fixedで親要素を起点にする場合はleftを指定しない*/
    right: 5px;
    z-index: 23000;
    text-indent: -99999px;
    cursor: pointer;
  }
  /*ハンバーガーメニュー 閉じる*/
  #navToggle.toggle-active {
    background: url(../images/nav_menu_close.png) no-repeat center /100% auto;
    top: 24px;
    z-index: 23002;
  }
  /*----------------------------------------*/
  /* zwHeader（ヘッダー）
/*----------------------------------------*/
  /*ゾイドロゴ*/
  .zwLogo {
    position: absolute;
    width: 40%;
    height: auto;
    background: url("../images/header_logo.png") no-repeat 0 0 /100% auto;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 20px;
  }
  /*リンク範囲*/
  .zwLogo a {
    display: block;
    width: 100%;
    padding-bottom: calc(100%*200/750);
    /* テキストを画像に置換する */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  /*----------------------------------------*/
  /* zwNav
/*----------------------------------------*/
  /*ナビゲーション レイアウト*/
  .zwNav {
    position: relative;
    width: 100%;
    height: auto;
    background: none;
    padding-top: 24px;
  }
  .zwNav ul {
    position: relative;
    width: 100%;
    height: auto;
    background: none;
    margin: 0% auto 0;
    font-size: 0;
    top: 0;
    left: 0;
    z-index: 20;
  }
  .zwNav ul li {
    display: block;
  }
  .zwNav ul li#navBtn0 {
    display: none;
  }
  .zwNav ul li#navBtn0 img {
    width: 100%;
  }
  .zwNav ul li#navBtn1 div {
    width: 100%;
    height: auto;
    background: url("../images/nav01sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*128/618);
  }
  .zwNav ul li#navBtn2 div {
    width: 100%;
    height: auto;
    background: url("../images/nav02sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*128/618);
  }
  .zwNav ul li#navBtn3 div {
    width: 100%;
    height: auto;
    background: url("../images/nav03sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*131/618);
  }
  .zwNav ul li#navBtn4 div {
    width: 100%;
    height: auto;
    background: url("../images/nav04sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*131/618);
  }
  .zwNav ul li#navBtn5 div {
    width: 100%;
    height: auto;
    background: url("../images/nav05sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*131/618);
  }
  .zwNav ul li#navBtn6 div {
    width: 100%;
    height: auto;
    background: url("../images/nav06sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*123/618);
  }
  .zwNav ul li#navBtn7 div {
    width: 100%;
    height: auto;
    background: url("../images/nav07sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*123/618);
  }
  .zwNav ul li#navBtn8 div {
    width: 100%;
    height: auto;
    background: url("../images/nav08sp_3rd.svg") no-repeat center /auto 20px;
    padding-bottom: calc(100%*123/618);
  }
  /*ボタン オンマウス*/
  .zwNav ul li#navBtn1 div:hover {
    background: url("../images/nav01sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn2 div:hover {
    background: url("../images/nav02sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn3 div:hover {
    background: url("../images/nav03sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn4 div:hover {
    background: url("../images/nav04sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn5 div:hover {
    background: url("../images/nav05sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn6 div:hover {
    background: url("../images/nav06sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn7 div:hover {
    background: url("../images/nav07sp_3rd.svg") no-repeat center /auto 20px;
  }
  .zwNav ul li#navBtn8 div:hover {
    background: url("../images/nav08sp_3rd.svg") no-repeat center /auto 20px;
  }
  /*--------------------------------------------------------end@media*/
}
/*----------------------------------------------------------------*/
@media screen and (min-width:480px) and (max-width:600px) {
  /*--------------------------------------------------------end@media*/
}
@media screen and (min-width:600px) and (max-width:960px) {
  /*　iPad用 画面サイズが600pxから960pxまではここを読み込む　*/
  /*--------------------------------------------------------end@media*/
}
@media screen and (min-width:960px) and (max-width:1280px) {
  /*　小型PC用 画面サイズが960pxから1280pxまではここを読み込む　*/
  /*--------------------------------------------------------end@media*/
}
@media screen and (min-width:1280px) {
  /*　大型PC用 画面サイズが1280pxからはここを読み込む　*/
  /*--------------------------------------------------------end@media*/
}
@media screen and (min-width:668px) {
  /*　PC用 画面サイズが668pxからはここを読み込む　*/
  /*PC設定*/
  .overlay {
    visibility: visible;
    position: relative;
    background: none;
    margin: -40px auto 14px auto;
    padding: 0;
    opacity: 1;
  }
  #navToggle {
    display: none;
  }
  /*--------------------------------------------------------end@media*/
}
@media screen and (max-width: 320px) {
  /*　iPhone5用 画面サイズが320px以下はここを読み込む　*/
  /*--------------------------------------------------------end@media*/
}