@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; }

.view-sp{ display: none; }

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

/* リリースまでのstyle */
.link-sw{
    position: relative;
    pointer-events: none;
}
.link-sw img{
    opacity: 0;
}
.link-sw:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/btn-sw-soon.png") no-repeat top center / 100% auto;
}
/* リリースまでのstyle */

/* 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.5rem;
}
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;
}
.top .content{
    padding: 30rem 0 6.5rem;
}
.top-logo{
    width: 69rem;
    margin: 0 auto 0;
}
.top-links{
    margin-top: 6rem;
}
.top-links-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.top-links-row:not(:first-child){
    margin-top: 2rem;
}
.top-links-row a{
    margin: 0 1rem;
}



/* about */
.about .section-wrap{
    background: url("../images/about/bg.png") no-repeat center top / 251.6rem auto;
}
.about .content{
    padding: 20rem 0 25rem;
}
.about-text01{
    color: #29ffff;
    font-size: 4.2rem;
    font-weight: bold;
    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;
}
.about-text02{
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    line-height: 2;
    margin-top: 3.5rem;
}
.about-movie{
    margin: 8rem auto 0;
    width: 88rem;
    box-shadow: 0px 0px 1rem 0.5rem rgba(0, 0, 0, 0.7);
}
.about-movie-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;
}
.about-movie iframe{
    height: 48rem;
}



/* screenshot */
.screenshot .section-wrap{
    background: url("../images/screenshot/bg.jpg") no-repeat center top 10rem / 251.6rem auto;
}
.screenshot .section-wrap:before{
    content: "";
    display: block;
    width: 100%;
    height: 30rem;
    background: linear-gradient(rgba(10, 0, 2, 1) 0%, rgba(10, 0, 2, 1) 40%, rgba(10, 0, 2, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.screenshot .section-wrap:after{
    content: "";
    display: block;
    width: 100%;
    height: 30rem;
    background: linear-gradient(rgba(10, 0, 2, 0) 0%, rgba(10, 0, 2, 0) 60%, rgba(10, 0, 2, 1) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
.screenshot h2{
    width: 240.1rem;
    height: 9.5rem;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0);
}
.screenshot .content{
    padding: 32rem 0 15rem;
}
.screenshot-list > div{
    width: 24.2rem;
    height: 17.5rem;
    position: relative;
    margin-bottom: 1.5rem;
}
.screenshot-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.screenshot-list > div: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;
}
.screenshot-list > div a{
    width: 100%;
    height: 97%;
    overflow: hidden;
    position: relative;
    margin-top: 1.2%;
}
.screenshot-list > div img{
    width: calc(118% - 1.6rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.4s;
}
.screenshot-list > div img:hover{
    transform: translate(-50%, -50%) scale(1.3, 1.3);
}



/* mode */
.mode h2{
    width: 240.1rem;
    height: 9.5rem;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0);
}
.mode .content{
    padding: 18rem 0 10rem;
}
.mode-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mode-block{
    width: 62.5rem;
    text-align: center;
    margin-bottom: 12.5rem;
    position: relative;
}
.mode-block:after{
    content: "";
    display: block;
    width: 50rem;
    height: 30.1rem;
    position: absolute;
    top: 28rem;
    left: 50%;
    transform: translate(-50%, 0);
}
.mode-block.--01:after{ background: url("../images/mode/bg-01.png") no-repeat center top / 100% auto; }
.mode-block.--02:after{ background: url("../images/mode/bg-02.png") no-repeat center top / 100% auto; }
.mode-block.--03:after{ background: url("../images/mode/bg-03.png") no-repeat center top / 100% auto; }
.mode-block.--04:after{ background: url("../images/mode/bg-04.png") no-repeat center top / 100% auto; }
.mode-block.--05:after{ background: url("../images/mode/bg-05.png") no-repeat center top / 100% auto; }
.mode-block.--06:after{ background: url("../images/mode/bg-06.png") no-repeat center top / 100% auto; }
.mode-thumb{
    width: 100%;
    height: 35.1rem;
    position: relative;
}
.mode-thumb:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/mode/frame.png") no-repeat center top / 100% auto;
    position: absolute;
    top: 0;
    left: 0;
}
.mode-thumb img{
    width: 96%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mode-name{
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}
.mode-text{
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    line-height: 2;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
}
.ic-mewmew{
    width: 20rem;
    position: absolute;
    left: 0.2rem;
    bottom: 8.8rem;
    z-index: 1;
}
.ic-cube{
    width: 15rem;
    position: absolute;
    right: 1.5rem;
    top: -6rem;
}

.swiper-wrapper{
    width: auto;
    height: auto;
    flex-wrap: wrap;
    justify-content: space-between;
}
.swiper-slide{
    width: auto;
}
.swiper-button-next, .swiper-button-prev{
    width: 7.5rem;
    height: 8.4rem;
    top: 45rem;
}
.swiper-button-next{
    right: 0;
}
.swiper-button-prev{
    left: 0;
}
.swiper-button-next:after, .swiper-button-prev:after{
    background: url("../images/mode/btn-arrow.png") no-repeat center / 100% auto;
    font-family: none;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}
.swiper-button-next:after{
    scale: -1 1;
}
.swiper-pagination-bullet{
    background: #4f0cae;
    opacity: 1;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 0.7rem !important;
}
.swiper-pagination-bullet-active{
    background: #ffc933;
}



/* reward */
.reward h2{
    width: 240.1rem;
    height: 9.5rem;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0);
}
.reward .content{
    padding: 18rem 0 15rem;
    position: relative;
}
.reward .content:before{
    content: "";
    display: block;
    width: 76.9rem;
    height: 46.2rem;
    background: url("../images/reward/bg.png") no-repeat center top / 100% auto;
    position: absolute;
    top: 46rem;
    left: 50%;
    transform: translate(-50%, 0);
}
.reward-image{
    width: 70rem;
    margin: 0 auto 0;
    position: relative;
    z-index: 1;
}
.reward p{
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 2;
    margin: 1rem;
    position: relative;
}



/* 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: 6rem 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: 32rem;
}
.footer-spec dl.spec-col02{
    width: 34rem;
}
.footer-spec dl.spec-col02.--long{
    width: 45em;
}
.footer-spec dl.spec-col03{
    width: 46rem;
}
.footer-spec dl.full{
    width: 100%;
}

.footer-spec dt{
    width: 16.5rem;
    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% - 16.5rem);
    padding-left: 1rem;
}

.footer-spec dt.r2 span{
    display: block;
    line-height: 1.35;
    transform: scale(0.9) translate(0, -0.2rem);
    transform-origin: center center;
}
.footer-spec dl dd.r2{
    padding: 0 0 0 1rem;
    transform: scale(0.9) translate(0, -0.1rem);
    transform-origin: left center;
    line-height: 1.25;
}

.footer-links{
    margin-top: 1.2rem;
}
.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 6.5rem;
}
.spMenu-sns span img{
    width: 4.8rem;
    margin-left: 4.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; }


    /* 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: 34rem 0 32rem;
    }
    .top-logo{
        width: 65.4rem;
        transform: translate(1.5rem, 0);
    }
    .top-links{
        margin-top: 3rem;
    }


    /* about */
    .about .section-wrap{
        background: url("../images/about/bg-sp.jpg") no-repeat center top / 100% auto;
    }
    .about .content{
        padding: 16rem 0 20rem;
    }
    .about-text02{
        margin-top: 10.5rem;
        font-size: 3.2rem;
        line-height: 1.5;
        font-weight: normal;
    }
    .about-movie{
        margin: 5rem auto 0;
        width: 100%;
    }
    .about-movie iframe{
        height: 39.8rem;
    }


    /* screenshot */
    .screenshot h2{
        width: 290rem;
    }
    .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{
        width: 60rem;
        margin: auto;
    }
    .screenshot-list > div{
        width: 29.2rem;
        height: 20.2rem;
        margin-bottom: 2.6rem;
    }
    .screenshot-list > div:nth-last-child(1),
    .screenshot-list > div:nth-last-child(2){
        margin-bottom: 0;
    }


    /* mode */
    .mode h2{
        width: 290rem;
        top: 5rem;
    }
    .mode .content{
        background-color: #0a0002;
        padding: 18.5rem 0 15rem !important;
    }
    .mode-block{
        width: 70rem;
        margin: auto;
        padding: 2.5rem 0 10rem;
    }
    .mode-block:after{
        width: 72rem;
        height: 41rem;
        top: 32.8rem;
    }
    .mode-thumb{
        height: 39.3rem;
    }

    .swiper-wrapper{
        width: 100%;
        height: 100%;
        flex-wrap: nowrap;
        justify-content: normal;
    }
    .swiper-slide{
        width: 100%;
    }
    .mode-name{
        margin-top: 2.5rem;
    }
    .mode-text{
        font-size: 2.6rem;
        margin-top: 3rem;
    }
    .ic-mewmew{
        width: 23.4rem;
        bottom: auto;
        top: 2.2rem;
        left: -1.4rem;
    }
    .ic-cube{
        right: -3rem;
        top: 0rem;
    }


    /* reward */
    .reward .content{
        padding: 18rem 0 2rem;
    }
    .reward h2{
        width: 290rem;
    }
    .reward-image{
        width: 68rem;
    }
    .reward p{
        font-size: 2.6rem;
    }


    /* 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: 8.5rem 0 0;
        margin: auto;
        font-size: 2.4rem;
    }
    .footer-logo{
        width: 34.5rem;
        margin: auto;
    }
    .spec-table{
        padding: 4rem 0 0 7.4rem;
    }
    .footer-spec dl{
        width: 60rem !important;
    }
    .footer-spec dt{
        width: 16rem;
        height: 4.5rem;
        line-height: 4.5rem;
    }
    .footer-spec dd{
        width: calc(100% - 16rem);
    }
    .footer-spec dl dd.r2{
        font-size: 2rem;
        line-height: 1.5;
        transform: none;
    }
    .footer-spec .--pf dt,
    .footer-spec .--date dt{
        height: 7rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }
    .footer-spec .--date dd{
            transform: scale(0.9) translate(0, -0.1rem);
    }
    .footer-spec dl.spec-col03{
        width: 58rem !important;
    }
    .footer-links{
        margin-top: 4rem;
    }
    .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;
    }
}