/* ----------------------------------------------
    frame
------------------------------------------------*/
.logo-m {
    display: none;
}

.nav-bg {
    /*display: none;*/
    /*position: fixed;*/
    top: 0;

    background: url(https://media.tentree-games.com/jp/msjp/images/nav-m.png) 0% 100% / cover no-repeat;
    z-index: 98;
    transition: all .3s ease;

}

.move-left {
    left: 10%;
    transition: all .3s ease;

}

.move-right {
    left: 100vh;
    transition: all .3s ease;

}

@media screen and (max-width:768px) {
    .nav-bg {
        width: 100%;
        height: 100vh;
        display: block;
        position: fixed;
    }

    .logo-m {
        display: block;
        position: absolute;
        width: 100%;
        height: 100px;
        z-index: 10;
        left: 0;
        top: 0;
        background: url(https://media.tentree-games.com/jp/msjp/images/logo-m.png) 0 top / 28% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/nav-bg.png) 0 0 /230% repeat-x;
    }

}

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

    .logo-m {

        background: url(https://media.tentree-games.com/jp/msjp/images/logo-m.png) 0 top / 28% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/nav-bg.png) 0 0 /216% repeat-x;
    }

}

/*-----------------------------------------------
    go-cbt
-----------------------------------------------*/
.go-cbt {
    width: 20%;
    height: 100%;
    max-width: 200px;
    z-index: 10;
    right: 0;
    top: 0;
    background: url(../images/go-cbt.png) center top / 100% no-repeat;
    position: absolute;
}

.go-cbt a {
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:1440px) {
    .go-cbt {
        right: 16%;
    }

}

@media screen and (max-width:1280px) {
    .go-cbt {
        right: 4%;
    }

}



@media screen and (max-width:768px) {
    .go-cbt {
        top: 11vh;
        right: 0;
        width: 22%;
        height: 60px;
    }

}

/*-----------------------------------------------
   menu
-----------------------------------------------*/

.nav-ctrl {
    width: 50px;
    height: 50px;
    position: fixed;
    margin: auto;
    z-index: 10;

    left: 0;
    right: 0;
    transition: all .5s ease;
    cursor: pointer;
    background: url(https://media.tentree-games.com/jp/msjp/images/nav-hide.png) center top no-repeat;

}

.nav-close,
.nav-open {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(203, 152, 152, 0.6);*/

}

.nav-open {
    display: none;
}


.nav-pos-5 {
    top: 10px;
    background: url(https://media.tentree-games.com/jp/msjp/images/nav-show.png) center top no-repeat;

}

.nav-pos-90 {
    top: 90px;
    background: url(https://media.tentree-games.com/jp/msjp/images/nav-hide.png) center top no-repeat;
}

.nav-in {
    top: 0px;
    opacity: 1;
}

.nav-out {
    top: -80px;
    opacity: 0;
}

nav {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    height: 80px;
    z-index: 98;
    background: url(https://media.tentree-games.com/jp/msjp/images/nav-bg.png) 0 0 repeat-x;
    transition: all .5s ease;
    /*opacity: 0;*/

}



/*nav:hover{
    transition: all .5s ease;
    opacity: 1;
    top: 0px;

}*/

nav:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: url(https://media.tentree-games.com/jp/msjp/images/logo-pc.png) 0 0 no-repeat;
    width: 235px;
    height: 250px;

}



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


    nav {
        left: 0;
        top: 0;
        width: 150%;
        height: 80px;
        background: url(https://media.tentree-games.com/jp/msjp/images/nav-bg.png) 0 0 repeat-x;

        transform: translate(-10%, -10%) scale(0.8);
    }

    .menu-list {
        left: 15%;

    }

    .nav-pos-90 {
        top: 80px;
    }

}

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


    nav {
        left: 0;
        top: 0;
        width: 150%;
        height: 71px;
        background: url(https://media.tentree-games.com/jp/msjp/images/nav-bg.png) 0 0 repeat-x;

        transform: translate(-15%, -18%) scale(0.7);
    }

    .nav-pos-90 {
        top: 70px;
    }



}

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

    nav {

        background: transparent;

        width: 100%;
        height: 0;
        transform: translate(0%, 0%) scale(1);
        /*display: none;*/
    }

    nav:before {
        content: '';
        background: transparent;

        pointer-events: none;
    }

    .menu {
        left: 50%;

        top: 30vh;
        position: absolute;
        transform: scale(0.9);
    }

    .menu .swiper-slide {
        text-align: right;
        cursor: pointer;
        color: #fff;
        font-size: 1rem;
        display: block;
        letter-spacing: 0.1rem;
        padding: 20px 0 0 0;
        min-width: 120px;
    }

    .menu .swiper-slide:nth-child(2) {
        margin: 0 0 0 -30px;
    }

    .menu .swiper-slide:nth-child(3) {
        margin: 0 0 0 -65px;
    }

    .menu .swiper-slide:nth-child(4) {
        margin: 0 0 0 -110px;
    }

    .menu .swiper-slide:nth-child(5) {
        margin: 0 0 0 -150px;
    }

    .menu .swiper-slide:nth-child(6) {
        margin: 0 0 0 -190px;
    }
}


/*-----------------------------------------------
    list
-----------------------------------------------*/





@media screen and (max-width:768px) {
    .menu-list {
        position: absolute;
        top: -100vh;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);

    }

    .menu-list ul {
        display: flex;

        z-index: 1;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .menu-list ul li {
        width: 100%;
        max-width: 160px;
    }

    .menu-list ul li a {
        padding: 0 10px;
        height: 4rem;
        line-height: 4rem;
        color: #ededed;
        font-size: 1rem;
        text-align: center;
        letter-spacing: .03rem;
        border-top: 1px solid rgba(255, 0, 0, 0.2);
    }

    .menu-list ul li a span {
        margin: -12px 0 0 0;
        display: block;
        height: 0;
        line-height: 0;
        color: #dc3545;
        font-size: 0.6rem;
        text-align: center;
        letter-spacing: .03rem;
        /*! border-top: 1px solid rgba(255, 0, 0, 0.2); */
    }



    .menu-list ul>li>a:hover {
        color: #dc3545;
    }

    .menu-list ul li:nth-child(1) a {
        border-top: 0px solid #555;
    }

    .menu-list ul li a:hover {
        width: 100%;
        color: #dc3545;

        text-align: center;
    }

    /*! open & close */
    .menu-list-open {
        top: 0;
        transition: all .5s ease;
    }

    .menu-list-close {
        top: -100vh;
        transition: all .8s ease;
    }


}



/*-----------------------------------------------
    menu-btn - m
-----------------------------------------------*/
.menu-btn {
    display: none;
}

@media screen and (max-width:768px) {
    .menu-btn {
        display: flex;
        position: fixed;
        top: 19px;
        right: 5%;
        z-index: 99;
        width: 14px;
        height: 14px;
        cursor: pointer;
        border: 0;
        transition: all .5s ease-in-out;
        background: transparent;
        align-items: center;
        justify-content: center;
    }

    .menu-btn_burger {
        position: relative;
        width: 12px;
        height: 2px;
        border-radius: 5px;
        transition: all .5s ease-in-out;
        background: #fff;
        box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    }

    .menu-btn_burger::before,
    .menu-btn_burger::after {
        position: absolute;
        left: 0;
        width: 15px;
        height: 2px;
        border-radius: 5px;
        content: '';
        transition: all .5s ease-in-out;
        background: #fffcfc;
        box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    }

    .menu-btn_burger::before {
        transform: translateY(-6px);
    }

    .menu-btn_burger::after {
        transform: translateY(6px);
    }

    /* ANIMATION */
    .menu-btn.open .menu-btn_burger {
        transform: translateX(-20px);
        background: transparent;
        box-shadow: none;
    }

    .menu-btn.open .menu-btn_burger::before {
        transform: rotate(45deg) translate(15px, -15px);
    }

    .menu-btn.open .menu-btn_burger::after {
        transform: rotate(-45deg) translate(15px, 15px);
    }
}

@media screen and (max-width:480px) {
    .menu-btn {

        top: 13px;

    }
}


@media screen and (max-width:376px) {
    .menu-btn {

        top: 10px;

    }
}


/*-----------------------------------------------
    social-link
-----------------------------------------------*/

.social-link {
    position: fixed;
    z-index: 50;
    max-width: 78px;
    width: 35%;
    height: 28px;
    top: 28px;
    /*! left: 102%; */
    right: 290px;
    /*! background: red; */
    right: 17vw;
}

.social-link ul {
    display: flex;
    max-width: 100%;
    margin-left: 0;
}

.social-link ul li {
    flex: 1;
    height: 100%;
    margin: 0 0%;
    background-color: #e8151582;
    text-indent: -300%;
    transition: all .3s ease;
}

.social-link ul li a {
    display: block;
    height: 100%;
    text-align: center;
    line-height: 80px;
}

.social-link ul li:hover {
    transform: scale(1.3);
    transition: all .3s ease;
}

.social-link ul li:nth-child(1) {
    background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 50% -1% /70% no-repeat;
}

.social-link ul li:nth-child(2) {
    background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 46% 22% /70% no-repeat;
}

.social-link ul li:nth-child(3) {
    background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 44% 46% /70% no-repeat;
}

.social-link ul li:nth-child(4) {
    background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 38% 71% /70% no-repeat;
}

.social-link ul li:nth-child(5) {
    background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 38% 94% /70% no-repeat;
}

@media screen and (max-width:1440px) {
    .social-link {

        right: 30%;
    }
}

@media screen and (max-width:1280px) {
    .social-link {

        right: 23%;
    }
}

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

    .social-link,
    .social-link-m {
        top: 55px;
        left: initial;
        right: 2%;
        width: 30%;
        height: 30px;
    }

    .social-link-box {
        top: 17vh;
        right: 2%;
        width: 30%;
        left: 0;
        right: 0;
        margin: auto;
    }


    .social-link ul li:nth-child(1) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 50% -2% /75% no-repeat;
    }

    .social-link ul li:nth-child(2) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 46% 22% /75% no-repeat;
    }

    .social-link ul li:nth-child(3) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 44% 47% /75% no-repeat;
    }

    .social-link ul li:nth-child(4) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 38% 72% /75% no-repeat;
    }

    .social-link ul li:nth-child(5) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 38% 94% /70% no-repeat;
    }
}


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

    .social-link,
    .social-link-m {
        top: 45px;
        left: initial;
        right: 2%;
        width: 13%;
        height: 25px;
    }

    .social-link-box {
        top: 17vh;
        right: 2%;
        width: 16%;
        left: 0;
        right: 0;
        margin: auto;
        height: 28px;
    }


    .social-link ul li:nth-child(1) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 50% -2% /75% no-repeat;
    }

    .social-link ul li:nth-child(2) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 46% 22% /75% no-repeat;
    }

    .social-link ul li:nth-child(3) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 44% 46% /75% no-repeat;
    }

    .social-link ul li:nth-child(4) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 38% 71% /75% no-repeat;
    }

    .social-link ul li:nth-child(5) {
        background: url(https://media.tentree-games.com/jp/msjp/images/social-link.png) 38% 97% /75% no-repeat;
    }
}

/*-----------------------------------------------
    download
-----------------------------------------------*/

.download {
    /*! position: absolute; */
    z-index: 50;
    /*----3個-----*/
    /*    width: 30%;
    */
    max-width: 440px;
    width: 80%;
    /*! max-width: 460px; */
    right: 0;
    /*-----------*/
    height: 40px;
    top: 40vh;
    margin: 0 0 0 8%;
    left: -4%;
}

.section.active .and {
    animation: logo 0.5s cubic-bezier(.250, .460, .450, .940) .6s both;
}

.section.active .ios {
    animation: logo 0.5s cubic-bezier(.250, .460, .450, .940) 0.7s both;
}

.section.active .pc_ {
    animation: logo 0.5s cubic-bezier(.250, .460, .450, .940) 0.8s both;
}

.download>ul {
    display: flex;
}

.download>ul>li {
    flex: 1;
    height: 100%;

    max-height: 44px;


    border-radius: 6px;
    margin: 1%;

    transform: scale(1);
    transition: all .3s ease;
}

.download>ul>li:hover {
    transform: scale(1.05);
}

.download>ul>li>a {
    display: block;

    height: 100%;
    text-align: center;
    line-height: 80px;
    transition: all .3s ease;
    border-radius: 5px;
}


.and a {
    background: #000 url(../images/download.jpg) no-repeat -2% center /470%;
}

.ios a {
    background: #000 url(../images/download.jpg) no-repeat 24% center /470%;
}

.apk a {
    background: #000 url(../images/download.jpg) no-repeat 74% center /480%;
}

.pc_ a {
    background: #000 url(../images/download.jpg) no-repeat 50% center /480%;
}

.gog a {
    background: #000 url(../images/download.jpg) no-repeat 101% center /480%;
}

@media screen and (min-width:1921px) {
    .download {



        top: 30vh;
        left: -5%;
    }
}


@media screen and (max-width:1400px) {
    .download>ul>li {

        /*----3個-----*/
        /*max-height: 45px;*/
        /*-----2個----*/
        max-height: 40px;



    }

    .download {


        /*! left: 6%; */

        /*! width: 20%; */
        /*! top: 60vh; */
        height: 30px;
    }
}

@media screen and (max-width:1280px) {
    .download {


        /*! left: 6%; */

        /*! width: 24%; */
        top: 47vh;
        height: 29px;
        left: -5%;
        width: 80%;
        margin: 0 0 0 5%;
    }
}

@media screen and (max-width:768px) {
    .download {

        width: 80%;
        height: 5vh;

        right: 0;
        left: 0;
        margin: auto;
        top: 0;
        position: absolute;
    }

    .download>ul>li {

        /*----3個-----*/
        /*max-height: 45px;*/
        /*-----2個----*/
        max-height: 35px;



    }

}


/* run - 跑光效果*/

@keyframes run {
    0% {
        right: -200%;
        filter: brightness(1);
    }

    50% {
        right: 300%;
        filter: brightness(1.5);
    }

    100% {
        right: -200%;
        filter: brightness(1);
    }
}

.run {
    animation: btn-open 1s ease-out 0s 1 both;
}


/*usage: add "run-effect" to class in Html */
.run-effect1,
.run-effect2,
.run-effect3 {
    position: relative;
    overflow: hidden;
}

.run-effect1:after,
.run-effect2:after,
.run-effect3:after {
    position: absolute;
    top: -10%;
    right: -200%;
    z-index: 0;
    opacity: .2;
    width: 50%;
    height: 120%;
    color: #fff;
    /*! content: ''; */
    transition: all 300ms;
    transform: skewX(40deg);
    animation: run 3.5s ease 0s infinite both;
    background: #fff;
    filter: brightness(.5);
}

.run-effect2:after {
    animation: run 3.5s ease 0.2s infinite both;
}

.run-effect3:after {
    animation: run 3.5s ease 0.4s infinite both;
}



/*-----------------------------------------------
    logo
-----------------------------------------------*/

/*.logo {
    position: absolute;
    right: -27%;
    bottom: 85px;
    width: 140%;


}

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



    .logo {
        bottom: 60px;
        right: -12%;
        bottom: 60px;
        width: 122%;


    }

}*/

/*-----------------------------------------------
    以下是OB新增
-----------------------------------------------*/

/*遮擋tip用*/
.link-pc ul li a:before,
.link-pc ul li a:before,
.link-pc ul li a:before,
.link-pc ul li a:before,
.link-pc ul li a:before,
.link-pc ul li a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 28%;
    top: 0;
    z-index: 0;
    /*! background: #000; */
    text-align: center;
    transition: all 0s ease;
    /*! opacity: 0; */
}



.link-pc {
    position: fixed;
    z-index: 98;
    left: 42%;
    top: 0;
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    -ms-transform: scale(1) translate3d(0, 0, 0);
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    width: 225px;
    height: 80px;
}

.link-pc ul {
    display: flex;
}

.link-pc ul li {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
}

.link-pc ul li a {
    color: #fff;
    position: absolute;
}

/*改選單*/
.link-pc ul li a span,
.link-pc ul li:hover a span,
.link-pc ul li:hover a.active span,
.link-pc ul li a.active span {

    background: transparent;
    position: absolute;
    top: 28%;
    left: 0;
    margin: auto;
    padding: 0;


    border-radius: 0;
    /*transition: all .3s ease;*/
    right: 0;
    text-align: center;
}


.link-pc ul li a span.fp-sr-only {
    width: 100%;
    height: 100%;
    background: transparent;
    clip: initial;
    color: #fff;
    text-align: center;
    z-index: 10;

    line-height: 70px;
    transition: all .3s ease;

}

.link-pc ul li:hover a span {
    width: 100%;
    height: 100%;
    clip: initial;
    /*background: url(https://media.tentree-games.com/jp/msjp/images/menu-focus.png) center top / 100% no-repeat;*/
    letter-spacing: 0.2rem;
    transition: all .3s ease;
}

.link-pc ul li a.active span,
.link-pc ul li:hover a.active span {
    width: 100%;
    height: 100%;
    clip: initial;
    background: url(https://media.tentree-games.com/jp/msjp/images/menu-focus.png) center top / 100% no-repeat;
    color: #fff;
    /*transition: all .3s ease;*/



}


/*改小字*/
.link-pc ul li:nth-child(1) a:after,
.link-pc ul li:nth-child(2) a:after,
.link-pc ul li:nth-child(3) a:after,
.link-pc ul li:nth-child(4) a:after,
.link-pc ul li:nth-child(5) a:after,
.link-pc ul li:nth-child(6) a:after {
    content: 'INFO';
    position: absolute;
    width: 100%;
    height: 20px;
    top: 59%;
    z-index: 999;
    color: #c12121;
    font-size: 0.65rem;
    letter-spacing: 0.2rem;
    font-weight: 500;
    text-align: center;
    transition: all .3s ease;
}

.link-pc ul li:nth-child(2) a:after {
    content: 'CONTACT';
}





.link-pc ul li:nth-child(1) a.active:after,
.link-pc ul li:nth-child(2) a.active:after {
    color: #fff;
    transition: all .3s ease;

}

@media screen and (min-width:1921px) {

    .link-pc {



        left: 35%;

    }

}

@media screen and (max-width:1800px) {
    .link-pc {
        left: 44%;
    }
}

@media screen and (max-width:1600px) {
    .link-pc {
        left: 49%;
    }
}

@media screen and (max-width:1440px) {
    .link-pc {
        left: 38%;
    }
}

@media screen and (max-width:1280px) {
    .link-pc {
        left: 46%;
    }
}

@media screen and (max-width:960px) {
    .link-pc {
        left: 54%;
    }
}

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



    .link-pc {

        transform: translate(0%, -20%) scale(0.7);
        width: 44%;
        height: 58px;
        left: 50%;
    }


    .link-pc ul li a span.fp-sr-only {


        line-height: 51px;


    }

    .link-pc ul li:nth-child(1) a:after,
    .link-pc ul li:nth-child(2) a:after {

        top: 58%;

    }

    .link-pc ul li a.active span,
    .link-pc ul li:hover a.active span {
        width: 100%;
        height: 100%;
        clip: initial;
        background: url(https://media.tentree-games.com/jp/msjp/images/menu-focus-m.png) center top / 100% no-repeat;
        color: #fff;



    }

}


@media screen and (max-width:376px) {
    .link-pc {

        transform: translate(0%, -20%) scale(0.7);
        width: 47%;
        height: 58px;
        left: 50%;
    }

}



/*-----------------------------------------------

    以下是fullpage的預設選單

-----------------------------------------------*/

/*遮擋tip用*/
#fp-nav ul li a:before,
#fp-nav ul li a:before,
#fp-nav ul li a:before,
#fp-nav ul li a:before,
#fp-nav ul li a:before,
#fp-nav ul li a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 28%;
    top: 0;
    z-index: 0;
    /*background: #000;*/
    text-align: center;
    transition: all 0s ease;
    /*! opacity: 0; */
}



#fp-nav {
    position: fixed;
    z-index: 98;
    left: 13%;
    top: 0;
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    -ms-transform: scale(1) translate3d(0, 0, 0);
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    width: 772px;
    height: 80px;
}

#fp-nav ul {
    display: flex;
}

#fp-nav ul li {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
}


/*改選單*/
#fp-nav ul li a span,
#fp-nav ul li:hover a span,
#fp-nav ul li:hover a.active span,
#fp-nav ul li a.active span {

    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;


    border-radius: 0;
    /*transition: all .3s ease;*/
}


#fp-nav ul li a span.fp-sr-only {
    width: 100%;
    height: 100%;
    background: transparent;
    clip: initial;
    color: #fff;
    text-align: center;
    z-index: 10;

    line-height: 70px;
    transition: all .3s ease;

}

#fp-nav ul li:hover a span {
    width: 100%;
    height: 100%;
    clip: initial;
    /*background: url(https://media.tentree-games.com/jp/msjp/images/menu-focus.png) center top / 100% no-repeat;*/
    letter-spacing: 0.2rem;
    transition: all .3s ease;
}

#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {
    width: 100%;
    height: 100%;
    clip: initial;
    background: url(https://media.tentree-games.com/jp/msjp/images/menu-focus.png) center top / 100% no-repeat;
    color: #fff;
    /*transition: all .3s ease;*/



}


/*改小字*/
#fp-nav ul li:nth-child(1) a:after,
#fp-nav ul li:nth-child(2) a:after,
#fp-nav ul li:nth-child(3) a:after,
#fp-nav ul li:nth-child(4) a:after,
#fp-nav ul li:nth-child(5) a:after,
#fp-nav ul li:nth-child(6) a:after {
    content: 'TOP';
    position: absolute;
    width: 100%;
    height: 20px;
    top: 59%;
    z-index: 999;
    color: #c12121;
    font-size: 0.65rem;
    letter-spacing: 0.2rem;
    font-weight: 500;
    text-align: center;
    transition: all .3s ease;
}


/*-----------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
    選單改這裡1
------------------------------------------------
------------------------------------------------
------------------------------------------------
-----------------------------------------------*/

 #fp-nav ul li:nth-child(2) a:after { content: 'NEWS';}
 #fp-nav ul li:nth-child(3) a:after { content: 'WORLD';}

 #fp-nav ul li:nth-child(4) a:after { content: 'ST';}
 #fp-nav ul li:nth-child(5) a:after { content: 'PILOT';}
 #fp-nav ul li:nth-child(6) a:after { content: 'FEATURE';}

/*#fp-nav ul li:nth-child(2) a:after {
    content: 'WORLD';
}

#fp-nav ul li:nth-child(3) a:after {
    content: 'ST';
}

#fp-nav ul li:nth-child(4) a:after {
    content: 'PILOT';
}

#fp-nav ul li:nth-child(5) a:after {
    content: 'FEATURE';
}*/

/*#fp-nav ul li:hover:nth-child(1) a:after,
#fp-nav ul li:hover:nth-child(2) a:after {
    color: #fff;
    color: #c12121;

}*/

#fp-nav ul li:nth-child(1) a.active:after,
#fp-nav ul li:nth-child(2) a.active:after,
#fp-nav ul li:nth-child(3) a.active:after,
#fp-nav ul li:nth-child(4) a.active:after,
#fp-nav ul li:nth-child(5) a.active:after,
#fp-nav ul li:nth-child(6) a.active:after {
    color: #fff;
    transition: all .3s ease;

}


/*-----------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
    選單改這裡2
------------------------------------------------
------------------------------------------------
------------------------------------------------
-----------------------------------------------*/
/*顯示項目*/
/*#fp-nav ul li:nth-child(5),*/
/*#fp-nav ul li:nth-child(6),*/
#fp-nav ul li:nth-child(7)

/*#fp-nav ul li:nth-child(4) ,
 #fp-nav ul li:nth-child(5) ,
 #fp-nav ul li:nth-child(6)*/
    {
    display: none;

}



/*遮掉footer*/
#fp-nav ul li:nth-child(7),
#fp-nav ul li:nth-child(7) a {
    opacity: 0;
    pointer-events: none;
}




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

    #fp-nav {


        transform: translate(-10%, -10%) scale(0.8);

        left: 15%;

    }



}

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


    #fp-nav {

        transform: translate(-15%, -20%) scale(0.6);
    }



}

/*-----------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
    選單改這裡3
------------------------------------------------
------------------------------------------------
------------------------------------------------
-----------------------------------------------*/
@media screen and (max-width:768px) {

    .go-top-m a {
        position: absolute;
        width: 25%;
        height: 80px;
        /*! background: rgba(203, 152, 152, 0.6); */
        z-index: 10;
        top: 0;
        left: 0;

        max-width: 110px;
    }

    #fp-nav {

        transform: translate(0%, -15%) scale(0.7);
        width: 76%;
        height: 59px;
        left: 20%;
        z-index: 90;
    }




    /*顯示項目*/
    /*#fp-nav ul li:nth-child(1),*/

    #fp-nav ul li:nth-child(3),

    #fp-nav ul li:nth-child(6)
    /*#fp-nav ul li:nth-child(6)*/
    /*#fp-nav ul li:nth-child(7)*/
    /*#fp-nav ul li:nth-child(4)*/
    /*#fp-nav ul li:nth-child(5)*/
    /*#fp-nav ul li:nth-child(6)*/
        {
        display: none;

    }



    #fp-nav ul li a span.fp-sr-only {


        line-height: 51px;


    }

    #fp-nav ul li:nth-child(1) a:after,
    #fp-nav ul li:nth-child(2) a:after,
    #fp-nav ul li:nth-child(3) a:after,
    #fp-nav ul li:nth-child(4) a:after,
    #fp-nav ul li:nth-child(5) a:after,
    #fp-nav ul li:nth-child(6) a:after {

        top: 58%;

    }

    #fp-nav ul li a.active span,
    #fp-nav ul li:hover a.active span {
        width: 100%;
        height: 100%;
        clip: initial;
        background: url(https://media.tentree-games.com/jp/msjp/images/menu-focus-m.png) center top / 100% no-repeat;
        color: #fff;



    }

}

@media screen and (max-width:376px) {
    #fp-nav {

        transform: translate(0%, -22%) scale(0.7);
        width: 71%;
        height: 53px;
        left: 17%;
    }
}




/*-----------------------------------------------
    menu-bottom
-----------------------------------------------*/

.menu-bottom {
    position: absolute;
    right: 13vw;
    bottom: 23%;
    width: 25%;
    /*! height: 25px; */
    /*! background: rgba(228, 228, 228, 0.4); */

    width: 15%;
    /*! margin: 10px auto 0; */
    z-index: 10;
    border-radius: 5px;
    /*! text-align: right; */
}

.menu-bottom ul li:after {
    content: '';
    background: rgb(162, 28, 30);
    width: 5px;
    height: 5px;
    position: absolute;
    top: 40%;
    right: -13px;

}

.menu-bottom ul {
    display: flex;
    width: 98%;
    padding: 0;
    margin: auto;
    flex-direction: column;
    /*! background: rgba(228, 228, 228, 0.4); */
    height: 100%;
}

.menu-bottom ul li {
    padding: 0;
    list-style: none;
    flex: 1;
}

.menu-bottom a {
    font-size: 0.7rem;
    width: 100%;
    height: 100%;
    text-align: right;
    color: #555;
    line-height: 25px;
    font-weight: 500;
    letter-spacing: 0.02rem;
    transition: all .3s ease;
}

.menu-bottom a:hover {
    color: rgba(0, 139, 193, 0.6);
    transition: all .3s ease;

    /*! background: rgba(228, 228, 228, 0.4); */
}

.menu-bottom a:before {
    content: '';
    width: 0%;
    height: 1px;
    background: rgba(0, 139, 193, 0.3);
    position: absolute;
    /*! left: 0; */
    bottom: 0;
    transition: all .5s ease;
    margin: auto;


    /*! left: 0; */
    right: 0;
}


.menu-bottom a:hover:before {
    width: 45%;

    transition: all .5s ease;



    right: 0;
    bottom: 0;
}

@media screen and (max-width:1600px)
{
.menu-bottom {
    transform: scale(0.75) translate(7%,0%);
    /*! right: 0%; */

    width: 25%;
}
}
@media screen and (max-width:1400px)
{
.menu-bottom {
    transform: scale(0.8) translate(7%,13%);

}
}

@media screen and (max-width:960px)
{
.menu-bottom {
    transform: scale(0.7) translate(7%,27%);

}
}


@media screen and (max-width:768px)
{
.menu-bottom ul li:after {
    content: '';
    background: rgb(162, 28, 30);
    width: 5px;
    height: 5px;
    position: absolute;
    top: 40%;
    left: -11px;

}
.menu-bottom ul {
    flex-direction:initial;
}
.menu-bottom ul li:nth-child(1) {

    flex: 0.9;
}
.menu-bottom ul li:nth-child(2) {

    flex: 1.5;
}
.menu-bottom ul li:nth-child(3) {

    flex: 1.3;
}

.menu-bottom {
    transform: scale(0.9) translate(0%,0%);
    /*! right: initial; */

    /*! left: -8%; */
    top: 2%;
    right: 0;
    left: 5%;
    margin: auto;
    width: 95%;
    bottom: inherit;
}
.menu-bottom a {

    text-align: left;

    padding: 1px 0;
}
.menu-bottom a:hover:before {
    content: '';
    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
}
.menu-bottom a:before {
    content: '';


    left: 0;
    right: 0;
}

}

@media screen and (max-width:376px)
{
.menu-bottom {
    transform: scale(0.8) translate(0%,0%);

}
}