@charset "utf-8";


/* header-css =================================== */

.menu-navi-box{
width: 100%;
position: fixed;
background:url(../img/common/navi_bg.png) top center repeat-x;
top: 0;
transition: .3s;
z-index:100;

}

.main-menu{
width: 25%;
max-width: 221px;
margin: 0 auto;
}





@media screen and (max-width: 700px) {
.main-menu{
width: 50%;
}

}

.menu-bg{/* background:url(../img/common/menu_bg.png) top center no-repeat;
-moz-background-size:cover;
background-size: cover;
*/
width: 100%;
min-height: 100vh;


}


#menulistboxin{ width: 100%; -moz-background-size:100% auto; background-size:100% auto;}
.menu-center-box{}
.menu-wp-hidden{ width: 100%; max-width: 518px; overflow:hidden; position: relative; height: 518px; top: 0; left: 0; margin:auto; animation-name: fade-inanime2; animation-duration: 1s; animation-fill-mode: forwards;}

.menu-wp,.menu-wp2{ width: 100%; max-width: 518px; height: 518px; margin: 0 auto; background:url(../img/common/menu_rot_bg.png) top center no-repeat; position: absolute; top: 0; left: 0; -moz-background-size:100% auto; background-size:100% auto; }

.menu-wp{animation:30s linear infinite rotation1;}
.menu-wp2{animation:30s linear infinite rotation2;}


.menu-txt{
	position: absolute;
	width: 100%;
	max-width: 400px;
	top: 20%;
	left:14%;
}

.nobtn{
filter:alpha(opacity=40);
-moz-opacity:0.40;
-khtml-opacity:0.40;
opacity:0.40;
}


@media screen and (max-width: 700px) {

.menu-bg{padding-bottom: 0%;}
.menu-wp,.menu-wp2{background:none;}

}




@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
  0%{ transform:rotate(360deg);}
  100%{ transform:rotate(0); }
}
@keyframes rotation3{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}

.menu-title{width: 50%; max-width: 245px; margin: 0 auto; padding-bottom: 28px;}

.menu-btn{width: 48%; padding:1%; position: relative;}
.menu-btn1{background:url(../img/common/menu-top.png) top center no-repeat;}
.menu-btn2{background:url(../img/common/menu-news.png) top center no-repeat;}
.menu-btn3{background:url(../img/common/menu-introduction.png) top center no-repeat;}
.menu-btn4{background:url(../img/common/menu-world.png) top center no-repeat;}
.menu-btn5{background:url(../img/common/menu-characters.png) top center no-repeat;}
.menu-btn6{background:url(../img/common/menu-syestem.png?20201119) top center no-repeat;}
.menu-btn7{background:url(../img/common/menu-movie.png) top center no-repeat;}
.menu-btn8{background:url(../img/common/menu-gallery.png) top center no-repeat;}
.menu-btn9{background:url(../img/common/menu-products.png) top center no-repeat;}
.menu-btn10{background:url(../img/common/menu-special.png) top center no-repeat;}
.menu-btn11{background:url(../img/common/menu-dlc.png) top center no-repeat;}
.menu-btn12{background:url(../img/common/menu-goods.png) top center no-repeat;}

.menu-btn1:hover{background:url(../img/common/menu-top-hover.png) top center no-repeat;}
.menu-btn2:hover{background:url(../img/common/menu-news-hover.png) top center no-repeat;}
.menu-btn3:hover{background:url(../img/common/menu-introduction-hover.png) top center no-repeat;}
.menu-btn4:hover{background:url(../img/common/menu-world-hover.png) top center no-repeat;}
.menu-btn5:hover{background:url(../img/common/menu-characters-hover.png) top center no-repeat;}
.menu-btn6:hover{background:url(../img/common/menu-syestem-hover.png?20201119) top center no-repeat;}
.menu-btn7:hover{background:url(../img/common/menu-movie-hover.png) top center no-repeat;}
.menu-btn8:hover{background:url(../img/common/menu-gallery-hover.png) top center no-repeat;}
.menu-btn9:hover{background:url(../img/common/menu-products-hover.png) top center no-repeat;}
.menu-btn10:hover{background:url(../img/common/menu-special-hover.png) top center no-repeat;}
.menu-btn12:hover{background:url(../img/common/menu-goods-hover.png) top center no-repeat;}
/*



.menu-btn11:hover{background:url(../img/common/menu-dlc-hover.png) top center no-repeat;}

 */

/* マーク */
#index .menu-btn1{background:url(../img/common/menu-top-hover.png) top center no-repeat;}
#news .menu-btn2{background:url(../img/common/menu-news-hover.png) top center no-repeat;}
#introduction .menu-btn3{background:url(../img/common/menu-introduction-hover.png) top center no-repeat;}
#world .menu-btn4{background:url(../img/common/menu-world-hover.png) top center no-repeat;}
#chara .menu-btn5{background:url(../img/common/menu-characters-hover.png) top center no-repeat;}
#syestem .menu-btn6{background:url(../img/common/menu-syestem-hover.png?20201119) top center no-repeat;}
#movie .menu-btn7{background:url(../img/common/menu-movie-hover.png) top center no-repeat;}
#gallery .menu-btn8{background:url(../img/common/menu-gallery-hover.png) top center no-repeat;}
#products .menu-btn9{background:url(../img/common/menu-products-hover.png) top center no-repeat;}
#special .menu-btn10{background:url(../img/common/menu-special-hover.png) top center no-repeat;}
#dlc .menu-btn11{background:url(../img/common/menu-dlc-hover.png) top center no-repeat;}
#goods .menu-btn12{background:url(../img/common/menu-goods-hover.png) top center no-repeat;}




.menu-btn:nth-child(even)::after { border-bottom: solid 1px #f3f9fd; bottom: 0; content: ""; display: block; position: absolute; left: 0; transition: all .3s ease; -webkit-transition: all .3s ease; width: 0;}
.menu-btn:nth-child(even):hover::after { width: 70%;}


.menu-btn:nth-child(odd)::after { border-bottom: solid 1px #f3f9fd; bottom: 0; content: ""; display: block; position: absolute; right: 0; transition: all .3s ease; -webkit-transition: all .3s ease; width: 0;}
.menu-btn:nth-child(odd):hover::after { width: 70%;}


.menu-new-icon{ position: absolute; 
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;}
.menu-btn1 .menu-new-icon,
.menu-btn3 .menu-new-icon,
.menu-btn5 .menu-new-icon,
.menu-btn7 .menu-new-icon,
.menu-btn9 .menu-new-icon,
.menu-btn11 .menu-new-icon{bottom: 5px; right: 0; margin: 0;}

.menu-btn2 .menu-new-icon,
.menu-btn4 .menu-new-icon,
.menu-btn6 .menu-new-icon,
.menu-btn8 .menu-new-icon,
.menu-btn10 .menu-new-icon,
.menu-btn12 .menu-new-icon{bottom: 5px; left: 0; margin: 0;}





@media screen and (max-width: 700px) {
.menu-wp-hidden{left: 0; max-width: auto; margin: 0 auto; overflow-y: auto; height: 800px;}
.menu-wp,.menu-wp2{max-height: 900px; height: auto; padding-top: 100%;}
.menu-title{width: 50%; max-width: 245px; margin: 0 auto; padding-bottom: 3%;}

.menu-txt{width: 100%; max-width: 600px; top:5%; left:0; right:auto;}
.menu-list{width: 100%; max-width: 700px; margin: 0 auto;}

.menu-btn{width: 98%; padding:0 1%; position: relative; height: 35px; margin-bottom: 4px;}

.menu-btn img{width: 100%; height: 100%;}
.menu-btn1{background:url(../img/common/menu-top_sp.png) top center no-repeat;}
.menu-btn2{background:url(../img/common/menu-news_sp.png) top center no-repeat;}
.menu-btn3{background:url(../img/common/menu-introduction_sp.png) top center no-repeat;}
.menu-btn4{background:url(../img/common/menu-world_sp.png) top center no-repeat;}
.menu-btn5{background:url(../img/common/menu-characters_sp.png) top center no-repeat;}
.menu-btn6{background:url(../img/common/menu-syestem_sp.png?20201119) top center no-repeat;}
.menu-btn7{background:url(../img/common/menu-movie_sp.png) top center no-repeat;}
.menu-btn8{background:url(../img/common/menu-gallery_sp.png) top center no-repeat;}
.menu-btn9{background:url(../img/common/menu-products_sp.png) top center no-repeat;}
.menu-btn10{background:url(../img/common/menu-special_sp.png) top center no-repeat;}
.menu-btn11{background:url(../img/common/menu-dlc_sp.png) top center no-repeat;}
.menu-btn12{background:url(../img/common/menu-goods_sp.png) top center no-repeat;}


.menu-btn1:hover{background:url(../img/common/menu-top_sp-hover.png) top center no-repeat;}
.menu-btn2:hover{background:url(../img/common/menu-news_sp-hover.png) top center no-repeat;}
.menu-btn3:hover{background:url(../img/common/menu-introduction_sp-hover.png) top center no-repeat;}
.menu-btn5:hover{background:url(../img/common/menu-characters_sp-hover.png) top center no-repeat;}
.menu-btn7:hover{background:url(../img/common/menu-movie_sp-hover.png) top center no-repeat;}
.menu-btn4:hover{background:url(../img/common/menu-world_sp-hover.png) top center no-repeat;}
.menu-btn6:hover{background:url(../img/common/menu-syestem_sp-hover.png?20201119) top center no-repeat;}
.menu-btn8:hover{background:url(../img/common/menu-gallery_sp-hover.png) top center no-repeat;}
.menu-btn9:hover{background:url(../img/common/menu-products_sp-hover.png) top center no-repeat;}
.menu-btn10:hover{background:url(../img/common/menu-special_sp-hover.png) top center no-repeat;}

.menu-btn12:hover{background:url(../img/common/menu-goods_sp-hover.png) top center no-repeat;}
/*


.menu-btn11:hover{background:url(../img/common/menu-dlc_sp-hover.png) top center no-repeat;}
*/


/* マーク */
#index .menu-btn1{background:url(../img/common/menu-top_sp-hover.png) top center no-repeat;}
#news .menu-btn2{background:url(../img/common/menu-news_sp-hover.png) top center no-repeat;}
#introduction .menu-btn3{background:url(../img/common/menu-introduction_sp-hover.png) top center no-repeat;}
#world .menu-btn4{background:url(../img/common/menu-world_sp-hover.png) top center no-repeat;}
#characters .menu-btn5{background:url(../img/common/menu-characters_sp-hover.png) top center no-repeat;}
#syestem .menu-btn6{background:url(../img/common/menu-syestem_sp-hover.png?20201119) top center no-repeat;}
#movie .menu-btn7{background:url(../img/common/menu-movie_sp-hover.png) top center no-repeat;}
#gallery .menu-btn8{background:url(../img/common/menu-gallery_sp-hover.png) top center no-repeat;}
#products .menu-btn9{background:url(../img/common/menu-products_sp-hover.png) top center no-repeat;}
#special .menu-btn10{background:url(../img/common/menu-special_sp-hover.png) top center no-repeat;}

#dlc .menu-btn11{background:url(../img/common/menu-dlc_sp-hover.png) top center no-repeat;}
#goods .menu-btn12{background:url(../img/common/menu-goods_sp-hover.png) top center no-repeat;}



.menu-new-icon{width: 44px; position: absolute; top:25px;}
.menu-new-icon img{height: 17px;}
.menu-btn1 .menu-new-icon,
.menu-btn3 .menu-new-icon,
.menu-btn5 .menu-new-icon,
.menu-btn7 .menu-new-icon,
.menu-btn9 .menu-new-icon,
.menu-btn11 .menu-new-icon{width: 50px; bottom: 10px; right: 0; left: 0; margin: -5px auto 0 auto;}

.menu-btn2 .menu-new-icon,
.menu-btn4 .menu-new-icon,
.menu-btn6 .menu-new-icon,
.menu-btn8 .menu-new-icon,
.menu-btn10 .menu-new-icon,
.menu-btn12 .menu-new-icon{width: 50px; bottom: 10px; right: 0; left: 0; margin: -5px auto 0 auto;}




}


@-webkit-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}








/* anime */

@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


@keyframes fade-inanime2 {
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}




.menu-banner{width: 95%; max-width: 250px; margin: 2% auto 0 auto;}








/* ページ内モーダル */

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:9999;
}
.modal__bg{
    background: rgba(237,49,99,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    /* background: #fff; */
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
}


.modal a#chara_close img{
  position:fixed;
  top:1%;right:2%;
  width:100px;
  opacity:1;
  z-index:112;
}


@media screen and (max-width: 700px) {
.modal a#chara_close img{
  width:50px;
}
}