.two-btn-container-flex {
    display: flex;
    justify-content: center;
    gap: 3rem;

    @media screen and (max-width: 767px) {
        gap: 1rem;
    }

    .renovation-top-btn {
        position: relative;
        width: 31.9rem;
        height: 7rem;
        border: 2px solid #1863C5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: background-color 0.3s ease, transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
        margin-bottom: 7rem;
        border-radius: 1rem;
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 700;
        font-size: 1.8rem;
        line-height: 1.8rem;
        text-align: center;
        letter-spacing: 0.08em;
        color: #1863C5;

        @media screen and (max-width: 767px) {
            width: calc(100% / 2);
            height: 5rem;
            font-size: 1.4rem;
            line-height: 1.8rem;
            margin-bottom: 5rem;
        }

        &::after {
            position: absolute;
            content: "";
            background: url(../../img/page/renovation/renovation-arrow.svg) no-repeat;
            background-size: 100%;
            width: 2rem;
            height: 2rem;
            top: 0;
            bottom: 0;
            right: 2rem;
            margin: auto;

            @media screen and (max-width: 767px) {
                width: 1.4rem;
                height: 1.4rem;
                right: 0.6rem;
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(63, 77, 82, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            transition: left 0.6s ease;
            z-index: 1;
        }

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(24, 99, 197, 0.35);

            &::before {
                left: 150%;
            }

            &::after {
                right: 2rem;
            }
        }
    }
}

.top-text-reno {
    font-size:  12px; 
    font-family:'Noto Sans', sans-serif; 
    font-weight:400; 
    letter-spacing:-0.02em;

    @media screen and (max-width: 767px) {
        text-align: left;
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin: 2rem 0 auto;
    }
}

.grey-bk {
    background: #F0F0F0;
    border-radius: 2.4rem;
    width: 100%;
    padding: 5.2rem 6.3rem 5.9rem;

    @media screen and (max-width: 767px) {
        padding: 4rem 2rem;
    }

    .section-title-grey {
        padding-left: 2.7rem;
        position: relative;
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 700;
        font-size: 2.6rem;
        line-height: 2.6rem;
        letter-spacing: 0.08em;
        color: #242328;
        margin-bottom: 2.1rem;

        @media screen and (max-width: 767px) {
            font-size: 2rem;
            line-height: 2rem;
            margin-bottom: 1.5rem;

        }

        &::after {
            position: absolute;
            content: "";
            background: #1863C5;
            border-radius: 0.4rem;
            width: 1.8rem;
            height: 1.8rem;
            top: 0.4rem;
            bottom: 0;
            left: 0rem;
            margin: auto;
        }
    }

    .paragraph-section {
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 2.6rem;
        letter-spacing: 0.08em;
        color: #242328;
        margin-bottom: 4.8rem;

        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
            line-height: 2.2rem;
            margin-bottom: 2.5rem;
        }

        & a {
            position: relative;
            color: #003EC3;
            text-decoration: underline;
            text-underline-position: under;

            &::after {
                content: "";
                position: absolute;
                background: url(../../common/img/go-to-icon.svg) no-repeat;
                background-size: 100%;
                width: 1.4rem;
                height: 1.4rem;
                top: 0;
                bottom: 0;
                right: 0.2rem;
                margin: auto;
            }

            &:hover {
                text-decoration: none;
            }
        }
    }

    .before-after-flexcontainer {
        display: flex;
        gap: 1rem;
        margin-bottom: 3.6rem;
        align-items: center;

        @media screen and (max-width: 767px) {
            flex-direction: column;

            .svg-container {
                transform: rotate(90deg);
            }
        }



        .before-after-container {
            width: 33.4rem;
            background: #D9D9D9;
            position: relative;
            height: 21.3rem;

            @media screen and (max-width: 767px) {
                width: 100%;
                height: auto;
            }

            &::before {
                position: absolute;
                font-family: 'Noto Sans JP';
                font-style: normal;
                font-weight: 700;
                font-size: 1.6rem;
                line-height: 1.6rem;
                letter-spacing: 0.08em;
                color: #FFFFFF;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 8.4rem;
                height: 3.3rem;
                background: #1863C5;
                top: 0;
                left: 0;
            }

            & img {
                width: 100%;
                height: 100%;
            }
        }

        .before-container {
            &::before {
                content: "施工前";
            }
        }

        .before-mid-container {
            &::before {
                content: "既存床材撤去";
                width: 13.6rem;
            }
        }

        .after-container {
            &::before {
                content: "施工後";
            }
        }
    }

    .used-article-container {
        padding: 4rem 4.1rem 4.5rem 3.8rem;
        background-color: #FFFFFF;

        @media screen and (max-width: 767px) {
            padding: 3rem 2rem;
        }

        .article-blue-title {
            font-family: 'Noto Sans JP';
            text-align: center;
            font-style: normal;
            font-weight: 700;
            font-size: 2.2rem;
            line-height: 2.6rem;
            letter-spacing: 0.08em;
            color: #1863C5;
            margin-bottom: 2.1rem;

            @media screen and (max-width: 767px) {
                font-size: 2rem;
                margin-bottom: 2rem;
            }
        }

        .used-articles-flex-container {
            display: flex;
            justify-content: space-between;

            .used-articles-box {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2.8rem;

                @media screen and (max-width: 767px) {
                    flex-direction: column;
                    gap: 1.5rem;
                    width: 100%;
                }

                .used-article-img-container {
                    width: 20.1rem;
                    height: 14.4rem;
                    border-radius: 1.2rem;

                    & img {
                        width: 100%;
                        border-radius: 1.2rem;
                        height: 100%;
                    }
                }

                .used-articles-txt-container {

                    @media screen and (max-width: 767px) {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    .used-articles-title {
                        font-family: 'Noto Sans JP';
                        font-style: normal;
                        font-weight: 500;
                        font-size: 1.8rem;
                        line-height: 2.4rem;
                        letter-spacing: 0.08em;
                        color: #242328;
                        margin-bottom: 2.5rem;

                        @media screen and (max-width: 767px) {
                            font-size: 1.6rem;
                            margin-bottom: 1.5rem;
                        }
                    }

                    & a {
                        position: relative;
                        font-family: 'Noto Sans JP';
                        font-style: normal;
                        font-weight: 700;
                        font-size: 1.6rem;
                        line-height: 1.6rem;
                        letter-spacing: 0.08em;
                        color: #1863C5;
                        max-width: 12.3rem;
                        text-decoration: underline;
                        text-underline-position: under;

                        &::after {
                            content: "";
                            position: absolute;
                            background: url(../../common/img/blue-arrow.svg) no-repeat;
                            width: 1.5rem;
                            height: 1.5rem;
                            background-size: 100%;
                            top: 0.3rem;
                            bottom: 0;
                            right: 0.3rem;
                            margin: auto;
                            transition: 0.25s all ease;
                        }

                        &:hover {
                            text-decoration: none;

                            &::after {
                                right: 0rem;
                            }
                        }
                    }
                }
            }
        }
    }

}

.product-list-section {

    @media screen and (max-width: 767px) {
        padding: 8rem 0 0;

        .page-common-section-title {
            margin-bottom: 4rem;
        }
    }

    .prod-section-title {
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 700;
        font-size: 2.6rem;
        line-height: 2.6rem;
        letter-spacing: 0.08em;
        color: #FFFFFF;
        padding: 2.5rem 4.6rem 2.4rem;
        background-color: #1863C5;
        border-radius: 3.8rem;
        margin-bottom: 4rem;

        @media screen and (max-width: 767px) {
            font-size: 2rem;
            line-height: 2rem;
            padding: 1.3rem 3rem;
            margin-bottom: 3rem;
        }
    }

    .products-list-container-flex {
        display: flex;
        gap: 4.9rem;
        flex-wrap: wrap;
        margin-bottom: 4.4rem;

        .product-box {
            max-width: 32.3rem;
            width: 100%;

            @media screen and (max-width: 767px) {
                max-width: 100%;
            }

            .product-title {
                height: 5.2rem;
                font-family: 'Noto Sans JP';
                font-style: normal;
                font-weight: 700;
                font-size: 1.8rem;
                line-height: 2.6rem;
                letter-spacing: 0.08em;
                color: #242328;
                margin-bottom: 1.2rem;

                @media screen and (max-width: 767px) {
                    height: auto;
                    margin-bottom: 1.8rem;
                }
            }

            .product-img-container {
                width: 32.3rem;
                height: 21rem;
                margin-bottom: 2rem;

                @media screen and (max-width: 767px) {
                    width: 100%;
                }

                & img {
                    width: 100%;
                    height: 100%;
                }
            }

            .product-title2 {
                font-family: 'Noto Sans JP';
                font-style: normal;
                font-weight: 700;
                font-size: 1.8rem;
                line-height: 2.6rem;
                letter-spacing: 0.08em;
                color: #242328;
                margin-bottom: 1.2rem;
            }

            .product-description {
                margin-bottom: 3rem;
                font-family: 'Noto Sans JP';
                font-style: normal;
                font-weight: 400;
                font-size: 1.6rem;
                line-height: 2.2rem;
                letter-spacing: 0.08em;
                color: #242328;

                & sup {
                    font-size: 1rem;
                }

                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    line-height: 2rem;
                    margin-bottom: 1.5rem;
                }
            }

            & a {
                font-family: 'Noto Sans JP';
                font-style: normal;
                font-weight: 700;
                font-size: 1.6rem;
                line-height: 1.6rem;
                letter-spacing: 0.08em;
                color: #1863C5;
                position: relative;
                width: 12.3rem;
                text-underline-position: under;
                text-decoration: underline;

                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    line-height: 1.4rem;
                    width: 10rem;
                }

                &::after {
                    content: "";
                    position: absolute;
                    width: 1.5rem;
                    height: 1.5rem;
                    top: 0.3rem;
                    bottom: 0px;
                    right: 0.3rem;
                    background: url(../../common/img/blue-arrow.svg) 0% 0% / 100% no-repeat;
                    margin: auto;
                    transition: 0.25s all ease;
                }

                &:hover {
                    text-decoration: none;

                    &::after {
                        right: 0rem;
                    }
                }
            }

        }
    }
}