@layer component {
    .p-sustainer-environment {
        margin-inline: auto;
        padding-inline: calc(2 * var(--base-unit));
        margin-top: calc(8 * var(--base-unit));
        width: var(--width-contents);
    }
    @media screen and (max-width: 767px) {
        .p-sustainer-environment {
            margin-top: calc(3 * var(--base-unit));
        }
    }
    .p-sustainer-environment__box {
        padding-block: calc(5 * var(--base-unit)) calc(6 * var(--base-unit));
        border: 1px solid #D5D5D5;
    }
    @media screen and (max-width: 767px) {
        .p-sustainer-environment__box {
            padding: calc(3 * var(--base-unit)) calc(1.6 * var(--base-unit));
        }
    }
    .p-sustainer-environment .p-txt01 .p-txt01--lead {
        font-size: calc(1.5 * var(--base-unit));
        line-height: 1.6;
        letter-spacing: 0.03em;
    }
    .p-sustainer-environment .p-btn01 a {
        padding-inline: calc(3 * var(--base-unit)) calc(19.4 * var(--base-unit));
        color: #333;
        background-color: #fff;
        border: 1px solid #0F2350;
    }
    @media screen and (max-width: 767px) {
        .p-sustainer-environment .p-btn01 a {
            padding-inline: calc(1.6 * var(--base-unit)) calc(5.9 * var(--base-unit));
        }
    }
    .p-sustainer-environment .p-btn01 a::after {
        filter: brightness(0.2) sepia(1) saturate(0) hue-rotate(0deg);
    }
    @media screen and (min-width: 768px) {
        .p-sustainer-environment .p-btn01 a {
            transition: background-color 0.3s, color 0.3s;
        }
        .p-sustainer-environment .p-btn01 a:hover {
            color: #fff;
            background-color: #A22041;
            border-color: #A22041;
        }
        .p-sustainer-environment .p-btn01 a:hover::after {
            filter: brightness(0) invert(1);
        }
    }

    @media screen and (min-width: 768px) {
        .p-movie01 {
            margin-top: calc(10* var(--base-unit));
        }
    }
}