/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/

/* 一覧スタイル調整 */
.photos_box {
    display: inline-block;
    width: 33%;
	padding: 0 0.5em 0.75em;
    vertical-align: top;
}
.photos_box a {
    display: inline-block;
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
}
.photos_box img {
	margin: 0 !important;
	width: 100%;
	height: 220px;
object-fit: cover;
}
.photos_box .title {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background-image: -webkit-gradient(
	linear, left top, left bottom,
	color-stop(0, #00000000),
	color-stop(1, #00000088)
);
	padding: 0.6em 30px 0.6em 0.9em;
	line-height: 1.3;
	color: #fff;
	font-size: 0.88em;
	text-shadow: 0 0 10px rgba(0,0,0,0.9);
}
.photos_box .title:before, .photos_box .title:after {
	content: "";
	display: block;
	position: absolute;
	right: 1em;
	bottom: 0.75em;
	width: 2px;
	height: 1em;
	background: #fff;
}
.photos_box .title:after {
	bottom: 0.75em;
	transform: rotate(90deg);
}

@media screen and (max-width: 768px) {
	.photos_box {
	    width: 49.4%;
		padding: 0 0.25em 0.1em;
	}
	.photos_box a {
		border-radius: 12px;
	}
	.photos_box img {
		height: 31vw;
	}
}


#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:rgba(60,50,40,0.6);}
#colorbox{outline:0; box-shadow: 0 0 20px rgba(0,0,0,0.2); }

    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:40px;}
        #cboxTitle{position:absolute; bottom:0.65em; left:0; text-align:center; width:100%;}
        #cboxCurrent{position:absolute; bottom:1em; left:1em; color: #A0826E; font-size: 0.8em;}
        #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/colorbox/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 {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

		/* controls */
		#cboxContent, #cboxWrapper, #colorbox { overflow: visible !important; }
        #cboxClose{position:absolute; bottom: 0.2em; right: 0.3em; width:2em; height:2em; text-indent:-9999px;}
        #cboxPrevious, #cboxNext{position:absolute; bottom:calc(50% - 15px); left:-30px; background:none; border: solid 2px #fff; border-bottom: 0; border-left: 0; width:30px; height:30px; text-indent:-9999px; transform: rotate(-135deg);}
        #cboxNext{ left: auto; right: -30px; transform: rotate(45deg);}

		#cboxClose:before, #cboxClose:after {
			content: "";
			display: block;
			position: absolute;
			left: 50%;
			top: 0;
			width: 2px;
			height: 2em;
			background: #5A3C32;
			transform: rotate(45deg);
		}
		#cboxClose:after {
			transform: rotate(-45deg);
		}

@media screen and (max-width: 768px) {
	#cboxPrevious, #cboxNext { display: none; }
}