@charset "utf-8";
    /* Lightboxの枠 */  
    .lightbox {  
        height: 100%;  
        width: 100%;  
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);  
        position: absolute;  
        top: 0;  
        left: 0;  
        z-index: 1000;  
        display: none;  
      
        -webkit-animation-name: fade;  
        -webkit-animation-duration: 0.50s;  
        -webkit-animation-iteration-count: 1;  
        -webkit-animation-direction: normal;  
        -webkit-animation-timing-function: ease-in;  
    }  
      
    /* Lightbox全体を覆うアンカー */  
    .lightbox a {  
        display: table-cell;  
        vertical-align: middle;  
        text-align: center;  
    }  
      
    /* アンカーの中にいるimg要素 */  
    .lightbox img {  
        -moz-box-shadow: 0 0 15px #444444;  
        background-color: #FFFFFF;  
        padding: 5px 5px 45px;  
      
        -webkit-animation-name: grow;  
        -webkit-animation-duration: 0.50s;  
        -webkit-animation-iteration-count: 1;  
        -webkit-animation-direction: normal;  
        -webkit-animation-timing-function: ease-out;  
    }  
      
    /* アンカーの中にいる文字を表示する要素 */  
    .lightbox p {  
        -moz-box-shadow: 0 0 15px #444444;  
        background-color: #FFFFFF;  
        color: #000000;  
        font: bold 15px Helvetica,Arial,Sans-serif;  
        text-shadow: 0 2px 6px #333333;  
        padding: 5px 5px 45px;  
        position: absolute;  
        left: 50%;  
        top: 50%;  
        margin-left: -30%;  
        margin-top: -200px;  
        width: 60%;  
        height: 400px;  
      
        -webkit-animation-name: grow2;  
        -webkit-animation-duration: 0.50s;  
        -webkit-animation-iteration-count: 1;  
        -webkit-animation-direction: normal;  
        -webkit-animation-timing-function: ease-in;  
    }  
      
    /* lightboxがフラグメントID経由でアクティブになった場合に、ここのスタイルが適用される */  
    .lightbox:target {  
        display: table;  
    }  
      
    /* keyframes */  
    @-webkit-keyframes fade {  
        from {opacity: 0;}  
        to  {opacity: 1;}  
    }  
      
    @-webkit-keyframes grow {  
        from {height: 0px;}  
        to  {height: 300px;}  
    }  
      
    @-webkit-keyframes grow2 {  
        from {height: 0px;}  
        to  {height: 400px;}  
    }