@charset "utf-8";


/*----------------------------
top
----------------------------*/
#top{
	display:none;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#top>.relative{
	width:inherit;
	height:inherit;
	overflow:hidden;
}

#event-banner {
    position: absolute;
	cursor:pointer;
    right: 220px;
    /* bottom: 270px; */
    z-index: 2;
}

#top-koukai{
	position:absolute;
	right:20px;
	/*bottom:270px;*/
	z-index:2;
}
#zekkyou-btn{
	position:absolute;
	z-index:3;
	display:block;
}

#top-credit{
	position:absolute;
	left:20px;
	z-index:3;
}

#top-bg{
	position:absolute;
	z-index:1;
	top:50px;
}

#banner-container{
	z-index:100;
}

#banner-container p{
	cursor:pointer;
}

#top-banner-left{
	padding:0 10px 0 0;
}

#top-banner-left p a{
	display:block;
}

#top-banner-left p{
	padding:0 0 10px;
}

#mini-banner-container{
	padding:10px 0;
}

#mini-banner-container p{
	padding:0 10px 0 0;
}

#mini-banner-container p:first-child{
	padding:0;
}

#tokuten-btn,
#song-btn{
	cursor:pointer;
}


#footer{
	position:absolute;
	z-index:100;
}


#top-fix-banner{
	width:1002px;
	margin:0 auto;
}
#top-fix-banner li{
	display:block;
	float:left;
	padding:0 10px 0 0;
}

/*----------------------------
kaidan
----------------------------*/
#kaidan{
	margin:0 0 50px;
	display:none;
}


/*----------------------------
intro
----------------------------*/
#intro{
	display:none;
	position:relative;	
	margin:0 0 265px;
	/*width:1024px;*/
}

#intro-bg{
	display:block;
}

#intro-txt-container{
	position:relative;
	margin:20px 0 0;
	width:984px;
}

#intro-txt-container-txt{
	position:absolute;
	top:-30px;
    left:547px;
}

#intro-txt-container-img{
	margin: 0 0 210px;
	float:left;
}

#intro-txt-container-txt{
	padding:60px 0 0;
}

#intro-img2{
	position:absolute;
	top:557px;
    left:388px;
}

#intro-img3 img{
	margin:30px 0 0;
}


/*----------------------------
story
----------------------------*/
#story{
	display:none;
	position:relative;
	height:1000px;
}

#story-container{
	position:relative;
	float:left;
}

#story-navi0{
	position:absolute;
	top: 37px;
    left: 769px;
}

#story-navi1{
	position:absolute;
	top:226px;
    left:822px;
}

#story-navi2{
	position:absolute;
	top:405px;
    left:750px;
}

.story-box{
	position:absolute;
	top:0;
	left:0;
	display:none;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

.story-txt{
	position:absolute;
	top:68px;
    left:472px;
}


/*----------------------------
cast & staff
----------------------------*/
#caststaff{
	display:none;
	position:relative;
	height:2900px;
}

#cassta0{
	position:absolute;
	top:80px;
	left:0;
}

#cassta1{
	position:absolute;
	top:404px;
    left:163px;
}

#cassta2{
	position:absolute;
	top:704px;
	left:0;
}

#cassta3{
	position:absolute;
	top:943px;
    left:128px;
}

#cassta4{
	position:absolute;
	top:1148px;
    left:0;
}

#cassta5{
	position:absolute;
	top:1394px;
    left:76px;
}

#cassta6{
	position:absolute;
	top:1604px;
	left:0;
}

#cassta7{
	position:absolute;
	top:1827px;
	left:0;
}

#cassta8{
	position:absolute;
	top:2149px;
	left:0;
}


/*----------------------------
character
----------------------------*/
#character{
	display:none;
	padding:0 0 180px;
}

/*sadako*/
#sadako-chara-container{
	background:url(../img/character/sadakoBg.png) no-repeat left top;
	width:930px;
	height:780px;
	margin:0 auto;
}

#chara-sadako{
	padding: 20px 0 0 50px;
	position:relative;
}
#chara-sadako p{
	position:relative;
}
#chara-sadako-img{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
}

#sadako-circle-container{
	position:absolute;
	z-index:2;
	cursor:pointer;
	top:230px;
	left:95px;
}
#chara-sadako-click-txt{
	position:absolute;
	z-index:2;
    top: 45px;
    left: 14px;
}

#chara-sadako-txt-container{
}


#chara-sadako-hyo{
	position: absolute;
    z-index: 3;
    top: 110px;
    left: 405px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-sadako-zu{
	position: absolute;
    z-index: 4;
    top: 85px;
    left: 585px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-sadako-zu img{
	-webkit-transform: scale(0);
	transform: scale(0);
}

#chara-sadako-zu img.zu-hover{
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}


#chara-sadako-txt{
	position: absolute;
    z-index: 5;
    top: 310px;
    left: 310px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-sadako-params{
	position: absolute;
    z-index: 6;
    top: 595px;
    left: 370px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}


#kayako-toshio-container{
	background:url(../img/character/kayakoBg.png) no-repeat left top;
	width:940px;
	height:1578px;
	margin:0 auto;
}



/*kayako*/
#kayako-chara-container{
	width:930px;
	height:780px;
	margin:0 auto;
}

#chara-kayako{
	padding: 20px 0 0 20px;
	position:relative;
}
#chara-kayako p{
	position:relative;
}
#chara-kayako-img{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
}

#kayako-circle-container{
	position:absolute;
	z-index:2;
	cursor:pointer;
	top:230px;
	left:95px;
}
#chara-kayako-click-txt{
	position:absolute;
	z-index:2;
    top: 58px;
    left: 20px;
}

#chara-kayako-txt-container{
}


#chara-kayako-hyo{
	position: absolute;
    z-index: 3;
    top: 183px;
    left: 405px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-kayako-zu{
	position: absolute;
    z-index: 4;
    top: 160px;
    left: 585px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-kayako-zu img{
	-webkit-transform: scale(0);
	transform: scale(0);
}

#chara-kayako-zu img.zu-hover{
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}


#chara-kayako-txt{
	position: absolute;
    z-index: 5;
    top: 395px;
    left: 330px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-kayako-params{
	position: absolute;
    z-index: 6;
    top: 665px;
    left: 385px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}


/*toshio*/
#toshio-chara-container{
	width:930px;
	height:780px;
	margin:0 auto;
}

#chara-toshio{
	padding: 270px 0 0 640px;
	position:relative;
}
#chara-toshio p{
	position:relative;
}
#chara-toshio-img{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
}

#toshio-circle-container{
	position:absolute;
	z-index:2;
	cursor:pointer;
	top:440px;
	left:705px;
}
#chara-toshio-click-txt{
	position:absolute;
	z-index:2;
    top: 58px;
    left: 20px;
}

#chara-toshio-txt-container{
}

#chara-toshio-txt{
	position: absolute;
    z-index: 5;
    top: 25px;
    left: 65px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}

#chara-toshio-params{
	position: absolute;
    z-index: 6;
    top: 225px;
    left: 78px;
	
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
}





/*----------------------------
history
----------------------------*/
#history{
	display:none;
	padding:0 0 200px;
}

.history-line{
	background-image:url(../img/history/line.png);
	background-repeat: repeat-y; 
	background-position: 512px 50px;
}
.history-line2{
	background-image:url(../img/history/line.png);
	background-repeat: repeat-y; 
	background-position: 512px 0px;
}

.history-y-container{
	position:relative;
	margin:0;
}
.history-y2-container{
	position:relative;
	margin:0;
	min-height: 60px;
}
.history-ring-block {
	float:left;
	padding:5px 0 0 0;
}
.history-juon-block {
	float:right;
	padding:5px 0 0 0;
}

.history-year{
	position:absolute;
	z-index:1;
	top:0;
	left:480px;
}
.accordion-btn{
	position:absolute;
	cursor:pointer;
	z-index:10;
	top:0;
	left:495px;
}

.y1991{
	background-image:url(../img/history/1991.png);
	background-repeat: no-repeat;
	background-position:51.5% 0;
}
.y1995{
	background-image:url(../img/history/1995.png);
	background-repeat: no-repeat;
	background-position:51.5% 0;
}
.y1998{
	background-image:url(../img/history/1998.png);
	background-repeat: no-repeat;
	background-position:51.5% 0;
}

.accordion{
	padding: 0;
	margin: 0;
    min-height: 100px;
    
}

#last-txt{
	width:600px;
	margin:0 auto;
	padding:50px 0 0;
}
/*----------------------------
ido
----------------------------*/
#ido{
	display:none;
	margin:0 auto;
	text-align:center;
}


/*----------------------------
modules
----------------------------*/
.circle {
    -webkit-animation: spin 6.0s linear infinite;
    -moz-animation: spin 6.0s linear infinite;
    -ms-animation: spin 6.0s linear infinite;
    -o-animation: spin 6.0s linear infinite;
    animation: spin 6.0s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}