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

* {
  margin: 0;
  padding: 0;
}

/* default 
-----------------------------------*/

body {
  font-size: 91.6%;/* 11pt */
/*  font-size: 83.3%;/* 10pt */
}

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

html>body {
  font-size: 11pt;
}

html {
  overflow-y: scroll;
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

body {
  color: #555555;
  line-height: 1.5em;
  background: #ffbb00 url('images/body_bg.gif') repeat-x 50% 0% ;
  font-family: "meiryo", "MS UI Gothic", sans-serif;
  text-align: center;
  padding: 0 0 24px 0;
}

/*-------------------------------------------------------------- 基本スタイル
*/

a {
  color: #107AC0;
}

a:hover {
  color: #f44;
}

/*-------------------------------------------------------------- Container & Wrapper
*/

#Container {
  background: url('images/container_bg_main.gif') repeat-y;
  width: 656px;
  margin: 40px auto 4px;
  text-align: left;
  position: relative;
}

#Container-style01 {
  background: url('images/header.jpg') no-repeat 0 0;
  padding: 200px 0 0 0;
}

/*-------------------------------------------------------------- Header
*/

#Header {
  background: url('images/toppara_logo.gif') no-repeat 0 0;
  width: 333px;
  height: 234px;
  position: absolute;
  top: -37px;
  left: 334px;
  overflow: hidden;
}

#Header h1 {
  text-indent: -1000em;
}

#Header h1 a {
  display: block;
  width: 333px;
  height: 234px;
}

#Header p {
  display: none;
}

/*-------------------------------------------------------------- Footer
*/

#Footer {
  background: url('images/footer.jpg') no-repeat;
  zoom: 100%;
  clear: both;
  width: 656px;
  height: 64px;
  overflow: hidden;
}

#Footer p.copyright {
  color: #767676;
  font-family: impact;
  text-align: center;
  margin: 24px 0 0;
}

#Border-bottom {
  background: #fff;
  height: 4px;
  overflow: hidden;
}

/*-------------------------------------------------------------- Navigation
*/

#Navigation-frame {
  width: 528px;
  height: 28px;
  margin: 0 0 0 64px;
  overflow: hidden;
}

#Navigation-frame iframe {
  width: 528px;
  height: 28px;
}

/*-------------------------------------------------------------- H2
*/

h2#Top-page {display: none;}

h2 {
  width: 544px;
  height: 40px;
  text-indent: -1000em;
  overflow: hidden;
}

h2#Game {background: url('images/h2_game.gif') no-repeat;}
h2#Download {background: url('images/h2_download.gif') no-repeat;}
h2#Omake {background: url('images/h2_omake.gif') no-repeat;}
h2#Character {background: url('images/h2_character.gif') no-repeat;}
h2#Graphic {background: url('images/h2_graphic.gif') no-repeat;}

/*-------------------------------------------------------------- Contents
*/

#Contents {
  background: url('images/contents_bg_main.gif') repeat-y;
  width: 578px;
  margin: 19px 39px 0;
}

#Contents-top {
  background: url('images/contents_bg_top.gif') no-repeat left top;
  width: 100%;
}

#Contents-bottom {
  background: url('images/contents_bg_bottom.gif') no-repeat left bottom;
  width: 100%;
  padding: 16px 0 104px;
}

/*-------------------------------------------------------------- Contents-header
*/

#Contents-header {
  width: 544px;
  height: 160px;
  margin: 0 auto 16px;
  overflow: hidden;
}

.ch-game {background: url('images/contents_header_game.jpg') no-repeat left bottom;}
.ch-download {background: url('images/contents_header_download.jpg') no-repeat left bottom;}
.ch-omake {background: url('images/contents_header_omake.jpg') no-repeat left bottom;}
.ch-character {background: url('images/contents_header_character.jpg') no-repeat left bottom;}
.ch-graphic {background: url('images/contents_header_graphic.jpg') no-repeat left bottom;}

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

#Charamap {
  width: 544px;
  margin: 0 auto 0;
  overflow: hidden;
}

#Charamap h3 {
  background: url('images/charamap_header.gif') no-repeat;
  width: 544px;
  height: 48px;
  text-indent: -1000em;
  overflow: hidden;
}

#Charamap-footer {
  background: url('images/charamap_footer.gif') no-repeat;
  width: 544px;
  height: 16px;
  overflow: hidden;
}

#Charamap-main {
  position: relative;
  background: url('images/charamap.jpg') no-repeat;
  width: 544px;
  height: 416px;
}

#Charamap-main ul {
  height: 0;
}

#Charamap-main li {
  height: 0;
  overflow: hidden;
}

#Charamap-main a {
  display: block;
  position: absolute;
  text-indent: -1000em;
  overflow: hidden;
}

#CMP01 a {top: 128px;left: 208px;width:  72px;height: 112px;}
#CMP02 a {top: 168px;left: 308px;width:  72px;height: 112px;}
#CMP03 a {top: 116px;left: 444px;width:  72px;height: 112px;}
#CMP04 a {top: 264px;left: 440px;width:  72px;height: 112px;}
#CMP05 a {top: 284px;left:  24px;width:  72px;height: 112px;}
#CMP06 a {top:  24px;left:  24px;width:  80px;height: 120px;}
#CMP07 a {top:  22px;left: 338px;width:  72px;height: 112px;}
#CMP08 a {top: 164px;left:  94px;width:  72px;height: 112px;}
#CMP09 a {top: 328px;left: 124px;width:  72px;height:  72px;}
#CMP10 a {top: 328px;left: 200px;width:  72px;height:  72px;}
#CMP11 a {top: 328px;left: 276px;width:  72px;height:  72px;}
#CMP12 a {top: 328px;left: 352px;width:  72px;height:  72px;}
#CMP13 a {top:  28px;left: 176px;width:  72px;height:  72px;}

#CMP01 a:hover {top: 116px;left: 188px;width: 108px;height: 148px;background: url('images/chara_on_01.jpg') no-repeat;}
#CMP02 a:hover {top: 140px;left: 284px;width: 112px;height: 164px;background: url('images/chara_on_02.jpg') no-repeat;}
#CMP03 a:hover {top: 100px;left: 420px;width: 108px;height: 148px;background: url('images/chara_on_03.jpg') no-repeat;}
#CMP04 a:hover {top: 256px;left: 428px;width:  92px;height: 136px;background: url('images/chara_on_04.jpg') no-repeat;}
#CMP05 a:hover {top: 268px;left:   8px;width: 100px;height: 148px;background: url('images/chara_on_05.jpg') no-repeat;}
#CMP06 a:hover {top:   4px;left:   4px;width: 132px;height: 164px;background: url('images/chara_on_06.jpg') no-repeat;}
#CMP07 a:hover {top:   4px;left: 320px;width: 104px;height: 152px;background: url('images/chara_on_07.jpg') no-repeat;}
#CMP08 a:hover {top: 148px;left:  84px;width:  88px;height: 148px;background: url('images/chara_on_08.jpg') no-repeat;}
#CMP09 a:hover {top: 314px;left: 110px;width: 100px;height: 100px;background: url('images/chara_on_09.jpg') no-repeat;}
#CMP10 a:hover {top: 314px;left: 186px;width: 100px;height: 100px;background: url('images/chara_on_10.jpg') no-repeat;}
#CMP11 a:hover {top: 314px;left: 262px;width: 100px;height: 100px;background: url('images/chara_on_11.jpg') no-repeat;}
#CMP12 a:hover {top: 314px;left: 338px;width: 100px;height: 100px;background: url('images/chara_on_12.jpg') no-repeat;}
#CMP13 a:hover {top:  14px;left: 162px;width: 100px;height: 100px;background: url('images/chara_on_13.jpg') no-repeat;}

/*-------------------------------------------------------------- キャラ紹介（個別）
*/

.Character {
  width: 592px;
  height: 376px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
}

.Character h1,
.Character h2 {
  display: none;
}

#Article {
  font-size: 81.8%;
  width: 304px;
  height: 200px;
  margin: 112px 0 0 272px;
  overflow: auto;
}

#Article ul {
  margin: 8px 0 0 0;
}

#Article li {
  color: #465e9c;
  list-style: none;
  line-height: 1.5em;
}

#Mikage-I {background: url('images/chara_img_mikage.jpg') no-repeat;}
#Sachiko-I {background: url('images/chara_img_sachiko.jpg') no-repeat;}
#Touka-I {background: url('images/chara_img_touka.jpg') no-repeat;}
#Sakuya-I {background: url('images/chara_img_sakuya.jpg') no-repeat;}
#Seori-I {background: url('images/chara_img_seori.jpg') no-repeat;}
#Isora-I {background: url('images/chara_img_isora.jpg') no-repeat;}
#Chizumi-I {background: url('images/chara_img_chizumi.jpg') no-repeat;}
#Honami-I {background: url('images/chara_img_honami.jpg') no-repeat;}
#Suzu-I {background: url('images/chara_img_suzu.jpg') no-repeat;}
#Midori-I {background: url('images/chara_img_midori.jpg') no-repeat;}
#Saburou-I {background: url('images/chara_img_saburou.jpg') no-repeat;}
#Kizen-I {background: url('images/chara_img_kizen.jpg') no-repeat;}
#Keizi-I {background: url('images/chara_img_keizi.jpg') no-repeat;}

/*-------------------------------------------------------------- グラフィック
*/

.graphic {
  background: #fff;
  width: 544px;
  margin: 0 auto;
  overflow: hidden;
}

.graphic-m {
  width: 528px;
  margin: 0 auto;
  overflow: hidden;
}

.graphic-h {
  background: url('images/graphic_header.gif') no-repeat;
  width: 544px;
  height: 48px;
  overflow: hidden;
}

.graphic-f {
  background: url('images/graphic_footer.gif') no-repeat;
  width: 544px;
  height: 24px;
  overflow: hidden;
}

.graphic li {
  display: inline;
  margin: 4px;
  padding: 0;
  float: left;
}

.graphic a {
  margin: 4px;
  float: left;
}

.graphic img {
  border: none;
  vertical-align: bottom;
}

.graphic .border {
  clear: both;
  background: url('images/border_01.gif') repeat-x 0 4px;
  width: 512px;
  height: 8px;
  margin: 0 auto 6px;
  overflow: hidden;
}

/*-------------------------------------------------------------- highslide（ナビボタン）
*/

#HS-Navi {
  display: block;
  overflow: hidden;
}

#HS-Image {
  overflow: hidden;
}

#HS-Navi .previous {float: left;}
#HS-Navi .next {float: left;}
#HS-Navi .close {float: right;}

#HS-Navi .previous a {background: url('images/hs_navi_previous.gif') no-repeat;  float: left;}
#HS-Navi .next a {background: url('images/hs_navi_next.gif') no-repeat;  float: left;}
#HS-Navi .close a {background: url('images/hs_navi_close.gif') no-repeat;  float: right;}

#HS-Navi .previous a,
#HS-Navi .next a,
#HS-Navi .close a {
  display: block;
  width: 72px;
  height: 24px;
  text-indent: -1000em;
  overflow: hidden;
}

#HS-Navi .previous a:hover,
#HS-Navi .next a:hover,
#HS-Navi .close a:hover {
  background-position: bottom;
}

.chara-navi {
  display: block;
  background: url('images/hs_navi_bg.gif');
  width: 592px;
  height: 24px;
  margin: 8px 0 0 0;
}

.chara-navi li {
  list-style: none;
}

.graphic-navi {
  height: 32px;
}

.graphic-navi ul {
  background: url('images/hs_navi_bg.gif');
  height: 24px;
  margin: 8px 0 0 0;
}

.graphic-navi li {
  list-style: none;
  width: 72px;
  height: 24px;
}

.movie-navi {
  display: block;
  background: url('images/hs_navi_bg.gif');
  width: 480px;
  height: 24px;
  margin: 8px 0 0 0;
}

.movie-navi li {
  list-style: none;
}

/*-------------------------------------------------------------- 個別
*/

#Top-image {
  margin: 0 12px;
  vertical-align: bottom;
}

#Details {
  display: none;
  visibility: hidden;
}

#Staff {
  position: absolute;
  top: 672px;
  left: 12px;
  background: url('images/staff.jpg') no-repeat;
  width: 632px;
  height: 32px;
  overflow: hidden;
}

#Staff h3,#Staff ul {
  display: none;
}

#Requirements {
  border-top: 1px solid #b5b5b5;
  border-bottom: 1px solid #b5b5b5;
  width: 576px;
  margin: 4px auto;
  padding: 4px 0;
}

#Requirements h3 {
  background: #edf2fa;
  font-size: 90.9%;
  font-weight: normal;
  text-align: center;
}

#Requirements p {
  margin: 8px 0;
  font-size: 81.8%;
}

#Requirements ul {
  margin: 8px 0;
}

#Requirements li {
  display: inline;
  margin: 0 4px 0 0;
  font-size: 81.8%;
}

#Information {
  background: url('images/info_underbar.gif') no-repeat left bottom;
  width: 592px;
  height: 164px;
  margin: 48px auto 20px;
}

#Information h3 {
  display: none;
}

a#Yaruki-ch {
  display: block;
  background: url('images/yaruki_channel_link.jpg') no-repeat left top;
  width: 192px;
  height: 144px;
  text-indent: -1000em;
  overflow: hidden;
  float: left;
}

a:hover#Yaruki-ch {
  background-position: left bottom;
}

#Whatsnew {
  background: url('images/whats_new_body.jpg') no-repeat;
  width: 400px;
  height: 144px;
  overflow: hidden;
  float: left;
  margin-left: 96px;
}

#Whatsnew iframe {
  border: none;
  width: 368px;
  height: 88px;
  margin: 36px 0 0 16px;
}