ＰＯＰアップの画像と文字がうまく表示できません

Question

いつもお世話になります。

布の但馬屋の伊藤です。

さて、ポップアップですが

画像と文字がかぶってうまく表示できません。

どこを修正すればいいですか？

https://item.rakuten.co.jp/tajima-ya/hm/



--------------------------------

p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal   label {
width: 100%;
height: 120%;
position: fixed;
top: 147px;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal   label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 165px; /*画像の横幅*/
height:100px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 120px;
}
input#modal   label div::before {
content: "X Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked   label {
display: none;
}
input#modal   label img{
width: 165px; /*画像の横幅*/
height:100px; /*画像の縦幅*/
}

Answer

ECマスターズの中野です。

いただいたこちらのご質問につきまして、
週明け担当よりご連絡差し上げます。

お待たせしておりますがお時間いただければと思います。
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 画像と文字がかぶってうまく表示できません。
> 
> どこを修正すればいいですか？

XCloseの文字が改行されてしまっていることが
原因となっていますので
input#modal + label div::before
で指定されてている、文字のサイズと
位置の指定を、下記の通り、修正をお願い致します。

input#modal + label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
↓↓↓
input#modal + label div::before {
content: "X Close";
position: absolute;
bottom: -2em;
right: 50%;
margin: 0 -60px 0 0;
font-size: 2em;
font-weight: bold;
color: #ffffff;
}


また、今回ご質問頂いている
内容とは異なりますが、
画像が正方形なのに対し、
サイズの指定が

width: 165px;
height: 100px;

と、横長となっています。

画像が潰れたように見えてしまいますので、
width、heightとも
同じ数値のご指定を、おすすめ致します。