@charset "UTF-8";

/* HOME ===================================================== */
/* ==========================================================

    body id="home"

    読み込み
    ヘッダーのロゴ＆背景
    メイン：mv
    共通
    イベント：event
    サービス：service
    特長：feature
    ワークフロー：workflow
    会社紹介：company
    お知らせ：news

============================================================ */
/* 読み込み ================================================= */

/* 共通 */
@import url("./common.css");

/* 読み込み ================================================= */
/* ========================================================= */
/* ヘッダーのロゴ＆背景 ====================================== */

#home{

    /* ぼかし背景 */
    &::before{
        opacity: 0;
    }

    /* ロゴ */
    header{

        .header{

            h1{
                opacity: 0;
                transition: 0.3s;
            }

        }

    }

    &.active{

        &::before{
            opacity: 1;
        }

        header{

            .header{

                h1{
                    opacity: 1;
                }

            }

        }

    }

}

/* ヘッダーのロゴ＆背景 ====================================== */
/* ========================================================= */
/* メイン =================================================== */

.mv{
    clear: both;
    display: flow-root;
    overflow: hidden;
    width: 100%;
    height: 100vh;

    .boxArea{
        display: grid;
        gap: 0;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        /* ロゴ ---------------------------------------------- */
        .mvLogo{
            display: grid;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: var(--color-Design-Gray03);

            img{
                width: 220px;
                transition: var(--transition-Base);
            }

        }

        /* CV ------------------------------------------------ */
        .mvCv{
            display: grid;
            align-items: center;
            width: 100%;
            height: 100%;

            .cvDetail{
                width: min(70%, 500px);
                margin: auto;

                /* キャッチコピー */
                .catchcopy{
                    position: relative;
                    font-family: var(--font-family-Serif);
                    font-size: clamp(26px, 2.00669vw + 5.91304px, 32px);   /*  IN：1001px ～ MAX：1300px */
                    font-weight: 700;
                    line-height: 1.2;
                    letter-spacing: var(--letter-spacing-02);
                    color: var(--color-Design-Green);

                    /* アイコン */
                    &::before{
                        position: absolute;
                        content: "●";
                        top: -18px;
                        left: -22px;
                        font-size: 40px;
                        line-height: 1;
                        color: var(--color-Design-Yellow);
                        z-index: -1;
                    }

                }

                .catchcopyEng{
                    font-family: var(--font-family-Serif);
                    font-size: 22px;
                    font-weight: 500;
                    letter-spacing: 0;
                    margin-top: 15px;
                    color: var(--color-Design-Green);
                }

                /* 文章 */
                .mvLead{
                    margin-top: 30px;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.5;
                    letter-spacing: var(--letter-spacing-01);
                    text-align: justify;
                }

                /* CVボタン */
                /* このボタンのcssは、common.cssの「リンク：ボタン」の「.cvBt」に上書きした設定 */
                .cvList{
                    display: grid;
                    grid-template-columns: auto auto;
                    gap: 0 20px;
                    justify-content: flex-start;
                    align-items: center;
                    width: fit-content;
                    margin: 30px 0 0;

                    .cvBt{
                        width: fit-content;

                        a{
                            height: var(--smallBt-height-Pc);
                            font-size: 14px;
                            padding: 0 15px;

                            /* アイコン：資料ダウンロード（資料請求）*/
                            .iconWhitepaper{
                                padding-left: 2em;

                                &::before{
                                    width: 26px;
                                }

                            }

                            /* アイコン：お問い合わせ（まずは相談する）*/
                            .iconContact{
                                padding-left: 2em;

                                &::before{
                                    width: 20px;
                                }

                            }

                        }

                    }

                }

            }

        }

        @container ctnHtml (width <= 1000px){

            /* ロゴ ------------------------------------------ */
            .mvLogo{

                img{
                    width: 160px;
                }

            }

            /* CV -------------------------------------------- */
            .mvCv{

                .cvDetail{
                    width: 70%;

                    /* キャッチコピー */
                    .catchcopy{
                        font-size: 26px;
                        line-height: 1.4;

                        /* アイコン */
                        &::before{
                            top: -12px;
                            left: -18px;
                            font-size: 34px;
                        }

                    }

                    .catchcopyEng{
                        font-size: 16px;
                        margin-top: 10px;
                    }

                    /* 文章 */
                    .mvLead{
                        margin-top: 30px;
                        font-size: 14px;
                        line-height: 1.5;
                    }

                    /* CVボタン */
                    .cvList{
                        display: block;   /* 縦並びにする（gridをキャンセル）*/
                        margin: 25px 0 0;

                        .cvBt{
                            width: 185px;   /* 相談ボタンにあわせる */

                            a{
                                font-size: 14px;
                                height: var(--smallBt-height-Tab);

                                /* 資料請求 */
                                .iconWhitepaper{

                                    &::before{
                                        width: 26px;
                                    }

                                }

                            }

                        }

                        li:nth-of-type(1){
                            margin-bottom: 15px;
                        }

                    }

                }

            }

        }

        @container ctnHtml (width <= 600px){
            display: block;
            height: calc(100dvh - 50px);

            /* ロゴ ------------------------------------------ */
            .mvLogo{
                display: grid;
                gap: 0;
                grid-auto-flow: column;
                grid-template-columns: 1fr;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 50%;

                img{
                    width: 30%;
                    margin: 0 auto;
                }

            }

            /* CV -------------------------------------------- */
            .mvCv{
                width: 100%;
                height: 50%;

                .cvDetail{
                    width: 65%;
                    margin: auto;

                    /* キャッチコピー */
                    .catchcopy{
                        font-size: 26px;
                        line-height: 1.4;

                        /* アイコン */
                        &::before{
                            top: -11px;
                            left: -17px;
                            font-size: 30px;
                        }

                    }

                    .catchcopyEng{
                        font-size: 18px;
                        margin-top: 15px;
                    }

                    /* 文章 */
                    .mvLead{
                        margin-top: 30px;
                        font-size: 12px;
                        line-height: 1.6;
                    }

                    /* CVボタン */
                    .cvList{
                        display: none;
                    }

                }

            }

        }

    }

}

/* メイン =================================================== */
/* ========================================================= */
/* 共通 ===================================================== */

/* メイン以下の「.contents」内の設定 */

.contents{
    padding-top: 0;

    section{

        /* ベース タイトル：白色 ＆ 背景：グレー */
        background-color: var(--color-Design-Gray03);

        .boxArea{
            display: grid !important;
            gap: 0 3.8%;                       /* 縦 横：1300pxで約50pxの比率 */
            grid-template-columns: clamp(300px, 26.75585vw + 28.16054px, 380px) 1fr;  /* 横：MIN 1016px ～ MAX 1315px */
            grid-template-rows: auto 1fr;      /* 縦 */
            justify-content: space-between;    /* 横 */
            align-items: flex-start;           /* 縦 */
            grid-auto-flow: dense;
            padding-top: var(--home-paddingTop-Pc);
            padding-bottom: var(--home-paddingBottom-Pc);

            /* タイトル */
            .stickyArea{
                position: sticky;
                left: 0;
                top: calc(var(--header-height-Pc) + 30px);

                .titleArea{
                    width: 100%;
                    padding: 50px 11% 50px 10%;
                    background-color: #FFF;

                    /* H2 */
                    .h2Area{
                        width: 100%;
                     /* background-image: 各項目で設定; */
                        background-position: bottom right;
                        background-repeat: no-repeat;
                        background-size: auto calc(100% - 15px);
                        border-top-width: 1px;
                        border-top-style: solid;
                        border-top-color: var(--color-Design-Green);

                        h2{
                            position: relative;
                            display: inline-block;
                            font-size: 28px;
                            font-weight: 400;
                            line-height: 1.2;
                            color: var(--color-Design-Green);
                            padding-top: 15px;
                            padding-bottom: 35px;
                            border-top-width: 3px;
                            border-top-style: solid;
                            border-top-color: var(--color-Design-Green);

                            /* 英語 */
                            &::before{
                                position: absolute;
                                content: '';   /* 各項目で設定; */
                                bottom: 0;
                                left: 0;
                                font-size: 14px;
                                font-weight: 400;
                                line-height: 1;
                                letter-spacing: var(--letter-spacing-01);
                                color: var(--color-Design-Green);
                            }

                        }

                    }

                    /* 説明文 */
                    p{
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.5;
                        text-align: justify;
                        margin-top: 50px;

                        sup{
                            top: 0.1em;
                        }

                    }

                }

                /* ボタン */
                .linkBt{
                    margin-top: 50px;
                }

            }

            /* 内容 */
            .detailArea{

                h3{
                    font-weight: 600;
                    color: var(--color-Design-Green);
                }

                /* ボタン */
                .btArea{

                    .linkBt{
                        /* width: fit-content; */
                        margin: 30px auto 0;
                    }

                }

                /* 他は各項目（section）で設定; */

            }

        }

        /* タイトル：緑色 ＆ 背景：白 の場合 */
        &.tlGreen{
            background-color: #FFF;

            .boxArea{

                .stickyArea{

                    /* タイトル */
                    .titleArea{
                        color: #FFF;
                        background-color: var(--color-Design-Green);

                        /* H2 */
                        .h2Area{
                            border-top-color: #FFF;

                            h2{
                                color: #FFF;
                                border-top-color: #FFF;

                                /* 英語 */
                                &::before{
                                    color: #FFF;
                                }

                            }

                        }

                        /* 説明文 */
                        p{
                            color: #FFF;
                        }

                    }

                }

            }

        }

        @container ctnHtml (width <= 1000px){

            .boxArea{
                display: block !important;
                padding-top: var(--home-paddingTop-Tab);
                padding-bottom: var(--home-paddingBottom-Tab);

                /* タイトル */
                .stickyArea{
                    position: unset;

                    .titleArea{
                        width: 60%;
                        padding: 30px 6% 30px 5%;

                        /* H2 */
                        .h2Area{
                            background-size: auto calc(100% - 10px);

                            h2{
                                font-size: 26px;
                                padding-top: 10px;
                                padding-bottom: 30px;

                                /* 英語 */
                                &::before{
                                    font-size: 12px;
                                }

                            }

                        }

                        /* 説明文 */
                        p{
                            font-size: 14px;
                            line-height: 1.5;
                            margin-top: 40px;
                        }

                    }

                }

                /* 内容 */
                .detailArea{
                    margin-top: 50px;

                    /* 他は各項目（section）で設定; */

                }

            }

        }

        @container ctnHtml (width <= 600px){
            /* TOPページのみ両サイドの余白を無くす */
            padding-left: 0 !important;
            padding-right: 0 !important;

            .boxArea{
                padding-top: var(--home-paddingTop-Sp);
                padding-bottom: var(--home-paddingBottom-Sp);

                /* タイトル */
                .stickyArea{

                    .titleArea{
                        width: 75%;
                        padding: 4vh 6% 4vh 5%;

                        /* H2 */
                        .h2Area{
                            background-size: auto calc(100% - 1vh);

                            h2{
                                font-size: 20px;
                                font-weight: 500;
                                padding-top: 1vh;
                                padding-bottom: 3vh;

                                /* 英語 */
                                &::before{
                                    font-size: 12px;
                                }

                            }

                        }

                        /* 説明文 */
                        p{
                            font-size: 13px;
                            line-height: 1.6;
                            margin-top: 4vh;
                        }

                    }

                }

                /* 内容 */
                .detailArea{
                    margin-top: 5vh;

                    /* 他は各項目（section）で設定; */

                }

            }

        }

    }

}

/* 共通 ===================================================== */
/* ========================================================= */
/* イベント ================================================= */

section.event{

    .boxArea{

        .stickyArea{
            position: static;
            margin-top: 30px;   /* .eventList の li の padding-top（アイコン分）と同じだけ下げる */

            /* タイトル */
            .titleArea{

                /* H2 */
                .h2Area{
                    background-image: url(../img/home/icon_h2_event_w.svg);
                    background-size: auto calc(100% - 15px);

                    h2{
                        padding-top: 15px;

                        /* 英語 */
                        &::before{
                            content: "Event";
                        }

                    }

                }

            }

        }

        /* 内容 */
        .detailArea{
            /* Swiperが無限に大きくなっていく（Grid使用によるバグ？）ので、ここだけ強制的に横幅を付ける */
            /* width: clamp(605px, 69.23077vw - 98.38462px, 812px);   /* 横：MIN 1016px ～ MAX 1315px（スクロールバー分15pxを含む） */
            /* → やっぱり、各カードに横幅を付ける */
            clear: both;
            overflow: hidden;
            width: 100%;

            .btArea{
                padding-top: 50px;
            }

        }

    }

    @container ctnHtml (width <= 1000px){

        .boxArea{

            .stickyArea{
                margin-top: 0;   /* アイコン分を戻す */

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 15px);

                        h2{
                            padding-top: 15px;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                width: 100%;
                padding-top: 30px;
            }

        }

    }

    @container ctnHtml (width <= 600px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 1vh);

                        h2{
                            padding-top: 1vh;
                        }

                    }

                }

            }

        }

    }

}

/* イベント ================================================= */
/* ========================================================= */
/* サービス ================================================= */

section.service{

    .boxArea{
        padding-top: 0;   /* ここの上部の余白（padding-top）を0にする（サービスのパララックス表示のため）*/

        /* タイトル */
        .stickyArea{
            top: calc(var(--header-height-Pc) + 30px - var(--home-paddingTop-Pc));   /* 以下のpadding-topだけ引く */
            padding-top: var(--home-paddingTop-Pc);   /* ここの上部の余白に.boxAreaのpadding-topの余白をつける（サービスのパララックス表示のため）*/

            .titleArea{

                /* H2 */
                .h2Area{
                    background-image: url(../img/home/icon_h2_service.svg);
                    background-size: auto calc(100% - 10px);

                    h2{
                        padding-top: 15px;

                        /* 英語 */
                        &::before{
                            content: "Services";
                        }

                    }

                }

            }

        }

        /* 内容 */
        .detailArea{
            padding-top: calc(var(--home-paddingTop-Pc) - var(--header-height-Pc) - 20px);   /* ここの上部の余白に.boxAreaのpadding-topの余白をつける（サービスのパララックス表示のため）*/

            /* 文章 */
            p{

                /* リード文 */
                &.serviceCopy{
                    position: sticky;
                    left: 0;
                    top: 0;
                    font-size: 18px;
                    font-weight: 500;
                    color: var(--color-Design-Green);
                    text-align: center;
                    padding-top: calc(var(--header-height-Pc) + 20px);
                    background-color: var(--color-Design-Gray03);
                    z-index: 20;
                }

            }

            /* サークル */
            .serviceCircle{
                position: sticky;
                left: 0;
                top: calc(var(--header-height-Pc) + 25px);
                width: 100%;
                padding-top: 65px;
                padding-bottom: 10px;
             /* backdrop-filter: blur(4px); */
                background-color: var(--color-Design-Gray03);
                /*
                mask: linear-gradient(to bottom, rgb(0, 0, 0, 1) 95%, rgb(0, 0, 0, 0) 100%);
                mask-composite: intersect;
                */
                z-index: 15;

                ul{
                    display: grid;
                    gap: 0;
                    grid-template-columns: 1fr 1fr 1fr;
                    justify-content: space-between;
                    align-items: center;
                    width: 520px;   /* 600px min(100%, 700px) */
                    margin: 0 auto;

                    li{
                        display: grid;
                        grid-template-columns: 1fr;
                        gap: 0;
                        justify-content: center;
                        align-items: center;
                        z-index: -3;

                        .circle{
                            position: relative;
                            display: grid;
                            justify-content: center;
                            align-items: center;
                            width: 90%;
                            aspect-ratio: 1/1;
                            font-size: 22px;   /* 28px */
                            font-weight: 800;
                            line-height: 1;
                            color: var(--color-Design-Green);
                            text-align: center;
                            margin: 0 auto;
                            background-color: #FFF;
                            border-radius: 999px;
                            transition: var(--transition-BtLink);
                            z-index: -2;

                            /* 矢印 */
                            &::before{
                                position: absolute;
                                content: "";
                                top: 0;
                                left: 0;
                                width: 100%;
                                aspect-ratio: 1/1;
                                background-image: url(../img/common/icon_circle.svg);
                                background-position: center center;
                                background-repeat: no-repeat;
                                background-size: contain;
                             /* filter: var(--color-Design-Gray02-Filter); */
                             /* transform: translateX(-50%) translateY(-50%); */
                                transition: 0.6s;
                                opacity: 0;
                                z-index: -1;
                            }

                        }

                        /* 組織学習/人材育成、文化・ブランドの醸成 */
                        &.serviceWtp{
                            order: 1;

                            &.open{
                                /* transform: scale(1.1); */

                                .circle{

                                    /* 矢印 */
                                    &::before{
                                        animation: rotation 20s linear infinite;
                                     /* filter: var(--color-Design-Yellow-Filter); */
                                        opacity: 1;
                                    }

                                }

                            }

                        }

                        /* CX実践とマネジメントシステムの実装支援 */
                        &.serviceRmSpi{
                            order: 2;

                            &.open{

                                .circle{

                                    /* 矢印 */
                                    &::before{
                                        animation: rotation 20s linear infinite;
                                     /* filter: var(--color-Design-Yellow-Filter); */
                                        opacity: 1;
                                    }

                                }

                            }

                        }

                        /* 経営と現場を結ぶマーケティング支援 */
                        &.serviceMssEal{
                            order: 3;

                            &.open{

                                .circle{

                                    /* 矢印 */
                                    &::before{
                                        animation: rotation 20s linear infinite;
                                     /* filter: var(--color-Design-Yellow-Filter); */
                                        opacity: 1;
                                    }

                                }

                            }

                        }

                    }

                }

            }

            /* タイトル */
            .serviceTitle{
                position: sticky;
                left: 0;
                top: calc(100px + 50px + 150px);
                width: 100%;
                padding: 40px 0 10px;
                background-color: var(--color-Design-Gray03);
                z-index: 12;

                h3{
                    /* position: sticky;
                    left: 0;
                    top: calc(100px + 55px + 150px); */
                    position: relative;
                    width: fit-content;
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 1.6;
                    text-align: center;
                    text-decoration: none;
                    margin-left: auto;
                    margin-right: auto;

                    &::after{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        content: "";
                        width: 100%;
                        height: 10px;
                        background-color: rgba(var(--color-Design-Yellow-RGB),0.7);
                        transform: scaleX(0);
                        transform-origin: bottom center;   /* 中央から延びる（左から延びる：bottom left）*/
                        transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
                        z-index: -1;
                    }

                    &.open{

                        &::after{
                            transform: scaleX(1.0);   /* 両サイドを少し開ける */
                        }

                    }

                }

            }

            /* 共通 */
            .serviceDetail{
                display: grid;
                gap: 0 40px;
                grid-template-columns: 1.3fr 1fr;
                justify-content: space-between;
                align-items: flex-start;
                padding-top: 150px;
                padding-left: 20px;
                padding-right: 20px;

                & + .serviceDetail{
                    padding-top: 100px;
                }

                .sdImg{
                    order: 2;
                    width: 100%;
                    height: 100%;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }

                }

                .sdTitle{
                    order: 1;

                    h4{
                        position: relative;
                        font-size: clamp(22px, 2.00669vw + 1.61204px, 28px);   /* MIN 1016px ～ MAX 1315px */
                        font-weight: 600;
                        line-height: 1.2;
                        color: var(--color-Design-Green);
                        padding: 30px 0 20px 20px;
                        border-left: 10px solid var(--color-Design-Green);

                        &::before{
                            position: absolute;
                            content: "";
                            top: 0;
                            left: 0;
                            width: 150px;
                            height: 1px;
                            border-top: 1px solid var(--color-Design-Green);
                        }

                    }

                    p{
                        text-align: justify;
                        margin-top: 30px;
                    }

                }

            }

            /* 組織学習/人材育成、文化・ブランドの醸成 */
            .detailWtp{
                padding-top: 100px;   /* ここを0にすると、サークルに内容がすぐに接地し、サークルの回転とぼかしがすぐに始まってしまう */
            }

            /* CX実践とマネジメントシステムの実装支援 */
            .detailRmSpi{
                padding-top: 200px;
            }

            /* 経営と現場を結ぶマーケティング支援 */
            .detailMssEal{
                padding-top: 200px;
                padding-bottom: 50px;
            }

        }

    }

    @container ctnHtml (width <= 1000px){

        .boxArea{
            padding-top: var(--home-paddingTop-Tab);   /* タイトルが上部になりstickyしなくなるためpadding-topをつける */

            /* タイトル */
            .stickyArea{
                padding-top: 0;   /* .boxAreaにpadding-topをつけたので0にする */

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 10px);

                        h2{
                            padding-top: 15px;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                width: 100%;
                margin-top: 0;
                padding-left: var(--contents-Sidemargin-Tab);
                padding-right: var(--contents-Sidemargin-Tab);

                /* 文章 */
                p{

                    /* リード文 */
                    &.serviceCopy{
                        top: 0;
                        font-size: 18px;
                        line-height: 1.6;
                        padding-top: var(--header-height-Tab);
                    }

                }

                /* サークル */
                .serviceCircle{
                    top: var(--header-height-Tab);
                    padding-top: 70px;
                    padding-bottom: 20px;

                    ul{
                        width: clamp(520px, 19.32367vw + 403.86473px, 600px);   /* 横：MIN 601px ～ MAX 1015px */

                        li{

                            .circle{
                                font-size: clamp(22px, 1.44928vw + 13.28986px, 28px);   /* 横：MIN 601px ～ MAX 1015px */
                                /* font-weight: 500; */
                            }

                        }

                    }

                }

                /* タイトル */
                .serviceTitle{
                    top: calc(var(--header-height-Tab) + 50px + clamp(185px, 3.62319vw + 163.22464px, 200px));   /* 横：MIN 601px ～ MAX 1015px */
                    padding: clamp(10px, 2.41546vw - 4.51691px, 20px) 20px 10px;   /* 横：MIN 601px ～ MAX 1015px */

                    h3{
                        font-size: 22px;
                        line-height: 1.6;

                        &.open{

                            &::after{
                                transform: scaleX(1);
                            }

                        }

                    }

                }

                /* 共通 */
                .serviceDetail{
                    gap: 0 30px;
                    padding-top: 120px;
                    padding-left: 0;
                    padding-right: 0;

                    & + .serviceDetail{
                        padding-top: 100px;
                    }

                    .sdTitle{

                        h4{
                            font-size: clamp(20px, 1.50376vw + 10.73684px, 26px);   /* MIN：616px ～ MAX：1,015px */
                            padding: 20px 0 15px 15px;
                            border-left-width: 6px;

                            &::before{
                                width: 120px;
                            }

                        }

                        p{
                            margin-top: 20px;
                        }

                    }

                }

                /* 組織学習/人材育成、文化・ブランドの醸成 */
                .detailWtp{
                    padding-top: 100px;
                    padding-left: clamp(0px, 24.15459vw - 145.16908px, 100px);   /* 横：MIN 601px ～ MAX 1015px */
                    padding-right: clamp(0px, 24.15459vw - 145.16908px, 100px);   /* 横：MIN 601px ～ MAX 1015px */
                }

                /* CX実践とマネジメントシステムの実装支援 */
                .detailRmSpi{
                    padding-top: 200px;
                    padding-left: clamp(0px, 24.15459vw - 145.16908px, 100px);   /* 横：MIN 601px ～ MAX 1015px */
                    padding-right: clamp(0px, 24.15459vw - 145.16908px, 100px);   /* 横：MIN 601px ～ MAX 1015px */
                }

                /* 経営と現場を結ぶマーケティング支援 */
                .detailMssEal{
                    padding-top: 200px;
                    padding-left: clamp(0px, 24.15459vw - 145.16908px, 100px);   /* 横：MIN 601px ～ MAX 1015px */
                    padding-right: clamp(0px, 24.15459vw - 145.16908px, 100px);   /* 横：MIN 601px ～ MAX 1015px */
                    padding-bottom: 50px;
                }

                /* ボタン */
                .btArea{
                    clear: both;
                    padding-top: 50px;
                }

            }

        }

    }

    @container ctnHtml (width <= 600px){

        .boxArea{
            padding-top: var(--home-paddingTop-Sp);

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 1vh);

                        h2{
                            padding-top: 1vh;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                width: 100%;
                padding-left: 0;
                padding-right: 0;

                /* 文章 */
                p{

                    /* リード文 */
                    &.serviceCopy{
                        top: 0;
                        font-size: 14px;
                        line-height: 1.6;
                        padding-top: var(--header-height-Sp);
                    }

                }

                /* サークル */
                .serviceCircle{
                    top: var(--header-height-Sp);
                    padding-top: calc(140px - var(--header-height-Sp));
                    padding-bottom: 10px;

                    ul{
                        width: 90%;

                        li{

                            .circle{
                                width: 94%;
                                font-size: 16px;
                            }

                        }

                    }

                }

                /* タイトル */
                .serviceTitle{
                    top: calc(var(--header-height-Sp) + 190px);
                    margin: 0 auto;
                    padding: 20px 0 20px;

                    h3{
                        font-size: 20px;
                        line-height: 1.3;

                        &::after{
                            bottom: 0;
                            height: 10px;
                        }

                        &.open{

                            &::after{
                                transform: scaleX(1.03);
                            }

                        }

                    }

                }

                /* 共通 */
                .serviceDetail{
                    gap: 0;
                    grid-template-columns: 1fr;
                    flex-wrap: wrap;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    width: 100%;
                    padding-top: 10vh;
                    padding-left: 1px;
                    padding-right: 1px;

                    & + .serviceDetail{
                        padding-top: 10vh;
                    }

                    .sdImg{
                        order: 1;
                        height: auto;

                        img{
                            height: auto;
                        }

                    }

                    .sdTitle{
                        order: 2;

                        h4{
                            font-size: 18px;
                            margin-top: 3vh;
                            padding: 3vh 0 2vh 20px;
                            border-left: 8px solid var(--color-Design-Green);

                            &::before{
                                width: 120px;
                            }

                        }

                        p{
                            margin-top: 2vh;
                        }

                    }

                }

                /* 組織学習/人材育成、文化・ブランドの醸成 */
                .detailWtp{
                    padding-top: 10vh;   /* ここを0にすると、サークルに内容がすぐに接地し、サークルの回転とぼかしがすぐに始まってしまう */
                    padding-left: var(--contents-Sidemargin-Sp);
                    padding-right: var(--contents-Sidemargin-Sp);
                }

                /* CX実践とマネジメントシステムの実装支援 */
                .detailRmSpi{
                    padding-top: 15vh;
                    padding-left: var(--contents-Sidemargin-Sp);
                    padding-right: var(--contents-Sidemargin-Sp);
                }

                /* 経営と現場を結ぶマーケティング支援 */
                .detailMssEal{
                    padding-top: 15vh;
                    padding-left: var(--contents-Sidemargin-Sp);
                    padding-right: var(--contents-Sidemargin-Sp);
                }

            }

        }

    }

}

/* サービス ================================================= */
/* ========================================================= */
/* 特長 ==================================================== */

section.feature{

    .boxArea{

        .stickyArea{

            /* タイトル */
            .titleArea{

                /* H2 */
                .h2Area{
                    background-image: url(../img/home/icon_h2_feature_w.svg);
                    background-size: auto calc(100% - 0px);

                    h2{
                        padding-top: 15px;

                        /* 英語 */
                        &::before{
                            content: "Features";
                        }

                    }

                }

            }

        }

        /* 内容 */
        .detailArea{

            & > p{
                font-size: 26px;
                font-weight: 500;
                text-align: center;
                color: var(--color-Design-Green);
            }

            /* リスト */
            .featureList{
                position: relative;
                display: grid;
                gap: 0 clamp(20px, 10.03344vw - 81.9398px, 50px);   /* 横：MIN 1016px ～ MAX 1315px */
                grid-template-columns: repeat(3, 1fr);
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: 40px;

                li{
                    position: relative;
                    overflow: hidden;
                    font-size: clamp(20px, 2.00669vw - 0.38796px, 26px);   /* 横：MIN 1016px ～ MAX 1315px */
                    font-weight: 500;
                    line-height: 1.4;
                    color: var(--color-Design-Green);
                    text-align: center;
                    padding-bottom: 150px;
                    background-position: bottom 25px center;
                    background-repeat: no-repeat;
                    background-size: 100px;
                    border: 1px solid var(--color-Design-Green);
                    border-top: 7px solid var(--color-Design-Green);
                    z-index: 10;

                    /* 半径丸 */
                    &::after{
                        position: absolute;
                        content: "";
                        top: -100px;
                        left: 50%;
                        width: clamp(140px, 3.34448vw + 106.02007px, 150px);   /* 横：MIN 1016px ～ MAX 1315px */
                        aspect-ratio: 1/1;
                        background-color: var(--color-Design-Green);
                        border-radius: 50%;
                        transform: translateX(-50%);
                        z-index: -1;
                    }

                    .featureNo{
                        display: block;
                        font-family: var(--font-family-Serif);
                        font-size: clamp(34px, 2.67559vw + 6.81605px, 42px);   /* 横：MIN 1016px ～ MAX 1315px */
                        font-style: italic;
                        font-weight: 300;
                        line-height: 1;
                        color: #FFF;
                        text-align: center;
                        margin-bottom: clamp(26px, 3.01003vw - 4.58194px, 35px);   /* 横：MIN 1016px ～ MAX 1315px */
                        margin-right: 5px;
                    }

                    &.knowledge{
                        background-image: url(../img/common/cx3.svg);
                        background-position: bottom 40px center;
                        background-size: 140px;
                    }

                    &.neutrality{
                        background-image: url(../img/feature/feature2_icon.svg);
                    }

                    &.concate{
                        background-image: url(../img/feature/feature3_icon.svg);
                    }

                }

            }

            /* 実績 */
            .featureAchievement{
                text-align: center;

                h3{
                    font-size: 22px;
                    color: var(--color-Design-Txt);
                    margin-top: 50px;
                }

                .featureTotal{
                    font-size: 40px;
                    line-height: 1;
                    margin-top: 10px;

                    .featureTotalNumber{
                        font-size: clamp(140px, 6.68896vw + 72.04013px, 160px);   /* 横：MIN 1016px ～ MAX 1315px */
                        font-weight: 500;
                        color: var(--color-Design-Green);
                        margin-right: 10px;
                    }

                }

            }

            /* ボタン */
            .btArea{
                margin-top: 70px;
            }

        }

    }

    @container ctnHtml (width <= 1000px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 0px);

                        h2{
                            padding-top: 15px;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{

                & > p{
                    font-size: 24px;
                }

                /* リスト */
                .featureList{
                    gap: 0 clamp(20px, 7.5188vw - 26.31579px, 50px);   /* 横：MIN 616px ～ MAX 1015px */

                    li{
                        font-size: clamp(20px, 1.50376vw + 10.73684px, 26px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                }

            }

        }

    }

    @container ctnHtml (width <= 600px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 0px);

                        h2{
                            padding-top: 1.3vh;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                padding-left: var(--contents-Sidemargin-Sp);
                padding-right: var(--contents-Sidemargin-Sp);

                & > p{
                    font-size: 18px;
                }

                /* リスト */
                .featureList{
                    display: grid;
                    gap: 0 10px;
                    grid-template-columns: repeat(3, 1fr);
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    margin-top: 3vh;

                    li{
                        font-size: 16px;
                        padding-bottom: 100px;
                        background-position: bottom 15px center;
                        background-size: 70px;
                        border-top-width: 5px;

                        /* 半径丸 */
                        &::after{
                            top: -50px;
                            width: 80px;
                        }

                        .featureNo{
                            font-size: 24px;
                            margin-bottom: 25px;
                            margin-right: 4px;
                        }

                        &.knowledge{
                            background-position: bottom 30px center;
                            background-size: 90px;
                        }

                    }

                }

                /* 実績 */
                .featureAchievement{

                    h3{
                        font-size: 18px;
                        margin-top: 5vh;
                    }

                    .featureTotal{
                        font-size: 24px;
                        font-weight: 500;
                        margin-top: 10px;

                        .featureTotalNumber{
                            font-size: 90px;
                            font-weight: 500;
                            margin-right: 5px;
                        }

                    }

                }

                /* ボタン */
                .btArea{
                    margin-top: 10vh;
                }

            }

        }

    }

}

/* 特長 ==================================================== */
/* ========================================================= */
/* ワークフロー ============================================= */

section.workflow{

    .boxArea{

        .stickyArea{

            /* タイトル */
            .titleArea{

                /* H2 */
                .h2Area{
                    background-image: url(../img/home/icon_h2_workflow.svg);
                    background-size: auto calc(100% - 15px);

                    h2{
                        padding-top: 15px;

                        /* 英語 */
                        &::before{
                            content: "Workflow";
                        }

                    }

                }

            }

        }

        /* 内容 */
        .detailArea{

            & > p{
                font-size: 22px;
                text-align: center;
            }

            ol{
                width: fit-content;
                margin: 70px auto 0;
                padding-left: 45px;   /* 円の半径 */

                & > li{
                    position: relative;
                    counter-increment: flowCounter;
                    padding: 22px 0 40px 80px;
                    border-left: 2px dotted var(--color-Design-Green);

                    &:last-child{
                        padding-bottom: 0;
                        border-left: none;
                    }

                    /* STEP */
                    &::before{
                        position: absolute;
                        display: inline-block;
                        content: "STEP";
                        top: -8px;
                        left: -46px;
                        font-size: 16px;
                        font-weight: 400;
                        color: var(--color-Design-Green);
                        z-index: 10;
                    }

                    /* 番号 */
                    &::after{
                        position: absolute;
                        top: -15px;
                        left: -45px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        content: counter(flowCounter, decimal-leading-zero);
                        font-family: var(--font-family-Serif);
                        font-size: 48px;
                        font-weight: 200;
                        line-height: 1;
                        font-style: italic;
                        color: #FFF;
                        width: 90px;
                        aspect-ratio: 1/1;
                        padding: 12px 0 0 10px;
                        background-color: var(--color-Design-Yellow);
                        border-radius: 50%;
                    }

                    h3{
                        font-size: 28px;
                        font-weight: 500;
                    }

                    ul{
                        margin: 20px 0 0 40px;
                    }

                }

            }

        }

    }

    @container ctnHtml (width <= 1000px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 10px);

                        h2{
                            padding-top: 10px;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{

                & > p{
                    font-size: 20px;
                }

                ol{
                    margin-top: 50px;
                    padding-left: 40px;   /* 円の半径 */

                    & > li{
                        padding: 16px 0 40px 60px;

                        /* STEP */
                        &::before{
                            top: -8px;
                            left: -41px;
                            font-size: 16px;
                        }

                        /* 番号 */
                        &::after{
                            top: -15px;
                            left: -40px;
                            font-size: 42px;
                            width: 80px;
                            padding: 12px 0 0 10px;
                        }

                        h3{
                            font-size: 26px;
                        }

                        ul{
                            margin: 20px 0 0 40px;
                        }

                    }

                }

            }

        }

    }

    @container ctnHtml (width <= 600px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 1vh);

                        h2{
                            padding-top: 1vh;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{

                & > p{
                    font-size: 16px;
                }

                ol{
                    width: fit-content;
                    margin: 5vh auto 0;
                    padding-left: 28px;   /* 円の半径 */

                    & > li{
                        padding: 8px 0 4vh 38px;

                        /* STEP */
                        &::before{
                            top: -12px;
                            left: -30px;
                            font-size: 12px;
                        }

                        /* 番号 */
                        &::after{
                            top: -15px;
                            left: -28px;   /* 円の半径 */
                            font-size: 30px;
                            width: 56px;
                            padding: 9px 0 0 6px;
                        }

                        h3{
                            font-size: 18px;
                        }

                        ul{
                            margin: 15px 0 0 25px;
                        }

                    }

                }

            }

        }

    }

}

/* ワークフロー ============================================= */
/* ========================================================= */
/* 会社紹介 ================================================= */

section.company{

    .boxArea{

        .stickyArea{

            /* タイトル */
            .titleArea{

                /* H2 */
                .h2Area{
                    background-image: url(../img/home/icon_h2_company_w.svg);
                    background-size: auto calc(100% - 20px);

                    h2{
                        padding-top: 15px;

                        /* 英語 */
                        &::before{
                            content: "Company";
                        }

                    }

                }

            }

        }

        /* 内容 */
        .detailArea{
            padding-left: 20px;
            padding-right: 20px;

            .companyBtList{
                font-size: clamp(22px, 1.33779vw + 8.40803px, 26px);  /* 横：MIN 1016px ～ MAX 1315px */
            }

        }

    }

    @container ctnHtml (width <= 1000px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 20px);

                        h2{
                            padding-top: 15px;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                padding-left: 0;
                padding-right: 0;

                .companyBtList{
                    width: min(100%, var(--width-S));
                }

            }

        }

    }

    @container ctnHtml (width <= 600px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 2vh);

                        h2{
                            padding-top: 1.5vh;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                padding-left: var(--contents-Sidemargin-Sp);
                padding-right: var(--contents-Sidemargin-Sp);
            }

        }

    }

}

/* 会社紹介 ================================================= */
/* ========================================================= */
/* お知らせ ================================================= */

section.news{

    .boxArea{

        .stickyArea{

            /* タイトル */
            .titleArea{

                /* H2 */
                .h2Area{
                    background-image: url(../img/home/icon_h2_news.svg);
                    background-size: auto calc(100% - 10px);

                    h2{
                        padding-top: 15px;

                        /* 英語 */
                        &::before{
                            content: "News";
                        }

                    }

                }

            }

        }

        /* 内容 */
        .detailArea{

            /* ボタン */
            .btArea{
                margin-top: 100px;
            }

        }

    }

    @container ctnHtml (width <= 1000px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 10px);

                        h2{
                            padding-top: 10px;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{

                /* ボタン */
                .btArea{
                    margin-top: 80px;
                }

            }

        }

    }

    @container ctnHtml (width <= 600px){

        .boxArea{

            .stickyArea{

                /* タイトル */
                .titleArea{

                    /* H2 */
                    .h2Area{
                        background-size: auto calc(100% - 1vh);

                        h2{
                            padding-top: 1.4vh;
                        }

                    }

                }

            }

            /* 内容 */
            .detailArea{
                padding-left: var(--contents-Sidemargin-Sp);
                padding-right: var(--contents-Sidemargin-Sp);

                /* ボタン */
                .btArea{
                    margin-top: 8vh;
                }

            }

        }

    }

}

/* お知らせ ================================================= */
/* ========================================================= */