@charset "utf-8";
/* ==================================================
　navigation
================================================== */
#navi {width: 100%; max-width: 1050px; margin: 0 auto;}
#navi ul {height: 57px; display: flex; flex-wrap: wrap; justify-content: center; list-style: none;}
#navi li {display: flex; margin: 0 auto; width: 148px; height: 57px; justify-content: center; align-items: center; border-left: solid 1px #bfdfff;}
#navi li:last-child {border-right: solid 1px #bfdfff;}
#navi li a {text-decoration: none; color: #fff; font-weight: bold; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif; line-height: 1.1;}
#navi .navi01 a {display: block;}
#navi .navi01 a:hover {}
#navi_back {display: block; height: 57px; border-bottom: solid 1px #bfdfff; background-color: #3c628a;}

/* ハンバーガーボタン：デフォルトは非表示（PC） */
.sp-nav-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* 画像は枠内で縮むように（まだなら追加） */
img {border-style: none; max-width: 100%; height: auto;}


@media only screen and (max-width: 1060px) {
    #navi li {width: 13.96vw;}
}

@media only screen and (max-width: 767px) {
    #navi ul {height: auto;}
    /* ナビ背景・ボタン */
    #navi_back {background-image: none; background-color: #406792; height: auto; text-align: left; position: fixed; width: 100%; z-index: 9; top: 102px;}

  .sp-nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    box-sizing: border-box;
  }

  #navi {width: 100%; margin: 0;}

  /* デフォルトは閉じている */
  #navi ul {display: none; margin: 0; padding: 0;}

  /* JS で .is-open が付いたときに開く */
  #navi.is-open ul {display: block; padding: 10px 15px;}

    #navi li {float: none; display: block; width: 100%; border: none; align-items: initial; height: auto; padding: 10px;}
    #navi li:last-child {border-right: none;}
    #navi .navi01 a {width: 100%; height: auto; line-height: 1.6; font-size: 16px;}

  #navi .navi01 img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media only screen and (max-width: 480px) {
    #navi_back {top: 130px;}
}