:root{--base-color: #17817D;--hover-color: #333;--bg-color: #F2FBFB;--heading-color: #00958F}.hs-content-footer{background-image:url(/r23res/image/products/closeup_bg_sm.jpg)}
@media(min-width: 768px){.hs-content-footer{background-image:url(/r23res/image/products/closeup_bg_lg.jpg)}}.hs-main-visual{background-image:url("/ktds/asset/images/common/mv_small_sm.jpg")}@media(min-width: 768px){.hs-main-visual{background-image:url(/ktds/asset/images/common/mv_small_lg.jpg)}}

/*----------------------------------
建設・都市向けDXソリューションサイト用カスタマイズ
----------------------------------*/
/*
* 「もっと知る」の背景色をheading-colorに変更
*/
.hs-content-footer{
    background-color:var(--heading-color);
}

/*
* ボタンの背景色をbase-colorに変更
*/
.hs-c-button{
    background-color:var(--base-color);
}
/*
* heading-colorの文字色用
*/
.hs-text-theme-color{
    color:var(--heading-color);
}
/*
* ボタンの横幅揃え*/
.hs-c-button--width-pc{
    min-width: 340px;
}
/*
* 建設・都市向けDXソリューションとは-図版
*/
.hs-ktds-fig {
    position: relative;
    width: 100%;
    aspect-ratio: 1061 / 567;
}
.hs-ktds-fig a:hover {
    transition: .3s;
    filter: drop-shadow(0px 0px 8px #999999);
}
.hs-ktds-fig--01 {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 1.8%;
    z-index: 0;
    transform: translateY(-50%);
    width: 23%;
    animation: f1 forwards 1s ease 2s;
}
.hs-ktds-fig--02-1 {
    opacity: 0;
    position: absolute;
    top: 24%;
    left: 23%;
    z-index: -1;
    transform: translate(-10%,-50%);
    width: 43%;
    animation: f21 forwards 1s ease 3s;
}
.hs-ktds-fig--02-2 {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 23%;
    z-index: -1;
    transform: translate(-10%,-50%);
    width: 43%;
    animation: f22 forwards 1s ease 5s;
}
.hs-ktds-fig--02-3 {
    opacity: 0;
    position: absolute;
    top: 76%;
    left: 23%;
    z-index: -1;
    transform: translate(-10%,-50%);
    width: 43%;
    animation: f23 forwards 1s ease 7s;
}
.hs-ktds-fig--03 {
    opacity: 0;
    position: absolute;
    top: 24%;
    left: 26%;
    z-index: 0;
    transform: translateY(-50%);
    width: 11%;
    animation: f3 forwards 1s ease 4s;
}
.hs-ktds-fig--04 {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 26%;
    z-index: 0;
    transform: translateY(-50%);
    width: 11.5%;
    animation: f4 forwards 1s ease 6s;
}
.hs-ktds-fig--05 {
    opacity: 0;
    position: absolute;
    top: 76%;
    left: 26%;
    z-index: 0;
    transform: translateY(-50%);
    width: 11.5%;
    animation: f5 forwards 1s ease 8s;
}
.hs-ktds-fig--06 {
    display: block;
    opacity: 0;
    position: absolute;
    top: 24%;
    left: 39%;
    z-index: 0;
    transform: translate(-10%,-50%);
    width: 20%;
    animation: f6 forwards 1s ease 4s;
    aspect-ratio: 212 / 86.8;
}
.hs-ktds-fig--07 {
    display: block;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 39%;
    z-index: 0;
    transform: translate(-10%,-50%);
    width: 20%;
    animation: f7 forwards 1s ease 6s;
    aspect-ratio: 212 / 86.8;
}
.hs-ktds-fig--08 {
    display: block;
    opacity: 0;
    position: absolute;
    top: 76%;
    left: 39%;
    z-index: 0;
    transform: translate(-10%,-50%);
    width: 20%;
    animation: f8 forwards 1s ease 8s;
    aspect-ratio: 212 / 86.8;
}
.hs-ktds-fig--09 {
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 2.2%;
    z-index: -2;
    transform: translateY(-50%);
    width: 38%;
    animation: f9 forwards 2s ease 9s;
}
@keyframes f1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes f21 {
    0% {
        opacity: 0;
        transform: translate(-10%,-50%);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
    }
}
@keyframes f22 {
    0% {
        opacity: 0;
        transform: translate(-10%,-50%);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
    }
}
@keyframes f23 {
    0% {
        opacity: 0;
        transform: translate(-10%,-50%);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
    }
}
@keyframes f3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes f4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes f5 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes f6 {
    0% {
        opacity: 0;
        transform: translate(-10%,-50%);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
    }
}
@keyframes f7 {
    0% {
        opacity: 0;
        transform: translate(-10%,-50%);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
    }
}
@keyframes f8 {
    0% {
        opacity: 0;
        transform: translate(-10%,-50%);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
    }
}
@keyframes f9 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}