/*  index
-------------------------------------------------
    - Import
    - text
    - df-width
    - layout
-------------------------------------------------*/



/*-----------------------------------------------
     Import
-----------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');





/*-----------------------------------------------
     dicount
-----------------------------------------------*/
.discount{
    position: absolute;
    left: 14%;
    top: -247%;
    width: 10%;
    height: 95px;
    background: url(https://media.tentree-games.com/jp/msjp/images/discount.png) center top / 100% no-repeat;
    animation:discountText 1s ease-out 0s infinite both;


    max-width: 100px;
    cursor: pointer;
}

.discount a {
    width: 100%;
    height: 100%;
    display: block;
    /*background: #000 url(https://tw-media.game-beans.com/KZ/officesite/discount-btn.jpg) no-repeat -10% center /130%;*/
}

.discount >div{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


@keyframes discountEffect
{
0%,100%{filter:brightness(1);opacity:0;transform:translate3d(0%,-7%,0) scale(0);}
50%{filter:brightness(1.5);opacity:1;transform:translate3d(0%,20%,0) scale(1.5);}
}

@keyframes discountText
{
0%{filter:brightness(1);opacity:1;transform:translate3d(0%,0%,0) scale(1);}
50%{filter:brightness(1);opacity:1;transform:translate3d(0%,-2%,0) scale(1.05);}
100%{filter:brightness(1);opacity:1;transform:translate3d(0%,0%,0) scale(1);}
}


.effect-discount1{ background: url(https://tw-media.game-beans.com/KZ/officesite/news/show04.png) center top / 100% no-repeat ;animation:discountEffect 1.5s ease-out 0s infinite both;pointer-events: none;}
.effect-discount2{ background: url(https://tw-media.game-beans.com/KZ/officesite/news/show05.png) center top / 100% no-repeat ;animation:discountEffect 2s ease-out 0.2s infinite both;pointer-events: none;}
.effect-discount3{ background: url(https://tw-media.game-beans.com/KZ/officesite/news/show06.png) center top / 100% no-repeat ;animation:discountEffect 1.7s ease-out 0s infinite both;pointer-events: none;}


@media screen and (max-width:1600px)
{
.discount{
    left: 18%;
    top: -186%;
    width: 10%;
    height: 95px;
}
}

@media screen and (max-width:1440px)
{
.discount{
    left: 15%;
    top: -154%;
    width: 10%;
    height: 95px;
}
}
@media screen and (max-width:1280px)
{
.discount{
    left: 15%;
    top: -160%;
    width: 10%;
    height: 95px;
}
}
@media screen and (max-width:768px)
{

.discount{
    position: absolute;
    left: 5%;
    top: -130%;
    width: 14%;
    height: 90px;
    background: url(https://media.tentree-games.com/jp/msjp/images/discount.png) center top / 100% no-repeat;


}
}


/*-----------------------------------------------
    opening-fix
-----------------------------------------------*/

.opening-fix {
    animation: opening-fix .5s cubic-bezier(.550, .085, .680, .530) 0s 1 both;
}

@keyframes opening-fix {

    0%,
    30% {
        transform: scale(1.2);
        opacity: 0;
        filter: blur(5px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

/*-----------------------------------------------
     text
-----------------------------------------------*/

h1,
h2 {
    color: #f1355f;
    font-size: 1.2rem;
    font-weight: 500;

}

p {
    font-weight: 400;
}

/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    height: 100%;
    max-width: 1900px;
    padding: 0;
    /*! overflow: hidden; */
}

@media screen and (max-width:1600px) {
    .df-width {
        height: 100%;
        max-width: 1500px;
    }
}

@media screen and (max-width:1440px) {
    .df-width {
        height: 100%;
        max-width: 1300px;
    }
}

@media screen and (max-width:1280px) {
    .df-width {
        height: 100%;
        max-width: 1100px;
    }
}

@media screen and (max-width:768px) {
    .df-width {
        height: 115vh;
        max-width: 768px;
    }
}




@media screen and (min-width:1921px) {
    .df-width {
        height: 100%;
        max-width: 2400px;
    }
}



/*  layout
-------------------------------------------------
    - html,body
    - main
    - header
    - section
    - footer
-------------------------------------------------*/



/*prelodd*/
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    content: '';
    background-image:

        url(https://media.tentree-games.com/jp/msjp/images/feature/001.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/002.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/003.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/004.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/005.jpg),

        url(https://media.tentree-games.com/jp/msjp/images/feature/sl001.png),
        url(https://media.tentree-games.com/jp/msjp/images/feature/sl002.png),
        url(https://media.tentree-games.com/jp/msjp/images/feature/sl003.png),
        url(https://media.tentree-games.com/jp/msjp/images/feature/sl004.png),
        url(https://media.tentree-games.com/jp/msjp/images/feature/sl005.png),

        url(https://media.tentree-games.com/jp/msjp/images/mecha/m01-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m02-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m03-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m04-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m05-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m06-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m07-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/mecha/m08-2.png),

        url(https://media.tentree-games.com/jp/msjp/images/hero/h01-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h02-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h03-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h04-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h05-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h06-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h07-2.png),
        url(https://media.tentree-games.com/jp/msjp/images/hero/h08-2.png),

        url(https://media.tentree-games.com/jp/msjp/images/world/001.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/world/002.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/world/003.jpg),

        url(https://media.tentree-games.com/jp/msjp/images/feature/001.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/002.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/003.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/004.jpg),
        url(https://media.tentree-games.com/jp/msjp/images/feature/005.jpg);

}



@media screen and (max-width:768px) {
    body::before {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0;
        width: 1px;
        height: 1px;
        content: '';
        background-image:

            url(https://media.tentree-games.com/jp/msjp/images/mecha/001-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/002-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/003-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/004-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/005-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/006-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/007-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/mecha/008-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/001-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/002-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/003-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/004-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/005-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/006-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/007-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/hero/008-m.png),
            url(https://media.tentree-games.com/jp/msjp/images/world/001-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/world/002-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/world/003-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/feature/001-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/feature/002-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/feature/003-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/feature/004-m.jpg),
            url(https://media.tentree-games.com/jp/msjp/images/feature/005-m.jpg);

    }
}


/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    max-width: 1920px;
    margin: auto;
    animation: blur .8s ease-out 0s 1 both;
    background: url(https://media.tentree-games.com/jp/msjp/images/index_01.jpg) center 0 no-repeat;
}

section {
    width: 100%;
    text-align: justify;
    height: 100%;
    background: #777;
}


/*-----------------------------------------------
    section-hover
-----------------------------------------------*/
.section.active {
    animation: into 1s ease both;
}

.no-effect.active {
    animation: into 0s ease both;
}

.section.active .fog {
    animation: into 1s cubic-bezier(.250, .460, .450, .940) .5s both;
}



@keyframes into {
    0% {
        opacity: 0;
        transform: scale(1.4) translate3d(-10%, -10%, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate3d(0%, 0%, 0);
    }
}

/*-----------------------------------------------
    page-frame
-----------------------------------------------*/

.pages {
    position: relative;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.wrap-box {
    position: relative;
    top: 0%;
    right: 0;
    left: 0;
    margin: 0px auto 0;
    padding: 0;
    z-index: 3;
    width: 98%;
    height: 95%;
    max-width: 1700px;
    /*! background: #55555563; */
}



.top { /*! background: url(https://media.tentree-games.com/jp/msjp/images/top.jpg) 50% 50% / cover no-repeat; */ background: #000;}
.news { background: url(https://media.tentree-games.com/jp/msjp/images/news/news.jpg) 100% 100% / cover no-repeat; }
.mecha { background: url(https://media.tentree-games.com/jp/msjp/images/mecha/bg.jpg) 0 50% / cover no-repeat; }
.hero { background: url(https://media.tentree-games.com/jp/msjp/images/hero/bg.jpg) 0 50% / cover no-repeat; }

.world {
    width: 100%;
    height: 100%;
    background: #000;

}

.world-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    animation: into .8s cubic-bezier(.250, .460, .450, .940) 0s both;
}

.world-bg1{background: url(https://media.tentree-games.com/jp/msjp/images/world/001.jpg) 0 15% / cover no-repeat;}
.world-bg2{background: url(https://media.tentree-games.com/jp/msjp/images/world/002.jpg) 0 15% / cover no-repeat;}
.world-bg3{background: url(https://media.tentree-games.com/jp/msjp/images/world/003.jpg) 0 15% / cover no-repeat;}




.feature {
    width: 100%;
    height: 100%;
    background: #000;

}

.feature-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    animation: into .8s cubic-bezier(.250, .460, .450, .940) 0s both;
}

.feature-bg1{background: url(https://media.tentree-games.com/jp/msjp/images/feature/001.jpg) 0 15% / cover no-repeat;}
.feature-bg2{background: url(https://media.tentree-games.com/jp/msjp/images/feature/002.jpg) 0 15% / cover no-repeat;}
.feature-bg3{background: url(https://media.tentree-games.com/jp/msjp/images/feature/003.jpg) 0 15% / cover no-repeat;}


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

    .wrapper ,
    #wrapper { max-width: initial; }

}

@media screen and (max-width:768px) {
.top { background: #000 url(https://media.tentree-games.com/jp/msjp/images/top-m.jpg) 50% 50% / 100% no-repeat; }
.news { background: #000 url(https://media.tentree-games.com/jp/msjp/images/news/news-m.jpg) 100% -50% / 100% no-repeat; }
.mecha { background: url(https://media.tentree-games.com/jp/msjp/images/mecha/bg-m.jpg) 0 100% / cover no-repeat; }
.hero { background: url(https://media.tentree-games.com/jp/msjp/images/hero/bg-m.jpg) 0 50% / cover no-repeat; }

.world-bg1 { background: url(https://media.tentree-games.com/jp/msjp/images/world/001-m.jpg) 0 15% / cover no-repeat; }
.world-bg2 { background: url(https://media.tentree-games.com/jp/msjp/images/world/002-m.jpg) 0 15% / cover no-repeat; }
.world-bg3 { background: url(https://media.tentree-games.com/jp/msjp/images/world/003-m.jpg) 0 15% / cover no-repeat; }

.feature-bg1 { background: url(https://media.tentree-games.com/jp/msjp/images/feature/001-m.jpg) 0 100% / cover no-repeat; }
.feature-bg2 { background: url(https://media.tentree-games.com/jp/msjp/images/feature/002-m.jpg) 0 100% / cover no-repeat; }
.feature-bg3 { background: url(https://media.tentree-games.com/jp/msjp/images/feature/003-m.jpg) 0 100% / cover no-repeat; }
.feature-bg4 { background: url(https://media.tentree-games.com/jp/msjp/images/feature/004-m.jpg) 0 100% / cover no-repeat; }
.feature-bg5 { background: url(https://media.tentree-games.com/jp/msjp/images/feature/005-m.jpg) 0 100% / cover no-repeat; }


}


.logo{
    position: absolute;
    width: 32%;
    max-width: 550px;
    top: 19%;
    left: 0;
    right: 0;
    margin: auto;
}
.section.active .logo {
    animation: logo 0.8s cubic-bezier(.250, .460, .450, .940) .5s both;
}
@keyframes logo {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.4) translate3d(10%, 10%, 0);
    }

    100% {
        opacity: 1;
         filter: blur(0px);
        transform: scale(1) translate3d(0%, 0%, 0);
    }
}
@media screen and (max-width:1280px)
{
.logo{
    padding: 1%;
}
}

@media screen and (max-width:768px)
{
.logo{
    width: 100%;
    top: 89%;
    left: 0;
    right: 0;
    margin: auto;
    height: 9vh;
}
}


/*-----------------------------------------------
    mecha
-----------------------------------------------*/

.ma-menu {
    max-width: 490px;
    height: 50px;
    position: absolute;
    left: 9%;
    top: 47%;
    z-index: 10;
    width: 30%;
}

.ma-menu ul {
    display: flex;
    width: 100%;
    height: 100%;

    flex-wrap: wrap;
}

.ma-menu ul li {
    width: 24%;
    height: 100%;
    margin: 1%;
    background: rgba(203, 152, 152, 0.6);
    border: 1px solid #000;
    cursor: pointer;
}

.ma-menu ul li.go-m01 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m01.png) 0 50% / cover no-repeat;
    border: 3px solid #b10000;
}

.ma-menu ul li.go-m02 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m02.png) 0 50% / cover no-repeat;
}

.ma-menu ul li.go-m03 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m03.png) 0 50% / cover no-repeat;
}

.ma-menu ul li.go-m04 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m04.png) 0 50% / cover no-repeat;
}

.ma-menu ul li.go-m05 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m05.png) 0 50% / cover no-repeat;
}

.ma-menu ul li.go-m06 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m06.png) 0 50% / cover no-repeat;
}

.ma-menu ul li.go-m07 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m07.png) 0 50% / cover no-repeat;
}

.ma-menu ul li.go-m08 {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m08.png) 0 50% / cover no-repeat;
}



.mecha-sl {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/sl.png) 10% 40% / 78% no-repeat;
    pointer-events: none;
}

.mecha-line {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m01-1.png) 0 100% / cover no-repeat;
    pointer-events: none;
}

.mecha-color {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    left: 0;
    z-index: 2;
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m01-2.png) 0 100% / cover no-repeat;
    pointer-events: none;
}

.mecha-name {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m01-3.png) 0 0% / cover no-repeat;
    pointer-events: none;
}

.mecha-data {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/m01-4.png) 0 0% / cover no-repeat;
    pointer-events: none;
}

.section.active .mecha-sl {
    animation: mechaData .5s cubic-bezier(.250, .460, .450, .940) .5s both;
}

.section.active .mecha-name {
    animation: mechaData .5s cubic-bezier(.250, .460, .450, .940) 0.2s both;
}

.section.active .mecha-line {
    /*animation: mechaLine .6s cubic-bezier(.250, .460, .450, .940) 0s both;*/
    animation: heroLine 0.8s cubic-bezier(.250, .460, .450, .940) 0s both;

}

.section.active .mecha-color {
    /*animation: mechaColor .5s cubic-bezier(.250, .460, .450, .940) 0.1s both;*/
    animation: heroColor 0.9s cubic-bezier(.250, .460, .450, .940) 0s both;
}


@keyframes mechaLine {
    0% {
        opacity: 0;
        transform: scale(1.2) translate3d(0%, 5%, 0);
        clip-path: circle(50% at 0 4%);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate3d(0%, 0%, 0);
        clip-path: circle(138.1% at 0 4%);
    }
}

@keyframes mechaColor {
    0% {
        transform: scale(1.2) translate3d(0%, 5%, 0);
        opacity: 0;
        clip-path: circle(50% at 0 4%);
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: scale(1) translate3d(0%, 0%, 0);
        opacity: 1;
        clip-path: circle(138.1% at 0 4%);
    }
}

@keyframes mechaData {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}




@media screen and (min-width:1921px) {
.mecha-sl {
    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/sl.png) 30% 25% / 65% no-repeat;
}
}



@media screen and (max-width:1400px) {
    .ma-menu {
        max-width: 490px;
        height: 40px;
        left: 13%;
        top: 50%;
        width: 30%;
    }
}


@media screen and (max-width:768px)
{
 .mecha-name,.mecha-data,.mecha-color,.mecha-line,.ma-menu{
    display: none;
 }

.mecha-sl {

    background: url(https://media.tentree-games.com/jp/msjp/images/mecha/sl-m.png) 50% 93% / 90% no-repeat;
    z-index: 6;
}
}


/*-----------------------------------------------
    hero
-----------------------------------------------*/

.hero-menu {
    max-width: 490px;
    height: 50px;
    position: absolute;
    left: 12%;
    top: 55%;
    z-index: 10;
    width: 30%;
}

.hero-menu ul {
    display: flex;
    width: 100%;
    height: 100%;

    flex-wrap: wrap;
}

.hero-menu ul li {
    width: 24%;
    height: 100%;
    margin: 1%;
    background: rgba(203, 152, 152, 0.6);
    border: 1px solid #000;
    cursor: pointer;
}

.hero-menu ul li.go-h01 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h01.png) 50% 50% / cover no-repeat;
    border: 3px solid #b10000;
}

.hero-menu ul li.go-h02 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h02.png) 50% 50% / cover no-repeat;
}

.hero-menu ul li.go-h03 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h03.png) 50% 50% / cover no-repeat;
}

.hero-menu ul li.go-h04 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h04.png) 50% 50% / cover no-repeat;
}

.hero-menu ul li.go-h05 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h05.png) 50% 50% / cover no-repeat;
}

.hero-menu ul li.go-h06 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h06.png) 50% 50% / cover no-repeat;
}

.hero-menu ul li.go-h07 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h07.png) 50% 50% / cover no-repeat;
}

.hero-menu ul li.go-h08 {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h08.png) 50% 50% / cover no-repeat;
}



.hero-sl {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*! opacity: 0; */
    z-index: 1;
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/sl.png) 26% 64% / 74% no-repeat;
    pointer-events: none;
}

.hero-line {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h01-1.png) 0 100% / cover no-repeat;
    pointer-events: none;
}

.hero-color {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    left: 0;
    z-index: 2;
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h01-2.png) 0 100% / cover no-repeat;
    pointer-events: none;
}

.hero-name {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h01-3.png) 0 0% / cover no-repeat;
    pointer-events: none;
}

.hero-data {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/h01-4.png) 0 50% / cover no-repeat;
    pointer-events: none;
}

.section.active .hero-sl {
    animation: mechaData .5s cubic-bezier(.250, .460, .450, .940) .5s both;
}

.section.active .hero-name {
    animation: mechaData .5s cubic-bezier(.250, .460, .450, .940) 0.2s both;
}

.section.active .hero-line {
    animation: heroLine 1s cubic-bezier(.250, .460, .450, .940) 0s both;
}

.section.active .hero-color {
    animation: heroColor 1.05s cubic-bezier(.250, .460, .450, .940) 0s both;
}

@keyframes heroLine {
    0% {
        transform: scale(1.2) translate3d(0%, 3%, 0);
        opacity: 0;
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    }




    100% {
        transform: scale(1) translate3d(0%, 0%, 0);
        opacity: 1;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes heroColor {
    0% {
        transform: scale(1.2) translate3d(0%, 3%, 0);
        opacity: 0;
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    }

    40% {
        opacity: 0;
        filter: blur(1px);

    }

    70% {
        filter: blur(0px);
    }


    100% {
        transform: scale(1) translate3d(0%, 0%, 0);
        opacity: 1;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
}
@media screen and (min-width:1921px) {
.hero-sl {
    background: url(https://media.tentree-games.com/jp/msjp/images/hero/sl.png) 48% 50% / 65% no-repeat;
}
}
@media screen and (max-width:1600px) {
    .hero-menu {
        max-width: 480px;
        height: 40px;
        left: 16%;
        top: 54%;
        width: 27%;

    }
}


@media screen and (max-width:1400px) {
    .hero-menu {
        max-width: 480px;
        height: 40px;
        left: 15%;
        top: 52%;
        width: 25%;
    }
}

@media screen and (max-width:768px)
{
 .hero-name,.hero-data,.hero-color,.hero-line,.hero-menu{
    display: none;
 }

.hero-sl {

    background: url(https://media.tentree-games.com/jp/msjp/images/hero/sl-m.png) 50% 93% / 90% no-repeat;
    z-index: 6;
}
}




/*-----------------------------------------------
    world
-----------------------------------------------*/

.world-cover {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://media.tentree-games.com/jp/msjp/images/world/w-3_01.png) 0 15% / cover no-repeat;
    z-index: 10;
    pointer-events: none;
    animation: worldCover .2s ease-out 0.3s 1 both;
}

.world-frame {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://media.tentree-games.com/jp/msjp/images/world/world-frame.png) 0 15% / cover no-repeat;
    z-index: 10;
    pointer-events: none;
    /*animation: worldCover .5s ease-out 0s 1 both;*/
}

@keyframes worldBg {
    0% {
        /*transform: scale(1.2);*/
        filter: blur(10px);
    }

    100% {
        /*transform: scale(1);*/
        filter: blur(0px);
    }
}

@keyframes worldCover {
    0% {
        filter: blur(5px) brightness(1);
        /*! opacity: 0.9; */
    }

    100% {
        filter: blur(0px) brightness(1);
        /*! opacity: 1; */
    }
}


.world-btn ul li.go-w0 {
    color: #fff;
}

.go-w1 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    /*background: rgba(203, 152, 152, 0.6);*/

}

.world-btn {
    position: absolute;
    width: 30%;
    height: 70px;
    left: 29%;
    bottom: 40%;
    z-index: 15;

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

.world-btn ul {
    display: flex;
    opacity: 0.9;

}

.world-btn ul li {
    width: 45px;
    height: 45px;
    border-radius: 0;
    background: #b31f21;
    margin: 5px;
    border: 1px solid #b71414;
    color: #000;
    cursor: pointer;
    line-height: 2.5;
    font-size: 1.2rem;
    text-align: center;
}

@media screen and (max-width:1600px)
{
.world-btn {


    transform: scale(0.7) translate(-20%,5%);
}
}





@media screen and (max-width:768px) {
    .world-btn {
        position: absolute;
        width: 30%;
        height: 50px;
        left: 18%;
        bottom: 27%;
        z-index: 15;

    }

    .world-btn ul li {
        width: 45px;
        height: 35px;
        line-height: 2;
        font-size: 1.2rem;
    }

}



/*-----------------------------------------------
    feature
-----------------------------------------------*/

.feature-btn ul li.go-f0 {
    color: #fff;
}

.go-f1 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    /*background: rgba(203, 152, 152, 0.6);*/

}

.feature-btn {
    position: absolute;
    width: 30%;
    height: 70px;
    left: 42%;
    bottom: 11%;
    z-index: 15;

    transform: scale(0.85) translate(15%,15%);
}

.feature-btn ul {
    display: flex;
    opacity: 0.9;

}

.feature-btn ul li {
    width: 45px;
    height: 45px;
    border-radius: 0;
    background: #b31f21;
    margin: 5px;
    border: 1px solid #b71414;
    color: #000;
    cursor: pointer;
    line-height: 2.5;
    font-size: 1.2rem;
    text-align: center;
}
@media screen and (max-width:1600px)
{
.feature-btn {


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

@media screen and (max-width:768px) {
    .feature-btn {
        position: absolute;
        width: 50%;
        height: 50px;
        left: 22%;
        bottom: 3%;
        z-index: 15;

        /*! top: 37%; */
    }

    .feature-btn ul li {
        width: 45px;
        height: 35px;
        line-height: 2;
        font-size: 1.2rem;
        margin: 4px;
    }

}




/*-----------------------------------------------
    footer
-----------------------------------------------*/

footer {
    width: 100%;
    height: 8vw;
    background: rgba(238, 235, 235, 0.6);
}



.cp {
    position: relative;
    width: 96%;
    height: 100%;
    margin: auto;
    /*background: url(https://media.tentree-games.com/jp/msjp/images/cp_01.png) 0 50% /55% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/cp_02.png) 100% 50% /9% no-repeat;*/
    background: url(https://media.tentree-games.com/jp/msjp/images/cp_01.png) 0 50% /60% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/cp_02.png) 100% 50% /12% no-repeat;
}

.cp:before {
    /*! content: ''; */
    width: 1px;
    height: 53%;
    position: absolute;
    margin: 3% auto;
    /*! background: #555; */

    text-align: center;
    left: 0;
    right: 0;
}
@media screen and (min-width:1921px) {
.cp {
    /*! width: 50%; */
    background: url(https://media.tentree-games.com/jp/msjp/images/cp_01.png) 0 50% /42% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/cp_02.png) 100% 50% /8% no-repeat;
}

}

@media screen and (max-width:1800px) {
    footer {
        height: 10vw;
    }

    .cp {
        background: url(https://media.tentree-games.com/jp/msjp/images/cp_01.png) 0 50% /65% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/cp_02.png) 100% 50% /10% no-repeat;
    }
}
@media screen and (max-width:1400px) {
    footer {
        height: 9vw;
    }

    .cp {
        background: url(https://media.tentree-games.com/jp/msjp/images/cp_01.png) 0 50% /65% no-repeat, url(https://media.tentree-games.com/jp/msjp/images/cp_02.png) 100% 50% /10% no-repeat;
    }
}
@media screen and (max-width:768px) {
    footer {
        height: 42vw;
        background: #fff;
    }

    .cp:before {
        /*! content: ''; */
        width: 100%;
        height: 1px;
        position: absolute;
        margin: 27% auto;
        background: #d8d8d8;

        text-align: center;
        left: 0;
        right: 0;
        /*! transform: scale(0.9); */
        opacity: 0;
    }

    .cp {
        background: url(https://media.tentree-games.com/jp/msjp/images/cp-m.png) center 100% /86% no-repeat;

    }
}



/*-----------------------------------------------
    video
-----------------------------------------------*/
/*pc-bg*/
.video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.video >.df-video::before{
    display: none;
}


.df-video-item2
{
    position: absolute;
    top: 0;
    top: 50%;
    bottom: 0;
    left: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 0;
    transform: translate(-50.01%, -50%); }


/*box*/
.box-content {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 10px;
    z-index: 2;
    width: 95%;
    height: 70vh;
    max-width: 1200px;
    border-radius: 5px;
    transition: all .3s ease;
    transform: translate(-50%, -50%);
    background: transparent;
}

.df-close {
    display: inline-block;
    position: absolute;
    top: -30px;
    right: 5px;
    z-index: 999;
    z-index: 10;
    opacity: 1;
    width: 35px;
    height: 35px;
    cursor: pointer;
    overflow: hidden;
    transition: all .5s;
    transform-origin: 50% 50%;
}

.df-close::before,
.df-close::after {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 0.1rem;
    border-radius: 5px;
    content: '';
    background: #fff;
}


.df-video:before {
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border: 1px solid #383838;
    content: '';
}


.play {
    position: absolute;
    left: 23%;
    top: 37%;
    z-index: 10;
    cursor: pointer;
    background: url(https://media.tentree-games.com/jp/msjp/images/play.png) center top / 100% no-repeat;
    width: 160px;
    height: 100px;
    max-width: 300px;

}

.turn {
    position: absolute;
    left: 28px;
    top: 19px;
    height: 70px;
    width: 32px;
    background: url(https://media.tentree-games.com/jp/msjp/images/turn.png) center top / 100% no-repeat;
    transform-origin: 50%;

    animation: rotateX 5s cubic-bezier(.250, .460, .450, .940) 0.3s infinite both;
    opacity: 0.8;
}




@keyframes rotateX {
    0% {
        transform: rotate3d(1, 1, 0, 0deg);
        transform-origin: 50%;
    }

    20% {
        transform: rotate3d(1, 1, 0, -270deg);
        transform-origin: 100%;
    }
    60% {
        transform: rotate3d(1, 1, 0, 50deg);
        transform-origin: 0%;
    }
    80%,
    100% {
        transform: rotate3d(1, 1, 0, 0deg);
        transform-origin: 50%;
    }
}

@keyframes rotateY {
    0% {
        transform: rotate3d(1, 1, 0, 0deg) scale(1);
    }

    50% {
        transform: rotate3d(1, 1, 0, 270deg) scale(0.8);
    }

    100% {
        transform: rotate3d(1, 1, 0, 0deg) scale(1);
    }
}

/*.wrap-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translate(-50%, -50%);

    pointer-events: none;
    background-color: #000;
}
*/
@media screen and (max-width:1800px) {
    .box-content {
        width: 80%;
    }

    .play {
        transform: scale(0.8) translate3d(-70%, -60%, 0);
    }
}

@media screen and (max-width:1400px) {
    .box-content {
        width: 70%;
        top: 44%;
    }

    .play {
        transform: scale(0.7) translate3d(-101%, 14%, 0);
    }
}

@media screen and (max-width:768px) {
    .play {
        transform: scale(0.6) translate3d(0%, 0, 0);
        right: 0;
        top: 50%;
        width: 200px;
        height: 100px;

        left: 0;
        margin: auto;
        z-index: 50;
    }

    .box-content {
        width: 96%;
        top: 52%;
    }

}

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

        top: 53%;

        width: 45%;
    }
}



/*-----------------------------------------------
    music
-----------------------------------------------*/
.music {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 90px;
    left: 0px;
    z-index: 102;
    cursor: pointer;
    overflow: hidden;
    transform: scale(0.2);
}

.on {
    width: 4000px;
    height: 100px;
    background-image: url(https://media.tentree-games.com/jp/msjp/images/music.png);
    /*animation: musicOn 1.2s steps(40) forwards infinite;*/
}

.Off {
    background-image: url(https://media.tentree-games.com/jp/msjp/images/music.png);
}

.musicOn {
    animation: musicOn 1s steps(40) forwards infinite;
}

@keyframes musicOn {

    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-4000px, 0, 0);
    }
}



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

        top: 11vh;
        left: -8%;
        transform: scale(0.2);
        /*display: none;*/
        /*! left: initial; */
        /*! top: initial; */
        position: absolute;
    }

}



/*-----------------------------------------------
    point
-----------------------------------------------*/

.point {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #cdcdcd;
    top: 49%;
    left: -15%;
    z-index: 10;
}

.point-right {
    left: 189px;
    top: 36px;
    transform: scaleX(-1);

}


.point:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 9px;
    height: 9px;
    border: #cdcdcd solid 1px;
    z-index: 10;
}

.point:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 12px;
    width: 0px;
    height: 1px;
    background: #cdcdcd;
    z-index: 10;
    animation: point_ 5s ease-out 0s infinite both;

}

.point-right:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 12px;
    width: 0px;
    height: 1px;
    background: #cdcdcd;
    z-index: 10;
    animation: point_ 5s ease-out 0s infinite both;
}



.section.active .point:after {
    animation: point_ 15s ease-out 0s infinite both;
}

@keyframes point_ {

    0% {
        width: 0;
    }

    15%,
    100% {
        width: 60px;
    }
}


@media screen and (max-width:768px)
{
.go-cbt > .point {
    /*position: absolute;*/
    top: 40%;
    left: -38%;
    transform: scale(0.8);
}

.point-right {
    left: 189px;
    top: 40px;

}

}




/*-----------------------------------------------
    right-cover
-----------------------------------------------*/
.right-cover {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 100%;
    width: 12%;


}

.section.active .right-cover {
    animation: into 1s cubic-bezier(.250, .460, .450, .940) .5s both;
}

.right-cover {
    background: url(https://media.tentree-games.com/jp/msjp/images/right-cover.png) 100% 100% / 100% no-repeat;
}

#section1 .right-cover {
    background: url(https://media.tentree-games.com/jp/msjp/images/news/right-cover.png) 100% 100% / 100% no-repeat;
}

/*#section3 .right-cover{background: url(https://media.tentree-games.com/jp/msjp/images/mecha/right-cover.png) 100% 100% / 100% no-repeat;}*/


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

        width: 25%;


        pointer-events: none;
    }
}


/*-----------------------------------------------
    ending-line
-----------------------------------------------*/



.ending-line {
    right: 1%;
    position: absolute;
    top: 20%;
    width: 140px;
    z-index: 11;

    max-height: 80vh;
}

.section.active .ending-line {
    animation: endingLineShow 1.5s ease-out .5s both;
}


.ending-line:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: url(https://media.tentree-games.com/jp/msjp/images/line-arrow.png) 0 0% /100% no-repeat;
    animation: shadow_ 1.2s cubic-bezier(0.82, 0.01, 0.22, 0.71) alternate infinite both;

}

.ending-line2:before {
    content: '';
    background: url(https://media.tentree-games.com/jp/msjp/images/line-arrow2.png) 0 0% /100% no-repeat;

}

.ending-line span {
    position: absolute;
    width: 100%;
    height: 20%;


    bottom: 0;
    left: 0;



}

.ending-line span a {
    display: block;
    width: 100%;
    height: 100%;
}


@keyframes shadow_ {

    0% {
        transform: none;
        opacity: 1
    }

    4% {
        transform: translate3d(2%, 0%, 0) skewX(0deg) skewY(0deg);
        opacity: 0.4
    }

    8% {
        transform: translate3d(0%, 0%, 0) skewX(-10deg) skewY(0deg);
        opacity: 0.7
    }

    12% {
        transform: translate3d(-2%, 0%, 0) skewX(0deg) skewY(0deg);
        opacity: 0
    }

    16%,
    100% {
        filter: blur(0px);
        transform: none;
        opacity: 1
    }
}

@keyframes endingLineShow {

    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}





@keyframes dot_ {

    0%,
    49% {
        opacity: 1
    }

    50%,
    79% {
        opacity: 0
    }

    80%,
    100% {
        opacity: 1;
    }
}

.go-world_ { background: url(https://media.tentree-games.com/jp/msjp/images/go-world.png) 0 0 /100% no-repeat; }

.go-hero_ { background: url(https://media.tentree-games.com/jp/msjp/images/go-hero.png) 0 0 /100% no-repeat; }

.go-mecha_ { background: url(https://media.tentree-games.com/jp/msjp/images/go-mecha.png) 0 0 /100% no-repeat; }

.go-feature_ { background: url(https://media.tentree-games.com/jp/msjp/images/go-feature.png) 0 0 /100% no-repeat; }

.go-top_ { background: url(https://media.tentree-games.com/jp/msjp/images/go-top.png) 0 0 /100% no-repeat; }


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

    top: 40%;

}
.ending-line span {

    bottom: 20%;


}

}

@media screen and (max-width:1800px) {
    .ending-line {

        width: 14vh;

    }
}


@media screen and (max-width:768px) {
    .ending-line {
        display: none;

    }

}

/*-----------------------------------------------
    sl
-----------------------------------------------*/

.coming {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(https://media.tentree-games.com/jp/msjp/images/coming.png) center top / 100% no-repeat;
    animation: wobble 3s ease-out 0s infinite both;
}

.sl004 .coming {
    left: 5%;
}

@keyframes wobble {
    0% {
        filter: blur(0);
        transform: none;
    }

    2% {
        filter: blur(5px);
        transform: translate3d(-1%, -1%, 0) rotate3d(0, 0, 1, 1deg);
    }

    5%,
    100% {
        filter: blur(0px);
        transform: none;
    }

}


.sl {
    position: absolute;

    bottom: 10%;
    z-index: 11;


    max-width: 50%;
    pointer-events: none;
}

.sl-feature{
    max-width: 42%;
    left: 5%;
}



.section.active .world .sl {
    animation: mechaData 0.7s cubic-bezier(.250, .460, .450, .940) 0.2s both;
}
.section.active .feature .sl {
    animation: mechaData 0.7s cubic-bezier(.250, .460, .450, .940) 0.2s both;
}


@keyframes sl_ {
    0% {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}


@media screen and (max-width:768px) {
    .sl {
        /*! display: none; */
        /*! opacity: 1; */
        /*! z-index: 2; */
        max-width: 100%;
        /*! height: 0; */
        bottom: 0%;
    }
    .sl-feature{
    /*! max-width: 42%; */
    left: 0;
    bottom: 11%;
    /*! top: 8%; */
    width: 90%;
}
}




/*-----------------------------------------------
     swiper
-----------------------------------------------*/


.swiper002 {
    width: 109.38%;
}

.mySwiper .swiper-slide {
    opacity: 0.1;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

@media screen and (max-width:768px) {
    .menu>.swiper-wrapper {
        flex-direction: column;
    }
}
/*-----------------------------------------------
    swiper-container
-----------------------------------------------*/

.swiper-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.swiper-container img {
    width: inherit;
}

.feature-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    background: url(https://media.tentree-games.com/jp/msjp/images/feature/frame.png) 0 15% / cover no-repeat;
    pointer-events: none;
}


.feature-sl {
    position: absolute;
    bottom: 10%;
    z-index: 10;
    max-width: 40%;
    left: 14%;
}

.section.active .feature-sl {
    animation: mechaData 0.7s cubic-bezier(.250, .460, .450, .940) 0.2s both;
}



.swiper-pagination-bullet {
    width: 45px;
    height: 45px;
    display: inline-block;
    border-radius: 0;
    background: #b31f21;
    opacity: 0.9;
    margin: 5px;
    border: 1px solid #b71414;
}


.swiper-container>.swiper-pagination {
    top: 82%;
    left: 3%;
}

.swiper-container>.swiper-pagination span {
    position: relative;

}

.swiper-container>.swiper-pagination span:before {
    content: '1';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #000;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    line-height: 2.5;
}

.swiper-container>.swiper-pagination span.swiper-pagination-bullet-active:before {
    color: #fff;
}

.swiper-container>.swiper-pagination span:nth-child(2):before {
    content: '2';
}

.swiper-container>.swiper-pagination span:nth-child(3):before {
    content: '3';
}

.swiper-container>.swiper-pagination span:nth-child(4):before {
    content: '4';
}

.swiper-container>.swiper-pagination span:nth-child(5):before {
    content: '5';
}

@media screen and (max-width:1400px) {
    .swiper-container>.swiper-pagination {
        bottom: 13%;
        left: 5%;
    }
}

.for-sl {
    display: none;
    /*pointer-events: none;*/
}

@media screen and (max-width:768px) {
    .for-sl {
        display: block;
        position: absolute;
        top: 10%;
        left: 5%;
        width: 105%;
        z-index: 10;
        margin: auto;
        right: 0;
        overflow: hidden;
    }

    .swiper-container {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100vh;
        top: 0%;
        left: 0;
        /*! transform: translate3d(-14%,0%,0%); */
        right: 0;
    }

    .feature-frame {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        background: url(https://media.tentree-games.com/jp/msjp/images/feature/frame-m.png) 50% 0 / cover no-repeat;
        pointer-events: none;
    }

    .swiper-container>.swiper-pagination {
        bottom: 25%;
        left: 0;
    }

    .swiper-pagination-bullet {
        width: 37px;
        height: 37px;
        display: inline-block;
        border-radius: 0;
        background: #b31f21;
        opacity: 0.9;
        margin: 5px;
        border: 1px solid #b71414;
    }

    .swiper-container>.swiper-pagination span:before {
        font-size: 1rem;
        line-height: 2.4;
    }



}



@media screen and (max-width:480px) {
    .for-sl {
        display: block;
        position: absolute;
        top: 10%;
        left: 5%;
        width: 105%;
        z-index: 10;
        margin: auto;
        right: 0;
        overflow: hidden;
    }

    .swiper-container {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100vh;
        top: 2%;
        left: 0;
        /*! transform: translate3d(-14%,0%,0%); */
    }

    .feature-frame {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        background: url(https://media.tentree-games.com/jp/msjp/images/feature/frame-m.png) 50% 0 / cover no-repeat;
        pointer-events: none;
    }

    .swiper-container>.swiper-pagination {
        bottom: 25%;
        left: 0;
    }

    .swiper-pagination-bullet {
        width: 37px;
        height: 37px;
        display: inline-block;
        border-radius: 0;
        background: #b31f21;
        opacity: 0.9;
        margin: 5px;
        border: 1px solid #b71414;
    }

    .swiper-container>.swiper-pagination span:before {
        font-size: 1rem;
        line-height: 2.4;
    }



}



/*-----------------------------------------------
    fly-green
-----------------------------------------------*/
.snow01,
.snow03,
.snow05,
.snow07,
.snow09 {
    width: 204px;
    height: 138px;
    background: url(https://media.tentree-games.com/jp/msjp/images/snow01.png) center top / 100% no-repeat;
}

.snow02,
.snow04,
.snow06,
.snow08,
.snow10 {
    width: 300px;
    height: 388px;
    background: url(https://media.tentree-games.com/jp/msjp/images/snow02.png) center top / 100% no-repeat;
}

.snow09 {
    display: none;
    background: url(https://media.tentree-games.com/jp/msjp/images/snow01-w.png) center top / 100% no-repeat;
}

.snow08,
.snow10 {
    display: none;
    background: url(https://media.tentree-games.com/jp/msjp/images/snow02-w.png) center top / 100% no-repeat;
}

.snow {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.snow01 {
    position: absolute;
    top: 80%;
    left: 350px;
    z-index: 10;
    animation: fly2 6s cubic-bezier(.250, .460, .450, .940) .5s 100 both;
}

.snow02 {
    position: absolute;
    top: 70%;
    left: 11%;
    z-index: 10;
    animation: fly 7s cubic-bezier(.250, .460, .450, .940) 0s 100 both;
}

.snow03 {
    position: absolute;
    top: 70%;
    left: 200px;
    z-index: 1;
    animation: fly2 5s cubic-bezier(.250, .460, .450, .940) .8s 100 both;
}

.snow04 {
    position: absolute;
    top: 60%;
    left: 0;
    z-index: 1;
    animation: fly 5s cubic-bezier(.250, .460, .450, .940) 1.5s 100 both;
}

.snow05 {
    position: absolute;
    top: 50%;
    left: 10%;
    z-index: 10;
    animation: fly2 7s cubic-bezier(.250, .460, .450, .940) 5s 100 both;
}

.snow06 {
    position: absolute;
    top: 50%;
    left: 10%;
    z-index: 10;
    animation: fly 6s cubic-bezier(.250, .460, .450, .940) 5.2s 100 both;
}

.snow07 {
    position: absolute;
    top: 70%;
    left: 10%;
    z-index: 1;
    animation: fly2 5s cubic-bezier(.250, .460, .450, .940) 5.4s 100 both;
}

.snow08 {
    position: absolute;
    top: 60%;
    left: 40%;
    z-index: 10;
    animation: fly3 6s cubic-bezier(.250, .460, .450, .940) 1.2s 100 both;
}

.snow09 {
    position: absolute;
    top: 80%;
    left: 0%;
    z-index: 10;
    animation: fly3 5s cubic-bezier(.250, .460, .450, .940) 1.5s 100 both;
}

.snow10 {
    position: absolute;
    top: 70%;
    left: 0%;
    z-index: 1;
    animation: fly3 8s cubic-bezier(.250, .460, .450, .940) 2.4s 100 both;
}


@keyframes fly {
    0% {
        opacity: 0.1;
        filter: brightness(1);
        transform: translate3d(20%, 50%, 0);
    }

    30% {
        opacity: 1;
        filter: brightness(1.5);
    }

    90% {
        opacity: 0;
        filter: brightness(1);
        transform: translate3d(350%, -80%, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(350%, -80%, 0);
    }
}


@keyframes fly2 {
    0% {
        opacity: 0.3;
        filter: brightness(1);
        transform: translate3d(-50%, 60%, 0);
    }

    10% {
        opacity: 1;
        filter: brightness(1.5);
    }

    90% {
        opacity: 0;
        filter: brightness(1);
        transform: translate3d(250%, -150%, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(250%, -150%, 0);
    }
}

@keyframes fly3 {
    0% {
        opacity: 0.4;
        filter: brightness(1);
        transform: translate3d(-800%, 0%, 0) scale(0.8);
        filter: blur(1px);
    }

    70% {
        opacity: 1;
        filter: brightness(1.5);
        transform: translate3d(50%, -300%, 0) scale(4);
        filter: blur(3px);
    }



    100% {
        opacity: 0;
        filter: brightness(1);
        transform: translate3d(50%, -300%, 0) scale(4);
    }
}