@charset "UTF-8";
/* ==============================
  css-works
=================================
titleWorks
---------------------------------
titleAria
---------------------------------
topics
---------------------------------
number
---------------------------------
character
---------------------------------
item
---------------------------------
itemWrap
---------------------------------
itemTitle
---------------------------------
itemList
---------------------------------
gdsList
---------------------------------
btnAll
============================== */

#content {
	padding-bottom: 25px;
}

/* ------------------------------
  titleWorks
------------------------------ */
#titleWorks {
	width: 960px;
	margin-bottom: 30px;
}

#titleWorks h2 {
	width: 246px;
	height: 110px;
	background: url(../contents/img/works/h2.gif) no-repeat;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	float: left;
}

#titleWorks p {
	width: 158px;
	padding-top: 60px;
	padding-left: 35px;
	text-indent: -9999px;
	float: left;
}
#titleWorks p a {
	width: 158px;
	height: 30px;
	background: url(../contents/img/works/btn_back.gif) no-repeat;
	display: block;
	outline: none;
	text-decoration: none;
}
#titleWorks p a:hover {
	background-position: bottom;
}

/* ------------------------------
  titleAria
------------------------------ */
.titleAria {
	width: 960px;
	text-indent: -9999px;
	font-size: 10px;
}
#character .titleAria {
	margin-bottom: 30px;
}
#item .titleAria {
	margin-bottom: 40px;
}
/* clearfix */
.titleAria:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.titleAria {
    display:inline-block;
    min-height:1%; /* for IE 7 */
}
/* Hides from IE-mac \*/
* html .titleAria {
	height: 1%;
}
.titleAria {
	display: block;
}
/* End hide from IE-mac */

.titleAria h3 {
	float: left;
	width: 919px;
	height: 46px;
	background-repeat: no-repeat;
}
#character .titleAria h3 { background-image: url(../contents/img/works/h3_character.gif); }
#item .titleAria h3 { background-image: url(../contents/img/works/h3_item.gif); }

.titleAria p {
	width: 23px;
	padding-top: 12px;
	float: right;
}
.titleAria p a {
	width: 23px;
	height: 23px;
	background: url(../contents/img/works/pagetop_bg.gif) no-repeat;
	text-decoration: none;
	display: block;
	outline: none;
}
.titleAria p a:hover {
	background-position: 0 -23px;
}

#topics h3 {
	width: 960px;
	height: 46px;
	margin-bottom: 15px;
	background: url(../contents/img/works/h3_topics.gif) no-repeat;
	text-indent: -9999px;
	font-size: 10px;
}

/* ------------------------------
  topics
------------------------------ */
#topics {
	width: 960px;
	margin-bottom: 50px;
}
#topicsAria {
	width: 713px;
	padding-left: 247px;
}

/* ------------------------------
  number
------------------------------ */
#number {
	padding-top: 9px;
}
/* clearfix */
#number:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
#number {
    display:inline-block;
    min-height:1%; /* for IE 7 */
}
/* Hides from IE-mac \*/
* html #number {
	height: 1%;
}
#number {
	display: block;
}
/* End hide from IE-mac */

#number ul {
	height: 29px;
	overflow: hidden;
	float: right;
}
/* clearfix */
#number ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
#number ul {
    display:inline-block;
    min-height:1%; /* for IE 7 */
}
/* Hides from IE-mac \*/
* html #number ul {
	height: 1%;
}
#number ul {
	display: block;
}
/* End hide from IE-mac */

#number li {
	width: 29px;
	height: 29px;
	font-size: 12px;
	padding-left: 5px;
	float: left;
}

#number li a {
	width: 29px;
	height: 29px;
	text-decoration: none;
	display: block;
	outline: none;
	background: url(../contents/img/topics/nav_number.gif) no-repeat;
}

#number li a:hover {
	background-position: 0 -29px;
}
#number li.current a {
	background-position: 0 -58px;
}
#number li.current a:hover {
	background-position: 0 -58px;
}

#number li a span {
	display: block;
	text-align: center;
	color: #FFFFFF;
	padding-top: 7px;
}

/* ------------------------------
  character
------------------------------ */
#character {
	width: 960px;
	margin-bottom: 50px;
}
#character p.btn-relChara {
	width: 263px;
	padding-left: 697px;
	font-size: 10px;
	text-indent: -9999px;
}
#character p.btn-relChara a {
	width: 263px;
	height: 23px;
	background: url(../contents/img/works/btn_rel_chara.gif) no-repeat;
	display: block;
	text-decoration: none;
	outline: none;
}
#character p.btn-relChara a:hover {
	background-position: bottom;
}

/* ------------------------------
  item
------------------------------ */
#item {
	width: 960px;
}
#comics,
#books,
#cd,
#dvd,
#video,
#soft,
#other {
	margin-bottom: 50px;
}

/* ------------------------------
  itemWrap
------------------------------ */
.itemWrap {
	width: 960px;
}
/* clearfix */
.itemWrap:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.itemWrap {
    display:inline-block;
    min-height:1%; /* for IE 7 */
}
/* Hides from IE-mac \*/
* html .itemWrap {
	height: 1%;
}
.itemWrap {
	display: block;
}
/* End hide from IE-mac */

/* ------------------------------
  itemTitle
------------------------------ */
.itemTitle {
	width: 172px;
	padding-left: 25px;
	float: left;
}
.itemTitle h4 {
	width: 172px;
	height: 31px;
	background-repeat: no-repeat;
	text-indent: -9999px;
	margin-bottom: 20px;
}
#comics .itemTitle h4 { background-image: url(../contents/img/works/h4_comics.gif); }
#books .itemTitle h4 { background-image: url(../contents/img/works/h4_books.gif); }
#cd .itemTitle h4 { background-image: url(../contents/img/works/h4_cd.gif); }
#dvd .itemTitle h4 { background-image: url(../contents/img/works/h4_dvd.gif); }
#video .itemTitle h4 { background-image: url(../contents/img/works/h4_video.gif); }
#soft .itemTitle h4 { background-image: url(../contents/img/works/h4_soft.gif); }
#other .itemTitle h4 { background-image: url(../contents/img/works/h4_other.gif); }

.itemTitle li {
	width: 172px;
	padding-right: 10px;
	font-size: 12px;
	line-height: 1.7;
}
.itemTitle li a {
	color: #333333;
	background: url(../contents/img/database/title_nav_bg.gif) no-repeat;
	padding-left: 12px;
	text-decoration: none;
}
.itemTitle li a:visited {
	color: #333333;
}
.itemTitle li.current a {
	background-position: 0 -15px;
}
.itemTitle li a:hover {
	color: #999999;
	background-position: 0 -15px;
}

/* ------------------------------
  itemList
------------------------------ */
.itemList {
	width: 753px;
	float: right;
}

/* ------------------------------
  gdsList
------------------------------ */
ul.gdsList {
}
/* clearfix */
ul.gdsList:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
ul.gdsList {
    display:inline-block;
    min-height:1%; /* for IE 7 */
}
/* Hides from IE-mac \*/
* html ul.gdsList {
	height: 1%;
}
ul.gdsList {
	display: block;
}
/* End hide from IE-mac */

ul.gdsList li {
	width: 105px;
	height: 150px;
	background: url(../contents/img/database/gds_list_bg.gif) no-repeat;
	float: left;
	padding-right: 3px;
	padding-bottom: 15px;
	position: relative;
}
ul.gdsList li.none {
	padding-right: 0;
}

ul.gdsList li .ph {
	width: 105px;
	height: 129px;
	position: absolute;
	top: 0;
	left: 0;
}
ul.gdsList li .ph td {
	width: 105px;
	height: 129px;
}

ul.gdsList li .hover {
	width: 105px;
	height: 129px;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
}
ul.gdsList li .hover a {
	width: 105px;
	height: 129px;
	background: url(../contents/img/database/gds_list_hover.gif) no-repeat;
	text-decoration: none;
	display: block;
	outline: none;
}
ul.gdsList li .hover a:hover {
	background-position: 0 -129px;
}

ul.gdsList li .cap {
	width: 105px;
	height: 11px;
	position: absolute;
	top: 139px;
	left: 0;
	text-align: center;
}

/* ------------------------------
  btnAll
------------------------------ */
.btnAll {
	width: 753px;
	padding-top: 9px;
	background: url(../contents/img/works/line01.gif) no-repeat top right;
}
.btnAll p {
	width: 99px;
	padding-left: 654px;
	text-indent: -9999px;
}
.btnAll p a {
	width: 99px;
	height: 23px;
	background: url(../contents/img/works/btn_all.gif) no-repeat;
	display: block;
	outline: none;
	text-decoration: none;
}
.btnAll p a:hover {
	background-position: bottom;
}