@charset "UTF-8";

/*スマホ設定*/
/*----------------------------------------------------------------*/
/*ナビゲーション展開時に背景を固定*/
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

/*----------------------------------------------------------------*/
/*タップ時のハイライトを削除*/
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: all .15s;
}

a:hover {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*-----------------------------------------*/
/*-----------------------------------------*/
/*リンク基本*/
ul#navigation li a:link,
ul#navigation li a:visited {
  color: #fcfcfc;
  opacity: 1;
}

/*リンク色設定*/
ul#navigation li a:hover,
ul#navigation li a:active,
ul#navigation li.active a:link,
ul#navigation li.active a:visited,
ul#navigation li.active a:hover,
ul#navigation li.active a:active,
.character ul#navigation li a.activeLink:link,
.character ul#navigation li a.activeLink:visited,
.character ul#navigation li a.activeLink:hover,
.character ul#navigation li a.activeLink:active {
  color: #00a5ff;
  opacity: 1;
}

/*----------------------------------------------------------------*/
/*ハンバーガーメニュー*/
/*----------------------------------------------------------------*/
#navToggle {
  position: fixed;
  width: 50px;
  height: 50px;
  background: url("../../_image/nav_open.svg") no-repeat center top/100% auto;
  top: 12px;
  /*fixedで親要素を起点にする場合はleftを指定しない*/
  right: 4px;
  /*テキストを非表示*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  /*カーソルをリンクマークに変更*/
  cursor: pointer;
  z-index: 99;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-image 0.15s;
}

/*----------------------------------------------------------------*/
/*ハンバーガーメニューをクリック
 閉じるボタンに切り替え*/
#navToggle.navToggle-active {
  background: url("../../_image/nav_close.svg") no-repeat center top/100% auto;
  opacity: .7;
  z-index: 99;
  -webkit-transition: background-image .15s;
}

/*----------------------------------------------------------------*/
/*スマホ用オーバーレイナビゲーション*/
/*----------------------------------------------------------------*/
/*ナビゲーションの背景 初期状態では非表示*/
nav.overlay {
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 0;
  background: #000;
  padding: 20px 0 12px 0;
  top: 0;
  right: 0;
  opacity: 0;
  /*透明度、表示を変更、高さを変更する際のアニメーション設定*/
  /*戻る場合の秒数設定*/
  -webkit-transition: opacity .35s, visibility .35s, height .55s;
  /*PAGETOPリンクは100とする*/
  z-index: 98;
  /*スクロールをスムーズに設定*/
  -webkit-overflow-scrolling: touch;
}

/*----------------------------------------------------------------*/
/*ハンバーガーメニューをクリックで.overlayに追加*/
/*nav.overlayを表示*/
nav.overlay.overlay-active {
  visibility: visible;
  overflow: auto;
  height: 100%;
  opacity: .94;
  /*max-height: 340px;*/
  z-index: 98;
}

/*----------------------------------------------------------------*/
/*ナビゲーション内のリスト 初期状態では非表示*/
ul#navigation,
ul#navigationBnr {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .0s, visibility .0s;
}

/*#navToggleをクリックでul#navigationに追加*/
ul#navigation.navigation-active,
ul#navigationBnr.navigation-active {
  visibility: visible;
  opacity: 1;
  /*overflow: auto;*/
}

/*----------------------------------------------------------------*/
/*ナビゲーション内のリスト*/
ul#navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 96%;
  margin: 0 auto;
  text-align: center;
}

ul#navigation li {
  width: 46%;
  margin: 0 2%;
  padding: 16px 0;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/*最後は下線なし*
ul#navigation li:last-child {
  border: none;
}/

/*-----------------------------------------*/
/*バナー設定*/
ul#navigationBnr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 48px auto;
}

ul#navigationBnr li {
  width: 50%;
  margin: 0;
  padding: 6px 2px;
  text-align: center;
  border-bottom: none;
}

ul#navigationBnr li img {
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/*----------------------------------------------------------------*/
/*ヘッダーレイアウト*/
/*----------------------------------------------------------------*/
header {
  position: relative;
  background: #000;
  z-index: 11;
}

/*----------------------------------------------------------------*/
/*スマホ用h1ロゴ*/
/*----------------------------------------------------------------*/
header h1 {
  width: 50%;
  padding: 8px 12px;
  text-align: left;
  line-height: 0;
}

/*リンク設定*/
header h1 a {
  display: inline-block;
}

/*リンク設定*/
header h1 img {
  display: inline-block;

}

/*----------------------------------------------------------------*/
/*スマホ用オーバーレイナビゲーション内のレイアウト*/
/*----------------------------------------------------------------*/
/*メニューの上マージン*/
nav.overlay .inner {
  width: 100%;
  margin: 0 auto;
  padding-top: 60px;
}

/*----------------------------------------------------------------*/
/*ナビゲーション内ロゴ*/
nav.overlay .navLogo {
  width: 60%;
  height: auto;
  margin: 24px auto;
}

/*----------------------------------------------------------------*/
@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設定*/
  /*----------------------------------------------------------------*/
  /*ヘッダーレイアウト*/
  /*----------------------------------------------------------------*/
  header {
    background: transparent;
  }

  /*ハンバーガーメニュー（PCでは非表示）*/
  /*----------------------------------------------------------------*/
  #navToggle {
    display: none;
  }

  /*----------------------------------------------------------------*/
  /*PC用オーバーレイナビゲーション*/
  /*----------------------------------------------------------------*/
  nav.overlay {
    visibility: visible;
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 46px;
    margin: 0 auto;
    background: #000;
    padding: 0;
    top: 0;
    right: 0;
    opacity: 1;
    /*透明度、表示を変更、高さを変更する際のアニメーション設定*/
    -webkit-transition: opacity .0s, visibility .0s, height .0s;
    /*PAGETOPリンクは100とする*/
    z-index: 98;
    /*スクロールをスムーズに設定*/
    -webkit-overflow-scrolling: touch;
  }

  /*----------------------------------------------------------------*/
  /*PC用オーバーレイナビゲーション内のレイアウト*/
  /*----------------------------------------------------------------*/
  nav.overlay .inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 1024px;
    margin: 0 auto;
    /*スマホの設定をリセット*/
    padding-top: 0;
  }

  /*----------------------------------------------------------------*/
  /*ナビゲーション内のリスト 初期状態で表示*/
  /*----------------------------------------------------------------*/
  ul#navigation {
    visibility: visible;
    opacity: 1;
  }

  /*----------------------------------------------------------------*/
  /*ナビゲーション内のリスト*/
  /*----------------------------------------------------------------*/
  ul#navigation {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 0 0 0 20px;
  }

  ul#navigation li {
    width: auto;
    margin: 0;
    padding: 0 12px;
    font-size: 1.3rem;
    line-height: 1;
    border: none;
  }

  /*-----------------------------------------*/
  /*バナー設定（PC版では非表示）*/
  ul#navigationBnr {
    display: none;
  }

  /*----------------------------------------------------------------*/
  /*PC用h2ロゴ（PC版では非表示）*/
  /*----------------------------------------------------------------*/
  header h1 {
    display: none;
  }

  /*----------------------------------------------------------------*/
  /*ナビゲーション内ロゴ*/
  nav.overlay .navLogo {
    width: 200px;
    height: 29px;
    margin: 0;
  }

  /*--------------------------------------------------------end@media*/
}

@media screen and (max-width: 320px) {
  /*　iPhone5用 画面サイズが320px以下はここを読み込む　*/
  /*--------------------------------------------------------end@media*/
}