/*
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;*/}
#cboxOverlay { position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft { clear:left;}
#cboxContent { position:relative;}
#cboxLoadedContent { overflow:auto; -webkit-overflow-scrolling:touch; /*border-radius:10px;*/}
#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;}
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing:content-box;}
#cboxContent { /*box-shadow:2px 2px 5px rgba(0,0,0,0.2);*/ }
 
/* 
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:#fff6e7; }
#colorbox { outline:0;  }
#cboxContent { /*margin-top:2.5em;*/ margin:1em 0; overflow:visible; /*background:#fff;*/ border-radius:10px; }
.cboxIframe { background:#fff; display:block; }
#cboxError { padding:50px; border:1px solid #ccc;}
#cboxLoadedContent { /*background:#fff;*/ padding:0; }
#cboxLoadingGraphic { background:url(../img/loading.gif) no-repeat center center; }
#cboxLoadingOverlay { /*background:#fff;*/ }
#cboxTitle { position:absolute; top:auto; bottom:0; left:0; background:rgba(0,0,0,0.6); padding:0.25em 0.5em; line-height:1.5; color:#fff; border-radius:0 10px 0 10px; max-width:calc(100% - 4.5em);}
#cboxCurrent { position:absolute; top:-50px; 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 { border:0; padding:2px; margin:0; overflow:hidden; width:2em; height:2em; background:rgba(0,0,0,0.6); position:absolute; bottom:0; right:0; font-size:1em; vertical-align:middle; border-radius:0; box-shadow:none; }
#cboxPrevious { border-radius:10px 0 0 0;}
#cboxNext { border-radius:0 0 10px 0;}

#cboxClose { border:0; padding:0; margin:0; overflow:visible; width:60px !important; min-width:60px; height:60px !important; position:absolute; top:-1.25em; right:10px; font-size:1em; background:rgba(0,0,0,0.9) url(../img/close.png) center center /30px no-repeat; vertical-align:middle; text-indent:-5000px; color:#fff; z-index:10000; }
#cboxClose::after,#cboxPrevious::after, #cboxNext::after, #cboxSlideshow::after { display:none; }
#cboxPrevious { right:2em;}

/*備考表示01*/
.note { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:none; }
.close_overlay { top:0; left:0; right:0; bottom:0; width:100%; height:100%; text-indent:-9999px; position:fixed; background:#3f3b3b; opacity: 0.7; z-index:5; }
.modal_window { top:50%; left:50%; margin:-100px 0 0 -200px; padding:20px; width:400px; height:200px; background:#fff; display:block;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;  position:fixed; z-index:10; font-size:1.2em; }
.modal_window h2 { margin-bottom:20px; width:400px; height:30px; line-height:30px; color:#fff; font-weight:bold; text-align:left; text-indent:15px; background:#3f3b3b; }
.modal_window p { padding:0 15px 15px 15px; line-height:160%; text-align:left; }
.modal_window .close { border:0; padding:0; margin:0; overflow:visible; text-decoration:none; width:auto; height:auto; position:absolute; top:-1.25em; right:10px; font-size:2em; background:url(../img/close.png) no-repeat 0 0; vertical-align:middle; color:#fff; }



/* CSS3 ModalWindow SET-------------------------- */
@-webkit-keyframes modalFadeIn { 0% { opacity:0;display:block;}
100% { opacity:1;}
}
div.modal div:target { -webkit-animation-name:modalFadeIn; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; opacity:1; display:block; }
 
@-webkit-keyframes modalScale { 0% { opacity:0;display:block; -webkit-transform:scale(0);}
100% { opacity:1; -webkit-transform:scale(1);}
}
div.modal div:target .modal_window { -webkit-animation-name:modalScale; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-transform:scale(1); opacity:1; display:block;}