@charset "UTF-8";

/**********************************************
 * master.css
 * モジュール定義
 *********************************************/

@media all {
    :root {
        /** Primary color**/
        --cs__key_color: #0072BC;
        /** Text color**/
        --cs__txt_color: #070F26;
        --cs__txt_color_gray: #728C9C;
        --cs__txt_color_lgray: #4A5A6B;
        --cs__txt_color_white: #fff;
        /** Background color**/
        --cs__bg_color01: #E0F7FB;
        --cs__bg_color02: #F6F8FA;
        --cs__bg_color03: #E5EBF1;
        --cs__bg_color04: #D8E3EE;
        --cs__bg_color05: #fff;
        /** Botton color**/
        --cs__btn_color01: #fff;
        --cs__btn_color02: #D0E3F7;
        /** Line color**/
        --cs__line_color01: #D9E6EF;
        --cs__line_color02: #eee;
        /** Font size **/
        --cs__font_size_80: 8.0rem;
        --cs__font_size_64: 6.4rem;
        --cs__font_size_40: 4.0rem;
        --cs__font_size_28: 2.8rem;
        --cs__font_size_24: 2.4rem;
        --cs__font_size_20: 2.0rem;
        --cs__font_size_18: 1.8rem;
        --cs__font_size_16: 1.6rem;
        --cs__font_size_14: 1.4rem;
        --cs__font_size_13: 1.3rem;
        --cs__font_size_12: 1.2rem;
        --cs__font_size_10: 1.0rem;
    }
    /*-----------------------------------------

    TOP
    トップページ

    ------------------------------------------*/

    /********** 共通 **********/
    .cs_wrapper {
        font-size: var(--cs__font_size_12);
        color: var(--cs__txt_color);
        background-color: #fff;
        background-image: url('/assets/img/sp/top/cs_top_bg001.png'),url('/assets/img/sp/top/cs_top_bg002.png');
        background-size: cover,contain;
        background-repeat: no-repeat;
        line-height: 1.5;
        a {
            text-decoration: none;
        }
        .cs_wrapper__inner {
            margin: 0 auto;
            padding: 0;
            overflow: hidden;
        }
        .cs_head {
            padding-bottom: 28px;
            span {
                color: var(--cs__key_color);
                font-size: var(--cs__font_size_12);
                font-weight: bold;
            }
            h2 {
                font-size: var(--cs__font_size_28);
                font-weight: bold;
                margin-top: 2px;
                padding-top: 0;
                line-height: 1.1;
            }
            &.cs_head_small {
                padding-bottom: 0;
                span {
                    font-size: var(--cs__font_size_12);
                }
                p {
                    font-size: var(--cs__font_size_20);
                    font-weight: bold;
                    padding-top: 4px;
                    line-height: 1.1;
                }
            }
        }
        .cs_moreBtn_wrap {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cs_moreBtn {
            display: flex;
            align-items: center;
            color: var(--cs__key_color);
            font-size: var(--cs__font_size_12);
            font-weight: bold;
            .arrow {
                width: 38px;
                height: 38px;
                background-color: var(--cs__key_color);
                display: inline-block;
                transition: all .4s ease;
                margin-left: 10px;
                border-radius: 4px;
                overflow: hidden;
                position: relative;
                border: 2px solid var(--cs__key_color);
                box-sizing: border-box;
                &::before,&::after {
                    content:"";
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    top: calc(50% - 16px / 2);
                    transition: all .4s ease;
                }
                &::before {
                    left: calc(50% - 16px / 2);
                    transition: all .4s ease;
                    background: url(/assets/img/common/cs_arrow_large.svg) no-repeat center center;
                    background-size: 16px;
                }
                &::after {
                    left: -16px;
                    transition: all .4s ease;
                    background: url(/assets/img/common/cs_arrow_large_navy.svg) no-repeat center center;
                    background-size: 16px;
                }
                /** ボタンサイズ大 **/
                .cs_moreBtn--large & {
                    width: 48px;
                    height: 48px;
                    &::before,&::after {
                        width: 24px;
                        height: 24px;
                        background-size: 24px;
                        top: calc(50% - 24px / 2);
                    }
                    &::before {
                        left: calc(50% - 24px / 2);
                    }
                    &::after {
                        left: -34px;
                    }
                }
            }
            &:hover {
                .arrow {
                    background-color: transparent;
                    &::before {
                        left: 100%
                    }
                    &::after {
                        left: calc(50% - 24px / 2);
                    }
                    /** ボタンサイズ大 **/
                    .cs_moreBtn--large & {
                        &::after {
                            left: calc(50% - 34px / 2);
                        }
                    }
                }
            }
        }
        .cs_linkBtn {
            box-sizing: border-box;
            position: relative;
            background-color: rgba(0,114,188,100);
            display: flex;
            width: 100%;
            height: 64px;
            margin: 0 auto;
            justify-content: center;
            align-items: center;
            color: var(--cs__btn_color01);
            border-radius: 4px;
            border: 2px solid var(--cs__key_color);
            transition:ease .4s all;
            font-size: var(--cs__font_size_16);
            font-weight: bold;
            .arrow {
                position: absolute;
                top: calc(50% - 32px / 2);
                right: 15px;
                width: 32px;
                height: 32px;
                transition: ease 400ms all;
                overflow: hidden;
                &::before {
                    position: absolute;
                    top: calc(50% - 6px / 2);
                    left: calc(50% - 6px / 2);
                    width: 6px;
                    height: 6px;
                    background: var(--cs__btn_color01);
                    content: "";
                    border-radius: 32px;
                    transition: ease 400ms all;
                }
                &::after {
                    opacity: 0;
                    position: absolute;
                    top: 10px;
                    left: -16px;
                    width: 16px;
                    height: 12px;
                    background: url(/assets/img/common/cs_arrow.svg) no-repeat center center;
                    content: "";
                    transition: ease 400ms all;
                }
            }
            &:hover {
                color: var(--cs__key_color);
                background-color: rgba(0,114,188,0);
                transition: ease 400ms all;
                .arrow {
                    top: calc(50% - 32px / 2);
                    &::before {
                        top: calc(50% - 32px / 2);
                        left: calc(50% - 32px / 2);
                        width: 32px;
                        height: 32px;
                        background-color: rgba(0,114,188,100);
                    }
                    &::after {
                        opacity: 1;
                        left: 8px;
                    }
                }
            }
        }
        .cs_label {
            display: flex;
            align-items: center;
            dt {
                font-size: var(--cs__font_size_10);
                color: var(--cs__txt_color_lgray);
                background-color: var(--cs__bg_color03);
                font-weight: bold;
                padding: 4px 6px;
                + dt {
                    margin-left: 12px;
                }
            }
            dd {
                font-size: var(--cs__font_size_12);
                padding-left: 8px;
            }
            .cs_label_wrap & {
                margin-top: 20px;
            }
        }
        .is_active {
            display: block !important;
        }
        .is_hide {
            display: none !important;
        }
        .sp_none {
            display: none !important;
        }
        .pc_none {
            display: block !important;
        }
    }
    /********** トップビジュアル **********/
    .section_top {
        .cs_keyvisual {
            height: 380px;
            background-image: url('/assets/img/top/cs_top_image.png');
            background-size: cover;
            background-position: center;
        }
        .cs_h1 {
            width: 86%;
            margin: 32px auto 0;
            text-align: center;
            padding: 0 20px;
            h1 {
                width: 82%;
                margin: 0 auto;
            }
            span {
                display: inline-block;
                font-size: var(--cs__font_size_14);
                color: var(--cs__key_color);
                font-weight: bold;
                margin: 12px;
            }
        }
    }
    /********** 数字で見る **********/
    .section_num {
        margin-top: 24px;
        padding: 0 20px 72px;
        background-image: url(/assets/img/sp/top/cs_section_num_bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left bottom;
        .cs_num_img {
            margin: 0 auto;
            img {
                width: 100%;
            }
        }
        .cs_head--num {
            display: flex;
            align-items: flex-end;
            margin: 0 auto 4px;
            padding: 8px 20px 16px 20px;
            p {
                flex-grow: 2;
                text-align: right;
            }
        }
        .cs_linkBtn_wrap--num {
            margin-top: 36px;
        }
        /*
        .cs_img_num:nth-child(2) {
            grid-row: 2 / 4;
            grid-column: 1 / 2;
            padding-top: 6px;
            padding-right: 6px;
            img {
                height: 596px;
            }
        }
        .cs_img_num:nth-child(3) {
            grid-row: 2 / 3;
            grid-column: 2 / 4;
            padding-top: 6px;
            padding-right: 6px;
        }
        .cs_img_num:nth-child(4) {
            grid-row: 3 / 4;
            grid-column: 2 / 3;
            padding-top: 6px;
            padding-right: 6px;
        }
        .cs_img_num:nth-child(5) {
            grid-row: 3 / 4;
            grid-column: 3 / 4;
            padding-top: 6px;
            padding-right: 6px;
        }
        .cs_img_num:nth-child(6) {
            grid-row: 1 / 4;
            grid-column: 4 / 5;
            img {
                height: 750px;
            }
        }
        */
    }
    /********** 取り組み事例 **********/
    .section_caseStudy {
        width: 100%;
        margin: 0 auto;
        margin-top: 10vw;
        padding: 20px 20px 48px;
        background-color: rgb(255 255 255 / 0.6);
        .cs_caseStudy_tag {
            display: flex;
            align-items: center;
            dt {
                font-size: var(--cs__font_size_10);
                color: var(--cs__txt_color_lgray);
                background-color: var(--cs__bg_color03);
                font-weight: bold;
                padding: 5px 6px;
            }
            dd {
                font-size: var(--cs__font_size_12);
                padding-left: 8px;
            }
        }
        .cs_caseStudy_main_link {
            &:hover {
                .cs_caseStudy_main_txt {
                    p { color: var(--cs__key_color); }
                }
            }
        }
        .cs_caseStudy_main {
            .cs_caseStudy_main_img {
                width: 100%;
                img {
                    border-radius: 6px;
                    max-width: 100%;
                }
            }
            .cs_caseStudy_main_content {
                padding: 6px 0 4px;
                .cs_caseStudy_inc {
                    font-size: var(--cs__font_size_13);
                }
                p {
                    font-size: var(--cs__font_size_16);
                }
                dl {
                    margin-bottom: 16px;
                }
                .cs_caseStudy_main_btn{
                    margin-top: 12px;
                }
            }
        }
        .cs_caseStudy_thum {
            margin-top: 16px;
            .cs_caseStudy_carousel {
                display: flex;
                width: 682px;
                li {
                    width: 170px;
                    + li {
                        margin-left: 16px;
                    }
                    .cs_caseStudy_thum_img img {
                        border-radius: 4px;
                    }
                    .cs_caseStudy_thum_inc {
                        font-size: var(--cs__font_size_10);
                    }
                    p {
                    font-size: var(--cs__font_size_12);
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    margin: 6px auto;
                    }
                    .cs_caseStudy_tag {
                        margin-top: 4px;
                    }
                    a:hover {
                        color: var(--cs__key_color);
                    }
                }
            }
        }
        .cs_linkBtn_wrap--cs {
            margin-top: 42px;
        }
    }
    /********** ソリューション **********/
    .section_sol {
        width: 100%;
        margin-top: 15vw;
        padding: 0;
        .cs_sol_wrap {
            position: relative;
            padding: 48px 20px 20px;
            background-color: rgb(255 255 255 / 0.4);
            backdrop-filter: blur(3px);
        }
        .cs_body_sol,
        .cs_body_sol_sp {
            display: block;
            .cs_body_sol_toggle_item {
                border-bottom: 1px solid var(--cs__line_color01);
                &.is_current {
                    border-bottom-color: transparent;
                }
                .cs_sol_toggle_head {
                    display: table;
                    width: 100%;
                    font-size: var(--cs__font_size_16);
                    border-radius: 6px;
                    height: 72px;
                    padding: 2px 52px 0 54px;
                    position: relative;
                    p {
                        display: table-cell;
                        vertical-align: middle;
                    }
                    &::before {
                        content: '';
                        display: inline-block;
                        width: 28px;
                        height: 28px;
                        position: absolute;
                        top: calc(50% - 14px);
                        left: 14px;
                    }
                    &::after {
                        content: '';
                        display: inline-block;
                        background: url('/assets/img/sp/top/cs_toggle_arrow.png') no-repeat;
                        background-size: contain;
                        width: 24px;
                        height: 24px;
                        position: absolute;
                        top: calc(50% - 12px);
                        right: 18px;
                    }
                    .is_lc & {  /** ローコード開発 **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_lc.png') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_nw & {  /** 01 クラウド/サーバ/ネットワーク構築 **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_nw.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_tk & {  /** 02 端末・キッティング・産業廃棄運搬 **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_tk.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_ms & {  /** 03 全国・エリア工事保守サポート **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_ms.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_mo & {  /** 04 システム監視運用・ヘルプデスク  **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_mo.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_dc & {  /** 05 データセンタ  **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_dc.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_bo & {  /** 06 ビル・オフィスソリューション  **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_bo.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_ge & {  /** 07 グリーン・エコロジー  **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_ge.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_cc & {  /** 08 建業法に係る施工   **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_cc.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_es & {  /** 09 教育ソリューション  **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_es.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_io & {  /** 10 個別ソリューション  **/
                        &::before {
                            background: url('/assets/img/common/cs_solution_icon_io.svg') no-repeat;
                            background-size: contain;
                        }
                    }
                    .is_current & {
                        color: var(--cs__key_color);
                        background-color: var(--cs__btn_color02);
                        &::after {
                            content: '';
                            background: url('/assets/img/sp/top/cs_toggle_arrow_active.png') no-repeat;
                        }
                    }
                }
                .cs_sol_toggle_body {
                    display: none;
                    margin-top: 3px;
                    padding: 28px 20px 0;
                    border-radius: 6px;
                    background-color: var(--cs__bg_color02);
                    ul {
                        margin-top: 8px;
                        li {
                            border-bottom: 1px solid var(--cs__line_color02);
                            padding: 16px 0 16px 30px;
                            background: url('/assets/img/common/cs_sol_icon_feature.svg') no-repeat;
                            background-position: left center;
                        }
                    }
                    .cs_sol_related {
                        margin: 0 -20px;
                        padding: 12px;
                        border-top: 1px solid #d1e1eb;
                        & > p {
                            font-size: var(--cs__font_size_14);
                            text-align: center;
                            margin-bottom: 2px;
                            padding: 6px;
                            background-color: var(--cs__bg_color05);
                            border-radius: 3px;
                        }
                        .cs_sol_related_body {
                            padding: 12px 40px 12px 16px;
                            background-color: var(--cs__bg_color05);
                            border-radius: 3px;
                            p {
                                margin-bottom: 3px;
                                overflow: hidden;
                                display: -webkit-box;
                                text-overflow: ellipsis;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                            }
                            dl {
                                display: flex;
                                align-items: center;
                                dt {
                                    width: 120px;
                                    font-size: var(--cs__font_size_10);
                                    color: var(--cs__txt_color_lgray);
                                    background-color: var(--cs__bg_color03);
                                    font-weight: bold;
                                    padding: 4px 0 2px;
                                    text-align: center;
                                    flex: 0 0 106px;
                                }
                                dd {
                                    padding: 2px 0 0 8px;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    text-overflow: ellipsis;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                }
                            }
                        }
                    }
                    .is_current & {
                        display: block;
                    }
                }
            }
            .cs_sol_list_sp { /* ソリューション用 新規作成 */
                display: block;
            }
            .cs_sol_list_pc {
                display: none;
            }
        }
        .cs_body_sol_pc {
            display: none;
        }
        .cs_moreBtn_wrap--sol {
            margin: auto -20px;
            padding: 24px 0;
            border-bottom: 1px solid var(--cs__line_color01);
        }
        .cs_linkBtn_wrap--sol {
            margin-top: 36px;
        }
    }
    /********** CS VISION **********/
    .section_vision {
        width: 100%;
        margin: 19vw auto 0;
        padding: 0 20px;
        .cs_vision_wrap {
            display: block;
            width: 100%;
            margin: 0 auto;
            padding-top: 44px;
            padding-bottom: 210px;
            border-radius: 12px 12px 0 0;
            background-image: url('/assets/img/sp/top/cs_vision_wrap_bg.png'), url('/assets/img/sp/top/cs_vision_bg.png');
            background-repeat: no-repeat;
            background-color: var(--cs__bg_color05);
            background-position: left top, left bottom;
            background-size: contain;
            .cs_head--vision {
                text-align: center;
                span {
                    color: var(--cs__key_color);
                    font-size: var(--cs__font_size_12);
                    font-weight: bold;
                    display: inline-block;
                }
                h2 {
                    width: 230px;
                    margin: 0 auto;
                    margin-top: 10px;
                }
            }
            .cs_body_vision {
                padding-left: 0;
                p {
                    width: 74%;
                    font-size: var(--cs__font_size_14);
                    line-height: 2.0;
                    text-align: center;
                    margin: 0 auto;
                }
                .cs_linkBtn_wrap--vision {
                    width: 74%;
                    margin: 32px auto 0;
                }
            }
        }
    }
    /********** お知らせ **********/
    .section_news {
        width: 100%;
        margin: 122px auto;
        .cs_news_wrap {
            position: relative;
            padding: 20px;
            background-color: rgba(255,255,255,.4);
            backdrop-filter: blur(4px);
        }
        .cs_head--news {
            margin: 16px auto 0;
            text-align: center;
            padding-bottom: 20px;
        }
        .cs_body_news {
            width: 100%;
            margin: 0 auto;
            padding: 0 8px;
            .cs_news_list {
                .cs_news_list_item {
                    a {
                        display: block;
                        position: relative;
                        padding: 16px 48px 16px 0;
                        border-bottom: 1px solid var(--cs__line_color01);
                        &:hover {
                            .cs_news_title, time {
                                color: var(--cs__key_color);
                            }
                            .cs_arrow {
                                top: calc(50% - 32px / 2);
                                &::before {
                                    top: calc(50% - 32px / 2);
                                    left: calc(50% - 32px / 2);
                                    width: 32px;
                                    height: 32px;
                                    background-color: rgba(0,114,188,100);
                                }
                                &::after {
                                    opacity: 1;
                                    left: 8px;
                                }
                            }
                        }
                    }
                    time {
                        color: var(--cs__txt_color_gray);
                        font-weight: bold;
                        font-size: var(--cs__font_size_12);
                        width: 102px;
                        transition: ease 400ms all;
                    }
                    .cs_news_content {}
                    .cs_news_tag {
                        font-size: var(--cs__font_size_12);
                        font-weight: bold;
                        display: block;
                        margin-top: 4px;
                        transition: ease 400ms all;
                    }
                    .cs_news_title {
                        color: var(--cs__txt_color);
                        font-size: var(--cs__font_size_14);
                        display: block;
                        text-align: left;
                        transition: ease 400ms all;
                        width: 100%;
                    }
                    .cs_arrow {
                        position: absolute;
                        top: calc(50% - 32px / 2);
                        right: 15px;
                        width: 32px;
                        height: 32px;
                        transition: ease 400ms all;
                        overflow: hidden;
                        &::before {
                            position: absolute;
                            top: calc(50% - 6px / 2);
                            left: calc(50% - 6px / 2);
                            width: 6px;
                            height: 6px;
                            background:var(--cs__key_color);
                            content: "";
                            border-radius: 32px;
                            transition: ease 400ms all;
                        }
                        &::after {
                            opacity: 0;
                            position: absolute;
                            top: 10px;
                            left: -16px;
                            width: 16px;
                            height: 12px;
                            background: url(/assets/img/common/cs_arrow.svg) no-repeat center center;
                            content: "";
                            transition: ease 400ms all;
                        }
                    }
                }
            }
        }
        .cs_linkBtn_wrap--news {
            margin-top: 48px;
        }
    }
    /********** お問い合わせ **********/
    .section_contact {
        background: url('/assets/img/top/cs_contact_bg.png') center no-repeat;
        background-size: cover;
        .cs_body_contact {
            width: 100%;
            margin: 0 auto;
            padding: 60px 20px;
            ul {
                li {
                    width: 100%;
                    margin-bottom: 4px;
                    border-radius: 6px;
                    a {
                        display: flex;
                        align-items: center;
                        flex: 0 0 100%;
                        background: var(--cs__bg_color05);
                        padding: 18px 24px;
                        border-radius: 4px;
                        .cs_head--contact {
                            flex-grow: 2;
                            p {
                                color: var(--cs__txt_color);
                            }
                        }
                        .cs_contact_arrow {
                            display: flex;
                        }
                        &:hover {
                            opacity: .8;
                        }
                    }
                    .cs_head--contact {
                        margin-bottom: 6px;
                    }
                }
            }
        }
    }
    /*-----------------------------------------

    Solution
    ソリューション

    ------------------------------------------*/
    #cs_solution,
    #cs_casestudy {
        &.cs_wrapper {
            background-image: url(/assets/img/sp/solution/cs_sol_bg.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: left -84px;
            padding-bottom: 0;
            .cs_wrapper__inner {
                .section_sol {
                    width: 100%;
                    margin-top: 0;
                    padding: 48px 20px 92px;
                    background-color: transparent;
                    .cs_head {
                        h2 {
                            font-size: var(--cs__font_size_28);
                            margin-bottom: 20px;
                        }
                        p {
                            font-size: var(--cs__font_size_14);
                            padding-right: 20px;
                            line-height: 1.8;
                        }
                        &.cs_head--sol {
                            background: url(/assets/img/sp/solution/cs_sol_head_bg.png) no-repeat;
                            background-size: 318px 185px;
                            background-position: right top;
                            padding-top: 220px;
                        }
                    }
                    .cs_sol_pageNav {
                        padding: 0 16px;
                        p {
                            font-size: var(--cs__font_size_12);
                            font-weight: bold;
                            text-align: center;
                            padding: 18px 0 16px;
                            background-color: var(--cs__bg_color05);
                            border-bottom: 2px solid var(--cs__line_color01);
                            border-radius: 3px 3px 0 0;
                        }
                        ul {
                            li {
                                margin-bottom: 1px;
                                background-color: var(--cs__bg_color05);
                                a {
                                    display: block;
                                    padding: 16px 20px 16px 38px;
                                    position: relative;
                                    &::before {
                                        content: '';
                                        width: 6px;
                                        height: 6px;
                                        border-radius: 50%;
                                        background: var(--cs__key_color);
                                        position: absolute;
                                        top: calc(50% - 3px);
                                        left: 18px;
                                    }
                                    &::after {
                                        content: '';
                                        width: 16px;
                                        height: 16px;
                                        background: url(/assets/img/common/cs_arrow_under.svg) no-repeat;
                                        position: absolute;
                                        top: calc(50% - 16px / 2);
                                        right: 20px;
                                    }
                                }
                                &:last-child {
                                    border-radius: 0 0 3px 3px;
                                }
                            }
                        }
                    }
                    .cs_sol_pageNav_follow_wrap {
                        position: fixed;
                        left: 0;
                        bottom: -80px;
                        z-index: 1;
                        width: 100%;
                        height: 95px;
                        pointer-events: none;
                        /*
                        background-color: rgb(224 247 251 / .9);
                        */
                        /*transition: all 0.5s 0s ease;*/
                        &.is_show {
                            display: block;
                            opacity: 1.0;
                            pointer-events: initial;
                        }
                    }
                    .cs_sol_pageNav_follow {
                        width: 90%;
                        margin: 20px auto;
                        border-radius: 4px;
                        box-shadow: -1px -1px 10px 4px rgba(224, 247, 251, 0.8);
                        position: relative;
                        bottom: -398px;
                        transition: all 0.5s 0s ease;
                        .is_show & {
                            bottom: 0;
                            transition: all 0.5s 0s ease;
                        }
                        &.is_open {
                            /*bottom: -398px;*/
                        }
                        .cs_sol_pageNav_follow_head {
                            color: var(--cs__key_color);
                            background-color: var(--cs__bg_color05);
                            padding: 20px 24px;
                            border-radius: 4px;
                            transition: all 0.5s 0s ease;
                            span {
                                display: flex;
                                align-items: center;
                                font-weight: bold;
                                position: relative;
                                &::before {
                                    content: '';
                                    display: inline-block;
                                    background: url(/assets/img/common/cs_sol_navfollow_open.svg) no-repeat;
                                    width: 28px;
                                    height: 28px;
                                    position: absolute;
                                    top: calc(50% - 28px /2 );
                                    right: 0;
                                    transition: all .6s 0s ease;
                                    opacity: 1.0;
                                }
                                &::after {
                                    content: '';
                                    display: block;
                                    background: url(/assets/img/common/cs_sol_navfollow_close.svg) no-repeat;
                                    width: 28px;
                                    height: 28px;
                                    position: absolute;
                                    top: calc(50% - 28px /2 );
                                    right: 0;
                                    transition: all .6s 0s ease;
                                    opacity: 0;
                                }
                            }
                        }
                        .cs_sol_pageNav_follow_body {
                            display: none;
                            background-color: var(--cs__bg_color05);
                            margin-top: 6px;
                            padding: 5px 4px;
                            border-radius: 4px 4px 0 0;
                            box-shadow: -1px -1px 10px 4px rgba(224, 247, 251, 0.8);
                            transition: all .5s 0s ease;
                            position: absolute;
                            bottom: 57px;
                            p {
                                background-color: var(--cs__bg_color05);
                                font-weight: bold;
                                text-align: center;
                                margin: 0 1px 1px;
                                padding: 12px;
                                border: 1px solid transparent;
                                border-radius: 3px 3px 0 0;
                                transition: all .4s .4s ease;
                                opacity: 0;
                            }
                            ul {
                                display: flex;
                                flex-wrap: wrap;
                                transition: all .6s .5s ease;
                                opacity: 0;
                                li {
                                    width: calc(50% - 2px);
                                    background-color: var(--cs__bg_color05);
                                    margin: 1px;
                                    position: relative;
                                    /** ソリューション 順番指定 **/
                                     #cs_solution & {
                                        &:nth-child(1) { order: 0;} /* クラウド/サーバ/ネットワーク構築 */
                                        &:nth-child(2) { order: 2;} /* 端末・キッティング・産業廃棄運搬 */
                                        &:nth-child(3) { order: 4;} /* 全国・エリア工事保守サポート */
                                        &:nth-child(4) { order: 6;} /* システム監視運用・ヘルプデスク */
                                        &:nth-child(5) { order: 8;  /* データセンタ */
                                            border-radius: 0 0 0 3px;
                                        }
                                        &:nth-child(6) { order: 1;} /* ビル・オフィスソリューション */
                                        &:nth-child(7) { order: 3;} /* グリーン・エコロジー */
                                        &:nth-child(8) { order: 5;} /* 建設業法にかかわる施工 */
                                        &:nth-child(9) { order: 7;} /* 教育ソリューション */
                                        &:nth-child(10) { order: 9; /* 個別ソリューション */
                                            border-radius: 0 0 3px 0;
                                        }
                                    }
                                    /** 取り組み事例 順番指定 **/
                                    #cs_casestudy & {
                                        &:nth-child(1) { order: 0;} /* システム構築 */
                                        &:nth-child(2) { order: 2;} /* オフィス構築 */
                                        &:nth-child(3) { order: 4;  /* IoT分野 */
                                            border-radius: 0 0 0 3px;
                                        }
                                        &:nth-child(4) { order: 1;} /* グリーン・エコロジー分野 */
                                        &:nth-child(5) { order: 3;} /* 教育分野 */
                                        &:nth-child(6) { order: 5;  /* その他取り組み */
                                            border-radius: 0 0 3px 0
                                        }
                                    }
                                    &::before {
                                        content: '';
                                        width: 6px;
                                        height: 6px;
                                        border-radius: 50%;
                                        background: var(--cs__key_color);
                                        position: absolute;
                                        top: calc(50% - 3px);
                                        left: 14px;
                                    }
                                    a {
                                        display: flex;
                                        align-items: center;
                                        width: 100%;
                                        height: 50px;
                                        padding: 0 12px 0 32px;
                                    }
                                }
                            }
                        }
                        &.is_open {
                            .cs_sol_pageNav_follow_head {
                                color: var(--cs__txt_color);
                                background-color: var(--cs__bg_color03);
                                border-radius: 0 0 4px 4px;
                                span {
                                    &::before {
                                        opacity: 0;
                                    }
                                    &::after {
                                        opacity: 1.0;
                                    }
                                }
                            }
                            .cs_sol_pageNav_follow_body {
                                background-color: var(--cs__bg_color03);
                                p {
                                    opacity: 1.0;
                                }
                                ul {
                                    opacity: 1.0;
                                }
                                &::before {
                                    content: '';
                                    display: inline-block;
                                    width: 100%;
                                    height: 16px;
                                    background-color: var(--cs__bg_color03);
                                    position: absolute;
                                    left: 0;
                                    bottom: -15px;
                                }
                            }

                        }
                        /*
                        .cs_sol_pageNav_follow_close {
                            position: relative;
                            padding: 22px 20px 14px;
                            font-weight: bold;
                            &::after {
                                content: '';
                                display: block;
                                background: url(/assets/img/common/cs_sol_navfollow_close.svg) no-repeat;
                                width: 28px;
                                height: 28px;
                                position: absolute;
                                top: calc(50% - 8px);
                                right: 20px;
                            }
                        }
                        */
                    }
                    .cs_sol_cont {
                        margin-top: 32px;
                        li {
                            + .cs_sol_cont_list {
                                margin-top: 52px;
                            }
                        }
                        .cs_sol_cont_head {
                            span {
                                color: var(--cs__key_color);
                                font-size: var(--cs__font_size_12);
                            }
                            h3 {
                                font-size: var(--cs__font_size_24);
                                font-weight: bold;
                                margin: 4px 0 12px 0;
                                line-height: 1.3;
                            }
                            + .cs_sol_cont_body {
                                margin: 20px 0;
                            }
                        }
                        .cs_sol_cont_body {
                            li {
                                margin: 0;
                                + li {
                                    margin-top: 32px;
                                }
                                .cs_moreBtn {
                                    color: var(--cs__txt_color);
                                    display: flex;
                                    /*min-width: 956px;*/
                                    &:hover {
                                        color: var(--cs__key_color);
                                    }
                                }
                                .cs_sol_cont_body_inr {
                                    .cs_sol_cont_body_img {
                                        img {
                                            display: block;
                                            border: 1px solid #D9E6EF;
                                            border-radius: 4px;
                                            max-width: 386px;
                                            width: 100%;
                                        }
                                    }
                                    .cs_sol_cont_body_detail {
                                        margin-top: 12px;
                                        .cs_sol_cont_body_title {
                                            font-size: var(--cs__font_size_14);
                                            font-weight: bold;
                                            margin-bottom: 8px;
                                            &:hover {
                                                color: var(--cs__key_color);
                                            }
                                        }
                                        .cs_sol_cont_body_inc {
                                            font-size: var(--cs__font_size_14);
                                            font-weight: normal;
                                            margin-bottom: 8px;
                                        }
                                        .cs_sol_cont_body_txt {
                                            display: block;
                                            width: 100%;
                                            .cs_moreBtn_inr {
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                p {
                                                    font-size: var(--cs__font_size_10);
                                                    font-weight: normal;
                                                    padding-right: 12px;
                                                }
                                                .arrow {
                                                    flex: 0 0 38px;
                                                    transform: scale(.75);
                                                }
                                            }
                                        }
                                        .cs_label {
                                            margin-top: 8px;
                                        }
                                    }
                                }
                            }
                            .cs_sol_body_case {
                                margin-top: 32px;
                                .cs_sol_body_case_head {
                                    width: 100%;
                                    display: block;
                                    background-color: var(--cs__bg_color02);
                                    text-align: center;
                                    padding: 10px 0;
                                    margin-bottom: 4px;
                                    border-radius: 4px;
                                    span {
                                        font-size: var(--cs__font_size_10);
                                        font-weight: bold;
                                        color: var(--cs__txt_color_lgray);
                                    }
                                }
                                .cs_sol_body_case_wrap {
                                    background-color: var(--cs__bg_color02);
                                    border-radius: 4px;
                                    a {
                                        display: block;
                                        position: relative;
                                        padding: 6px;
                                        dl {
                                            display: flex;
                                            align-items: center;
                                            dt {
                                                flex: 0 0 68px;
                                                img {
                                                    display: block;
                                                }
                                            }
                                            dd {
                                                padding: 4px 40px 4px 14px;
                                                .cs_sol_body_case_txt {
                                                    overflow: hidden;
                                                    display: -webkit-box;
                                                    text-overflow: ellipsis;
                                                    -webkit-box-orient: vertical;
                                                    -webkit-line-clamp: 2;
                                                    margin-bottom: 5px;
                                                }
                                                .cs_sol_body_case_cs {
                                                    font-size: var(--cs__font_size_10);
                                                }
                                            }
                                        }
                                        .cs_arrow {
                                            position: absolute;
                                            top: calc(50% - 32px / 2);
                                            right: 6px;
                                            width: 32px;
                                            height: 32px;
                                            transition: ease 400ms all;
                                            overflow: hidden;
                                            &::before {
                                                position: absolute;
                                                top: calc(50% - 6px / 2);
                                                left: calc(50% - 6px / 2);
                                                width: 6px;
                                                height: 6px;
                                                background:var(--cs__key_color);
                                                content: "";
                                                border-radius: 32px;
                                                transition: ease 400ms all;
                                            }
                                            &::after {
                                                opacity: 0;
                                                position: absolute;
                                                top: 10px;
                                                left: -16px;
                                                width: 16px;
                                                height: 12px;
                                                background: url(/assets/img/common/cs_arrow.svg) no-repeat center center;
                                                content: "";
                                                transition: ease 400ms all;
                                            }
                                        }
                                        &:hover {
                                            .cs_sol_body_case_txt {
                                                color: var(--cs__key_color);
                                            }
                                            .cs_arrow {
                                                top: calc(50% - 32px / 2);
                                                &::before {
                                                    top: calc(50% - 32px / 2);
                                                    left: calc(50% - 32px / 2);
                                                    width: 32px;
                                                    height: 32px;
                                                    background-color: rgba(0,114,188,100);
                                                }
                                                &::after {
                                                    opacity: 1;
                                                    left: 8px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #cs_casestudy {
        .cs_head--sol {
            background-image: url(/assets/img/sp/casestudy/cs_case_head_bg.png) !important;
        }
    }
}



@media all and (min-width: 1250px) {
    /*-----------------------------------------

    TOP（PC）
    トップページ

    ------------------------------------------*/
    /********** 共通（PC） **********/
    .cs_wrapper {
        font-size: var(--cs__font_size_16);
        background-image: url('/assets/img/top/cs_top_bg001.png'),url('/assets/img/top/cs_top_bg002.png');
        background-repeat: no-repeat;
        background-size: 1920px;
        line-height: 1.6;
        .cs_wrapper__inner {
            padding: 0 32px;
        }
        .cs_head {
            padding-bottom: 36px;
            span {
                font-size: var(--cs__font_size_20);
            }
            h2 {
                font-size: var(--cs__font_size_64);
            }
            &.cs_head_small {
                padding-bottom: 0;
                span {
                    font-size: var(--cs__font_size_16);
                }
                p {
                    font-size: var(--cs__font_size_28);
                    font-weight: bold;
                    padding-top: 10px;
                    line-height: 1.1;
                }
            }
        }
        .cs_moreBtn {
            font-size: var(--cs__font_size_18);
            .arrow {
                width: 60px;
                height: 60px;
                margin-left: 16px;
                &::before,&::after {
                    content:"";
                    width: 24px;
                    height: 17px;
                    top: calc(50% - 17px / 2);
                    background-size: 24px;
                }
                &::before {
                    left: calc(50% - 24px / 2);
                }
                &::after {
                    left: -24px;
                }
                /** ボタンサイズ大 **/
                .cs_moreBtn--large & {
                    width: 78px;
                    height: 78px;
                    &::before,&::after {
                        width: 34px;
                        height: 34px;
                        background-size: 34px;
                        top: calc(50% - 34px / 2);
                    }
                    &::before {
                        left: calc(50% - 34px / 2);
                    }
                    &::after {
                        left: -34px;
                    }
                }
            }
            &:hover {
                .arrow {
                    background-color: transparent;
                    &::before {
                        left: 100%
                    }
                    &::after {
                        left: calc(50% - 24px / 2);
                    }
                    /** ボタンサイズ大 **/
                    .cs_moreBtn--large & {
                        &::after {
                            left: calc(50% - 34px / 2);
                        }
                    }
                }
            }
        }
        .cs_linkBtn {
            width: 380px;
            height: 80px;
            font-size: var(--cs__font_size_20);
            .cs_linkBtn_wrap--sol & {
                width: 432px;
            }
        }
        .cs_label {
            dt {
                font-size: var(--cs__font_size_12);
                padding: 5px 12px;
                + dt {
                    margin-left: 16px;
                }
            }
            dd {
                font-size: var(--cs__font_size_16);
                padding-left: 20px;
            }
            .cs_label_wrap & {
                margin-top: 20px;
            }
        }
        .is_active {
            display: block;
        }
        .is_hide {
            display: none;
        }
        .sp_none {
            display: block !important;
        }
        .pc_none {
            display: none !important;
        }
    }
    /********** トップビジュアル（PC） **********/
    .section_top {
        margin-left: -32px;
        margin-right: -32px;
        .cs_keyvisual {
            height: 450px;
            background-image: url(/assets/img/top/cs_top_image.png);
        }
        .cs_h1 {
            position: relative;
            z-index: 1;
            width: 650px;
            margin: calc(-420px + (100vw * 257 / 1280)) auto 0;
            text-align: center;
            padding: 0;
            h1 {
                width: 100%;
                img {
                    width: calc(100vw * 380 / 1280);
                }
            }
            span {
                display: inline-block;
                font-size: var(--cs__font_size_18);
                color: var(--cs__key_color);
                font-weight: bold;
                margin: 10px 28px;
                font-size: calc(100vw * 14 / 1280)
            }
        }
    }
    /********** 数字で見る（PC） **********/
    .section_num {
        /*display: grid;*/
        margin-top: 20px;
        padding: 0;
        background-image: none;
        .cs_head--num {
            position: relative;
            max-width: 1702px;
            p {
                padding-left: 12px;
                text-align: left;
            }
        }
        .cs_num_img {
            max-width: 1702px;
            padding: 16px 20px;
            img {
                width: 100%;
                max-width: none;
            }
        }
        .cs_linkBtn_wrap--num {
            margin-top: 42px;
        }
        /*
        .cs_img_num:nth-child(2) {
            grid-row: 2 / 4;
            grid-column: 1 / 2;
            padding-top: 6px;
            padding-right: 6px;
            img {
                height: 596px;
            }
        }
        .cs_img_num:nth-child(3) {
            grid-row: 2 / 3;
            grid-column: 2 / 4;
            padding-top: 6px;
            padding-right: 6px;
        }
        .cs_img_num:nth-child(4) {
            grid-row: 3 / 4;
            grid-column: 2 / 3;
            padding-top: 6px;
            padding-right: 6px;
        }
        .cs_img_num:nth-child(5) {
            grid-row: 3 / 4;
            grid-column: 3 / 4;
            padding-top: 6px;
            padding-right: 6px;
        }
        .cs_img_num:nth-child(6) {
            grid-row: 1 / 4;
            grid-column: 4 / 5;
            img {
                height: 750px;
            }
        }
            */
    }
    /********** 取り組み事例（PC） **********/
    .section_caseStudy {
        width: 1232px;
        margin: 0 auto;
        margin-top: 17vw;
        padding: 40px;
        background-color: rgb(255 255 255 / 0.5);
        .cs_head {
            padding-bottom: 44px;
        }
        .cs_caseStudy_tag {
            dt {
                font-size: var(--cs__font_size_12);
                padding: 5px 12px;
            }
            dd {
                font-size: var(--cs__font_size_16);
                padding-left: 20px;
            }
        }
        .cs_caseStudy_main {
            display: flex;
            .cs_caseStudy_main_img {
                width: 572px;
                img {
                    border-radius: 6px;
                    max-width: 572px;
                }
            }
            .cs_caseStudy_main_content {
                padding: 44px 0 0 32px;
                .cs_caseStudy_inc {
                    font-size: var(--cs__font_size_18);
                    margin-bottom: 12px;
                }
                p {
                    font-size: var(--cs__font_size_28);
                }
                dl {
                    margin-bottom: 24px;
                }
                .cs_caseStudy_main_btn{
                    margin-top: 52px;
                }
            }
        }
        .cs_caseStudy_thum {
            margin-top: 24px;
            .cs_caseStudy_carousel {
                width: auto;
                li {
                    width: 300px;
                    + li {
                        margin-left: 16px;
                    }
                    .cs_caseStudy_thum_img img {
                        border-radius: 4px;
                    }
                    .cs_caseStudy_thum_inc {
                        font-size: var(--cs__font_size_14);
                    }
                    p {
                    font-size: var(--cs__font_size_16);
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    margin: 8px auto 0;
                    }
                    .cs_caseStudy_tag {
                        margin-top: 8px;
                    }
                }
            }
        }
        .cs_linkBtn_wrap--cs {
            margin-top: 16px;
        }
    }
    /********** ソリューション（PC） **********/
    .section_sol {
        width: 1640px;
        margin-top: 15vw;
        padding: 0;
        background-color: transparent;
        .cs_sol_wrap {
            padding: 36px 0 36px 36px;
        }
        .cs_body_sol_sp {
            display: none;
        }
        .cs_body_sol,
        .cs_body_sol_pc {
            display: flex;
            margin-top: 12px;
            background-color: rgba(255, 255, 255, 0.4);
            .cs_sol_list,
            .cs_sol_list_pc {
                display: block;
                counter-reset: number 0;
                flex: 0 0 337px;
                padding-left: 8px;
                .cs_sol_list_title {
                    font-size: var(--cs__font_size_20);
                    font-weight: bold;
                    margin-bottom: 32px;
                }
                li {
                    margin-bottom: 30px;
                    a {
                        position: relative;
                        padding-left: 28px;
                        &::before {
                            content: '';
                            display: block;
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background-color: var(--cs__key_color);
                            position: absolute;
                            top: calc(50% - 3px);
                            transition: all .5s 0s ease;
                        }
                        &::after {
                            counter-increment: number 1;
                            content: counter(number, decimal-leading-zero) " ";
                            position: absolute;
                            left: -6px;
                            opacity: 0;
                            color: var(--cs__txt_color_white);
                            transform: scale(.2);
                            transition: all .5s 0s ease;
                        }
                        &:hover {
                            color: var(--cs__key_color);
                            font-weight: bold;
                            text-decoration: none;
                            &::before {
                                transform: scale(6.00);
                            }
                            &::after {
                                opacity: 1.0;
                                transform: scale(1.00);
                            }
                        }
                        .active & {
                            &::before {
                                transform: scale(6.00);
                            }
                            &::after {
                                opacity: 1.0;
                                transform: scale(1.00);
                            }
                        }
                    }
                }
            }
            .cs_sol_list_sp {
                display: none;
            }
            .cs_sol_main_wrap {
                margin-left: 40px;
                counter-reset: number 0;
                flex-grow: 2;
                .cs_sol_item {
                    background-color: var(--cs__bg_color02);
                    padding: 10px;
                    position: relative;
                    overflow: hidden;
                    box-shadow: -27px 13px 23px -15px rgba(161, 184, 199, .5);
                    &::before {
                        counter-increment: number 1;
                        content: counter(number, decimal-leading-zero) " ";
                        color: var(--cs__key_color);
                        font-size: var(--cs__font_size_20);
                        font-weight: bold;
                        position: absolute;
                        top: 11px;
                        left: 11px;
                        z-index: 1;
                    }
                    &::after{
                        content: '';
                        display: block;
                        width: 68px;
                        height: 68px;
                        border-radius: 50%;
                        background-color: var(--cs__bg_color02);
                        position: absolute;
                        top: -18px;
                        left: -18px;
                        z-index: 0;
                    }
                    .cs_sol_main {
                        display: flex;
                        .is_lc & {  /** ローコード開発 **/
                            background: url('/assets/img/common/cs_solution_service_lc.png') no-repeat;
                        }
                        .is_nw & {  /** 01 クラウド/サーバ/ネットワーク構築 **/
                            background: url('/assets/img/common/cs_solution_service_01.png') no-repeat;
                        }
                        .is_tk & {  /** 02 端末・キッティング・産業廃棄運搬 **/
                            background: url('/assets/img/common/cs_solution_service_02.png') no-repeat;
                        }
                        .is_ms & {  /** 03 全国・エリア工事保守サポート **/
                            background: url('/assets/img/common/cs_solution_service_03.png') no-repeat;
                        }
                        .is_mo & {  /** 04 システム監視運用・ヘルプデスク **/
                            background: url('/assets/img/common/cs_solution_service_04.png') no-repeat;
                        }
                        .is_dc & {  /** 05 データセンタ **/
                            background: url('/assets/img/common/cs_solution_service_05.png') no-repeat;
                        }
                        .is_bo & {  /** 06 ビル・オフィスソリューション **/
                            background: url('/assets/img/common/cs_solution_service_06.png') no-repeat;
                        }
                        .is_ge & {  /** 07 グリーン・エコロジー **/
                            background: url('/assets/img/common/cs_solution_service_07.png') no-repeat;
                        }
                        .is_cc & {  /** 08 建業法に係る施工 **/
                            background: url('/assets/img/common/cs_solution_service_08.png') no-repeat;
                        }
                        .is_es & {  /** 09 教育ソリューション **/
                            background: url('/assets/img/common/cs_solution_service_09.png') no-repeat;
                        }
                        .is_io & {  /** 10 個別ソリューション **/
                            background: url('/assets/img/common/cs_solution_service_10.png') no-repeat;
                        }
                    }
                    .cs_sol_main_body {
                        margin-left: 366px;
                        padding: 36px 40px 0 40px;
                        .cs_sol_detail {
                            .cs_sol_detail_title {
                                color: var(--cs__txt_color);
                                font-size: var(--cs__font_size_28);
                                font-weight: bold;
                                padding: 2px 0;
                                padding-left: 52px;
                                margin-bottom: 20px;
                                [class^="is_"] & {
                                    background-position: left top;
                                }
                                .is_lc & {  /** ローコード開発 **/
                                    background: url('/assets/img/common/cs_solution_icon_lc.png') no-repeat;
                                    background-position: left top;
                                }
                                .is_nw & {  /** 01 クラウド/サーバ/ネットワーク構築 **/
                                    background: url('/assets/img/common/cs_solution_icon_nw.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_tk & {  /** 02 端末・キッティング・産業廃棄運搬 **/
                                    background: url('/assets/img/common/cs_solution_icon_tk.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_ms & {  /** 03 全国・エリア工事保守サポート **/
                                    background: url('/assets/img/common/cs_solution_icon_ms.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_mo & {  /** 04 システム監視運用・ヘルプデスク **/
                                    background: url('/assets/img/common/cs_solution_icon_mo.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_dc & {  /** 05 データセンタ **/
                                    background: url('/assets/img/common/cs_solution_icon_dc.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_bo & {  /** 06 ビル・オフィスソリューション **/
                                    background: url('/assets/img/common/cs_solution_icon_bo.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_ge & {  /** 07 グリーン・エコロジー **/
                                    background: url('/assets/img/common/cs_solution_icon_ge.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_cc & {  /** 08 建業法に係る施工 **/
                                    background: url('/assets/img/common/cs_solution_icon_cc.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_es & {  /** 09 教育ソリューション **/
                                    background: url('/assets/img/common/cs_solution_icon_es.svg') no-repeat;
                                    background-position: left top;
                                }
                                .is_io & {  /** 10 個別ソリューション **/
                                    background: url('/assets/img/common/cs_solution_icon_io.svg') no-repeat;
                                    background-position: left top;
                                }
                            }
                            .cs_sol_features {
                                margin-top: 48px;
                                > p {
                                    color: var(--cs__txt_color_lgray);
                                    font-weight: bold;
                                }
                                .cs_sol_services {
                                    height: 228px;
                                }
                                ul {
                                    display: flex;
                                    flex-wrap: wrap;
                                    li {
                                        width: calc(50% - 16px);
                                        margin-top: 16px;
                                        margin-right: 16px;
                                        padding: 0 0 16px 30px;
                                        background: url('/assets/img/common/cs_sol_icon_feature.svg') no-repeat;
                                        border-bottom: 1px solid var(--cs__line_color02);
                                        &:nth-child(n+3) {
                                            margin-top: 28px;
                                        }
                                    }

                                }
                                .cs_moreBtn_wrap--sol {
                                    display: flex;
                                    justify-content: center;
                                    margin: 20px auto;
                                    padding-right: 20px;
                                    border-bottom: none;
                                }
                            }
                        }
                        .cs_sol_main_related {
                            position: relative;
                            padding: 36px 40px;
                            margin: 0 -50px 0 -40px;
                            border-top: 2px solid #b2cdde;
                            .cs_sol_main_related_inr {
                                display: flex;
                                > p {
                                    flex: 0 0 103px;
                                    margin-right: 4px;
                                    line-height: 103px;
                                    text-align: center;
                                    color: var(--cs__txt_color_lgray);
                                    background-color: var(--cs__bg_color05);
                                }
                                .cs_sol_related_body {
                                    padding: 19px 32px;
                                    background-color: var(--cs__bg_color05);
                                    p {
                                        overflow: hidden;
                                        display: -webkit-box;
                                        text-overflow: ellipsis;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 1;
                                    }
                                    dl {
                                        display: flex;
                                        align-items: center;
                                        margin-top: 11px;
                                        dt {
                                            font-size: var(--cs__font_size_12);
                                            color: var(--cs__txt_color_lgray);
                                            background-color: var(--cs__bg_color03);
                                            font-weight: bold;
                                            padding: 5px 12px;
                                        }
                                        dd {
                                            font-size: var(--cs__font_size_16);
                                            padding-left: 20px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .cs_linkBtn_wrap--sol {
            margin-top: 60px;
        }
    }
    /********** CS VISION（PC） **********/
    .section_vision {
        .cs_vision_wrap {
            display: flex;
            width: 1306px;
            margin: 0 auto;
            padding-top: 100px;
            padding-bottom: 0;
            background-image: url('/assets/img/top/cs_vision_wrap_bg.png');
            background-repeat: no-repeat;
            background-position: left top;
            background-size: cover;
            background-clip: border-box;
            .cs_head--vision {
                flex: 0 0 545px;
                text-align: left;
                span {
                    font-size: var(--cs__font_size_20);
                    padding-left: 16px;
                }
                h2 {
                    width: auto;
                    margin: auto;
                    margin-top: 12px;
                }
            }
            .cs_body_vision {
                padding-left: 148px;
                p {
                    width: 556px;

                    font-size: var(--cs__font_size_18);
                    line-height: 1.8;
                    text-align: left;
                }
                .cs_linkBtn_wrap--vision {
                    margin-top: 68px;
                }
            }
        }
    }
    /********** お知らせ（PC） **********/
    .section_news {
        width: 1254px;
        .cs_news_wrap {
            background-color: rgba(255,255,255,.4);
        }
        .cs_head--news {
            margin: 48px auto 12px;
            text-align: center;
        }
        .cs_body_news {
            width: 954px;
            padding: 0;
            .cs_news_list {
                .cs_news_list_item {
                    a {
                        display: flex;
                        align-items: baseline;
                        position: relative;
                        justify-content: left;
                        padding: 40px 104px 40px 40px;
                        &:hover {
                            .cs_news_tag, .cs_news_title, time {
                                color: var(--cs__key_color);
                            }
                            .cs_arrow {
                                top: calc(50% - 32px / 2);
                                &::before {
                                    top: calc(50% - 32px / 2);
                                    left: calc(50% - 32px / 2);
                                    width: 32px;
                                    height: 32px;
                                    background-color: rgba(0,114,188,100);
                                }
                                &::after {
                                    opacity: 1;
                                    left: 8px;
                                }
                            }
                        }
                    }
                    .cs_news_date {
                        margin-right: 24px;
                        width: auto;
                        min-width: 130px;
                    }
                    .cs_news_content {
                    }
                    .cs_news_tag {
                        font-size: var(--cs__font_size_14);
                        margin-top: 0;
                        margin-bottom: 4px;
                    }
                    .cs_news_title {
                        font-size: var(--cs__font_size_16);
                    }
                    .cs_arrow {
                        position: absolute;
                        top: calc(50% - 32px / 2);
                        right: 15px;
                        width: 32px;
                        height: 32px;
                        transition: ease 400ms all;
                        overflow: hidden;
                        &::before {
                            position: absolute;
                            top: calc(50% - 6px / 2);
                            left: calc(50% - 6px / 2);
                            width: 6px;
                            height: 6px;
                            background:var(--cs__key_color);
                            content: "";
                            border-radius: 32px;
                            transition: ease 400ms all;
                        }
                        &::after {
                            opacity: 0;
                            position: absolute;
                            top: 10px;
                            left: -16px;
                            width: 16px;
                            height: 12px;
                            background: url(/assets/img/common/cs_arrow.svg) no-repeat center center;
                            content: "";
                            transition: ease 400ms all;
                        }
                    }
                }
            }
        }
        .cs_linkBtn_wrap--news {
            margin-top: 48px;
        }
    }
    /********** お問い合わせ（PC） **********/
    .section_contact {
        background: url('/assets/img/top/cs_contact_bg.png') center no-repeat;
        background-size: cover;
        margin: 0 -32px;
        .cs_body_contact {
            width: 954px;
            margin: 0 auto;
            padding: 160px 0;
            ul {
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
                li {
                    &:nth-child(n+2) {
                        width: calc(50% - 2px);
                        flex: 0 0 calc(50% - 2px);
                    }
                    &:nth-child(2) {
                        margin-right: 4px;
                    }
                    .cs_head--contact {
                        margin-bottom: 10px;
                    }
                    a {
                        padding: 44px 48px;
                    }
                }
            }
        }
    }
    /*-----------------------------------------

    Solution（PC）
    ソリューション

    ------------------------------------------*/
    #cs_solution,
    #cs_casestudy {
        &.cs_wrapper {
            background-image: url(/assets/img/solution/cs_sol_bg.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right 0px;
            padding-bottom: 180px;
            a img { opacity: 1.0; }
            .cs_wrapper__inner {
                overflow: initial;
                .section_sol {
                    width: 100%;
                    margin-top: 0;
                    padding-bottom: 0;
                    .cs_head {
                        h2 {
                            font-size: clamp(62px, 5vw, 80px);
                            margin-bottom: 28px;
                        }
                        p {
                            font-size: var(--cs__font_size_18);
                            width: 750px;
                            padding-right: 0;
                            line-height: inherit;
                        }
                        &.cs_head--sol {
                            background: url(/assets/img/solution/cs_sol_head_bg.png) no-repeat;
                            background-size: clamp(566px, 50%, 862px);
                            background-position: top right calc(((100vw - 1250px) * 50 / 335) + 52px);
                            padding: 52px 0 204px calc((100vw - 1250px) * 50 / 335);
                            margin-right: -52px;
                        }
                    }
                    .cs_body_sol {
                        align-items: flex-start;
                        background-color: transparent;
                        .cs_sol_list_pc {
                            position: sticky;
                            top: 200px;
                        }
                    }
                    .cs_sol_cont {
                        margin-top: -28px;
                        margin-left: 3.5%;
                        flex-grow: 2;
                        padding: 28px 0 28px 28px;
                        background-color: rgb(255 255 255 / 0.3);
                        max-width: 1280px;
                        li {
                            + .cs_sol_cont_list {
                                margin-top: 112px;
                            }
                        }
                        .cs_sol_cont_head {
                            margin-bottom: 32px;
                            span {
                                font-size: var(--cs__font_size_16);
                            }
                            h3 {
                                font-size: var(--cs__font_size_40);
                                margin: 0 0 10px 4px;
                                line-height: 1.7;
                            }
                            p {
                                font-size: var(--cs__font_size_18);
                            }
                            + cs_sol_cont_body {
                                margin-top: 32px;
                            }
                        }
                        .cs_sol_cont_body {
                            li {
                                /*display: flex;
                                min-width: 956px;*/
                                margin: 0;
                                padding-bottom: 32px;
                                border-bottom: 1px solid var(--cs__line_color01);
                                .cs_sol_cont_body_inr {
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    max-width: 1250px;
                                    .cs_sol_cont_body_img {
                                        /*flex: 0 0 386px;*/
                                        img {
                                            display: block;
                                            width: clamp( 256px, 26vw, 386px );
                                        }
                                    }
                                    .cs_sol_cont_body_detail {
                                        flex-grow: 2;
                                        margin-top: 0;
                                        padding: 0 36px 0 32px;
                                        .cs_sol_cont_body_title {
                                            font-size: var(--cs__font_size_28);
                                            font-weight: bold;
                                            margin-bottom: 12px;
                                            line-height: 1.45;
                                        }
                                        .cs_sol_cont_body_inc {
                                            font-size: var(--cs__font_size_18);
                                            margin-bottom: 12px;
                                        }
                                        .cs_sol_cont_body_txt {
                                            .cs_moreBtn_inr {
                                                display: flex;
                                                justify-content: space-between;
                                                p {
                                                    font-size: var(--cs__font_size_18);
                                                    padding-right: 32px;
                                                }
                                                .arrow {
                                                    flex: 0 0 60px;
                                                    transform: scale(1.0);
                                                }
                                            }
                                        }
                                        .cs_label {
                                            margin-top: 20px;
                                        }
                                    }
                                }
                            }
                            .cs_sol_body_case {
                                display: flex;
                                width: 92%;
                                .cs_sol_body_case_head {
                                    width: 176px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    flex: 0 0 176px;
                                    padding: 0;
                                    margin-bottom: 0;
                                    span {
                                        font-size: var(--cs__font_size_16);
                                        color: var(--cs__txt_color);
                                    }
                                }
                                .cs_sol_body_case_wrap {
                                    margin-left: 4px;
                                    a {
                                        display: block;
                                        position: relative;
                                        padding: 20px;
                                        dl {
                                            display: flex;
                                            align-items: center;
                                            dt {
                                                flex: none;
                                            }
                                            dd {
                                                padding: 0 142px 0 32px;
                                                .cs_sol_body_case_txt {
                                                    font-size: var(--cs__font_size_18);
                                                    font-weight: bold;
                                                    margin-bottom: 16px;
                                                }
                                                .cs_sol_body_case_cs {
                                                    font-size: var(--cs__font_size_12);
                                                }
                                            }
                                        }
                                        .cs_arrow {
                                            position: absolute;
                                            top: calc(50% - 32px / 2);
                                            right: 52px;
                                            width: 32px;
                                            height: 32px;
                                            transition: ease 400ms all;
                                            overflow: hidden;
                                            &::before {
                                                position: absolute;
                                                top: calc(50% - 6px / 2);
                                                left: calc(50% - 6px / 2);
                                                width: 6px;
                                                height: 6px;
                                                background:var(--cs__key_color);
                                                content: "";
                                                border-radius: 32px;
                                                transition: ease 400ms all;
                                            }
                                            &::after {
                                                opacity: 0;
                                                position: absolute;
                                                top: 10px;
                                                left: -16px;
                                                width: 16px;
                                                height: 12px;
                                                background: url(/assets/img/common/cs_arrow.svg) no-repeat center center;
                                                content: "";
                                                transition: ease 400ms all;
                                            }
                                        }
                                        &:hover {
                                            .cs_sol_body_case_txt {
                                                color: var(--cs__key_color);
                                            }
                                            .cs_arrow {
                                                top: calc(50% - 32px / 2);
                                                &::before {
                                                    top: calc(50% - 32px / 2);
                                                    left: calc(50% - 32px / 2);
                                                    width: 32px;
                                                    height: 32px;
                                                    background-color: rgba(0,114,188,100);
                                                }
                                                &::after {
                                                    opacity: 1;
                                                    left: 8px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .cs_sol_pageNav_follow_wrap {
                        &.is_show {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    #cs_casestudy {
        .cs_head--sol {
            background-image: url(/assets/img/casestudy/cs_case_head_bg.png) !important;
        }
    }
}

@media all and (min-width: 1601px) {
    /*-----------------------------------------

    TOP（PC）
    トップページ

    ------------------------------------------*/
    /********** トップビジュアル（PC） **********/
    .section_top {
        .cs_h1 {
            width: 650px;
            margin: 56px auto 0;
            text-align: center;
            padding: 0;
            h1 {
                width: 100%;
                img {
                    width: 500px;
                }
            }
            span {
                margin: 28px;
                font-size: 18px;
            }
        }
    }
    /********** 数字で見る（PC） **********/
    .section_num {
        margin-top: 72px;
    }
}
@media all and (min-width: 1780px) {
    /*-----------------------------------------

    Solution（PC）
    ソリューション

    ------------------------------------------*/
    #cs_solution,
    #cs_casestudy {
        &.cs_wrapper {
            .cs_wrapper__inner {
                .section_sol {
                    .cs_head {
                        h2 {
                            font-size: var(--cs__font_size_80);
                            margin-bottom: 28px;
                        }
                        p {
                        }
                        &.cs_head--sol {
                            background: url(/assets/img/solution/cs_sol_head_bg.png) no-repeat;
                            background-size: 862px;
                            background-position: top left 734px;
                            padding: 52px 0 204px 79px;
                            margin-right: -52px;
                        }
                    }
                }
            }
        }
    }
}