@charset "Shift_JIS";

pre { display:none }
#demos { width: 580px }
#slideshow_block { width: 265px;height:195px; float: left ;margin: 0px 0px 0px 15px;}
#slideshow { width: 265px;height:185px; margin: left;}
#nav { width: 290px; height:195px;margin: 0px 0px 0px 5px;padding: 0; float: left  ;}
#nav li { width: 57px; float: left; margin: 6px 8px 15px 6px; padding: 5;list-style: none }
#nav a { width: 57px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
#caption { width: 465px;height:10px;text-align:right; padding-top: 0px; padding-right: 10px; color: #48D1CC; font-weight: bold ;float: right ;}



/* �X�}�z�p ------------------------------------------------------------------------ */
@media screen and ( max-width:768px) {

.navpic {
	list-style-type: none;
    text-align: center;
	padding-left: 0;
}

pre { display:none }
#demos { width: 100%; }


.navpic {
    width:100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    text-align: center;
    padding:0 0 5px 0;
}

#nav { 
    display: inline-block;
    width: 90%; 
    height:auto;
    margin: 0 5% 0 5%;
    padding: 0; 
    float: left  ;
	list-style-type: none;
    text-align: center;
}



#nav li { 
    display: inline-block;
    width: 63px; 
    padding: 3px;
    list-style: none ;
    float: none;
    margin: 0;
}


#nav a { width: 57px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
#slideshow_block { width: 100%;height:auto; float: left ;margin: 0px 0px 0px 0px;}
#slideshow { 
    width: 100%;
    height:auto; 
    margin: auto;
}
#caption { width: 100%;height:30px;margin: 10px 0 0 0;text-align:center; padding-top: 0px; padding-right: 0px; color: #48D1CC; font-weight: bold ;float: right ;}



}