/*======================================================================*
 *  h p img                                                             *
 *======================================================================*/

h3#sp-tool { background: url(/sp-tool/img/h3-sp-tool.gif) no-repeat; }
h3#character { background: url(/sp-tool/img/character/h3-character.gif) no-repeat; }
h3#chara-flow { background: url(/sp-tool/img/chara-flow/h3-chara-flow.gif) no-repeat; }
h3#chara-gallery { background: url(/sp-tool/img/chara-gallery/h3-chara-gallery.gif) no-repeat; }

/*======================================================================*
 *  btn                                                                 *
 *======================================================================*/

a#btn-chara-flow {
	width: 176px;
	height: 64px;
	background: url(/sp-tool/img/character/btn-flow.gif) no-repeat top;
	display: block;
	float: left;
}
a#btn-chara-flow:hover { background-position: left bottom; }
a#btn-chara-flow span { display: none; }

a#btn-chara-gallery {
	width: 176px;
	height: 64px;
	margin-left: 10px;
	background: url(/sp-tool/img/character/btn-gallery.gif) no-repeat top;
	display: block;
	float: left;
}
a#btn-chara-gallery:hover { background-position: left bottom; }
a#btn-chara-gallery span { display: none; }

/*======================================================================*
 *  table                                                               *
 *======================================================================*/

table.chara-price {
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}

table.chara-price th, table.chara-price td {
  padding: 10px 15px 10px 15px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}

table.chara-price th {
  width: 55%;
  background: #e8e8e8;
  text-align: left;
}

table.chara-price2 {
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}

table.chara-price2 th, table.chara-price2 td {
  padding: 10px 15px 10px 15px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  text-align: center;
}

table.chara-price2 th {
  width: 33%;
  background: #e8e8e8;
}


/*======================================================================*
 *  chara-gallery                                                       *
 *======================================================================*/

ul.chara-gallery { padding-left: 17px; }
ul.chara-gallery li {
	width: 130px;
	height: 130px;
	margin: 0 5px 10px 5px;
	padding: 15px 15px 5px 15px;
	background: #ededed;
	line-height: 120%;
	float: left;
}