簡単！ポップアップの作り方

					<label>
						<!-- ボタン -->
						<div>
							<a>詳しくはこちら</a>
						</div>

						<input type="checkbox" name="checkbox">

						<!-- ポップアップの中の内容 -->
						<div id="popup">
							<div class="popup_item">
								<h2>Cebbo Gold Premium</h2>
								<img src="<?php echo get_template_directory_uri(); ?>/img/いmg.jpg" alt="">
								<p>テキストテキストテキストテキスト</p>
							</div>
						</div>
					</label>

#popup{
  /* ポップアップの幅 */
  width:40%;
  line-height:100px;
  /* 背景色 */
  background:#fff;
  /* BOX影*/
  box-shadow: 0px 3px 27px 0px rgba(0, 0, 0, 0.21);
  padding:2%;
  box-sizing:border-box;
  display:none;
  position:fixed;
    /* ポップアップの位置 */
  top:55%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 200;
}

#popup .popup_item{
  position: relative;
}

  /* 右の上のバツ */
#popup .popup_item::before{
  content: "";
  display: inline-block;
  width:30px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  background: url(../img/batu.png) no-repeat 50% 50%/contain;
}

label{
  display:block;
  margin:auto;
}

input[type="checkbox"]{
  display:none;
}

input[type="checkbox"]:checked + #popup{
  display:block;
  transition:.2s;
}

@media screen and (max-width: 1024px) {
  #popup{
    /* ポップアップの幅 */
    width:60%;
  }
}

@media screen and (max-width: 540px) {
  #popup{
    /* ポップアップの幅 */
    width:90%;
    padding:7% 2% 4% 2%;
  }

  #popup .popup_item::before{
    width:20px;
    height: 20px;
    top: -15px;
    right: 2px;
  }
}