@charset "utf-8";
/* -----------------------------------------
 * ページトップボタン（真四角・テキスト非表示・大型）
 * ----------------------------------------- */
#to-top,
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 正方形のサイズ */
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  
  background-color: #333333;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0; /* 角丸をなくして真四角に */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

/* テキスト非表示 */
#to-top span,
.to-top span {
  display: none;
}

/* 上矢印アイコン */
#to-top::before,
.to-top::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(-45deg);
  margin-top: 4px;
  transition: transform 0.25s ease;
}

/* ホバー時（上へ浮き上がる演出） */
#to-top:hover,
.to-top:hover {
  background-color: #000000;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ホバー時に矢印が少し上へ動く */
#to-top:hover::before,
.to-top:hover::before {
  transform: rotate(-45deg) translate(2px, -2px);
}

/* -----------------------------------------
 * スマホ表示時の調整
 * ----------------------------------------- */
@media screen and (max-width: 768px) {
  #to-top,
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  #to-top::before,
  .to-top::before {
    width: 11px;
    height: 11px;
    /*border-width: 2.5px;*/
    margin-top: 3px;
  }
}