@charset "utf-8";


:root{
    --fontSize: 10px;
    --width-content: 135rem;
}

html{
    font-size: var(--fontSize);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
section{
    position: relative;
}
img, video, iframe{ width: 100%; }
a{ display: block; }


.wrapper{
    overflow-x: clip;
    background: #0c0a20;
}
.contents{
    max-width: 192rem;
    background: #0a0002;
    margin: auto;
    border-left: solid #c92aea 0.2rem;
    border-right: solid #c92aea 0.2rem;
    border-bottom: solid #c92aea 0.2rem;
    overflow: clip;
}
.content{
    width: 100%;
    max-width: var(--width-content);
    margin: auto;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}


/* common */
.link-sw{ width: 22.2rem; }
.link-st{ width: 22rem; }
.link-x{ width: 18.8rem; }

/* リリースまでのstyle */
.link-sw{
    pointer-events: none;
}

.n-link{
    display: inline;
    border-bottom: 0.1rem solid #fff;
}
.n-link:hover{
    color: #ffff00;
    border-bottom: 0.1rem solid #ffff00;
}

.button-grad{
    background: linear-gradient(0deg, rgba(22, 168, 217, 1) 0%, rgba(248, 22, 255, 1) 100%);
    padding: 0.2rem;
    width: 22.4rem;
    color: #fff;
    font-weight: bold;
}
.button-grad.--double{
    width: 35rem;
}
.button-grad a{
    background: #053A56;
    background: linear-gradient(0deg, rgba(5, 58, 86, 1) 0%, rgba(15, 5, 6, 1) 100%);
    padding: 0.7rem 0 1rem;
    font-size: 1.8rem;
    text-align: center;
}
.button-grad.--double a{
    padding: 0.6rem;
    display: flex;
    font-size: 2.2rem;
    flex-wrap: wrap;
}
.button-grad.--double span{
    display: block;
    width: 100%;
    background: linear-gradient(0deg, rgba(22, 168, 217, 1) 0%, rgba(248, 22, 255, 1) 100%);
    padding: 0.2rem;
}
.button-grad.--double span label{
    display: block;
    width: 100%;
    height: 100%;
    background: #053A56;
    background: linear-gradient(0deg, rgba(5, 58, 86, 1) 0%, rgba(15, 5, 6, 1) 100%);
    padding: 0.5rem 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
}

.button-grad:has(a:hover){
    background: #ffff00;
}
.button-grad a:hover,
.button-grad a:hover label,
.button-grad a:hover span{
    background: #FFEB00;
    background: linear-gradient(0deg,rgba(255, 235, 0, 1) 0%, rgba(255, 182, 0, 1) 100%);
    color: #831577;
}
.button-grad a:hover span{
}


.view-sp{ display: none; }

.button-border{
    background: #16A8D9;
    background: linear-gradient(0deg,rgba(22, 168, 217, 1) 0%, rgba(248, 22, 255, 1) 100%);
}

.__inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* header */
header{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    border-top: solid #c92aea 0.2rem;
    border-bottom: solid #c92aea 0.2rem;
}
header .navigation{
    display: flex;
    flex-wrap: wrap;
    background: #0c0a20;
}
header .header-lang{
    width: 22.7rem;
    height: 5.2rem;
    background: url("../images/frame-lang.png") no-repeat left center / 100% auto;
    position: absolute;
    top: 8.5rem;
    right: -7rem;
    caret-color: #fff;
    font-weight: bold;
    font-size: 4rem;
    color: #29ffff;
    text-shadow: 0 0 1rem rgba(34, 97, 223, 0.8), 0 0 1rem rgba(34, 97, 223, 0.8), 0 0 1rem rgba(34, 97, 223, 0.8);
}
header .header-lang a{
    padding-left: 6.6rem;
    padding-top: 0.2rem;
}
header .logo{
    width: 20rem;
    padding: 0.8rem 0.5rem 0.2rem;
}
header nav{
    width: calc(100% - 20rem);
    color: #fff;
    font-size: 2.2rem;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
}
header nav a{
    margin: 0 3.5rem;
    position: relative;
}
header nav a span{
    position: relative;
    z-index: 1;
}
header nav a.active{
    color: #87ffff;
    text-shadow: 0 0 1rem rgba(37, 218, 239, 1), 0 0 1rem rgba(37, 218, 239, 1), 0 0 1rem rgba(37, 218, 239, 1);
}
header nav a.active:before{
    content: "";
    display: block;
    width: 23.5rem;
    height: 1.8rem;
    background: url("../images/top/nav-bklight.png") no-repeat center / 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
header nav a span:hover{
    color: #87ffff;
    text-shadow: 0 0 1rem rgba(37, 218, 239, 1), 0 0 1rem rgba(37, 218, 239, 1), 0 0 1rem rgba(37, 218, 239, 1);
    transition: 0.2s;
}



/* top */
.top .section-wrap{
    background: url("../images/top/bg.jpg") no-repeat center top / 192rem auto;
    border-bottom: solid 0.2rem #c92aea;
}
.top .content{
    padding: 12.5rem 0 4.2rem;
}
.top-logo{
    width: 69rem;
    margin: 0 auto 0;
    transform: translate(2rem, 0);
}
.top-title{
    width: 35.7rem;
    border: #5ec9ff solid 0.2rem;
    border-radius: 5rem;
    overflow: hidden;
    font-size: 3.2rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 0.5rem rgba(0, 120, 255, 0.8), 0 0 0.5rem rgba(0, 120, 255, 0.8), 0 0 0.5rem rgba(0, 120, 255, 0.8);
    margin: 1.5rem auto 0;
    box-shadow: 0rem 0rem 0.4rem 0.4rem #2d2521;
}
.top-title span{
    display: block;
    width: 100%;
    padding: 0.5rem 0 0.8rem;
    background: #1b1313;
    border-radius: inherit;
    box-shadow: inset 0 0 1rem #082b73;
}




/* about */
.about .section-wrap{
    background: url("../images/about/bg.jpg") no-repeat center top / max(189.7rem, 100%) auto;
    border-bottom: solid 0.2rem #c92aea;
}
.about .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 9rem 0 9rem;
}
.about-press{
    width: 84rem;
    padding-bottom: 62rem;
    position: relative;
    background: url("../images/about/frame-left.png") no-repeat center top / 100% auto;
    margin-right: 4.6rem;
}
.about-press dl{
    width: 67rem;
    margin: 4.5rem auto 0;
}
.about-press dt{
    font-size: 2.4rem;
    font-weight: bold;
    color: #29ffff;
    text-shadow: 0 0 2rem rgba(34, 97, 223, 0.8), 0 0 2rem rgba(34, 97, 223, 0.8), 0 0 2rem rgba(34, 97, 223, 0.8);
    border-bottom: solid 0.2rem #00c0ff;
    padding-bottom: 1.8rem;
}
.about-press dd{
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    margin: 1rem 0 3rem;
    line-height: 1.75;
}
.about-data{
    width: 31.3rem;
    padding-bottom: 55.8rem;
    position: relative;
    background: url("../images/about/frame-right.png") no-repeat center top / 100% auto;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.65;
}

.about-data .__inner{
    padding: 5rem 3.5rem;
}
.about-data dt{
    color: #00b7f4;
}
.about-data dd{
    color: #fff;
    margin-bottom: 2.2rem;
}


/* movie */
.movie .section-wrap{
    background: url("../images/movie/bg.jpg") no-repeat center top / max(189.7rem, 100%) auto;
    padding: 30.8rem 0 49.5rem;
}
.movie h2{
    width: 240.1rem;
    height: 9.5rem;
    position: absolute;
    top: 10rem;
    left: 50%;
    transform: translate(-50%, 0);
}
.movie-frame{
    margin: 0 auto 0;
    width: 88rem;
    box-shadow: 0px 0px 1rem 0.5rem rgba(0, 0, 0, 0.7);
}
.movie-frame-clip{
    clip-path: polygon(1rem 0, 100% 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1rem);
    padding: 0.5rem 1.5rem;
    background: #ffc933;
}
.movie-frame iframe{
    height: 48rem;
}
.movie-link{
    margin: 1rem auto 0;
    width: 88rem;
}
.movie-link-clip{
    clip-path: polygon(1rem 0, 100% 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1rem);
    padding: 1rem 0 1.5rem;
    background: #ffc933;
    color: #831577;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}
.movie-link-clip a{
    display: inline-block;
}


/* presskit */
.presskit{
    margin-top: -24rem;
}
.presskit h2{
    width: 240.1rem;
    height: 9.5rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.presskit .content{
    padding: 12rem 0 10rem;
}
.presskit-dlAll .button-grad{
    margin: auto;
}
.presskit-images{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5rem;
}
.presskit-images > div{
    width: 50%;
}
.presskit-headline{
    font-size: 4.2rem;
    font-weight: bold;
    color: #29ffff;
    text-shadow: 0 0 1rem rgba(34, 97, 223, 0.8), 0 0 1rem rgba(34, 97, 223, 0.8), 0 0 1rem rgba(34, 97, 223, 0.8);
    text-align: center;
    position: relative;
}
.presskit-headline:before{
    content: "";
    display: block;
    width: 75.9rem;
    height: 4.7rem;
    background: url("../images/presskit/bg-headline.png") no-repeat center / 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.presskit-headline span{
    position: relative;
}
.presskit-image{
    width: 32.8rem;
    height: 22.3rem;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #ffc933;
    position: relative;
    margin: 7rem auto 0;
}
.presskit-image img{
    width: 32.4rem;
    height: 21.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.presskit-download{
    margin: 2.5rem auto 0;
}
.presskit-download .button-grad{
    margin: auto;
}



/* screenshot */
.screenshot .section-wrap{
    background: url("../images/screenshot/bg.jpg") no-repeat center top 10rem / 251.6rem auto;
}
.screenshot h2{
    width: 240.1rem;
    height: 9.5rem;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0);
}
.screenshot .content{
    padding: 13rem 0 7rem;
}
.ss-list-box{
    margin-bottom: 4rem;
}
.ss-image{
    width: 24.2rem;
    height: 17.5rem;
    position: relative;
    margin-bottom: 1.5rem;
}
.screenshot-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 6rem;
}
.ss-image:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/screenshot/frame-ss.png") no-repeat center center / 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.ss-image span{
    display: block;
    width: 100%;
    height: 97%;
    overflow: hidden;
    position: relative;
    margin-top: 1.2%;
}
.ss-image img{
    width: calc(118% - 1.6rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.4s;
}
.ss-download .button-grad{
    margin: auto;
}



/* footer */
footer{
    background: url("../images/footer/deco-bottom.jpg") no-repeat center bottom / 100% auto;
}
footer .content{
    padding: 0 0 5rem;
}
.footer-deco{
    width: 20rem;
    margin: 0 auto;
}
.footer-spec{
    background: url("../images/footer/frame.png") no-repeat center top / 100% auto;
    width: 130rem;
    height: 38rem;
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 1rem;
}
.spec-table{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding: 5rem 0 0 10rem;
}
.footer-spec dl{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 35rem;
    margin-bottom: 1rem;
}
.footer-spec dl.spec-col01{
    width: 33rem;
}
.footer-spec dl.spec-col02{
    width: 35rem;
}
.footer-spec dl.spec-col03{
    width: 46rem;
}
.footer-spec dl.full{
    width: 100%;
}
.footer-spec dt{
    width: 19rem;
    height: 4.8rem;
    line-height: 4.8rem;
    color: #ffcd00;
    background: #982e97;
    text-align: center;
}
.footer-spec dd{
    color: #fff;
    padding: 0.5rem 0 0.8rem;
    width: calc(100% - 19rem);
    padding-left: 1rem;
    line-height: 1.25;
}
.footer-spec dd.r2{
    padding: 0 0 0 1rem;
    transform: translate(0, -0.1rem);
    transform-origin: left center;
}
.footer-links{
    margin-top: 1rem;
}
.footer-links-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-links-row:not(:first-child){
    margin-top: 2rem;
}
.footer-links-row a{
    margin: 0 1rem;
}
.footer-sns{
    margin-top: 3rem;
}
.footer-sns a{
    margin: auto;
}
.footer-nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5rem;
}
.footer-nav a{
    color: #fff;
    width: 18rem;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 1rem;
    text-align: center;
    padding: 1.25rem 0;
    padding: 0.2rem;
}
.footer-nav a span{
    display: block;
    width: 100%;
    height: 100%;
    background: #053A56;
    background: linear-gradient(0deg,rgba(5, 58, 86, 1) 0%, rgba(15, 5, 6, 1) 100%);
    padding: 1rem 0;
}
.footer-nav a.--guide{
    width: 33rem;
}

.footer-nav a.active{
    background: #ffff00;
    box-shadow: -0.3rem -0.3rem 1rem 0.1rem rgba(255, 255, 0, 0.3), 0.3rem 0.3rem 1rem 0.1rem rgba(255, 255, 0, 0.3);
}
.footer-nav a.active span{
    background: #FFEB00;
    background: linear-gradient(0deg,rgba(255, 235, 0, 1) 0%, rgba(255, 182, 0, 1) 100%);
    color: #831577;
}

.footer-nav a:hover{
    background: #ffff00;
}
.footer-nav a:hover span{
    background: #FFEB00;
    background: linear-gradient(0deg,rgba(255, 235, 0, 1) 0%, rgba(255, 182, 0, 1) 100%);
    color: #831577;
}


.copyright{
    font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-top: 6rem;
}
.copyright a{
    display: inline;
    text-decoration: underline;
}


/* menu */
.snlib--modal .modal__content{
    padding: 0;
    background: initial;
}
.---modal-menu .modal__inWrap{
    height: 100vh;
    padding: 0;
    background: url("../images/modal/bg.jpg") no-repeat center top / 100% auto;
    vertical-align: initial;
}
.snlib--modal .modal__outWrap{
    background: #0b0002;
}
.---modal-menu .modal__main{
    padding-top: 13rem;
    padding-bottom: 5rem;
}
.---modal-menu .modal__main:after{
    content: "";
    display: block;
    width: 22.1rem;
    height: 19.7rem;
    background: url("../images/footer/deco.png") no-repeat center top / 100% auto;
    margin: 12.5rem auto 0;
}
.---modal-menu nav{
    margin-top: 5.5rem;
}
.---modal-menu nav a{
    color: #fff;
    width: 100%;
    height: 9.5rem;
    font-size: 2.8rem;
    font-weight: bold;
    padding: 0.2rem;
    margin-bottom: 2.8rem;
}
.---modal-menu nav a.active{
    background: #ffff00;
}
.---modal-menu nav a span{
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-items: center;
    background: #053A56;
    background: linear-gradient(0deg,rgba(5, 58, 86, 1) 0%, rgba(15, 5, 6, 1) 100%);
    padding: 0 9rem;
    position: relative;
}
.---modal-menu nav a.active span{
    background: #FFEB00;
    background: linear-gradient(0deg,rgba(255, 235, 0, 1) 0%, rgba(255, 182, 0, 1) 100%);
    color: #831577;
}
.spMenu-close{
    width: 5.2rem;
    position: absolute;
    top: 1.5rem;
    right: 0;
}
.spMenu-logo{
    width: 50rem;
    margin: auto;
}
.spMenu-lang{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 3.5rem;
}
.spMenu-lang a{
    width: 12rem;
    border: solid 0.2rem #008484;
    background: #030208;
    color: #a4a4a5;
    font-size: 3.2rem;
    font-weight: bold;
    margin: 0 1.75rem;
    padding: 0.9rem 0 1.2rem;
    text-align: center;
    position: relative;
}
.spMenu-lang a.active{
    border: solid 0.2rem #29ffff;
    background: #1A687B;
    background: linear-gradient(0deg,rgba(26, 104, 123, 1) 0%, rgba(14, 13, 40, 1) 100%);
    color: #fff;
}
.---modal-menu nav a span:before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translate(0, -50%);
}

.---modal-menu nav a.--top span:before{
    background: url("../images/modal/ic-top.png") no-repeat top center / 100% auto;
    width: 7.5rem;
    height: 7.2rem;

}
.---modal-menu nav a.--top.active span:before{
    background: url("../images/modal/ic-top-on.png") no-repeat top center / 100% auto;
    width: 4.3rem;
    height: 3.8rem;
    left: 2.7rem;
}

.---modal-menu nav a.--presskit span:before{
    background: url("../images/modal/ic-presskit.png") no-repeat top center / 100% auto;
    width: 8.1rem;
    height: 8.1rem;
    left: 0.75rem;
}
.---modal-menu nav a.--presskit.active span:before{
    background: url("../images/modal/ic-presskit-on.png") no-repeat top center / 100% auto;
    width: 8.1rem;
    height: 8.1rem;
}

.---modal-menu nav a.--contact span:before{
    background: url("../images/modal/ic-contact.png") no-repeat top center / 100% auto;
    width: 7.4rem;
    height: 6.8rem;
}

.---modal-menu nav a.--guide span:before{
    background: url("../images/modal/ic-guide.png") no-repeat top center / 100% auto;
    width: 7.2rem;
    height: 8.3rem;
}

.spMenu-sns{
    margin: 6.5rem auto 0;
}
.spMenu-sns a{
    width: 35rem;
    height: 10rem;
    color: #fff;
    font-size: 2.8rem;
    font-weight: bold;
    padding: 0.2rem;
    margin: 0 auto 2.8rem;
}
.spMenu-sns span{
    display: block;
    height: 100%;
    background: #000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 4.5rem;
    line-height: 1.25;
}
.spMenu-sns span img{
    width: 4.8rem;
    margin-left: 3.5rem;
}


/* gallery */
.---modal-gallery .modal__outWrap{
    background: rgba(100, 100, 100, 0.6);
}
#modal-gallery.snlib-modal .modal-content{
    padding: 0;
}
.---modal-gallery .modal__content{
    max-width: 100rem;
}
.close-top{
    width: 5.4rem;
    margin: 0 0 1.5rem auto;
    position: relative;
}
.close-top:hover{
    opacity: 0.8;
}
#modal-gallery .close-top{
    transform: rotate(45deg);
}


@media screen and (max-width: 1350px) {
    :root{
        --fontSize: calc(10 / 1350 * 100vw);
    }
}


@media screen and (max-width: 1000px) {
    :root{
        --fontSize: calc(10 / 750 * 100vw);
    }

    .wrapper{
        background-color: #0d0a21;
    }

    /* common */
    .link-sw{ width: 27.8rem; }
    .link-st{ width: 27.5rem; }

    .view-pc{ display: none; }
    .view-sp{ display: block; }

    .button-grad{
        width: 24rem;
    }
    .button-grad.--double{
        width: 55.7rem;
    }
    .button-grad a{
        font-size: 2.6rem;
        padding: 1.4rem 0;
    }
    .button-grad.--double a{
        padding: 1.5rem 2rem;
    }
    .button-grad.--double span{
        width: 100%;
    }
    .button-grad.--double span label{
        padding: 1.5rem 0 2rem;
        font-size: 3.8rem;
    }

    /* header */
    header nav{
        display: none;
    }
    .menu-sp{
        width: calc(100% - 20rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        align-items: center;
    }
    header .logo{
        width: 18.9rem;
        padding: 1.5rem;
    }
    .menu-sp .menu-x{
        width: 4.8rem;
        margin-right: 5.5rem;
    }
    .menu-sp .menu-open{
        width: 6.2rem;
        margin-right: 2.3rem;
    }




    /* top */
    .top .section-wrap{
        background: url("../images/top/bg-sp.jpg") no-repeat center top / 100% auto;
    }
    .top .content{
        padding: 9.5rem 0 5.2rem;
    }
    .top-logo{
        width: 42.6rem;
        transform: translate(1.2rem, 0);
    }
    .top-title{
        width: 28rem;
    }


    /* about */
    .about .section-wrap{
        background: url("../images/about/bg-sp.jpg") no-repeat center top / 100% auto;
    }
    .about .content{
        padding: 8rem 0 10rem;
    }
    .about-press{
        width: 71.1rem;
        padding-bottom: 142.6rem;
        background: url("../images/about/frame-left-sp.png") no-repeat center top / 100% auto;
        margin-right: 0;
    }
    .about-press dl{
        width: 58rem;
        margin: 5rem auto 0;
    }
    .about-press dt{
        font-size: 3.6rem;
    }
    .about-press dd{
        font-size: 2.8rem;
        font-weight: normal;
        margin-bottom: 4rem;
    }
    .about-data{
        width: 71rem;
        padding-bottom: 69.3rem;
        background: url("../images/about/frame-right-sp.png") no-repeat center top / 100% auto;
        margin-top: 4rem;
    }
    .about-data .__inner{
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        padding: 6rem 0 0 5.2rem;
    }
    .about-data .__inner > div{
        width: 30rem;
        margin-bottom: 3rem;
    }
    .about-data dt, .about-data dd{
        font-size: 2.8rem;
    }
    .about-data dd{
        font-weight: normal;
    }


    /* movie */
    .movie .section-wrap{
        background: url("../images/movie/bg-sp.jpg") no-repeat center top / 100% auto;
        padding: 30.8rem 0 14rem;
    }
    .movie h2{
        width: 290rem;
        top: 12.6rem;
    }
    .movie-frame{
        width: 100%;
    }
    .movie-screen iframe{
        height: 39.8rem;
    }
    .movie-link{
        margin: 1.5rem auto 0;
        width: 100%;
    }
    .movie-link-clip{
        font-size: 2.6rem;
        padding: 1.5rem 0 2rem;
    }


    /* presskit */
    .presskit{
        margin: 0;
    }
    .presskit h2{
        top: 4rem;
    }
    .presskit .content{
        padding: 20rem 0 0;
    }
    .presskit-images{
        justify-content: center;
        margin-top: 7rem;
    }
    .presskit-images > div{
        width: 55.7rem;
        margin-bottom: 13.5rem;
    }
    .presskit-headline{
        font-size: 3.8rem;
    }
    .presskit-image{
        width: 100%;
        height: 38.2rem;
        margin: 2.5rem auto 0;
    }
    .presskit-image img{
        width: calc(100% - 0.4rem);
        height: 37.8rem
    }


    /* screenshot */
    .screenshot h2{
        width: 290rem;
    }
    .screenshot-list{
        width: 60rem;
        margin: 6.5rem auto 0;
        justify-content: space-between;
    }
    .screenshot-list > div{
        width: auto;
    }
    .ss-list-box{
        margin-bottom: 4.5rem;
    }
    .ss-image{
        width: 29rem;
        height: 20.2rem;
        margin-bottom: 2.5rem;
    }
    .ss-image img{
        top: 51.5%;
    }
    .ss-image span{
        margin-top: 0;
    }










    .screenshot .content{
        padding: 23rem 0 10.5rem;
    }
    .screenshot .section-wrap{
        background: url("../images/screenshot/bg-sp.jpg") no-repeat center top / 100% auto;
    }
    .screenshot .section-wrap:before,
    .screenshot .section-wrap:after{
        display: none;
    }

    .screenshot-list > div:nth-last-child(1),
    .screenshot-list > div:nth-last-child(2){
        margin-bottom: 0;
    }


    /* footer */
    footer{
        background: url("../images/footer/deco-bottom.jpg") no-repeat center bottom / 248% auto;
    }
    footer .content{
        padding: 0 0 5rem !important;
    }
    .footer-spec{
        background: url("../images/footer/frame-sp.png") no-repeat center top / 100% auto;
        width: 73rem;
        height: 91.2rem;
        padding: 7rem 0 0;
        margin: auto;
        font-size: 2.4rem;
    }
    .footer-logo{
        width: 34.5rem;
        margin: auto;
    }
    .spec-table{
        padding: 1rem 0 0 8rem;
    }
    .footer-spec dl{
        width: 100% !important;
    }
    .footer-spec dt{
        width: 18rem;
        height: 4.5rem;
        line-height: 4.5rem;
    }
    .footer-spec dt.r2{
        padding: 1.7rem 0 2rem;
    }
    .footer-spec .--num dt,
    .footer-spec .--lang dt{
        height: 6.5rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .footer-spec .--date dt{
        height: 12.5rem;
        line-height: 12.5rem;
    }
    .footer-spec dd{
        padding: 0rem 0 0.2rem 2rem;
        width: calc(100% - 25rem);
    }
    .footer-spec dd.r2{
        padding: 0 0 0 2rem;
        transform: none;
    }
    .footer-spec dl dd.r2{
        font-size: 2rem;
        line-height: 1.5;
        transform: none;
    }
    .footer-spec dl.spec-col03{
        width: 58rem !important;
    }
    .footer-links{
        margin-top: 2.5rem;
    }
    .footer-links-row a{
        margin: 0 0.5rem;
    }
    .footer-nav a{
        width: 27.5rem;
        margin-bottom: 3.5rem;
        font-size: 2.4rem;
    }
    .footer-nav a.--guide{
        width: 48.4rem;
    }
    .footer-nav a span{
        padding: 1.3rem 0 1.5rem;
    }
}