/* ==== 右下角回到最上方按鈕 ==== */
.back-to-top,
.float-circle-btn {
    position: fixed;
    right: 40px;

    width: 56px;          /* 固定圓形大小 */
    height: 56px;
    border-radius: 50%;

    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

    background-color: #ffffff;
    color: #007EA7;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* 回到頂部按鈕維持原本：一開始隱藏，由 JS 控制顯示 */
.back-to-top {
    /*bottom原本高度 280px ->120px*/
    bottom: 120px;
    display: none;
}

.back-to-top:hover,
.float-circle-btn:hover{
    background-color: #0ccee8; /* 滑鼠懸停時的背景顏色 */
    transform: scale(1.1); /* 滑鼠懸停時的縮放效果 */
}






/* 其他三顆常駐顯示（預設顯示） */
.float-circle-btn {
    opacity: 1;
}

/*!* 最靠上的：LINE *!*/
/*#btn_line {*/
/*    bottom: 200px;*/
/*}*/

/*!* 中間：Google Map *!*/
/*#btn_map {*/
/*    bottom: 120px;*/
/*}*/

/* 靠近回到頂部的：電話 */
#btn_tel {
    bottom: 40px;
}


/*!* 圓形按鈕內的圖片樣式-map *!*/
/*.float-circle-btn .circle-icon {*/
/*    width: 60%;          !* 佔按鈕直徑 60%，可依喜好調整 *!*/
/*    height: 60%;*/
/*    object-fit: contain; !* 保持比例、不被壓扁 *!*/
/*    display: block;*/
/*    pointer-events: none;!* 確保點擊範圍整顆按鈕，而不是被 img 吃掉 *!*/
/*}*/

/*!* 圓形按鈕內的圖片樣式-line *!*/
/*.float-circle-btn-line .circle-icon {*/
/*    width: 120%;          !* 佔按鈕直徑 60%，可依喜好調整 *!*/
/*    height: 120%;*/
/*    object-fit: contain; !* 保持比例、不被壓扁 *!*/
/*    display: block;*/
/*    pointer-events: none;!* 確保點擊範圍整顆按鈕，而不是被 img 吃掉 *!*/
/*}*/

/* 圓形按鈕內的圖片樣式-phone */
.float-circle-btn-phone .circle-icon {
    width: 120%;          /* 佔按鈕直徑 60%，可依喜好調整 */
    height: 120%;
    object-fit: contain; /* 保持比例、不被壓扁 */
    display: block;
    pointer-events: none;/* 確保點擊範圍整顆按鈕，而不是被 img 吃掉 */
}



/* 手機版（或小螢幕）調整右下角圓按鈕尺寸與位置 */
@media (max-width: 576px) {

  /* 圓形按鈕縮小一點、靠邊一點 */
  .back-to-top,
  .float-circle-btn {
    width: 44px;       /* 由 56px 改小一點 */
    height: 44px;
    font-size: 18px;   /* icon / 文字縮小 */
    right: 16px;       /* 靠右邊緣近一點，避免太吃版面 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }

  /* 回到頂部在手機上可以不要那麼高 */
  .back-to-top {
    bottom: 110px;   /* 原本 280px，往下移一點 */
  }

  /* 三顆常駐按鈕的垂直間距也縮短一些 */
  #btn_line {
    bottom: 140px;   /* 原本 200px */
  }

  #btn_map {
    bottom: 90px;    /* 原本 120px */
  }

  #btn_tel {
    bottom: 40px;    /* 可以維持 40px，當然你也可以改成 30px 看喜好 */
  }

  /* 圓形按鈕裡的圖示也縮小，避免爆出圓形邊界 */
  .float-circle-btn .circle-icon {
    width: 70%;
    height: 70%;
  }

  .float-circle-btn-line .circle-icon,
  .float-circle-btn-phone .circle-icon {
    width: 100%;   /* 原本 120%，手機略縮小 */
    height: 100%;
  }
}