/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, 
#cboxOverlay, 
#cboxWrapper{
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
  overflow:hidden;
  -webkit-transform: translate3d(0,0,0);
}
#cboxWrapper {
  max-width:none;
}
#cboxOverlay{
  position:fixed;
  width:100%;
  height:100%;
}
#cboxMiddleLeft, 
#cboxBottomLeft{
  clear:left;
}
#cboxContent{
  position:relative;
}
#cboxLoadedContent{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
#cboxTitle{
  margin:0;
}
#cboxLoadingOverlay, 
#cboxLoadingGraphic{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#cboxPrevious, 
#cboxNext, 
#cboxClose, 
#cboxSlideshow{
  cursor:pointer;
}
.cboxPhoto{
  float:left;
  margin:auto;
  border:0;
  display:block;
  max-width:none;
  -ms-interpolation-mode:bicubic;
}
.cboxIframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  padding:0;
  margin:0;
}
#colorbox, 
#cboxContent, 
#cboxLoadedContent{
  box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-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:#000;

  opacity: 0.9;

  filter: alpha(opacity = 90);
*/
  background: rgba(0,0,0,0.5);

}
#colorbox{
  outline:0;
}
#cboxContent{
  overflow:visible;
}
.cboxIframe{
  background:#fff;
}
#cboxError{
  padding:50px;
  border:1px solid #ccc;
}
#cboxLoadedContent{
  margin-bottom:5px;
}
#cboxLoadingOverlay{
  background:url(../img/loading_background.png) no-repeat center center;
}
#cboxLoadingGraphic{
  background:url(../img/loading.gif) no-repeat center center;
}
#cboxTitle{
  position:absolute;
  bottom:-25px;
  left:0;
  text-align:center;
  width:100%;
  font-weight:bold;
  color:#7C7C7C;
}
#cboxCurrent{
  position:absolute;
  bottom:-25px;
  left:58px;
  font-weight:bold;
  color:#7C7C7C;
}

/* these elements are buttons, 
and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, 
#cboxNext, 
#cboxSlideshow, 
#cboxClose {
  border:0;
  padding:0;
  margin:0;
  overflow:visible;
  position:absolute;
  text-indent:-9999px;
}

/* 前へボタン　*/
#cboxPrevious{
  position:absolute; 
  top: 50%;
  left: 0;
  margin-top: -25px;
  background: url(../img/prev.png) no-repeat top left;
  width: 40px;
  height: 50px;
  text-indent: -9999px;
  z-index: 100;
}
#cboxPrevious:hover{
  background-position:bottom left;
}
 
/* 次へボタン */
#cboxNext{
  top: 50%;
  right: 0;
  margin-top: -25px;
  background: url(../img/next.png) no-repeat top right;
  width: 40px;
  height: 50px;
  text-indent: -9999px;
  z-index: 100;
}
#cboxNext:hover{
  background-position:bottom right;
}
 
/*閉じるボタン */
#cboxClose{
  position:absolute; 
  top: 20px;
  right: 20px;
  display: block;
  background: url(../img/close.png) no-repeat top center;
  width: 40px;
  height: 50px;
  text-indent: -9999px;
  z-index: 100;
}
#cboxClose:hover{
  background-position:bottom center;
}

@media only screen and (max-width: 667px) {
  #cboxPrevious,
  #cboxNext,
  #cboxClose {
    width: 20px; height: 25px;
    -webkit-background-size: 20px 50px;
    background-size: 20px 50px;
  }
  #cboxClose{
    top: 0;
    right: 0;
  }
}

.cboxSlideshow_on #cboxSlideshow{
  background-position:-125px 0px;
  right:27px;
}
.cboxSlideshow_on #cboxSlideshow:hover{
  background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow{
  background-position:-150px -25px;
  right:27px;
}
.cboxSlideshow_off #cboxSlideshow:hover{
  background-position:-125px 0px;
}