@charset "utf-8";
/* -------------------------------------
     Site CSS
 (c) Copyright 2006 Sketches of Design
     version 2006-09-01
------------------------------------- */
/*  General Rules
--------------------------------------*/
/* nav */



#btt{
  position: fixed;
  bottom: 0;
  right: 20px;
  margin: 0;
  padding: 0;
  width: 224px;
  height: 131px;
}
#btt a{
  background: url("../img/nav-btt.png") 0 0 no-repeat;
}

#btt a:hover{
  background-position: -224px 0;
}



#content p{
  margin-top: 0;
  margin-bottom: 0.7em;
  line-height: 1.6;
  letter-spacing:0.05em;
}




/* table */
table{
  margin-bottom: 20px;
  line-height: 1.5;
  color: #1e1f1e;
  border: none;
}

table thead tr th,
table thead tr td{
/*  background-color: #edeeee;*/
  color: #1e1f1e;
}
table thead{
/*  border-bottom: 1px solid #fff;*/
}
table thead tr th{
  border: 1px solid #b2b2b2;
  background-color: #dfeafb;
  text-align: center;
}
table tr th,
table tr td{
  padding: 0.5em;
  border: 1px solid #b2b2b2;
  text-align: left;
}
table tr th{
  background-color: #dfeafb;
}
table p.nav{
  margin-bottom: 0 !important;
}
table tr .left{
  text-align: left;
}
table tr .center{
  text-align: center;
}
table tr .right{
  text-align: right;
}
table tr th p,
table tr td p{
  margin: 0 !important;
  padding: 0 !important;
}
table ul li{
  margin: 0 !important;
}


/* list */
#content ul,
#content ol{
  margin: 0 0 0 1em;
  padding: 0;
}
#content ul{
  list-style-type: none;
}
#content ol{
  margin: 0 0 0 40px;
  list-style-position: outside;
}
#content ul li{
  margin: 0 0 0.2em 0;
  padding: 0 0 0 10px;
  background: url("../img/nav-bullet.gif") 0 0.5em no-repeat;
}

ol.bc li{
  margin-left: 2px;
 /* background: url("../img/nav-bc.gif") 0 4px no-repeat;
  padding-left: 8px;*/
}
ol.bc li.first{
  background: none;
  padding-left: 0;
}

ol.bc li strong{
  color: #333;
  font-weight: normal;
}
ol.bc{
  border-bottom: none;
  margin: 33px 30px 20px 0 !important;
  text-align: right;
}


/* headline */

h1, h2, h3, h4, h5, h6{
  font-size: 100%;
  font-weight: normal;
}
#main h1,
#main #content h2,
#main #content h3,
#main #content h4{
  font-weight: bold;
}
#content h1{
  margin: 0 0 0 20px;
  width: 710px;
  height: 30px;
}
#content h2,
#content h3{
  margin: 0;
}
#content h2{
  padding: 0;
  width: 840px;
  height: 50px;
}
#content h3{
  padding: 0;
  height: 34px;
  width: 670px;
}






/* decoration */
.banners a:hover,
.banners a:hover img{
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}
em{
  color: #e84545;
  font-weight: bold;
}
strong{
  color: #303130;
  font-size: 108%;
  font-weight: bold;
}
.nav{
  text-align: right;
}
.nav a{
  padding: 0 0 0 15px;
  background: url("../img/nav-arrow.gif") left center no-repeat;
}

.weak{
  font-size: 85%;
  _font-size: small;
  color: #666766;
}

div#content blockquote{
  background-color: #F4F5F5;
  border: 1px solid #D2D2D2;
  color: #677880;
  margin: 1em 0 1.5em;
  padding: 0.5em 1em;
}

.box{
  margin: 15px 0 !important;
  padding: 10px;
  border: 1px solid #95baf1;
  background: #eaf1fc;
  color: #004992;
}



/*  Layout
--------------------------------------*/
/* body */
body{
  background: #fff;
  text-align: center;
  color: #333;
  font-size: 100%;
  *font-size:medium;
  *font:small; 
  word-wrap: break-word;
}

/* wrapper */
#wrapper{
  margin: 0;
  /*background: url("../img/vd_bg-wrapper.gif") center 0 repeat;*/
 /* background: url("../img/vd_bg-wrapper_choco.gif") center 0 repeat;*/
  background: url("../img/vd_bg-wrapper_choco_01.gif") center 0 repeat;
  padding: 0;
  width: 100%;
  font-size: 82%;
  text-align: left;
/*  overflow: hidden;
  min-width: 980px;
  text-align: left;*/
}
















/* header */
#header{
  margin: 0;
  padding: 0;
  width: 100%;
}
#header p.news{
  position: absolute;
  margin: 0;
  background: url("../img/vd_nav-hd-news-01.png") 0 0 no-repeat;
  padding: 0;
  width: 350px;
  height: 300px;
}
#header div.inner{
  margin: 0 auto !important;
  padding: 10px 0 0 0;
  width: 904px;
  height: 90px;
}
#header ul#hmenu{
  margin: 0 0 0 auto !important;
  width: 631px;
  height: 75px;
}
#header ul#hmenu li{
  float: left;
  display: inline;
  margin: 12px 6px 0 0;
  /*width: 142px;*/
  height: 52px;
}

#header ul#hmenu li.story{
  width: 109px;
}
#header ul#hmenu li.staff{
/*  margin: 2px 6px 0 0;
  height: 62px !important;*/
  width: 104px;
}
#header ul#hmenu li.cast{
  width: 103px;
}
#header ul#hmenu li.character{
/*  margin: 2px 6px 0 0;
  height: 62px !important;*/
  width: 136px;
}
#header ul#hmenu li.pv{
  margin: 2px 6px 0 0;
  height: 62px !important;
  width: 77px;
}
#header ul#hmenu li.tw{
  margin: 0;
  width: 72px;
  height: 75px !important;
}
#header ul#hmenu li.story a{
  background: url("../img/vd_nav-hmenu-story.png") 0 0 no-repeat;
}
#header ul#hmenu li.staff a{
  background: url("../img/vd_nav-hmenu-staff.png") 0 0 no-repeat;
 /* background: url("../img/nav-hmenu-staff_new.png") 0 0 no-repeat;*/
}
#header ul#hmenu li.cast a{
  background: url("../img/vd_nav-hmenu-cast.png") 0 0 no-repeat;
}
#header ul#hmenu li.character a{
  background: url("../img/vd_nav-hmenu-character.png") 0 0 no-repeat;
  /*background: url("../img/nav-hmenu-character_new.png") 0 0 no-repeat;*/
}
#header ul#hmenu li.pv a{
  /*background: url("../img/vd_nav-hmenu-pv.png") 0 0 no-repeat;*/
  background: url("../img/vd_nav-hmenu-pv_new.png") 0 0 no-repeat;
}
#header ul#hmenu li.tw a{
  background: url("../img/vd_nav-hmenu-tw.png") 0 0 no-repeat;
}
#header ul#hmenu li a:hover{
  background-position: 0 -52px;
}
/*#header ul#hmenu li.staff a:hover,
#header ul#hmenu li.character a:hover*/
#header ul#hmenu li.pv a:hover{
  background-position: 0 -62px;
}
#header ul#hmenu li.tw a:hover{
  background-position: 0 -75px;
}


#cboxOverlay {
    background: url("../img/vd_overlay.png") 0 0 repeat !important;
}
div#cboxWrapper .cboxPhoto{
  cursor: pointer;
}

div#colorbox{
  border:none !important;
  outline:none !important;
}



/* main */
#main{
  margin: 0 auto;
  padding: 0;
  width: 100%;
}



/* content */
#content{
  margin: 0 auto;
  padding: 0;
  width: 840px;
}



/* aside */
/*#aside{
  float: right;
  display: inline;
  margin: 0 20px 0 0;
  padding: 0;
  width: 230px;
}
*/




/* footer */
#footer{
  overflow: hidden;
  margin: 50px 0 0 0;
  padding: 0;
  font-size: 85%;
  height: 40px;
}
#footer div.inner p.copy{
  margin: 0 auto;
  background: url("../img/nav-copy.png") 0 0 no-repeat;
  background: url("../img/vd_nav-copy.png") 0 0 no-repeat;
  padding: 0;
  width: 300px;
  height: 20px;
}


/*
body#home #footer{
  margin: 0 0 0 0 !important;
  background: url("../img/bg-ft.gif") 0 312px repeat-x;
}
#footer div.inner{
  margin: 0 auto !important;
  width: 960px;
  height: 119px;
}
#footer div.inner p.copy{
  margin: 0 0 20px 0;
  text-align: left;
  color: #666766;
}
*/



/*  root
--------------------------------------*/
/* home */
body#home #content p#main-pic{
  background: url("../img/p-main.png") 0 0 no-repeat;
  width: 840px;
  height: 1103px;
}


body#home #content div#lv02-01{
  margin: 40px 0 0 0;
}
body#home #content div#lv02-01 h2{
  background: url("../img/h2-home-01.png") 0 0 no-repeat;
  height: 60px;
}
body#home #content div#lv02-01 p{
  background: url("../img/nav-home-story.png") 0 0 no-repeat;
  height: 388px;
}
body#home #content div#lv02-02{
  margin: 0;
}
body#home #content div#lv02-02 h2{
  background: url("../img/h2-home-02.png") 0 0 no-repeat;
}
body#home #content div#lv02-02 dl,
body#home #content div#lv02-03 dl{
  margin: 0;
  padding: 0;
}
body#home #content div#lv02-02 dl{
  background: url("../img/nav-home-staff.png") 0 0 no-repeat;
  height: 472px;
}
body#home #content div#lv02-03{
  margin: 30px 0 0 0;
}
body#home #content div#lv02-03 h2{
  background: url("../img/h2-home-03.png") 0 0 no-repeat;
}
body#home #content div#lv02-03 dl{
  background: url("../img/nav-home-cast.png") 0 0 no-repeat;
  height: 380px;
}
body#home #content div#lv02-04{
  margin: 30px 0 0 0;
}
body#home #content div#lv02-04 h2{
  background: url("../img/h2-home-04.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul{
  margin: 0;
  background: url("../img/bg-home-character.png") 0 0 no-repeat;
  padding: 0;
  width: 840px;
  height: 802px;
}
body#home #content div#lv02-04 ul li{
  float: left;
  display: inline;
  margin: 0;
  padding: 0;
  width: 174px;
  height: 260px;
}

body#home #content div#lv02-04 ul li.chara-nanami,
body#home #content div#lv02-04 ul li.chara-megumu,
body#home #content div#lv02-04 ul li.chara-serika{
  width: 281px;
}
body#home #content div#lv02-04 ul li.chara-souta,
body#home #content div#lv02-04 ul li.chara-kikuno,
body#home #content div#lv02-04 ul li.chara-ruri{
  margin: 0 0 0 109px;
}

body#home #content div#lv02-04 ul li.chara-souta a{
  background: url("../img/nav-home-chara-souta.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-souta a:hover{
  background: url("../img/nav-home-chara-souta_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-nanami a{
  background: url("../img/nav-home-chara-nanami.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-nanami a:hover{
  background: url("../img/nav-home-chara-nanami_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-akane a{
  background: url("../img/nav-home-chara-akane.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-akane a:hover{
  background: url("../img/nav-home-chara-akane_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-kikuno a{
  background: url("../img/nav-home-chara-kikuno.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-kikuno a:hover{
  background: url("../img/nav-home-chara-kikuno_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-megumu a{
  background: url("../img/nav-home-chara-megumu.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-megumu a:hover{
  background: url("../img/nav-home-chara-megumu_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-rin a{
  background: url("../img/nav-home-chara-rin.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-rin a:hover{
  background: url("../img/nav-home-chara-rin_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-ruri a{
  background: url("../img/nav-home-chara-ruri.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-ruri a:hover{
  background: url("../img/nav-home-chara-ruri_on.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-serika a{
  background: url("../img/nav-home-chara-serika.png") 0 0 no-repeat;
}
body#home #content div#lv02-04 ul li.chara-serika a:hover{
  background: url("../img/nav-home-chara-serika_on.png") 0 0 no-repeat;
}




/**/
body#home #content div#lv02-05{
  margin: 0;
  background: url("../img/bg-home-flag.png") 0 0 no-repeat;
  width: 840px;
  height: 320px;
}
body#home #content div#lv02-05 h2{
  margin: 0;
  width: 840px;
  height: 154px;
}
body#home #content div#lv02-05 ul{
  margin: 0 0 0 40px;
  padding: 0;
  width: 840px;
  height: auto;
}
body#home #content div#lv02-05 ul li{
  float: left;
  display: inline;
  margin: 0 0 0 40px;
  padding: 0;
  width: 320px;
  height: 70px;
}
body#home #content div#lv02-05 ul li.flag-nanami a{
  background: url("../img/nav-home-flag-nanami.png") 0 0 no-repeat;
}
body#home #content div#lv02-05 ul li.flag-akane a{
  background: url("../img/nav-home-flag-akane.png") 0 0 no-repeat;
}
body#home #content div#lv02-05 ul li a:hover{
  background-position: 0 -70px;
}













body#home #content div#mov{
  position: static;
  margin: 90px 0 60px 0;
  text-align: center;
  z-index: -1 !important;
}
body#home #content div#mov h2{
  background: url("../img/h2-home-mov.png") 0 0 no-repeat;
  height: 54px;
}
body#home #content div#mov div.inner div{
  margin: 0 0 20px 0;
}
body#home #content div#twitter{
  margin: 20px 0 30px 0;
  background: url("../img/bg-home-twitter.png") 0 0 no-repeat;
  height: 538px;
}
body#home #content div#twitter div.inner{
  display: block;
  margin: 0;
  padding: 122px 0 0 60px !important;
  width: 720px;
  height: 300px;
}
body#home #content div#twitter div.inner #twitter-widget-0{
  width: 720px !important;
}
body#home #content ul#ban-area{
  margin: 0 auto;
  padding: 0;
  width: 487px;
}
body#home #content ul#ban-area li{
  float: left;
  display: inline;
  margin: 0 0 0 19px;
  padding: 0;
  width: 234px;
  height: 60px;
  text-align: center;
}
body#home #content ul#ban-area li.first{
  margin: 0;
}