/* --------------------------------
スマホ用 ヘッダーナビゲーション
■テンプレートにならないcssはここに書かない■
■ サイト個別の装飾用cssなどはheader.cssへ ■
■ 全体がmax-width設定なので、min-widthを入れ子にしてエラーを出さないように注意 ■

【 sample 】
<div id="nav-wrap" class=""> ※忘れがち
<div id="container" class=""> ※ナビ以外の設定用
…  ここにヘッダーなど … 

<nav id="nav">
<div id="nav-inner">
<ul id="gl-menu" class="ffa-san">
<li class="dd-wrap"> ※ナビ内のメニュー開閉。番号不要
        <a class="dd-appearmenu"  … >
        </a>
</li>
…  このほかにもliを沢山  … 
</ul>
</div>
</nav>
<button type="button" id="nav-btn" class="nav-hamburger"><span class="nav-hamburger-icon"></span></button>
<div id="nav-back"></div>

…  ここにコンテンツやフッターなど … 

</div><!--end #container-->
</div><!--end #nav-wrap-->

…  ここにコンテンツは入らない。jsの読み込みなどはOK … 


-------------------------------- */



/* iOS reset start */
button {
   -webkit-appearance: none;/* ブラウザ初期スタイルをリセット */
   border-radius: 0;
}
/* iOS reset end */

/* クリック・タッチ除外設定ここから */
/* ボタン内部のspanなどに反応しないようにする */

.dd-caret,
.dd-caret2,
.dd-caret3,
.hnav-ttl,
#nav-btn:before{
    pointer-events: none;
}
.hnav-ttl,
#nav-btn:before{
    display: inline-block;
}
/* クリック・タッチ除外設定ここまで */


@media (max-width: 959px) { /*ナビを使う範囲*//*★ ↓ max設定、注意 ★*/
#nav-wrap {
  width: 100%;
  /*overflow-x: hidden;*/
  /*↑はieで二重スクロールバーになる場合があるので注意*/
}

#nav {
  position: fixed;
  z-index: 102;/*固定ヘッダーより上*/
  right: 0;/*ナビを右に*/
  top: 0;/*上からの位置*/
  width: 250px;/*ナビの幅*/
  height: 100%;
  background-color: #f2f2f2;/*ナビの背景色*/
  transition: .5s transform ease-in-out;
  -ms-transform: translateX(250px);/*ナビを右に*/
  -webkit-transform: translateX(250px);/*ナビを右に*/
  transform: translateX(250px);/*ナビを右に*/
  -webkit-overflow-scrolling: touch;
  /*animation-duration: 3s;
  animation-name: FadeIn;開いたときにチラ見えしないように*/
}
#nav li,#nav a{
  color: #222222;/*ナビの文字色*/
  text-decoration:none;
}
#nav-inner {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
#nav-inner li {
}

#nav-btn {
  position: fixed;
  right: 2px;/*ナビを右に、小さいスマホでの位置*/
  top: 0px;/*上からの位置*/
  z-index: 9999;
  transition: .5s transform ease-in-out;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
    box-sizing: content-box;
    border: 0;
    outline: 0;
  width: 30px;/*ハンバーガーボタンのサイズ 背景除く */
  height: 23px;/*ハンバーガーボタンのサイズ 背景除く */
    margin:0px 0px 0px 0px;
  padding: 18px 14px 18px 14px;/*ハンバーガーボタンのサイズ*/
    padding-left:calc( 10% - 19px );
    padding-right:calc( 10% - 19px );
  background-color: transparent;
}

#nav-btn:before {
  content: " ";/*ハンバーガーボタンの下の文字 openなど。backgorundで指定も可能 */
  width: 30px;
    height: 10px;
  position:absolute;
  top:37px;
  left:12px;
  color:#FFFFFF;
  display:none;/*今回は使わないので非表示 */
}

.nav-open {
  position: fixed;
  left: 0;
}
.nav-open #nav-back {
  content: '';
  display: block;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.nav-open #nav {
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.nav-open #nav-btn {
  -ms-transform: translateX(-250px);/*ナビを右に*/
  -webkit-transform: translateX(-250px);/*ナビを右に*/
  transform: translateX(-250px);/*ナビを右に*/
    
    /*ナビが開いた時の変更*/
    top: 0px;
    right: 0px;/*右の隙間をなくす*/
    background-color:  #f2f2f2;
    box-shadow: none !important;
    padding: 14px 12px 14px 12px;/*18px 12px 19px 12px*/
    border-radius: 0px !important;
}

/*.nav-open #nav-btn:before {
    background: transparent url(../../img/common/close-txt.png) top left / contain no-repeat;
    top:40px;
}*/

/*ハンバーガーボタンの下の文字 close */
/*.nav-open #nav-btn:before {
  content: " ";
}*/

#nav .menu-item,
#nav .dd-appearmenu {
    display: block;
    line-height: 60px;/*ナビの高さ 44px*/
    border-bottom: 1px solid #c7c7c7;/*ナビの区切り線*/
    padding-left: 14px;/*ナビの左余白*/
}
#nav .menu-item.two-lines,

#nav .dd-appearmenu.two-lines {/*メニューが2行のとき*/
    line-height: 20px;
    padding-top:10px;
    padding-bottom:10px;
}

#nav .dd-menu-item {
    line-height: 44px;/* dropdown ナビの高さ*/
    display: block;
    padding-right: 0px;
    padding-left: 28px;/* dropdown ナビの左余白*/
    background-color: #ffffff;/* dropdown ナビの背景色*/
    color: #555555;/* dropdown ナビの文字色*/
    border-bottom: 1px solid #c7c7c7;/* dropdown ナビの区切り線*/
}

.nav-hamburger {

}

  .nav-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 0px;/* ハンバーガーアイコンの位置 */
  }
  .nav-hamburger-icon,
  .nav-hamburger-icon::before,
  .nav-hamburger-icon::after {
    width: 100%;
    height: 3px;/* ハンバーガーの線の高さ */
    -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: #888888;/* ハンバーガーボタン本体の色 */
  }
  .nav-hamburger-icon::before,
  .nav-hamburger-icon::after {
    position: absolute;
    top: -10px;/* ハンバーガー一番上のバーの位置 */
    left: 0;
    content: ' ';
  }
  .nav-hamburger-icon::after {
    top: 10px;/* ハンバーガー一番下のバーの位置 */
  }
  .nav-open .nav-hamburger-icon {
    background-color: transparent;
  }
  .nav-open .nav-hamburger-icon::before,
  .nav-open .nav-hamburger-icon::after {
  /*ナビが開いた時の変更*/
   top: 0;
      /*background-color: #333333;*/
  }
  .nav-open .nav-hamburger-icon::before {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav-open .nav-hamburger-icon::after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  
    /*! dropdown close */
  .dd-box-outer {
    display: none;

  }

  /*! open */
  .nv-hc-open > .dd-box-outer {
    display: block;
  }

  #nav li a {
    position: relative;
}

  /*! caret */
  .dd-caret {/*十字の ? 、開くと － */
    display: block;
    width: 12px;
    height: 2px;
      background-color: #888888;
    /*margin-right: 14px;
    margin-left:auto;*/
    position: absolute;
      top:30px;
      right:14px;
    -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: transform .2s ease, opacity .2s ease;
    transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
    -ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    vertical-align: middle;
  }
 .dd-caret::after {/*十字の － 、開くと消える */
     content:"";
    display: block;
    width: 12px;
    height: 2px;
    background-color: #888888;
    position: absolute;
    top:0px;
    left:0px;
     -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: transform .2s ease, opacity .2s ease;
    transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
     -ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
     opacity: 1;
}
  /*! caret open */
  .nv-hc-open .dd-caret{
	-ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .nv-hc-open .dd-caret::after{
	-ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
      opacity: 0;
  }

.dd-caret2 {/*右矢印 大*/
    display: block;
    -ms-transform: rotate(45deg);/*下向きは135、右向きは45*/
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    vertical-align: middle;
    /*矢印*/
    width: 8px;
    height: 8px;
    border-top: 2px solid #888888;
    border-right: 2px solid #888888;  
    position: absolute;
    top:27px;
    right:18px;
  }
.dd-caret3{/*右矢印 小*/
    display: block;
    -ms-transform: rotate(45deg);/*下向きは135、右向きは45*/
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    vertical-align: middle;
    /*矢印*/
    width: 6px;
    height: 6px;
    border-top: 2px solid #888888;
    border-right: 2px solid #888888;  
    position: absolute;
    top:19px;
    right:18px;
}

  /*! caret open */
  .nv-hc-open .dd-caret{
	-ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

#gl-menu{
    margin-bottom: 60px;
}
    
}/*★ ↑ max設定、注意 ★*/
@media (min-width: 380px) and (max-width: 959px) {
#nav-btn {
padding: 18px 19px 18px 19px;
}
}/*★ ↑ max設定、注意2 ★*/