@charset 'utf-8';

/* Preload images
body:after {
content:
	url('先読みさせたい画像')
	url('先読みさせたい画像');
display:none;
} */

.lightboxOverlay { position:fixed; z-index:9999; left:0; top:0; background:rgb(0,0,0,75%); }/* ページ全体を暗く見せる */
.lightbox { position:absolute; z-index:10000; left:0; width:100%;}/* ギャラリー要素 */
.lightbox .lb-image { display:block; max-width:inherit; height:auto; background:#000;}

.lb-outerContainer {
position:relative;
background:#122;
margin:0 auto;
zoom:1;
}
.lb-outerContainer:after { display:table; clear:both; content:'';}
.lb-container { padding:4px;}/* 画像枠 */
/*.lb-cancel {
display:block; width:32px; height:32px;
background:#FFF;
margin:0 auto;
}*/
.lb-nav {
position:absolute; z-index:10; left:0; top:0;
width:100%; height:100%;
}
.lb-container > .nav { left:0;}

.lb-nav a {
position:absolute;
display:block; width:50%; height:100%;
opacity:50%;
cursor:pointer;
}
.lb-nav a.lb-prev { left:0;}
.lb-nav a.lb-next { right:0;}
.lb-nav a:hover { filter:drop-shadow(0 0 4px #BCC) drop-shadow(0 0 4px #899); opacity:1;}
.lb-nav a:before {/* 矢印 */
position:absolute; top:calc(50% - 16px);
width:32px; height:32px;
background:url('/project/egg/img/arrow.png?220921') 0 0 / auto 100%;
content:'';
}
.lb-nav a.lb-prev:before { left:-40px;}
.lb-nav a.lb-next:before { right:-40px; transform:scaleX(-1);}
@media screen and ( max-width:1024px ){
.lb-nav a.lb-prev:before,
.lb-nav a.lb-next:before { display:none;}
}

.lb-dataContainer { width:100%; margin:8px auto 0; zoom:1;}
.lb-dataContainer:after { display:table; clear:both; content:'';}

.lb-data .lb-details { line-height:1; text-align:center;}
.lb-data .lb-details .lb-caption { font-size:16px; color:#FFF; margin-bottom:4px;}/* title="(省略可)" */
.lb-data .lb-details .lb-number  { font-size:12px; color:#BCC;}/* 何枚目/全体 */
.lb-close {
position:absolute; right:0; top:0; z-index:100;
display:block; width:32px; height:32px;
background:rgb(0,0,0,50%);
border:solid 1px #FFF;
cursor:pointer;
}
.lb-close:hover { animation:lb-close 0.5s forwards;}
@keyframes lb-close { 0% { background:#FFF;}}
.lb-close:before, .lb-close:after {
position:absolute; left:calc(50% - 10px); top:calc(50% - 1px);
display:block; width:20px; height:2px; background:#FFF;
content:'';
}
.lb-close:before { transform:rotate(45deg);}
.lb-close:after { transform:rotate(-45deg)}