@charset "UTF-8";
/* ==================================================================
特別映像ページ用CSS
================================================================== */

.wrap {
    background: url('../img/world_bg_pc.jpg') no-repeat center bottom/19.80rem auto #000;
}

/* ==================================================================
ヒーローエリア
================================================================== */
.hero-area {
    position: relative;
    background: url('../img/weapon_bg_hero_pc.png') no-repeat center top/cover;
    height: 4.39rem;
    padding-top: 2.30rem;
}

.page_ttl {
    width: 2.59rem;
    margin: 0 auto;
}

@media screen and (min-width: 769px) and (max-width: 1980px) {
    .hero-area {
        background-size: 19.80rem auto;
    }
}

/* ==================================================================
ストーリーエリア
================================================================== */
.story-discription {
    position: relative;
    left: 1.4rem;
    margin: 0 auto 1rem auto;
    background: url(../img/textbase01.png) no-repeat center top/contain;
    max-width: 7.52rem;
    max-height:4.48rem;
    width: 6.58rem;
    height:3.92rem;
    padding: 0.3rem;
}

.story-discription .story-discription_txt_wrap {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    width:100%;
}

.story-discription .story-discription_txt {
    font-size: .14rem;
    font-family: "FOT-ロダン Pro B", sans-serif;
    margin-bottom: .5rem;
}

.story-discription .story-discription_logo {
    position:absolute;
    bottom:0.3rem;
    right:0.3rem;
    max-width: 1.76rem;
}




/* ==================================================================
ボックス
================================================================== */
.world-detail,
.chara-detail,
.weapon-detail {
    max-width: 12.52rem;
    margin: 0 auto;
}

.box-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.box-column {
    display: flex;
    flex-direction: column;
}

.box-row-wrap {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ==================================================================
ストーリーエリア
================================================================== */
.world-detail .box-column .box-row {
    max-width: 6.8rem;
    justify-content: space-between;
}

.world-detail .box-column:first-child {
    max-width: 6.8rem;
}

.world-detail .box-column:last-child {
    max-width: 6.00rem;
}

.world-detail_box {
    margin: 0.12rem
}

/* ==================================================================
キャラクターエリア
================================================================== */
.chara-detail .box-column:first-child {
    max-width: 4.8rem
}

.chara-detail .box-column:last-child {
    max-width: 7.98rem;
    justify-content: space-between;
    align-content: space-between
}

.chara-detail_box {
    margin: 0.10rem
}

/* ==================================================================
魔剣エリア
================================================================== */
.weapon-detail .box-row:first-child {
    justify-content: flex-start;
    align-content: flex-end;
}

.weapon-detail .box-row:last-child {
    justify-content: flex-end;
}

.weapon-detail .weapon-detail_box {
    margin: 0.34rem;
    align-self: flex-end;
}


/* ==================================================================
modalエリア(world)
================================================================== */
.modaal-container {
    background: none;
}

.modal-world {
    background: url(../img/textbase02.png) no-repeat center top/cover;
    width: 8.2rem;
    height: 5.25rem;
    margin: 0 auto;
}

.modal-world .modal_content {
    padding: .3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal_title_wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: .3rem;
}

.modal-world .modal_title_wrap {
    border-bottom: .02rem solid #ffffff;
}

.modal_title {
    font-size: .9rem;
    color: #ffffff;
    font-family: "FOT-マティス Pro EB", serif;
    line-height: .9rem;
    font-weight: 800;
}

.modal_txt_wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal_txt {
    max-width: 3.8rem;
    color: #ffffff;
    font-size: .16rem;
    font-weight: 800;
    align-self: flex-end;
    font-family: "FOT-筑紫ゴシック Pro B", sans-serif;
}

.modal-world .modal_txt p{
    margin-bottom: .12rem;
    font-size: .12rem;
}

.modal_stamp {
    align-self: flex-end;
    object-fit: none;
    max-width: 1.76rem;
}



.world-01 .modal_content {
    background: url(../img/w_bg_ihen.png) no-repeat center top/cover;
}

.world-02 .modal_content {
    background: url(../img/w_bg_question.png) no-repeat center top/cover;
}
.world-03 .modal_content {
    background: url(../img/w_bg_weapons.png) no-repeat center top/cover;
}
.world-04 .modal_content {
    background: url(../img/w_bg_soshiki.png) no-repeat center top/cover;
}
.world-05 .modal_content {
    background: url(../img/w_bg_master.png) no-repeat center top/cover;
}

/* ==================================================================
modalエリア(chara)
================================================================== */
.modal-chara,.modal-weapon {
    background: url(../img/textbase03.png) no-repeat center top/cover;
    width: 6.53rem;
    height: 8.85rem;
    margin: 0 auto;
}

.modal-chara .modal_content,.modal-weapon .modal_content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal-chara .modal_title_wrap,.modal-weapon .modal_title_wrap {
    margin: .2rem;
}

.modal-chara .modal_title {
    width: 100%;
    font-size: .5rem;
    line-height: .56rem;
    border-bottom: .02rem solid #ffffff;
    padding-bottom: .1rem;
    height:1.4rem;
    position:relative;
}

/*
.modal-weapon .modal_cv {
    font-size: .24rem;
    margin-bottom:.2rem;
    position:absolute;
    bottom: 0;
    right: 0;
}
*/

.modal-chara-contents {
    display: flex;
    align-content: flex-end;
    align-self: flex-end;
    position: absolute;
    max-width: 6.53rem;
    bottom:.32rem;
}

.modal-chara .modal_txt {
    margin-bottom: .16rem;
}

.modal-chara-img {
    align-self: flex-end;
    flex-basis:100%;
}


.modal-chara .modal_txt_wrap {
    justify-content: flex-end;
    padding: .3rem;
}

.chara-01 .modal_title_wrap {
    background: url(../img/c_code_master.png) no-repeat right top;
}


.chara-01 .modal-chara-contents {
    background: url(../img/c_bg_master.png) no-repeat left top/contain;
}


.chara-02 .modal_title_wrap {
    background: url(../img/c_code_lidy.png) no-repeat right top;
}


.chara-02 .modal-chara-contents {
    background: url(../img/c_bg_lidy.png) no-repeat left top/contain;
}

.chara-03 .modal_title_wrap {
    background: url(../img/c_code_kuran.png) no-repeat right top;
}


.chara-03 .modal-chara-contents {
    background: url(../img/c_bg_kuran.png) no-repeat left top/contain;
}

.chara-04 .modal_title_wrap {
    background: url(../img/c_code_noise.png) no-repeat right top;
}


.chara-04 .modal-chara-contents {
    background: url(../img/c_bg_noise.png) no-repeat left top/contain;
}

.chara-05 .modal_title_wrap {
    background: url(../img/c_code_ruru.png) no-repeat right top;
}


.chara-05 .modal-chara-contents {
    background: url(../img/c_bg_ruru.png) no-repeat left top/contain;
}

.chara-06 .modal_title_wrap {
    background: url(../img/c_code_role.png) no-repeat right top;
}


.chara-06 .modal-chara-contents {
    background: url(../img/c_bg_role.png) no-repeat left top/contain;
}

.chara-07 .modal_title_wrap {
    background: url(../img/c_code_alice.png) no-repeat right top;
}


.chara-07 .modal-chara-contents {
    background: url(../img/c_bg_alice.png) no-repeat left top/contain;
}

/* ==================================================================
modalエリア(weapon)
================================================================== */
.modal_cv {
    font-size: .24rem;
    position:absolute;
    bottom: 0;
    right: 0;
}

.modal-weapon .modal_title {
    width: 100%;
    font-size: .56rem;
    line-height: .56rem;
    border-bottom: .02rem solid #ffffff;
/*    padding-bottom: .05rem;*/
    height:1.2rem;
    position:relative;
    margin-top:.6rem;
}

.modal-weapon .modal_txt {
    margin-bottom: .16rem;
}

.modal-weapon .modal_txt_wrap {
    justify-content: flex-end;
    padding: .3rem;
}

.weapon-01 .modal_title_wrap {
    background: url(../img/we_code_laeva.png) no-repeat right top;
}

.weapon-01 .modal-chara-contents {
    background: url(../img/we_weapons_laeva.png) no-repeat right top/contain;
}



.weapon-02 .modal_title_wrap {
    background: url(../img/we_code_alter.png) no-repeat right top;
}

.weapon-02 .modal-chara-contents {
    background: url(../img/we_weapons_alter.png) no-repeat right top/contain;
}

.weapon-03 .modal_title_wrap {
    background: url(../img/we_code_gokutou.png) no-repeat right top;
}

.weapon-03 .modal-chara-contents {
    background: url(../img/we_weapons_gokutou.png) no-repeat right top/contain;
}

.weapon-04 .modal_title_wrap {
    background: url(../img/we_code_mira.png) no-repeat right top;
}

.weapon-04 .modal-chara-contents {
    background: url(../img/we_weapons_mira.png) no-repeat right top/contain;
}

.weapon-05 .modal_title_wrap {
    background: url(../img/we_code_gure.png) no-repeat right top;
}

.weapon-05 .modal-chara-contents {
    background: url(../img/we_weapons_gure.png) no-repeat right top/contain;
}

.weapon-06 .modal_title_wrap {
    background: url(../img/we_code_hades.png) no-repeat right top;
}

.weapon-06 .modal-chara-contents {
    background: url(../img/we_weapons_hades.png) no-repeat right top/contain;
}

.weapon-07 .modal_title_wrap {
    background: url(../img/we_code_luna.png) no-repeat right top;
}

.weapon-07 .modal-chara-contents {
    background: url(../img/we_weapons_luna.png) no-repeat right top/contain;
}

.weapon-08 .modal_title_wrap {
    background: url(../img/we_code_selene.png) no-repeat right top;
}

.weapon-08 .modal-chara-contents {
    background: url(../img/we_weapons_selene.png) no-repeat right top/contain;
}

.weapon-09 .modal_title_wrap {
    background: url(../img/we_code_kusanagi.png) no-repeat right top;
}

.weapon-09 .modal-chara-contents {
    background: url(../img/we_weapons_kusanagi.png) no-repeat right top/contain;
}

.weapon-10 .modal_title_wrap {
    background: url(../img/we_code_muramasa.png) no-repeat right top;
}

.weapon-10 .modal-chara-contents {
    background: url(../img/we_weapons_muramasa.png) no-repeat right top/contain;
}

.weapon-11 .modal_title_wrap {
    background: url(../img/we_code_necronomicon.png) no-repeat right top;
}

.weapon-11 .modal-chara-contents {
    background: url(../img/we_weapons_necronomicon.png) no-repeat right top/contain;
}


.weapon-12 .modal_title_wrap {
    background: url(../img/we_code_giniro.png) no-repeat right top;
}

.weapon-12 .modal-chara-contents {
    background: url(../img/we_weapons_giniro.png) no-repeat right top/contain;
}





/* ==========================================================================================
____  ____   ===============================================================================
/ ___||  _ \  ===============================================================================
\___ \| |_) | ===============================================================================
___) |  __/  ===============================================================================
|____/|_|     ===============================================================================
========================================================================================== */
@media screen and (max-width: 768px) {
    .wrap {
        background: url('../img/world_bg_sp.jpg') no-repeat center top/7.68rem auto #000;
    }

    .content-wrap {
        padding: 1rem 0 1.60rem;
    }

    /* ==================================================================
    ヒーローエリア
    ================================================================== */
    .hero-area {
        background: url('../img/weapon_bg_hero_sp.png') no-repeat center top/contain;
    }

    /* ==================================================================
    ムービーエリア
    ================================================================== */
    .movie_list_item {
        width: 100%;
    }

    .movie_tmb .modaalink::after {
        width: 1.00rem;
        height: .71rem;
    }

    .weapon-area_txt-serif {
        display: box;
        font-style: italic;
        font-family: "FOT-マティス Pro M";
        background-image: -webkit-linear-gradient(30deg, rgba(255, 0, 0, 0.85) 0%, rgba(255, 0, 0, 0) 100%);
        padding: .04rem .48rem .04rem .16rem;
        margin: 8px;
        position: absolute;
        bottom: 1.1rem;
        left: .02rem;
        transform: rotate(-5deg);
        z-index: 1;
        font-size: .18rem;
    }

    /* ==================================================================
    ボックス
    ================================================================== */
    .world-detail,
    .chara-detail,
    .weapon-detail {
        max-width: 6.4rem;
        margin: 0 auto;
    }

    /* ==================================================================
    ストーリーエリア
    ================================================================== */
    .story-discription {
        left: 0rem;
        margin: 0 auto 1rem auto;
        background: url(../img/textbase01.png) no-repeat center top/contain;
        max-width: 6.4rem;
        padding: .3rem;
    }

    .story-discription .story-discription_txt {
        font-size: .16rem;
        margin-bottom: .3rem;
    }

    .story-discription .story-discription_logo {
        flex-basis: 1.2rem;
        flex-shrink: 1;
        max-width: 1.2rem;
    }

    /* ==================================================================
    ストーリーエリア
    ================================================================== */
    .world-detail.box-row {
        flex-wrap: wrap;
    }

    /* ==================================================================
    キャラクターエリア
    ================================================================== */
    .chara-detail.box-row {
        flex-wrap: wrap;
    }

    .chara-detail .box-column:first-child,.chara-detail .box-column:last-child {
        max-width: 6.4rem;
    }

    .chara-detail .box-column .box-row {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .chara-detail .box-row:first-child .chara-detail_box{
        width:45%;
    }

    .chara-detail .box-row:first-child .chara-detail_box:last-child{
        width:auto;
    }

    .chara-detail .box-row:last-child .chara-detail_box{
        width:4.5rem;
    }
    /* ==================================================================
    魔剣エリア
    ================================================================== */
    .weapon-detail .box-row{
        flex-wrap: wrap;
        max-width: 6.4rem;
        justify-content: flex-end!important;
        align-content: space-around;
    }

    .weapon-detail .weapon-detail_box {
        margin: 0.14rem;
        max-width:2.6rem;
        height: 9rem;
        align-content: flex-end;
    }
 
    .weapon-detail .weapon-detail_box .weapon-tmb {
    }
    
    
    .weapon-detail .box-row:first-child .weapon-detail_box:first-child {
        margin: 0.14rem;
        max-width:3.1rem;
    }

    .weapon-detail .box-row:last-child .weapon-detail_box:first-child {
        margin: 0.14rem;
        max-width:2.6rem;
    }
    
    /* ==================================================================
    modalエリア(world)
    ================================================================== */
    .modaal-content-container{
        padding: .1rem;
    }

    .modal-world {
        background: url(../img/textbase02.png) no-repeat center top/contain;
        max-width: 6.4rem;
        margin: 0 auto;
    }

    .modal-world .modal_content {
        padding: .14rem;
        max-width: 6.4rem;
        max-height: 4.1rem;
    }

    .modal-world .modal_title_wrap {
        border-bottom: .02rem solid #ffffff;
        padding-bottom:0;
    }

    .modal-world .modal_title {
        font-size: .64rem;
    }
    .modal-world .modal_code{
        width:25%;
    }

    .modal-world .modal_txt {
        max-width: 38%;
        font-size: .16rem;
        font-weight: 400;
        text-shadow:0 0 6px #000;
    }

    .modal-world .modal_txt p{
        margin-bottom: .02rem
    }

    .modal-world .modal_stamp {
        align-self: flex-end;
        max-width: 1.2rem;
    }

    /* ==================================================================
    modalエリア(chara)
    ================================================================== */
    .modal-chara .modal_cv{
        margin-bottom: .2rem;   
    }

    .modal-chara .modal_title_wrap{
        background-size: 40%;
    }

    /* ==================================================================
    modalエリア(weapon)
    ================================================================== */
    .modal-weapon .modal_cv{
        margin-bottom: .1rem;   
    }

    .modal-weapon .modal_title_wrap{
        background-size: 40%;
    }

    .modal-chara-contents{
        bottom:.1rem;
    }

}