@charset "utf-8";


/*=============================================
  フローティングメニュー（ページトップへ移動するボタン）
  =============================================*/


/*====================↓CSS変数を設定====================*/


  :root {

    /*----------------------------------------------------------------
      【説明】
      javascript側でフローティングメニュー（フッター）の高さを自動で加算している。
      ----------------------------------------------------------------*/

     --floating-pagetop-button-marginbottom: 30px; /*「ページトップへ移動するボタンの下余白」*/

  }


/*====================↑CSS変数を設定====================*/







/*====================↓ページトップへ移動するボタン（本体）====================*/


  #floating_pagetop {

    /*位置*/
    position: fixed;
    bottom: var(--floating-pagetop-button-marginbottom);
    right: 20px;

    /*余白*/
    padding: 0px;

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

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

    /*デザイン*/
    border: solid 3px #FF9931; /*枠*/
    border-radius: 8px;        /*角の丸み*/
    cursor:pointer;            /*カーソル*/
    background: #FF9931;       /*背景*/
    opacity: 0;                /*透明度*/
    border: 1px solid #efefef;

    /*アニメーション*/
    transition-duration: 0.2s;

  }


/*====================↑ページトップへ移動するボタン（本体）====================*/







/*====================↓ページトップへ移動するボタン（中の矢印）====================*/


  /*css矢印*/
  #floating_pagetop .arrow-top {

    /*位置*/
    position: relative;
    transform: rotate(270deg);
    top: 15px;

  }
  #floating_pagetop .arrow-top::before,
  #floating_pagetop .arrow-top::after {

    content: '';

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

    /*レイアウト*/
    display: inline-block;

    /*位置*/
    position: absolute;

    /*デザイン*/
    border-radius: 3px;
    background: #FFF;

  }
  #floating_pagetop .arrow-top::before {

    /*位置*/
    top: calc(50% - 8px);
    transform: rotate(45deg);

  }
  #floating_pagetop .arrow-top::after {

    /*位置*/
    bottom: calc(50% - 8px);
    transform: rotate(-45deg);

  }


/*====================↑ページトップへ移動するボタン（中の矢印）====================*/







/*====================↓ページトップへ移動するボタン（中の画像）====================*/


  #floating_pagetop img {

    /*サイズ*/
    width: 100%;
    height: auto;
    max-width: 50px;

  }


/*====================↑ページトップへ移動するボタン（中の画像）====================*/