@import url(http://fonts.googleapis.com/css?family=Vollkorn|Roboto);
/*----------------------------------------------------------------*/
/*オーバーレイナビゲーション設定*/
/*----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /*ボタンサイズ SP用設定*/
  .toggle-button {
    width: 50px;
    height: 48px;
    padding: 10px 0 0 2px;
  }
  /*マウスホバー時設定*/
  .toggle-button:hover {
    opacity: 1.0;
  }
  /*-------------------------------------------------------end@media*/
}
@media screen and (min-width: 768px) {
  /*ボタンサイズ PC用設定*/
  .toggle-button {
    width: 56px;
    height: 48px;
    padding: 10px 0 0 2px;
  }
  /*マウスホバー時設定*/
  .toggle-button:hover {
    opacity: 0.6;
  }
  /*-------------------------------------------------------end@media*/
}
@media screen and (max-width: 374px) {
  /*ボタンサイズ iPhone5用設定*/
  .toggle-button {
    width: 45px;
    height: 48px;
    padding: 10px 0 0 2px;
  }
  /*マウスホバー時設定*/
  .toggle-button:hover {
    opacity: 1.0;
  }
  /*-------------------------------------------------------end@media*/
}
/*ボタンレイアウト設定（共通）*/
.toggle-button {
  position: fixed;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  font-size: 7px;
  color: #333;
  text-align: center;
  top: 0;
  /*fixedで親要素を起点にする場合はleftを指定しない
	left:0;*/
  z-index: 999999;
  cursor: pointer;
}
/*ハンバーガーボタン設定*/
.bar {
  display: block;
  width: 26px;
  height: 4px; /*（バーの高さ）*/
  background: #333;
  margin: 0 auto 4px; /*（下マージン）*/
  /*要素を0.3秒でアニメーション*/
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 3px; /* CSS3草案 */
  -webkit-border-radius: 3px; /* Safari,Google Chrome用 */
  -moz-border-radius: 3px; /* Firefox用 */
}
/*----------------------------------------------------------------*/
/*#toggleをクリックで追加するクラス*/
.toggle-active {
  background: none;
  color: #FFF;
}
/*----------------------------------------------------------------*/
/*ハンバーガーボタンの背景を白に変更*/
.toggle-active .bar {
  background: #FFF;
}
/*ハンバーガーの設定（アニメーションで × に変更する）
(4px（バーの高さ）+4px（下マージン）× 2（上と下のバー）) + 4px（最後のバーの高さ）÷ 2 = 8px（Y軸の移動距離）*/
.toggle-active .top {
  -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
}
/*真ん中のバーは非表示に設定*/
.toggle-active .middle {
  opacity: 0;
}
.toggle-active .bottom {
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
}
/*----------------------------------------------------------------*/
/*ナビゲーションの背景*/
.overlay {
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 0;
  background: rgba(35,120,180,.95);
  top: 0;
  left: 0;
  opacity: 0;
  /*透明度、表示を変更、高さを変更する際のアニメーション設定*/
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  z-index: 99999;
  /*スクロールをスムーズに設定*/
  -webkit-overflow-scrolling: touch;
}
/*----------------------------------------------------------------*/
/*#toggleをクリックで.overlayに追加するクラス*/
.nav-active {
  opacity: .96;
  visibility: visible;
  overflow: auto;
  height: 100%; /*max-height: 340px;*/
}