<!—————岸田記述部分——————>

<div class=”ad_container”>
<html lang=”ja”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>閉じるボタン</title>
</head>

<body>
<div class=”add-control”>
<div class=”action-close”>
<input type=”checkbox” class=”checkbox” id=”close” name=”close” /><label for=”close” class=”btn”>×</label>
<div class=”box”>
<!–閉じるコンテンツ–>
<!–広告内容部分–>
<div class=”adbox”>
<a href=””><img src=”https://nihon-kochouran.com/files/site/test/koukokukari.jpg”></a>
</div>
<!–広告内容部分–>

</div>
</div>
</div>
</body>

</html>

</div>

<style>
/* ——-広告のスタイル——-*/
.ad_container .adbox {
display: block;
width: 300px;
height: 300px;
border: #6c6c6c 1px solid;
background-color: #ebe6e0;
border-style: ;
}

.ad_container .adbox img {
width: 300px;
}

/* ——————-*/

.ad_container .btn {
color: #313131;
background: #d3d3d3;
padding: 0.5em 0.5em;
border-radius: 1em;
text-align: center;
display: table;
font-weight: 600;
cursor: pinter;
}

.ad_container .btn:hover {
cursor: pinter;
}

.ad_container .btn:active {
background: #ffffff;
}

.ad_container .box {
/* border: 2px solid #ffce5b;*/
border-radius: .3em;
height: 300px;
}

.ad_container .add-control {
right: 0px;
bottom: 0px;
position: fixed;
margin: 20px;
z-index: 99999;
}

/* close button */
.ad_container .action-close {
position: relative;
margin-top: 2em;
width: 300px;
}

.ad_container .action-close .btn {
position: absolute;
right: 0;
top: -1em;
}

.ad_container .action-close .box {
margin-bottom: 2em;
/* border: 2px solid #ffce5b;*/
}

/* checkbox 非表示 */
.ad_container .add-control .checkbox {
display: none;
}

/* close button’s control */
.ad_container .add-control .action-close #close:checked~.btn {
display: none;
}

.ad_container .add-control .action-close #close:checked~.box {
display: none;
}

.ad_container .add-control .checkbox {
display: none;
}

@media screen and (max-width: 768px) {

/*スマホ表示用*/
.ad_container .adbox {
width: 200px;
height: 200px;
}

.ad_container .adbox img {
width: 200px;
}

.ad_container .action-close {
width: 200px;
}

}

</style>
<!—————岸田記述部分——————>