/* --- トップへ戻るボタン --- */
.page-top-btn {
  position: fixed; /* 画面に固定 */
  bottom: 30px;    /* 下から30pxの位置 */
  right: 30px;     /* 右から30pxの位置 */
  z-index: 100;    /* 他の要素より手前に表示 */
  width: 100px;    /* ボタンの幅 */
  height: 100px;   /* ボタンの高さ */
  border-radius: 50%; /* 画像が円形でない場合、角丸にするなら */
  overflow: hidden; /* はみ出しを隠す（画像切り替え時に必要なら）*/
  transition: opacity 0.3s ease, visibility 0.3s ease; /* 表示・非表示を滑らかに */
  text-decoration: none; /* aタグの下線を消す */
  display: flex; /* 中の画像を中央揃えにする場合 */
  justify-content: center;
  align-items: center;
}

.page-top-btn img {
  display: block; /* 画像下の余白を消す */
  width: 100%;    /* 親要素に合わせる */
  height: auto;   /* 高さは自動 */
  transition: opacity 0.3s ease, filter 0.3s ease; /* ホバーエフェクト用トランジション */
}

/* 表示・非表示制御クラス */
.page-top-btn.is-hidden {
  opacity: 0;
  visibility: hidden; /* アクセシビリティ的にも非表示にする */
  pointer-events: none; /* 非表示中はクリックできないように */
}

.page-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* 表示中はクリック可能に */
}

/* --- ホバーエフェクト (どちらかを選択 or 両方コメントアウト) --- */

/* (方法1) CSSで色変化（例: 少し明るくする） */
.page-top-btn:hover img {
  filter: brightness(1.2); /* 明るさを1.2倍に */
  /* または opacity: 0.8; など */
}

/* --- トップへ戻るボタン (SP) --- */
@media screen and (max-width: 768px) {
  .page-top-btn{
    width:70px;
    height:70px;
  }
}