/* hero */

.hero {
    background: url(/-/media/ind/cs/about/image/hero_bg.png) no-repeat center center;
    background-size: cover;
}

.hero h1 {
    color: #fff;
    text-align: center;
}

.hero .cta-block {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* とは */

.about .hedding-block .subtext {
    margin-top: 50px;
}

.about .content-block ul {
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.about .content-block ul li img {
    max-width: 240px;
}

.about .content-block ul li p {
    margin-top: 30px;
    max-width: 240px;
    text-align: center;
}

.about .content-block h3 {
    margin-top: 80px;
    text-align: center;
}

.about .content-block .image-box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.about .content-block .note {
    margin: 50px auto 0;
    max-width: 700px
}

@media screen and (max-width: 767px) {
    .about .content-block ul {
        flex-direction: column;
    }

    .about .content-block ul li {
        text-align: center;
    }

    .about .content-block ul li img {
        width: 80%;
    }
    
    .about .content-block ul li p {
        max-width: unset;
    }

    .about .content-block .image-box {
        margin-top: 1rem;
        gap: 2rem;
        flex-direction: column;
    }

    .about .content-block .image-box img {
        width: 80%;
        margin: 0 auto;
    }
}

/* ソリューションマップ */

.solution-map {
    background: var(--bg-color1);
}

.solution-map .content-block {
    text-align: center;
}

.solution-map .content-block img {
    max-width: 1080px;
}

/* 主要製品 */

.product .content-block .main-products {
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 68px;
}

.product .content-block .main-products li {
    max-width: 380px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.product .content-block .main-products li .image-box {
    width: 380px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #f2f2f2;
    border-radius: 20px;
}

.product .content-block .main-products li h3 {
    white-space: nowrap;
}

.product .content-block .main-products li .cta-box a.button-white {
    max-width: 224px;
    padding: 13px;
}

.product .content-block .hedding-box {
    margin-top: 80px;
    text-align: center;
}

.product .content-block .hedding-box .title {
    display: inline-block;
    padding: 12px 50px;
    border: 2px solid #c1bfbf;
}

.product .content-block .category-cloud {
    margin-top: 50px;
}

.product .content-block .category-on-premise {
    margin-top: 80px;
}

.product .content-block .other-products {
    margin-top: 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 51px;
}

.product .content-block .other-products li {
    max-width: 280px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.product .content-block .other-products li .image-box {
    width: 280px;
    height: 142px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #f2f2f2;
    border-radius: 20px;
}

.product .content-block .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
    margin: 0 auto;
}

.product .content-block table {
    margin-top: 50px;
    width: 100%;
}

.product .content-block table th {
    background: #333;
    color: #fff;
    border: 1px solid #c1bfbf;
}

.product .content-block table td {
    padding: 34px 11px;
    border: 1px solid #c1bfbf;
}

.product .content-block table td.image {
    width: 234px;
    text-align: center;
}

.product .content-block table td.image img {
    max-width: 190px;
    text-align: center;
}

.product .content-block table td.function {
    width: 520px;
}

.product .content-block table td.function ul {
    padding-left: 24px;
}

.product .content-block table td.function ul li {
    list-style-type: disc;
}

.product .content-block table td.function ul li.highlight {
    color: #c02;
}

.product .content-block table td.feature {
    width: 520px;
}

.product .content-block table td.feature ul {
    padding-left: 18px;
}

.product .content-block table td.feature ul li {
    list-style-type: disc;
}

@media screen and (max-width: 767px) {
    .product .content-block .main-products {
        flex-direction: column;
    }

    .product .content-block .main-products li {
        gap: 1rem;
    }

    .product .content-block .main-products li .image-box {
        width: 100%;
    }

    .product .content-block .main-products li .cta-box a.button-white {
        margin: 0 auto;
        display: block;
    }

    .product .content-block .other-products li {
        max-width: unset;
        gap: 1rem;
    }

    .product .content-block .other-products li .image-box {
        width: 100%;
    }

    .product .content-block table {
        min-width: 800px;
    }
}