@charset "utf-8";


/*=================================
  フローティングメニュー（電話番号ボタン）
  =================================*/


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


  :root {

    --floating-tel-width: ;            /*「固定ボックスメニューの幅」（数値は javascript で動的に設定）*/
    --floating-tel-button-width: 60px; /*「固定ボックスメニュー開閉ボタンの幅」*/
    --floating-tel-scrollbar   : 15px; /*「ウィンドウの縦スクロールバーの幅」*/
    --floating-tel-rightmargin : 10px;  /*「右側の余白」*/


  }


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





/*==================== ↓電話番号メニュー（全体） ====================*/


  #floating_tel {

    /*位置*/
    position: fixed;
    top: 35%;
    right: calc(-1 * var(--floating-tel-width) + var(--floating-tel-button-width) + var(--floating-tel-scrollbar));
    z-index: 10;

    /*デザイン*/
    border-radius: 10px;
    border: 1px solid #efefef;
    background: white;

    /*子要素のレイアウト*/
    display: flex;
    align-items: center; /*子要素を上下中央（"display:flex" ＆ "高さ指定" が効果条件）*/
    user-select: none;   /*テキスト選択無効*/

    /*アニメーション*/
    transition-property: transform;   /*トランジション効果を適応したいプロパティ（複数指定可）*/
    transition-duration: 0.3s;        /*トランジションの実行にかかる所要時間（プロパティ毎に指定可）*/
    transition-delay: 0s;             /*トラジション効果が始まるまでの待ち時間（プロパティ毎に指定可）*/
    transition-timing-function: ease; /*中間状態の値を算出する方法を設定*/

    /*表示*/
    visibility: hidden; /*表示時のちらつき防止のため、初期値は非表示（読み込み完了時にjavascriptを使って『visible』に変更している）*/

  }
  @media (width <= 834px){

    #floating_tel {

      /*表示*/
      display: none;

    }

  }
  #floating_tel.open {

    /*アニメーション*/
    transform: translateX(
                          calc( -1 * (var(--floating-tel-width) - var(--floating-tel-button-width) - var(--floating-tel-scrollbar) + var(--floating-tel-rightmargin)) )
                          );

  }


/*==================== ↑電話番号メニュー（全体） ====================*/







/*====================↓電話番号メニュー（ボタン）====================*/


  #floating_tel .button{

    /*サイズ*/
    width: var(--floating-tel-button-width);
    height: 100%;

    /*余白*/
    padding:20px 10px;

    /*デザイン*/
    background-color: #FF9931;
    border-radius: 10px 0px 0px 10px;

    /*子要素のレイアウト*/
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  /*ボタン名*/
  #floating_tel .button .button_name{

    /*テキスト*/
    color:white;
    font-size:0.9em;

    /*余白*/
    padding:0px 0px 10px 0px;

  }


/*====================↑電話番号メニュー（ボタン）====================*/







/*====================↓電話番号メニュー（内容）====================*/


  #floating_tel .content{

    /*余白*/
    padding:10px;

  }

  /*コメント*/
  #floating_tel .content .content_note{

    /*テキスト*/
    font-size:0.75em;

    /*余白*/
    padding:0px 0px 10px 0px;

  }

  /*電話番号*/
  #floating_tel .content .content_tel{

    /*テキスト*/
    font-size:1.8em;

  }


/*====================↑電話番号メニュー（内容）====================*/