@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@700&display=swap');
html ,body{ width: 100%; font-size:1rem; background-color: #141414; 
    font-family:'Noto Sans JP','Microsoft JhengHei', Helvetica, 'Maven Pro', 'Droid Sans','Myriad Pro', Verdana, Geneva, sans-serif;
    color: #f7f7f7; text-align: center; font-weight:300;letter-spacing:normal;
    position: relative;
    overflow-x: hidden;
}
div{ font-size:1rem; }


/* menu-------------------------------------------------- */
nav{
    width: 100%;
    position: fixed;
    top: 0;
    height: 80px;
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav .menu{
    transform: translateY(0%);
    transition: all .5s;
    background: rgba(7,12,19,0.85);
    height: 80px;
}
nav .menu_con{
    width: 100%;
}
nav ul.menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
nav ul.menu li{
    display: block;
    position: relative;
    height: 31px;
    margin:0 15px 0 28px;
}
nav ul.menu li a{
    display: block;
    height: 30px;
    width: 100%;
    text-indent: -9999px;
    background-position: top;
    transition: all .2s;
    opacity: 0.8;
}
nav ul.menu li.nav_top a{
    width: 52px;
    background: url(../images/nav_top.webp) top no-repeat;background-size: 100%;}
nav ul.menu li.nav_news a{
    width: 69px;
    background: url(../images/nav_news.webp) top no-repeat;background-size: 100%;}
nav ul.menu li.nav_world a{
    width: 90px;
    background: url(../images/nav_world.webp) top no-repeat;background-size: 100%;}
nav ul.menu li.nav_character a{
    width: 163px;
    background: url(../images/nav_character.webp) top no-repeat;background-size: 100%;}
nav ul.menu li.nav_system a{
    width: 103px;
    background: url(../images/nav_system.webp) top no-repeat;background-size: 100%;}
nav ul.menu li.nav_movie a{
    width: 78px;
    background: url(../images/nav_movie.webp) top no-repeat;background-size: 100%;}
nav ul.menu li.nav_charge a{
    width: 107px;
    background: url(../images/nav_charge.webp) top no-repeat;background-size: 100%;}
    nav ul.menu li.nav_quartz a{
        width: 107px;
        background: url(../images/nav_quartz.webp) top no-repeat;background-size: 100%;}
nav ul.menu li a.active,nav ul.menu li a.active:hover,nav ul.menu li a:hover{
    background-position: bottom center;
    opacity: 1;}
nav ul.menu li+li::before{
    content: '';
    display: block;
    width: 13px;
    height: 21px;
    background: url(../images/nav_line.webp);
    position: absolute;
    left: -28px;
    top: 50%;
    margin-top: -10px;
    opacity:0.25;
}
nav .menu.hide{
    transform: translateY(-100%);
}

.mob_soc_con,.mob_menu_icon,.mob_menu_icon,.menu_close,.mob_window{
    display: none;
}


/* soc_btn ------------------------------------------------------------ */
.float_box .soc_box a,.mob_soc_con .soc_box a{
    display: block;
    width: 42px;
    height: 42px;
    text-indent: -9999px;
    margin: 4px 0;
    opacity: 0.9;
    transition: all .25s;
    transform: scale(1);
}
.float_box .soc_box a.right_btn_twitter{
    width: 34px;
    height: 34px;
}
.float_box .soc_box a.right_btn_yt,.mob_soc_con .soc_box a.right_btn_yt{
    background: url(../images/right_btn_yt.webp) no-repeat center;
    background-size: 100% auto;
}
.float_box .soc_box a.right_btn_twitter,.mob_soc_con .soc_box a.right_btn_twitter{
    background: url(../images/right_btn_twitter.webp) no-repeat center;
    background-size: 100% auto;
}
.float_box .soc_box a.right_btn_wiki,.mob_soc_con .soc_box a.right_btn_wiki{
    background: url(../images/right_btn_wiki.webp) no-repeat center;
    background-size: 100% auto;
}
.float_box .soc_box a:hover{
    opacity: 1;
    transform: scale(1.1);
}
.mob_soc_con .soc_box{
    display: flex;
    justify-content: center;
}
.mob_soc_con .soc_box a{
    margin:10px 12px;
}
/* footer-------------------------------------------------- */

footer .link_con{
    width: 100%;
    height: auto;
    min-height: 63px;
    background: url(../images/footer_link_bg.webp);
    background-size: cover;
    font-size: 1.125em;
    margin-top: -92px;
}
.chara_footer footer .link_con{
    margin-top: 0;
}
footer .link_con,footer .link_con ul,footer .link_con ul li{
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .link_con li{
    margin:0 9px;
}
footer .link_con li+li::before{
    content: '';
    display: block;
    width: 1px;
    height: 28px;
    background:rgba(255,255,255,0.3);
    margin-right: 18px;
}
footer .link_con li a:hover{
    text-decoration: underline;
}
footer .footer_con{
    width: 100%;
    background: url(../images/footer_bg.webp);
    background-size: cover;
}
footer .cr_bottom .share_con ul,footer .cr_bottom .game_con,footer .cr_con .cr_logo,footer .cr_con{
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .cr_bottom{
    display: flex;
    align-items: center;
    justify-content: center;    
    width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
}

footer .cr_bottom .game_con{
    margin: 60px 0;
}
footer .cr_bottom .game_con .game_icon img{
    width: 135px;
}
footer .cr_bottom .game_con ul{
    padding-left: 30px;
}
footer .cr_bottom .game_con ul li{
    text-align: left;
    font-size: 0.875em;
    line-height:23px;
    letter-spacing:0.04rem;
}
footer .cr_bottom .share_con ul{
    margin-top: 35px;
}
footer .cr_bottom .share_con ul li{
    width: 47px;
    height: 47px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin:0 6px;
}
footer .cr_bottom .share_con ul li.footer_twitter a img{
    width: 29px;
    margin-top: 9px;
}
footer .cr_bottom .share_con ul li.footer_fb a img{
    width: 23px;
    margin-top:9px;
}
footer .cr_bottom .share_con ul li.footer_line a img{
    width: 34px;
    margin-top:8px;
}
footer .cr_bottom .share_con ul li a{
    display: block;
    width: 47px;
    height: 47px;   
    background: rgba(255,255,255,0.7);
    transition: all .4s;
}
footer .cr_bottom .share_con ul li a:hover{
    background: rgba(255,255,255,1);
}
footer .cr_con{
    padding-bottom: 35px;
}
footer .cr_con .cr_logo img:first-child{
    width: 157px;
    margin-right: 35px;
}
footer .cr_con .cr_logo img:last-child{
    width: 185px;
}
footer .cr_con .cr_txt{
    text-align: left;
    font-size: 0.75em;
    line-height: 18px;
    letter-spacing:0.08rem;
    margin-left: 35px;
}

/* gotop_btn-------------------------------------------------- */
#btn_top{ 
    position:fixed;
    right:40px;
    bottom: -100px;
    z-index: 888;
    opacity: 0.8;
    cursor: pointer;
}
#btn_top:hover{
    opacity: 1;
}

/* fancybox---------------------------------------------------- */
.fancybox-slide--iframe .fancybox-content, 
.fancybox-iframe {
	background: transparent;
}
.fancybox-bg{
    background-color:rgba(0, 0, 0, 1);
}
.fancybox-slide--iframe .fancybox-content {
    width:100%;
    height :100%;
    max-height :100%;
    margin: 0;
    overflow: hidden;
}
.fancybox-close-small{
    background:url(../images/close_bg.webp);
    width: 39px;
    height: 39px;
    opacity: 1;
    padding:0;
    position: absolute;
    right: 0px;
    top:11px;
    transition: all 0.4s;
}
.fancybox-close-small:hover{
    -webkit-filter: brightness(130%); /* Safari */
    filter: brightness(130%);
}
.fancybox-close-small::before{
    content: '';
    display: block;
    width: 29px;
    height: 29px;
    background: url(../images/close.webp);
    margin: 5px;
    transition: all 0.4s;
}
.fancybox-close-small:hover::before{
    transform: rotate(-90deg);
}
.fancybox-button svg{
    display: none;
}
@media screen and (max-width:1190px) {
    nav .menu.hide{
        transform: translateY(0%);
    } 
}


@media screen and (max-width:1150px) {
    footer .cr_bottom{
        width:90%;
    }

    .float_box{
        display: none;
    }

    nav {
        width:100%;
        height:auto;
        right: 0;
        z-index: 889;
    }
    .menu_con{
        height: 100vh;
        background: rgba(0,0,0,0.9);
        max-width:350px;
        right: 0;
        position: fixed;
        top: 0;
        padding-top:80px;
        overflow-y: auto;
        transition: all 0.5s;
        transform: translateX(100%);
    }
    .menu_con.menu_open_slide{
        transform: translateX(0);
    }
    nav .menu {
        background:none;
        height:auto;
    }
    nav ul.menu{
        flex-direction: column;
    }
    nav ul.menu li {
        height:9vh;
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 65px;
    }
    nav ul.menu li a{
        position: relative;
    }
    nav ul.menu li a.active::before,nav ul.menu li a.active::after{
        content: '';
        width:30px;
        height:30px;
        display: block;
        background: url(../images/nav_act_round.webp) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top:1px;
    }
    nav ul.menu li a.active::after{
        left: -38px;
    }
    nav ul.menu li a.active::before{
        right: -38px;
    }
    .mob_soc_con{
        display: block;
        margin-top: 15px;
    }
    .mob_menu_icon{
        display: block;
        width:80px;
        height:80px;
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(20,20,23,0.85);
    }
    .mob_menu_icon.bgnone{
        background: none;
    }
    .mob_menu_icon div{
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mob_menu_icon div.menu_close{
        display: none;
    }
    .mob_menu_icon div img{
        width:50%;
    }

    nav ul.menu li+li::before,nav ul.menu li::before{
        content: '';
        width:88%;
        height:5px;
        left:6%;
        background:url(../images/news/line.webp),
        url(../images/news/line_point.webp),
        url(../images/news/line_point.webp);
        background-repeat: repeat-x,no-repeat,no-repeat;
        background-position: left center,left bottom,right bottom;
        position: absolute;
        pointer-events: none;
        opacity: 1;
        margin-top: 0;
        top: auto;
        bottom: 0px;
    }
    footer .link_con{
        font-size: 1rem;
    }
    .mob_menu_icon div.menu_close img{
        padding-top: 25%;
    }
}
@media screen and (max-width:860px) {
    footer .link_con{
        padding:10px;
        margin-top: 0;
    }
    footer .link_con ul{
        flex-wrap: wrap;
        max-width: 500px;
        margin: 0 auto;
        line-height:2.5rem;
    }
    footer .link_con li+li::before{
        height:18px;
    }
    footer .link_con li+li:nth-child(4)::before{
        display: none;
    }
    footer .cr_bottom,footer .cr_con{
        flex-direction: column;
    }
    footer .cr_bottom .share_con ul li{
        margin: 0 12px;
    }
    footer .cr_con .cr_txt{
        margin-left: 0;
        margin-top: 20px;
        text-align: center;
    }
    footer .cr_bottom .game_con{
        margin: 30px 0;
    }
    footer .cr_bottom .share_con ul{
        margin-top: 20px;
        margin-bottom: 40px;
    }
}
@media screen and (max-width:650px) {
    footer .cr_bottom{
        width: 100%;
    }
    footer .cr_bottom .game_con{
        flex-direction: column;
    }

    footer .cr_bottom .game_con ul{
        padding-left: 0;
        margin-top: 15px;
    }
    footer .cr_bottom .game_con ul li{
        text-align: center;
    }
    .fancybox-close-small{
        top:0px;
    }

}
@media screen and (max-width:550px) {
    .menu_con{
        max-width:100%;
        padding-top:60px;
    }
    .mob_menu_icon{
        width:60px;
        height:60px;
    }
    .mob_menu_icon div{
        width:60px;
        height:60px;
    }
    nav ul.menu li {
        height:10vh;
    }
    footer .cr_con .cr_logo img:first-child {
        width:33%;
        margin-right: 6%;
    }
    footer .cr_con .cr_logo img:last-child{
        width: 42%;
    }
    .fancybox-slide--iframe .fancybox-content {
        max-height :100%;
    }
}
@media screen and (max-width:460px) {
    footer .link_con{
        font-size:14px;
    }
}
@media screen and (max-width:450px) {
    footer .link_con li+li::before{
        margin-left:6px;
        margin-right:6px;
    }
    footer .link_con li{
        margin: 0;
    }

}
@media screen and (max-width:400px) {
    footer .cr_bottom .game_con ul li{
        font-size:13px;
    }

}
@media screen and (max-width:372px) {
    footer .link_con{
        font-size:12px;
    }
    footer .cr_bottom .game_con ul{
        width: 90%;
    }
}
@media screen and (max-width:300px) {
footer .cr_con .cr_txt{
    width: 90%;
}
}