/*
*{
    margin:0px;
    padding:0px;
}
body{
    position:relative;
    margin:0px;
    padding:0px;
}
.content > img{
    box-sizing: border-box;
    border:solid 1px red;
    max-width:100%;
    height:auto;

}
*/
#imgArea{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000;
    transition:all .4s ease-in-out 0s;
}
#imgArea *{
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    box-sizing:content-box;
}
.imgAreaShow{
    opacity:1;
    visibility:visible;

}
.imgAreaHide{
    opacity:0;
    visibility:hidden;
}
#imgArea:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:0;
    background-color:black;
    opacity:0.8;
}
#imgArea > #imgBoxMiddle{
    color:#000;
    width:150px;
    height:150px;
    top:50%;
    left:50%;
    position:absolute;
    z-index:1;
    background-color:#fff;
    transition:width .5s ease-in-out 0s,height .5s ease-in-out 0s,margin-top .5s ease-in-out 0s,margin-left .5s ease-in-out 0s,color .5s ease-in-out 0s;
    border-radius:4px;
}
#imgArea > #imgBoxTop{
    color:#000;
    width:150px;
    height:150px;
    top:40px;
    left:50%;
    position:absolute;
    z-index:1;
    background-color:#fff;
    transition:width .5s ease-in-out 0s,height .5s ease-in-out 0s,margin-left .5s ease-in-out 0s,color .5s ease-in-out 0s;
    border-radius:4px;
}
#imgArea > div > #imgClose{
    width:30px;
    height:30px;
    position:absolute;
    top:0;
    right:-30px;
}
#imgArea > div > #imgLoad{
    width:24px;
    height:24px;
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    margin-top:-12px;
    margin-left:-12px;
}


#imgArea > div > #imgClip{
    position:absolute;
    top:5px;
    left:5px;
    overflow:hidden;
}
#imgArea > div > #imgClip > img{
    position:absolute;
    top:0px;
    left:0px;
}
.imgTransitionNone{
    transition:none !important;
}
.imgShow{
    visibility:visible;
}
.imgHide{
    visibility:hidden;
}
#imgArea > div > #imgSkin{
    width:140px;
    height:140px;
    position:absolute;
    top:5px;
    left:5px;
    transition:width .5s ease-in-out 0s,height .5s ease-in-out 0s,opacity .5s ease-in-out 0s;
    background-color:#fff;
    cursor:default;
}
.imgSkinShow01{
    opacity:1;
    transition:opacity .1s ease-in-out 0s !important;
}
.imgSkinShow{
    opacity:1;
}
.imgSkinHide{
    opacity:0;
}

/*
#imgArea > div > #imgClose:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:0;
    background-color:#000000;
    opacity:0.6;
}
*/
#imgArea > div > #imgClose span{
    width:20px;
    height:4px;
    display:block;
    background-color:white;
    position:absolute;
    z-index:1;
    left:5px;
}
#imgArea > div > #imgClose span:first-child{
    top:7px;
    -ms-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    -moz-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    -webkit-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    transform:translateX(0.5px) translateY(6px) rotate(45deg);
}

#imgArea > div > #imgClose span:last-child{
    bottom:7px;
    -ms-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    -moz-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    -webkit-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
}



#imgArea > div > #imgPrev{
    width:30px;
    height:60px;
    position:absolute;
    top:50%;
    left:-30px;
    margin-top:-30px;
    cursor:pointer;
}
#imgArea > div > #imgPrev span{
    width:20px;
    height:4px;
    display:block;
    background-color:#666;
    position:absolute;
    z-index:1;
    left:5px;
    transition:background-color .4s linear 0s;
}
#imgArea > div > #imgPrev span:first-child{
    top:16px;
    -ms-transform:translateX(0.5px) translateY(6px) rotate(-45deg);
    -moz-transform:translateX(0.5px) translateY(6px) rotate(-45deg);
    -webkit-transform:translateX(0.5px) translateY(6px) rotate(-45deg);
    transform:translateX(0.5px) translateY(6px) rotate(-45deg);
}

#imgArea > div > #imgPrev span:last-child{
    bottom:16px;
    -ms-transform:translateX(0.5px) translateY(-6px) rotate(45deg);
    -moz-transform:translateX(0.5px) translateY(-6px) rotate(45deg);
    -webkit-transform:translateX(0.5px) translateY(-6px) rotate(45deg);
    transform:translateX(0.5px) translateY(-6px) rotate(45deg);
}




#imgArea > div > #imgNext{
    width:30px;
    height:60px;
    position:absolute;
    top:50%;
    right:-30px;
    margin-top:-30px;
    cursor:pointer;
}
#imgArea > div > #imgNext span{
    width:20px;
    height:4px;
    display:block;
    background-color:#666;
    position:absolute;
    z-index:1;
    left:5px;
    transition:background-color .4s linear 0s;
}
#imgArea > div > #imgNext span:first-child{
    top:16px;
    -ms-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    -moz-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    -webkit-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    transform:translateX(0.5px) translateY(6px) rotate(45deg);
}

#imgArea > div > #imgNext span:last-child{
    bottom:16px;
    -ms-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    -moz-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    -webkit-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
}

#imgArea > div > #imgPrev:hover span,#imgArea > div > #imgNext:hover span{
    background-color:#fff;
}
/*
#imgArea > div > #imgPrev:hover{
    left:-35px !important;
}
#imgArea > div > #imgNext:hover{
    right:-35px !important;
}
*/
#imgArea > div > #imgNavi{
    width:100%;
    height:20px;
    position:absolute;
    bottom:-20px;
    overflow:hidden;
}
#imgArea > div > #imgNavi > #cntBox{
    width:15%;
    height:20px;
    font-size:14px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family:"ＭＳ Ｐゴシック";
    line-height:20px;
    letter-spacing:1px;
    color:#fff;
    position:absolute;
}
#imgArea > div > #imgNavi > #imgAlt{
    width:75%;
    height:20px;
    font-size:14px;
    font-family:"ＭＳ Ｐゴシック";
    text-align:right;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:20px;
    letter-spacing:1px;
    color:#fff;
    position:absolute;
    right:0px;
    transition:opacity .5s ease-in-out 0s;
}

.altShow{
    opacity:1;
}
.altHide{
    opacity:0;
}
.altHide01{
    opacity:0;
    transition:opacity .1s ease-in-out 0s !important;
}
#imgArea > #imgThumbArea{
    position:absolute;
    z-index:1;
    width:50px;
    height:50px;
    border:solid 2px #fff;
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
    color:black;
    transition:color .5s ease-in-out 0s,opacity .5s ease-in-out 0s;
}


.imgThumbAreaShow{

    opacity:1;
    visibility:visible;
}
.imgThumbAreaShow01{
    opacity:1;
    visibility:visible;
    transition:color .1s ease-in-out 0s,opacity .1s ease-in-out 0s !important;
}
.imgThumbAreaHide01{
    opacity:0;
    visibility:hidden;
    transition:none !important;
}
.imgThumbAreaHide{
    opacity:0;
    visibility:hidden;
}
#imgArea > #imgThumbArea > #imgThumbWindow{
    width:100%;
    height:25px;
    position:absolute;
    top:-27px;
    left:-2px;
    border-left:solid 2px rgba(0,120,215,0);
    border-right:solid 2px rgba(0,120,215,0);
    background-color:rgba(0,120,215,0.8);
    cursor:move;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
}
#imgArea > #imgThumbArea > #imgThumbBox > #imgThumbZoomSkin{
    position:absolute;
    top:0;
    left:0;
}
#imgArea > #imgThumbArea > #imgThumbBox > #imgThumbZoomSkin > #imgThumbZoomArea{
    border:solid 1px #fff;
    position:absolute;
    left:-1px;
    top:-1px;
    /*box-sizing: border-box;*/
    background-color:rgba(0,0,255,0);
    cursor:move;
}
.imgThumbZoomAreaAnima{
    transition:width .5s ease-in-out 0s,height .5s ease-in-out 0s,top .5s ease-in-out 0s,left .5s ease-in-out 0s;
}
.imgThumbZoomAreaAnima01{
    transition:width .1s ease-in-out 0s,height .1s ease-in-out 0s,top .1s ease-in-out 0s,left .1s ease-in-out 0s;
}
#imgArea > #imgThumbArea > #imgThumbBox{
    position:absolute;
    overflow:hidden;
}
#imgArea > #imgThumbArea > #imgThumbZoomIn{
    width:20px;
    height:20px;
    position:absolute;
    right:-22px;
    bottom:22px;
    background-color:#000;
    cursor:pointer;
    border-radius:4px;
}
#imgArea > #imgThumbArea > #imgThumbZoomIn:before{
    content:"";
    width:14px;
    height:2px;
    position:absolute;
    top:9px;
    left:3px;
    background-color:#666;
    transition:background-color .4s ease-in-out 0s;
}
#imgArea > #imgThumbArea > #imgThumbZoomIn:after{
    content:"";
    width:2px;
    height:14px;
    position:absolute;
    top:3px;
    left:9px;
    background-color:#666;
    transition:background-color .4s ease-in-out 0s;
}
#imgArea > #imgThumbArea > #imgThumbZoomOut{
    width:20px;
    height:20px;
    position:absolute;
    right:-22px;
    bottom:-2px;
    background-color:#000;
    cursor:pointer;
    border-radius:4px;
}
#imgArea > #imgThumbArea > #imgThumbZoomOut:before{
    content:"";
    width:14px;
    height:2px;
    position:absolute;
    top:9px;
    left:3px;
    background-color:#666;
    transition:background-color .4s ease-in-out 0s;
}
#imgArea > #imgThumbArea > #imgThumbZoomIn:hover::before,#imgArea > #imgThumbArea > #imgThumbZoomIn:hover::after,#imgArea > #imgThumbArea > #imgThumbZoomOut:hover::before{
    background-color:#fff !important;
}
#imgArea > #imgThumbArea > #imgThumbZoomIn:active::before,#imgArea > #imgThumbArea > #imgThumbZoomIn:active::after,#imgArea > #imgThumbArea > #imgThumbZoomOut:active::before{
    background-color:#fff !important;
    transform:scale(0.9,0.9) !important;
}
/*
#check{
    width:4px;
    height:4px;
    position:absolute;
    left:168px;
    top:126px;
    background-color:red;
}
*/