:root {
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(51, 51, 51);
    --color-primary-dark: rgb(0, 83, 181);
    --color-primary-medium: rgb(11, 136, 227);
    --color-primary-light: rgb(103, 191, 255);
    --color-gray-700: rgb(44, 47, 53);
    --color-gray-600: rgb(65, 69, 78);
    --color-gray-500: rgb(99, 105, 119);
    --color-gray-400: rgb(158, 164, 177);
    --color-gray-300: rgb(196, 201, 210);
    --color-gray-200: rgb(235, 237, 241);
    --color-gray-100: rgb(246, 247, 248);
    --color-background-gray: rgb(247, 247, 247);
    --gradient-primary: linear-gradient(180deg, var(--color-primary-medium) 0%, var(--color-primary-dark) 100%);
}

.b-feature-list {
    padding: 120px 0;
    background-color: var(--color-white);
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--color-black);
}

.b-feature-list *,
.b-feature-list *::before,
.b-feature-list *::after {
    box-sizing: border-box;
}

.b-feature-list img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Assuming l_container is available globally or redefine here */
.b-feature-list .l_container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.b-feature-list__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.b-feature-list__item:not(:last-child) {
    margin-bottom: 120px;
}

/* Reverse order for even items */
.b-feature-list__item:nth-child(even) .b-feature-list__description {
    order: 2;
}

.b-feature-list__item:nth-child(even) .b-feature-list__sub_image {
    order: 1;
}

.b-feature-list__description {
    /* Removed specific styles if any, rely on inner elements */
}

/* New styles based on original HTML structure */
.b-feature-list__title_block {
    margin-bottom: 24px; /* Adjust spacing as needed */
}

.b-feature-list__label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 100px; /* Corresponds to feature_no */
    font-weight: 700;
    line-height: 1;
    color: var(--color-gray-200);
    margin-bottom: 16px;
    display: block;
}

.b-feature-list__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 28px; /* Corresponds to head */
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-black);
    /* Removed margin-bottom from title, handled by title_block */
}

.b-feature-list__description-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px; /* Corresponds to text */
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-gray-600);
}

.b-feature-list__sub_image {
    text-align: center; /* Center the image or content */
}

.b-feature-list__sub_image img {
    border-radius: 8px; /* Optional: if you want rounded corners on images */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Example shadow */
}

/* Styles specifically for WYSIWYG content */
.b-feature-list__description .wysiwyg-content p:last-child,
.b-feature-list__sub_image .wysiwyg-content p:last-child {
    margin-bottom: 0;
}

.b-feature-list__sub_image .wysiwyg-content img {
    /* Inherit img styles or add specific ones */
    display: block; /* Ensure images behave as blocks */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 991.98px) {
    .b-feature-list__item {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .b-feature-list__item:not(:last-child) {
        margin-bottom: 80px;
    }

    /* Reset order for stacked layout */
    .b-feature-list__item:nth-child(even) .b-feature-list__description,
    .b-feature-list__item:nth-child(even) .b-feature-list__sub_image {
        order: initial;
    }

    .b-feature-list__label {
        font-size: 80px;
    }

    .b-feature-list__title {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .b-feature-list {
        padding: 60px 0;
    }

    .b-feature-list .l_container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .b-feature-list__item:not(:last-child) {
        margin-bottom: 60px;
    }

    .b-feature-list__title_block {
        margin-bottom: 16px;
    }

    .b-feature-list__label {
        font-size: 60px;
        margin-bottom: 8px;
    }

    .b-feature-list__title {
        font-size: 20px;
    }

    .b-feature-list__description-text {
        font-size: 15px;
    }
}

.gg-l-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 130px; /* from 819:3802 left padding */
    padding-right: 10px; /* from 819:3802 right padding */
}

.gg-c-feature_list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* from 819:3802 spacing */
    width: 100%;
}

.gg-c-feature_item {
    display: flex;
    gap: 64px; /* from 819:3803 spacing */
    align-items: center; /* from 819:3803 counterAxis alignment */
    width: 100%; /* Overriding fixed 1260px for responsiveness */
    max-width: 1260px; /* Retain max width from figma */
    margin-left: auto;
    margin-right: auto;
}

/* Modifier for the second item to potentially reverse order visually if needed, though not specified */
/* .c-feature_item.is-reversed { flex-direction: row-reverse; } */

.gg-c-feature_item__text_content {
    display: flex;
    flex-direction: column;
    gap: 64px; /* from 819:3804 spacing */
    flex-shrink: 0; /* Prevent text content from shrinking disproportionately */
     /* Width from 819:3804 & 819:3859 */
    width: 524px;
    max-width: 100%; /* Ensure it doesn't overflow container */
}

.gg-c-feature_item__heading_group {
    display: flex;
    flex-direction: column;
    gap: 24px; /* from 819:3805 spacing */
}

.gg-c-feature_item__title_block {
    display: flex;
    flex-direction: column;
    gap: 8px; /* from 819:3806 spacing */
}

.gg-c-feature_item__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9375rem; /* 15px */
    font-weight: 400;
    letter-spacing: 0.05em; /* 5% */
    line-height: 1.7; /* 170% */
    color: rgba(11, 136, 227, 1); /* #0B88E3 */
    text-align: left; /* Overriding Figma's CENTER for better flow */
    /* width: 91px; - Let it be auto */
}

.gg-c-feature_item__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.75rem; /* 28px */
    font-weight: 500;
    letter-spacing: 0.1em; /* 10% */
    line-height: 1.5; /* 150% */
    color: rgba(11, 136, 227, 1); /* #0B88E3 */
    text-align: left;
}

.gg-c-feature_item__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9375rem; /* 15px */
    font-weight: 400;
    letter-spacing: 0.05em; /* 5% */
    line-height: 1.7; /* 170% */
    color: rgba(51, 51, 51, 1); /* #333333 */
    text-align: left;
}

/* Styles specific to the description WYSIWYG content */
.gg-c-feature_item__description.wysiwyg-content p:last-child {
    margin-bottom: 0;
}

.gg-c-feature_item__sub_image img {
    /* Width from 988:3538, 988:3532 */
    /* Height set automatically */
    width: 100%; /* Make sub image responsive */
    max-width: 525px; /* Max width from 988:3538 */
    display: block; /* Remove extra space below image */
}

.gg-c-feature_item__main_image {
    flex-shrink: 0; /* Prevent image from shrinking disproportionately */
    /* Width/Height from 988:3541, 819:31195 */
    width: 672px;
    height: auto;
    max-width: 100%; /* Ensure it doesn't overflow container */
}

.gg-c-feature_item__main_image img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Styles for the second image wrapper (Frame 819:31195) */
.gg-c-feature_item__main_image--bg {
    background-color: rgba(247, 247, 247, 1); /* #F7F7F7 */
    border-radius: 8px; /* from 819:31195 cornerRadius */
    overflow: hidden; /* Clip image to rounded corners */
    position: relative; /* Needed if using pseudo-elements for gradient */
    /* Note: Figma shows a complex structure with bg-color, image, and gradient overlay.
       This simplified version uses a placeholder in a container with bg-color and border-radius.
       The gradient overlay (819:31197) is not replicated with just a placeholder. */
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .gg-l-container {
        padding-left: 60px;
        padding-right: 10px;
    }

    .gg-c-feature_item {
        gap: 40px;
        /* Allow text/image to shrink */
        flex-wrap: wrap;
        justify-content: center; /* Center items when wrapping */
    }

    .gg-c-feature_item__text_content {
        width: auto; /* Allow text width to adjust */
        flex-basis: 400px; /* Give text a base width */
        flex-grow: 1;
        gap: 40px;
    }

    .gg-c-feature_item__main_image {
        width: auto; /* Allow image width to adjust */
        height: auto; /* Allow image height to adjust */
        flex-basis: 400px; /* Give image a base width */
        flex-grow: 1;
    }
}

@media (max-width: 992px) {
    .gg-l-container {
        padding-left: 30px;
        padding-right: 10px;
    }

    .gg-c-feature_item {
        flex-direction: column;
        align-items: flex-start; /* Align items to start in column */
        gap: 30px;
    }

    /* Reverse order for second item visually on mobile */
    .gg-c-feature_item:nth-child(2) {
        flex-direction: column-reverse;
    }

    .gg-c-feature_item__text_content,
    .gg-c-feature_item__main_image {
        width: 100%; /* Take full width in column layout */
        flex-basis: auto; /* Reset basis */
    }

    .gg-c-feature_item__main_image {
        height: auto; /* Ensure height adjusts */
        max-height: 50vh; /* Limit image height */
    }

    .gg-c-feature_item__title {
        font-size: 1.5rem; /* 24px */
    }

    .gg-c-feature_item__label,
    .gg-c-feature_item__description {
        font-size: 0.875rem; /* 14px */
    }
}

@media (max-width: 768px) {
    .gg-l-container {
        padding-left: 20px;
        padding-right: 10px;
    }

    .gg-c-feature_item__text_content {
        gap: 30px;
    }

    .gg-c-feature_item__heading_group {
        gap: 16px;
    }

    .gg-c-feature_item__title_block {
        gap: 4px;
    }
    .gg-c-feature_list  {
        padding-left: 10px;
        padding-right: 10px;
    }
}