@charset "utf-8";
/*!
 * "LINE Seed" licensed under the SIL Open Font License
 * https://seed.line.me/index_jp.html
 * https://scripts.sil.org/OFL
 * © LY Corporation
*/
@font-face {
  font-family: 'LINESeedJP_Rg';
  src: url('../../fonts/LINESeedJP_OTF_Rg.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Eb';
  src: url('../../fonts/LINESeedJP_OTF_Eb.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Bd';
  src: url('../../fonts/LINESeedJP_OTF_Bd.woff') format('woff');
}


#acclog{
    width: auto;
    display: none;
}





html{
    font-family: 'LINESeedJP_Rg', sans-serif;
    font-size: 62.5%;
    /* font-weight: bold; */
    color: #4c3d26;
}
body{
    background-color: #260502;
}
section{
    position: relative;
}
#wrapper{
    width: 100%;
    max-width: 190rem;
    margin: auto;
}
#contents{
    border-left: solid 0.2rem #daae59;
    border-right: solid 0.2rem #daae59;
}


/* ==============================
comomon
*/
img{
    width: 100%;
}
a{
    display: block;
}
h2{
    width: 99.333%;
    margin: auto;
}
.spbr{
    display: none;
}
.dn--pc{
    display: none;
}
.__inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.__content{
    max-width: 140rem;
    margin: auto;
    position: relative;
    padding: 0 2.5rem;
}
.content__list section{
    width: 87.8%;
    max-width: 167rem;
    margin: auto;
}


/* ==============================
header
*/
header{
    width: 100%;
    height: 6.5rem;
    position: relative;
    border-bottom: solid 0.2rem #daae59;
}
header .__inner{
    background-color: #2e2214;
    background-image: url("../images/common/nav_bg_texture.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
.header__logo{
    width: 11rem;
    margin: 0 3rem 0 1.6rem;
}
header nav a{
    font-family: LINESeedJP_Rg;
    font-size: 1.8rem;
}
header nav li.--top{ width: 21rem; }
header nav li.--presskit{ width: 21rem; }
header nav li.--contact{ width: 21rem; }
header nav li.--guideline{ width: 33rem; }
header nav li:last-child{
    margin-right: 5rem;
}
.header__link{
    margin-left: auto;
}
.header__link ul{
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-top: 1.5rem;
}

.content__list{
    width: 100%;
    max-width: 190rem;
    background-image: url("../images/common/bg.png");
    background-size: 100% auto;
    padding: 28rem 0 0;
    margin-top: -20rem;
}


/* ==============================
top
*/
#top{
    padding-bottom: 45.7rem;
}
#top .__inner {
    background-image: url("../images/top/bg.png");
    background-size: 190rem auto;
    background-position: center top;
}
#top .__content{
    height: 100%;
}
.top__content{
    position: relative;
    height: 100%;
}
.top__tl{
    padding: 5.5rem 0 0 11rem;
}
h1{
    width: 56rem;
}
.sub_ttl{
    width: 56rem;
    text-align: center;
    margin-top: 2rem;
}
.sub_ttl img{
    width: 29.6rem;
}
.top__chara{
    width: 52.4rem;
    position: absolute;
    bottom: 0;
    right: 11.5rem;
}
.lang{
    width: 12.1rem;
    position: absolute;
    top: 0;
    right: 2rem;
}



/* ==============================
about
*/
#about{
    padding-bottom: 82.9rem;
}
#about > .__inner{
    background-image: url("../images/about/bg.jpg");
    background-size: 190rem auto;
    background-position: center top;
}

#about .__content{
    display: flex;
    flex-wrap: wrap;
    padding: 8.5rem 0 0;
    justify-content: center;
}
#about .__content > div{
    margin: 0 1.25rem;
}

.press{
    width: 95.2rem;
    height: 65.5rem;
    background-image: url("../images/about/frame_l.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
}
.press .__inner{
    padding: 3.5rem 8rem;
}
.data{
    width: 31.8rem;
    height: 43.9rem;
    background-image: url("../images/about/frame_s.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
}

.press dt{
    color: #ffd45f;
    font-size: 3rem;
    font-family: LINESeedJP_Bd;
    position: relative;
    padding-left: 1rem;
}
.press dt:before{
    content: "";
    display: block;
    width: 75.9rem;
    height: 1.5rem;
    background-image: url("../images/about/deco.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -2.4rem;
    left: 0;
}
.press dd{
    color: #fff9d9;
    font-size: 1.6rem;
    line-height: 2;
    padding-top: 3.21rem;
    padding-left: 1rem;
    margin-bottom: 2.5rem;
}


.data .__inner{
    padding: 5rem;
}
.data dt{
    color: #ffd45f;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}
.data dd{
    color: #fff9d9;
    font-size: 1.6rem;
    margin-bottom: 3rem;
    line-height: 2;
}




/* ==============================
movie
*/
#movie .movie {
    width: 84.3rem;
    height: 47.1rem;
    position: relative;
    margin: 6.5rem auto 0;
}
#movie .movie:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../images/movie/frame.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    position: relative;
    z-index: 2;
}
#movie .movie .movie-wrap {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0.6rem;
    border-radius: 2rem;
    background-color: #000;
    box-shadow: 0rem 0rem 2rem 0.5rem rgba(0, 0, 0, 0.6);

}
#movie .movie-wrap iframe {
    width: 100%;
    height: 100%;
    position: relative;
}



/* ==============================
presskit
*/
#presskit{
    margin-top: 12rem;
    padding-bottom: 5rem;
}
.dowonload_all{
    width: 30.1rem;
    margin: auto;
}
.dowonload_all.--top{
    margin-top: 2.5rem;
}
.dowonload_all.--bot{
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
#presskit .ttl{
    width: 100%;
}
.table{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.presskit__content01 .table > div{
    width: 42.666%;
    max-width: 57.6rem;
}
.press-logo{
    margin-right: 4%;
}
.press-key{
    margin-left: 4%;
}
.presskit__content01 .thumb{
    width: 62.847%;
    margin: 1.5rem auto 0;
}
.dl{
    width: 32.812%;
    margin: 1rem auto 0;
}
.presskit__content01 .table{
    margin-top: 5rem;
}

.presskit__content02 .ttl{
    width: 42.666%;
    max-width: 57.6rem;
    margin: 13rem auto 0;
}
.press-chara{
    width: 15.555%;
    max-width: 21rem;
    margin: 0 0.5% 0;
}
.presskit__content02 .thumb{
    margin: 0 0% 0;
}
.presskit__content02 .table{
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.presskit__content02 .dl {
    width: 71.590%;
    margin: 1rem auto 0;
}
.col--01{
    order: 3;
}
.col--02{
    order: 4;
}
.col--03{
    order: 5;
}
.col--04{
    order: 1;
}
.col--05{
    order: 2;
}
.col--06{
    order: 6;
}

.presskit__content03 .ttl{
    width: 42.666%;
    max-width: 57.6rem;
    margin: 13rem auto 0;
}
.preskit__ss{
    width: 98.296%;
    margin: auto;
    position: relative;
}
.preskit__ss .bg{
    pointer-events: none;
}
.ss__list__row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 5%;
}
.ss__list__row > div {
    width: 15.900%;
    padding-bottom: 10.926%;
    margin: 0 1%;
    background-color: #fffacc;
    position: relative;
    border-radius: 0.5rem;
    box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.6);
}
.ss__in {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0.4rem 0.4rem;
}
.ss__in img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s;
}
.ss__in a, .ss__in span {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* padding: 0.4rem 0.3rem; */
}
.ss__list__row .dl{
    width: 90%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto -27%;
}
.ss__list__row:first-child{
    margin-top: 7%;
    margin-bottom: 6.4%;
}

.gd__download{
    margin-top: 10rem;
    text-align: center;
}
.gd__download a{
    font-size: 2.2rem;
    text-decoration: underline;
    font-family: LINESeedJP_Bd;
    line-height: 1.5;
}


/* ==============================
footer
*/
footer{
    background-image: url("../images/footer/bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #2e2214;
    border-top: solid 0.2rem #daae59;
}
.information{
    /* width: 83.259%;
    padding-bottom: 34.444%; */
    width: 112.4rem;
    padding-bottom: 46.5rem;
    margin: auto;
    background-image: url("../images/footer/frame.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    font-weight: bold;
}
.ft__content{
    width: 87.8%;
    max-width: 167rem;
    padding: 3% 0 1.5%;
    margin: auto;
}
.info__game_title{
    width: 47.7rem;
    margin: 4.2% auto 0;
}
.info__game_spec{
    display: flex;
    justify-content: center;
    margin-top: 2.6rem;
}
.spec__row dl{
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    align-items: center;
    font-size: 2.2rem;
    margin: 0 1rem 1rem;
}
.spec__row dt{
    background-color: #526783;
    width: 16rem;
    padding: 0.6rem 0 0.4rem;
    text-align: center;
    line-height: 1.5;
}
.spec__row dd{
    margin-left: 2rem;
}

.info__platform{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2rem;
}
.pl__link{
    margin-left: 6.6rem;
    display: flex;
}
.pl__link .switch{
    width: 20.7rem;
}
.pl__link .steam{
    width: 20.5rem;
    margin-left: 1.2rem;
}
.pf__place{
    font-size: 1.8rem;
    color: #fff;
    padding: 1.5rem 3rem;
    background-color: #9c4c46;
    border-radius: 10rem;
    margin-left: 2.6rem;
}
.ft__site_nav{
    margin-top: 2rem;
}
.ft__site_nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ft__site_nav li{
    width: 16.518%;
    margin: 0 0.25%;
}
.ft__site_nav li.--guideline{
    width: 27.333%;
}
footer .store_atn{
    color: #fff;
    text-align: center;
    margin-top: 2rem;
}
.ft__sns{
    width: 13.925%;
    margin: 2rem auto 0;
}
.copyright{
    margin: 3rem auto 0;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    font-weight: normal;
}
.copyright a{
    display: inline;
    text-decoration: underline;
}


/* ==============================
modal
*/
.snlib-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    display: none;
    opacity: 0;
    z-index: 99999;
  }
  .snlib-modal .modal-out-wrap{
    display: table;
    width: 100%;
    height: 100%;
  }
  .snlib-modal .modal-in-wrap{
    display: table-cell;
    width: 100%;
    height: 100%;
    margin: 0 auto 0;    
    padding: 5rem 0 5rem;
    text-align: center;
    vertical-align: middle;
  }
  .snlib-modal .modal-content{
      width: 93.333%;
    max-width: 700px;
    background-color: rgba(179, 165, 133, 1);
    box-sizing: border-box;
    text-align: initial;
    margin: auto;
    position: relative;
    padding: 2rem;
  }



/* ==============================
sp menu
*/
.menu{
    margin: 10rem 0;
}
.menu__title{
    width: 34.8rem;
    margin: auto;
}
.menu__lang{
    margin-top: 5.5rem;
}
.menu__lang ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.menu__lang li{
    width: 12.7rem;
    margin: 0 1.4rem;
}
.menu__list{
    margin-top: 4.5rem;
}
.menu__list li{
    width: 68.8rem;
    margin: 0 auto 2rem;
}
.menu__sns{
    width: 34.8rem;
    margin: 6.5rem auto 0;
}
.menu__chara{
    width: 15.6rem;
    margin: 20rem auto 0;
}
.btn--close{
    width: 4.5rem;
    position: absolute !important;
    top: 5rem;
    right: 5rem;
    z-index: 3;
}
.btn--close .modal-close img{
    transform: rotate(0);
}

#modal-menu .modal-in-wrap{
    padding: 0;
}
#modal-menu.snlib-modal .modal-content{
    width: 100%;
    max-width: 100%;
}
#modal-menu .btn--close{
    width: 5.4rem;
    margin: 0 -2rem -2.5rem auto;
}


/* ==============================
1350～1000
*/
@media screen and (max-width: 1350px) {
    html {
        font-size: calc(10 / 1350 * 100vw);
    }
}




/* ==============================
1000～750 スマホデザインに変更
*/
@media screen and (max-width:1000px){
    html{
        font-size: 62.5%; /* 1rem = 10px */
    }

    #contents{
        border: none;
    }

    .spbr{
        display: block;
    }
    .dn--pc{
        display: block;
    }
    .dn--sp{
        display: none;
    }

    .gd__download a{
        font-size: 2.8rem;
    }

    /* ==============================
    header
    */
    header{
        height: 9.4rem;
    }
    header .__inner{
        background-position: 50%;
    }
    .header__logo{
        width: 17.6rem;
    }
    .header__link{
        display: none;
    }

    .__content{
        max-width: 75rem;
        margin: auto;
        padding: 0;
    }

    .menu_sp{
        width: 8.5rem;
        position: absolute;
        right: 2.4rem;
    }



    /* ==============================
    top
    */
    #top{
        padding-bottom: 34rem;
    }
    #top .__inner {
        background-image: url("../images/top/bg_sp.png");
        background-size: 100% auto;
        background-position: center bottom;
    }
    .top__tl{
        padding: 6.2rem 0 0 2rem;
    }
    h1{
        width: 32.5rem;
    }
    .top__chara{
        width: 38.2rem;
        right: 1rem;
    }
    .sub_ttl{
        width: 32.5rem;
        margin-top: 0.5rem;
    }
    .sub_ttl img{
        width: 29.6rem;
    }



    /* ==============================
    about
    */
    #about{
        padding-bottom: 219.9rem;
    }
    #about > .__inner{
        background-image: url("../images/about/bg_sp.jpg");
        background-size: 100% 100%;
        background-position: center top;
    }
    #about .__content{
        padding: 6.5rem 0 0;
    }
    .press {
        width: 70.7rem;
        height: 160.5rem;
        background-image: url("../images/about/frame_l_sp.png");
    }
    .data {
        width: 69.4rem;
        height: 38.9rem;
        background-image: url("../images/about/frame_s_sp.png");
        margin-top: 3rem !important;
    }
    .press .__inner {
        padding: 7.5rem 4rem;
    }
    .press dt {
        font-size: 3.4rem;
    }
    .press dt:before {
        width: 63rem;
        height: 1.5rem;
        background-image: url("../images/about/deco_sp.png");
        bottom: -3rem;
    }
    .press dd {
        font-size: 2.8rem;
        padding-top: 3.8rem;
        margin-bottom: 5.5rem;
    }

    .data .__inner{
        display: flex;
        flex-wrap: wrap;
        padding: 6.5rem 0 0 8rem;
    }
    .data .__inner > div{
        width: 29.7rem;
    }
    .data dt, .data dd{
        font-size: 2.8rem;
    }
    .data dd{
        line-height: 1.5;
    }
    .data .__inner > div:nth-child(1){
        order: 1;
    }
    .data .__inner > div:nth-child(2){
        order: 3;
    }
    .data .__inner > div:nth-child(3){
        order: 2;
    }
    .data .__inner > div:nth-child(4){
        order: 4;
    }



    /* ==============================
    movie
    */
    #movie h2 img {
        display: none;
    }
    #movie h2:before {
        content: "";
        display: block;
        width: 63.1rem;
        height: 13.6rem;
        background-image: url("../images/movie/tl_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }

    #movie .movie {
        width: 53.3rem;
        height: 29.7rem;
        margin: 5rem auto 0;
    }


    /* ==============================
    presskit
    */
    #presskit{
        margin-top: 10rem;
        padding-bottom: 8rem;
    }
    #presskit h2 img {
        display: none;
    }
    #presskit h2:before {
        content: "";
        display: block;
        width: 63.1rem;
        height: 13.6rem;
        background-image: url("../images/presskit/tl_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }

    .dowonload_all {
        width: 40rem;
        margin: auto;
    }
    .dowonload_all.--top{
        margin-top: 4rem;
    }

    .presskit__content01 .table > div,
    .presskit__content02 .ttl {
        width: 100%;
        max-width: 61.6rem;
        margin: auto;
    }
    .press-logo{
        margin: 0;
    }
    .table{
        display: block;
    }
    .presskit__content01 .table{
        margin-top: 7.5rem;
    }
    .ttl img{
        display: none;
    }
    .ttl:before {
        content: "";
        display: block;
        width: 61.6rem;
        height: 9rem;
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }
    .press-logo .ttl:before { background-image: url("../images/presskit/tl_logo_sp.png"); }
    .press-key .ttl:before { background-image: url("../images/presskit/tl_key_sp.png"); }
    .presskit__content02 .ttl:before { background-image: url("../images/presskit/tl_chara_sp.png"); }
    .presskit__content03 .ttl:before { background-image: url("../images/screenshot/tl_ss_sp.png"); }

    .presskit__content01 .thumb{
        width: 51.8rem;
    }
    .dl{
        width: 18.9rem;
        margin: 2rem auto 0;
    }
    .presskit__content01 .thumb{
        margin: 2.5rem auto 0;
    }

    .press-key, .presskit__content02{
        margin-top: 8rem !important;
    }

    .press-chara{
        width: 26.4rem;
        max-width: 26.4rem;
        margin: 0 1% 3rem;
        order: initial;
    }
    .presskit__content02 .dl{
        margin-top: 0.5rem;
    }
    
    .preskit__ss{
        width: 58.5rem;
    }


    /* ==============================
    screemhshot
    */
    .presskit__content03 .ttl{
        margin-top: 10rem;
    }
    .preskit__ss{
        width: 258.;
    }
    #presskit .ttl{
        max-width: initial;
    }
    .ss__list__row > div{
        width: 21rem;
        padding-bottom: 15rem;
        margin: 0 1.5rem 11rem;
    }
    .ss__list__row{
        margin-top: 11.5rem !important;
    }
    .ss__list__row .dl{
        width: 90%;
        margin: 0 auto -6rem;
    }



    /* ==============================
    footer
    */
    .ft__content{
        width: 100%;
        max-width: 75rem;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }
    .information{
        background-image: url("../images/footer/frame_sp.png");
        width: 69.6rem;
        padding-bottom: 78.5rem;
    }
    .info__game_title{
        margin-top: 7rem;
    }
    .info__game_title img{
        display: none;
    }
    .info__game_title:before{
        content: "";
        display: block;
        width: 49.6rem;
        height: 6rem;
        background-image: url(../images/footer/spec_tl_sp.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }
    .info__game_spec{
        display: block;
        margin-top: 3rem;
    }
    .spec__row{
        width: 100%;
    }
    .spec__row dl{
        font-size: 2.6rem;
        margin: 0 1rem 1rem 4.2rem;
    }
    .spec__row dt{
        padding: 0.4rem 0 0.4rem;
        line-height: 1.25;
    }
    .info__platform{
        flex-direction: column-reverse;
        margin-top: 5.4rem;
    }
    .pf__place{
        font-size: 2.2rem;
        margin: 0 0 0 0;
    }
    .pl__link{
        margin: 4rem 0 0 0;
    }
    .pl__link > div{
        margin: 0 1.25rem !important;
    }
    .pl__link .switch{
        width: 27.8rem;
    }
    .pl__link .steam{
        width: 27.5rem;
        margin-left: 0;
    }
    footer .store_atn{
        line-height: 1.75;
        font-size: 2.6rem;
        margin-top: 3.2rem;
    }
    .ft__site_nav ul{
        display: block;
        text-align: center;
    }
    .ft__site_nav li{
        width: 32.6rem;
        margin: 0 auto 3rem;
    }
    .ft__site_nav li.--presskit,
    .ft__site_nav li.--contact{
        display: inline-block;
    }
    .ft__site_nav li.--guideline{
        width: 54.1rem;
    }
    .ft__sns{
        width: 28.1rem;
        margin: 5rem auto;
    }
    .copyright{
        margin: 3rem auto 0;
        font-size: 2.2rem;
    }
    .spec__lang{
        font-size: 2.2rem;
    }
}





/*******************************************

750以下

********************************************/
@media screen and (max-width:750px){
    html{
        font-size: 1.333vw; /* 10px / 750 * 100 */
    }

    /* ==============================
    movie
    */
    /* #movie {
        padding-bottom: 127.6rem;
    }
    #movie .__inner {
        background-image: url("../images/movie/bg_sp.png");
        background-size: auto 100%;
        background-position: center top;
        background-repeat: no-repeat;
    } */
}