@charset "UTF-8";

/*modal-COMMON------------------------------------------------------*/
.modalCover{
    position: fixed;
    top: 0; left: 0;
    width: 120%; height: 120%;
    background-color: #000;
    z-index: 5900000;
    opacity: 0.0;
    box-sizing: border-box;
}
div.modalContainer * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
.modalContainer{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    display: flex; flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    z-index: 5900001;
    opacity: 0.0;
    box-sizing: border-box;
}
svg#closeSvg,img#closeImg{
    cursor: pointer;
    position: absolute;
    top: 20px; right: 20px;
    z-index: 5900010;
}
svg#zoominSvg,img#zoominImg{
    cursor: pointer;
    position: absolute;
    top: 20px; right: 80px;
    z-index: 5900010;
}
svg#zoomoutSvg,img#zoomoutImg{
    cursor: pointer;
    position: absolute;
    top: 20px; right: 140px;
    z-index: 5900010;
}
svg#closeSvg line
,svg#zoominSvg line
,svg#zoomoutSvg line{
    stroke: #000; stroke-width: 2;
    transition: stroke 0.5s, stroke-width 0.5s;
}
svg#closeSvg:hover line
,svg#zoominSvg:hover line
,svg#zoomoutSvg:hover line{
    stroke: #000; stroke-width: 4;
}
@media screen and (max-width:767px) { /*SP*/
    svg#closeSvg,img#closeImg
    ,svg#zoominSvg,img#zoominImg
    ,svg#zoomoutSvg,img#zoomoutImg{
        width: 35px; height: 35px;
        /* background-color: #e60027; */
        /* background-color: #fff; */
        /* padding: 5px; */
        /* border-radius: 2px; */
        /* filter: drop-shadow(0px 0px 2px rgba(0,0,0,1.0)); */
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    svg#closeSvg,img#closeImg
    ,svg#zoominSvg,img#zoominImg
    ,svg#zoomoutSvg,img#zoomoutImg{
        width: 45px; height: 45px;
        /* background-color: #e60027; */
        /* background-color: #fff; */
        /* padding: 5px; */
        /* border-radius: 2px; */
        /* filter: drop-shadow(0px 0px 2px rgba(0,0,0,1.0)); */
    }
}

@media screen and (max-width:768px) { /*SP*/
    .modalSupImageWrap{
        width: 100%; height: 80%;
        /* background-color: rgba(0, 0, 0, 0.8); */
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        padding: 0 10px;
    }
    .modalImageWrap{
        width: 100%; height: 100%;
        background-color: #fff;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        overflow: hidden;
        border-radius: 10px;
        padding: 80px 20px 20px 20px;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .modalSupImageWrap{
        width: 90%; height: 90%;
        /* background-color: rgba(0, 0, 0, 0.8); */
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
    }
    .modalImageWrap{
        width: 100%; height: 100%;
        background-color: #fff;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        overflow: hidden;
        border-radius: 10px;
        padding: 80px 20px 20px 20px;
    }
}