/**
 *  @fileoverview  CSS3 Slideshow
 *  @author        Tohl SMALLFIELD
 */
body,div,p,ol,li,a,span{
    margin: 0; padding: 0;
    list-style-type: none;
    outline: none;
}
body{
    overflow: hidden;
}

/*------------------------------------------------
    #wrapper
------------------------------------------------*/
#wrapper{
    position: relative;
    width: 465px; height: 465px;
    margin: 0 auto;
    background-color: #000;
}

/*------------------------------------------------
    #start
------------------------------------------------*/
#start{
    position: absolute;
    top: 50%; left: 50%;
    margin: -30px 0 0 -30px;
    width: 60px; height: 60px;
    background-color: #333;
    
    -webkit-border-radius: 99px;
    -moz-border-radius:    99px;
    
    -webkit-transition: all .2s ease-in;
    -moz-transition:    all .2s ease-in;
    
    -webkit-transform: rotate(135deg) scale(.8, .8);
    -moz-transform:    rotate(135deg) scale(.8, .8);
    
    text-indent: -9999px;
}
#start:before,
#start:after{
    position: absolute;
    top: 21px; left: 21px;
    display: block;
    background-color: #fff;
    content: "";
}
#start:before{ width: 24px; height: 6px;  }
#start:after { width:  6px; height: 24px; }
#start:hover{
    -webkit-transform: rotate(135deg) scale(1, 1);
    -moz-transform:    rotate(135deg) scale(1, 1);
}
.a:target #start{
    opacity: 0;
    z-index: -1;
}

/*------------------------------------------------
    #slides
------------------------------------------------*/
#slides{
    position: relative;
    top: 180px;
    width: 455px; height: 265px;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    
    -webkit-transition: all 1s ease-in;
    -moz-transition:    all 1s ease-in;
}
.a:target #slides{
    opacity: 1;
}

/*------------------------------------------------

------------------------------------------------*/
ol{
    position: absolute;
    left: 50%;
    width: 1000px; height: 75px;
    margin-left: -650px;
    
    -webkit-transition: all 1s ease-in-out;
    -moz-transition:    all 1s ease-in-out;
    /*
     * mac safariでtransition時、不調っぽい
    -webkit-box-reflect: below 5px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(0, 0, 0, .5)) );
    */
    counter-reset: cnt 0;
}

li{
    float: left;
    width: 100px; height: 75px;
    counter-increment: cnt 1;
}
li a{
    position: relative;
    display: block;
    width: 100px; height: 75px;
    margin: 0 auto;
    background-color: #39c;
    opacity: .5;
    text-decoration: none;
    
    -webkit-transform-origin: center bottom;
    -moz-transform-origin:    center bottom;
    
    -webkit-transition: all .5s ease-in;
    -moz-transition:    all .5s ease-in;
    
    -webkit-transform: scale(.8, .8);
    -moz-transform:    scale(.8, .8);
}
li a:before,
li a:after{
    position: absolute;
    display: block;
    width: 100%;
}
li a:before{
    top: 50%;
    margin-top: -0.5em;
    color: #fff;
    font-family: myriad, verdana, sans-serif;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 1px #fff;
    content: counter(cnt);
    clear: left;
    line-height: 1;
}
li a:after{
    top: 80px;
    height: 35px;
    
    background-image: -webkit-gradient(linear, left top, left bottom, from(#39c), to(#000) );
    background-image: -moz-linear-gradient(top, #39c, #000);
    
    content: "";
    opacity: .5;
}
li a:hover{
    opacity: .7;
    
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    
    -webkit-transform: scale(.85, .85);
    -moz-transform:    scale(.85, .85);
}
li a:active{
    opacity: .8;
    
    -webkit-transition: all .1s ease-in-out;
    -moz-transition:    all .1s ease-in-out;
    
    -webkit-transform: scale(.8, .8);
    -moz-transform:    scale(.8, .8);
}
/*------------------------------------------------
    prev / next ボタン
------------------------------------------------*/
.btn{
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
}
#btnNext{
    right: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(#000) );
    background-image: -moz-linear-gradient(left, transparent, #000);
}
#btnPrev{
    left: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#000), to(transparent) );
    background-image: -moz-linear-gradient(left, #000, transparent);
}
/*----- p -----*/
.btn p{
    position: absolute;
    top: 20px;
}
#btnPrev p{
    left: -15px;
    
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
}
#btnNext p{
    right: -15px;
    
    -webkit-transform: rotate(135deg);
    -moz-transform:    rotate(135deg);
}
/*----- a -----*/
.btn a{
    display: block;
    width: 50px; height: 50px;
    text-indent: -9999px;
    display: none;
    
    -webkit-transition: all .1s ease-in;
    -moz-transition:    all .1s ease-in;
}
.btn a:before,
.btn a:after{
    position: absolute;
    top: 20px; left: 20px;
    display: block;
    background-color: #fff;
    content: "";
}
.btn a:before{ width: 20px; height: 5px;  }
.btn a:after { width:  5px; height: 20px; }

.btn a:hover{
    -webkit-transition: all .4s ease-in;
    -moz-transition:    all .4s ease-in;
    
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform:    scale(1.2, 1.2);
}
.btn a:active{
    opacity: .7;
    
    -webkit-transition: all 0 ease-in;
    -moz-transition:    all 0 ease-in;
    
    -webkit-transform: scale(.95, .95);
    -moz-transform:    scale(.95, .95);
}

/*------------------------------------------------
    スライド位置
------------------------------------------------*/
#a00:target ol{ margin-left:  -50px; }
#a01:target ol{ margin-left: -150px; }
#a02:target ol{ margin-left: -250px; }
#a03:target ol{ margin-left: -350px; }
#a04:target ol{ margin-left: -450px; }
#a05:target ol{ margin-left: -550px; }
#a06:target ol{ margin-left: -650px; }
#a07:target ol{ margin-left: -750px; }
#a08:target ol{ margin-left: -850px; }
#a09:target ol{ margin-left: -950px; }

/*------------------------------------------------
    該当スライド
------------------------------------------------*/
#a00:target #img00,
#a01:target #img01,
#a02:target #img02,
#a03:target #img03,
#a04:target #img04,
#a05:target #img05,
#a06:target #img06,
#a07:target #img07,
#a08:target #img08,
#a09:target #img09{
    opacity: 1;
    
    -webkit-transform: scale(1, 1);
    -moz-transform:    scale(1, 1);
}

/*------------------------------------------------
    ボタン
------------------------------------------------*/
#a00:target .btn00,
#a01:target .btn01,
#a02:target .btn02,
#a03:target .btn03,
#a04:target .btn04,
#a05:target .btn05,
#a06:target .btn06,
#a07:target .btn07,
#a08:target .btn08,
#a09:target .btn09{
    display: block;
}
#a00:target #btnPrev a,
#a09:target #btnNext a{
    opacity: .2;
}