@font-face{
font-family : lightcase;
font-style : normal;
font-weight : 400;
src : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/lightcase.eot?55356177);
src : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/lightcase.eot?55356177#iefix) format( "embedded-opentype" ) , url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/lightcase.woff?55356177) format( "woff" ) , url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/lightcase.ttf?55356177) format( "truetype" ) , url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/lightcase.svg?55356177#lightcase) format( "svg" );
} [class*="lightcase-icon-"]::before{
display : inline-block;
width : 1em;
font-family : lightcase , sans-serif;
font-style : normal;
font-weight : 400; font-variant : normal; line-height : 1em;
text-align : center;
text-decoration : inherit;
text-transform : none;
speak : none;  }  .lightcase-icon-play::before{
content : "\e800";
} .lightcase-icon-pause::before{
content : "\e801";
} .lightcase-icon-close::before{
content : "\e802";
} .lightcase-icon-prev::before{
content : "\e803";
} .lightcase-icon-next::before{
content : "\e804";
} .lightcase-icon-spin::before{
content : "\e805";
}    @keyframes lightcase-spin{
0%{
-webkit-transform : rotate( 0deg );
-moz-transform : rotate( 0deg );
-o-transform : rotate( 0deg );
transform : rotate( 0deg );
}
100%{
-webkit-transform : rotate( 359deg );
-moz-transform : rotate( 359deg );
-o-transform : rotate( 359deg );
transform : rotate( 359deg );
}
}
@keyframes lightcase-spin{
0%{
-webkit-transform : rotate( 0deg );
-moz-transform : rotate( 0deg );
-o-transform : rotate( 0deg );
transform : rotate( 0deg );
}
100%{
-webkit-transform : rotate( 359deg );
-moz-transform : rotate( 359deg );
-o-transform : rotate( 359deg );
transform : rotate( 359deg );
}
}
@keyframes lightcase-spin{
0%{
-webkit-transform : rotate( 0deg );
-moz-transform : rotate( 0deg );
-o-transform : rotate( 0deg );
transform : rotate( 0deg );
}
100%{
-webkit-transform : rotate( 359deg );
-moz-transform : rotate( 359deg );
-o-transform : rotate( 359deg );
transform : rotate( 359deg );
}
}
@keyframes lightcase-spin{
0%{
-webkit-transform : rotate( 0deg );
-moz-transform : rotate( 0deg );
-o-transform : rotate( 0deg );
transform : rotate( 0deg );
}
100%{
-webkit-transform : rotate( 359deg );
-moz-transform : rotate( 359deg );
-o-transform : rotate( 359deg );
transform : rotate( 359deg );
}
}
@keyframes lightcase-spin{
0%{
-webkit-transform : rotate( 0deg );
-moz-transform : rotate( 0deg );
-o-transform : rotate( 0deg );
transform : rotate( 0deg );
}
100%{
-webkit-transform : rotate( 359deg );
-moz-transform : rotate( 359deg );
-o-transform : rotate( 359deg );
transform : rotate( 359deg );
}
} #lightcase-case{
position : fixed;
top : 50%;
left : 50%;
z-index : 2002;
display : none;
font-family : arial , sans-serif;
font-size : 13px;
line-height : 1.5;
text-align : left;
text-shadow : 0 0 10px rgb( 0 0 0 / .5 );
}
@media screen and ( max-width : 640px ){ html[data-lc-type="inline"] #lightcase-case , html[data-lc-type="ajax"] #lightcase-case{
position : fixed ! important;
top : 0 ! important;
bottom : 0 ! important;
left : 0 ! important;
right : 0 ! important;
width : 100% ! important;
height : 100% ! important;
padding : 55px 0 70px 0;
margin : 0 ! important;
overflow : auto ! important;
}
}
@media screen and ( min-width : 641px ){ html:not( [data-lc-type="error"] ) #lightcase-content{
position : relative;
z-index : 1;
text-shadow : none;
background-color : #fff;
-webkit-box-shadow : 0 0 30px rgb( 0 0 0 / .5 );
-moz-box-shadow : 0 0 30px rgb( 0 0 0 / .5 );
-o-box-shadow : 0 0 30px rgb( 0 0 0 / .5 );
box-shadow : 0 0 30px rgb( 0 0 0 / .5 );
-webkit-backface-visibility : hidden;
}
}
@media screen and ( min-width : 641px ){ html[data-lc-type="image"] #lightcase-content , html[data-lc-type="video"] #lightcase-content{
background-color : #333;
}
} html[data-lc-type="inline"] #lightcase-content , html[data-lc-type="ajax"] #lightcase-content , html[data-lc-type="error"] #lightcase-content{
-webkit-box-shadow : none;
-moz-box-shadow : none;
-o-box-shadow : none;
box-shadow : none;
}
@media screen and ( max-width : 640px ){ html[data-lc-type="inline"] #lightcase-content , html[data-lc-type="ajax"] #lightcase-content , html[data-lc-type="error"] #lightcase-content{
position : relative ! important;
top : auto ! important;
left : auto ! important;
width : auto ! important;
height : auto ! important;
padding : 0 ! important;
margin : 0 ! important;
background : none ! important;
border : none ! important;
}
} html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner , html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner , html[data-lc-type="error"] #lightcase-content .lightcase-contentInner{
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box;
}
@media screen and ( max-width : 640px ){ html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner , html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner , html[data-lc-type="error"] #lightcase-content .lightcase-contentInner{
padding : 15px;
} html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner , html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner > * , html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner , html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner > * , html[data-lc-type="error"] #lightcase-content .lightcase-contentInner , html[data-lc-type="error"] #lightcase-content .lightcase-contentInner > *{
width : 100% ! important;
max-width : none ! important;
} html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner > *:not( iframe ) , html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner > *:not( iframe ) , html[data-lc-type="error"] #lightcase-content .lightcase-contentInner > *:not( iframe ){
height : auto ! important;
max-height : none ! important;
}
}
@media screen and ( max-width : 640px ){ html.lightcase-isMobileDevice[data-lc-type="iframe"] #lightcase-content .lightcase-contentInner iframe{
overflow : auto;
-webkit-overflow-scrolling : touch;
}
}
@media screen and ( max-width : 640px ) and ( min-width : 641px ){ html[data-lc-type="image"] #lightcase-content .lightcase-contentInner , html[data-lc-type="video"] #lightcase-content .lightcase-contentInner{
line-height : .75;
}
} html[data-lc-type="image"] #lightcase-content .lightcase-contentInner{
position : relative;
overflow : hidden ! important;
}
@media screen and ( max-width : 640px ){ html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap , html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap , html[data-lc-type="error"] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap{
position : relative ! important;
top : auto ! important;
left : auto ! important;
width : auto ! important;
height : auto ! important;
padding : 0 ! important;
margin : 0 ! important;
background : none ! important;
border : none ! important;
}
}
@media screen and ( min-width : 641px ){ html:not( [data-lc-type="error"] ) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap{
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box;
padding : 30px;
overflow : auto;
}
}
@media screen and ( max-width : 640px ){ #lightcase-content h1 , #lightcase-content h2 , #lightcase-content h3 , #lightcase-content h4 , #lightcase-content h5 , #lightcase-content h6 , #lightcase-content p{
color : #aaa;
}
}
@media screen and ( min-width : 641px ){ #lightcase-content h1 , #lightcase-content h2 , #lightcase-content h3 , #lightcase-content h4 , #lightcase-content h5 , #lightcase-content h6 , #lightcase-content p{
color : #333;
}
} #lightcase-case p.lightcase-error{
margin : 0;
overflow : hidden;
font-size : 17px;
color : #aaa;
text-align : center;
text-overflow : ellipsis;
white-space : nowrap;
}
@media screen and ( max-width : 640px ){ #lightcase-case p.lightcase-error{
padding : 30px 0;
}
}
@media screen and ( min-width : 641px ){ #lightcase-case p.lightcase-error{
padding : 0;
}
} .lightcase-open body{
overflow : hidden;
} .lightcase-isMobileDevice .lightcase-open body{
max-width : 100%;
max-height : 100%;
} #lightcase-info{
position : absolute;
padding-top : 15px;
} #lightcase-info #lightcase-title ,
#lightcase-info #lightcase-caption{
padding : 0;
margin : 0;
font-weight : 400;
line-height : 1.5;
text-overflow : ellipsis;
} #lightcase-info #lightcase-title{
font-size : 17px;
color : #aaa;
}
@media screen and ( max-width : 640px ){ #lightcase-info #lightcase-title{
position : fixed;
top : 10px;
left : 0;
max-width : 87.5%;
padding : 5px 15px;
background : #333;
}
} #lightcase-info #lightcase-caption{
clear : both;
font-size : 13px;
color : #aaa;
} #lightcase-info #lightcase-sequenceInfo{
font-size : 11px;
color : #aaa;
}
@media screen and ( max-width : 640px ){ .lightcase-fullScreenMode #lightcase-info{
padding-left : 15px;
padding-right : 15px;
} html:not([data-lc-type="image"], [data-lc-type="video"], [data-lc-type="flash"], [data-lc-type="error"]) #lightcase-info{
position : static;
}
} #lightcase-loading{
position : fixed;
top : 50%;
left : 50%;
z-index : 9999;
z-index : 2001;
width : 1.123em;
height : auto;
margin-top : -.5em;
margin-left : -.5em;
font-size : 38px;
font-size : 32px;
line-height : 1;
text-align : center;
text-shadow : none;
text-shadow : 0 0 15px #fff;
opacity : 1;
-moz-transform-origin : 50% 53%;
-webkit-animation : lightcase-spin .5s infinite linear;
-moz-animation : lightcase-spin .5s infinite linear;
-o-animation : lightcase-spin .5s infinite linear;
animation : lightcase-spin .5s infinite linear;
} #lightcase-loading , #lightcase-loading:focus{
color : #fff;
text-decoration : none;
-webkit-transition : color , opacity , ease-in-out .25s;
-moz-transition : color , opacity , ease-in-out .25s;
-o-transition : color , opacity , ease-in-out .25s;
transition : color , opacity , ease-in-out .25s;
-webkit-tap-highlight-color : transparent;
} #lightcase-loading > span{
display : inline-block;
text-indent : -9999px;
} a[class*="lightcase-icon-"]{
position : fixed;
z-index : 9999;
width : 1.123em;
height : auto;
font-size : 38px;
line-height : 1;
text-align : center;
text-shadow : none;
cursor : pointer;
outline : none;
} a[class*="lightcase-icon-"] , a[class*="lightcase-icon-"]:focus{
color : rgb( 255 255 255 / .6 );
text-decoration : none;
-webkit-transition : color , opacity , ease-in-out .25s;
-moz-transition : color , opacity , ease-in-out .25s;
-o-transition : color , opacity , ease-in-out .25s;
transition : color , opacity , ease-in-out .25s;
-webkit-tap-highlight-color : transparent;
} a[class*="lightcase-icon-"] > span{
display : inline-block;
text-indent : -9999px;
} a[class*="lightcase-icon-"]:hover{
color : white;
text-shadow : 0 0 15px white;
} .lightcase-isMobileDevice a[class*="lightcase-icon-"]:hover{
color : #aaa;
text-shadow : none;
} a[class*="lightcase-icon-"].lightcase-icon-close{
position : fixed;
top : 15px;
bottom : auto;
right : 15px;
margin : 0;
outline : none;
opacity : 0;
} a[class*="lightcase-icon-"].lightcase-icon-prev{
left : 15px;
} a[class*="lightcase-icon-"].lightcase-icon-next{
right : 15px;
} a[class*="lightcase-icon-"].lightcase-icon-pause , a[class*="lightcase-icon-"].lightcase-icon-play{
left : 50%;
margin-left : -.5em;
}
@media screen and ( min-width : 641px ){ a[class*="lightcase-icon-"].lightcase-icon-pause , a[class*="lightcase-icon-"].lightcase-icon-play{
opacity : 0;
}
}
@media screen and ( max-width : 640px ){ a[class*="lightcase-icon-"]{
bottom : 15px;
font-size : 24px;
}
}
@media screen and ( min-width : 641px ){ a[class*="lightcase-icon-"]{
bottom : 50%;
margin-bottom : -.5em;
} a[class*="lightcase-icon-"]:hover , #lightcase-case:hover ~ a[class*="lightcase-icon-"]{
opacity : 1;
}
} #lightcase-overlay{
position : fixed;
top : -9999px;
bottom : -9999px;
left : 0;
z-index : 2000;
display : none;
width : 100%;
min-height : 100%;
background : #000;
}
@media screen and ( max-width : 640px ){ #lightcase-overlay{
opacity : .9 ! important;
}
}
@media screen and ( max-width : 767px ){
#lightcase-case{
left : 0 ! important;
width : 100% ! important;
max-width : 100% ! important;
margin-left : 0 ! important;
}
.lightcase-contentInner{
width : 100% ! important;
max-width : 100% ! important;
height : auto ! important;
}
.lightcase-contentInner img{
width : 100% ! important;
max-width : 100% ! important;
height : auto ! important;
}
}