@charset "utf-8";

/* ボタンの配置とデザイン */
.scroll-top-btn {
position: fixed;
  right: 24px;
  bottom: 24px;
  /* z-indexを最大値に変更して、他のあらゆる要素より前に出す */
  z-index: 2147483647 !important; 
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 50px;         /* ボタンの幅 */
  height: 50px;        /* ボタンの高さ */
  border-radius: 50%;  /* 完全な丸型 */
  
  background-color: #333333; /* ボタンの背景色（黒系） */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 軽い影 */
  
  cursor: pointer;
  transition: all 0.3s ease; /* ホバー時のアニメーションを滑らかに */
}

/* CSSで描くきれいな上矢印（▲） */
.scroll-top-btn .arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #ffffff;  /* 矢印の色（白） */
  border-left: 3px solid #ffffff; /* 矢印の色（白） */
  transform: translateY(3px) rotate(45deg); /* 傾けて矢印の形にする */
}

/* マウスホバー時のエフェクト（PC用） */
@media (hover: hover) {
  .scroll-top-btn:hover {
    background-color: #555555; /* ホバー時に少し明るく */
    transform: translateY(-4px); /* ひょこっと上に動く */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }
}

/* スマホ表示でのサイズ微調整 */
@media (max-width: 768px) {
  .scroll-top-btn {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }
  .scroll-top-btn .arrow {
    width: 10px;
    height: 10px;
    border-top-width: 2.5px;
    border-left-width: 2.5px;
  }
}