@charset "UTF-8";
/*スマホ設定*/
/*----------------------------------------------------------------*/
/*ナビゲーション展開時に背景を固定*/
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
/*----------------------------------------------------------------*/
/*タップ時のハイライトを削除*/
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*----------------------------------------------------------------*/
/*ナビゲーションの画像にドロップシャドウつける*/
.overlay img {
  /*filter: drop-shadow(0px 0px 3px rgba(15, 82, 109, 0.4));*/
}
/*----------------------------------------------------------------*/
/*スマホ用オーバーレイナビゲーション*/
/*ナビゲーションの背景 初期状態では非表示*/
.overlay {
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 0;
  background: rgba(255, 255, 255, 0.99);
  padding: 0;
  top: 0;
  right: 0;
  opacity: 0;
  /*透明度、表示を変更、高さを変更する際のアニメーション設定*/
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  /*PAGETOPリンクは100とする*/
  z-index: 98;
  /*スクロールをスムーズに設定*/
  -webkit-overflow-scrolling: touch;
}
/*----------------------------------------------------------------*/
/*#navToggleをクリックで.overlayに追加するクラス*/
.overlay-active {
  opacity: .96;
  visibility: visible;
  overflow: auto;
  height: 100%; /*max-height: 340px;*/
  z-index: 98;
}
/*----------------------------------------------------------------*/
/*ハンバーガーメニュー*/
#navToggle {
  position: fixed;
  width: 50px;
  height: 48px;
  background: url(../../_image/menu.svg) no-repeat center top /100% auto;
  top: 54px;
  /*fixedで親要素を起点にする場合はleftを指定しない*/
  right: 23px;
  /*テキストを非表示*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  /*カーソルをリンクマークに変更*/
  cursor: pointer;
  z-index: 98;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*ハンバーガーメニュー 閉じるボタンに切り替え*/
#navToggle.navToggle-active {
  background: url("../../_image/menu.svg") no-repeat center top /100% auto;
  opacity: .7;
  z-index: 99;
}
/*----------------------------------------------------------------*/
/*ナビゲーション内ロゴ*/
nav h1 {
  width: 40%;
  height: auto;
  margin: 24px auto;
}
/*-----------------------------------------------------------*/
/*メニュー*/
nav ul {
  width: 90%;
  margin: 7px auto 36px;
  list-style: none;
  font-size: 0;
}
nav ul li {
  display: inline-block;
  width: 50%;
  margin: 0 0 24px;
  font-size: 15px;
  color: #CCC;
  text-align: center;
}
nav ul li a:link, nav ul li a:visited {
  display: block;
  color: #333;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:active {
  display: block;
  color: #CCC;
  text-decoration: none;
}
/*----------------------------------------------------------------*/
/*SNS*/
nav .sns ul {
  width: 100%;
  margin: 12px auto 36px;
  padding: 0;
  text-align: center;
}
nav .sns ul li {
  display: inline-block;
  width: 30px;
  margin: 0 4px;
}
nav .sns li img {
  width: auto;
  height: 30px;
  margin: 0 auto;
}
/*-----------------------------------------------------------*/
/*バナー*/
.bnr {
  display: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.bnr li {
  display: inline-block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0 4px;
  vertical-align: top;
}
.bnr li img {
  width: auto;
  height: 80px;
}
/*----------------------------------------------------------------*/
@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からはここを読み込む　*/
  .overlay {
    position: relative;
    background: transparent;
    opacity: 1;
  }
  .overlay::after {
    content: "";
    display: block;
    clear: both;
  }
  /*PCではボタンを非表示*/
  #navToggle {
    display: none;
  }
  /*-----------------------------------------------------------*/
  /*ナビゲーション*/
  nav.overlay {
    visibility: visible;
    position: relative;
    width: 300px;
    margin: 0 0 0 24px;
    padding: 120px 0 0 0;
    z-index: 98;
  }
      .lower nav.overlay {
    visibility: visible;
    position: relative;
    width: 300px;
    margin: 0 0 0 24px;
    padding: 20px 0 0 0;
    z-index: 98;
  }
  nav::after {
    content: "";
    display: block;
    clear: both;
  }
  /*-----------------------------------------------------------*/
  /*ナビゲーション内ロゴ*/
  nav h1 {
    width: 300px;
    height: 181px;
    position: relative;
    margin: 0;
    padding: 0;
  }
  /*-----------------------------------------------------------*/
  /*メニュー*/
  nav ul {
    width: 260px;
    margin: 7px auto 34px;
    list-style: none;
  }
  nav ul li {
    display: block;
    width: auto;
    margin: 0 0 12px;
    font-size: 15px;
    color: #CCC;
    text-align: left;
  }
  nav ul li a:link, nav ul li a:visited {
    display: block;
    color: #333;
    text-decoration: none;
  }
  nav ul li a:hover, nav ul li a:active {
    display: block;
    color: #CCC;
    text-decoration: none;
  }
  /*----------------------------------------------------------------*/
  /*SNS*/
  nav .sns ul {
    margin: 12px 12px 36px;
    padding: 0;
    text-align: left;
  }
  nav .sns ul li {
    display: inline-block;
    margin: 0 4px;
  }
  nav .sns li img {
    width: auto;
    height: 30px;
    margin: 0 auto;
  }
  /*-----------------------------------------------------------*/
  /*バナー*/
  .bnr {
      display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .bnr li {
    display: inline-block;
    width: 100%;
    padding: 0 4px;
    vertical-align: top;
  }
  .bnr li img {
    width: auto;
    height: 80px;
  }
  /*-----------------------------------------------------------*/
  /*ナビゲーション アニメーション*/
  .animated li:hover {
    animation-name: rubberBand;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  /*コメントバナー アニメーション*/
  .animated2 li:hover {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  /*--------------------------------------------------------end@media*/
}
@media screen and (max-width: 320px) {
  /*　iPhone5用 画面サイズが320px以下はここを読み込む　*/
  /*--------------------------------------------------------end@media*/
}