/*****************************
 チェックボックス
*****************************/
/* バナーを閉じる */
#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%); /*影*/
}





/***************************
 広告の装飾(サンプル用)
***************************/
.pup-inner p:nth-of-type(1){
  font-size: 1.4em;
  font-weight: bold;
}
.pup-inner a{
  display: inline-block;
  vertical-align: middle; /*上下中央寄せ*/
  line-height: 1.5;
  padding: 5px 30px;
  border-radius: 4px;
  background: #F37167;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 0 #96150C;
  transition: .3s;
}
.pup-inner a:hover{
  transform: translateY(2px);
  box-shadow: none;
}

/*** サンプル装飾用(使用時に削除) ***/
body{
  text-align: center;
}
body > p{
  font-size: 14px;
}
.pup-inner{
  zoom: 0.65;
}