@charset "utf-8";

/*
Version: 1.0.0
*/

.saving_comparison {
    width: 100%;
    aspect-ratio: 1098/480;
    overflow: hidden;
    position: relative;

    img {
        position: absolute;
        max-width: 100%;
        max-height: 100%;
        transition: 1s;

        &.saving_comparison_baloon {
            left: unset;
            right: 0;
            width: calc(230/1098 * 100%);
            height: auto;
            opacity: 0;
            transform: translateY(20px);
            transition-delay: 0.5s;
        }

        &.saving_comparison_arrow {
            height: calc(224/480 * 100%);
            width: auto;
            bottom: calc(var(--allow-offset-bottom)/480 * 100%);
            left: calc(var(--allow-offset-left)/1098 * 100%);
            --allow-offset-bottom: 480;
        }

        &.saving_comparison_arrow02-1 {
            --allow-offset-left: 580;
        }

        &.saving_comparison_arrow02-2 {
            --allow-offset-left: 805;
        }

        &.saving_comparison_arrow03-1 {
            --allow-offset-left: 580;
        }

        &.saving_comparison_arrow03-2 {
            --allow-offset-left: 805;
        }
    }

    &.active {
        img {

            &.saving_comparison_baloon {
                opacity: 1;
                transform: translateY(0);
            }

            &.saving_comparison_arrow02-1 {
                --allow-offset-bottom: 275;
            }

            &.saving_comparison_arrow02-2 {
                --allow-offset-bottom: 256;
            }

            &.saving_comparison_arrow03-1 {
                --allow-offset-bottom: 349;
            }

            &.saving_comparison_arrow03-2 {
                --allow-offset-bottom: 323;
            }
        }
    }
}