:root {
    --color-orange: #FF6421;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.article_style1 .cps-post-box {
    padding: 0;
    background-color: #fff;
}

section,
.case__intro {
    padding-inline: 0px;
}

br.--sp {
    display: block;
}

img {
    vertical-align: middle;
}


/* cta */
.case__cta {
    margin-top: calc(40 / 16 * 1rem);
}

.case__cta a {
    background: linear-gradient(107.61deg, #54dcef 7.99%, #0794E8 91.12%);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 18px;
}

.case__cta a::after {
    content: "";
    display: block;
    width: 16px;
    height: 20px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    aspect-ratio: 1;
    background-color: #fff;
}

.case__heading {
    width: 100%;
    background-color: #333;
    padding: calc(35 / 16 * 1rem) 0 calc(35 / 16 * 1rem) calc(30 / 16 * 1rem);
    background-image: url(../../assets/img/case-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 26%;
}

.case__heading h2 {
    font-size: calc(26 / 16 * 1rem);
    color: #fff;
}

.case__intro {
    text-align: center;
    margin-top: calc(60 / 16 * 1rem);
}

.case__intro p:first-child {
    font-size: clamp(1rem, 1.125rem + 0.63vw, 1.875rem);
    font-weight: 700;
    font-weight: bold;
}

.case__intro span {
    font-size: calc(50 / 30 * 1em);
    font-weight: 700;
    font-weight: bold;
    font-weight: bold;
    color: #0306B5;
    display: block;
}

.case__intro p:last-child {
    font-size: calc(17 / 16 * 1rem);
}

.case__title {
    font-weight: 700;
    font-weight: bold;
    font-size: calc(27 / 16 * 1rem);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.case__title::after {
    content: "";
    width: 60px;
    height: 6px;
    background-color: var(--color-orange);
    display: block;
}

/* お客様の声 */
.customerVoice {
    margin-top: calc(50 / 16 * 1rem);
}

.customerVoice__body {
    margin-top: calc(30 / 16 * 1rem);
}

.customerVoice__item+.customerVoice__item {
    margin-top: calc(10 / 16 * 1rem);
}


.customerVoice__item {
    padding: calc(17 / 16 * 1rem) calc(20 / 16 * 1rem);
    background-color: #FEFEEB;
    display: grid;
    gap: 1rem;
}

.customerVoice__title {
    font-size: calc(18 / 16 * 1rem);
    font-weight: 700;
    font-weight: bold;
}

.customerVoice__job {
    font-size: calc(13 / 16 * 1rem);
    font-weight: 500;
    color: var(--color-orange);
}

.customerVoice__text {
    font-size: calc(16 / 16 * 1rem);
}

.customerVoice__figure {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: gray;
    inline-size: 80%;
    margin-inline: auto;
}

.customerVoice__figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}


/* よくある事例集 */
.example {
    margin-top: calc(110 / 16 * 1rem);
    padding-inline: 10px;
    padding-bottom: 3rem;
}

.example__title,
.example__desc,
.example__tag {
    padding-inline: calc(20 / 16 * 1rem);
}

.example__text {
    text-align: center;
    margin-top: calc(20 / 16 * 1rem);

}

.example__body {
    display: grid;
    row-gap: calc(40 / 16 * 1rem);
    margin-top: calc(30 / 16 * 1rem);
}

.example__item {
    display: grid;
}

.example__figure img {
    width: 100%;
}

.example__link {
    display: grid;
    gap: .5rem;
}

.example__figure {
    order: 1;
}

.example__title {
    order: 2;
    font-size: calc(18 / 16 * 1rem);
}

.example__desc {
    order: 3;
    font-size: calc(13 / 16 * 1rem);
}

.example__other {
    display: flex;
    justify-content: center;
}

.example__other a {
    color: var(--color-orange);
    font-size: calc(18 / 16 * 1rem);
    border: 3px solid var(--color-orange);
    padding: calc(10 / 16 * 1rem);
    max-width: 240px;
    color: var(--color-orange) !important;
    font-weight: 700;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.example__tag {
    margin-top: calc(10 / 16 * 1rem);
}

.example__other {
    margin-top: calc(40 / 16 * 1rem);
}

.example__other a::after {
    content: "";
    display: block;
    clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
    height: 1rem;
    aspect-ratio: 1;
    background-color: var(--color-orange);
}

@media screen and (min-width: 600px) {

    section,
    .case__intro {
        padding-inline: 30px;
    }

    br.--sp {
        display: none;
    }

    .case__cta a {
        font-size: 22px;
    }

    .case__heading {
        padding-left: calc(70 / 16 * 1rem);
    }

    .case__intro span {
        display: inline;
    }


    .customerVoice__item {
        display: grid;
        grid-template-areas: "figure job" "figure title" "figure text";
        column-gap: calc(14 / 16 * 1rem);
        row-gap: 0;
        grid-template-columns: calc(146/16*1rem) 1fr;
        padding: calc(17 / 16 * 1rem) calc(33 / 16 * 1rem) calc(13 / 16 * 1rem) calc(17 / 16 * 1rem);
    }

    .customerVoice__title {
        grid-area: title;
    }

    .customerVoice__job {
        grid-area: job;
    }

    .customerVoice__text {
        grid-area: text;
    }

    .customerVoice__figure {
        grid-area: figure;
        inline-size: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .customerVoice__figure img {
        inline-size: 100%;
    }


    .example__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(10 / 16 * 1rem);
        row-gap: calc(40 / 16 * 1rem);
    }

    .customerVoice__figure {
        inline-size: 100%;
    }

}