/* --------------------------------
スマホ用 フッターナビゲーション
■ テンプレートにならないcssはここに書かない ■
■ サイト個別の装飾用cssなどはfooter.cssへ ■

【 sample 】
※全体の開閉がないので、wrapやcontainerは不要
<nav id="ftrnav">
<div id="ftrnav-inner">
<ul id="ftr-menu" class="ffa-san">
<li class="ff-wrap"> ※ナビ内のメニュー開閉。番号不要
        <a class="ff-appearmenu""  … >
        </a>
</li>
…  このほかにもliを沢山  … 
</ul><!-- ftr-menuここまで -->
    </div><!--end #ftrnav-inner-->
    </nav><!--end #ftrnav-->


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

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

/* クリック・タッチ除外設定ここから */

/* ボタン内部のspanなどに反応しないようにする */
.fnav-ttl,
.fnav-deco,
.ff-caret{
    pointer-events: none;
    display: inline-block;
}
/* クリック・タッチ除外設定ここまで */

@media (max-width: 739px) {/*ナビを使う範囲*//*★ ↓ max設定、注意 ★*/
#ftrnav,
#ftrnav ul,
#ftrnav-inner{
background-color: transparent;/*全体の背景色*/
}

#ftrnav-inner{
  box-sizing: border-box;
}

#ftrnav li,#ftrnav a{
  color: #505050;/*ナビの文字色*/
  background-color: transparent;/*ナビの背景色*/
  text-decoration:none;
}

#ftrnav .menu-item,
#ftrnav .ff-appearmenu {
    display: block;
    line-height: 60px;/*ナビの高さ*/
    border-bottom: 1px solid #D7E3E8;/*ナビの区切り線*/
    padding-left: 14px;/*ナビの左余白*/
    /*clear:left;*/
}
.ff-box::after{
    content:"";
    display: block;
    width: 100%;
    height: 1px;
    clear:left;
}
#ftrnav .ff-menu-item{
    line-height: 60px;/* dropdown ナビの高さ*/
    display: block;
    width: 50%;
    float:left;
    padding-right: 0px;
    padding-left: 14px;/* dropdown ナビの左余白 横に並べない時は28px*/
    background-color: transparent;/* dropdown ナビの背景色*/
    color: #666666;/* dropdown ナビの文字色*/
    border-bottom: 1px solid #D7E3E8;/* dropdown ナビの区切り線*/
}
.menu-space{
    display: block;
    line-height: 60px;
    width: 50%;
    float:left;
    border-bottom: 1px solid #D7E3E8;/* dropdown ナビの区切り線*/
}

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

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

  
  #ftrnav li a {
    position: relative;
}

  /*! caret */
  .ff-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;
  }
 .ff-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-fc-open .ff-caret{
	-ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .nv-fc-open .ff-caret::after{
	-ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
      opacity: 0;
  }

.ff-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:28px;
    right:18px;
  }
.ff-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:28px;
    right:18px;
}


}/*★ ↑ max設定、注意 ★*/