@charset "UTF-8";

/*modal-COMMON------------------------------------------------------*/
.ui_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.ui_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%;
}
.ui_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#ui_closeSvg,img#ui_closeImg{
    cursor: pointer;
    position: absolute;
    top: 20px; right: 20px;
    z-index: 5900010;
}
svg#ui_zoominSvg,img#ui_zoominImg{
    cursor: pointer;
    position: absolute;
    top: 20px; right: 80px;
    z-index: 5900010;
}
svg#ui_zoomoutSvg,img#ui_zoomoutImg{
    cursor: pointer;
    position: absolute;
    top: 20px; right: 140px;
    z-index: 5900010;
}
svg#ui_closeSvg line
,svg#ui_zoominSvg line
,svg#ui_zoomoutSvg line{
    stroke: #fff; stroke-width: 2;
    transition: stroke 0.5s, stroke-width 0.5s;
}
svg#ui_closeSvg:hover line
,svg#ui_zoominSvg:hover line
,svg#ui_zoomoutSvg:hover line{
    stroke: #fff; stroke-width: 4;
}
@media screen and (max-width:767px) { /*SP*/
    svg#ui_closeSvg,img#ui_closeImg
    ,svg#ui_zoominSvg,img#ui_zoominImg
    ,svg#ui_zoomoutSvg,img#ui_zoomoutImg{
        width: 35px; height: 35px;
        background-color: #fff;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    svg#ui_closeSvg,img#ui_closeImg
    ,svg#ui_zoominSvg,img#ui_zoominImg
    ,svg#ui_zoomoutSvg,img#ui_zoomoutImg{
        width: 45px; height: 45px;
        background-color: #fff;
    }
}


@media screen and (max-width:767px) { /*SP*/
    .ui_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;
    }
    .ui_modalImageWrap{
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        overflow: hidden;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    .ui_modalSupImageWrap{
        width: 80%; height: 80%;max-width: 1000px;
        background-color: rgba(0, 0, 0, 0.8);
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
    }
    .ui_modalImageWrap{
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        overflow: hidden;
    }
	.ui_modalImage{
		max-width: 940px;
	}
}
.ui_modalSupImageWrap img{
	image-rendering: -webkit-optimize-contrast;
}