@charset "utf-8";


/*===============================
  フローティングメニュー（三本線ボタン）
  ===============================*/


/*====================↓ボタン（全体）====================*/


  #floating_threelines{

    /*位置*/
    position: fixed;
    top: 30px;
    right: 20px;
    z-index:30;

    /*デザイン*/
    background: #352305;
    border-radius: 15%;

    /*サイズ*/
    width: 60px;
    height: 60px;

    /*子要素のレイアウト*/
    display: flex;
    flex-direction:column; /*軸方向の切り替え（子要素を縦並び）*/
    justify-content:center;
    align-items:center;

    /*テキスト選択不可*/
    user-select: none;

    /*アニメーション*/
    transition: .3s;

  }
  #floating_threelines.close{

    /*デザイン*/
    border-radius: 50%;

  }


/*====================↓ボタン（全体）====================*/




/*====================↓ボタン（三本線枠 & 中央線）====================*/


  #floating_threelines .threelines{

    /*位置*/
    position:relative; /*子要素（三本線（上）、三本線（下））のために設定*/

    /*余白*/
    margin: 10px 0px 18px 0px;

    /*サイズ*/
    width: 20px;
    height: 7px;

    /*枠（下線）*/
    border-bottom: 3px   /*太さ*/
                   solid /*線の種類*/
                   #FFF; /*色*/

  }
  #floating_threelines.close .threelines{

    /*変形後*/
    border-bottom: none; /*線の種類*/

  }


/*====================↑ボタン（三本線枠 & 中央線）====================*/







/*====================↓三本線（上）====================*/


  #floating_threelines .threelines::before{

    content:'';

    /*位置*/
    position: absolute;
    top:0px;
    right:0px;

    /*サイズ*/
    width: 100%;
    height: 3px;

    /*デザイン*/
    background-color: #FFF;

    /*アニメーション*/
    transition: .3s;

  }
  #floating_threelines.close .threelines::before{

    /*変形後*/
    top:7px;
    transform: rotate(-45deg);

  }


/*====================↑三本線（上）====================*/







/*====================↓三本線（下）====================*/


  #floating_threelines .threelines::after{

    content:'';

    /*位置位*/
    position: absolute;
    bottom:-10px;
    right:0px;

    /*サイズ*/
    width: 100%;
    height: 3px;

    /*デザイン*/
    background-color: #FFF;

    /*アニメーション*/
    transition: .3s;

  }
  #floating_threelines.close .threelines::after{

    /*変形後*/
    bottom:-3px;
    transform: rotate(-135deg);

  }


/*====================↑三本線（下）====================*/







/*====================↓ボタン名====================*/


  #floating_threelines .button_name{

    /*サイズ*/
    width: 40px;
    height: 20px;

    /*フォント*/
    color: #FFF;
    font-size: 0.85em;
    text-align: center;

  }


/*====================↑ボタン名====================*/