@charset "UTF-8";

/* サービス ================================================== */
/* ========================================================= */
/* 読み込み ================================================= */

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

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

/* body id="service" */
#service{

/* ID ====================================================== */
/* ========================================================= */
/* 項目 =====================================================

    TOP
        メインイメージ
        サービス一覧
    中面共通
        メインイメージ
        悩み
        アプローチ
        特長
        プロセス
    各中面専用
        ワークショップ・人材開発
        調査・可視化支援
        戦略策定・施策実行支援
        啓蒙・業界支援
        マーケティング・営業支援

============================================================ */
/* ========================================================= */
/* TOP ===================================================== */

    &.parentPage{

        .contents{
            padding-top: 0;

            /* メインイメージ ------------------------------- */
            .mainImg{
                display: grid;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                height: var(--mainImg-height-Pc);
                padding-top: 70px;
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/main_img.jpg);
                background-position-x: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 1920px;

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

                    p{
                        width: var(--mainImg-width-Pc);
                        color: #FFF;
                        letter-spacing: var(--letter-spacing-01);
                        text-align: center;
                        margin: 50px auto 0;
                    }

                }

                @container ctnHtml (width <= 1000px){
                    height: var(--mainImg-height-Tab);
                    padding-top: 70px;
                    background-size: 1920px;

                    .boxArea{

                        p{
                            width: var(--mainImg-width-Tab);
                            margin-top: 30px;
                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    height: var(--mainImg-height-Sp);
                    padding-top: 0;   /* 4vh */
                    background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/main_img_sp.jpg);
                    background-size: 100%;

                    .boxArea{
                        display: grid;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;

                        p{
                            width: var(--mainImg-width-Sp);
                            text-align: justify;
                            margin: 0 auto;
                        }

                    }

                }

            }

            /* サービス一覧 --------------------------------- */
            .serviceList{

                .boxArea{
                    width: min(100%, var(--width-M));

                    /* 文章 */
                    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;
                        background-color: var(--color-Design-Gray03);
                        z-index: 15;

                        ul{
                            display: grid;
                            gap: 0;
                            grid-template-columns: 1fr 1fr 1fr;
                            justify-content: space-between;
                            align-items: center;
                            width: 520px;
                            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;
                                        transition: 0.6s;
                                        opacity: 0;
                                        z-index: -1;
                                    }

                                }

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

                                    &.open{

                                        .circle{

                                            /* 矢印 */
                                            &::before{
                                                animation: rotation 20s linear infinite;
                                                opacity: 1;
                                            }

                                        }

                                    }

                                }

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

                                    &.open{

                                        .circle{

                                            /* 矢印 */
                                            &::before{
                                                animation: rotation 20s linear infinite;
                                                opacity: 1;
                                            }

                                        }

                                    }

                                }

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

                                    &.open{

                                        .circle{

                                            /* 矢印 */
                                            &::before{
                                                animation: rotation 20s linear infinite;
                                                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: relative;
                            width: fit-content;
                            font-size: 24px;
                            font-weight: 500;
                            line-height: 1.6;
                            color: var(--color-Design-Green);
                            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){

                        /* 文章 */
                        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){

                        /* 文章 */
                        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: 100%;

                                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: 0;
                            padding-right: 0;
                        }

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

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

                    }

                }

            }

        }

    }

/* TOP ===================================================== */
/* ========================================================= */
/* 中面共通 ================================================= */

    .contents{
        padding-top: 0;

        /* メインイメージ ----------------------------------- */
        .mainImg{
            display: grid;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            height: var(--mainImg-height-Pc);
            padding-top: 70px;
            background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/main_img.jpg);
            background-position-x: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 1920px;

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

                .serviceCategory{
                    position: relative;
                    width: fit-content;
                    height: 35px;
                    font-weight: 500;
                    color: #FFF;
                    text-align: center;
                    margin: 0 auto;
                    padding: 3px 15px;
                    background-color: var(--color-Design-Green);

                    /* 左三角 */
                    &::before{
                        position: absolute;
                        display: block;
                        content: "";
                        top: 0;
                        left: -20px;
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: 35px 20px 0 0;
                        border-color: transparent var(--color-Design-Green) transparent transparent;
                    }

                    /* 右三角 */
                    &::after{
                        position: absolute;
                        display: block;
                        content: "";
                        top: 0;
                        right: -20px;
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: 35px 20px 0 0;
                        border-color: var(--color-Design-Green) transparent transparent transparent;
                    }

                }

                .serviceCategorycom{
                    width: var(--mainImg-width-Pc);
                    color: #FFF;
                    letter-spacing: var(--letter-spacing-01);
                    text-align: justify;
                    margin: 30px auto 0;
                }

            }

            @container ctnHtml (width <= 1000px){
                height: var(--mainImg-height-Tab);
                padding-top: 70px;
                background-size: 1920px;

                .boxArea{

                    .serviceCategory{
                        padding: 4px 10px 0;
                    }

                    .serviceCategorycom{
                        width: var(--mainImg-width-Tab);
                        margin-top: 30px;
                    }

                }

            }

            @container ctnHtml (width <= 600px){
                height: var(--mainImg-height-Sp);
                padding-top: 4vh;
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/main_img_sp.jpg);
                background-size: 100%;

                .boxArea{

                    .serviceCategory{
                        padding: 6px 5px 0;

                        /* 左三角 */
                        &::before{
                            top: -0.1px;
                            left: -19.5px;
                            border-width: 35.4px 20px 0 0;
                        }

                        /* 右三角 */
                        &::after{
                            right: -19.5px;
                            border-width: 35.4px 20px 0 0;
                        }

                    }

                    .serviceCategorycom{
                        width: var(--mainImg-width-Sp);
                        text-align: justify;
                        margin: 2vh auto 0;
                    }

                }

            }

        }

        /* ベースのレイアウト1 ------------------------------- */
        .serviceBase1{

            .boxArea{
                width: min(100%, var(--width-Base));
                text-align: justify;

                .serviceBase1Com{
                    display: grid;
                    gap: 0 40px;
                    grid-template-columns: 230px 1fr;
                    justify-content: center;
                    align-items: center;

                    img{
                        width: 100%;
                        aspect-ratio: 3/2;
                        object-fit: contain;
                        object-position: center;
                    }

                }

            }

            @container ctnHtml (width <= 1000px){

                .boxArea{

                    .serviceBase1Com{
                        gap: 0 30px;
                        grid-template-columns: 200px 1fr;
                    }

                }

            }

            @container ctnHtml (width <= 600px){

                .boxArea{

                    .serviceBase1Com{
                        gap: 2vh 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: 1fr auto;
                        grid-auto-flow: column;

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

                    }

                }

            }

        }

        /* 悩み --------------------------------------------- */
        .problem{

            .boxArea{
                width: min(100%, var(--width-M));
                text-align: justify;

                /* チェックリスト */
                .listCheckArea{
                    position: relative;
                    width: 100%;
                    margin-bottom: calc(40px + 15px + 80px);
                    padding: 40px 60px calc(40px + 15px) 50px;
                    background-color: var(--color-Design-Green02);
                    background-image: url(../img/service/problem_img.png);
                    background-position: center right 40px;
                    background-repeat: no-repeat;
                    background-size: 20%;

                    /* 三角 */
                    &::after{
                        position: absolute;
                        content: "";
                        bottom: calc((80px + 20px) * -1);
                        left: 50%;
                        width: 80px;
                        aspect-ratio: 1/1;
                        background-image: url(../img/common/icon_triangle.svg);
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        transform: translateX(-50%);
                        filter: var(--color-Design-Yellow-Filter);
                    }

                    /* チェック */
                    .listCheck{
                        width: 660px;

                        li{
                            position: relative;
                            width: 100%;
                            margin-top: 15px;
                            padding-top: 15px;
                            padding-right: 10px;
                            padding-left: calc(35px + 20px);
                            border-top: 1px solid var(--color-Design-Gray01);

                            &::before{
                                position: absolute;
                                content: "";
                                top: 18px;
                                left: 20px;
                                width: 24px;
                                aspect-ratio: 1/1;
                                background-image: url(../img/common/icon_check.svg);
                                background-position: center left;
                                background-repeat: no-repeat;
                                background-size: contain;
                                filter: var(--color-Design-Gray01-Filter);
                            }

                            &:first-child{
                                margin-top: 0 !important;
                                border-top: none;
                            }

                            strong{
                                color: var(--color-Design-Green);
                            }

                        }

                    }

                }

                /* 解決 */
                .solutionArea{
                    position: relative;
                    clear: both;
                    display: flow-root;
                    width: 100%;
                    padding: 60px 100px 50px 80px;
                    background-color: #FFF;

                    .solutionTitle{
                        position: absolute;
                        content: "";
                        top: -22px;
                        left: 50%;
                        width: max-content;
                        color: #FFF;
                        margin: 0 auto;
                        padding: 8px 40px;
                        background-color: var(--color-Design-Green);
                        transform: translateX(-50%);
                        border-radius: 999px;
                    }

                    .solutionCom{
                        display: grid;
                        gap: 0 50px;
                        grid-template-columns: 220px 1fr;
                        justify-content: center;
                        align-items: center;

                        img{
                            width: 100%;
                            aspect-ratio: 5/4;
                            object-fit: contain;
                            object-position: center;
                        }

                        p{
                            color: var(--color-Design-Green);

                            strong{
                                font-weight: 600;
                                color: var(--color-Design-Yellow);
                            }

                        }

                        .solutionComTxt{

                            .fS{
                                color: var(--color-Design-Txt);
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 1000px){

                    /* チェックリスト */
                    .listCheckArea{
                        margin-bottom: calc(30px + 10px + 60px);
                        padding: 40px 30px calc(40px + 10px) 30px; /* 50px 30px  */
                        background-position: center right 20px;

                        /* 三角 */
                        &::after{
                            bottom: calc((60px + 10px) * -1);
                            width: 60px;
                        }

                        /* チェック */
                        .listCheck{
                            width: 75%;

                            li{
                                margin-top: 10px;
                                padding-top: 10px;
                                padding-right: 15px;
                                padding-left: calc(35px + 15px);

                                &::before{
                                    top: 10px;
                                    left: 20px;
                                    width: 22px;
                                }

                            }

                        }

                    }

                    /* 解決 */
                    .solutionArea{
                        padding: 40px 30px 30px 30px;

                        .solutionTitle{
                            top: -17px;
                            padding: 5px 25px;
                        }

                        .solutionCom{
                            gap: 0 30px;
                            grid-template-columns: 180px 1fr;

                            .solutionComTxt{

                                br{
                                    display: none;
                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){

                    /* チェックリスト */
                    .listCheckArea{
                        margin-bottom: 90px;
                        padding: 2vh 20px 180px 20px;
                        background-position: bottom 1.5vh center;
                        background-size: auto 150px;

                        /* 三角 */
                        &::after{
                            bottom: calc((50px + 10px) * -1);
                            width: 50px;
                        }

                        /* チェック */
                        .listCheck{
                            width: 100%;

                            li{
                                margin-top: 2vh;
                                padding-top: 2vh;
                                padding-right: 10px;
                                padding-left: calc(25px + 10px);

                                &::before{
                                    top: 2vh;
                                    left: 10px;
                                    width: 20px;
                                }

                            }

                        }

                    }

                    /* 解決 */
                    .solutionArea{
                        padding: 55px 25px 4vh;

                        .solutionTitle{
                            top: -27px;
                            height: 54px;
                            text-align: center;
                            padding: 5px 25px;
                        }

                        .solutionCom{
                            gap: 2vh 0;
                            grid-template-columns: 1fr;
                            grid-template-rows: 1fr auto;
                            grid-auto-flow: column;

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

                            p{
                                line-height: 1.4;

                                &.fS{
                                    line-height: var(--line-height-S-Sp);
                                }

                            }

                            .solutionComTxt{
                                padding-left: 0;
                                border-left: none;
                            }

                        }

                    }

                }

            }

        }

        /* アプローチ ---------------------------------------- */
        .approach{

            .boxArea{
                width: min(100%, var(--width-M));

                .approachArea{
                    display: grid;
                    gap: 0 40px;
                    grid-template-columns: 1fr 55%;
                    justify-content: center;
                    align-items: center;
                    text-align: justify;

                    img{
                        width: 100%;
                        aspect-ratio: 5/2;
                        object-fit: contain;
                        object-position: center;
                    }

                }

                @container ctnHtml (width <= 1000px){

                    .approachArea{
                        gap: 30px 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: 1fr auto;
                        grid-auto-flow: column;

                        img{
                            width: var(--width-contents-small);
                            margin: 0 auto;
                        }

                    }

                }

                @container ctnHtml (width <= 600px){

                    .approachArea{
                        gap: 3vh 0;

                        img{
                            width: 100%;
                            margin: 0;
                        }

                    }

                }

            }

        }

        /* 特長 ---------------------------------------------- */
        .feature{

            .boxArea{
                width: min(100%, var(--width-M));

                /* 一覧 */
                .featureList{
                    display: grid;
                    gap: 0 30px;
                    grid-template-columns: 1fr 1fr 1fr;
                    justify-content: space-between;
                    align-items: flex-start;

                    /* カード */
                    .featureArea{
                        width: 100%;
                        height: 100%;
                        background-color: #FFF;

                        h4{
                            font-size: 22px;
                            font-weight: 600;
                            color: #FFF;
                            text-align: center;
                            padding: 10px 10px;
                            background-color: var(--color-Design-Green);
                        }

                        .featureDetail{
                            display: grid;
                            gap: 10px 0;
                            grid-template-columns: 1fr;
                            grid-template-rows: 1fr auto;
                            grid-auto-flow: column;
                            justify-content: center;
                            align-items: center;
                            padding: 10px 30px 30px;

                            img{
                                display: block;
                                width: 80%;
                                aspect-ratio: 10/7;
                                object-fit: contain;
                                object-position: center;
                                margin: 0 auto;
                            }

                            p{
                                text-align: justify;
                            }

                            &.imgBig{

                                img{
                                    width: 100%;
                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 1000px){

                    /* 一覧 */
                    .featureList{
                        gap: 30px 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: repeat(3, auto);
                        grid-auto-flow: column;

                        /* カード */
                        .featureArea{

                            h4{
                                font-size: 20px;
                                padding: 7px 10px;

                                br{
                                    display: none;
                                }

                            }

                            .featureDetail{
                                gap: 0 5%;
                                grid-template-columns: 25% 1fr;
                                grid-template-rows: 1fr;
                                grid-auto-flow: row;
                                justify-content: center;
                                align-items: center;
                                padding: 15px 5% 20px;

                                img{
                                    width: 100%;
                                    margin: 0;
                                }

                                &.imgBig{
                                    grid-template-columns: 35% 1fr;

                                    img{
                                        width: 100%;
                                    }

                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){

                    /* 一覧 */
                    .featureList{
                        gap: 3vh 0;

                        /* カード */
                        .featureArea{
                            height: auto;

                            h4{
                                font-size: 16px;
                                padding: 7px 10px;
                            }

                            .featureDetail{
                                gap: 1vh 0;
                                grid-template-columns: auto;
                                grid-template-rows: auto auto;
                                grid-auto-flow: column;
                                justify-content: center;
                                align-items: center;
                                padding: 1vh 20px 3vh;

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

                                &.imgBig{
                                    grid-template-columns: auto;

                                    img{
                                        width: 94%;
                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

        /* プロセス ------------------------------------------ */
        .process{

            .boxArea{
                width: min(100%, var(--width-M));

                img{
                    display: block;
                    width: 100%;
                    aspect-ratio: 2/1;
                    object-fit: contain;
                    object-position: center;
                    margin-top: 30px;
                }

                .linkBt{
                    margin-top: 30px;
                }

                @container ctnHtml (width <= 1000px){

                    .linkBt{
                        margin-top: 20px;
                    }

                }

                @container ctnHtml (width <= 600px){

                    .linkBt{
                        margin-top: 2vh;
                    }

                }

            }

        }

        /* 事例 ---------------------------------------------- */
        .case{

            .boxArea{
                width: min(100%, var(--width-Base));

                /* カード */
                .caseArea{
                    width: 100%;
                    height: 100%;
                    background-color: #FFF;

                    & + .caseArea{
                        margin-top: 50px;
                    }

                    h4{
                        position: relative;
                        display: grid;
                        gap: 0 20px;
                        grid-template-columns: 80px auto;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 22px;
                        font-weight: 600;
                        color: #FFF;
                        padding: 10px 20px 10px 100px;
                        background-color: var(--color-Design-Green);

                        /* 例 */
                        &::before{
                            position: absolute;
                            display: grid;
                            justify-content: center;
                            align-items: center;
                            content: "例";
                            top: 50%;
                            left: 20px;
                            width: 50px;
                            height: 40px;
                            font-size: 18px;
                            color: var(--color-Design-Green);
                            background-color: #FFF;
                            transform: translateY(-50%);
                            border-radius: 5px;
                        }

                        img{
                            width: 100%;
                            aspect-ratio: 2/1;
                            object-fit: contain;
                            object-position: center;
                        }

                    }

                    .caseDetail{
                        padding: 50px 100px 60px;

                        h5{
                            text-align: center;
                            margin: 0 auto;
                        }

                        p{
                            text-align: justify;
                        }

                    }

                    /* BPO事業者 */
                    &.bpo{

                        h4{

                            /* 例1 */
                            &::before{
                                content: "例 1";
                            }

                        }

                        .caseDetail{

                            img{
                                display: block;
                                width: 70%;
                                aspect-ratio: 5/3;
                                object-fit: contain;
                                object-position: center;
                                margin: 20px auto 0;
                            }

                        }

                    }

                    /* SaaSプロダクト事業者 */
                    &.saas{

                        h4{

                            /* 例1 */
                            &::before{
                                content: "例 2";
                            }

                        }

                        .caseDetail{

                            .caseSaas{
                                display: grid;
                                gap: 0 30px;
                                grid-template-columns: 1fr 1fr;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: 40px;

                                img{
                                    width: 100%;
                                    aspect-ratio: 5/4;
                                    object-fit: contain;
                                    object-position: center;
                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 1000px){
                    width: 90%;

                    /* カード */
                    .caseArea{

                        & + .caseArea{
                            margin-top: 40px;
                        }

                        h4{
                            gap: 0 15px;
                            grid-template-columns: 70px auto;
                            font-size: 20px;
                            padding: 8px 20px 8px 90px;

                            /* 例 */
                            &::before{
                                left: 20px;
                                width: 45px;
                                height: 35px;
                                font-size: 18px;
                            }

                        }

                        .caseDetail{
                            padding: 40px 50px 40px;
                        }

                        /* BPO事業者 */
                        &.bpo{

                            .caseDetail{

                                img{
                                    width: 70%;
                                    margin-top: 20px;
                                }

                            }

                        }

                        /* SaaSプロダクト事業者 */
                        &.saas{

                            .caseDetail{

                                .caseSaas{
                                    gap: 0 20px;
                                    margin-top: 30px;
                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    width: 100%;

                    /* カード */
                    .caseArea{

                        & + .caseArea{
                            margin-top: 4vh;
                        }

                        h4{
                            gap: 0 15px;
                            grid-template-columns: 50px auto;
                            font-size: 16px;
                            padding: 7px 20px 7px 70px;

                            /* 例 */
                            &::before{
                                left: 10px;
                                width: 40px;
                                height: 25px;
                                font-size: 16px;
                            }

                        }

                        .caseDetail{
                            padding: 3vh 20px 3vh;
                        }

                        /* BPO事業者 */
                        &.bpo{

                            .caseDetail{

                                img{
                                    width: 90%;
                                    margin-top: 1vh;
                                }

                            }

                        }

                        /* SaaSプロダクト事業者 */
                        &.saas{

                            .caseDetail{

                                .caseSaas{
                                    gap: 4vh 0;
                                    grid-template-columns: 1fr;
                                    grid-template-rows: auto 1fr;
                                    grid-auto-flow: column;
                                    justify-content: center;
                                    align-items: center;
                                    margin-top: 4vh;

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

                                }

                            }

                        }

                    }

                }

            }

        }

/* 中面共通 ================================================= */
/* ========================================================= */
/* ワークショップ・人材開発 ================================== */

        /* メインイメージ ----------------------------------- */
        .mainImg{

            &.wtp{
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/wtp_main_img.jpg);
                background-size: 1920px;

                @container ctnHtml (width <= 1000px){
                    background-size: 1700px;
                }

                @container ctnHtml (width <= 600px){
                    background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/wtp_main_img_sp.jpg);
                    background-size: 100%;
                }

            }

        }

        /* 受講された方の声 --------------------------------- */
        .testimonials{

            .boxArea{
                width: min(100%, var(--width-Base));

                /* バナー */
                .btYoutube{
                    width: 100%;
                    text-align: center;
                    margin-top: 50px;

                    img{
                        width: 100%;
                    }

                }

                /* 声エリア */
                .testimonialsDetail{
                    margin-top: 50px;
                    border: 1px solid var(--color-Design-Green);

                    /* 人物 */
                    .testimonialsPerson{
                        display: grid;
                        gap: 0 50px;
                        grid-template-columns: 150px 1fr;
                        justify-content: center;
                        align-items: flex-start;
                        width: 80%;
                        margin: 0 auto;
                        padding: 30px 0 0;

                        /* 写真 */
                        img{
                            width: 100%;
                            aspect-ratio: 9/10;
                            object-fit: cover;
                            object-position: center;
                            background-color: #FFF;
                        }

                    }

                    /* アコーディオン */
                    details{
                        padding-top: 30px;

                        summary{
                            position: relative;
                            display: grid;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            text-align: center;
                            padding: 10px 20px;
                            background-color: #FFF;
                            cursor: pointer;
                            transition: var(--transition-BtLink);

                            /* Safariのデフォルトの三角形アイコンを削除 */
                            &::-webkit-details-marker{
                                display: none;
                            }

                            /* 矢印 */
                            &::after{
                                position: absolute;
                                content: "";
                                top: 15px;
                                left: calc(50% + 60px);
                                width: 18px;
                                aspect-ratio: 1/1;
                                background-image: url(../img/common/icon_arrow_g.svg);
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                                transform-origin: center;
                                transform: rotate(90deg);
                                transition: transform var(--transition-BtLink);
                            }

                            @media (hover:hover){

                                &:hover{
                                    color: #FFF;
                                    background-color: var(--color-Design-Hover);

                                    /* 矢印 */
                                    &::after{
                                        background-image: url(../img/common/icon_arrow_w.svg);
                                    }

                                }

                            }

                        }

                        /* 内容の開閉アニメーション */
                        &::details-content{
                            height: 0;
                            overflow: clip;
                            opacity: 0;
                            transition: height 0.6s ease, opacity 0.6s ease,
                            content-visibility 0.6s ease allow-discrete;
                        }

                        /* オープン時 */
                        &[open]{

                            summary{

                                /* 矢印 */
                                &::after{
                                    transform: rotate(270deg);
                                }

                            }

                            /* 内容の開閉アニメーション */
                            &::details-content {
                                height: auto; /* for unsupported browser */
                                height: calc-size(auto, size);
                                opacity: 1;
                            }

                        }

                        /* 内容 */
                        .accordion{
                            padding: 50px 150px;
                            background-color: #fff;
                            border-top: 1px dotted var(--color-Design-Green);

                            p{
                                text-align: justify;
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 1000px){
                    width: 100%;

                    /* バナー */
                    .btYoutube{
                        margin-top: 40px;
                    }

                    /* 声エリア */
                    .testimonialsDetail{
                        margin-top: 40px;

                        /* 人物 */
                        .testimonialsPerson{
                            gap: 0 40px;
                            grid-template-columns: 130px 1fr;
                            width: 80%;
                        }

                        /* アコーディオン */
                        details{

                            summary{

                                /* 矢印 */
                                &::after{
                                    top: 12px;
                                }

                            }

                            /* 内容 */
                            .accordion{
                                padding: 50px clamp(50px, 25.06266vw - 104.38596px, 150px);   /* 横：MIN 616px ～ MAX 1015px */
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    width: 100%;

                    /* バナー */
                    .btYoutube{
                        margin-top: 4vh;
                    }

                    /* 声エリア */
                    .testimonialsDetail{
                        margin-top: 4vh;

                        /* 人物 */
                        .testimonialsPerson{
                            display: grid;
                            gap: 2vh 0;
                            grid-template-columns: 1fr;
                            grid-template-rows: auto 1fr;
                            grid-auto-flow: column;
                            justify-content: center;
                            align-items: center;
                            width: 84%;

                            /* 写真 */
                            img{
                                width: 40%;
                                margin: 0 30%;
                            }

                            /* プロフィール */
                            .testimonialsProfile{

                                p{

                                    & + p{
                                        margin-top: 1vh;
                                    }

                                }

                            }

                        }

                        /* アコーディオン */
                        details{
                            padding-top: 2vh;

                            summary{
                                padding: 9px 20px 10px;

                                /* 矢印 */
                                &::after{
                                    top: 12px;
                                    left: calc(50% + 40px);
                                    width: 16px;
                                }

                            }

                            /* 内容 */
                            .accordion{
                                padding: 3vh 20px 5vh;
                            }

                        }

                    }

                }

            }

        }

        /* 写真 -------------------------------------------- */
        .imgList{
            padding: 0;

            .boxArea{
                width: 100%;
                margin: 100px 0 0;

                .swiperWorkshop{

                    .swiper-wrapper{
                        transition-timing-function: linear;

                        img{
                            width: 100%;
                            aspect-ratio: 3/2;
                            object-fit: cover;
                            object-position: center;
                        }

                    }

                }

                @container ctnHtml (width <= 1000px){
                    margin-top: 70px;
                }

                @container ctnHtml (width <= 600px){
                    margin-top: 7vh;
                }

            }

        }

        /* カリキュラム実例 --------------------------------- */
        .curriculum{

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

                .curriculumDetail{
                    display: flow-root;
                    padding: 0 50px 50px;
                    background-color: #FFF;

                    .dlTopTitle{

                        dd{
                            background-color: var(--color-Design-Gray03);
                        }

                        & + p{
                            font-weight: 600;
                            color: var(--color-Design-Green);
                            text-align: justify;
                            margin-top: 50px;

                            strong{
                                font-weight: 600;
                                color: var(--color-Design-Yellow);
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    width: 100%;

                    .curriculumDetail{
                        padding: 0 20px 5vh;

                        .dlTopTitle{
                            margin-top: 3vh;

                            & + p{
                                margin-top: 5vh;
                            }

                        }

                    }

                }

            }

        }

        /* ワークショップ ----------------------------------- */
        .workshop{

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

                .workshopSelect{
                    width: fit-content;
                    color: #FFF;
                    margin: 0 auto;
                    padding: 3px 30px;
                    background-color: var(--color-Design-Green);
                    border-radius: 999px;
                }

                .workshopList{
                    margin-top: 30px;

                    .workshopDetail{
                        display: grid;
                        gap: 0 50px;
                        grid-template-columns: 1fr 1fr;
                        justify-content: center;
                        align-items: flex-start;
                        width: 100%;
                        height: 100%;

                        & > li{
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            height: 100%;
                            padding: 20px 40px;
                            background-color: #FFF;

                            h4{
                                position: relative;
                                font-size: 20px;
                                font-weight: 600;
                                line-height: 1.2;
                                color: var(--color-Design-Green);
                                margin-top: 10px;
                                z-index: 10;

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

                                br{
                                    display: none;
                                }

                            }

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

                            .linkBt{
                                width: 100%;
                                margin-top: auto;
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 1000px){

                    .workshopSelect{
                        padding: 3px 20px;
                    }

                    .workshopList{
                        margin-top: 20px;

                        .workshopDetail{
                            gap: 0 30px;

                            & > li{
                                padding: 15px 25px;

                                h4{

                                    /* アイコン */
                                    &::before{
                                        top: -6px;
                                        left: -10px;
                                        font-size: 20px;
                                    }

                                    br{
                                        display: block;
                                    }

                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){

                    .workshopSelect{
                        padding: 3px 20px;
                    }

                    .workshopList{
                        margin-top: 3vh;

                        .workshopDetail{
                            display: grid;
                            gap: 3vh 0;
                            grid-template-columns: 1fr;
                            grid-template-rows: auto 1fr;
                            grid-auto-flow: column;
                            justify-content: center;
                            align-items: center;

                            & > li{
                                padding: 20px 30px;

                                h4{
                                    font-size: 18px;
                                    margin-top: 2vh;

                                    /* アイコン */
                                    &::before{
                                        top: -8px;
                                        left: -10px;
                                        font-size: 20px;
                                    }

                                }

                                p{
                                    margin-top: 2vh;
                                    margin-bottom: 3vh;
                                }

                            }

                        }

                    }

                }

            }

        }

/* ワークショップ・人材開発 ================================== */
/* ========================================================= */
/* 調査・可視化支援 ========================================== */

        /* メインイメージ ----------------------------------- */
        .mainImg{

            &.rm{
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/rm_main_img.jpg);
                background-size: 1920px;

                @container ctnHtml (width <= 1000px){
                    background-size: 1700px;
                }

                @container ctnHtml (width <= 600px){
                    background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/rm_main_img_sp.jpg);
                    background-size: 100%;
                }

            }

        }

        /* プロセス ------------------------------------------ */
        .process{

            &.rm{

                .boxArea{

                    .linkBt{
                        margin-left: auto;
                    }

                }

            }

        }

/* 調査・可視化支援 ========================================== */
/* ========================================================= */
/* 戦略策定・施策実行支援 ==================================== */

        /* メインイメージ ----------------------------------- */
        .mainImg{

            &.spi{
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/spi_main_img.jpg);
                background-size: 1920px;

                @container ctnHtml (width <= 1000px){
                    background-size: 1600px;
                }

                @container ctnHtml (width <= 600px){
                    background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/spi_main_img_sp.jpg);
                    background-size: 100%;
                }

            }

        }

/* 戦略策定・施策実行支援 ==================================== */
/* ========================================================= */
/* 啓蒙・業界支援 =========================================== */

        /* メインイメージ ----------------------------------- */
        .mainImg{

            &.etl{
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/etl_main_img.jpg);
                background-size: 1920px;

                @container ctnHtml (width <= 1000px){
                    background-size: 1600px;
                }

                @container ctnHtml (width <= 600px){
                    background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/etl_main_img_sp.jpg);
                    background-size: 100%;
                }

            }

        }

        /* CXフォーラム ------------------------------------- */
        .cxForum{

            .boxArea{

                .cxForumArea{
                    display: grid;
                    gap: 40px 50px;
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: auto 1fr;
                    justify-content: center;
                    align-items: flex-start;

                    /* 説明 */
                    .cxForumDetail{
                        grid-column: 1 / 2;
                        grid-row: 1 / 2;

                        p{
                            text-align: justify;
                        }

                        .cxForumImg{
                            text-align: center;
                            margin-top: 35px;

                            img{
                                width: 40%;
                            }

                        }

                    }

                    /* 動画 */
                    .cxForumMv{
                        grid-column: 2 / 3;
                        grid-row: 1 / 3;
                        padding-top: 5px;

                        img{
                            width: 100%;
                        }

                        .youtube{
                            position: relative;
                            width: 100%;
                            margin-top: 40px;
                            padding-top: 56.25%;

                            iframe{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 100% !important;
                                height: 100% !important;
                            }

                        }

                    }

                    /* 特長 */
                    .cxForumFeature{
                        grid-column: 1 / 2;
                        grid-row: 2 / 3;
                        display: flow-root;
                        padding: 0 30px 50px 50px;
                        background-color: var(--color-Design-Gray03);
                    }

                }

                /* ボタン */
                .linkBt{
                    margin: 50px auto 0;
                }

            }

            @container ctnHtml (width <= 1000px){

                .boxArea{
                    width: var(--width-contents-small);

                    .cxForumArea{
                        gap: 40px 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: auto auto 1fr;
                        grid-auto-flow: column;

                        /* 説明 */
                        .cxForumDetail{
                            grid-column: 1 / 2;
                            grid-row: 1 / 2;

                            .cxForumImg{
                                margin-top: 40px;

                                img{
                                    width: 200px;
                                }

                            }

                        }

                        /* 動画 */
                        .cxForumMv{
                            grid-column: 1 / 2;
                            grid-row: 2 / 3;
                            padding-top: 0;

                            .youtube{
                                margin-top: 20px;
                            }

                        }

                        /* 特長 */
                        .cxForumFeature{
                            grid-column: 1 / 2;
                            grid-row: 3 / 4;
                            padding: 0 30px 40px 50px;
                        }

                    }

                }

            }

            @container ctnHtml (width <= 600px){

                .boxArea{
                    width: 100%;

                    .cxForumArea{
                        gap: 4vh 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: auto auto 1fr;
                        grid-auto-flow: column;

                        /* 説明 */
                        .cxForumDetail{
                            grid-column: 1 / 2;
                            grid-row: 1 / 2;

                            .cxForumImg{
                                margin-top: 3vh;

                                img{
                                    width: 150px;
                                }

                            }

                        }

                        /* 動画 */
                        .cxForumMv{
                            grid-column: 1 / 2;
                            grid-row: 2 / 3;
                            padding-top: 0;

                            .youtube{
                                margin-top: 2vh;
                            }

                        }

                        /* 特長 */
                        .cxForumFeature{
                            grid-column: 1 / 2;
                            grid-row: 3 / 4;
                            padding: 0 20px 4vh 30px;
                        }

                    }

                    /* ボタン */
                    .linkBt{
                        margin-top: 5vh;
                    }

                }

            }

        }

        /* CX消費者調査 ------------------------------------- */
        .crs{

            .boxArea{

                .crsArea{
                    display: grid;
                    gap: 40px 50px;
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: auto 1fr;
                    justify-content: center;
                    align-items: flex-start;

                    /* 説明 */
                    .crsDetail{
                        grid-column: 1 / 2;
                        grid-row: 1 / 2;

                        p{
                            text-align: justify;
                        }

                    }

                    /* イメージ */
                    .crsImg{
                        grid-column: 2 / 3;
                        grid-row: 1 / 3;
                        padding-top: 15px;

                        img{
                            width: 100%;
                        }

                    }

                    /* 特長 */
                    .crsFeature{
                        grid-column: 1 / 2;
                        grid-row: 2 / 3;
                        display: flow-root;
                        margin-bottom: 10px;
                        padding: 0 30px 50px 50px;
                        background-color: #FFF;
                    }

                }

                /* ボタン */
                .linkBt{
                    margin: 50px auto 0;
                }

            }

            @container ctnHtml (width <= 1000px){

                .boxArea{
                    width: var(--width-contents-small);

                    .crsArea{
                        gap: 40px 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: auto auto 1fr;
                        grid-auto-flow: column;

                        /* 説明 */
                        .crsDetail{
                            grid-column: 1 / 2;
                            grid-row: 1 / 2;
                        }

                        /* イメージ */
                        .crsImg{
                            grid-column: 1 / 2;
                            grid-row: 2 / 3;
                            padding-top: 0;

                            img{
                                width: 100%;
                            }

                        }

                        /* 特長 */
                        .crsFeature{
                            grid-column: 1 / 2;
                            grid-row: 3 / 4;
                            margin-bottom: 10px;
                            padding: 0 30px 40px 50px;
                        }

                    }

                }

            }

            @container ctnHtml (width <= 600px){

                .boxArea{
                    width: 100%;

                    .crsArea{
                        gap: 4vh 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: auto auto 1fr;
                        grid-auto-flow: column;

                        /* 説明 */
                        .crsDetail{
                            grid-column: 1 / 2;
                            grid-row: 1 / 2;
                        }

                        /* イメージ */
                        .crsImg{
                            grid-column: 1 / 2;
                            grid-row: 2 / 3;
                            padding-top: 0;

                            img{
                                width: 100%;
                            }

                        }

                        /* 特長 */
                        .crsFeature{
                            grid-column: 1 / 2;
                            grid-row: 3 / 4;
                            margin-bottom: 1vh;
                            padding: 0 20px 4vh 30px;
                        }

                    }

                    /* ボタン */
                    .linkBt{
                        margin-top: 5vh;
                    }

                }

            }

        }

        /* VoC利活用実態調査 -------------------------------- */
        .voc{

            .boxArea{
                width: min(100%, var(--width-M));

                .vocArea{
                    display: grid;
                    gap: 0 50px;
                    grid-template-columns: 1fr 1fr;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-top: 50px;

                    /* 説明 */
                    .vocDetail{

                        p{
                            text-align: justify;
                        }

                    }

                    /* 特長 */
                    .vocFeature{
                        display: flow-root;
                        padding: 0 30px 50px 50px;
                        background-color: var(--color-Design-Gray03);
                    }

                }

                /* フロー */
                .vocFlow{
                    clear: both;
                    display: flow-root;
                    margin-top: 50px;

                    ol{
                        position: relative;
                        display: grid;
                        gap: 0 50px;
                        grid-template-columns: repeat(4, 1fr);
                        justify-content: space-between;
                        align-items: center;

                        /* 矢印：横 */
                        &::before{
                            position: absolute;
                            content: "";
                            bottom: -50px;
                            right: 0;
                            width: 48%;
                            aspect-ratio: 6/1;
                            background-image: url(../img/service/etl_voc_arrow_x.svg);
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: contain;
                            z-index: 10;
                        }

                        li{
                            position: relative;
                            width: 100%;
                            height: 100%;
                            font-weight: 500;
                            line-height: 1.4;
                            color: var(--color-Design-Green);
                            text-align: center;
                            padding-top: calc(20px + 100px + 15px);
                            padding-bottom: 30px;
                            background-color: var(--color-Design-Green02);

                            /* アイコン */
                            &::before{
                                position: absolute;
                                content: "";
                                top: 20px;
                                left: 50%;
                                width: 100px;
                                aspect-ratio: 1/1;
                                background-color: #FFF;
                                background-image: url(../img/service/etl_voc_icon01.svg);
                                background-position: center center;
                                background-repeat: no-repeat;
                                background-size: contain;
                                border-radius: 50%;
                                transform: translateX(-50%);
                            }

                            /* 三角アイコン */
                            &::after{
                                position: absolute;
                                content: "";
                                top: 50%;
                                right: -50px;
                                border: 10px solid transparent;
                                border-bottom: 10px solid var(--color-Design-Green02);
                                transform: translateX(-50%) rotate(90deg);
                            }

                            &:nth-child(2){
                                background-color: var(--color-Design-Yellow);

                                /* アイコン */
                                &::before{
                                    background-image: url(../img/service/etl_voc_icon02.svg);
                                }

                            }

                            &:nth-child(3){

                                /* アイコン */
                                &::before{
                                    background-image: url(../img/service/etl_voc_icon03.svg);
                                }

                            }

                            &:nth-child(4){

                                /* アイコン */
                                &::before{
                                    background-image: url(../img/service/etl_voc_icon04.svg);
                                }

                            }

                            &:last-child{

                                /* 三角アイコン */
                                &::after{
                                    display: none;
                                }

                            }

                        }

                    }

                }

                /* ボタン */
                .linkBt{
                    margin: 80px auto 0;
                }

            }

            @container ctnHtml (width <= 1000px){

                .boxArea{
                    width: 100%;

                    .vocArea{
                        gap: 30px 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: auto 1fr;
                        grid-auto-flow: column;
                        width: var(--width-contents-small);
                        margin: 40px auto 0;

                        /* 特長 */
                        .vocFeature{
                            padding: 0 30px 40px 50px;
                        }

                    }

                    /* フロー */
                    .vocFlow{
                        width: var(--width-contents-small);
                        margin: 50px auto 0;

                        ol{
                            gap: 30px 0;
                            grid-template-columns: 1fr;
                            grid-template-rows: repeat(4, 1fr);
                            grid-auto-flow: column;
                            justify-content: center;
                            align-items: center;

                            /* 矢印：縦 */
                            &::before{
                                position: absolute;
                                content: "";
                                bottom: 0;
                                right: clamp(20px, 20.05013vw - 103.50877px, 100px);   /* 横：MIN 616px ～ MAX 1015px */
                                width: 50px;
                                aspect-ratio: 1/4;
                                background-image: url(../img/service/etl_voc_arrow_y.svg);
                                background-position: center center;
                                background-repeat: no-repeat;
                                background-size: contain;
                                z-index: 10;
                            }

                            li{
                                display: grid;
                                gap: 0;
                                grid-template-columns: 1fr;
                                align-items: center;
                                height: 85px;
                                text-align: left;
                                padding: 20px 40px 20px calc(clamp(20px, 12.53133vw - 57.19298px, 70px) + 70px + 20px);   /* 横：MIN 616px ～ MAX 1015px */

                                /* アイコン */
                                &::before{
                                    top: 50%;
                                    left: clamp(20px, 12.53133vw - 57.19298px, 70px);   /* 横：MIN 616px ～ MAX 1015px */
                                    width: 70px;
                                    transform: translateY(-50%) translateX(0);
                                }

                                /* 三角アイコン */
                                &::after{
                                    position: absolute;
                                    content: "";
                                    top: unset;
                                    right: unset;
                                    bottom: -30px;
                                    left: 50%;
                                    border: 10px solid transparent;
                                    border-bottom: 10px solid var(--color-Design-Green02);
                                    transform: translateX(-50%) rotate(180deg);
                                }

                                br.vocBr,
                                br.vocBr2{
                                    display: none;
                                }

                            }

                        }

                    }

                }

            }

            @container ctnHtml (width <= 600px){

                .boxArea{
                    width: 100%;

                    .vocArea{
                        display: grid;
                        gap: 3vh 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: auto 1fr;
                        width: 100%;
                        margin-top: 4vh;

                        /* 特長 */
                        .vocFeature{
                            padding: 0 20px 4vh 30px;
                        }

                    }

                    /* フロー */
                    .vocFlow{
                        width: 100%;
                        margin-top: 4vh;

                        ol{
                            display: grid;
                            gap: 25px 0;
                            grid-template-columns: 1fr;
                            grid-template-rows: repeat(4, 1fr);
                            grid-auto-flow: column;
                            justify-content: center;
                            align-items: center;

                            /* 矢印：縦 */
                            &::before{
                                position: absolute;
                                content: "";
                                bottom: 0;
                                right: 15px;
                                width: auto;
                                height: 225px;
                                aspect-ratio: 1/4;
                                background-image: url(../img/service/etl_voc_arrow_y.svg);
                                background-position: center center;
                                background-repeat: no-repeat;
                                background-size: contain;
                                z-index: 10;
                            }

                            li{
                                display: grid;
                                gap: 0;
                                grid-template-columns: 1fr;
                                align-items: center;
                                height: 100px;
                                text-align: left;
                                padding: 20px 40px 20px calc(clamp(20px, 12.53133vw - 57.19298px, 70px) + 70px + 20px);

                                /* アイコン */
                                &::before{
                                    top: 50%;
                                    left: clamp(20px, 12.53133vw - 57.19298px, 70px);   /* 横：MIN 616px ～ MAX 1015px */
                                    width: 70px;
                                    transform: translateY(-50%) translateX(0);
                                }

                                /* 三角アイコン */
                                &::after{
                                    position: absolute;
                                    content: "";
                                    top: unset;
                                    right: unset;
                                    bottom: -28px;
                                    left: 50%;
                                    border: 10px solid transparent;
                                    border-bottom: 10px solid var(--color-Design-Green02);
                                    transform: translateX(-50%) rotate(180deg);
                                }

                                br.vocBr{
                                    display: block;
                                }

                            }

                        }

                    }

                    /* ボタン */
                    .linkBt{
                        margin-top: 5vh;
                    }

                }

            }

        }

        /* その他 ------------------------------------------- */
        .other{
            /* 登壇写真を横幅100%で広げるため左右の余白を0にする */
            padding-left: 0;
            padding-right: 0;

            .boxArea{
                width: 100%;

                /* 登壇写真 */
                .otherSpeechImg{
                    width: 100%;

                    ul{
                        display: grid;
                        gap: 0;
                        grid-template-columns: repeat(4, 1fr);
                        justify-content: center;
                        align-items: flex-start;
                        width: 100%;
                        margin-top: 50px;

                        li{
                            width: 100%;

                            img{
                                width: 100%;
                                aspect-ratio: 3/2;
                                object-fit: cover;
                                object-position: center;
                            }

                        }

                    }

                }

                /* 実績 */
                .otherAchievement{
                    display: grid;
                    gap: 0 50px;
                    grid-template-columns: 45% auto;
                    justify-content: space-between;
                    align-items: flex-start;
                    width: min(100%, var(--width-M));
                    margin: 20px auto 0;
                    padding-left: var(--contents-Sidemargin-Pc);
                    padding-right: var(--contents-Sidemargin-Pc);

                    /* 書籍 */
                    .otherBook{
                        /* width: 100%; */

                        ul{
                            display: grid;
                            gap: 0 20px;
                            grid-template-columns: auto auto auto;
                            justify-content: space-between;
                            align-items: flex-start;

                            li{

                                img{
                                    width: 100%;
                                    aspect-ratio: 3/4;
                                    object-fit: contain;
                                    object-position: center;
                                }

                                .linkBt{
                                    width: fit-content;
                                    margin-top: 15px;

                                    a{
                                        height: 30px;
                                    }

                                }

                            }

                        }

                    }

                }

                /* ボタン */
                .linkBt{
                    width: 300px;
                    margin: 80px auto 0;
                }

            }

            @container ctnHtml (width <= 1000px){

                .boxArea{
                    width: 100%;

                    /* 登壇写真 */
                    .otherSpeechImg{

                        ul{
                            margin-top: 35px;
                        }

                    }

                    /* 実績 */
                    .otherAchievement{
                        display: grid;
                        gap: 0 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: repeat(2, 1fr);
                        grid-auto-flow: column;
                        justify-content: center;
                        align-items: center;
                        width: min(100%, 600px);
                        margin-top: 15px;
                        padding-left: var(--contents-Sidemargin-Tab);
                        padding-right: var(--contents-Sidemargin-Tab);

                        /* 登壇実績 */
                        .otherSpeech{

                            li{

                                br{
                                    display: none;
                                }

                            }

                        }

                        /* 書籍 */
                        .otherBook{

                            ul{
                                gap: 0 30px;

                                li{

                                    .linkBt{
                                        margin-top: 10px;

                                        a{
                                            height: 30px;
                                        }

                                    }

                                }

                            }

                        }

                    }

                    /* ボタン */
                    .linkBt{
                        width: 260px;
                    }

                }

            }

            @container ctnHtml (width <= 600px){

                .boxArea{
                    width: 100%;

                    /* 登壇写真 */
                    .otherSpeechImg{

                        ul{
                            gap: 0;
                            grid-template-columns: repeat(2, 1fr);
                            grid-template-rows: 1fr 1fr;
                            justify-content: center;
                            align-items: center;
                            margin-top: 4vh;
                        }

                    }

                    /* 実績 */
                    .otherAchievement{
                        gap: 0 0;
                        grid-template-columns: 1fr;
                        grid-template-rows: 1fr auto;
                        grid-auto-flow: column;
                        justify-content: flex-start;
                        align-items: flex-start;
                        width: 100%;
                        margin-top: 15px;
                        padding-left: var(--contents-Sidemargin-Sp);
                        padding-right: var(--contents-Sidemargin-Sp);

                        /* 登壇実績 */
                        .otherSpeech{

                            li{

                                br{
                                    display: block;
                                }

                            }

                        }

                        /* 書籍 */
                        .otherBook{

                            ul{
                                display: grid;
                                gap: 3vh 30px;
                                grid-template-columns: 1fr 1fr;
                                grid-template-rows: auto auto;
                                justify-content: center;
                                align-items: center;
                                width: 80%;
                                margin: 0 auto;

                                li{

                                    .linkBt{
                                        width: fit-content;
                                        margin-top: 10px;

                                        a{
                                            height: 30px;
                                        }

                                    }

                                }

                            }

                        }

                    }

                    /* ボタン */
                    .linkBt{
                        width: 260px;
                        margin-top: 8vh;
                    }

                }

            }

        }

/* 啓蒙・業界支援 =========================================== */
/* ========================================================= */
/* マーケティング・営業支援 ================================== */

        /* メインイメージ ----------------------------------- */
        .mainImg{

            &.mss{
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/mss_main_img.jpg);
                background-size: 1920px;

                @container ctnHtml (width <= 1000px){
                    background-size: 1700px;
                }

                @container ctnHtml (width <= 600px){
                    background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/service/mss_main_img_sp.jpg);
                    background-size: 100%;
                }

            }

        }

        /* ライセンスパートナー ----------------------------- */
        .partner{

            /* ロゴリスト */
            .logoList{
                display: flex;
                flex-wrap: wrap;
                gap: 0 50px;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                width: 100%;

                li{
                    height: 100%;

                    a{
                        display: grid;
                        justify-content: center;
                        align-items: center;

                        img{
                            width: 200px;
                            aspect-ratio: 4/1;
                            object-fit: contain;
                            object-position: center;

                            &.nttact{
                                width: 380px;
                                aspect-ratio: 10/1;
                                margin-top: 5px;
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 1000px){
                    gap: 0 40px;

                    li{

                        a{

                            img{

                                width: 150px;

                                &.nttact{
                                    width: 280px;
                                    margin-top: 5px;
                                }

                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    display: flex;
                    flex-wrap: wrap;
                    gap: 4vh 0;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;

                    li{
                        width: 100%;
                        height: auto;

                        a{

                            img{

                                width: 180px;

                                &.nttact{
                                    width: 300px;
                                    margin-top: 5px;
                                }

                            }

                        }

                    }

                }

            }

        }

/* マーケティング・営業支援 ================================== */
/* ========================================================= */

    }

}