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

body {
	margin: 0;
	background: #FFCEF0 url(../images/bg.jpg) center top no-repeat;
}

.preload {
	display: none;
}

#wrapper {
	width: 100%;
	overflow: hidden;
}

#main {
	width: 1026px;
	margin: auto;
}

#head{
	width: 1026px;
	height:380px;
	background:url(../images/head_bg.jpg) top left no-repeat;
}

#head div.title{
	width: 1026px;
	height:264px;
	position:relative;
}

#head div.title h1 a{
	width:370px;
	height:180px;
	position:absolute;
	top:10px;
	left:45px;
}

h1,h2,h3 {
	font-size:0px;
	text-indent:-9999px;
}

#head div.menu{
	width: 928px;
	padding:0 49px;
}

#head div.menu div{
	float:left;
}

#head div.menu div.menu_r{
	margin-right:2px;
	display: inline;
}

#head div.menu div.menu_c{
	margin-right:52px;
	display: inline;
}

#head div.menu a:hover img {
	filter:alpha(opacity=100);
	opacity:1;
}

#book_bg{
	background:url(../images/book_bg.jpg) top left no-repeat;
	width:950px;
	height:815px;
	margin:0;
	padding:0 38px;
}

#book{
	width:950px;
	height:770px;
}

.page {
	float: left;
	width: 475px;
	position:relative;
}

.clear {
	clear: both;
}


/* introduction
----------------------------------------*/

div.intro_l{
	background:url(../images/intro1_l.jpg) top left no-repeat;
	height:770px;
}

div.intro_l p{
	text-indent:-9999px;
	font-size:0px;
}

.btn_page1{
	width:28px;
	height:28px;
	position:absolute;
	bottom:20px;
	left:205px;
}

.btn_page2{
	width:28px;
	height:28px;
	position:absolute;
	bottom:20px;
	right:202px;
}

div.intro_r{
	background:url(../images/intro1_r.jpg) top left no-repeat;
	height:770px;
}

.btn_story{
	position:absolute;
	width:118px;
	height:48ppx;
	top:15px;
	left:30px;
}

.btn_staff{
	position:absolute;
	width:168px;
	height:48ppx;
	top:15px;
	right:150px;
}

.btn_music{
	position:absolute;
	width:108px;
	height:48ppx;
	top:15px;
	right:33px;
}

div.intro2_l{
	background:url(../images/intro2_l.jpg) top left no-repeat;
	height:770px;
}

div.intro2_l p{
	font-size:0px;
	text-indent:-9999px;
}

div.intro2_r{
	background:url(../images/intro2_r.jpg) top left no-repeat;
	height:770px;
}

div.intro2_r p{
	font-size:0px;
	text-indent:-9999px;
}

/* story
----------------------------------------*/

div.story_l{
	background:url(../images/story1_l.jpg) top left no-repeat;
	height:770px;
}

div.story_l p{
	font-size:0px;
	text-indent:-9999px;
}

div.story_r{
	background:url(../images/story1_r.jpg) top left no-repeat;
	height:770px;
}

.btn_intro{
	position:absolute;
	width:178px;
	height:48ppx;
	top:15px;
	left:10px;
}

.btn_staff2{
	position:absolute;
	width:168px;
	height:48ppx;
	top:15px;
	right:119px;
}

.btn_music2{
	position:absolute;
	width:108px;
	height:48ppx;
	top:15px;
	right:10px;
}

div.story2_l{
	background:url(../images/story2_l.jpg) top left no-repeat;
	height:770px;
}

div.story2_r{
	background:url(../images/story2_r.jpg) top left no-repeat;
	height:770px;
}

div.story2_l p,
div.story2_r p{
	font-size:0px;
	text-indent:-9999px;
}



/* staff
----------------------------------------*/

div.staff_l{
	background:url(../images/staff_l.jpg) top left no-repeat;
	height:770px;
}

div.staff_r{
	background:url(../images/staff_r.jpg) top left no-repeat;
	height:770px;
}

div.staff_l p,
div.staff_r p{
	font-size:0px;
	text-indent:-9999px;
}

.btn_intro2{
	position:absolute;
	width:178px;
	height:48ppx;
	top:15px;
	left:30px;
}

.btn_story2{
	position:absolute;
	width:118px;
	height:48ppx;
	top:15px;
	right:143px;
}

.btn_music3{
	position:absolute;
	width:108px;
	height:48ppx;
	top:15px;
	right:30px;
}

/* music
----------------------------------------*/

div.music_l{
	background:url(../images/music_l.jpg) top left no-repeat;
	height:770px;
}

div.music_r{
	background:url(../images/music_r.jpg) top left no-repeat;
	height:770px;
}

div.music_r p,
div.music_l p{
	font-size:0px;
	text-indent:-9999px;
}

.btn_intro3{
	position:absolute;
	width:178px;
	height:48ppx;
	top:15px;
	left:5px;
}

.btn_story3{
	position:absolute;
	width:118px;
	height:48ppx;
	top:15px;
	left:182px;
}

.btn_staff3{
	position:absolute;
	width:168px;
	height:48ppx;
	top:15px;
	right:5px;
}


/* link
----------------------------------------*/

.linkbox{
	width:415px;
	padding:0px 30px;
}

.link{
	background:url(../images/line_y.gif) bottom left no-repeat;
	color:#762F07;
	font-weight:bold;
	font-size:14px;
	padding:10px 0;
}

.link img{
	margin:0 10px 0 0;
	vertical-align: middle;
}

.link a{
	color:#630;
	text-decoration:none;
}

.link a:hover{
	color:#630;
	text-decoration:underline;
}



/* movie
----------------------------------------*/
div.movie_r{
	background:url(../images/movie_r.jpg) top left no-repeat;
	height:770px;
	padding:82px 31px 0 39px;
	width:405px;
}

div.movie_r a:hover img {
	filter:alpha(opacity=70);
	opacity:0.7;
}



/* news
----------------------------------------*/

.newsbox{
	width:415px;
	padding:20px 30px;
}

ul,li{
	list-style:none;
	margin:0;
	padding:0;
}

div.news{
	background:url(../images/line_g.gif) bottom left no-repeat;
	color:#762F07;
	font-weight:bold;
	font-size:14px;
	padding: 10px 0 10px 0;
	width:415px;
	line-height:1.4em;
}
.news ul li{
	float:left;
}

.news ul li.day{
	font-size:12px;
	color:#6C0;
	margin:0;
	padding:0;
}
.news ul li img{
	margin:0 10px;
	display:inline;
	width:13px;
}

.news ul li.txtl{
	font-size:14px;
	width:320px;
}

.news ul li.txtl a{
	color:#762F07;
	text-decoration:none;
}

.news ul li.txtl a:hover{
	color:#762F07;
	text-decoration: underline;
}


/* news2
----------------------------------------*/

body#news2 {
	margin: 0;
	background: #EBFFD8;
}

#wrapper {
	width: 100%;
	overflow: hidden;
}

#main2 {
	width: 900px;
	margin: auto;
}

#news_detail{
	width:860px;
	padding:15px 20px;
}

.news_ttl{
	text-align:center;
}

.news_top{
	margin-top:15px;
}

.news_bg{
	background:url(../images/news_bg.gif) top left repeat-y;
	width:810px;
	padding:0 25px 10px 25px;
}

.news_midashibg{
	background:url(../images/news_obibg.gif) top left repeat-y;
}

.news_candy{
	background:url(../images/news_obi.jpg) top left no-repeat;
	padding:45px 15px 10px 65px;
	color:#FFF;
	width:730px;
}

.news_candy p.day{
	color:#6C0;
	font-size:10px;
	width:80px;
	float:left;
	margin:0;
	padding:5px 0 0 0;
}

.news_candy p.midashi{
	font-weight:bold;
	font-size:18px;
	float:right;
	width:640px;
	margin:0;
	padding:0;
	line-height:1.4em;
}

.news_bg p{
	padding:20px;
	margin:0;
	font-size:14px;
	line-height:1.4em;
}

.news_bg a{
	color:#F69;
	text-decoration:underline;
}

.news_bg a:hover{
	color:#F69;
	text-decoration:none;
}

.close{
	text-align:center;
	margin:20px 0 0 0;
}

.totop{
	text-align:right;
	font-size:12px;
	padding:5px 0;
	color:#090;
}

.totop a{
	color:#090;
}


/* character
----------------------------------------*/
.chara1_l{
	background:url(../images/character1_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara_txt{
	font-size:0px;
	text-indent:-9999px;
}

.chara1_r{
	background:url(../images/character1_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.change0 p{
	width:104px;
	height:44px;
	position:absolute;
	bottom:18px;
	left:17px;
	display:block;
	cursor:pointer;
}

.change1 p{
	width:174px;
	height:44px;
	position:absolute;
	bottom:18px;
	left:127px;
	display:block;
	cursor:pointer;
}

.change2 p{
	width:154px;
	height:44px;
	position:absolute;
	bottom:18px;
	right:14px;
	display:block;
	cursor:pointer;
}

.chara2_l{
	background:url(../images/character2_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara2_r{
	background:url(../images/character2_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara3_l{
	background:url(../images/character3_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara3_r{
	background:url(../images/character3_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara4_l{
	background:url(../images/character4_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara4_r{
	background:url(../images/character4_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara5_l{
	background:url(../images/character5_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara5_r{
	background:url(../images/character5_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara6_l{
	background:url(../images/character6_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara6_r{
	background:url(../images/character6_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara7_l{
	background:url(../images/character7_l.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}

.chara7_r{
	background:url(../images/character7_r.jpg) top left no-repeat;
	width:475px;
	height:770px;
	position:relative;
}


.box1 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:50px;
	display:block;
}

.box2 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:105px;
	display:block;
}

.box3 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:160px;
	display:block;
}

.box4 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:215px;
	display:block;
}

.box5 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:270px;
	display:block;
}

.box6 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:325px;
	display:block;
}

.box7 a{
	width:50px;
	height:50px;
	position:absolute;
	bottom:15px;
	left:380px;
	display:block;
}

.change_3 p,
.change_4 p,
.change_5 p,
.change_6 p{
	width:104px;
	height:44px;
	position:absolute;
	bottom:18px;
	left:81px;
	display:block;
	cursor:pointer;
}

.change3 p,
.change4 p,
.change5 p,
.change6 p{
	width:184px;
	height:44px;
	position:absolute;
	bottom:18px;
	left:216px;
	display:block;
	cursor:pointer;
}
	
/* txt
----------------------------------------*/	
.txt_pink{
	font-weight: bold;
	color: #FF33CC;
	
}

.txt_red{
	font-weight: bold;
	color: #CC0033;
	
}

.txt_blue{
	font-weight: bold;
	color: #0066FF;
	
}

.txt_green{
	font-weight: bold;
	color: #009900;
	
}


/* @Booklet
----------------------------------------*/
	.booklet           {width:950px; height:770px; position:relative; /*background:#fff;*/ margin:0 auto; overflow:visible !important;}
	.booklet .b-page  {left:0px; top:0; position:absolute; overflow:hidden; padding:0;}
	
	.booklet .b-pN  {}
	.booklet .b-p0  {}
	.booklet .b-p1  {}
	.booklet .b-p2  {}    
	.booklet .b-p3  {}
	.booklet .b-p4  {}
	
	.booklet .b-load  {}
   
   	/* Page Wrappers */
	.booklet .b-wrap       {top:0; position:absolute;}
	.booklet .b-wrap-left  {background:url(../images/bg_left.jpg) repeat-y;}
	.booklet .b-wrap-right {background:url(../images/bg_right.jpg) repeat-y;}
	
	.booklet .b-pN .b-wrap,
	.booklet .b-p1 .b-wrap,
	.booklet .b-p2 .b-wrap,
	.booklet .b-p3 .b-wrap,
	.booklet .b-p4 .b-wrap  {left:0;}
	.booklet .b-p0 .b-wrap  {right:0;}
	
   	/* Custom Page Types */
	.booklet .b-page-blank  {padding:0; width:100%; height:100%;}
	.booklet .b-page-cover  {padding:0; width:100%; height:100%; background:#925C0E;}
	.booklet .b-page-cover h3  {color:#fff; text-shadow:0px 1px 3px #222;}
   
   	/* Page Numbers */
	.booklet .b-counter {bottom:0; margin:10px; position:absolute; display:block; width:20px; height:20px; color:#444; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; line-height: 20px;}
	.booklet .b-counter {/margin:15px 10px;}
	
	.booklet .b-wrap-left  .b-counter  {left:0;}
	.booklet .b-wrap-right .b-counter {right:0;}
   
   	/* Page Shadows */
	.booklet .b-shadow-f  {right:0; top:0; position:absolute; opacity:0;}
	.booklet .b-shadow-b  {left:0;  top:0; position:absolute; opacity:0;}
	html>/**/body .booklet .b-shadow-f  {background-image:url("../images/shadow-top-forward.png"); background-repeat:repeat-y; background-position:100% 0;}
	html>/**/body .booklet .b-shadow-b  {background-image:url("../images/shadow-top-back.png");    background-repeat:repeat-y; background-position:0 0;}
	
	html>/**/body .booklet .b-p0 {background-image:url("../images/shadow.png"); background-repeat:repeat-y; background-position:100% 10px;}
	html>/**/body .booklet .b-p3 {background-image:url("../images/shadow.png"); background-repeat:repeat-y; background-position:0 10px;}
	
   	/* Overlay Controls */
	.booklet .b-grab     {cursor: url(../images/openhand.cur), default;}
	.booklet .b-grabbing {cursor: url(../images/closedhand.cur), default;}
	
   	/* Overlay Controls */
	.booklet .b-overlay      {top:0; position:absolute; height:100%; width:50%;}
	.booklet .b-overlay-prev {left:0;}
	.booklet .b-overlay-next {right:0;}
	
   	/* Tab Controls */
	.booklet .b-tab        {background:#000; height:40px; width:100%; padding:10px 0 0; text-align:center; color:#ccc; position:absolute; font-size:11px;}
	.booklet .b-tab-prev   {left:0;}
	.booklet .b-tab-next   {right:0;}
	.booklet .b-tab:hover  {background:#aaa; color:#000;}	
	
   	/* Arrow Controls */
	.booklet .b-arrow          {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:45px;}
	.booklet .b-arrow div      {display:none; text-indent:-9999px; height:770px; width:45px; position:absolute; left:0px; top:0px;}
	.booklet .b-arrow-next     {right:0;}
	.booklet .b-arrow-prev     {left:0;}
	.booklet .b-arrow-next div:hover {background:url("../images/arrow-next.png") no-repeat left top;}
	.booklet .b-arrow-prev div:hover {background:url("../images/arrow-prev.png") no-repeat left top;}
	.booklet .b-arrow-next div:active {background-image:none;}
	.booklet .b-arrow-prev div:active {background-image:none;}
		
/* @z-index fix (needed for older IE browsers)
----------------------------------------*/
	body              {z-index:0;}
    .b-menu           {z-index:100;}
    .b-selector       {z-index:100;}
	.booklet          {z-index:10;}
    .b-pN             {z-index:10;}
    .b-p0             {z-index:10;}
    .b-p1             {z-index:10;}
    .b-p2             {z-index:10;}
    .b-p3             {z-index:10;}
    .b-p4             {z-index:10;}
    .b-prev           {z-index:40;}
    .b-next           {z-index:40;}
    .b-counter        {z-index:40;}
	
/* @Menu Items
----------------------------------------*/
	.b-menu {height:40px; padding:0 0 10px;}
	
	.b-selector             {height:40px; position:relative; float:right; border:none; color:#cecece; cursor:pointer;}
	.b-selector .b-current  {padding:8px 15px 12px; line-height:20px; min-width:18px; height:20px; display:block; background:#000; text-align:center;}
	.b-selector-page        {width:auto; margin-left:15px;}
	.b-selector-chapter     {width:auto;}
	
	.b-selector:hover            {color:#fff; background-position:left 0px;}
	.b-selector:hover .b-current {background-position:right 0px;}
	.b-selector ul               {overflow:hidden; margin:0; list-style:none !important; position:absolute; top:40px; right:0; padding:0 0 10px; background:#000; width:240px; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
	.b-selector li               {border:none;}
	.b-selector a                {color:#cecece; height:14px; text-decoration:none; display:block; padding:5px 10px;}
	.b-selector a .b-text        {float:left; clear:none;}
	.b-selector a .b-num         {float:right; clear:none;}
	.b-selector a:hover          {color:#fff;}