@charset "UTF-8";
/*
 * LP第一階層（MV領域）のヒーローセクション用スタイル
 *
 * 画面いっぱいのインパクトを持たせるためのレイアウトや、テキストのアニメーション対応CSSを含みます。
 *
 * @package crmt-block-base
 * Last modified: 2026-04-03_11-07-10
 *
 * ブレイクポイント規約
 * Tablet : @media (width <= 768px) { ... }
 * Mobile : @media (width <= 540px) { ... }
*/

#khd-b2b {

    /* ===================================================
   1. カルーセル外枠（変形・配置を自由に行う領域）
=================================================== */
    .hero-1 {
        display: grid;
        position: relative;
        overflow: hidden;
        gap: 0;
        grid-template-columns:
            [full-start] minmax(clamp(16px, 12.8vw - 48px, 80px), 1fr)
            [content-start] min(50%, calc((1360px / 2) - 170px))
            [content-mid] min(50%, calc((1360px / 2) + 170px))
            [content-end] minmax(clamp(16px, 12.8vw - 48px, 80px), 1fr)
            [full-end];
        grid-template-rows:
            [row-top] clamp(500px, 44vw + 280px, 720px)
            [row-mid] auto
            [row-bottom] auto
            [row-end];

        @media (width <= 768px) {
            grid-template-columns:
                [full-start] minmax(16px, 1fr)
                [content-mid] auto
                [content-end] minmax(16px, 1fr)
                [full-end];
            grid-template-rows:
                [row-top] calc(100vw * (280 / 375))
                [row-mid] auto
                [row-bottom] auto
                [row-end];
        }

        .--text {
            grid-column: full-start / content-mid;
            grid-row: row-top;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            gap: 40px;
            padding-inline: 5.2lvw 0;
            position: relative;
            
            @media (768px < width <900px) {
                min-width:480px;
            }
            @media (width <=768px) {
                grid-column: content-mid;
                align-items: center;
                padding-inline: 0;
                width: 100%;
            }

            h1 {
                color: var(--wp--preset--color--text-titleimportant);
                margin: 0;
                @media (width <=768px) {
                    padding-block: 0 5.4lvw;
                    text-align: center;
                    color: var(--wp--preset--color--white);
                    text-shadow: 0 0 50px rgb(0 0 0 / 0.4),0 0 30px rgb(0 0 0 / 0.3);
                }
            }

            strong {
                color: var(--wp--preset--color--main);
                @media (width <=768px) {
                    color: var(--wp--preset--color--white);
                }
            }
        }
    }

    .kv-images {
        position: absolute;
        width: 100%;
        z-index: -1;
        overflow: hidden;

        @media (width <= 768px) {
            aspect-ratio: 375 / 280;
        }
        @media (width > 768px) {
            /* ※ブレイクポイント規約に合わせる */
            min-width: 600px;
            height: 100%;
            grid-column: content-start / full-end;
            grid-row: row-top;
            top: 0;
            right: 0;
            left: auto;
            width:calc(100% - 27.3lvw);
            border-bottom-left-radius: clamp(0px, 8.696vw - 46.957px, 40px);
        }
        @media (width > 1440px) {
            width: calc(100lvw - 5.2lvw - 423px);
        }
    }

    /* ===================================================
   2. スライド本体（JSで操作するための不変スタイル）
=================================================== */
    .kv-images .kv-slide {
        position: absolute;
        /* ↓ 余白を絶対に出さないための安全マージン（親より少し大きくする） */
        top: -2%;
        left: -2%;
        width: 104%;
        height: 104%;

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        /* ズームの中央座標 */
        transform-origin: center center;

        /* アニメーションのパフォーマンス最適化 */
        will-change: transform, opacity;
        pointer-events: none;
        /* スマホタップの邪魔にならないように */
    }

    .badges-1 {
        @media (width <=768px) {
            position: absolute;
            bottom: calc(clamp(8.143rem, 10.2vw + 4.5rem, 11.786rem) / -2);
        }
    }
    /* ===================================================
   3. 月桂冠
=================================================== */

    .achievements {
        grid-column: full-start / full-end;
        grid-row: row-mid;
        width: 100lvw;
        padding: clamp(5.143rem, 1.6vw + 4.571rem, 5.714rem) 16px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;

        .--innr {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(0.286rem, 2vw - 0.429rem, 1rem);
        }
        .--caption {
            margin: 0;
            color: var(--wp--preset--color--text-metacaption);
            font-size: clamp(0.714rem, 0.4vw + 0.571rem, 0.857rem);
        }
    }
    /* ===================================================
       4. cta赤ボックス
    =================================================== */
    .cta-box-1-wrapper {
        grid-column: full-start / full-end;
        grid-row: row-bottom;
        width: 100%;
        transition: 0.1s;

        .cta-box-1 {
            transition: 0.1s;
        }

        @media (width <=768px) {
            padding: 0 20px;
        }
        @media (768px < width < 1024px) {
            width: 100lvw;
            padding-inline: 0px 24px;
            position: absolute;
            top: calc(100lvw * ( -398 / 940));
            left: 0px;
            z-index: 5;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;

            .cta-box-1 {
                transform: scale(90%);
                transform-origin: right bottom;
            }
        }
        @media (width >= 1024px) {
            width: 100lvw;
            padding-inline: 0px 24px;
            position: absolute;
            top: -418px;
            left: 0px;
            z-index: 5;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
}