/* CSS Document */

/*====================================
              ミニスライダー
=====================================*/

#miniSlide {
	width:180px;
	height: 55px;
}

#miniSlide_page {
	width:100%;
}

#miniSlide_page h3 {
	font-size:20px;
	font-weight:bold;
	border-bottom:3px solid #000;
	padding-bottom:3px;
}

#slid_ttl {
	width: 161px;
	height:26px;
	margin:0 auto;
}

#slide {
	width: 161px;
	height:268px;
	position: relative;
	margin:10px auto 0 auto ;
	font-size:12px;
}

#slide #list li {
	position: absolute;
	top: 0px;
	left: 0px;
}

#slide #navi {
	position: absolute;
	bottom: 10px;
	left: 15px;
	font-size: 12px;
}

#slide #navi li {
	float: left;
	margin-right: 5px;
}

#slide #navi li a {
	display: block;
	border: 1px solid #ccc;
	padding: 0 10px;
	line-height: 20px;
	background: #eee;
	color: #000;
	text-decoration: none;
}

#slide #navi li a.current,
#slide #navi li a:hover {
	background: #999;
}

#miniSlide {
	float:left;
}





#miniSlide_backnumber {
	float:left;
	width:100%;
	font-size:1.2em;
	text-align:center;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}
#miniSlide_backnumber a{
	color:#ffffff;
	font-style:bold;
	display:block;
	text-decoration:none;
	padding-top:13px;
	padding-bottom:13px;
	background-color:#bc0011;
	border-top:1px;
	border-left:1px;
	border-right:1px;
	border-bottom:1px;
	border-style: solid;
	border-color:#FF9900 #996600 #996600 #FF9900;
	border-radius:10px;
}
#miniSlide_backnumber a:hover{
	color:#000099;
	background-color:#FFFF99;
	opacity:1.0;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
}





/*====================================
              flexslider
=====================================*/

.slides span img {
	margin-right:35px;
}


/*====================================
              メインスライダー
=====================================*/

/*
#mainSlider {
	width: 800px;
	overflow:hidden;
	padding-left:10px;
}
*/

#mainSlide {
	float:left;
	margin-bottom:30px;
	text-decoration:none;
}



/*---------------メイン画像---------------*/


#main_img {/*ウィンドウの枠(見せる範囲)*/
	overflow: hidden;
	width: 980px;
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
}

#main_img .img_station_area {/*ウィンドウの中に表示させるコンテンツのサイズ*/
	width: 15000px;	/*.img_boxの横幅780px * メイン画像の枚数 (javascriptが有効でない環境に備えて大き目に設定) */
	height: 339px;
	line-height:336px;	/*heightの高さ270px - 微調整3px = 267px*/
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
	text-align:center;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
}

#main_img .img_station_area .img_box {	/*1画像毎の表示領域の横幅*/
	width: 980px;
	float: left;			/*左詰めで表示*/
	display:block;
}
#main_img .img_station_area .img_box a {	/*1画像毎の表示領域の横幅*/
	display:block;			/*高さの異なる画像の際も、高さ270pxサイズのリンクに*/
	width: 980px;
	height: 339px;
}
#main_img li {
	list-style-type: none;
}
#main_img img {	/*メイン画像を縦中央に揃える*/
	/*position: absolute;	IE以外のブラウザで下段のサブ画像にめり込むので使用中止*/
        top: 50%;
        bottom: 50%;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
}


#main_img .img_box img {
	border: 0;
}




/*---------------サムネイル画像---------------*/


#sub_img_outer {/*ウィンドウの枠(見せる範囲)*/
	position: relative;
	width: 980px;		/*780px - 微調整2px = 778px*/
	height: 50px;		/*中に表示させるサブ画像の高さ44px + ボーダーサイズ2px*2 + 余白2px = 50px*/
	padding-top:5px;	/*メイン画像表示エリアとサブ画像表示エリア間の余白5px*/
}

#sub_img {/*ウィンドウの枠(見せる範囲)*/
	overflow: hidden;
	width: 980px;
	height: 50px;		/*中に表示させるサブ画像の高さ44px + ボーダーサイズ2px*2 + 余白2px = 50px*/
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	float: left;
}


#sub_img .img_station_area {/*ウィンドウの中に表示させるコンテンツのサイズ*/
	width: 10000px;		/*.img_boxの横幅156px * サブ画像の枚数 (javascriptが有効でない環境に備えて大き目に設定) */
	height: 50px;		/*中に表示させるサブ画像の高さ44px + ボーダーサイズ2px*2 + 余白2px = 50px*/
	line-height:44px;	/*中に表示させるサブ画像の高さ44pxと同じ値を指定*/
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

#sub_img .img_station_area .img_box {	/*1画像毎の表示領域の横幅*/
	float: left;			/*左詰めで表示*/
	width: 163px;			/*#sub_img{width:980px;} ÷ 画像6枚分 = 163px*/
}

/*
　中に表示させるサブ画像の横幅サイズは、全体の横幅÷画像枚数分のサイズから、
　更にボーダーサイズ2px*2本分 = 計4px分 小さいサイズを指定。 横幅124pxの画像を表示させる場合、124px-4=120pxを指定。
　横幅156pxの画像を表示させる場合、156px-4=152px... 130px-4=126px...
*/
#sub_img .img_station_area .img_box a {	/*1画像毎の表示領域*/
	display:block;			/*リンク全体をブロック要素に設定*/
	width: 160px;			/*横幅の異なる画像の際も、横幅126pxサイズのリンクに*/
	height: 44px;			/*高さの異なる画像の際も、高さ44pxサイズのリンクに*/
}
#sub_img .img_station_area .img_box li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#sub_img .img_station_area .img_box img {
	border: 2px solid #FFFFFF;	/*マウスオーバーで2pxの青いボーダーを表示させた際にズレないように、予め2pxの白いボーダーを表示*/
	top: 50%;
	bottom: 50%;
	vertical-align:middle;
	margin-top:auto;
	margin-bottom:auto;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}