@charset "UTF-8";

/*#top_reason*/
a[id^="top_reason"] + section .heading.block_header_2 .h:before {
    display: none;
}
a[id^="top_reason"] + section span.bg_line {
    padding: 7px;
}
a[id^="top_reason"] + section .heading.block_header_2 .h, 
a[id^="top_reason"] + section .heading.block_header_2 p {
    padding-left: 0px;
}
@media screen and (min-width: 901px) {
    a[id^="top_reason"] + section .inner_item_txt {
        padding-left: 80px !important;
    }
}
#top_reason1 + section .heading.block_header_1 p,
#top_reason1 + section .heading.block_header_1 .h {
    color: var(--i_main_color) !important;
}

/* ここから追記 */
a[id^="top_reason"] + section {
    overflow: visible;
}
a[id^="top_reason"] + section > .content_wrapper,
#top_reason3 + section .inner_item_img,
#top_reason6 + section .inner_item_img {
    position: relative;
}
a[id^="top_reason"] + section > .content_wrapper:before,
a[id^="top_reason"] + section > .content_wrapper:after,
#top_reason3 + section .inner_item_img:before,
#top_reason6 + section .inner_item_img:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    pointer-events: none;
}
/*インク*/
a[id^="top_reason"] + section > .content_wrapper:before {
    left: -50px;
    top: -10%;
}

/*イラスト*/
a[id^="top_reason"] + section > .content_wrapper:after,
#top_reason3 + section .inner_item_img:before,
#top_reason6 + section .inner_item_img:before {
    top: 0;
    right: 0;
}

/* インク */
#top_reason2 + section > .content_wrapper:before {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101134.png") no-repeat top left / 120px;
    top: -30%;
}

#top_reason3 + section > .content_wrapper:before {
    left: auto;
    right: 0;
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133_3.png") no-repeat top right / 120px;
}

#top_reason4 + section > .content_wrapper:before {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133_3.png") no-repeat bottom left / 120px;
    top: auto;
    bottom: 0;
}

#top_reason6 + section > .content_wrapper:before {
    background: url("/common/upload_data/rontgroup0501com/image/20251021102458.png") no-repeat top left / 120px;
}
#top_reason6 + section > .content_wrapper:after {
    background: url("/common/upload_data/rontgroup0501com/image/20251021102458.png") no-repeat bottom right / 120px;
    top: auto;
    bottom: -10%;
}

/* イラスト */
#top_reason2 + section > .content_wrapper:after {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133.png") no-repeat top right / 160px;
    top: -25%;
}
#top_reason3 + section .inner_item_img:before {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133_1.png") no-repeat bottom right / 120px;
    top: auto;
    bottom: -20px;
    right: -20px;
    z-index: 3;
}

#top_reason4 + section > .content_wrapper:after {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133_4.png") no-repeat bottom right / 120px;
    top: 60px;/*追記*/
}

#top_reason5 + section > .content_wrapper:after {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133_5.png") no-repeat top right / 110px;
    right: 10%;
}

#top_reason6 + section .inner_item_img:before {
    background: url("/common/upload_data/rontgroup0501com/image/20251021101133_2.png") no-repeat bottom right / 80px;
    top: auto;
    bottom: -20px;
    right: -20px;
    z-index: 3;
}

@media screen and (min-width: 922px) {
    #top_reason3 + section .inner_item_img::before,
    #top_reason6 + section .inner_item_img:before {
        right: -60px;
    }
}

@media screen and (max-width: 900px) {
    /*インク*/
    a[id^="top_reason"] + section > .content_wrapper:before {
        left: 0px;
        top: -10%;
        background-size: 80px !important;
    }
    #top_reason2 + section > .content_wrapper::before {
        top: -15%;
    }
    #top_reason4 + section > .content_wrapper::before {
        background-position: top left;
        top: -10%;
    }
    /* イラスト */
    a[id^="top_reason"] + section > .content_wrapper:after {
        background-size: 90px !important;
    }
    #top_reason5 + section > .content_wrapper::after {
        background-position: right bottom;
        bottom: 0;
        top: auto;
    }
    #top_reason3 + section .inner_item_img::before {
        background-size: 80px;
    }

    #top_reason6 + section .inner_item_img:before {
        background-size: 65px;
    }
}

@media screen and (max-width: 480px) {
    #top_reason5 + section > .content_wrapper::after {
        bottom: 15%;
    }
}