@charset "utf-8";

/*--------------------------------------
           追想アイコン対応
--------------------------------------*/

img.rarity-icon {
    position: absolute;
    bottom: -4px;
    right: -9px;
    z-index: 1;
    width: 1px;
    min-width: 15px;
}

.frame-wrapper {
    position: relative;
    margin-bottom: 2px;
}

.frame-wrapper::after {
    content: "";
    position: absolute;
    inset: -4px;
    /* 上下左右にぴったり被せる */
    border: 22px solid transparent;
    /* フレーム幅に応じて設定 */
    border-image-slice: 40 fill;
    /* 40pxで四隅を固定、中央を引き延ばし */
    border-image-repeat: stretch;
    /* 伸ばす */
    pointer-events: none;
}

.frame-wrapper.lg::after {
    border-image-source: url("../img/character/frame_character_lg.png");
}

.frame-wrapper.ur2::after {
    border-image-source: url("../img/character/frame_character_ur.png");
}

.frame-wrapper.ur::after {
    border-image-source: url("../img/character/frame_character_ur.png");
}

.frame-wrapper.sr::after {
    border-image-source: url("../img/character/frame_character_sr.png");
}

.frame-wrapper.r::after {
    border-image-source: url("../img/character/frame_character_r.png");
}

.frame-wrapper.n::after {
    border-image-source: url("../img/character/frame_character_n.png");
}

.item-toggle-area .order-info .frame-wrapper {
    width: 63px;
}

.item-toggle-area .order-info img.scene-icon {
    width: 100%;
}

.item-toggle-area .order-info img.rarity-icon {
    width: 15px;
    right: -10px;
}

.frame-wrapper+.chara-rank {
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    .btn-pack-container .item-pic img.rarity-icon {
        max-width: 25px;
        min-width: 11px;
        right: -2px;
    }

    .item-toggle-area .order-info img.rarity-icon {
        width: 10px;
    }

    .item-toggle-area .order-info .frame-wrapper {
        width: 47px;
    }

    .btn-pack-container .item-pic img.scene-icon {
        min-width: 48px;
    }

    .frame-wrapper::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 12px solid transparent;
        border-image-slice: 40 fill;
        border-image-repeat: stretch;
        pointer-events: none;
    }
}