/*  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');




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

.df-width {
    height: 100%;
    max-width: 1700px;
    overflow: hidden;
}


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

html,
body {
    background: rgb(250, 250, 250);
}

/*prelodd*/
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';
    /*
    background-image:
        url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/book/001.jpg),
        url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/book/002.jpg),
        url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/book/003.jpg);
    */
}

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

section {
    width: 100%;
    text-align: justify;
    height: 1080px;
    background: rgb(243, 248, 239);
    overflow: hidden;
}



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

    html,
    body {
        background: rgb(33, 33, 33);
    }

}


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

/*background-size: 目前寬度*/
/*height: calc(目前寬度 *(原始高度 /原始寬度));*/

.hero {
    height: 1080px;
}


.hero01 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_01.jpg) center 100% / cover no-repeat;
    animation: blur .8s ease-out 0s 1 both;
}

.hero02 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_02.jpg) center 100% / cover no-repeat;
}

.hero03 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_03.jpg) center 100% / cover no-repeat;
}

.hero04 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_04.jpg) center 100% / cover no-repeat;
}

.hero05 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_05.jpg) center 100% / cover no-repeat;
}

.hero06 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_06.jpg) center 100% / cover no-repeat;
}

.hero07 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_07.jpg) center 100% / cover no-repeat;
}


.hero-text {
    display: none;
}


@media screen and (max-width:1800px) {
    .hero {
        height: calc(1800px *(1080 /1920))
    }
}

@media screen and (max-width:1600px) {
    .hero {
        height: calc(1600px *(1080 /1920))
    }
}

@media screen and (max-width:1400px) {
    .hero {
        height: calc(1400px *(1080 /1920))
    }
}

@media screen and (max-width:1280px) {
    .hero {
        height: calc(1280px *(1080 /1920))
    }
}





@media screen and (max-width:768px) {
    .hero01 {
        /*display: none;*/
        /*! background: rgba(203, 152, 152, 0.6); */

        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        height: 100vh;
        background: transparent;
        /**/
        /*padding: 0 0 185% 0;*/
    }

    .hero-bg-m {
        position: absolute;
        width: 100%;
        height: 100%;

        left: 0;
        bottom: 0;
        z-index: 0;
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_01-m.jpg) 50% 100% /cover no-repeat;
    }



    .hero02 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_02-m.jpg) 50% 100% /100% no-repeat;
        padding: 0 0 190% 0;
        height: 0;
    }

    .hero03 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_03-m.jpg) 50% 100% /100% no-repeat;
        padding: 0 0 170% 0;
        height: 0;
    }

    .hero04 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_04-m.jpg) 50% 100% /100% no-repeat;
        padding: 0 0 170% 0;
        height: 0;
    }

    .hero05 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_05-m.jpg) 50% 100% /100% no-repeat;
        padding: 0 0 170% 0;
        height: 0;
    }

    .hero06 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_06-m.jpg) 50% 100% /100% no-repeat;
        padding: 0 0 170% 0;
        height: 0;
    }

    .hero07 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_07-m.jpg) 50% 100% /100% no-repeat;
        padding: 0 0 170% 0;
        height: 0;
    }

    .hero-text {
        /*display: block;*/
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

    }

    .hero-text01 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-text01.png) 50% 100% /100% no-repeat;
    }

    .hero-text02 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-text02.png) 50% 100% /100% no-repeat;
    }

    .hero-text03 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-text03.png) 50% 100% /100% no-repeat;
    }

    .hero-text04 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-text04.png) 50% 100% /100% no-repeat;
    }

    .hero-text05 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-text05.png) 50% 100% /100% no-repeat;
    }

    .hero-text06 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-text06.png) 50% 100% /100% no-repeat;
    }

}




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

footer {
    width: 100%;
    /*! max-width: 950px; */
    margin: 0% auto 0;
    padding: 0 0 2% 0;
    background: rgb(250, 250, 250);
}



.cp {
    width: 100%;
    max-width: 650px;
    margin: 0 auto 0;
}




@media screen and (max-width:1280px) {
    .cp {
        width: 45%;

    }
}

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

    footer {
        margin: 0;
    }
}




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

/*sl*/
.hero-list .sl {
    margin: 10% 0 0 3%;
    font-size: 5rem;
    font-weight: 900;
    color: rgb(94, 110, 135);
    letter-spacing: -0.2rem;
    line-height: 7rem;
    height: 95px;
    animation: typing 1.5s cubic-bezier(.250, .460, .450, .940) 0s 1 both;

}

@media screen and (min-width:1921px) {
    .hero-list .sl {
        margin: 6% 0 0 3%;


    }
}

@media screen and (max-width:1600px) {
    .hero-list .sl {
        margin: 7% 0 0 3%;


    }

}

@media screen and (max-width:1400px) {
    .hero-list .sl {
        margin: 4% 0 0 3%;


    }

}


/*list text*/

.hero-list h1,
.hero-list h2 {
    color: #222;
    font-size: 2.7rem;
    font-weight: 500;

    margin: 0 0 15% 0;
    line-height: 1.3;
}

.hero-list p,
.hero-list>div {
    font-weight: 400;
    line-height: 2.6;
    letter-spacing: 0.03rem;
}



.hero-list h1 .date {
    font-size: 0.8rem;
    margin: 1% 0 0 1%;
    color: rgb(166, 182, 203);
    letter-spacing: 0.05rem;
}


.hero-list h3 {
    color: rgb(249, 47, 88);
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 0 0 48px;
    /*border-bottom: 1px solid rgb(255, 0, 84);*/
    width: 100%;
    position: relative;
    margin: 80px 0 1% -51px;
    transition: all .3s ease;
    letter-spacing: 0.05rem;
    line-height: 1.3;

}

.hero-list h3:after {
    content: '';
    width: 43px;
    height: 66px;
    /*background:rgb(255, 0, 84);*/
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/icon01.png) 0 top / 100% no-repeat;

    position: absolute;
    bottom: -22px;
    left: -8px;
    transition: all .3s ease;

}


/*h4*/
.hero-list h4,
.hero-list h5 {
    padding: 0 0px 0 20px;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/icon-ok.png) 0 6px / 17px no-repeat;

    color: #000;
    /*! min-height: 20px; */
    letter-spacing: 0.05rem;
}

.hero-list h5 {
    color: rgb(249, 47, 88);
}

@media screen and (min-width:1921px) {
    .hero-list h3 {

        margin: 80px 0 1% -64px;


    }
}


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

    *,
    *::before,
    *::after,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    button a,
    li a,
    .df-form {
        font-size: 14px;
    }


    .tw .sl {
        margin: 0px 8% -9% 0;

    }

}


@media screen and (max-width:768px) {
    .hero-list .sl {
        margin: 13% 0 0 7%;
        line-height: 9rem;
        font-size: 3.5rem;
    }




    .hero-list h1,
    .hero-list h2 {
        color: #222;
        font-size: 1.8rem;

    }

    .hero-list h3 {
        font-size: 1.5rem;
    }

    .hero-list p {
        font-weight: 400;
        line-height: 2.2;
    }




    *,
    *::before,
    *::after,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    button a,
    li a,
    .df-form {
        font-size: 13px;
    }



    .hero-list h3:after {
        content: '';
        width: 38px;
        height: 66px;
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/icon01.png) 0 top / 100% no-repeat;

        bottom: -12px;
        left: -6px;

    }


}
@media screen and (max-width:414px) {
    .hero-list .sl {
        margin: 17% 0 0 7%;
    }
}
@media screen and (max-width:376px) {
    .hero-list .sl {
        margin: 10% 0 0 7%;
    }
}


/*-----------------------------------------------
    blur
-----------------------------------------------*/

@keyframes blur {
    0% {
        opacity: 0;
        filter: blur(15px);
    }

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




/*-----------------------------------------------
    squares
-----------------------------------------------*/
.squares {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 1920px;
    height: 100%;
    top: 0;
    /*! left: 0; */
    pointer-events: none;
    margin: auto;
}

.square {
    position: absolute;
    width: 700px;
    height: 700px;
}





.square2-01 {
    top: -216px;
    left: 610px;
    transform: scale(0.7) rotate(45deg);
    border: 1px solid rgba(125, 140, 159, 0.38);
    background: rgba(209, 223, 241, 0.1);
}

.square2-02 {
    top: 141px;
    left: 964px;
    transform: scale(0.7) rotate(45deg);
    border: 1px solid rgba(126, 168, 224, 0.34);
    background: rgba(209, 223, 241, 0.1);
}

.square2-03 {
    top: 784px;
    left: 610px;
    transform: scale(0.7) rotate(45deg);
    border: 1px solid rgba(207, 217, 222, 0.68);
    background: rgba(222, 231, 240, 0.3);
}

.square2-04 {
    top: 152px;
    left: -559px;
    transform: scale(0.7) rotate(45deg);
    border: 1px solid rgba(126, 168, 224, 0.34);
    background: rgba(209, 223, 241, 0.1);
}



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



/*top-line*/
/*bottom-line*/

.hero .squares .top-line {
    position: absolute;
    width: 35%;
    height: 0;
    top: 2px;
    right: 42px;
    border: 1px solid rgb(182, 202, 223);
    transform: scaleY(0.5);
}

.hero .squares .bottom-line {
    position: absolute;
    width: 68%;
    height: 1px;
    bottom: 5px;
    right: 0;
    border: 1px solid rgba(172, 191, 215, 0.43);
    transform: scaleY(0.5);
}










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

/*a*/
.hero-list>a {
    padding: 0 0px 0 22px;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/icon-next.png) 0 7px / 17px no-repeat;

    color: rgb(249, 47, 88);
    margin: 3% 3% 4% 0;
    display: inline-block;
    /*border-bottom: 1px solid rgb(248, 60, 125);*/
    height: 30px;
    line-height: 30px;
    transition: all .3s ease;
    letter-spacing: 0.05rem;
    position: relative;
}

.hero-list>a:after {
    content: '';
    width: 80%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 20px;

    background: rgb(249, 47, 88);

}


.back-hero {
    margin: 20px 0 50px -12px;

    height: 30px;
    padding: 0 10px;
    display: block;
    max-width: 160px;
    width: 40%;
    position: relative;
}

.back-hero a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    background: rgb(249, 47, 88);
    color: #fff;

    text-align: center;
    line-height: 30px;
    font-size: 1rem;
    letter-spacing: 0.05rem;
}


@media screen and (max-width:768px) {
    .hero-list>a {

        height: 25px;
        line-height: 25px;

    }
}

/*more-hero*/
.more-hero {
    position: absolute;

    border-radius: 9px;
    left: -80px;
    top: 100%;
    animation: pagination .5s ease-out 2.5s 1 both;

}

.more-hero a {
    color: #fff;
    letter-spacing: 0.05rem;
    font-size: 0.6rem;
    line-height: 18px;
    display: block;
    padding: 0 8px;



    min-width: 55px;
    text-align: center;
}


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

        left: 13px;

    }
}


/*page-line*/



.page-line {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 4%;
    top: 0%;
    background: rgb(188, 199, 217);
    animation: pageLine 3s cubic-bezier(.250, .460, .450, .940) 0s 1 both;

    /*! max-height: 120vh; */
}

.page-line01 {
    /*順序不可對調*/
    width: 1px;
    height: 100%;
    position: absolute;
    left: 4%;
    top: 18%;
    background: rgb(188, 199, 217);
    animation: pageLine01 3s cubic-bezier(.250, .460, .450, .940) 0.5s 1 both;

    max-height: 800px;
    /*! min-height: 450px; */
}

/*
.page-line02 {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 4%;
    top: 0%;
    background: rgb(188, 199, 217);
    animation: pageLine04 3s cubic-bezier(.250, .460, .450, .940) 0s 1 both;

    max-height: 800px;
}*/

@keyframes pageLine01 {
    0% {
        opacity: 0;
        height: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        height: 50%;
    }
}




@keyframes pageLine01_M {
    0% {
        opacity: 0;
        height: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        height: 70%;
    }
}

@keyframes pageLine02_M {
    0% {
        opacity: 1;
        height: 66%;
    }

    10% {
        opacity: 1;
    }

    100% {
        height: 8%;
    }
}



@keyframes pageLine {
    0% {
        opacity: 0;
        height: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        height: 100%;
    }
}

@keyframes pageLine_M {
    0% {
        opacity: 0;
        height: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        height: 370%;
    }
}


@keyframes pageLineHide {

    0%,
    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.page-line:before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(94, 110, 135);
    bottom: -12px;
    left: -3px;
    animation: pageLineHide 4s ease-out 0.6s 1 both;

}

.page-line:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgb(94, 110, 135);
    bottom: -15px;
    left: -6px;
    /*! animation: pageLineHide 3s ease-out 0.6s 1 both; */

}

@media screen and (min-width:1921px) {
    .page-line {
        top: -5%;
    }

    .hero01 .page-line {
        top: 28%;
    }
}

@media screen and (max-width:768px) {
    .page-line {
        /*順序不可對調*/
        animation: pageLine_M 3s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
        top: -10%;
    }

    .page-line01 {
        animation: pageLine01_M 3s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
        top: 15%;
    }

    .page-line02 {
        animation: pageLine02_M 1s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
        top: 16%;
    }
}

/*@media screen and (max-width:376px)
{
    .page-line01 {
        animation: pageLine01_M 3s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
        top: 19%;
    }
}*/


/*hero-dot*/

.dot-top,
.dot-bottom {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(94, 110, 135);
    left: -3px;
}

.dot-top {

    top: -16px;
}

.dot-bottom {
    bottom: -12px;
}

.dot-top:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgb(94, 110, 135);
    top: -3px;
    left: -3px;

}




.hero .dot-top:after {
    content: 'キャラクター紹介';
    position: absolute;
    top: -19px;
    left: 19px;

    width: 200px;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
    color: rgb(94, 110, 135);
}




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





    .hero .dot-top:after {
        content: 'キャラクター紹介';
        position: absolute;
        top: -27px;
        left: 18px;

        width: 135px;
        font-size: 0.9rem;
        letter-spacing: 0.05rem;
        font-weight: 400;
        color: rgb(128, 143, 166);
    }

    .hero .dot-top:before {
        content: '';
        width: 10px;
        height: 10px;
        top: -3px;
        left: -3px;

    }

    .hero .dot-top {
        width: 4px;
        height: 4px;
        top: -9px;
        left: -2px;

    }



    .hero .dot-bottom:after {
        content: '';
        width: 10px;
        height: 10px;
        bottom: -13px;
        left: -4px;

    }

    .hero .dot-bottom:before {
        content: '';
        width: 4px;
        height: 4px;
        bottom: -10px;
        left: -1px;

    }

    .tw .dot-top:after {
        content: '公式';
        position: absolute;
        top: 23px;
        left: -37px;

        width: 52px;
        font-size: 1.1rem;
    }
}


@media screen and (max-width:376px)
{
    .hero .dot-top:after {
        content: 'キャラクター紹介';
        position: absolute;
        top: -21px;
        left: 18px;

        width: 135px;
        font-size: 0.9rem;
        letter-spacing: 0.05rem;
        font-weight: 400;
        color: rgb(128, 143, 166);
    }

}



/*hero-tag*/
.tags {
    display: inline-block;
    margin: 0 0 0 20px;
    height: 18px;


}

.tags ul {
    display: flex;
    width: 100%;
    height: 100%;
}

.tags ul li {

    border-radius: 10px;

    padding: 0 10px;
    margin: 0 2px;
}

.tag a,
.left-tag a {
    color: #fff;
    letter-spacing: 0.05rem;
    font-size: 0.6rem;
    line-height: 18px;
    display: block;
}



.left-tag {
    position: absolute;
    right: 0;
    top: 136%;
    padding: 0 12px;
    border-radius: 14px;
    line-height: 1.65;
    font-size: 0.8rem;
    color: #fff;
    background: rgb(109, 137, 179);
    animation: pagination .5s ease-out 2.8s 1 both;


}




@keyframes pagination {

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

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


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

    .tags {
        display: block;
        margin: 0 0 16px 0px;
        height: 18px;


    }

    .left-tag {
        left: 0%;
        top: 120%;
        max-width: 50px;
        text-align: center;
        padding: 0;
    }

}


/*hero-list*/

.hero-list {

    width: 100%;
    max-width: 300px;
    margin: 0 0 0 12%;
    padding: 4% 0 0 0;
    position: relative;
    height: 110%;
    z-index: 2;
}


@media screen and (min-width:1921px) {
    .hero-list {
        padding: 9% 0 15% 0;
    }
}

@media screen and (max-width:1600px) {
    .hero-list {
        /*! margin: 0 0 0 33%; */
    }

    .hero-list h3 {
        margin: 80px 0 1% -5%;
    }
}



@media screen and (max-width:768px) {
    .hero-list {
        margin: 0;
        padding: 0;
        width: 92%;
        position: fixed;
        top: 3%;
        left: 1%;
        height: 70%;
    }

    .hero-list h3 {

        margin: 80px 0 1% -27px;

    }
}

@media screen and (max-width:414px) {
    .hero-list {
        width: 92%;
        top: 8%;
        left: 4%;
        height: 70%;
    }
}

@media screen and (max-width:376px) {
    .hero-list {
        width: 92%;
        top: 9%;
        left: 4%;
        height: 70%;
    }
}

/*list-group*/


.hero .list-group {
    width: 100%;
    height: 320px;
    position: relative;
    margin: 100px 0 0 -0.7%;
}

.hero .list-group ul {
    display: flex;
    flex-direction: column;
}

.hero .list-group ul li {
    /*! margin-top: 1%; */
    /*! background: #5bc0de9e; */

    height: 16%;
    white-space: nowrap;
    /*! text-overflow: ellipsis; */
    /*! overflow: hidden; */
    padding: 0 0 0 4%;
    letter-spacing: 0.01rem;
}

.hero .list-group ul li:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    left: 2px;
    top: 25px;
    z-index: 1;
    background: rgb(94, 110, 135);
    border-radius: 50%;

}

.hero .list-group ul li:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: 1px;
    top: 23px;
    z-index: 0;
    background: #e8f1fa;
    border-radius: 50%;

}

.hero .list-group ul li .date {
    text-align: left;
    font-size: 0.75rem;
    margin: -5px 0 -10px 0;
    padding: 0;
    color: rgb(171, 193, 222);
}


@media screen and (max-width:768px) {
    .hero .list-group ul li .date {
        font-size: 0.75rem;
        margin: -5px 0 -4px 18%;
        padding: 0;
    }

    .hero .list-group {
        width: 100%;
        margin: 80px 0 0 -6%;
    }


    .hero .list-group ul li {

        height: 17%;
        padding: 0 0 0 5%;
    }

}


.header-cover,
.hero-cover,
.tw-cover,
.gallery-cover,
.feature-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    /*! background: rgba(203, 152, 152, 0.6); */
    top: 0;
    left: 0;
    z-index: 10;

}

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

.hide-menu,
.show-menu {
    display: none;
}

.list {
    width: 100%;
    /*! height: 200px; */
    position: absolute;
    left: 4%;
    top: 32%;



    max-width: 180px;
    z-index: 10;
}

.list ul {
    display: flex;
    flex-direction: column;
}

.list ul li {
    margin: 10px 0;
    /*! background: rgba(203, 152, 152, 0.6); */
    padding: 0 0 0 15px;
    height: 35px;
    cursor: pointer;
}

.list ul li:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    left: -2px;
    top: 20px;
    z-index: 1;
    background: rgb(94, 110, 135);
    border-radius: 50%;
}

.list ul li:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: -5px;
    top: 17px;
    z-index: 0;
    background: rgba(232, 241, 250, 0.62);
    border-radius: 50%;
}



.list ul li span {
    color: rgb(144, 168, 190);
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    margin: 0 0 -8px 0;
}

.li-hero01 {
    animation: typing 1.5s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
}


.li-hero02 {
    animation: typing 1.5s cubic-bezier(.250, .460, .450, .940) 0.1s 1 both;
}

.li-hero03 {
    animation: typing 1.5s cubic-bezier(.250, .460, .450, .940) 0.2s 1 both;
}

.li-hero04 {
    animation: typing 1.4s cubic-bezier(.250, .460, .450, .940) 0.2s 1 both;
}

.li-hero05 {
    animation: typing 1.4s cubic-bezier(.250, .460, .450, .940) 0.3s 1 both;
}

.li-hero06 {
    animation: typing 1.3s cubic-bezier(.250, .460, .450, .940) 0.3s 1 both;
}





@keyframes typing {
    0% {
        opacity: 0;
        transform: translateX(150px);

    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}





@media screen and (min-width:1921px) {
    .list {
        top: 35%;


    }


}

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

    .list {

        top: 27%;

    }

    .t4 {

        left: 15%;

        top: 420%;
    }

    .text_ {
        letter-spacing: 0.05rem;
        font-size: 0.85rem;
    }

    .list ul li:after {
        content: '';

        background: rgba(232, 241, 250, 0.1);

    }

    .list ul li {
        height: 30px;
    }

}


@media screen and (max-width:1280px) {
    .text_ {
        letter-spacing: 0.01rem;
        font-size: 0.8rem;
    }

}




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


    .hide-menu01,
    .hide-menu02,
    .hide-menu03,
    .hide-menu04,
    .hide-menu05,
    .hide-menu06 {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        /*! background:rgba(196, 119, 119, 0.6); */
    }

    .hero-list .show-menu {
        /*display: block;*/
        position: absolute;
        left: 9%;
        top: 24%;
        cursor: pointer;
        padding: 0 12px;
        border-radius: 14px;
        line-height: 1.65;
        font-size: 0.8rem;
        color: #fff;
        background: rgb(151, 171, 201);
        animation: pagination .5s ease-out 0.6s 1 both;
    }

    .show-menu2 {
        width: 100%;
        height: 20vh;
        position: fixed;
        top: 13%;
        left: 0;
        /*! background: rgba(123, 221, 161, 0.43); */
        z-index: 10;
    }

    .list {
        /*display: none;*/


        top: 26%;
        left: 4%;
        /*! transform: scale(0.5); */
        color: #555;
        min-width: 120px;
        width: 50%;
    }

    .text_ {
        text-align: left;
    }

    .list .t3 {
        font-size: 0.95rem;
        letter-spacing: 0.1rem;
    }

    .list .text1:before {
        content: '';
        right: initial;
        left: -3.4%;
        top: 14px;

    }

    .list .text1:after {
        content: '';
        right: initial;
        left: -3.5%;
        top: 11px;
    }

    .list ul li:after {
        content: '';

        background: rgba(232, 241, 250, 0.5);

    }

    .list ul li {
        height: 23px;
    }
}


/*-----------------------------------------------
    eng
-----------------------------------------------*/
.eng_ {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: eng 1.2s ease-out 0.6s 1 both;

}

.eng1 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_01.png) center 100% / 100% no-repeat;
}

.eng2 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_02.png) center 100% / 100% no-repeat;
}

.eng2-2 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_02_02.png) center 100% / 100% no-repeat;
    animation: eng 1.2s ease-out 1s 1 both;
}

.eng3 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_03.png) center 100% / 100% no-repeat;
}

.eng4 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_04.png) center 100% / 100% no-repeat;
}


@keyframes eng {
    0% {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(2px);
    }

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


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

    .eng3 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_03.png) 100% 50% / 90% no-repeat;
    }
}

@media screen and (max-width:768px) {
    .eng1 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_01.png) center 120% / 220% no-repeat;
    }

    .eng2 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_02.png) 70% 150% / 220% no-repeat;
    }

    .eng3 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_03.png) 40% 20% / 220% no-repeat;
    }

    .eng2-2 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_02_02.png) center 150% / 230% no-repeat;
    }

    .eng4 {
        background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero_04.png) 50% 80% / 220% no-repeat;
    }


}


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

.snow02,
.snow04,
.snow06,
.snow08,
.snow10 {
    width: 300px;
    height: 388px;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/snow02.png) center top / 100% no-repeat;
}

.snow09 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/snow01-w.png) center top / 100% no-repeat;
}

.snow08,
.snow10 {
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/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 8s 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 10s cubic-bezier(.250, .460, .450, .940) .8s 100 both;
}

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

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

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

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

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

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

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


@keyframes fly {
    0% {
        opacity: 0.1;
        transform: translate3d(350%, 50%, 0);
    }

    30% {
        opacity: 1;
    }

    90% {
        opacity: 0;
        transform: translate3d(20%, -80%, 0);
    }

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


@keyframes fly2 {
    0% {
        opacity: 0.3;
        transform: translate3d(250%, 60%, 0);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0;
        transform: translate3d(-50%, -150%, 0);
    }

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

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

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



    100% {
        opacity: 0;
        transform: translate3d(-800%, -300%, 0) scale(4);
    }
}

/*-----------------------------------------------
    tags
-----------------------------------------------*/

.tags {
    display: inline-block;
    margin: 0 0 0 20px;
    height: 18px;


}

.tags ul {
    display: flex;
    width: 100%;
    height: 100%;
}

.tags ul li {

    border-radius: 10px;

    padding: 0 10px;
    margin: 0 2px;
}

.tag a,
.tag a {
    color: #fff;
    letter-spacing: 0.05rem;
    font-size: 0.6rem;
    line-height: 18px;
    display: block;
}



.tag {
    display: none;
    position: absolute;
    left: -80px;
    top: 33%;
    padding: 0 12px;
    border-radius: 14px;
    line-height: 1.65;
    font-size: 0.8rem;
    color: #fff;
    background: rgb(109, 137, 179);
    /*animation: pagination .5s ease-out 2.8s 1 both;*/
}

.tag-man {
    display: none;
    position: absolute;
    left: 65%;
    top: 8%;
    padding: 0 12px;
    border-radius: 14px;
    line-height: 1.65;
    font-size: 0.8rem;
    color: #fff;
    background: rgb(109, 137, 179);
    /*animation: pagination .5s ease-out 2.8s 1 both;*/
    cursor: pointer;
    z-index: 10;
}





.tag-hide {
    display: none;
    transition: all .3s ease;
}

.tag-show {
    display: block;
    animation: pagination .5s ease-out 0s 1 both;
}

@keyframes pagination {

    0%,
    30% {
        opacity: 0;
        filter: blur(3px);
        transform: translateX(-30px);
    }

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


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



    .tag {
        display: none;
        left: 20%;
        top: 41%;
        /*! max-width: 50px; */
        text-align: center;
        /*! padding: 0; */
    }

}


.hero-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/hero-cover.png) center bottom / 100% no-repeat;

    z-index: 1;
    pointer-events: none;
}

@media screen and (max-width:768px) {
    .hero-cover {
        display: none;
    }
}

/*-----------------------------------------------
    view
-----------------------------------------------*/

/* view */
.view {


    position: absolute;
    cursor: move;

    /*! overflow: hidden; */
    left: 35%;
    top: 22%;
    z-index: 0;
}


/*#scroll .view {
    overflow: scroll;
}
*/

.view {
    width: 40%;
    height: 700px;
    /*! background: rgba(109, 190, 122, 0.6); */
}

.content {

    width: 2600px;
}

.content ul {

    display: flex;
    flex-wrap: wrap;
    /*transform: rotate(45deg);*/

}


.content ul li {
    width: 550px;
    height: 100%;
    margin: 0 0 0 -9%;
    /*! background: rgba(251, 251, 251, 0.6); */

    /*! border: 1px solid rgba(161, 196, 232, 0.5); */
    overflow: hidden;
}

.content ul li.blank {

    border: 0px solid rgb(232, 241, 250);
}


.hero-blur {
    filter: blur(0px) brightness(0.6);
    transition: all .4s ease;
    transform: scale(0.9);
    z-index: 0;
    /*! opacity: 0.9; */
}


.hero-focus {
    transform: scale(1.1);
    transition: all .5s ease;
    z-index: 1;
}


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

    .view {
        left: 35%;
        top: 10%;
        transform: scale(0.7);
    }

    .content {
        width: 2000px;
    }

    .content ul li {
        margin: 0 0 0 -12%;

    }
}

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

    .content {
        width: 1800px;
    }

    .content ul li {
        margin: 0 0 0 -15%;

    }

    .view {
        left: 35%;
        top: 10%;
        transform: scale(0.6);
    }
}



/*-----------------------------------------------
    moving
-----------------------------------------------*/


.girl-img {
    position: absolute;
    width: 599px;
    height: 720px;
    left: 0;
    top: 0;
    z-index: 0;
    top: 21%;
    left: 4%;
    z-index: 13;
}

.girl-img img {
    padding: 0;
    margin: 0;
    max-width: 100%;
}


.moving-frame {
    position: absolute;
    width: 599px;
    height: 720px;
    z-index: 12;

    /*pointer-events: none;*/
    /*! background: #93dd9363; */
}

.moveing-size {
    width: 530px;
    height: 818px;
    top: 5%;
    left: 15%;
}

.moving-bg {
    pointer-events: none;
}

.girl_ {
    width: 599px;
    height: 720px;
    overflow: hidden;
    display: none;
    pointer-events: none;
    animation: girlBg 2s ease-out 0s 1 both;


}

@keyframes girlBg {

    0% {
        opacity: 0;
        filter: blur(5px);
    }

    30%,
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

.girlBg {
    animation: girlBg .3s ease-out 0s 1 both;
}

.moving-start {

    /*background: #ff000087;*/

    z-index: 1;
    cursor: pointer;
    /*animation:     wobble 3s ease-out 0s infinite both;*/

    /*display: none;*/
    position: absolute;
    left: 10%;
    top: 40%;

    /*animation: pagination .5s ease-out 2.8s 1 both;*/
}

.girl01,
.girl02,
.girl03,
.girl04,
.girl05,
.girl06,
.girl07,
.girl08,
.girl09 {
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

.start01,
.start02,
.start03,
.start04,
.start05,
.start06,
.start07,
.start08,
.start09 {
    width: 100%;
    height: 100%;
    display: block;
    /*! background: red; */
    padding: 0 12px;
    border-radius: 14px;
    line-height: 1.6;
    font-size: 0.85rem;
    color: #fff;

    letter-spacing: 0.1rem;
}

.start01 {
    background: rgb(153, 194, 186)
}

.start02 {
    background: rgb(190, 181, 142);
}

.start03 {
    background: rgb(77, 57, 49);
}

.start04 {
    background: rgb(98, 112, 185);
    margin: -150% 0 0 0;
}

.start05 {
    background: rgb(101, 84, 95);
}

.start06 {
    background: rgb(167, 141, 99);
}







.girl01 {
    background-repeat: no-repeat;
    width: 11980px;
    height: 720px;
    background-image: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/01.png);
    animation: img-animation 1.8s steps(20) both infinite;

}

.girl02 {
    background-repeat: no-repeat;
    width: 11980px;
    height: 818px;
    background-image: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/02.png);
    animation: img-animation 1.8s steps(20) both infinite;
}

.girl03 {
    background-repeat: no-repeat;
    width: 11980px;
    height: 720px;
    background-image: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/03.png);
    animation: img-animation 1.8s steps(20) both infinite;
}

.girl04 {
    background-repeat: no-repeat;
    width: 11980px;
    height: 720px;
    background-image: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/04.png);
    animation: img-animation 1.8s steps(20) both infinite;
}

.girl05 {
    background-repeat: no-repeat;
    width: 11980px;
    height: 720px;
    background-image: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/05.png);
    animation: img-animation 1.8s steps(20) both infinite;
}

.girl06 {
    background-repeat: no-repeat;
    width: 11980px;
    height: 720px;
    background-image: url(https://media.zlongame.com/media/news/jp/archeland/officesite/main/hero/06.png);
    animation: img-animation 1.8s steps(20) both infinite;
}



@keyframes img-animation {
    0% {
        transform: translate3d(0, 0, 0);
    }

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








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


    .girl-img {
        transform: scale(0.8);
        left: 0;
        top: 10%;
    }

    .moveing-size {
        width: 500px;
        top: 15%;
        left: 23%;
    }

}


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


    .girl-img {
        transform: scale(0.8);
        left: -4%;
        top: 5%;
    }

    .moveing-size {
        width: 500px;
        top: 15%;
        left: 23%;
    }

}


@media screen and (max-width:1400px) {
    .girl-img {
        transform: scale(0.8);
        left: -5%;
        top: 5%;
    }


    .moveing-size {
        width: 500px;
        top: 5%;
        left: 23%;
    }

}


@media screen and (max-width:1280px) {
    .girl-img {
        transform: scale(0.65);
        left: -7%;
        top: 0;
    }

    .moveing-size {
        width: 510px;
        top: 9%;
        left: 16%;
    }

}

@media screen and (max-width:960px) {
    .girl-frame {
        top: 9%;
        left: 35%;
        transform: scale(0.8);
    }


    .moveing-size {
        width: 430px;
        top: 8%;
        left: 23%;
    }

}

@media screen and (max-width:768px) {
    .girl-img {
        display: none;
    }


}

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


}
*/


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



.box-video-m {
    display: none;
}

.hero-video {
    width: 23%;
    /*! height: 50%; */
    max-width: 425px;
    position: absolute;
    left: 38%;
    top: 65%;
    z-index: 0;
}


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

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

    .hero-video {
        width: 25%;
        height: 50%;
        left: 37%;
        top: 63%;
    }
}

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

    .hero-video {
        width: 25%;
        left: 36%;
        top: 64%;
    }
}

@media screen and (max-width:1400px) {
    .hero-video {
        width: 28%;
        left: 35%;
        top: 66%;
    }

}


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

    .box-video-m {
    width: 93%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    margin: auto;
}
    .hero-video {
        width: 43%;
        left: 6%;
        top: 83%;
    }

    .show-video-m {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80%;
        height: 25%;
        /*! background: red; */
        z-index: 5;
        cursor: pointer;
    }

    .df-close {
        top: -12%;
        transform: scale(0.7);
    }

}