/*-------------------------------------------------------------- Character
*/

.Chara div.Main-Box-Header {
  background: url('./images/character_header.jpg') no-repeat left top;
}

.Chara h2 {
  height: 0;
  text-indent: -1000em;
  overflow: hidden;
}

/*-------------------------------------------------------------- Chara Menu
*/

.Chara-Menu {
  background: url('./images/chara_menu_bg632.png') no-repeat;
  width: 632px;
  height: 72px;
  margin: 0 auto;
  overflow: hidden;
}

.Chara-Menu ul {
  margin: 8px 0 0 8px;
}

.Chara-Menu li {
  list-style: none;
  float: left;
}

#Container-top .Chara-Menu li a {
  display: block;
  width: 56px;
  height: 56px;
  text-indent: -1000em;
  overflow: hidden;
}

#Container-top .Chara-Menu li a:hover {
  background-position: bottom;
}

#CM01 a {background: url('./images/chara_menu01.jpg') no-repeat;}
#CM02 a {background: url('./images/chara_menu02.jpg') no-repeat;}
#CM03 a {background: url('./images/chara_menu03.jpg') no-repeat;}
#CM04 a {background: url('./images/chara_menu04.jpg') no-repeat;}
#CM05 a {background: url('./images/chara_menu05.jpg') no-repeat;}
#CM06 a {background: url('./images/chara_menu06.jpg') no-repeat;}
#CM07 a {background: url('./images/chara_menu07.jpg') no-repeat;}
#CM08 a {background: url('./images/chara_menu08.jpg') no-repeat;}
#CM09 a {background: url('./images/chara_menu09.jpg') no-repeat;}
#CM10 a {background: url('./images/chara_menu10.jpg') no-repeat;}
#CM11 a {background: url('./images/chara_menu11.jpg') no-repeat;}


.Chara-Menu02 {
  background: url('./images/chara_correlation_menu_bg.png') no-repeat;
  width: 224px;
  height: 48px;
  margin: 0 auto;
  overflow: hidden;
}

.Chara-Menu02 ul {
  margin: 3px 0 0 36px;
}

.Chara-Menu02 li {
  list-style: none;
  float: left;
}

.Chara-Menu02 a {
  display: block;
  width: 152px;
  height: 34px;
  margin-right: 1px;
  text-indent: -1000em;
  overflow: hidden;
}

.CM21 {background: url('./images/chara_correlation_menu01.png') no-repeat;}
.CM21a {background: url('./images/chara_correlation_menu01.png') no-repeat left bottom;}

/*-------------------------------------------------------------- Correlation
*/

.Correlation-Box {
  width: 696px;
  margin: 12px auto;
  overflow: hidden;
}

.Correlation-Header {
  background: url('./images/chara_correlation_header.jpg') no-repeat;
  width: 696px;
  height: 72px;
  overflow: hidden;
}

.Correlation-Header h3 {
  display: none;
}

.Correlation-Bottom {
  zoom: 100%;
  background: url('./images/chara_correlation_bottom.jpg') no-repeat left bottom;
  width: 696px;
  height: 32px;
  overflow: hidden;
}

/*-------------------------------------------------------------- Correlation Main
*/

.Correlation-Main {
  position: relative;
  background: url('./images/chara_correlation_main.jpg') no-repeat;
  width: 696px;
  height: 632px;
  overflow: hidden;
}

.Correlation-Main ul {
  height: 0;
  line-height: 0;
}

.Correlation-Main li {
  list-style: none;
}

.Correlation-Main a {
  position: absolute;
  display: block;
  text-indent: -1000em;
  overflow: hidden;
}

.Correlation-Main .CL_a a {
  width: 112px;
  height: 136px;
}
.Correlation-Main .CL_b a {
  width: 88px;
  height: 112px;
}

#Chara01 a {top: 240px;left: 340px;}
#Chara02 a {top: 48px;left: 292px;}
#Chara03 a {top: 48px;left: 516px;}
#Chara04 a {top: 48px;left: 68px;}
#Chara05 a {top: 440px;left: 540px;}
#Chara06 a {top: 472px;left: 356px;}
#Chara07 a {top: 252px;left: 528px;}
#Chara08 a {top: 472px;left: 68px;}
#Chara09 a {top: 252px;left: 80px;}
#Chara10 a {top: 424px;left: 244px;}

#Chara01 a:hover {background: url('./images/chara01.jpg') no-repeat;}
#Chara02 a:hover {background: url('./images/chara02.jpg') no-repeat;}
#Chara03 a:hover {background: url('./images/chara03.jpg') no-repeat;}
#Chara04 a:hover {background: url('./images/chara04.jpg') no-repeat;}
#Chara05 a:hover {background: url('./images/chara05.jpg') no-repeat;}
#Chara06 a:hover {background: url('./images/chara06.jpg') no-repeat;}
#Chara07 a:hover {background: url('./images/chara07.jpg') no-repeat;}
#Chara08 a:hover {background: url('./images/chara08.jpg') no-repeat;}
#Chara09 a:hover {background: url('./images/chara09.jpg') no-repeat;}
#Chara10 a:hover {background: url('./images/chara10.jpg') no-repeat;}

/*-------------------------------------------------------------- Character Main
*/

.Chara-Main {
  position: relative;
  width: 696px;
  height: 672px;
  margin: 8px auto;
}

.Chara-Sub {
  position: relative;
  width: 696px;
  height: 384px;
  margin: 8px auto;
}

.Chara-Main h3,
.Chara-Main ul,
.Chara-Sub h3,
.Chara-Sub ul {
  display: none;
}

.Chara-Main p {
  position: absolute;
  top: 446px;
  left: 40px;
  font-size: 81.8%;
  line-height: 1.6em;
  text-align: left;
  height: 172px;
  overflow: auto;
}

.Chara-Sub p {
  position: absolute;
  top: 160px;
  left: 48px;
  font-size: 81.8%;
  line-height: 1.6em;
  text-align: left;
  height: 168px;
  overflow: auto;
}

#Character01 {background: url('./images/character01.jpg') no-repeat;}
#Character02 {background: url('./images/character02.jpg') no-repeat;}
#Character03 {background: url('./images/character03.jpg') no-repeat;}
#Character04 {background: url('./images/character04.jpg') no-repeat;}
#Character05 {background: url('./images/character05.jpg') no-repeat;}

#Character01 p {width: 344px;}
#Character02 p {width: 380px;}
#Character03 p {width: 380px;}
#Character04 p {width: 344px;}
#Character05 p {width: 352px;}

#C06 {background: url('./images/character06.jpg') no-repeat;}
#C07 {background: url('./images/character07.jpg') no-repeat;}
#C08 {background: url('./images/character08.jpg') no-repeat;}
#C09 {background: url('./images/character09.jpg') no-repeat;}
#C10 {background: url('./images/character10.jpg') no-repeat;}
#C11 {background: url('./images/character11.jpg') no-repeat;}

#C06 p {width: 352px;}
#C07 p {width: 352px;}
#C08 p {width: 352px;}
#C09 p {width: 352px;}
#C10 p {width: 352px;}
#C11 p {width: 352px;}