@charset "UTF-8";

/********************************************************/
/*                  hamburger-menu.css                  */
/********************************************************/
  .hamburger {
    display: none;
  }
/********************************************************/
/*                 画面幅が820px以下の場合                 */
/********************************************************/

@media screen and (max-width:820px) {
  /*この間に設定を記入*/

/* ▼▼▼ ボタンの設定 ▼▼▼
--------------------------------------------------------*/
  .btn {
    cursor: pointer;
    display: block;
    height: 35px;
    position: absolute;
    right: 20px;
    top: 13px;
    width: 35px;
  }
  .btn:before, .btn:after, .btn span {
    display: block;
    width: 80%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
  }
  .btn span {
    height: 3px;
    background-color: #1E2380;
    border-radius: 3px;
    top: calc(50% - 1.5px);
  }
  .btn:before {
    content: "";
    top: calc(25% - 3px);
    border-top: 3px solid #1E2380;
    border-radius: 3px;
  }
  .btn:after {
    content: "";
    bottom: calc(25% - 3px);
    border-bottom: 3px solid #1E2380;
    border-radius: 3px;
  }
  .btn.on span {
    opacity: 0;
  }
  .btn.on:before {
    top: calc(50% - 1.5px);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .btn.on:after {
    bottom: calc(50% - 1.5px);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
/* ▲▲▲ ボタンの設定 ▲▲▲
--------------------------------------------------------*/

/* ▼▼▼ メニューリスト共通の設定 ▼▼▼
--------------------------------------------------------*/
  .hamburger {
    display: none;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 63px;
    width: 100%;
    z-index: 100;
  }
  .hamburger_nav {
    background-color: #D8E4F5;
    padding: 20px 0 10px 0;
    width: 100%;
  }
  .hamburger_nav li {
    background-color: #F5FAFF;
    border-radius: 3px;
    box-shadow: -4px 4px #AFC5E6;
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 90%;
    transition: all 0.3s;
  }
  .hamburger_nav li:hover {
    background-color: #AFC5E6;
    box-shadow: -4px 4px #1E2380;
  }
  .hamburger_nav a {
    color: #333;
    display: inline-block;
    padding: 10px 0;
    text-decoration: none;
    width: 100%;
  }
/* ▲▲▲ メニューリスト共通の設定 ▲▲▲
--------------------------------------------------------*/

/* ▼▼▼ メニューリストのアイコン設定 ▼▼▼
--------------------------------------------------------*/
  .center {
    background: url(../img/global_navi/nav_01.png) no-repeat 20px;
    background-size: 17%;
  }
  .shimin {
    background: url(../img/global_navi/nav_02.png) no-repeat 20px;
    background-size: 17%;
  }
  .gyosya {
    background: url(../img/global_navi/nav_03.png) no-repeat 20px;
    background-size: 17%;
  }
  .seibi {
    background: url(../img/global_navi/nav_04.png) no-repeat 5px;
    background-size: 25%;
  }
  .nyusatsu {
    background: url(../img/global_navi/nav_05.png) no-repeat 20px;
    background-size: 17%;
  }
  .gikai {
    background: url(../img/global_navi/nav_06.png) no-repeat 20px;
    background-size: 17%;
  }
  .koukai {
    background: url(../img/global_navi/nav_07.png) no-repeat 20px;
    background-size: 17%;
  }
/* ▲▲▲ メニューリストのアイコン設定 ▲▲▲
--------------------------------------------------------*/

/* ▼▼▼ ページ内検索の設定 ▼▼▼
--------------------------------------------------------*/
  .hamburger_search_box {
    background-color: #aaa;
    border-radius: 30px;
    height: 50px;
    margin: 10px auto;
    width: 85%;
  }
/* ▲▲▲ ページ内検索の設定 ▲▲▲
--------------------------------------------------------*/

/* ▼▼▼ 外部リンクアイコンの設定 ▼▼▼
--------------------------------------------------------*/
  .hamburger_link {
    background-color: #D8E4F5;
    clear: both;
  }
  .hamburger_link ul {
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  .hamburger_link li {
    background: none;
    box-shadow: none;
    float: left;
    margin: 0 10px;
  }
  .hamburger_link img {
    width: 30px;
    transition: all 0.2s;
  }
  .hamburger_link img:hover{
    transform: scale(1.2);
  }
  .hamburger_link li:last-child img {
    width: 20px;
    height: 30px;
  }
/* ▲▲▲ 外部リンクアイコンの設定 ▲▲▲
--------------------------------------------------------*/
/* ▼▼▼ 背景カバーの設定 ▼▼▼
--------------------------------------------------------*/

.hamburger-cover {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 63px;
  width: 100%;
  z-index: -1;
}

/* ▲▲▲ 背景カバーの設定 ▲▲▲
--------------------------------------------------------*/

}

/********************************************************/
/*                 画面幅が390px以下の場合                 */
/********************************************************/

@media screen and (max-width:390px) {
  /*この間に設定を記入*/
  .btn {
    right: 10px;
  }
}

/********************************************************/
/*                         メモ                         */
/********************************************************/

/* フォントサイズ一覧 */
.fontsize-dummy {
  font-size: .75rem;    /* 12px */
  font-size: .8125rem;  /* 13px */
  font-size: .875rem;   /* 14px */
  font-size: .9375rem;  /* 15px */
  font-size: 1rem;      /* 16px */
  font-size: 1.25rem;   /* 20px */
  font-size: 1.75rem;   /* 28px */
}


/* ▼▼▼ コピペ用 ▼▼▼
--------------------------------------------------------*/

/* ▲▲▲ コピペ用 ▲▲▲
--------------------------------------------------------*/

/* * * * * * * * * * * * 一番下 * * * * * * * * * * * * */