クリックでポップアップ表示する追従バナー（改）

<!----- チェックボックス ----->
<input type="checkbox" id="trg-close"> <!--閉じるボタン-->
<input type="checkbox" id="popup"> <!--ポップアップ -->
<input type="checkbox" id="popup-close"> <!-- ポップアップ終了 -->


<!----- 閉じるボタン ----->
<label for="trg-close" class="circle-close">
  <img src="">
</label>


<!----- ポップアップを開くためのバナー画像 ----->
<label for="popup" class="pup-trg">
    <img src="">
</label>


<!-----　ポップアップ要素　------>
<div class="pup-block">
  
  <!-- 終了のためのラベル -->
  <label for="popup-close">
    <div class="pup-overlay"></div><!--オーバーレイ-->
    <div class="close-btn">×</div> <!--終了ボタン-->
  </label>
  
 <!-- ポップアップさせる内容 -->
  <div class="pup-inner">
    <!-- ここに画像や文章などを入力 -->
  </div>
  
</div>

/*****************************
 チェックボックス
*****************************/
/* バナーを閉じる */
#trg-close{
  display: none;
}
/* ポップアップ */
#popup{
  display: none; /*ユーザーに見せない*/
}
/* ポップアップ終了 */
#popup-close{
 display: none; /*ユーザーには見せない*/ 
}


/************************
 閉じるボタン
*************************/

/*ボタンの画像*/
.circle-close img{
  width: 25px;
  height: auto; /*25px*/
  position: fixed;
  bottom: calc(3% + (187px - 25px) - 5px) ; /** 3% + (バナーの高さ - ボタンの高さ) - 微調整 **/
  right: calc(1% + 5px); /* 1% + 微調整 */
  z-index: 1000; /*最前面*/
  cursor: pointer; /*クリック可能のマウスポインター*/
  opacity: 0; /*透明*/
  visibility: hidden; /*非表示*/
  animation: fadeIn .6s 5s ease forwards; /*フェードインで登場*/
}

/*** フェードインアニメーション ***/
@keyframes fadeIn{
  0%{
    opacity: 0; /*透明*/
    visibility: hidden; /*非表示*/
  }
  100%{
    opacity: 1; /*不透明*/
    visibility: visible; /*表示*/
  }
}

/*ボタンが押された or ポップアップしたら*/
#trg-close:checked ~ .circle-close, #popup:checked ~ .circle-close{
  display: none; /*ボタンを削除*/
}


/***********************************
 ポップアップするためのバナー
***********************************/

/*トリガー画像(label)*/
.pup-trg img{
  position: fixed; /*固定表示*/
  bottom: -300px; /*初期位置は画面外*/
  right: 1%;
  width: 300px; /*任意の幅（画像に合わせて）*/
  height: auto; /*187px*/
  cursor: pointer; /*クリック可能のカーソル*/
  border-radius: 12px; /*丸み*/
  box-shadow: 0 0 12px rgba(0,0,0,80%); /*影*/
  animation: slideup .6s ease forwards; /*スライドして登場*/
  animation-delay: 3s; /*登場を少し遅らせる*/
  z-index: 999; /*閉じるボタンより背面*/
}

/*スライドするアニメーション*/
@keyframes slideup{
  0%{
    bottom: -300px; /*画面外から*/
  }
  100%{
    bottom: 3%; /*画面内へ*/
  }
}

/*ポップアップした or 閉じるボタンが押された*/
#popup:checked ~ .pup-trg, #trg-close:checked ~ .circle-close{
  display: none; /*バナーを削除*/
}


/*****************************
 ポップアップする要素
*****************************/
/*要素全体*/
.pup-block{
  position: fixed; /*固定表示*/
  top: 0;
  left: 0;
  width: 100%; /*画面幅*/
  height: 100vh; /*画面の高さ*/
  z-index: 999;
  display: none; /*最初は非表示*/
}

/*バナーがクリックされたら*/
#popup:checked ~ .pup-block{
  display: block; /*表示*/
}

/* オーバーレイ(画面を覆う背景) */
.pup-overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,50%);
}

/*ポップアップ終了用のボタン*/
.close-btn{
  position: absolute;
  top: 3%;
  right: 3%; /*画面右上*/
  color: #fff;
  font-size: 30px;
  cursor: pointer; /*クリック可能のカーソル*/
}

/*終了ボタン or オーバーレイをクリックしたら*/
#popup-close:checked ~ .pup-block{
  display: none; /*ポップアップを削除*/
}

/* ボックス(広告部分) */
.pup-inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /*中央へ*/
  min-width: 10%; /*幅の最低値(任意)*/
  background: white; /*背景色*/
  padding: 20px; /*内側の余白*/
  box-shadow: 0 0 16px rgba(0,0,0,70%); /*影*/
}