@charset "UTF-8";

.test{position: fixed;top: 0;right: 0;}
[data-pop]:hover{opacity: 1.0;}
.pop-box{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.pop-canvas{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 460px;
height: 420px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
cursor: default!important;
}
.pop-canvas:hover{cursor: default!important;}
.pop-canvas img{
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
display: block;
width :auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.pop-canvas:before,.pop-canvas:after{
content: "";
position: absolute;
top: 0;
z-index: 50;
display: block;
width: 50%;
height: 100%;
cursor: pointer;
}
.pop-canvas:before{left: 0;}
.pop-canvas:after{right: 0;}
.pop-prev,.pop-next,.pop-close{
position: absolute;
z-index: 9999;
cursor: pointer;
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transition:opacity .4s;
transition:opacity .4s;
}
.pop-prev:hover,.pop-next:hover,.pop-close:hover{opacity: 0.5;}
.pop-prev,.pop-next{
top: 50%;
width: 40px;
height: 80px;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.pop-prev{left: 40px;background-image: url(https://taiyohome.net/wp/wp-content/themes/design-hp_format_2020/library/css/common/popwin/pop_prev.png);}
.pop-next{right: 40px;background-image: url(https://taiyohome.net/wp/wp-content/themes/design-hp_format_2020/library/css/common/popwin/pop_next.png);}
.pop-close{
top: calc(50% - 230px);
right: calc(50% - 230px);
width: 16px;
height: 16px;
background-image: url(https://taiyohome.net/wp/wp-content/themes/design-hp_format_2020/library/css/common/popwin/pop_close02.png);
}
.pop-title,.pop-caption{padding: 0 50px;}
.pop-title{
position: absolute;
top: 40px;
width: 100%;
font-weight: bold;
text-align: center;
line-height: 1.0;
}
.pop-title span{font-size: 14px;}
.pop-title span:before{
content: "／";
display: inline;
margin: 0.5em;
}
.pop-caption{
position: absolute;
bottom: 40px;
width: 100%;
font-size: 14px;
text-align: center;
line-height: 1.0;
}
@media screen and (max-width: 999px) {
.pop-canvas{
width: calc(100% - 100px);
max-width: 90%;
height: calc(100% - 200px);
}
.pop-prev,.pop-next{
width: 20px;
height: 40px;
}
.pop-prev{left: 10px;}
.pop-next{right: 10px;}
.pop-close{
top: 20px;
right: 20px;
width: 16px;
height: 16px;
}
.pop-title span{font-size: 12px;}
}