/** 新カードデザイン2025～ **/
#digital-thanks .card_design.card_type01,
#digital-thanks .card_design.card_type02 {
    max-width: 800px;
    width: calc(1250 / 1440* 100vw);
    margin: auto;
    height: calc(1250 / 1440* 100vw);
    max-height: 800px;
    background-size: 100%;
    position: relative;
}

#digital-thanks .card_design.card_type01 .card_bg_top,
#digital-thanks .card_design.card_type02 .card_bg_top {
    display: block;
    width: 800px;
    height: 200px;
    margin: 0;
    padding: 0;
}

#digital-thanks .card_design.card_type01 .card_bg_bottom,
#digital-thanks .card_design.card_type02 .card_bg_bottom {
    display: block;
    width: 800px;
    height: 100px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#digital-thanks .card_design.card_type01 h2,
#digital-thanks .card_design.card_type02 h2 {
    display: none;
}

#digital-thanks .card_design.card_type01 .row {
    margin-left: min(90px, (100vw / 1080) * 100);
    margin-right: min(90px, (100vw / 1080) * 100);
}

#digital-thanks .card_design.card_type02 .row {
    margin-left: 10px;
    margin-right: 10px;
}

#digital-thanks .card_design.card_type01 .row.my_name,
#digital-thanks .card_design.card_type02 .row.my_name {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    margin: 0;
}

#digital-thanks .card_design.card_type02 .row.my_name {
    bottom: 200px;
}

#receive_card_body #digital-thanks .card_design.card_type01 .row.my_name,
#sending_card_body #digital-thanks .card_design.card_type01 .row.my_name {
    bottom: 100px;
}

#receive_card_body #digital-thanks .card_design.card_type02 .row.my_name,
#sending_card_body #digital-thanks .card_design.card_type02 .row.my_name {
    bottom: 200px;
}

#digital-thanks .card_design.card_type01 .row.card_message,
#digital-thanks .card_design.card_type02 .row.card_message {
    margin-top: 0;
}


@media screen and (max-width: 1080px) {

    #digital-thanks .card_design.card_type01,
    #digital-thanks .card_design.card_type02 {
        max-width: 790px;
        width: calc((100vw / 1080) * 790);
        margin: auto;
        height: calc((100vw / 1080) * 790);
        position: relative;
        max-height: 790px;
        background-size: 100%;
    }

    #digital-thanks .card_design.card_type01 .card_bg_top,
    #digital-thanks .card_design.card_type02 .card_bg_top {
        display: block;
        max-width: 800px;
        width: 100%;
        max-height: 200px;
        height: calc((100vw / 1080) * 200);
        margin: 0;
        padding: 0;
    }

    #digital-thanks .card_design.card_type01 .card_bg_bottom,
    #digital-thanks .card_design.card_type02 .card_bg_bottom {
        display: block;
        max-width: 800px;
        width: 100%;
        max-height: 100px;
        height: calc((100vw / 1080) * 100);
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
/*
    #digital-thanks .card_design.card_type01 .row {
        margin-left: min(90px, (100vw / 1080) * 100);
        margin-right: min(90px, (100vw / 1080) * 100);
    }
*/
    #digital-thanks .card_design.card_type02 .row {
        margin-left: min(10px, (100vw / 1080) * 10);
        margin-right: min(10px, (100vw / 1080) * 10);
    }

    #digital-thanks .card_design.card_type01 .row.my_name,
    #digital-thanks .card_design.card_type02 .row.my_name {
        position: absolute;
        bottom: min(100px, (100vw / 1080) * 100);
        padding-left: min(100px, (100vw / 1080) * 100);
        padding-right: min(100px, (100vw / 1080) * 100);
        width: 100%;
        margin: 0;
    }

    #digital-thanks .card_design.card_type02 .row.my_name,
        #receive_card_body #digital-thanks .card_design.card_type02 .row.my_name,
        #sending_card_body #digital-thanks .card_design.card_type02 .row.my_name {
        bottom: min(200px, (100vw / 1080) * 200);
    }
}

/* 1080 */

@media screen and (max-width: 800px) {

    #digital-thanks .card_design.card_type01,
    #digital-thanks .card_design.card_type02 {
        max-width: 690px;
        width: calc((100vw / 800) * ((690 / 800) * 800));
        margin: auto;
        height: calc((100vw / 800) * ((690 / 800) * 800));
        position: relative;
        max-height: 690px;
        background-size: 100%;
        position: relative;
    }

    #digital-thanks .card_design.card_type01 .card_bg_top,
    #digital-thanks .card_design.card_type02 .card_bg_top {
        display: block;
        max-width: 690px;
        width: 100%;
        max-height: 200px;
        height: calc((100vw / 800) * ((690 / 800) * 200));
        margin: 0;
        padding: 0;
    }

    #digital-thanks .card_design.card_type01 .card_bg_bottom,
    #digital-thanks .card_design.card_type02 .card_bg_bottom {
        display: block;
        max-width: 690px;
        width: 100%;
        max-height: 100px;
        height: calc((100vw / 800) * ((690 / 800) * 100));
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #digital-thanks .card_design.card_type01 .row {
        margin-left: min(100px, (100vw / 800) * ((690 / 800) * 100));
        margin-right: min(100px, (100vw / 800) * ((690 / 800) * 100));
    }

    #digital-thanks .card_design.card_type02 .row {
        margin-left: min(10px, (100vw / 800) * ((690 / 800) * 10));
        margin-right: min(10px, (100vw / 800) * ((690 / 800) * 10));
    }

    #digital-thanks .card_design.card_type01 .row.my_name,
    #digital-thanks .card_design.card_type02 .row.my_name {
        position: absolute;
        bottom: min(100px, (100vw / 800) * 100);
        padding-left: min(100px, (100vw / 800) * ((690 / 800) * 100));
        padding-right: min(100px, (100vw / 800) * ((690 / 800) * 100));
        width: 100%;
        margin: 0;
    }

    #digital-thanks .card_design.card_type02 .row.my_name {
        bottom: min(200px, (100vw / 800) * ((690 / 800) * 200));
    }

    #receive_card_body #digital-thanks .card_design.card_type01,
    #receive_card_body #digital-thanks .card_design.card_type02 {
        max-width: 660px;
        width: calc((100vw / 800) * ((660 / 800) * 800));
        margin: auto;
        height: calc((100vw / 800) * ((660 / 800) * 800));
        position: relative;
        max-height: 660px;
        background-size: 100%;
        position: relative;
    }

    #sending_card_body #digital-thanks .card_design.card_type01,
    #sending_card_body #digital-thanks .card_design.card_type02 {
        max-width: 660px;
        width: calc((100vw / 800) * ((660 / 800) * 800));
        margin: auto;
        height: calc((100vw / 800) * ((660 / 800) * 800));
        position: relative;
        max-height: 660px;
        background-size: 100%;
        position: relative;
    }

    #receive_card_body #digital-thanks .card_design.card_type01 .row.my_name,
    #sending_card_body #digital-thanks .card_design.card_type01 .row.my_name {
        bottom: min(100px, (100vw / 800) * ((690 / 800) * 200));
    }

        #receive_card_body #digital-thanks .card_design.card_type02 .row.my_name,
        #sending_card_body #digital-thanks .card_design.card_type02 .row.my_name {
            bottom: min(200px, (100vw / 800) * ((690 / 800) * 200));
        }
}