@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	color:#000;
	background:#ffde25;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif ;
	font-size:16px;
	line-height: 1.6em;

}
img{ vertical-align:top; line-height:0;}
#wrapper{
	width:100%;
	min-width:1000px;
	background:#ffde25 url(../img/story_bg.jpg) repeat-x;
	}

#header{
	width:980px;
	margin:0 auto;
	height:125px;
	position:relative;
	}

#header h1{
	position: absolute;
	top: 10px;
	left: 5px;
	}
#header h1 a{
	display:block;
	text-indent:-10000px;
	width:257px;
	height:111px;
	background:url(../img/logo_page.png) no-repeat left top;
	}
#header h1 a:hover{
	background-position: left bottom;
	}
#nav1{
	position: absolute;
	top: 47px;
	left: 300px;
	}
#nav1 a{
	display:block;
	text-indent:-10000px;
	width:198px;
	height:48px;
	background:url(../img/nav1.gif) no-repeat left top;
	}
#nav1 a:hover{
	background-position: left bottom;}

#nav2{
	position: absolute;
	top: 51px;
	left: 520px;
	}
#nav2 a{
	display:block;
	text-indent:-10000px;
	width:197px;
	height:43px;
	background:url(../img/nav2.gif) no-repeat left top;
	}
#nav2 a:hover{
	background-position: left bottom;}

#nav3{
	position: absolute;
	top: 51px;
	left: 750px;
	}
#nav3 a{
	display:block;
	text-indent:-10000px;
	width:202px;
	height:41px;
	background:url(../img/nav3.gif) no-repeat left top;
	}
#nav3 a:hover{
	background-position: left bottom;
	}
#story{
	width:980px;
	margin:0 auto;
	position:relative;
	}
.storyNav{
	width:938px;
	height:124px;
	position:relative;
	margin:0 auto;
	}
.link_s1{
	position: absolute;
	top: 24px;
	left: 0px;
	}
.link_s1 a{
	display:block;
	text-indent:-10000px;
	width:260px;
	height:100px;
	background:url(../img/story_nav1.jpg) no-repeat left top;
	}
.link_s1 a:hover{
	background-position: left bottom;
	}
.link_s2{
	position: absolute;
	top: 24px;
	left: 270px;
	}
.link_s2 a{
	display:block;
	text-indent:-10000px;
	width:258px;
	height:100px;
	background:url(../img/story_nav2.jpg) no-repeat left top;
	}
.link_s2 a:hover{
	background-position: left bottom;
	}
.print{
	width: 396px;
	height: 112px;
	position: absolute;
	top: 12px;
	left: 540px;
	background: url(../img/story_print_bg.jpg) no-repeat;
	}
.link_p1{
	position: absolute;
	top: 12px;
	left: 162px;
	}
.link_p1 a{
	display:block;
	text-indent:-10000px;
	width:223px;
	height:41px;
	background:url(../img/link_print1.png) no-repeat left top;
	}
.link_p1 a:hover{
	background-position: left bottom;
	}
.link_p2{
	position: absolute;
	top: 54px;
	left: 162px;
	}
.link_p2 a{
	display:block;
	text-indent:-10000px;
	width:223px;
	height:41px;
	background:url(../img/link_print2.png) no-repeat left top;
	}
.link_p2 a:hover{
	background-position: left bottom;
	}
#slide{
	width:938px;
	height:684px;
	margin:0 auto;
	position:relative;
	}
.bg1{background:url(../img/story_bg1.jpg) no-repeat;}
.bg2{background:url(../img/story_bg2.jpg) no-repeat;}
#sliderBox{
	width:890px;
	height:630px;
    overflow:hidden;
	position:absolute;
	top:22px;
	left:22px;
	}
#inner{
	position:relative;
	}
#slide li{
	width:890px;
	height:630px;
	position:absolute;
	top:0;
	}
#slide li p{ display:none;}
.s1{left:0;}
.s2{left:-890px;}
.s3{left:-1780px;}
.s4{left:-2670px;}
.s5{left:-3560px;}
.s6{left:-4450px;}
.s7{left:-5340px;}
.s8{left:-6230px;}
.s9{left:-7120px;}
.s10{left:-8010px;}
.s11{left:-8900px;}

.story1_1{ background:url(../img/story1_1.jpg) no-repeat;}
.story1_1 a{ display:block; width:249px; height:58px; background:url(../img/link_read.png) no-repeat left top; text-indent:-10000px; position:absolute; top:520px; left:320px;}
.story1_1 a:hover{ background-position: left bottom;}
.story1_2{ background:url(../img/story1_2.jpg) no-repeat;}
.story1_3{ background:url(../img/story1_3.jpg) no-repeat;}
.story1_4{ background:url(../img/story1_4.jpg) no-repeat;}
.story1_5{ background:url(../img/story1_5.jpg) no-repeat;}
.story1_6{ background:url(../img/story1_6.jpg) no-repeat;}
.story1_7{ background:url(../img/story1_7.jpg) no-repeat;}
.story1_8{ background:url(../img/story1_8.jpg) no-repeat;}
.story1_9{ background:url(../img/story1_9.jpg) no-repeat;}
.story1_10{ background:url(../img/story1_10.jpg) no-repeat;}
.story1_11{ background:url(../img/story1_11.jpg) no-repeat;}

.story2_1{ background:url(../img/story2_1.jpg) no-repeat;}
.story2_1 a{ display:block; width:249px; height:58px; background:url(../img/link_read2.png) no-repeat left top; text-indent:-10000px; position:absolute; top:520px; left:320px;}
.story2_1 a:hover{ background-position: left bottom;}
.story2_2{ background:url(../img/story2_2.jpg) no-repeat;}
.story2_3{ background:url(../img/story2_3.jpg) no-repeat;}
.story2_4{ background:url(../img/story2_4.jpg) no-repeat;}
.story2_5{ background:url(../img/story2_5.jpg) no-repeat;}
.story2_6{ background:url(../img/story2_6.jpg) no-repeat;}
.story2_7{ background:url(../img/story2_7.jpg) no-repeat;}
.story2_8{ background:url(../img/story2_8.jpg) no-repeat;}
.story2_9{ background:url(../img/story2_9.jpg) no-repeat;}
.story2_10{ background:url(../img/story2_10.jpg) no-repeat;}
.story2_11{ background:url(../img/story2_11.jpg) no-repeat;}


.item1{
	position: absolute;
	top: 558px;
	left: 0px;
	}
.item2{
	position: absolute;
	top: 663px;
	left: 733px;
	}
.btn_next{
	position: absolute;
	top: 410px;
	left: -5px;
	width: 71px;
	height: 72px;
	}
.btn_next a{
	display:block;
	width:71px;
	height:72px;
	text-indent:-10000px;
	
	}
.next1 a{background:url(../img/btn_next.png) no-repeat left top;}
.next1 a:hover{background-position: left bottom; }
.next2 a{background:url(../img/btn_next2.png) no-repeat left top;}
.next2 a:hover{background-position: left bottom; }


.btn_back{
	position: absolute;
	top: 410px;
	left: 910px;
	width: 71px;
	height: 72px;
	}
.btn_back a{
	display:block;
	width:71px;
	height:72px;
	text-indent:-10000px;
	}

.back1 a{background:url(../img/btn_back.png) no-repeat left top;}
.back1 a:hover{background-position: left bottom; }
.back2 a{background:url(../img/btn_back2.png) no-repeat left top;}
.back2 a:hover{background-position: left bottom; }


#slideNav{
	width:948px;
	margin:10px auto 0 auto;
	padding:0 10px 0 0;
	
	}
#slideNav ul{
	overflow:hidden;
	height:120px;}
#slideNav li{
	padding:20px 0;
	float:right;
	margin:0 3px;
	cursor:pointer;
	
	}

.current{
	 background:url(../img/current.gif) no-repeat left bottom;
	  
	 
	  }
.current img{
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6;   /* Safari 1.x */
	
	 
			   
	}