@charset "UTF-8";

/* ========================================
	common
======================================== */
body {
	background: url(../common/bg_card.jpg) repeat center top;
}

#gnavi ul {
	background: url(../common/bg_gnavi06.png) no-repeat 333px 53px;
}

#deco-corner {
	position: absolute;
	top: 15px;
	left: 626px;
	z-index: 30;
}
.js-on #deco-corner div {
	display: none;
}

.section {
	position: relative;
}

.ico-new {
	position: absolute;
	top: 18px;
	left: -47px;
}

.pic {
	float: left;
}

/* ========================================
	.creature
======================================== */
.creature {
	padding-bottom: 48px;
}
.creature .card-area {
	position: relative;
	height: 243px;
}
#creature-card {
	position: absolute;
	top: 0;
	left: 0;
}
.js-on #creature-card div {
	display: none;
}

.creature .new {
	margin: 0 0 19px;
}
.creature .new li {
	float: left;
}
.creature .power-list {
	float: left;
	width: 415px;
}

/* ========================================
	.spell
======================================== */
.spell .card-area {
	position: relative;
	float: left;
	width: 360px;
	height: 188px;
}
#spell-card {
	position: absolute;
	top: 0;
	left: -18px;
}
.spell-text {
	float: right;
}
.js-on #spell-card div {
	display: none;
}

/* ========================================
	.item
======================================== */
.item {
	position: relative;
}
.item .card-area {
	position: relative;
	float: right;
	width: 360px;
	height: 188px;
}
#item-card {
	position: absolute;
	top: 0;
	left: 0;
}
.item-text {
	float: left;
}
.js-on #item-card div {
	display: none;
}

/* ========================================
	.evo
======================================== */

.evo {
	position: relative;
}

/* ========================================
	.rule
======================================== */

.ttl_gameplay {
	margin-top: 40px;
}

.cards-abilities {
	position: relative;
	width: 786px;
	margin: 10px auto 40px;
}
.slide-wrap {
	height: 507px;
	background: url(../about/images/bg_rule.png) no-repeat center top;
	overflow: hidden;
}
.slide-wrap .disabled img {
	display: none;
}
.slide-wrap .prev a {
	position: absolute;
	top: 205px;
	left: -22px;
	display: block;
	width: 68px;
	height: 68px;
	background: url(../about/images/bg_arrow_prev.png) no-repeat left top;
	z-index: 100;
	cursor: pointer;
}
.slide-wrap .next a {
	position: absolute;
	top: 205px;
	right: -22px;
	display: block;
	width: 68px;
	height: 68px;
	background: url(../about/images/bg_arrow_next.png) no-repeat left top;
	z-index: 100;
	cursor: pointer;
}
.slide-wrap a.disabled {
	background: none;
}
.slide-wrap .prev a:hover img,
.slide-wrap .next a:hover img {
	display: none;
}

.bx-controls .bx-pager {
	text-align: center;
	padding-top: 7px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}
.bx-pager a {
	float: left;
	width: 18px;
	height: 18px;
	background: url(../about/images/slide_pointer.png) no-repeat right top;
	margin: 0 4px;
	text-indent: -9999px;
}
.bx-pager a.active,
.bx-pager a:hover {
	background-position: left top;
}