body.features__body.body-renewal2025.body-renewal2025_one-column-narrow {
    footer {
        margin: 80px 0 0;
    }
}

@media screen and (max-width:959px) {
    body.features__body.body-renewal2025.body-renewal2025_one-column-narrow {
        footer {
            margin: 60px 0 0;
        }
    }
}

@media screen and (max-width:767px) {
    body.features__body.body-renewal2025.body-renewal2025_one-column-narrow {
        footer {
            margin: 40px 0 0;
        }
    }
}

@media (min-width: 960px) {
    main.container.one-column.features {
        .row .column {
            margin-bottom: inherit;
            padding: initial
        }
    }
}

.body-renewal2025.body-renewal2025_one-column-narrow {
    main.container.one-column.features {
        max-width: 980px;
        padding: 0 30px;

        * {
            _font-family: "Noto Sans JP";
        }

        .row {
            width: 100%;
            margin-left: initial;
        }

        .sec-header {
            display: flex;
            padding: 59.25px 0 40px 0;
            flex-direction: column;
            align-self: stretch;

            .h1 {
                color: #292929;
                text-align: center;
                font-size: 38px;
                font-weight: 700;
                font-size: var(--page-header-fs1);
            }

            p {
                color: #292929;
                text-align: center;
                font-size: 17.5px;
                font-weight: 400;
            }
        }
    }
}

#container-features202603 {
    .wrap_btn_inner_links {
        ul {
            list-style: none;
            display: flex;
            justify-content: center;
            padding: 8px 0;
            border: 1px solid #ededed; //add border
            border-radius: 100px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03);
            gap: 8px;
            border-radius: 999px;

            li {
                width: auto; //for tweaking space
                display: flex;
                justify-content: center;
                border-radius: 12px;


                a {
                    color: var(----main-color-1, #0BA360);
                    text-align: center;
                    font-size: 13px;
                    font-weight: 600;
                    width: initial;
                    height: 32px;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    padding: 8px 12px;
                    border-radius: 12px;
                    transition: background-color .3s;
                    display: flex;

                    &:hover {
                        background: #FAFAFA;
                        text-decoration: none;
                    }

                    svg {
                        _margin-left: 4px;
                    }
                }
            }
        }
    }

    section#AI-features {
        .wrap_contents {

            border-radius: 12px;
            background: #FAFAFA;
            display: flex;
            padding: 24px 20px;
            flex-direction: column;
            align-items: center;
            gap: var(--Space-x6, 24px);
            margin-top: 32px;
            align-self: stretch;

            h2 {
                color: #292929;
                text-align: center;
                font-size: 20px;
                font-weight: 600;
                margin: 0;
            }

            .wrap_cards {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 20px;

                .cards {
                    display: flex;
                    padding: 20px;
                    flex-direction: column;
                    align-items: center;
                    flex: 1 0 0;
                    align-self: stretch;
                    border-radius: 12px;
                    border: 1px solid #EDEDED;
                    background: #FFF;

                    .wrap_img {
                        padding: 10px 0;
                    }

                    span {
                        color: #005817;
                        font-size: 11px;
                        font-weight: 400;
                        display: flex;
                        padding: 2px 10px;
                        flex-direction: column;
                        align-items: flex-start;
                        border-radius: 999px;
                        background: #EFFCF7;
                    }

                    h3 {
                        color: #292929;
                        text-align: center;
                        font-size: 18px;

                        font-weight: 600;
                        margin-top: 12px;
                    }

                    p {
                        color: #1E293B;
                        font-size: 15px;
                        font-weight: 400;
                    }
                }
            }
        }

        .wrap__btn-cta {
            display: flex;
            justify-content: center;

            a.btn-common.btn-common202512 {
                margin-top: 25px;
                font-size: var(--fs-btn-common202512);
                background: linear-gradient(180deg, #0BA360 0%, #008E45 100%);
                box-shadow: 0 2px 8px 0 #0BA36033;
                width: 300px;
                min-width: 300px;
                opacity: 1;
                border-radius: 6px;
                padding-top: 15px;
                padding-right: 65px;
                padding-bottom: 15px;
                padding-left: 40px;
                height: var(--height-btn-common202512);
                transition: box-shadow .3s;

                color: #FFF;
                text-align: center;
                font-weight: 600;
            }
        }
    }
}

/* CTAセクション */
.pricing-new .sec-top-cta {
    margin: 20px calc(-50vw + 50%);
    width: 100vw;
    background: #F3FBF9;
    padding-top: 24px;
    padding-bottom: 24px;
}

.pricing-new .sec-top-cta .p__sec-top-cta {
    color: var(--main-color-d1);
    font-weight: 600;
    font-size: 18px;
}

section.func-category {
    padding-top: 80px;
    margin-top: 0rem;

    &#sec-maintenance-optimization {
        _padding-top: 60px;
    }

    .func-category {
        margin: 0 auto;
        padding: 0 24px;
    }

    .func-category-head {
        text-align: center;
        margin-bottom: 28px;
    }

    .func-category-title {
        color: #292929;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .func-category-lead {
        color: #333;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
    }

    /* =========================
   toggle
========================= */
    .func-filter {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
    }

    .func-filter-btn {
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: color 0.2s ease, opacity 0.2s ease;
        color: #005817;
        font-size: 13px;
        font-weight: 600;
    }

    .func-filter-btn.func-filter-btn-mobile {
        color: #10a651;
    }

    .func-filter-btn:hover {
        opacity: 0.75;
    }

    .func-filter-switch {
        width: 55px;
        height: 32px;
        border: none;
        border-radius: 999px;
        background: #10a651;
        position: relative;
        padding: 0;
        cursor: pointer;
        flex: 0 0 55px;
        transition: background-color .3s;
    }

    .func-filter.is-browser {
        .func-filter-switch {
            background: #005817;
        }
    }

    .func-filter-switch-knob {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.28s ease;
    }

    .func-filter.is-browser .func-filter-switch-knob {
        transform: translateX(23px);
    }

    /* =========================
   list
========================= */
    .func-list,
    .func-more-slide {
        border-top: 1px solid #dedede;

        .column.column-l {
            p.func-name {
                color: #292929;
                _font-family: Lato;
                font-size: 16px;
                font-weight: 700;
            }
        }

        .column.column-ctr {
            p {
                color: #292929;
                font-size: 16px;
                font-weight: 400;
            }
        }

        .column.column-r {
            .func-item p {
                color: #292929;
                font-family: Lato;
                font-size: 16px;
                font-weight: 700;
            }
        }
    }

    .func-more-slide-inner {
        border-top: none;
    }

    .func-item:before {
        content: initial;
        position: initial;
        top: initial;
        left: initial;
        width: initial;
        border-top: initial
    }

    .func-item {
        display: grid;
        grid-template-columns: 180px 1fr 140px;
        gap: 28px;
        align-items: start;
        padding: 28px 0;
        border-bottom: 1px solid #dedede;
    }

    .column {
        min-width: 0;
    }

    .func-name {
        margin: 0;
        font-size: 1.8rem;
        line-height: 1.7;
        color: #222;
    }

    .func-name strong {
        font-weight: 700;
    }

    .func-item p {
        margin: 0;
        font-size: 1.8rem;
        line-height: 1.8;
        color: #333;
    }

    /* =========================
   icons
========================= */
    .func-icons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
    }

    .type-icon {
        display: flex;
        width: 40px;
        height: 40px;
        padding: 10.25px 0;
        justify-content: center;
        align-items: center;
    }


    .type-icon.type-icon-mobile {
        background: #0ea84f;
    }

    .type-icon.type-icon-browser {
        background: #005817;
    }

    .func-item.browser {
        .type-icon.type-icon-mobile {
            background: #d9d9d9;
        }
    }

    .func-item.mobile {
        .type-icon.type-icon-browser {
            background: #d9d9d9;
        }
    }

    .type-icon.disabled {
        background: #d9d9d9;
    }

    .icon-mobile,
    .icon-browser {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }

    .icon-mobile {
        width: 16px;
        height: 24px;
        border: 3px solid #fff;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .icon-mobile::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    .icon-browser {
        width: 24px;
        height: 18px;
        border: 3px solid #fff;
        border-radius: 2px;
        box-sizing: border-box;
    }

    .icon-browser::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -7px;
        width: 14px;
        height: 3px;
        background: #fff;
        transform: translateX(-50%);
        border-radius: 2px;
    }

    .icon-browser::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 6px;
        height: 4px;
        background: #fff;
        transform: translateX(-50%);
    }

    /* =========================
   more slide
========================= */
    .func-more-slide {
        overflow: hidden;
        height: 0;
        transition: height 0.38s ease;
        border: initial;
    }

    .func-more-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin-top: 22px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 12px 0;
        color: var(----main-color-1, #0BA360);
        font-size: 16px;
        font-weight: 600;
    }

    .func-more-toggle:hover {
        opacity: 0.75;
    }

    .func-more-toggle-icon {
        position: relative;
        width: 20px;
        height: 20px;
        _flex: 0 0 14px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 20px;
            height: 20px;
        }
    }

    .func-more-toggle-icon::before,
    .func-more-toggle-icon::after {
        _content: "";
        _position: absolute;
        _top: 5px;
        __height: 2px;
        _background: #10a651;
        _border-radius: 2px;
        _transition: transform 0.25s ease;
    }

    .func-more-toggle-icon::before {
        _left: 0;
        _transform: rotate(45deg);
    }

    .func-more-toggle-icon::after {
        _right: 0;
        _transform: rotate(-45deg);
    }

    .func-more-toggle.is-open .func-more-toggle-icon img {
        transform: rotate(180deg);
    }

    .func-more-toggle.is-open .func-more-toggle-icon::after {
        _transform: rotate(45deg);
    }

    /* =========================
   responsive
========================= */
    @media (max-width: 959px) {
        padding-bottom: 0px;

        .func-category-head {
            margin-bottom: 20px;
        }

        .func-item {
            grid-template-columns: 160px 1fr 120px;
            gap: 20px;
        }

        .func-item .func-icons {
            top: 2.75rem;
            right: 1rem;
        }

        .func-category-title {
            font-size: 23px;
        }

        .func-category-lead,
        .func-item p,
        .func-name,
        .func-more-toggle {
            font-size: 1.5rem;
        }

        .func-filter-btn {
            font-size: 1.4rem;
        }

        .func-filter-switch {
            height: 28px;
        }

        .func-filter-switch-knob {
            top: 3px;
            left: 5px;
            width: 22px;
            height: 22px;
        }

        & .func-list,
        & .func-more-slide {
            & .column.column-l {
                p.func-name {
                    font-size: 15px;
                }
            }

            & .column.column-ctr {
                p {
                    font-size: 15px;
                }
            }
        }

        .func-more-toggle {
            margin-top: 15px;
        }
    }

    @media (max-width: 767px) {
        .func-category {
            margin-bottom: 56px;
            padding: 0 16px;
        }

        .func-category-head {
            margin-bottom: 20px;
        }

        .func-category-title {
            font-size: 2.4rem;
            margin-bottom: 14px;
        }

        .func-category-lead {
            font-size: 1.5rem;
            line-height: 1.8;
        }

        .func-filter {
            margin-top: 20px;
            gap: 10px;
        }

        .func-filter-btn {
            font-size: 1.5rem;
        }

        .func-filter-switch {
            width: 56px;
            height: 30px;
            flex-basis: 56px;
        }

        .func-filter-switch-knob {
            width: 22px;
            height: 22px;
            top: 4px;
            left: 4px;
        }

        .func-filter.is-browser .func-filter-switch-knob {
            transform: translateX(26px);
        }

        .func-item {
            grid-template-columns: 1fr;
            gap: 12px;
            padding: 20px 0;
        }

        .func-item .func-icons {
            top: 1rem;
            right: 1rem;
        }

        .func-name,
        .func-item p {
            font-size: 1.5rem;
            line-height: 1.8;
        }

        .func-icons {
            justify-content: flex-start;
            gap: 10px;
        }

        .type-icon {
            width: 38px;
            height: 38px;
            flex-basis: 38px;
        }

        .icon-mobile {
            width: 14px;
            height: 21px;
            border-width: 2px;
        }

        .icon-browser {
            width: 20px;
            height: 15px;
            border-width: 2px;
        }

        .func-more-toggle {
            font-size: 1.5rem;
            margin-top: 16px;
        }
    }

    @media screen and (max-width:480px) {
        .func-filter-btn {
            font-size: 1.3rem;
        }

        .func-category-title {
            font-size: 2.1rem;
            margin-bottom: 20px;
        }

        & .func-list,
        & .func-more-slide {
            & .column.column-l {
                p.func-name {
                    font-size: 14.5px;
                }
            }

            & .column.column-ctr {
                p {
                    font-size: 14.5px;
                }
            }
        }

        .type-icon {
            width: 35px;
            height: 35px;
            flex-basis: 35px;
        }

        .type-icon.type-icon-mobile {
            svg {
                max-height: 20px;
            }
        }

        .type-icon.type-icon-browser {
            svg {
                max-height: 16px;
            }
        }
    }
}

@media (min-width:960px) {
    #tools .banner .banner-item img {
        margin-left: auto;
        margin-right: auto;
        margin-top: auto
    }
}

@media screen and (max-width:959px) {
    .body-renewal2025.body-renewal2025_one-column-narrow {
        main.container.one-column.features {
            padding: 0 20px;

            & .sec-header {
                .h1 {
                    _font-size: 28px;
                }

                p {
                    font-size: 15px;
                }
            }

            #container-features202603 {
                & .wrap_btn_inner_links {
                    ul {
                        flex-wrap: wrap;
                        gap: 0;
                        border-radius: 35px;

                        & li {
                            width: 31.5%;

                            a {

                                font-size: 14px;
                                height: 35px;
                            }
                        }
                    }
                }
            }

            #container-features202603 {
                & section#AI-features {
                    width: 100vw;
                    margin: 0px calc(-50vw + 50%);

                    & .wrap_contents {
                        padding: 30px 20px;

                        h2 {
                            font-size: 22px;
                        }

                        .wrap_cards {
                            grid-template-columns: 1fr;
                            gap: 20px;
                            width: 100%;

                            & .cards {
                                .wrap_img {
                                    padding: 15px 0;
                                    max-width: 400px;
                                }

                                h3 {
                                    font-size: 20px;
                                }

                                span {
                                    font-size: 14px;
                                    padding: 3px 15px;
                                    width: 250px;
                                    align-items: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:767px) {
    .body-renewal2025.body-renewal2025_one-column-narrow {
        & main.container.one-column.features {
            & #container-features202603 {
                & section#AI-features {
                    & .wrap_contents {
                        h2 {
                            font-size: 21px;
                        }
                    }
                }

                & .wrap_btn_inner_links {
                    & ul {
                        border-radius: 25px;

                        & li {
                            width: 45%;

                            a {
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:480px) {
    .body-renewal2025.body-renewal2025_one-column-narrow {
        & main.container.one-column.features {
            .sec-header {
                padding: 30px 0 40px 0;
            }

            & #container-features202603 {
                & section#AI-features {
                    & .wrap_contents {
                        & .wrap_cards {
                            & .cards {
                                span {
                                    font-size: 14px;
                                    width: initial;
                                }
                            }
                        }
                    }
                }

                & .wrap_btn_inner_links {
                    width: 100vw;
                    margin: 0 calc(-50vw + 50%);
                    padding-left: 10px;
                    padding-right: 10px;

                    & ul {
                        & li {
                            a {
                                font-size: 12px;
                                gap: 5px;
                            }
                        }
                    }
                }
            }
        }
    }

}

div#features-tools {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    overflow: hidden;
}

#tools.tools-2025 {
    width: 100%;
    _background-color: var(--main-color-l1);
    border-radius: var(--sec-br) var(--sec-br) 0 0;
    padding: var(--sec-padding1);

    .container {
        max-width: 940px;
    }

    h2 {
        color: #292929;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
    }

    .lead {
        color: #666;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        margin: 0;
    }

    .top-banner-tools {
        padding: 0 0 60px;
    }

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        align-items: initial;
        flex-wrap: initial;
        column-gap: 15px;
        row-gap: 20px;

        li.banner-item {
            margin: initial;
            width: 100%;
            padding: 16px 12px;
            font-size: 1.6rem;

            border-radius: 12px;
            border: 1px solid #EDEDED;
            background: #FFF;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);

            &:hover a {
                color: var(--main-color-1)
            }

            a {
                width: 100%;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                padding: 0;
                transition: color .3s;

                &:hover {
                    text-decoration: none
                }

                .wrap_img {
                    height: 125px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 60px;
                    height: 60px;
                    max-width: 136.4px;
                    margin-bottom: 7.25px;

                    img {
                        margin: initial;
                        padding: initial
                    }
                }

                span {
                    display: block
                }

                .span_1 {
                    _font-weight: 700;
                    color: #333;
                    font-size: 12.5px;
                    font-weight: 400;
                }

                .span_2 {
                    background: var(--main-color-1);
                    border-radius: 999px;
                    width: -moz-fit-content;
                    width: fit-content;
                    margin: 0 auto 5px;
                    padding-top: 1px;
                    padding-bottom: 1px;
                    padding-left: clamp(10px, 1.25vw, 12px);
                    padding-right: clamp(10px, 1.25vw, 12px);
                    color: #FFF;
                    font-size: 11px;
                    font-weight: 400;
                }
            }
        }
    }
}

@media screen and (max-width:1399px) {
    #tools.tools-2025 {
        ul {
            _display: grid;

            li.banner-item {
                padding: 2.5rem 1.5rem;

                a {
                    _transition: color .3s;

                    .wrap_img {
                        height: 125px;

                        img {
                            width: 70px
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1199px) {
    #tools.tools-2025 {
        ul {
            grid-template-columns: 1fr 1fr 1fr 1fr;

            li.banner-item {
                a {
                    img {
                        width: 65px
                    }
                }
            }
        }
    }
}

@media screen and (max-width:959px) {
    div#features-tools {
        margin-top: -60px;
    }

    #tools.tools-2025 {
        ul {
            grid-template-columns: 1fr 1fr 1fr;
            row-gap: 20px;

            li.banner-item {
                padding: 2.5rem 1.5rem;
                height: initial;

                a {
                    .wrap_img {
                        height: 85px;

                        img {
                            width: 60px;
                            max-width: initial;
                            aspect-ratio: initial;
                            object-fit: initial
                        }
                    }

                    span {
                        font-size: 14px
                    }
                }
            }
        }
    }
}

@media screen and (max-width:767px) {
    #tools.tools-2025 {
        .container {
            padding: 0;
        }

        & ul {
            _grid-template-columns: 1fr 1fr;
            column-gap: 15px;
            row-gap: 15px;

            & li.banner-item {
                padding: 2.5rem 1rem;

                & a {
                    & .wrap_img {
                        img {
                            width: 55px;
                            max-width: initial;
                            aspect-ratio: initial;
                            object-fit: initial
                        }
                    }

                    span {
                        font-size: clamp(13px, 2vw, 15px);
                        font-weight: 600
                    }

                    .span_2 {
                        font-size: clamp(8px, 1.5vw, 12px);
                        padding-left: clamp(10px, 2vw, 20px);
                        padding-right: clamp(10px, 2vw, 20px);
                        font-weight: 400
                    }
                }
            }
        }
    }
}

@media screen and (max-width:480px) {
    div#features-tools {
        margin-top: 0px;
    }

    #tools.tools-2025 {
        & ul {
            grid-template-columns: 1fr 1fr;

            & li.banner-item {
                padding: 2rem 1rem;

                & a {
                    padding: 0 0 5px;

                    & .wrap_img {
                        height: 65px;

                        img {
                            width: clamp(44px, 11.5vw, 55px)
                        }
                    }

                    span {
                        font-size: min(3.5vw, 13px);
                        display: block
                    }

                    .span_2 {
                        font-size: clamp(8px, 2.5vw, 12px);
                        padding-left: clamp(9px, 1.25vw, 20px);
                        padding-right: clamp(9px, 1.25vw, 20px)
                    }
                }
            }
        }
    }
}

a.a__feature {
    margin: 40px auto 0;
    text-align: center;
    transition: color .3s, text-decoration .3s, background .3s;
    background: var(--main-color-1);
    color: #fff;
    padding: 15px 10px;
    width: 90%;
    border-radius: 999px;
    justify-content: center;
    align-items: center;

    display: flex;
    max-width: 600px;
    padding: 15px 10px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 400;

    svg {
        margin-left: 10px;
    }
}

a.a__feature i {
    margin-left: 12px;
}

a.a__feature:hover {
    background: var(--main-color-d1);
    text-decoration: none;
}

@media screen and (max-width:767px) {
    a.a__feature {
        font-size: 14px;
        max-width: 500px;
        width: 92.5%;
    }
}

@media screen and (max-width:480px) {
    a.a__feature {
        max-width: 425px;
        width: 92.5%;
        margin: 0 auto;
    }
}

@media screen and (max-width:425px) {
    a.a__feature {
        font-size: 13px;
        max-width: 400px;
        width: 100%;
    }

    .func-buttons .btn {
        margin: 0 .1rem;
        padding: 0 1rem;
        font-size: 1rem;
    }
}