/* 常に右下に固定する */
#contact-widget {
  position: fixed; /* 常に一定箇所に固定 */
  bottom: 100px;    /* ページ下端からの距離 */
  right: 0;     /* ページ右端からの距離 */
  z-index: 1000;   /* 他の要素より手前に表示 */
}

#contact-fab {
  width: 5rem;
  height: 5rem;
  border: solid 2px red;
  border-right: none;
  border-radius: 8px 0 0 8px; /* 丸い形 */
  background-color: white;
  color: red;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: block; /* FABを常に表示 */
  transition: width 0.1s ease-in-out;
}
#contact-fab span {
  display: block;
  text-align: center;
}

/* 非表示状態 */
#contact-fab.hidden {
  width: calc(1rem + 2px);
}
#contact-fab.hidden span {
    display: block;
    transform: rotate(-90deg);
  }