@charset "UTF-8";

/* ユーティリティ */
@media (max-width: 768px) {
    .ccm-page {
        .gr-sp-hide {
            display: none;
        }
    }
}

/* スローガン */
.ccm-page {
    #gr-slogan-section {
        background: #1254a2;
        color: #fff;
        padding: 4rem 0 6rem;
    }
    .gr-slogan-title {
        font-size: 2.2rem;
        line-height: 1.2;
        text-align: center;
        font-weight: 700;
        margin-bottom: 6rem;
    }
    .gr-slogan-text {
        text-align: center;
    }
}
@media (max-width: 768px) {
    .ccm-page {
        #gr-slogan-section {
            padding: 3rem 0 2rem;
        }
        .gr-slogan-title {
            font-size: 1.7rem;
            margin-bottom: 2.5rem;
        }
    }
}

/* 部門 */
.ccm-page {
    #gr-org-section {
        padding: 6rem 0 18rem;
        position: relative;
        overflow: hidden;
        .gr-org-section__bg {
            min-width: 147rem;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            z-index: -1;
        }
    }
    .gr-org-image {
        margin: 0 auto 1.6rem;
        max-width: 86.5rem;
        display: block;
        width: 100%;
    }
    .gr-org-result {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        dt {
            background: #1254a2;
            color: #fff;
            padding: 0 0.8rem;
            font-weight: 400;
        }
        dd {
            color: #1254a2;
            font-weight: 700;
            margin: 0;
        }
    }
}
@media (max-width: 768px) {
    .ccm-page {
        #gr-org-section {
            padding: 2rem 0 8rem;
            .gr-org-section__bg {
                min-width: 63rem;
            }
        }
        .gr-org-image {
            margin-bottom: 1rem;
        }
    }
}
@media (max-width: 600px) {
    .ccm-page {
        .gr-org-result {
            display: grid;
            grid-template-columns: auto auto;
        }
    }
}

/* 部門リスト */
.ccm-page {
    #gr-org-list-section {
        padding: 6rem 0 7.5rem;
        .section__in {
            padding-inline: 2rem;
            max-width: 158rem;
            margin-inline: auto;
        }
    }
    .gr-org-list {
        display: grid;
        gap: 6.5rem;
        .gr-org-list__item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 4.5rem;
            align-items: flex-start;
        }
        .gr-org-list__item-title {
            border-radius: calc(1px * infinity);
            color: #fff;
            font-weight: 700;
            font-size: 2.4rem;
            line-height: 1.2;
            min-width: 36rem;
            min-height: 10rem;
            display: grid;
            place-content: center;
            text-align: center;
        }
        .gr-org-list__item-title--1 { background: #00b7de; }
        .gr-org-list__item-title--2 { background: #eb798e; }
        .gr-org-list__item-title--3 { background: #9f69a8; }
        .gr-org-list__item-title--4 { background: #84b771; }
        .gr-org-list__item-title--5 { background: #00b0a0; }
        .gr-org-list__item-text {
            line-height: 1.75;
            margin: 0;
        }
    }
    .gr-cta {
        margin-top: 9rem;
        .gr-cta__button {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            border: 1px solid #1254a2;
            border-radius: calc(1px * infinity);
            width: fit-content;
            margin-inline: auto;
            font-size: 2.2rem;
            color: #1254a2;
            padding: 1.3rem 2.5rem;
            gap: 0.2rem 1.5rem;
            img {
                width: 23rem;
            }
        }
    }
}
@media (max-width: 992px) {
    .ccm-page {
        #gr-org-list-section {
            padding: 3.5rem 0 7rem;
        }
        .gr-org-list {
            gap: 3.5rem;
            .gr-org-list__item {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .gr-org-list__item-title {
                font-size: 1.4rem;
                min-width: 21rem;
                min-height: 6rem;
                margin-inline: auto;
            }
        }
        .gr-cta {
            .gr-cta__button {
                font-size: 1.5rem;
                gap: 0.2rem 0.8rem;
                padding: 1rem 2rem;
                img {
                    width: 15rem;
                }
            }
        }
    }
}