@charset "utf-8";
body{background: #3c6cec;}
#index_header{ width: 100%; max-width: 1500px; margin: 0 auto; background:url(../img/index/header.jpg) #fff top left no-repeat; -moz-background-size:100% auto; background-size:100% auto;  padding-bottom: 30px; overflow:hidden; }
#index_header img{width: 100%;}
.index_header_left, .index_header_right{width: 50%; /* padding-bottom: 10%; */}
.index_header_right{max-width: 750px;  position: relative;}
.base-wp{padding-bottom: 0;}

@media screen and (max-width: 640px) {
#index_header{ width: 100%; max-width: 1500px; margin: 0 auto; background:url(../img/index/header_sp.jpg) #fff top left no-repeat;  -moz-background-size:100% auto; background-size:100% auto;  padding-bottom: 30px; overflow:hidden;  padding-bottom: 0;}


}



.top_logo_box{width: 95%; max-width: 698px; margin-left: 8%;}

.top_banner_box{width: 90%; margin: 0 auto;}

.top_banner_box a{display:block; margin: 1% 1% 2% 1%;}
.top_banner_box a:hover{filter:alpha(opacity=65); -moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}

.top_banner_banner{width: 50%;}

@media screen and (max-width: 640px) {
.top_logo_box{width: 97%; max-width: 698px; margin-left: 6%;}
.top_banner_box{width: 95%; margin: 0 auto; margin-left: 0; margin: 0 auto; padding-bottom: 10px;}

.top_banner_banner{width: 100%;}


}



.index_wp{ width: 100%; max-width: 1500px; background:url(../img/index/mainbg.jpg) top left no-repeat; margin: 0 auto; padding-bottom: 15%;
-moz-background-size: 100% 100%;
background-size: 100% 100%; 
 overflow:hidden;
}

@media screen and (max-width: 1300px) {
.index_wp{ background:url(../img/index/mainbg.jpg) top left no-repeat;
-moz-background-size: 100% 100%;
background-size: 100% 100%; 
}
}


@media screen and (max-width: 640px) {
.index_wp{ background:url(../img/index/mainbg.jpg) top left no-repeat;
-moz-background-size: auto 100%;
background-size: auto 100%; 
}
}




.index_title{width: 40%; max-width: 445px; margin: 0 auto; text-align: center; padding: 15% 0 5% 0;}
.index_title2{width: 40%; max-width: 445px; margin: 0 auto; text-align: center; padding: 15% 0 0 0;}


.index_more_btn{width: 50%; max-width: 600px; margin: 0 auto; padding-top: 5%;}

.index_more_btn:hover{-moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}

.game_wp{
width: 95%;
max-width: 1085px;
background:url(../img/index/game_bg.jpg) #fff top left no-repeat; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; overflow:hidden;

-moz-background-size: auto 100%;
background-size: auto 100%; 
padding-bottom: 5%;
margin: 5% auto 0 auto;
}
.index_game_list{
width: 86%;
max-width: 1000px;
margin: 5% auto 0 auto;
}
.index_game_list li{width: 46%; max-width: 500px; padding: 0 2%;}

.index_event_list{ width: 90%; max-width: 1000px; margin: 0 auto 0 auto; }
.index_event_list li{width: 46%; max-width: 500px; padding: 0 2%;}

.index_event_list2{ width: 90%; max-width: 500px; margin: 0 auto 0 auto; }
.index_event_list2 li{width: 100%; max-width: 500px; padding: 0 2%;}

.index_event_list_mini{ width: 90%; max-width: 200px; margin: 0 auto 0 auto; }
.index_event_list_mini li{width: 50%; max-width: 500px; padding: 0 2%;}

.index_event_point{width: 30%; max-width: 300px; right:0;  transform: rotate( 10deg ); padding-left: 80%;}

.index_game_app{width: 30%; max-width: 255px; padding: 0 2%; margin: -5% auto 0 auto;}

img.scale {
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
img.scale:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}


@media screen and (max-width: 640px) {
.game_wp{width: 100%;  border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;  padding: 10% 20% 25% 20%; margin-left: -20%;}
.index_game_list{width: 95%; max-width: 640px;}
.index_game_list li{width: 49%; padding: 0 0.5%;}
.index_event_point{width: 50%; max-width: 300px; }
}


.cont-list-box{ border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; border: 5px double #ffde5b;}
.cont-list-box{width: calc(31.33% - 10px);}

@media screen and (max-width: 640px) {
.cont-list-box{width: calc(48% - 10px);}
}


.chara_rd{position: absolute; animation: fadeInright 2s ease 0s 1 normal;  -webkit-animation: fadeInright 2s ease 0s 1 normal;}
.chara1{ width: 100%; background:url(../img/chara/chara1.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara2{ width: 100%; background:url(../img/chara/chara2.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara3{ width: 100%; background:url(../img/chara/chara3.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara4{ width: 100%; background:url(../img/chara/chara4.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara5{ width: 100%; background:url(../img/chara/chara5.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara6{ width: 100%; background:url(../img/chara/chara6.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara7{ width: 100%; background:url(../img/chara/chara7.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara8{ width: 100%; background:url(../img/chara/chara8.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara9{ width: 100%; background:url(../img/chara/chara9.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara10{ width: 100%; background:url(../img/chara/chara10.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara11{ width: 100%; background:url(../img/chara/chara11.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara12{ width: 100%; background:url(../img/chara/chara12.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.chara13{ width: 100%; background:url(../img/chara/chara13.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara14{ width: 100%; background:url(../img/chara/chara14.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara15{ width: 100%; background:url(../img/chara/chara15.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara16{ width: 100%; background:url(../img/chara/chara16.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara17{ width: 100%; background:url(../img/chara/chara17.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara18{ width: 100%; background:url(../img/chara/chara18.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.chara19{ width: 100%; background:url(../img/chara/chara19.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara20{ width: 100%; background:url(../img/chara/chara20.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara21{ width: 100%; background:url(../img/chara/chara21.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara22{ width: 100%; background:url(../img/chara/chara22.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara23{ width: 100%; background:url(../img/chara/chara23.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara24{ width: 100%; background:url(../img/chara/chara24.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }


.chara25{ width: 100%; background:url(../img/chara/chara25.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara26{ width: 100%; background:url(../img/chara/chara26.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara27{ width: 100%; background:url(../img/chara/chara27.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara28{ width: 100%; background:url(../img/chara/chara28.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara29{ width: 100%; background:url(../img/chara/chara29.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara30{ width: 100%; background:url(../img/chara/chara30.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }



.catch1{ width: 100%; background:url(../img/chara/chara1_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch2{ width: 100%; background:url(../img/chara/chara2_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch3{ width: 100%; background:url(../img/chara/chara3_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch4{ width: 100%; background:url(../img/chara/chara4_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch5{ width: 100%; background:url(../img/chara/chara5_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch6{ width: 100%; background:url(../img/chara/chara6_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch7{ width: 100%; background:url(../img/chara/chara7_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch8{ width: 100%; background:url(../img/chara/chara8_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch9{ width: 100%; background:url(../img/chara/chara9_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.catch10{ width: 100%; background:url(../img/chara/chara10_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch11{ width: 100%; background:url(../img/chara/chara11_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch12{ width: 100%; background:url(../img/chara/chara12_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }


.catch13{ width: 100%; background:url(../img/chara/chara13_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch14{ width: 100%; background:url(../img/chara/chara14_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch15{ width: 100%; background:url(../img/chara/chara15_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch16{ width: 100%; background:url(../img/chara/chara16_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch17{ width: 100%; background:url(../img/chara/chara17_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch18{ width: 100%; background:url(../img/chara/chara18_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }


.catch19{ width: 100%; background:url(../img/chara/chara19_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch20{ width: 100%; background:url(../img/chara/chara20_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch21{ width: 100%; background:url(../img/chara/chara21_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch22{ width: 100%; background:url(../img/chara/chara22_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch23{ width: 100%; background:url(../img/chara/chara23_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch24{ width: 100%; background:url(../img/chara/chara24_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.catch25{ width: 100%; background:url(../img/chara/chara25_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch26{ width: 100%; background:url(../img/chara/chara26_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch27{ width: 100%; background:url(../img/chara/chara27_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch28{ width: 100%; background:url(../img/chara/chara28_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch29{ width: 100%; background:url(../img/chara/chara29_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.catch30{ width: 100%; background:url(../img/chara/chara30_catch.png?20181129) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }


.catch{width: 20%;}



.chara_navi{width: 25%; padding: 0 0; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; background: #3a86fb; overflow:hidden; position: absolute; right: 30%; bottom: 0;}



@media screen and (max-width: 640px) {
.chara_navi{width: 50%;  bottom: 5px;}
}

.fadeIn_am{ animation: fadeIn 2s ease 0s 1 normal;     -webkit-animation: fadeIn 2s ease 0s 1 normal;}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


@keyframes fadeInright {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }