@charset "utf-8";
/* core	================================================	*/

#loading {
	background: #262626;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
}

#loading #bar {
	width: 0;
	position: relative;
	top: 50%;
	left: 0;
	height: 2px;
	background: #01f7c4;
}

#wrapper {
	display: none;
	/* min-width: 1050px; */
    min-width:1120px;
}
header {
	position: absolute;
	left: 50%;
	margin-left: -490px;
}
.mainTop {
	overflow: hidden;
}
.mainTop ul li.chara {
	width: 50px;
	display: inline;
	float: left;
	overflow: hidden;
	position: relative;
}

.mainTop ul li .numberL,
.mainTop ul li .image {
	position: absolute;
}

.mainTop ul li .numberL{
	width:195px;
	height:300px;
	right: 75px;
	top: 50%;
	margin-top: -175px;
}
.mainTop ul li .numberL p{
	width:195px;
	height:300px;
	background-repeat: no-repeat;
	background-position: 0 0;
	position: absolute;
	left: 0;
	top: 0;
}

.mainTop ul li .numberS{
	position: absolute;
	width:65px;
	height:84px;
	left: 12px;
	top: 50%;
	margin-top: 160px;
	z-index:1;
}
.mainTop ul li.current .numberS{
	display: none;
}

.mainTop ul li .image{
	width: 2000px;
	height: 1700px;
	left: 50%;
	top: 0;
}

.mainTop ul li .image p{
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 2000px;
	height: 1700px;
}

.mainTop ul li .image ul{
	width: 2000px;
	height: 1700px;
}

.mainTop ul li .image li{
	width: 10px;
	height: 1700px;
	display: inline;
	float: left;
}

.mainTop ul li .name{
	width: 260px;
	height: 112px;
	position: absolute;
	left: 75px;
	top: 50%;
	margin-top: 130px;
	background-repeat: no-repeat;
}

.mainTop ul li.chara001{
	background-image: url(../img/top/01_kido/bg.png);
}

.mainTop ul li.chara001 .numberL p{
	background-image: url(../img/top/01_kido/number_l.png);
}
.mainTop ul li.chara001 .numberS{
	background-image: url(../img/top/01_kido/number_s.png);
}
.mainTop ul li.chara001 .image{
	margin-left: -750px;
}
.mainTop ul li.chara001 .image p,
.mainTop ul li.chara001 .image li{
	background-image: url(../img/top/01_kido/image.png);
}
.mainTop ul li.chara001 .name{
	background-image: url(../img/top/01_kido/name.png);
}

.mainTop ul li.chara002{
	background-image: url(../img/top/02_seto/bg.png);
}
.mainTop ul li.chara002 .numberL p{
	background-image: url(../img/top/02_seto/number_l.png);
}
.mainTop ul li.chara002 .numberS{
	background-image: url(../img/top/02_seto/number_s.png);
}
.mainTop ul li.chara002 .image{
	margin-left: -1140px;
}
.mainTop ul li.chara002 .image p,
.mainTop ul li.chara002 .image li{
	background-image: url(../img/top/02_seto/image.png);
}
.mainTop ul li.chara002 .name{
	background-image: url(../img/top/02_seto/name.png);
}

.mainTop ul li.chara003{
	background-image: url(../img/top/03_kano/bg.png);
}
.mainTop ul li.chara003 .numberL p{
	background-image: url(../img/top/03_kano/number_l.png);
}
.mainTop ul li.chara003 .numberS{
	background-image: url(../img/top/03_kano/number_s.png);
}
.mainTop ul li.chara003 .image{
	margin-left: -905px;
}
.mainTop ul li.chara003 .image p,
.mainTop ul li.chara003 .image li{
	background-image: url(../img/top/03_kano/image.png);
}
.mainTop ul li.chara003 .name{
	background-image: url(../img/top/03_kano/name.png);
}

.mainTop ul li.chara004{
	background-image: url(../img/top/04_marry/bg.png);
}
.mainTop ul li.chara004 .numberL p{
	background-image: url(../img/top/04_marry/number_l.png);
}
.mainTop ul li.chara004 .numberS{
	background-image: url(../img/top/04_marry/number_s.png);
}
.mainTop ul li.chara004 .image{
	margin-left: -965px;
}
.mainTop ul li.chara004 .image p,
.mainTop ul li.chara004 .image li{
	background-image: url(../img/top/04_marry/image.png);
}
.mainTop ul li.chara004 .name{
	background-image: url(../img/top/04_marry/name.png);
}

.mainTop ul li.chara005{
	background-image: url(../img/top/05_momo/bg.png);
}
.mainTop ul li.chara005 .numberL p{
	background-image: url(../img/top/05_momo/number_l.png);
}
.mainTop ul li.chara005 .numberS{
	background-image: url(../img/top/05_momo/number_s.png);
}
.mainTop ul li.chara005 .image{
	margin-left: -947px;
}
.mainTop ul li.chara005 .image p,
.mainTop ul li.chara005 .image li{
	background-image: url(../img/top/05_momo/image.png);
}
.mainTop ul li.chara005 .name{
	background-image: url(../img/top/05_momo/name.png);
}

.mainTop ul li.chara006{
	background-image: url(../img/top/06_ene/bg.png);
}
.mainTop ul li.chara006 .numberL p{
	background-image: url(../img/top/06_ene/number_l.png);
}
.mainTop ul li.chara006 .numberS{
	background-image: url(../img/top/06_ene/number_s.png);
}
.mainTop ul li.chara006 .image{
	margin-left: -830px;
}
.mainTop ul li.chara006 .image p,
.mainTop ul li.chara006 .image li{
	background-image: url(../img/top/06_ene/image.png);
}
.mainTop ul li.chara006 .name{
	background-image: url(../img/top/06_ene/name.png);
}

.mainTop ul li.chara007{
	background-image: url(../img/top/07_shintaro/bg.png);
}
.mainTop ul li.chara007 .numberL p{
	background-image: url(../img/top/07_shintaro/number_l.png);
}
.mainTop ul li.chara007 .numberS{
	background-image: url(../img/top/07_shintaro/number_s.png);
}
.mainTop ul li.chara007 .image{
	margin-left: -1075px;
}
.mainTop ul li.chara007 .image p,
.mainTop ul li.chara007 .image li{
	background-image: url(../img/top/07_shintaro/image.png);
}
.mainTop ul li.chara007 .name{
	background-image: url(../img/top/07_shintaro/name.png);
}

.mainTop ul li.chara008{
	background-image: url(../img/top/08_hibiya/bg.png);
}
.mainTop ul li.chara008 .numberL p{
	background-image: url(../img/top/08_hibiya/number_l.png);
}
.mainTop ul li.chara008 .numberS{
	background-image: url(../img/top/08_hibiya/number_s.png);
}
.mainTop ul li.chara008 .image{
	margin-left: -1105px;
}
.mainTop ul li.chara008 .image p,
.mainTop ul li.chara008 .image li{
	background-image: url(../img/top/08_hibiya/image.png);
}
.mainTop ul li.chara008 .name{
	background-image: url(../img/top/08_hibiya/name.png);
}

.mainTop ul li.chara009{
	background-image: url(../img/top/09_konoha/bg.png);
}
.mainTop ul li.chara009 .numberL p{
	background-image: url(../img/top/09_konoha/number_l.png);
}
.mainTop ul li.chara009 .numberS{
	background-image: url(../img/top/09_konoha/number_s.png);
}
.mainTop ul li.chara009 .image{
	margin-left: -545px;
}
.mainTop ul li.chara009 .image p,
.mainTop ul li.chara009 .image li{
	background-image: url(../img/top/09_konoha/image.png);
}
.mainTop ul li.chara009 .name{
	background-image: url(../img/top/09_konoha/name.png);
}

.blackJack {
	width: 440px;
	height: 82px;
	position: absolute;
	left: 50%;
	margin-left: -220px;
	bottom: 20px;
}

.blackJack h3 {
	margin-bottom: 10px;
}

.blackJack ul {
	width: 450px;
	height: 40px;
}
.blackJack ul li{
	width: 40px;
	height: 40px;
	display: inline;
	float: left;
	position: relative;
	margin-right: 10px;
	background-image: url(../character/img/btn_select.jpg);
	background-repeat: no-repeat;
}

.blackJack ul li.chara01{background-position: 0 -40px}
.blackJack ul li.chara02{background-position: -40px -40px}
.blackJack ul li.chara03{background-position: -80px -40px}
.blackJack ul li.chara04{background-position: -120px -40px}
.blackJack ul li.chara05{background-position: -160px -40px}
.blackJack ul li.chara06{background-position: -200px -40px}
.blackJack ul li.chara07{background-position: -240px -40px}
.blackJack ul li.chara08{background-position: -280px -40px}
.blackJack ul li.chara09{background-position: -320px -40px}
.blackJack ul li.chara10{background-position: -360px -40px}

.blackJack ul li.chara01.select{background-position: 0 0}
.blackJack ul li.chara02.select{background-position: -40px 0}
.blackJack ul li.chara03.select{background-position: -80px 0}
.blackJack ul li.chara04.select{background-position: -120px 0}
.blackJack ul li.chara05.select{background-position: -160px 0}
.blackJack ul li.chara06.select{background-position: -200px 0}
.blackJack ul li.chara07.select{background-position: -240px 0}
.blackJack ul li.chara08.select{background-position: -280px 0}
.blackJack ul li.chara09.select{background-position: -320px 0}
.blackJack ul li.chara10.select{background-position: -360px 0}

.blackJack ul li .number{
	width: 20px;
	height: 19px;
	position: absolute;
	right: 0;
	bottom: 0;
	display: none;
}

.blackJack ul li.select .number{
	display: block;
}

.blackJack .total{
	width: 32px;
	height: 33px;
	position: absolute;
	top: 46px;
	left: 454px;
	padding-left: 31px;
	background: url(../img/top/blackjack/arrow.png) no-repeat left center;
}

.blackJack .total .number{
	width: 30px;
	height: 33px;
	background: url(../img/top/blackjack/total.png) no-repeat center bottom;
}

.blackJack .total .number p{
	width: 15px;
	height: 20px;
	background: url(../img/top/blackjack/number.png) no-repeat left top;
	float: left;
}

.blackJack .congratulations {
	width: 148px;
	height: 148px;
	position: absolute;
	right: -134px;
	top: -121px;
}

.charaNavi {
	width: 75px;
	height: 90px;
	position: absolute;
	top: 50%;
	margin-top: -45px;
}

.charaNavi.prev{
	left: 200px;
}

.charaNavi.next {
	right: 200px;
}

.charaNavi:hover {
	cursor: pointer;
}

header .news {
	position: absolute;
	left: 505px;
	top: 120px;
	text-align: left;
}

header .news p{
	float: left;
}

header .news span{
	color: #00f7c6;
	font-size: 8px;
	font-style: italic;
}

header .news a{
	color: #ffffff;
	font-size: 8px;
}

header .news a.more {
	width: 68px;
	height: 12px;
	display: block;
	float: left;
	margin-left: 10px;
	overflow: hidden;
	margin-top: 3px;
	position: relative;
	line-height: 12px;
}

header .news a.more img {
	position: absolute;
	top: 0;
}

header .news a.more img:hover {
	position: absolute;
	top: -12px;
}

#newsList {
	width: 100%;
	min-width: 980px;
	min-height: 550px;
	height: 100%;
	position: absolute;
	left:0;
	top: 0;
	z-index: 10000;
	display: none;
}

#newsList .newsListBg{
	position: absolute;
	left:0;
	top: 0;
	background: url(../img/common/bgCover.png);
	width: 100%;
	height: 100%;
}


#newsList .newsListMain {
	width: 640px;
	height: 100%;
	overflow: auto;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

#newsList .newsListMain li{
	padding: 15px 0;
	border-bottom: 1px solid #545454;
}

#newsList .newsListMain li .date{
	width: 90px;
	float: left;
	font-size: 10px;
	color: #00f7c6;
	font-style: italic;
	padding-top: 3px;
}

#newsList .newsListMain li .title{
	width: 530px;
	float: left;
}
#newsList .newsListMain li .title a{
	font-size: 10px;
	color: #fffefe;
}

#newsList .close{
	width: 107px;
	height: 107px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 365px;
}

#newsList .close:hover{
	cursor:pointer;
}

#load_title {
	position: absolute;
	/*top: 0;*/
	top: -66px;
	width: 400px;
	left: 50%;
	margin-left: -200px;
	display: none;
}
#load_title span {
	margin: 0 7px;
	opacity: 0;
	filter: alpha(opacity=0);
}

#bo_baseline {
	width: 100%;
	height: 1px;
	background-color: #353535;
	left: 0;
	top: 50%;
	/*top: 66px;*/
	position: absolute;
	/*opacity: 0;
	filter: alpha(opacity=0);*/
		display: none;
}

#bo_line1 {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #00f7c6;
	width: 20px;
	height: 1px;
}
#bo_line2 {
	position: absolute;
	top: 0;
	left: 150px;
	background-color: #00f7c6;
	width: 40px;
	height: 1px;
}
#bo_line3 {
	position: absolute;
	top: 0;
	left: 400px;
	background-color: #00f7c6;
	width: 120px;
	height: 1px;
}

#load_txt {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -37px;
	margin-top: 10px;
		display: none;
}

#newsList .newsListMain::-webkit-scrollbar {
    width: 5px;
}

#newsList .newsListMain::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(61,67,71,0.6);
background: rgba(61,67,71,0.8);
}

#newsList .newsListMain::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 4px rgba(2,235,189,0.5);
background: rgba(2,235,189,0.8);
}


#movieArea {
	width: 100%;
	min-width: 980px;
	min-height: 550px;
	height: 100%;
	position: absolute;
	left:0;
	top: 0;
	z-index: 10000;
	display: none;
}

#movieArea .movieAreaBg{
	position: absolute;
	left:0;
	top: 0;
	background: url(../img/common/bgCover.png);
	width: 100%;
	height: 100%;
}

#movieArea .close{
	width: 107px;
	height: 107px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 349px;
    margin-top: -301px;
}

#movieArea .close:hover{
	cursor:pointer;
}


.movie {
position:absolute;
right: 30px;
bottom: 20px;
width: 200px;
height: 130px;
text-align: left;
z-index: 10;
}

.movie h4 {
margin-bottom: 8px;
line-height: 0;
}

.movie .btn {
position: relative;
	width: 200px;
	height: 113px;
	border-top: 3px solid #00f7c6;
}

.movie .btn p{
position:absolute;
left:0;
top:0;
}

.movie .btn p.btnPlay {
	padding: 42px 0 0 84px;
}

.playerWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 680px;
	height: 440px;
	margin-left: -340px;
	margin-top: -220px;
}


.playerWrap .movieControl{
	width: 35px;
	height: 35px;
	position: absolute;
}

.playerWrap .movieControl:hover{
	cursor: pointer;
}

.playerWrap .movieControl.play{
	left: 603px;
	top: 400px;
	background-image: url(../movie/img/player/btn_pause.png);
}
.playerWrap .movieControl.sound{
	left: 646px;
	top: 400px;
		background-image: url(../movie/img/player/btn_sound-off.png);
}

.playerWrap .movieControl.play.playing:hover{
	background-image: url(../movie/img/player/btn_pause_on.png);
}
.playerWrap .movieControl.sound:hover{
	background-image: url(../movie/img/player/btn_sound-off_on.png);
}

.playerWrap .movieControl.play.pause{
	background-image: url(../movie/img/player/btn_play.png);
}
.playerWrap .movieControl.sound.off{
	background-image: url(../movie/img/player/btn_sound-on.png);
}
.playerWrap .movieControl.play.pause:hover{
	background-image: url(../movie/img/player/btn_play_on.png);
}
.playerWrap .movieControl.sound.off:hover{
	background-image: url(../movie/img/player/btn_sound-on_on.png);
}

.bnrMusic {
	position:absolute;
	left: 30px;
	bottom: 20px;
	width: 270px;
	height: 65px;
	text-align: left;
	z-index: 10;
}

.bnrEvent {
    position: absolute;
    right: 30px;
    bottom: 20px;
    width: 230px;
    height: 85px;
    text-align: left;
    z-index: 10;
}

#floatArea {
	width: 100%;
	min-width: 980px;
	min-height: 550px;
	height: 100%;
	position: fixed;
	left:0;
	top: 0;
	z-index: 10000;
	display: none;
}

#floatArea .floatAreaBg{
	position: absolute;
	left:0;
	top: 0;
	background: url(../img/common/bgCover.png);
	width: 100%;
	height: 100%;
}


#floatArea .floatMain {
	width: 680px;
	height: 576%;
	overflow: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -340px;
	margin-top: -288px;
}

#floatArea .close{
	width: 107px;
	height: 107px;
	position: absolute;
	top: 0;
	right: 200px;
}

#floatArea .close:hover{
	cursor: pointer;
}