@charset "utf-8";
@import url("reset.css");

body {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
  background-color: #FFFFFF;
  color: #727272;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

a.link_1 {
  color: #0099FB;
  text-decoration: underline;
}
a.link_1:hover {
  color: #0099FB;
  text-decoration: none;  

}

article {
  min-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.inner{
  width: 1000px;
  margin:0 auto;
}

/*============
header
============*/
header{
  background: url("../images/header-bg.jpg")no-repeat top center;
}

header .inner{
  background: url("../images/header-inner-bg.jpg") no-repeat top center;
  height: 823px;
  position: relative;
}

header .inner .awards{
  position: absolute;
  top: 10px;
  left: 337px;
}

header .inner .movie {
  width: 356px;
  height: 206px;
  margin:13px 0 0 15px;
  padding:11px 0 0 16px;
  background: url("../images/movie-bg.png") no-repeat top center;
}

header .inner h2{
  position: absolute;
  top: 141px;
  right: 0;
}

header .inner .description {
  position: absolute;
  top: 260px;
  left: 374px;
}
header .inner .entry {
  position: absolute;
  top: 461px;
  left: 4px;
  z-index: 2;
}
header .inner .openID {
  position: absolute;
  top: 518px;
  left: 199px;
  z-index: 4;
}

header .inner ul{
  margin: 268px 0 0 4px;
}

header .inner ul li{
  float: left;
}

/*============
about
============*/
#about{
  background: url("../images/about-bg.jpg") no-repeat top center fixed;
}

#about .about-back{
  background: url("../images/about-bg-back.png");
  background-position: 50% 0;
}

#about .about-pandora{
  background: url("../images/about-bg-pandora.png") no-repeat top center;
}

#about .about-front{
  background: url("../images/about-bg-front.png");
  background-position: 50% 0;
}

#about .header-bottom{
  background: url("../images/header-bottom.png") no-repeat top center;
  height: 87px;
}

#about .inner{
  position: relative;
  height: 782px;
}

#about .inner h2{
  margin:20px 0 0 6px;
}

#about .inner .js-tab{
  margin:20px 0 0 9px;
}

#about .inner .js-tab li{
  float: left;
  margin-right: 7px;
}
#about .inner .js-tab li:last-of-type{
  margin-right: 0;
}

#about .inner .js-tab_content {
  display:none;
  margin-top: 9px;
}
#about .inner .js-tab_content.active {
  display:block;
}

#about .inner .js-tab_content.about-gensoushinki{
  position: relative;
}

#about .inner .js-tab_content.about-gensoushinki .hansel_gretel{
  position: absolute;
  top: 111px;
  left: 533px;
}
#about .inner .js-tab_content.about-gensoushinki .cyousen{
  position: absolute;
  top: 333px;
  left: 336px;
}

#about .inner .js-tab_content.about-gensoushinki .img_01{
  position: absolute;
  top: 324px;
  left: 543px;
}

#about .inner .js-tab_content.about-gensoushinki .img_02{
  position: absolute;
  top: 426px;
  left: 331px;
}

#about .inner .js-tab_content.about-gensoushinki .img_03{
  position: absolute;
  top: 236px;
  left: 748px;
}

#about .inner .dog{
  position: absolute;
  top: 414px;
  right: -500px;
}

#about .about-bottom{
  background:url("../images/about-bg-bottom.png") no-repeat top center;
  height: 256px
}


/*============
genshin
============*/
#genshin{
  background: url("../images/genshin-bg.jpg")no-repeat top center;
}

#genshin .inner{
  background: url("../images/genshin-inner-bg.jpg") no-repeat top center;
  height: 761px;
  position: relative;
}

#genshin .inner h2{
  position: absolute;
  top: -143px;
  left: 4px;
}

#genshin .inner .js-tab_02{
  position: absolute;
  top:7px;
  left: 7px;
  z-index: 10;
  width: 302px;
}

#genshin .inner .js-tab_02 li{
  float: left;
}

#genshin .inner .js-tab_content_02 {
  position: relative;
}

#genshin .inner .js-tab_content_02.active {
  display:block;
}

#genshin .inner .js-tab_content_02 .movie{
  display: none;
}

#genshin .inner .js-tab_content_02.active .movie{
  display: block;
  z-index: 99;
}

#genshin .inner .js-tab_content_02.active .movie a{
  cursor: pointer;
}

#genshin .inner .js-tab_content_02 p,
#genshin .inner .js-tab_content_02 div{
  position: absolute;
}

#genshin .inner .js-tab_content_02 .name{
  top: 2px;
  right: 7px;
}

#genshin .inner .js-tab_content_02 .balloon{
  top: 15px;
  left: 322px;
}
#genshin .inner .js-tab_content_02 .movie{
  top: 541px;
  right: 1px;
}

#genshin .inner .js-tab_content_02 .movie a:hover{
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  opacity: 0.85;
}

/*ミューズ*/
#genshin .inner .js-tab_02 .genshin_01.active{
  background:url(../images/genshin-thum_01_on.png);
}
 
#genshin .inner .js-tab_02 .genshin_01.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_01 .bg{
  top: 425px;
  left: 233px;
}

#genshin .inner .js-tab_content_02.genshin_01.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_01 .ss{
  top: 26px;
  right: -42px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

/*ユースティティア*/
#genshin .inner .js-tab_02 .genshin_02.active{
  background:url(../images/genshin-thum_02_on.png);
}

#genshin .inner .js-tab_02 .genshin_02.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_02 .bg{
  top: 473px;
  left: 313px;
}

#genshin .inner .js-tab_content_02.genshin_02.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_02 .ss{
  top: 7px;
  right: 50px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

/*村正*/
#genshin .inner .js-tab_02 .genshin_03.active{
  background:url(../images/genshin-thum_03_on.png);
}

#genshin .inner .js-tab_02 .genshin_03.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_03 .bg{
  top: 20px;
  right: 266px;
}

#genshin .inner .js-tab_content_02.genshin_03.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_03 .ss{
  top: 45px;
  right: 25px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

/*クロノス*/
#genshin .inner .js-tab_02 .genshin_04.active{
  background:url(../images/genshin-thum_04_on.png);
}

#genshin .inner .js-tab_02 .genshin_04.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_04 .bg{
  top: 38px;
  right: 184px;
}

#genshin .inner .js-tab_content_02.genshin_04.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_04 .ss{
  top: 38px;
  right: 144px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

/*安倍晴明*/
#genshin .inner .js-tab_02 .genshin_05.active{
  background:url(../images/genshin-thum_05_on.png);
}
 
#genshin .inner .js-tab_02 .genshin_05.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_05 .bg{
  top: 23px;
  left: 342px;
}

#genshin .inner .js-tab_content_02.genshin_05.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_05 .ss{
  top: 13px;
  right: -66px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

/*イナバ*/
#genshin .inner .js-tab_02 .genshin_06.active{
  background:url(../images/genshin-thum_06_on.png);
}

#genshin .inner .js-tab_02 .genshin_06.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_06 .bg{
  top: 513px;
  left: 195px;
}

#genshin .inner .js-tab_content_02.genshin_06.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_06 .ss{
  top: 4px;
  left: 316px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}

/*ラファエル*/
#genshin .inner .js-tab_02 .genshin_07.active{
  background:url(../images/genshin-thum_07_on.png);
}
 
#genshin .inner .js-tab_02 .genshin_07.active a img{
  visibility: hidden;
}

#genshin .inner .js-tab_content_02.genshin_07 .bg{
  top: 273px;
  left: 228px;
}

#genshin .inner .js-tab_content_02.genshin_07.active .ss{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
} 

#genshin .inner .js-tab_content_02.genshin_07 .ss{
  top: 0;
  right: -49px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}


/*============
cp
============*/
#cp{
  background: url("../images/cp-bg.jpg") no-repeat top center fixed;
}

#cp .cp-chara-bg{
  background:url("../images/cp-chara-bg.png") no-repeat 50% 23px;
}

#cp .genshin-bottom{
  background: url("../images/genshin-bottom.png") no-repeat top center;
  height: 44px;
}

#cp .cp-bottom{
  background: url("../images/cp-bottom.png") no-repeat top center;
  height: 19px;
}

#cp .inner{
}

#cp .inner .cp-signup{
	width: 492px;
  height: 517px;
	margin: 0 auto;
	position: relative;
}
#cp .inner .cp-signup h2{
	left: 0;
	position: absolute;
	z-index: 2;
}

#cp .inner .cp-signup p{
	top: 212px;
	left: 98px;
	position: absolute;
	z-index: 1;
}

#cp .inner .cp-signup .cp-btn{
	top: 285px;
	left:94px;
	position: absolute;
}



/*============
footer
============*/
footer{
  background:url("../images/footer-bg.jpg") repeat top left; ;
}

footer .inner{
  height: 302px;
}

footer .btn{
  padding-top: 41px;
  margin-bottom:10px;
}

footer .btn li{
  float: left;
  margin-right: 2px;
}

footer .btn li:last-child{
  margin-right: 0;
}

footer .inner div{
  text-align: center;
}

footer .footer-bottom{
  background:#fff;
}

footer .footer-bottom .inner{
  height: 140px;
}
footer .footer-bottom .inner p,
footer .footer-bottom .inner p a{
  text-align: center;
  color: #137aaa;
  padding-top: 30px;
  margin-bottom: 13px;
}

footer .footer-bottom .inner p a{
  text-decoration: none;
  border-bottom: 1px solid #d5e2ec;
  padding-bottom: 0;
}

footer .footer-bottom .inner p a:hover{
  border-bottom:none;
} 

footer .footer-bottom .inner small{
  text-align: center;
  display: block;
  margin-bottom: 18px;
}


/*============
#cp_area
============*/
#cp_area {
  position: fixed !important;
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 118px;
  height: 370px;
  z-index: 50;  
}