/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; z-index: 9999; top: 0; left: 0; overflow: hidden; -webkit-transform: translate3d(0,0,0); } #cboxWrapper { width: 980px!important;height: 578px!important; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #colorbox { top: 50%!important; left: 50%!important; width: 980px!important; height: 578px!important; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -44%); } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; left: 0;width: 980px!important;height: 578px!important; } #cboxLoadedContent { overflow: auto; width: 980px!important; height: 578px!important; -webkit-overflow-scrolling: touch; } @media screen and (max-width:980px) { #colorbox { -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); } #colorbox, #cboxContent, #cboxLoadedContent { width: calc(950/ 980* 100vw)!important;height: calc(578/ 980* 100vw)!important; } } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose { z-index: 10; cursor: pointer; } .cboxPhoto { display: block; float: left; max-width: none; margin: auto; -ms-interpolation-mode: bicubic;border: 0; } .cboxIframe { display: block; width: 100%; height: 100%; margin: 0;padding: 0; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { -webkit-box-sizing: content-box ;-moz-box-sizing: content-box; box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. /*#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}*/ #cboxOverlay { opacity: .8 !important; background: rgba(0,0,0,1); filter: alpha(opacity = 80) !important; } #colorbox { outline: 0; } /*#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;} #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;} #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;} #cboxContent{overflow:hidden;}*/ /*.cboxIframe{background:#fff;}*/ #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { margin-bottom: 28px; } #cboxTitle { position: absolute; bottom: 4px; left: 0; width: 100%; text-align: center; color: #949494; } #cboxCurrent { position: absolute; bottom: 4px; left: 58px; color: #949494; } /*#cboxLoadingOverlay{background:url(../image/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../image/loading.gif) no-repeat center center;}*/ /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { overflow: visible; width: auto; margin: 0; padding: 0; border: 0; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; } #cboxSlideshow { position: absolute; right: 30px; bottom: 4px; color: #0092ef; } #cboxPrevious { position: absolute; top: 230px; left: 0; width: 72px;height: 105px; text-indent: -9999px;background: url(../image/arrow_l.png) no-repeat; background-size: 100%; } /*#cboxPrevious:hover{background-position:-75px -25px;}*/ #cboxNext { position: absolute; top: 230px;right: 0; width: 72px;height: 105px; text-indent: -9999px;background: url(../image/arrow_r.png) no-repeat; background-size: 100%; } /*#cboxNext:hover{background-position:-50px -25px;}*/ #cboxClose { position: absolute; z-index: 100;top: .5%; right: 5%; width: 95px;height: 96px; text-indent: -9999px; background: url(../image/close.png) no-repeat; background-size: 100%; } @media screen and (max-width:980px) { #cboxClose { position: absolute; z-index: 100;top: .5%; right: 5%; width: calc(95/ 980* 100vw);height: calc(96/ 980* 100vw);text-indent: -9999px; background: url(../image/close.png) no-repeat; background-size: 100%; ; } #cboxPrevious { position: absolute; top: calc(230/ 980* 100vw); left: 0; width: calc(72/ 980* 100vw); height: calc(105/ 980* 100vw);text-indent: -9999px;background: url(../image/arrow_l.png) no-repeat; background-size: 100%; ; } /*#cboxPrevious:hover{background-position:-75px -25px;}*/ #cboxNext { position: absolute; top: calc(230/ 980* 100vw); right: 0; width: calc(72/ 980* 100vw); height: calc(105/ 980* 100vw); text-indent: -9999px;background: url(../image/arrow_r.png) no-repeat; background-size: 100%; } } /*#cboxClose:hover{background-position:-25px -25px;}*/ /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } #cboxSlideshow, #cboxCurrent { display: none !important; }