@charset "UTF-8";
/*
 * LP用CTA（Call To Action）領域の背景グラデーション等のスタイル
 *
 * ブロックテーマの制約を超えた複雑な背景合成（画像＋透過グラデーション）やダイナミックな高さ計算を含みます。
 *
 * @package crmt-block-base
 * Last modified: 2026-04-03_15-23-11
 */
#khd-b2b {
    .cta-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;

        width: 100%;
        height: clamp(13.143rem, 10.2vw + 9.5rem, 16.786rem);

        background-image: linear-gradient(90deg, rgb(223 47 19 / 0.6) 0%, rgb(223 47 19 / 1) 30%, rgb(223 47 19 / 1) 100%), url(/wp-content/uploads/cta-bk-01.webp);
        background-position:
            center center,
            left clamp(-7.857rem, 17.6vw - 12.571rem, 0rem) center;
        background-repeat: no-repeat, no-repeat;
        background-size: cover, clamp(17.143rem, 59.8vw - 4.214rem, 38.5rem);
        background-size: cover, clamp(28.571rem, 40vw + 14.286rem, 42.857rem);

        p {
            margin: 0;
            color: var(--wp--preset--color--white);
        }
    }

    .cta-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;

        width: 100%;
        padding: clamp(2.857rem, 8vw, 5.714rem) 16px;

        /* background-image: linear-gradient(90deg, rgb(223 47 19 / 0.8) 0%, rgb(223 47 19 / 0.95) 50%, rgb(223 47 19 / 0.8) 100%), url(/wp-content/uploads/cta-bk-02.webp);
        background-position:
            center center,
            center center;
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover; */

        background-image: linear-gradient(90deg, rgb(223 47 19 / 0.6) 0%, rgb(223 47 19 / 1) 30%, rgb(223 47 19 / 1) 100%), url(/wp-content/uploads/cta-bk-01.webp);
        background-position:
            center center,
            left clamp(-7.857rem, 17.6vw - 12.571rem, 0rem) center;
        background-repeat: no-repeat, no-repeat;
        @media (width < 768px ){
        background-size: cover, clamp(32.143rem, 55.97vw + 12.154rem, 42.857rem);
    }
        @media (width >= 768px ){
        background-size:cover, clamp(42.857rem, 46.296vw + 17.46rem, 57.143rem);
    }
        .h2b,
        .h2b * {
            color: var(--wp--preset--color--white);
        }
        p {
            margin: 0;
            text-align: center;
            color: var(--wp--preset--color--white);
        }
    }
}