@charset "UTF-8";

audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

	
/* 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); }

#colorbox { outline: 0; }

#cboxContent { margin-top: 32px; overflow: visible; background: #000; }

.cboxIframe { background: #fff; }

#cboxError { padding: 50px; border: 1px solid #ccc; }

#cboxLoadedContent { background: #000; padding: 1px; }

#cboxLoadingOverlay { background: #000; }

#cboxTitle { position: absolute; top: 2px; left: 0; color: #000; }

#cboxCurrent { position: absolute; top: -22px; right: 205px; text-indent: -9999px; }

/* 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; margin-right: 10px; overflow: visible; text-indent: -9999px; width: 30px; height: 30px; position: absolute; top: 10px; background: none; font-size: 0px; }

#cboxClose:before { content: "#"; display: block; width: 30px; height: 1px; background-color: #AAA; transform: rotate(-45deg); }

#cboxClose:after { content: "#"; display: block; width: 30px; height: 1px; background-color: #AAA; transform: rotate(45deg); }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; }

#cboxPrevious { background-position: 0px 0px; right: 44px; }

#cboxPrevious:hover { background-position: 0px -25px; }

#cboxNext { background-position: -25px 0px; right: 22px; }

#cboxNext:hover { background-position: -25px -25px; }

#cboxClose { background-position: -50px 0px; right: 0; }

#cboxClose:hover { background-position: -50px -25px; }

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious { right: 66px; }

.cboxSlideshow_on #cboxSlideshow { background-position: -75px -25px; right: 44px; }

.cboxSlideshow_on #cboxSlideshow:hover { background-position: -100px -25px; }

.cboxSlideshow_off #cboxSlideshow { background-position: -100px 0px; right: 44px; }

.cboxSlideshow_off #cboxSlideshow:hover { background-position: -75px -25px; }







/* ------------  colorbox style add --------------*/
#cboxOverlay { cursor: default !important; }

.moviebox_cont { width: 700px; }

.colorbox { margin-top: 20px; }

.colorbox :before { content: ""; display: block; clear: both; }

.colorbox_cont { float: left; width: 30%; margin-right: 5%; font-size: 12px; }

.colorbox_cont:nth-child(3n) { margin-right: 0; }

.colorbox_img { width: 100%; height: auto; }

.colorbox_btn { position: relative; display: block; width: 100%; margin-right: 5%; }

.colorbox_btn:hover { opacity: .8; transition: .2s; }

.colorbox_btn--sp { display: none; }

.colorbox_timer { position: absolute; bottom: 0; right: 0; padding: 2px; margin: 2px; font-size: 10px; color: #fff; background-color: #000; }

.caption-ch { padding: 10px 0 5px; color: #888; }

.caption-subttl { line-height: 1.5em; }

#colorbox { position: fixed; top: 35%; }

@media (max-width: 767px) { 
.moviebox_cont { width: 100%; }
.moviebox_movie { width: 100%; }
.colorbox_img { width: 100%; height: auto; }
.colorbox_btn { float: left; display: none; margin-right: 5%; }
.colorbox_btn:nth-child(3n) { margin-right: 0; }
.colorbox_btn--sp { display: block; }
.colorbox_timer { font-size: 10px; } 

}


/* ------------  doc style --------------*/
#cboxClose {right: 16px;}
#cboxClose:before {background-color: #222;}
#cboxClose:after {background-color: #222;}
#cboxOverlay { background: #333;}
@media (max-width: 767px) { 
/*  .cboxIframe {
  width: 100%;
  height: 100%;
  }*/
}


/**/




/* ------------  doc style --------------*/

/*
#cboxClose {right: 16px;}
#cboxClose:before {background-color: #222;}
#cboxClose:after {background-color: #222;}
#cboxOverlay { background: #333;}


  @media (max-width: 767px) { 

  #cboxContent {
  margin-top: 0;
  }
}
*/

/**/
/*
#cboxClose {
    top: inherit;
    left: 50%;
    bottom: 10px;
    margin-left: -60px; 
    color: #222;
}*/

/*#cboxClose span {

    font-size: 16px;
    padding: 9px 24px 9px;
    text-decoration: none;
    border: solid 1px #222;
    }*/