/*--------------------------------------------------------------ベース設定
*/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* default 
-----------------------------------*/
body {
  font-size: 83.3%;
}

/* Except IE 
-----------------------------------*/

html>body {
  font-size: 10pt;
}
html {
  overflow-y: scroll;
}
body {
  color: #444;
  line-height: 1.3em;
  background: url('../images/body_bg.gif');
  font-family: "MS UI Gothic", sans-serif;
}
h1,h2 {
  display: none;
}
a {
  color: #4480cf;
  text-decoration: none;
}
a:hover {
  color: #f06e8e;
}
img {
  border: none;
  vertical-align: bottom;
}

/*--------------------------------------------------------------コンテナ
*/

#Container {
  background: url('../images/container_bg.gif') repeat-y;
  width: 736px;
  margin: 0 auto;
}

/*--------------------------------------------------------------ヘッダー
*/

#Header {
  background: url('../images/header_bg.gif') no-repeat;
  width: 736px;
  height: 32px;
  margin: 0 auto;
}

/*--------------------------------------------------------------アンカー
*/

#Container .top {
  color: #6688df;
  border-bottom: 1px solid #ddd;
  display: block;
  width: 592px;
  margin: 0 auto 20px;
  text-align: right;
}

#Container .top:hover {
  color: #ff7788;
}

/*--------------------------------------------------------------メイン
*/

#Main {
  position: relative;
  background: url('../images/otbk_sakura_image.jpg');
  width: 688px;
  height: 660px;
  margin: 0 auto 12px;
  overflow: hidden;
}

#Main p,#Main ul {
  display: none;
}
#Main .banner01 {
  position: absolute;
  left: 416px;
  top: 592px;
  border: 1px solid #444;
  width: 200px;
}
#Main .banner02 {
  position: absolute;
  left: 416px;
  top: 504px;
  border: 1px solid #444;
  width: 200px;
}

/*--------------------------------------------------------------プロローグ
*/

#Prologue {
  background: url('../images/prologue_bg.jpg') no-repeat right bottom;
  width: 608px;
  margin: 0 auto 12px;
}

#Prologue h3 {
  background: url('../images/h3_prologue.gif') no-repeat;
  width: 592px;
  height: 32px;
  margin: 0 8px 12px;
  text-indent: -1000em;
  overflow: hidden;
}

#Prologue p {
  margin: 16px;
}

/*--------------------------------------------------------------キャラ紹介
*/

#Character {
  background: url('../images/character_bg.jpg') no-repeat right bottom;
  width: 608px;
  margin: 0 auto 12px;
  overflow: auto;
}

#Character h3 {
  background: url('../images/h3_character.gif') no-repeat;
  width: 592px;
  height: 32px;
  margin: 0 8px 12px;
  text-indent: -1000em;
  overflow: hidden;
}

#Character div {
  clear: both;
  margin-bottom: 8px;
  zoom: 100%;
}

#Character div:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#Character h4 {
  display: inline;
  width: 480px;
  height: 24px;
  margin: 8px;
  float: right;
  text-indent: -1000em;
  overflow: hidden;
}

#kaoruko {background: url('../images/h4_kaoruko.gif') no-repeat;}
#kana {background: url('../images/h4_kana.gif') no-repeat;}
#hatsune {background: url('../images/h4_hatsune.gif') no-repeat;}
#yukari {background: url('../images/h4_yukari.gif') no-repeat;}

#Character img {
  float: left;
}

#Character p {
  display: inline;
  width: 480px;
  margin: 8px;
  float: right;
}

/*--------------------------------------------------------------コピーライト
*/

#Copyright {
  background: url('../images/copyright.jpg') no-repeat;
  width: 640px;
  height: 96px;
  margin: 0 auto;
  padding: 0 0 8px;
  text-indent: -1000em;
  overflow: hidden;
}

/*--------------------------------------------------------------フッター
*/

#Footer {
  background: url('../images/footer_bg.gif') no-repeat;
  width: 736px;
  height: 48px;
  margin: 0 auto;
  overflow: hidden;
}

/*--------------------------------------------------------------リンク
*/

#Link {
  width: 608px;
  margin: 0 auto;
}

#Link ul {
  margin-left: 8px;
}

#Link li {
  background: url('../images/link_marker.gif') no-repeat 0 50%;
  padding: 3px 0 3px 20px;
}