@charset "utf-8";
/* CSS Document */
/*CSSリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
	pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:1px;
}
fieldset,img{
	border:0;
}


h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td{
	font-family:'ヒラギノ丸ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size:14px;
	font-weight:normal;
	font-style:normal;
	line-height:130%
}

ul{
	list-style:none;
}

html,body{
	width:100%;
	height:100%;
	color:#666666;
	position:relative;
}
body{
	min-width:758px;
	height:100%;
	min-height:537px;
}
div#wrapper{
	position:relative;
	min-height:537px;
}
div#container{
	width:95%;
	height:95%;
	min-height:510px;
	margin:auto;
}
/*Left*/
div#leftcontents{
	height:75%;
	float:left;
	margin:20px 10px 0 10px;	
	width:143px;
}
h1{
	margin:0 0 20% 0;
	text-align:right;
}
ul#navigation li{
	text-align:right;
	font-size:105%;
	font-weight:lighter;
	line-height:180%;
}
ul#navigation li.nav_small{
	font-size:90%;
}
ul#navigation li.mt{
	margin-top:20px;
}
ul#navigation li a:link,ul#navigation li a:visited{
	text-decoration:none;
	color:#999999;
}
ul#navigation li a:hover{
	color:#BBBBBB;
}

ul#navigation li.cat-1:first-letter{
	color:#FF9999;
}
ul#navigation li.cat-2:first-letter{
	color:#AFDD98;
}
ul#navigation li.cat-3:first-letter{
	color:#E5BFFB;
}
ul#navigation li.cat-4:first-letter{
	color:#FFBB33;
}
ul#navigation li.cat-5:first-letter{
	color:#66BBFF;
}
ul#navigation li.cat-6:first-letter{
	color:#FFBBFF;
}
ul#navigation li.cat-7:first-letter{
	color:#BB9966;
}
ul#navigation li.cat-8:first-letter{
	color:#33FFFF;
}
ul#navigation li.cat-9:first-letter{
	color:#999966;
}
ul#navigation li.cat-10:first-letter{
	color:#669999;
}

/*Slider*/
div#slide{
	width:75%;
	height:75%;
	float:right;
	margin:20px 10px 0 0;
}
div#timeline{
	width:100%;
	height:100%;
	min-height:100px;
    overflow: auto;
	display:block;
	position:relative;
}

div#timeline ul{
	height:100%;
    width:9999px;
    list-style:none;
	position:absolute;
}
div#timeline ul li{
	display:inline;
	height:100%;
	position:relative;
}

div#timeline ul li img{
	height:100%;
	min-height:100px;
	width:auto;
}
div#timeline ul li.photo10{
	margin:0 5px 0 0;
}

/*contraller*/
div#contraller{
	display:none;
	clear:both;
	position:relative;
	height:12%;
	margin:20px auto 0 auto;
    /*cursor: -moz-grab !important;*/ /* should this be applied with JS? */
}
div#contraller ul{
	height:100%;
}

div#contraller ul li{
	display:inline;
	height:100%;
}
div#contraller ul li img{
	height:100%;
}
div#contraller ul li#jquery-ui-draggable{
	position:absolute;
	display:block;
	text-indent:-9999px;
	background:url(../images/contraller_bg.png) center center;
	top:-8px;
	left:-3px;
/*	width:10%;*/
	border:3px solid #FF0000;
}
div#contraller ul li#jquery-ui-draggable.hover{
	background:url(../images/contraller_bg2.png) center center;
}
div#contraller ul li{
}
div#contraller{
}
/*title*/
p.title_w{
	position:absolute;
	bottom:0;
	left:0;
	color:#FFFFFF;
	line-height:200%;
	padding:0 0 5px 0;
	text-indent:5px;
	width:100%;

}
p.title_b{
	color:#333333;
	position:absolute;
	bottom:0;
	left:0;
	line-height:200%;
	padding:0 0 5px 0;
	text-indent:5px;
	width:100%;

}
p.title_g{
	color:#AAAAAA;
	position:absolute;
	bottom:0;
	left:0;
	line-height:200%;
	padding:0 0 5px 0;
	text-indent:5px;
	width:100%;
}
/*information*/
div#information{
	width:75%;
	float:right;
}
/*footer*/
div#footer{
	clear:both;
	position:absolute;
	bottom:0;
	padding:5px 2% 5px 2%;
	background:#FFFFFF;
	border-top:1px dotted #CCCCCC;
}
div#footer p{
	text-align:center;
	display:block;
	font-size:12px;
	width:100%;

}

/*top*/
div.top{
	width:75%;
	float:right;
	margin:20px 10px 0px 0;
	overflow:hidden;
}
div.top img{
	min-width:497px;
	min-height:356px;
}
/*information*/
div#information{
	width:75%;
	min-width:520px;
	height:75%;
	float:right;
	margin:20px 10px 0 0;
}


/*prevnext*/
ul.prevnext{
	width:168px;
	margin:15px auto 0 auto;
}
li.prev{
	display:block;
	width:84px;
	height:22px;
	background:url(../images/prev.png) top left no-repeat;
	float:left;
}
li.prev a{
	display:block;
	width:84px;
	height:22px;
	text-indent:-9999px;
}
li.next{
	width:84px;
	height:22px;
	background:url(../images/next.png) top left no-repeat;
	float:left;
}
li.next a{
	display:block;
	width:84px;
	height:22px;
	text-indent:-9999px;
}
/*link*/
a:link,a:visited{
	color:#FF9900;
}
a:hover{
	color:#FFCC00;
}
/*global*/
.center{
	text-align:center;
	margin:15px 0 0 0;
}
.clearFix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearFix             { zoom: 1; } /* IE6 */
*:first-child+html .clearFix { zoom: 1; } /* IE7 */