@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;
    height: 100%;
}
.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: 80rem;
}
#top .__inner{
    background-image: url("../images/top/bg.png");
    background-size: 190rem auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.top__content{
    width: 69.7rem;
    text-align: center;
    padding-top: 10rem;
}
.catchcopy{
    font-size: 2.8rem;
    line-height: 3.2rem;
    text-shadow: 0px 0px 1rem rgba(255, 255, 255, 1), 0px 0px 1rem rgba(255, 255, 255, 1), 0px 0px 1rem rgba(255, 255, 255, 1);
}
h1{
    margin-top: 2rem;
}
.store_link{
    margin-top: 4rem;    
}
.store_link ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.store_link li{
    width: 22rem;
    margin: 0 1rem;
}
.store_atn{
    font-size: 2.2rem;
    margin-top: 2.5rem;

}
.sns{
    width: 18.8rem;
    margin: 2.5rem auto 0;
}
.top__chara{
    width: 61.8rem;
    position: absolute;
    top: 10rem;
    right: 4rem;
}
.lang{
    width: 12.1rem;
    position: absolute;
    top: 0;
    right: 2rem;
}


/* ==============================
movie
*/
#movie{
    padding-bottom: 127.6rem;
}
#movie .__inner{
    background-image: url("../images/movie/bg.png");
    background-size: 190rem auto;
    background-position: center top;
    background-repeat: no-repeat;
}
#movie p {
    color: #fff9dd;
    font-size: 2.4rem;
    line-height: 2.25;
    text-shadow: 0px 0px 1rem rgba(0, 0, 0, 1), 0px 0px 2.5rem rgba(0, 0, 0, 0.5), 0px 0px 2.5rem rgba(0, 0, 0, 1);
    text-align: center;
    margin-top: 27.5rem;
}
#movie .movie {
    width: 84.3rem;
    height: 47.1rem;
    position: relative;
    margin: 4rem 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;
}




/* ==============================
screenshot
*/
.ss__list{
    width: 98.296%;
    max-width: 132.7rem;
    padding-bottom: 45.629%;
    margin: 3.5rem auto 0;
    background-image: url("../images/screenshot/frame.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
}
.ss__list .__inner{
    padding: 10% 0;
}
.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 a, .ss__in span{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* padding: 0.4rem 0.3rem; */
}
.ss__in span img{
    width: 100%;
    height: auto;
}
.ss__in:not(.no--hover) a img:hover{
    transform: translate(-50%, -50%) scale(1.3, 1.3);
}
.ss__in.no--hover:hover:after{
    opacity: 0.8;
}
.ss__in.no--hover:after{
    content: "";
    display: block;
    width: 4.6rem;
    height: 4.6rem;
    position: absolute;
    bottom: -1.2rem;
    right: -1.2rem;
    background-image: url("../images/common/ic.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
}
.ss__in img{
    width: auto;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s;
}
.ss__list__row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 5%;
}
.ss__in{
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0.4rem 0.4rem;
}



/* ==============================
howto
*/
#howto{
    background-image: url("../images/howto/img.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 16%;
    margin-top: 10%;
    overflow: hidden;
}
#howto h3{
    width: 57.481%;
    margin: 7.5rem auto 0;
}
#howto p{
    font-size: 1.6rem;
    text-align: center;
    line-height: 2.25;
    margin-top: 4rem;
    font-family: LINESeedJP_Bd;
}

.howto01__ss01, .howto02__ss01{
    width: 47.481%;
    padding-bottom: 27.037%;
    margin: 7rem auto 0;
    position: relative;
    background: #fffacc;
    border-radius: 0.5rem;
    box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.6);
}
.howto02__ss01{
    margin-top: 4rem;
}
.howto01__ss__list, .howto02__ss__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.howto01__ss__list > div{
    width: 29.629%;
    padding-bottom: 17.037%;
    position: relative;
    background-color: #fffacc;
    margin: 4rem 1.5rem 0;
    border-radius: 0.5rem;
    box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.6);
}
.howto02__ss__list > div{
    width: 37.037%;
    padding-bottom: 20.888%;
    position: relative;
    background-color: #fffacc;
    margin: 4rem 1.5rem 0;
    border-radius: 0.5rem;
    box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.6);
}

.howto02{
    margin-top: 14%;
    padding-bottom: 23rem;
}

.ft__chara{
    position: absolute;
    bottom: 2.2rem;
    left: 0;
    width: 99%;
    margin: auto;
    right: 0;
}

.ss_open{
    width: 4.6rem;
    height: 4.6rem;
    position: absolute;
    bottom: -1.2rem;
    right: -1.2rem;
    /* transition: 0.5s; */
}
.ss_open:hover{
    opacity: 0.8;
}

.effect > div{
    width: 124.4rem;
    position: absolute;
    bottom: 0;
    pointer-events: none;
}
.circle01{
    right: 82%;
    animation: 120s linear infinite rotation;
}
.circle02{
    left: 82%;
    animation: 120s linear infinite rotation reverse;
}

@keyframes rotation{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}



/* ==============================
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(179, 165, 133, 1);
    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: 1000px;
    background-color: rgba(179, 165, 133, 1);
    box-sizing: border-box;
    text-align: initial;
    margin: auto;
    position: relative;
    padding: 2rem;
  }


#modal-gallery.snlib-modal .modal-content{
    padding: 0;
}
.close-top{
    width: 5.4rem;
    margin: 0 -2rem -2.5rem auto;
    position: relative;
}
.close-top:hover{
    opacity: 0.8;
}
#modal-gallery .close-top{
    transform: rotate(45deg);
}


/* ==============================
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;
    }


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

    .__content{
        padding: 0;
    }

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

    /* ==============================
    top
    */
    #top{
        padding-bottom: 115rem;
    }
    #top .__inner {
        background-image: url("../images/top/bg_sp.png");
        background-size: 100% auto;
        background-position: center bottom;
    }
    .top__content{
        width: 100%;
        padding-top: 5rem;
    }
    h1{
        width: 54.2rem;
        margin: 1rem auto 0;
    }
    .store_link{
        margin-top: 4rem;
    }
    .store_link li{
        width: 29.1rem;
    }
    .store_atn{
        width: 66rem;
        margin: 3rem auto 0;
        position: relative;
        z-index: 2;
    }
    #top .sns{
        display: none;
    }
    .top__chara{
        width: 63.2rem;
        left: 0;
        right: 0;
        margin: auto;
        top: 54rem;
    }


    /* ==============================
    movie
    */
    #movie {
        padding-bottom: 127.6rem;
    }
    #movie p{
        color: #fff9dd;
        font-size: 2.8rem;
        line-height: 2;
        text-shadow: 0px 0px 1rem rgba(0, 0, 0, 1), 0px 0px 2.5rem rgba(0, 0, 0, 0.5), 0px 0px 2.5rem rgba(0, 0, 0, 1);
        text-align: center;
        margin-top: 18rem;
    }
    #movie .__inner {
        /* background-image: url("../images/movie/bg_sp.png");
        background-size: auto 100%;
        background-position: center top;
        background-repeat: no-repeat; */
    }
    
    #movie .movie {
        width: 65.3rem;
        height:36.7rem;
        position: relative;
        margin: 12rem auto 0;
    }

    /* ==============================
    screenshot
    */
    .ss__list{
        width: 58.5rem;
        max-width: 585px;
        padding-bottom: 113.8rem;
        margin: 3.5rem auto 0;
        background-image: url("../images/screenshot/frame_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        position: relative;
    }
    .ss__list .__inner{
        padding: 20% 0;
    }
    .ss__list__row > div{
        width: 21.1rem;
        padding-bottom: 14.5rem;
        margin: 0 1.4rem 4rem;
    }
    #screenshot h2:before{
        content: "";
        display: block;
        width: 63.1rem;
        height: 13.6rem;
        background-image: url("../images/screenshot/tl_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }
    #screenshot h2 img{
        display: none;
    }
    .content__list{
        margin-top: -30rem;
    }


    /* ==============================
    howto
    */
    #howto {
        margin-top: 11.5rem;
        background-image: url("../images/howto/img_sp.png");
        background-position: 0 29%;

    }
    #howto h2:before{
        content: "";
        display: block;
        width: 63.1rem;
        height: 13.6rem;
        background-image: url("../images/howto/tl_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }
    #howto h2 img{
        display: none;
    }
    #howto h3{
        width: 61.6rem;
    }
    .howto01 h3 img, .howto02 h3 img{
        display: none;
    }
    .howto01 h3:before{
        content: "";
        display: block;
        width: 61.6rem;
        height: 12.6rem;
        background-image: url("../images/howto/sub_tl_1_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }
    .howto02 h3:before{
        content: "";
        display: block;
        width: 61.6rem;
        height: 12.6rem;
        background-image: url("../images/howto/sub_tl_2_sp.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: auto;
    }
    #howto p{
        font-size: 2.4rem;
        line-height: 1.75;
    }
    .howto01__ss01, .howto01__ss__list > div,
    .howto02__ss01, .howto02__ss__list > div{
        width: 54.9rem;
        padding-bottom: 31.2rem;
    }
    .howto01__ss__list > div,
    .howto02__ss__list > div{
        margin: 7rem 1.5rem 0;
    }
    .ss_open{
        width: 8.8rem;
        height: 8.8rem;
        bottom: -2.4rem;
        right: -2.4rem;
    }
    .howto02{
        margin-top: 15rem;
        padding-bottom: 21rem;
    }
    .effect{
        display: none;
    }
    .ft__chara.--sp{
        width: 28.5rem;
        margin: auto;
        right: 0;
    }



    /* ==============================
    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;
    }
}