.lumos-container{				
position:fixed;
top:0;						/*top:0;*/
left:0;
width:100%;
height:100%;
background:#000;
display:none;
color:#fff;
z-index:12;

font-size:19px;				/*キャプション*/
font-family:Tahoma;
text-align:left;				/*text-align:center;*/
}

.lumos-container .lumos-alt-text{
position:fixed;
text-shadow:0 0 10px rgba(0,0,0,.5);
bottom:0;
width:100%;
left:0;
padding:15px;
z-index:13;
text-align:left;				/*text-align:center;*/
}


@media screen and (min-width:768px){
.lumos-container .lumos-alt-text{
text-align:left;				/*text-align:left;○○*/
padding-left:40px;				/*追加       中央へ移動させるため*/
top:0;				/*top:0　キャプションの位置　bottom:0;	　少し上へ移動させる　写真のタテ幅が大きい時は５％*/
max-width:95%;				/*max-width:50%;キャプション帯の幅*/
max-height:5%;
letter-spacing:2px;				/*letter-spacing:0.05em; の設定は効果なし***/
}}	

@media screen and (min-width:992px){
.lumos-container .lumos-alt-text{/*padding:25px*/}}			/*padding:25px*/

.lumos-container .lumos-img{
display:none;
position:fixed;
top:50%;
left:50%;
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
width:auto;
max-height:100%;
max-width:100%;
z-index:11;
box-shadow:5px 5px 50px rgba(0,0,0,.5);
cursor:default}

.lumos-container svg{
position:fixed;
top:50%;
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
z-index:12;
height:25px;
width:25px;
cursor:pointer;
fill:#fff;
background:rgba(0,0,0,.6);
padding:5px;
-moz-transition:all 150ms ease-in-out;
-o-transition:all 150ms ease-in-out;
-webkit-transition:all 150ms ease-in-out;
transition:all 150ms ease-in-out}

@media screen and (min-width:768px){
.lumos-container .lumos-img{
border:2px solid #fff;
max-height:85%;
max-width:85%
}

.lumos-container svg:hover{
-moz-transform:translateY(-50%) scale(1.5);
-ms-transform:translateY(-50%) scale(1.5);
-o-transform:translateY(-50%) scale(1.5);
-webkit-transform:translateY(-50%) scale(1.5);
transform:translateY(-50%) scale(1.5)}

.lumos-container svg{height:40px;width:40px;background:0 0}}

@media screen and (min-width:992px){
.lumos-container svg{height:50px;width:50px;background:0 0}}
.lumos-container .lumos-next{right:10px}
.lumos-container .lumos-prev{left:10px}

@media screen and (min-width:768px){
.lumos-container .lumos-next{right:15px}
.lumos-container .lumos-prev{left:15px}}
.lumos-container .lumos-close{
top:25px;
right:25px;
height:25px;
width:25px;
background:rgba(0,0,0,.6);
padding:5px;
transform:translateY(-50%) translateX(50%)}

@media screen and (min-width:768px){
.lumos-container .lumos-close{top:30px;right:30px;height:30px;width:30px;background:0 0}
.lumos-container .lumos-close:hover{transform:translateY(-50%) translateX(50%) scale(1.5)}}

@media screen and (min-width:992px){
.lumos-container .lumos-close{top:40px;right:40px;height:40px;width:40px}}
.lumos-container .lumos-name{display:none}
.lumos-container .spinner-container{position:fixed;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}
.lumos-container .spinner-container .spinner{
width:40px;
height:40px;
background-color:#fff;
margin:100px auto;
-webkit-animation:sk-rotateplane 1.2s infinite ease-in-out;
animation:sk-rotateplane 1.2s infinite ease-in-out}

@-webkit-keyframes sk-rotateplane{
0%{-webkit-transform:perspective(120px)}
50%{-webkit-transform:perspective(120px) rotateY(180deg)}
100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}

@keyframes sk-rotateplane{
0%{transform:perspective(120px) rotateX(0) rotateY(0);
-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);
-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}